fix: edit visible assets modal bugs (uplift to 1.62.x)

components/brave_wallet_ui/common/async/handlers.ts

@@ -302,10 +302,17 @@ handler.on(
   WalletActions.setUserAssetVisible.type,
   async (store: Store, payload: SetUserAssetVisiblePayloadType) => {
     const { braveWalletService } = getAPIProxy()
-    await braveWalletService.setUserAssetVisible(
+
+    const { success } = await braveWalletService.setUserAssetVisible(
       payload.token,
       payload.isVisible
     )
+
+    if (!success) {
+      // token is probably not in the core-side assets list
+      // try adding it to the user tokens list
+      store.dispatch(WalletActions.addUserAsset(payload.token))
+    }
   }
 )
 

components/brave_wallet_ui/common/async/lib.ts

@@ -194,8 +194,6 @@ export function refreshVisibleTokenInfo(
     const networkList = await getVisibleNetworksList(api)
 
     async function inner(network: BraveWallet.NetworkInfo) {
-      const nativeAsset = makeNetworkAsset(network)
-
       // Get a list of user tokens for each coinType and network.
       const getTokenList = await braveWalletService.getUserAssets(
         network.chainId,
@@ -207,7 +205,16 @@ export function refreshVisibleTokenInfo(
         ...token,
         logo: `chrome://erc-token-images/${token.logo}`
       })) as BraveWallet.BlockchainToken[]
-      return tokenList.length === 0 ? [nativeAsset] : tokenList
+
+      if (tokenList.length === 0) {
+        // user has hidden all tokens for the network
+        // we should still include the native asset, but as hidden
+        const nativeAsset = makeNetworkAsset(network)
+        nativeAsset.visible = false
+        return [nativeAsset]
+      }
+
+      return tokenList
     }
 
     const visibleAssets = targetNetwork

components/brave_wallet_ui/common/hooks/assets-management.ts

@@ -79,6 +79,11 @@ export function useAssetManagement() {
 
   const addOrRemoveTokenInLocalStorage = React.useCallback(
     (token: BraveWallet.BlockchainToken, addOrRemove: 'add' | 'remove') => {
+      if (token.contractAddress === '') {
+        // prevent permanently removing native tokens
+        return
+      }
+
       const assetId = getAssetIdKey(token)
       const isNFT = token.isNft || token.isErc1155 || token.isErc721
       const removedList = isNFT

components/brave_wallet_ui/common/slices/endpoints/token.endpoints.ts

@@ -292,6 +292,20 @@ export const tokenEndpoints = ({
             token,
             isVisible
           )
+
+          if (!success) {
+            // token is probably not in the core-side assets list,
+            // try adding it to the list
+            const { success: addTokenSuccess } = await addUserToken({
+              braveWalletService,
+              cache,
+              tokenArg: token
+            })
+            if (!addTokenSuccess) {
+              throw new Error('Token could not be updated or added')
+            }
+          }
+
           return { data: success }
         } catch (error) {
           return handleEndpointError(

components/brave_wallet_ui/components/desktop/account-list-item/index.tsx

@@ -261,7 +261,7 @@ export const AccountListItem = ({
 
     const reducedAmounts = amounts.reduce(function (a, b) {
       return a.plus(b)
-    })
+    }, Amount.empty())
 
     return !reducedAmounts.isUndefined() ? reducedAmounts : Amount.empty()
   }, [

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

@@ -212,14 +212,15 @@ export const EditVisibleAssetsModal = ({ onClose }: Props) => {
 
   // Filtered token list based on user removed tokens
   const filteredOutRemovedTokens = React.useMemo(() => {
-    return tokenList.filter(
-      (token) =>
-        !removedTokensList.some(
-          (t) =>
-            t.contractAddress.toLowerCase() ===
-              token.contractAddress.toLowerCase() && t.tokenId === token.tokenId
-        )
-    )
+    return tokenList.filter((token) => {
+      const tokenContractLower = token.contractAddress.toLowerCase()
+      return !removedTokensList.some(
+        (t) =>
+          t.chainId === token.chainId &&
+          t.contractAddress.toLowerCase() === tokenContractLower &&
+          t.tokenId === token.tokenId
+      )
+    })
   }, [tokenList, removedTokensList])
 
   // Filtered token list based on search value
@@ -331,10 +332,12 @@ export const EditVisibleAssetsModal = ({ onClose }: Props) => {
 
   const onRemoveAsset = React.useCallback(
     (token: BraveWallet.BlockchainToken) => {
+      const tokenContractLower = token.contractAddress.toLowerCase()
       const filterFn = (t: BraveWallet.BlockchainToken) =>
         !(
-          t.contractAddress.toLowerCase() ===
-            token.contractAddress.toLowerCase() && t.tokenId === token.tokenId
+          t.chainId === token.chainId &&
+          t.contractAddress.toLowerCase() === tokenContractLower &&
+          t.tokenId === token.tokenId
         )
       const newUserList = updatedTokensList.filter(filterFn)
       setUpdatedTokensList(newUserList)