refactor: Make get token address multichain compatible (#7538)

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!--
copilot:all
-->
### <samp>🤖 Generated by Copilot at 37f8e35</samp>

### Summary
🌐🪙📊

<!--
1. 🌐 - This emoji represents the multi chain functionality and the use
of the `useActiveChainId` hook.
2. 🪙 - This emoji represents the use of the `@pancakeswap/sdk` constants
for native and wrapped native tokens, and the token address logic.
3. 📊 - This emoji represents the chart utils and the swap hooks that
were updated.
-->
The pull request enhances the swap functionality and the chart utils to
support multiple chains. It uses the `@pancakeswap/sdk` constants and
the `useActiveChainId` hook to fetch the correct token addresses based
on the chainId.

> _`useSingleTokenSwapInfo`_
> _Multi chain support added_
> _Winter of pancakes_

### Walkthrough
* Make `useSingleTokenSwapInfo` hook multi chain compatible by using
`useActiveChainId` and `getTokenAddress`
([link](https://github.com/pancakeswap/pancake-frontend/pull/7538/files?diff=unified&w=0#diff-9c9d1c7d1b4f2fd3accab05994fc9d38a2f7c292a12354fa2fdf9811ca25b390L59-R61))
* Replace `BNB_ADDRESS` with `NATIVE` and `WNATIVE` constants in
`utils.ts` to make the chart logic more generic and adaptable to
different chains
([link](https://github.com/pancakeswap/pancake-frontend/pull/7538/files?diff=unified&w=0#diff-603c4522fbc2af7a727f678261bb07adcb46d9c05fbda40b4348683caf19e142L1-R1))

apps/web/src/state/swap/hooks.ts

@@ -56,8 +56,9 @@ export function useSingleTokenSwapInfo(
   outputCurrencyId: string | undefined,
   outputCurrency: Currency | undefined,
 ): { [key: string]: number } {
-  const token0Address = useMemo(() => getTokenAddress(inputCurrencyId), [inputCurrencyId])
-  const token1Address = useMemo(() => getTokenAddress(outputCurrencyId), [outputCurrencyId])
+  const { chainId } = useActiveChainId()
+  const token0Address = useMemo(() => getTokenAddress(chainId, inputCurrencyId), [chainId, inputCurrencyId])
+  const token1Address = useMemo(() => getTokenAddress(chainId, outputCurrencyId), [chainId, outputCurrencyId])
 
   const amount = useMemo(() => tryParseAmount('1', inputCurrency ?? undefined), [inputCurrency])
 

apps/web/src/views/Swap/components/Chart/utils.ts

@@ -1,4 +1,4 @@
-import { BNB_ADDRESS } from './constants'
+import { NATIVE, WNATIVE } from '@pancakeswap/sdk'
 
 const MIN_VALUE_DISPLAYED = 0.001
 
@@ -23,17 +23,15 @@ export const getTimeWindowChange = (lineChartData) => {
   }
 }
 
-/**
- *
- * @deprecated not multi chain compatible
- */
-export const getTokenAddress = (tokenAddress: undefined | string) => {
-  if (!tokenAddress) {
+export const getTokenAddress = (chainId: number, tokenAddress: undefined | string) => {
+  if (!tokenAddress || !chainId) {
     return ''
   }
   const lowerCaseAddress = tokenAddress.toLowerCase()
-  if (lowerCaseAddress === 'bnb') {
-    return BNB_ADDRESS
+  const nativeToken = NATIVE[chainId]
+  const nativeSymbol = nativeToken?.symbol?.toLowerCase() || ''
+  if (lowerCaseAddress === nativeSymbol) {
+    return WNATIVE[chainId].address
   }
 
   return lowerCaseAddress