Create a special hook for triggering TransactionModal

After clicking on the “Deposit BTC” button, we should first call the Ledger Live native window to select an account. Once the account has been selected we open the right transaction modal to the user.

dapp/src/components/TransactionModal/ActionFormModal.tsx

@@ -19,11 +19,11 @@ const FORM_DATA: Record<
     ) => React.ReactNode
   }
 > = {
-  stake: {
+  [ACTION_FLOW_TYPES.STAKE]: {
     header: "Deposit",
     FormComponent: StakeFormModal,
   },
-  unstake: {
+  [ACTION_FLOW_TYPES.UNSTAKE]: {
     header: "Withdraw",
     FormComponent: UnstakeFormModal,
   },

dapp/src/components/TransactionModal/ErrorModal.tsx

@@ -1,9 +1,9 @@
 import React from "react"
-import { ActionFlowType } from "#/types"
+import { ACTION_FLOW_TYPES, ActionFlowType } from "#/types"
 import StakingErrorModal from "./ActiveStakingStep/StakingErrorModal"
 
 export default function ErrorModal({ type }: { type: ActionFlowType }) {
-  if (type === "stake") return <StakingErrorModal />
+  if (type === ACTION_FLOW_TYPES.STAKE) return <StakingErrorModal />
   // TODO: Handle the case of unstake action
   return null
 }

dapp/src/hooks/index.ts

@@ -25,3 +25,4 @@ export * from "./useSize"
 export * from "./router"
 export * from "./useTransactionFee"
 export * from "./useModal"
+export * from "./useTransactionModal"

dapp/src/hooks/useModal.ts

@@ -5,6 +5,7 @@ import {
   selectModalType,
 } from "#/store/modal"
 import { ModalProps, ModalType } from "#/types"
+import { useCallback } from "react"
 import { useAppDispatch } from "./store/useAppDispatch"
 import { useAppSelector } from "./store/useAppSelector"
 
@@ -13,10 +14,14 @@ export function useModal() {
   const modalProps = useAppSelector(selectModalProps)
   const dispatch = useAppDispatch()
 
-  const handleOpenModal = (type: ModalType, props?: ModalProps) =>
-    dispatch(openModal({ modalType: type, props }))
+  const handleOpenModal = useCallback(
+    (type: ModalType, props?: ModalProps) => {
+      dispatch(openModal({ modalType: type, props }))
+    },
+    [dispatch],
+  )
 
-  const handleCloseModal = () => dispatch(closeModal())
+  const handleCloseModal = useCallback(() => dispatch(closeModal()), [dispatch])
 
   return {
     modalType,

dapp/src/hooks/useRequestBitcoinAccount.ts

@@ -22,5 +22,5 @@ export function useRequestBitcoinAccount(): UseRequestAccountReturn {
     walletApiReactTransport.disconnect()
   }, [requestAccount, walletApiReactTransport])
 
-  return { requestAccount: requestBitcoinAccount }
+  return { account, requestAccount: requestBitcoinAccount }
 }

dapp/src/hooks/useRequestEthereumAccount.ts

@@ -22,5 +22,5 @@ export function useRequestEthereumAccount(): UseRequestAccountReturn {
     walletApiReactTransport.disconnect()
   }, [requestAccount, walletApiReactTransport])
 
-  return { requestAccount: requestEthereumAccount }
+  return { account, requestAccount: requestEthereumAccount }
 }

dapp/src/hooks/useTransactionModal.ts

@@ -0,0 +1,34 @@
+import { ActionFlowType, MODAL_TYPES } from "#/types"
+import { useCallback, useEffect } from "react"
+import { logPromiseFailure } from "#/utils"
+import { useModal } from "./useModal"
+import { useWalletContext } from "./useWalletContext"
+import { useRequestBitcoinAccount } from "./useRequestBitcoinAccount"
+
+export function useTransactionModal(type: ActionFlowType) {
+  const { btcAccount } = useWalletContext()
+  const { account, requestAccount } = useRequestBitcoinAccount()
+  const { openModal } = useModal()
+
+  const handleOpenModal = useCallback(() => {
+    openModal(MODAL_TYPES[type], { type })
+  }, [openModal, type])
+
+  useEffect(() => {
+    // We should check the `account` here from `useRequestBitcoinAccount`.
+    // This will allow us to check there whether the account request action
+    // called earlier was successful.
+    // Checking the `btcAccount` may trigger a not needed modal opening.
+    if (account) {
+      handleOpenModal()
+    }
+  }, [account, handleOpenModal, openModal, type])
+
+  return useCallback(() => {
+    if (btcAccount) {
+      handleOpenModal()
+    } else {
+      logPromiseFailure(requestAccount())
+    }
+  }, [btcAccount, handleOpenModal, requestAccount])
+}

dapp/src/pages/DashboardPage/PositionDetails.tsx

@@ -9,15 +9,16 @@ import {
 } from "@chakra-ui/react"
 import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion"
 import { TextMd } from "#/components/shared/Typography"
-import { MODAL_TYPES } from "#/types"
+import { ACTION_FLOW_TYPES } from "#/types"
 import { useEstimatedBTCBalance } from "#/hooks/store"
 import { LiquidStakingTokenPopover } from "#/components/LiquidStakingTokenPopover"
-import { useModal, useSize } from "#/hooks"
+import { useSize, useTransactionModal } from "#/hooks"
 
 export default function PositionDetails(props: CardProps) {
   const estimatedBtcBalance = useEstimatedBTCBalance()
   const { ref, size } = useSize()
-  const { openModal } = useModal()
+  const openDepositModal = useTransactionModal(ACTION_FLOW_TYPES.STAKE)
+  const openWithdrawModal = useTransactionModal(ACTION_FLOW_TYPES.UNSTAKE)
 
   return (
     <Card ref={ref} {...props}>
@@ -40,17 +41,10 @@ export default function PositionDetails(props: CardProps) {
         />
       </CardBody>
       <CardFooter flexDirection="column" gap={2}>
-        <Button
-          size="lg"
-          onClick={() => openModal(MODAL_TYPES.STAKE, { type: "stake" })}
-        >
+        <Button size="lg" onClick={openDepositModal}>
           Stake
         </Button>
-        <Button
-          size="lg"
-          variant="outline"
-          onClick={() => openModal(MODAL_TYPES.UNSTAKE, { type: "unstake" })}
-        >
+        <Button size="lg" variant="outline" onClick={openWithdrawModal}>
           Unstake
         </Button>
       </CardFooter>

dapp/src/pages/LandingPage/components/HeroSection.tsx

@@ -1,10 +1,10 @@
 import React from "react"
 import { Button, Heading, VStack, Text } from "@chakra-ui/react"
-import { useModal } from "#/hooks"
-import { MODAL_TYPES } from "#/types"
+import { useTransactionModal } from "#/hooks"
+import { ACTION_FLOW_TYPES } from "#/types"
 
 export default function HeroSection() {
-  const { openModal } = useModal()
+  const openTransactionModal = useTransactionModal(ACTION_FLOW_TYPES.STAKE)
 
   return (
     <VStack spacing={0} mt={13} mb={20} align="center" textAlign="center">
@@ -29,7 +29,7 @@ export default function HeroSection() {
         fontWeight="bold"
         lineHeight={6}
         h="auto"
-        onClick={() => openModal(MODAL_TYPES.STAKE, { type: "stake" })}
+        onClick={openTransactionModal}
       >
         Deposit BTC
       </Button>

dapp/src/store/action-flow/actionFlowSlice.ts

@@ -1,4 +1,5 @@
 import {
+  ACTION_FLOW_TYPES,
   ActionFlowType,
   PROCESS_STATUSES,
   ProcessStatus,
@@ -14,7 +15,7 @@ type ActionFlowState = {
 }
 
 const initialState: ActionFlowState = {
-  type: "stake",
+  type: ACTION_FLOW_TYPES.STAKE,
   activeStep: 1,
   status: PROCESS_STATUSES.IDLE,
   tokenAmount: undefined,

dapp/src/types/action-flow.ts

@@ -1,6 +1,6 @@
 export const ACTION_FLOW_TYPES = {
-  STAKE: "stake",
-  UNSTAKE: "unstake",
+  STAKE: "STAKE",
+  UNSTAKE: "UNSTAKE",
 } as const
 
 export type ActionFlowType =

dapp/src/types/ledger-live-app.ts

@@ -1,9 +1,10 @@
-import { WalletAPIClient } from "@ledgerhq/wallet-api-client"
+import { Account, WalletAPIClient } from "@ledgerhq/wallet-api-client"
 
 export type RequestAccountParams = Parameters<
   WalletAPIClient["account"]["request"]
 >
 
 export type UseRequestAccountReturn = {
+  account: Account | null
   requestAccount: (...params: RequestAccountParams) => Promise<void>
 }