diff --git a/dapp/src/components/Modals/ConnectWalletModal.tsx b/dapp/src/components/Modals/ConnectWalletModal.tsx index 5ca953960..ec710f777 100644 --- a/dapp/src/components/Modals/ConnectWalletModal.tsx +++ b/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 +} +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 29abde149..35514185c 100644 --- a/dapp/src/components/Staking/index.tsx +++ b/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 + if (!btcAccount) + return ( + + ) + + if (!ethAccount) + return ( + + ) if (modalType === "overview") return diff --git a/dapp/src/hooks/useRequestEthereumAccount.ts b/dapp/src/hooks/useRequestEthereumAccount.ts index ebeb1f268..c780aea20 100644 --- a/dapp/src/hooks/useRequestEthereumAccount.ts +++ b/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] }) 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..8e82cb1a3 100644 --- a/dapp/src/types/ledger-live-app.ts +++ b/dapp/src/types/ledger-live-app.ts @@ -1,6 +1,8 @@ import { WalletAPIClient } from "@ledgerhq/wallet-api-client" -type RequestAccountParams = Parameters +export type RequestAccountParams = Parameters< + WalletAPIClient["account"]["request"] +> export type UseRequestAccountReturn = { requestAccount: (...params: RequestAccountParams) => Promise