Merge branch 'releases/v0.0.13' into mock

public/icons/euro-flag.svg

@@ -0,0 +1,43 @@
+<svg
+  version="1.1"
+  id="Layer_1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  viewBox="0 0 512 512"
+  xml:space="preserve">
+  <circle style="fill: #0052b4" cx="256" cy="256" r="256" />
+  <g>
+    <polygon
+      style="fill: #ffda44"
+      points="256.001,100.174 264.29,125.683 291.11,125.683 269.411,141.448 277.7,166.957 
+		256.001,151.191 234.301,166.957 242.59,141.448 220.891,125.683 247.712,125.683 	" />
+    <polygon
+      style="fill: #ffda44"
+      points="145.814,145.814 169.714,157.99 188.679,139.026 184.482,165.516 208.381,177.693 
+		181.89,181.889 177.694,208.381 165.517,184.482 139.027,188.679 157.992,169.714 	" />
+    <polygon
+      style="fill: #ffda44"
+      points="100.175,256 125.684,247.711 125.684,220.89 141.448,242.59 166.958,234.301 151.191,256 
+		166.958,277.699 141.448,269.411 125.684,291.11 125.684,264.289 	" />
+    <polygon
+      style="fill: #ffda44"
+      points="145.814,366.186 157.991,342.286 139.027,323.321 165.518,327.519 177.693,303.62 
+		181.89,330.111 208.38,334.307 184.484,346.484 188.679,372.974 169.714,354.009 	" />
+    <polygon
+      style="fill: #ffda44"
+      points="256.001,411.826 247.711,386.317 220.891,386.317 242.591,370.552 234.301,345.045 
+		256.001,360.809 277.7,345.045 269.411,370.552 291.11,386.317 264.289,386.317 	" />
+    <polygon
+      style="fill: #ffda44"
+      points="366.187,366.186 342.288,354.01 323.322,372.975 327.519,346.483 303.622,334.307 
+		330.112,330.111 334.308,303.62 346.484,327.519 372.974,323.321 354.009,342.288 	" />
+    <polygon
+      style="fill: #ffda44"
+      points="411.826,256 386.317,264.289 386.317,291.11 370.552,269.41 345.045,277.699 360.81,256 
+		345.045,234.301 370.553,242.59 386.317,220.89 386.317,247.712 	" />
+    <polygon
+      style="fill: #ffda44"
+      points="366.187,145.814 354.01,169.714 372.975,188.679 346.483,184.481 334.308,208.38 
+		330.112,181.889 303.622,177.692 327.519,165.516 323.322,139.027 342.289,157.991 	" />
+  </g>
+</svg>

src/components/ConnectedAccount/ConnectedAccount.css

@@ -30,6 +30,10 @@
         text-align: left;
         color: #969696;
 
+        &:hover {
+          cursor: pointer;
+        }
+
         &[aria-selected] {
           background: #2f2f2f;
           color: white;

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<TabType>("monthly");
+
   return (
     <div className="connected-account">
       <main>
-        <WalletCard></WalletCard>
+        <WalletCard tab={tab}></WalletCard>
       </main>
       <footer>
         <ul>
-          <li>Daily</li>
-          <li aria-selected>Weekly</li>
-          <li>Monthly</li>
+          <li
+            onClick={() => setTab("daily")}
+            {...attributes({ "aria-selected": tab === "daily" })}>
+            Daily
+          </li>
+          <li
+            onClick={() => setTab("weekly")}
+            {...attributes({ "aria-selected": tab === "weekly" })}>
+            Weekly
+          </li>
+          <li
+            onClick={() => setTab("monthly")}
+            {...attributes({ "aria-selected": tab === "monthly" })}>
+            Monthly
+          </li>
         </ul>
         <div>
           <div className="row gap">

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);
+  }
 }

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<HTMLDivElement>(null);
+  const chart = useRef<echarts.EChartsType | null>(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<HTMLSelectElement>) => {
+    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 (
     <div className="wallet-card">
       <header>
@@ -26,8 +113,9 @@ export function WalletCard() {
         </section>
 
         <section>
-          <WalletChart></WalletChart>
-          <WalletLines></WalletLines>
+          {/* <WalletChart></WalletChart> */}
+          {/* <WalletLines></WalletLines> */}
+          <div className="lines" ref={div} style={{ height: 200 }}></div>
         </section>
       </main>
 
@@ -35,12 +123,15 @@ export function WalletCard() {
         <div>
           <span>TOKEN</span>
           <div className="row">
-            <var>$1,540 USD</var>
+            <var>
+              {tokenValue.toFixed(2)} {currency}
+            </var>
             <small>+ 5%</small>
           </div>
         </div>
-        <select defaultValue={"US"}>
-          <option value={"US"}></option>
+        <select defaultValue={currency} onChange={onCurrencyChange}>
+          <option value={"USD"}>USD</option>
+          <option value={"EUR"}>EUR</option>
         </select>
       </footer>
     </div>

src/components/Peers/PeersCard.css

@@ -15,6 +15,9 @@
     position: absolute;
     left: 0;
     right: 0;
+    top: -35px;
+    bottom: 0;
+    margin: auto;
   }
 
   footer {

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 (
     <div className="peers-card">
       <main className="row gap">
         <PeersMap nodes={data?.table.nodes || []}></PeersMap>
-        <PeersChart actives={actives} percent={percent}></PeersChart>
+        <PeersChart actives={actives} degrees={degrees}></PeersChart>
       </main>
       <footer>
         <PeersQuality good={good}></PeersQuality>

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);
   }
 }

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<HTMLDivElement>(null);
-  const chart = useRef<echarts.EChartsType | null>(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 (
     <>
-      {/* <div style={style} className="peers-chart">
+      <div style={style} className="peers-chart">
         <div></div>
         <span>{actives}</span>
-      </div> */}
-      <div
-        id="chart"
-        ref={div}
-        className="gauge"
-        style={{
-          width: 250,
-          height: 250,
-        }}></div>
+      </div>
     </>
   );
 }

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 = () => {
               <span>Connections</span>
             </header>
             <main>
-              <PeersChart actives={actives} percent={percent}></PeersChart>
+              <PeersChart actives={actives} degrees={degrees}></PeersChart>
             </main>
             <footer>
               <PeersQuality good={good}></PeersQuality>

src/routes/dashboard/wallet.css

@@ -4,12 +4,19 @@
   flex-wrap: wrap;
 
   .card {
+    flex: 1;
     filter: grayscale(30);
     transition: filter 0.5s;
 
     &:hover {
       filter: none;
     }
+
+    > ul li {
+      border-bottom: 1px solid #96969633;
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+    }
   }
 
   .buttons {
@@ -65,10 +72,6 @@
     }
   }
 
-  .card {
-    flex: 1;
-  }
-
   .require-assistance {
     max-height: 145px;
     margin-top: 8px;
@@ -105,9 +108,6 @@
     li {
       display: flex;
       gap: 48px;
-      border-bottom: 1px solid #96969633;
-      margin-bottom: 16px;
-      padding-bottom: 16px;
 
       div {
         display: flex;

src/routes/dashboard/wallet.tsx

@@ -99,9 +99,7 @@ export const WalletRoute = () => {
           </ul>
         </>
       </Card>
-      <Card
-        icon={<RequestDurationIcon width={24}></RequestDurationIcon>}
-        title="Activity">
+      <Card icon={<span></span>} title="">
         <div>
           <div>
             <RequestDurationIcon width={24}></RequestDurationIcon>