Merge branch 'main' into subgraph_activity_details

dapp/src/assets/icons/index.ts

@@ -3,7 +3,6 @@ export * from "./ArrowUpRight"
 export * from "./ArrowLeft"
 export * from "./ArrowRight"
 export * from "./AcreLogo"
-export * from "./AlertInfo"
 export * from "./stBTC"
 export * from "./BTC"
 export * from "./ShieldPlus"

dapp/src/components/Header/ConnectWallet.tsx

@@ -1,10 +1,6 @@
 import React from "react"
 import { Button, HStack, Icon, Tooltip } from "@chakra-ui/react"
-import {
-  useRequestBitcoinAccount,
-  useRequestEthereumAccount,
-  useWalletContext,
-} from "#/hooks"
+import { useWallet } from "#/hooks"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 import { TextMd } from "#/components/shared/Typography"
 import { BitcoinIcon, EthereumIcon } from "#/assets/icons"
@@ -30,9 +26,10 @@ 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()
 
   const customDataBtcAccount = getCustomDataByAccount(btcAccount)
   const customDataEthAccount = getCustomDataByAccount(ethAccount)

dapp/src/components/LiquidStakingTokenPopover.tsx

@@ -12,8 +12,8 @@ import {
 import { SizeType } from "#/types"
 import { useDocsDrawer, useSharesBalance, useWalletContext } from "#/hooks"
 import { TextMd, TextSm } from "./shared/Typography"
-import Alert from "./shared/Alert"
 import { CurrencyBalance } from "./shared/CurrencyBalance"
+import { CardAlert } from "./shared/alerts"
 
 type LiquidStakingTokenPopoverProps = PopoverProps & { popoverSize: SizeType }
 
@@ -55,18 +55,18 @@ export function LiquidStakingTokenPopover({
             variant="greater-balance-xl"
             currency="stbtc"
           />
-          <Alert
+          <CardAlert
             mt={5}
             status="info"
-            withAlertIcon={false}
-            withActionIcon
-            onclick={openDocsDrawer}
+            withIcon={false}
+            withLink
+            onClick={openDocsDrawer}
           >
             <TextSm>
               Your tokens are this Ethereum address once the staking transaction
               is finalized.
             </TextSm>
-          </Alert>
+          </CardAlert>
         </PopoverBody>
       </PopoverContent>
     </Popover>

dapp/src/components/TransactionHistory/Table/utils/columns.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { StakeHistory } from "#/types"
-import { capitalize, truncateAddress } from "#/utils"
+import { capitalizeFirstLetter, truncateAddress } from "#/utils"
 import CustomCell from "../Cell/Custom"
 import Cell from "../Cell"
 import SimpleText from "../Cell/components/SimpleText"
@@ -32,10 +32,14 @@ export const COLUMNS: ColumnDef<StakeHistory, any>[] = [
     cell: ({ row: { original } }) => (
       <Cell
         firstField={
-          <SimpleText>{capitalize(original.callTx.action)}</SimpleText>
+          <SimpleText>
+            {capitalizeFirstLetter(original.callTx.action)}
+          </SimpleText>
         }
         secondField={
-          <SimpleText>{capitalize(original.receiptTx.action)}</SimpleText>
+          <SimpleText>
+            {capitalizeFirstLetter(original.receiptTx.action)}
+          </SimpleText>
         }
       />
     ),

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

@@ -1,29 +1,39 @@
-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 { CardAlert } from "#/components/shared/alerts"
+import { TOASTS, TOAST_IDS } from "#/types/toast"
 import StakingStepsModalContent from "./StakingStepsModalContent"
 
+const TOAST_ID = TOAST_IDS.DEPOSIT_TRANSACTION_ERROR
+const TOAST = TOASTS[TOAST_ID]
+
 export default function DepositBTCModal() {
   const { ethAccount } = useWalletContext()
   const { tokenAmount } = useTransactionContext()
   const { setStatus } = useModalFlowContext()
   const { btcAddress, depositReceipt, stake } = useStakeFlowContext()
   const depositTelemetry = useDepositTelemetry()
+  const { closeToast, 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],
+  )
 
   const onStakeBTCError = useCallback(() => {
     setStatus(PROCESS_STATUSES.FAILED)
@@ -36,34 +46,51 @@ 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({
+      id: TOAST_ID,
+      render: TOAST,
+    })
+    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,
   ])
 
@@ -73,15 +100,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,58 @@
-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, TOASTS, TOAST_IDS } from "#/types"
+import { ReceiveSTBTCAlert } from "#/components/shared/alerts"
 import StakingStepsModalContent from "./StakingStepsModalContent"
 
+const TOAST_ID = TOAST_IDS.SIGNING_ERROR
+const TOAST = TOASTS[TOAST_ID]
+
 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 { closeToast, openToast } = useToast()
 
   useEffect(() => {
     setStatus(PROCESS_STATUSES.PENDING)
   }, [setStatus])
 
+  const onSignMessageSuccess = useCallback(() => {
+    closeToast(TOAST_ID)
+    goNext()
+  }, [closeToast, goNext])
+
+  const onSignMessageError = useCallback(() => {
+    openToast({
+      id: TOAST_ID,
+      render: TOAST,
+    })
+    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/StakeFormModal/StakeDetails.tsx

@@ -11,12 +11,12 @@ function StakeDetails({
   maxTokenAmount,
 }: {
   currency: CurrencyType
-  minTokenAmount: string
-  maxTokenAmount: string
+  minTokenAmount: bigint
+  maxTokenAmount: bigint
 }) {
   const value = useTokenAmountFormValue() ?? 0n
-  const isMaximumValueExceeded = value > BigInt(maxTokenAmount)
-  const isMinimumValueFulfilled = value >= BigInt(minTokenAmount)
+  const isMaximumValueExceeded = value > maxTokenAmount
+  const isMinimumValueFulfilled = value >= minTokenAmount
   // Let's not calculate the details of the transaction when the value is not valid.
   const amount = !isMaximumValueExceeded && isMinimumValueFulfilled ? value : 0n
   const details = useTransactionDetails(amount)

dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/index.tsx

@@ -1,8 +1,7 @@
 import React from "react"
-import { BITCOIN_MIN_AMOUNT } from "#/constants"
 import TokenAmountForm from "#/components/shared/TokenAmountForm"
 import { TokenAmountFormValues } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
-import { useWalletContext } from "#/hooks"
+import { useMinDepositAmount, useWalletContext } from "#/hooks"
 import { FormSubmitButton } from "#/components/shared/Form"
 import StakeDetails from "./StakeDetails"
 
@@ -11,20 +10,21 @@ function StakeFormModal({
 }: {
   onSubmitForm: (values: TokenAmountFormValues) => void
 }) {
+  const minDepositAmount = useMinDepositAmount()
   const { btcAccount } = useWalletContext()
-  const tokenBalance = btcAccount?.balance.toString() ?? "0"
+  const tokenBalance = BigInt(btcAccount?.balance.toString() ?? "0")
 
   return (
     <TokenAmountForm
       tokenBalanceInputPlaceholder="BTC"
       currency="bitcoin"
       tokenBalance={tokenBalance}
-      minTokenAmount={BITCOIN_MIN_AMOUNT}
+      minTokenAmount={minDepositAmount}
       onSubmitForm={onSubmitForm}
     >
       <StakeDetails
         currency="bitcoin"
-        minTokenAmount={BITCOIN_MIN_AMOUNT}
+        minTokenAmount={minDepositAmount}
         maxTokenAmount={tokenBalance}
       />
       <FormSubmitButton mt={4}>Stake</FormSubmitButton>