diff --git a/packages/frontend/src/components/Positions/CrabPosition.tsx b/packages/frontend/src/components/Positions/CrabPosition.tsx index a0a1bfc86..810b1912e 100644 --- a/packages/frontend/src/components/Positions/CrabPosition.tsx +++ b/packages/frontend/src/components/Positions/CrabPosition.tsx @@ -27,11 +27,13 @@ type CrabPositionType = { } const CrabPosition: React.FC = ({ + depositedEth, depositedUsd, loading, pnlWMidPriceInPerct, pnlWMidPriceInUSD, currentCrabPositionValue, + currentCrabPositionValueInETH, version, }) => { const classes = useStyles() @@ -66,6 +68,9 @@ const CrabPosition: React.FC = ({ {formatCurrency(depositedUsd.toNumber())} + + {formatNumber(depositedEth.toNumber(), 4)} ETH +
@@ -75,9 +80,14 @@ const CrabPosition: React.FC = ({ {loading ? ( ) : ( - - {formatCurrency(currentCrabPositionValue.toNumber())} - + <> + + {formatCurrency(currentCrabPositionValue.toNumber())} + + + {formatNumber(currentCrabPositionValueInETH.toNumber(), 4)} ETH + + )}
diff --git a/packages/frontend/src/components/Positions/CrabPositionV2.tsx b/packages/frontend/src/components/Positions/CrabPositionV2.tsx index d63d3576e..11f9e10d8 100644 --- a/packages/frontend/src/components/Positions/CrabPositionV2.tsx +++ b/packages/frontend/src/components/Positions/CrabPositionV2.tsx @@ -10,6 +10,7 @@ import { crabStrategyCollatRatioAtom, usdcQueuedAtom, crabQueuedAtom, crabUSDVal import { Tooltips, USDC_DECIMALS } from '@constants/index' import { toTokenAmount } from '@utils/calculations' import { formatCurrency, formatNumber } from '@utils/formatter' +import { useCheckLegacyCrabV2User } from '@hooks/useCheckLegacyUser' import useStyles from './useStyles' const Loading: React.FC<{ isSmall?: boolean }> = ({ isSmall = false }) => { @@ -17,6 +18,7 @@ const Loading: React.FC<{ isSmall?: boolean }> = ({ isSmall = false }) => { } type CrabPositionV2Type = { + address: string depositedEth: BigNumber depositedUsd: BigNumber loading: boolean @@ -28,11 +30,14 @@ type CrabPositionV2Type = { } const CrabPositionV2: React.FC = ({ + address, + depositedEth, depositedUsd, loading, pnlWMidPriceInPerct, pnlWMidPriceInUSD, currentCrabPositionValue, + currentCrabPositionValueInETH, version, }) => { const classes = useStyles() @@ -45,6 +50,8 @@ const CrabPositionV2: React.FC = ({ useCurrentCrabPositionValue() useCurrentCrabPositionValueV2() + const isLegacyUser = useCheckLegacyCrabV2User(address ?? '') + useEffect(() => { setStrategyData() }, [collatRatio, setStrategyData]) @@ -77,6 +84,11 @@ const CrabPositionV2: React.FC = ({ {formatCurrency(depositedUsd.toNumber())} + {isLegacyUser && ( + + {formatNumber(depositedEth.toNumber(), 4)} ETH + + )}
@@ -87,9 +99,16 @@ const CrabPositionV2: React.FC = ({ {loading ? ( ) : ( - - {formatCurrency(currentCrabPositionValue.toNumber())} - + <> + + {formatCurrency(currentCrabPositionValue.toNumber())} + + {isLegacyUser && ( + + {formatNumber(currentCrabPositionValueInETH.toNumber(), 4)} ETH + + )} + )}
diff --git a/packages/frontend/src/components/Positions/Positions.tsx b/packages/frontend/src/components/Positions/Positions.tsx index 10d3a6601..9df86e694 100644 --- a/packages/frontend/src/components/Positions/Positions.tsx +++ b/packages/frontend/src/components/Positions/Positions.tsx @@ -28,7 +28,6 @@ import useAppEffect from '@hooks/useAppEffect' import { crabQueuedInUsdAtom } from '@state/crab/atoms' import { useBullPosition } from '@hooks/useBullPosition' import { useInitBullStrategy } from '@state/bull/hooks' -import useStyles from './useStyles' import CrabPosition from './CrabPosition' import CrabPositionV2 from './CrabPositionV2' import LongSqueeth from './LongSqueeth' @@ -38,7 +37,6 @@ import MintedSqueeth from './MintedSqueeth' import BullPosition from './BullPosition' const Positions: React.FC = () => { - const classes = useStyles() const address = useAtomValue(addressAtom) const positionType = useAtomValue(positionTypeAtom) @@ -145,6 +143,7 @@ const Positions: React.FC = () => { {!!address && currentCrabPositionValueInETHV2.isGreaterThan(0) && ( { - // show token toggle only if the user has deposited before 28th December 00:00 UTC, the launch date of new design - const launchDate = new Date('2022-12-28T00:00:00.000Z').getTime() / 1000 - const isLegacyUser = - data?.some((tx) => { - const isDepositTx = - tx.type === CrabStrategyV2TxType.FLASH_DEPOSIT || - tx.type === CrabStrategyV2TxType.DEPOSIT || - tx.type === CrabStrategyV2TxType.DEPOSIT_V1 || - tx.type === CrabStrategyTxType.DEPOSIT || - tx.type === CrabStrategyV2TxType.OTC_DEPOSIT - - return isDepositTx && tx.timestamp < launchDate - }) ?? false - + const isLegacyUser = useCheckLegacyCrabV2User(address ?? '') + useEffect(() => { setShowTokenToggle(isLegacyUser) - }, [data]) + }, [isLegacyUser]) const withdrawPriceImpactWarning = useAppMemo(() => { if (useQueue) return false diff --git a/packages/frontend/src/hooks/useCheckLegacyUser.ts b/packages/frontend/src/hooks/useCheckLegacyUser.ts new file mode 100644 index 000000000..7421b1331 --- /dev/null +++ b/packages/frontend/src/hooks/useCheckLegacyUser.ts @@ -0,0 +1,33 @@ +import { useState } from 'react' + +import { useUserCrabV2TxHistory } from './useUserCrabV2TxHistory' +import useAppEffect from './useAppEffect' +import { CrabStrategyV2TxType, CrabStrategyTxType } from 'src/types' + +// legacy as in users who deposited before ETH deposit was removed +export const useCheckLegacyCrabV2User = (address: string) => { + const [isLegacyUser, setLegacyUser] = useState(false) + + const { data } = useUserCrabV2TxHistory(address ?? '') + + useAppEffect(() => { + // launch date of new design, when we removed ETH deposit / withdraw + const launchDate = new Date('2022-12-28T00:00:00.000Z').getTime() / 1000 + + const isLegacy = + data?.some((tx) => { + const isDepositTx = + tx.type === CrabStrategyV2TxType.FLASH_DEPOSIT || + tx.type === CrabStrategyV2TxType.DEPOSIT || + tx.type === CrabStrategyV2TxType.DEPOSIT_V1 || + tx.type === CrabStrategyTxType.DEPOSIT || + tx.type === CrabStrategyV2TxType.OTC_DEPOSIT + + return isDepositTx && tx.timestamp < launchDate + }) ?? false + + setLegacyUser(isLegacy) + }, [data]) + + return isLegacyUser +}