Revert "chore: add tokenId check when removing asset from visible ass…

…ets list"

This reverts commit 440134d. This will be fixed in brave/brave-browser#24238

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}-${token.tokenId}`]: isSelected }} onChange={onCheck}>
-          <div data-key={`${token.contractAddress}-${token.symbol}-${token.chainId}-${token.tokenId}`} />
+        <Checkbox value={{ [`${token.contractAddress}-${token.symbol}-${token.chainId}`]: isSelected }} onChange={onCheck}>
+          <div data-key={`${token.contractAddress}-${token.symbol}-${token.chainId}`} />
         </Checkbox>
       </RightSide>
     </StyledWrapper>

components/brave_wallet_ui/components/desktop/popup-modals/edit-visible-assets-modal/index.tsx

@@ -292,8 +292,7 @@ const EditVisibleAssetsModal = ({ onClose }: Props) => {
     return updatedTokensList.find((t) =>
       t.symbol.toLowerCase() === token.symbol.toLowerCase() &&
       t.contractAddress.toLowerCase() === token.contractAddress.toLowerCase() &&
-      t.chainId === token.chainId &&
-      t.tokenId === token.tokenId)
+      t.chainId === token.chainId)
   }
 
   const isUserToken = (token: BraveWallet.BlockchainToken) => {
@@ -334,8 +333,7 @@ const EditVisibleAssetsModal = ({ onClose }: Props) => {
         const tokenIndex = updatedTokensList.findIndex((t) =>
           t.contractAddress.toLowerCase() === token.contractAddress.toLowerCase() &&
           t.symbol.toLowerCase() === token.symbol.toLowerCase() &&
-          t.chainId === token.chainId &&
-          t.tokenId === token.tokenId)
+          t.chainId === token.chainId)
         let newList = [...updatedTokensList]
         newList.splice(tokenIndex, 1, updatedToken)
         setUpdatedTokensList(newList)
@@ -368,9 +366,9 @@ const EditVisibleAssetsModal = ({ onClose }: Props) => {
   }
 
   const onRemoveAsset = (token: BraveWallet.BlockchainToken) => {
-    const newUserList = updatedTokensList.filter((t) => t.contractAddress.toLowerCase() !== token.contractAddress.toLowerCase() && t.tokenId === token.tokenId)
+    const newUserList = updatedTokensList.filter((t) => t.contractAddress.toLowerCase() !== token.contractAddress.toLowerCase())
     setUpdatedTokensList(newUserList)
-    const newFilteredTokenList = filteredTokenList.filter((t) => t.contractAddress.toLowerCase() !== token.contractAddress.toLowerCase() && t.tokenId === token.tokenId)
+    const newFilteredTokenList = filteredTokenList.filter((t) => t.contractAddress.toLowerCase() !== token.contractAddress.toLowerCase())
     setFilteredTokenList(newFilteredTokenList)
   }
 

components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-asset.tsx

@@ -75,6 +75,7 @@ export const PortfolioAsset = () => {
   const history = useHistory()
   const { id: assetId, tokenId } = useParams<{ id?: string, tokenId?: string }>()
   const nftDetailsRef = React.useRef<HTMLIFrameElement>(null)
+  const [nftIframeLoaded, setNftIframeLoaded] = React.useState(false)
   // redux
   const dispatch = useDispatch()
   const {
@@ -315,6 +316,8 @@ export const PortfolioAsset = () => {
   }, [nftDetailsRef, isFetchingNFTMetadata])
 
   React.useEffect(() => {
+    if (!nftIframeLoaded) return
+
     if (selectedAsset && nftDetailsRef?.current) {
       const command: UpdateSelectedAssetMessage = {
         command: NftUiCommand.UpdateSelectedAsset,
@@ -339,7 +342,7 @@ export const PortfolioAsset = () => {
       }
       sendMessageToNftUiFrame(nftDetailsRef.current.contentWindow, command)
     }
-  }, [nftDetailsRef, selectedAsset, nftMetadata, networkList])
+  }, [nftIframeLoaded, nftDetailsRef, selectedAsset, nftMetadata, networkList])
 
   // token list needs to load before we can find an asset to select from the url params
   if (userVisibleTokensInfo.length === 0) {
@@ -420,6 +423,7 @@ export const PortfolioAsset = () => {
       }
 
       <NftDetails
+        onLoad={() => setNftIframeLoaded(true)}
         visible={selectedAsset?.isErc721}
         ref={nftDetailsRef}
         sandbox="allow-scripts allow-popups allow-same-origin"