Merge pull request #9 from jejolare-dev/dev

add: fixes of icons

src/components/UI/ImgWithFallback/index.tsx

@@ -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 <Image {...rest} alt={alt} src={imgSrc} onError={() => setImgSrc(fallbackSrc)} />;
-};
-
-export default ImgWithFallback;

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 (
 						<div className={styles.pair_cell}>
-							<ImgWithFallback
+							<Image
 								width={18}
 								height={18}
-								src={`/tokens/${assetId}.png`}
+								src={getAssetIcon(String(assetId))}
 								alt="currency"
 							/>
 							<div className={styles.currency_name}>
@@ -107,7 +106,7 @@ function PairsTable({ data }: IProps) {
 				cell: ({ row }) => (
 					<div className={styles.price_cell}>
 						<div className={styles.text}>
-							{roundTo(notationToString(row.original.price))}
+							{roundTo(notationToString(row.original.price), 2)}
 						</div>
 						<div className={styles.sub_text}>{row.original.priceUSD}</div>
 					</div>
@@ -150,7 +149,7 @@ function PairsTable({ data }: IProps) {
 				cell: ({ row }) => (
 					<div className={styles.price_cell}>
 						<div className={styles.text}>
-							{roundTo(notationToString(row.original?.volume ?? 0), 8)}
+							{roundTo(notationToString(row.original?.volume ?? 0), 2)}
 						</div>
 						<div className={styles.sub_text}>{row.original.volumeUSD}</div>
 					</div>

src/constants/tokens.json

@@ -0,0 +1,11 @@
+[
+	"6ca3fa07f1b6a75b6e195d2918c32228765968b54ea691c75958affa1c4073fb",
+	"34b01e731c2215ae9d1244e3a2f7a4e09569cce4b4273ee18286db41f98873a2",
+	"040a180aca4194a158c17945dd115db42086f6f074c1f77838621a4927fffa91",
+	"55a8e0a730b133fb83915ba0e4335a680ae9d07a99642b17774460560f3b003d",
+	"93da681503353509367e241cda3234299dedbbad9ec851de31e900490807bf0c",
+	"24819c4b65786c3ac424e05d9ef4ab212de6222cc73bc5c4b012df5a3107eea4",
+	"86143388bd056a8f0bab669f78f14873fac8e2dd8d57898cdb725a2d5e2e4f8f",
+	"d6329b5b1f7c0805b5c345f4957554002a2f557845f64d7645dae0e051a6498a",
+	"fc7edd432df16c1e1bf5b7233b5bdaa040c68715b4de24478c9b276082a642a0"
+]

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 (
 		<div className={styles.card}>
 			<div className={styles.card__header}>
-				<ImgWithFallback
+				<Image
 					width={18}
 					height={18}
-					src={`/tokens/${firstCurrency.asset_id}.png`}
+					src={getAssetIcon(String(firstCurrency.asset_id))}
 					alt="currency"
 				/>
 				<div className={styles.currency_name}>

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() {
 						<div className={styles.trading__currency__wrapper}>
 							<div className={styles.trading__currency__wrapper_top}>
 								<div>
-									<ImgWithFallback
+									<Image
 										width={50}
 										height={50}
-										src={`/tokens/${pairData?.first_currency.asset_id}.png`}
+										src={getAssetIcon(
+											String(pairData?.first_currency.asset_id),
+										)}
 										alt="currency"
 									/>
 								</div>
@@ -1123,25 +1125,25 @@ function Trading() {
 						<StatItem
 							Img={ClockIcon}
 							title="24h change"
-							value={`${roundTo(notationToString(pairStats?.rate || 0), 8)} ${secondCurrencyName}`}
+							value={`${roundTo(notationToString(pairStats?.rate || 0), 2)} ${secondCurrencyName}`}
 							coefficient={coefficientOutput}
 						/>
 						<StatItem
 							Img={UpIcon}
 							title="24h high"
-							value={`${roundTo(notationToString(pairStats?.high || 0), 8)} ${secondCurrencyName}`}
+							value={`${roundTo(notationToString(pairStats?.high || 0), 2)} ${secondCurrencyName}`}
 						/>
 						<StatItem
 							Img={DownIcon}
 							title="24h low"
-							value={`${roundTo(notationToString(pairStats?.low || 0), 8)} ${secondCurrencyName}`}
+							value={`${roundTo(notationToString(pairStats?.low || 0), 2)} ${secondCurrencyName}`}
 						/>
 						<StatItem
 							Img={VolumeIcon}
 							title="24h volume"
 							value={`${roundTo(
 								notationToString(pairStats?.volume || 0),
-								8,
+								2,
 							)} ${secondCurrencyName}`}
 						/>
 					</div>

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'];