diff --git a/dapp/src/components/Modals/ConnectWalletModal.tsx b/dapp/src/components/Modals/ConnectWalletModal.tsx index 2658ac432..b36faf402 100644 --- a/dapp/src/components/Modals/ConnectWalletModal.tsx +++ b/dapp/src/components/Modals/ConnectWalletModal.tsx @@ -6,26 +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" +import { TextMd } from "../Typography" -export default function ConnectWalletModal() { - const { requestAccount } = useRequestBitcoinAccount() +type ConnectWalletModalProps = { + currency: Currency + image: string + requestAccount: (...params: RequestAccountParams) => Promise +} +export default function ConnectWalletModal({ + currency, + image, + requestAccount, +}: ConnectWalletModalProps) { return ( - Bitcoin account not installed + {currency.name} account not installed - - - + + + - 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}. diff --git a/dapp/src/components/Staking/index.tsx b/dapp/src/components/Staking/index.tsx index ba6ed6356..b3e42621b 100644 --- a/dapp/src/components/Staking/index.tsx +++ b/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 + if (!btcAccount) + return ( + + ) + + if (!ethAccount) + return ( + + ) if (modalType === "overview") return diff --git a/dapp/src/static/images/ConnectETHAccount.png b/dapp/src/static/images/ConnectETHAccount.png new file mode 100644 index 000000000..e1ad2974d Binary files /dev/null and b/dapp/src/static/images/ConnectETHAccount.png differ diff --git a/dapp/src/types/ledger-live-app.ts b/dapp/src/types/ledger-live-app.ts index c63368d3e..1fa680d07 100644 --- a/dapp/src/types/ledger-live-app.ts +++ b/dapp/src/types/ledger-live-app.ts @@ -1,6 +1,6 @@ import { WalletAPIClient } from "@ledgerhq/wallet-api-client" -type RequestAccountParams = Parameters +export type RequestAccountParams = Parameters export type UseRequestAccountReturn = { requestAccount: (...params: RequestAccountParams) => Promise