From 788b92b07303c7db994b2cce08de367a94dbc0a7 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Wed, 15 Nov 2023 13:35:57 +0100 Subject: [PATCH] Connect wallet with ledger live app --- dapp/.env | 1 + dapp/manifest-ledger-live-app.json | 2 +- dapp/src/DApp.tsx | 7 +++-- dapp/src/assets/bitcoin.svg | 16 +++++++++++ dapp/src/assets/info.svg | 11 ++++++++ dapp/src/components/Navbar/AccountInfo.tsx | 33 ++++++++++++++++++++++ dapp/src/components/Navbar/index.tsx | 11 ++++++++ dapp/src/constants/chains.ts | 7 +++++ dapp/src/constants/index.ts | 1 + dapp/src/theme/Button.ts | 9 +++++- dapp/src/theme/index.ts | 11 +++++++- dapp/src/theme/utils/colors.ts | 2 ++ dapp/src/utils/index.ts | 4 +++ 13 files changed, 109 insertions(+), 6 deletions(-) create mode 100644 dapp/.env create mode 100644 dapp/src/assets/bitcoin.svg create mode 100644 dapp/src/assets/info.svg create mode 100644 dapp/src/components/Navbar/AccountInfo.tsx create mode 100644 dapp/src/components/Navbar/index.tsx create mode 100644 dapp/src/constants/chains.ts create mode 100644 dapp/src/utils/index.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 6a8414862..18c856b6d 100644 --- a/dapp/manifest-ledger-live-app.json +++ b/dapp/manifest-ledger-live-app.json @@ -23,7 +23,7 @@ "en": "Bitcoin Liquid Staking" } }, - "permissions": [], + "permissions": ["account.request"], "domains": [ "http://*" ] diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index 1dfe5211a..68849f68d 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -1,9 +1,10 @@ import React from "react" -import { ChakraProvider, Button, Box } from "@chakra-ui/react" +import { ChakraProvider, Box } from "@chakra-ui/react" import { useEmbedFeatureFlag, useDetectThemeMode } from "./hooks" import { LedgerWalletAPIProvider } from "./providers" import { getThemeConfig } from "./theme/utils/utils" import theme from "./theme/index" +import Navbar from "./components/Navbar" function DAppContent() { const { isEmbed } = useEmbedFeatureFlag() @@ -11,9 +12,9 @@ function DAppContent() { if (isEmbed === "true") header = "Ledger live - Acre dApp" return ( - + +

{header}

- ) } diff --git a/dapp/src/assets/bitcoin.svg b/dapp/src/assets/bitcoin.svg new file mode 100644 index 000000000..3bdc547b0 --- /dev/null +++ b/dapp/src/assets/bitcoin.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/dapp/src/assets/info.svg b/dapp/src/assets/info.svg new file mode 100644 index 000000000..ac648da40 --- /dev/null +++ b/dapp/src/assets/info.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/dapp/src/components/Navbar/AccountInfo.tsx b/dapp/src/components/Navbar/AccountInfo.tsx new file mode 100644 index 000000000..b41cf5f3c --- /dev/null +++ b/dapp/src/components/Navbar/AccountInfo.tsx @@ -0,0 +1,33 @@ +import React from "react" +import { Box, Button, Image, Text } from "@chakra-ui/react" +import { useRequestAccount } from "@ledgerhq/wallet-api-client-react" +import BitcoinIcon from "../../assets/bitcoin.svg" +import InfoIcon from "../../assets/info.svg" +import { truncateAddress } from "../../utils" +import { BITCOIN, CURRENCY_ID_BITCOIN } from "../../constants" + +export default function AccountInfo() { + const { account, requestAccount } = useRequestAccount() + + const requestBitcoinAccount = async () => { + await requestAccount({ currencyIds: [CURRENCY_ID_BITCOIN] }) + } + + return ( + + + Balance + {!account ? "0.00" : account.balance.toString()} + {BITCOIN.token} + + + + ) +} diff --git a/dapp/src/components/Navbar/index.tsx b/dapp/src/components/Navbar/index.tsx new file mode 100644 index 000000000..40e0de588 --- /dev/null +++ b/dapp/src/components/Navbar/index.tsx @@ -0,0 +1,11 @@ +import React from "react" +import { Box } from "@chakra-ui/react" +import AccountInfo from "./AccountInfo" + +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..594cfac32 --- /dev/null +++ b/dapp/src/constants/chains.ts @@ -0,0 +1,7 @@ +export const BITCOIN = { + name: "Bitcoin", + token: "BTC", +} + +export const CURRENCY_ID_BITCOIN = + import.meta.env.VITE_USE_TESTNET === "true" ? "bitcoin_testnet" : "bitcoin" diff --git a/dapp/src/constants/index.ts b/dapp/src/constants/index.ts index cee1de3e3..d6f2190a2 100644 --- a/dapp/src/constants/index.ts +++ b/dapp/src/constants/index.ts @@ -1 +1,2 @@ export * from "./local-storage" +export * from "./chains" diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts index ffdf107ba..044505444 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), + backgroundColor: mode("black", "black")(props), color: "white", }), + outline: (props: StyleFunctionProps) => ({ + color: mode("black", "black")(props), + borderColor: "black", + }), }, } diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts index 5b3a151f6..0af1dd67a 100644 --- a/dapp/src/theme/index.ts +++ b/dapp/src/theme/index.ts @@ -1,9 +1,18 @@ -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/index" export const defaultTheme = { colors, + styles: { + global: (props: StyleFunctionProps) => ({ + "html, body, #root, #root > div": { + backgroundColor: mode("grey", "grey")(props), + minHeight: "100vh", + }, + }), + }, components: { Button, }, diff --git a/dapp/src/theme/utils/colors.ts b/dapp/src/theme/utils/colors.ts index 6582c2c3d..66ed60243 100644 --- a/dapp/src/theme/utils/colors.ts +++ b/dapp/src/theme/utils/colors.ts @@ -5,4 +5,6 @@ export const colors = { white: "#FFF", black: "#000", purple: "#7D00FF", + grey: "#ECECEC", + darkGrey: "#37393C", } diff --git a/dapp/src/utils/index.ts b/dapp/src/utils/index.ts new file mode 100644 index 000000000..3601d98b9 --- /dev/null +++ b/dapp/src/utils/index.ts @@ -0,0 +1,4 @@ +// eslint-disable-next-line import/prefer-default-export +export function truncateAddress(address: string): string { + return `${address.slice(0, 6)}…${address.slice(-5)}` +}