Init overview page (#39)

This PR splits the site into 3 main elements: position details pool
stats and transaction history. The page split should make it easier to
work on the separate elements of the page. The size and positioning of
elements may change. Please don't pay more attention to styles. These
also change dynamically and typography or colors are not defined yet.
The purpose of this PR is to define only the separate components. Fixes
to the styles will be done in the next steps.

### What has been done

- Split the site into 3 main elements: position details pool stats and
transaction history.
- Change the approach to using icons. Let's use the `createIcon`
function to use the dedicated `Icon` component from Chakra UI. This will
allow us to easily change the color of our icons depending on the
situation. This is possible by using the `currentColor` value for the
`svg`.
- Create a separate file of constants -`currencies.ts`
- Define the Switch component for the theme.
- Defines the default Tooltip props for the theme.
- Update styles for the link button.
- Improve the use of `VStack`, `HStack` and `Flex` - 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.

### UI

<img width="1450" alt="Screenshot 2023-11-22 at 14 16 43"
src="https://github.com/thesis/acre/assets/23117945/b01ed852-cf43-4cbf-8ec0-3612252692fd">

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"
   }
 }

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 (
-    <Box>
-      <Navbar />
-      <h1>Ledger live - Acre dApp</h1>
-      {btcAccount && <Text>Account: {btcAccount.address}</Text>}
-      {ethAccount && <Text>Account: {ethAccount.address}</Text>}
-    </Box>
+    <>
+      <Header />
+      <Box as="main">
+        <Overview />
+      </Box>
+    </>
   )
 }
 

dapp/src/components/Navbar/ConnectWallet.tsx → 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<void>
 }
@@ -26,13 +31,21 @@ function ConnectButton({
   requestAccount,
 }: ConnectButtonsProps) {
   const styles = !account ? { color: "error", borderColor: "error" } : undefined
+  const colorRightIcon = useColorModeValue("black", "grey.80")
+
   return (
     <Button
       variant="outline"
       sx={styles}
-      leftIcon={<Image src={leftIcon} />}
-      // TODO: Add a tooltip here
-      rightIcon={!account ? <Image src={rightIcon} /> : undefined}
+      leftIcon={<Icon as={leftIcon} h={7} w={7} />}
+      rightIcon={
+        !account ? (
+          // TODO: Add correct text for tooltip
+          <Tooltip label="Template">
+            <Icon as={rightIcon} color={colorRightIcon} />
+          </Tooltip>
+        ) : undefined
+      }
       onClick={requestAccount}
     >
       {account ? truncateAddress(account.address) : "Not connected"}
@@ -46,32 +59,32 @@ export default function ConnectWallet() {
   const { btcAccount, ethAccount } = useWalletContext()
 
   return (
-    <Box display="flex" alignItems="center" gap="4">
-      <Box display="flex" gap="2">
+    <HStack spacing={4}>
+      <HStack>
         <Text>Balance</Text>
         <Text as="b">
           {!btcAccount || btcAccount?.balance.isZero()
             ? "0.00"
             : formatSatoshiAmount(btcAccount.balance.toString())}
         </Text>
         <Text>{BITCOIN.symbol}</Text>
-      </Box>
+      </HStack>
       <ConnectButton
-        leftIcon={BitcoinIcon}
-        rightIcon={InfoIcon}
+        leftIcon={Bitcoin}
+        rightIcon={Info}
         account={btcAccount}
         requestAccount={async () => {
           await requestBitcoinAccount()
         }}
       />
       <ConnectButton
-        leftIcon={EthereumIcon}
-        rightIcon={InfoIcon}
+        leftIcon={Ethereum}
+        rightIcon={Info}
         account={ethAccount}
         requestAccount={async () => {
           await requestEthereumAccount()
         }}
       />
-    </Box>
+    </HStack>
   )
 }

dapp/src/components/Header/index.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+import { Flex } from "@chakra-ui/react"
+import ConnectWallet from "./ConnectWallet"
+
+export default function Header() {
+  return (
+    <Flex justifyContent="end" p={6}>
+      <ConnectWallet />
+    </Flex>
+  )
+}

dapp/src/components/Overview/PositionDetails.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import {
+  Text,
+  Button,
+  Tooltip,
+  Icon,
+  useColorModeValue,
+  CardBody,
+  Card,
+  CardFooter,
+  HStack,
+  CardProps,
+} from "@chakra-ui/react"
+import { BITCOIN, USD } from "../../constants"
+import { Info } from "../../static/icons"
+
+export default function PositionDetails(props: CardProps) {
+  return (
+    <Card {...props}>
+      <CardBody>
+        <HStack justifyContent="space-between">
+          <Text>Your positions</Text>
+          {/* TODO: Add correct text for tooltip */}
+          <Tooltip label="Template">
+            <Icon as={Info} color={useColorModeValue("black", "grey.80")} />
+          </Tooltip>
+        </HStack>
+        <Text>
+          34.75 <Text as="span">{BITCOIN.symbol}</Text>
+        </Text>
+        <Text>
+          1.245.148,1 <Text as="span">{USD.symbol}</Text>
+        </Text>
+      </CardBody>
+      <CardFooter flexDirection="column" gap={2}>
+        {/* TODO: Handle click actions */}
+        <Button>Stake</Button>
+        <Button variant="outline">Withdraw</Button>
+      </CardFooter>
+    </Card>
+  )
+}

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 (
+    <Card {...props}>
+      <CardBody>
+        <TextMd>Pool stats</TextMd>
+      </CardBody>
+    </Card>
+  )
+}

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 (
+    <Card {...props}>
+      <CardBody>
+        <TextMd>Transaction history</TextMd>
+      </CardBody>
+    </Card>
+  )
+}

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 (
+    <Flex direction="column" gap={2} p={6}>
+      <Flex justifyContent="space-between">
+        {/* TODO: Handle click actions */}
+        <Switch size="sm">Show values in {USD.symbol}</Switch>
+        <Button variant="link" rightIcon={<Icon as={ChevronRight} />}>
+          Read documentation
+        </Button>
+      </Flex>
+      <Grid
+        templateAreas={`"position-details statistics"
+                        "transaction-history transaction-history"`}
+        gridTemplateColumns={{ base: "30% 1fr", xl: "20% 1fr" }}
+        gridTemplateRows={{ base: "55% 1fr", xl: "40% 1fr" }}
+        h="80vh"
+        gap={4}
+      >
+        <PositionDetails bg={bg} gridArea="position-details" />
+        <Statistics bg={bg} gridArea="statistics" />
+        <TransactionHistory bg={bg} gridArea="transaction-history" />
+      </Grid>
+    </Flex>
+  )
+}

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"
 

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"
 

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: [
+    <g clipPath="url(#clip0_1935_2913)">
+      <rect width="28" height="28" rx="14" fill="black" />
+      <g clipPath="url(#clip1_1935_2913)">
+        <path
+          d="M17.9643 13.4608C18.7339 13.0656 19.2154 12.3698 19.1029 11.2105C18.9515 9.62618 17.5942 9.09493 15.8808 8.94364L15.8805 6.74609H14.5529L14.5526 8.88584C14.2033 8.88584 13.8472 8.89276 13.4928 8.89993L13.4925 6.74639L12.1661 6.74626L12.1659 8.94326C11.8784 8.94918 11.5961 8.9548 11.3205 8.9548V8.9483L9.48941 8.94755L9.48966 10.376C9.48966 10.376 10.47 10.3574 10.4539 10.3754C10.9914 10.3758 11.1669 10.6904 11.2174 10.9619L11.2178 13.4654V16.9819C11.1941 17.1523 11.0945 17.4246 10.7187 17.4251C10.7358 17.4403 9.75299 17.425 9.75299 17.425L9.48966 19.0223H11.217C11.5388 19.0226 11.8551 19.0277 12.1653 19.0302L12.1665 21.2526L13.4925 21.253L13.4921 19.0538C13.8569 19.0613 14.2091 19.0646 14.553 19.0641L14.5526 21.253H15.8801L15.8809 19.0343C18.1123 18.9051 19.6745 18.3386 19.8687 16.2266C20.0253 14.5262 19.2312 13.7672 17.9643 13.4608ZM13.5245 10.4724C14.2732 10.4724 16.6279 10.2321 16.6282 11.8084C16.6279 13.3196 14.2739 13.1431 13.5245 13.1431V10.4724ZM13.5239 17.436L13.5245 14.4913C14.4241 14.4911 17.2456 14.2304 17.2459 15.963C17.2463 17.6245 14.4241 17.4353 13.5239 17.436Z"
+          fill="white"
+        />
+      </g>
+    </g>,
+    <defs>
+      <clipPath id="clip0_1935_2913">
+        <rect width="28" height="28" rx="14" fill="white" />
+      </clipPath>
+      <clipPath id="clip1_1935_2913">
+        <rect
+          width="11.3014"
+          height="15"
+          fill="white"
+          transform="translate(9 6.5)"
+        />
+      </clipPath>
+    </defs>,
+  ],
+})

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: (
+    <path
+      fill="currentColor"
+      d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+    />
+  ),
+})