diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 69bbf07..8db76b5 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -18,6 +18,7 @@ import ZapAnimation from '../ZapAnimation/ZapAnimation';
import Landing from '../../pages/Landing';
import ReactionsModal from '../ReactionsModal/ReactionsModal';
import { useAppContext } from '../../contexts/AppContext';
+import CustomZap from '../CustomZap/CustomZap';
export const [isHome, setIsHome] = createSignal(false);
@@ -154,6 +155,16 @@ const Layout: Component = () => {
stats={app?.reactionStats}
onClose={() => app?.actions.closeReactionModal()}
/>
+
+
diff --git a/src/components/Note/NoteFooter/NoteFooter.tsx b/src/components/Note/NoteFooter/NoteFooter.tsx
index 6fffa23..cafc0d5 100644
--- a/src/components/Note/NoteFooter/NoteFooter.tsx
+++ b/src/components/Note/NoteFooter/NoteFooter.tsx
@@ -20,7 +20,7 @@ import NoteContextMenu from '../NoteContextMenu';
import { getScreenCordinates } from '../../../utils';
import ZapAnimation from '../../ZapAnimation/ZapAnimation';
import ReactionsModal from '../../ReactionsModal/ReactionsModal';
-import { useAppContext } from '../../../contexts/AppContext';
+import { CustomZapInfo, useAppContext } from '../../../contexts/AppContext';
const NoteFooter: Component<{ note: PrimalNote, wide?: boolean, id?: string }> = (props) => {
@@ -158,9 +158,45 @@ const NoteFooter: Component<{ note: PrimalNote, wide?: boolean, id?: string }> =
};
let quickZapDelay = 0;
- const [isCustomZap, setIsCustomZap] = createSignal(false);
const [isZapping, setIsZapping] = createSignal(false);
+ const customZapInfo: CustomZapInfo = {
+ note: props.note,
+ onConfirm: (zapOption: ZapOption) => {
+ app?.actions.closeCustomZapModal();
+ setZappedAmount(() => zapOption.amount || 0);
+ setZappedNow(true);
+ setZapped(true);
+ animateZap();
+ },
+ onSuccess: (zapOption: ZapOption) => {
+ app?.actions.closeCustomZapModal();
+ setIsZapping(false);
+ setZappedNow(false);
+ setShowZapAnim(false);
+ setHideZapIcon(false);
+ setZapped(true);
+ },
+ onFail: (zapOption: ZapOption) => {
+ setZappedAmount(() => -(zapOption.amount || 0));
+ setZappedNow(true);
+ app?.actions.closeCustomZapModal();
+ setIsZapping(false);
+ setShowZapAnim(false);
+ setHideZapIcon(false);
+ setZapped(props.note.post.noteActions.zapped);
+ },
+ onCancel: (zapOption: ZapOption) => {
+ setZappedAmount(() => -(zapOption.amount || 0));
+ setZappedNow(true);
+ app?.actions.closeCustomZapModal();
+ setIsZapping(false);
+ setShowZapAnim(false);
+ setHideZapIcon(false);
+ setZapped(props.note.post.noteActions.zapped);
+ },
+ };
+
const startZap = (e: MouseEvent | TouchEvent) => {
e.preventDefault();
e.stopPropagation();
@@ -187,7 +223,7 @@ const NoteFooter: Component<{ note: PrimalNote, wide?: boolean, id?: string }> =
}
quickZapDelay = setTimeout(() => {
- setIsCustomZap(true);
+ app?.actions.openCustomZapModal(customZapInfo);
setIsZapping(true);
}, 500);
};
@@ -207,7 +243,7 @@ const NoteFooter: Component<{ note: PrimalNote, wide?: boolean, id?: string }> =
return;
}
- if (!isCustomZap()) {
+ if (app?.customZap === undefined) {
doQuickZap();
}
};
@@ -410,7 +446,7 @@ const NoteFooter: Component<{ note: PrimalNote, wide?: boolean, id?: string }> =
{
- setIsCustomZap(true);
+ app?.actions.openCustomZapModal(customZapInfo);
}}
openReactions={() => {
app?.actions.openReactionModal(props.note.post.id, {
@@ -422,44 +458,6 @@ const NoteFooter: Component<{ note: PrimalNote, wide?: boolean, id?: string }> =
}}
/>
-
- {
- setIsCustomZap(false);
- setZappedAmount(() => zapOption.amount || 0);
- setZappedNow(true);
- setZapped(true);
- animateZap();
- }}
- onSuccess={(zapOption: ZapOption) => {
- setIsCustomZap(false);
- setIsZapping(false);
- setZappedNow(false);
- setShowZapAnim(false);
- setHideZapIcon(false);
- setZapped(true);
- }}
- onFail={(zapOption: ZapOption) => {
- setZappedAmount(() => -(zapOption.amount || 0));
- setZappedNow(true);
- setIsCustomZap(false);
- setIsZapping(false);
- setShowZapAnim(false);
- setHideZapIcon(false);
- setZapped(props.note.post.noteActions.zapped);
- }}
- onCancel={(zapOption: ZapOption) => {
- setZappedAmount(() => -(zapOption.amount || 0));
- setZappedNow(true);
- setIsCustomZap(false);
- setIsZapping(false);
- setShowZapAnim(false);
- setHideZapIcon(false);
- setZapped(props.note.post.noteActions.zapped);
- }}
- />
)
}
diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx
index d8a3c84..d8d2749 100644
--- a/src/contexts/AppContext.tsx
+++ b/src/contexts/AppContext.tsx
@@ -1,4 +1,4 @@
-import { createStore } from "solid-js/store";
+import { createStore, reconcile } from "solid-js/store";
import {
createContext,
createEffect,
@@ -7,6 +7,7 @@ import {
onMount,
useContext
} from "solid-js";
+import { PrimalNote, PrimalUser, ZapOption } from "../types/primal";
export type ReactionStats = {
likes: number,
@@ -15,14 +16,27 @@ export type ReactionStats = {
quotes: number,
};
+export type CustomZapInfo = {
+ profile?: PrimalUser,
+ note?: PrimalNote,
+ onConfirm: (zapOption: ZapOption) => void,
+ onSuccess: (zapOption: ZapOption) => void,
+ onFail: (zapOption: ZapOption) => void,
+ onCancel: (zapOption: ZapOption) => void,
+};
+
export type AppContextStore = {
isInactive: boolean,
appState: 'sleep' | 'waking' | 'woke',
showReactionsModal: string | undefined,
reactionStats: ReactionStats,
+ showCustomZapModal: boolean,
+ customZap: CustomZapInfo | undefined,
actions: {
openReactionModal: (noteId: string, stats: ReactionStats) => void,
closeReactionModal: () => void,
+ openCustomZapModal: (custonZapInfo: CustomZapInfo) => void,
+ closeCustomZapModal: () => void,
},
}
@@ -36,6 +50,8 @@ const initialData: Omit = {
reposts: 0,
quotes: 0,
},
+ showCustomZapModal: false,
+ customZap: undefined,
};
export const AppContext = createContext();
@@ -71,6 +87,15 @@ export const AppProvider = (props: { children: JSXElement }) => {
updateStore('showReactionsModal', () => undefined);
};
+ const openCustomZapModal = (customZapInfo: CustomZapInfo) => {
+ updateStore('customZap', reconcile({ ...customZapInfo }));
+ updateStore('showCustomZapModal', () => true);
+ };
+
+ const closeCustomZapModal = () => {
+ updateStore('showCustomZapModal', () => false);
+ };
+
// EFFECTS --------------------------------------
onMount(() => {
@@ -111,6 +136,8 @@ export const AppProvider = (props: { children: JSXElement }) => {
actions: {
openReactionModal,
closeReactionModal,
+ openCustomZapModal,
+ closeCustomZapModal,
}
});
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index b801071..46dbc66 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -41,8 +41,8 @@ import VerificationCheck from '../components/VerificationCheck/VerificationCheck
import PhotoSwipeLightbox from 'photoswipe/lightbox';
import NoteImage from '../components/NoteImage/NoteImage';
-import CustomZap from '../components/CustomZap/CustomZap';
import ProfileQrCodeModal from '../components/ProfileQrCodeModal/ProfileQrCodeModal';
+import { CustomZapInfo, useAppContext } from '../contexts/AppContext';
const Profile: Component = () => {
@@ -51,6 +51,8 @@ const Profile: Component = () => {
const profile = useProfileContext();
const account = useAccountContext();
const media = useMediaContext();
+ const app = useAppContext();
+
const intl = useIntl();
const navigate = useNavigate();
@@ -61,7 +63,6 @@ const Profile: Component = () => {
const [showContext, setContext] = createSignal(false);
const [confirmReportUser, setConfirmReportUser] = createSignal(false);
const [confirmMuteUser, setConfirmMuteUser] = createSignal(false);
- const [isCustomZap, setIsCustomZap] = createSignal(false);
const [openQr, setOpenQr] = createSignal(false);
const lightbox = new PhotoSwipeLightbox({
@@ -491,6 +492,25 @@ const Profile: Component = () => {
return !profile?.isFetching && profile?.isProfileFetched && profile?.profileKey === getHex();
};
+ const customZapInfo: () => CustomZapInfo = () => ({
+ profile: profile?.userProfile,
+ onConfirm: (zapOption: ZapOption) => {
+ app?.actions.closeCustomZapModal();
+ },
+ onSuccess: (zapOption: ZapOption) => {
+ app?.actions.closeCustomZapModal();
+ toaster?.sendSuccess(intl.formatMessage(toastZapProfile, {
+ name: authorName(profile?.userProfile)
+ }))
+ },
+ onFail: (zapOption: ZapOption) => {
+ app?.actions.closeCustomZapModal();
+ },
+ onCancel: (zapOption: ZapOption) => {
+ app?.actions.closeCustomZapModal();
+ },
+ });
+
return (
<>
{
setIsCustomZap(true)}
+ onClick={() => app?.actions.openCustomZapModal(customZapInfo())}
shrink={true}
>
-
- {
- setIsCustomZap(false);
- }}
- onSuccess={(zapOption: ZapOption) => {
- setIsCustomZap(false);
- toaster?.sendSuccess(intl.formatMessage(toastZapProfile, {
- name: authorName(profile?.userProfile)
- }))
- }}
- onFail={(zapOption: ZapOption) => {
- setIsCustomZap(false);
- }}
- onCancel={(zapOption: ZapOption) => {
- setIsCustomZap(false);
- }}
- />