From aedec29537ef2dd415beef669887bfa7b8911bb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= Date: Tue, 22 Oct 2024 11:23:40 +0200 Subject: [PATCH] fix: collectibles view quirks (#73) --- .../balances/BalancePollingService.ts | 1 - src/contexts/SettingsProvider.tsx | 32 +++--- src/pages/Collectibles/Collectibles.tsx | 2 +- .../components/CollectibleMedia.tsx | 100 +++++++++--------- .../Home/components/Portfolio/Portfolio.tsx | 9 +- .../ManageCollectiblesList.tsx | 2 +- 6 files changed, 76 insertions(+), 70 deletions(-) diff --git a/src/background/services/balances/BalancePollingService.ts b/src/background/services/balances/BalancePollingService.ts index 97458239..f8009c81 100644 --- 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 index b6568cfe..b11d943f 100644 --- 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({ 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 index 633ccfd7..f8b7f1e9 100644 --- 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>; + setListType: Dispatch>; } const POLLED_BALANCES = [TokenType.ERC721, TokenType.ERC1155]; diff --git a/src/pages/Collectibles/components/CollectibleMedia.tsx b/src/pages/Collectibles/components/CollectibleMedia.tsx index 72975c26..0011aac2 100644 --- 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 ( - { - - {showBalance && ( - - shouldUseLightIcon - ? 'primary.light' - : theme.palette.grey[600], - color: shouldUseLightIcon - ? 'primary.contrastText' - : 'primary.light', - px: 1, - }} - label={balance.toString()} - /> - )} - {showExpandOption && ( - { - setIsImageFullScreen(true); - }} - size="24" - sx={{ - color: shouldUseLightIcon - ? 'primary.light' - : 'primary.contrastText', - cursor: 'pointer', - }} - /> - )} - - } + + {showBalance && isMediaSettled && ( + + shouldUseLightIcon ? 'primary.light' : theme.palette.grey[600], + color: shouldUseLightIcon + ? 'primary.contrastText' + : 'primary.light', + px: 1, + }} + label={balance.toString()} + /> + )} + {showExpandOption && ( + { + setIsImageFullScreen(true); + }} + size="24" + sx={{ + color: shouldUseLightIcon + ? 'primary.light' + : 'primary.contrastText', + cursor: 'pointer', + }} + /> + )} + {isVideo(url) ? ( - + setIsMediaSettled(true)} + /> {showPlayIcon && ( setIsMediaSettled(true)} /> )} diff --git a/src/pages/Home/components/Portfolio/Portfolio.tsx b/src/pages/Home/components/Portfolio/Portfolio.tsx index 270dde12..6b77108a 100644 --- 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(); const [hadDefiEnabled, setHadDefiEnabled] = useState(false); const { getPageHistoryData, isHistoryLoading } = usePageHistory(); @@ -176,7 +177,11 @@ export function Portfolio() { sx={{ height: '100%' }} > {shouldShow(PortfolioTabs.COLLECTIBLES) ? ( - + listType ? ( + + ) : ( + + ) ) : ( isReady && ( // Only redirect when we have all the context needed to decide diff --git a/src/pages/ManageCollectibles/ManageCollectiblesList.tsx b/src/pages/ManageCollectibles/ManageCollectiblesList.tsx index 2855dafa..eb978126 100644 --- a/src/pages/ManageCollectibles/ManageCollectiblesList.tsx +++ b/src/pages/ManageCollectibles/ManageCollectiblesList.tsx @@ -52,7 +52,7 @@ export const ManageCollectiblesList = ({ {displayableNfts?.map((nft) => ( ))}