Skip to content

Commit fc8af71

Browse files
memoyilmemoyil
authored
fix: Binance wallet initial chain switch, empty tooltip and position hover bg (#12499)
<!-- Before opening a pull request, please read the [contributing guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md) first --> <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on improving code quality and functionality across various components in the application. It includes fixes for comments, adjustments to return statements, and enhancements in data handling, along with styling updates. ### Detailed summary - Updated return statements in `LiquidityView.tsx` for better flow control. - Corrected a typo in `useRemoveClLiquidity.tsx`. - Added CSS transitions in `PositionItem/styled.ts`. - Reorganized imports in `useIDOCurrencies.ts` and `useIFOAddresses.ts`. - Simplified `onDone` callback in `V3PositionActions.tsx` and `InfinityPositionActions.tsx`. - Introduced `EMPTY_ARRAY` constant in `PositionsTable.tsx` and `PositionCard.tsx`. - Enhanced tooltip handling in `PositionItem.tsx`. - Improved data handling in `InfinityBinPositionsTable.tsx` and `InfinityCLPositionsTable.tsx`. - Added `signal` parameter for aborting fetch requests in `useFarmReward.ts`. - Streamlined query functions to include `signal` in API calls across multiple hooks. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent a9e39a2 commit fc8af71

File tree

15 files changed

+103
-49
lines changed

15 files changed

+103
-49
lines changed

‎apps/web/src/hooks/infinity/useFarmReward.ts‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,10 @@ interface PoolFarmRewardsProps {
2929
address?: Address
3030
poolId?: string
3131
timestamp?: number
32+
signal?: AbortSignal
3233
}
3334

34-
const fetchUserFarmRewards = async ({ chainId, address, poolId, timestamp }: PoolFarmRewardsProps) => {
35+
const fetchUserFarmRewards = async ({ chainId, address, poolId, timestamp, signal }: PoolFarmRewardsProps) => {
3536
if (!(chainId && address)) {
3637
return []
3738
}
@@ -52,6 +53,7 @@ const fetchUserFarmRewards = async ({ chainId, address, poolId, timestamp }: Poo
5253
params: {
5354
path,
5455
},
56+
signal,
5557
},
5658
)
5759

@@ -61,8 +63,9 @@ const fetchUserFarmRewards = async ({ chainId, address, poolId, timestamp }: Poo
6163
interface UserClaimedRewardsProps {
6264
chainId?: number
6365
address?: Address
66+
signal?: AbortSignal
6467
}
65-
const fetchUserClaimedRewards = async ({ chainId, address }: UserClaimedRewardsProps) => {
68+
const fetchUserClaimedRewards = async ({ chainId, address, signal }: UserClaimedRewardsProps) => {
6669
if (!(chainId && address)) {
6770
return []
6871
}
@@ -77,15 +80,17 @@ const fetchUserClaimedRewards = async ({ chainId, address }: UserClaimedRewardsP
7780
address,
7881
},
7982
},
83+
signal,
8084
})
8185
return resp.data ?? []
8286
}
8387

8488
interface FetchMerkleRootByTimestampProps {
8589
chainId?: number
8690
timestamp?: string
91+
signal?: AbortSignal
8792
}
88-
const fetchMerkleRootByTimestamp = async ({ chainId, timestamp }: FetchMerkleRootByTimestampProps) => {
93+
const fetchMerkleRootByTimestamp = async ({ chainId, timestamp, signal }: FetchMerkleRootByTimestampProps) => {
8994
if (!(chainId && timestamp)) {
9095
return undefined
9196
}
@@ -96,6 +101,7 @@ const fetchMerkleRootByTimestamp = async ({ chainId, timestamp }: FetchMerkleRoo
96101
timestamp,
97102
},
98103
},
104+
signal,
99105
})
100106
if (!resp.data?.epochEndTimestamp) {
101107
resp = await rewardApiClient.GET('/farms/epoch-root/{chainId}/{timestamp}', {
@@ -105,6 +111,7 @@ const fetchMerkleRootByTimestamp = async ({ chainId, timestamp }: FetchMerkleRoo
105111
timestamp,
106112
},
107113
},
114+
signal,
108115
})
109116
}
110117
return resp.data ?? undefined
@@ -113,7 +120,7 @@ const fetchMerkleRootByTimestamp = async ({ chainId, timestamp }: FetchMerkleRoo
113120
export const usePoolFarmRewardsFormAPI = ({ chainId, address, poolId, timestamp }: PoolFarmRewardsProps) => {
114121
return useQuery({
115122
queryKey: ['poolFarmRewards', chainId, address, poolId, timestamp],
116-
queryFn: () => fetchUserFarmRewards({ chainId, address, poolId, timestamp }),
123+
queryFn: ({ signal }) => fetchUserFarmRewards({ chainId, address, poolId, timestamp, signal }),
117124
enabled: !!(chainId && address && timestamp),
118125
...FETCH_OPTIONS,
119126
})
@@ -123,18 +130,19 @@ const useClaimedRewardsFromAPI = ({ chainId, address }: UserClaimedRewardsProps)
123130
const [latestTxReceipt] = useLatestTxReceipt()
124131
const { data: claimedHistory } = useQuery({
125132
queryKey: ['ClaimedRewardsFromAPI', chainId, address, latestTxReceipt?.blockHash],
126-
queryFn: () => fetchUserClaimedRewards({ chainId, address }),
133+
queryFn: ({ signal }) => fetchUserClaimedRewards({ chainId, address, signal }),
127134
enabled: !!(chainId && address),
128135
...FETCH_OPTIONS,
129136
})
130137
const latestClaimedTimestamp = claimedHistory?.[0]?.timestamp
131138

132139
const { data: merkleRoot } = useQuery({
133140
queryKey: ['fetchMerkleRootByTimestamp', chainId, address, latestClaimedTimestamp],
134-
queryFn: () =>
141+
queryFn: ({ signal }) =>
135142
fetchMerkleRootByTimestamp({
136143
chainId,
137144
timestamp: (Math.floor(new Date(latestClaimedTimestamp!.toString()).getTime() / 1000) - 1).toString(),
145+
signal,
138146
}),
139147
enabled: !!(chainId && latestClaimedTimestamp),
140148
...FETCH_OPTIONS,
@@ -151,8 +159,10 @@ export const useFarmRewardsFromAPIByChains = ({ chainIds = [], address }: FarmRe
151159
const [latestTxReceipt] = useLatestTxReceipt()
152160
const { data } = useQuery({
153161
queryKey: ['poolFarmRewards', ...chainIds, address, latestTxReceipt?.blockHash],
154-
queryFn: async () => {
155-
const result = await Promise.allSettled(chainIds.map((chainId) => fetchUserFarmRewards({ chainId, address })))
162+
queryFn: async ({ signal }) => {
163+
const result = await Promise.allSettled(
164+
chainIds.map((chainId) => fetchUserFarmRewards({ chainId, address, signal })),
165+
)
156166
return chainIds.reduce<Record<number, Awaited<ReturnType<typeof fetchUserFarmRewards>>>>((acc, id, idx) => {
157167
const rewards = result[idx]
158168
if (rewards.status === 'fulfilled') {
@@ -377,7 +387,7 @@ interface UserFarmRewardsProps {
377387
export const useUserAllFarmRewardsByChainIdFromAPI = ({ chainId, user, timestamp }: UserFarmRewardsProps) => {
378388
const { data: allRewards } = useQuery({
379389
queryKey: ['userAllFarmRewards', chainId, user, timestamp],
380-
queryFn: async () => {
390+
queryFn: async ({ signal }) => {
381391
if (!(chainId && user)) {
382392
return []
383393
}
@@ -392,6 +402,7 @@ export const useUserAllFarmRewardsByChainIdFromAPI = ({ chainId, user, timestamp
392402
timestamp: timestamp?.toString() ?? Math.floor(Date.now() / 1000).toString(),
393403
},
394404
},
405+
signal,
395406
})
396407

397408
return resp.data?.rewards ?? []

‎apps/web/src/hooks/infinity/useRemoveClLiquidity.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export const useRemoveClLiquidity = (
106106
const receipt = await waitForTransaction({
107107
hash: response,
108108
})
109-
// wating for transaction receipt
109+
// waiting for transaction receipt
110110
setLatestTxReceipt({ blockHash: receipt.blockHash, status: receipt.status })
111111
setAttemptingTx?.(false)
112112
onDone?.(response)

‎apps/web/src/views/Cakepad/hooks/ifo/useIFOAddresses.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { useQuery } from '@tanstack/react-query'
22
import { QUERY_SETTINGS_IMMUTABLE } from 'config/constants'
33
import { useActiveChainId } from 'hooks/useActiveChainId'
44
import { getViemClients } from 'utils/viem'
5-
import { isAddressEqual, zeroAddress } from 'viem'
5+
import { zeroAddress } from 'viem'
6+
import { isAddressEqual } from 'utils'
67
import type { Address } from 'viem/accounts'
78
import { useIfoV2Context } from 'views/Cakepad/contexts/useIfoV2Context'
89

‎apps/web/src/views/Idos/hooks/ido/useIDOCurrencies.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { QUERY_SETTINGS_IMMUTABLE } from 'config/constants'
33
import { useCurrency } from 'hooks/Tokens'
44
import { useActiveChainId } from 'hooks/useActiveChainId'
55
import { getViemClients } from 'utils/viem'
6-
import { isAddressEqual, zeroAddress } from 'viem'
6+
import { zeroAddress } from 'viem'
7+
import { isAddressEqual } from 'utils'
78
import type { Address } from 'viem/accounts'
89
import { useIDOContract } from './useIDOContract'
910

‎apps/web/src/views/InfinityInfo/components/Tokens/TokenInfo.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import useTheme from 'hooks/useTheme'
2727
import dynamic from 'next/dynamic'
2828
import type React from 'react'
2929
import { useEffect, useMemo, useState } from 'react'
30-
import { getBlockExploreLink, safeGetAddress } from 'utils'
30+
import { getBlockExploreLink, safeGetAddress, isAddressEqual } from 'utils'
3131
import { formatAmount } from 'utils/formatInfoNumbers'
3232

3333
import { CAKE, USDT } from '@pancakeswap/tokens'
@@ -45,7 +45,6 @@ import {
4545
import { styled } from 'styled-components'
4646
import { getTokenNameAlias, getTokenSymbolAlias } from 'utils/getTokenAlias'
4747
import { isAddress, zeroAddress } from 'viem'
48-
import { isAddressEqual } from 'viem/utils'
4948
import { CurrencyLogo } from 'views/Info/components/CurrencyLogo'
5049
import useCMCLink from 'views/Info/hooks/useCMCLink'
5150
// import BarChart from '../components/BarChart/alt'

‎apps/web/src/views/Liquidity/LiquidityView.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -549,8 +549,11 @@ export const LiquidityView = () => {
549549

550550
if (tokenIdFromUrl === 'pools') {
551551
router.replace('/liquidity/pools')
552-
} else if (!parsedTokenId) {
552+
return null
553+
}
554+
if (!parsedTokenId) {
553555
router.replace('/liquidity/positions')
556+
return null
554557
}
555558

556559
return (

‎apps/web/src/views/PoolDetail/components/ProtocolPositionsTables/InfinityBinPositionsTable.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -496,6 +496,14 @@ export const InfinityBinPositionsTable: React.FC<InfinityBinPositionsTableProps>
496496
return denominator.isZero() ? 0 : numerator.div(denominator).toNumber()
497497
}, [numerator, denominator])
498498

499+
const positionList = useMemo(() => allInfinityPositions || [], [allInfinityPositions])
500+
501+
const tableRows = useMemo(() => filteredPositions?.map((position) => position.tableRow) || [], [filteredPositions])
502+
503+
const totalLiquidityUSD = useMemo(() => {
504+
return filteredPositions?.reduce((sum, pos) => sum + (pos.liquidityUSD || 0), 0) || 0
505+
}, [filteredPositions])
506+
499507
if (isLoading) {
500508
return <LoadingCard />
501509
}
@@ -512,20 +520,16 @@ export const InfinityBinPositionsTable: React.FC<InfinityBinPositionsTableProps>
512520
{/* The actual table component */}
513521
<PositionsTable
514522
poolInfo={poolInfo}
515-
totalLiquidityUSD={filteredPositions.reduce((sum, pos) => sum + (pos.liquidityUSD || 0), 0)}
523+
totalLiquidityUSD={totalLiquidityUSD}
516524
totalApr={totalAprValue}
517525
totalEarnings={formatPoolDetailFiatNumber(rewardsUSD)}
518-
data={filteredPositions.map((position) => position.tableRow)}
526+
data={tableRows}
519527
showInactiveOnly={filter === PositionFilter.Inactive}
520528
toggleInactiveOnly={() =>
521529
setFilter(filter === PositionFilter.Inactive ? PositionFilter.All : PositionFilter.Inactive)
522530
}
523531
harvestAllButton={
524-
<InfinityPositionActions
525-
positionList={allInfinityPositions || []}
526-
showPositionFees={false}
527-
chainId={poolInfo.chainId}
528-
/>
532+
<InfinityPositionActions positionList={positionList} showPositionFees={false} chainId={poolInfo.chainId} />
529533
}
530534
onRowClick={(position) => {
531535
router.push(

‎apps/web/src/views/PoolDetail/components/ProtocolPositionsTables/InfinityCLPositionsTable.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -499,6 +499,14 @@ export const InfinityCLPositionsTable: React.FC<InfinityCLPositionsTableProps> =
499499
return denominator.isZero() ? 0 : numerator.div(denominator).toNumber()
500500
}, [numerator, denominator])
501501

502+
const positionList = useMemo(() => allInfinityPositions || [], [allInfinityPositions])
503+
504+
const tableRows = useMemo(() => filteredPositions?.map((position) => position.tableRow) || [], [filteredPositions])
505+
506+
const totalLiquidityUSD = useMemo(() => {
507+
return filteredPositions?.reduce((sum, pos) => sum + (pos.liquidityUSD || 0), 0) || 0
508+
}, [filteredPositions])
509+
502510
// Show loading state
503511
if (isLoading) {
504512
return <LoadingCard />
@@ -513,20 +521,16 @@ export const InfinityCLPositionsTable: React.FC<InfinityCLPositionsTableProps> =
513521
<>
514522
<PositionsTable
515523
poolInfo={poolInfo}
516-
totalLiquidityUSD={filteredPositions.reduce((sum, pos) => sum + pos.liquidityUSD, 0)}
524+
totalLiquidityUSD={totalLiquidityUSD}
517525
totalEarnings={formatPoolDetailFiatNumber(rewardsUSD)}
518526
totalApr={totalAprValue}
519-
data={filteredPositions.map((position) => position.tableRow)}
527+
data={tableRows}
520528
showInactiveOnly={filter === PositionFilter.Inactive}
521529
toggleInactiveOnly={() =>
522530
setFilter(filter === PositionFilter.Inactive ? PositionFilter.All : PositionFilter.Inactive)
523531
}
524532
harvestAllButton={
525-
<InfinityPositionActions
526-
positionList={allInfinityPositions || []}
527-
showPositionFees={false}
528-
chainId={poolInfo.chainId}
529-
/>
533+
<InfinityPositionActions positionList={positionList} showPositionFees={false} chainId={poolInfo.chainId} />
530534
}
531535
// On row click, navigate to the position detail page
532536
onRowClick={(position) => {

‎apps/web/src/views/PoolDetail/components/ProtocolPositionsTables/PositionsTable.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ interface PositionsTableProps {
4242
onlyFarmHarvest?: boolean
4343
}
4444

45+
const EMPTY_ARRAY = []
46+
4547
export const PositionsTable: React.FC<PositionsTableProps> = ({
4648
poolInfo,
4749
totalLiquidityUSD,
@@ -148,7 +150,7 @@ export const PositionsTable: React.FC<PositionsTableProps> = ({
148150
render: (actions) => <div>{actions}</div>,
149151
},
150152
]}
151-
data={data || []}
153+
data={data || EMPTY_ARRAY}
152154
onRowClick={onRowClick}
153155
/>
154156
) : (

‎apps/web/src/views/universalFarms/components/PositionActions/InfinityPositionActions.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const InfinityPositionActions = ({
5656
hasUnclaimedRewards,
5757
} = useFarmInfinityActions({
5858
chainId,
59-
onDone: (resp) => setLatestTxReceipt(resp),
59+
onDone: setLatestTxReceipt,
6060
})
6161
const { onCollect, attemptingTx: collectAttemptingTxn } = useInfinityCollectFeeAction({ chainId })
6262

@@ -93,10 +93,7 @@ export const InfinityPositionActions = ({
9393
})
9494
}, [poolKey, onCollect, pos])
9595

96-
const isAttemptingTx = useMemo(
97-
() => collectAttemptingTxn || harvestAttemptingTxn,
98-
[collectAttemptingTxn, harvestAttemptingTxn],
99-
)
96+
const isAttemptingTx = collectAttemptingTxn || harvestAttemptingTxn
10097

10198
if (!currency0 || !currency1) {
10299
return null

0 commit comments

Comments
 (0)