Prod widget test

index.html

@@ -37,6 +37,7 @@
       href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600&display=swap"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit:400,500,600,700" />
 
     <title>KyberSwap - Limitless Access To DeFi</title>
     <script>

package.json

@@ -53,6 +53,7 @@
     "@kyberswap/ks-sdk-classic": "^1.0.3",
     "@kyberswap/ks-sdk-core": "1.1.5",
     "@kyberswap/ks-sdk-elastic": "^1.1.2",
+    "@kyberswap/liquidity-widgets": "0.0.8-multi-token-poc-2",
     "@kyberswap/oauth2": "1.0.2",
     "@lingui/macro": "^4.6.0",
     "@lingui/react": "^4.6.0",
@@ -203,7 +204,7 @@
     "prom-client": "^14.2.0",
     "storybook": "^7.6.2",
     "ts-node": "^10.9.1",
-    "typescript": "4.8.4",
+    "typescript": "5.2.2",
     "vite": "^4.3.9",
     "vite-plugin-checker": "^0.5.6",
     "vite-plugin-svgr": "^2.4.0",

src/components/LiveChart/index.tsx

@@ -348,7 +348,7 @@ function LiveChart({
                         </Text>
                       ) : (
                         <>
-                          <Text fontSize={12} color={different >= 0 ? '#31CB9E' : '#FF537B'} marginRight="5px">
+                          <Text fontSize={12} color={+different >= 0 ? '#31CB9E' : '#FF537B'} marginRight="5px">
                             {different} ({differentPercent}%)
                           </Text>
                           {!hoverValue && (

src/components/Pagination/index.tsx

@@ -55,7 +55,7 @@ export default function Pagination({
   }
 
   const onNext = () => {
-    if (currentPage < paginationRange[paginationRange.length - 1]) {
+    if (currentPage < +paginationRange[paginationRange.length - 1]) {
       onPageChange(currentPage + 1)
     }
   }

src/pages/App.tsx

@@ -29,6 +29,7 @@ import { RedirectPathToSwapV3Network } from 'pages/SwapV3/redirects'
 import { useHolidayMode } from 'state/user/hooks'
 import { isSupportLimitOrder } from 'utils'
 
+import LiquidityWidget from './LiquidityWidget'
 import VerifyAuth from './Verify/VerifyAuth'
 
 const Login = lazy(() => import('./Oauth/Login'))
@@ -306,6 +307,7 @@ export default function App() {
               <Route path={APP_PATHS.IAM_CONSENT} element={<Consent />} />
 
               <Route path={APP_PATHS.ELASTIC_SNAPSHOT} element={<ElasticSnapshot />} />
+              <Route path="/liquidity-widget" element={<LiquidityWidget />} />
 
               <Route path={APP_PATHS.AGGREGATOR_CAMPAIGN} element={<Campaign />} />
               <Route path={APP_PATHS.LIMIT_ORDER_CAMPAIGN} element={<Campaign />} />

src/pages/LiquidityWidget.tsx

@@ -0,0 +1,179 @@
+import { ChainId } from '@kyberswap/ks-sdk-core'
+import { LiquidityWidget as KsLiquidityWidget, PoolType } from '@kyberswap/liquidity-widgets'
+import '@kyberswap/liquidity-widgets/dist/style.css'
+import { useEffect, useMemo, useState } from 'react'
+import { Box } from 'rebass'
+
+import { NotificationType } from 'components/Announcement/type'
+import { ButtonPrimary } from 'components/Button'
+import Input from 'components/Input'
+import { NetworkSelector } from 'components/NetworkSelector'
+import { useActiveWeb3React, useWeb3React } from 'hooks'
+import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
+import { useNotify } from 'state/application/hooks'
+
+export default function LiquidityWidget() {
+  const [selectedChainId, setSelectedChainId] = useState(ChainId.ARBITRUM)
+  const [poolAddress, setPoolAddress] = useState('') // 0x0bacc7a9717e70ea0da5ac075889bd87d4c81197
+  const [positionId, setPositionId] = useState('') //24654
+  const [openModal, setOpenModal] = useState(false)
+  const { changeNetwork } = useChangeNetwork()
+  const [autoAfterChange, setAutoAfterChange] = useState(false)
+
+  const { chainId } = useActiveWeb3React()
+  const { library } = useWeb3React()
+  const notify = useNotify()
+
+  useEffect(() => {
+    if (autoAfterChange && chainId === selectedChainId) {
+      setOpenModal(true)
+      setAutoAfterChange(false)
+    }
+  }, [autoAfterChange, chainId, selectedChainId])
+
+  const pancakeTheme = useMemo(
+    () => ({
+      text: '#FFFFFF',
+      subText: '#B6AECF',
+      icons: '#a9a9a9',
+      layer1: '#27262C',
+      dialog: '#27262C',
+      layer2: '#363046',
+      stroke: '#363046',
+      chartRange: '#5DC5D2',
+      chartArea: '#457F89',
+      accent: '#5DC5D2',
+      warning: '#F4B452',
+      error: '#FF5353',
+      success: '#189470',
+      fontFamily: 'Kanit, Sans-serif',
+      borderRadius: '20px',
+      buttonRadius: '16px',
+      boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.04)',
+    }),
+    [],
+  )
+
+  const ksTheme = useMemo(
+    () => ({
+      text: '#ffffff',
+      subText: '#979797',
+      icons: '#a9a9a9',
+      layer1: '#1C1C1C',
+      dialog: '#1c1c1c',
+      layer2: '#313131',
+      stroke: '#313131',
+      chartRange: '#28e0b9',
+      chartArea: '#047855',
+      accent: '#31cb9e',
+      warning: '#ff9901',
+      error: '#ff537b',
+      success: '#189470',
+      fontFamily: 'Work Sans',
+      borderRadius: '20px',
+      buttonRadius: '24px',
+      boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.04)',
+    }),
+    [],
+  )
+
+  const [dexType, setType] = useState(PoolType.DEX_UNISWAPV3)
+  const [selectedTheme, setSelectedTheme] = useState('ks')
+  const [feeAddress, setFeeAddress] = useState('')
+  const [feePcm, setFeePcm] = useState(0)
+
+  console.log(feeAddress, feePcm)
+
+  return (
+    <>
+      {openModal ? (
+        <KsLiquidityWidget
+          provider={library}
+          theme={selectedTheme === 'pc' ? pancakeTheme : ksTheme}
+          poolAddress={poolAddress}
+          positionId={positionId || undefined}
+          feeAddress={feeAddress}
+          feePcm={feePcm}
+          poolType={dexType}
+          chainId={selectedChainId}
+          onTxSubmit={tx => {
+            notify(
+              {
+                title: 'Send Zap tx success',
+                type: NotificationType.SUCCESS,
+                summary: `Tx: ${tx}`,
+                // icon?: ReactNode
+                // link: getEtherscanLink(ChainId.ARBITRUM, tx, 'transaction'),
+              },
+              10_000,
+            )
+          }}
+          onDismiss={() => setOpenModal(false)}
+          source={'kyberswap-demo-zap'}
+        />
+      ) : (
+        <Box sx={{ display: 'flex', flexDirection: 'column', maxWidth: '500px', gap: '1rem', width: '100%' }}>
+          <NetworkSelector chainId={selectedChainId} customOnSelectNetwork={chain => setSelectedChainId(chain)} />
+          <div>
+            <input
+              type="radio"
+              id="kstheme"
+              value="ks"
+              checked={selectedTheme === 'ks'}
+              onChange={e => setSelectedTheme(e.currentTarget.value)}
+            />
+              <label htmlFor="kstheme">KyberSwap Theme</label>
+            <br />
+            <input
+              type="radio"
+              id="pctheme"
+              value="pc"
+              checked={selectedTheme === 'pc'}
+              onChange={e => setSelectedTheme(e.currentTarget.value)}
+            />
+              <label htmlFor="pctheme">Pancake Theme</label>
+            <br />
+          </div>
+
+          <div>
+            <input
+              type="radio"
+              id="html"
+              value={PoolType.DEX_PANCAKESWAPV3}
+              checked={dexType === PoolType.DEX_PANCAKESWAPV3}
+              onChange={e => setType(e.currentTarget.value as PoolType)}
+            />
+              <label htmlFor="html">Pancake</label>
+            <br />
+            <input
+              type="radio"
+              id="css"
+              value={PoolType.DEX_UNISWAPV3}
+              checked={dexType === PoolType.DEX_UNISWAPV3}
+              onChange={e => setType(e.currentTarget.value as PoolType)}
+            />
+              <label htmlFor="css">Uniswap</label>
+            <br />
+          </div>
+          <Input placeholder="Pool address..." value={poolAddress} onChange={e => setPoolAddress(e.target.value)} />
+          <Input placeholder="Position id..." value={positionId} onChange={e => setPositionId(e.target.value)} />
+
+          <Input placeholder="Fee address..." value={feeAddress} onChange={e => setFeeAddress(e.target.value)} />
+          <Input placeholder="Fee pcm..." value={feePcm} onChange={e => setFeePcm(+e.target.value)} />
+          <ButtonPrimary
+            onClick={() => {
+              if (selectedChainId !== chainId) {
+                changeNetwork(selectedChainId)
+                setAutoAfterChange(true)
+              } else {
+                setOpenModal(true)
+              }
+            }}
+          >
+            Load
+          </ButtonPrimary>
+        </Box>
+      )}
+    </>
+  )
+}

src/theme/index.tsx

@@ -261,4 +261,13 @@ export const ThemedGlobalStyle = createGlobalStyle`
     padding-right: 1.5rem;
   }
 
+  .ks-lw-modal-overlay {
+    z-index: 9999
+  }
+
+  .ks-lw {
+    width: 100%;
+    max-width: 900px;
+  }
+
 `

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": false,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
@@ -22,13 +26,23 @@
     "jsx": "react-jsx",
     "downlevelIteration": true,
     "allowSyntheticDefaultImports": true,
-    "typeRoots": ["./types"],
+    "typeRoots": [
+      "./types"
+    ],
     "baseUrl": "src",
     "useUnknownInCatchVariables": false,
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "exclude": ["node_modules", "cypress"],
-  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+  "exclude": [
+    "node_modules",
+    "cypress"
+  ],
+  "include": [
+    "./src/**/*.ts",
+    "./src/**/*.tsx"
+  ]
 }