-
+
Redeemable Collateral
-
- {isPositionLoading && existingCollat.isEqualTo(0) ? 'Loading' : existingCollat.toFixed(4)} ETH
- {new BigNumber(existingCollatPercent).isFinite() ? ' (' + existingCollatPercent + ' %)' : null}
-
+
+ {isPositionLoading && existingCollat.isEqualTo(0) ? (
+
+ ) : (
+
+ {formatNumber(existingCollat.toNumber(), 4)} ETH
+ {new BigNumber(existingCollatPercent).isFinite()
+ ? ' (' + formatNumber(existingCollatPercent) + '%)'
+ : null}
+
+ )}
diff --git a/packages/frontend/src/components/Positions/TxHistory.tsx b/packages/frontend/src/components/Positions/TxHistory.tsx
new file mode 100644
index 000000000..23db470cb
--- /dev/null
+++ b/packages/frontend/src/components/Positions/TxHistory.tsx
@@ -0,0 +1,229 @@
+import { createStyles, makeStyles, Typography, useTheme, useMediaQuery, IconButton } from '@material-ui/core'
+import OpenInNewIcon from '@material-ui/icons/OpenInNew'
+import { useAtomValue } from 'jotai'
+import clsx from 'clsx'
+
+import { EtherscanPrefix } from '@constants/index'
+import { TransactionType } from '@constants/enums'
+import { useTransactionHistory } from '@hooks/useTransactionHistory'
+import { useUsdAmount } from '@hooks/useUsdAmount'
+import { networkIdAtom } from '@state/wallet/atoms'
+import { useETHPrice } from '@hooks/useETHPrice'
+import { normFactorAtom } from '@state/controller/atoms'
+import { formatCurrency, formatNumber } from '@utils/formatter'
+import useCommonStyles from './useStyles'
+
+const useStyles = makeStyles((theme) =>
+ createStyles({
+ container: {
+ marginTop: theme.spacing(2),
+ marginBottom: theme.spacing(5),
+ },
+ tableCell: {
+ width: '10px',
+ },
+ red: {
+ color: theme.palette.error.main,
+ },
+ green: {
+ color: theme.palette.success.main,
+ },
+ txTypeContainer: {
+ display: 'flex',
+ alignItems: 'center',
+ },
+ historyItem: {
+ padding: theme.spacing(2),
+ backgroundColor: theme.palette.background.stone,
+ marginTop: theme.spacing(2),
+ borderRadius: theme.spacing(1),
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ flexWrap: 'wrap',
+ width: '100%',
+ gridGap: '12px',
+ },
+ itemHeaderCol: {
+ flexBasis: '30%',
+ [theme.breakpoints.down('xs')]: {
+ flexBasis: '100%',
+ marginBottom: theme.spacing(1),
+ },
+ },
+ itemDataCol: {
+ flex: 1,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ gridGap: '12px',
+ },
+ txItemVal: {
+ flexBasis: '120px',
+ flex: 1,
+ },
+ txItemCTA: {
+ textAlign: 'right',
+ flexBasis: '144px',
+
+ [theme.breakpoints.down('xs')]: {
+ flexBasis: '40px',
+ },
+ },
+ ctaButton: {
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+ },
+ }),
+)
+
+const TxHistory: React.FC = () => {
+ const { transactions, loading } = useTransactionHistory()
+ const networkId = useAtomValue(networkIdAtom)
+ const ethPrice = useETHPrice()
+ const normalizationFactor = useAtomValue(normFactorAtom)
+
+ const { getUsdAmt } = useUsdAmount()
+
+ const theme = useTheme()
+ const classes = useStyles()
+ const commonClasses = useCommonStyles()
+ const isMobileBreakpoint = useMediaQuery(theme.breakpoints.down('xs'))
+
+ if (loading) {
+ return (
+
+ loading...
+
+ )
+ }
+
+ if (transactions.length === 0) {
+ return (
+
+ No transaction found.
+
+ )
+ }
+
+ return (
+ <>
+ {transactions.map((tx, index) => (
+
+
+
+ {tx.transactionType}
+
+
+ {new Date(Number(tx.timestamp) * 1000).toDateString()}
+
+
+
+
+ {tx.transactionType === TransactionType.CRAB_FLASH_DEPOSIT ||
+ tx.transactionType === TransactionType.CRAB_FLASH_WITHDRAW ||
+ tx.transactionType === TransactionType.BULL_FLASH_DEPOSIT ||
+ tx.transactionType === TransactionType.BULL_FLASH_WITHDRAW ? (
+ <>
+
+
+ {formatNumber(tx.ethAmount.toNumber(), 4)} WETH
+
+
+ {formatCurrency(getUsdAmt(tx.ethAmount, tx.timestamp).toNumber())}
+
+
+
+
+ ) : (
+ <>
+
+ {tx.transactionType != TransactionType.OTC_DEPOSIT &&
+ tx.transactionType != TransactionType.OTC_WITHDRAW ? (
+ <>
+
+ {formatNumber(tx.squeethAmount.toNumber(), 4)} oSQTH
+
+
+ {formatCurrency(
+ tx.squeethAmount
+ .times(ethPrice)
+ .times(ethPrice)
+ .div(10000)
+ .times(normalizationFactor)
+ .toNumber(),
+ )}
+
+
+ ) : null}
+
+
+
+ {tx.transactionType === TransactionType.CRAB_V2_USDC_FLASH_DEPOSIT ||
+ tx.transactionType === TransactionType.CRAB_V2_USDC_FLASH_WITHDRAW
+ ? `${formatNumber(tx.usdValue.toNumber(), 2)} USDC`
+ : `${formatNumber(tx.ethAmount.toNumber(), 4)} WETH`}
+
+
+ {tx.transactionType === TransactionType.CRAB_V2_USDC_FLASH_DEPOSIT ||
+ tx.transactionType === TransactionType.CRAB_V2_USDC_FLASH_WITHDRAW
+ ? `${formatNumber(tx.ethAmount.toNumber(), 4)} WETH`
+ : `${formatCurrency(tx.usdValue.toNumber())}`}
+
+
+
+ )}
+
+
+
+ {!isMobileBreakpoint && (
+
+ View Transaction
+
+ )}
+
+
+
+
+
+ ))}
+
+ )
+}
+
+export default TxHistory
diff --git a/packages/frontend/src/pages/positions/YourVaults.test.tsx b/packages/frontend/src/components/Positions/YourVaults.test.tsx
similarity index 100%
rename from packages/frontend/src/pages/positions/YourVaults.test.tsx
rename to packages/frontend/src/components/Positions/YourVaults.test.tsx
diff --git a/packages/frontend/src/components/Positions/YourVaults.tsx b/packages/frontend/src/components/Positions/YourVaults.tsx
new file mode 100644
index 000000000..e25b32c5c
--- /dev/null
+++ b/packages/frontend/src/components/Positions/YourVaults.tsx
@@ -0,0 +1,79 @@
+import { Grid, Typography } from '@material-ui/core'
+import BigNumber from 'bignumber.js'
+import Link from 'next/link'
+import { FC } from 'react'
+
+import SqueethCard from '@components/SqueethCard'
+import LabelWithTooltip from '@components/LabelWithTooltip'
+import useYourVaults from '@hooks/useYourVaults'
+import { toTokenAmount } from '@utils/calculations'
+import { formatNumber } from '@utils/formatter'
+import useStyles from './useStyles'
+import NoPosition from './NoPosition'
+
+const YourVaults: FC = () => {
+ const classes = useStyles()
+ const { data: { vaults } = {}, loading, error } = useYourVaults()
+
+ if (error) {
+ return (
+
+ {error.message}
+
+ )
+ }
+
+ if (loading) {
+ return (
+
+ loading...
+
+ )
+ }
+
+ if (vaults?.length === 0 || !vaults) {
+ return
+ }
+
+ return (
+ <>
+ {vaults?.map((vault, index) => {
+ const vaultShortAmount = toTokenAmount(new BigNumber(vault.shortAmount), 18)
+ const vaultCollateralAmount = toTokenAmount(new BigNumber(vault.collateralAmount), 18)
+
+ return (
+
+
+
+
+
+
+
+ {vault.id}
+
+
+
+
+
+
+ {formatNumber(vaultShortAmount.toNumber(), 4)} oSQTH
+
+
+
+
+
+
+ {formatNumber(vaultCollateralAmount.toNumber(), 4)} ETH
+
+
+
+
+
+
+ )
+ })}
+
+ )
+}
+
+export default YourVaults
diff --git a/packages/frontend/src/components/Positions/index.tsx b/packages/frontend/src/components/Positions/index.tsx
new file mode 100644
index 000000000..8d86b73a0
--- /dev/null
+++ b/packages/frontend/src/components/Positions/index.tsx
@@ -0,0 +1,54 @@
+import { Typography } from '@material-ui/core'
+
+import TxHistory from '@components/Positions/TxHistory'
+import useStyles from './useStyles'
+import YourVaults from './YourVaults'
+import LPPositions from './LPPositions'
+import Positions from './Positions'
+import HeaderBar from './HeaderBar'
+
+export default function PositionsUI() {
+ const classes = useStyles()
+
+ return (
+
+
+
+
+
+ Your Positions
+
+
+
+
+
+
+ Your LP Positions
+
+
+
+
+
+
+
+
+ Your Vaults
+
+
+
+
+
+
+
+
+ Transaction History
+
+
+
+
+
+
+ )
+}
diff --git a/packages/frontend/src/pages/positions/useStyles.ts b/packages/frontend/src/components/Positions/useStyles.ts
similarity index 68%
rename from packages/frontend/src/pages/positions/useStyles.ts
rename to packages/frontend/src/components/Positions/useStyles.ts
index 1bdd280d9..b029d5904 100644
--- a/packages/frontend/src/pages/positions/useStyles.ts
+++ b/packages/frontend/src/components/Positions/useStyles.ts
@@ -13,14 +13,31 @@ const useStyles = makeStyles((theme) =>
padding: theme.spacing(0, 2),
},
},
- header: {
+ sectionHeaderFirst: {
+ marginTop: theme.spacing(5),
+ display: 'flex',
+ justifyContent: 'space-between',
+ },
+ sectionHeader: {
marginTop: theme.spacing(8),
display: 'flex',
justifyContent: 'space-between',
},
+ sectionContent: {
+ marginTop: theme.spacing(1.5),
+ },
+ sectionTitle: {
+ fontSize: '18px',
+ fontWeight: 700,
+ letterSpacing: '-0.01em',
+ lineHeight: '130%',
+ },
+ textMonospace: {
+ fontFamily: 'DM Mono',
+ },
position: {
padding: theme.spacing(2),
- backgroundColor: `${theme.palette.background.paper}40`,
+ backgroundColor: theme.palette.background.stone,
marginTop: theme.spacing(2),
borderRadius: theme.spacing(1),
display: 'flex',
@@ -50,25 +67,25 @@ const useStyles = makeStyles((theme) =>
width: '100%',
justifyContent: 'space-between',
},
+ positionColumn: {
+ flex: 1,
+ },
+ rowMarginTop: {
+ marginTop: '16px',
+ },
positionTitle: {
width: '30%',
[theme.breakpoints.down('sm')]: {
width: '100%',
+ marginBottom: theme.spacing(3),
},
},
- empty: {
- marginTop: theme.spacing(2),
- },
green: {
color: theme.palette.success.main,
},
red: {
color: theme.palette.error.main,
},
- history: {
- marginTop: theme.spacing(8),
- marginBottom: theme.spacing(8),
- },
link: {
color: theme.palette.primary.main,
textDecoration: 'underline',
@@ -77,14 +94,17 @@ const useStyles = makeStyles((theme) =>
marginTop: theme.spacing(1),
},
infoIcon: {
- fontSize: '10px',
+ fontSize: '12px',
marginLeft: theme.spacing(0.5),
},
tooltipContainer: {
marginLeft: '.5em',
+ display: 'flex',
+ alignItems: 'center',
},
- dotIcon: {
- marginRight: '1em',
+ titleWithTooltip: {
+ display: 'flex',
+ alignItems: 'center',
},
pnlTitle: {
display: 'flex',
@@ -94,6 +114,14 @@ const useStyles = makeStyles((theme) =>
width: '18px',
maxHeight: '25px',
},
+ fontMedium: {
+ fontWeight: 500,
+ },
+ noPositionContainer: {
+ display: 'flex',
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ },
}),
)
diff --git a/packages/frontend/src/components/SqueethCard.tsx b/packages/frontend/src/components/SqueethCard.tsx
index 45bea7b09..521555cad 100644
--- a/packages/frontend/src/components/SqueethCard.tsx
+++ b/packages/frontend/src/components/SqueethCard.tsx
@@ -4,13 +4,7 @@ import { FC } from 'react'
const SqueethCard: FC
= ({ children, ...props }) => {
const theme = useTheme()
return (
-
+
{children}
)
diff --git a/packages/frontend/src/components/Strategies/Crab/CrabTradeV2/Withdraw.tsx b/packages/frontend/src/components/Strategies/Crab/CrabTradeV2/Withdraw.tsx
index 321688c6d..322277c25 100644
--- a/packages/frontend/src/components/Strategies/Crab/CrabTradeV2/Withdraw.tsx
+++ b/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
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
+}
diff --git a/packages/frontend/src/pages/positions/BullPosition.tsx b/packages/frontend/src/pages/positions/BullPosition.tsx
deleted file mode 100644
index 5af4f4848..000000000
--- a/packages/frontend/src/pages/positions/BullPosition.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Tooltip, Typography, makeStyles } from '@material-ui/core'
-import InfoIcon from '@material-ui/icons/InfoOutlined'
-import useStyles from './useStyles'
-import Image from 'next/image'
-import { Tooltips } from '../../constants'
-import { useAtomValue } from 'jotai'
-import {
- bullCurrentETHPositionAtom,
- bullCurrentUSDCPositionAtom,
- bullDepositedETHAtom,
- bullDepositedUSDCAtom,
- bullEthPnlAtom,
- bullEthPnlPerctAtom,
- bullPositionLoadedAtom,
-} from '@state/bull/atoms'
-import bullStrategyImg from 'public/images/bull_strategy.png'
-
-const BullPosition: React.FC = () => {
- const classes = useStyles()
- const bullCurrentETH = useAtomValue(bullCurrentETHPositionAtom)
- const bullCurrentUSD = useAtomValue(bullCurrentUSDCPositionAtom)
-
- const bullDepositedETH = useAtomValue(bullDepositedETHAtom)
- const bullDepositedUSD = useAtomValue(bullDepositedUSDCAtom)
-
- const bullEthPnl = useAtomValue(bullEthPnlAtom)
- const bullEthPnlInPerct = useAtomValue(bullEthPnlPerctAtom)
-
- const loading = !useAtomValue(bullPositionLoadedAtom)
-
- if (bullCurrentETH.isZero()) return null
-
- return (
-
-
-
-
-
-
- Deposited Amount
-
-
-
-
- {bullDepositedETH.toFixed(6)} ETH
-
- ${bullDepositedUSD.toFixed(2)}
-
-
-
-
- Current Position
-
- {!loading ? `${bullCurrentETH.toFixed(6)}` : 'Loading'} ETH
-
- {!loading ? `$${bullCurrentUSD.toFixed(2)}` : 'Loading'}
-
-
-
-
-
-
- Unrealized P&L
-
-
-
-
-
- {!loading ? `${bullEthPnl.toFixed(6)} ETH` : 'Loading'}
-
-
- {!loading ? `${bullEthPnlInPerct.toFixed(2)}` + '%' : 'Loading'}
-
-
-
-
-
-
-
- {supportedNetwork ? (
-
- Connect Wallet
-
- ) : (
- Unsupported Network
- )}
-
-
-
-
-
-
-
- Deposited Amount
-
-
-
-
- $ {depositedUsd.toFixed(2)}
-
- {depositedEth.toFixed(6)}
- ETH
-
-
-
-
- Current Position
-
- {!loading ? `$ ${currentCrabPositionValue.toFixed(2)}` : 'Loading'}
-
- {!loading ? `${currentCrabPositionValueInETH.toFixed(6)} ETH` : 'Loading'}
-
-
-
-
-
-
- Unrealized P&L
-
-
-
-
-
- {!loading ? '$' + `${pnlWMidPriceInUSD.toFixed(2)}` : 'Loading'}
-
-
- {!loading ? `${pnlWMidPriceInPerct.toFixed(2)}` + '%' : 'Loading'}
-
-
-
-
-
-
-
-
-
-
- Deposited Amount
-
-
-
-
- $ {depositedUsd.toFixed(2)}
-
- {depositedEth.toFixed(6)}
- ETH
-
-
-
-
- Current Position
-
- {!loading ? `$ ${currentCrabPositionValue.toFixed(2)}` : 'Loading'}
-
- {!loading ? `${currentCrabPositionValueInETH.toFixed(6)} ETH` : 'Loading'}
-
-
-
-
-
-
- Unrealized P&L
-
-
-
-
-
- {!loading ? '$' + `${pnlWMidPriceInUSD.toFixed(2)}` : 'Loading'}
-
-
- {!loading ? `${pnlWMidPriceInPerct.toFixed(2)}` + '%' : 'Loading'}
-
-
-
-
-
- {/* ignore dust amount */}
- {usdcQueued.isGreaterThan('100') && (
-
-
- Initiated Deposit
-
-
-
-
-
- {!loading ? formatCurrency(Number(initiatedDepositAmount)) : 'Loading'}
-
-
- )}
-
- {/* ignore dust amount */}
- {crabQueued.isGreaterThan('10000000000') && (
-
-
- Initiated Withdrawal
-
-
-
-
-
- {!loading ? formatCurrency(Number(initiatedWithdrawalAmount)) : 'Loading'}
-
-
- )}
-
-
-
- {transactions.map((tx, index) => (
-
-
- {tx.transactionType}
-
- {new Date(Number(tx.timestamp) * 1000).toDateString()}
-
-
- {tx.transactionType === TransactionType.CRAB_FLASH_DEPOSIT ||
- tx.transactionType === TransactionType.CRAB_FLASH_WITHDRAW ||
- tx.transactionType === TransactionType.BULL_FLASH_DEPOSIT ||
- tx.transactionType === TransactionType.BULL_FLASH_WITHDRAW ? (
- <>
-
-
- {tx.ethAmount.toFixed(4)} WETH
-
-
- ${getUsdAmt(tx.ethAmount, tx.timestamp).toFixed(2)}
-
-
-
-
- ) : (
- <>
-
- {tx.transactionType != TransactionType.OTC_DEPOSIT &&
- tx.transactionType != TransactionType.OTC_WITHDRAW ? (
- <>
-
- {tx.squeethAmount.toFixed(8)} oSQTH
-
-
- $
- {tx.squeethAmount
- .times(ethPrice)
- .times(ethPrice)
- .div(10000)
- .times(normalizationFactor)
- .toFixed(2)}
-
-
- ) : null}
-
-
-
- {tx.transactionType === TransactionType.CRAB_V2_USDC_FLASH_DEPOSIT ||
- tx.transactionType === TransactionType.CRAB_V2_USDC_FLASH_WITHDRAW
- ? `${tx.usdValue.toFixed(2)} USDC`
- : `${tx.ethAmount.toFixed(4)} WETH`}
-
-
- {tx.transactionType === TransactionType.CRAB_V2_USDC_FLASH_DEPOSIT ||
- tx.transactionType === TransactionType.CRAB_V2_USDC_FLASH_WITHDRAW
- ? `${tx.ethAmount.toFixed(4)} WETH`
- : `$${tx.usdValue.toFixed(2)}`}
-
-
-
- )}
-
-
-
-
-
-
-
- ))}
-
-
- LPed Squeeth
-
- {vaultExists ? Manage : null}
-
-
-
-
-
-
- Amount
-
-
- {lpedSqueeth.toFixed(8)}
- oSQTH
-
-
-
-
- {new BigNumber(existingLiqPrice).isFinite() ? (
-
-
- Liquidation Price
-
-
-
-
-
- ${isVaultLoading && existingLiqPrice.isEqualTo(0) ? 'Loading' : existingLiqPrice.toFixed(2)}
-
-
- ) : null}
-
-
- Collateral (Amt / Ratio)
-
-
- {isVaultLoading && existingCollat.isEqualTo(0) ? 'Loading' : existingCollat.toFixed(4)} ETH
- {new BigNumber(existingCollatPercent).isFinite() ? ' (' + existingCollatPercent + ' %)' : null}
-
-
-
-
-
-
- Long Squeeth
-
-
-
-
-
- oSQTH Amount
-
-
- {isPositionLoading && squeethAmount.isEqualTo(0) ? (
- 'Loading'
- ) : (
- {squeethAmount.toFixed(8)}
- )}{' '}
- oSQTH
-
-
-
-
- Position Value
-
-
- ${isPnLLoading && longPositionValue.isEqualTo(0) ? 'Loading' : longPositionValue.toFixed(2)}
-
-
-
- {isToHidePnL ? (
-
- ) : (
-
-
-
- {isPnLLoading || longUnrealizedPNL.loading ? (
-
Loading
- ) : (
- <>
-
- $ {longUnrealizedPNL.usd.toFixed(2)} ({longUnrealizedPNL.eth.toFixed(5)} ETH)
- {/* ${sellQuote.amountOut.minus(wethAmount.abs()).times(toTokenAmount(index, 18).sqrt()).toFixed(2)}{' '}
- ({sellQuote.amountOut.minus(wethAmount.abs()).toFixed(5)} ETH) */}
-
-
- {(longGain || 0).toFixed(2)}%
-
-
- )}
-
-
-
-
- $ {swapsLoading ? 'Loading' : longRealizedPNL.toFixed(2)}
-
-
-
- )}
-
-
-
- Minted Squeeth
-
- {vaultExists ? Manage : null}
-
-
-
-
-
-
- Amount
-
-
- {isPositionLoading ? 'Loading' : {mintedDebt.toFixed(8)}}{' '}
- oSQTH
-
-
-
-
- {new BigNumber(existingLiqPrice).isFinite() ? (
-
-
- Liquidation Price
-
-
-
-
-
- $ {isVaultLoading && existingLiqPrice.isEqualTo(0) ? 'Loading' : existingLiqPrice.toFixed(2)}
-
-
- ) : null}
-
-
- Collateral (Amt / Ratio)
-
-
- {isVaultLoading && existingCollat.isEqualTo(0) ? 'Loading' : existingCollat.toFixed(4)} ETH
- {new BigNumber(existingCollatPercent).isFinite() ? ' (' + existingCollatPercent + ' %)' : null}
-
-
-
-
-
-
-
-
-
- Your Positions
-
-
-
- ETH Price:{' '}
-
-
-
- $ {toTokenAmount(index, 18).sqrt().toFixed(2).toLocaleString()}
-
-
-
-
-
-
-
- {shortDebt.isZero() &&
- depositedEth.isZero() &&
- depositedEthV2.isZero() &&
- squeethAmount.isZero() &&
- mintedDebt.isZero() &&
- lpedSqueeth.isZero() ? (
-
- No active positions
-
- ) : null}
-
- {positionType === PositionType.LONG &&
}
-
- {positionType === PositionType.SHORT &&
}
-
- {lpedSqueeth.isGreaterThan(0) && !fullyLiquidated &&
}
-
- {mintedDebt.isGreaterThan(0) && !fullyLiquidated &&
}
-
- {liquidations.length > 0 &&
}
-
- {!!address && currentCrabPositionValueInETH.isGreaterThan(0) && (
-
- )}
-
- {!!address && currentCrabPositionValueInETHV2.isGreaterThan(0) && (
-
- )}
-
- {!!address ?
: null}
-
- {activePositions?.length > 0 && (
- <>
-
-
- Your LP Positions
-
-
-
-
- )}
-
-
-
- Your Vaults
-
-
-
-
-
-
-
-
- Transaction History
-
-
-
-
-
-
- Short Squeeth
-
- Manage
-
-
-
-
-
-
- oSQTH Amount
-
- {isPositionLoading ? (
- Loading
- ) : (
-
- {squeethAmount.toFixed(8) + ' oSQTH'}
-
- )}
-
-
-
- Position Value
-
- {isPositionLoading ? (
- Loading
- ) : (
-
- {isPnLLoading && shortPositionValue.isEqualTo(0) ? 'Loading' : '$' + shortPositionValue.toFixed(2)}
-
- )}
-
-
-
-
-
- Liquidation Price
-
-
-
-
-
- {isVaultLoading && existingLiqPrice.isEqualTo(0) ? 'Loading' : '$' + existingLiqPrice.toFixed(2)}
-
-
-
-
- Collateral (Amt / Ratio)
-
-
- {isVaultLoading && existingCollat.isEqualTo(0) ? 'Loading' : existingCollat.toFixed(4)} ETH (
- {existingCollatPercent}%)
-
-
-
- {isToHidePnL ? (
-
- ) : (
-
-
-
- {isPositionLoading || shortUnrealizedPNL.loading ? (
-
Loading
- ) : (
- <>
-
- $ {shortUnrealizedPNL.usd.toFixed(2)} ({shortUnrealizedPNL.eth.toFixed(5)} ETH)
-
-
- {(shortGain || 0).toFixed(2)}%
-
-
- )}
-
-
-
-
- $ {swapsLoading ? 'Loading' : shortRealizedPNL.toFixed(2)}
-
-
-
- )}
-
-