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/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 (
- +
    -
  • Daily
    • -
  • Weekly
    • -
  • Monthly
    • +
  • setTab("daily")} + {...attributes({ "aria-selected": tab === "daily" })}> + Daily +
    • +
  • setTab("weekly")} + {...attributes({ "aria-selected": tab === "weekly" })}> + Weekly +
    • +
  • setTab("monthly")} + {...attributes({ "aria-selected": tab === "monthly" })}> + Monthly +
diff --git a/src/components/ConnectedAccount/WalletCard.css b/src/components/ConnectedAccount/WalletCard.css index f0fa1d8..5c16606 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; } } @@ -192,4 +202,9 @@ top: 10px; } } + + .lines { + height: 200; + transform: scale(1.25); + } } diff --git a/src/components/ConnectedAccount/WalletCard.tsx b/src/components/ConnectedAccount/WalletCard.tsx index 5f6ec8c..e88983e 100644 --- a/src/components/ConnectedAccount/WalletCard.tsx +++ b/src/components/ConnectedAccount/WalletCard.tsx @@ -1,10 +1,97 @@ import "./WalletCard.css"; 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, useRef, useEffect } from "react"; + +import * as echarts from "echarts/core"; +import { LineChart } from "echarts/charts"; +import { GridComponent } from "echarts/components"; +import { UniversalTransition } from "echarts/features"; +import { CanvasRenderer } from "echarts/renderers"; + +const defaultTokenValue = 1540; + +echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]); + +type Props = { + tab: "weekly" | "daily" | "monthly"; +}; + +export function WalletCard({ tab }: Props) { + const [tokenValue, setTokenValue] = useState(defaultTokenValue); + const [currency, setCurrency] = useState("USD"); + 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 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); + } + }; + + if (chart.current) { + const data = { + daily: ["MON", "TUE", "WED", "THU", "WED", "SAT", "SUN"], + weekly: ["1", "2", "3", "4", "5", "6"], + monthly: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN"], + }[tab]; + + const option = { + color: ["#3EE089"], + xAxis: { + type: "category", + data: data, + show: true, + splitLine: { + show: true, + lineStyle: { + width: 0.5, + type: "dashed", + }, + }, + }, + yAxis: { + type: "value", + show: false, + }, + series: [ + { + data: [220, 932, 401, 934, 1290, 1330, 1450].slice(0, data.length), + type: "line", + smooth: true, + lineStyle: { + normal: { + color: "#3EE089", + }, + }, + }, + ], + tooltip: { + type: "item", + }, + }; + + chart.current.setOption(option); + } -export function WalletCard() { return (
@@ -26,8 +113,9 @@ export function WalletCard() {
- - + {/* */} + {/* */} +
@@ -35,12 +123,15 @@ export function WalletCard() {
TOKEN
- $1,540 USD + + {tokenValue.toFixed(2)} {currency} + + 5%
- + +
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 (
- +