fix side-nav height

components/AccountOverviewPopover.tsx

@@ -11,17 +11,8 @@ import HealthHeart from './HealthHeart'
 import { abbreviateAddress, formatUsdValue, usdFormatter } from 'utils'
 import { DataLoader } from './MarketPosition'
 import { Menu, SubMenu } from 'react-pro-sidebar'
-import { useEffect } from 'react'
 
-const AccountOverviewPopover = ({
-  collapsed,
-  isOpen,
-  setIsOpen,
-}: {
-  collapsed: boolean
-  isOpen: boolean
-  setIsOpen: (x) => void
-}) => {
+const AccountOverviewPopover = ({ collapsed }: { collapsed: boolean }) => {
   const { t } = useTranslation('common')
   const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
@@ -45,24 +36,6 @@ const AccountOverviewPopover = ({
       ? mangoAccount.computeValue(mangoGroup, mangoCache)
       : ZERO_I80F48
 
-  const liquidationPrice =
-    mangoGroup && mangoAccount && marketConfig && mangoGroup && mangoCache
-      ? mangoAccount.getLiquidationPrice(
-          mangoGroup,
-          mangoCache,
-          marketConfig.marketIndex
-        )
-      : undefined
-
-  useEffect(() => {
-    const id = document.getElementById('sidebar-content')
-    if (isOpen) {
-      id?.style.setProperty('height', 'calc(100vh - 325px)', '')
-    } else {
-      id?.style.setProperty('height', 'calc(100vh - 125px)', '')
-    }
-  }, [isOpen])
-
   return (
     <>
       {mangoAccount ? (
@@ -80,8 +53,6 @@ const AccountOverviewPopover = ({
               </div>
             }
             icon={<HealthHeart health={Number(maintHealthRatio)} size={32} />}
-            open={isOpen}
-            onClick={() => setIsOpen(!isOpen)}
           >
             <div className={`w-full pr-5 ${!collapsed ? 'pl-3 pb-2' : 'py-2'}`}>
               {collapsed ? (
@@ -160,16 +131,6 @@ const AccountOverviewPopover = ({
                     : '0.00'}
                 </p>
               </div>
-              <div>
-                <p className="mb-0 text-xs leading-4">
-                  {marketConfig.name} {t('estimated-liq-price')}
-                </p>
-                <p className="mb-0 font-bold text-th-fgd-1">
-                  {liquidationPrice && liquidationPrice.gt(ZERO_I80F48)
-                    ? usdFormatter(liquidationPrice)
-                    : 'N/A'}
-                </p>
-              </div>
             </div>
           </SubMenu>
         </Menu>

components/Layout.tsx

@@ -84,7 +84,9 @@ const Layout = ({ children }) => {
                       : mangoAccount
                       ? '🟢'
                       : '👋'
-                    : '🔗'}
+                    : !isMobile
+                    ? '🔗'
+                    : ''}
                 </span>
                 {connected || pubkey ? (
                   !initialLoad ? (

components/PerpPositionsTable.tsx

@@ -3,13 +3,18 @@ import { useRouter } from 'next/router'
 import Link from 'next/link'
 import { useTranslation } from 'next-i18next'
 import { ExclamationIcon } from '@heroicons/react/outline'
-
+import { ZERO_I80F48 } from '@blockworks-foundation/mango-client'
 import useMangoStore from '../stores/useMangoStore'
 import { LinkButton } from '../components/Button'
 import { useViewport } from '../hooks/useViewport'
 import { breakpoints } from './TradePageGrid'
 import { ExpandableRow, Table, Td, Th, TrBody, TrHead } from './TableElements'
-import { formatUsdValue, getPrecisionDigits, roundPerpSize } from '../utils'
+import {
+  formatUsdValue,
+  getPrecisionDigits,
+  roundPerpSize,
+  usdFormatter,
+} from '../utils'
 import Loading from './Loading'
 import MarketCloseModal from './MarketCloseModal'
 import PerpSideBadge from './PerpSideBadge'
@@ -22,6 +27,7 @@ import { marketSelector } from '../stores/selectors'
 import { useWallet } from '@solana/wallet-adapter-react'
 import RedeemButtons from './RedeemButtons'
 import Tooltip from './Tooltip'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const PositionsTable: React.FC = () => {
   const { t } = useTranslation('common')
@@ -39,6 +45,9 @@ const PositionsTable: React.FC = () => {
   )
   const unsettledPositions =
     useMangoStore.getState().selectedMangoAccount.unsettledPerpPositions
+  const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
+  const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
+  const { mangoAccount } = useMangoAccount()
   const { width } = useViewport()
   const isMobile = width ? width < breakpoints.md : false
   const { asPath } = useRouter()
@@ -171,6 +180,7 @@ const PositionsTable: React.FC = () => {
                     <Th>{t('notional-size')}</Th>
                     <Th>{t('average-entry')}</Th>
                     <Th>{t('break-even')}</Th>
+                    <Th>{t('estimated-liq-price')}</Th>
                     <Th>{t('unrealized-pnl')}</Th>
                     <Th>{t('unsettled-balance')}</Th>
                   </TrHead>
@@ -196,6 +206,18 @@ const PositionsTable: React.FC = () => {
                         basePosition,
                         marketConfig.baseSymbol
                       )
+                      const liquidationPrice =
+                        mangoGroup &&
+                        mangoAccount &&
+                        marketConfig &&
+                        mangoGroup &&
+                        mangoCache
+                          ? mangoAccount.getLiquidationPrice(
+                              mangoGroup,
+                              mangoCache,
+                              marketConfig.marketIndex
+                            )
+                          : undefined
                       return (
                         <TrBody key={`${marketConfig.marketIndex}`}>
                           <Td>
@@ -258,7 +280,13 @@ const PositionsTable: React.FC = () => {
                               : '--'}
                           </Td>
                           <Td>
-                            {breakEvenPrice ? (
+                            {liquidationPrice &&
+                            liquidationPrice.gt(ZERO_I80F48)
+                              ? usdFormatter(liquidationPrice)
+                              : 'N/A'}
+                          </Td>
+                          <Td>
+                            {unrealizedPnl ? (
                               <PnlText pnl={unrealizedPnl} />
                             ) : (
                               '--'
@@ -271,11 +299,11 @@ const PositionsTable: React.FC = () => {
                               ) : (
                                 <Tooltip content={t('redeem-pnl')}>
                                   <LinkButton
-                                    className={`font-bold ${
+                                    className={
                                       unsettledPnl >= 0
                                         ? 'text-th-green'
                                         : 'text-th-red'
-                                    }`}
+                                    }
                                     onClick={() =>
                                       handleSettlePnl(
                                         perpMarket,
@@ -342,6 +370,18 @@ const PositionsTable: React.FC = () => {
                       basePosition,
                       marketConfig.baseSymbol
                     )
+                    const liquidationPrice =
+                      mangoGroup &&
+                      mangoAccount &&
+                      marketConfig &&
+                      mangoGroup &&
+                      mangoCache
+                        ? mangoAccount.getLiquidationPrice(
+                            mangoGroup,
+                            mangoCache,
+                            marketConfig.marketIndex
+                          )
+                        : undefined
                     return (
                       <ExpandableRow
                         buttonTemplate={
@@ -440,6 +480,15 @@ const PositionsTable: React.FC = () => {
                                 '--'
                               )}
                             </div>
+                            <div className="col-span-1 text-left">
+                              <div className="pb-0.5 text-xs text-th-fgd-3">
+                                {t('estimated-liq-price')}
+                              </div>
+                              {liquidationPrice &&
+                              liquidationPrice.gt(ZERO_I80F48)
+                                ? usdFormatter(liquidationPrice)
+                                : 'N/A'}
+                            </div>
                           </div>
                         }
                       />

components/SideNav.tsx

@@ -29,11 +29,9 @@ import AccountOverviewPopover from './AccountOverviewPopover'
 import { IconButton } from './Button'
 import useMangoAccount from 'hooks/useMangoAccount'
 import { useTranslation } from 'next-i18next'
-import { useState } from 'react'
 
 const SideNav = ({ collapsed, setCollapsed }) => {
   const { t } = useTranslation('common')
-  const [summaryOpen, setSummaryOpen] = useState(false)
   const { mangoAccount } = useMangoAccount()
   const [defaultMarket] = useLocalStorageState(
     DEFAULT_MARKET_KEY,
@@ -43,9 +41,6 @@ const SideNav = ({ collapsed, setCollapsed }) => {
   const { pathname } = router
 
   const handleToggleSidebar = () => {
-    const id = document.getElementById('sidebar-content')
-    id?.style.setProperty('height', 'calc(100vh - 125px)', '')
-    setSummaryOpen(false)
     setCollapsed(!collapsed)
     setTimeout(() => {
       window.dispatchEvent(new Event('resize'))
@@ -65,161 +60,147 @@ const SideNav = ({ collapsed, setCollapsed }) => {
         />
       </IconButton>
       <ProSidebar collapsed={collapsed} width="220px" collapsedWidth="64px">
-        <div
-          className={`flex flex-col-reverse overflow-y-auto ${
-            summaryOpen ? 'thin-scroll' : ''
-          }`}
-        >
-          <div>
-            <SidebarHeader>
-              <Link href={defaultMarket.path} shallow={true}>
-                <div
-                  className={`flex w-full items-center ${
-                    collapsed ? 'justify-center' : 'justify-start'
-                  } h-14 border-b border-th-bkg-3 px-4`}
-                >
-                  <div
-                    className={`flex flex-shrink-0 cursor-pointer items-center`}
-                  >
-                    <img
-                      className={`h-8 w-auto`}
-                      src="/assets/icons/logo.svg"
-                      alt="next"
-                    />
-                    {!collapsed ? (
-                      <span className="ml-2 text-lg font-bold text-th-fgd-1">
-                        Mango
-                      </span>
-                    ) : null}
-                  </div>
-                </div>
-              </Link>
-            </SidebarHeader>
-            <SidebarContent id="sidebar-content">
-              <Menu iconShape="circle">
-                <MenuItem
-                  active={pathname === '/'}
-                  icon={<TradeIcon className="h-5 w-5" />}
-                >
-                  <Link href={defaultMarket.path} shallow={true}>
-                    {t('trade')}
-                  </Link>
-                </MenuItem>
-                <MenuItem
-                  active={pathname === '/account'}
-                  icon={<CurrencyDollarIcon className="h-5 w-5" />}
-                >
-                  <Link href={'/account'} shallow={true}>
-                    {t('account')}
-                  </Link>
-                </MenuItem>
-                <MenuItem
-                  active={pathname === '/markets'}
-                  icon={<BtcMonoIcon className="h-4 w-4" />}
-                >
-                  <Link href={'/markets'} shallow={true}>
-                    {t('markets')}
-                  </Link>
-                </MenuItem>
-                <MenuItem
-                  active={pathname === '/borrow'}
-                  icon={<CashIcon className="h-5 w-5" />}
-                >
-                  <Link href={'/borrow'} shallow={true}>
-                    {t('borrow')}
-                  </Link>
-                </MenuItem>
-                <MenuItem
-                  active={pathname === '/swap'}
-                  icon={<SwitchHorizontalIcon className="h-5 w-5" />}
-                >
-                  <Link href={'/swap'} shallow={true}>
-                    {t('swap')}
-                  </Link>
-                </MenuItem>
-                <MenuItem
-                  active={pathname === '/stats'}
-                  icon={<ChartBarIcon className="h-5 w-5" />}
-                >
-                  <Link href={'/stats'} shallow={true}>
-                    {t('stats')}
-                  </Link>
-                </MenuItem>
-                <MenuItem
-                  active={pathname === '/leaderboard'}
-                  icon={<TrophyIcon className="h-[18px] w-[18px]" />}
-                >
-                  <Link href={'/leaderboard'} shallow={true}>
-                    {t('leaderboard')}
-                  </Link>
-                </MenuItem>
-                <SubMenu
-                  title={t('more')}
-                  icon={<DotsHorizontalIcon className="h-5 w-5" />}
-                >
-                  <MenuItem
-                    active={pathname === '/referral'}
-                    icon={<UserAddIcon className="h-4 w-4" />}
-                  >
-                    <Link href={'/referral'} shallow={true}>
-                      {t('referrals')}
-                    </Link>
-                  </MenuItem>
-                  <MenuItem
-                    active={pathname === '/risk-calculator'}
-                    icon={<CalculatorIcon className="h-4 w-4" />}
-                  >
-                    <Link href={'/risk-calculator'} shallow={true}>
-                      {t('calculator')}
-                    </Link>
-                  </MenuItem>
-                  <MenuItem
-                    active={pathname === '/fees'}
-                    icon={<CurrencyDollarIcon className="h-4 w-4" />}
-                  >
-                    <Link href={'/fees'} shallow={true}>
-                      {t('fees')}
-                    </Link>
-                  </MenuItem>
-                  <MenuItem
-                    icon={<LightBulbIcon className="h-4 w-4" />}
-                    suffix={<ExternalLinkIcon className="h-4 w-4" />}
-                  >
-                    <a
-                      href={'https://docs.mango.markets'}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {t('learn')}
-                    </a>
-                  </MenuItem>
-                  <MenuItem
-                    icon={<LibraryIcon className="h-4 w-4" />}
-                    suffix={<ExternalLinkIcon className="h-4 w-4" />}
-                  >
-                    <a
-                      href={'https://dao.mango.markets'}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {t('governance')}
-                    </a>
-                  </MenuItem>
-                </SubMenu>
-              </Menu>
-            </SidebarContent>
-
-            {mangoAccount ? (
-              <SidebarFooter>
-                <AccountOverviewPopover
-                  collapsed={collapsed}
-                  isOpen={summaryOpen}
-                  setIsOpen={setSummaryOpen}
+        <SidebarHeader>
+          <Link href={defaultMarket.path} shallow={true}>
+            <div
+              className={`flex w-full items-center ${
+                collapsed ? 'justify-center' : 'justify-start'
+              } h-14 border-b border-th-bkg-3 px-4`}
+            >
+              <div className={`flex flex-shrink-0 cursor-pointer items-center`}>
+                <img
+                  className={`h-8 w-auto`}
+                  src="/assets/icons/logo.svg"
+                  alt="next"
                 />
-              </SidebarFooter>
-            ) : null}
-          </div>
-        </div>
+                {!collapsed ? (
+                  <span className="ml-2 text-lg font-bold text-th-fgd-1">
+                    Mango
+                  </span>
+                ) : null}
+              </div>
+            </div>
+          </Link>
+        </SidebarHeader>
+        <SidebarContent id="sidebar-content">
+          <Menu iconShape="circle">
+            <MenuItem
+              active={pathname === '/'}
+              icon={<TradeIcon className="h-5 w-5" />}
+            >
+              <Link href={defaultMarket.path} shallow={true}>
+                {t('trade')}
+              </Link>
+            </MenuItem>
+            <MenuItem
+              active={pathname === '/account'}
+              icon={<CurrencyDollarIcon className="h-5 w-5" />}
+            >
+              <Link href={'/account'} shallow={true}>
+                {t('account')}
+              </Link>
+            </MenuItem>
+            <MenuItem
+              active={pathname === '/markets'}
+              icon={<BtcMonoIcon className="h-4 w-4" />}
+            >
+              <Link href={'/markets'} shallow={true}>
+                {t('markets')}
+              </Link>
+            </MenuItem>
+            <MenuItem
+              active={pathname === '/borrow'}
+              icon={<CashIcon className="h-5 w-5" />}
+            >
+              <Link href={'/borrow'} shallow={true}>
+                {t('borrow')}
+              </Link>
+            </MenuItem>
+            <MenuItem
+              active={pathname === '/swap'}
+              icon={<SwitchHorizontalIcon className="h-5 w-5" />}
+            >
+              <Link href={'/swap'} shallow={true}>
+                {t('swap')}
+              </Link>
+            </MenuItem>
+            <MenuItem
+              active={pathname === '/stats'}
+              icon={<ChartBarIcon className="h-5 w-5" />}
+            >
+              <Link href={'/stats'} shallow={true}>
+                {t('stats')}
+              </Link>
+            </MenuItem>
+            <MenuItem
+              active={pathname === '/leaderboard'}
+              icon={<TrophyIcon className="h-[18px] w-[18px]" />}
+            >
+              <Link href={'/leaderboard'} shallow={true}>
+                {t('leaderboard')}
+              </Link>
+            </MenuItem>
+            <SubMenu
+              title={t('more')}
+              icon={<DotsHorizontalIcon className="h-5 w-5" />}
+            >
+              <MenuItem
+                active={pathname === '/referral'}
+                icon={<UserAddIcon className="h-4 w-4" />}
+              >
+                <Link href={'/referral'} shallow={true}>
+                  {t('referrals')}
+                </Link>
+              </MenuItem>
+              <MenuItem
+                active={pathname === '/risk-calculator'}
+                icon={<CalculatorIcon className="h-4 w-4" />}
+              >
+                <Link href={'/risk-calculator'} shallow={true}>
+                  {t('calculator')}
+                </Link>
+              </MenuItem>
+              <MenuItem
+                active={pathname === '/fees'}
+                icon={<CurrencyDollarIcon className="h-4 w-4" />}
+              >
+                <Link href={'/fees'} shallow={true}>
+                  {t('fees')}
+                </Link>
+              </MenuItem>
+              <MenuItem
+                icon={<LightBulbIcon className="h-4 w-4" />}
+                suffix={<ExternalLinkIcon className="h-4 w-4" />}
+              >
+                <a
+                  href={'https://docs.mango.markets'}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {t('learn')}
+                </a>
+              </MenuItem>
+              <MenuItem
+                icon={<LibraryIcon className="h-4 w-4" />}
+                suffix={<ExternalLinkIcon className="h-4 w-4" />}
+              >
+                <a
+                  href={'https://dao.mango.markets'}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {t('governance')}
+                </a>
+              </MenuItem>
+            </SubMenu>
+          </Menu>
+        </SidebarContent>
+
+        {mangoAccount ? (
+          <SidebarFooter>
+            <AccountOverviewPopover collapsed={collapsed} />
+          </SidebarFooter>
+        ) : null}
       </ProSidebar>
     </>
   )

styles/index.css

@@ -542,7 +542,7 @@ body::-webkit-scrollbar-corner {
 }
 
 .pro-sidebar > .pro-sidebar-inner > .pro-sidebar-layout .pro-sidebar-footer {
-  @apply border-t border-th-bkg-3;
+  @apply border-t border-th-bkg-3 bg-th-bkg-1;
 }
 
 .pro-sidebar .pro-menu .pro-menu-item.active {
@@ -615,6 +615,8 @@ body::-webkit-scrollbar-corner {
 
 .pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item {
   padding-left: 14px;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .pro-sidebar