fix(deps): update dependency react-toastify to v11 (#379)

* fix(deps): update dependency react-toastify to v11 * remove stylesheet * only show copy button when pilot is ready * migrate success toast * migrate error toast * migrate info toast --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Philipp Giese <[email protected]>
gnosisguild · Dec 18, 2024 · d622315 · d622315
1 parent 1683c65
commit d622315
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 89 deletions.
diff --git a/extension/package.json b/extension/package.json
@@ -99,7 +99,7 @@
     "@headlessui/react": "^2.2.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.468.0",
-    "react-toastify": "10.0.6",
+    "react-toastify": "11.0.0",
     "react-router": "7.0.2",
     "react-stick": "^5.0.6",
     "zod": "^3.23.8"

diff --git a/extension/src/components/toasts/Toast.tsx b/extension/src/components/toasts/Toast.tsx
@@ -6,33 +6,47 @@ import {
   toast as baseToast,
   Slide,
   type ToastOptions as BaseToastOptions,
+  type ToastContent,
+  type ToastContentProps,
 } from 'react-toastify'
 
-type ToastRenderProps = {
-  dismiss: () => void
-}
+type ToastData = { message: ReactNode; title: string }
 
-type ToastRenderFn = (props: ToastRenderProps) => ReactNode
+export type DerivedToastProps = ToastContentProps<ToastData>
+
+export const Toast = ({
+  children,
+  className,
+}: PropsWithChildren<{ className: string }>) => (
+  <div
+    className={classNames(
+      'flex max-w-full flex-col gap-1 rounded-md border p-2 text-sm shadow-lg',
+      className,
+    )}
+  >
+    {children}
+  </div>
+)
 
 type ToastOptions = Omit<
   BaseToastOptions,
-  'toastId' | 'closeButton' | 'hideProgressBar' | 'transition'
->
+  'toastId' | 'closeButton' | 'hideProgressBar' | 'transition' | 'className'
+> & { data: ToastData }
 
 export const toast = (
-  renderFn: ToastRenderFn,
-  { className, ...options }: ToastOptions = {},
+  ToastComponent: ToastContent<ToastData>,
+  options: ToastOptions,
 ) => {
   const id = nanoid()
 
   const dismiss = () => baseToast.dismiss(id)
 
-  baseToast(renderFn({ dismiss }), {
+  baseToast(ToastComponent, {
     toastId: id,
     closeButton: false,
     hideProgressBar: true,
     transition: Slide,
-    className: `mx-4 mt-2 flex max-w-full flex-col gap-1 rounded-md border p-2 text-sm shadow-lg ${className}`,
+    className: `p-0 m-4 `,
 
     ...options,
   })
@@ -47,6 +61,8 @@ const Title = ({
   <h2 className={classNames('font-semibold', className)}>{children}</h2>
 )
 
+Toast.Title = Title
+
 const Dismiss = ({
   children,
   className,
@@ -63,4 +79,4 @@ const Dismiss = ({
   </button>
 )
 
-export const Toast = { Title, Dismiss }
+Toast.Dismiss = Dismiss
diff --git a/extension/src/components/toasts/errorToast.tsx b/extension/src/components/toasts/errorToast.tsx
@@ -1,24 +1,26 @@
-import { Toast, toast } from './Toast'
+import { type DerivedToastProps, Toast, toast } from './Toast'
 import type { ToastProps } from './ToastProps'
 
-export const errorToast = ({ title, message }: ToastProps) =>
-  toast(
-    ({ dismiss }) => (
-      <>
-        <div className="flex items-center justify-between gap-4">
-          {title && <Toast.Title className="text-white">{title}</Toast.Title>}
+const ErrorToast = ({
+  data: { title, message },
+  closeToast,
+}: DerivedToastProps) => (
+  <Toast className="border-red-500/60 bg-red-500 dark:border-red-700">
+    <div className="flex items-center justify-between gap-4">
+      {title && <Toast.Title className="text-white">{title}</Toast.Title>}
+
+      <Toast.Dismiss
+        className="text-white hover:bg-white/20"
+        onDismiss={closeToast}
+      />
+    </div>
 
-          <Toast.Dismiss
-            className="text-white hover:bg-white/20"
-            onDismiss={dismiss}
-          />
-        </div>
+    <div className="text-red-50">{message}</div>
+  </Toast>
+)
 
-        <div className="text-red-50">{message}</div>
-      </>
-    ),
-    {
-      className: 'border-red-500/60 bg-red-500 dark:border-red-700',
-      autoClose: false,
-    },
-  )
+export const errorToast = ({ title, message }: ToastProps) =>
+  toast(ErrorToast, {
+    data: { title, message },
+    autoClose: false,
+  })
diff --git a/extension/src/components/toasts/infoToast.tsx b/extension/src/components/toasts/infoToast.tsx
@@ -1,28 +1,27 @@
-import { Toast, toast } from './Toast'
+import { Toast, toast, type DerivedToastProps } from './Toast'
 import type { ToastProps } from './ToastProps'
 
-export const infoToast = ({ title, message }: ToastProps) =>
-  toast(
-    ({ dismiss }) => (
-      <>
-        <div className="flex items-center justify-between gap-4">
-          {title && (
-            <Toast.Title className="text-zinc-50 dark:text-zinc-900">
-              {title}
-            </Toast.Title>
-          )}
+const InfoToast = ({
+  data: { title, message },
+  closeToast,
+}: DerivedToastProps) => (
+  <Toast className="border-zinc-800/80 bg-zinc-900 dark:border-zinc-300/80 dark:bg-zinc-100">
+    <div className="flex items-center justify-between gap-4">
+      {title && (
+        <Toast.Title className="text-zinc-50 dark:text-zinc-900">
+          {title}
+        </Toast.Title>
+      )}
+
+      <Toast.Dismiss
+        className="text-zinc-50 hover:bg-white/20 dark:text-zinc-900 dark:hover:bg-zinc-900/10"
+        onDismiss={closeToast}
+      />
+    </div>
 
-          <Toast.Dismiss
-            className="text-zinc-50 hover:bg-white/20 dark:text-zinc-900 dark:hover:bg-zinc-900/10"
-            onDismiss={dismiss}
-          />
-        </div>
+    <div className="text-zinc-200 dark:text-zinc-700">{message}</div>
+  </Toast>
+)
 
-        <div className="text-zinc-200 dark:text-zinc-700">{message}</div>
-      </>
-    ),
-    {
-      className:
-        'border-zinc-800/80 bg-zinc-900 dark:border-zinc-300/80 dark:bg-zinc-100',
-    },
-  )
+export const infoToast = ({ title, message }: ToastProps) =>
+  toast(InfoToast, { data: { title, message } })
diff --git a/extension/src/components/toasts/successToast.tsx b/extension/src/components/toasts/successToast.tsx
@@ -1,28 +1,27 @@
-import { Toast, toast } from './Toast'
+import { Toast, toast, type DerivedToastProps } from './Toast'
 import type { ToastProps } from './ToastProps'
 
-export const successToast = ({ title, message }: ToastProps) =>
-  toast(
-    ({ dismiss }) => (
-      <>
-        <div className="flex items-center justify-between gap-4">
-          {title && (
-            <Toast.Title className="text-green-900 dark:text-white">
-              {title}
-            </Toast.Title>
-          )}
+const SuccessToast = ({
+  data: { title, message },
+  closeToast,
+}: DerivedToastProps) => (
+  <Toast className="border-green-300/80 bg-green-200 dark:border-green-500/80 dark:bg-green-600">
+    <div className="flex items-center justify-between gap-4">
+      {title && (
+        <Toast.Title className="text-green-900 dark:text-white">
+          {title}
+        </Toast.Title>
+      )}
+
+      <Toast.Dismiss
+        className="text-green-900 hover:bg-green-500/20 dark:text-white dark:hover:bg-white/10"
+        onDismiss={closeToast}
+      />
+    </div>
 
-          <Toast.Dismiss
-            className="text-green-900 hover:bg-green-500/20 dark:text-white dark:hover:bg-white/10"
-            onDismiss={dismiss}
-          />
-        </div>
+    <div className="text-green-700 dark:text-green-50">{message}</div>
+  </Toast>
+)
 
-        <div className="text-green-700 dark:text-green-50">{message}</div>
-      </>
-    ),
-    {
-      className:
-        'border-green-300/80 bg-green-200 dark:border-green-500/80 dark:bg-green-600',
-    },
-  )
+export const successToast = ({ title, message }: ToastProps) =>
+  toast(SuccessToast, { data: { message, title } })
diff --git a/extension/src/panel/app.tsx b/extension/src/panel/app.tsx
@@ -6,7 +6,6 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { createHashRouter, RouterProvider } from 'react-router'
 import { ToastContainer } from 'react-toastify'
-import 'react-toastify/dist/ReactToastify.min.css'
 import '../global.css'
 import { pages } from './pages'
 import { ProvidePort } from './port-handling'

diff --git a/extension/src/panel/pages/$activeRouteId/transactions/Transactions.tsx b/extension/src/panel/pages/$activeRouteId/transactions/Transactions.tsx
@@ -2,6 +2,7 @@ import { getChainId } from '@/chains'
 import { CopyToClipboard, GhostButton, Info, Page } from '@/components'
 import { useExecutionRoute } from '@/execution-routes'
 import { useProviderBridge } from '@/inject-bridge'
+import { usePilotIsReady } from '@/port-handling'
 import { ForkProvider } from '@/providers'
 import { useProvider } from '@/providers-ui'
 import { useDispatch, useTransactions } from '@/state'
@@ -20,6 +21,7 @@ export const Transactions = () => {
   const dispatch = useDispatch()
   const provider = useProvider()
   const route = useExecutionRoute()
+  const pilotIsReady = usePilotIsReady()
 
   useProviderBridge({
     provider,
@@ -101,7 +103,7 @@ export const Transactions = () => {
       </Page.Content>
 
       <Page.Footer>
-        {!route.initiator && (
+        {!route.initiator && pilotIsReady && (
           <CopyToClipboard
             data={transactions.map((txState) => txState.transaction)}
             disabled={transactions.length === 0}

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml