fix: tokens with same name brake cypress test (#6890)

* fix: tokens with same name brake cypress test

* lowercase

cypress/e2e/token-details.test.ts

 import { SupportedChainId, WETH9 } from '@uniswap/sdk-core'
 
-import { UNI } from '../../src/constants/tokens'
+import { ARB, UNI } from '../../src/constants/tokens'
 import { getTestSelector } from '../utils'
 
 const UNI_MAINNET = UNI[SupportedChainId.MAINNET]
@@ -149,7 +149,7 @@ describe('Token details', () => {
       cy.get(getTestSelector('tokens-network-filter-selected')).click()
       cy.get(getTestSelector('tokens-network-filter-option-arbitrum')).click()
       cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Arbitrum')
-      cy.get(getTestSelector('token-table-row-ARB')).click()
+      cy.get(getTestSelector(`token-table-row-${ARB.address.toLowerCase()}`)).click()
       cy.get(`#swap-currency-output .token-symbol-container`).should('contain.text', 'ARB')
       cy.get(getTestSelector('open-settings-dialog-button')).should('be.disabled')
       cy.contains('Connect to Arbitrum').should('exist')

cypress/e2e/token-explore.test.ts

@@ -10,11 +10,11 @@ describe('Token explore', () => {
     cy.get(getTestSelectorStartsWith('token-table')).its('length').should('be.greaterThan', 0)
     // check sorted svg icon is present in volume cell, since tokens are sorted by volume by default
     cy.get(getTestSelector('header-row')).find(getTestSelector('volume-cell')).find('svg').should('exist')
-    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('name-cell')).should('include.text', 'Ether')
-    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('volume-cell')).should('include.text', '$')
-    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('price-cell')).should('include.text', '$')
-    cy.get(getTestSelector('token-table-row-ETH')).find(getTestSelector('tvl-cell')).should('include.text', '$')
-    cy.get(getTestSelector('token-table-row-ETH'))
+    cy.get(getTestSelector('token-table-row-NATIVE')).find(getTestSelector('name-cell')).should('include.text', 'Ether')
+    cy.get(getTestSelector('token-table-row-NATIVE')).find(getTestSelector('volume-cell')).should('include.text', '$')
+    cy.get(getTestSelector('token-table-row-NATIVE')).find(getTestSelector('price-cell')).should('include.text', '$')
+    cy.get(getTestSelector('token-table-row-NATIVE')).find(getTestSelector('tvl-cell')).should('include.text', '$')
+    cy.get(getTestSelector('token-table-row-NATIVE'))
       .find(getTestSelector('percent-change-cell'))
       .should('include.text', '%')
     cy.get(getTestSelector('header-row')).find(getTestSelector('price-cell')).click()
@@ -24,14 +24,14 @@ describe('Token explore', () => {
   it('should update when time window toggled', () => {
     cy.visit('/tokens/ethereum')
     cy.get(getTestSelector('time-selector')).should('contain', '1D')
-    cy.get(getTestSelector('token-table-row-ETH'))
+    cy.get(getTestSelector('token-table-row-NATIVE'))
       .find(getTestSelector('volume-cell'))
       .then(function ($elem) {
         cy.wrap($elem.text()).as('dailyEthVol')
       })
     cy.get(getTestSelector('time-selector')).click()
     cy.get(getTestSelector('1Y')).click()
-    cy.get(getTestSelector('token-table-row-ETH'))
+    cy.get(getTestSelector('token-table-row-NATIVE'))
       .find(getTestSelector('volume-cell'))
       .then(function ($elem) {
         cy.wrap($elem.text()).as('yearlyEthVol')
@@ -41,7 +41,7 @@ describe('Token explore', () => {
 
   it('should navigate to token detail page when row clicked', () => {
     cy.visit('/tokens/ethereum')
-    cy.get(getTestSelector('token-table-row-ETH')).click()
+    cy.get(getTestSelector('token-table-row-NATIVE')).click()
     cy.get(getTestSelector('token-details-about-section')).should('exist')
     cy.get(getTestSelector('token-details-stats')).should('exist')
     cy.get(getTestSelector('token-info-container')).should('exist')
@@ -53,13 +53,15 @@ describe('Token explore', () => {
   it('should update when global network changed', () => {
     cy.visit('/tokens/ethereum')
     cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Ethereum')
-    cy.get(getTestSelector('token-table-row-ETH')).should('exist')
+    cy.get(getTestSelector('token-table-row-NATIVE')).should('exist')
 
     // note: cannot switch global chain via UI because we cannot approve the network switch
     // in metamask modal using plain cypress. this is a workaround.
     cy.visit('/tokens/polygon')
     cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Polygon')
-    cy.get(getTestSelector('token-table-row-MATIC')).should('exist')
+    cy.get(getTestSelector('token-table-row-NATIVE'))
+      .find(getTestSelector('name-cell'))
+      .should('include.text', 'Polygon Matic')
   })
 
   it('should update when token explore table network changed', () => {

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -458,7 +458,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
 
   // TODO: currency logo sizing mobile (32px) vs. desktop (24px)
   return (
-    <div ref={ref} data-testid={`token-table-row-${token.symbol}`}>
+    <div ref={ref} data-testid={`token-table-row-${token.address}`}>
       <StyledLink
         to={getTokenDetailsURL(token)}
         onClick={() =>

src/components/Tokens/TokenTable/__snapshots__/TokenRow.test.tsx.snap

@@ -327,7 +327,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
 }
 
 <div
-    data-testid="token-table-row-USDC"
+    data-testid="token-table-row-0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"
   >
     <a
       class="c0"