From 7ca8dbe2709f85b389ca2ff18baf40d254bce593 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Tue, 21 Nov 2023 12:46:06 +0100 Subject: [PATCH 01/22] Refactor for the navbar - use a stack elements in the vertical or horizontal direction - create separate components for icons - add `currencies.ts` file --- dapp/src/assets/bitcoin.svg | 16 ------- dapp/src/assets/ethereum.svg | 16 ------- dapp/src/assets/info.svg | 11 ----- dapp/src/components/Navbar/ConnectWallet.tsx | 47 ++++++++++++------- dapp/src/constants/chains.ts | 6 --- dapp/src/constants/currencies.ts | 7 +++ dapp/src/constants/index.ts | 1 + dapp/src/static/icons/Bitcoin.tsx | 39 ++++++++++++++++ dapp/src/static/icons/Ethereum.tsx | 49 ++++++++++++++++++++ dapp/src/static/icons/Info.tsx | 32 +++++++++++++ dapp/src/static/icons/index.ts | 3 ++ 11 files changed, 161 insertions(+), 66 deletions(-) delete mode 100644 dapp/src/assets/bitcoin.svg delete mode 100644 dapp/src/assets/ethereum.svg delete mode 100644 dapp/src/assets/info.svg create mode 100644 dapp/src/constants/currencies.ts create mode 100644 dapp/src/static/icons/Bitcoin.tsx create mode 100644 dapp/src/static/icons/Ethereum.tsx create mode 100644 dapp/src/static/icons/Info.tsx create mode 100644 dapp/src/static/icons/index.ts diff --git a/dapp/src/assets/bitcoin.svg b/dapp/src/assets/bitcoin.svg deleted file mode 100644 index 8b99c75c1..000000000 --- a/dapp/src/assets/bitcoin.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/dapp/src/assets/ethereum.svg b/dapp/src/assets/ethereum.svg deleted file mode 100644 index 0a528dc23..000000000 --- a/dapp/src/assets/ethereum.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/dapp/src/assets/info.svg b/dapp/src/assets/info.svg deleted file mode 100644 index 5842e381c..000000000 --- a/dapp/src/assets/info.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/dapp/src/components/Navbar/ConnectWallet.tsx b/dapp/src/components/Navbar/ConnectWallet.tsx index 62838f620..32a0b9261 100644 --- a/dapp/src/components/Navbar/ConnectWallet.tsx +++ b/dapp/src/components/Navbar/ConnectWallet.tsx @@ -1,9 +1,14 @@ import React, { useContext } from "react" -import { Box, Button, Image, Text } from "@chakra-ui/react" +import { + Button, + HStack, + Icon, + Text, + Tooltip, + useColorModeValue, +} 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, Ethereum, Info } from "../../static/icons" import { BITCOIN } from "../../constants" import { useRequestBitcoinAccount, @@ -13,8 +18,8 @@ import { LedgerLiveAppContext } from "../../contexts/LedgerLiveAppContext" import { formatSatoshiAmount, truncateAddress } from "../../utils" export type ConnectButtonsProps = { - leftIcon: string - rightIcon: string + leftIcon: typeof Icon + rightIcon: typeof Icon account: Account | null requestAccount: () => Promise } @@ -26,13 +31,21 @@ function ConnectButton({ requestAccount, }: ConnectButtonsProps) { const styles = !account ? { color: "error", borderColor: "error" } : undefined + const colorRightIcon = useColorModeValue("black", "grey.80") + return ( + ) } diff --git a/dapp/src/static/icons/ChevronRight.tsx b/dapp/src/static/icons/ChevronRight.tsx new file mode 100644 index 000000000..7013170cf --- /dev/null +++ b/dapp/src/static/icons/ChevronRight.tsx @@ -0,0 +1,24 @@ +import React from "react" +import { createIcon } from "@chakra-ui/react" + +export const ChevronRight = createIcon({ + displayName: "ChevronRight", + viewBox: "0 0 16 16", + path: ( + + + + ), +}) diff --git a/dapp/src/static/icons/index.ts b/dapp/src/static/icons/index.ts index b3c64db44..66c6e3aa9 100644 --- a/dapp/src/static/icons/index.ts +++ b/dapp/src/static/icons/index.ts @@ -1,3 +1,4 @@ export * from "./Info" export * from "./Bitcoin" export * from "./Ethereum" +export * from "./ChevronRight" diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts index ac143f407..51a7cbf7a 100644 --- a/dapp/src/theme/Button.ts +++ b/dapp/src/theme/Button.ts @@ -14,6 +14,10 @@ const Button = { color: mode("black", "grey.80")(props), borderColor: mode("black", "grey.50")(props), }), + link: (props: StyleFunctionProps) => ({ + color: mode("black", "grey.50")(props), + textDecoration: "underline", + }), }, } diff --git a/dapp/src/theme/Switch.ts b/dapp/src/theme/Switch.ts new file mode 100644 index 000000000..1074491b4 --- /dev/null +++ b/dapp/src/theme/Switch.ts @@ -0,0 +1,16 @@ +const Switch = { + baseStyle: { + track: { + _checked: { + _dark: { + bg: "purple", + }, + _light: { + bg: "grey.200", + }, + }, + }, + }, +} + +export default Switch diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts index 454c51fc1..bedf1ea49 100644 --- a/dapp/src/theme/index.ts +++ b/dapp/src/theme/index.ts @@ -1,14 +1,19 @@ -import { StyleFunctionProps, extendTheme } from "@chakra-ui/react" +import { StyleFunctionProps, Tooltip, extendTheme } from "@chakra-ui/react" import { mode } from "@chakra-ui/theme-tools" import Button from "./Button" +import Switch from "./Switch" import { colors } from "./utils" +// Currently, there is no possibility to set all tooltips with hasArrow by defaultProps. +// Let's override the defaultProps as follows. +Tooltip.defaultProps = { ...Tooltip.defaultProps, hasArrow: true } + const defaultTheme = { colors, styles: { global: (props: StyleFunctionProps) => ({ "html, body, #root, #root > div": { - backgroundColor: mode("lightGrey", "darkGrey")(props), + backgroundColor: mode("grey.100", "grey.300")(props), color: mode("black", "grey.80")(props), minHeight: "100vh", }, @@ -16,6 +21,7 @@ const defaultTheme = { }, components: { Button, + Switch, }, } diff --git a/dapp/src/theme/utils/colors.ts b/dapp/src/theme/utils/colors.ts index 5ea1f1720..4d8352bb2 100644 --- a/dapp/src/theme/utils/colors.ts +++ b/dapp/src/theme/utils/colors.ts @@ -8,7 +8,9 @@ export const colors = { grey: { 50: "rgba(255, 255, 255, 0.50)", 80: "rgba(255, 255, 255, 0.80)", + 100: "#ECECEC", + 200: "#37393C", + 300: "#1D1E20", + 400: "#1A1B1D", }, - lightGrey: "#ECECEC", - darkGrey: "#1A1B1D", } From a5b4a407c69f2cc93f97f6ab91f0fd71609d1ade Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Tue, 21 Nov 2023 12:56:40 +0100 Subject: [PATCH 03/22] Split the site into 3 main elements --- dapp/src/DApp.tsx | 18 +++---- .../components/Overview/PositionDetails.tsx | 51 +++++++++++++++++++ dapp/src/components/Overview/Statistics.tsx | 10 ++++ .../Overview/TransactionHistory.tsx | 10 ++++ dapp/src/components/Overview/index.tsx | 27 ++++++++++ 5 files changed, 104 insertions(+), 12 deletions(-) create mode 100644 dapp/src/components/Overview/PositionDetails.tsx create mode 100644 dapp/src/components/Overview/Statistics.tsx create mode 100644 dapp/src/components/Overview/TransactionHistory.tsx create mode 100644 dapp/src/components/Overview/index.tsx diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index 7042edff1..77c6b995f 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -1,25 +1,19 @@ -import React, { useContext } from "react" -import { ChakraProvider, Box, Text } from "@chakra-ui/react" +import React from "react" +import { ChakraProvider, Box } from "@chakra-ui/react" import { useDetectThemeMode } from "./hooks" import { LedgerWalletAPIProvider } from "./providers" import theme from "./theme" -import { - LedgerLiveAppContext, - LedgerLiveAppProvider, -} from "./contexts/LedgerLiveAppContext" +import { LedgerLiveAppProvider } from "./contexts/LedgerLiveAppContext" import Navbar from "./components/Navbar" +import Overview from "./components/Overview" function DApp() { useDetectThemeMode() - const { btcAccount, ethAccount } = useContext(LedgerLiveAppContext) - return ( - + -

Ledger live - Acre dApp

- {btcAccount && Account: {btcAccount.address}} - {ethAccount && Account: {ethAccount.address}} + ) } diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx new file mode 100644 index 000000000..596b225bb --- /dev/null +++ b/dapp/src/components/Overview/PositionDetails.tsx @@ -0,0 +1,51 @@ +import React from "react" +import { + Text, + Button, + Box, + VStack, + HStack, + Tooltip, + Icon, + useColorModeValue, +} from "@chakra-ui/react" +import { BITCOIN, FIAT_CURRENCY_USD } from "../../constants" +import { Info } from "../../static/icons" + +export default function PositionDetails() { + return ( + + + Your positions + + + 34.75 + {BITCOIN.token} + + + + 1.245.148,1 + {FIAT_CURRENCY_USD} + + {/* TODO: Add correct text for tooltip */} + + + + + + + {/* Unset alignItems to get a full-width button. */} + + {/* TODO: Handle click actions */} + + + + + ) +} diff --git a/dapp/src/components/Overview/Statistics.tsx b/dapp/src/components/Overview/Statistics.tsx new file mode 100644 index 000000000..b0c2dc0d6 --- /dev/null +++ b/dapp/src/components/Overview/Statistics.tsx @@ -0,0 +1,10 @@ +import React from "react" +import { Text, Box } from "@chakra-ui/react" + +export default function Statistics() { + return ( + + Pool stats + + ) +} diff --git a/dapp/src/components/Overview/TransactionHistory.tsx b/dapp/src/components/Overview/TransactionHistory.tsx new file mode 100644 index 000000000..312233938 --- /dev/null +++ b/dapp/src/components/Overview/TransactionHistory.tsx @@ -0,0 +1,10 @@ +import React from "react" +import { Text, Box } from "@chakra-ui/react" + +export default function TransactionHistory() { + return ( + + Transaction history + + ) +} diff --git a/dapp/src/components/Overview/index.tsx b/dapp/src/components/Overview/index.tsx new file mode 100644 index 000000000..88213cd78 --- /dev/null +++ b/dapp/src/components/Overview/index.tsx @@ -0,0 +1,27 @@ +import React from "react" +import { Grid, GridItem, useColorModeValue } from "@chakra-ui/react" +import PositionDetails from "./PositionDetails" +import Statistics from "./Statistics" +import TransactionHistory from "./TransactionHistory" + +export default function Overview() { + const bg = useColorModeValue("white", "grey.400") + return ( + + + + + + + + + + + + ) +} From 287e9529dc039e80b58a8d340dab723752ccbe64 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Wed, 22 Nov 2023 14:15:46 +0100 Subject: [PATCH 04/22] Grid update for overview page --- dapp/src/components/Overview/index.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/dapp/src/components/Overview/index.tsx b/dapp/src/components/Overview/index.tsx index 88213cd78..2d3a8ac42 100644 --- a/dapp/src/components/Overview/index.tsx +++ b/dapp/src/components/Overview/index.tsx @@ -8,18 +8,18 @@ export default function Overview() { const bg = useColorModeValue("white", "grey.400") return ( - + - + - + From 568bc1d71a6e96c35f66601d3dfc63f4d5469bec Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Mon, 27 Nov 2023 14:32:52 +0100 Subject: [PATCH 05/22] Fix an issue after merging --- dapp/src/components/Overview/PositionDetails.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx index 596b225bb..e5a426efb 100644 --- a/dapp/src/components/Overview/PositionDetails.tsx +++ b/dapp/src/components/Overview/PositionDetails.tsx @@ -26,7 +26,7 @@ export default function PositionDetails() { 34.75 - {BITCOIN.token} + {BITCOIN.symbol} From 0abcd5d631c2eaf07535845c1d77a703876d2b94 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Tue, 28 Nov 2023 16:47:18 +0100 Subject: [PATCH 06/22] Create a USD currency --- dapp/src/components/Navbar/index.tsx | 4 ++-- dapp/src/components/Overview/PositionDetails.tsx | 4 ++-- dapp/src/constants/currency.ts | 8 ++++++-- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/dapp/src/components/Navbar/index.tsx b/dapp/src/components/Navbar/index.tsx index 23c4edb9e..f524f6fe5 100644 --- a/dapp/src/components/Navbar/index.tsx +++ b/dapp/src/components/Navbar/index.tsx @@ -2,7 +2,7 @@ import React from "react" import { Box, Button, HStack, Icon, Switch } from "@chakra-ui/react" import ConnectWallet from "./ConnectWallet" import { ChevronRight } from "../../static/icons" -import { FIAT_CURRENCY_USD } from "../../constants" +import { USD } from "../../constants" export default function Navbar() { return ( @@ -12,7 +12,7 @@ export default function Navbar() { {/* TODO: Handle click actions */} - Show values in {FIAT_CURRENCY_USD} + Show values in {USD.symbol} diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx index e5a426efb..9e5c4be71 100644 --- a/dapp/src/components/Overview/PositionDetails.tsx +++ b/dapp/src/components/Overview/PositionDetails.tsx @@ -9,7 +9,7 @@ import { Icon, useColorModeValue, } from "@chakra-ui/react" -import { BITCOIN, FIAT_CURRENCY_USD } from "../../constants" +import { BITCOIN, USD } from "../../constants" import { Info } from "../../static/icons" export default function PositionDetails() { @@ -31,7 +31,7 @@ export default function PositionDetails() { 1.245.148,1 - {FIAT_CURRENCY_USD} + {USD.symbol} {/* TODO: Add correct text for tooltip */} diff --git a/dapp/src/constants/currency.ts b/dapp/src/constants/currency.ts index dee8507e4..feecf3127 100644 --- a/dapp/src/constants/currency.ts +++ b/dapp/src/constants/currency.ts @@ -12,10 +12,14 @@ export const ETHEREUM: Currency = { decimals: 18, } +export const USD: Currency = { + name: "United States Dollar", + symbol: "USD", + decimals: 10, +} + 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" - -export const FIAT_CURRENCY_USD = "USD" From 526052644750a8cc7989e1d4e9606c409c26659d Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Tue, 28 Nov 2023 18:50:50 +0100 Subject: [PATCH 07/22] Improve the use of `VStack`, `HStack` and `Flex` The Stack component and the Flex component have their children spaced out evenly but the key difference is that the Stack won't span the entire width of the container whereas the Flex will. Let's use the Stack component when it is a simple row or column of items. If we need to customize the items let's use Flex. More info: https://chakra-ui.com/docs/components/stack#notes-on-stack-vs-flex --- dapp/src/DApp.tsx | 6 ++--- dapp/src/components/Navbar/ConnectWallet.tsx | 2 +- dapp/src/components/Navbar/index.tsx | 14 +++++------ .../components/Overview/PositionDetails.tsx | 25 +++++++------------ 4 files changed, 20 insertions(+), 27 deletions(-) diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index 453c6c172..427d36de1 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -1,5 +1,5 @@ import React from "react" -import { ChakraProvider, Box } from "@chakra-ui/react" +import { ChakraProvider, Flex } from "@chakra-ui/react" import { useDetectThemeMode } from "./hooks" import theme from "./theme" import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts" @@ -10,10 +10,10 @@ function DApp() { useDetectThemeMode() return ( - + - + ) } diff --git a/dapp/src/components/Navbar/ConnectWallet.tsx b/dapp/src/components/Navbar/ConnectWallet.tsx index 14a20eae5..c632fb6e5 100644 --- a/dapp/src/components/Navbar/ConnectWallet.tsx +++ b/dapp/src/components/Navbar/ConnectWallet.tsx @@ -59,7 +59,7 @@ export default function ConnectWallet() { const { btcAccount, ethAccount } = useWalletContext() return ( - + Balance diff --git a/dapp/src/components/Navbar/index.tsx b/dapp/src/components/Navbar/index.tsx index f524f6fe5..24cd41aaf 100644 --- a/dapp/src/components/Navbar/index.tsx +++ b/dapp/src/components/Navbar/index.tsx @@ -1,22 +1,22 @@ import React from "react" -import { Box, Button, HStack, Icon, Switch } from "@chakra-ui/react" +import { Button, Flex, Icon, Switch } from "@chakra-ui/react" import ConnectWallet from "./ConnectWallet" import { ChevronRight } from "../../static/icons" import { USD } from "../../constants" export default function Navbar() { return ( - - + + - - + + {/* TODO: Handle click actions */} Show values in {USD.symbol} - - + + ) } diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx index 9e5c4be71..8415c8910 100644 --- a/dapp/src/components/Overview/PositionDetails.tsx +++ b/dapp/src/components/Overview/PositionDetails.tsx @@ -3,32 +3,26 @@ import { Text, Button, Box, - VStack, HStack, Tooltip, Icon, useColorModeValue, + Flex, } from "@chakra-ui/react" import { BITCOIN, USD } from "../../constants" import { Info } from "../../static/icons" export default function PositionDetails() { return ( - + Your positions - + 34.75 {BITCOIN.symbol} - + 1.245.148,1 {USD.symbol} @@ -37,15 +31,14 @@ export default function PositionDetails() { - - + + - {/* Unset alignItems to get a full-width button. */} - + {/* TODO: Handle click actions */} - - + + ) } From 05e1a959c02c25368da0e8f2bc87c7f2dae13758 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Wed, 6 Dec 2023 08:14:26 +0100 Subject: [PATCH 08/22] Rename `Navbar` to `Header` --- dapp/src/DApp.tsx | 4 ++-- dapp/src/components/{Navbar => Header}/ConnectWallet.tsx | 0 dapp/src/components/{Navbar => Header}/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) rename dapp/src/components/{Navbar => Header}/ConnectWallet.tsx (100%) rename dapp/src/components/{Navbar => Header}/index.tsx (94%) diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index 427d36de1..de6788fb1 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -3,7 +3,7 @@ import { ChakraProvider, Flex } from "@chakra-ui/react" import { useDetectThemeMode } from "./hooks" import theme from "./theme" import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts" -import Navbar from "./components/Navbar" +import Header from "./components/Header" import Overview from "./components/Overview" function DApp() { @@ -11,7 +11,7 @@ function DApp() { return ( - +
) diff --git a/dapp/src/components/Navbar/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx similarity index 100% rename from dapp/src/components/Navbar/ConnectWallet.tsx rename to dapp/src/components/Header/ConnectWallet.tsx diff --git a/dapp/src/components/Navbar/index.tsx b/dapp/src/components/Header/index.tsx similarity index 94% rename from dapp/src/components/Navbar/index.tsx rename to dapp/src/components/Header/index.tsx index 24cd41aaf..df7e8d8ff 100644 --- a/dapp/src/components/Navbar/index.tsx +++ b/dapp/src/components/Header/index.tsx @@ -4,7 +4,7 @@ import ConnectWallet from "./ConnectWallet" import { ChevronRight } from "../../static/icons" import { USD } from "../../constants" -export default function Navbar() { +export default function Header() { return ( From 457f9facf08e1c8aec16f34dd4dbad3cdfd2b6f3 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Wed, 6 Dec 2023 08:16:16 +0100 Subject: [PATCH 09/22] Wrap the main content under `main` tag --- dapp/src/DApp.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index de6788fb1..e0e45ef02 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -12,7 +12,9 @@ function DApp() { return (
- +
+ +
) } From 2dca2bf2cc1c0b7fbebe85bab934e5a91e0bf519 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Wed, 6 Dec 2023 08:57:52 +0100 Subject: [PATCH 10/22] Refactor for spacing between component --- dapp/src/DApp.tsx | 6 +-- dapp/src/components/Header/ConnectWallet.tsx | 6 +-- dapp/src/components/Header/index.tsx | 17 ++---- .../components/Overview/PositionDetails.tsx | 9 ++-- dapp/src/components/Overview/index.tsx | 53 +++++++++++++------ 5 files changed, 49 insertions(+), 42 deletions(-) diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index e0e45ef02..085b6fbe8 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -1,5 +1,5 @@ import React from "react" -import { ChakraProvider, Flex } from "@chakra-ui/react" +import { ChakraProvider } from "@chakra-ui/react" import { useDetectThemeMode } from "./hooks" import theme from "./theme" import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts" @@ -10,12 +10,12 @@ function DApp() { useDetectThemeMode() return ( - + <>
- + ) } diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx index c632fb6e5..8b35a010b 100644 --- a/dapp/src/components/Header/ConnectWallet.tsx +++ b/dapp/src/components/Header/ConnectWallet.tsx @@ -37,7 +37,7 @@ function ConnectButton({ - + + ) } diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx index 8415c8910..972db661f 100644 --- a/dapp/src/components/Overview/PositionDetails.tsx +++ b/dapp/src/components/Overview/PositionDetails.tsx @@ -2,7 +2,6 @@ import React from "react" import { Text, Button, - Box, HStack, Tooltip, Icon, @@ -14,9 +13,9 @@ import { Info } from "../../static/icons" export default function PositionDetails() { return ( - - - Your positions + + + Your positions 34.75 @@ -33,7 +32,7 @@ export default function PositionDetails() { - + {/* TODO: Handle click actions */} diff --git a/dapp/src/components/Overview/index.tsx b/dapp/src/components/Overview/index.tsx index 2d3a8ac42..38f7d0068 100644 --- a/dapp/src/components/Overview/index.tsx +++ b/dapp/src/components/Overview/index.tsx @@ -1,27 +1,46 @@ import React from "react" -import { Grid, GridItem, useColorModeValue } from "@chakra-ui/react" +import { + Button, + Flex, + Grid, + GridItem, + Icon, + Switch, + useColorModeValue, +} from "@chakra-ui/react" import PositionDetails from "./PositionDetails" import Statistics from "./Statistics" import TransactionHistory from "./TransactionHistory" +import { USD } from "../../constants" +import { ChevronRight } from "../../static/icons" export default function Overview() { const bg = useColorModeValue("white", "grey.400") return ( - - - - - - - - - - - + + + {/* TODO: Handle click actions */} + Show values in {USD.symbol} + + + + + + + + + + + + + + ) } From 5fafc571129383702a03da343824916db71f08ab Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Wed, 6 Dec 2023 09:30:49 +0100 Subject: [PATCH 11/22] Don't multiple svgs tag `createIcon` add the svg tag by default. Let's remove the unnecessary extra tag. --- dapp/src/static/icons/Bitcoin.tsx | 54 ++++++++---------- dapp/src/static/icons/ChevronRight.tsx | 21 ++----- dapp/src/static/icons/Ethereum.tsx | 76 ++++++++++++-------------- dapp/src/static/icons/Info.tsx | 34 +++--------- 4 files changed, 70 insertions(+), 115 deletions(-) diff --git a/dapp/src/static/icons/Bitcoin.tsx b/dapp/src/static/icons/Bitcoin.tsx index 0bcd4ea51..c25918520 100644 --- a/dapp/src/static/icons/Bitcoin.tsx +++ b/dapp/src/static/icons/Bitcoin.tsx @@ -4,36 +4,28 @@ import { createIcon } from "@chakra-ui/react" export const Bitcoin = createIcon({ displayName: "Bitcoin", viewBox: "0 0 28 28", - path: ( - - - - - - + path: [ + + + + - - - - - - - - - - ), + , + + + + + + + + , + ], }) diff --git a/dapp/src/static/icons/ChevronRight.tsx b/dapp/src/static/icons/ChevronRight.tsx index 7013170cf..8a11116cb 100644 --- a/dapp/src/static/icons/ChevronRight.tsx +++ b/dapp/src/static/icons/ChevronRight.tsx @@ -3,22 +3,11 @@ import { createIcon } from "@chakra-ui/react" export const ChevronRight = createIcon({ displayName: "ChevronRight", - viewBox: "0 0 16 16", + viewBox: "0 0 20 20", path: ( - - - + ), }) diff --git a/dapp/src/static/icons/Ethereum.tsx b/dapp/src/static/icons/Ethereum.tsx index 5fd1e69f0..b3c5c5633 100644 --- a/dapp/src/static/icons/Ethereum.tsx +++ b/dapp/src/static/icons/Ethereum.tsx @@ -4,46 +4,38 @@ import { createIcon } from "@chakra-ui/react" export const Ethereum = createIcon({ displayName: "Ethereum", viewBox: "0 0 28 28", - path: ( - - - - - - - - - - - - - - - - - ), + path: [ + + + + + + + + + , + + + + + , + ], }) diff --git a/dapp/src/static/icons/Info.tsx b/dapp/src/static/icons/Info.tsx index bef23adae..364e278d7 100644 --- a/dapp/src/static/icons/Info.tsx +++ b/dapp/src/static/icons/Info.tsx @@ -3,30 +3,12 @@ import { createIcon } from "@chakra-ui/react" export const Info = createIcon({ displayName: "Info", - viewBox: "0 0 16 16", - path: ( - - - - - - - - - - - - ), + viewBox: "0 0 20 20", + path: [ + , + , + ], }) From 832da1e33689daa9beb06ec4655f75e981a5aadf Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Wed, 6 Dec 2023 09:52:03 +0100 Subject: [PATCH 12/22] Add types for chakra ui component styles --- dapp/src/theme/Button.ts | 3 ++- dapp/src/theme/Switch.ts | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts index 51a7cbf7a..0a3947861 100644 --- a/dapp/src/theme/Button.ts +++ b/dapp/src/theme/Button.ts @@ -1,7 +1,8 @@ import { mode } from "@chakra-ui/theme-tools" import type { StyleFunctionProps } from "@chakra-ui/styled-system" +import { ComponentSingleStyleConfig } from "@chakra-ui/react" -const Button = { +const Button: ComponentSingleStyleConfig = { baseStyle: { rounded: "none", }, diff --git a/dapp/src/theme/Switch.ts b/dapp/src/theme/Switch.ts index 1074491b4..1529dda02 100644 --- a/dapp/src/theme/Switch.ts +++ b/dapp/src/theme/Switch.ts @@ -1,4 +1,6 @@ -const Switch = { +import { ComponentSingleStyleConfig } from "@chakra-ui/react" + +const Switch: ComponentSingleStyleConfig = { baseStyle: { track: { _checked: { From 332d6a91bda2986c5d58e71accb797f958a63995 Mon Sep 17 00:00:00 2001 From: Jakub Nowakowski Date: Thu, 7 Dec 2023 12:14:50 +0100 Subject: [PATCH 13/22] Add tests for address helper --- core/test/helpers.test.ts | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 core/test/helpers.test.ts diff --git a/core/test/helpers.test.ts b/core/test/helpers.test.ts new file mode 100644 index 000000000..bb5641643 --- /dev/null +++ b/core/test/helpers.test.ts @@ -0,0 +1,39 @@ +/* eslint-disable @typescript-eslint/no-unused-expressions */ +import { expect } from "chai" +import { ZeroAddress } from "ethers" + +import { isNonZeroAddress } from "../helpers/address" + +const ADDRESS_1: string = "0xb894c3967CFb58A5c55f1de4131d126B1eFA1EE0" +const ADDRESS_1_LOWERCASE: string = ADDRESS_1.toLowerCase() +const ADDRESS_1_NO_PREFIX: string = ADDRESS_1.substring(2) +const ADDRESS_INVALID: string = "0xXYZ4c3967CFb58A5c55f1de4131d126B1eFA1EE0" +const ADDRESS_ZERO: string = ZeroAddress + +describe("Helpers", () => { + describe("address", () => { + describe("isNonZeroAddress", () => { + it("should return true for valid checksumed address", () => { + expect(isNonZeroAddress(ADDRESS_1)).to.be.true + }) + + it("should return true for lowercase address", () => { + expect(isNonZeroAddress(ADDRESS_1_LOWERCASE)).to.be.true + }) + + it("should return true for address without 0x prefix", () => { + expect(isNonZeroAddress(ADDRESS_1_NO_PREFIX)).to.be.true + }) + + it("should return false for zero address", () => { + expect(isNonZeroAddress(ADDRESS_ZERO)).to.be.false + }) + + it("should throw an error for address containing invalid character", () => { + expect(() => { + isNonZeroAddress(ADDRESS_INVALID) + }).to.throw("invalid address") + }) + }) + }) +}) From 9866cad8621765e76594bf30900888b8d0661d1f Mon Sep 17 00:00:00 2001 From: Jakub Nowakowski Date: Thu, 7 Dec 2023 12:16:58 +0100 Subject: [PATCH 14/22] Add test case for empty address string --- core/test/helpers.test.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/core/test/helpers.test.ts b/core/test/helpers.test.ts index bb5641643..c5a507eb8 100644 --- a/core/test/helpers.test.ts +++ b/core/test/helpers.test.ts @@ -29,6 +29,12 @@ describe("Helpers", () => { expect(isNonZeroAddress(ADDRESS_ZERO)).to.be.false }) + it("should throw an error for empty string", () => { + expect(() => { + isNonZeroAddress("") + }).to.throw("invalid address") + }) + it("should throw an error for address containing invalid character", () => { expect(() => { isNonZeroAddress(ADDRESS_INVALID) From 805f28c7d8fe6772ba2ba3443e51ccf5d8cfe9e9 Mon Sep 17 00:00:00 2001 From: Jakub Nowakowski Date: Thu, 7 Dec 2023 12:20:18 +0100 Subject: [PATCH 15/22] Update core/scripts/fetch_external_artifacts.sh MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Rafał Czajkowski <57687279+r-czajkowski@users.noreply.github.com> --- core/scripts/fetch_external_artifacts.sh | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/core/scripts/fetch_external_artifacts.sh b/core/scripts/fetch_external_artifacts.sh index a15c0f108..26bf2a499 100755 --- a/core/scripts/fetch_external_artifacts.sh +++ b/core/scripts/fetch_external_artifacts.sh @@ -9,9 +9,9 @@ EXTERNAL_ARTIFACTS_DIR=${ROOT_DIR}/external rm -rf ${TMP_DIR} mkdir -p ${TMP_DIR} -# fetch_external_artifact is a function that fetches a contract deployment artifact -# from a package published to the NPM registry. It assumes a package is published -# following the rules established by Keep Network deployments: +# fetch_external_artifact is a function that fetches a contract deployment +# artifact from a package published to the NPM registry. It assumes a package is +# published following the rules established by Keep Network deployments: # 1. Packages are tagged with network name and contain the latest version of # deployment artifacts for the given network. # 2. Deployment artfiacts files located under `artifacts/` directory. From d4d656c927a7db10a922f3658567a7891bf00465 Mon Sep 17 00:00:00 2001 From: Jakub Nowakowski Date: Thu, 7 Dec 2023 12:20:26 +0100 Subject: [PATCH 16/22] Update core/scripts/fetch_external_artifacts.sh MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Rafał Czajkowski <57687279+r-czajkowski@users.noreply.github.com> --- core/scripts/fetch_external_artifacts.sh | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/core/scripts/fetch_external_artifacts.sh b/core/scripts/fetch_external_artifacts.sh index 26bf2a499..5c043568e 100755 --- a/core/scripts/fetch_external_artifacts.sh +++ b/core/scripts/fetch_external_artifacts.sh @@ -35,7 +35,8 @@ fetch_external_artifact() { --pack-destination=${TMP_DIR} \ ${package} | # Extract deployment artifact to the destination directory. - xargs -I{} tar -zxf ${TMP_DIR}/{} -C ${destination_dir} --strip-components 2 package/artifacts/${contractName}.json + xargs -I{} tar -zxf ${TMP_DIR}/{} -C ${destination_dir} \ + --strip-components 2 package/artifacts/${contractName}.json printf "Succesfully fetched ${contractName} contract artifact from ${package} to ${destination_dir}\n" } From a71401d45b848fc9ce8855e153699aecf46e94bf Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 8 Dec 2023 08:16:55 +0100 Subject: [PATCH 17/22] Use the chakra `Box` component as the `main` --- dapp/src/DApp.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index 085b6fbe8..f38c6379e 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -1,5 +1,5 @@ import React from "react" -import { ChakraProvider } from "@chakra-ui/react" +import { Box, ChakraProvider } from "@chakra-ui/react" import { useDetectThemeMode } from "./hooks" import theme from "./theme" import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts" @@ -12,9 +12,9 @@ function DApp() { return ( <>
-
+ -
+ ) } From 078f0bb223461528fe90c6fb6a761516182bf7c4 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 8 Dec 2023 08:50:27 +0100 Subject: [PATCH 18/22] Use a `Card` component for overview elements --- .../components/Overview/PositionDetails.tsx | 43 ++++++++----------- dapp/src/components/Overview/Statistics.tsx | 11 +++-- .../Overview/TransactionHistory.tsx | 11 +++-- 3 files changed, 33 insertions(+), 32 deletions(-) diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx index 972db661f..e82d49620 100644 --- a/dapp/src/components/Overview/PositionDetails.tsx +++ b/dapp/src/components/Overview/PositionDetails.tsx @@ -2,42 +2,37 @@ import React from "react" import { Text, Button, - HStack, Tooltip, Icon, useColorModeValue, - Flex, + CardBody, + Card, + CardFooter, } from "@chakra-ui/react" import { BITCOIN, USD } from "../../constants" import { Info } from "../../static/icons" export default function PositionDetails() { return ( - - + + Your positions - - - 34.75 - {BITCOIN.symbol} - - - - 1.245.148,1 - {USD.symbol} - - {/* TODO: Add correct text for tooltip */} - - - - - - - + + 34.75 {BITCOIN.symbol} + + + 1.245.148,1 {USD.symbol} + {/* TODO: Add correct text for tooltip */} + + + + + + {/* TODO: Handle click actions */} - - + + ) } diff --git a/dapp/src/components/Overview/Statistics.tsx b/dapp/src/components/Overview/Statistics.tsx index b0c2dc0d6..bad05e4da 100644 --- a/dapp/src/components/Overview/Statistics.tsx +++ b/dapp/src/components/Overview/Statistics.tsx @@ -1,10 +1,13 @@ import React from "react" -import { Text, Box } from "@chakra-ui/react" +import { CardBody, Card } from "@chakra-ui/react" +import { TextMd } from "../Typography" export default function Statistics() { return ( - - Pool stats - + + + Pool stats + + ) } diff --git a/dapp/src/components/Overview/TransactionHistory.tsx b/dapp/src/components/Overview/TransactionHistory.tsx index 312233938..b8c0da7fd 100644 --- a/dapp/src/components/Overview/TransactionHistory.tsx +++ b/dapp/src/components/Overview/TransactionHistory.tsx @@ -1,10 +1,13 @@ import React from "react" -import { Text, Box } from "@chakra-ui/react" +import { CardBody, Card } from "@chakra-ui/react" +import { TextMd } from "../Typography" export default function TransactionHistory() { return ( - - Transaction history - + + + Transaction history + + ) } From 1ff9cfb03b43fc49d9ecad2b38b2958367b038ea Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 8 Dec 2023 09:27:31 +0100 Subject: [PATCH 19/22] Use a `templateAreas` for grid --- dapp/src/components/Overview/index.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/dapp/src/components/Overview/index.tsx b/dapp/src/components/Overview/index.tsx index 38f7d0068..6a4810a84 100644 --- a/dapp/src/components/Overview/index.tsx +++ b/dapp/src/components/Overview/index.tsx @@ -26,18 +26,20 @@ export default function Overview() { - + - + - + From be3d4a5d2829d25ac5dae844ec08d32d623ff072 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 8 Dec 2023 09:28:54 +0100 Subject: [PATCH 20/22] Move the tooltip on the position details card --- dapp/src/components/Overview/PositionDetails.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx index e82d49620..8fb074fe3 100644 --- a/dapp/src/components/Overview/PositionDetails.tsx +++ b/dapp/src/components/Overview/PositionDetails.tsx @@ -8,6 +8,7 @@ import { CardBody, Card, CardFooter, + HStack, } from "@chakra-ui/react" import { BITCOIN, USD } from "../../constants" import { Info } from "../../static/icons" @@ -16,16 +17,18 @@ export default function PositionDetails() { return ( - Your positions + + Your positions + {/* TODO: Add correct text for tooltip */} + + + + 34.75 {BITCOIN.symbol} 1.245.148,1 {USD.symbol} - {/* TODO: Add correct text for tooltip */} - - - From da2d27f5b933f2cb0604e8199f828058638dbe35 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 8 Dec 2023 10:58:34 +0100 Subject: [PATCH 21/22] Use a `CardProps` for grid items By `CardProps` we can avoid unnecessary wrappers in grid and control content from the parent component. --- dapp/src/components/Overview/PositionDetails.tsx | 6 ++++-- dapp/src/components/Overview/Statistics.tsx | 7 ++++--- dapp/src/components/Overview/TransactionHistory.tsx | 7 ++++--- dapp/src/components/Overview/index.tsx | 13 +++---------- 4 files changed, 15 insertions(+), 18 deletions(-) diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx index 8fb074fe3..80ca4b7bc 100644 --- a/dapp/src/components/Overview/PositionDetails.tsx +++ b/dapp/src/components/Overview/PositionDetails.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/jsx-props-no-spreading */ import React from "react" import { Text, @@ -9,13 +10,14 @@ import { Card, CardFooter, HStack, + CardProps, } from "@chakra-ui/react" import { BITCOIN, USD } from "../../constants" import { Info } from "../../static/icons" -export default function PositionDetails() { +export default function PositionDetails(props: CardProps) { return ( - + Your positions diff --git a/dapp/src/components/Overview/Statistics.tsx b/dapp/src/components/Overview/Statistics.tsx index bad05e4da..a1efc1199 100644 --- a/dapp/src/components/Overview/Statistics.tsx +++ b/dapp/src/components/Overview/Statistics.tsx @@ -1,10 +1,11 @@ +/* eslint-disable react/jsx-props-no-spreading */ import React from "react" -import { CardBody, Card } from "@chakra-ui/react" +import { CardBody, Card, CardProps } from "@chakra-ui/react" import { TextMd } from "../Typography" -export default function Statistics() { +export default function Statistics(props: CardProps) { return ( - + Pool stats diff --git a/dapp/src/components/Overview/TransactionHistory.tsx b/dapp/src/components/Overview/TransactionHistory.tsx index b8c0da7fd..9dabb919c 100644 --- a/dapp/src/components/Overview/TransactionHistory.tsx +++ b/dapp/src/components/Overview/TransactionHistory.tsx @@ -1,10 +1,11 @@ +/* eslint-disable react/jsx-props-no-spreading */ import React from "react" -import { CardBody, Card } from "@chakra-ui/react" +import { CardBody, Card, CardProps } from "@chakra-ui/react" import { TextMd } from "../Typography" -export default function TransactionHistory() { +export default function TransactionHistory(props: CardProps) { return ( - + Transaction history diff --git a/dapp/src/components/Overview/index.tsx b/dapp/src/components/Overview/index.tsx index 6a4810a84..d5fde912e 100644 --- a/dapp/src/components/Overview/index.tsx +++ b/dapp/src/components/Overview/index.tsx @@ -3,7 +3,6 @@ import { Button, Flex, Grid, - GridItem, Icon, Switch, useColorModeValue, @@ -33,15 +32,9 @@ export default function Overview() { h="80vh" gap={4} > - - - - - - - - - + + + ) From 649d0ba76293ad1dab5c81e0ccd4b7769009b90d Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 8 Dec 2023 11:12:48 +0100 Subject: [PATCH 22/22] Disable eslint rule - allow use of spread operator --- dapp/.eslintrc | 5 ++++- dapp/src/components/Overview/PositionDetails.tsx | 1 - dapp/src/components/Overview/Statistics.tsx | 1 - dapp/src/components/Overview/TransactionHistory.tsx | 1 - dapp/src/components/Typography/index.tsx | 1 - 5 files changed, 4 insertions(+), 5 deletions(-) diff --git a/dapp/.eslintrc b/dapp/.eslintrc index 441891d36..b654e6b24 100644 --- a/dapp/.eslintrc +++ b/dapp/.eslintrc @@ -3,6 +3,9 @@ "extends": ["@thesis-co"], "rules": { "import/no-extraneous-dependencies": "off", - "import/prefer-default-export": "off" + "import/prefer-default-export": "off", + // Regarding the fact that we are using Chakra UI lib let's disable this rule. + // This will allow us to easily pass props from the parent component. + "react/jsx-props-no-spreading": "off" } } diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx index 80ca4b7bc..e07b4a1c1 100644 --- a/dapp/src/components/Overview/PositionDetails.tsx +++ b/dapp/src/components/Overview/PositionDetails.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/jsx-props-no-spreading */ import React from "react" import { Text, diff --git a/dapp/src/components/Overview/Statistics.tsx b/dapp/src/components/Overview/Statistics.tsx index a1efc1199..221f22f60 100644 --- a/dapp/src/components/Overview/Statistics.tsx +++ b/dapp/src/components/Overview/Statistics.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/jsx-props-no-spreading */ import React from "react" import { CardBody, Card, CardProps } from "@chakra-ui/react" import { TextMd } from "../Typography" diff --git a/dapp/src/components/Overview/TransactionHistory.tsx b/dapp/src/components/Overview/TransactionHistory.tsx index 9dabb919c..7b03b3b9f 100644 --- a/dapp/src/components/Overview/TransactionHistory.tsx +++ b/dapp/src/components/Overview/TransactionHistory.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/jsx-props-no-spreading */ import React from "react" import { CardBody, Card, CardProps } from "@chakra-ui/react" import { TextMd } from "../Typography" diff --git a/dapp/src/components/Typography/index.tsx b/dapp/src/components/Typography/index.tsx index 6e1231239..1ffbd9ff1 100644 --- a/dapp/src/components/Typography/index.tsx +++ b/dapp/src/components/Typography/index.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/jsx-props-no-spreading */ import React from "react" import { Text, TextProps } from "@chakra-ui/react"