Add currency converter

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

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<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);
+    }
+  };
+
   return (
     <div className="wallet-card">
       <header>
@@ -35,12 +55,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"}>
+        <select defaultValue={currency} onChange={onCurrencyChange}>
-          <option value={"US"}></option>
+          <option value={"USD"}>USD</option>
+          <option value={"EUR"}>EUR</option>
         </select>
       </footer>
     </div>

src/routes/dashboard/wallet.tsx

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