Commit bbdc2580 authored by Moody Salem's avatar Moody Salem

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

parent 27b103e3
...@@ -22,12 +22,12 @@ const QuestionWrapper = styled.div` ...@@ -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({ ...@@ -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,28 +184,26 @@ function SearchModal({ ...@@ -183,28 +184,26 @@ 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} onRemoveAddedToken={removeTokenByAddress}
onRemoveAddedToken={removeTokenByAddress} onTokenSelect={_onTokenSelect}
onTokenSelect={_onTokenSelect} otherSelectedText={otherSelectedText}
otherSelectedText={otherSelectedText} otherToken={otherSelectedTokenAddress}
otherToken={otherSelectedTokenAddress} selectedToken={hiddenToken}
selectedToken={hiddenToken} showSendWithSwap={showSendWithSwap}
showSendWithSwap={showSendWithSwap} />
/> ) : (
) <PairList
: isOpen && ( pairs={filteredPairs}
<PairList focusTokenAddress={focusedToken?.address}
pairs={filteredPairs} onAddLiquidity={selectPair}
focusTokenAddress={focusedToken?.address} onSelectPair={selectPair}
onAddLiquidity={selectPair} pairBalances={allPairBalances}
onSelectPair={selectPair} />
pairBalances={allPairBalances} )}
/>
)}
<div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} /> <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />
<Card> <Card>
<AutoRow justify={'center'}> <AutoRow justify={'center'}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment