fix: earn improvement

package.json

@@ -50,7 +50,7 @@
     "@kyberswap/ks-sdk-classic": "^1.0.3",
     "@kyberswap/ks-sdk-core": "1.1.8",
     "@kyberswap/ks-sdk-elastic": "^1.1.2",
-    "@kyberswap/liquidity-widgets": "1.1.11",
+    "@kyberswap/liquidity-widgets": "1.1.12",
     "@kyberswap/zap-migration-widgets": "1.0.7",
     "@kyberswap/oauth2": "1.0.2",
     "@lingui/macro": "^4.6.0",

src/pages/Earns/PositionDetail/LeftSection.tsx

@@ -1,12 +1,15 @@
-import { CurrencyAmount, Token, WETH } from '@kyberswap/ks-sdk-core'
+import { ChainId, CurrencyAmount, Token, WETH } from '@kyberswap/ks-sdk-core'
 import { t } from '@lingui/macro'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Flex, Text } from 'rebass'
+import { PositionHistoryType, usePositionHistoryQuery } from 'services/zapEarn'
 
 import HelpIcon from 'assets/svg/help-circle.svg'
+import CopyHelper from 'components/Copy'
 import InfoHelper from 'components/InfoHelper'
 import Loader from 'components/Loader'
 import NonfungiblePositionManagerABI from 'constants/abis/uniswapv3NftManagerContract.json'
+import { NETWORKS_INFO } from 'constants/networks'
 import { useActiveWeb3React } from 'hooks'
 import { useReadingContract } from 'hooks/useContract'
 import useTheme from 'hooks/useTheme'
@@ -40,6 +43,8 @@ export interface FeeInfo {
   totalValue: number
 }
 
+const formatDateTime = (number: number) => (number < 10 ? `0${number}` : number)
+
 const LeftSection = ({ position }: { position: ParsedPosition }) => {
   const theme = useTheme()
   const [openClaimFeeModal, setOpenClaimFeeModal] = useState(false)
@@ -50,6 +55,12 @@ const LeftSection = ({ position }: { position: ParsedPosition }) => {
   const allTransactions = useAllTransactions(true)
   const { account } = useActiveWeb3React()
 
+  const { data: historyData } = usePositionHistoryQuery({
+    chainId: position.chainId,
+    tokenAddress: position.tokenAddress,
+    tokenId: position.id,
+  })
+
   const nftManagerContractOfDex = NFT_MANAGER_CONTRACT[position.dex as keyof typeof NFT_MANAGER_CONTRACT]
   const nftManagerContract =
     typeof nftManagerContractOfDex === 'string'
@@ -60,6 +71,19 @@ const LeftSection = ({ position }: { position: ParsedPosition }) => {
   const isToken0Native = isNativeToken(position.token0Address, position.chainId as keyof typeof WETH)
   const isToken1Native = isNativeToken(position.token1Address, position.chainId as keyof typeof WETH)
 
+  const createdTime = useMemo(() => {
+    const data = new Date(position.createdTime * 1000)
+    const hours = formatDateTime(data.getHours())
+    const minutes = formatDateTime(data.getMinutes())
+    const seconds = formatDateTime(data.getSeconds())
+    return `${hours}:${minutes}:${seconds} ${data.toLocaleDateString()}`
+  }, [position.createdTime])
+
+  const txHash = useMemo(() => {
+    if (!historyData) return ''
+    return [...historyData].reverse().find(item => item.type === PositionHistoryType.DEPOSIT)?.txHash || ''
+  }, [historyData])
+
   const handleFetchUnclaimedFee = useCallback(async () => {
     if (!contract) return
     const maxUnit = '0x' + (2n ** 128n - 1n).toString(16)
@@ -273,34 +297,38 @@ const LeftSection = ({ position }: { position: ParsedPosition }) => {
           </PositionAction>
         </Flex>
       </InfoSection>
-      {/* <InfoSection>
+      <InfoSection>
         <Flex alignItems={'center'} justifyContent={'space-between'} marginBottom={2}>
           <Text fontSize={14} color={theme.subText}>
             {t`Created Time`}
           </Text>
-          <Text>2:12:34 12/12/2024</Text>
+          <Text>{createdTime}</Text>
         </Flex>
-        <Flex alignItems={'center'} justifyContent={'space-between'} marginBottom={2}>
+        {/* <Flex alignItems={'center'} justifyContent={'space-between'} marginBottom={2}>
           <Text fontSize={14} color={theme.subText}>
             {t`Liquidity Source`}
           </Text>
           <Flex alignItems={'center'} sx={{ gap: '6px' }}>
             <Text fontSize={14} color={theme.subText}>{t`Value`}</Text>
             <Text>$12,600</Text>
           </Flex>
-        </Flex>
+        </Flex> */}
         <Flex flexDirection={'column'} alignItems={'flex-end'} sx={{ gap: 2 }} marginBottom={2}>
-          <Flex alignItems={'center'} sx={{ gap: '6px' }}>
+          {/* <Flex alignItems={'center'} sx={{ gap: '6px' }}>
             <Text>345 KNC</Text> <Text>+ 12.65 JUP</Text> <Text>+ 0.18 ETH</Text>
-          </Flex>
+          </Flex> */}
           <Flex alignItems={'center'} sx={{ gap: '6px' }}>
             <Text fontSize={14} color={theme.subText}>{t`Tnx Hash`}</Text>
-            <Text color={theme.blue2}>
-              {shortenAddress(position.chainId as ChainId, '0xbf6ef625de5df898cc1d0f91868aae03976a2e2d', 4)}
-            </Text>
+            <Text
+              color={theme.blue2}
+              onClick={() => window.open(NETWORKS_INFO[position.chainId as ChainId].etherscanUrl + '/tx/' + txHash)}
+              sx={{ cursor: 'pointer' }}
+              marginRight={-1}
+            >{`${txHash.substring(0, 6)}...${txHash.substring(62)}`}</Text>
+            <CopyHelper color={theme.blue2} size={16} toCopy={txHash} />
           </Flex>
         </Flex>
-        <Flex alignItems={'flex-start'} justifyContent={'space-between'}>
+        {/* <Flex alignItems={'flex-start'} justifyContent={'space-between'}>
           <Text fontSize={14} color={theme.subText}>{t`Past Actions`}</Text>
           <Flex flexDirection={'column'} alignItems={'flex-end'} sx={{ gap: '6px' }}>
             <Text>{t`Increased Liquidity`}</Text>
@@ -309,8 +337,8 @@ const LeftSection = ({ position }: { position: ParsedPosition }) => {
               <Text>$12,600</Text>
             </Flex>
           </Flex>
-        </Flex>
-      </InfoSection> */}
+        </Flex> */}
+      </InfoSection>
     </InfoLeftColumn>
   )
 }

src/pages/Earns/PositionDetail/index.tsx

@@ -50,6 +50,7 @@ export interface ParsedPosition {
   earning24h: number
   earning7d: number
   totalEarnedFee: number
+  createdTime: number
 }
 
 const PositionDetail = () => {
@@ -106,6 +107,7 @@ const PositionDetail = () => {
       totalEarnedFee:
         position.feePending.reduce((a, b) => a + b.quotes.usd.value, 0) +
         position.feesClaimed.reduce((a, b) => a + b.quotes.usd.value, 0),
+      createdTime: position.createdTime,
     }
   }, [userPosition])
 

src/pages/Earns/useLiquidityWidget.tsx

@@ -203,10 +203,8 @@ const useLiquidityWidget = () => {
             onOpenZapMigration: handleOpenZapMigrationWidget,
             onSubmitTx: async (txData: { from: string; to: string; data: string; value: string; gasLimit: string }) => {
               try {
-                console.log('txData', txData)
                 if (!library) throw new Error('Library is not ready!')
-                const gas = await library.estimateGas(txData)
-                console.log(gas)
+                await library.estimateGas(txData)
                 const res = await library?.getSigner().sendTransaction(txData)
                 if (!res) throw new Error('Transaction failed')
                 return res.hash

src/services/zapEarn.ts

@@ -101,17 +101,6 @@ export interface PositionAmount {
   }
 }
 
-export interface PositionQueryParams {
-  chainIds?: string
-  addresses: string
-  positionId?: string
-  protocols?: string
-  status?: string
-  q?: string
-  sortBy?: string
-  orderBy?: string
-}
-
 export interface EarnPosition {
   [x: string]: any
   chainName: 'eth'
@@ -180,15 +169,6 @@ export interface EarnPosition {
   }
 }
 
-export interface PositionEarning {
-  date: string
-  timestamp: number
-  totalFeeEarning: number
-  totalFarmEarning: number
-  totalEarning: number
-  earningByDay: number
-}
-
 interface PoolsExplorerResponse {
   code: number
   message: string
@@ -201,6 +181,32 @@ interface PoolsExplorerResponse {
   requestId: string
 }
 
+export enum PositionHistoryType {
+  DEPOSIT = 'DEPOSIT',
+}
+
+export interface PositionHistory {
+  txHash: string
+  type: PositionHistoryType
+}
+
+export interface PositionQueryParams {
+  chainIds?: string
+  addresses: string
+  positionId?: string
+  protocols?: string
+  status?: string
+  q?: string
+  sortBy?: string
+  orderBy?: string
+}
+
+interface PositionHistoryParams {
+  chainId: ChainId
+  tokenAddress: string
+  tokenId: string
+}
+
 interface AddRemoveFavoriteParams {
   chainId: ChainId
   message: string
@@ -277,6 +283,20 @@ const zapEarnServiceApi = createApi({
         }
       },
     }),
+    positionHistory: builder.query<Array<PositionHistory>, PositionHistoryParams>({
+      query: params => ({
+        url: `/v1/userPositions/positionHistory`,
+        params,
+      }),
+      transformResponse: (response: { data: Array<PositionHistory> }) => response.data,
+      async onQueryStarted(agr, { dispatch, queryFulfilled }) {
+        try {
+          await queryFulfilled
+        } catch {
+          dispatch(zapEarnServiceApi.util.upsertQueryData('positionHistory', agr, []))
+        }
+      },
+    }),
     addFavorite: builder.mutation<void, AddRemoveFavoriteParams>({
       query: body => ({
         method: 'POST',
@@ -299,6 +319,7 @@ export const {
   useSupportedProtocolsQuery,
   usePoolsExplorerQuery,
   useUserPositionsQuery,
+  usePositionHistoryQuery,
   useAddFavoriteMutation,
   useRemoveFavoriteMutation,
 } = zapEarnServiceApi

yarn.lock

@@ -3765,10 +3765,10 @@
     tiny-invariant "^1.1.0"
     tiny-warning "^1.0.3"
 
-"@kyberswap/[email protected].11":
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/@kyberswap/liquidity-widgets/-/liquidity-widgets-1.1.11.tgz#f78d8a5a8f2240c8c178967af5b1a983a42e4bf7"
-  integrity sha512-HKpd1/8yuXSqRS1mArfkCKMXCQVyIVchOqV0WquZmvJq5D7wg6zWOjWBCF9qPQNR2sMwL+NHME/Pa17D595hLA==
+"@kyberswap/[email protected].12":
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/@kyberswap/liquidity-widgets/-/liquidity-widgets-1.1.12.tgz#df869c388695055a8f0a885db1f97b0a43b656a9"
+  integrity sha512-GmXglif5ZOog3aAQoQ6AyqRuJWuRLsSw2u8C2LfNsHdcZxXkFLBFaYCyP1qLLL9maTLK2nWoOWRWEZM0+EJvFw==
   dependencies:
     "@popperjs/core" "^2.11.8"
     "@radix-ui/react-accordion" "^1.2.1"