added network icon to collectibles tile, fixed collections filter logic

Author: andrewlee348

packages/wallet-widget/src/components/Filter/CollectionsFilter.tsx

@@ -8,6 +8,7 @@ import { ListCardSelect } from '../ListCard/ListCardSelect'
 
 export const CollectionsFilter = () => {
   const { selectedCollectionsObservable, selectedNetworks, selectedWallets, setSelectedCollections } = useSettings()
+  const selectedCollections = selectedCollectionsObservable.get()
 
   const { data: tokens } = useGetTokenBalancesSummary({
     chainIds: selectedNetworks,
@@ -22,6 +23,7 @@ export const CollectionsFilter = () => {
     .map(collection => {
       return {
         contractAddress: collection.contractAddress,
+        chainId: collection.chainId,
         contractInfo: {
           name: collection.contractInfo?.name || '',
           logoURI: collection.contractInfo?.logoURI || ''
@@ -54,12 +56,17 @@ export const CollectionsFilter = () => {
         <ListCardSelect
           key={collection.contractAddress}
           isSelected={
-            selectedCollectionsObservable.get().find(c => c.contractAddress === collection.contractAddress) !== undefined ||
-            collections.length === 1
+            selectedCollections.find(
+              c => c.contractAddress === collection.contractAddress && c.chainId === collection.chainId
+            ) !== undefined
           }
           onClick={collections.length > 1 ? () => setSelectedCollections([collection]) : undefined}
         >
-          <TokenImage src={collection.contractInfo?.logoURI} symbol={collection.contractInfo?.name} />
+          <TokenImage
+            src={collection.contractInfo?.logoURI}
+            symbol={collection.contractInfo?.name}
+            withNetwork={collection.chainId}
+          />
           <Text color="primary" fontWeight="medium" variant="normal">
             {collection.contractInfo?.name}
           </Text>

packages/wallet-widget/src/components/IconWrappers/MediaIconWrapper.tsx

@@ -87,7 +87,7 @@ export const MediaIconWrapper = ({
                     height: `calc(${widthClassMap[size]} + 2px)`
                   }}
                 >
-                  <img src={icon} alt="icon" />
+                  <img src={icon} alt="icon" style={{ backgroundColor: 'lightgray' }} />
                 </div>
               )}
             </>

packages/wallet-widget/src/components/SearchLists/CollectiblesList/CollectibleTile.tsx

@@ -2,6 +2,9 @@ import { useGetTokenMetadata } from '@0xsequence/hooks'
 
 import { TokenBalanceWithPrice } from '../../../utils'
 import { CollectibleTileImage } from '../../CollectibleTileImage'
+import { NetworkImage } from '@0xsequence/design-system'
+
+const NETWORK_IMAGE_SIZE = '32px'
 
 interface CollectibleTileProps {
   balance: TokenBalanceWithPrice
@@ -22,8 +25,18 @@ export const CollectibleTile = ({ balance, onTokenClick }: CollectibleTileProps)
   const imageUrl = tokenMetadata?.[0]?.image
 
   return (
-    <div className="select-none cursor-pointer aspect-square" onClick={onClick}>
+    <div className="select-none cursor-pointer aspect-square relative" onClick={onClick}>
       <CollectibleTileImage imageUrl={imageUrl} />
+      <NetworkImage
+        chainId={balance.chainId}
+        className={`absolute z-1`}
+        style={{
+          width: NETWORK_IMAGE_SIZE,
+          height: NETWORK_IMAGE_SIZE,
+          right: '2px',
+          bottom: '2px'
+        }}
+      />
     </div>
   )
 }

packages/wallet-widget/src/hooks/useSettings.ts

@@ -10,6 +10,7 @@ interface MutableObservable<T> extends Observable<T> {
 
 export interface SettingsCollection {
   contractAddress: string
+  chainId: number
   contractInfo: {
     name: string
     logoURI: string

packages/wallet-widget/src/views/Home/IntegratedWallet/index.tsx

@@ -85,8 +85,18 @@ export const IntegratedWallet = () => {
   const coinBalancesUnordered =
     tokenBalancesData?.filter(b => b.contractType === 'ERC20' || compareAddress(b.contractAddress, ethers.ZeroAddress)) || []
 
+  const isSingleCollectionSelected = selectedCollections.length === 1
+
   const collectibleBalancesUnordered =
-    tokenBalancesData?.filter(b => b.contractType === 'ERC721' || b.contractType === 'ERC1155') || []
+    tokenBalancesData?.filter(token => {
+      if (token.contractType !== 'ERC721' && token.contractType !== 'ERC1155') {
+        return false
+      }
+      if (isSingleCollectionSelected) {
+        return token.chainId === selectedCollections[0].chainId
+      }
+      return true
+    }) || []
 
   const { data: coinPrices = [], isPending: isCoinPricesPending } = useGetCoinPrices(
     coinBalancesUnordered.map(token => ({

packages/wallet-widget/src/views/Search/SearchCollectibles.tsx

@@ -25,6 +25,15 @@ export const SearchCollectibles = () => {
     }
   })
 
+  const isSingleCollectionSelected = selectedCollections.length === 1
+
+  const collectibleBalancesFiltered = tokenBalancesData.filter(token => {
+    if (isSingleCollectionSelected) {
+      return token.chainId === selectedCollections[0].chainId
+    }
+    return true
+  })
+
   const onHandleCollectibleClick = (balance: TokenBalanceWithPrice) => {
     setNavigation({
       location: 'collectible-details',
@@ -40,7 +49,7 @@ export const SearchCollectibles = () => {
   return (
     <div className="p-4 pt-2 w-full">
       <CollectiblesList
-        tokenBalancesData={tokenBalancesData}
+        tokenBalancesData={collectibleBalancesFiltered}
         isPendingTokenBalances={isPendingTokenBalances}
         onTokenClick={onHandleCollectibleClick}
         enableFilters={true}