fix: update pTON to TON (#11276)

<!-- start pr-codex -->

## PR-Codex overview
This PR primarily focuses on enhancing the handling of tokens and
liquidity in the application. It introduces functions for unwrapping
tokens and generating liquidity links, while also refining the logic for
displaying token balances and managing native tokens.

### Detailed summary
- Added `unwrappedToken` function to handle token unwrapping.
- Modified balance calculation to use `useMemo` for performance.
- Implemented `getAddLiquidityLink` and `getRemoveLiquidityLink`
functions.
- Updated token order logic to use wrapped token addresses.
- Adjusted liquidity removal logic to consistently use wrapped token
addresses.
- Enhanced `currencyKey` function to utilize unwrapped tokens.
- Refined SwapRoute component to display unwrapped token symbols.
- Improved LiquidityRow component to use unwrapped token symbols and
updated liquidity link generation.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

apps/ton/src/components/TonSwap/SearchModal/CurrencyList.tsx

@@ -68,7 +68,10 @@ function CurrencyRow({
 
   const { data: balanceRaw, isLoading: isBalanceLoading } = useAtomValue(balanceAtom(currency))
 
-  const balance = formatBigInt(balanceRaw, currency.decimals, currency.decimals)
+  const balance = useMemo(
+    () => formatBigInt(balanceRaw, currency.decimals, currency.decimals),
+    [balanceRaw, currency.decimals],
+  )
 
   // only show add or remove buttons if not on selected list
   return (

apps/ton/src/components/TonSwap/SwapDetails/SwapRoute.tsx

@@ -2,6 +2,7 @@ import { TradeType } from '@pancakeswap/swap-sdk-core'
 import { Currency, Trade } from '@pancakeswap/ton-v2-sdk'
 import { ChevronRightIcon, Flex, Text } from '@pancakeswap/uikit'
 import { Fragment } from 'react'
+import { unwrappedToken } from 'utils/tokens/unwrappedToken'
 
 export interface AdvancedSwapDetailsProps {
   trade?: Trade<Currency, Currency, TradeType> | null
@@ -13,18 +14,20 @@ export const SwapRoute = ({ trade }: AdvancedSwapDetailsProps) => {
     <Flex flexWrap="wrap" width="100%" justifyContent="flex-end" alignItems="center">
       {trade.route.path.map((token, i, path) => {
         const isLastItem: boolean = i === path.length - 1
+        const symbol = unwrappedToken(token)?.symbol ?? token.symbol
         return (
-          // eslint-disable-next-line react/no-array-index-key
-          <Fragment key={i}>
+          <Fragment key={token.wrapped.address}>
             <Flex alignItems="end">
               <Text fontSize="14px" ml="0.125rem" mr="0.125rem">
-                {token.symbol}
+                {symbol}
               </Text>
             </Flex>
             {!isLastItem && <ChevronRightIcon width="12px" />}
           </Fragment>
         )
       })}
     </Flex>
-  ) : null
+  ) : (
+    '-'
+  )
 }

apps/ton/src/ton/logic/liquidity/useRemoveLiquidity.ts

@@ -32,11 +32,10 @@ export const useRemoveLiquidity = ({ currency0, currency1, amount0ToBurn, amount
 
   const [slippage] = useUserSlippage()
 
-  // TODO: Check Native handling
   const poolAddress = useAtomValue(
     poolAddressAtom({
-      token0Address: currency0?.isNative ? userAddress.toString() : currency0?.address.toString(),
-      token1Address: currency1?.isNative ? userAddress.toString() : currency1?.address.toString(),
+      token0Address: currency0?.wrapped.address.toString(),
+      token1Address: currency1?.wrapped.address.toString(),
     }),
   )
 
@@ -118,7 +117,18 @@ export const useRemoveLiquidity = ({ currency0, currency1, amount0ToBurn, amount
         resetAppModal()
       }
     },
-    [tonUI, userAddress, poolContract, setTxnModal, currency0, currency1, amount0ToBurn, amount1ToBurn, resetAppModal],
+    [
+      slippage,
+      tonUI,
+      userAddress,
+      poolContract,
+      setTxnModal,
+      currency0,
+      currency1,
+      amount0ToBurn,
+      amount1ToBurn,
+      resetAppModal,
+    ],
   )
 
   return { removeLiquidity }

apps/ton/src/ton/utils/tokenOrder.ts

@@ -20,10 +20,7 @@ export async function getTokenOrder(chainId: TonChainId, token0Address: string,
 export async function getCurrencyOrder(currency0: Currency, currency1: Currency) {
   if (!currency0 || !currency1) return { currency0, currency1, isFlipped: false }
 
-  if (currency0.isNative) return { currency0, currency1, isFlipped: false }
-  if (currency1.isNative) return { currency0: currency1, currency1: currency0, isFlipped: true }
-
-  const result = await getTokenOrder(currency0.chainId, currency0.address, currency1.address)
+  const result = await getTokenOrder(currency0.chainId, currency0.wrapped.address, currency1.wrapped.address)
 
   return result.isFlipped
     ? { currency0: currency1, currency1: currency0, isFlipped: true }

apps/ton/src/utils/getLink.ts

@@ -0,0 +1,14 @@
+import { Currency } from '@pancakeswap/ton-v2-sdk'
+import { currencyKey } from './tokens/currency'
+
+export const getAddLiquidityLink = (currency0?: Currency, currency1?: Currency) => {
+  const key0 = currencyKey(currency0)
+  const key1 = currencyKey(currency1)
+  return `/liquidity/add/${key0}/${key1}`
+}
+
+export const getRemoveLiquidityLink = (currency0?: Currency, currency1?: Currency) => {
+  const key0 = currencyKey(currency0)
+  const key1 = currencyKey(currency1)
+  return `/liquidity/remove/${key0}/${key1}`
+}

apps/ton/src/utils/tokens/currency.ts

@@ -3,16 +3,17 @@ import { API_BASE_URL } from 'config/constants/endpoints'
 import mainnetList from 'public/lists/main.json'
 import testnetList from 'public/lists/testnet.json'
 import { ResultJettonData } from 'types/tonapi'
+import { unwrappedToken } from './unwrappedToken'
 
 export function currencyKey(currency?: Currency): string {
-  if (!currency) return 'UNKNOWN'
-  return currency.isNative ? currency.symbol : currency.address
+  const unwrapped = unwrappedToken(currency)
+  if (!unwrapped) return 'UNKNOWN'
+  return unwrapped.isNative ? unwrapped.symbol : unwrapped.address
 }
 
 const tokenCache = new Map<string, Currency>()
 export async function fetchTokenByAddress(address: string, chainId: TonChainId): Promise<Currency | undefined> {
-  if (address === Native.onChain(TonChainId.Mainnet).symbol) return Native.onChain(TonChainId.Mainnet)
-  if (address === Native.onChain(TonChainId.Testnet).symbol) return Native.onChain(TonChainId.Testnet)
+  if (address === Native.onChain(chainId).symbol) return Native.onChain(chainId)
 
   if (tokenCache.has(address)) return tokenCache.get(address)
 

apps/ton/src/utils/tokens/unwrappedToken.ts

@@ -0,0 +1,6 @@
+import { Currency, Native, WNATIVE } from '@pancakeswap/ton-v2-sdk'
+
+export function unwrappedToken(token?: Currency): Currency | undefined {
+  if (token && token.equals(WNATIVE[token.chainId as keyof typeof WNATIVE])) return Native.onChain(token.chainId)
+  return token
+}

apps/ton/src/views/TONLiquidity/LiquidityCard/LiquidityRow.tsx

@@ -9,10 +9,12 @@ import { Collapse } from 'components/widgets/swap-v2/Collapse'
 import { ADDRESS_CONCAT_LENGTH, LP_TOKEN_DECIMALS } from 'config/constants/formatting'
 import { useAtomValue } from 'jotai'
 import Link from 'next/link'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import styled from 'styled-components'
 import { formatBigNumber } from 'ton/utils/formatting'
 import { truncateHash } from 'utils'
+import { getAddLiquidityLink, getRemoveLiquidityLink } from 'utils/getLink'
+import { unwrappedToken } from 'utils/tokens/unwrappedToken'
 
 const StyledButton = styled(Button).attrs({ variant: 'tertiary', scale: 'sm' })`
   width: 100%;
@@ -48,13 +50,18 @@ export const LiquidityRow = ({
     setIsOpen(!isOpen)
   }, [isOpen, setIsOpen])
 
+  const [symbol0, symbol1] = useMemo(
+    () => [
+      unwrappedToken(currency0)?.symbol ?? currency0?.symbol ?? truncateHash(token0, ADDRESS_CONCAT_LENGTH),
+      unwrappedToken(currency1)?.symbol ?? currency1?.symbol ?? truncateHash(token1, ADDRESS_CONCAT_LENGTH),
+    ],
+    [currency0, currency1, token0, token1],
+  )
+
   if (!token0 || !token1) {
     return null
   }
 
-  const symbol0 = currency0?.symbol ?? truncateHash(token0, ADDRESS_CONCAT_LENGTH)
-  const symbol1 = currency1?.symbol ?? truncateHash(token1, ADDRESS_CONCAT_LENGTH)
-
   return (
     <>
       <LightCard>
@@ -113,10 +120,10 @@ export const LiquidityRow = ({
                 )}
               </Flex>
               <FlexGap mt="10px" justifyContent="space-between" gap="16px">
-                <Link href={`/liquidity/add/${token0}/${token1}`} style={{ width: '100%' }}>
+                <Link href={getAddLiquidityLink(currency0, currency1)} style={{ width: '100%' }}>
                   <StyledButton endIcon={<AddIcon color="primary60" />}>{t('Add')}</StyledButton>
                 </Link>
-                <Link href={`/liquidity/remove/${token0}/${token1}`} style={{ width: '100%' }}>
+                <Link href={getRemoveLiquidityLink(currency0, currency1)} style={{ width: '100%' }}>
                   <StyledButton endIcon={<MinusIcon color="primary60" />}>{t('Remove')}</StyledButton>
                 </Link>
               </FlexGap>

apps/ton/src/views/TONRemoveLiquidity/RemoveLiquidityCard/CardContent.tsx

@@ -74,7 +74,7 @@ export const CardContent = (props: CardContentProps) => {
   const { data: currency1_ } = useAtomValue(tokenByAddressQueryAtom(address1))
 
   const {
-    data: { currency0, currency1, isFlipped },
+    data: { currency0, currency1 },
   } = useQuery({
     queryKey: ['removeLiquidity_currencyOrder', currency0_, currency1_],
     queryFn: async () => {
@@ -93,12 +93,6 @@ export const CardContent = (props: CardContentProps) => {
     },
   })
 
-  console.log('RemoveLiquidity', {
-    currency0: currency0?.symbol,
-    currency1: currency1?.symbol,
-    isFlipped,
-  })
-
   const { data: lpBalance, isLoading: isLpBalanceLoading } = useAtomValue(
     lpBalanceQueryAtom({
       token0Address: currency0?.wrapped.address,
@@ -107,8 +101,8 @@ export const CardContent = (props: CardContentProps) => {
   )
   const { data: poolData, isLoading: isPoolDataLoading } = useAtomValue(
     poolDataQueryAtom({
-      token0Address: currency0?.isNative ? userAddress : currency0?.address,
-      token1Address: currency1?.isNative ? userAddress : currency1?.address,
+      token0Address: currency0?.wrapped.address,
+      token1Address: currency1?.wrapped.address,
     }),
   )