Merge pull request #325 from blockworks-foundation/side-nav-height

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 = ({
+const AccountOverviewPopover = ({ collapsed }: { collapsed: boolean }) => {
-  collapsed,
-  isOpen,
-  setIsOpen,
-}: {
-  collapsed: boolean
-  isOpen: boolean
-  setIsOpen: (x) => void
-}) => {
   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/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,12 +60,6 @@ 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
@@ -78,9 +67,7 @@ const SideNav = ({ collapsed, setCollapsed }) => {
                 collapsed ? 'justify-center' : 'justify-start'
               } h-14 border-b border-th-bkg-3 px-4`}
             >
-                  <div
+              <div className={`flex flex-shrink-0 cursor-pointer items-center`}>
-                    className={`flex flex-shrink-0 cursor-pointer items-center`}
-                  >
                 <img
                   className={`h-8 w-auto`}
                   src="/assets/icons/logo.svg"
@@ -211,15 +198,9 @@ const SideNav = ({ collapsed, setCollapsed }) => {
 
         {mangoAccount ? (
           <SidebarFooter>
-                <AccountOverviewPopover
+            <AccountOverviewPopover collapsed={collapsed} />
-                  collapsed={collapsed}
-                  isOpen={summaryOpen}
-                  setIsOpen={setSummaryOpen}
-                />
           </SidebarFooter>
         ) : null}
-          </div>
-        </div>
       </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