Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Init overview page #39

Merged
merged 24 commits into from
Dec 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
7ca8dbe
Refactor for the navbar
kkosiorowska Nov 21, 2023
a65e020
Add the bottom part of the header
kkosiorowska Nov 21, 2023
a5b4a40
Split the site into 3 main elements
kkosiorowska Nov 21, 2023
287e952
Grid update for overview page
kkosiorowska Nov 22, 2023
70803b4
Merge branch 'connect-wallet' of github.com:thesis/acre into init-ove…
kkosiorowska Nov 27, 2023
568bc1d
Fix an issue after merging
kkosiorowska Nov 27, 2023
679d226
Merge branch 'main' of github.com:thesis/acre into init-overview-page
kkosiorowska Nov 28, 2023
0abcd5d
Create a USD currency
kkosiorowska Nov 28, 2023
5260526
Improve the use of `VStack`, `HStack` and `Flex`
kkosiorowska Nov 28, 2023
1973e44
Merge branch 'main' of github.com:thesis/acre into init-overview-page
kkosiorowska Dec 4, 2023
05e1a95
Rename `Navbar` to `Header`
kkosiorowska Dec 6, 2023
457f9fa
Wrap the main content under `main` tag
kkosiorowska Dec 6, 2023
2dca2bf
Refactor for spacing between component
kkosiorowska Dec 6, 2023
5fafc57
Don't multiple svgs tag
kkosiorowska Dec 6, 2023
832da1e
Add types for chakra ui component styles
kkosiorowska Dec 6, 2023
d2f2735
Merge branch 'main' of github.com:thesis/acre into init-overview-page
kkosiorowska Dec 6, 2023
5f98c1f
Merge branch 'main' into init-overview-page
kkosiorowska Dec 7, 2023
a71401d
Use the chakra `Box` component as the `main`
kkosiorowska Dec 8, 2023
078f0bb
Use a `Card` component for overview elements
kkosiorowska Dec 8, 2023
1ff9cfb
Use a `templateAreas` for grid
kkosiorowska Dec 8, 2023
be3d4a5
Move the tooltip on the position details card
kkosiorowska Dec 8, 2023
da2d27f
Use a `CardProps` for grid items
kkosiorowska Dec 8, 2023
649d0ba
Disable eslint rule - allow use of spread operator
kkosiorowska Dec 8, 2023
4045432
Merge branch 'main' into init-overview-page
kkosiorowska Dec 8, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion dapp/.eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
21 changes: 10 additions & 11 deletions dapp/src/DApp.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
)
}

Expand Down
16 changes: 0 additions & 16 deletions dapp/src/assets/bitcoin.svg

This file was deleted.

16 changes: 0 additions & 16 deletions dapp/src/assets/ethereum.svg

This file was deleted.

11 changes: 0 additions & 11 deletions dapp/src/assets/info.svg

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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>
}
Expand All @@ -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"}
Expand All @@ -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>
)
}
11 changes: 11 additions & 0 deletions dapp/src/components/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
11 changes: 0 additions & 11 deletions dapp/src/components/Navbar/index.tsx

This file was deleted.

42 changes: 42 additions & 0 deletions dapp/src/components/Overview/PositionDetails.tsx
Original file line number Diff line number Diff line change
@@ -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 (
r-czajkowski marked this conversation as resolved.
Show resolved Hide resolved
<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>
)
}
13 changes: 13 additions & 0 deletions dapp/src/components/Overview/Statistics.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
13 changes: 13 additions & 0 deletions dapp/src/components/Overview/TransactionHistory.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
41 changes: 41 additions & 0 deletions dapp/src/components/Overview/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
r-czajkowski marked this conversation as resolved.
Show resolved Hide resolved
<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>
)
}
1 change: 0 additions & 1 deletion dapp/src/components/Typography/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable react/jsx-props-no-spreading */
import React from "react"
import { Text, TextProps } from "@chakra-ui/react"

Expand Down
6 changes: 6 additions & 0 deletions dapp/src/constants/currency.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand Down
31 changes: 31 additions & 0 deletions dapp/src/static/icons/Bitcoin.tsx
Original file line number Diff line number Diff line change
@@ -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>,
],
})
13 changes: 13 additions & 0 deletions dapp/src/static/icons/ChevronRight.tsx
Original file line number Diff line number Diff line change
@@ -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"
/>
),
})
Loading