diff --git a/src/components/Announcement/Popups/index.tsx b/src/components/Announcement/Popups/index.tsx index 742f7e862d..3d597f7bfc 100644 --- a/src/components/Announcement/Popups/index.tsx +++ b/src/components/Announcement/Popups/index.tsx @@ -91,7 +91,12 @@ export default function Popups() { const { popupType } = item.templateBody if ((!isInit.current && popupType === PopupType.CENTER) || popupType !== PopupType.CENTER) { // only show PopupType.CENTER when the first visit app - addPopup(item, popupType, item.metaMessageId, null) + addPopup({ + content: item, + popupType, + key: item.metaMessageId, + removeAfterMs: null, + }) } }) isInit.current = true @@ -101,11 +106,21 @@ export default function Popups() { data.forEach(item => { switch (item.templateType) { case PrivateAnnouncementType.CROSS_CHAIN: - addPopup(item, PopupType.TOP_RIGHT, item.metaMessageId, 15_000) + addPopup({ + content: item, + popupType: PopupType.TOP_RIGHT, + key: item.metaMessageId, + removeAfterMs: 15_000, + }) break case PrivateAnnouncementType.DIRECT_MESSAGE: { const { templateBody, metaMessageId } = item - addPopup(item, templateBody.popupType, metaMessageId, undefined, account) + addPopup({ + content: item, + popupType: templateBody.popupType, + key: metaMessageId, + account, + }) break } } @@ -116,7 +131,13 @@ export default function Popups() { switch (item.templateType) { case PrivateAnnouncementType.PRICE_ALERT: const mins = (Date.now() / 1000 - item.createdAt) / TIMES_IN_SECS.ONE_MIN - if (mins <= 5) addPopup(item, PopupType.TOP_RIGHT, item.metaMessageId, 15_000) + if (mins <= 5) + addPopup({ + content: item, + popupType: PopupType.TOP_RIGHT, + key: item.metaMessageId, + removeAfterMs: 15_000, + }) break } }) diff --git a/src/state/application/hooks.ts b/src/state/application/hooks.ts index e91e081e73..ab39abe3cd 100644 --- a/src/state/application/hooks.ts +++ b/src/state/application/hooks.ts @@ -117,19 +117,20 @@ export function useRegisterCampaignSuccessModalToggle(): () => void { return useToggleModal(ApplicationModal.REGISTER_CAMPAIGN_SUCCESS) } +type AddPopupPayload = { + content: PopupContent + popupType: PopupType + key?: string + removeAfterMs?: number | null + account?: string +} // returns a function that allows adding a popup -export function useAddPopup(): ( - content: PopupContent, - popupType: PopupType, - key?: string, - removeAfterMs?: number | null, - account?: string, -) => void { +export function useAddPopup(): (data: AddPopupPayload) => void { const dispatch = useDispatch() return useCallback( - (content: PopupContent, popupType: PopupType, key?: string, removeAfterMs?: number | null, account?: string) => { - dispatch(addPopup({ content, key, popupType, removeAfterMs, account })) + (data: AddPopupPayload) => { + dispatch(addPopup(data)) }, [dispatch], ) @@ -140,7 +141,7 @@ export const useNotify = () => { const addPopup = useAddPopup() return useCallback( (data: PopupContentSimple, removeAfterMs: number | null | undefined = 4000) => { - addPopup(data, PopupType.SIMPLE, data.title + Math.random(), removeAfterMs) + addPopup({ content: data, popupType: PopupType.SIMPLE, key: data.title + Math.random(), removeAfterMs }) }, [addPopup], ) @@ -151,7 +152,12 @@ export const useTransactionNotify = () => { const addPopup = useAddPopup() return useCallback( (data: PopupContentTxn) => { - addPopup(data, PopupType.TRANSACTION, data.hash, undefined, data.account) + addPopup({ + content: data, + popupType: PopupType.TRANSACTION, + key: data.hash, + account: data.account, + }) }, [addPopup], )