refactor: move into separate components for readability

packages/frontend/pages/positions.tsx

@@ -1,32 +1,19 @@
-import { useAtomValue } from 'jotai'
-
-import ConnectWallet from '@components/Positions/ConnectWallet'
-import Positions from '@components/Positions/Positions'
+import Positions from '@components/Positions'
 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)
-  const supportedNetwork = useAtomValue(supportedNetworkAtom)
   useInitCrabMigration()
 
-  if (address && supportedNetwork) {
-    return <Positions />
-  }
-  return <ConnectWallet />
-}
-
-const Wrapper = () => {
   return (
     <>
       <DefaultSiteSeo />
       <Nav />
 
-      <PositionsPage />
+      <Positions />
     </>
   )
 }
 
-export default Wrapper
+export default PositionsPage

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import { useAtomValue } from 'jotai'
+import { Typography } from '@material-ui/core'
+
+import { activePositionsAtom } from '@state/positions/atoms'
+import { poolAtom } from '@state/squeethPool/atoms'
+import { LPTable } from '@components/Lp/LPTable'
+
+const LPPositions: React.FC = () => {
+  const pool = useAtomValue(poolAtom)
+  const activePositions = useAtomValue(activePositionsAtom)
+
+  if (activePositions.length === 0) {
+    return <Typography variant="body1">No active LP position</Typography>
+  }
+
+  return <LPTable isLPage={false} pool={pool!} />
+}
+
+export default LPPositions

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

@@ -1,13 +1,8 @@
-import { Box, Tooltip, Typography } from '@material-ui/core'
-import InfoIcon from '@material-ui/icons/InfoOutlined'
+import { Typography } from '@material-ui/core'
 import { useAtomValue } from 'jotai'
 
-import { LPTable } from '@components/Lp/LPTable'
-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 '@state/wallet/atoms'
 import {
@@ -18,9 +13,7 @@ import {
   useShortDebt,
   usePositionsAndFeesComputation,
 } from '@state/positions/hooks'
-import { activePositionsAtom, positionTypeAtom } from '@state/positions/atoms'
-import { poolAtom } from '@state/squeethPool/atoms'
-import { indexAtom } from '@state/controller/atoms'
+import { positionTypeAtom } from '@state/positions/atoms'
 import useAppMemo from '@hooks/useAppMemo'
 import ShortSqueethLiquidated from './ShortSqueethLiquidated'
 import {
@@ -35,30 +28,25 @@ import useAppEffect from '@hooks/useAppEffect'
 import { crabQueuedInUsdAtom } from '@state/crab/atoms'
 import { useBullPosition } from '@hooks/useBullPosition'
 import { useInitBullStrategy } from '@state/bull/hooks'
-import { formatCurrency } from '@utils/formatter'
 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 Positions: React.FC = () => {
   const classes = useStyles()
-  const pool = useAtomValue(poolAtom)
   const address = useAtomValue(addressAtom)
   const positionType = useAtomValue(positionTypeAtom)
-  const activePositions = useAtomValue(activePositionsAtom)
 
   const { squeethAmount } = useComputeSwaps()
   const { validVault: vault, vaultId } = useFirstValidVault()
   const lpedSqueeth = useLpDebt()
   const mintedDebt = useMintedDebt()
   const shortDebt = useShortDebt()
-  const index = useAtomValue(indexAtom)
   const setStrategyDataV2 = useSetStrategyDataV2()
   const setStrategyData = useSetStrategyData()
   const crabV2QueuedInUsd = useAtomValue(crabQueuedInUsdAtom)
@@ -117,107 +105,60 @@ export default function Positions() {
     return vault && vault.shortAmount?.isZero() && liquidations.length > 0
   }, [vault, liquidations?.length])
 
-  const ethPrice = toTokenAmount(index, 18).sqrt()
+  const isLoadingPositions = isCrabloading || isCrabV2loading
+
+  if (
+    shortDebt.isZero() &&
+    depositedEth.isZero() &&
+    depositedEthV2.isZero() &&
+    squeethAmount.isZero() &&
+    mintedDebt.isZero() &&
+    lpedSqueeth.isZero()
+  ) {
+    return <Typography variant="body1">{isLoadingPositions ? 'loading...' : 'No active position'}</Typography>
+  }
 
   return (
-    <div>
-      <div className={classes.container}>
-        <div className={classes.header}>
-          <Typography variant="h4" className={classes.sectionTitle}>
-            Your Positions
-          </Typography>
-          <div className={classes.ethPriceContainer}>
-            <Typography component="span" color="textSecondary">
-              ETH Price:
-            </Typography>
-
-            <div className={classes.tooltipContainer}>
-              <Typography component="span" className={classes.textMonospace}>
-                {formatCurrency(ethPrice.toNumber())}
-              </Typography>
-              <Tooltip title={Tooltips.SpotPrice}>
-                <InfoIcon className={classes.infoIcon} />
-              </Tooltip>
-            </div>
-          </div>
-        </div>
-
-        {shortDebt.isZero() &&
-        depositedEth.isZero() &&
-        depositedEthV2.isZero() &&
-        squeethAmount.isZero() &&
-        mintedDebt.isZero() &&
-        lpedSqueeth.isZero() ? (
-          <div className={classes.empty}>
-            <Typography>No active positions</Typography>
-          </div>
-        ) : null}
-
-        {positionType === PositionType.LONG && <LongSqueeth />}
-
-        {positionType === PositionType.SHORT && <ShortSqueeth />}
-
-        {lpedSqueeth.isGreaterThan(0) && !fullyLiquidated && <LPedSqueeth vaultExists={vaultExists} />}
-
-        {mintedDebt.isGreaterThan(0) && !fullyLiquidated && <MintedSqueeth vaultExists={vaultExists} />}
-
-        {liquidations.length > 0 && <ShortSqueethLiquidated />}
-
-        {!!address && currentCrabPositionValueInETH.isGreaterThan(0) && (
-          <CrabPosition
-            depositedEth={depositedEth}
-            depositedUsd={depositedUsd}
-            loading={isCrabloading}
-            pnlWMidPriceInUSD={pnlWMidPriceInUSD}
-            pnlWMidPriceInPerct={pnlWMidPriceInPerct}
-            currentCrabPositionValue={currentCrabPositionValue}
-            currentCrabPositionValueInETH={currentCrabPositionValueInETH}
-            version="Crab Strategy v1"
-          />
-        )}
-
-        {!!address && currentCrabPositionValueInETHV2.isGreaterThan(0) && (
-          <CrabPositionV2
-            depositedEth={depositedEthV2}
-            depositedUsd={depositedUsdV2}
-            loading={isCrabV2loading}
-            pnlWMidPriceInUSD={pnlWMidPriceInUSDV2}
-            pnlWMidPriceInPerct={pnlWMidPriceInPerctV2}
-            currentCrabPositionValue={currentCrabPositionValueV2}
-            currentCrabPositionValueInETH={currentCrabPositionValueInETHV2}
-            version="Crab Strategy v2"
-          />
-        )}
-
-        {!!address ? <BullPosition /> : null}
-
-        {activePositions?.length > 0 && (
-          <>
-            <div className={classes.header}>
-              <Typography variant="h4" className={classes.sectionTitle}>
-                Your LP Positions
-              </Typography>
-            </div>
-            <LPTable isLPage={false} pool={pool!} />
-          </>
-        )}
-
-        <Box mt={8} component="section">
-          <Typography variant="h4" className={classes.sectionTitle}>
-            Your Vaults
-          </Typography>
-          <Box mt={2}>
-            <YourVaults />
-          </Box>
-        </Box>
-
-        <div className={classes.history}>
-          <Typography variant="h4" className={classes.sectionTitle}>
-            Transaction History
-          </Typography>
-          <History />
-        </div>
-      </div>
-    </div>
+    <>
+      {positionType === PositionType.LONG && <LongSqueeth />}
+
+      {positionType === PositionType.SHORT && <ShortSqueeth />}
+
+      {lpedSqueeth.isGreaterThan(0) && !fullyLiquidated && <LPedSqueeth vaultExists={vaultExists} />}
+
+      {mintedDebt.isGreaterThan(0) && !fullyLiquidated && <MintedSqueeth vaultExists={vaultExists} />}
+
+      {liquidations.length > 0 && <ShortSqueethLiquidated />}
+
+      {!!address && currentCrabPositionValueInETH.isGreaterThan(0) && (
+        <CrabPosition
+          depositedEth={depositedEth}
+          depositedUsd={depositedUsd}
+          loading={isCrabloading}
+          pnlWMidPriceInUSD={pnlWMidPriceInUSD}
+          pnlWMidPriceInPerct={pnlWMidPriceInPerct}
+          currentCrabPositionValue={currentCrabPositionValue}
+          currentCrabPositionValueInETH={currentCrabPositionValueInETH}
+          version="Crab Strategy v1"
+        />
+      )}
+
+      {!!address && currentCrabPositionValueInETHV2.isGreaterThan(0) && (
+        <CrabPositionV2
+          depositedEth={depositedEthV2}
+          depositedUsd={depositedUsdV2}
+          loading={isCrabV2loading}
+          pnlWMidPriceInUSD={pnlWMidPriceInUSDV2}
+          pnlWMidPriceInPerct={pnlWMidPriceInPerctV2}
+          currentCrabPositionValue={currentCrabPositionValueV2}
+          currentCrabPositionValueInETH={currentCrabPositionValueInETHV2}
+          version="Crab Strategy v2"
+        />
+      )}
+
+      {!!address ? <BullPosition /> : null}
+    </>
   )
 }
+
+export default Positions

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 (
+    <div className={classes.container}>
+      <HeaderBar />
+
+      <div className={classes.sectionHeaderFirst}>
+        <Typography variant="h4" className={classes.sectionTitle}>
+          Your Positions
+        </Typography>
+      </div>
+      <div className={classes.sectionContent}>
+        <Positions />
+      </div>
+
+      <div className={classes.sectionHeader}>
+        <Typography variant="h4" className={classes.sectionTitle}>
+          Your LP Positions
+        </Typography>
+      </div>
+      <div className={classes.sectionContent}>
+        <LPPositions />
+      </div>
+
+      <div className={classes.sectionHeader}>
+        <Typography variant="h4" className={classes.sectionTitle}>
+          Your Vaults
+        </Typography>
+      </div>
+      <div className={classes.sectionContent}>
+        <YourVaults />
+      </div>
+
+      <div className={classes.sectionHeader}>
+        <Typography variant="h4" className={classes.sectionTitle}>
+          Transaction History
+        </Typography>
+      </div>
+      <div className={classes.sectionContent}>
+        <TxHistory />
+      </div>
+    </div>
+  )
+}

packages/frontend/src/components/Positions/useStyles.ts

@@ -13,14 +13,18 @@ const useStyles = makeStyles((theme) =>
         padding: theme.spacing(0, 2),
       },
     },
-    header: {
-      marginTop: theme.spacing(8),
+    sectionHeaderFirst: {
+      marginTop: theme.spacing(5),
       display: 'flex',
       justifyContent: 'space-between',
     },
-    ethPriceContainer: {
+    sectionHeader: {
+      marginTop: theme.spacing(8),
       display: 'flex',
-      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    sectionContent: {
+      marginTop: theme.spacing(1.5),
     },
     sectionTitle: {
       fontSize: '18px',
@@ -75,19 +79,12 @@ const useStyles = makeStyles((theme) =>
         width: '100%',
       },
     },
-    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',