mirror of
https://github.com/logos-storage/logos-storage-marketplace-ui.git
synced 2026-01-02 13:33:06 +00:00
Add currency converter
This commit is contained in:
Arnaud
parent
07917f8880
commit
35192b5b52
43
public/icons/euro-flag.svg
Normal file
43
public/icons/euro-flag.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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"}>
|
||||
<option value={"US"}></option>
|
||||
<select defaultValue={currency} onChange={onCurrencyChange}>
|
||||
<option value={"USD"}>USD</option>
|
||||
<option value={"EUR"}>EUR</option>
|
||||
</select>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user