fix: correct counter on chains list shorthand (#2795)

src/renderer/features/assets/AssetsPortfolioView/ui/ChainsList.tsx

@@ -1,27 +1,46 @@
-import { memo } from 'react';
+import { type ReactNode, memo } from 'react';
 
 import { type AssetByChains, type Chain } from '@/shared/core';
+import { nullable } from '@/shared/lib/utils';
 import { HelpText } from '@/shared/ui';
 import { ChainIcon } from '@/entities/chain';
 
 const MAX_VISIBLE_CHAINS = 3;
+const MAX_VISIBLE_CHAINS_WHEN_COLLAPSED = 2;
 
 type Props = {
   assetChains: AssetByChains['chains'];
   chains: Record<`0x${string}`, Chain>;
 };
 
 export const ChainsList = memo(({ assetChains, chains }: Props) => {
-  const visibleChains = assetChains.length === MAX_VISIBLE_CHAINS ? MAX_VISIBLE_CHAINS : MAX_VISIBLE_CHAINS - 1;
+  const shouldRenderCounter = assetChains.length > MAX_VISIBLE_CHAINS;
+  const visibleChains = shouldRenderCounter ? MAX_VISIBLE_CHAINS_WHEN_COLLAPSED : assetChains.length;
+  const counter = assetChains.length - MAX_VISIBLE_CHAINS_WHEN_COLLAPSED;
+
+  // Since this component renders inside large loop it's better to optimize it as hard as we can.
+  // This optimization can be omited after refactoring of AssetByChains struct.
+  const chainNodes: ReactNode[] = new Array(visibleChains);
+
+  for (let index = 0; index < visibleChains; index++) {
+    const chain = assetChains[index];
+    if (nullable(chain)) continue;
+    chainNodes[index] = (
+      <ChainIcon
+        key={`${chain.chainId}-${chain.assetSymbol}`}
+        src={chains[chain.chainId].icon}
+        name={chain.name}
+        size={18}
+      />
+    );
+  }
 
   return (
-    <div className="flex items-center gap-x-0.5">
-      {assetChains.slice(0, visibleChains).map(({ chainId, name, assetSymbol }) => (
-        <ChainIcon key={`${chainId}-${assetSymbol}`} src={chains[chainId].icon} name={name} size={18} />
-      ))}
-      {assetChains.length > MAX_VISIBLE_CHAINS && (
+    <div className="flex items-center gap-0.5">
+      {chainNodes}
+      {shouldRenderCounter && (
         <div className="b-r-2 flex w-6 items-center justify-center rounded bg-token-background p-0.5">
-          <HelpText className="text-white">+{assetChains.length - 3}</HelpText>
+          <HelpText className="text-white">+{counter}</HelpText>
         </div>
       )}
     </div>