From f9b9220c8b2513c87f9b4388241d5484cfbe973b Mon Sep 17 00:00:00 2001
From: Felicio Mununga <felicio@users.noreply.github.com>
Date: Fri, 15 Dec 2023 17:00:36 +0100
Subject: [PATCH] update toast options (#517)

* f

* u

* u

* a

* u

* u

* u

* u

* Create old-donkeys-report.md
---
 .changeset/old-donkeys-report.md              |  5 ++
 .../components/src/toast/toast-container.tsx  | 63 ++++++++++++-------
 packages/components/src/toast/toast.tsx       |  2 +-
 3 files changed, 48 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/old-donkeys-report.md

diff --git a/.changeset/old-donkeys-report.md b/.changeset/old-donkeys-report.md
new file mode 100644
index 000000000..9c1a21882
--- /dev/null
+++ b/.changeset/old-donkeys-report.md
@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+update toast options
diff --git a/packages/components/src/toast/toast-container.tsx b/packages/components/src/toast/toast-container.tsx
index ed15f6e19..b22ee151e 100644
--- a/packages/components/src/toast/toast-container.tsx
+++ b/packages/components/src/toast/toast-container.tsx
@@ -7,33 +7,44 @@ import { create } from 'zustand'
 import { Toast } from './toast'
 
 import type { ToastProps } from './toast'
+import type { ToastProps as RootProps } from '@radix-ui/react-toast'
+
+type ToastRootProps = Partial<Pick<RootProps, 'duration'>> & {
+  originType?: RootProps['type']
+}
+
+type Options = ToastRootProps & Pick<ToastProps, 'action' | 'onAction'>
 
 type ToastState = {
-  toast: ToastProps | null
+  toast: (ToastProps & ToastRootProps) | null
   dismiss: () => void
-  positive: (
-    message: string,
-    actionProps?: Pick<ToastProps, 'action' | 'onAction'>
-  ) => void
-  negative: (
-    message: string,
-    actionProps?: Pick<ToastProps, 'action' | 'onAction'>
-  ) => void
-  custom: (
-    message: string,
-    icon: React.ReactElement,
-    actionProps?: Pick<ToastProps, 'action' | 'onAction'>
-  ) => void
+  positive: (message: string, options?: Options) => void
+  negative: (message: string, options?: Options) => void
+  custom: (message: string, icon: React.ReactElement, options?: Options) => void
 }
 
 const useStore = create<ToastState>()(set => ({
   toast: null,
-  positive: (message, actionProps) =>
-    set({ toast: { ...actionProps, message, type: 'positive' } }),
-  negative: (message, actionProps) =>
-    set({ toast: { ...actionProps, message, type: 'negative' } }),
-  custom: (message, icon, actionProps) =>
-    set({ toast: { ...actionProps, message, icon } }),
+  positive: (message, options) =>
+    set({
+      toast: {
+        message,
+        ...options,
+        type: 'positive',
+      },
+    }),
+  negative: (message, options) =>
+    set({
+      toast: {
+        message,
+        ...options,
+        type: 'negative',
+      },
+    }),
+  custom: (message, icon, options) =>
+    set({
+      toast: { message, icon, ...options },
+    }),
   dismiss: () => set({ toast: null }),
 }))
 
@@ -50,14 +61,23 @@ const ToastContainer = () => {
     }
   }
 
+  const { duration, originType, ...restProps } = store.toast
+
   return (
     <Provider>
       <ToastRoot
         defaultOpen
         onOpenChange={handleOpenChange}
         style={{ position: 'fixed' }}
+        // note: prevent swipe gestures from closing the toast until animation is implemented
+        onSwipeStart={event => event.preventDefault()}
+        onSwipeMove={event => event.preventDefault()}
+        onSwipeCancel={event => event.preventDefault()}
+        onSwipeEnd={event => event.preventDefault()}
+        duration={duration}
+        type={originType}
       >
-        <Toast {...store.toast} />
+        <Toast {...restProps} />
       </ToastRoot>
       <Viewport />
     </Provider>
@@ -72,6 +92,7 @@ const useToast = () => {
       positive: store.positive,
       negative: store.negative,
       custom: store.custom,
+      dismiss: store.dismiss,
     }),
     [store]
   )
diff --git a/packages/components/src/toast/toast.tsx b/packages/components/src/toast/toast.tsx
index dd0c60588..daabf294b 100644
--- a/packages/components/src/toast/toast.tsx
+++ b/packages/components/src/toast/toast.tsx
@@ -38,7 +38,7 @@ const Toast = (props: Props) => {
 
   return (
     <Base action={Boolean(action)}>
-      <Stack flex={1} flexDirection="row" gap={4}>
+      <Stack flex={1} flexDirection="row" gap={4} alignItems="center">
         <Stack width={20}>{renderIcon()}</Stack>
         <Description asChild>
           <Text size={13} weight={'medium'} color="$white-100">