Update handling token select modal

KyberNetwork · Nov 5, 2024 · 6c3198c · 6c3198c
1 parent a289f9c
commit 6c3198c
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "@kyberswap/ks-sdk-classic": "^1.0.3",
     "@kyberswap/ks-sdk-core": "1.1.6",
     "@kyberswap/ks-sdk-elastic": "^1.1.2",
-    "kyberswap-pancake-liquidity-widgets": "0.1.20",
+    "kyberswap-pancake-liquidity-widgets": "0.1.22",
     "@kyberswap/oauth2": "1.0.2",
     "@lingui/macro": "^4.6.0",
     "@lingui/react": "^4.6.0",

diff --git a/src/pages/LiquidityWidget.tsx b/src/pages/LiquidityWidget.tsx
@@ -1,7 +1,7 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { LiquidityWidget as KsLiquidityWidget } from 'kyberswap-pancake-liquidity-widgets'
 import 'kyberswap-pancake-liquidity-widgets/dist/style.css'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Box } from 'rebass'
 import { useAccount, useWalletClient } from 'wagmi'
 
@@ -20,15 +20,20 @@ enum Theme {
 
 export default function LiquidityWidget() {
   const [selectedChainId, setSelectedChainId] = useState(ChainId.ARBITRUM)
+  const [theme, setTheme] = useState<Theme>(Theme.DARK)
   const [poolAddress, setPoolAddress] = useState('0x389938cf14be379217570d8e4619e51fbdafaa21')
   const [positionId, setPositionId] = useState('')
+  const [feeAddress, setFeeAddress] = useState('')
+  const [feePcm, setFeePcm] = useState(0)
+  const [openModal, setOpenModal] = useState(false)
+  const [autoAfterChange, setAutoAfterChange] = useState(false)
+
   const [initDepositTokens, setInitDepositTokens] = useState<string>(
     '0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9,0x912CE59144191C1204E64559FE8253a0e49E6548',
   )
   const [initAmounts, setInitAmounts] = useState<string>(',')
-  const [openModal, setOpenModal] = useState(false)
-  const [autoAfterChange, setAutoAfterChange] = useState(false)
-  const [theme, setTheme] = useState<Theme>(Theme.DARK)
+  const [openTokenSelectModal, setOpenTokenSelectModal] = useState(false)
+
   const { chainId } = useActiveWeb3React()
   const { data: walletClient } = useWalletClient()
   const { address: account } = useAccount()
@@ -42,36 +47,90 @@ export default function LiquidityWidget() {
     }
   }, [autoAfterChange, chainId, selectedChainId])
 
-  const [feeAddress, setFeeAddress] = useState('')
-  const [feePcm, setFeePcm] = useState(0)
+  const handleDismiss = () => setOpenTokenSelectModal(false)
 
-  const tokenSelectModal = <CurrencySearchModal isOpen={true} onDismiss={() => {}} onCurrencySelect={() => {}} />
+  const handleSelectToken = (token: any) => {
+    const selectedToken = token.wrapped ? { ...token, ...token.wrapped } : token
+    const tokens = initDepositTokens.split(',')
+    const indexOfToken = tokens.findIndex(t => t.toLowerCase() === selectedToken.address?.toLowerCase())
+    if (indexOfToken > -1) {
+      tokens.splice(indexOfToken, 1)
+      setInitDepositTokens(tokens.join(','))
+      const amounts = initAmounts.split(',')
+      amounts.splice(indexOfToken, 1)
+      setInitAmounts(amounts.join(','))
+    } else {
+      setInitDepositTokens(`${initDepositTokens},${selectedToken.address}`)
+      setInitAmounts(`${initAmounts},`)
+    }
+    handleDismiss()
+  }
+
+  const handleRemoveToken = useCallback(
+    (tokenAddress: string) => {
+      const tokens = initDepositTokens.split(',')
+      const indexOfToken = tokens.findIndex(t => t.toLowerCase() === tokenAddress.toLowerCase())
+      if (indexOfToken === -1) return
+
+      tokens.splice(indexOfToken, 1)
+      const amounts = initAmounts.split(',')
+      amounts.splice(indexOfToken, 1)
+      setInitDepositTokens(tokens.join(','))
+      setInitAmounts(amounts.join(','))
+    },
+    [initAmounts, initDepositTokens],
+  )
+
+  const handleAmountChange = useCallback(
+    (tokenAddress: string, amount: string) => {
+      const tokens = initDepositTokens.split(',')
+      const indexOfToken = tokens.findIndex(t => t.toLowerCase() === tokenAddress.toLowerCase())
+      if (indexOfToken === -1) return
+
+      const amounts = initAmounts.split(',')
+      amounts[indexOfToken] = amount
+      setInitAmounts(amounts.join(','))
+    },
+    [initAmounts, initDepositTokens],
+  )
+
+  const handleOpenTokenSelectModal = useCallback(() => setOpenTokenSelectModal(true), [])
 
   return (
     <>
       {openModal ? (
-        <KsLiquidityWidget
-          onConnectWallet={toggleWalletModal}
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          walletClient={walletClient as any}
-          account={account}
-          networkChainId={chainId}
-          chainId={selectedChainId}
-          positionId={positionId}
-          initTickLower={undefined}
-          initTickUpper={undefined}
-          poolAddress={poolAddress}
-          theme={theme}
-          feeAddress="0xB82bb6Ce9A249076Ca7135470e7CA634806De168"
-          feePcm={0}
-          onDismiss={() => {
-            window.location.reload()
-          }}
-          initDepositTokens={initDepositTokens}
-          initAmounts={initAmounts}
-          source="zap-widget-demo"
-          tokenSelectModal={tokenSelectModal}
-        />
+        <>
+          <KsLiquidityWidget
+            theme={theme}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            walletClient={walletClient as any}
+            account={account}
+            chainId={selectedChainId}
+            networkChainId={chainId}
+            initTickLower={undefined}
+            initTickUpper={undefined}
+            poolAddress={poolAddress}
+            positionId={positionId}
+            feeAddress="0xB82bb6Ce9A249076Ca7135470e7CA634806De168"
+            feePcm={0}
+            source="zap-widget-demo"
+            includedSources={undefined}
+            excludedSources={undefined}
+            initDepositTokens={initDepositTokens}
+            initAmounts={initAmounts}
+            onConnectWallet={toggleWalletModal}
+            onDismiss={() => window.location.reload()}
+            onTxSubmit={undefined}
+            onRemoveToken={handleRemoveToken}
+            onAmountChange={handleAmountChange}
+            onOpenTokenSelectModal={handleOpenTokenSelectModal}
+          />
+          <CurrencySearchModal
+            isOpen={openTokenSelectModal}
+            onDismiss={handleDismiss}
+            onCurrencySelect={handleSelectToken}
+          />
+        </>
       ) : (
         <Box
           sx={{

diff --git a/yarn.lock b/yarn.lock
@@ -14377,10 +14377,10 @@ kleur@^4.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
 
-[email protected].20:
-  version "0.1.20"
-  resolved "https://registry.yarnpkg.com/kyberswap-pancake-liquidity-widgets/-/kyberswap-pancake-liquidity-widgets-0.1.20.tgz#7526532d2d58dcd6e7e7b9e9b115a1e96ebc33eb"
-  integrity sha512-wWhip+9E+I2zCxqgNZUHvCKkRb/e1aR/96nD1XE741QqCOtsvPpLnKSK3e15LAfBEPzXy4wakYJ48HS9P8aA/A==
+[email protected].22:
+  version "0.1.22"
+  resolved "https://registry.yarnpkg.com/kyberswap-pancake-liquidity-widgets/-/kyberswap-pancake-liquidity-widgets-0.1.22.tgz#f1b37a82bdbff056bd17184c1d49f8f71949e867"
+  integrity sha512-yjWylAB3l3cmDCyJPetPwUse/ouxfsDr2ho3fjsu8pyijS/HDYuhDhOhvDxZp4s8JcBtAUk3nzoIwQY8Tv/Eog==
   dependencies:
     "@pancakeswap/sdk" "^5.8.2"
     "@pancakeswap/swap-sdk-core" "^1.2.0"