From acb2f1f2dfa63e0ad790a0a689d30a3c61243430 Mon Sep 17 00:00:00 2001
From: totop716 <totop716@gmail.com>
Date: Sun, 2 Jan 2022 22:44:06 -0500
Subject: [PATCH] add a modal to find pool, update question helper icon and fix
 issue with modal.

---
 src/assets/images/HelpIcon2.svg               |   1 -
 src/components/AddLiquidity/AddLiquidity.tsx  |  56 ++--
 .../PoolFinderModal/PoolFinderModal.tsx       | 243 ++++++++++++++++++
 src/components/PoolFinderModal/index.ts       |   1 +
 src/components/PositionCard/PositionCard.tsx  |  85 +++---
 .../QuestionHelper/QuestionHelper.tsx         |  29 ++-
 src/components/Swap/Swap.tsx                  |  40 +--
 src/components/index.ts                       |   1 +
 src/pages/PoolsPage/PoolsPage.tsx             |  47 +++-
 src/pages/SwapPage/SwapPage.tsx               |  10 +-
 10 files changed, 407 insertions(+), 106 deletions(-)
 delete mode 100644 src/assets/images/HelpIcon2.svg
 create mode 100644 src/components/PoolFinderModal/PoolFinderModal.tsx
 create mode 100644 src/components/PoolFinderModal/index.ts

diff --git a/src/assets/images/HelpIcon2.svg b/src/assets/images/HelpIcon2.svg
deleted file mode 100644
index e220c249c..000000000
--- a/src/assets/images/HelpIcon2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg data-name="Component 22" xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect data-name="Rectangle 18293" width="40" height="40" rx="20" style="fill:none"/><path data-name="Path 11563" d="M13.386-5.53c0-1.585-1.147-2.4-2.9-2.4a4.786 4.786 0 0 0-2.941.98l.209 1.335a4.308 4.308 0 0 1 2.586-1c.959 0 1.5.417 1.5 1.147 0 .772-.521 1.21-2 1.752l-.417.146.167 1.9.98-.188.083-.918c1.524-.502 2.733-1.253 2.733-2.754zM10.884 1.1V-.567H9.278V1.1zM.352-3.194a9.814 9.814 0 0 0 9.99 10.01 9.819 9.819 0 0 0 10.01-10.01 9.789 9.789 0 0 0-10.01-9.99 9.784 9.784 0 0 0-9.99 9.99zm1.376 0a8.486 8.486 0 0 1 8.613-8.676 8.486 8.486 0 0 1 8.613 8.676 8.491 8.491 0 0 1-8.613 8.7 8.491 8.491 0 0 1-8.613-8.7z" transform="translate(10.148 23.684)" style="fill:#696c80"/></svg>
\ No newline at end of file
diff --git a/src/components/AddLiquidity/AddLiquidity.tsx b/src/components/AddLiquidity/AddLiquidity.tsx
index 2fe32827c..a630e0b3d 100755
--- a/src/components/AddLiquidity/AddLiquidity.tsx
+++ b/src/components/AddLiquidity/AddLiquidity.tsx
@@ -426,33 +426,35 @@ const AddLiquidity: React.FC<{
 
   return (
     <Box>
-      <TransactionConfirmationModal
-        isOpen={showConfirm}
-        onDismiss={handleDismissConfirmation}
-        attemptingTxn={attemptingTxn}
-        txPending={txPending}
-        hash={txHash}
-        content={() =>
-          addLiquidityErrorMessage ? (
-            <TransactionErrorContent
-              onDismiss={handleDismissConfirmation}
-              message={addLiquidityErrorMessage}
-            />
-          ) : (
-            <ConfirmationModalContent
-              title='Supplying Liquidity'
-              onDismiss={handleDismissConfirmation}
-              content={modalHeader}
-            />
-          )
-        }
-        pendingText={pendingText}
-        modalContent={
-          txPending
-            ? 'Submitted transaction to add liquidity'
-            : 'Successfully added liquidity'
-        }
-      />
+      {showConfirm && (
+        <TransactionConfirmationModal
+          isOpen={showConfirm}
+          onDismiss={handleDismissConfirmation}
+          attemptingTxn={attemptingTxn}
+          txPending={txPending}
+          hash={txHash}
+          content={() =>
+            addLiquidityErrorMessage ? (
+              <TransactionErrorContent
+                onDismiss={handleDismissConfirmation}
+                message={addLiquidityErrorMessage}
+              />
+            ) : (
+              <ConfirmationModalContent
+                title='Supplying Liquidity'
+                onDismiss={handleDismissConfirmation}
+                content={modalHeader}
+              />
+            )
+          }
+          pendingText={pendingText}
+          modalContent={
+            txPending
+              ? 'Submitted transaction to add liquidity'
+              : 'Successfully added liquidity'
+          }
+        />
+      )}
       <CurrencyInput
         title='Token 1:'
         currency={currencies[Field.CURRENCY_A]}
diff --git a/src/components/PoolFinderModal/PoolFinderModal.tsx b/src/components/PoolFinderModal/PoolFinderModal.tsx
new file mode 100644
index 000000000..820d162a5
--- /dev/null
+++ b/src/components/PoolFinderModal/PoolFinderModal.tsx
@@ -0,0 +1,243 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Currency, TokenAmount, ETHER, JSBI } from '@uniswap/sdk';
+import { ArrowLeft, Plus } from 'react-feather';
+import { Box, Typography } from '@material-ui/core';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import {
+  CustomModal,
+  CurrencyLogo,
+  CurrencySearchModal,
+  MinimalPositionCard,
+} from 'components';
+import { useTokenBalance } from 'state/wallet/hooks';
+import { usePair, PairState } from 'data/Reserves';
+import { usePairAdder } from 'state/user/hooks';
+import { useActiveWeb3React } from 'hooks';
+import { currencyId } from 'utils';
+import { ReactComponent as CloseIcon } from 'assets/images/CloseIcon.svg';
+import { Link } from 'react-router-dom';
+
+const useStyles = makeStyles(({ palette }) => ({
+  borderedCard: {
+    border: `1px solid ${palette.divider}`,
+    padding: 8,
+    borderRadius: 10,
+    cursor: 'pointer',
+    '&:hover': {
+      border: `1px solid ${palette.text.primary}`,
+    },
+  },
+}));
+
+enum Fields {
+  TOKEN0 = 0,
+  TOKEN1 = 1,
+}
+
+interface PoolFinderModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const PoolFinderModal: React.FC<PoolFinderModalProps> = ({ open, onClose }) => {
+  const classes = useStyles();
+  const { palette } = useTheme();
+
+  const { account } = useActiveWeb3React();
+
+  const [showSearch, setShowSearch] = useState<boolean>(false);
+  const [activeField, setActiveField] = useState<number>(Fields.TOKEN1);
+
+  const [currency0, setCurrency0] = useState<Currency | null>(ETHER);
+  const [currency1, setCurrency1] = useState<Currency | null>(null);
+
+  const [pairState, pair] = usePair(
+    currency0 ?? undefined,
+    currency1 ?? undefined,
+  );
+  const addPair = usePairAdder();
+  useEffect(() => {
+    if (pair) {
+      addPair(pair);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pair?.liquidityToken.address, addPair]);
+
+  const validPairNoLiquidity: boolean =
+    pairState === PairState.NOT_EXISTS ||
+    Boolean(
+      pairState === PairState.EXISTS &&
+        pair &&
+        JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) &&
+        JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0)),
+    );
+
+  const position: TokenAmount | undefined = useTokenBalance(
+    account ?? undefined,
+    pair?.liquidityToken,
+  );
+  const hasPosition = Boolean(
+    position && JSBI.greaterThan(position.raw, JSBI.BigInt(0)),
+  );
+
+  const handleCurrencySelect = useCallback(
+    (currency: Currency) => {
+      if (activeField === Fields.TOKEN0) {
+        setCurrency0(currency);
+      } else {
+        setCurrency1(currency);
+      }
+    },
+    [activeField],
+  );
+
+  const handleSearchDismiss = useCallback(() => {
+    setShowSearch(false);
+  }, [setShowSearch]);
+
+  return (
+    <CustomModal open={open} onClose={onClose}>
+      <Box paddingX={3} paddingY={4}>
+        <Box display='flex' alignItems='center' justifyContent='space-between'>
+          <ArrowLeft
+            color={palette.text.secondary}
+            style={{ cursor: 'pointer' }}
+            onClick={onClose}
+          />
+          <Typography
+            variant='subtitle2'
+            style={{ color: palette.text.primary }}
+          >
+            Import Pool
+          </Typography>
+          <CloseIcon style={{ cursor: 'pointer' }} onClick={onClose} />
+        </Box>
+        <Box
+          mt={2}
+          className={classes.borderedCard}
+          onClick={() => {
+            setShowSearch(true);
+            setActiveField(Fields.TOKEN0);
+          }}
+        >
+          {currency0 ? (
+            <Box display='flex' alignItems='center'>
+              <CurrencyLogo currency={currency0} size='20px' />
+              <Typography variant='h6' style={{ marginLeft: 6 }}>
+                {currency0.symbol}
+              </Typography>
+            </Box>
+          ) : (
+            <Typography variant='h6'>Select a Token</Typography>
+          )}
+        </Box>
+        <Box my={1} display='flex' justifyContent='center'>
+          <Plus size='20' color={palette.text.secondary} />
+        </Box>
+        <Box
+          className={classes.borderedCard}
+          onClick={() => {
+            setShowSearch(true);
+            setActiveField(Fields.TOKEN1);
+          }}
+        >
+          {currency1 ? (
+            <Box display='flex'>
+              <CurrencyLogo currency={currency1} />
+              <Typography variant='h6' style={{ marginLeft: 6 }}>
+                {currency1.symbol}
+              </Typography>
+            </Box>
+          ) : (
+            <Typography variant='h6'>Select a Token</Typography>
+          )}
+        </Box>
+        {hasPosition && (
+          <Box textAlign='center' mt={2}>
+            <Typography variant='body1'>Pool Found!</Typography>
+            <Typography
+              variant='body1'
+              style={{ cursor: 'pointer', color: palette.primary.main }}
+              onClick={onClose}
+            >
+              Manage this pool.
+            </Typography>
+          </Box>
+        )}
+        <Box
+          mt={2}
+          p={1}
+          borderRadius={10}
+          display='flex'
+          justifyContent='center'
+          border={`1px solid ${palette.divider}`}
+        >
+          {currency0 && currency1 ? (
+            pairState === PairState.EXISTS ? (
+              hasPosition && pair ? (
+                <MinimalPositionCard pair={pair} border='none' />
+              ) : (
+                <Box textAlign='center'>
+                  <Typography>
+                    You don’t have liquidity in this pool yet.
+                  </Typography>
+                  <Link
+                    to={`/pools?currency0=${currencyId(
+                      currency0,
+                    )}&currency1=${currencyId(currency1)}`}
+                    style={{
+                      color: palette.primary.main,
+                      textDecoration: 'none',
+                    }}
+                    onClick={onClose}
+                  >
+                    <Typography>Add liquidity.</Typography>
+                  </Link>
+                </Box>
+              )
+            ) : validPairNoLiquidity ? (
+              <Box textAlign='center'>
+                <Typography>No pool found.</Typography>
+                <Link
+                  to={`/pools?currency0=${currencyId(
+                    currency0,
+                  )}&currency1=${currencyId(currency1)}`}
+                  style={{
+                    color: palette.primary.main,
+                    textDecoration: 'none',
+                  }}
+                  onClick={onClose}
+                >
+                  Create pool.
+                </Link>
+              </Box>
+            ) : pairState === PairState.INVALID ? (
+              <Typography>Invalid pair.</Typography>
+            ) : pairState === PairState.LOADING ? (
+              <Typography>Loading...</Typography>
+            ) : null
+          ) : (
+            <Typography>
+              {!account
+                ? 'Connect to a wallet to find pools'
+                : 'Select a token to find your liquidity.'}
+            </Typography>
+          )}
+        </Box>
+      </Box>
+      {showSearch && (
+        <CurrencySearchModal
+          isOpen={showSearch}
+          onCurrencySelect={handleCurrencySelect}
+          onDismiss={handleSearchDismiss}
+          showCommonBases
+          selectedCurrency={
+            (activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined
+          }
+        />
+      )}
+    </CustomModal>
+  );
+};
+
+export default PoolFinderModal;
diff --git a/src/components/PoolFinderModal/index.ts b/src/components/PoolFinderModal/index.ts
new file mode 100644
index 000000000..566650e58
--- /dev/null
+++ b/src/components/PoolFinderModal/index.ts
@@ -0,0 +1 @@
+export { default } from './PoolFinderModal';
diff --git a/src/components/PositionCard/PositionCard.tsx b/src/components/PositionCard/PositionCard.tsx
index 82c5c8157..d1f051176 100755
--- a/src/components/PositionCard/PositionCard.tsx
+++ b/src/components/PositionCard/PositionCard.tsx
@@ -13,7 +13,7 @@ import { CurrencyLogo, DoubleCurrencyLogo } from 'components';
 
 const useStyles = makeStyles(({ palette }) => ({
   minimalCardWrapper: {
-    border: `1px solid ${palette.divider}`,
+    width: '100%',
     borderRadius: 16,
     padding: 12,
     '& p': {
@@ -31,6 +31,7 @@ interface PositionCardProps {
 
 export const MinimalPositionCard: React.FC<PositionCardProps> = ({
   pair,
+  border,
   showUnwrapped = false,
 }) => {
   const { account } = useActiveWeb3React();
@@ -77,54 +78,68 @@ export const MinimalPositionCard: React.FC<PositionCardProps> = ({
       : [undefined, undefined];
 
   return (
-    <Box className={classes.minimalCardWrapper}>
+    <Box className={classes.minimalCardWrapper} border={border}>
       {userPoolBalance &&
       JSBI.greaterThan(userPoolBalance.raw, JSBI.BigInt(0)) ? (
         <Box>
           <Typography>Your position</Typography>
-          <Box onClick={() => setShowMore(!showMore)}>
-            <Box>
+          <Box
+            mt={0.75}
+            display='flex'
+            justifyContent='space-between'
+            onClick={() => setShowMore(!showMore)}
+          >
+            <Box display='flex' alignItems='center'>
               <DoubleCurrencyLogo
                 currency0={currency0}
                 currency1={currency1}
                 margin={true}
                 size={20}
               />
-              <Typography>
+              <Typography style={{ marginLeft: 6 }}>
                 {currency0.symbol}/{currency1.symbol}
               </Typography>
             </Box>
-            <Box>
-              <Typography>
-                {userPoolBalance ? userPoolBalance.toSignificant(4) : '-'}
-              </Typography>
-            </Box>
+            <Typography>
+              {userPoolBalance ? userPoolBalance.toSignificant(4) : '-'}
+            </Typography>
           </Box>
-          <Box>
-            <Box>
-              <Typography>Your pool share:</Typography>
-              <Typography>
-                {poolTokenPercentage
-                  ? poolTokenPercentage.toFixed(6) + '%'
-                  : '-'}
-              </Typography>
-            </Box>
-            <Box>
-              <Typography>{currency0.symbol}:</Typography>
-              {token0Deposited ? (
-                <Typography>{token0Deposited?.toSignificant(6)}</Typography>
-              ) : (
-                '-'
-              )}
-            </Box>
-            <Box>
-              <Typography>{currency1.symbol}:</Typography>
-              {token1Deposited ? (
-                <Typography>{token1Deposited?.toSignificant(6)}</Typography>
-              ) : (
-                '-'
-              )}
-            </Box>
+          <Box
+            mt={0.75}
+            display='flex'
+            alignItems='center'
+            justifyContent='space-between'
+          >
+            <Typography>Your pool share:</Typography>
+            <Typography>
+              {poolTokenPercentage ? poolTokenPercentage.toFixed(6) + '%' : '-'}
+            </Typography>
+          </Box>
+          <Box
+            mt={0.75}
+            display='flex'
+            alignItems='center'
+            justifyContent='space-between'
+          >
+            <Typography>{currency0.symbol}:</Typography>
+            {token0Deposited ? (
+              <Typography>{token0Deposited?.toSignificant(6)}</Typography>
+            ) : (
+              '-'
+            )}
+          </Box>
+          <Box
+            mt={0.75}
+            display='flex'
+            alignItems='center'
+            justifyContent='space-between'
+          >
+            <Typography>{currency1.symbol}:</Typography>
+            {token1Deposited ? (
+              <Typography>{token1Deposited?.toSignificant(6)}</Typography>
+            ) : (
+              '-'
+            )}
           </Box>
         </Box>
       ) : (
diff --git a/src/components/QuestionHelper/QuestionHelper.tsx b/src/components/QuestionHelper/QuestionHelper.tsx
index 2b947d876..75ae8b25f 100755
--- a/src/components/QuestionHelper/QuestionHelper.tsx
+++ b/src/components/QuestionHelper/QuestionHelper.tsx
@@ -15,7 +15,7 @@ const useStyles = makeStyles(({ palette }) => ({
     outline: 'none',
     cursor: 'default',
     borderRadius: 36,
-    color: palette.text.primary,
+    color: (props: any) => (props.color ? props.color : palette.text.primary),
     '&:hover, &:focus': {
       opacity: 0.7,
     },
@@ -32,7 +32,7 @@ const useStyles = makeStyles(({ palette }) => ({
     borderRadius: 36,
     width: 24,
     height: 24,
-    color: 'white',
+    color: (props: any) => (props.color ? props.color : 'white'),
     '&:hover, &:focus': {
       opacity: 0.7,
     },
@@ -42,11 +42,12 @@ const useStyles = makeStyles(({ palette }) => ({
   },
 }));
 
-const QuestionHelper: React.FC<{ text: string; size?: number }> = ({
-  text,
-  size = 16,
-}) => {
-  const classes = useStyles();
+const QuestionHelper: React.FC<{
+  text: string;
+  size?: number;
+  color?: string;
+}> = ({ text, size = 16, color }) => {
+  const classes = useStyles({ color });
 
   return (
     <CustomTooltip title={text}>
@@ -59,8 +60,11 @@ const QuestionHelper: React.FC<{ text: string; size?: number }> = ({
 
 export default QuestionHelper;
 
-export const PlusHelper: React.FC<{ text: string }> = ({ text }) => {
-  const classes = useStyles();
+export const PlusHelper: React.FC<{ text: string; color?: string }> = ({
+  text,
+  color,
+}) => {
+  const classes = useStyles({ color });
 
   return (
     <CustomTooltip title={text}>
@@ -71,8 +75,11 @@ export const PlusHelper: React.FC<{ text: string }> = ({ text }) => {
   );
 };
 
-export const LightQuestionHelper: React.FC<{ text: string }> = ({ text }) => {
-  const classes = useStyles();
+export const LightQuestionHelper: React.FC<{ text: string; color: string }> = ({
+  text,
+  color,
+}) => {
+  const classes = useStyles({ color });
 
   return (
     <CustomTooltip title={text}>
diff --git a/src/components/Swap/Swap.tsx b/src/components/Swap/Swap.tsx
index 075df1965..3834b680e 100755
--- a/src/components/Swap/Swap.tsx
+++ b/src/components/Swap/Swap.tsx
@@ -531,24 +531,28 @@ const Swap: React.FC<{
 
   return (
     <Box>
-      <SettingsModal
-        open={openSettingsModal}
-        onClose={() => setOpenSettingsModal(false)}
-      />
-      <ConfirmSwapModal
-        isOpen={showConfirm}
-        trade={trade}
-        originalTrade={tradeToConfirm}
-        onAcceptChanges={handleAcceptChanges}
-        attemptingTxn={attemptingTxn}
-        txPending={txPending}
-        txHash={txHash}
-        recipient={recipient}
-        allowedSlippage={allowedSlippage}
-        onConfirm={handleSwap}
-        swapErrorMessage={swapErrorMessage}
-        onDismiss={handleConfirmDismiss}
-      />
+      {openSettingsModal && (
+        <SettingsModal
+          open={openSettingsModal}
+          onClose={() => setOpenSettingsModal(false)}
+        />
+      )}
+      {showConfirm && (
+        <ConfirmSwapModal
+          isOpen={showConfirm}
+          trade={trade}
+          originalTrade={tradeToConfirm}
+          onAcceptChanges={handleAcceptChanges}
+          attemptingTxn={attemptingTxn}
+          txPending={txPending}
+          txHash={txHash}
+          recipient={recipient}
+          allowedSlippage={allowedSlippage}
+          onConfirm={handleSwap}
+          swapErrorMessage={swapErrorMessage}
+          onDismiss={handleConfirmDismiss}
+        />
+      )}
       <CurrencyInput
         title='From:'
         currency={currencies[Field.INPUT]}
diff --git a/src/components/index.ts b/src/components/index.ts
index 43590fa9d..b65f532f9 100755
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -50,3 +50,4 @@ export { default as TopMovers } from './TopMovers';
 export { default as TokensTable } from './TokensTable';
 export { default as PairTable } from './PairsTable';
 export { default as TransactionsTable } from './TransactionsTable';
+export { default as PoolFinderModal } from './PoolFinderModal';
diff --git a/src/pages/PoolsPage/PoolsPage.tsx b/src/pages/PoolsPage/PoolsPage.tsx
index 72d443225..d72f39ce6 100755
--- a/src/pages/PoolsPage/PoolsPage.tsx
+++ b/src/pages/PoolsPage/PoolsPage.tsx
@@ -1,13 +1,18 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Pair, Currency } from '@uniswap/sdk';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { Box, Grid, Typography } from '@material-ui/core';
 import Skeleton from '@material-ui/lab/Skeleton';
 import { ReactComponent as HelpIcon } from 'assets/images/HelpIcon1.svg';
-import { ReactComponent as HelpIconLarge } from 'assets/images/HelpIcon2.svg';
 import { ReactComponent as SettingsIcon } from 'assets/images/SettingsIcon.svg';
 import NoLiquidity from 'assets/images/NoLiquidityPool.png';
-import { AddLiquidity, PoolPositionCard, SettingsModal } from 'components';
+import {
+  AddLiquidity,
+  PoolFinderModal,
+  PoolPositionCard,
+  QuestionHelper,
+  SettingsModal,
+} from 'components';
 import { useActiveWeb3React } from 'hooks';
 import useParsedQueryString from 'hooks/useParsedQueryString';
 import { useCurrency } from 'hooks/Tokens';
@@ -57,8 +62,10 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
 
 const PoolsPage: React.FC = () => {
   const classes = useStyles();
+  const { palette } = useTheme();
   const { account } = useActiveWeb3React();
   const [openSettingsModal, setOpenSettingsModal] = useState(false);
+  const [openPoolFinder, setOpenPoolFinder] = useState(false);
   const parsedQuery = useParsedQueryString();
   const qCurrency0 = useCurrency(
     parsedQuery && parsedQuery.currency0
@@ -125,10 +132,18 @@ const PoolsPage: React.FC = () => {
 
   return (
     <Box width='100%' mb={3}>
-      <SettingsModal
-        open={openSettingsModal}
-        onClose={() => setOpenSettingsModal(false)}
-      />
+      {openSettingsModal && (
+        <SettingsModal
+          open={openSettingsModal}
+          onClose={() => setOpenSettingsModal(false)}
+        />
+      )}
+      {openPoolFinder && (
+        <PoolFinderModal
+          open={openPoolFinder}
+          onClose={() => setOpenPoolFinder(false)}
+        />
+      )}
       <Box
         mb={2}
         display='flex'
@@ -155,7 +170,11 @@ const PoolsPage: React.FC = () => {
               </Typography>
               <Box display='flex' alignItems='center'>
                 <Box className={classes.headingItem}>
-                  <HelpIconLarge />
+                  <QuestionHelper
+                    size={24}
+                    color={palette.text.secondary}
+                    text='When you add liquidity, you are given pool tokens representing your position. These tokens automatically earn fees proportional to your share of the pool, and can be redeemed at any time.'
+                  />
                 </Box>
                 <Box className={classes.headingItem}>
                   <SettingsIcon onClick={() => setOpenSettingsModal(true)} />
@@ -180,7 +199,11 @@ const PoolsPage: React.FC = () => {
               ) : allV2PairsWithLiquidity.length > 0 ? (
                 <Box>
                   <Typography variant='body2' className={classes.liquidityText}>
-                    Don’t see a pool you joined? <span>Import it</span>.<br />
+                    Don’t see a pool you joined?{' '}
+                    <span onClick={() => setOpenPoolFinder(true)}>
+                      Import it
+                    </span>
+                    .<br />
                     Unstake your LP Tokens from Farms to see them here.
                   </Typography>
                   {allV2PairsWithLiquidity.map((pair, ind) => (
@@ -207,7 +230,11 @@ const PoolsPage: React.FC = () => {
                     className={classes.noLiquidityImage}
                   />
                   <Typography variant='body2' className={classes.liquidityText}>
-                    Don’t see a pool you joined? <span>Import it</span>.<br />
+                    Don’t see a pool you joined?{' '}
+                    <span onClick={() => setOpenPoolFinder(true)}>
+                      Import it
+                    </span>
+                    .<br />
                     Unstake your LP Tokens from Farms to see them here.
                   </Typography>
                 </Box>
diff --git a/src/pages/SwapPage/SwapPage.tsx b/src/pages/SwapPage/SwapPage.tsx
index 76717887b..6c4fe507a 100755
--- a/src/pages/SwapPage/SwapPage.tsx
+++ b/src/pages/SwapPage/SwapPage.tsx
@@ -275,10 +275,12 @@ const SwapPage: React.FC = () => {
 
   return (
     <Box width='100%' mb={3}>
-      <SettingsModal
-        open={openSettingsModal}
-        onClose={() => setOpenSettingsModal(false)}
-      />
+      {openSettingsModal && (
+        <SettingsModal
+          open={openSettingsModal}
+          onClose={() => setOpenSettingsModal(false)}
+        />
+      )}
       <Box
         mb={2}
         display='flex'