fix: mf-4959 crash on accessing assets (#10401)

* perf: improve assets render * fix: mf-4959 crash on accessing assets
DimensionDev · Aug 15, 2023 · 7f970da · 7f970da
1 parent 23956d9
commit 7f970da
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/shared/src/UI/components/AssetsManagement/AssetsProvider.tsx b/packages/shared/src/UI/components/AssetsManagement/AssetsProvider.tsx
@@ -77,8 +77,7 @@ export const AssetsProvider = memo<Props>(function AssetsProvider({ children, bl
         if (!blockedIds.length) return assetsMap
         const listingMap: Record<string, AssetsState> = { ...assetsMap }
         let updated = false
-        for (const id in assetsMap) {
-            const storeId = `${account}.${id}`
+        for (const storeId in assetsMap) {
             const originalAssets = assetsMap[storeId].assets
             const newAssets = originalAssets.filter((x) => {
                 const assetId = `${x.chainId}.${x.address}.${x.tokenId}`.toLowerCase()
@@ -91,7 +90,7 @@ export const AssetsProvider = memo<Props>(function AssetsProvider({ children, bl
         }
         // Update accordingly
         return updated ? listingMap : assetsMap
-    }, [assetsMap, account, blockedIds])
+    }, [assetsMap, blockedIds])
 
     const assetsMapRef = useRef<AssetsReducerState['assetsMap']>({})
     const listingAssetsMapRef = useRef<AssetsReducerState['assetsMap']>({})

diff --git a/packages/shared/src/UI/components/AssetsManagement/CollectibleItem.tsx b/packages/shared/src/UI/components/AssetsManagement/CollectibleItem.tsx
@@ -17,6 +17,7 @@ const useStyles = makeStyles<void, 'action' | 'collectibleCard' | 'info'>()((the
         borderRadius: 8,
         overflow: 'visible',
         zIndex: 0,
+        willChange: 'opacity',
     },
     withAction: {
         '&:hover': {
@@ -42,6 +43,9 @@ const useStyles = makeStyles<void, 'action' | 'collectibleCard' | 'info'>()((the
             '0%': { opacity: 0 },
         },
         animation: 'fade-in 500ms ease-in-out',
+        '@media (prefers-reduced-motion: reduce)': {
+            animation: 'none',
+        },
     },
     collectibleCard: {
         width: '100%',