fix: small ux fixes on assets page (#2751)

novasamatech · Nov 28, 2024 · 41151a4 · 41151a4
1 parent b3f1edf
commit 41151a4
Show file tree

Hide file tree

Showing 20 changed files with 87 additions and 61 deletions.
diff --git a/src/renderer/entities/asset/ui/AssetDetails/AssetDetails.tsx b/src/renderer/entities/asset/ui/AssetDetails/AssetDetails.tsx
@@ -1,5 +1,6 @@
 import { type BN } from '@polkadot/util';
 import { BigNumber } from 'bignumber.js';
+import { memo } from 'react';
 
 import { type Asset } from '@/shared/core';
 import { HelpText, Shimmering } from '@/shared/ui';
@@ -12,7 +13,7 @@ type Props = {
   value?: BN;
 };
 
-export const AssetDetails = ({ asset, value, label }: Props) => {
+export const AssetDetails = memo(({ asset, value, label }: Props) => {
   return (
     <div className="flex flex-1 flex-col gap-y-0.5 pl-4">
       <HelpText as="dt" className="text-text-tertiary">
@@ -28,4 +29,4 @@ export const AssetDetails = ({ asset, value, label }: Props) => {
       </dd>
     </div>
   );
-};
+});
diff --git a/src/renderer/entities/asset/ui/AssetLinks/AssetLinks.tsx b/src/renderer/entities/asset/ui/AssetLinks/AssetLinks.tsx
@@ -1,4 +1,5 @@
 import { useUnit } from 'effector-react';
+import { memo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { type ChainId } from '@/shared/core';
@@ -11,7 +12,7 @@ type Props = {
   chainId: ChainId;
 };
 
-export const AssetLinks = ({ assetId, chainId }: Props) => {
+export const AssetLinks = memo(({ assetId, chainId }: Props) => {
   const activeWallet = useUnit(walletModel.$activeWallet);
 
   return (
@@ -34,4 +35,4 @@ export const AssetLinks = ({ assetId, chainId }: Props) => {
       </CheckPermission>
     </div>
   );
-};
+});
diff --git a/src/renderer/entities/balance/lib/constants.ts b/src/renderer/entities/balance/lib/constants.ts
@@ -1,2 +1,2 @@
 export const SAVE_TIMEOUT = 5000;
-export const BUFFER_DELAY = 500;
+export const BUFFER_DELAY = 1000;
diff --git a/src/renderer/entities/chain/ui/ChainIcon/ChainIcon.tsx b/src/renderer/entities/chain/ui/ChainIcon/ChainIcon.tsx
@@ -1,3 +1,5 @@
+import { memo } from 'react';
+
 import { useToggle } from '@/shared/lib/hooks';
 import { cnTw } from '@/shared/lib/utils';
 import { Shimmering } from '@/shared/ui';
@@ -9,7 +11,7 @@ type Props = {
   className?: string;
 };
 
-export const ChainIcon = ({ src, name, size = 16, className }: Props) => {
+export const ChainIcon = memo(({ src, name, size = 16, className }: Props) => {
   const [isImgLoaded, toggleImgLoaded] = useToggle();
 
   return (
@@ -25,4 +27,4 @@ export const ChainIcon = ({ src, name, size = 16, className }: Props) => {
       />
     </>
   );
-};
+});
diff --git a/src/renderer/entities/price/ui/AssetFiatBalance.tsx b/src/renderer/entities/price/ui/AssetFiatBalance.tsx
@@ -1,5 +1,6 @@
 import { default as BigNumber } from 'bignumber.js';
 import { useUnit } from 'effector-react';
+import { memo } from 'react';
 
 import { type Asset, type AssetByChains } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
@@ -16,7 +17,7 @@ type Props = {
   className?: string;
 };
 
-export const AssetFiatBalance = ({ asset, amount, className }: Props) => {
+export const AssetFiatBalance = memo(({ asset, amount, className }: Props) => {
   const { t } = useI18n();
 
   const currency = useUnit(currencyModel.$activeCurrency);
@@ -50,4 +51,4 @@ export const AssetFiatBalance = ({ asset, amount, className }: Props) => {
   });
 
   return <FiatBalance amount={`${balanceValue}${suffix}`} className={className} />;
-};
+});
diff --git a/src/renderer/entities/price/ui/TokenPrice.tsx b/src/renderer/entities/price/ui/TokenPrice.tsx
@@ -1,4 +1,5 @@
 import { useStoreMap, useUnit } from 'effector-react';
+import { memo } from 'react';
 
 import { useI18n } from '@/shared/i18n';
 import { ZERO_BALANCE, cnTw, formatFiatBalance } from '@/shared/lib/utils';
@@ -14,7 +15,7 @@ type Props = {
   wrapperClassName?: string;
 };
 
-export const TokenPrice = ({ assetId, className, wrapperClassName }: Props) => {
+export const TokenPrice = memo(({ assetId, className, wrapperClassName }: Props) => {
   const { t } = useI18n();
   const currency = useUnit(currencyModel.$activeCurrency);
   const price = useStoreMap(priceProviderModel.$assetsPrices, (prices) => {
@@ -58,4 +59,4 @@ export const TokenPrice = ({ assetId, className, wrapperClassName }: Props) => {
       {Boolean(price.change) && <FootnoteText className={changeStyle}>{changeToShow}%</FootnoteText>}
     </div>
   );
-};
+});
diff --git a/src/renderer/features/assets/AssetsChainView/ui/AssetCard/AssetCard.tsx b/src/renderer/features/assets/AssetsChainView/ui/AssetCard/AssetCard.tsx
@@ -1,5 +1,5 @@
 import { useUnit } from 'effector-react';
-import { type KeyboardEvent } from 'react';
+import { type KeyboardEvent, memo, useMemo } from 'react';
 
 import { type Asset, type Balance, type ChainId } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
@@ -15,7 +15,7 @@ type Props = {
   balance?: Balance;
 };
 
-export const AssetCard = ({ chainId, asset, balance }: Props) => {
+export const AssetCard = memo(({ chainId, asset, balance }: Props) => {
   const { t } = useI18n();
 
   const fiatFlag = useUnit(priceProviderModel.$fiatFlag);
@@ -30,7 +30,8 @@ export const AssetCard = ({ chainId, asset, balance }: Props) => {
     }
   };
 
-  const transferableBalance = balance ? transferableAmountBN(balance) : undefined;
+  const transferableBalance = useMemo(() => (balance ? transferableAmountBN(balance) : undefined), [balance]);
+  const totalBalance = useMemo(() => totalAmount(balance), [balance]);
 
   // TODO: move <li> in parent beneath <ul>
   return (
@@ -56,8 +57,8 @@ export const AssetCard = ({ chainId, asset, balance }: Props) => {
         <div className="flex flex-col items-end">
           {balance?.free ? (
             <>
-              <AssetBalance value={totalAmount(balance)} asset={asset} />
-              <AssetFiatBalance amount={totalAmount(balance)} asset={asset} />
+              <AssetBalance value={totalBalance} asset={asset} />
+              <AssetFiatBalance amount={totalBalance} asset={asset} />
             </>
           ) : (
             <div className="flex flex-col items-end gap-y-1">
@@ -78,4 +79,4 @@ export const AssetCard = ({ chainId, asset, balance }: Props) => {
       )}
     </li>
   );
-};
+});
diff --git a/src/renderer/features/assets/AssetsChainView/ui/AssetsChainView.tsx b/src/renderer/features/assets/AssetsChainView/ui/AssetsChainView.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 
 import { chainsService } from '@/shared/api/network';
 import { type Account, type Chain } from '@/shared/core';
+import { useDeferredList } from '@/shared/lib/hooks';
 import { isStringsMatchQuery, nullable } from '@/shared/lib/utils';
 import { AssetsListView, EmptyAssetsState } from '@/entities/asset';
 import { balanceModel } from '@/entities/balance';
@@ -30,6 +31,8 @@ export const AssetsChainView = ({ query, activeShards, hideZeroBalances, assetsV
 
   const [sortedChains, setSortedChains] = useState<Chain[]>([]);
 
+  const { list } = useDeferredList({ list: sortedChains });
+
   useEffect(() => {
     if (!activeWallet || assetsView !== AssetsListView.CHAIN_CENTRIC || !activeShards.length) return;
 
@@ -75,8 +78,8 @@ export const AssetsChainView = ({ query, activeShards, hideZeroBalances, assetsV
 
   return (
     <div className="flex h-full w-full flex-col gap-y-4 overflow-y-scroll">
-      <ul className="flex w-full flex-col items-center gap-y-4 py-4">
-        {sortedChains.map((chain) => (
+      <ul className="flex min-h-full w-full flex-col items-center gap-y-4 py-4">
+        {list.map((chain) => (
           <NetworkAssets
             key={chain.chainId}
             searchSymbolOnly={searchSymbolOnly}

diff --git a/src/renderer/features/assets/AssetsChainView/ui/NetworkAssets/NetworkAssets.tsx b/src/renderer/features/assets/AssetsChainView/ui/NetworkAssets/NetworkAssets.tsx
@@ -1,6 +1,6 @@
 import { useUnit } from 'effector-react';
 import groupBy from 'lodash/groupBy';
-import { useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 
 import { sumBalances } from '@/shared/api/network/service/chainsService';
 import { type Account, type AccountId, type Asset, type Balance, type Chain } from '@/shared/core';
@@ -24,7 +24,7 @@ type Props = {
   hideZeroBalances: boolean;
 };
 
-export const NetworkAssets = ({ chain, accounts, query, hideZeroBalances, searchSymbolOnly }: Props) => {
+export const NetworkAssets = memo(({ chain, accounts, query, hideZeroBalances, searchSymbolOnly }: Props) => {
   const { t } = useI18n();
 
   const assetsPrices = useUnit(priceProviderModel.$assetsPrices);
@@ -47,9 +47,12 @@ export const NetworkAssets = ({ chain, accounts, query, hideZeroBalances, search
     }, []);
   }, [chain.chainId, selectedAccountIds]);
 
-  useEffect(() => {
-    const chainBalances = balances.filter((b) => b.chainId === chain.chainId && accountIds.includes(b.accountId));
+  const chainBalances = useMemo(
+    () => balances.filter((b) => b.chainId === chain.chainId && accountIds.includes(b.accountId)),
+    [balances, chain, accountIds],
+  );
 
+  useEffect(() => {
     const newBalancesObject: Record<string, Balance> = {};
     const groupedBalances = Object.values(groupBy(chainBalances, 'assetId'));
 
@@ -64,7 +67,7 @@ export const NetworkAssets = ({ chain, accounts, query, hideZeroBalances, search
     }
 
     setBalancesObject(newBalancesObject);
-  }, [balances, accountIds.join('')]);
+  }, [chainBalances, accountIds.join('')]);
 
   useEffect(() => {
     const filteredAssets = chain.assets.filter((asset) => {
@@ -135,4 +138,4 @@ export const NetworkAssets = ({ chain, accounts, query, hideZeroBalances, search
       </Accordion>
     </li>
   );
-};
+});
diff --git a/src/renderer/features/assets/AssetsPortfolioView/ui/AssetsPortfolioView.tsx b/src/renderer/features/assets/AssetsPortfolioView/ui/AssetsPortfolioView.tsx
@@ -2,6 +2,7 @@ import { useUnit } from 'effector-react';
 
 import { type Wallet, WalletType } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
+import { useDeferredList } from '@/shared/lib/hooks';
 import { FootnoteText } from '@/shared/ui';
 import { AssetsListView, EmptyAssetsState } from '@/entities/asset';
 import { priceProviderModel } from '@/entities/price';
@@ -32,14 +33,16 @@ export const AssetsPortfolioView = () => {
   const fiatFlag = useUnit(priceProviderModel.$fiatFlag);
   const wallet = useUnit(walletModel.$activeWallet);
 
+  const { list } = useDeferredList({ list: sortedTokens });
+
   if (activeView !== AssetsListView.TOKEN_CENTRIC || accounts.length === 0) {
     return null;
   }
 
   const colStyle = getColStyle(wallet);
 
   return (
-    <div className="flex w-full flex-col items-center gap-y-2 py-4">
+    <div className="flex min-h-full w-full flex-col items-center gap-y-2 py-4">
       <div className={`grid w-[548px] items-center pl-[35px] pr-4 ${colStyle}`}>
         <FootnoteText className="text-text-tertiary">{t('balances.token')}</FootnoteText>
         <FootnoteText className="text-text-tertiary" align="right">
@@ -50,8 +53,8 @@ export const AssetsPortfolioView = () => {
         </FootnoteText>
       </div>
 
-      <ul className="flex w-full flex-col items-center gap-y-4">
-        {sortedTokens.map((asset) => (
+      <ul className="flex min-h-full w-full flex-col items-center gap-y-4">
+        {list.map((asset) => (
           <li key={`${asset.priceId || ''}${asset.symbol}`} className="w-[548px]">
             {asset.chains.length === 1 ? <TokenBalance asset={asset} /> : <TokenBalanceList asset={asset} />}
           </li>

diff --git a/src/renderer/features/assets/AssetsPortfolioView/ui/NetworkCard.tsx b/src/renderer/features/assets/AssetsPortfolioView/ui/NetworkCard.tsx
@@ -1,4 +1,5 @@
 import { useUnit } from 'effector-react';
+import { memo } from 'react';
 
 import { type AssetByChains } from '@/shared/core';
 import { BodyText, FootnoteText } from '@/shared/ui';
@@ -14,7 +15,7 @@ type Props = {
   asset: AssetByChains;
 };
 
-export const NetworkCard = ({ chain, asset }: Props) => {
+export const NetworkCard = memo(({ chain, asset }: Props) => {
   const chains = useUnit(networkModel.$chains);
 
   return (
@@ -34,4 +35,4 @@ export const NetworkCard = ({ chain, asset }: Props) => {
       </div>
     </li>
   );
-};
+});
diff --git a/src/renderer/features/assets/AssetsPortfolioView/ui/TokenBalance.tsx b/src/renderer/features/assets/AssetsPortfolioView/ui/TokenBalance.tsx
@@ -1,4 +1,5 @@
 import { useUnit } from 'effector-react';
+import { memo } from 'react';
 
 import { type AssetByChains } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
@@ -14,7 +15,7 @@ type Props = {
   asset: AssetByChains;
 };
 
-export const TokenBalance = ({ asset }: Props) => {
+export const TokenBalance = memo(({ asset }: Props) => {
   const { t } = useI18n();
   const chain = asset.chains[0];
 
@@ -53,4 +54,4 @@ export const TokenBalance = ({ asset }: Props) => {
       <AssetLinks assetId={asset.chains[0].assetId} chainId={chain.chainId} />
     </Plate>
   );
-};
+});
diff --git a/src/renderer/features/assets/AssetsPortfolioView/ui/TokenBalanceList.tsx b/src/renderer/features/assets/AssetsPortfolioView/ui/TokenBalanceList.tsx
@@ -1,4 +1,5 @@
 import { useUnit } from 'effector-react';
+import { memo } from 'react';
 
 import { type AssetByChains } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
@@ -20,7 +21,7 @@ type Props = {
   asset: AssetByChains;
 };
 
-export const TokenBalanceList = ({ asset }: Props) => {
+export const TokenBalanceList = memo(({ asset }: Props) => {
   const { t } = useI18n();
 
   const activeWallet = useUnit(walletModel.$activeWallet);
@@ -112,4 +113,4 @@ export const TokenBalanceList = ({ asset }: Props) => {
       </Accordion>
     </Plate>
   );
-};
+});
diff --git a/src/renderer/features/assets/AssetsSearch/ui/AssetsSearch.tsx b/src/renderer/features/assets/AssetsSearch/ui/AssetsSearch.tsx
@@ -13,7 +13,7 @@ export const AssetsSearch = () => {
     <SearchInput
       value={query}
       placeholder={t('balances.searchPlaceholder')}
-      className="w-[230px]"
+      wrapperClass="w-[280px]"
       onChange={assetsSearchModel.events.queryChanged}
     />
   );

diff --git a/src/renderer/features/assets/AssetsSettings/ui/AssetsSettings.tsx b/src/renderer/features/assets/AssetsSettings/ui/AssetsSettings.tsx
@@ -1,12 +1,14 @@
 import { useUnit } from 'effector-react';
+import { memo } from 'react';
 
 import { TEST_IDS } from '@/shared/constants';
 import { useI18n } from '@/shared/i18n';
-import { FootnoteText, IconButton, MenuPopover, Select, Switch } from '@/shared/ui';
+import { FootnoteText, IconButton, Select, Switch } from '@/shared/ui';
+import { Box, Popover } from '@/shared/ui-kit';
 import { AssetsListView } from '@/entities/asset';
 import { assetsSettingsModel } from '../model/assets-settings-modal';
 
-export const AssetsSettings = () => {
+export const AssetsSettings = memo(() => {
   const { t } = useI18n();
 
   const assetsView = useUnit(assetsSettingsModel.$assetsView);
@@ -26,14 +28,17 @@ export const AssetsSettings = () => {
   ];
 
   return (
-    <MenuPopover
-      className="w-[182px] px-4"
-      position="top-full right-0"
-      buttonClassName="rounded-full"
-      offsetPx={0}
-      testId={TEST_IDS.ASSETS.SETTINGS_WIDGET}
-      content={
-        <>
+    <Popover testId={TEST_IDS.ASSETS.SETTINGS_WIDGET} align="end">
+      <Popover.Trigger>
+        <div className="relative">
+          <IconButton name="settingsLite" className="p-1.5" />
+          {hideZeroBalances && (
+            <span className="absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-icon-accent duration-100 animate-in fade-in" />
+          )}
+        </div>
+      </Popover.Trigger>
+      <Popover.Content>
+        <Box width="182px" padding={4}>
           <Switch
             checked={hideZeroBalances}
             labelPosition="right"
@@ -50,13 +55,8 @@ export const AssetsSettings = () => {
             options={options}
             onChange={({ value }) => assetsSettingsModel.events.assetsViewChanged(value)}
           />
-        </>
-      }
-    >
-      <div className="relative">
-        <IconButton name="settingsLite" className="p-1.5" />
-        {hideZeroBalances && <span className="absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-icon-accent" />}
-      </div>
-    </MenuPopover>
+        </Box>
+      </Popover.Content>
+    </Popover>
   );
-};
+});