From 13c8d6007b9cf435bf215cc927d2fa5fce137112 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?txb=C3=AC?= <46839250+0xTxbi@users.noreply.github.com>
Date: Thu, 27 Feb 2025 20:05:55 +0100
Subject: [PATCH] feature(unlock-app): Legacy `toast` cleanup (#15574)

* update provider

* update queryClient config

* update transfer component
---
 unlock-app/app/providers.tsx                  | 23 ++++++++++---------
 .../components/interface/transfer/index.tsx   | 15 ++++++------
 unlock-app/src/config/queryClient.ts          |  6 ++---
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/unlock-app/app/providers.tsx b/unlock-app/app/providers.tsx
index 54a5fc654e2..7959674f2fb 100644
--- 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
index 3f6c6b8ddd0..27d11b560c3 100644
--- 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
index 2632b99b5c0..a54000025fa 100644
--- 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