104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
import { useContext } from 'react';
|
|
import Image from 'next/image';
|
|
import { useRouter } from 'next/router';
|
|
import ArrowRight from '@/assets/images/UI/arrow_right.svg';
|
|
import { Store } from '@/store/store-reducer';
|
|
import PairData from '@/interfaces/common/PairData';
|
|
import { getAssetIcon, notationToString, roundTo } from '@/utils/utils';
|
|
import styles from './PairsCard.module.scss';
|
|
|
|
interface IProps {
|
|
pair: PairData;
|
|
}
|
|
|
|
export default function PairsCard({ pair }: IProps) {
|
|
const router = useRouter();
|
|
const { state } = useContext(Store);
|
|
|
|
const firstCurrency = pair.first_currency;
|
|
const secondCurrency = pair.second_currency;
|
|
|
|
const isFeatured = pair.featured;
|
|
|
|
const secondAssetUsdPrice = state.assetsRates.get(secondCurrency.asset_id || '') ?? 0;
|
|
|
|
const price = Number(roundTo(notationToString(pair.rate ?? 0), 4));
|
|
const currentPriceUSD = secondAssetUsdPrice ? price : 0;
|
|
const priceUSD = currentPriceUSD
|
|
? String(`$${(secondAssetUsdPrice * price).toFixed(2)}`)
|
|
: String(`$${(secondAssetUsdPrice * price).toFixed(0)}`);
|
|
|
|
const coefficient = pair?.coefficient || 0;
|
|
const coefficientOutput =
|
|
parseFloat(coefficient?.toFixed(2) || '0') === -100
|
|
? -99.99
|
|
: parseFloat(coefficient?.toFixed(2) || '0');
|
|
|
|
const volume = Number(roundTo(notationToString(pair.volume ?? 0), 4));
|
|
const currentVolumeUSD = secondAssetUsdPrice ? volume : 0;
|
|
const volumeUSD = currentVolumeUSD
|
|
? String(`$${(secondAssetUsdPrice * volume).toFixed(2)}`)
|
|
: String(`$${(secondAssetUsdPrice * volume).toFixed(0)}`);
|
|
|
|
const handleClick = () => {
|
|
router.push(`/dex/trading/${pair.id}`);
|
|
};
|
|
|
|
return (
|
|
<div className={styles.card}>
|
|
<div className={styles.card__header}>
|
|
<Image
|
|
width={18}
|
|
height={18}
|
|
src={getAssetIcon(String(firstCurrency.asset_id))}
|
|
alt="currency"
|
|
/>
|
|
<div className={styles.currency_name}>
|
|
<span>{firstCurrency.name}</span>
|
|
<span>/</span>
|
|
<span>{secondCurrency.name}</span>
|
|
</div>
|
|
{isFeatured && (
|
|
<Image src="/ui/featured.svg" alt="featured" width={24} height={24} />
|
|
)}
|
|
</div>
|
|
<div className={styles.card__body}>
|
|
<div className={styles.card__body_wrapper}>
|
|
<div className={styles.card__body_row}>
|
|
<div className={styles.card__body_column}>
|
|
<p>
|
|
{`Price ${secondCurrency.name ? `(${secondCurrency.name})` : ''}`}{' '}
|
|
</p>
|
|
<div className={styles.card__body_column_content}>
|
|
<div className={styles.card__body_column_price}>
|
|
<span>{price}</span>
|
|
<span
|
|
style={{ color: coefficient >= 0 ? '#16D1D6' : '#FF6767' }}
|
|
>
|
|
{' '}
|
|
{coefficient >= 0 ? '+' : ''}
|
|
{coefficientOutput}%
|
|
</span>
|
|
</div>
|
|
<span>{priceUSD}</span>
|
|
</div>
|
|
</div>
|
|
<div className={styles.card__body_column}>
|
|
<p>24h Volume</p>
|
|
<div className={styles.card__body_column_content}>
|
|
<span>{volume}</span>
|
|
<span>{volumeUSD}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.card__button_wrapper}>
|
|
<button className={styles.card__button} onClick={handleClick}>
|
|
<ArrowRight />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|