New flow to connect account before opening modal windows

dapp/src/components/TransactionModal/ActionFormModal.tsx

@@ -15,11 +15,11 @@ const FORM_DATA: Record<
     renderComponent: (props: BaseFormProps<TokenAmountFormValues>) => ReactNode
   }
 > = {
-  stake: {
+  [ACTION_FLOW_TYPES.STAKE]: {
     heading: "Deposit",
     renderComponent: StakeFormModal,
   },
-  unstake: {
+  [ACTION_FLOW_TYPES.UNSTAKE]: {
     heading: "Withdraw",
     renderComponent: 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/DashboardCard.tsx

@@ -15,9 +15,9 @@ import { TextMd } from "#/components/shared/Typography"
 import IconTag from "#/components/shared/IconTag"
 import { BoostArrowIcon } from "#/assets/icons"
 import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion"
-import { AmountType, MODAL_TYPES } from "#/types"
+import { ACTION_FLOW_TYPES, AmountType } from "#/types"
 import { ActivitiesList } from "#/components/shared/ActivitiesList"
-import { useModal } from "#/hooks"
+import { useTransactionModal } from "#/hooks"
 
 const buttonStyles: ButtonProps = {
   size: "lg",
@@ -37,7 +37,7 @@ type DashboardCardProps = CardProps & {
 export default function DashboardCard(props: DashboardCardProps) {
   const { bitcoinAmount, positionPercentage, ...restProps } = props
 
-  const { openModal } = useModal()
+  const openDepositModal = useTransactionModal(ACTION_FLOW_TYPES.STAKE)
 
   return (
     <Card px={5} py={10} gap={10} {...restProps}>
@@ -87,10 +87,7 @@ export default function DashboardCard(props: DashboardCardProps) {
         </VStack>
 
         <HStack w="full" justify="center" spacing={2}>
-          <Button
-            {...buttonStyles}
-            onClick={() => openModal(MODAL_TYPES.STAKE, { type: "stake" })}
-          >
+          <Button {...buttonStyles} onClick={openDepositModal}>
             Deposit More
           </Button>
           <Button variant="outline" {...buttonStyles}>

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>
 }