change open pool to landing page

Author: tienkane

src/components/EarnBanner/index.tsx

@@ -8,7 +8,6 @@ import earnLargeBg from 'assets/images/earn_background_large.png'
 import earnSmallBg from 'assets/images/earn_background_small.png'
 import { APP_PATHS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
-import useLiquidityWidget from 'pages/Earns/useLiquidityWidget'
 import { formatAprNumber } from 'pages/Earns/utils'
 
 const EarnBannerContainer = styled.div`
@@ -183,7 +182,6 @@ export default function EarnBanner() {
   const navigate = useNavigate()
   const { account } = useActiveWeb3React()
   const { data } = useExplorerLandingQuery({ userAddress: account })
-  const { liquidityWidget, handleOpenZapInWidget } = useLiquidityWidget()
 
   const [index, setIndex] = useState(0)
   const [animate, setAnimate] = useState(false)
@@ -202,41 +200,38 @@ export default function EarnBanner() {
   }, [])
 
   return (
-    <>
-      {liquidityWidget}
-      <EarnBannerContainer>
-        <EarnBannerWrapper onClick={() => navigate({ pathname: APP_PATHS.EARN })}>
-          <Description>
-            Explore and Add Liquidity to High-APR Pools <PrimaryText>Instantly</PrimaryText> with{' '}
-            <PrimaryText>Any Token(s)</PrimaryText> or <PrimaryText>Position</PrimaryText> you choose!
-          </Description>
-          <PoolButton
-            animate={animate}
-            onClick={e => {
-              if (!pool) return
-              e.stopPropagation()
-              handleOpenZapInWidget({ exchange: pool.exchange, chainId: pool.chainId, address: pool.address })
-            }}
-          >
-            {!!pool && (
-              <>
-                <Flex>
-                  <TokenImage src={pool.tokens[0].logoURI} alt="" />
-                  <TokenImage src={pool.tokens[1].logoURI} alt="" />
-                  <Text fontSize={18} marginLeft={2}>
-                    {pool.tokens[0].symbol}/{pool.tokens[1].symbol}
-                  </Text>
-                </Flex>
-                <PoolAprWrapper>
-                  <PoolApr>
-                    {formatAprNumber(pool.apr)}% <AprText>APR</AprText>
-                  </PoolApr>
-                </PoolAprWrapper>
-              </>
-            )}
-          </PoolButton>
-        </EarnBannerWrapper>
-      </EarnBannerContainer>
-    </>
+    <EarnBannerContainer>
+      <EarnBannerWrapper onClick={() => navigate({ pathname: APP_PATHS.EARN })}>
+        <Description>
+          Explore and Add Liquidity to High-APR Pools <PrimaryText>Instantly</PrimaryText> with{' '}
+          <PrimaryText>Any Token(s)</PrimaryText> or <PrimaryText>Position</PrimaryText> you choose!
+        </Description>
+        <PoolButton
+          animate={animate}
+          onClick={e => {
+            if (!pool) return
+            e.stopPropagation()
+            navigate({ pathname: APP_PATHS.EARN, search: `?openPool=${index}` })
+          }}
+        >
+          {!!pool && (
+            <>
+              <Flex>
+                <TokenImage src={pool.tokens[0].logoURI} alt="" />
+                <TokenImage src={pool.tokens[1].logoURI} alt="" />
+                <Text fontSize={18} marginLeft={2}>
+                  {pool.tokens[0].symbol}/{pool.tokens[1].symbol}
+                </Text>
+              </Flex>
+              <PoolAprWrapper>
+                <PoolApr>
+                  {formatAprNumber(pool.apr)}% <AprText>APR</AprText>
+                </PoolApr>
+              </PoolAprWrapper>
+            </>
+          )}
+        </PoolButton>
+      </EarnBannerWrapper>
+    </EarnBannerContainer>
   )
 }

src/pages/Earns/index.tsx

@@ -1,6 +1,7 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { rgba } from 'polished'
-import { useNavigate } from 'react-router-dom'
+import { useEffect } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useMedia } from 'react-use'
 import { Box, Flex, Text } from 'rebass'
 import { EarnPool, useExplorerLandingQuery } from 'services/zapEarn'
@@ -285,9 +286,11 @@ const Card = ({
 
 export default function Earns() {
   const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
   const theme = useTheme()
   const { account } = useActiveWeb3React()
   const { isLoading, data } = useExplorerLandingQuery({ userAddress: account })
+  const { liquidityWidget, handleOpenZapInWidget } = useLiquidityWidget()
 
   const title = (title: string, tooltip: string, icon: string) => (
     <>
@@ -316,8 +319,24 @@ export default function Earns() {
   const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
   const upToXXSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToXXSmall}px)`)
 
+  useEffect(() => {
+    const openPool = searchParams.get('openPool')
+    const openPoolIndex = parseInt(openPool || '', 10)
+
+    if (!isNaN(openPoolIndex) && highlightedPools.length && highlightedPools[openPoolIndex]) {
+      searchParams.delete('openPool')
+      setSearchParams(searchParams)
+      handleOpenZapInWidget({
+        exchange: highlightedPools[openPoolIndex].exchange,
+        chainId: highlightedPools[openPoolIndex].chainId,
+        address: highlightedPools[openPoolIndex].address,
+      })
+    }
+  }, [handleOpenZapInWidget, highlightedPools, searchParams, setSearchParams])
+
   return (
     <WrapperBg>
+      {liquidityWidget}
       <Container>
         <Text fontSize={36} fontWeight="500">
           Maximize Your Earnings in DeFi