feat: add i18n to token detail and token explore (#4510)

init

src/components/Tokens/TokenDetails/FooterBalanceSummary.tsx

+import { Trans } from '@lingui/macro'
 import { useToken } from 'hooks/Tokens'
 import { useNetworkTokenBalances } from 'hooks/useNetworkTokenBalances'
 import { useState } from 'react'
@@ -152,7 +153,9 @@ export default function FooterBalanceSummary({
         ) : error ? (
           <ErrorState>
             <AlertTriangle size={17} />
-            <ErrorText>There was an error fetching your balance</ErrorText>
+            <ErrorText>
+              <Trans>There was an error fetching your balance</Trans>
+            </ErrorText>
           </ErrorState>
         ) : (
           <BalanceInfo>
@@ -165,16 +168,21 @@ export default function FooterBalanceSummary({
             </BalanceTotal>
             {multipleBalances && (
               <ViewAll onClick={() => setShowMultipleBalances(!showMultipleBalances)}>
-                {showMultipleBalances ? 'Hide' : 'View'} all balances
+                <Trans>{showMultipleBalances ? 'Hide' : 'View'} all balances</Trans>
               </ViewAll>
             )}
           </BalanceInfo>
         )}
-        <SwapButton onClick={() => (window.location.href = 'https://app.uniswap.org/#/swap')}>Swap</SwapButton>
+        <SwapButton onClick={() => (window.location.href = 'https://app.uniswap.org/#/swap')}>
+          <Trans>Swap</Trans>
+        </SwapButton>
       </TotalBalancesSection>
       {showMultipleBalances && (
         <NetworkBalancesSection>
-          <NetworkBalancesLabel>Your balances by network</NetworkBalancesLabel> {networkBalances}
+          <NetworkBalancesLabel>
+            <Trans>Your balances by network</Trans>
+          </NetworkBalancesLabel>{' '}
+          {networkBalances}
         </NetworkBalancesSection>
       )}
       <FakeFooterNavBar>**leaving space for updated nav footer**</FakeFooterNavBar>

src/components/Tokens/TokenDetails/ShareButton.tsx

+import { Trans } from '@lingui/macro'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { useRef } from 'react'
 import { Twitter } from 'react-feather'
@@ -98,13 +99,13 @@ export default function ShareButton(tokenInfo: TokenInfo) {
               toCopy={window.location.href}
               ref={copyHelperRef}
             >
-              Copy Link
+              <Trans>Copy Link</Trans>
             </CopyHelper>
           </ShareAction>
 
           <ShareAction onClick={shareTweet}>
             <Twitter color={theme.textPrimary} size={20} strokeWidth={1.5} />
-            Share to Twitter
+            <Trans>Share to Twitter</Trans>
           </ShareAction>
         </ShareActions>
       )}

src/components/Tokens/TokenDetails/TokenDetail.tsx

@@ -245,7 +245,7 @@ export default function LoadedTokenDetail({ address }: { address: string }) {
         <StatsSection>
           <StatPair>
             <Stat>
-              Market cap
+              <Trans>Market cap</Trans>
               <StatPrice>
                 {tokenDetailData.marketCap?.value ? formatDollarAmount(tokenDetailData.marketCap?.value) : '-'}
               </StatPrice>
@@ -275,7 +275,7 @@ export default function LoadedTokenDetail({ address }: { address: string }) {
         <AboutSection address={address} tokenDetailData={relevantTokenDetailData} />
         <ContractAddressSection>
           <Contract>
-            Contract address
+            <Trans>Contract address</Trans>
             <ContractAddress>
               <CopyContractAddress address={address} />
             </ContractAddress>

src/components/Tokens/TokenTable/FavoriteButton.tsx

+import { Trans } from '@lingui/macro'
 import { useAtom } from 'jotai'
 import { Heart } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
@@ -38,7 +39,9 @@ export default function FavoriteButton() {
     <StyledFavoriteButton onClick={() => setShowFavorites(!showFavorites)} active={showFavorites}>
       <FavoriteButtonContent>
         <Heart size={17} color={showFavorites ? theme.white : theme.textPrimary} fill="transparent" />
-        <FavoriteText>Favorites</FavoriteText>
+        <FavoriteText>
+          <Trans>Favorites</Trans>
+        </FavoriteText>
       </FavoriteButtonContent>
     </StyledFavoriteButton>
   )

src/components/Tokens/TokenTable/TokenTable.tsx

+import { Trans } from '@lingui/macro'
 import {
   favoritesAtom,
   filterStringAtom,
@@ -161,7 +162,7 @@ export default function TokenTable({ data }: { data: TokenData[] | undefined })
         message={
           <>
             <AlertTriangle size={16} />
-            An error occured loading tokens. Please try again.
+            <Trans>An error occured loading tokens. Please try again.</Trans>
           </>
         }
       />
@@ -169,11 +170,11 @@ export default function TokenTable({ data }: { data: TokenData[] | undefined })
   }
 
   if (showFavorites && sortedFilteredTokens?.length === 0) {
-    return <NoTokensState message="You have no favorited tokens" />
+    return <NoTokensState message={<Trans>You have no favorited tokens</Trans>} />
   }
 
   if (!showFavorites && sortedFilteredTokens?.length === 0) {
-    return <NoTokensState message="No tokens found" />
+    return <NoTokensState message={<Trans>No tokens found</Trans>} />
   }
 
   return (