From 3f361fcf3dd0a54e4af7ae6b5b9197352feec641 Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 11:20:44 +0530 Subject: [PATCH 01/33] fix: fix seo things related with positions page --- packages/frontend/pages/positions.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/frontend/pages/positions.tsx b/packages/frontend/pages/positions.tsx index e68835541..5aae106d1 100644 --- a/packages/frontend/pages/positions.tsx +++ b/packages/frontend/pages/positions.tsx @@ -1,7 +1,7 @@ import { useAtomValue } from 'jotai' -import ConnectWallet from '@pages/positions/ConnectWallet' -import Positions from '@pages/positions/Positions' +import ConnectWallet from '@components/Positions/ConnectWallet' +import Positions from '@components/Positions/Positions' import { useInitCrabMigration } from 'src/state/crabMigration/hooks' import { addressAtom, supportedNetworkAtom } from 'src/state/wallet/atoms' import DefaultSiteSeo from '@components/DefaultSiteSeo/DefaultSiteSeo' @@ -11,14 +11,19 @@ const PositionsPage = () => { const supportedNetwork = useAtomValue(supportedNetworkAtom) useInitCrabMigration() - if (address && supportedNetwork) return + if (address && supportedNetwork) { + return + } + return +} +const Wrapper = () => { return ( <> - + ) } -export default PositionsPage +export default Wrapper From 36cc1d405d81612a1819ce5bb716a29f04e80135 Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 11:26:30 +0530 Subject: [PATCH 02/33] refactor: move positions page components to components/ --- .../Positions}/BullPosition.tsx | 0 .../Positions}/ConnectWallet.tsx | 0 .../Positions}/CrabPosition.tsx | 0 .../Positions}/CrabPositionV2.tsx | 0 .../Positions}/History.tsx | 0 .../Positions}/LPedSqueeth.tsx | 0 .../Positions}/LongSqueeth.tsx | 0 .../Positions}/MintedSqueeth.tsx | 0 .../Positions}/Positions.tsx | 49 +++++++++---------- .../Positions}/ShortSqueeth.tsx | 0 .../Positions}/ShortSqueethLiquidated.tsx | 0 .../Positions}/YourVaults.test.tsx | 0 .../Positions}/YourVaults.tsx | 0 .../Positions}/useStyles.ts | 0 14 files changed, 24 insertions(+), 25 deletions(-) rename packages/frontend/src/{pages/positions => components/Positions}/BullPosition.tsx (100%) rename packages/frontend/src/{pages/positions => components/Positions}/ConnectWallet.tsx (100%) rename packages/frontend/src/{pages/positions => components/Positions}/CrabPosition.tsx (100%) rename packages/frontend/src/{pages/positions => components/Positions}/CrabPositionV2.tsx (100%) rename packages/frontend/src/{pages/positions => components/Positions}/History.tsx (100%) rename packages/frontend/src/{pages/positions => components/Positions}/LPedSqueeth.tsx (100%) rename packages/frontend/src/{pages/positions => components/Positions}/LongSqueeth.tsx (100%) rename packages/frontend/src/{pages/positions => components/Positions}/MintedSqueeth.tsx (100%) rename packages/frontend/src/{pages/positions => components/Positions}/Positions.tsx (91%) rename packages/frontend/src/{pages/positions => components/Positions}/ShortSqueeth.tsx (100%) rename packages/frontend/src/{pages/positions => components/Positions}/ShortSqueethLiquidated.tsx (100%) rename packages/frontend/src/{pages/positions => components/Positions}/YourVaults.test.tsx (100%) rename packages/frontend/src/{pages/positions => components/Positions}/YourVaults.tsx (100%) rename packages/frontend/src/{pages/positions => components/Positions}/useStyles.ts (100%) diff --git a/packages/frontend/src/pages/positions/BullPosition.tsx b/packages/frontend/src/components/Positions/BullPosition.tsx similarity index 100% rename from packages/frontend/src/pages/positions/BullPosition.tsx rename to packages/frontend/src/components/Positions/BullPosition.tsx diff --git a/packages/frontend/src/pages/positions/ConnectWallet.tsx b/packages/frontend/src/components/Positions/ConnectWallet.tsx similarity index 100% rename from packages/frontend/src/pages/positions/ConnectWallet.tsx rename to packages/frontend/src/components/Positions/ConnectWallet.tsx diff --git a/packages/frontend/src/pages/positions/CrabPosition.tsx b/packages/frontend/src/components/Positions/CrabPosition.tsx similarity index 100% rename from packages/frontend/src/pages/positions/CrabPosition.tsx rename to packages/frontend/src/components/Positions/CrabPosition.tsx diff --git a/packages/frontend/src/pages/positions/CrabPositionV2.tsx b/packages/frontend/src/components/Positions/CrabPositionV2.tsx similarity index 100% rename from packages/frontend/src/pages/positions/CrabPositionV2.tsx rename to packages/frontend/src/components/Positions/CrabPositionV2.tsx diff --git a/packages/frontend/src/pages/positions/History.tsx b/packages/frontend/src/components/Positions/History.tsx similarity index 100% rename from packages/frontend/src/pages/positions/History.tsx rename to packages/frontend/src/components/Positions/History.tsx diff --git a/packages/frontend/src/pages/positions/LPedSqueeth.tsx b/packages/frontend/src/components/Positions/LPedSqueeth.tsx similarity index 100% rename from packages/frontend/src/pages/positions/LPedSqueeth.tsx rename to packages/frontend/src/components/Positions/LPedSqueeth.tsx diff --git a/packages/frontend/src/pages/positions/LongSqueeth.tsx b/packages/frontend/src/components/Positions/LongSqueeth.tsx similarity index 100% rename from packages/frontend/src/pages/positions/LongSqueeth.tsx rename to packages/frontend/src/components/Positions/LongSqueeth.tsx diff --git a/packages/frontend/src/pages/positions/MintedSqueeth.tsx b/packages/frontend/src/components/Positions/MintedSqueeth.tsx similarity index 100% rename from packages/frontend/src/pages/positions/MintedSqueeth.tsx rename to packages/frontend/src/components/Positions/MintedSqueeth.tsx diff --git a/packages/frontend/src/pages/positions/Positions.tsx b/packages/frontend/src/components/Positions/Positions.tsx similarity index 91% rename from packages/frontend/src/pages/positions/Positions.tsx rename to packages/frontend/src/components/Positions/Positions.tsx index 9576585d3..79cc9963e 100644 --- a/packages/frontend/src/pages/positions/Positions.tsx +++ b/packages/frontend/src/components/Positions/Positions.tsx @@ -1,18 +1,17 @@ import { Box, Tooltip, Typography } from '@material-ui/core' import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord' - import clsx from 'clsx' import { useAtomValue } from 'jotai' import { LPTable } from '@components/Lp/LPTable' import Nav from '@components/Nav' -import History from '@pages/positions/History' -import { PositionType } from '../../types' -import { BIG_ZERO, Tooltips } from '../../constants' +import History from '@components/Positions/History' +import { PositionType } from 'src/types' +import { Tooltips } from '@constants/index' import { useVaultLiquidations } from '@hooks/contracts/useLiquidations' import { toTokenAmount } from '@utils/calculations' import { useCrabPosition } from '@hooks/useCrabPosition' -import { addressAtom } from 'src/state/wallet/atoms' +import { addressAtom } from '@state/wallet/atoms' import { useComputeSwaps, useFirstValidVault, @@ -20,33 +19,33 @@ import { useMintedDebt, useShortDebt, usePositionsAndFeesComputation, -} from 'src/state/positions/hooks' -import { activePositionsAtom, positionTypeAtom } from 'src/state/positions/atoms' -import { poolAtom } from 'src/state/squeethPool/atoms' -import { indexAtom } from 'src/state/controller/atoms' +} from '@state/positions/hooks' +import { activePositionsAtom, positionTypeAtom } from '@state/positions/atoms' +import { poolAtom } from '@state/squeethPool/atoms' +import { indexAtom } from '@state/controller/atoms' import useAppMemo from '@hooks/useAppMemo' -import useStyles from './useStyles' -import CrabPosition from './CrabPosition' -import CrabPositionV2 from './CrabPositionV2' -import YourVaults from './YourVaults' -import LongSqueeth from './LongSqueeth' -import ShortSqueeth from './ShortSqueeth' -import LPedSqueeth from './LPedSqueeth' -import MintedSqueeth from './MintedSqueeth' import ShortSqueethLiquidated from './ShortSqueethLiquidated' import { useCurrentCrabPositionValue, useCurrentCrabPositionValueV2, useSetStrategyData, useSetStrategyDataV2, -} from 'src/state/crab/hooks' +} from '@state/crab/hooks' import { pnl, pnlInPerct, pnlv2, pnlInPerctv2 } from 'src/lib/pnl' import { useCrabPositionV2 } from '@hooks/useCrabPosition/useCrabPosition' import useAppEffect from '@hooks/useAppEffect' -import { crabQueuedInEthAtom, crabQueuedInUsdAtom } from '@state/crab/atoms' +import { crabQueuedInUsdAtom } from '@state/crab/atoms' import { useBullPosition } from '@hooks/useBullPosition' -import BullPosition from './BullPosition' import { useInitBullStrategy } from '@state/bull/hooks' +import useStyles from './useStyles' +import CrabPosition from './CrabPosition' +import CrabPositionV2 from './CrabPositionV2' +import YourVaults from './YourVaults' +import LongSqueeth from './LongSqueeth' +import ShortSqueeth from './ShortSqueeth' +import LPedSqueeth from './LPedSqueeth' +import MintedSqueeth from './MintedSqueeth' +import BullPosition from './BullPosition' export default function Positions() { const classes = useStyles() @@ -142,11 +141,11 @@ export default function Positions() { {shortDebt.isZero() && - depositedEth.isZero() && - depositedEthV2.isZero() && - squeethAmount.isZero() && - mintedDebt.isZero() && - lpedSqueeth.isZero() ? ( + depositedEth.isZero() && + depositedEthV2.isZero() && + squeethAmount.isZero() && + mintedDebt.isZero() && + lpedSqueeth.isZero() ? (
No active positions
diff --git a/packages/frontend/src/pages/positions/ShortSqueeth.tsx b/packages/frontend/src/components/Positions/ShortSqueeth.tsx similarity index 100% rename from packages/frontend/src/pages/positions/ShortSqueeth.tsx rename to packages/frontend/src/components/Positions/ShortSqueeth.tsx diff --git a/packages/frontend/src/pages/positions/ShortSqueethLiquidated.tsx b/packages/frontend/src/components/Positions/ShortSqueethLiquidated.tsx similarity index 100% rename from packages/frontend/src/pages/positions/ShortSqueethLiquidated.tsx rename to packages/frontend/src/components/Positions/ShortSqueethLiquidated.tsx 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/pages/positions/YourVaults.tsx b/packages/frontend/src/components/Positions/YourVaults.tsx similarity index 100% rename from packages/frontend/src/pages/positions/YourVaults.tsx rename to packages/frontend/src/components/Positions/YourVaults.tsx diff --git a/packages/frontend/src/pages/positions/useStyles.ts b/packages/frontend/src/components/Positions/useStyles.ts similarity index 100% rename from packages/frontend/src/pages/positions/useStyles.ts rename to packages/frontend/src/components/Positions/useStyles.ts From 4f3d0a26c5aaacce86ed07f52e81806f73ca0a97 Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 12:59:16 +0530 Subject: [PATCH 03/33] style: long squeeth section ready --- .../frontend/src/components/PnLTooltip.tsx | 2 +- .../src/components/Positions/LongSqueeth.tsx | 144 +++++++++++------- .../src/components/Positions/useStyles.ts | 26 +++- 3 files changed, 112 insertions(+), 60 deletions(-) diff --git a/packages/frontend/src/components/PnLTooltip.tsx b/packages/frontend/src/components/PnLTooltip.tsx index 6017ec6fb..81eecf25f 100644 --- a/packages/frontend/src/components/PnLTooltip.tsx +++ b/packages/frontend/src/components/PnLTooltip.tsx @@ -8,7 +8,7 @@ import { LinkWrapper } from './LinkWrapper' const useStyles = makeStyles((theme) => createStyles({ infoIcon: { - fontSize: '16px', + fontSize: '12px', marginLeft: theme.spacing(0.5), }, }), diff --git a/packages/frontend/src/components/Positions/LongSqueeth.tsx b/packages/frontend/src/components/Positions/LongSqueeth.tsx index b15a70a96..023f7bd19 100644 --- a/packages/frontend/src/components/Positions/LongSqueeth.tsx +++ b/packages/frontend/src/components/Positions/LongSqueeth.tsx @@ -1,15 +1,20 @@ import Typography from '@material-ui/core/Typography' import { useAtomValue } from 'jotai' -import { useComputeSwaps, useLongRealizedPnl, useLPPositionsQuery } from 'src/state/positions/hooks' -import { loadingAtom } from 'src/state/pnl/atoms' -import useStyles from './useStyles' -import { useLongGain, useCurrentLongPositionValue, useLongUnrealizedPNL } from 'src/state/pnl/hooks' -import { toTokenAmount } from '@utils/calculations' -import { indexAtom } from 'src/state/controller/atoms' -import { isToHidePnLAtom } from 'src/state/positions/atoms' +import clsx from 'clsx' + +import { useComputeSwaps, useLongRealizedPnl, useLPPositionsQuery } from '@state/positions/hooks' +import { loadingAtom } from '@state/pnl/atoms' +import { useLongGain, useCurrentLongPositionValue, useLongUnrealizedPNL } from '@state/pnl/hooks' +import { isToHidePnLAtom } from '@state/positions/atoms' import { HidePnLText } from '@components/HidePnLText' -import { PnLType } from '../../types' import { PnLTooltip } from '@components/PnLTooltip' +import { formatNumber, formatCurrency } from '@utils/formatter' +import { PnLType } from 'src/types' +import useStyles from './useStyles' + +const Loading = () => { + return loading... +} export default function LongSqueeth() { const classes = useStyles() @@ -29,67 +34,96 @@ export default function LongSqueeth() {
-
+
oSQTH Amount - - {isPositionLoading && squeethAmount.isEqualTo(0) ? ( - 'Loading' - ) : ( - {squeethAmount.toFixed(8)} - )}{' '} -   oSQTH - + + {isPositionLoading && squeethAmount.isEqualTo(0) ? ( + + ) : ( + + + {formatNumber(squeethAmount.toNumber(), 6)} + +   oSQTH + + )}
-
+ +
Position Value - - ${isPnLLoading && longPositionValue.isEqualTo(0) ? 'Loading' : longPositionValue.toFixed(2)} - + + {isPnLLoading && longPositionValue.isEqualTo(0) ? ( + + ) : ( + + + {formatCurrency(longPositionValue.toNumber())} + + + )}
- {isToHidePnL ? ( - - ) : ( -
-
-
- - Unrealized P&L - - + +
+ {isToHidePnL ? ( + + ) : ( +
+
+
+ + Unrealized P&L + + +
+ + {isPnLLoading || longUnrealizedPNL.loading ? ( + + ) : ( + <> + + {formatCurrency(longUnrealizedPNL.usd.toNumber())} ( + {formatNumber(longUnrealizedPNL.eth.toNumber(), 4)} ETH) + + + {longGain.isPositive() && '+'} + {(longGain || 0).toFixed(2)}% + + + )}
- {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) */} +
+
+ + Realized P&L - - {(longGain || 0).toFixed(2)}% + +
+ + {swapsLoading ? ( + + ) : ( + + {formatCurrency(longRealizedPNL.toNumber())} - - )} -
-
-
- - Realized P&L - - + )}
- - $ {swapsLoading ? 'Loading' : longRealizedPNL.toFixed(2)} -
-
- )} + )} +
) diff --git a/packages/frontend/src/components/Positions/useStyles.ts b/packages/frontend/src/components/Positions/useStyles.ts index 1bdd280d9..20f14db80 100644 --- a/packages/frontend/src/components/Positions/useStyles.ts +++ b/packages/frontend/src/components/Positions/useStyles.ts @@ -18,6 +18,19 @@ const useStyles = makeStyles((theme) => display: 'flex', justifyContent: 'space-between', }, + ethPriceContainer: { + display: 'flex', + alignItems: 'center', + }, + 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`, @@ -50,6 +63,12 @@ const useStyles = makeStyles((theme) => width: '100%', justifyContent: 'space-between', }, + positionColumn: { + flex: 1, + }, + rowMarginTop: { + marginTop: '16px', + }, positionTitle: { width: '30%', [theme.breakpoints.down('sm')]: { @@ -77,14 +96,13 @@ const useStyles = makeStyles((theme) => marginTop: theme.spacing(1), }, infoIcon: { - fontSize: '10px', + fontSize: '12px', marginLeft: theme.spacing(0.5), }, tooltipContainer: { marginLeft: '.5em', - }, - dotIcon: { - marginRight: '1em', + display: 'flex', + alignItems: 'center', }, pnlTitle: { display: 'flex', From 6d8b8fedcb58be2bbb7cc5dba5b1785c5c65c5bb Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 16:34:12 +0530 Subject: [PATCH 04/33] style: short squeeth ui ready --- .../src/components/Positions/ShortSqueeth.tsx | 179 +++++++++++------- 1 file changed, 109 insertions(+), 70 deletions(-) diff --git a/packages/frontend/src/components/Positions/ShortSqueeth.tsx b/packages/frontend/src/components/Positions/ShortSqueeth.tsx index d60ad4cf8..b64ea365f 100644 --- a/packages/frontend/src/components/Positions/ShortSqueeth.tsx +++ b/packages/frontend/src/components/Positions/ShortSqueeth.tsx @@ -1,22 +1,25 @@ import { Tooltip, Typography } from '@material-ui/core' -import { - useComputeSwaps, - useFirstValidVault, - useLPPositionsQuery, - useShortRealizedPnl, -} from 'src/state/positions/hooks' -import useStyles from './useStyles' -import Link from 'next/link' import { useAtomValue } from 'jotai' -import { loadingAtom } from 'src/state/crab/atoms' -import { useCurrentShortPositionValue, useShortGain, useShortUnrealizedPNL } from 'src/state/pnl/hooks' +import Link from 'next/link' import InfoIcon from '@material-ui/icons/InfoOutlined' -import { Tooltips } from '../../constants' +import BigNumber from 'bignumber.js' +import clsx from 'clsx' + +import { useComputeSwaps, useFirstValidVault, useLPPositionsQuery, useShortRealizedPnl } from '@state/positions/hooks' +import { loadingAtom } from '@state/crab/atoms' +import { useCurrentShortPositionValue, useShortGain, useShortUnrealizedPNL } from '@state/pnl/hooks' +import { Tooltips } from '@constants/index' import { useVaultData } from '@hooks/useVaultData' import { HidePnLText } from '@components/HidePnLText' -import { isToHidePnLAtom } from 'src/state/positions/atoms' -import { PnLType } from '../../types' +import { isToHidePnLAtom } from '@state/positions/atoms' +import { PnLType } from 'src/types' import { PnLTooltip } from '@components/PnLTooltip' +import { formatCurrency, formatNumber } from '@utils/formatter' +import useStyles from './useStyles' + +const Loading = () => { + return loading... +} export default function ShortSqueeth() { const classes = useStyles() @@ -41,90 +44,126 @@ export default function ShortSqueeth() {
-
+
oSQTH Amount - {isPositionLoading ? ( - Loading + + {isPositionLoading && squeethAmount.isEqualTo(0) ? ( + ) : ( - - {squeethAmount.toFixed(8) + ' oSQTH'} + + + {formatNumber(squeethAmount.toNumber(), 6)} + +   oSQTH )}
-
+
Position Value - {isPositionLoading ? ( - Loading + + {isPnLLoading && shortPositionValue.isEqualTo(0) ? ( + ) : ( - - {isPnLLoading && shortPositionValue.isEqualTo(0) ? 'Loading' : '$' + shortPositionValue.toFixed(2)} + + {formatCurrency(shortPositionValue.toNumber())} )}
-
- - Liquidation Price - - - - - - {isVaultLoading && existingLiqPrice.isEqualTo(0) ? 'Loading' : '$' + existingLiqPrice.toFixed(2)} - +
+
+ + Liquidation Price + + + + +
+ + {isVaultLoading && existingLiqPrice.isEqualTo(0) ? ( + + ) : ( + + {formatCurrency(existingLiqPrice.toNumber())} + + )}
-
+
Collateral (Amt / Ratio) - - {isVaultLoading && existingCollat.isEqualTo(0) ? 'Loading' : existingCollat.toFixed(4)} ETH ( - {existingCollatPercent}%) - + + {isVaultLoading && existingCollat.isEqualTo(0) ? ( + + ) : ( + + {formatNumber(existingCollat.toNumber(), 4)} ETH ({formatNumber(existingCollatPercent)}%) + + )}
- {isToHidePnL ? ( - - ) : ( -
-
-
- - Unrealized P&L - - + +
+ {isToHidePnL ? ( + + ) : ( +
+
+
+ + Unrealized P&L + + +
+ + {isPositionLoading || shortUnrealizedPNL.loading ? ( + + ) : ( + <> + + {formatCurrency(shortUnrealizedPNL.usd.toNumber())} ( + {formatNumber(shortUnrealizedPNL.eth.toNumber(), 4)} ETH) + + + {shortGain.isPositive() && '+'} + {formatNumber(shortGain?.toNumber() ?? 0)}% + + + )}
- {isPositionLoading || shortUnrealizedPNL.loading ? ( - Loading - ) : ( - <> - - $ {shortUnrealizedPNL.usd.toFixed(2)} ({shortUnrealizedPNL.eth.toFixed(5)} ETH) +
+
+ + Realized P&L - - {(shortGain || 0).toFixed(2)}% + +
+ + {swapsLoading ? ( + + ) : ( + + {formatCurrency(shortRealizedPNL.toNumber())} - - )} -
-
-
- - Realized P&L - - + )}
- - $ {swapsLoading ? 'Loading' : shortRealizedPNL.toFixed(2)} -
-
- )} + )} +
) From 3ff601eb73a409f2d4166a992f03ad15c5d03eec Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 16:50:04 +0530 Subject: [PATCH 05/33] style: lped squeeth done --- .../src/components/Positions/LPedSqueeth.tsx | 68 ++++++++++++------- 1 file changed, 44 insertions(+), 24 deletions(-) diff --git a/packages/frontend/src/components/Positions/LPedSqueeth.tsx b/packages/frontend/src/components/Positions/LPedSqueeth.tsx index e8bf4879a..6e3424d67 100644 --- a/packages/frontend/src/components/Positions/LPedSqueeth.tsx +++ b/packages/frontend/src/components/Positions/LPedSqueeth.tsx @@ -1,10 +1,16 @@ -import { useVaultData } from '@hooks/useVaultData' import { Link, Tooltip, Typography } from '@material-ui/core' import BigNumber from 'bignumber.js' -import { useFirstValidVault, useLpDebt } from 'src/state/positions/hooks' -import useStyles from './useStyles' import InfoIcon from '@material-ui/icons/InfoOutlined' -import { Tooltips } from '../../constants' + +import { useVaultData } from '@hooks/useVaultData' +import { useFirstValidVault, useLpDebt } from '@state/positions/hooks' +import { Tooltips } from '@constants/index' +import { formatNumber, formatCurrency } from '@utils/formatter' +import useStyles from './useStyles' + +const Loading = () => { + return loading... +} interface Props { vaultExists: boolean @@ -19,45 +25,59 @@ export default function LPedSqueeth({ vaultExists }: Props) { return (
- LPed Squeeth + LP'ed Squeeth {vaultExists ? Manage : null}
-
+
Amount - - {lpedSqueeth.toFixed(8)} -   oSQTH + + {formatNumber(lpedSqueeth.toNumber(), 6)} oSQTH
{new BigNumber(existingLiqPrice).isFinite() ? ( -
- - Liquidation Price - - - - - - ${isVaultLoading && existingLiqPrice.isEqualTo(0) ? 'Loading' : existingLiqPrice.toFixed(2)} - +
+
+ + Liquidation Price + + + + +
+ + {isVaultLoading && existingLiqPrice.isEqualTo(0) ? ( + + ) : ( + + {formatCurrency(existingLiqPrice.toNumber())} + + )}
) : null} -
+ +
Collateral (Amt / Ratio) - - {isVaultLoading && existingCollat.isEqualTo(0) ? 'Loading' : existingCollat.toFixed(4)} ETH - {new BigNumber(existingCollatPercent).isFinite() ? ' (' + existingCollatPercent + ' %)' : null} - + + {isVaultLoading && existingCollat.isEqualTo(0) ? ( + + ) : ( + + {formatNumber(existingCollat.toNumber(), 4)} ETH + {new BigNumber(existingCollatPercent).isFinite() + ? ' (' + formatNumber(existingCollatPercent) + '%)' + : null} + + )}
From 1d990cae981f2607ef6afb5112e913e5f5dcb5be Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 17:03:47 +0530 Subject: [PATCH 06/33] style: minted squeeth ui done --- .../components/Positions/MintedSqueeth.tsx | 80 +++++++++++++------ 1 file changed, 55 insertions(+), 25 deletions(-) diff --git a/packages/frontend/src/components/Positions/MintedSqueeth.tsx b/packages/frontend/src/components/Positions/MintedSqueeth.tsx index 546901cdf..ac53d353f 100644 --- a/packages/frontend/src/components/Positions/MintedSqueeth.tsx +++ b/packages/frontend/src/components/Positions/MintedSqueeth.tsx @@ -1,11 +1,18 @@ -import { useVaultData } from '@hooks/useVaultData' +import InfoIcon from '@material-ui/icons/InfoOutlined' import { Tooltip, Typography } from '@material-ui/core' import BigNumber from 'bignumber.js' import Link from 'next/link' -import { useFirstValidVault, useLPPositionsQuery, useMintedDebt } from 'src/state/positions/hooks' +import clsx from 'clsx' + +import { useVaultData } from '@hooks/useVaultData' +import { useFirstValidVault, useLPPositionsQuery, useMintedDebt } from '@state/positions/hooks' +import { Tooltips } from '@constants/index' +import { formatCurrency, formatNumber } from '@utils/formatter' import useStyles from './useStyles' -import InfoIcon from '@material-ui/icons/InfoOutlined' -import { Tooltips } from '../../constants' + +const Loading = () => { + return loading... +} interface Props { vaultExists: boolean @@ -28,38 +35,61 @@ export default function MintedSqueeth({ vaultExists }: Props) {
-
+
Amount - - {isPositionLoading ? 'Loading' : {mintedDebt.toFixed(8)}}{' '} -   oSQTH - + + {isPositionLoading ? ( + + ) : ( + + + {formatNumber(mintedDebt.toNumber(), 6)} + {' '} + oSQTH + + )}
-
+ +
{new BigNumber(existingLiqPrice).isFinite() ? ( -
- - Liquidation Price - - - - - - $ {isVaultLoading && existingLiqPrice.isEqualTo(0) ? 'Loading' : existingLiqPrice.toFixed(2)} - +
+
+ + Liquidation Price + + + + +
+ + {isVaultLoading && existingLiqPrice.isEqualTo(0) ? ( + + ) : ( + + {formatCurrency(existingLiqPrice.toNumber())} + + )}
) : null} -
+ +
Collateral (Amt / Ratio) - - {isVaultLoading && existingCollat.isEqualTo(0) ? 'Loading' : existingCollat.toFixed(4)} ETH - {new BigNumber(existingCollatPercent).isFinite() ? ' (' + existingCollatPercent + ' %)' : null} - + + {isVaultLoading && existingCollat.isEqualTo(0) ? ( + + ) : ( + + {formatNumber(existingCollat.toNumber(), 4)} ETH + {new BigNumber(existingCollatPercent).isFinite() + ? ' (' + formatNumber(existingCollatPercent) + '%)' + : null} + + )}
From 9bc8bccd5b9c7908662129cf8019a38e2333e49e Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 17:05:53 +0530 Subject: [PATCH 07/33] style: minor adjustments in others --- .../src/components/Positions/LPedSqueeth.tsx | 3 ++- .../src/components/Positions/LongSqueeth.tsx | 17 ++++++----------- .../src/components/Positions/ShortSqueeth.tsx | 10 +++------- 3 files changed, 11 insertions(+), 19 deletions(-) diff --git a/packages/frontend/src/components/Positions/LPedSqueeth.tsx b/packages/frontend/src/components/Positions/LPedSqueeth.tsx index 6e3424d67..e24de2a61 100644 --- a/packages/frontend/src/components/Positions/LPedSqueeth.tsx +++ b/packages/frontend/src/components/Positions/LPedSqueeth.tsx @@ -1,6 +1,7 @@ import { Link, Tooltip, Typography } from '@material-ui/core' import BigNumber from 'bignumber.js' import InfoIcon from '@material-ui/icons/InfoOutlined' +import clsx from 'clsx' import { useVaultData } from '@hooks/useVaultData' import { useFirstValidVault, useLpDebt } from '@state/positions/hooks' @@ -41,7 +42,7 @@ export default function LPedSqueeth({ vaultExists }: Props) {
-
+
{new BigNumber(existingLiqPrice).isFinite() ? (
diff --git a/packages/frontend/src/components/Positions/LongSqueeth.tsx b/packages/frontend/src/components/Positions/LongSqueeth.tsx index 023f7bd19..2828fa3c9 100644 --- a/packages/frontend/src/components/Positions/LongSqueeth.tsx +++ b/packages/frontend/src/components/Positions/LongSqueeth.tsx @@ -42,11 +42,8 @@ export default function LongSqueeth() { {isPositionLoading && squeethAmount.isEqualTo(0) ? ( ) : ( - - - {formatNumber(squeethAmount.toNumber(), 6)} - -   oSQTH + + {formatNumber(squeethAmount.toNumber(), 6)} oSQTH )}
@@ -59,10 +56,8 @@ export default function LongSqueeth() { {isPnLLoading && longPositionValue.isEqualTo(0) ? ( ) : ( - - - {formatCurrency(longPositionValue.toNumber())} - + + {formatCurrency(longPositionValue.toNumber())} )}
@@ -70,7 +65,7 @@ export default function LongSqueeth() {
{isToHidePnL ? ( - + ) : (
@@ -97,7 +92,7 @@ export default function LongSqueeth() { className={clsx(classes.textMonospace, longGain.isLessThan(0) ? classes.red : classes.green)} > {longGain.isPositive() && '+'} - {(longGain || 0).toFixed(2)}% + {formatNumber(longGain.toNumber() || 0)}% )} diff --git a/packages/frontend/src/components/Positions/ShortSqueeth.tsx b/packages/frontend/src/components/Positions/ShortSqueeth.tsx index b64ea365f..34d657e72 100644 --- a/packages/frontend/src/components/Positions/ShortSqueeth.tsx +++ b/packages/frontend/src/components/Positions/ShortSqueeth.tsx @@ -2,7 +2,6 @@ import { Tooltip, Typography } from '@material-ui/core' import { useAtomValue } from 'jotai' import Link from 'next/link' import InfoIcon from '@material-ui/icons/InfoOutlined' -import BigNumber from 'bignumber.js' import clsx from 'clsx' import { useComputeSwaps, useFirstValidVault, useLPPositionsQuery, useShortRealizedPnl } from '@state/positions/hooks' @@ -52,11 +51,8 @@ export default function ShortSqueeth() { {isPositionLoading && squeethAmount.isEqualTo(0) ? ( ) : ( - - - {formatNumber(squeethAmount.toNumber(), 6)} - -   oSQTH + + {formatNumber(squeethAmount.toNumber(), 6)} oSQTH )}
@@ -137,7 +133,7 @@ export default function ShortSqueeth() { className={clsx(classes.textMonospace, shortGain.isLessThan(0) ? classes.red : classes.green)} > {shortGain.isPositive() && '+'} - {formatNumber(shortGain?.toNumber() ?? 0)}% + {formatNumber(shortGain.toNumber() || 0)}% )} From 5d750796b7d7b33657909183922d859f406748e5 Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 17:30:51 +0530 Subject: [PATCH 08/33] style: crab v1 position done --- .../src/components/Positions/CrabPosition.tsx | 105 +++++++++++------- 1 file changed, 65 insertions(+), 40 deletions(-) diff --git a/packages/frontend/src/components/Positions/CrabPosition.tsx b/packages/frontend/src/components/Positions/CrabPosition.tsx index 90696648e..a0a1bfc86 100644 --- a/packages/frontend/src/components/Positions/CrabPosition.tsx +++ b/packages/frontend/src/components/Positions/CrabPosition.tsx @@ -1,12 +1,19 @@ +import React, { useEffect } from 'react' import { Tooltip, Typography } from '@material-ui/core' import BigNumber from 'bignumber.js' import { useAtomValue } from 'jotai' -import { useEffect } from 'react' -import { useCurrentCrabPositionValue, useCurrentCrabPositionValueV2, useSetStrategyData } from 'src/state/crab/hooks' import InfoIcon from '@material-ui/icons/InfoOutlined' -import { crabStrategyCollatRatioAtom } from 'src/state/crab/atoms' +import clsx from 'clsx' + +import { useCurrentCrabPositionValue, useCurrentCrabPositionValueV2, useSetStrategyData } from '@state/crab/hooks' +import { crabStrategyCollatRatioAtom } from '@state/crab/atoms' +import { Tooltips } from '@constants/index' +import { formatCurrency, formatNumber } from '@utils/formatter' import useStyles from './useStyles' -import { Tooltips } from '../../constants' + +const Loading: React.FC<{ isSmall?: boolean }> = ({ isSmall = false }) => { + return loading... +} type CrabPositionType = { depositedEth: BigNumber @@ -20,13 +27,11 @@ type CrabPositionType = { } const CrabPosition: React.FC = ({ - depositedEth, depositedUsd, loading, pnlWMidPriceInPerct, pnlWMidPriceInUSD, currentCrabPositionValue, - currentCrabPositionValueInETH, version, }) => { const classes = useStyles() @@ -49,47 +54,67 @@ const CrabPosition: React.FC = ({
-
- - Deposited Amount - - - - - $ {depositedUsd.toFixed(2)} - - {depositedEth.toFixed(6)} -   ETH +
+
+ + Deposited Amount + + + + +
+ + {formatCurrency(depositedUsd.toNumber())}
-
- + +
+ Current Position - {!loading ? `$ ${currentCrabPositionValue.toFixed(2)}` : 'Loading'} - - {!loading ? `${currentCrabPositionValueInETH.toFixed(6)} ETH` : 'Loading'} - + {loading ? ( + + ) : ( + + {formatCurrency(currentCrabPositionValue.toNumber())} + + )}
-
- - Unrealized P&L - - - - - - {!loading ? '$' + `${pnlWMidPriceInUSD.toFixed(2)}` : 'Loading'} - - - {!loading ? `${pnlWMidPriceInPerct.toFixed(2)}` + '%' : 'Loading'} - +
+
+ + Unrealized P&L + + + + +
+ + {loading ? ( + + ) : ( + + {formatCurrency(pnlWMidPriceInUSD.toNumber())} + + )} + + {loading ? ( + + ) : ( + + {pnlWMidPriceInPerct.isPositive() && '+'} + {formatNumber(pnlWMidPriceInPerct.toNumber(), 2) + '%'} + + )}
From 8f3448bbab4f394b3b72454aee513800bbf06bc0 Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 17:50:18 +0530 Subject: [PATCH 09/33] style: short squeeth liquidate ui ready --- .../Positions/ShortSqueethLiquidated.tsx | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/frontend/src/components/Positions/ShortSqueethLiquidated.tsx b/packages/frontend/src/components/Positions/ShortSqueethLiquidated.tsx index 302c2c484..37724d2b9 100644 --- a/packages/frontend/src/components/Positions/ShortSqueethLiquidated.tsx +++ b/packages/frontend/src/components/Positions/ShortSqueethLiquidated.tsx @@ -1,8 +1,14 @@ -import { useVaultData } from '@hooks/useVaultData' import { Link, Typography } from '@material-ui/core' import BigNumber from 'bignumber.js' -import { useFirstValidVault, useLPPositionsQuery } from 'src/state/positions/hooks' + +import { useVaultData } from '@hooks/useVaultData' +import { useFirstValidVault, useLPPositionsQuery } from '@state/positions/hooks' import useStyles from './useStyles' +import { formatNumber } from '@utils/formatter' + +const Loading = () => { + return loading... +} export default function ShortSqueethLiquidated() { const classes = useStyles() @@ -20,14 +26,21 @@ export default function ShortSqueethLiquidated() {
-
+
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} + + )}
From 2e699b59e17de280033268126c6a460287b1aa05 Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 17:50:44 +0530 Subject: [PATCH 10/33] style: crab v2 ui ready --- .../components/Positions/CrabPositionV2.tsx | 167 +++++++++++------- 1 file changed, 107 insertions(+), 60 deletions(-) diff --git a/packages/frontend/src/components/Positions/CrabPositionV2.tsx b/packages/frontend/src/components/Positions/CrabPositionV2.tsx index aa425e1f1..d63d3576e 100644 --- a/packages/frontend/src/components/Positions/CrabPositionV2.tsx +++ b/packages/frontend/src/components/Positions/CrabPositionV2.tsx @@ -1,16 +1,21 @@ import { Tooltip, Typography } from '@material-ui/core' import BigNumber from 'bignumber.js' import { useAtomValue } from 'jotai' -import { useEffect } from 'react' +import React, { useEffect } from 'react' import InfoIcon from '@material-ui/icons/InfoOutlined' +import clsx from 'clsx' import { useCurrentCrabPositionValue, useCurrentCrabPositionValueV2, useSetStrategyData } from '@state/crab/hooks' import { crabStrategyCollatRatioAtom, usdcQueuedAtom, crabQueuedAtom, crabUSDValueAtom } from '@state/crab/atoms' import { Tooltips, USDC_DECIMALS } from '@constants/index' import { toTokenAmount } from '@utils/calculations' -import { formatCurrency } from '@utils/formatter' +import { formatCurrency, formatNumber } from '@utils/formatter' import useStyles from './useStyles' +const Loading: React.FC<{ isSmall?: boolean }> = ({ isSmall = false }) => { + return loading... +} + type CrabPositionV2Type = { depositedEth: BigNumber depositedUsd: BigNumber @@ -23,13 +28,11 @@ type CrabPositionV2Type = { } const CrabPositionV2: React.FC = ({ - depositedEth, depositedUsd, loading, pnlWMidPriceInPerct, pnlWMidPriceInUSD, currentCrabPositionValue, - currentCrabPositionValueInETH, version, }) => { const classes = useStyles() @@ -49,6 +52,9 @@ const CrabPositionV2: React.FC = ({ const initiatedDepositAmount = toTokenAmount(usdcQueued, USDC_DECIMALS) const initiatedWithdrawalAmount = toTokenAmount(crabQueued, 18).times(toTokenAmount(crabUsdValue, 18)) + const showInitiatedDeposit = usdcQueued.isGreaterThan('100') + const showInitiatedWithdrawal = crabQueued.isGreaterThan('10000000000') + return (
@@ -59,78 +65,119 @@ const CrabPositionV2: React.FC = ({
-
- - Deposited Amount - - - - - $ {depositedUsd.toFixed(2)} - - {depositedEth.toFixed(6)} -   ETH +
+
+ + Deposited Amount + + + + +
+ + {formatCurrency(depositedUsd.toNumber())}
-
- + +
+ 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'} - + + {loading ? ( + + ) : ( + + {formatCurrency(currentCrabPositionValue.toNumber())} + + )}
-
- {/* ignore dust amount */} - {usdcQueued.isGreaterThan('100') && ( -
+
+
+
- Initiated Deposit + Unrealized P&L - + - - {!loading ? formatCurrency(Number(initiatedDepositAmount)) : 'Loading'} +
+ + {loading ? ( + + ) : ( + + {formatCurrency(pnlWMidPriceInUSD.toNumber())} + )} + + {loading ? ( + + ) : ( + + {pnlWMidPriceInPerct.isPositive() && '+'} + {formatNumber(pnlWMidPriceInPerct.toNumber()) + '%'} + + )} +
+
+ +
+ {/* ignore dust amount */} + {showInitiatedDeposit && ( +
+
+ + Initiated Deposit + + + + +
+ + {loading ? ( + + ) : ( + + {formatCurrency(initiatedDepositAmount.toNumber())} + + )}
)} {/* ignore dust amount */} - {crabQueued.isGreaterThan('10000000000') && ( -
- - Initiated Withdrawal - - - - - - {!loading ? formatCurrency(Number(initiatedWithdrawalAmount)) : 'Loading'} - + {showInitiatedWithdrawal && ( +
+
+ + Initiated Withdrawal + + + + +
+ + {loading ? ( + + ) : ( + + {formatCurrency(initiatedWithdrawalAmount.toNumber())} + + )}
)}
From 6ba65431a319717573cb072bdcb575dca382b590 Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 18:46:56 +0530 Subject: [PATCH 11/33] style: lp positions ui done --- .../frontend/src/components/Lp/LPTable.tsx | 55 +++++++++++-------- .../src/components/Positions/useStyles.ts | 4 ++ 2 files changed, 35 insertions(+), 24 deletions(-) diff --git a/packages/frontend/src/components/Lp/LPTable.tsx b/packages/frontend/src/components/Lp/LPTable.tsx index e82fab4e2..f1c4e379c 100644 --- a/packages/frontend/src/components/Lp/LPTable.tsx +++ b/packages/frontend/src/components/Lp/LPTable.tsx @@ -9,15 +9,15 @@ import * as React from 'react' import { useState } from 'react' import { useAtomValue } from 'jotai' -import { SecondaryTab, SecondaryTabs } from '../../components/Tabs' +import { SecondaryTab, SecondaryTabs } from '@components/Tabs' import { Tooltips, UniswapIFrameOpen } from '@constants/enums' import { inRange } from '@utils/calculations' -import { UniswapIframe } from '../Modal/UniswapIframe' -import { networkIdAtom } from 'src/state/wallet/atoms' +import { UniswapIframe } from '@components/Modal/UniswapIframe' +import { networkIdAtom } from '@state/wallet/atoms' import { useETHPrice } from '@hooks/useETHPrice' -import { activePositionsAtom, closedPositionsAtom, isWethToken0Atom } from 'src/state/positions/atoms' -import { useGetWSqueethPositionValue } from 'src/state/squeethPool/hooks' -import { useLPPositionsQuery } from 'src/state/positions/hooks' +import { activePositionsAtom, closedPositionsAtom, isWethToken0Atom } from '@state/positions/atoms' +import { useGetWSqueethPositionValue } from '@state/squeethPool/hooks' +import { useLPPositionsQuery } from '@state/positions/hooks' const useStyles = makeStyles((theme) => createStyles({ @@ -67,7 +67,13 @@ const useStyles = makeStyles((theme) => infoIcon: { fontSize: '.75rem', marginLeft: theme.spacing(0.5), - marginTop: '2px', + }, + textMonospace: { + fontFamily: 'DM Mono, monospace', + }, + titleWithTooltip: { + display: 'flex', + alignItems: 'center', }, }), ) @@ -132,6 +138,7 @@ export const LPTable: React.FC = ({ isLPage, pool }) => { ) : null} + @@ -147,7 +154,7 @@ export const LPTable: React.FC = ({ isLPage, pool }) => { { //only show PnL on active tab for now until closed is implemented activeTab === 0 ? ( - + PnL @@ -164,7 +171,7 @@ export const LPTable: React.FC = ({ isLPage, pool }) => { lpLoading ? ( -

Loading...

+

loading...

 ) : ( @@ -182,7 +189,7 @@ export const LPTable: React.FC = ({ isLPage, pool }) => { closedPositions?.map((p) => { return ( - + = ({ isLPage, pool }) => { - + {((pool ? p.liquidity / Number(pool?.liquidity) : 0) * 100).toFixed(3)} - + {Number(p.amount0).toFixed(4)} {p.token0.symbol} @@ -218,7 +225,7 @@ export const LPTable: React.FC = ({ isLPage, pool }) => { {p.collectedFeesToken1} {p.token1.symbol} */} - + {p.fees0?.toFixed(6)} {p.token0.symbol} @@ -226,8 +233,8 @@ export const LPTable: React.FC = ({ isLPage, pool }) => { {p.fees1?.toFixed(6)} {p.token1.symbol} - - $ {p.dollarValue?.toFixed(2)} + + ${p.dollarValue?.toFixed(2)} ) @@ -250,7 +257,7 @@ export const LPTable: React.FC = ({ isLPage, pool }) => { lpLoading ? ( -

Loading...

+

loading...

 ) : ( @@ -277,7 +284,7 @@ export const LPTable: React.FC = ({ isLPage, pool }) => { activePositions?.slice(0, isLPage ? activePositions.length : 3).map((p) => { return ( - + = ({ isLPage, pool }) => { )} - + {((pool ? p.liquidity / Number(pool?.liquidity) : 0) * 100).toFixed(3)} - + {Number(p.amount0).toFixed(4)} {p.token0.symbol} @@ -309,7 +316,7 @@ export const LPTable: React.FC = ({ isLPage, pool }) => { {Number(p.amount1).toFixed(4)} {p.token1.symbol} - + {p.fees0?.toFixed(6)} {p.token0.symbol} @@ -317,12 +324,12 @@ export const LPTable: React.FC = ({ isLPage, pool }) => { {p.fees1?.toFixed(6)} {p.token1.symbol} - - $ {p.dollarValue?.toFixed(2)} + + ${p.dollarValue?.toFixed(2)} - + - ${' '} + $ {calculatePnL( p.depositedToken0, p.depositedToken1, diff --git a/packages/frontend/src/components/Positions/useStyles.ts b/packages/frontend/src/components/Positions/useStyles.ts index 20f14db80..8719b0782 100644 --- a/packages/frontend/src/components/Positions/useStyles.ts +++ b/packages/frontend/src/components/Positions/useStyles.ts @@ -104,6 +104,10 @@ const useStyles = makeStyles((theme) => display: 'flex', alignItems: 'center', }, + titleWithTooltip: { + display: 'flex', + alignItems: 'center', + }, pnlTitle: { display: 'flex', alignItems: 'center', From 84ad4b24b50e7bc3d08f52a989752dba8fed61e9 Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 18:48:21 +0530 Subject: [PATCH 12/33] style: bull position ui done --- .../src/components/Positions/BullPosition.tsx | 110 ++++++++++++------ 1 file changed, 75 insertions(+), 35 deletions(-) diff --git a/packages/frontend/src/components/Positions/BullPosition.tsx b/packages/frontend/src/components/Positions/BullPosition.tsx index 5af4f4848..89e402d3a 100644 --- a/packages/frontend/src/components/Positions/BullPosition.tsx +++ b/packages/frontend/src/components/Positions/BullPosition.tsx @@ -1,9 +1,11 @@ -import { Tooltip, Typography, makeStyles } from '@material-ui/core' +import { Tooltip, Typography } 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 React from 'react' +import clsx from 'clsx' + +import { Tooltips } from '@constants/index' import { bullCurrentETHPositionAtom, bullCurrentUSDCPositionAtom, @@ -14,6 +16,12 @@ import { bullPositionLoadedAtom, } from '@state/bull/atoms' import bullStrategyImg from 'public/images/bull_strategy.png' +import { formatCurrency, formatNumber } from '@utils/formatter' +import useStyles from './useStyles' + +const Loading: React.FC<{ isSmall?: boolean }> = ({ isSmall = false }) => { + return loading... +} const BullPosition: React.FC = () => { const classes = useStyles() @@ -42,46 +50,78 @@ const BullPosition: React.FC = () => {
-
- - Deposited Amount +
+
+ + Deposited Amount + + + + +
+ + + {formatNumber(bullDepositedETH.toNumber(), 6)} ETH - - - - {bullDepositedETH.toFixed(6)} ETH - - ${bullDepositedUSD.toFixed(2)} + + {formatCurrency(bullDepositedUSD.toNumber())}
-
+ +
Current Position - {!loading ? `${bullCurrentETH.toFixed(6)}` : 'Loading'} ETH - - {!loading ? `$${bullCurrentUSD.toFixed(2)}` : 'Loading'} - + {loading ? ( + + ) : ( + + {formatNumber(bullCurrentETH.toNumber(), 6)} ETH + + )} + {loading ? ( + + ) : ( + + {formatCurrency(bullCurrentUSD.toNumber())} + + )}
-
-
- - Unrealized P&L - - - - - - {!loading ? `${bullEthPnl.toFixed(6)} ETH` : 'Loading'} - - - {!loading ? `${bullEthPnlInPerct.toFixed(2)}` + '%' : 'Loading'} - + +
+
+
+ + Unrealized P&L + + + + +
+ + {loading ? ( + + ) : ( + + {formatNumber(bullEthPnl.toNumber(), 6) + ' ETH'} + + )} + {loading ? ( + + ) : ( + + {bullEthPnlInPerct.isPositive() && '+'} + {formatNumber(bullEthPnlInPerct.toNumber()) + '%'} + + )}
From 499e1e07a986095059cc61417f74bcda978a47e5 Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 19:12:05 +0530 Subject: [PATCH 13/33] style: your vaults ui done --- .../src/components/Positions/YourVaults.tsx | 32 ++++++++++++------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/packages/frontend/src/components/Positions/YourVaults.tsx b/packages/frontend/src/components/Positions/YourVaults.tsx index 97dee3b46..23d493280 100644 --- a/packages/frontend/src/components/Positions/YourVaults.tsx +++ b/packages/frontend/src/components/Positions/YourVaults.tsx @@ -1,13 +1,17 @@ -import LabelWithTooltip from '@components/LabelWithTooltip' -import SqueethCard from '@components/SqueethCard' -import useYourVaults from '../../hooks/useYourVaults' import { Grid, Typography } from '@material-ui/core' -import { toTokenAmount } from '../../utils/calculations' 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' + const YourVaults: FC = () => { + const classes = useStyles() const { data: { vaults } = {}, loading, error } = useYourVaults() if (error) { @@ -15,7 +19,11 @@ const YourVaults: FC = () => { } if (loading) { - return Loading... + return loading... + } + + if (vaults?.length === 0) { + return No vaults found } return ( @@ -26,21 +34,23 @@ const YourVaults: FC = () => { - - {vault.id} + + + {vault.id} + - - {toTokenAmount(new BigNumber(vault.shortAmount), 18).toFixed(4)}  oSQTH + + {formatNumber(toTokenAmount(new BigNumber(vault.shortAmount), 18).toNumber(), 4)} oSQTH - - {toTokenAmount(new BigNumber(vault.collateralAmount), 18).toFixed(4)}  ETH + + {formatNumber(toTokenAmount(new BigNumber(vault.collateralAmount), 18).toNumber(), 4)} ETH From 04323c933abb853603c73b55d58820d21927dfe4 Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 19:29:10 +0530 Subject: [PATCH 14/33] style: tx history section done --- .../src/components/Positions/History.tsx | 98 ++++++++++++------- 1 file changed, 61 insertions(+), 37 deletions(-) diff --git a/packages/frontend/src/components/Positions/History.tsx b/packages/frontend/src/components/Positions/History.tsx index b280485f1..ebfa77d5c 100644 --- a/packages/frontend/src/components/Positions/History.tsx +++ b/packages/frontend/src/components/Positions/History.tsx @@ -1,14 +1,17 @@ import { createStyles, IconButton, makeStyles, Typography } from '@material-ui/core' import OpenInNewIcon from '@material-ui/icons/OpenInNew' +import { useAtomValue } from 'jotai' +import clsx from 'clsx' -import { EtherscanPrefix } from '../../constants' +import { EtherscanPrefix } from '@constants/index' import { TransactionType } from '@constants/enums' import { useTransactionHistory } from '@hooks/useTransactionHistory' import { useUsdAmount } from '@hooks/useUsdAmount' -import { networkIdAtom } from 'src/state/wallet/atoms' -import { useAtomValue } from 'jotai' +import { networkIdAtom } from '@state/wallet/atoms' import { useETHPrice } from '@hooks/useETHPrice' -import { normFactorAtom } from 'src/state/controller/atoms' +import { normFactorAtom } from '@state/controller/atoms' +import useCommonStyles from './useStyles' +import { formatCurrency, formatNumber } from '@utils/formatter' const useStyles = makeStyles((theme) => createStyles({ @@ -47,21 +50,38 @@ const useStyles = makeStyles((theme) => ) const History: React.FC = () => { - const { transactions } = useTransactionHistory() + const { transactions, loading } = useTransactionHistory() const networkId = useAtomValue(networkIdAtom) const ethPrice = useETHPrice() const normalizationFactor = useAtomValue(normFactorAtom) const classes = useStyles() + const commonClasses = useCommonStyles() const { getUsdAmt } = useUsdAmount() + if (loading) { + return ( +
+ loading... +
+ ) + } + + if (transactions.length === 0) { + return ( +
+ No transactions found +
+ ) + } + return (
{transactions.map((tx, index) => (
{tx.transactionType} - + {new Date(Number(tx.timestamp) * 1000).toDateString()}
@@ -73,17 +93,18 @@ const History: React.FC = () => {
- {tx.ethAmount.toFixed(4)}  WETH + {formatNumber(tx.ethAmount.toNumber(), 4)} WETH - - ${getUsdAmt(tx.ethAmount, tx.timestamp).toFixed(2)} + + {formatCurrency(getUsdAmt(tx.ethAmount, tx.timestamp).toNumber())}
@@ -96,24 +117,26 @@ const History: React.FC = () => { <> - {tx.squeethAmount.toFixed(8)}  oSQTH + {formatNumber(tx.squeethAmount.toNumber(), 6)} oSQTH - - $ - {tx.squeethAmount - .times(ethPrice) - .times(ethPrice) - .div(10000) - .times(normalizationFactor) - .toFixed(2)} + + {formatCurrency( + tx.squeethAmount + .times(ethPrice) + .times(ethPrice) + .div(10000) + .times(normalizationFactor) + .toNumber(), + )} ) : null} @@ -121,24 +144,25 @@ const History: React.FC = () => {
{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`} + ? `${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 - ? `${tx.ethAmount.toFixed(4)} WETH` - : `$${tx.usdValue.toFixed(2)}`} + ? `${formatNumber(tx.ethAmount.toNumber(), 4)} WETH` + : `${formatCurrency(tx.usdValue.toNumber())}`}
From 8b6a4cdcca9796a77ef96af8fb88528c45b06e7d Mon Sep 17 00:00:00 2001 From: nikhil arora Date: Mon, 6 Feb 2023 19:30:38 +0530 Subject: [PATCH 15/33] style: positions page ui --- packages/frontend/pages/positions.tsx | 7 +++-- .../frontend/src/components/HidePnLText.tsx | 14 ++------- .../components/Positions/ConnectWallet.tsx | 9 +++--- .../src/components/Positions/Positions.tsx | 30 ++++++++++--------- 4 files changed, 27 insertions(+), 33 deletions(-) diff --git a/packages/frontend/pages/positions.tsx b/packages/frontend/pages/positions.tsx index 5aae106d1..c1494c008 100644 --- a/packages/frontend/pages/positions.tsx +++ b/packages/frontend/pages/positions.tsx @@ -2,9 +2,10 @@ import { useAtomValue } from 'jotai' import ConnectWallet from '@components/Positions/ConnectWallet' import Positions from '@components/Positions/Positions' -import { useInitCrabMigration } from 'src/state/crabMigration/hooks' -import { addressAtom, supportedNetworkAtom } from 'src/state/wallet/atoms' +import { useInitCrabMigration } from '@state/crabMigration/hooks' +import { addressAtom, supportedNetworkAtom } from '@state/wallet/atoms' import DefaultSiteSeo from '@components/DefaultSiteSeo/DefaultSiteSeo' +import Nav from '@components/Nav' const PositionsPage = () => { const address = useAtomValue(addressAtom) @@ -21,6 +22,8 @@ const Wrapper = () => { return ( <> +