New flow to connect account before opening modal windows (#414)

Refs #394

This PR creates 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

@@ -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])
+
+  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>
 }