fix(wallet): Fix removal of NFTs in a collection (#14435)

* Fix removal of NFTs in a collection * Added updatedTokensList and filteredTokenList to dependency list * chore: remove console.log
brave · Aug 3, 2022 · 251909a · 251909a
1 parent 50ca5d2
commit 251909a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/components/brave_wallet_ui/components/desktop/asset-watchlist-item/index.tsx b/components/brave_wallet_ui/components/desktop/asset-watchlist-item/index.tsx
@@ -95,8 +95,8 @@ const AssetWatchlistItem = (props: Props) => {
             <DeleteIcon />
           </DeleteButton>
         }
-        <Checkbox value={{ [`${token.contractAddress}-${token.symbol}-${token.chainId}`]: isSelected }} onChange={onCheck}>
-          <div data-key={`${token.contractAddress}-${token.symbol}-${token.chainId}`} />
+        <Checkbox value={{ [`${token.contractAddress}-${token.symbol}-${token.chainId}-${token.tokenId}`]: isSelected }} onChange={onCheck}>
+          <div data-key={`${token.contractAddress}-${token.symbol}-${token.chainId}-${token.tokenId}`} />
         </Checkbox>
       </RightSide>
     </StyledWrapper>

diff --git a/...nents/brave_wallet_ui/components/desktop/popup-modals/edit-visible-assets-modal/index.tsx b/...nents/brave_wallet_ui/components/desktop/popup-modals/edit-visible-assets-modal/index.tsx
@@ -365,12 +365,13 @@ const EditVisibleAssetsModal = ({ onClose }: Props) => {
     toggleShowAddCustomToken()
   }
 
-  const onRemoveAsset = (token: BraveWallet.BlockchainToken) => {
-    const newUserList = updatedTokensList.filter((t) => t.contractAddress.toLowerCase() !== token.contractAddress.toLowerCase())
+  const onRemoveAsset = React.useCallback((token: BraveWallet.BlockchainToken) => {
+    const filterFn = (t: BraveWallet.BlockchainToken) => !(t.contractAddress.toLowerCase() === token.contractAddress.toLowerCase() && t.tokenId === token.tokenId)
+    const newUserList = updatedTokensList.filter(filterFn)
     setUpdatedTokensList(newUserList)
-    const newFilteredTokenList = filteredTokenList.filter((t) => t.contractAddress.toLowerCase() !== token.contractAddress.toLowerCase())
+    const newFilteredTokenList = filteredTokenList.filter(filterFn)
     setFilteredTokenList(newFilteredTokenList)
-  }
+  }, [updatedTokensList, filteredTokenList])
 
   const isDecimalDisabled = React.useMemo((): boolean => {
     return foundTokenInfoByContractAddress?.isErc721 ?? tokenID !== ''