diff --git a/apps/ton/src/components/TonSwap/SearchModal/CurrencyList.tsx b/apps/ton/src/components/TonSwap/SearchModal/CurrencyList.tsx index 435dd533656fe..f666a6e0ab38d 100644 --- a/apps/ton/src/components/TonSwap/SearchModal/CurrencyList.tsx +++ b/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 ( diff --git a/apps/ton/src/components/TonSwap/SwapDetails/SwapRoute.tsx b/apps/ton/src/components/TonSwap/SwapDetails/SwapRoute.tsx index 622aba6804421..a823a9c80b437 100644 --- a/apps/ton/src/components/TonSwap/SwapDetails/SwapRoute.tsx +++ b/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 | null @@ -13,12 +14,12 @@ export const SwapRoute = ({ trade }: AdvancedSwapDetailsProps) => { {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 - + - {token.symbol} + {symbol} {!isLastItem && } @@ -26,5 +27,7 @@ export const SwapRoute = ({ trade }: AdvancedSwapDetailsProps) => { ) })} - ) : null + ) : ( + '-' + ) } diff --git a/apps/ton/src/ton/logic/liquidity/useRemoveLiquidity.ts b/apps/ton/src/ton/logic/liquidity/useRemoveLiquidity.ts index f39ea71d1ace8..e648d7154384e 100644 --- a/apps/ton/src/ton/logic/liquidity/useRemoveLiquidity.ts +++ b/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 } diff --git a/apps/ton/src/ton/utils/tokenOrder.ts b/apps/ton/src/ton/utils/tokenOrder.ts index c9f9d03088ea4..88647c72f9109 100644 --- a/apps/ton/src/ton/utils/tokenOrder.ts +++ b/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 } diff --git a/apps/ton/src/utils/getLink.ts b/apps/ton/src/utils/getLink.ts new file mode 100644 index 0000000000000..33202b116b4aa --- /dev/null +++ b/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}` +} diff --git a/apps/ton/src/utils/tokens/currency.ts b/apps/ton/src/utils/tokens/currency.ts index 175c770128c4a..44d7c8a2fd957 100644 --- a/apps/ton/src/utils/tokens/currency.ts +++ b/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() export async function fetchTokenByAddress(address: string, chainId: TonChainId): Promise { - 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) diff --git a/apps/ton/src/utils/tokens/unwrappedToken.ts b/apps/ton/src/utils/tokens/unwrappedToken.ts new file mode 100644 index 0000000000000..d7a3f3438c33a --- /dev/null +++ b/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 +} diff --git a/apps/ton/src/views/TONLiquidity/LiquidityCard/LiquidityRow.tsx b/apps/ton/src/views/TONLiquidity/LiquidityCard/LiquidityRow.tsx index 66134b5713333..b7e2ecabd2293 100644 --- a/apps/ton/src/views/TONLiquidity/LiquidityCard/LiquidityRow.tsx +++ b/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 ( <> @@ -113,10 +120,10 @@ export const LiquidityRow = ({ )} - + }>{t('Add')} - + }>{t('Remove')} diff --git a/apps/ton/src/views/TONRemoveLiquidity/RemoveLiquidityCard/CardContent.tsx b/apps/ton/src/views/TONRemoveLiquidity/RemoveLiquidityCard/CardContent.tsx index 1a1c16466a7bb..0cfee91f8833c 100644 --- a/apps/ton/src/views/TONRemoveLiquidity/RemoveLiquidityCard/CardContent.tsx +++ b/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, }), )