fix: unhide native gas token from miniportfolio (#7374)

* fix: unhide native gas token from miniportfolio

* wip tests & gql types

* fix tests, default hide small balances

* pr review

* fix e2e hidden count

cypress/e2e/mini-portfolio/accounts.test.ts

@@ -53,7 +53,7 @@ describe('Mini Portfolio account drawer', () => {
 
     // Verify that wallet state loads correctly
     cy.get(getTestSelector('mini-portfolio-navbar')).contains('Tokens')
-    cy.get(getTestSelector('mini-portfolio-page')).contains('Hidden (201)')
+    cy.get(getTestSelector('mini-portfolio-page')).contains('Hidden (197)')
 
     cy.intercept(/graphql/, { fixture: 'mini-portfolio/nfts.json' })
     cy.get(getTestSelector('mini-portfolio-navbar')).contains('NFTs').click()

src/utils/splitHiddenTokens.test.tsx

-import { Currency, TokenBalance } from 'graphql/data/__generated__/types-and-hooks'
+import { Chain, Currency, Token, TokenBalance, TokenStandard } from 'graphql/data/__generated__/types-and-hooks'
 
 import { splitHiddenTokens } from './splitHiddenTokens'
 
+const nativeToken: Token = {
+  id: 'native-token',
+  chain: Chain.Ethereum,
+  standard: TokenStandard.Native,
+}
+
+const nonnativeToken: Token = {
+  id: 'nonnative-token',
+  chain: Chain.Ethereum,
+  standard: TokenStandard.Erc20,
+}
+
 const tokens: TokenBalance[] = [
   // low balance
   {
-    id: 'low-balance',
+    id: 'low-balance-native',
     ownerAddress: '',
     __typename: 'TokenBalance',
     denominatedValue: {
@@ -17,10 +29,31 @@ const tokens: TokenBalance[] = [
       currency: Currency.Eth,
       tokenProject: {
         id: '',
-        tokens: [],
+        tokens: [nativeToken],
         isSpam: false,
       },
     },
+    token: nativeToken,
+  },
+  {
+    id: 'low-balance-nonnative',
+    ownerAddress: '',
+    __typename: 'TokenBalance',
+    denominatedValue: {
+      id: '',
+      currency: Currency.Usd,
+      value: 0.01,
+    },
+    tokenProjectMarket: {
+      id: '',
+      currency: Currency.Eth,
+      tokenProject: {
+        id: '',
+        tokens: [nonnativeToken],
+        isSpam: false,
+      },
+    },
+    token: nonnativeToken,
   },
   // spam
   {
@@ -36,10 +69,11 @@ const tokens: TokenBalance[] = [
       currency: Currency.Eth,
       tokenProject: {
         id: '',
-        tokens: [],
+        tokens: [nonnativeToken],
         isSpam: true,
       },
     },
+    token: nonnativeToken,
   },
   // valid
   {
@@ -55,10 +89,11 @@ const tokens: TokenBalance[] = [
       currency: Currency.Eth,
       tokenProject: {
         id: '',
-        tokens: [],
+        tokens: [nonnativeToken],
         isSpam: false,
       },
     },
+    token: nonnativeToken,
   },
   // empty value
   {
@@ -75,10 +110,11 @@ const tokens: TokenBalance[] = [
       currency: Currency.Eth,
       tokenProject: {
         id: '',
-        tokens: [],
+        tokens: [nonnativeToken],
         isSpam: false,
       },
     },
+    token: nonnativeToken,
   },
 ]
 
@@ -91,27 +127,32 @@ describe('splitHiddenTokens', () => {
     expect(hiddenTokens.length).toBe(1)
     expect(hiddenTokens[0].id).toBe('spam')
 
-    expect(visibleTokens.length).toBe(3)
-    expect(visibleTokens[0].id).toBe('low-balance')
-    expect(visibleTokens[1].id).toBe('valid')
+    expect(visibleTokens.length).toBe(4)
+    expect(visibleTokens[0].id).toBe('low-balance-native')
+    expect(visibleTokens[1].id).toBe('low-balance-nonnative')
+    expect(visibleTokens[2].id).toBe('valid')
+    expect(visibleTokens[3].id).toBe('undefined-value')
   })
 
-  it('splits low balance into hidden by default', () => {
+  it('splits non-native low balance into hidden by default', () => {
     const { visibleTokens, hiddenTokens } = splitHiddenTokens(tokens)
 
     expect(hiddenTokens.length).toBe(2)
-    expect(hiddenTokens[0].id).toBe('low-balance')
+    expect(hiddenTokens[0].id).toBe('low-balance-nonnative')
     expect(hiddenTokens[1].id).toBe('spam')
 
-    expect(visibleTokens.length).toBe(2)
-    expect(visibleTokens[0].id).toBe('valid')
+    expect(visibleTokens.length).toBe(3)
+    expect(visibleTokens[0].id).toBe('low-balance-native')
+    expect(visibleTokens[1].id).toBe('valid')
+    expect(visibleTokens[2].id).toBe('undefined-value')
   })
 
   it('splits undefined value tokens into visible', () => {
     const { visibleTokens } = splitHiddenTokens(tokens)
 
-    expect(visibleTokens.length).toBe(2)
-    expect(visibleTokens[0].id).toBe('valid')
-    expect(visibleTokens[1].id).toBe('undefined-value')
+    expect(visibleTokens.length).toBe(3)
+    expect(visibleTokens[0].id).toBe('low-balance-native')
+    expect(visibleTokens[1].id).toBe('valid')
+    expect(visibleTokens[2].id).toBe('undefined-value')
   })
 })

src/utils/splitHiddenTokens.tsx

-import { TokenBalance } from 'graphql/data/__generated__/types-and-hooks'
+import { TokenBalance, TokenStandard } from 'graphql/data/__generated__/types-and-hooks'
 
 const HIDE_SMALL_USD_BALANCES_THRESHOLD = 1
 
 export function splitHiddenTokens(
   tokenBalances: TokenBalance[],
-  options?: {
+  options: {
     hideSmallBalances?: boolean
-  }
+  } = { hideSmallBalances: true }
 ) {
   const visibleTokens: TokenBalance[] = []
   const hiddenTokens: TokenBalance[] = []
 
   for (const tokenBalance of tokenBalances) {
-    const isValidValue =
-      // if undefined we keep visible (see https://linear.app/uniswap/issue/WEB-1940/[mp]-update-how-we-handle-what-goes-in-hidden-token-section-of-mini)
-      typeof tokenBalance.denominatedValue?.value === 'undefined' ||
-      // if below $1
-      options?.hideSmallBalances === false ||
-      meetsThreshold(tokenBalance)
-
-    if (
-      isValidValue &&
-      // a spam token
-      !tokenBalance.tokenProjectMarket?.tokenProject?.isSpam
-    ) {
+    // if undefined we keep visible (see https://linear.app/uniswap/issue/WEB-1940/[mp]-update-how-we-handle-what-goes-in-hidden-token-section-of-mini)
+    const isUndefinedValue = typeof tokenBalance.denominatedValue?.value === 'undefined'
+    const shouldHideSmallBalance =
+      options?.hideSmallBalances &&
+      !meetsThreshold(tokenBalance) && // if below $1
+      tokenBalance.token?.standard !== TokenStandard.Native // do not hide native tokens regardless of small balance
+    const isSpamToken = tokenBalance.tokenProjectMarket?.tokenProject?.isSpam
+    if ((isUndefinedValue || !shouldHideSmallBalance) && !isSpamToken) {
       visibleTokens.push(tokenBalance)
     } else {
       hiddenTokens.push(tokenBalance)