chore: migrate to react-hot-toast

resources/dev-tools/tx-sender.page.tsx

@@ -3,9 +3,8 @@ import { useState } from 'react'
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from '@redocly/theme/components/Link/Link';
 
+import { toast, Toaster } from 'react-hot-toast';
 import AlertTemplate from './components/AlertTemplate';
-import { transitions, positions, Provider as AlertProvider } from 'react-alert'
-import { useAlert } from 'react-alert'
 
 import { isoTimeToRippleTime, type Client, type Wallet } from 'xrpl'
 
@@ -104,14 +103,12 @@ async function onClickCreateEscrow(
     setEscrowWidthPercent(0)
 }
 
-function TxSenderBody(): React.JSX.Element {
+function TxSenderBody({ alert }: { alert: (message: string, type?: string) => void }): React.JSX.Element {
     const { useTranslate } = useThemeHooks();
     const { translate } = useTranslate();
 
     const [client, setClient] = useState<Client | undefined>(undefined)
 
-    const alert = useAlert()
-
     // Sidebar variables
     const [balance, setBalance] = useState(0)
     const [sendingWallet, setSendingWallet] = useState<Wallet | undefined>(undefined)
@@ -426,17 +423,32 @@ function TxSenderBody(): React.JSX.Element {
 
 // Wrapper to allow for dynamic alerts when transactions complete
 export default function TxSender(): React.JSX.Element {
-    
-    const alertOptions = {
-        position: positions.BOTTOM_RIGHT,
-        timeout: 7000,
-        offset: '8px',
-        transition: transitions.FADE
-    }
+    const alert = (message: string, type: string = 'info') => {
+        toast.custom((t) => (
+            <AlertTemplate 
+                message={message}
+                options={{ type }}
+                style={{}}
+                close={() => {
+                    toast.dismiss(t.id);
+                    toast.remove(t.id);
+                }}
+            />
+        ), {
+            duration: 7000,
+            position: 'bottom-right',
+        });
+    };
 
     return (
-        <AlertProvider template={AlertTemplate} {...alertOptions}>
-            <TxSenderBody/>
-        </AlertProvider>
+        <>
+            <TxSenderBody alert={alert} />
+            <Toaster 
+                containerStyle={{
+                    bottom: 8,
+                    right: 8,
+                }}
+            />
+        </>
     )
-}
+}

resources/dev-tools/utils.tsx

@@ -10,14 +10,14 @@ export function timeout(ms: number): Promise<void> {
 }
 
 // Displaying transaction data
-export function errorNotif(alert: any, msg: string): void {
-    console.log(msg)
-    alert.error(msg)
+export function errorNotif(alert: (message: string, type?: string) => void, msg: string): void {
+  console.log(msg)
+  alert(msg, 'error');
 }
 
-export function successNotif(alert: any, msg: string): void {
+export function successNotif(alert: (message: string, type?: string) => void, msg: string): void {
     console.log(msg)
-    alert.show(msg, { type: 'success' })
+    alert(msg, 'success')
 }
 
 export function logTx(txName: string, hash: string, finalResult: string, setTxHistory: React.Dispatch<React.SetStateAction<React.JSX.Element[]>>) {
@@ -43,7 +43,7 @@ export interface SubmitConstData {
     client: Client, 
     setBalance: React.Dispatch<React.SetStateAction<number>>, 
     setTxHistory: React.Dispatch<React.SetStateAction<React.JSX.Element[]>>,
-    alert: any,
+    alert: (message: string, type?: string) => void
 }
 
 export async function submitAndUpdateUI(