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

@@ -6,27 +6,34 @@ import {
   ModalFooter,
   ModalHeader,
   VStack,
+  Text,
 } from "@chakra-ui/react"
-import { useRequestBitcoinAccount } from "../../hooks"
 import BaseModal from "./BaseModal"
-import ConnectBTCAccount from "../../static/images/ConnectBTCAccount.png"
-import { TextLg, TextMd } from "../Typography"
+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">
-        <TextLg>Bitcoin account not installed</TextLg>
+        {currency.name} account not installed
       </ModalHeader>
-      <ModalBody mt={6}>
-        <VStack spacing={12}>
-          <Image src={ConnectBTCAccount} />
-          <TextMd textAlign="center">
-            Bitcoin account is required to make transactions for depositing and
-            staking your BTC.
-          </TextMd>
+      <ModalBody>
+        <VStack spacing={12} mt={8}>
+          <Image src={image} />
+          <Text textAlign="center">
+            {currency.name} account is required to make transactions
+            for depositing and staking your {currency.symbol}.
+          </Text>
         </VStack>
       </ModalBody>
       <ModalFooter>

dapp/src/components/Staking/index.tsx

@@ -1,19 +1,40 @@
 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 { HEADER_HEIGHT } from "../Header"
 import Sidebar from "../Sidebar"
 import StakeModal from "../Modals/StakeModal"
+import { BITCOIN, ETHEREUM } from "../../constants"
+import ConnectBTCAccount from "../../static/images/ConnectBTCAccount.png"
+import ConnectETHAccount from "../../static/images/ConnectETHAccount.png"
 
 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/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>