mirror of
https://github.com/logos-storage/logos-storage-marketplace-ui.git
synced 2026-01-02 13:33:06 +00:00
Add other currencies to the wallet
This commit is contained in:
Arnaud
parent
cef126a063
commit
1f4e7d075f
85
public/icons/aud-flag.svg
Normal file
85
public/icons/aud-flag.svg
Normal file
@ -0,0 +1,85 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 512 512"
|
||||
style="enable-background: new 0 0 512 512"
|
||||
xml:space="preserve">
|
||||
<path
|
||||
style="fill: #0052b4"
|
||||
d="M512,256c0,141.384-114.616,256-256,256S0,397.384,0,256C0,256.06,256,0.029,256,0
|
||||
C397.384,0,512,114.616,512,256z" />
|
||||
<g>
|
||||
<path
|
||||
style="fill: #f0f0f0"
|
||||
d="M256,0c-0.014,0-0.029,0.001-0.043,0.001L256,0L256,0z" />
|
||||
<path
|
||||
style="fill: #f0f0f0"
|
||||
d="M255.315,256H256c0-0.232,0-0.454,0-0.685C255.772,255.544,255.544,255.772,255.315,256z" />
|
||||
<path
|
||||
style="fill: #f0f0f0"
|
||||
d="M256,133.566c0-45.045,0-74.562,0-133.565h-0.043C114.592,0.024,0,114.629,0,256h133.565v-75.212
|
||||
L208.777,256h46.539c0.229-0.228,0.457-0.456,0.685-0.685c0-17.247,0-32.636,0-46.536l-75.213-75.213H256z" />
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
style="fill: #d80027"
|
||||
d="M129.515,33.391C89.476,56.19,56.19,89.476,33.391,129.515V256h66.783V100.175v-0.001H256
|
||||
c0-21.063,0-41.129,0-66.783H129.515z" />
|
||||
<path
|
||||
style="fill: #d80027"
|
||||
d="M256,224.519l-90.953-90.952h-31.481c0-0.001,0,0,0,0L255.999,256H256
|
||||
C256,256,256,234.295,256,224.519z" />
|
||||
</g>
|
||||
<g>
|
||||
<polygon
|
||||
style="fill: #f0f0f0"
|
||||
points="154.395,300.522 168.445,329.9 200.172,322.567 185.964,351.869 211.478,372.102
|
||||
179.711,379.262 179.8,411.826 154.395,391.453 128.991,411.826 129.08,379.262 97.312,372.102 122.827,351.869 108.617,322.567
|
||||
140.346,329.9 " />
|
||||
<polygon
|
||||
style="fill: #f0f0f0"
|
||||
points="383.284,356.174 390.309,370.863 406.173,367.196 399.068,381.847 411.826,391.964
|
||||
395.942,395.544 395.986,411.826 383.284,401.639 370.582,411.826 370.626,395.544 354.743,391.964 367.5,381.847 360.396,367.196
|
||||
376.259,370.863 " />
|
||||
<polygon
|
||||
style="fill: #f0f0f0"
|
||||
points="317.933,200.348 324.957,215.038 340.821,211.37 333.717,226.021 346.474,236.138
|
||||
330.591,239.718 330.634,256 317.933,245.813 305.231,256 305.274,239.718 289.391,236.138 302.148,226.021 295.044,211.37
|
||||
310.908,215.038 " />
|
||||
<polygon
|
||||
style="fill: #f0f0f0"
|
||||
points="383.284,111.304 390.309,125.994 406.173,122.327 399.069,136.978 411.825,147.094
|
||||
395.942,150.675 395.986,166.957 383.284,156.77 370.582,166.957 370.626,150.675 354.743,147.094 367.499,136.978
|
||||
360.396,122.327 376.259,125.994 " />
|
||||
<polygon
|
||||
style="fill: #f0f0f0"
|
||||
points="440.368,178.087 447.392,192.777 463.256,189.109 456.152,203.76 468.909,213.877
|
||||
453.025,217.458 453.069,233.739 440.368,223.553 427.666,233.739 427.709,217.458 411.826,213.877 424.583,203.76
|
||||
417.479,189.109 433.342,192.777 " />
|
||||
<polygon
|
||||
style="fill: #f0f0f0"
|
||||
points="399.55,256 405.075,273.006 422.957,273.006 408.49,283.517 414.017,300.522
|
||||
399.55,290.012 385.084,300.522 390.609,283.517 376.143,273.006 394.024,273.006 " />
|
||||
</g>
|
||||
<g></g>
|
||||
<g></g>
|
||||
<g></g>
|
||||
<g></g>
|
||||
<g></g>
|
||||
<g></g>
|
||||
<g></g>
|
||||
<g></g>
|
||||
<g></g>
|
||||
<g></g>
|
||||
<g></g>
|
||||
<g></g>
|
||||
<g></g>
|
||||
<g></g>
|
||||
<g></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
28
public/icons/btc-flag.svg
Normal file
28
public/icons/btc-flag.svg
Normal file
@ -0,0 +1,28 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xml:space="preserve"
|
||||
width="100%"
|
||||
height="100%"
|
||||
version="1.1"
|
||||
shape-rendering="geometricPrecision"
|
||||
text-rendering="geometricPrecision"
|
||||
image-rendering="optimizeQuality"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
viewBox="0 0 4091.27 4091.73"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer" />
|
||||
<g id="_1421344023328">
|
||||
<path
|
||||
fill="#F7931A"
|
||||
fill-rule="nonzero"
|
||||
d="M4030.06 2540.77c-273.24,1096.01 -1383.32,1763.02 -2479.46,1489.71 -1095.68,-273.24 -1762.69,-1383.39 -1489.33,-2479.31 273.12,-1096.13 1383.2,-1763.19 2479,-1489.95 1096.06,273.24 1763.03,1383.51 1489.76,2479.57l0.02 -0.02z" />
|
||||
<path
|
||||
fill="white"
|
||||
fill-rule="nonzero"
|
||||
d="M2947.77 1754.38c40.72,-272.26 -166.56,-418.61 -450,-516.24l91.95 -368.8 -224.5 -55.94 -89.51 359.09c-59.02,-14.72 -119.63,-28.59 -179.87,-42.34l90.16 -361.46 -224.36 -55.94 -92 368.68c-48.84,-11.12 -96.81,-22.11 -143.35,-33.69l0.26 -1.16 -309.59 -77.31 -59.72 239.78c0,0 166.56,38.18 163.05,40.53 90.91,22.69 107.35,82.87 104.62,130.57l-104.74 420.15c6.26,1.59 14.38,3.89 23.34,7.49 -7.49,-1.86 -15.46,-3.89 -23.73,-5.87l-146.81 588.57c-11.11,27.62 -39.31,69.07 -102.87,53.33 2.25,3.26 -163.17,-40.72 -163.17,-40.72l-111.46 256.98 292.15 72.83c54.35,13.63 107.61,27.89 160.06,41.3l-92.9 373.03 224.24 55.94 92 -369.07c61.26,16.63 120.71,31.97 178.91,46.43l-91.69 367.33 224.51 55.94 92.89 -372.33c382.82,72.45 670.67,43.24 791.83,-303.02 97.63,-278.78 -4.86,-439.58 -206.26,-544.44 146.69,-33.83 257.18,-130.31 286.64,-329.61l-0.07 -0.05zm-512.93 719.26c-69.38,278.78 -538.76,128.08 -690.94,90.29l123.28 -494.2c152.17,37.99 640.17,113.17 567.67,403.91zm69.43 -723.3c-63.29,253.58 -453.96,124.75 -580.69,93.16l111.77 -448.21c126.73,31.59 534.85,90.55 468.94,355.05l-0.02 0z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
24
public/icons/cad-flag.svg
Normal file
24
public/icons/cad-flag.svg
Normal file
@ -0,0 +1,24 @@
|
||||
<svg
|
||||
height="800px"
|
||||
width="800px"
|
||||
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: #f0f0f0" cx="256" cy="256" r="256" />
|
||||
<g>
|
||||
<path
|
||||
style="fill: #d80027"
|
||||
d="M512,256c0-101.494-59.065-189.19-144.696-230.598v461.195C452.935,445.19,512,357.494,512,256z" />
|
||||
<path
|
||||
style="fill: #d80027"
|
||||
d="M0,256c0,101.494,59.065,189.19,144.696,230.598V25.402C59.065,66.81,0,154.506,0,256z" />
|
||||
<polygon
|
||||
style="fill: #d80027"
|
||||
points="300.522,289.391 345.043,267.13 322.783,256 322.783,233.739 278.261,256 300.522,211.478
|
||||
278.261,211.478 256,178.087 233.739,211.478 211.478,211.478 233.739,256 189.217,233.739 189.217,256 166.957,267.13
|
||||
211.478,289.391 200.348,311.652 244.87,311.652 244.87,345.043 267.13,345.043 267.13,311.652 311.652,311.652 " />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 936 B |
45
public/icons/cny-flag.svg
Normal file
45
public/icons/cny-flag.svg
Normal file
@ -0,0 +1,45 @@
|
||||
<svg
|
||||
version="1.1"
|
||||
id="圖層_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="311.81px"
|
||||
height="311.81px"
|
||||
viewBox="0 0 311.81 311.81"
|
||||
enable-background="new 0 0 311.81 311.81"
|
||||
xml:space="preserve">
|
||||
<circle
|
||||
fill="#DC2E27"
|
||||
stroke="#000000"
|
||||
stroke-miterlimit="10"
|
||||
cx="157"
|
||||
cy="157"
|
||||
r="150" />
|
||||
<path
|
||||
id="path3374_1_"
|
||||
fill="#F7DC15"
|
||||
d="M191.928,83.868l7.479,12.46l-9.544,10.964l14.164-3.26l7.478,12.459l1.279-14.476
|
||||
l14.159-3.26l-13.371-5.685l1.271-14.479l-9.538,10.964L191.928,83.868z" />
|
||||
<path
|
||||
id="path3433_1_"
|
||||
fill="#F7DC15"
|
||||
d="M107.009,97l-13.46,41.46H49.94l35.271,25.628L71.743,205.54l35.276-25.616l35.265,25.612
|
||||
l-13.473-41.444l35.264-25.64l-43.6,0.012L107.009,97z" />
|
||||
<path
|
||||
id="path3447_1_"
|
||||
fill="#F7DC15"
|
||||
d="M238.217,119.048l2.061,14.38l-13.047,6.399l14.314,2.492L243.6,156.7l6.797-12.844
|
||||
l14.313,2.488l-10.12-10.424l6.788-12.848l-13.045,6.404L238.217,119.048z" />
|
||||
<path
|
||||
id="path3453_1_"
|
||||
fill="#F7DC15"
|
||||
d="M214.076,218.288L205,229.636l-13.6-5.128l7.982,12.141l-9.074,11.344l14.012-3.84
|
||||
l7.984,12.132l0.672-14.507l14.012-3.85l-13.586-5.123L214.076,218.288z" />
|
||||
<path
|
||||
id="path3475_1_"
|
||||
fill="#F7DC15"
|
||||
d="M246.305,177.012l-3.99,13.973l-14.527,0.521l12.057,8.116l-3.99,13.968l11.442-8.956
|
||||
l12.054,8.108l-4.984-13.644l11.439-8.965l-14.523,0.524L246.305,177.012z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
46
public/icons/eth-flag.svg
Normal file
46
public/icons/eth-flag.svg
Normal file
@ -0,0 +1,46 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xml:space="preserve"
|
||||
width="100%"
|
||||
height="100%"
|
||||
version="1.1"
|
||||
shape-rendering="geometricPrecision"
|
||||
text-rendering="geometricPrecision"
|
||||
image-rendering="optimizeQuality"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
viewBox="0 0 784.37 1277.39"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer" />
|
||||
<g id="_1421394342400">
|
||||
<g>
|
||||
<polygon
|
||||
fill="#343434"
|
||||
fill-rule="nonzero"
|
||||
points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54 " />
|
||||
<polygon
|
||||
fill="#8C8C8C"
|
||||
fill-rule="nonzero"
|
||||
points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33 " />
|
||||
<polygon
|
||||
fill="#3C3C3B"
|
||||
fill-rule="nonzero"
|
||||
points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89 " />
|
||||
<polygon
|
||||
fill="#8C8C8C"
|
||||
fill-rule="nonzero"
|
||||
points="392.07,1277.38 392.07,956.52 -0,724.89 " />
|
||||
<polygon
|
||||
fill="#141414"
|
||||
fill-rule="nonzero"
|
||||
points="392.07,882.29 784.13,650.54 392.07,472.33 " />
|
||||
<polygon
|
||||
fill="#393939"
|
||||
fill-rule="nonzero"
|
||||
points="0,650.54 392.07,882.29 392.07,472.33 " />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -147,18 +147,38 @@
|
||||
box-shadow: 0 0 0 3px rgba(150, 150, 150, 0.2);
|
||||
}
|
||||
|
||||
&:has(option[value="USD"]:checked) {
|
||||
background-image: url(/icons/us-flag.svg);
|
||||
&:has(option:checked) {
|
||||
background-position: 10px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
&:has(option[value="USD"]:checked) {
|
||||
background-image: url(/icons/us-flag.svg);
|
||||
}
|
||||
|
||||
&:has(option[value="EUR"]:checked) {
|
||||
background-image: url(/icons/euro-flag.svg);
|
||||
background-position: 10px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
&:has(option[value="AUD"]:checked) {
|
||||
background-image: url(/icons/aud-flag.svg);
|
||||
}
|
||||
|
||||
&:has(option[value="CAD"]:checked) {
|
||||
background-image: url(/icons/cad-flag.svg);
|
||||
}
|
||||
|
||||
&:has(option[value="CNY"]:checked) {
|
||||
background-image: url(/icons/cny-flag.svg);
|
||||
}
|
||||
|
||||
&:has(option[value="BTC"]:checked) {
|
||||
background-image: url(/icons/btc-flag.svg);
|
||||
}
|
||||
|
||||
&:has(option[value="ETH"]:checked) {
|
||||
background-image: url(/icons/eth-flag.svg);
|
||||
}
|
||||
|
||||
option {
|
||||
|
||||
@ -39,11 +39,18 @@ export function WalletCard({ tab }: Props) {
|
||||
|
||||
if (value === "USD") {
|
||||
setTokenValue(1540);
|
||||
} else {
|
||||
} else if (["BTC", "ETH"].includes(value) === false) {
|
||||
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);
|
||||
setTokenValue(defaultTokenValue * json.usd[value.toLocaleLowerCase()]);
|
||||
} else {
|
||||
const json = await fetch(
|
||||
"https://api.coinbase.com/v2/prices/" +
|
||||
value.toLocaleLowerCase() +
|
||||
"-USD/spot.json"
|
||||
).then((res) => res.json());
|
||||
setTokenValue(defaultTokenValue / json.data.amount);
|
||||
}
|
||||
};
|
||||
|
||||
@ -135,14 +142,20 @@ export function WalletCard({ tab }: Props) {
|
||||
<span>TOKEN</span>
|
||||
<div className="row">
|
||||
<var>
|
||||
{tokenValue.toFixed(2)} {currency}
|
||||
{tokenValue.toFixed(["BTC", "ETH"].includes(currency) ? 8 : 2)}{" "}
|
||||
{currency}
|
||||
</var>
|
||||
<small>+ 5%</small>
|
||||
</div>
|
||||
</div>
|
||||
<select defaultValue={currency} onChange={onCurrencyChange}>
|
||||
<option value={"USD"}>USD</option>
|
||||
<option value={"BTC"}>BTC</option>
|
||||
<option value={"ETH"}>ETH</option>
|
||||
<option value={"EUR"}>EUR</option>
|
||||
<option value={"AUD"}>AUD</option>
|
||||
<option value={"CAD"}>CAD</option>
|
||||
<option value={"CNY"}>CNY</option>
|
||||
</select>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user