feature(unlock-app): Legacy toast cleanup (#15574)

* update provider * update queryClient config * update transfer component
unlock-protocol · Feb 27, 2025 · 13c8d60 · 13c8d60
1 parent 7b78ef0
commit 13c8d60
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 22 deletions.
diff --git a/unlock-app/app/providers.tsx b/unlock-app/app/providers.tsx
@@ -8,7 +8,7 @@ import { SessionProvider } from '~/hooks/useSession'
 import { AirstackProvider } from '@airstack/airstack-react'
 import { ErrorBoundary } from '@sentry/nextjs'
 import { ErrorFallback } from '~/components/interface/ErrorFallback'
-import { Toaster } from 'react-hot-toast'
+import { ToastProvider } from '@unlock-protocol/ui'
 import ShouldOpenConnectModal from '~/components/interface/connect/ShouldOpenConnectModal'
 import GlobalWrapper from '~/components/interface/GlobalWrapper'
 import { ConnectModalProvider } from '~/hooks/useConnectModal'
@@ -26,18 +26,19 @@ export default function Providers({ children }: { children: React.ReactNode }) {
             <SessionProvider>
               <Suspense fallback={<LoadingFallback />}>
                 <ConnectModalProvider>
-                  <AirstackProvider
-                    apiKey={'162b7c4dda5c44afdb0857b6b04454f99'}
-                  >
-                    <ErrorBoundary
-                      fallback={(props: any) => <ErrorFallback {...props} />}
+                  <ToastProvider>
+                    <AirstackProvider
+                      apiKey={'162b7c4dda5c44afdb0857b6b04454f99'}
                     >
-                      <ShouldOpenConnectModal />
-                      {children}
-                    </ErrorBoundary>
-                  </AirstackProvider>
+                      <ErrorBoundary
+                        fallback={(props: any) => <ErrorFallback {...props} />}
+                      >
+                        <ShouldOpenConnectModal />
+                        {children}
+                      </ErrorBoundary>
+                    </AirstackProvider>
+                  </ToastProvider>
                 </ConnectModalProvider>
-                <Toaster />
               </Suspense>
             </SessionProvider>
           </GlobalWrapper>

diff --git a/unlock-app/src/components/interface/transfer/index.tsx b/unlock-app/src/components/interface/transfer/index.tsx
@@ -1,13 +1,12 @@
 'use client'
 
-import { Input, Button, Placeholder } from '@unlock-protocol/ui'
+import { Input, Button, Placeholder, ToastHelper } from '@unlock-protocol/ui'
 import { KeyManager, TransferObject } from '@unlock-protocol/unlock-js'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { MouseEventHandler, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useTransferCode, useTransferDone } from '~/hooks/useTransfer'
 import { useConfig } from '~/utils/withConfig'
-import { toast } from 'react-hot-toast'
 import { AxiosError } from 'axios'
 import { useWeb3Service } from '~/utils/withWeb3Service'
 import { useLockData } from '~/hooks/useLockData'
@@ -40,11 +39,11 @@ const SendTransferForm = ({
         onError(error) {
           if (error instanceof AxiosError) {
             if (error.status === 409) {
-              return toast.error(
+              return ToastHelper.error(
                 'Too many requests. Please wait a few minutes before trying again.'
               )
             }
-            return toast.error(
+            return ToastHelper.error(
               'There was en error while trying to send an authorization code. Please try again!'
             )
           }
@@ -134,11 +133,11 @@ export const ConfirmTransferForm = ({
         onError(error) {
           if (error instanceof AxiosError) {
             if (error.status === 409) {
-              return toast.error(
+              return ToastHelper.error(
                 'Too many requests. Please wait a few minutes before trying again.'
               )
             }
-            toast.error(error.message)
+            ToastHelper.error(error.message)
           }
         },
       }
@@ -153,7 +152,7 @@ export const ConfirmTransferForm = ({
       const maxKeysPerAddress = lock?.maxKeysPerAddress ?? 1
 
       if (total >= maxKeysPerAddress) {
-        toast.error(
+        ToastHelper.error(
           'You already have the maximum number of NFTs for this contract. Please connect with another wallet.'
         )
       } else {
@@ -174,7 +173,7 @@ export const ConfirmTransferForm = ({
       }
     } catch (error: any) {
       console.log(error.message)
-      toast.error('Error transferring key. Please try again later.')
+      ToastHelper.error('Error transferring key. Please try again later.')
     }
   }
 

diff --git a/unlock-app/src/config/queryClient.ts b/unlock-app/src/config/queryClient.ts
@@ -1,7 +1,7 @@
 import { QueryClient, QueryCache } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
 import { AxiosError } from 'axios'
 import * as Sentry from '@sentry/nextjs'
+import { ToastHelper } from '@unlock-protocol/ui'
 
 export const queryClient = new QueryClient({
   queryCache: new QueryCache({
@@ -17,13 +17,13 @@ export const queryClient = new QueryClient({
       console.debug(`Event ID: ${id}\n`, error)
 
       if (query?.meta?.errorMessage) {
-        toast.error(query.meta.errorMessage as string)
+        ToastHelper.error(query.meta.errorMessage as string)
       } else {
         switch (error?.code) {
           case -32000:
           case 4001:
           case 'ACTION_REJECTED':
-            toast.error('Transaction rejected')
+            ToastHelper.error('Transaction rejected')
             break
           default: {
             const errorMessage = error?.error?.message || error.message