refactor: use class manager instead of context

PolkaGate · Oct 26, 2024 · dc0fbd2 · dc0fbd2
1 parent 2bd1f23
commit dc0fbd2
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 147 deletions.
diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/NftGrouped.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/NftGrouped.tsx
@@ -3,12 +3,12 @@
 
 /* eslint-disable react/jsx-max-props-per-line */
 
-import type { ItemInformation, ItemsDetail } from '../../nft/utils/types';
+import type { ItemInformation } from '../../nft/utils/types';
 
 import { Avatar, AvatarGroup, Grid, useTheme } from '@mui/material';
-//@ts-ignore
+// @ts-ignore
 import { Wordpress } from 'better-react-spinkit';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
 import Infotip2 from '../../../components/Infotip2';
 import { fetchItemMetadata } from '../../nft/utils/util';
@@ -24,34 +24,33 @@ interface NftGroupedProps {
 function NftGrouped ({ accountNft, address }: NftGroupedProps): React.ReactElement {
   const theme = useTheme();
 
-  const [itemsDetails, setItemsDetails] = useState<ItemsDetail>({});
   const [isLoading, setIsLoading] = React.useState(true);
 
   const itemsToShow = useMemo(() => accountNft?.slice(0, MAX_NFT_TO_SHOW), [accountNft]);
 
-  const nftsToDisplay = useMemo(() => {
-    return itemsToShow?.map((item) =>
-      itemsDetails[`${item?.collectionId} - ${item?.itemId}`]?.image
-    ).filter(Boolean);
-  }, [itemsDetails, itemsToShow]);
-
   const fetchMetadata = useCallback(async () => {
-    if (!itemsToShow || itemsToShow?.length === 0) {
+    if (!itemsToShow || itemsToShow?.length === 0 || !address) {
+      return;
+    }
+
+    const noNeedToFetchMetadata = !itemsToShow.some((nft) => nft.data && (nft.image === undefined && nft.animation_url === undefined));
+
+    if (noNeedToFetchMetadata) {
+      setIsLoading(false);
+
       return;
     }
 
     setIsLoading(true);
 
     try {
-      await Promise.all(
-        itemsToShow.map((item) => fetchItemMetadata(item, setItemsDetails))
-      );
+      await Promise.all(itemsToShow.map((item) => fetchItemMetadata(address, item)));
     } catch (error) {
       console.error('Error fetching NFT metadata:', error);
     } finally {
       setIsLoading(false);
     }
-  }, [itemsToShow]);
+  }, [address, itemsToShow]);
 
   useEffect(() => {
     if (!itemsToShow || itemsToShow?.length === 0) {
@@ -99,7 +98,7 @@ function NftGrouped ({ accountNft, address }: NftGroupedProps): React.ReactEleme
           }}
           total={accountNft?.length}
         >
-          {nftsToDisplay?.map((image, index) => (
+          {itemsToShow?.map(({ image }, index) => (
             <Avatar alt='NFT' key={index} src={image ?? undefined} style={{ height: '30px', width: '30px' }} />
           ))}
         </AvatarGroup>

diff --git a/.../extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx b/.../extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx
@@ -7,16 +7,18 @@
 import type { BalancesInfo } from '@polkadot/extension-polkagate/util/types';
 import type { HexString } from '@polkadot/util/types';
 import type { FetchedBalance } from '../../../hooks/useAssetsBalances';
+import type { ItemInformation } from '../../nft/utils/types';
 
 import { ArrowForwardIos as ArrowForwardIosIcon, MoreVert as MoreVertIcon } from '@mui/icons-material';
 import { Box, Button, Divider, Grid, Typography, useTheme } from '@mui/material';
-import React, { useCallback, useContext, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { getValue } from '@polkadot/extension-polkagate/src/popup/account/util';
 import { type BN, noop } from '@polkadot/util';
 
 import { stars6Black, stars6White } from '../../../assets/icons';
-import { Identicon, Identity, NftItemsContext, OptionalCopyButton, ShortAddress2 } from '../../../components';
+import NftManager from '../../../class/nftManager';
+import { Identicon, Identity, OptionalCopyButton, ShortAddress2 } from '../../../components';
 import FormatPrice from '../../../components/FormatPrice';
 import { useCurrency, useIdentity, useInfo, usePrices, useTranslation } from '../../../hooks';
 import { showAccount, tieAccount } from '../../../messaging';
@@ -104,29 +106,42 @@ const AccountTotal = ({ hideNumbers, totalBalance }: { hideNumbers: boolean | un
   );
 };
 
+const nftManager = new NftManager();
+
 function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChild, selectedAsset, setSelectedAsset }: AddressDetailsProps): React.ReactElement {
   const { t } = useTranslation();
   const theme = useTheme();
-  const nftItems = useContext(NftItemsContext);
   const pricesInCurrencies = usePrices();
   const currency = useCurrency();
   const { account, api, chain, formatted, genesisHash } = useInfo(address);
 
-  const accountNft = useMemo(() => {
-    if (!nftItems || !address) {
-      return undefined;
-    }
+  const accountInfo = useIdentity(genesisHash, formatted);
+
+  const [displayPopup, setDisplayPopup] = useState<number>();
+  const [myNfts, setNfts] = useState<ItemInformation[] | null | undefined>();
 
-    if (address in nftItems && nftItems[address].length > 0) {
-      return nftItems[address];
+  useEffect(() => {
+    if (!address) {
+      return;
     }
 
-    return null;
-  }, [address, nftItems]);
+    const myNfts = nftManager.get(address);
 
-  const accountInfo = useIdentity(genesisHash, formatted);
+    setNfts(myNfts);
 
-  const [displayPopup, setDisplayPopup] = useState<number>();
+    const handleNftUpdate = (updatedAddress: string, updatedNfts: ItemInformation[]) => {
+      if (updatedAddress === address) {
+        setNfts(updatedNfts);
+      }
+    };
+
+    nftManager.subscribe(handleNftUpdate);
+
+    // Cleanup
+    return () => {
+      nftManager.unsubscribe(handleNftUpdate);
+    };
+  }, [address]);
 
   const calculatePrice = useCallback((amount: BN, decimal: number, price: number) => parseFloat(amountToHuman(amount, decimal)) * price, []);
 
@@ -236,28 +251,28 @@ function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChi
             </Grid>
             <Grid container item width='fit-content'>
               <NftGrouped
-                accountNft={accountNft}
+                accountNft={myNfts}
                 address={address}
               />
             </Grid>
           </Grid>
           <Grid alignItems='center' container item width='fit-content'>
-            <Divider orientation='vertical' sx={{ bgcolor: 'divider', height: '34px', ml: 0, mr: '10px', mx: accountNft ? '5px' : undefined, my: 'auto', width: '1px' }} />
+            <Divider orientation='vertical' sx={{ bgcolor: 'divider', height: '34px', ml: 0, mr: '10px', mx: myNfts ? '5px' : undefined, my: 'auto', width: '1px' }} />
             <FullScreenAccountMenu
               address={address}
               baseButton={
                 <AccountButton
-                  collapse={!!accountNft}
+                  collapse={!!myNfts}
                   icon={<MoreVertIcon style={{ color: theme.palette.secondary.light, fontSize: '32px' }} />}
                   onClick={noop}
                   text={t('Settings')}
                 />
               }
               setDisplayPopup={setDisplayPopup}
             />
-            <Divider orientation='vertical' sx={{ bgcolor: 'divider', height: '34px', ml: '5px', mr: accountNft ? '5px' : '15px', my: 'auto', width: '1px' }} />
+            <Divider orientation='vertical' sx={{ bgcolor: 'divider', height: '34px', ml: '5px', mr: myNfts ? '5px' : '15px', my: 'auto', width: '1px' }} />
             <AccountButton
-              collapse={!!accountNft}
+              collapse={!!myNfts}
               icon={<ArrowForwardIosIcon style={{ color: theme.palette.secondary.light, fontSize: '28px' }} />}
               onClick={goToDetails}
               text={t('Details')}