From 07917f8880ca1bc83a0c027a10a0cce81f867e7b Mon Sep 17 00:00:00 2001 From: Arnaud Date: Mon, 25 Nov 2024 13:53:23 +0100 Subject: [PATCH 1/3] Restablish previous peer component --- src/components/Peers/PeersCard.css | 3 + src/components/Peers/PeersCard.tsx | 4 +- src/components/Peers/PeersChart.css | 8 ++- src/components/Peers/PeersChart.tsx | 105 +++------------------------- src/routes/dashboard/peers.tsx | 4 +- 5 files changed, 23 insertions(+), 101 deletions(-) diff --git a/src/components/Peers/PeersCard.css b/src/components/Peers/PeersCard.css index c5007ed..880a3bd 100644 --- a/src/components/Peers/PeersCard.css +++ b/src/components/Peers/PeersCard.css @@ -15,6 +15,9 @@ position: absolute; left: 0; right: 0; + top: -35px; + bottom: 0; + margin: auto; } footer { diff --git a/src/components/Peers/PeersCard.tsx b/src/components/Peers/PeersCard.tsx index fc73f37..cd6f2d7 100644 --- a/src/components/Peers/PeersCard.tsx +++ b/src/components/Peers/PeersCard.tsx @@ -12,14 +12,14 @@ export function PeersCard() { const nodes = data?.table.nodes ?? []; const actives = PeerUtils.countActives(nodes); - const percent = PeerUtils.calcularePercent(nodes); + const degrees = PeerUtils.calculareDegrees(nodes); const good = PeerUtils.isGoodQuality(actives); return (
- +
diff --git a/src/components/Peers/PeersChart.css b/src/components/Peers/PeersChart.css index e01d60f..f1f3b92 100644 --- a/src/components/Peers/PeersChart.css +++ b/src/components/Peers/PeersChart.css @@ -5,6 +5,7 @@ overflow: hidden; margin: auto; left: -32px; + border-radius: 5px; @media (min-width: 1000px) { & { @@ -30,6 +31,7 @@ border-bottom: none; border-top-left-radius: 175px; border-top-right-radius: 175px; + border-bottom-right-radius: 5px; } div { @@ -42,6 +44,8 @@ border-bottom-left-radius: 175px; border-bottom-right-radius: 175px; transform-origin: 50% 0; + border-top-left-radius: 5px; + border-top-right-radius: 5px; } div:nth-child(1) { @@ -52,13 +56,13 @@ span { font-family: Inter; - font-size: 38.67px; + font-size: 50px; font-weight: 500; line-height: 48.34px; letter-spacing: -0.005em; text-align: center; position: absolute; - bottom: 0; + bottom: 20px; left: calc(50% - 24px); } } diff --git a/src/components/Peers/PeersChart.tsx b/src/components/Peers/PeersChart.tsx index dbfdaaf..157da63 100644 --- a/src/components/Peers/PeersChart.tsx +++ b/src/components/Peers/PeersChart.tsx @@ -1,110 +1,25 @@ import "./PeersChart.css"; -import * as echarts from "echarts/core"; -import { TooltipComponent } from "echarts/components"; -import { SVGRenderer } from "echarts/renderers"; -import { GaugeChart } from "echarts/charts"; -import { useEffect, useRef, useState } from "react"; type Props = { actives: number; - percent: number; + degrees: number; }; -// type CustomCSSProperties = React.CSSProperties & { -// "--codex-peers-degrees": number; -// }; +type CustomCSSProperties = React.CSSProperties & { + "--codex-peers-degrees": number; +}; -echarts.use([GaugeChart, TooltipComponent, SVGRenderer]); - -export function PeersChart({ actives, percent }: Props) { - const div = useRef(null); - const chart = useRef(null); - const [, setRefresher] = useState(Date.now()); - - useEffect(() => { - if (div.current && !chart.current) { - chart.current = echarts.init(div.current, null, { - renderer: "svg", - }); - setRefresher(Date.now()); - } - }, [chart, div]); - - // const style: CustomCSSProperties = { - // "--codex-peers-degrees": percent, - // }; - - if (chart.current) { - const options = { - series: [ - { - type: "gauge", - axisLine: { - lineStyle: { - width: 30, - color: [ - [0.2, "var(--codex-color-error-hexa)"], - [0.5, "rgb(var(--codex-color-warning))"], - [1, "var(--codex-color-primary)"], - ], - }, - }, - pointer: { - itemStyle: { - color: "auto", - }, - }, - axisTick: { - distance: -30, - length: 8, - lineStyle: { - color: "#fff", - width: 2, - }, - }, - splitLine: { - distance: -30, - length: 30, - lineStyle: { - color: "#fff", - width: 2, - }, - }, - axisLabel: { - color: "inherit", - distance: 40, - fontSize: 0, - }, - detail: { - valueAnimation: true, - formatter: actives + "", - color: "inherit", - }, - data: [ - { - value: percent * 100, - }, - ], - }, - ], - }; - chart.current.setOption(options); - } +export function PeersChart({ actives, degrees }: Props) { + const style: CustomCSSProperties = { + "--codex-peers-degrees": degrees, + }; return ( <> - {/*
+
{actives} -
*/} -
+
); } diff --git a/src/routes/dashboard/peers.tsx b/src/routes/dashboard/peers.tsx index dc0d91c..eb884fa 100644 --- a/src/routes/dashboard/peers.tsx +++ b/src/routes/dashboard/peers.tsx @@ -76,7 +76,7 @@ export const PeersRoute = () => { }); const actives = PeerUtils.countActives(sorted); - const percent = PeerUtils.calcularePercent(sorted); + const degrees = PeerUtils.calculareDegrees(sorted); const good = PeerUtils.isGoodQuality(actives); return ( @@ -96,7 +96,7 @@ export const PeersRoute = () => { Connections
- +
From 35192b5b52ddfc47ba29115321e9d29ec8e04ecb Mon Sep 17 00:00:00 2001 From: Arnaud Date: Mon, 25 Nov 2024 14:24:28 +0100 Subject: [PATCH 2/3] Add currency converter --- public/icons/euro-flag.svg | 43 +++++++++++++++++++ .../ConnectedAccount/WalletCard.css | 14 +++++- .../ConnectedAccount/WalletCard.tsx | 29 +++++++++++-- src/routes/dashboard/wallet.tsx | 4 +- 4 files changed, 82 insertions(+), 8 deletions(-) create mode 100644 public/icons/euro-flag.svg diff --git a/public/icons/euro-flag.svg b/public/icons/euro-flag.svg new file mode 100644 index 0000000..26aadac --- /dev/null +++ b/public/icons/euro-flag.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + diff --git a/src/components/ConnectedAccount/WalletCard.css b/src/components/ConnectedAccount/WalletCard.css index f0fa1d8..90a83ad 100644 --- a/src/components/ConnectedAccount/WalletCard.css +++ b/src/components/ConnectedAccount/WalletCard.css @@ -133,27 +133,37 @@ background-color: #161616; border-radius: 8px; border: 1px solid #96969633; - padding: 6px 6px 6px 44px; + padding: 6px 24px 6px 34px; outline: none; -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari and Chrome */ appearance: none; position: relative; transition: box-shadow 0.35s; + height: 31px; + font-size: 0; &:hover { box-shadow: 0 0 0 3px var(--codex-border-color); } - &:has(option[value="US"]:checked) { + &:has(option[value="USD"]:checked) { background-image: url(/icons/us-flag.svg); background-position: 10px; background-repeat: no-repeat; background-size: 16px; } + &:has(option[value="EUR"]:checked) { + background-image: url(/icons/euro-flag.svg); + background-position: 10px; + background-repeat: no-repeat; + background-size: 16px; + } + option { border-radius: 32px; + font-size: 16px; } } diff --git a/src/components/ConnectedAccount/WalletCard.tsx b/src/components/ConnectedAccount/WalletCard.tsx index 5f6ec8c..57da438 100644 --- a/src/components/ConnectedAccount/WalletCard.tsx +++ b/src/components/ConnectedAccount/WalletCard.tsx @@ -3,8 +3,28 @@ import ArrowRightIcon from "../../assets/icons/arrow-right.svg?react"; import ArrowLeftIcon from "../../assets/icons/arrow-left.svg?react"; import WalletChart from "../../assets/icons/chart.svg?react"; import WalletLines from "../../assets/icons/lines.svg?react"; +import { useState, ChangeEvent } from "react"; + +const defaultTokenValue = 1540; export function WalletCard() { + const [tokenValue, setTokenValue] = useState(defaultTokenValue); + const [currency, setCurrency] = useState("USD"); + + const onCurrencyChange = async (e: ChangeEvent) => { + const value = e.currentTarget.value; + setCurrency(value); + + if (value === "USD") { + setTokenValue(1540); + } else { + const json = await fetch( + "https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/usd.json" + ).then((res) => res.json()); + setTokenValue(defaultTokenValue * json.usd.eur); + } + }; + return (
@@ -35,12 +55,15 @@ export function WalletCard() {
TOKEN
- $1,540 USD + + {tokenValue.toFixed(2)} {currency} + + 5%
- + +
diff --git a/src/routes/dashboard/wallet.tsx b/src/routes/dashboard/wallet.tsx index eb287d8..b43a61f 100644 --- a/src/routes/dashboard/wallet.tsx +++ b/src/routes/dashboard/wallet.tsx @@ -99,9 +99,7 @@ export const WalletRoute = () => { - } - title="Activity"> + } title="">
From 9edf09bf93ed248f34010cc3406b43b4cbd59049 Mon Sep 17 00:00:00 2001 From: Arnaud Date: Mon, 25 Nov 2024 16:37:13 +0100 Subject: [PATCH 3/3] Add chart for connected account --- .../ConnectedAccount/ConnectedAccount.css | 4 + .../ConnectedAccount/ConnectedAccount.tsx | 26 +++++- .../ConnectedAccount/WalletCard.css | 5 ++ .../ConnectedAccount/WalletCard.tsx | 80 +++++++++++++++++-- src/routes/dashboard/wallet.css | 14 ++-- 5 files changed, 112 insertions(+), 17 deletions(-) diff --git a/src/components/ConnectedAccount/ConnectedAccount.css b/src/components/ConnectedAccount/ConnectedAccount.css index 299f46d..85b8a56 100644 --- a/src/components/ConnectedAccount/ConnectedAccount.css +++ b/src/components/ConnectedAccount/ConnectedAccount.css @@ -30,6 +30,10 @@ text-align: left; color: #969696; + &:hover { + cursor: pointer; + } + &[aria-selected] { background: #2f2f2f; color: white; diff --git a/src/components/ConnectedAccount/ConnectedAccount.tsx b/src/components/ConnectedAccount/ConnectedAccount.tsx index 37ecf33..1e3f182 100644 --- a/src/components/ConnectedAccount/ConnectedAccount.tsx +++ b/src/components/ConnectedAccount/ConnectedAccount.tsx @@ -2,18 +2,36 @@ import "./ConnectedAccount.css"; import { WalletCard } from "./WalletCard"; import { ProgressCircle } from "./ProgressCircle"; import ArrowRightIcon from "../../assets/icons/arrow-right.svg?react"; +import { useState } from "react"; +import { attributes } from "../../utils/attributes"; + +type TabType = "weekly" | "daily" | "monthly"; export function ConnectedAccount() { + const [tab, setTab] = useState("monthly"); + return (
- +