update new widget

package.json

@@ -50,7 +50,7 @@
     "@kyberswap/ks-sdk-classic": "^1.0.3",
     "@kyberswap/ks-sdk-core": "1.1.6",
     "@kyberswap/ks-sdk-elastic": "^1.1.2",
-    "kyberswap-liquidity-widgets": "^1.1.47",
+    "kyberswap-liquidity-widgets": "^1.2.2",
     "@kyberswap/oauth2": "1.0.2",
     "@lingui/macro": "^4.6.0",
     "@lingui/react": "^4.6.0",

src/pages/Earns/useLiquidityWidget.tsx

@@ -1,34 +1,46 @@
 import { ChainId, LiquidityWidget, PoolType } from 'kyberswap-liquidity-widgets'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { NotificationType } from 'components/Announcement/type'
 import Modal from 'components/Modal'
 import { NETWORKS_INFO } from 'constants/networks'
-import { useWeb3React } from 'hooks'
-import { useNotify, useWalletModalToggle } from 'state/application/hooks'
+import { useActiveWeb3React, useWeb3React } from 'hooks'
+import { useNetworkModalToggle, useNotify, useWalletModalToggle } from 'state/application/hooks'
 
 import useFilter from './PoolExplorer/useFilter'
 
 interface LiquidityParams {
-  provider: any
   poolAddress: string
   chainId: ChainId
   source: string
   poolType: PoolType
   positionId?: string
-  onDismiss: () => void
+  onClose: () => void
   onConnectWallet: () => void
+  onSwitchChain: () => void
+  connectedAccount: {
+    address?: string | undefined
+    chainId: number
+  }
+  onSubmitTx: (txData: { from: string; to: string; value: string; data: string; gasLimit: string }) => Promise<string>
 }
 
 const useLiquidityWidget = () => {
-  const { library } = useWeb3React()
   const toggleWalletModal = useWalletModalToggle()
+  const toggleNetworkModal = useNetworkModalToggle()
   const notify = useNotify()
+  const { library } = useWeb3React()
+  const { account, chainId } = useActiveWeb3React()
   const { filters } = useFilter()
 
-  const [liquidityParams, setLiquidityParams] = useState<LiquidityParams | null>(null)
+  const [liquidityPoolParams, setLiquidityPoolParams] = useState<{
+    poolAddress: string
+    chainId: ChainId
+    poolType: PoolType
+    positionId?: string
+  } | null>(null)
 
-  const handleCloseZapInWidget = () => setLiquidityParams(null)
+  const handleCloseZapInWidget = () => setLiquidityPoolParams(null)
   const handleOpenZapInWidget = (
     pool: { exchange: string; chainId?: number; address: string },
     positionId?: string,
@@ -50,18 +62,38 @@ const useLiquidityWidget = () => {
       )
       return
     }
-    setLiquidityParams({
-      provider: library,
+    setLiquidityPoolParams({
       poolAddress: pool.address,
       chainId: (pool.chainId || filters.chainId) as ChainId,
-      source: 'kyberswap-demo-zap',
       poolType: PoolType[`DEX_${dex.toUpperCase()}V3` as keyof typeof PoolType],
       positionId,
-      onDismiss: handleCloseZapInWidget,
-      onConnectWallet: toggleWalletModal,
     })
   }
 
+  const liquidityParams: LiquidityParams | null = useMemo(
+    () =>
+      liquidityPoolParams
+        ? {
+            ...liquidityPoolParams,
+            source: 'kyberswap-demo-zap',
+            connectedAccount: {
+              address: account,
+              chainId: chainId,
+            },
+            onClose: handleCloseZapInWidget,
+            onConnectWallet: toggleWalletModal,
+            onSwitchChain: toggleNetworkModal,
+            onSubmitTx: async (txData: { from: string; to: string; data: string; value: string; gasLimit: string }) => {
+              if (!library) throw new Error('Library is not ready!')
+              const res = await library?.getSigner().sendTransaction(txData)
+              if (!res) throw new Error('Transaction failed')
+              return res.hash
+            },
+          }
+        : null,
+    [account, chainId, library, liquidityPoolParams, toggleNetworkModal, toggleWalletModal],
+  )
+
   const liquidityWidget = liquidityParams ? (
     <Modal isOpen mobileFullWidth maxWidth={760} width={'760px'} onDismiss={handleCloseZapInWidget}>
       <LiquidityWidget {...liquidityParams} />