fix(search modal): prevent overlapping tooltips, always render lists

This commit is contained in:
Moody Salem 2020-05-23 20:14:41 -04:00
parent 27b103e3f7
commit bbdc258083
No known key found for this signature in database
GPG Key ID: 8CB5CD10385138DB
2 changed files with 23 additions and 24 deletions

@ -22,12 +22,12 @@ const QuestionWrapper = styled.div`
} }
` `
export default function QuestionHelper({ text }: { text: string }) { export default function QuestionHelper({ text, disabled }: { text: string; disabled?: boolean }) {
const [showPopup, setShowPopup] = useState<boolean>(false) const [showPopup, setShowPopup] = useState<boolean>(false)
return ( return (
<span style={{ marginLeft: 4 }}> <span style={{ marginLeft: 4 }}>
<Tooltip text={text} showPopup={showPopup}> <Tooltip text={text} showPopup={showPopup && !disabled}>
<QuestionWrapper <QuestionWrapper
onClick={() => { onClick={() => {
setShowPopup(true) setShowPopup(true)

@ -143,6 +143,7 @@ function SearchModal({
<Text fontWeight={500} fontSize={16}> <Text fontWeight={500} fontSize={16}>
{isTokenView ? 'Select a token' : 'Select a pool'} {isTokenView ? 'Select a token' : 'Select a pool'}
<QuestionHelper <QuestionHelper
disabled={tooltipOpen}
text={ text={
isTokenView isTokenView
? 'Find a token by searching for its name or symbol or by pasting its address below.' ? 'Find a token by searching for its name or symbol or by pasting its address below.'
@ -183,8 +184,7 @@ function SearchModal({
</RowBetween> </RowBetween>
</PaddedColumn> </PaddedColumn>
<div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} /> <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />
{isTokenView {isTokenView ? (
? isOpen && (
<TokenList <TokenList
tokens={filteredTokens} tokens={filteredTokens}
allTokenBalances={allTokenBalances} allTokenBalances={allTokenBalances}
@ -195,8 +195,7 @@ function SearchModal({
selectedToken={hiddenToken} selectedToken={hiddenToken}
showSendWithSwap={showSendWithSwap} showSendWithSwap={showSendWithSwap}
/> />
) ) : (
: isOpen && (
<PairList <PairList
pairs={filteredPairs} pairs={filteredPairs}
focusTokenAddress={focusedToken?.address} focusTokenAddress={focusedToken?.address}