From 484b1aa02c7e0780b5bfea3d14106568def8d04c Mon Sep 17 00:00:00 2001 From: nick134 Date: Fri, 18 Aug 2023 16:39:20 +0200 Subject: [PATCH 1/2] fix: deeplinks --- components/Pages/Swap/Swap.tsx | 135 ++++++++++++++++++--------------- 1 file changed, 72 insertions(+), 63 deletions(-) diff --git a/components/Pages/Swap/Swap.tsx b/components/Pages/Swap/Swap.tsx index 4f625347..749a0f29 100644 --- a/components/Pages/Swap/Swap.tsx +++ b/components/Pages/Swap/Swap.tsx @@ -22,6 +22,7 @@ type SwapProps = { } const Swap: FC = ({}) => { + const router = useRouter() const [[tokenA, tokenB], setTokenSwapState] = useRecoilState(tokenSwapAtom) const [reverse, setReverse] = useState(false) @@ -30,35 +31,34 @@ const Swap: FC = ({}) => { const { chainId, address, network, status } = useRecoilValue(walletState) const chains: Array = useChains() const { tx, simulated, state, path, minReceive } = useSwap({ reverse }) - const { data: poolList } = usePoolsListQuery() - const router = useRouter() + const { 'data': poolList } = usePoolsListQuery() const currentChain = chains.find((row) => row.chainId === chainId) const currentChainId = currentChain?.label.toLowerCase() const tokenList = useMemo(() => { let listObj = {} const { pools = [] } = poolList || {} - pools - .map(({ pool_assets }) => pool_assets) - .map(([a, b]) => { - listObj = { ...listObj, [a.symbol]: a, [b.symbol]: b } + pools. + map(({ pool_assets }) => pool_assets). + map(([a, b]) => { + listObj = { ...listObj, + [a.symbol]: a, + [b.symbol]: b } }) return Object.keys(listObj).map((row) => ({ - symbol: listObj[row].symbol, - decimals: listObj[row].decimals, - amount: 0, + 'symbol': listObj[row].symbol, + 'decimals': listObj[row].decimals, + 'amount': 0 })) // eslint-disable-next-line react-hooks/exhaustive-deps }, [poolList, chainId]) - const tokenSymbols = useMemo( - () => tokenList.map((token) => token.symbol), - [tokenList] - ) + const tokenSymbols = useMemo(() => tokenList.map((token) => token.symbol), + [tokenList]) useEffect(() => { - if (!currentChainId) { + if (!currentChainId || tokenList.length === 0) { return } const { from, to } = router.query @@ -66,59 +66,68 @@ const Swap: FC = ({}) => { let newState: TokenItemState[] = [ { - tokenSymbol: String(from), - amount: 0, - decimals: 6, + 'tokenSymbol': String(from), + 'amount': 0, + 'decimals': 6 }, { - tokenSymbol: String(to), - amount: 0, - decimals: 6, - }, - ] - if (tokenSymbols.includes(from) && tokenSymbols.includes(to)) { - return - } - newState = [ - { - tokenSymbol: String(defaultFrom.tokenSymbol), - amount: 0, - decimals: 6, - }, - { - tokenSymbol: String(defaultTo.tokenSymbol), - amount: 0, - decimals: 6, - }, + 'tokenSymbol': String(to), + 'amount': 0, + 'decimals': 6 + } ] - setResetForm(true) - - setTokenSwapState(newState) - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [address, currentChainId, tokenList]) - - useEffect(() => { - if (!currentChainId) { - return - } - - if (tokenA?.tokenSymbol !== null && tokenB?.tokenSymbol !== null) { - if ( - tokenSymbols.includes(tokenA.tokenSymbol) && - tokenSymbols.includes(tokenB.tokenSymbol) - ) { + + if (!from || !to) { + if (tokenA.tokenSymbol && tokenB.tokenSymbol) { const url = `/${currentChainId}/swap?from=${tokenA.tokenSymbol}&to=${tokenB.tokenSymbol}` + router.push(url) + } else { + newState = [ + { + 'tokenSymbol': String(defaultFrom.tokenSymbol), + 'amount': 0, + 'decimals': 6 + }, + { + 'tokenSymbol': String(defaultTo.tokenSymbol), + 'amount': 0, + 'decimals': 6 + } + ] + const url = `/${currentChainId}/swap?from=${defaultFrom.tokenSymbol}&to=${defaultTo.tokenSymbol}` router.push(url) + setTokenSwapState(newState) + setResetForm(true) } + } else if (tokenSymbols.includes(String(from)) && tokenSymbols.includes(String(to))) { + setTokenSwapState(newState) + } else { + newState = [ + { + 'tokenSymbol': String(defaultFrom.tokenSymbol), + 'amount': 0, + 'decimals': 6 + }, + { + 'tokenSymbol': String(defaultTo.tokenSymbol), + 'amount': 0, + 'decimals': 6 + } + ] + setResetForm(true) + setTokenSwapState(newState) } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [tokenA, tokenB]) + }, [address, currentChainId, tokenList]) + + const clearForm = (reset) => { setTokenSwapState([ - { ...tokenA, amount: 0 }, - { ...tokenB, amount: 0 }, + { ...tokenA, + 'amount': 0 }, + { ...tokenB, + 'amount': 0 } ]) setResetForm(reset) } @@ -127,12 +136,11 @@ const Swap: FC = ({}) => { if (tx?.txStep === TxStep.Failed || tx?.txStep === TxStep.Success) { tx.reset() } - const newState: TokenItemState[] = [tokenA, tokenB] newState[index] = { tokenSymbol, - amount: Number(amount), - decimals: 6, + 'amount': Number(amount), + 'decimals': 6 } setTokenSwapState(newState) } @@ -140,11 +148,11 @@ const Swap: FC = ({}) => { const onReverseDirection = () => { const A = { ...tokenB, - amount: tokenA.amount || parseFloat(fromChainAmount(simulated?.amount)), + 'amount': tokenA.amount || parseFloat(fromChainAmount(simulated?.amount)) } const B = { ...tokenA, - amount: tokenB.amount || parseFloat(fromChainAmount(simulated?.amount)), + 'amount': tokenB.amount || parseFloat(fromChainAmount(simulated?.amount)) } setTokenSwapState([A, B]) @@ -152,7 +160,8 @@ const Swap: FC = ({}) => { return ( = ({}) => { justifyContent="space-between" width="full" paddingY={5} - paddingX={{ base: 4 }} + paddingX={{ 'base': 4 }} > Swap From 51e4432ed886c84300d3f18cfbc827593a678f5b Mon Sep 17 00:00:00 2001 From: nick134 Date: Fri, 18 Aug 2023 17:01:39 +0200 Subject: [PATCH 2/2] chore: reduce duplicate code --- components/Pages/Swap/Swap.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/components/Pages/Swap/Swap.tsx b/components/Pages/Swap/Swap.tsx index 749a0f29..efe535b6 100644 --- a/components/Pages/Swap/Swap.tsx +++ b/components/Pages/Swap/Swap.tsx @@ -35,6 +35,11 @@ const Swap: FC = ({}) => { const currentChain = chains.find((row) => row.chainId === chainId) const currentChainId = currentChain?.label.toLowerCase() + const changeUrl = (tokenSymbol1:string, tokenSymbol2:string) => { + const url = `/${currentChainId}/swap?from=${tokenSymbol1}&to=${tokenSymbol2}` + router.push(url) + } + const tokenList = useMemo(() => { let listObj = {} const { pools = [] } = poolList || {} @@ -79,8 +84,7 @@ const Swap: FC = ({}) => { if (!from || !to) { if (tokenA.tokenSymbol && tokenB.tokenSymbol) { - const url = `/${currentChainId}/swap?from=${tokenA.tokenSymbol}&to=${tokenB.tokenSymbol}` - router.push(url) + changeUrl(tokenA.tokenSymbol,tokenB.tokenSymbol) } else { newState = [ { @@ -94,8 +98,7 @@ const Swap: FC = ({}) => { 'decimals': 6 } ] - const url = `/${currentChainId}/swap?from=${defaultFrom.tokenSymbol}&to=${defaultTo.tokenSymbol}` - router.push(url) + changeUrl(defaultFrom.tokenSymbol,defaultTo.tokenSymbol) setTokenSwapState(newState) setResetForm(true) } @@ -129,6 +132,7 @@ const Swap: FC = ({}) => { { ...tokenB, 'amount': 0 } ]) + changeUrl(tokenA.tokenSymbol,tokenB.tokenSymbol) setResetForm(reset) } @@ -143,6 +147,7 @@ const Swap: FC = ({}) => { 'decimals': 6 } setTokenSwapState(newState) + changeUrl(newState[0].tokenSymbol,newState[1].tokenSymbol) } const onReverseDirection = () => { @@ -154,7 +159,7 @@ const Swap: FC = ({}) => { ...tokenA, 'amount': tokenB.amount || parseFloat(fromChainAmount(simulated?.amount)) } - + changeUrl(tokenB.tokenSymbol,tokenA.tokenSymbol) setTokenSwapState([A, B]) }