feat: add liquidity snapshot (#2450)

* feat: add liquidity snapshot

* done

* update tooltip

* get route by clientId

* update desc

* update text

* adjust ui

* using github data

* update text

src/components/Header/groups/EarnNavGroup.tsx

@@ -1,4 +1,5 @@
 import { Trans } from '@lingui/macro'
+import { AlertOctagon } from 'react-feather'
 import { useLocation } from 'react-router-dom'
 import { useMedia } from 'react-use'
 import { Flex } from 'rebass'
@@ -73,6 +74,13 @@ const EarnNavGroup = () => {
               <Trans>My Pools</Trans>
             </Flex>
           </StyledNavLink>
+
+          <StyledNavLink id="my-pools-nav-link" data-testid="my-pools-nav-link" to={`${APP_PATHS.ELASTIC_SNAPSHOT}`}>
+            <Flex sx={{ gap: '12px' }} alignItems="center">
+              <AlertOctagon size={14} />
+              <Trans>Snapshot</Trans>
+            </Flex>
+          </StyledNavLink>
         </Flex>
       }
     />

src/components/SwapForm/hooks/useGetRoute.ts

@@ -24,6 +24,7 @@ export type ArgsGetRoute = {
 
   customChain?: ChainId
   isProcessingSwap?: boolean
+  clientId?: string
 }
 
 export const getRouteTokenAddressParam = (currency: Currency) =>
@@ -76,7 +77,7 @@ export const useRouteApiDomain = () => {
 
 const useGetRoute = (args: ArgsGetRoute) => {
   const { isEnableAuthenAggregator } = useKyberswapGlobalConfig()
-  const { isSaveGas, parsedAmount, currencyIn, currencyOut, customChain, isProcessingSwap } = args
+  const { isSaveGas, parsedAmount, currencyIn, currencyOut, customChain, isProcessingSwap, clientId } = args
   const { chainId: currentChain } = useActiveWeb3React()
   const chainId = customChain || currentChain
 
@@ -119,15 +120,15 @@ const useGetRoute = (args: ArgsGetRoute) => {
     () =>
       debounce(
         async (args: { url: string; params: GetRouteParams; authentication: boolean }) => {
-          await trigger(args)
+          await trigger({ ...args, clientId })
           dismissSwapModalFlag.current = false
         },
         INPUT_DEBOUNCE_TIME,
         {
           leading: true,
         },
       ),
-    [trigger],
+    [trigger, clientId],
   )
 
   const fetcher = useCallback(async () => {

src/components/SwapForm/index.tsx

@@ -3,7 +3,7 @@ import { Trans } from '@lingui/macro'
 import { rgba } from 'polished'
 import { stringify } from 'querystring'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import { useMedia } from 'react-use'
 import { Box, Flex, Text } from 'rebass'
 import { parseGetRouteResponse } from 'services/route/utils'
@@ -90,6 +90,7 @@ export type SwapFormProps = {
 const SwapForm: React.FC<SwapFormProps> = props => {
   const { pathname } = useLocation()
   const isPartnerSwap = pathname.startsWith(APP_PATHS.PARTNER_SWAP)
+  const [searchParams] = useSearchParams()
   const {
     hidden,
     currencyIn,
@@ -146,6 +147,7 @@ const SwapForm: React.FC<SwapFormProps> = props => {
     parsedAmount,
     isProcessingSwap,
     customChain: chainId,
+    clientId: searchParams.get('clientId') || undefined,
   })
 
   const { data: getRouteRawResponse, isFetching: isGettingRoute, error: getRouteError } = result

src/constants/index.ts

@@ -172,6 +172,7 @@ export const APP_PATHS = {
   IAM_CONSENT: '/consent',
 
   DEPRECATED_NOTI_CENTER: '/notification-center/overview',
+  ELASTIC_SNAPSHOT: '/elastic-snapshot',
 } as const
 
 export const TERM_FILES_PATH = {

src/pages/App.tsx

@@ -38,6 +38,8 @@ const Login = lazy(() => import('./Oauth/Login'))
 const Logout = lazy(() => import('./Oauth/Logout'))
 const Consent = lazy(() => import('./Oauth/Consent'))
 
+const ElasticSnapshot = lazy(() => import('./ElasticSnapshot'))
+
 // test page for swap only through elastic
 const ElasticSwap = lazy(() => import('./ElasticSwap'))
 const SwapV3 = lazy(() => import('./SwapV3'))
@@ -386,6 +388,8 @@ export default function App() {
                 <Route path={APP_PATHS.IAM_LOGOUT} element={<Logout />} />
                 <Route path={APP_PATHS.IAM_CONSENT} element={<Consent />} />
 
+                <Route path={APP_PATHS.ELASTIC_SNAPSHOT} element={<ElasticSnapshot />} />
+
                 <Route path="*" element={<RedirectPathToSwapV3Network />} />
               </Routes>
             </Web3ReactManager>