Export useful functions from useToast

thesis · Mar 14, 2024 · 63530d3 · 63530d3
1 parent a84b69c
commit 63530d3
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 32 deletions.
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react"
+import React, { useCallback, useEffect } from "react"
 import {
   useDepositBTCTransaction,
   useDepositTelemetry,
@@ -24,7 +24,8 @@ export default function DepositBTCModal() {
   const { btcAddress, depositReceipt, stake } = useStakeFlowContext()
   const depositTelemetry = useDepositTelemetry()
 
-  const toast = useToast({
+  const { closeToast, showToast } = useToast({
+    id: ID_TOAST,
     render: ({ onClose }) => (
       <Toast
         status="error"
@@ -36,6 +37,8 @@ export default function DepositBTCModal() {
     ),
   })
 
+  useEffect(() => () => closeToast(), [closeToast])
+
   const onStakeBTCSuccess = useCallback(() => {
     setStatus(PROCESS_STATUSES.SUCCEEDED)
   }, [setStatus])
@@ -61,13 +64,7 @@ export default function DepositBTCModal() {
     }, 10000)
   }, [setStatus, handleStake])
 
-  const onDepositBTCError = useCallback(() => {
-    if (!toast.isActive(ID_TOAST)) {
-      toast({
-        id: ID_TOAST,
-      })
-    }
-  }, [toast])
+  const onDepositBTCError = useCallback(showToast, [showToast])
 
   const { sendBitcoinTransaction } = useDepositBTCTransaction(
     onDepositBTCSuccess,

diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/SignMessageModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/SignMessageModal.tsx
@@ -17,23 +17,16 @@ export default function SignMessageModal() {
   const { goNext, setStatus } = useModalFlowContext()
   const { signMessage } = useStakeFlowContext()
 
-  const toast = useToast({
+  const { closeToast, showToast } = useToast({
+    id: ID_TOAST,
     render: ({ onClose }) => (
       <Toast status="error" title={ERRORS.SIGNING} onClose={onClose}>
         <TextSm>Please try again.</TextSm>
       </Toast>
     ),
   })
 
-  const onError = useCallback(() => {
-    if (!toast.isActive(ID_TOAST)) {
-      toast({
-        id: ID_TOAST,
-      })
-    }
-  }, [toast])
-
-  const handleSignMessage = useExecuteFunction(signMessage, goNext, onError)
+  const handleSignMessage = useExecuteFunction(signMessage, goNext, showToast)
 
   const handleSignMessageWrapper = useCallback(() => {
     logPromiseFailure(handleSignMessage())
@@ -43,7 +36,7 @@ export default function SignMessageModal() {
     setStatus(PROCESS_STATUSES.PENDING)
   }, [setStatus])
 
-  useEffect(() => () => toast.close(ID_TOAST), [toast])
+  useEffect(() => () => closeToast(), [closeToast])
 
   return (
     <StakingStepsModalContent

diff --git a/dapp/src/hooks/useToast.ts b/dapp/src/hooks/useToast.ts
@@ -1,11 +1,31 @@
-import { UseToastOptions, useToast as useChakraToast } from "@chakra-ui/react"
+import {
+  ToastId,
+  UseToastOptions,
+  useToast as useChakraToast,
+} from "@chakra-ui/react"
+import { useCallback } from "react"
 
-export function useToast(props: UseToastOptions) {
-  return useChakraToast({
+export function useToast({
+  id,
+  ...props
+}: Omit<UseToastOptions, "id"> & { id: ToastId }) {
+  const toast = useChakraToast({
     position: "top",
     duration: null,
     isClosable: true,
     containerStyle: { my: 1 },
     ...props,
   })
+
+  const showToast = useCallback(() => {
+    if (!toast.isActive(id)) {
+      toast({
+        id,
+      })
+    }
+  }, [id, toast])
+
+  const closeToast = useCallback(() => toast.close(id), [id, toast])
+
+  return { toast, showToast, closeToast }
 }
diff --git a/dapp/src/hooks/useWalletToast.tsx b/dapp/src/hooks/useWalletToast.tsx
@@ -21,7 +21,8 @@ export function useWalletToast(
     [requestAccount],
   )
 
-  const toast = useToast({
+  const { closeToast, showToast } = useToast({
+    id: `${type}-account-toast`,
     render: ({ onClose }) => (
       <Toast
         status="error"
@@ -46,12 +47,6 @@ export function useWalletToast(
     ),
   })
 
-  const showToast = useCallback(() => {
-    if (!toast.isActive(type)) {
-      toast({ id: type })
-    }
-  }, [toast, type])
-
   useEffect(() => {
     if (isToastClosed) return
 
@@ -64,7 +59,7 @@ export function useWalletToast(
   useEffect(() => {
     if (!account || isToastClosed) return
 
-    toast.close(type)
+    closeToast()
     setIsToastClosed(true)
-  }, [account, isToastClosed, toast, type])
+  }, [account, closeToast, isToastClosed, type])
 }