From 65ab5ab6761393f4d18b600b8404a74e19c41a00 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 17 Nov 2023 11:38:01 +0100 Subject: [PATCH 1/7] Connect accounts with dApp To connect accounts with the dApp let's use the `useRequestAccount` hook from the WALLET API for this. Also, we should store the account data in context to have global access to it. --- dapp/.env | 1 + dapp/manifest-ledger-live-app.json | 8 ++- dapp/src/DApp.tsx | 26 +++++-- dapp/src/assets/bitcoin.svg | 16 +++++ dapp/src/assets/ethereum.svg | 16 +++++ dapp/src/assets/info.svg | 11 +++ dapp/src/components/Navbar/ConnectWallet.tsx | 71 ++++++++++++++++++++ dapp/src/components/Navbar/index.tsx | 11 +++ dapp/src/constants/chains.ts | 10 +++ dapp/src/constants/index.ts | 1 + dapp/src/contexts/LedgerLiveAppContext.tsx | 42 ++++++++++++ dapp/src/hooks/index.ts | 2 + dapp/src/hooks/useRequestBitcoinAccount.ts | 33 +++++++++ dapp/src/hooks/useRequestEthereumAccount.ts | 33 +++++++++ 14 files changed, 272 insertions(+), 9 deletions(-) create mode 100644 dapp/.env create mode 100644 dapp/src/assets/bitcoin.svg create mode 100644 dapp/src/assets/ethereum.svg create mode 100644 dapp/src/assets/info.svg create mode 100644 dapp/src/components/Navbar/ConnectWallet.tsx create mode 100644 dapp/src/components/Navbar/index.tsx create mode 100644 dapp/src/constants/chains.ts create mode 100644 dapp/src/constants/index.ts create mode 100644 dapp/src/contexts/LedgerLiveAppContext.tsx create mode 100644 dapp/src/hooks/useRequestBitcoinAccount.ts create mode 100644 dapp/src/hooks/useRequestEthereumAccount.ts diff --git a/dapp/.env b/dapp/.env new file mode 100644 index 000000000..fb4204584 --- /dev/null +++ b/dapp/.env @@ -0,0 +1 @@ +VITE_USE_TESTNET=true \ No newline at end of file diff --git a/dapp/manifest-ledger-live-app.json b/dapp/manifest-ledger-live-app.json index a6ed3d306..21c1afe4b 100644 --- a/dapp/manifest-ledger-live-app.json +++ b/dapp/manifest-ledger-live-app.json @@ -13,7 +13,9 @@ ], "currencies": [ "bitcoin", - "bitcoin_testnet" + "bitcoin_testnet", + "ethereum", + "ethereum_goerli" ], "content": { "shortDescription": { @@ -23,7 +25,9 @@ "en": "Bitcoin Liquid Staking" } }, - "permissions": [], + "permissions": [ + "account.request" + ], "domains": [ "http://*" ] diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index 26d5b96be..7042edff1 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -1,15 +1,25 @@ -import React from "react" -import { ChakraProvider, Button, Box } from "@chakra-ui/react" +import React, { useContext } from "react" +import { ChakraProvider, Box, Text } from "@chakra-ui/react" import { useDetectThemeMode } from "./hooks" import { LedgerWalletAPIProvider } from "./providers" import theme from "./theme" +import { + LedgerLiveAppContext, + LedgerLiveAppProvider, +} from "./contexts/LedgerLiveAppContext" +import Navbar from "./components/Navbar" function DApp() { useDetectThemeMode() + + const { btcAccount, ethAccount } = useContext(LedgerLiveAppContext) + return ( - + +

Ledger live - Acre dApp

- + {btcAccount && Account: {btcAccount.address}} + {ethAccount && Account: {ethAccount.address}} ) } @@ -17,9 +27,11 @@ function DApp() { function DAppProviders() { return ( - - - + + + + + ) } diff --git a/dapp/src/assets/bitcoin.svg b/dapp/src/assets/bitcoin.svg new file mode 100644 index 000000000..8b99c75c1 --- /dev/null +++ b/dapp/src/assets/bitcoin.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/dapp/src/assets/ethereum.svg b/dapp/src/assets/ethereum.svg new file mode 100644 index 000000000..0a528dc23 --- /dev/null +++ b/dapp/src/assets/ethereum.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/dapp/src/assets/info.svg b/dapp/src/assets/info.svg new file mode 100644 index 000000000..5842e381c --- /dev/null +++ b/dapp/src/assets/info.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/dapp/src/components/Navbar/ConnectWallet.tsx b/dapp/src/components/Navbar/ConnectWallet.tsx new file mode 100644 index 000000000..32e6b9995 --- /dev/null +++ b/dapp/src/components/Navbar/ConnectWallet.tsx @@ -0,0 +1,71 @@ +import React, { useContext } from "react" +import { Box, Button, Image, Text } from "@chakra-ui/react" +import { Account } from "@ledgerhq/wallet-api-client" +import BitcoinIcon from "../../assets/bitcoin.svg" +import EthereumIcon from "../../assets/ethereum.svg" +import InfoIcon from "../../assets/info.svg" +import { BITCOIN } from "../../constants" +import { + useRequestBitcoinAccount, + useRequestEthereumAccount, +} from "../../hooks" +import { LedgerLiveAppContext } from "../../contexts/LedgerLiveAppContext" + +export type ConnectButtonsProps = { + leftIcon: string + rightIcon: string + account: Account | null + requestAccount: () => Promise +} + +function ConnectButton({ + leftIcon, + rightIcon, + account, + requestAccount, +}: ConnectButtonsProps) { + return ( + + ) +} + +export default function ConnectWallet() { + const requestBitcoinAccount = useRequestBitcoinAccount() + const requestEthereumAccount = useRequestEthereumAccount() + const { btcAccount } = useContext(LedgerLiveAppContext) + + return ( + + + Balance + + {!btcAccount ? "0.00" : btcAccount.balance.toString()} + + {BITCOIN.token} + + { + await requestBitcoinAccount.requestAccount() + }} + /> + { + await requestEthereumAccount.requestAccount() + }} + /> + + ) +} diff --git a/dapp/src/components/Navbar/index.tsx b/dapp/src/components/Navbar/index.tsx new file mode 100644 index 000000000..ef0221cc7 --- /dev/null +++ b/dapp/src/components/Navbar/index.tsx @@ -0,0 +1,11 @@ +import React from "react" +import { Box } from "@chakra-ui/react" +import ConnectWallet from "./ConnectWallet" + +export default function Navbar() { + return ( + + + + ) +} diff --git a/dapp/src/constants/chains.ts b/dapp/src/constants/chains.ts new file mode 100644 index 000000000..57b08c0de --- /dev/null +++ b/dapp/src/constants/chains.ts @@ -0,0 +1,10 @@ +export const BITCOIN = { + name: "Bitcoin", + token: "BTC", +} + +export const CURRENCY_ID_BITCOIN = + import.meta.env.VITE_USE_TESTNET === "true" ? "bitcoin_testnet" : "bitcoin" + +export const CURRENCY_ID_ETHEREUM = + import.meta.env.VITE_USE_TESTNET === "true" ? "ethereum_goerli" : "ethereum" diff --git a/dapp/src/constants/index.ts b/dapp/src/constants/index.ts new file mode 100644 index 000000000..3c541aad6 --- /dev/null +++ b/dapp/src/constants/index.ts @@ -0,0 +1 @@ +export * from "./chains" diff --git a/dapp/src/contexts/LedgerLiveAppContext.tsx b/dapp/src/contexts/LedgerLiveAppContext.tsx new file mode 100644 index 000000000..576462abe --- /dev/null +++ b/dapp/src/contexts/LedgerLiveAppContext.tsx @@ -0,0 +1,42 @@ +import { Account } from "@ledgerhq/wallet-api-client" +import React, { createContext, useMemo, useState } from "react" + +type LedgerLiveAppContextValue = { + btcAccount: Account | undefined + setBtcAccount: React.Dispatch> + ethAccount: Account | undefined + setEthAccount: React.Dispatch> +} + +export const LedgerLiveAppContext = createContext({ + btcAccount: undefined, + setBtcAccount: () => {}, + ethAccount: undefined, + setEthAccount: () => {}, +}) + +export function LedgerLiveAppProvider({ + children, +}: { + children: React.ReactNode +}): React.ReactElement { + const [btcAccount, setBtcAccount] = useState(undefined) + const [ethAccount, setEthAccount] = useState(undefined) + + const contextValue: LedgerLiveAppContextValue = + useMemo( + () => ({ + btcAccount, + setBtcAccount, + ethAccount, + setEthAccount, + }), + [btcAccount, setBtcAccount, ethAccount, setEthAccount], + ) + + return ( + + {children} + + ) +} diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts index dfc730d5e..f07366688 100644 --- a/dapp/src/hooks/index.ts +++ b/dapp/src/hooks/index.ts @@ -1 +1,3 @@ export * from "./useDetectThemeMode" +export * from "./useRequestBitcoinAccount" +export * from "./useRequestEthereumAccount" diff --git a/dapp/src/hooks/useRequestBitcoinAccount.ts b/dapp/src/hooks/useRequestBitcoinAccount.ts new file mode 100644 index 000000000..9d31aced8 --- /dev/null +++ b/dapp/src/hooks/useRequestBitcoinAccount.ts @@ -0,0 +1,33 @@ +import { Account, WalletAPIClient } from "@ledgerhq/wallet-api-client" +import { useRequestAccount } from "@ledgerhq/wallet-api-client-react" +import { useCallback, useContext, useEffect } from "react" +import { LedgerLiveAppContext } from "../contexts/LedgerLiveAppContext" +import { CURRENCY_ID_BITCOIN } from "../constants" + +type UseRequestAccount = { + pending: boolean + account: Account | null + error: unknown +} + +type RequestAccountParams = Parameters + +type UseRequestAccountReturn = { + requestAccount: (...params: RequestAccountParams) => Promise +} & UseRequestAccount + +export function useRequestBitcoinAccount(): UseRequestAccountReturn { + const { setBtcAccount } = useContext(LedgerLiveAppContext) + const requestAccountResponse = useRequestAccount() + const { account, requestAccount } = requestAccountResponse + + useEffect(() => { + setBtcAccount(account || undefined) + }, [account, setBtcAccount]) + + const requestBitcoinAccount = useCallback(async () => { + await requestAccount({ currencyIds: [CURRENCY_ID_BITCOIN] }) + }, [requestAccount]) + + return { ...requestAccountResponse, requestAccount: requestBitcoinAccount } +} diff --git a/dapp/src/hooks/useRequestEthereumAccount.ts b/dapp/src/hooks/useRequestEthereumAccount.ts new file mode 100644 index 000000000..a9e7bc929 --- /dev/null +++ b/dapp/src/hooks/useRequestEthereumAccount.ts @@ -0,0 +1,33 @@ +import { Account, WalletAPIClient } from "@ledgerhq/wallet-api-client" +import { useRequestAccount } from "@ledgerhq/wallet-api-client-react" +import { useCallback, useContext, useEffect } from "react" +import { LedgerLiveAppContext } from "../contexts/LedgerLiveAppContext" +import { CURRENCY_ID_ETHEREUM } from "../constants" + +type UseRequestAccount = { + pending: boolean + account: Account | null + error: unknown +} + +type RequestAccountParams = Parameters + +type UseRequestAccountReturn = { + requestAccount: (...params: RequestAccountParams) => Promise +} & UseRequestAccount + +export function useRequestEthereumAccount(): UseRequestAccountReturn { + const { setEthAccount } = useContext(LedgerLiveAppContext) + const requestAccountResponse = useRequestAccount() + const { account, requestAccount } = requestAccountResponse + + useEffect(() => { + setEthAccount(account || undefined) + }, [account, setEthAccount]) + + const requestEthereumAccount = useCallback(async () => { + await requestAccount({ currencyIds: [CURRENCY_ID_ETHEREUM] }) + }, [requestAccount]) + + return { ...requestAccountResponse, requestAccount: requestEthereumAccount } +} From 0b6c8871ea6e0f118467f4a88555bf1a754e0d0e Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 17 Nov 2023 11:51:09 +0100 Subject: [PATCH 2/7] Format an amount for dApp We should correctly display user balances. Let us use the formatting functions and display the balance correctly by region. --- dapp/src/components/Navbar/ConnectWallet.tsx | 5 +++- dapp/src/utils/index.ts | 1 + dapp/src/utils/numbers.ts | 26 ++++++++++++++++++++ 3 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 dapp/src/utils/index.ts create mode 100644 dapp/src/utils/numbers.ts diff --git a/dapp/src/components/Navbar/ConnectWallet.tsx b/dapp/src/components/Navbar/ConnectWallet.tsx index 32e6b9995..09641e170 100644 --- a/dapp/src/components/Navbar/ConnectWallet.tsx +++ b/dapp/src/components/Navbar/ConnectWallet.tsx @@ -10,6 +10,7 @@ import { useRequestEthereumAccount, } from "../../hooks" import { LedgerLiveAppContext } from "../../contexts/LedgerLiveAppContext" +import { formatSatoshiAmount } from "../../utils" export type ConnectButtonsProps = { leftIcon: string @@ -46,7 +47,9 @@ export default function ConnectWallet() { Balance - {!btcAccount ? "0.00" : btcAccount.balance.toString()} + {!btcAccount || btcAccount?.balance.isZero() + ? "0.00" + : formatSatoshiAmount(btcAccount.balance.toString())} {BITCOIN.token} diff --git a/dapp/src/utils/index.ts b/dapp/src/utils/index.ts new file mode 100644 index 000000000..991e6839f --- /dev/null +++ b/dapp/src/utils/index.ts @@ -0,0 +1 @@ +export * from "./numbers" diff --git a/dapp/src/utils/numbers.ts b/dapp/src/utils/numbers.ts new file mode 100644 index 000000000..e81dd1c02 --- /dev/null +++ b/dapp/src/utils/numbers.ts @@ -0,0 +1,26 @@ +const toLocaleString = (value: number): string => + value.toLocaleString("default", { maximumFractionDigits: 2 }) + +// Parse token amount by moving the decimal point +export function bigIntToUserAmount( + amount: bigint, + decimals = 18, + desiredDecimals = 2, +): string { + const desiredDecimalsAmount = + amount / 10n ** BigInt(Math.max(1, decimals - desiredDecimals)) + + return toLocaleString( + Number(desiredDecimalsAmount) / 10 ** Math.min(desiredDecimals, decimals), + ) +} +export const formatTokenAmount = ( + amount: number | string, + decimals = 18, + desiredDecimals = 2, +) => bigIntToUserAmount(BigInt(amount), decimals, desiredDecimals) + +export const formatSatoshiAmount = ( + amount: number | string, + desiredDecimals = 2, +) => formatTokenAmount(amount, 8, desiredDecimals) From 2325e13310f1a99276755e554eb7f741f4a4cdc9 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 17 Nov 2023 11:52:35 +0100 Subject: [PATCH 3/7] Add a function to truncate address --- dapp/src/components/Navbar/ConnectWallet.tsx | 4 ++-- dapp/src/utils/address.ts | 3 +++ dapp/src/utils/index.ts | 1 + 3 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 dapp/src/utils/address.ts diff --git a/dapp/src/components/Navbar/ConnectWallet.tsx b/dapp/src/components/Navbar/ConnectWallet.tsx index 09641e170..e7302cd49 100644 --- a/dapp/src/components/Navbar/ConnectWallet.tsx +++ b/dapp/src/components/Navbar/ConnectWallet.tsx @@ -10,7 +10,7 @@ import { useRequestEthereumAccount, } from "../../hooks" import { LedgerLiveAppContext } from "../../contexts/LedgerLiveAppContext" -import { formatSatoshiAmount } from "../../utils" +import { formatSatoshiAmount, truncateAddress } from "../../utils" export type ConnectButtonsProps = { leftIcon: string @@ -32,7 +32,7 @@ function ConnectButton({ rightIcon={!account ? : undefined} onClick={requestAccount} > - {account ? account.address : "Not connected"} + {account ? truncateAddress(account.address) : "Not connected"} ) } diff --git a/dapp/src/utils/address.ts b/dapp/src/utils/address.ts new file mode 100644 index 000000000..7ed3caa1a --- /dev/null +++ b/dapp/src/utils/address.ts @@ -0,0 +1,3 @@ +export function truncateAddress(address: string): string { + return `${address.slice(0, 6)}…${address.slice(-5)}` +} diff --git a/dapp/src/utils/index.ts b/dapp/src/utils/index.ts index 991e6839f..613e0f071 100644 --- a/dapp/src/utils/index.ts +++ b/dapp/src/utils/index.ts @@ -1 +1,2 @@ export * from "./numbers" +export * from "./address" From 404d3c90d71c4e937c983e012965a2d09d68ba5b Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 17 Nov 2023 12:19:23 +0100 Subject: [PATCH 4/7] Update of global styles for themes --- dapp/src/theme/Button.ts | 7 +++++++ dapp/src/theme/index.ts | 12 +++++++++++- dapp/src/theme/utils/colors.ts | 6 ++++++ 3 files changed, 24 insertions(+), 1 deletion(-) diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts index ffdf107ba..ac143f407 100644 --- a/dapp/src/theme/Button.ts +++ b/dapp/src/theme/Button.ts @@ -2,11 +2,18 @@ import { mode } from "@chakra-ui/theme-tools" import type { StyleFunctionProps } from "@chakra-ui/styled-system" const Button = { + baseStyle: { + rounded: "none", + }, variants: { solid: (props: StyleFunctionProps) => ({ backgroundColor: mode("black", "purple")(props), color: "white", }), + outline: (props: StyleFunctionProps) => ({ + color: mode("black", "grey.80")(props), + borderColor: mode("black", "grey.50")(props), + }), }, } diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts index 16aa51d34..454c51fc1 100644 --- a/dapp/src/theme/index.ts +++ b/dapp/src/theme/index.ts @@ -1,9 +1,19 @@ -import { extendTheme } from "@chakra-ui/react" +import { StyleFunctionProps, extendTheme } from "@chakra-ui/react" +import { mode } from "@chakra-ui/theme-tools" import Button from "./Button" import { colors } from "./utils" const defaultTheme = { colors, + styles: { + global: (props: StyleFunctionProps) => ({ + "html, body, #root, #root > div": { + backgroundColor: mode("lightGrey", "darkGrey")(props), + color: mode("black", "grey.80")(props), + minHeight: "100vh", + }, + }), + }, components: { Button, }, diff --git a/dapp/src/theme/utils/colors.ts b/dapp/src/theme/utils/colors.ts index aea5a8394..6a271c7d9 100644 --- a/dapp/src/theme/utils/colors.ts +++ b/dapp/src/theme/utils/colors.ts @@ -4,4 +4,10 @@ export const colors = { white: "#FFF", black: "#000", purple: "#7D00FF", + grey: { + 50: "rgba(255, 255, 255, 0.50)", + 80: "rgba(255, 255, 255, 0.80)", + }, + lightGrey: "#ECECEC", + darkGrey: "#1A1B1D", } From 10715fdb2bdcdf8fd9e28d925f2eb8a4c3ec581e Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 17 Nov 2023 12:28:14 +0100 Subject: [PATCH 5/7] Move types for ledger live app to a separate file --- dapp/src/hooks/useRequestBitcoinAccount.ts | 14 +------------- dapp/src/hooks/useRequestEthereumAccount.ts | 14 +------------- dapp/src/types/index.ts | 1 + dapp/src/types/ledger-live-app.ts | 13 +++++++++++++ 4 files changed, 16 insertions(+), 26 deletions(-) create mode 100644 dapp/src/types/index.ts create mode 100644 dapp/src/types/ledger-live-app.ts diff --git a/dapp/src/hooks/useRequestBitcoinAccount.ts b/dapp/src/hooks/useRequestBitcoinAccount.ts index 9d31aced8..3f7a0d120 100644 --- a/dapp/src/hooks/useRequestBitcoinAccount.ts +++ b/dapp/src/hooks/useRequestBitcoinAccount.ts @@ -1,20 +1,8 @@ -import { Account, WalletAPIClient } from "@ledgerhq/wallet-api-client" import { useRequestAccount } from "@ledgerhq/wallet-api-client-react" import { useCallback, useContext, useEffect } from "react" import { LedgerLiveAppContext } from "../contexts/LedgerLiveAppContext" import { CURRENCY_ID_BITCOIN } from "../constants" - -type UseRequestAccount = { - pending: boolean - account: Account | null - error: unknown -} - -type RequestAccountParams = Parameters - -type UseRequestAccountReturn = { - requestAccount: (...params: RequestAccountParams) => Promise -} & UseRequestAccount +import { UseRequestAccountReturn } from "../types" export function useRequestBitcoinAccount(): UseRequestAccountReturn { const { setBtcAccount } = useContext(LedgerLiveAppContext) diff --git a/dapp/src/hooks/useRequestEthereumAccount.ts b/dapp/src/hooks/useRequestEthereumAccount.ts index a9e7bc929..b3c674d4c 100644 --- a/dapp/src/hooks/useRequestEthereumAccount.ts +++ b/dapp/src/hooks/useRequestEthereumAccount.ts @@ -1,20 +1,8 @@ -import { Account, WalletAPIClient } from "@ledgerhq/wallet-api-client" import { useRequestAccount } from "@ledgerhq/wallet-api-client-react" import { useCallback, useContext, useEffect } from "react" import { LedgerLiveAppContext } from "../contexts/LedgerLiveAppContext" import { CURRENCY_ID_ETHEREUM } from "../constants" - -type UseRequestAccount = { - pending: boolean - account: Account | null - error: unknown -} - -type RequestAccountParams = Parameters - -type UseRequestAccountReturn = { - requestAccount: (...params: RequestAccountParams) => Promise -} & UseRequestAccount +import { UseRequestAccountReturn } from "../types" export function useRequestEthereumAccount(): UseRequestAccountReturn { const { setEthAccount } = useContext(LedgerLiveAppContext) diff --git a/dapp/src/types/index.ts b/dapp/src/types/index.ts new file mode 100644 index 000000000..96cd9d44f --- /dev/null +++ b/dapp/src/types/index.ts @@ -0,0 +1 @@ +export * from "./ledger-live-app" diff --git a/dapp/src/types/ledger-live-app.ts b/dapp/src/types/ledger-live-app.ts new file mode 100644 index 000000000..84dc9fec8 --- /dev/null +++ b/dapp/src/types/ledger-live-app.ts @@ -0,0 +1,13 @@ +import { Account, WalletAPIClient } from "@ledgerhq/wallet-api-client" + +type UseRequestAccount = { + pending: boolean + account: Account | null + error: unknown +} + +type RequestAccountParams = Parameters + +export type UseRequestAccountReturn = { + requestAccount: (...params: RequestAccountParams) => Promise +} & UseRequestAccount From 647f359e78b21cab6166ac60ac36f8881184f783 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 17 Nov 2023 13:28:24 +0100 Subject: [PATCH 6/7] Updates for `ConnectButton` - Ad comment about tooltip - Add different style when an account is not defined --- dapp/src/components/Navbar/ConnectWallet.tsx | 3 +++ dapp/src/theme/utils/colors.ts | 1 + 2 files changed, 4 insertions(+) diff --git a/dapp/src/components/Navbar/ConnectWallet.tsx b/dapp/src/components/Navbar/ConnectWallet.tsx index e7302cd49..62838f620 100644 --- a/dapp/src/components/Navbar/ConnectWallet.tsx +++ b/dapp/src/components/Navbar/ConnectWallet.tsx @@ -25,10 +25,13 @@ function ConnectButton({ account, requestAccount, }: ConnectButtonsProps) { + const styles = !account ? { color: "error", borderColor: "error" } : undefined return (