diff --git a/public/icons/aud-flag.svg b/public/icons/aud-flag.svg new file mode 100644 index 0000000..e7917dc --- /dev/null +++ b/public/icons/aud-flag.svg @@ -0,0 +1,85 @@ + + + diff --git a/public/icons/btc-flag.svg b/public/icons/btc-flag.svg new file mode 100644 index 0000000..30f600e --- /dev/null +++ b/public/icons/btc-flag.svg @@ -0,0 +1,28 @@ + diff --git a/public/icons/cad-flag.svg b/public/icons/cad-flag.svg new file mode 100644 index 0000000..6b1ea17 --- /dev/null +++ b/public/icons/cad-flag.svg @@ -0,0 +1,24 @@ + diff --git a/public/icons/cny-flag.svg b/public/icons/cny-flag.svg new file mode 100644 index 0000000..053f46c --- /dev/null +++ b/public/icons/cny-flag.svg @@ -0,0 +1,45 @@ + diff --git a/public/icons/eth-flag.svg b/public/icons/eth-flag.svg new file mode 100644 index 0000000..3ad1c3e --- /dev/null +++ b/public/icons/eth-flag.svg @@ -0,0 +1,46 @@ + diff --git a/src/components/ConnectedAccount/WalletCard.css b/src/components/ConnectedAccount/WalletCard.css index b4b6b28..662887a 100644 --- a/src/components/ConnectedAccount/WalletCard.css +++ b/src/components/ConnectedAccount/WalletCard.css @@ -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 { diff --git a/src/components/ConnectedAccount/WalletCard.tsx b/src/components/ConnectedAccount/WalletCard.tsx index ccfc911..6f2d3e7 100644 --- a/src/components/ConnectedAccount/WalletCard.tsx +++ b/src/components/ConnectedAccount/WalletCard.tsx @@ -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) { TOKEN