diff --git a/apps/mobile/src/components/ChatDetailScreen/components/ContactRevealMessageItem.tsx b/apps/mobile/src/components/ChatDetailScreen/components/ContactRevealMessageItem.tsx index 52488f4d1..7bc2caf69 100644 --- a/apps/mobile/src/components/ChatDetailScreen/components/ContactRevealMessageItem.tsx +++ b/apps/mobile/src/components/ChatDetailScreen/components/ContactRevealMessageItem.tsx @@ -50,6 +50,7 @@ function RevealedContactMessageItem({ onCopyToClipboardPress={() => { Clipboard.setString(fullPhoneNumber ?? '') setToastNotification({ + visible: true, text: t('common.copied'), icon: checkIconSvg, }) diff --git a/apps/mobile/src/components/ChatDetailScreen/components/RequestScreen.tsx b/apps/mobile/src/components/ChatDetailScreen/components/RequestScreen.tsx index 945684cf9..63242e909 100644 --- a/apps/mobile/src/components/ChatDetailScreen/components/RequestScreen.tsx +++ b/apps/mobile/src/components/ChatDetailScreen/components/RequestScreen.tsx @@ -98,6 +98,7 @@ function RequestScreen(): JSX.Element { useEffect(() => { if (previousCommunicationInfoMessage) { setToastNotification({ + visible: true, text: previousCommunicationInfoMessage, icon: infoSvg, iconFill: getTokens().color.black.val, @@ -107,7 +108,7 @@ function RequestScreen(): JSX.Element { } return () => { - setToastNotification(null) + setToastNotification((prev) => ({...prev, visible: false})) } }, [previousCommunicationInfoMessage, requestState, setToastNotification, t]) diff --git a/apps/mobile/src/components/ChatDetailScreen/components/TextMessage.tsx b/apps/mobile/src/components/ChatDetailScreen/components/TextMessage.tsx index 937acf9ac..788ae4be1 100644 --- a/apps/mobile/src/components/ChatDetailScreen/components/TextMessage.tsx +++ b/apps/mobile/src/components/ChatDetailScreen/components/TextMessage.tsx @@ -159,6 +159,7 @@ function TextMessage({ if (messageItem.type !== 'message') return Clipboard.setString(messageItem.message.message.text) setToastNotification({ + visible: true, text: t('common.copied'), icon: checkIconSvg, }) diff --git a/apps/mobile/src/components/ChatDetailScreen/components/VexlbotMessageItem/components/TradeChecklistAmountView.tsx b/apps/mobile/src/components/ChatDetailScreen/components/VexlbotMessageItem/components/TradeChecklistAmountView.tsx index 05429998a..80780741a 100644 --- a/apps/mobile/src/components/ChatDetailScreen/components/VexlbotMessageItem/components/TradeChecklistAmountView.tsx +++ b/apps/mobile/src/components/ChatDetailScreen/components/VexlbotMessageItem/components/TradeChecklistAmountView.tsx @@ -60,6 +60,7 @@ function TradeChecklistAmountView(): JSX.Element | null { const toastContent: ToastNotificationState = useMemo( () => ({ + visible: true, text: t('common.copied'), icon: checkIconSvg, }), diff --git a/apps/mobile/src/components/ChatDetailScreen/components/VexlbotMessageItem/components/TradeChecklistNetworkView.tsx b/apps/mobile/src/components/ChatDetailScreen/components/VexlbotMessageItem/components/TradeChecklistNetworkView.tsx index 6d1230e6b..37907319f 100644 --- a/apps/mobile/src/components/ChatDetailScreen/components/VexlbotMessageItem/components/TradeChecklistNetworkView.tsx +++ b/apps/mobile/src/components/ChatDetailScreen/components/VexlbotMessageItem/components/TradeChecklistNetworkView.tsx @@ -62,6 +62,7 @@ function TradeChecklistNetworkView(): JSX.Element | null { networkDataToDisplay.networkData.btcAddress ?? '' ) setToastNotification({ + visible: true, text: t('common.copied'), icon: checkIconSvg, }) diff --git a/apps/mobile/src/components/InsideRouter/components/SettingsScreen/components/ReportIssue.tsx b/apps/mobile/src/components/InsideRouter/components/SettingsScreen/components/ReportIssue.tsx index 9942b1eb7..be0f3b6c2 100644 --- a/apps/mobile/src/components/InsideRouter/components/SettingsScreen/components/ReportIssue.tsx +++ b/apps/mobile/src/components/InsideRouter/components/SettingsScreen/components/ReportIssue.tsx @@ -52,6 +52,7 @@ function ReportIssue(): JSX.Element { const toastContent: ToastNotificationState = useMemo( () => ({ + visible: true, text: t('common.copied'), icon: checkIconSvg, }), diff --git a/apps/mobile/src/components/OfferDetailScreen/components/OfferInfo.tsx b/apps/mobile/src/components/OfferDetailScreen/components/OfferInfo.tsx index 0604cee70..548ca9045 100644 --- a/apps/mobile/src/components/OfferDetailScreen/components/OfferInfo.tsx +++ b/apps/mobile/src/components/OfferDetailScreen/components/OfferInfo.tsx @@ -33,6 +33,8 @@ import RerequestInfo from './RerequestInfo' import Title from './Title' const SCROLL_EXTRA_OFFSET = 200 +const EXTRA_MARGIN = 70 +const BUTTON_HEIGHT_PLUS_EXTRA_MARGIN = 60 + EXTRA_MARGIN function ContentContainer({ mapIsVisible, @@ -135,17 +137,20 @@ function OfferInfo({ useEffect(() => { setToastNotification({ + visible: true, text: t(`offer.requestStatus.${requestState}`), icon: infoSvg, iconFill: getTokens().color.black.val, showCloseButton: true, hideAfterMillis: 3000, + position: mapIsVisible ? 'top' : 'bottom', + bottomMargin: mapIsVisible ? 0 : BUTTON_HEIGHT_PLUS_EXTRA_MARGIN, }) return () => { - setToastNotification(null) + setToastNotification((prev) => ({...prev, visible: false})) } - }, [requestState, setToastNotification, t]) + }, [mapIsVisible, requestState, setToastNotification, t]) return ( diff --git a/apps/mobile/src/components/SetContactsScreen/components/ContactListSelect/atom.ts b/apps/mobile/src/components/SetContactsScreen/components/ContactListSelect/atom.ts index 8b9c58220..134c6d8c5 100644 --- a/apps/mobile/src/components/SetContactsScreen/components/ContactListSelect/atom.ts +++ b/apps/mobile/src/components/SetContactsScreen/components/ContactListSelect/atom.ts @@ -220,6 +220,7 @@ export const contactSelectMolecule = molecule((_, getScope) => { T.map((result) => { if (result) { set(toastNotificationAtom, { + visible: true, text: t('contacts.contactsSubmitted'), icon: checkIconSvg, hideAfterMillis: 2000, diff --git a/apps/mobile/src/components/ToastNotification/atom.ts b/apps/mobile/src/components/ToastNotification/atom.ts index aa805afa3..bd0e69ad6 100644 --- a/apps/mobile/src/components/ToastNotification/atom.ts +++ b/apps/mobile/src/components/ToastNotification/atom.ts @@ -1,4 +1,6 @@ import {atom} from 'jotai' import {type ToastNotificationState} from './domain' -export const toastNotificationAtom = atom(null) +export const toastNotificationAtom = atom({ + visible: false, +}) diff --git a/apps/mobile/src/components/ToastNotification/components/ToastNotificationContent.tsx b/apps/mobile/src/components/ToastNotification/components/ToastNotificationContent.tsx index 7ed2e0ac5..19e6c52eb 100644 --- a/apps/mobile/src/components/ToastNotification/components/ToastNotificationContent.tsx +++ b/apps/mobile/src/components/ToastNotification/components/ToastNotificationContent.tsx @@ -1,6 +1,11 @@ import {useSetAtom} from 'jotai' import {TouchableOpacity, useWindowDimensions} from 'react-native' -import Animated, {FadeInUp, FadeOutUp} from 'react-native-reanimated' +import Animated, { + FadeInDown, + FadeInUp, + FadeOutDown, + FadeOutUp, +} from 'react-native-reanimated' import {Stack, Text, XStack, getTokens} from 'tamagui' import SvgImage from '../../Image' import closeSvg from '../../images/closeSvg' @@ -13,6 +18,8 @@ function ToastNotificationContent({ text, showCloseButton, position, + bottomMargin, + topMargin, }: ToastNotificationState): JSX.Element | null { const {height} = useWindowDimensions() const setToastNotification = useSetAtom(toastNotificationAtom) @@ -22,10 +29,13 @@ function ToastNotificationContent({ f={1} px="$2" {...(position === 'bottom' - ? {bottom: height * 0.1} - : {top: height * 0.1})} + ? {bottom: bottomMargin ?? height * 0.1} + : {top: topMargin ?? height * 0.1})} > - + { - setToastNotification(null) + setToastNotification((prev) => ({...prev, visible: false})) }} > { - if (state) { - const timeout = setTimeout(() => { - setState(null) - }, state?.hideAfterMillis ?? 1000) + const timeout = setTimeout(() => { + setState({...state, visible: false}) + }, state?.hideAfterMillis ?? 1000) - return () => { - clearTimeout(timeout) - } + return () => { + clearTimeout(timeout) } }, [setState, state]) @@ -29,7 +27,7 @@ function ToastNotification(): JSX.Element { right={0} {...(state?.position === 'bottom' ? {bottom: -10} : {top: -10})} > - {!!state && } + {state.visible ? : <>} ) }