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/DApp.tsx b/dapp/src/DApp.tsx index 6f5e4a9bc..f38c6379e 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -1,22 +1,21 @@ import React from "react" -import { ChakraProvider, Box, Text } from "@chakra-ui/react" -import { useDetectThemeMode, useWalletContext } from "./hooks" +import { Box, ChakraProvider } 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() { useDetectThemeMode() - const { btcAccount, ethAccount } = useWalletContext() - return ( - - -

Ledger live - Acre dApp

- {btcAccount && Account: {btcAccount.address}} - {ethAccount && Account: {ethAccount.address}} - + <> +
+ + + + ) } 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/Header/ConnectWallet.tsx similarity index 68% rename from dapp/src/components/Navbar/ConnectWallet.tsx rename to dapp/src/components/Header/ConnectWallet.tsx index 9e761ea9c..8b35a010b 100644 --- a/dapp/src/components/Navbar/ConnectWallet.tsx +++ b/dapp/src/components/Header/ConnectWallet.tsx @@ -1,9 +1,14 @@ import React 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 { import { formatSatoshiAmount, truncateAddress } from "../../utils" export type ConnectButtonsProps = { - leftIcon: string - rightIcon: string + leftIcon: typeof Icon + rightIcon: typeof Icon account: Account | undefined 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/components/Overview/Statistics.tsx b/dapp/src/components/Overview/Statistics.tsx new file mode 100644 index 000000000..221f22f60 --- /dev/null +++ b/dapp/src/components/Overview/Statistics.tsx @@ -0,0 +1,13 @@ +import React from "react" +import { CardBody, Card, CardProps } from "@chakra-ui/react" +import { TextMd } from "../Typography" + +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 new file mode 100644 index 000000000..7b03b3b9f --- /dev/null +++ b/dapp/src/components/Overview/TransactionHistory.tsx @@ -0,0 +1,13 @@ +import React from "react" +import { CardBody, Card, CardProps } from "@chakra-ui/react" +import { TextMd } from "../Typography" + +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 new file mode 100644 index 000000000..d5fde912e --- /dev/null +++ b/dapp/src/components/Overview/index.tsx @@ -0,0 +1,41 @@ +import React from "react" +import { + Button, + Flex, + Grid, + 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} + + + + + + + + + ) +} 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" diff --git a/dapp/src/constants/currency.ts b/dapp/src/constants/currency.ts index f45406c7f..feecf3127 100644 --- a/dapp/src/constants/currency.ts +++ b/dapp/src/constants/currency.ts @@ -12,6 +12,12 @@ 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" diff --git a/dapp/src/static/icons/Bitcoin.tsx b/dapp/src/static/icons/Bitcoin.tsx new file mode 100644 index 000000000..c25918520 --- /dev/null +++ b/dapp/src/static/icons/Bitcoin.tsx @@ -0,0 +1,31 @@ +import React from "react" +import { createIcon } from "@chakra-ui/react" + +export const Bitcoin = createIcon({ + displayName: "Bitcoin", + viewBox: "0 0 28 28", + path: [ + + + + + + , + + + + + + + + , + ], +}) diff --git a/dapp/src/static/icons/ChevronRight.tsx b/dapp/src/static/icons/ChevronRight.tsx new file mode 100644 index 000000000..8a11116cb --- /dev/null +++ b/dapp/src/static/icons/ChevronRight.tsx @@ -0,0 +1,13 @@ +import React from "react" +import { createIcon } from "@chakra-ui/react" + +export const ChevronRight = createIcon({ + displayName: "ChevronRight", + viewBox: "0 0 20 20", + path: ( + + ), +}) diff --git a/dapp/src/static/icons/Ethereum.tsx b/dapp/src/static/icons/Ethereum.tsx new file mode 100644 index 000000000..b3c5c5633 --- /dev/null +++ b/dapp/src/static/icons/Ethereum.tsx @@ -0,0 +1,41 @@ +import React from "react" +import { createIcon } from "@chakra-ui/react" + +export const Ethereum = createIcon({ + displayName: "Ethereum", + viewBox: "0 0 28 28", + path: [ + + + + + + + + + , + + + + + , + ], +}) diff --git a/dapp/src/static/icons/Info.tsx b/dapp/src/static/icons/Info.tsx new file mode 100644 index 000000000..364e278d7 --- /dev/null +++ b/dapp/src/static/icons/Info.tsx @@ -0,0 +1,14 @@ +import React from "react" +import { createIcon } from "@chakra-ui/react" + +export const Info = createIcon({ + displayName: "Info", + viewBox: "0 0 20 20", + path: [ + , + , + ], +}) diff --git a/dapp/src/static/icons/index.ts b/dapp/src/static/icons/index.ts new file mode 100644 index 000000000..66c6e3aa9 --- /dev/null +++ b/dapp/src/static/icons/index.ts @@ -0,0 +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..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", }, @@ -14,6 +15,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..1529dda02 --- /dev/null +++ b/dapp/src/theme/Switch.ts @@ -0,0 +1,18 @@ +import { ComponentSingleStyleConfig } from "@chakra-ui/react" + +const Switch: ComponentSingleStyleConfig = { + 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 39ec6d51b..de73c60c8 100644 --- a/dapp/src/theme/index.ts +++ b/dapp/src/theme/index.ts @@ -1,8 +1,13 @@ -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, fontSizes, fontWeights, lineHeights } 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, fontSizes, @@ -11,13 +16,14 @@ const defaultTheme = { styles: { global: (props: StyleFunctionProps) => ({ body: { - backgroundColor: mode("lightGrey", "darkGrey")(props), + backgroundColor: mode("grey.100", "grey.300")(props), color: mode("black", "grey.80")(props), }, }), }, 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", }