refactor: sonner

package.json

@@ -58,11 +58,11 @@
     "react-dom": "^18.2.0",
     "react-flatten-children": "^1.1.2",
     "react-hook-form": "^7.44.2",
-    "react-hot-toast": "^2.4.1",
     "react-intersection-observer": "^9.5.2",
     "react-router": "^6.10.0",
     "react-router-dom": "^6.10.0",
     "remeda": "^1.14.0",
+    "sonner": "^0.7.2",
     "use-sync-external-store": "^1.2.0",
     "viem": "^1.10.12",
     "zustand": "^4.3.8"

src/components/Toaster.css.ts

@@ -0,0 +1,38 @@
+import { globalStyle } from '@vanilla-extract/css'
+
+import {
+  backgroundColorVars,
+  foregroundColorVars,
+  textColorForBackgroundColorVars,
+} from '~/design-system/styles/theme.css'
+import { fontFamily, fontSize, fontWeight } from '~/design-system/tokens'
+
+globalStyle(':root [data-sonner-toaster]', {
+  fontFamily: fontFamily.default,
+  vars: {
+    '--border-radius': '0',
+    '--initial-height': '60px',
+    '--normal-bg': `rgb(${backgroundColorVars['surface/secondary/elevated']})`,
+    '--normal-border': `rgb(${backgroundColorVars['surface/fill']})`,
+    '--normal-text': `rgb(${foregroundColorVars['text/primary']})`,
+    '--success-bg': `rgb(${backgroundColorVars['surface/greenTint']})`,
+    '--success-border': `rgb(${backgroundColorVars['surface/greenTint']})`,
+    '--success-text': `rgb(${textColorForBackgroundColorVars['surface/greenTint']})`,
+    '--error-bg': `rgb(${backgroundColorVars['surface/redTint']})`,
+    '--error-border': `rgb(${backgroundColorVars['surface/redTint']})`,
+    '--error-text': `rgb(${textColorForBackgroundColorVars['surface/redTint']})`,
+  },
+})
+
+globalStyle(':root [data-sonner-toaster] [data-styled=true]', {
+  padding: '8px',
+})
+
+globalStyle(':root [data-sonner-toaster] [data-title]', {
+  fontWeight: fontWeight.regular,
+  ...fontSize(true)['12px'],
+})
+
+globalStyle(':root [data-sonner-toaster] [data-icon]', {
+  display: 'none',
+})

src/components/Toaster.tsx

@@ -0,0 +1,9 @@
+import { Toaster as Toaster_ } from 'sonner'
+
+import './Toaster.css'
+
+export function Toaster() {
+  return (
+    <Toaster_ closeButton expand={false} richColors position="top-center" />
+  )
+}

src/components/index.ts

@@ -7,4 +7,5 @@ export { LabelledContent } from './LabelledContent'
 export { NetworkOfflineDialog } from './NetworkOfflineDialog'
 export { OnboardingContainer } from './OnboardingContainer'
 export { Progress } from './Progress'
+export { Toaster } from './Toaster'
 export { Tooltip } from './Tooltip'

src/screens/_layout.tsx

@@ -1,16 +1,10 @@
 import { useEffect } from 'react'
-import { Toaster } from 'react-hot-toast'
 import { Outlet, useNavigate } from 'react-router-dom'
 
+import { Header, NetworkOfflineDialog, Toaster } from '~/components'
 import { Box } from '~/design-system'
-import { useNetworkStore, usePendingRequestsStore } from '~/zustand'
-
-import { Header, NetworkOfflineDialog } from '~/components'
-
-import { ErrorToast } from '~/components/toast/Error'
-import { LoadingToast } from '~/components/toast/Loading'
-import { SuccessToast } from '~/components/toast/Success'
 import { useNetworkStatus } from '~/hooks/useNetworkStatus'
+import { useNetworkStore, usePendingRequestsStore } from '~/zustand'
 import { getMessenger } from '../messengers'
 import PendingRequest from './pending-request'
 
@@ -48,6 +42,7 @@ export default function Layout() {
         overflow: 'hidden',
       }}
     >
+      <Toaster />
       {showHeader && (
         <Box style={{ height: headerHeight }}>
           <Header isNetworkOffline={isNetworkOffline} />
@@ -67,28 +62,6 @@ export default function Layout() {
           height="full"
         >
           <Outlet />
-          <Toaster
-            children={(toast) => {
-              if (toast.type === 'success') {
-                return <SuccessToast message={toast.message} />
-              }
-
-              if (toast.type === 'error') {
-                return <ErrorToast message={toast.message} />
-              }
-
-              if (toast.type === 'loading') {
-                return <LoadingToast message={toast.message} />
-              }
-
-              // Custom Toast does have all styles and config just rendering would do fine.
-              if (toast.type === 'custom') {
-                return <>{toast.message}</>
-              }
-              // Default for any custom toasts
-              return <SuccessToast message={toast.message} />
-            }}
-          />
         </Box>
       </Box>
     </Box>