fix-1329: Move toast in offer detail above the bottom button

vexl-it · Oct 20, 2024 · ac10f62 · ac10f62
1 parent 52b743a
commit ac10f62
Show file tree

Hide file tree

Showing 12 changed files with 47 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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/...ts/ChatDetailScreen/components/VexlbotMessageItem/components/TradeChecklistAmountView.tsx b/...ts/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/...s/ChatDetailScreen/components/VexlbotMessageItem/components/TradeChecklistNetworkView.tsx b/...s/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
@@ -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
@@ -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 (
     <Stack f={1} mx="$2" my="$4">

diff --git 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
@@ -1,4 +1,6 @@
 import {atom} from 'jotai'
 import {type ToastNotificationState} from './domain'
 
-export const toastNotificationAtom = atom<ToastNotificationState | null>(null)
+export const toastNotificationAtom = atom<ToastNotificationState>({
+  visible: false,
+})
diff --git 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})}
     >
-      <Animated.View entering={FadeInUp} exiting={FadeOutUp}>
+      <Animated.View
+        entering={position === 'bottom' ? FadeInDown : FadeInUp}
+        exiting={position === 'bottom' ? FadeOutDown : FadeOutUp}
+      >
         <XStack
           ai="center"
           jc={showCloseButton ? 'space-between' : undefined}
@@ -52,7 +62,7 @@ function ToastNotificationContent({
           {!!showCloseButton && (
             <TouchableOpacity
               onPress={() => {
-                setToastNotification(null)
+                setToastNotification((prev) => ({...prev, visible: false}))
               }}
             >
               <SvgImage

diff --git a/apps/mobile/src/components/ToastNotification/domain.ts b/apps/mobile/src/components/ToastNotification/domain.ts
@@ -7,22 +7,28 @@ import {z} from 'zod'
 
 export const ToastNotificationState = z
   .object({
-    text: z.string(),
+    visible: z.boolean(),
+    text: z.string().optional(),
     icon: SvgString.optional(),
     iconFill: z.string().optional(),
     hideAfterMillis: z.number().optional(),
     showCloseButton: z.boolean().optional(),
     position: z.enum(['top', 'bottom']).optional(),
+    bottomMargin: z.number().optional(),
+    topMargin: z.number().optional(),
   })
   .readonly()
 
 export const ToastNotificationStateE = Schema.Struct({
-  text: Schema.String,
+  visible: Schema.Boolean,
+  text: Schema.optional(Schema.String),
   icon: Schema.optional(SvgStringE),
   iconFill: Schema.optional(Schema.String),
   hideAfterMillis: Schema.optional(Schema.Number),
   showCloseButton: Schema.optional(Schema.Boolean),
   position: Schema.optional(Schema.Literal('top', 'bottom')),
+  bottomMargin: Schema.optional(Schema.Number),
+  topMargin: Schema.optional(Schema.Number),
 })
 
 export type ToastNotificationState = Schema.Schema.Type<

diff --git a/apps/mobile/src/components/ToastNotification/index.tsx b/apps/mobile/src/components/ToastNotification/index.tsx
@@ -8,14 +8,12 @@ function ToastNotification(): JSX.Element {
   const [state, setState] = useAtom(toastNotificationAtom)
 
   useEffect(() => {
-    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 && <ToastNotificationContent {...state} />}
+      {state.visible ? <ToastNotificationContent {...state} /> : <></>}
     </Stack>
   )
 }