Merge branch 'main' of github.com:KyberNetwork/kyberswap-interface in…

…to fix/liquidity-chart-refactor

src/components/CurrencyInputPanel/index.tsx

@@ -1,7 +1,7 @@
 import { ChainId, Currency } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
 import { darken, lighten, rgba } from 'polished'
-import { ReactNode, useCallback, useState } from 'react'
+import { ReactNode, useCallback, useRef, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import { Info } from 'react-feather'
 import { useMedia } from 'react-use'
@@ -17,8 +17,9 @@ import Wallet from 'components/Icons/Wallet'
 import { Input as NumericalInput } from 'components/NumericalInput'
 import { RowFixed } from 'components/Row'
 import CurrencySearchModal from 'components/SearchModal/CurrencySearchModal'
-import { MouseoverTooltip } from 'components/Tooltip'
+import Tooltip from 'components/Tooltip'
 import { useActiveWeb3React } from 'hooks'
+import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
 import { useCurrencyBalance } from 'state/wallet/hooks'
 import { MEDIA_WIDTHS } from 'theme'
@@ -255,6 +256,9 @@ export default function CurrencyInputPanel({
   const tight = Boolean(tightProp && !currency)
   const [modalOpen, setModalOpen] = useState(false)
   const { account } = useActiveWeb3React()
+  const [showTooltip, setShowTooltip] = useState(false)
+  const infoRef = useRef<HTMLDivElement>(null)
+  useOnClickOutside(infoRef, () => setShowTooltip(false))
 
   const selectedCurrencyBalance = useCurrencyBalance(currency ?? undefined, customChainId)
 
@@ -375,14 +379,28 @@ export default function CurrencyInputPanel({
                     </StyledTokenName>
                   </RowFixed>
                   {!!nativeCurrency && !isMobile && !upToMedium && (
-                    <MouseoverTooltip
-                      text={nativeCurrency?.isNative ? 'Native token' : nativeCurrency?.wrapped.address}
-                      delay={200}
-                      placement="top"
+                    <Flex
                       width="fit-content"
+                      height="fit-content"
+                      marginTop="6px"
+                      marginLeft="4px"
+                      role="button"
+                      ref={infoRef}
+                      onClick={e => {
+                        e.stopPropagation()
+                        setShowTooltip(prev => !prev)
+                      }}
                     >
-                      <Info color={theme.subText} size={18} style={{ margin: '0 8px' }} />
-                    </MouseoverTooltip>
+                      <Tooltip
+                        show={showTooltip}
+                        text={nativeCurrency?.isNative ? 'Native token' : nativeCurrency?.wrapped.address}
+                        delay={200}
+                        placement="top"
+                        width="fit-content"
+                      >
+                        <Info color={theme.subText} size={18} />
+                      </Tooltip>
+                    </Flex>
                   )}
                   {!disableCurrencySelect && !isSwitchMode && (
                     <DropdownSVG style={{ marginLeft: tight ? '-8px' : undefined }} />

src/pages/Earns/PoolExplorer/index.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Info, Star } from 'react-feather'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useMedia } from 'react-use'
@@ -11,13 +11,16 @@ import { ReactComponent as IconHighlightedPool } from 'assets/svg/ic_pool_highli
 import { ReactComponent as IconLowVolatility } from 'assets/svg/ic_pool_low_volatility.svg'
 import { ReactComponent as IconSolidEarningPool } from 'assets/svg/ic_pool_solid_earning.svg'
 import { ReactComponent as IconUserEarnPosition } from 'assets/svg/ic_user_earn_position.svg'
+import { NotificationType } from 'components/Announcement/type'
 import Pagination from 'components/Pagination'
 import Search from 'components/Search'
 import { MouseoverTooltip, MouseoverTooltipDesktopOnly } from 'components/Tooltip'
+import { BFF_API } from 'constants/env'
 import { APP_PATHS } from 'constants/index'
 import useDebounce from 'hooks/useDebounce'
 import useTheme from 'hooks/useTheme'
 import SortIcon, { Direction } from 'pages/MarketOverview/SortIcon'
+import { useNotify } from 'state/application/hooks'
 import { MEDIA_WIDTHS } from 'theme'
 
 import { IconArrowLeft } from '../PositionDetail/styles'
@@ -88,9 +91,10 @@ export const timings: MenuOption[] = [
 const Earn = () => {
   const [search, setSearch] = useState('')
   const deboundedSearch = useDebounce(search, 300)
-  const [searchParams] = useSearchParams()
+  const [searchParams, setSearchParams] = useSearchParams()
   const navigate = useNavigate()
   const theme = useTheme()
+  const notify = useNotify()
   const { filters, updateFilters } = useFilter(setSearch)
   const { liquidityWidget, handleOpenZapInWidget } = useLiquidityWidget()
   const { data: poolData, isError } = usePoolsExplorerQuery(filters, { pollingInterval: 5 * 60_000 })
@@ -123,6 +127,40 @@ const Earn = () => {
     updateFilters('orderBy', '')
   }
 
+  const handleFetchPoolData = async ({ chainId, address }: { chainId: number; address: string }) => {
+    try {
+      const response = await fetch(
+        `${BFF_API}/v1/pools` +
+          '?' +
+          new URLSearchParams({
+            chainId: chainId.toString(),
+            ids: address,
+          }).toString(),
+      )
+      const data = await response.json()
+      return data?.data?.pools?.[0]
+    } catch (error) {
+      console.log('Fetch Pool Data Error:', error)
+      return
+    }
+  }
+
+  const handleOpenZapInWidgetWithParams = (pool: { exchange: string; chainId?: number; address: string }) => {
+    const { exchange, chainId, address } = pool
+    searchParams.set('exchange', exchange)
+    searchParams.set('poolChainId', chainId ? chainId.toString() : filters.chainId.toString())
+    searchParams.set('poolAddress', address)
+    setSearchParams(searchParams)
+    handleOpenZapInWidget(pool)
+  }
+
+  const handleRemoveUrlParams = useCallback(() => {
+    searchParams.delete('exchange')
+    searchParams.delete('poolChainId')
+    searchParams.delete('poolAddress')
+    setSearchParams(searchParams)
+  }, [searchParams, setSearchParams])
+
   useEffect(() => {
     if (searchParams.get('q') && !search) {
       setSearch(searchParams.get('q') || '')
@@ -136,6 +174,33 @@ const Earn = () => {
     }
   }, [deboundedSearch, filters.q, updateFilters])
 
+  useEffect(() => {
+    const exchange = searchParams.get('exchange')
+    const chainId = searchParams.get('poolChainId')
+    const address = searchParams.get('poolAddress')
+    if (!exchange || !chainId || !address) {
+      handleRemoveUrlParams()
+      return
+    }
+    ;(async () => {
+      const pool = await handleFetchPoolData({ chainId: Number(chainId), address })
+      if (pool && pool.exchange === exchange)
+        handleOpenZapInWidget({ exchange, chainId: Number(chainId), address: pool.address })
+      else {
+        notify(
+          {
+            title: `Open pool detail failed`,
+            summary: `Invalid pool info`,
+            type: NotificationType.ERROR,
+          },
+          5000,
+        )
+        handleRemoveUrlParams()
+      }
+    })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   return (
     <PoolPageWrapper>
       {liquidityWidget}
@@ -274,7 +339,7 @@ const Earn = () => {
               <div />
             </TableHeader>
           )}
-          <TableContent onOpenZapInWidget={handleOpenZapInWidget} />
+          <TableContent onOpenZapInWidget={handleOpenZapInWidgetWithParams} />
         </ContentWrapper>
         {!isError && (
           <Pagination

src/pages/Earns/useLiquidityWidget.tsx

@@ -3,7 +3,7 @@ import 'kane4-liquidity-widgets/dist/style.css'
 import { ZapMigration, ChainId as ZapMigrationChainId, Dex as ZapMigrationDex } from 'kane4-zap-migration-widgets'
 import 'kane4-zap-migration-widgets/dist/style.css'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import { usePreviousDistinct } from 'react-use'
 import { EarnDex } from 'services/zapEarn'
 
@@ -91,6 +91,7 @@ const useLiquidityWidget = () => {
   const { library } = useWeb3React()
   const { account, chainId } = useActiveWeb3React()
   const { filters } = useFilter()
+  const [searchParams, setSearchParams] = useSearchParams()
 
   const [addLiquidityPureParams, setAddLiquidityPureParams] = useState<AddLiquidityPureParams | null>(null)
   const [migrateLiquidityPureParams, setMigrateLiquidityPureParams] = useState<MigrateLiquidityPureParams | null>(null)
@@ -142,6 +143,14 @@ const useLiquidityWidget = () => {
     [addLiquidityPureParams, notify],
   )
 
+  const handleCloseZapInWidget = useCallback(() => {
+    searchParams.delete('exchange')
+    searchParams.delete('poolChainId')
+    searchParams.delete('poolAddress')
+    setSearchParams(searchParams)
+    setAddLiquidityPureParams(null)
+  }, [searchParams, setSearchParams])
+
   const handleOpenZapInWidget = (
     pool: { exchange: string; chainId?: number; address: string },
     positionId?: string,
@@ -184,14 +193,14 @@ const useLiquidityWidget = () => {
             source: 'KyberSwap-Earn',
             referral: refCode,
             onViewPosition: () => {
-              setAddLiquidityPureParams(null)
+              handleCloseZapInWidget()
               navigate(`/earns/positions`)
             },
             connectedAccount: {
               address: account,
               chainId: chainId,
             },
-            onClose: () => setAddLiquidityPureParams(null),
+            onClose: () => handleCloseZapInWidget(),
             onConnectWallet: toggleWalletModal,
             onSwitchChain: () => changeNetwork(addLiquidityPureParams.chainId as number),
             onOpenZapMigration: handleOpenZapMigrationWidget,
@@ -211,14 +220,15 @@ const useLiquidityWidget = () => {
         : null,
     [
       addLiquidityPureParams,
-      account,
       refCode,
+      account,
       chainId,
       toggleWalletModal,
       handleOpenZapMigrationWidget,
-      library,
-      changeNetwork,
+      handleCloseZapInWidget,
       navigate,
+      changeNetwork,
+      library,
     ],
   )
 
@@ -240,7 +250,7 @@ const useLiquidityWidget = () => {
 
             onClose: () => {
               setMigrateLiquidityPureParams(null)
-              setAddLiquidityPureParams(null)
+              handleCloseZapInWidget()
             },
             onBack: () => setMigrateLiquidityPureParams(null),
             onConnectWallet: toggleWalletModal,
@@ -258,7 +268,17 @@ const useLiquidityWidget = () => {
             },
           }
         : null,
-    [account, chainId, library, migrateLiquidityPureParams, changeNetwork, toggleWalletModal, navigate, refCode],
+    [
+      migrateLiquidityPureParams,
+      refCode,
+      account,
+      chainId,
+      toggleWalletModal,
+      navigate,
+      handleCloseZapInWidget,
+      changeNetwork,
+      library,
+    ],
   )
 
   const [zapOutPureParams, setZapOutPureParams] = useState<{
@@ -332,16 +352,16 @@ const useLiquidityWidget = () => {
   const previousAccount = usePreviousDistinct(account)
   useEffect(() => {
     if (account && previousAccount) {
-      setAddLiquidityPureParams(null)
+      handleCloseZapInWidget()
       setMigrateLiquidityPureParams(null)
       setZapOutPureParams(null)
     }
-  }, [account, previousAccount])
+  }, [account, handleCloseZapInWidget, previousAccount])
 
   const liquidityWidget = (
     <>
       {addLiquidityParams && (
-        <Modal isOpen mobileFullWidth maxWidth={760} width={'760px'} onDismiss={() => setAddLiquidityPureParams(null)}>
+        <Modal isOpen mobileFullWidth maxWidth={760} width={'760px'} onDismiss={handleCloseZapInWidget}>
           <LiquidityWidget {...addLiquidityParams} />
         </Modal>
       )}
@@ -353,7 +373,7 @@ const useLiquidityWidget = () => {
           width={'760px'}
           onDismiss={() => {
             setMigrateLiquidityPureParams(null)
-            setAddLiquidityPureParams(null)
+            handleCloseZapInWidget()
           }}
           zindex={9999}
         >