style: positions page redesign

packages/frontend/pages/positions.tsx

@@ -1,22 +1,17 @@
-import { useAtomValue } from 'jotai'
-
-import ConnectWallet from '@pages/positions/ConnectWallet'
-import Positions from '@pages/positions/Positions'
-import { useInitCrabMigration } from 'src/state/crabMigration/hooks'
-import { addressAtom, supportedNetworkAtom } from 'src/state/wallet/atoms'
+import Positions from '@components/Positions'
+import { useInitCrabMigration } from '@state/crabMigration/hooks'
 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 (
     <>
       <DefaultSiteSeo />
-      <ConnectWallet />
+      <Nav />
+
+      <Positions />
     </>
   )
 }

packages/frontend/src/components/HidePnLText.tsx

@@ -1,25 +1,15 @@
 import { Typography } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
 import { useAtomValue } from 'jotai'
 
 import { positionTypeAtom } from '@state/positions/atoms'
 import { PositionType } from 'src/types'
 import { LinkWrapper } from './LinkWrapper'
 
-const useStyles = makeStyles({
-  text: {
-    fontSize: '15px',
-    color: 'rgb(255, 255, 255)',
-  },
-})
-
-export const HidePnLText: React.FC = () => {
-  const classes = useStyles()
-
+export const HidePnLText: React.FC<{ isSmall?: boolean }> = ({ isSmall = false }) => {
   const positionType = useAtomValue(positionTypeAtom)
 
   return (
-    <Typography variant="body2" className={classes.text}>
+    <Typography variant={isSmall ? 'body2' : 'body1'}>
       {positionType !== PositionType.LONG && <span>Coming soon.</span>} Please use{' '}
       <LinkWrapper href="https://docs.google.com/spreadsheets/d/1iy5N3qy6g2xd2_BcsY_Hv0pKdyceC1h7y269KssOG8s/edit#gid=1267496112">
         SqueethLab

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<LPTableProps> = ({ isLPage, pool }) => {
           <SecondaryTab label="Closed" />
         </SecondaryTabs>
       ) : null}
+
       <Table aria-label="simple table" className={classes.table}>
         <TableHead>
           <TableRow style={{ fontSize: '0.8rem' }}>
@@ -147,7 +154,7 @@ export const LPTable: React.FC<LPTableProps> = ({ isLPage, pool }) => {
             {
               //only show PnL on active tab for now until closed is implemented
               activeTab === 0 ? (
-                <TableCell align="left">
+                <TableCell align="left" className={classes.titleWithTooltip}>
                   <span>PnL</span>
                   <Tooltip title={Tooltips.LPPnL}>
                     <InfoIcon className={classes.infoIcon} />
@@ -164,7 +171,7 @@ export const LPTable: React.FC<LPTableProps> = ({ isLPage, pool }) => {
               lpLoading ? (
                 <TableRow>
                   <TableCell colSpan={6} align="center" style={{ textAlign: 'center', fontSize: '16px' }}>
-                    <p>Loading...</p>
+                    <p>loading...</p>
                   </TableCell>
                 </TableRow>
               ) : (
@@ -182,7 +189,7 @@ export const LPTable: React.FC<LPTableProps> = ({ isLPage, pool }) => {
               closedPositions?.map((p) => {
                 return (
                   <TableRow key={p.id}>
-                    <TableCell component="th" align="left" scope="row">
+                    <TableCell component="th" align="left" scope="row" className={classes.textMonospace}>
                       <a
                         href={
                           networkId === 3
@@ -199,10 +206,10 @@ export const LPTable: React.FC<LPTableProps> = ({ isLPage, pool }) => {
                     <TableCell align="left">
                       <Chip label="Closed" size="small" />
                     </TableCell>
-                    <TableCell align="left">
+                    <TableCell align="left" className={classes.textMonospace}>
                       {((pool ? p.liquidity / Number(pool?.liquidity) : 0) * 100).toFixed(3)}
                     </TableCell>
-                    <TableCell align="left">
+                    <TableCell align="left" className={classes.textMonospace}>
                       <span style={{ marginRight: '.5em' }}>
                         {Number(p.amount0).toFixed(4)} {p.token0.symbol}
                       </span>
@@ -218,16 +225,16 @@ export const LPTable: React.FC<LPTableProps> = ({ isLPage, pool }) => {
                   {p.collectedFeesToken1} {p.token1.symbol}
                 </span>
               </TableCell> */}
-                    <TableCell align="left">
+                    <TableCell align="left" className={classes.textMonospace}>
                       <span style={{ marginRight: '.5em' }}>
                         {p.fees0?.toFixed(6)} {p.token0.symbol}
                       </span>
                       <span>
                         {p.fees1?.toFixed(6)} {p.token1.symbol}
                       </span>
                     </TableCell>
-                    <TableCell align="left">
-                      <span style={{ marginRight: '.5em' }}>$ {p.dollarValue?.toFixed(2)}</span>
+                    <TableCell align="left" className={classes.textMonospace}>
+                      <span style={{ marginRight: '.5em' }}>${p.dollarValue?.toFixed(2)}</span>
                     </TableCell>
                   </TableRow>
                 )
@@ -250,7 +257,7 @@ export const LPTable: React.FC<LPTableProps> = ({ isLPage, pool }) => {
               lpLoading ? (
                 <TableRow>
                   <TableCell colSpan={7} align="center" style={{ textAlign: 'center', fontSize: '16px' }}>
-                    <p>Loading...</p>
+                    <p>loading...</p>
                   </TableCell>
                 </TableRow>
               ) : (
@@ -277,7 +284,7 @@ export const LPTable: React.FC<LPTableProps> = ({ isLPage, pool }) => {
               activePositions?.slice(0, isLPage ? activePositions.length : 3).map((p) => {
                 return (
                   <TableRow key={p.id}>
-                    <TableCell component="th" align="left" scope="row">
+                    <TableCell component="th" align="left" scope="row" className={classes.textMonospace}>
                       <a
                         href={
                           networkId === 3
@@ -298,31 +305,31 @@ export const LPTable: React.FC<LPTableProps> = ({ isLPage, pool }) => {
                         <Chip label="No" size="small" className={classes.outRange} />
                       )}
                     </TableCell>
-                    <TableCell align="left">
+                    <TableCell align="left" className={classes.textMonospace}>
                       {((pool ? p.liquidity / Number(pool?.liquidity) : 0) * 100).toFixed(3)}
                     </TableCell>
-                    <TableCell align="left">
+                    <TableCell align="left" className={classes.textMonospace}>
                       <span style={{ marginRight: '.5em' }}>
                         {Number(p.amount0).toFixed(4)} {p.token0.symbol}
                       </span>
                       <span>
                         {Number(p.amount1).toFixed(4)} {p.token1.symbol}
                       </span>
                     </TableCell>
-                    <TableCell align="left">
+                    <TableCell align="left" className={classes.textMonospace}>
                       <span style={{ marginRight: '.5em' }}>
                         {p.fees0?.toFixed(6)} {p.token0.symbol}
                       </span>
                       <span>
                         {p.fees1?.toFixed(6)} {p.token1.symbol}
                       </span>
                     </TableCell>
-                    <TableCell align="left">
-                      <span style={{ marginRight: '.5em' }}>$ {p.dollarValue?.toFixed(2)}</span>
+                    <TableCell align="left" className={classes.textMonospace}>
+                      <span style={{ marginRight: '.5em' }}>${p.dollarValue?.toFixed(2)}</span>
                     </TableCell>
-                    <TableCell align="left">
+                    <TableCell align="left" className={classes.textMonospace}>
                       <span style={{ marginRight: '.5em' }}>
-                        ${' '}
+                        $
                         {calculatePnL(
                           p.depositedToken0,
                           p.depositedToken1,

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),
     },
   }),

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

@@ -0,0 +1,131 @@
+import { Tooltip, Typography } from '@material-ui/core'
+import InfoIcon from '@material-ui/icons/InfoOutlined'
+import Image from 'next/image'
+import { useAtomValue } from 'jotai'
+import React from 'react'
+import clsx from 'clsx'
+
+import { Tooltips } from '@constants/index'
+import {
+  bullCurrentETHPositionAtom,
+  bullCurrentUSDCPositionAtom,
+  bullDepositedETHAtom,
+  bullDepositedUSDCAtom,
+  bullEthPnlAtom,
+  bullEthPnlPerctAtom,
+  bullPositionLoadedAtom,
+} from '@state/bull/atoms'
+import bullStrategyImg from 'public/images/bull_strategy.png'
+import { formatCurrency, formatNumber } from '@utils/formatter'
+import Loading from './Loading'
+import useStyles from './useStyles'
+
+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 (
+    <div className={classes.position} id="pos-page-bull">
+      <div className={classes.positionTitle}>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <div className={classes.emoji}>
+            <Image src={bullStrategyImg} width="100%" alt="zen bull" />
+          </div>
+          <Typography style={{ marginLeft: '8px' }} variant="body1" className={classes.fontMedium}>
+            Zen Bull
+          </Typography>
+        </div>
+      </div>
+      <div className={classes.shortPositionData}>
+        <div className={classes.innerPositionData}>
+          <div className={classes.positionColumn}>
+            <div className={classes.titleWithTooltip}>
+              <Typography variant="caption" component="span" color="textSecondary">
+                Deposited Amount
+              </Typography>
+              <Tooltip title={Tooltips.CrabMigratedDeposit}>
+                <InfoIcon fontSize="small" className={classes.infoIcon} />
+              </Tooltip>
+            </div>
+
+            <Typography variant="body1" className={classes.textMonospace}>
+              {formatNumber(bullDepositedETH.toNumber(), 6)}&nbsp;ETH
+            </Typography>
+            <Typography variant="body2" color="textSecondary" className={classes.textMonospace}>
+              <span id="pos-page-crab-deposited-amount">{formatCurrency(bullDepositedUSD.toNumber())}</span>
+            </Typography>
+          </div>
+
+          <div className={classes.positionColumn}>
+            <Typography variant="caption" component="span" color="textSecondary">
+              Current Position
+            </Typography>
+            {loading ? (
+              <Loading />
+            ) : (
+              <Typography variant="body1" className={classes.textMonospace}>
+                {formatNumber(bullCurrentETH.toNumber(), 6)} ETH
+              </Typography>
+            )}
+            {loading ? (
+              <Loading isSmall />
+            ) : (
+              <Typography variant="body2" color="textSecondary" className={classes.textMonospace}>
+                {formatCurrency(bullCurrentUSD.toNumber())}
+              </Typography>
+            )}
+          </div>
+        </div>
+
+        <div className={clsx(classes.innerPositionData, classes.rowMarginTop)}>
+          <div className={classes.positionColumn}>
+            <div className={classes.titleWithTooltip}>
+              <Typography variant="caption" component="span" color="textSecondary">
+                Unrealized P&L
+              </Typography>
+              <Tooltip title={Tooltips.CrabPnL}>
+                <InfoIcon fontSize="small" className={classes.infoIcon} />
+              </Tooltip>
+            </div>
+
+            {loading ? (
+              <Loading />
+            ) : (
+              <Typography
+                variant="body1"
+                className={clsx(classes.textMonospace, bullEthPnl.isLessThan(0) ? classes.red : classes.green)}
+                id="pos-page-crab-pnl-amount"
+              >
+                {formatNumber(bullEthPnl.toNumber(), 6) + ' ETH'}
+              </Typography>
+            )}
+            {loading ? (
+              <Loading isSmall />
+            ) : (
+              <Typography
+                variant="caption"
+                className={clsx(classes.textMonospace, bullEthPnlInPerct.isLessThan(0) ? classes.red : classes.green)}
+              >
+                {bullEthPnlInPerct.isPositive() && '+'}
+                {formatNumber(bullEthPnlInPerct.toNumber()) + '%'}
+              </Typography>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default BullPosition