diff --git a/packages/extension-polkagate/src/components/FormatPrice.tsx b/packages/extension-polkagate/src/components/FormatPrice.tsx index 8d9bb074d..5603de555 100644 --- a/packages/extension-polkagate/src/components/FormatPrice.tsx +++ b/packages/extension-polkagate/src/components/FormatPrice.tsx @@ -3,7 +3,7 @@ import type { BN } from '@polkadot/util'; -import { Grid, Skeleton } from '@mui/material'; +import { Grid, Skeleton, Typography } from '@mui/material'; import React, { useMemo } from 'react'; import { useCurrency } from '../hooks'; @@ -13,23 +13,29 @@ interface Props { amount?: BN | null; decimalPoint?: number; decimals?: number; + fontSize?: string; + fontWeight?: number; + lineHeight?: number; + mt?: string; num?: number | string; price?: number | null, + sign?: string; + skeletonHeight?: number; textAlign?: 'left' | 'right'; + textColor?: string; + height?: number; width?: string; - mt?: string; - skeletonHeight?: number; } export function nFormatter (num: number, decimalPoint: number) { const lookup = [ - { value: 1, symbol: '' }, - { value: 1e3, symbol: 'k' }, - { value: 1e6, symbol: 'M' }, - { value: 1e9, symbol: 'G' }, - { value: 1e12, symbol: 'T' }, - { value: 1e15, symbol: 'P' }, - { value: 1e18, symbol: 'E' } + { symbol: '', value: 1 }, + { symbol: 'k', value: 1e3 }, + { symbol: 'M', value: 1e6 }, + { symbol: 'G', value: 1e9 }, + { symbol: 'T', value: 1e12 }, + { symbol: 'P', value: 1e15 }, + { symbol: 'E', value: 1e18 } ]; const rx = /\.0+$|(\.[0-9]*[1-9])0+$/; @@ -44,11 +50,13 @@ export function nFormatter (num: number, decimalPoint: number) { return item ? (num / item.value).toFixed(decimalPoint).replace(rx, '$1') + item.symbol : '0'; } -function FormatPrice ({ amount, decimalPoint = 2, decimals, mt = '0px', num, price, skeletonHeight = 15, textAlign = 'left', width = '90px' }: Props): React.ReactElement { +const DECIMAL_POINTS_FOR_CRYPTO_AS_CURRENCY = 4; + +function FormatPrice ({ amount, decimalPoint = 2, decimals, fontSize, fontWeight, height, lineHeight = 1, mt = '0px', num, price, sign, skeletonHeight = 15, textAlign = 'left', textColor, width = '90px' }: Props): React.ReactElement { const currency = useCurrency(); const total = useMemo(() => { - if (num) { + if (num !== undefined) { return num; } @@ -59,14 +67,30 @@ function FormatPrice ({ amount, decimalPoint = 2, decimals, mt = '0px', num, pri return undefined; }, [amount, decimals, num, price]); + const _decimalPoint = useMemo(() => { + if (currency?.code && ['ETH', 'BTC'].includes(currency.code)) { + return DECIMAL_POINTS_FOR_CRYPTO_AS_CURRENCY; + } + + return decimalPoint; + }, [currency?.code, decimalPoint]); + return ( {total !== undefined - ? `${currency?.sign || ''}${nFormatter(total as number, decimalPoint)}` + ? + {sign || currency?.sign || ''}{nFormatter(total as number, _decimalPoint)} + : { token={asset.token} /> - - - + ); }; diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx index b80a989ce..88a502c54 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx @@ -28,15 +28,16 @@ interface PriceJSXType { } const Price = ({ balanceToShow, isPriceOutdated, price }: PriceJSXType) => ( - div span': { display: 'block' }, color: isPriceOutdated ? 'primary.light' : 'text.primary', fontWeight: 400 }}> - - + ); interface BalanceJSXType { diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AssetSelect.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AssetSelect.tsx index 835a6f11b..407cbe0cd 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AssetSelect.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AssetSelect.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ @@ -12,14 +11,14 @@ import { useAssetHubAssets, useTokens } from '../../../hooks'; interface Props { address: string | undefined; - onChange: (value: number) => void; + onChange: (value: number | string) => void; label: string; style: SxProps | undefined; assetId: number | undefined; setAssetId: React.Dispatch> } -function AssetSelect({ address, assetId, label, onChange, setAssetId, style }: Props) { +function AssetSelect ({ address, assetId, label, onChange, setAssetId, style }: Props) { const tokens = useTokens(address); const assets = useAssetHubAssets(address); const options = useMemo(() => (tokens || []).concat(assets || []), [assets, tokens]); diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/DisplayBalance.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/DisplayBalance.tsx index cdf20d799..ed9ad2e41 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/DisplayBalance.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/DisplayBalance.tsx @@ -4,13 +4,12 @@ /* eslint-disable react/jsx-max-props-per-line */ import type { Balance } from '@polkadot/types/interfaces'; +import type { BN } from '@polkadot/util'; import { ArrowForwardIosRounded as ArrowForwardIosRoundedIcon } from '@mui/icons-material'; import { Divider, Grid, IconButton, Typography, useTheme } from '@mui/material'; import React from 'react'; -import { BN } from '@polkadot/util'; - import { FormatPrice, ShowBalance } from '../../../components'; interface Props { @@ -24,7 +23,7 @@ interface Props { openCollapse?: boolean; } -export default function DisplayBalance({ amount, decimal, disabled, onClick, price, openCollapse, title, token }: Props): React.ReactElement { +export default function DisplayBalance ({ amount, decimal, disabled, onClick, openCollapse, price, title, token }: Props): React.ReactElement { const theme = useTheme(); return ( @@ -43,14 +42,14 @@ export default function DisplayBalance({ amount, decimal, disabled, onClick, pri /> - div span': { display: 'block' }, fontSize: '22px', fontWeight: 400 }}> - - + {onClick && - div span': { display: 'block' }, fontSize: '22px', fontWeight: 400 }}> - - + {api && unlockableAmount && !unlockableAmount.isZero() diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx index ced93d5d9..d7b2647c4 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx @@ -13,8 +13,8 @@ import { Chart, registerables } from 'chart.js'; import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import { AssetLogo } from '../../../components'; -import { nFormatter } from '../../../components/FormatPrice'; -import { useCurrency, useTranslation } from '../../../hooks'; +import FormatPrice from '../../../components/FormatPrice'; +import { useTranslation } from '../../../hooks'; import { DEFAULT_COLOR } from '../../../util/constants'; import getLogo2 from '../../../util/getLogo2'; import { amountToHuman } from '../../../util/utils'; @@ -31,10 +31,9 @@ interface AssetsToShow extends FetchedBalance { color: string } -export default function TotalChart({ accountAssets, pricesInCurrency }: Props): React.ReactElement { +export default function TotalChart ({ accountAssets, pricesInCurrency }: Props): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); - const currency = useCurrency(); const chartRef = useRef(null); Chart.register(...registerables); @@ -45,10 +44,10 @@ export default function TotalChart({ accountAssets, pricesInCurrency }: Props): const formatNumber = useCallback((num: number): number => parseFloat(Math.trunc(num) === 0 ? num.toFixed(2) : num.toFixed(1)), []); const { assets, totalWorth } = useMemo(() => { - if (accountAssets && accountAssets.length) { + if (accountAssets?.length) { const _assets = accountAssets as unknown as AssetsToShow[]; - let totalWorth = 0; + let total = 0; /** to add asset's worth and color */ accountAssets.forEach((asset, index) => { @@ -58,12 +57,12 @@ export default function TotalChart({ accountAssets, pricesInCurrency }: Props): _assets[index].worth = assetWorth; _assets[index].color = adjustColor(asset.token, assetColor, theme); - totalWorth += assetWorth; + total += assetWorth; }); /** to add asset's percentage */ _assets.forEach((asset) => { - asset.percentage = formatNumber((asset.worth / totalWorth) * 100); + asset.percentage = formatNumber((asset.worth / total) * 100); return asset; }); @@ -71,7 +70,7 @@ export default function TotalChart({ accountAssets, pricesInCurrency }: Props): _assets.sort((a, b) => b.worth - a.worth); const nonZeroAssets = _assets.filter((asset) => asset.worth > 0); - return { assets: nonZeroAssets, totalWorth: nFormatter(totalWorth, 2) }; + return { assets: nonZeroAssets, totalWorth: total }; } return { assets: undefined, totalWorth: undefined }; @@ -81,7 +80,7 @@ export default function TotalChart({ accountAssets, pricesInCurrency }: Props): const worths = assets?.map(({ worth }) => worth); const colors = assets?.map(({ color }) => color); - //@ts-ignore + // @ts-ignore const chartInstance = new Chart(chartRef.current, { data: { datasets: [{ @@ -100,7 +99,7 @@ export default function TotalChart({ accountAssets, pricesInCurrency }: Props): label: function (context) { const index = colors?.findIndex((val) => val === context.element.options['backgroundColor']); - return index && index != -1 ? assets?.[index]?.token as string :'UNIT'; + return index && index !== -1 ? assets?.[index]?.token : 'UNIT'; } } } @@ -109,21 +108,24 @@ export default function TotalChart({ accountAssets, pricesInCurrency }: Props): type: 'doughnut' }); - // Clean up the chart instance on component unmount return () => { chartInstance.destroy(); }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, [assets?.length, theme.palette.divider]); return ( - + {t('Total')} - - {`${currency?.sign ?? ''}${totalWorth ?? 0}`} - + {assets && assets.length > 0 && diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/index.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/index.tsx index a8ca7d65c..38aa92d73 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/index.tsx @@ -150,14 +150,14 @@ export default function AccountDetails (): React.ReactElement { } }, [genesisHash, accountAssets, assetId, paramAssetId, selectedAsset]); - const onChangeAsset = useCallback((id: number) => { + const onChangeAsset = useCallback((id: number | string) => { if (id === -1) { // this is the id of native token setAssetIdOnAssetHub(0); return; } - setAssetIdOnAssetHub(id); // this works for asset hubs atm + setAssetIdOnAssetHub(id as number); // this works for asset hubs atm }, []); const goToSend = useCallback(() => { diff --git a/packages/extension-polkagate/src/fullscreen/addNewChain/ShowChainInfo.tsx b/packages/extension-polkagate/src/fullscreen/addNewChain/ShowChainInfo.tsx index 9d6461b4c..26eb69671 100644 --- a/packages/extension-polkagate/src/fullscreen/addNewChain/ShowChainInfo.tsx +++ b/packages/extension-polkagate/src/fullscreen/addNewChain/ShowChainInfo.tsx @@ -14,8 +14,8 @@ import { Circle } from 'better-react-spinkit'; import React, { useEffect, useState } from 'react'; import { Label } from '../../components'; -import { nFormatter } from '../../components/FormatPrice'; -import { useCurrency, useTranslation } from '../../hooks'; +import FormatPrice from '../../components/FormatPrice'; +import { useTranslation } from '../../hooks'; import { toTitleCase } from '../governance/utils/util'; interface Props { @@ -44,7 +44,6 @@ const TOKEN_PRICE_KEY = 'tokenPrice'; export default function ShowChainInfo ({ metadata, price, style }: Props): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); - const currency = useCurrency(); const [selectedChainInfo, setSelectedChainInfo] = useState(); @@ -88,7 +87,12 @@ export default function ShowChainInfo ({ metadata, price, style }: Props): React Object.entries(selectedChainInfo).map(([key, value]) => ( {key === TOKEN_PRICE_KEY - ? `${currency?.sign || ''}${nFormatter(value as number, 2)}` + ? : value ?? '--- ---' } diff --git a/packages/extension-polkagate/src/fullscreen/addNewChain/index.tsx b/packages/extension-polkagate/src/fullscreen/addNewChain/index.tsx index 7795c1b28..45a25fa07 100644 --- a/packages/extension-polkagate/src/fullscreen/addNewChain/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/addNewChain/index.tsx @@ -15,7 +15,7 @@ import { ApiPromise, WsProvider } from '@polkadot/api'; import { endpointUrlPng } from '../../assets/img'; import { ActionContext, InputWithLabel, Progress, TwoButtons, VaadinIcon, Warning } from '../../components'; -import { nFormatter } from '../../components/FormatPrice'; +import FormatPrice from '../../components/FormatPrice'; import { updateStorage } from '../../components/Loading'; import { useCurrency, useFullscreen, useTranslation } from '../../hooks'; import { updateMetadata } from '../../messaging'; @@ -291,7 +291,12 @@ export default function AddNewChain (): React.ReactElement { {priceId && price !== undefined && {price - ? `${currency?.sign || ''}${nFormatter(price, 4)}` + ? : 'Check the price id, and try again!' } } diff --git a/packages/extension-polkagate/src/fullscreen/governance/AllReferendaStats.tsx b/packages/extension-polkagate/src/fullscreen/governance/AllReferendaStats.tsx index 5750718fb..36e7b53c1 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/AllReferendaStats.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/AllReferendaStats.tsx @@ -68,10 +68,11 @@ const TreasuryBalanceStat = ({ address, balance, noDivider, rowDisplay, style, t - + diff --git a/packages/extension-polkagate/src/fullscreen/governance/post/Description.tsx b/packages/extension-polkagate/src/fullscreen/governance/post/Description.tsx index bcac14285..343c763d2 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/post/Description.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/post/Description.tsx @@ -1,7 +1,6 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ import type { Proposal, Referendum } from '../utils/types'; @@ -15,9 +14,8 @@ import rehypeRaw from 'rehype-raw'; import { BN } from '@polkadot/util'; -import { Identity, ShowBalance, ShowValue } from '../../../components'; -import { nFormatter } from '../../../components/FormatPrice'; -import { useApi, useChain, useDecimal, useToken, useTokenPrice, useTranslation } from '../../../hooks'; +import { FormatPrice, Identity, ShowBalance, ShowValue } from '../../../components'; +import { useInfo, useTokenPrice, useTranslation } from '../../../hooks'; import useStyles from '../styles/styles'; import { LabelValue } from '../TrackStats'; import { STATUS_COLOR } from '../utils/consts'; @@ -35,10 +33,7 @@ const DEFAULT_CONTENT = 'This referendum does not have a description provided by export default function ReferendumDescription ({ address, currentTreasuryApprovalList, referendum }: Props): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); - const api = useApi(address); - const chain = useChain(address); - const decimal = useDecimal(address); - const token = useToken(address); + const { api, chain, decimal, token } = useInfo(address); const { price } = useTokenPrice(address); const style = useStyles(); @@ -149,9 +144,14 @@ export default function ReferendumDescription ({ address, currentTreasuryApprova valueStyle={{ fontSize: 16, fontWeight: 500, pl: '5px' }} /> - - - {`$${requestedInUSD ? nFormatter(requestedInUSD, 2) : '0'}`} + + + diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx index 01b58cdc2..d879b2567 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx @@ -10,14 +10,14 @@ import type { HexString } from '@polkadot/util/types'; import type { FetchedBalance } from '../../../hooks/useAssetsBalances'; import { ArrowForwardIos as ArrowForwardIosIcon, MoreVert as MoreVertIcon } from '@mui/icons-material'; -import { Box, Button, Divider, Grid, Skeleton, Typography, useTheme } from '@mui/material'; +import { Box, Button, Divider, Grid, Typography, useTheme } from '@mui/material'; import React, { useCallback, useContext, useMemo, useState } from 'react'; import { getValue } from '@polkadot/extension-polkagate/src/popup/account/util'; import { stars6Black, stars6White } from '../../../assets/icons'; import { ActionContext, Identicon, Identity, OptionalCopyButton, ShortAddress2 } from '../../../components'; -import { nFormatter } from '../../../components/FormatPrice'; +import FormatPrice from '../../../components/FormatPrice'; import { useCurrency, useIdentity, useInfo, usePrices, useTranslation } from '../../../hooks'; import { showAccount, tieAccount } from '../../../messaging'; import { amountToHuman } from '../../../util/utils'; @@ -65,7 +65,7 @@ const AccountButton = ({ icon, onClick, text }: AccountButtonType) => { ); }; -const AccountTotal = ({ currencySign, hideNumbers, totalBalance }: { currencySign: string | undefined, hideNumbers: boolean | undefined, totalBalance: number | undefined }) => { +const AccountTotal = ({ hideNumbers, totalBalance }: { hideNumbers: boolean | undefined, totalBalance: number | undefined }) => { const theme = useTheme(); const { t } = useTranslation(); @@ -78,11 +78,13 @@ const AccountTotal = ({ currencySign, hideNumbers, totalBalance }: { currencySig { hideNumbers || hideNumbers === undefined ? - : totalBalance !== undefined - ? - {`${currencySign ?? ''}${nFormatter(totalBalance ?? 0, 2)}`} - - : + : } @@ -192,7 +194,6 @@ function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChi diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx index d3759449d..40fa642ac 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx @@ -13,8 +13,8 @@ import { BN, BN_ZERO } from '@polkadot/util'; import { stars6Black, stars6White } from '../../../assets/icons'; import { AccountsAssetsContext, AssetLogo } from '../../../components'; -import { nFormatter } from '../../../components/FormatPrice'; -import { useCurrency, usePrices, useTranslation, useYouHave } from '../../../hooks'; +import FormatPrice from '../../../components/FormatPrice'; +import { usePrices, useTranslation, useYouHave } from '../../../hooks'; import { isPriceOutdated } from '../../../popup/home/YouHave'; import { DEFAULT_COLOR, TEST_NETS, TOKENS_WITH_BLACK_LOGO } from '../../../util/constants'; import getLogo2 from '../../../util/getLogo2'; @@ -55,7 +55,7 @@ export interface AssetsWithUiAndPrice { votingBalance?: BN } -export function adjustColor(token: string, color: string | undefined, theme: Theme): string { +export function adjustColor (token: string, color: string | undefined, theme: Theme): string { if (color && (TOKENS_WITH_BLACK_LOGO.find((t) => t === token) && theme.palette.mode === 'dark')) { const cleanedColor = color.replace(/^#/, ''); @@ -78,10 +78,40 @@ export function adjustColor(token: string, color: string | undefined, theme: The return color || DEFAULT_COLOR; } -function TotalBalancePieChart({ hideNumbers, setGroupedAssets }: Props): React.ReactElement { +const DisplayAssetRow = ({ asset, hideNumbers }: { asset: AssetsWithUiAndPrice, hideNumbers: boolean | undefined }) => { + const logoInfo = useMemo(() => asset && getLogo2(asset.genesisHash, asset.token), [asset]); + + return ( + + + + + {asset.token} + + + + + {hideNumbers || hideNumbers === undefined + ? '****' + : + } + + + + {hideNumbers || hideNumbers === undefined ? '****' : `${asset.percent}%`} + + + + ); +}; + +function TotalBalancePieChart ({ hideNumbers, setGroupedAssets }: Props): React.ReactElement { const theme = useTheme(); const { t } = useTranslation(); - const currency = useCurrency(); const pricesInCurrencies = usePrices(); const youHave = useYouHave(); @@ -89,7 +119,10 @@ function TotalBalancePieChart({ hideNumbers, setGroupedAssets }: Props): React.R const [showMore, setShowMore] = useState(false); - const calPrice = useCallback((assetPrice: number | undefined, balance: BN, decimal: number) => parseFloat(amountToHuman(balance, decimal)) * (assetPrice ?? 0), []); + const calPrice = useCallback((assetPrice: number | undefined, balance: BN, decimal: number) => + parseFloat(amountToHuman(balance, decimal)) * (assetPrice ?? 0), + []); + const formatNumber = useCallback( (num: number, decimal = 2) => parseFloat(Math.trunc(num) === 0 ? num.toFixed(decimal) : num.toFixed(1)) @@ -158,30 +191,6 @@ function TotalBalancePieChart({ hideNumbers, setGroupedAssets }: Props): React.R const toggleAssets = useCallback(() => setShowMore(!showMore), [showMore]); - const DisplayAssetRow = ({ asset }: { asset: AssetsWithUiAndPrice }) => { - const logoInfo = useMemo(() => asset && getLogo2(asset.genesisHash, asset.token), [asset]); - - return ( - - - - - {asset.token} - - - - - {hideNumbers || hideNumbers === undefined ? '****' : `${currency?.sign ?? ''}${nFormatter(asset.totalBalance ?? 0, 2)}`} - - - - {hideNumbers || hideNumbers === undefined ? '****' : `${asset.percent}%`} - - - - ); - }; - return ( @@ -194,9 +203,14 @@ function TotalBalancePieChart({ hideNumbers, setGroupedAssets }: Props): React.R src={(theme.palette.mode === 'dark' ? stars6White : stars6Black) as string} sx={{ height: '60px', width: '154px' }} /> - : - {`${currency?.sign ?? ''}${nFormatter(youHave?.portfolio ?? 0, 2)}`} - } + : + } {youHave?.portfolio !== 0 && assets && assets.length > 0 && @@ -205,6 +219,7 @@ function TotalBalancePieChart({ hideNumbers, setGroupedAssets }: Props): React.R {assets.slice(0, 3).map((asset, index) => ( ))} @@ -214,6 +229,7 @@ function TotalBalancePieChart({ hideNumbers, setGroupedAssets }: Props): React.R {assets.slice(3).map((asset, index) => ( ))} diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/WatchList.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/WatchList.tsx index 44ceb4123..00a0f1d88 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/WatchList.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/WatchList.tsx @@ -10,7 +10,7 @@ import { Collapse, Divider, Grid, Typography } from '@mui/material'; import React, { useCallback, useMemo, useState } from 'react'; import { AssetLogo } from '../../../components'; -import { nFormatter } from '../../../components/FormatPrice'; +import FormatPrice from '../../../components/FormatPrice'; import { useCurrency, usePrices, useTranslation } from '../../../hooks'; import getLogo2 from '../../../util/getLogo2'; @@ -18,44 +18,47 @@ interface Props { groupedAssets: AssetsWithUiAndPrice[] | undefined } -function WatchList({ groupedAssets }: Props): React.ReactElement { - const { t } = useTranslation(); +const AssetPriceChange = ({ asset }: { asset: AssetsWithUiAndPrice }) => { const currency = useCurrency(); const pricesInCurrencies = usePrices(); - const [showMore, setShowMore] = useState(false); - - const toggleAssets = useCallback(() => setShowMore(!showMore), [showMore]); + const logoInfo = useMemo(() => asset && getLogo2(asset.genesisHash, asset.token), [asset]); + const change = pricesInCurrencies ? pricesInCurrencies.prices[asset.priceId]?.change : 0; - const DisplayAssetRow = ({ asset }: { asset: AssetsWithUiAndPrice }) => { - const logoInfo = useMemo(() => asset && getLogo2(asset.genesisHash, asset.token), [asset]); - const change = pricesInCurrencies ? pricesInCurrencies.prices[asset.priceId]?.change : 0; - - return ( - - - - - {asset.token} - {currency?.code} - - - - - {`${currency?.sign ?? ''}${nFormatter(asset.price ?? 0, asset.price > 1 ? 2 : 4)}`} - - - {change > 0 - ? - : - } - - {`${(change ?? 0).toFixed(2)}%`} - - + return ( + + + + + {asset.token} - {currency?.code} + - ); - }; + + 1 ? 2 : 4} + fontSize='16px' + fontWeight={600} + num={asset.price} + /> + + {change > 0 + ? + : + } + + {`${(change ?? 0).toFixed(2)}%`} + + + + ); +}; + +function WatchList ({ groupedAssets }: Props): React.ReactElement { + const { t } = useTranslation(); + + const [showMore, setShowMore] = useState(false); + const toggleAssets = useCallback(() => setShowMore(!showMore), [showMore]); const uniqueAssets = useMemo(() => { const seenTokens = new Set(); @@ -75,7 +78,7 @@ function WatchList({ groupedAssets }: Props): React.ReactElement { {uniqueAssets && uniqueAssets.length > 0 && {uniqueAssets.slice(0, 3).map((asset, index) => ( - @@ -84,7 +87,7 @@ function WatchList({ groupedAssets }: Props): React.ReactElement { .MuiCollapse-wrapper .MuiCollapse-wrapperInner': { display: 'grid', rowGap: '10px' }, width: '100%' }}> {uniqueAssets.slice(3).map((asset, index) => ( - diff --git a/packages/extension-polkagate/src/fullscreen/stake/partials/DisplayBalance.tsx b/packages/extension-polkagate/src/fullscreen/stake/partials/DisplayBalance.tsx index 03f11dac3..0b9b4fd07 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/partials/DisplayBalance.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/partials/DisplayBalance.tsx @@ -107,14 +107,14 @@ export default function DisplayBalance ({ actions, address, amount, icons, isUns /> - div span': { display: 'block' }, fontSize: '22px', fontWeight: 400 }}> - - + {isUnstaking && diff --git a/packages/extension-polkagate/src/popup/account/LabelBalancePrice.tsx b/packages/extension-polkagate/src/popup/account/LabelBalancePrice.tsx index a3ed7c227..5217c251d 100644 --- a/packages/extension-polkagate/src/popup/account/LabelBalancePrice.tsx +++ b/packages/extension-polkagate/src/popup/account/LabelBalancePrice.tsx @@ -55,10 +55,12 @@ export default function LabelBalancePrice ({ address, balances, label, onClick, withCurrency={false} /> - + diff --git a/packages/extension-polkagate/src/popup/account/ReservedReasons.tsx b/packages/extension-polkagate/src/popup/account/ReservedReasons.tsx index 4714a1a41..4bdbd5c96 100644 --- a/packages/extension-polkagate/src/popup/account/ReservedReasons.tsx +++ b/packages/extension-polkagate/src/popup/account/ReservedReasons.tsx @@ -95,10 +95,12 @@ export default function ReservedReasons ({ address, assetId, identity, setShow, balance={value} /> - + diff --git a/packages/extension-polkagate/src/popup/home/AccountDetail.tsx b/packages/extension-polkagate/src/popup/home/AccountDetail.tsx index e83a8041a..e991729f1 100644 --- a/packages/extension-polkagate/src/popup/home/AccountDetail.tsx +++ b/packages/extension-polkagate/src/popup/home/AccountDetail.tsx @@ -49,26 +49,10 @@ const EyeButton = ({ isHidden, toggleVisibility }: EyeProps) => { ); }; -export default function AccountDetail ({ address, chain, goToAccount, hideNumbers, identity, isHidden, menuOnClick, name, toggleVisibility }: Props): React.ReactElement { +const NoChainAlert = ({ chain, menuOnClick }: {chain: Chain | null | undefined, menuOnClick: () => void}) => { const { t } = useTranslation(); - const theme = useTheme(); - const balances = useBalances(address); - const chainName = useChainName(address); - const { price, priceChainName, priceDate } = useTokenPrice(address); - - const isBalanceOutdated = useMemo(() => balances && Date.now() - balances.date > BALANCES_VALIDITY_PERIOD, [balances]); - const isPriceOutdated = useMemo(() => priceDate !== undefined && Date.now() - priceDate > BALANCES_VALIDITY_PERIOD, [priceDate]); - const [balanceToShow, setBalanceToShow] = useState(); - - useEffect(() => { - if (balances?.chainName === chainName) { - return setBalanceToShow(balances); - } - setBalanceToShow(undefined); - }, [balances, chainName]); - - const NoChainAlert = () => ( + return ( <> {chain === null ? @@ -81,8 +65,28 @@ export default function AccountDetail ({ address, chain, goToAccount, hideNumber } ); +}; + +const Price = ({ balanceToShow, isPriceOutdated, price, priceChainName }: { isPriceOutdated: boolean, price: number | undefined, priceChainName: string | undefined, balanceToShow: BalancesInfo | undefined}) => { + return ( + <> + {priceChainName === undefined || !balanceToShow || balanceToShow?.chainName?.toLowerCase() !== priceChainName + ? + : + } + + ); +}; - const Balance = () => ( +const Balance = ({ balanceToShow, isBalanceOutdated }: { balanceToShow: BalancesInfo | undefined, isBalanceOutdated: boolean | undefined}) => { + return ( <> {balanceToShow?.decimal ? @@ -97,23 +101,29 @@ export default function AccountDetail ({ address, chain, goToAccount, hideNumber } ); +}; - const Price = () => ( - <> - {priceChainName === undefined || !balanceToShow || balanceToShow?.chainName?.toLowerCase() !== priceChainName - ? - : - - - } - - ); +const BalanceRow = ({ address, hideNumbers }: { address: string, hideNumbers: boolean | undefined}) => { + const theme = useTheme(); + + const balances = useBalances(address); + const chainName = useChainName(address); + + const { price, priceChainName, priceDate } = useTokenPrice(address); + const isPriceOutdated = useMemo(() => priceDate !== undefined && Date.now() - priceDate > BALANCES_VALIDITY_PERIOD, [priceDate]); + const isBalanceOutdated = useMemo(() => balances && Date.now() - balances.date > BALANCES_VALIDITY_PERIOD, [balances]); + + const [balanceToShow, setBalanceToShow] = useState(); + + useEffect(() => { + if (balances?.chainName === chainName) { + return setBalanceToShow(balances); + } + + setBalanceToShow(undefined); + }, [balances, chainName]); - const BalanceRow = () => ( + return ( {hideNumbers || hideNumbers === undefined ? - : + : } {hideNumbers @@ -130,10 +143,22 @@ export default function AccountDetail ({ address, chain, goToAccount, hideNumber src={(theme.palette.mode === 'dark' ? stars5White : stars5Black) as string} sx={{ height: '27px', width: '77px' }} /> - : + : } ); +}; + +function AccountDetail ({ address, chain, goToAccount, hideNumbers, identity, isHidden, menuOnClick, name, toggleVisibility }: Props): React.ReactElement { + const { t } = useTranslation(); + const chainName = useChainName(address); + + console.log('mmmmmmmm'); return ( @@ -155,13 +180,21 @@ export default function AccountDetail ({ address, chain, goToAccount, hideNumber {!chain - ? + ? : - + } ); } + +export default React.memo(AccountDetail); diff --git a/packages/extension-polkagate/src/popup/home/YouHave.tsx b/packages/extension-polkagate/src/popup/home/YouHave.tsx index 7435ac4e8..518586d09 100644 --- a/packages/extension-polkagate/src/popup/home/YouHave.tsx +++ b/packages/extension-polkagate/src/popup/home/YouHave.tsx @@ -5,7 +5,7 @@ import type { YouHaveType } from '../../hooks/useYouHave'; -import { Box, Grid, Skeleton, Typography, useTheme } from '@mui/material'; +import { Box, Grid, Typography, useTheme } from '@mui/material'; import React, { useCallback, useEffect } from 'react'; import { stars6Black, stars6White } from '../../assets/icons'; @@ -55,12 +55,15 @@ export default function YouHave ({ hideNumbers, setHideNumbers }: Props): React. sx={{ height: '36px', width: '154px' }} /> : - - {youHave === undefined - ? - : - } - + }