Skip to content

Commit

Permalink
style: add count up
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nick-1979
Nick-1979 committed Nov 11, 2024
1 parent 97e08f9 commit d4eaf82
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 24 deletions.
5 changes: 2 additions & 3 deletions ...nsion-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ interface BalanceRowJSXType {
}

const BalanceRow = ({ balanceToShow, isBalanceOutdated, isPriceOutdated, price }: BalanceRowJSXType) => (
<Grid alignItems='center' container fontSize='28px' item xs>
<Grid alignItems='center' container fontSize='26px' item xs>
<Balance balanceToShow={balanceToShow} isBalanceOutdated={isBalanceOutdated} />
<Divider orientation='vertical' sx={{ backgroundColor: 'divider', height: '30px', mx: '10px', my: 'auto' }} />
<Price balanceToShow={balanceToShow} isPriceOutdated={isPriceOutdated} price={price} />
Expand Down Expand Up @@ -106,7 +106,7 @@ const SelectedAssetBox = ({ balanceToShow, genesisHash, isBalanceOutdated, isPri
<Grid item pl='7px'>
<AssetLogo assetSize='42px' baseTokenSize='20px' genesisHash={balanceToShow?.genesisHash} logo={logoInfo?.logo} subLogo={logoInfo?.subLogo} />
</Grid>
<Grid item sx={{ fontSize: '28px', ml: '5px' }}>
<Grid item sx={{ ml: '5px' }}>
<BalanceRow balanceToShow={balanceToShow} isBalanceOutdated={isBalanceOutdated} isPriceOutdated={isPriceOutdated} price={price} />
</Grid>
</>
Expand Down Expand Up @@ -152,7 +152,6 @@ function AccountInformationForDetails ({ accountAssets, address, label, price, p
const theme = useTheme();
const { account, chain, genesisHash, token } = useInfo(address);


const calculatePrice = useCallback((amount: BN, decimal: number, _price: number) => {
return parseFloat(amountToHuman(amount, decimal)) * _price;
}, []);
Expand Down
47 changes: 33 additions & 14 deletions packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type { Prices } from '../../../util/types';
import { Divider, Grid, Typography, useTheme } from '@mui/material';
import { Chart, registerables } from 'chart.js';
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import CountUp from 'react-countup';

import { AssetLogo } from '../../../components';
import FormatPrice from '../../../components/FormatPrice';
Expand All @@ -18,8 +19,8 @@ import { calcChange, calcPrice } from '../../../hooks/useYouHave';
import { COIN_GECKO_PRICE_CHANGE_DURATION } from '../../../util/api/getPrices';
import { DEFAULT_COLOR } from '../../../util/constants';
import getLogo2 from '../../../util/getLogo2';
import { fixFloatingPoint } from '../../../util/utils';
import { adjustColor } from '../../homeFullScreen/partials/TotalBalancePieChart';
import { countDecimalPlaces, fixFloatingPoint } from '../../../util/utils';
import { adjustColor, changeSign, PORTFOLIO_CHANGE_DECIMAL } from '../../homeFullScreen/partials/TotalBalancePieChart';

interface Props {
accountAssets: FetchedBalance[] | null | undefined;
Expand Down Expand Up @@ -77,7 +78,7 @@ export default function TotalChart ({ accountAssets, pricesInCurrency }: Props):
return { assets: nonZeroAssets, totalChange, totalWorth: total };
}

return { assets: undefined, totalChange: undefined, totalWorth: undefined };
return { assets: undefined, totalChange: 0, totalWorth: undefined };
}, [accountAssets, changePriceOf, formatNumber, priceOf, theme]);

useEffect(() => {
Expand Down Expand Up @@ -118,24 +119,42 @@ export default function TotalChart ({ accountAssets, pricesInCurrency }: Props):
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [assets?.length, theme.palette.divider]);

const accountBalanceTotalChange = useMemo(() => {
if (!totalChange) {
return 0;
}

const value = fixFloatingPoint(totalChange, PORTFOLIO_CHANGE_DECIMAL, false, true);

return parseFloat(value);
}, [totalChange]);

return (
<Grid alignItems='center' container direction='column' item justifyContent='center' sx={{ bgcolor: 'background.paper', borderRadius: '5px', boxShadow: '2px 3px 4px 0px rgba(0, 0, 0, 0.1)', p: '10px 15px', width: 'inherit' }}>
<Grid alignItems='flex-start' container item justifyContent='flex-start'>
<Typography sx={{ fontSize: '23px', fontVariant: 'small-caps', fontWeight: 400 }}>
{t('Total')}
</Typography>
<Grid alignItems='center' container item justifyContent='space-between' sx={{ my: '10px' }}>
<Grid alignItems='flex-start' container item justifyContent='space-between' mb='10px'>
<Grid alignItems='center' item>
<Typography sx={{ fontSize: '22px', fontVariant: 'small-caps', fontWeight: 400 }}>
{t('Total')}
</Typography>
</Grid>
<Grid alignItems='center' item justifyItems='flex-end'>
<FormatPrice
commify
fontSize='30px'
fontSize='28px'
fontWeight={600}
num={totalWorth}
skeletonHeight={22}
withCountUp
/>
{totalChange !== undefined &&
<Typography sx={{ color: totalChange >= 0 ? 'success.main' : 'warning.main', fontSize: '18px', fontWeight: 500 }}>
{totalChange >= 0 ? '+ ' : '- '}{currency?.sign}{fixFloatingPoint(totalChange, 2, true, true)} {`(${COIN_GECKO_PRICE_CHANGE_DURATION}h)`}
</Typography>}
<Typography sx={{ color: !totalChange ? 'secondary.contrastText' : totalChange > 0 ? 'success.main' : 'warning.main', fontSize: '16px', fontWeight: 500 }}>
<CountUp
decimals={countDecimalPlaces(accountBalanceTotalChange) || PORTFOLIO_CHANGE_DECIMAL}
duration={1}
end={accountBalanceTotalChange}
prefix={`${changeSign(totalChange)}${currency?.sign}`}
suffix={`(${COIN_GECKO_PRICE_CHANGE_DURATION}h)`}
/>
</Typography>
</Grid>
</Grid>
{assets && assets.length > 0 &&
Expand Down Expand Up @@ -166,6 +185,6 @@ export default function TotalChart ({ accountAssets, pricesInCurrency }: Props):
</Grid>
</Grid>
}
</Grid >
</Grid>
);
}
16 changes: 9 additions & 7 deletions packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,12 @@ export interface AssetsWithUiAndPrice {
votingBalance?: BN
}

export const PORTFOLIO_CHANGE_DECIMAL = 2;

export const changeSign = (change: number | undefined) => !change
? ''
: change > 0 ? '+ ' : '- ';

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(/^#/, '');
Expand Down Expand Up @@ -197,15 +203,11 @@ function TotalBalancePieChart ({ hideNumbers, setGroupedAssets }: Props): React.
return 0;
}

const value = fixFloatingPoint(youHave.change, 2, false, true);
const value = fixFloatingPoint(youHave.change, PORTFOLIO_CHANGE_DECIMAL, false, true);

return parseFloat(value);
}, [youHave?.change]);

const changeSign = !youHave?.change
? ''
: youHave.change > 0 ? '+ ' : '- ';

return (
<Grid alignItems='flex-start' container direction='column' item justifyContent='flex-start' sx={{ bgcolor: 'background.paper', borderRadius: '5px', boxShadow: '2px 3px 4px 0px rgba(0, 0, 0, 0.1)', height: 'fit-content', p: '15px 25px 10px', width: '430px' }}>
<Grid alignItems='flex-start' container item justifyContent='flex-start'>
Expand All @@ -230,10 +232,10 @@ function TotalBalancePieChart ({ hideNumbers, setGroupedAssets }: Props): React.
/>
<Typography sx={{ color: !youHave.change ? 'secondary.contrastText' : youHave.change > 0 ? 'success.main' : 'warning.main', fontSize: '18px', fontWeight: 500 }}>
<CountUp
decimals={countDecimalPlaces(portfolioChange) || 2}
decimals={countDecimalPlaces(portfolioChange) || PORTFOLIO_CHANGE_DECIMAL}
duration={1}
end={portfolioChange}
prefix={`${changeSign}${currency?.sign}`}
prefix={`${changeSign(youHave?.change)}${currency?.sign}`}
suffix={`(${COIN_GECKO_PRICE_CHANGE_DURATION}h)`}
/>
</Typography>
Expand Down

0 comments on commit d4eaf82

Please sign in to comment.