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

src/components/QuestionHelper/index.tsx

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

src/components/SearchModal/index.tsx

@@ -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
+        {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 }} />
         <Card>
           <AutoRow justify={'center'}>