From 40a7cea6f655b9429cf9e31d8038cddab6712abb Mon Sep 17 00:00:00 2001 From: Ian Lapham Date: Fri, 8 May 2020 17:22:19 -0400 Subject: [PATCH] Bug fixes, UI tweaks (#738) * linking bug fixes, search UI tweaks * search style tweaks * organize imports --- src/components/NavigationTabs/index.tsx | 2 +- src/components/PoolFinder/index.tsx | 2 +- src/components/SearchModal/index.tsx | 70 ++++++++++++++----------- src/pages/Pool/AddLiquidity.tsx | 40 ++++++++++++-- 4 files changed, 75 insertions(+), 39 deletions(-) diff --git a/src/components/NavigationTabs/index.tsx b/src/components/NavigationTabs/index.tsx index b7b27c6503..1ae335e6a4 100644 --- a/src/components/NavigationTabs/index.tsx +++ b/src/components/NavigationTabs/index.tsx @@ -106,7 +106,7 @@ function NavigationTabs({ location: { pathname }, history }: RouteComponentProps {adding || removing ? ( - history.goBack()}> + history.push('/pool')}> {adding ? 'Add' : 'Remove'} Liquidity diff --git a/src/components/PoolFinder/index.tsx b/src/components/PoolFinder/index.tsx index 32716998ec..7b0b159333 100644 --- a/src/components/PoolFinder/index.tsx +++ b/src/components/PoolFinder/index.tsx @@ -181,7 +181,7 @@ function PoolFinder({ history }: RouteComponentProps) { ) : ( - + Select a token pair to find your liquidity. diff --git a/src/components/SearchModal/index.tsx b/src/components/SearchModal/index.tsx index 99dd173c56..a1c918873d 100644 --- a/src/components/SearchModal/index.tsx +++ b/src/components/SearchModal/index.tsx @@ -8,6 +8,7 @@ import { RouteComponentProps, withRouter } from 'react-router-dom' import { COMMON_BASES } from '../../constants' import { Link as StyledLink } from '../../theme/components' +import Card from '../../components/Card' import Modal from '../Modal' import Circle from '../../assets/images/circle.svg' import TokenLogo from '../TokenLogo' @@ -18,7 +19,6 @@ import { Hover } from '../../theme' import { ArrowLeft, X } from 'react-feather' import { CloseIcon } from '../../theme/components' import { ColumnCenter } from '../Column' -import Card from '../../components/Card' import { ButtonPrimary } from '../../components/Button' import { Spinner, TYPE } from '../../theme' import { RowBetween, RowFixed, AutoRow } from '../Row' @@ -39,11 +39,12 @@ const TokenModalInfo = styled.div` margin: 0.25rem 0.5rem; justify-content: center; user-select: none; + min-height: 200px; ` -const TokenList = styled.div` +const ItemList = styled.div` flex-grow: 1; - height: 100%; + height: 240px; overflow-y: scroll; -webkit-overflow-scrolling: touch; ` @@ -332,21 +333,24 @@ function SearchModal({ } const token0 = allTokens[pair.token0] const token1 = allTokens[pair.token1] - const regexMatches = Object.keys(token0).map(field => { - if ( - (field === 'address' && isAddress) || - (field === 'name' && !isAddress) || - (field === 'symbol' && !isAddress) - ) { - return ( - token0[field].match(new RegExp(escapeStringRegexp(searchQuery), 'i')) || - token1[field].match(new RegExp(escapeStringRegexp(searchQuery), 'i')) - ) - } - return false - }) - - return regexMatches.some(m => m) + if (!token0 || !token1) { + return false // no token fetched yet + } else { + const regexMatches = Object.keys(token0).map(field => { + if ( + (field === 'address' && isAddress) || + (field === 'name' && !isAddress) || + (field === 'symbol' && !isAddress) + ) { + return ( + token0[field].match(new RegExp(escapeStringRegexp(searchQuery), 'i')) || + token1[field].match(new RegExp(escapeStringRegexp(searchQuery), 'i')) + ) + } + return false + }) + return regexMatches.some(m => m) + } }) }, [allPairs, allTokens, searchQuery, sortedPairList]) @@ -430,19 +434,21 @@ function SearchModal({ } else { return {t('noToken')} } - } - // TODO is this the right place to link to create exchange? - // else if (isAddress(searchQuery) && tokenAddress === ethers.constants.AddressZero) { - // return ( - // <> - // {t('noToken')} - // - // {t('createExchange')} - // - // - // ) - // } - else { + } else { + /** + * @TODO + // TODO is this the right place to link to create exchange? + // else if (isAddress(searchQuery) && tokenAddress === ethers.constants.AddressZero) { + // return ( + // <> + // {t('noToken')} + // + // {t('createExchange')} + // + // + // ) + // } + */ return filteredTokenList .sort((a, b) => { if (b?.address === WETH[chainId]?.address) { @@ -635,7 +641,7 @@ function SearchModal({ )} {!showTokenImport &&
} - {!showTokenImport && {filterType === 'tokens' ? renderTokenList() : renderPairsList()}} + {!showTokenImport && {filterType === 'tokens' ? renderTokenList() : renderPairsList()}} {!showTokenImport &&
} {!showTokenImport && ( diff --git a/src/pages/Pool/AddLiquidity.tsx b/src/pages/Pool/AddLiquidity.tsx index 05d1828232..66ed77f1e6 100644 --- a/src/pages/Pool/AddLiquidity.tsx +++ b/src/pages/Pool/AddLiquidity.tsx @@ -30,6 +30,8 @@ import { useTransactionAdder, usePendingApproval } from '../../contexts/Transact import { ROUTER_ADDRESS } from '../../constants' import { getRouterContract, calculateGasMargin, isWETH } from '../../utils' import { BigNumber } from '@ethersproject/bignumber' +import { useLocalStorageTokens } from '../../contexts/LocalStorage' +import { useAllTokens } from '../../contexts/Tokens' // denominated in bips const ALLOWED_SLIPPAGE = 50 @@ -182,6 +184,30 @@ function AddLiquidity({ token0, token1 }: AddLiquidityProps) { [Field.OUTPUT]: useToken(fieldData[Field.OUTPUT].address) } + // ensure input + output tokens are added to localstorage + const [, { fetchTokenByAddress, addToken }] = useLocalStorageTokens() + const allTokens = useAllTokens() + const inputTokenAddress = fieldData[Field.INPUT].address + useEffect(() => { + if (inputTokenAddress && !Object.keys(allTokens).some(tokenAddress => tokenAddress === inputTokenAddress)) { + fetchTokenByAddress(inputTokenAddress).then(token => { + if (token !== null) { + addToken(token) + } + }) + } + }, [inputTokenAddress, allTokens, fetchTokenByAddress, addToken]) + const outputTokenAddress = fieldData[Field.OUTPUT].address + useEffect(() => { + if (outputTokenAddress && !Object.keys(allTokens).some(tokenAddress => tokenAddress === outputTokenAddress)) { + fetchTokenByAddress(outputTokenAddress).then(token => { + if (token !== null) { + addToken(token) + } + }) + } + }, [outputTokenAddress, allTokens, fetchTokenByAddress, addToken]) + // token contracts for approvals and direct sends const tokenContractInput: Contract = useTokenContract(tokens[Field.INPUT]?.address) const tokenContractOutput: Contract = useTokenContract(tokens[Field.OUTPUT]?.address) @@ -225,11 +251,15 @@ function AddLiquidity({ token0, token1 }: AddLiquidityProps) { newNonRelationalAmounts[Field.INPUT] = null } } else { - const typedValueParsed = parseUnits(typedValue, tokens[independentField].decimals).toString() - if (independentField === Field.OUTPUT) { - newNonRelationalAmounts[Field.OUTPUT] = new TokenAmount(tokens[independentField], typedValueParsed) - } else { - newNonRelationalAmounts[Field.INPUT] = new TokenAmount(tokens[independentField], typedValueParsed) + try { + const typedValueParsed = parseUnits(typedValue, tokens[independentField].decimals).toString() + if (independentField === Field.OUTPUT) { + newNonRelationalAmounts[Field.OUTPUT] = new TokenAmount(tokens[independentField], typedValueParsed) + } else { + newNonRelationalAmounts[Field.INPUT] = new TokenAmount(tokens[independentField], typedValueParsed) + } + } catch (error) { + console.log(error) } } setNonrelationalAmounts(newNonRelationalAmounts)