fix: collectibles view quirks (#73)

ava-labs · Oct 22, 2024 · aedec29 · aedec29
1 parent 4063c4f
commit aedec29
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 70 deletions.
diff --git a/src/background/services/balances/BalancePollingService.ts b/src/background/services/balances/BalancePollingService.ts
@@ -35,7 +35,6 @@ export class BalancePollingService implements OnLock, OnAllExtensionClosed {
     // Stop any polling that may be occurring already
     this.stopPolling();
     // Start a new interval
-    // this._preventSchedulingNextUpdate = false;
     return this.pollBalances(
       account,
       activeChainId,

diff --git a/src/contexts/SettingsProvider.tsx b/src/contexts/SettingsProvider.tsx
@@ -27,6 +27,7 @@ import {
   SetStateAction,
 } from 'react';
 import { filter, map } from 'rxjs';
+import { omit, set } from 'lodash';
 import { useConnectionContext } from './ConnectionProvider';
 import { getCurrencyFormatter } from './utils/getCurrencyFormatter';
 import { updateIfDifferent } from '@src/utils/updateIfDifferent';
@@ -146,29 +147,28 @@ export function SettingsContextProvider({ children }: { children: any }) {
   );
 
   async function toggleCollectibleVisibility(nft: NftTokenWithBalance) {
-    const key = nft.address;
-    const collectiblesVisibility = settings?.collectiblesVisibility ?? {};
+    const key = `${nft.address}-${nft.tokenId}`;
+    const visibility = settings?.collectiblesVisibility ?? {};
+    // We used to (wrongly) index by address only.
+    const isHidden = (visibility[key] ?? visibility[nft.address]) === false;
+    // If token is now hidde, just remove it from the dictionary,
+    // otherwise set it to false.
+    const updatedVisibility = isHidden
+      ? omit(visibility, [nft.address, key])
+      : set(visibility, key, false);
+
     return request<UpdateCollectiblesVisibilityHandler>({
       method: ExtensionRequest.SETTINGS_UPDATE_COLLECTIBLES_VISIBILITY,
-      params: [
-        {
-          ...collectiblesVisibility,
-          [key]:
-            collectiblesVisibility[key] !== undefined
-              ? !collectiblesVisibility[key]
-              : false,
-        },
-      ],
+      params: [updatedVisibility],
     });
   }
 
   const getCollectibleVisibility = useCallback(
     (nft: NftTokenWithBalance) => {
-      const key = nft.address;
-      const collectiblesVisibility = settings?.collectiblesVisibility ?? {};
-      return (
-        collectiblesVisibility[key] || collectiblesVisibility[key] === undefined
-      );
+      const key = `${nft.address}-${nft.tokenId}`;
+      const visibility = settings?.collectiblesVisibility ?? {};
+      // We used to index by address only.
+      return (visibility[key] ?? visibility[nft.address]) !== false;
     },
     [settings?.collectiblesVisibility]
   );

diff --git a/src/pages/Collectibles/Collectibles.tsx b/src/pages/Collectibles/Collectibles.tsx
@@ -33,7 +33,7 @@ import { useLiveBalance } from '@src/hooks/useLiveBalance';
 
 interface CollectiblesProps {
   listType: ListType;
-  setListType: Dispatch<SetStateAction<ListType>>;
+  setListType: Dispatch<SetStateAction<ListType | undefined>>;
 }
 
 const POLLED_BALANCES = [TokenType.ERC721, TokenType.ERC1155];

diff --git a/src/pages/Collectibles/components/CollectibleMedia.tsx b/src/pages/Collectibles/components/CollectibleMedia.tsx
@@ -94,6 +94,7 @@ export function CollectibleMedia({
 }: CollectibleMediaProps) {
   const [isImageFullScreen, setIsImageFullScreen] = useState(false);
   const [shouldUseLightIcon, setShouldUseLightIcon] = useState(false);
+  const [isMediaSettled, setIsMediaSettled] = useState(false); // Either loaded or errored out.
 
   return (
     <Stack
@@ -103,54 +104,50 @@ export function CollectibleMedia({
       }}
       className={className}
     >
-      {
-        <Stack
-          sx={{
-            flexDirection: 'row',
-            maxWidth: maxWidth ? maxWidth : 'unset',
-            width: width ? width : '32px',
-            position: 'absolute',
-            justifyContent: 'flex-end',
-            alignItems: 'flex-end',
-            columnGap: 1,
-            zIndex: 3,
-            mr: 3,
-            mt: 1,
-            pr: 1,
-          }}
-        >
-          {showBalance && (
-            <Chip
-              size="small"
-              sx={{
-                backgroundColor: (theme) =>
-                  shouldUseLightIcon
-                    ? 'primary.light'
-                    : theme.palette.grey[600],
-                color: shouldUseLightIcon
-                  ? 'primary.contrastText'
-                  : 'primary.light',
-                px: 1,
-              }}
-              label={balance.toString()}
-            />
-          )}
-          {showExpandOption && (
-            <ArrowsMaximizeIcon
-              onClick={() => {
-                setIsImageFullScreen(true);
-              }}
-              size="24"
-              sx={{
-                color: shouldUseLightIcon
-                  ? 'primary.light'
-                  : 'primary.contrastText',
-                cursor: 'pointer',
-              }}
-            />
-          )}
-        </Stack>
-      }
+      <Stack
+        sx={{
+          flexDirection: 'row',
+          maxWidth: maxWidth ? maxWidth : 'unset',
+          width: width ? width : '32px',
+          position: 'absolute',
+          justifyContent: 'flex-end',
+          alignItems: 'flex-end',
+          columnGap: 1,
+          zIndex: 3,
+          mr: 3,
+          mt: 1,
+          pr: 1,
+        }}
+      >
+        {showBalance && isMediaSettled && (
+          <Chip
+            size="small"
+            sx={{
+              backgroundColor: (theme) =>
+                shouldUseLightIcon ? 'primary.light' : theme.palette.grey[600],
+              color: shouldUseLightIcon
+                ? 'primary.contrastText'
+                : 'primary.light',
+              px: 1,
+            }}
+            label={balance.toString()}
+          />
+        )}
+        {showExpandOption && (
+          <ArrowsMaximizeIcon
+            onClick={() => {
+              setIsImageFullScreen(true);
+            }}
+            size="24"
+            sx={{
+              color: shouldUseLightIcon
+                ? 'primary.light'
+                : 'primary.contrastText',
+              cursor: 'pointer',
+            }}
+          />
+        )}
+      </Stack>
       {isVideo(url) ? (
         <Stack sx={{ position: 'relative', flexDirection: 'row' }}>
           <NftVideo
@@ -162,7 +159,10 @@ export function CollectibleMedia({
             controls={controls}
             borderRadius={borderRadius}
           >
-            <source src={ipfsResolverWithFallback(url)} />
+            <source
+              src={ipfsResolverWithFallback(url)}
+              onLoadStart={() => setIsMediaSettled(true)}
+            />
           </NftVideo>
           {showPlayIcon && (
             <TriangleRightIcon
@@ -202,7 +202,9 @@ export function CollectibleMedia({
                   setShouldUseLightIcon(isDark);
                 });
               }
+              setIsMediaSettled(true);
             }}
+            onError={() => setIsMediaSettled(true)}
           />
         </ImageWrapper>
       )}

diff --git a/src/pages/Home/components/Portfolio/Portfolio.tsx b/src/pages/Home/components/Portfolio/Portfolio.tsx
@@ -7,6 +7,7 @@ import { WalletBalances } from './WalletBalances';
 import { useTranslation } from 'react-i18next';
 import {
   Box,
+  CircularProgress,
   Scrollbars,
   Stack,
   Tab,
@@ -57,7 +58,7 @@ export function Portfolio() {
   const { featureFlags } = useFeatureFlagContext();
   const { activeTab, setActiveTab } = usePersistedTabs(PortfolioTabs.ASSETS);
   const { isReady, checkIsFunctionSupported } = useIsFunctionAvailable();
-  const [listType, setListType] = useState(ListType.GRID);
+  const [listType, setListType] = useState<ListType>();
   const [hadDefiEnabled, setHadDefiEnabled] = useState(false);
   const { getPageHistoryData, isHistoryLoading } = usePageHistory();
 
@@ -176,7 +177,11 @@ export function Portfolio() {
               sx={{ height: '100%' }}
             >
               {shouldShow(PortfolioTabs.COLLECTIBLES) ? (
-                <Collectibles listType={listType} setListType={setListType} />
+                listType ? (
+                  <Collectibles listType={listType} setListType={setListType} />
+                ) : (
+                  <CircularProgress size={60} />
+                )
               ) : (
                 isReady && ( // Only redirect when we have all the context needed to decide
                   <Redirect to={'/'} />

diff --git a/src/pages/ManageCollectibles/ManageCollectiblesList.tsx b/src/pages/ManageCollectibles/ManageCollectiblesList.tsx
@@ -52,7 +52,7 @@ export const ManageCollectiblesList = ({
       {displayableNfts?.map((nft) => (
         <ManageCollectiblesListItem
           nft={nft}
-          key={`collectible-${nft.name.toLowerCase()}`}
+          key={`collectible-${nft.address}-${nft.tokenId}`}
         />
       ))}
     </Stack>