diff --git a/src/components/UI/ImgWithFallback/index.tsx b/src/components/UI/ImgWithFallback/index.tsx deleted file mode 100644 index abda96b..0000000 --- a/src/components/UI/ImgWithFallback/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -'use client'; - -import { useState, useEffect } from 'react'; -import Image, { ImageProps } from 'next/image'; - -type ImgWithFallbackProps = ImageProps & { - fallbackSrc?: string; - alt: string; -}; - -const ImgWithFallback = ({ - src, - alt, - fallbackSrc = '/tokens/token.png', - ...rest -}: ImgWithFallbackProps) => { - const [imgSrc, setImgSrc] = useState(src); - - useEffect(() => { - setImgSrc(src); - }, [src]); - - return {alt} setImgSrc(fallbackSrc)} />; -}; - -export default ImgWithFallback; diff --git a/src/components/default/PairsTable/PairsTable.tsx b/src/components/default/PairsTable/PairsTable.tsx index 578a04a..0891919 100644 --- a/src/components/default/PairsTable/PairsTable.tsx +++ b/src/components/default/PairsTable/PairsTable.tsx @@ -7,8 +7,7 @@ import { ReactComponent as ClockIcon } from '@/assets/images/UI/clock_icon.svg'; import { Store } from '@/store/store-reducer'; import PairData from '@/interfaces/common/PairData'; import { ContextState } from '@/interfaces/common/ContextValue'; -import { tradingKnownCurrencies, roundTo, notationToString } from '@/utils/utils'; -import ImgWithFallback from '@/components/UI/ImgWithFallback'; +import { tradingKnownCurrencies, roundTo, notationToString, getAssetIcon } from '@/utils/utils'; import styles from './PairsTable.module.scss'; import { Row } from './types'; @@ -73,10 +72,10 @@ function PairsTable({ data }: IProps) { } = row.original; return (
-
@@ -107,7 +106,7 @@ function PairsTable({ data }: IProps) { cell: ({ row }) => (
- {roundTo(notationToString(row.original.price))} + {roundTo(notationToString(row.original.price), 2)}
{row.original.priceUSD}
@@ -150,7 +149,7 @@ function PairsTable({ data }: IProps) { cell: ({ row }) => (
- {roundTo(notationToString(row.original?.volume ?? 0), 8)} + {roundTo(notationToString(row.original?.volume ?? 0), 2)}
{row.original.volumeUSD}
diff --git a/src/constants/tokens.json b/src/constants/tokens.json new file mode 100644 index 0000000..35f9dd8 --- /dev/null +++ b/src/constants/tokens.json @@ -0,0 +1,11 @@ +[ + "6ca3fa07f1b6a75b6e195d2918c32228765968b54ea691c75958affa1c4073fb", + "34b01e731c2215ae9d1244e3a2f7a4e09569cce4b4273ee18286db41f98873a2", + "040a180aca4194a158c17945dd115db42086f6f074c1f77838621a4927fffa91", + "55a8e0a730b133fb83915ba0e4335a680ae9d07a99642b17774460560f3b003d", + "93da681503353509367e241cda3234299dedbbad9ec851de31e900490807bf0c", + "24819c4b65786c3ac424e05d9ef4ab212de6222cc73bc5c4b012df5a3107eea4", + "86143388bd056a8f0bab669f78f14873fac8e2dd8d57898cdb725a2d5e2e4f8f", + "d6329b5b1f7c0805b5c345f4957554002a2f557845f64d7645dae0e051a6498a", + "fc7edd432df16c1e1bf5b7233b5bdaa040c68715b4de24478c9b276082a642a0" +] diff --git a/src/pages/dex/pairs/PairsCard/PairsCard.tsx b/src/pages/dex/pairs/PairsCard/PairsCard.tsx index ad81a15..c0b5c2d 100644 --- a/src/pages/dex/pairs/PairsCard/PairsCard.tsx +++ b/src/pages/dex/pairs/PairsCard/PairsCard.tsx @@ -4,8 +4,7 @@ import { useRouter } from 'next/router'; import { ReactComponent as ArrowRight } from '@/assets/images/UI/arrow_right.svg'; import { Store } from '@/store/store-reducer'; import PairData from '@/interfaces/common/PairData'; -import { notationToString, roundTo, tradingKnownCurrencies } from '@/utils/utils'; -import ImgWithFallback from '@/components/UI/ImgWithFallback'; +import { getAssetIcon, notationToString, roundTo } from '@/utils/utils'; import styles from './PairsCard.module.scss'; interface IProps { @@ -21,13 +20,9 @@ export default function PairsCard({ pair }: IProps) { const isFeatured = pair.featured; - const code = tradingKnownCurrencies.includes(firstCurrency?.code) - ? secondCurrency?.code - : 'tsds'; - const secondAssetUsdPrice = state.assetsRates.get(secondCurrency.asset_id || '') ?? 0; - const price = Number(roundTo(notationToString(pair.rate ?? 0))); + const price = Number(roundTo(notationToString(pair.rate ?? 0), 2)); const currentPriceUSD = secondAssetUsdPrice ? price : 0; const priceUSD = currentPriceUSD ? String(`$${(secondAssetUsdPrice * price).toFixed(2)}`) @@ -39,7 +34,7 @@ export default function PairsCard({ pair }: IProps) { ? -99.99 : parseFloat(coefficient?.toFixed(2) || '0'); - const volume = Number(roundTo(notationToString(pair.volume ?? 0))); + const volume = Number(roundTo(notationToString(pair.volume ?? 0), 2)); const currentVolumeUSD = secondAssetUsdPrice ? volume : 0; const volumeUSD = currentVolumeUSD ? String(`$${(secondAssetUsdPrice * volume).toFixed(2)}`) @@ -52,10 +47,10 @@ export default function PairsCard({ pair }: IProps) { return (
-
diff --git a/src/pages/dex/trading/[id].tsx b/src/pages/dex/trading/[id].tsx index e129132..ea28999 100644 --- a/src/pages/dex/trading/[id].tsx +++ b/src/pages/dex/trading/[id].tsx @@ -29,6 +29,7 @@ import { nanoid } from 'nanoid'; import { cutAddress, formatDollarValue, + getAssetIcon, isPositiveFloatStr, notationToString, roundTo, @@ -56,7 +57,6 @@ import LightningImg from '@/assets/images/UI/lightning.png'; import RocketImg from '@/assets/images/UI/rocket.png'; import { ReactComponent as ConnectionIcon } from '@/assets/images/UI/connection.svg'; import Image from 'next/image'; -import ImgWithFallback from '@/components/UI/ImgWithFallback'; import CandleChart from './CandleChart/CandleChart'; import OrdersBuySellSwitch from './OrdersBuySellSwitch/OrdersBuySellSwitch'; import InputPanelItem from './InputPanelItem/InputPanelItem'; @@ -1055,10 +1055,12 @@ function Trading() {
-
@@ -1123,25 +1125,25 @@ function Trading() {
diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 568866d..deb3643 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -1,5 +1,6 @@ import WalletCredentials from '@/interfaces/common/WalletCredentials'; import Decimal from 'decimal.js'; +import whitelistedTokens from '@/constants/tokens.json'; export const intToStrFixedLen = (int: number, fixed = 2) => { let str = int.toString(); @@ -137,6 +138,15 @@ export function classes(...items: (string | boolean | undefined)[]): string { return items.filter((className) => className).join(' '); } +export const getAssetIcon = (assetId: string): string => { + const findAsset = whitelistedTokens.find((s) => s === assetId); + + if (findAsset) { + return `/tokens/${assetId}.png`; + } + return '/tokens/token.png'; +}; + export const ZANO_ASSET_ID = 'd6329b5b1f7c0805b5c345f4957554002a2f557845f64d7645dae0e051a6498a'; const knownCurrencies = ['zano', 'xmr', 'btc', 'firo', 'usd', 'eur', 'cad', 'jpy'];