Skip to content

update token select on liquidity page #372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mintdart wants to merge 1 commit into
base: master
Choose a base branch
from
Open

update token select on liquidity page #372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/components/Aggregator/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 =
Expand Down
12 changes: 6 additions & 6 deletions src/hooks/useQueryParams.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -15,22 +15,22 @@ 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
if (isConnected && chainOnWallet && chain) {
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 }
Expand All @@ -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 }
Expand All @@ -49,5 +49,5 @@ export function useQueryParams() {
}
}, [chainOnURL, chainOnWallet, isConnected, router]);

return { chainName, fromTokenAddress, toTokenAddress };
return useMemo(() => ({ chainName, fromTokenAddress, toTokenAddress }), [chainName, fromTokenAddress, toTokenAddress]);
}
104 changes: 42 additions & 62 deletions src/pages/token-liquidity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<IToken> = 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 (
<Layout title={`Token Liquidity - LlamaSwap`} defaultSEO>
Expand All @@ -86,19 +53,16 @@ export default function TokenLiquidity({ tokenlist }) {
<FormLabel htmlFor="privacy-switch" pb="0" lineHeight={1}>
From
</FormLabel>
<ReactSelect
options={chainTokenList}
value={selectedFromToken}
onChange={onFromTokenChange}
style={{ flex: 1 }}
/>
<SelectWrapper>
<TokenSelect onClick={onFromTokenChange} type="amountIn" />
</SelectWrapper>
</FormControl>
<IconButton
onClick={() =>
router.push(
{
pathname: router.pathname,
query: { ...router.query, to: fromToken, from: toToken }
query: { ...router.query, to: finalSelectedFromToken?.address, from: finalSelectedToToken?.address }
},
undefined,
{ shallow: true }
Expand All @@ -114,19 +78,35 @@ export default function TokenLiquidity({ tokenlist }) {
<FormLabel htmlFor="privacy-switch" pb="0" lineHeight={1}>
To
</FormLabel>
<ReactSelect
options={chainTokenList}
value={selectedToToken}
onChange={onToTokenChange}
style={{ flex: 1 }}
/>
<SelectWrapper>
<TokenSelect onClick={onToTokenChange} type="amountOut" />
</SelectWrapper>
</FormControl>
</Flex>
</Flex>

{selectedChain && selectedFromToken && selectedToToken && (
<LiquidityByToken fromToken={selectedFromToken} toToken={selectedToToken} chain={chainName} />
{selectedChain && finalSelectedFromToken && finalSelectedToToken && (
<LiquidityByToken
fromToken={finalSelectedFromToken}
toToken={finalSelectedToToken}
chain={selectedChain.value}
/>
)}
</Layout>
);
}

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};
}
`;