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)
return (
<span style={{ marginLeft: 4 }}>
<Tooltip text={text} showPopup={showPopup}>
<Tooltip text={text} showPopup={showPopup && !disabled}>
<QuestionWrapper
onClick={() => {
setShowPopup(true)

@ -143,6 +143,7 @@ function SearchModal({
<Text fontWeight={500} fontSize={16}>
{isTokenView ? 'Select a token' : 'Select a pool'}
<QuestionHelper
disabled={tooltipOpen}
text={
isTokenView
? 'Find a token by searching for its name or symbol or by pasting its address below.'
@ -183,28 +184,26 @@ function SearchModal({
</RowBetween>
</PaddedColumn>
<div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />
{isTokenView
? isOpen && (
<TokenList
tokens={filteredTokens}
allTokenBalances={allTokenBalances}
onRemoveAddedToken={removeTokenByAddress}
onTokenSelect={_onTokenSelect}
otherSelectedText={otherSelectedText}
otherToken={otherSelectedTokenAddress}
selectedToken={hiddenToken}
showSendWithSwap={showSendWithSwap}
/>
)
: isOpen && (
<PairList
pairs={filteredPairs}
focusTokenAddress={focusedToken?.address}
onAddLiquidity={selectPair}
onSelectPair={selectPair}
pairBalances={allPairBalances}
/>
)}
{isTokenView ? (
<TokenList
tokens={filteredTokens}
allTokenBalances={allTokenBalances}
onRemoveAddedToken={removeTokenByAddress}
onTokenSelect={_onTokenSelect}
otherSelectedText={otherSelectedText}
otherToken={otherSelectedTokenAddress}
selectedToken={hiddenToken}
showSendWithSwap={showSendWithSwap}
/>
) : (
<PairList
pairs={filteredPairs}
focusTokenAddress={focusedToken?.address}
onAddLiquidity={selectPair}
onSelectPair={selectPair}
pairBalances={allPairBalances}
/>
)}
<div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />
<Card>
<AutoRow justify={'center'}>