feat: show eth denominated value for legacy users

Author: nikkaroraa

packages/frontend/src/components/Positions/CrabPosition.tsx

@@ -27,11 +27,13 @@ type CrabPositionType = {
 }
 
 const CrabPosition: React.FC<CrabPositionType> = ({
+  depositedEth,
   depositedUsd,
   loading,
   pnlWMidPriceInPerct,
   pnlWMidPriceInUSD,
   currentCrabPositionValue,
+  currentCrabPositionValueInETH,
   version,
 }) => {
   const classes = useStyles()
@@ -66,6 +68,9 @@ const CrabPosition: React.FC<CrabPositionType> = ({
             <Typography variant="body1" className={classes.textMonospace}>
               {formatCurrency(depositedUsd.toNumber())}
             </Typography>
+            <Typography variant="body2" color="textSecondary">
+              <span id="pos-page-crab-deposited-amount">{formatNumber(depositedEth.toNumber(), 4)} ETH</span>
+            </Typography>
           </div>
 
           <div className={classes.positionColumn}>
@@ -75,9 +80,14 @@ const CrabPosition: React.FC<CrabPositionType> = ({
             {loading ? (
               <Loading />
             ) : (
-              <Typography variant="body1" className={classes.textMonospace}>
-                {formatCurrency(currentCrabPositionValue.toNumber())}
-              </Typography>
+              <>
+                <Typography variant="body1" className={classes.textMonospace}>
+                  {formatCurrency(currentCrabPositionValue.toNumber())}
+                </Typography>
+                <Typography variant="body2" color="textSecondary">
+                  {formatNumber(currentCrabPositionValueInETH.toNumber(), 4)} ETH
+                </Typography>
+              </>
             )}
           </div>
         </div>

packages/frontend/src/components/Positions/CrabPositionV2.tsx

@@ -10,13 +10,15 @@ 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 }) => {
   return <Typography variant={isSmall ? 'caption' : 'body1'}>loading...</Typography>
 }
 
 type CrabPositionV2Type = {
+  address: string
   depositedEth: BigNumber
   depositedUsd: BigNumber
   loading: boolean
@@ -28,11 +30,14 @@ type CrabPositionV2Type = {
 }
 
 const CrabPositionV2: React.FC<CrabPositionV2Type> = ({
+  address,
+  depositedEth,
   depositedUsd,
   loading,
   pnlWMidPriceInPerct,
   pnlWMidPriceInUSD,
   currentCrabPositionValue,
+  currentCrabPositionValueInETH,
   version,
 }) => {
   const classes = useStyles()
@@ -45,6 +50,8 @@ const CrabPositionV2: React.FC<CrabPositionV2Type> = ({
   useCurrentCrabPositionValue()
   useCurrentCrabPositionValueV2()
 
+  const isLegacyUser = useCheckLegacyCrabV2User(address ?? '')
+
   useEffect(() => {
     setStrategyData()
   }, [collatRatio, setStrategyData])
@@ -77,6 +84,11 @@ const CrabPositionV2: React.FC<CrabPositionV2Type> = ({
             <Typography variant="body1" className={classes.textMonospace}>
               {formatCurrency(depositedUsd.toNumber())}
             </Typography>
+            {isLegacyUser && (
+              <Typography variant="body2" color="textSecondary">
+                <span id="pos-page-crab-deposited-amount">{formatNumber(depositedEth.toNumber(), 4)} ETH</span>
+              </Typography>
+            )}
           </div>
 
           <div className={classes.positionColumn}>
@@ -87,9 +99,16 @@ const CrabPositionV2: React.FC<CrabPositionV2Type> = ({
             {loading ? (
               <Loading />
             ) : (
-              <Typography variant="body1" className={classes.textMonospace}>
-                {formatCurrency(currentCrabPositionValue.toNumber())}
-              </Typography>
+              <>
+                <Typography variant="body1" className={classes.textMonospace}>
+                  {formatCurrency(currentCrabPositionValue.toNumber())}
+                </Typography>
+                {isLegacyUser && (
+                  <Typography variant="body2" color="textSecondary">
+                    {formatNumber(currentCrabPositionValueInETH.toNumber(), 4)} ETH
+                  </Typography>
+                )}
+              </>
             )}
           </div>
         </div>

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) && (
         <CrabPositionV2
+          address={address}
           depositedEth={depositedEthV2}
           depositedUsd={depositedUsdV2}
           loading={isCrabV2loading}

packages/frontend/src/components/Strategies/Crab/CrabTradeV2/Withdraw.tsx

@@ -34,7 +34,7 @@ import {
   useQueueWithdrawCrab,
 } from '@state/crab/hooks'
 import { readyAtom } from '@state/squeethPool/atoms'
-import { useUserCrabV2TxHistory } from '@hooks/useUserCrabV2TxHistory'
+import { useCheckLegacyCrabV2User } from '@hooks/useCheckLegacyUser'
 import {
   dailyHistoricalFundingAtom,
   impliedVolAtom,
@@ -73,8 +73,6 @@ import { CrabTradeTransactionType, CrabTradeType, CrabTransactionConfirmation, O
 import { CRAB_EVENTS } from '@utils/amplitude'
 import useAmplitude from '@hooks/useAmplitude'
 import useExecuteOnce from '@hooks/useExecuteOnce'
-import useAppEffect from '@hooks/useAppEffect'
-import { CrabStrategyV2TxType, CrabStrategyTxType } from 'src/types'
 import useTrackTransactionFlow from '@hooks/useTrackTransactionFlow'
 
 enum WithdrawSteps {
@@ -150,7 +148,6 @@ const CrabWithdraw: React.FC<{ onTxnConfirm: (txn: CrabTransactionConfirmation)
   const address = useAtomValue(addressAtom)
   const { allowance: crabAllowance, approve: approveCrab } = useUserAllowance(crabStrategy2, crabHelper)
   const { allowance: crabQueueAllowance, approve: approveQueueCrab } = useUserAllowance(crabStrategy2, crabNetting)
-  const { data } = useUserCrabV2TxHistory(address ?? '')
 
   const impliedVol = useAtomValue(impliedVolAtom)
   const normFactor = useAtomValue(normFactorAtom)
@@ -179,23 +176,10 @@ const CrabWithdraw: React.FC<{ onTxnConfirm: (txn: CrabTransactionConfirmation)
     [track],
   )
 
-  useAppEffect(() => {
-    // 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

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
+}