Prod zap in widget

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

@@ -47,9 +47,11 @@
  "@blocto/wagmi-connector": "^2.0.4",
  "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
  "@holdstation/paymaster-helper": "^2.0.20",
+ "@kyberswap/krystal-walletconnect-v2": "0.0.1",
  "@kyberswap/ks-sdk-classic": "^1.0.3",
  "@kyberswap/ks-sdk-core": "1.1.5",
  "@kyberswap/ks-sdk-elastic": "^1.1.2",
+ "kyberswap-liquidity-widgets": "1.0.30",
  "@kyberswap/oauth2": "1.0.2",
  "@lingui/macro": "^4.6.0",
  "@lingui/react": "^4.6.0",

src/components/Header/groups/SwapNavGroup.tsx

@@ -114,7 +114,7 @@ const SwapNavGroup = () => {
  </IconWrapper>
  <Flex alignItems={'center'} sx={{ flex: 1 }} justifyContent={'space-between'}>
  <Trans>Cross-Chain</Trans>
- <img src={SquidLogoLight} alt="kyberswap with Squid" height={16} />
+ <img src={SquidLogoLight} alt="kyberswap with Squid" style={{ height: 16 }} />
  </Flex>
  </Flex>
  </StyledNavLink>

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'))
@@ -308,6 +309,8 @@ export default function App() {
 
  <Route path={APP_PATHS.ELASTIC_SNAPSHOT} element={<ElasticSnapshot />} />
  <Route path={APP_PATHS.MARKET_OVERVIEW} element={<MarketOverview />} />
+ <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,186 @@
+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('0x641C00A822e8b671738d32a431a4Fb6074E5c79d')
+ 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)
+
+ 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%',
+ color: '#fff',
+ }}
+ >
+ <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"
+ ]
 }