Show error notifications

dapp/src/assets/icons/AlertError.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+import { createIcon } from "@chakra-ui/react"
+
+export const AlertError = createIcon({
+  displayName: "AlertError",
+  viewBox: "0 0 24 25",
+  path: [
+    <path
+      d="M12 9.5V13.5M12 16.5V16.51M3 12.5C3 13.6819 3.23279 14.8522 3.68508 15.9442C4.13738 17.0361 4.80031 18.0282 5.63604 18.864C6.47177 19.6997 7.46392 20.3626 8.55585 20.8149C9.64778 21.2672 10.8181 21.5 12 21.5C13.1819 21.5 14.3522 21.2672 15.4442 20.8149C16.5361 20.3626 17.5282 19.6997 18.364 18.864C19.1997 18.0282 19.8626 17.0361 20.3149 15.9442C20.7672 14.8522 21 13.6819 21 12.5C21 11.3181 20.7672 10.1478 20.3149 9.05585C19.8626 7.96392 19.1997 6.97177 18.364 6.13604C17.5282 5.30031 16.5361 4.63738 15.4442 4.18508C14.3522 3.73279 13.1819 3.5 12 3.5C10.8181 3.5 9.64778 3.73279 8.55585 4.18508C7.46392 4.63738 6.47177 5.30031 5.63604 6.13604C4.80031 6.97177 4.13738 7.96392 3.68508 9.05585C3.23279 10.1478 3 11.3181 3 12.5Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />,
+  ],
+})

dapp/src/assets/icons/AlertInfo.tsx

@@ -3,22 +3,15 @@ import { createIcon } from "@chakra-ui/react"
 
 export const AlertInfo = createIcon({
   displayName: "AlertInfo",
-  viewBox: "0 0 16 16",
+  viewBox: "0 0 24 24",
   path: [
-    <g clipPath="url(#clip0_3178_2454)">
-      <path
-        d="M7.99967 5.33325V7.99992M7.99967 10.6666H8.00634M14.6663 7.99992C14.6663 11.6818 11.6816 14.6666 7.99967 14.6666C4.31778 14.6666 1.33301 11.6818 1.33301 7.99992C1.33301 4.31802 4.31778 1.33325 7.99967 1.33325C11.6816 1.33325 14.6663 4.31802 14.6663 7.99992Z"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        fill="none"
-      />
-    </g>,
-    <defs>
-      <clipPath id="clip0_3178_2454">
-        <rect width="16" height="16" fill="currentColor" />
-      </clipPath>
-    </defs>,
+    <path
+      d="M12 9.5H12.01M11 12.5H12V16.5H13M3 12.5C3 13.6819 3.23279 14.8522 3.68508 15.9442C4.13738 17.0361 4.80031 18.0282 5.63604 18.864C6.47177 19.6997 7.46392 20.3626 8.55585 20.8149C9.64778 21.2672 10.8181 21.5 12 21.5C13.1819 21.5 14.3522 21.2672 15.4442 20.8149C16.5361 20.3626 17.5282 19.6997 18.364 18.864C19.1997 18.0282 19.8626 17.0361 20.3149 15.9442C20.7672 14.8522 21 13.6819 21 12.5C21 10.1131 20.0518 7.82387 18.364 6.13604C16.6761 4.44821 14.3869 3.5 12 3.5C9.61305 3.5 7.32387 4.44821 5.63604 6.13604C3.94821 7.82387 3 10.1131 3 12.5Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />,
   ],
 })

dapp/src/assets/icons/index.ts

@@ -8,6 +8,7 @@ export * from "./AcreLogo"
 export * from "./ConnectBTCAccount"
 export * from "./ConnectETHAccount"
 export * from "./AlertInfo"
+export * from "./AlertError"
 export * from "./stBTC"
 export * from "./BTC"
 export * from "./ShieldPlus"

dapp/src/components/Header/ConnectWallet.tsx

@@ -1,14 +1,10 @@
 import React from "react"
 import { Button, HStack, Icon, Tooltip } from "@chakra-ui/react"
-import {
-  useRequestBitcoinAccount,
-  useRequestEthereumAccount,
-  useWalletContext,
-} from "#/hooks"
+import { Account } from "@ledgerhq/wallet-api-client"
+import { useWalletToast, useWallet } from "#/hooks"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 import { TextMd } from "#/components/shared/Typography"
 import { Bitcoin, EthereumIcon } from "#/assets/icons"
-import { Account } from "@ledgerhq/wallet-api-client"
 import { CURRENCY_ID_BITCOIN } from "#/constants"
 import {
   isSupportedBTCAddressType,
@@ -30,9 +26,13 @@ const getCustomDataByAccount = (
 }
 
 export default function ConnectWallet() {
-  const { requestAccount: requestBitcoinAccount } = useRequestBitcoinAccount()
-  const { requestAccount: requestEthereumAccount } = useRequestEthereumAccount()
-  const { btcAccount, ethAccount } = useWalletContext()
+  const {
+    bitcoin: { account: btcAccount, requestAccount: requestBitcoinAccount },
+    ethereum: { account: ethAccount, requestAccount: requestEthereumAccount },
+  } = useWallet()
+
+  useWalletToast("ethereum")
+  useWalletToast("bitcoin")
 
   const customDataBtcAccount = getCustomDataByAccount(btcAccount)
   const customDataEthAccount = getCustomDataByAccount(ethAccount)

dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx

@@ -1,29 +1,38 @@
-import React, { useCallback } from "react"
+import React, { useCallback, useState } from "react"
 import {
   useDepositBTCTransaction,
   useDepositTelemetry,
   useExecuteFunction,
   useModalFlowContext,
   useStakeFlowContext,
+  useToast,
   useTransactionContext,
   useWalletContext,
 } from "#/hooks"
-import Alert from "#/components/shared/Alert"
 import { TextMd } from "#/components/shared/Typography"
 import { logPromiseFailure } from "#/utils"
-import { PROCESS_STATUSES } from "#/types"
+import { PROCESS_STATUSES, TOAST_TYPES } from "#/types"
+import { CardAlert } from "#/components/shared/alerts"
+import { TOASTS } from "#/components/shared/toasts"
 import StakingStepsModalContent from "./StakingStepsModalContent"
 
+const TOAST_ID = TOAST_TYPES.DEPOSIT_TRANSACTION_ERROR
+
 export default function DepositBTCModal() {
   const { ethAccount } = useWalletContext()
   const { tokenAmount } = useTransactionContext()
   const { setStatus } = useModalFlowContext()
   const { btcAddress, depositReceipt, stake } = useStakeFlowContext()
   const depositTelemetry = useDepositTelemetry()
+  const { close: closeToast, open: openToast } = useToast()
 
-  const onStakeBTCSuccess = useCallback(() => {
-    setStatus(PROCESS_STATUSES.SUCCEEDED)
-  }, [setStatus])
+  const [isLoading, setIsLoading] = useState(false)
+  const [buttonText, setButtonText] = useState("Deposit BTC")
+
+  const onStakeBTCSuccess = useCallback(
+    () => setStatus(PROCESS_STATUSES.SUCCEEDED),
+    [setStatus],
+  )
 
   // TODO: After a failed attempt, we should display the message
   const onStakeBTCError = useCallback(() => {
@@ -37,34 +46,48 @@ export default function DepositBTCModal() {
   )
 
   const onDepositBTCSuccess = useCallback(() => {
+    closeToast(TOAST_ID)
     setStatus(PROCESS_STATUSES.LOADING)
 
     logPromiseFailure(handleStake())
-  }, [setStatus, handleStake])
+  }, [closeToast, setStatus, handleStake])
 
-  const { sendBitcoinTransaction } =
-    useDepositBTCTransaction(onDepositBTCSuccess)
+  const showError = useCallback(() => {
+    openToast(TOASTS[TOAST_ID]())
+    setButtonText("Try again")
+  }, [openToast])
+
+  const onDepositBTCError = useCallback(() => showError(), [showError])
+
+  const { sendBitcoinTransaction } = useDepositBTCTransaction(
+    onDepositBTCSuccess,
+    onDepositBTCError,
+  )
 
   const handledDepositBTC = useCallback(async () => {
     if (!tokenAmount?.amount || !btcAddress || !depositReceipt || !ethAccount)
       return
 
+    setIsLoading(true)
     const response = await depositTelemetry(
       depositReceipt,
       btcAddress,
       ethAccount.address,
     )
+    setIsLoading(false)
 
-    // TODO: Display the correct message for the user
-    if (response.verificationStatus !== "valid") return
-
-    logPromiseFailure(sendBitcoinTransaction(tokenAmount?.amount, btcAddress))
+    if (response.verificationStatus === "valid") {
+      logPromiseFailure(sendBitcoinTransaction(tokenAmount?.amount, btcAddress))
+    } else {
+      showError()
+    }
   }, [
     btcAddress,
     depositReceipt,
     depositTelemetry,
     ethAccount,
     sendBitcoinTransaction,
+    showError,
     tokenAmount?.amount,
   ])
 
@@ -74,15 +97,16 @@ export default function DepositBTCModal() {
 
   return (
     <StakingStepsModalContent
-      buttonText="Deposit BTC"
+      buttonText={buttonText}
       activeStep={1}
+      isLoading={isLoading}
       onClick={handledDepositBTCWrapper}
     >
-      <Alert>
+      <CardAlert status="error">
         <TextMd>
           Make a Bitcoin transaction to deposit and stake your BTC.
         </TextMd>
-      </Alert>
+      </CardAlert>
     </StakingStepsModalContent>
   )
 }

dapp/src/components/TransactionModal/ActiveStakingStep/SignMessageModal.tsx

@@ -1,34 +1,55 @@
-import React, { useCallback, useEffect } from "react"
+import React, { useCallback, useEffect, useState } from "react"
 import {
   useExecuteFunction,
   useModalFlowContext,
   useStakeFlowContext,
+  useToast,
 } from "#/hooks"
 import { logPromiseFailure } from "#/utils"
-import AlertReceiveSTBTC from "#/components/shared/AlertReceiveSTBTC"
-import { PROCESS_STATUSES } from "#/types"
+import { PROCESS_STATUSES, TOAST_TYPES } from "#/types"
+import { ReceiveSTBTCAlert } from "#/components/shared/alerts"
+import { TOASTS } from "#/components/shared/toasts"
 import StakingStepsModalContent from "./StakingStepsModalContent"
 
+const TOAST_ID = TOAST_TYPES.SIGNING_ERROR
+
 export default function SignMessageModal() {
   const { goNext, setStatus } = useModalFlowContext()
   const { signMessage } = useStakeFlowContext()
-  const handleSignMessage = useExecuteFunction(signMessage, goNext)
-
-  const handleSignMessageWrapper = useCallback(() => {
-    logPromiseFailure(handleSignMessage())
-  }, [handleSignMessage])
+  const [buttonText, setButtonText] = useState("Sign now")
+  const { close: closeToast, open: openToast } = useToast()
 
   useEffect(() => {
     setStatus(PROCESS_STATUSES.PENDING)
   }, [setStatus])
 
+  const onSignMessageSuccess = useCallback(() => {
+    closeToast(TOAST_ID)
+    goNext()
+  }, [closeToast, goNext])
+
+  const onSignMessageError = useCallback(() => {
+    openToast(TOASTS[TOAST_ID]())
+    setButtonText("Try again")
+  }, [openToast])
+
+  const handleSignMessage = useExecuteFunction(
+    signMessage,
+    onSignMessageSuccess,
+    onSignMessageError,
+  )
+
+  const handleSignMessageWrapper = useCallback(() => {
+    logPromiseFailure(handleSignMessage())
+  }, [handleSignMessage])
+
   return (
     <StakingStepsModalContent
-      buttonText="Sign now"
+      buttonText={buttonText}
       activeStep={0}
       onClick={handleSignMessageWrapper}
     >
-      <AlertReceiveSTBTC />
+      <ReceiveSTBTCAlert />
     </StakingStepsModalContent>
   )
 }

dapp/src/components/TransactionModal/ActiveStakingStep/StakingStepsModalContent.tsx

@@ -1,14 +1,9 @@
 import React from "react"
-import {
-  Button,
-  HStack,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-} from "@chakra-ui/react"
+import { HStack, ModalBody, ModalFooter, ModalHeader } from "@chakra-ui/react"
 import { TextLg, TextMd } from "#/components/shared/Typography"
 import StepperBase, { StepBase } from "#/components/shared/StepperBase"
 import Spinner from "#/components/shared/Spinner"
+import { LoadingButton } from "#/components/shared/LoadingButton"
 
 export function Title({ children }: { children: React.ReactNode }) {
   return <TextLg fontWeight="bold">{children}</TextLg>
@@ -43,12 +38,14 @@ const STEPS: StepBase[] = [
 
 export default function StakingStepsModalContent({
   buttonText,
+  isLoading,
   activeStep,
   onClick,
   children,
 }: {
   buttonText: string
   activeStep: number
+  isLoading?: boolean
   onClick: () => void
   children: React.ReactNode
 }) {
@@ -68,9 +65,14 @@ export default function StakingStepsModalContent({
         {children}
       </ModalBody>
       <ModalFooter>
-        <Button size="lg" width="100%" onClick={onClick}>
+        <LoadingButton
+          size="lg"
+          width="100%"
+          onClick={onClick}
+          isLoading={isLoading}
+        >
           {buttonText}
-        </Button>
+        </LoadingButton>
       </ModalFooter>
     </>
   )

dapp/src/components/TransactionModal/ActiveUnstakingStep/SignMessageModal.tsx

@@ -3,8 +3,8 @@ import { useExecuteFunction, useModalFlowContext } from "#/hooks"
 import { PROCESS_STATUSES } from "#/types"
 import { Button, ModalBody, ModalFooter, ModalHeader } from "@chakra-ui/react"
 import { TextMd } from "#/components/shared/Typography"
-import AlertReceiveSTBTC from "#/components/shared/AlertReceiveSTBTC"
 import { logPromiseFailure } from "#/utils"
+import { ReceiveSTBTCAlert } from "#/components/shared/alerts"
 
 export default function SignMessageModal() {
   const { setStatus } = useModalFlowContext()
@@ -46,7 +46,7 @@ export default function SignMessageModal() {
           You will sign a gas-free Ethereum message to indicate the address
           where you'd like to get your stBTC liquid staking token.
         </TextMd>
-        <AlertReceiveSTBTC />
+        <ReceiveSTBTCAlert />
       </ModalBody>
       <ModalFooter pt={10}>
         <Button size="lg" width="100%" onClick={handleSignMessageWrapper}>

dapp/src/components/TransactionModal/ModalContentWrapper/MissingAccountModal.tsx

@@ -9,9 +9,9 @@ import {
   ModalHeader,
 } from "@chakra-ui/react"
 import { TextMd } from "#/components/shared/Typography"
-import Alert from "#/components/shared/Alert"
 import { logPromiseFailure, getCurrencyByType } from "#/utils"
 import { CurrencyType, RequestAccountParams } from "#/types"
+import { CardAlert } from "#/components/shared/alerts"
 
 type MissingAccountModalProps = {
   currency: CurrencyType
@@ -40,14 +40,14 @@ export default function MissingAccountModal({
           {name} account is required to make transactions for depositing and
           staking your {symbol}.
         </TextMd>
-        <Alert>
+        <CardAlert>
           <TextMd>
             <Highlight query="Accounts" styles={{ fontWeight: "bold" }}>
               You will be sent to the Ledger Accounts section to perform this
               action.
             </Highlight>
           </TextMd>
-        </Alert>
+        </CardAlert>
       </ModalBody>
       <ModalFooter mt={4}>
         <Button size="lg" width="100%" onClick={handleClick}>