From aeebb9e98151ec9926d7536c8c0fd6946da0e696 Mon Sep 17 00:00:00 2001 From: mintdart <96025197+mintdart@users.noreply.github.com> Date: Fri, 3 Oct 2025 05:07:03 -0700 Subject: [PATCH] update token select on liquidity page --- src/components/Aggregator/index.tsx | 10 +-- src/hooks/useQueryParams.tsx | 12 ++-- src/pages/token-liquidity.tsx | 104 +++++++++++----------------- 3 files changed, 53 insertions(+), 73 deletions(-) diff --git a/src/components/Aggregator/index.tsx b/src/components/Aggregator/index.tsx index e31b8f4e..cba63ef4 100644 --- a/src/components/Aggregator/index.tsx +++ b/src/components/Aggregator/index.tsx @@ -1,4 +1,4 @@ -import { useRef, useState, Fragment, useEffect } from 'react'; +import { useRef, useState, Fragment, useEffect, useCallback } from 'react'; import { useMutation } from '@tanstack/react-query'; import { useAccount, useSignTypedData, useCapabilities, useSwitchChain, useBytecode } from 'wagmi'; import { useAddRecentTransaction, useConnectModal } from '@rainbow-me/rainbowkit'; @@ -548,18 +548,18 @@ export function AggregatorContainer() { if (switchChain) switchChain({ chainId: newChain.chainId }); }); }; - const onFromTokenChange = (token) => { + const onFromTokenChange = useCallback((token) => { setAggregator(null); router.push({ pathname: router.pathname, query: { ...router.query, from: token.address } }, undefined, { shallow: true }); - }; - const onToTokenChange = (token) => { + }, [router]); + const onToTokenChange = useCallback((token) => { setAggregator(null); router.push({ pathname: router.pathname, query: { ...router.query, to: token?.address || undefined } }, undefined, { shallow: true }); - }; + }, [router]); useEffect(() => { const isUnknown = diff --git a/src/hooks/useQueryParams.tsx b/src/hooks/useQueryParams.tsx index 8561d9a5..867762e9 100644 --- a/src/hooks/useQueryParams.tsx +++ b/src/hooks/useQueryParams.tsx @@ -1,5 +1,5 @@ import { useRouter } from 'next/router'; -import { useEffect } from 'react'; +import { useEffect, useMemo } from 'react'; import { zeroAddress } from 'viem'; import { useAccount } from 'wagmi'; import { getAllChains } from '~/components/Aggregator/router'; @@ -15,14 +15,14 @@ export function useQueryParams() { const fromToken = urlParams.get('from'); const chainOnURL = urlParams.get('chain'); - const { ...query } = router.query; + const chainName = typeof chainOnURL === 'string' ? chainOnURL.toLowerCase() : 'ethereum'; const fromTokenAddress = typeof fromToken === 'string' ? fromToken.toLowerCase() : null; const toTokenAddress = typeof toToken === 'string' ? toToken.toLowerCase() : null; useEffect(() => { - if (router.isReady && !chainOnURL) { + if (router.isReady && router.pathname !== '/token-liquidity' && !chainOnURL) { const chain = chainOnWallet ? chains.find((c) => c.chainId === chainOnWallet.id) : null; // redirects to chain on wallet if supported @@ -30,7 +30,7 @@ export function useQueryParams() { router.push( { pathname: '/', - query: { ...query, chain: chain.value, from: zeroAddress, tab: 'swap' } + query: { ...router.query, chain: chain.value, from: zeroAddress, tab: 'swap' } }, undefined, { shallow: true } @@ -40,7 +40,7 @@ export function useQueryParams() { router.push( { pathname: '/', - query: { ...query, chain: 'ethereum', from: zeroAddress, tab: 'swap' } + query: { ...router.query, chain: 'ethereum', from: zeroAddress, tab: 'swap' } }, undefined, { shallow: true } @@ -49,5 +49,5 @@ export function useQueryParams() { } }, [chainOnURL, chainOnWallet, isConnected, router]); - return { chainName, fromTokenAddress, toTokenAddress }; + return useMemo(() => ({ chainName, fromTokenAddress, toTokenAddress }), [chainName, fromTokenAddress, toTokenAddress]); } diff --git a/src/pages/token-liquidity.tsx b/src/pages/token-liquidity.tsx index 002e00da..576022ef 100644 --- a/src/pages/token-liquidity.tsx +++ b/src/pages/token-liquidity.tsx @@ -1,73 +1,40 @@ import * as React from 'react'; import { useRouter } from 'next/router'; +import { useCallback } from 'react'; import { Flex, FormControl, FormLabel, Heading, IconButton } from '@chakra-ui/react'; import Layout from '~/layout'; -import { chainsMap } from '~/components/Aggregator/constants'; import ReactSelect from '~/components/MultiSelect'; import { getAllChains } from '~/components/Aggregator/router'; import { LiquidityByToken } from '~/components/LiquidityByToken'; -import type { IToken } from '~/types'; import { ArrowRight } from 'react-feather'; -import { getTokenList } from '~/props/getTokenList'; - -export async function getStaticProps() { - const tokenlist = await getTokenList(); - return { props: { tokenlist } }; -} +import { useSelectedChainAndTokens } from '~/hooks/useSelectedChainAndTokens'; +import { TokenSelect } from '~/components/InputAmountAndTokenSelect/TokenSelect'; +import styled from 'styled-components'; const chains = getAllChains(); -export default function TokenLiquidity({ tokenlist }) { +export default function TokenLiquidity() { const router = useRouter(); - const { chain, from: fromToken, to: toToken } = router.query; - - const chainName = typeof chain === 'string' ? chain.toLowerCase() : 'ethereum'; - const fromTokenSymbol = typeof fromToken === 'string' ? fromToken.toLowerCase() : null; - const toTokenSymbol = typeof toToken === 'string' ? toToken.toLowerCase() : null; - - const { selectedChain, selectedFromToken, selectedToToken, chainTokenList } = React.useMemo(() => { - const tokenList: Array = tokenlist && chainName ? tokenlist[chainsMap[chainName]] || [] : null; - - const selectedChain = chains.find((c) => c.value === chainName); + const { finalSelectedFromToken, finalSelectedToToken, selectedChain } = useSelectedChainAndTokens(); - const selectedFromToken = tokenList?.find( - (t) => t.symbol.toLowerCase() === fromTokenSymbol || t.address.toLowerCase() === fromTokenSymbol - ); - - const selectedToToken = tokenList?.find( - (t) => t.symbol.toLowerCase() === toTokenSymbol || t.address.toLowerCase() === toTokenSymbol - ); - - return { - selectedChain, - selectedFromToken: selectedFromToken - ? { ...selectedFromToken, label: selectedFromToken.symbol, value: selectedFromToken.address } - : null, - selectedToToken: selectedToToken - ? { ...selectedToToken, label: selectedToToken.symbol, value: selectedToToken.address } - : null, - chainTokenList: tokenList - }; - }, [chainName, fromTokenSymbol, toTokenSymbol, tokenlist]); - - const onChainChange = (chain) => { + const onChainChange = useCallback((chain) => { router.push({ pathname: router.pathname, query: { ...router.query, chain: chain.value } }, undefined, { shallow: true }); - }; + }, [router]); - const onFromTokenChange = (token) => { - router.push({ pathname: router.pathname, query: { ...router.query, from: token.symbol } }, undefined, { + const onFromTokenChange = useCallback((token) => { + router.push({ pathname: router.pathname, query: { ...router.query, from: token.address } }, undefined, { shallow: true }); - }; + }, [router]); - const onToTokenChange = (token) => { - router.push({ pathname: router.pathname, query: { ...router.query, to: token.symbol } }, undefined, { + const onToTokenChange = useCallback((token) => { + router.push({ pathname: router.pathname, query: { ...router.query, to: token.address } }, undefined, { shallow: true }); - }; + }, [router]); return ( @@ -86,19 +53,16 @@ export default function TokenLiquidity({ tokenlist }) { From - + + + router.push( { pathname: router.pathname, - query: { ...router.query, to: fromToken, from: toToken } + query: { ...router.query, to: finalSelectedFromToken?.address, from: finalSelectedToToken?.address } }, undefined, { shallow: true } @@ -114,19 +78,35 @@ export default function TokenLiquidity({ tokenlist }) { To - + + + - {selectedChain && selectedFromToken && selectedToToken && ( - + {selectedChain && finalSelectedFromToken && finalSelectedToToken && ( + )} ); } + +const SelectWrapper = styled.span` + width: 100%; + & > *:first-child { + width: 100%; + max-width: 100%; + box-shadow: + 0px 24px 32px rgba(0, 0, 0, 0.04), + 0px 16px 24px rgba(0, 0, 0, 0.04), + 0px 4px 8px rgba(0, 0, 0, 0.04), + 0px 0px 1px rgba(0, 0, 0, 0.04); + border-radius: 12px; + background: ${({ theme }) => theme.bg6}; + } +`;