Merge branch 'main' into wrap-eth-address-handling-iniside-sdk

dapp/src/components/Sidebar.tsx

@@ -46,6 +46,7 @@ export default function Sidebar() {
       <Box __css={styles.sidebar}>
         {featureFlags.GAMIFICATION_ENABLED && (
           <>
+            {/* TODO: Update the component when logic of losing rewards is ready */}
             <TextSm fontWeight="bold">Rewards you’ll unlock</TextSm>
             <Flex mt={2} mb={7} flexDir="column" gap={2}>
               {BENEFITS.map(({ name, imageSrc }) => (

dapp/src/components/TransactionModal/ActionFormModal.tsx

@@ -12,16 +12,16 @@ const FORM_DATA: Record<
   ActionFlowType,
   {
     heading: string
-    renderComponent: (props: BaseFormProps<TokenAmountFormValues>) => ReactNode
+    FormComponent: (props: BaseFormProps<TokenAmountFormValues>) => ReactNode
   }
 > = {
   [ACTION_FLOW_TYPES.STAKE]: {
     heading: "Deposit",
-    renderComponent: StakeFormModal,
+    FormComponent: StakeFormModal,
   },
   [ACTION_FLOW_TYPES.UNSTAKE]: {
     heading: "Withdraw",
-    renderComponent: UnstakeFormModal,
+    FormComponent: UnstakeFormModal,
   },
 }
 
@@ -31,7 +31,7 @@ function ActionFormModal({ type }: { type: ActionFlowType }) {
 
   const [isLoading, setIsLoading] = useState(false)
 
-  const { heading, renderComponent } = FORM_DATA[type]
+  const { heading, FormComponent } = FORM_DATA[type]
 
   const handleInitStake = useCallback(async () => {
     await initStake()
@@ -68,9 +68,7 @@ function ActionFormModal({ type }: { type: ActionFlowType }) {
       <ModalHeader>{heading}</ModalHeader>
       <ModalBody>
         <Box w="100%">
-          {renderComponent({
-            onSubmitForm: handleSubmitFormWrapper,
-          })}
+          <FormComponent onSubmitForm={handleSubmitFormWrapper} />
         </Box>
       </ModalBody>
     </>

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

@@ -1,28 +1,27 @@
 import React, { useCallback, useEffect } from "react"
 import {
+  useActionFlowPause,
   useActionFlowTokenAmount,
   useAppDispatch,
   useDepositBTCTransaction,
   useExecuteFunction,
   useStakeFlowContext,
   useVerifyDepositAddress,
 } from "#/hooks"
-import { logPromiseFailure } from "#/utils"
-import { PROCESS_STATUSES } from "#/types"
-import { ModalBody, ModalHeader, Highlight, useTimeout } from "@chakra-ui/react"
-import Spinner from "#/components/shared/Spinner"
+import { isLedgerLiveError, logPromiseFailure } from "#/utils"
+import { PROCESS_STATUSES, LedgerLiveError } from "#/types"
+import { Highlight } from "@chakra-ui/react"
 import { TextMd } from "#/components/shared/Typography"
 import { CardAlert } from "#/components/shared/alerts"
-import { ONE_SEC_IN_MILLISECONDS } from "#/constants"
 import { setStatus, setTxHash } from "#/store/action-flow"
-
-const DELAY = ONE_SEC_IN_MILLISECONDS
+import TriggerTransactionModal from "../TriggerTransactionModal"
 
 export default function DepositBTCModal() {
   const tokenAmount = useActionFlowTokenAmount()
   const { btcAddress, depositReceipt, stake } = useStakeFlowContext()
   const verifyDepositAddress = useVerifyDepositAddress()
   const dispatch = useAppDispatch()
+  const { handlePause } = useActionFlowPause()
 
   const onStakeBTCSuccess = useCallback(() => {
     dispatch(setStatus(PROCESS_STATUSES.SUCCEEDED))
@@ -45,9 +44,22 @@ export default function DepositBTCModal() {
   }, [dispatch, handleStake])
 
   // TODO: Handle when the function fails
-  const showError = useCallback(() => {}, [])
+  const showError = useCallback((error?: LedgerLiveError) => {
+    console.error(error)
+  }, [])
+
+  const onDepositBTCError = useCallback(
+    (error: unknown) => {
+      if (!isLedgerLiveError(error)) return
 
-  const onDepositBTCError = useCallback(() => showError(), [showError])
+      const isInterrupted =
+        error.message && error.message.includes("Signature interrupted by user")
+      if (isInterrupted) handlePause()
+
+      showError(error)
+    },
+    [showError, handlePause],
+  )
 
   const { sendBitcoinTransaction, transactionHash } = useDepositBTCTransaction(
     onDepositBTCSuccess,
@@ -82,23 +94,16 @@ export default function DepositBTCModal() {
     logPromiseFailure(handledDepositBTC())
   }, [handledDepositBTC])
 
-  useTimeout(handledDepositBTCWrapper, DELAY)
-
   return (
-    <>
-      <ModalHeader>Waiting transaction...</ModalHeader>
-      <ModalBody>
-        <Spinner size="xl" />
-        <TextMd>Please complete the transaction in your wallet.</TextMd>
-        <CardAlert>
-          <TextMd>
-            <Highlight query="Rewards" styles={{ fontWeight: "bold" }}>
-              You will receive your Rewards once the deposit transaction is
-              completed.
-            </Highlight>
-          </TextMd>
-        </CardAlert>
-      </ModalBody>
-    </>
+    <TriggerTransactionModal callback={handledDepositBTCWrapper}>
+      <CardAlert>
+        <TextMd>
+          <Highlight query="Rewards" styles={{ fontWeight: "bold" }}>
+            You will receive your Rewards once the deposit transaction is
+            completed.
+          </Highlight>
+        </TextMd>
+      </CardAlert>
+    </TriggerTransactionModal>
   )
 }

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

@@ -2,11 +2,10 @@ import React from "react"
 import { List } from "@chakra-ui/react"
 import TransactionDetailsAmountItem from "#/components/shared/TransactionDetails/AmountItem"
 import FeesDetailsAmountItem from "#/components/shared/FeesDetails/FeesItem"
-import { useTokenAmountFormValue } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
+import { useTokenAmountField } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
 import { FeesTooltip } from "#/components/TransactionModal/FeesTooltip"
 import { useTransactionDetails } from "#/hooks"
 import { CurrencyType, DepositFee } from "#/types"
-import { useTransactionFee } from "#/hooks/useTransactionFee"
 
 const mapDepositFeeToLabel = (feeId: keyof DepositFee) => {
   switch (feeId) {
@@ -19,30 +18,20 @@ const mapDepositFeeToLabel = (feeId: keyof DepositFee) => {
   }
 }
 
-function StakeDetails({
-  currency,
-  minTokenAmount,
-  maxTokenAmount,
-}: {
-  currency: CurrencyType
-  minTokenAmount: bigint
-  maxTokenAmount: bigint
-}) {
-  const value = useTokenAmountFormValue() ?? 0n
-  const isMaximumValueExceeded = value > maxTokenAmount
-  const isMinimumValueFulfilled = value >= minTokenAmount
+function StakeDetails({ currency }: { currency: CurrencyType }) {
+  const { value, isValid } = useTokenAmountField()
   // Let's not calculate the details of the transaction when the value is not valid.
-  const amount = !isMaximumValueExceeded && isMinimumValueFulfilled ? value : 0n
+  const amount = isValid ? value : 0n
   const details = useTransactionDetails(amount)
-  const { total, ...restFees } = useTransactionFee(amount)
+  const { total, ...restFees } = details.transactionFee
 
   return (
     <List spacing={3} mt={10}>
       <TransactionDetailsAmountItem
         label="Amount to be staked"
         from={{
           currency,
-          amount: details?.btcAmount,
+          amount: details.amount,
         }}
         to={{
           currency: "usd",
@@ -67,7 +56,7 @@ function StakeDetails({
         label="Approximately staked tokens"
         from={{
           currency,
-          amount: details?.estimatedAmount,
+          amount: details.estimatedAmount,
         }}
         to={{
           currency: "usd",

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

@@ -22,11 +22,7 @@ function StakeFormModal({
       minTokenAmount={minDepositAmount}
       onSubmitForm={onSubmitForm}
     >
-      <StakeDetails
-        currency="bitcoin"
-        minTokenAmount={minDepositAmount}
-        maxTokenAmount={tokenBalance}
-      />
+      <StakeDetails currency="bitcoin" />
       <FormSubmitButton mt={10}>Stake</FormSubmitButton>
     </TokenAmountForm>
   )

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

@@ -1,14 +1,14 @@
 import React, { useCallback } from "react"
-import { useAppDispatch, useExecuteFunction } from "#/hooks"
+import { useAppDispatch, useExecuteFunction, useModal } from "#/hooks"
 import { PROCESS_STATUSES } from "#/types"
-import { Button, ModalBody, ModalFooter, ModalHeader } from "@chakra-ui/react"
-import { TextMd } from "#/components/shared/Typography"
+import { Button } from "@chakra-ui/react"
 import { logPromiseFailure } from "#/utils"
 import { setStatus } from "#/store/action-flow"
+import TriggerTransactionModal from "../TriggerTransactionModal"
 
 export default function SignMessageModal() {
   const dispatch = useAppDispatch()
-
+  const { closeModal } = useModal()
   const onSignMessageSuccess = useCallback(() => {
     dispatch(setStatus(PROCESS_STATUSES.SUCCEEDED))
   }, [dispatch])
@@ -35,19 +35,10 @@ export default function SignMessageModal() {
   }, [dispatch, handleSignMessage])
 
   return (
-    <>
-      <ModalHeader>Sign message</ModalHeader>
-      <ModalBody textAlign="start" alignItems="start" py={0} gap={10}>
-        <TextMd color="grey.500">
-          You will sign a gas-free Ethereum message to indicate the address
-          where you&apos;d like to get your stBTC liquid staking token.
-        </TextMd>
-      </ModalBody>
-      <ModalFooter pt={10}>
-        <Button size="lg" width="100%" onClick={handleSignMessageWrapper}>
-          Continue
-        </Button>
-      </ModalFooter>
-    </>
+    <TriggerTransactionModal callback={handleSignMessageWrapper}>
+      <Button size="lg" width="100%" variant="outline" onClick={closeModal}>
+        Cancel
+      </Button>
+    </TriggerTransactionModal>
   )
 }

dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx

@@ -1,28 +1,42 @@
 import React from "react"
-import { List } from "@chakra-ui/react"
+import { Flex, List } from "@chakra-ui/react"
 import TransactionDetailsAmountItem from "#/components/shared/TransactionDetails/AmountItem"
-import { useTokenAmountFormValue } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
+import { useTokenAmountField } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
 import { useTransactionDetails } from "#/hooks"
 import { CurrencyType } from "#/types"
+import { featureFlags } from "#/constants"
+import WithdrawWarning from "./WithdrawWarning"
 
-function UnstakeDetails({ currency }: { currency: CurrencyType }) {
-  const value = useTokenAmountFormValue()
-  const details = useTransactionDetails(value ?? 0n)
+function UnstakeDetails({
+  balance,
+  currency,
+}: {
+  balance: bigint
+  currency: CurrencyType
+}) {
+  const { value, isValid } = useTokenAmountField()
+  // Let's not calculate the details of the transaction when the value is not valid.
+  const amount = isValid ? value : 0n
+  const details = useTransactionDetails(amount)
 
   return (
-    <List spacing={3} mt={10}>
-      <TransactionDetailsAmountItem
-        label="Amount to be unstaked from the pool"
-        from={{
-          currency,
-          amount: details?.btcAmount,
-        }}
-        to={{
-          currency: "usd",
-        }}
-      />
-      {/* TODO: Uncomment when unstaking fees are ready.  */}
-      {/* <FeesDetailsAmountItem
+    <Flex flexDirection="column" gap={10} mt={4}>
+      {featureFlags.GAMIFICATION_ENABLED && (
+        <WithdrawWarning balance={balance} currency={currency} />
+      )}
+      <List spacing={3}>
+        <TransactionDetailsAmountItem
+          label="Withdraw from pool"
+          from={{
+            currency,
+            amount: details.amount,
+          }}
+          to={{
+            currency: "usd",
+          }}
+        />
+        {/* TODO: Uncomment when unstaking fees are ready.  */}
+        {/* <FeesDetailsAmountItem
         label="Fees"
         sublabel="How are fees calculated?"
         tooltip={<FeesTooltip fees={{}} />}
@@ -34,17 +48,18 @@ function UnstakeDetails({ currency }: { currency: CurrencyType }) {
           currency: "usd",
         }}
       /> */}
-      <TransactionDetailsAmountItem
-        label="Approximately unstaked tokens"
-        from={{
-          currency,
-          amount: details?.estimatedAmount,
-        }}
-        to={{
-          currency: "usd",
-        }}
-      />
-    </List>
+        <TransactionDetailsAmountItem
+          label="You will receive"
+          from={{
+            currency,
+            amount: details.estimatedAmount,
+          }}
+          to={{
+            currency: "usd",
+          }}
+        />
+      </List>
+    </Flex>
   )
 }