ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug fixes, UI tweaks (#738)

Browse Source 
* linking bug fixes, search UI tweaks

* search style tweaks

* organize imports
This commit is contained in:
Ian Lapham 2020-05-08 17:22:19 -04:00 committed by GitHub
parent e023a02037
commit 40a7cea6f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 75 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/NavigationTabs/index.tsx
View File

@ -106,7 +106,7 @@ function NavigationTabs({ location: { pathname }, history }: RouteComponentProps
{adding || removing ? (
<Tabs>
<RowBetween style={{ padding: '1rem 1rem 0 1rem' }}>
<Hover onClick={() => history.goBack()}>
<Hover onClick={() => history.push('/pool')}>
<ArrowLink />
</Hover>
<ActiveText>{adding ? 'Add' : 'Remove'} Liquidity</ActiveText>

2
src/components/PoolFinder/index.tsx
View File

@ -181,7 +181,7 @@ function PoolFinder({ history }: RouteComponentProps) {
</AutoColumn>
</LightCard>
) : (
<LightCard bg="rgba(255, 255, 255, 0.6)" padding={'45px'}>
<LightCard padding={'45px'}>
<Text color="#C3C5CB" textAlign="center">
Select a token pair to find your liquidity.
</Text>

70
src/components/SearchModal/index.tsx
View File

@ -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 <TokenModalInfo>{t('noToken')}</TokenModalInfo>
}
}
// TODO is this the right place to link to create exchange?
// else if (isAddress(searchQuery) && tokenAddress === ethers.constants.AddressZero) {
// return (
// <>
// <TokenModalInfo>{t('noToken')}</TokenModalInfo>
// <TokenModalInfo>
// <Link to={`/create-exchange/${searchQuery}`}>{t('createExchange')}</Link>
// </TokenModalInfo>
// </>
// )
// }
else {
} else {
/**
* @TODO
// TODO is this the right place to link to create exchange?
// else if (isAddress(searchQuery) && tokenAddress === ethers.constants.AddressZero) {
// return (
// <>
// <TokenModalInfo>{t('noToken')}</TokenModalInfo>
// <TokenModalInfo>
// <Link to={`/create-exchange/${searchQuery}`}>{t('createExchange')}</Link>
// </TokenModalInfo>
// </>
// )
// }
*/
return filteredTokenList
.sort((a, b) => {
if (b?.address === WETH[chainId]?.address) {
@ -635,7 +641,7 @@ function SearchModal({
</PaddedColumn>
)}
{!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />}
{!showTokenImport && <TokenList>{filterType === 'tokens' ? renderTokenList() : renderPairsList()}</TokenList>}
{!showTokenImport && <ItemList>{filterType === 'tokens' ? renderTokenList() : renderPairsList()}</ItemList>}
{!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />}
{!showTokenImport && (
<Card>

40
src/pages/Pool/AddLiquidity.tsx
View File

@ -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)