Make sure all needed accounts are connected

After clicking on the stake button, if the user has no accounts connected, should see special modals with connection options.

dapp/src/components/Modals/ConnectWalletModal.tsx

@@ -8,24 +8,31 @@ import {
   VStack,
   Text,
 } from "@chakra-ui/react"
-import { useRequestBitcoinAccount } from "../../hooks"
 import BaseModal from "./BaseModal"
-import ConnectBTCAccount from "../../static/images/ConnectBTCAccount.png"
+import { Currency, RequestAccountParams } from "../../types"
 
-export default function ConnectWalletModal() {
-  const { requestAccount } = useRequestBitcoinAccount()
+type ConnectWalletModalProps = {
+  currency: Currency
+  image: string
+  requestAccount: (...params: RequestAccountParams) => Promise<void>
+}
 
+export default function ConnectWalletModal({
+  currency,
+  image,
+  requestAccount,
+}: ConnectWalletModalProps) {
   return (
     <BaseModal>
       <ModalHeader textAlign="center">
-        Bitcoin account not installed
+        {`${currency.name} account not installed`}
       </ModalHeader>
       <ModalBody>
         <VStack spacing={12} mt={8}>
-          <Image src={ConnectBTCAccount} />
+          <Image src={image} />
           <Text textAlign="center">
-            Bitcoin account is required to make transactions for depositing and
-            staking your BTC.
+            {`${currency.name} account is required to make transactions
+            for depositing and staking your ${currency.symbol} .`}
           </Text>
         </VStack>
       </ModalBody>

dapp/src/components/Staking/index.tsx

@@ -1,22 +1,48 @@
 import React from "react"
 import ConnectWalletModal from "../Modals/ConnectWalletModal"
 import StakingOverviewModal from "../Modals/StakingOverviewModal"
-import { useStakingFlowContext, useWalletContext } from "../../hooks"
+import {
+  useRequestBitcoinAccount,
+  useRequestEthereumAccount,
+  useStakingFlowContext,
+  useWalletContext,
+} from "../../hooks"
 import ModalOverlay from "../ModalOverlay"
 import StakeModal from "../Modals/StakeModal"
 import Sidebar from "../Sidebar"
 import { CONNECT_WALLET_HEIGHT } from "../Navbar"
 import SignMessageModal from "../Modals/SignMessageModal"
+import { BITCOIN, ETHEREUM } from "../../constants"
+import ConnectBTCAccount from "../../static/images/ConnectBTCAccount.png"
+import ConnectETHAccount from "../../static/images/ConnectETHAccount.png"
 
 const MARGIN_TOP = `calc(${CONNECT_WALLET_HEIGHT}px + 3rem)`
 
 function Modal() {
   const { modalType } = useStakingFlowContext()
-  const { btcAccount } = useWalletContext()
+  const { btcAccount, ethAccount } = useWalletContext()
+  const { requestAccount: requestBitcoinAccount } = useRequestBitcoinAccount()
+  const { requestAccount: requestEthereumAccount } = useRequestEthereumAccount()
 
   if (!modalType) return null
 
-  if (!btcAccount) return <ConnectWalletModal />
+  if (!btcAccount)
+    return (
+      <ConnectWalletModal
+        currency={BITCOIN}
+        image={ConnectBTCAccount}
+        requestAccount={requestBitcoinAccount}
+      />
+    )
+
+  if (!ethAccount)
+    return (
+      <ConnectWalletModal
+        currency={ETHEREUM}
+        image={ConnectETHAccount}
+        requestAccount={requestEthereumAccount}
+      />
+    )
 
   if (modalType === "overview") return <StakingOverviewModal />
 

dapp/src/hooks/useRequestEthereumAccount.ts

@@ -5,12 +5,12 @@ import { UseRequestAccountReturn } from "../types"
 import { WalletContext } from "../contexts"
 
 export function useRequestEthereumAccount(): UseRequestAccountReturn {
-  const walletContext = useContext(WalletContext)
+  const { setEthAccount } = useContext(WalletContext)
   const { account, requestAccount } = useRequestAccount()
 
   useEffect(() => {
-    walletContext?.setEthAccount(account || undefined)
-  }, [account, walletContext])
+    setEthAccount(account || undefined)
+  }, [account, setEthAccount])
 
   const requestEthereumAccount = useCallback(async () => {
     await requestAccount({ currencyIds: [CURRENCY_ID_ETHEREUM] })

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

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