fix side-nav height

2022-06-29 10:49:01 +10:00 · 2022-06-29 10:49:01 +10:00 · e36f04b8d6
parent 57b3e1bf4d
commit e36f04b8d6
5 changed files with 201 additions and 206 deletions
--- a/components/AccountOverviewPopover.tsx
+++ b/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>
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@ -84,7 +84,9 @@ const Layout = ({ children }) => {
                      : mangoAccount
                      ? '🟢'
                      : '👋'
-                    : '🔗'}
+                    : !isMobile
+                    ? '🔗'
+                    : ''}
                </span>
                {connected || pubkey ? (
                  !initialLoad ? (
--- a/components/PerpPositionsTable.tsx
+++ b/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>
                        }
                      />
--- a/components/SideNav.tsx
+++ b/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
-                    className={`flex flex-shrink-0 cursor-pointer items-center`}
-                  >
+              <div 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
-                  collapsed={collapsed}
-                  isOpen={summaryOpen}
-                  setIsOpen={setSummaryOpen}
-                />
+            <AccountOverviewPopover collapsed={collapsed} />
          </SidebarFooter>
        ) : null}
-          </div>
-        </div>
      </ProSidebar>
    </>
  )
--- a/styles/index.css
+++ b/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