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="">