feat: support NATIVE page for all supported chains (#4722)

support NATIVE page for all supported chains

src/constants/tokens.ts

@@ -388,6 +388,20 @@ export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token | undefined } =
     'WMATIC',
     'Wrapped MATIC'
   ),
+  [SupportedChainId.CELO]: new Token(
+    SupportedChainId.CELO,
+    '0x471ece3750da237f93b8e339c536989b8978a438',
+    18,
+    'CELO',
+    'Celo native asset'
+  ),
+  [SupportedChainId.CELO_ALFAJORES]: new Token(
+    SupportedChainId.CELO_ALFAJORES,
+    '0xf194afdf50b03e69bd7d057c1aa9e10c9954e4c9',
+    18,
+    'CELO',
+    'Celo native asset'
+  ),
 }
 
 export function isCelo(chainId: number): chainId is SupportedChainId.CELO | SupportedChainId.CELO_ALFAJORES {

src/pages/TokenDetails/index.tsx

@@ -112,29 +112,31 @@ export default function TokenDetails() {
   const token = useTokenQuery(tokenAddress ?? '', currentChainName, timePeriod).tokens?.[0]
 
   const navigate = useNavigate()
-  const switchChains = (newChain: Chain) => {
-    if (tokenAddressParam === 'NATIVE') {
-      navigate(`/tokens/${newChain.toLowerCase()}/NATIVE`)
-    } else {
-      token?.project?.tokens?.forEach((token) => {
-        if (token.chain === newChain && token.address) {
-          navigate(`/tokens/${newChain.toLowerCase()}/${token.address}`)
-        }
-      })
-    }
-  }
+  const switchChains = useCallback(
+    (newChain: Chain) => {
+      const chainSegment = newChain.toLowerCase()
+      if (tokenAddressParam === 'NATIVE') {
+        navigate(`/tokens/${chainSegment}/NATIVE`)
+      } else {
+        token?.project?.tokens?.forEach((token) => {
+          if (token.chain === newChain && token.address) {
+            navigate(`/tokens/${chainSegment}/${token.address}`)
+          }
+        })
+      }
+    },
+    [navigate, token?.project?.tokens, tokenAddressParam]
+  )
   useOnGlobalChainSwitch(switchChains)
 
   const [continueSwap, setContinueSwap] = useState<{ resolve: (value: boolean | PromiseLike<boolean>) => void }>()
 
-  // TODO: Make useToken() work on non-mainenet chains or replace this logic
   const shouldShowSpeedbump = !useIsUserAddedTokenOnChain(tokenAddress, chainId) && tokenWarning !== null
   // Show token safety modal if Swap-reviewing a warning token, at all times if the current token is blocked
-  const onReviewSwap = useCallback(() => {
-    return new Promise<boolean>((resolve) => {
-      shouldShowSpeedbump ? setContinueSwap({ resolve }) : resolve(true)
-    })
-  }, [shouldShowSpeedbump])
+  const onReviewSwap = useCallback(
+    () => new Promise<boolean>((resolve) => (shouldShowSpeedbump ? setContinueSwap({ resolve }) : resolve(true))),
+    [shouldShowSpeedbump]
+  )
 
   const onResolveSwap = useCallback(
     (value: boolean) => {
@@ -191,12 +193,6 @@ export default function TokenDetails() {
       ? new Token(CHAIN_NAME_TO_CHAIN_ID[currentChainName], token.address, 18, token.symbol, token.name)
       : undefined)
 
-  // TODO: Fix this logic to not automatically redirect on refresh, yet still catch invalid addresses
-  //const location = useLocation()
-  //if (token === undefined) {
-  //  return <Navigate to={{ ...location, pathname: '/tokens' }} replace />
-  //}
-
   return (
     <TokenDetailsLayout>
       {token && (