finish mobile and add to sidenav

components/SideNav.tsx

@@ -12,6 +12,7 @@ import {
   ArrowTrendingUpIcon,
   XMarkIcon,
   MagnifyingGlassIcon,
+  BanknotesIcon,
 } from '@heroicons/react/20/solid'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
@@ -94,6 +95,13 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
               title={t('trade')}
               pagePath="/trade"
             />
+            <MenuItem
+              active={pathname === '/borrow'}
+              collapsed={collapsed}
+              icon={<BanknotesIcon className="h-5 w-5" />}
+              title={t('borrow')}
+              pagePath="/borrow"
+            />
             <MenuItem
               active={pathname === '/stats'}
               collapsed={collapsed}

components/borrow/AssetsBorrowsTable.tsx

@@ -1,16 +1,14 @@
-import { Transition } from '@headlessui/react'
 import {
   ArrowUpLeftIcon,
-  ChevronDownIcon,
   QuestionMarkCircleIcon,
 } from '@heroicons/react/20/solid'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/legacy/image'
-import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useViewport } from '../../hooks/useViewport'
 import { formatDecimal, formatFixedDecimals } from '../../utils/numbers'
 import { breakpoints } from '../../utils/theme'
-import Button, { IconButton } from '../shared/Button'
+import { IconButton } from '../shared/Button'
 import Tooltip from '@components/shared/Tooltip'
 import useJupiterMints from 'hooks/useJupiterMints'
 import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
@@ -27,7 +25,6 @@ const AssetsBorrowsTable = () => {
   const [selectedToken, setSelectedToken] = useState('')
   const actions = mangoStore.getState().actions
   const initialStatsLoad = mangoStore((s) => s.tokenStats.initialLoad)
-  const [showTokenDetails, setShowTokenDetails] = useState('')
   const { group } = useMangoGroup()
   const { mangoAccount } = useMangoAccount()
   const { mangoTokens } = useJupiterMints()
@@ -56,10 +53,6 @@ const AssetsBorrowsTable = () => {
     return []
   }, [group])
 
-  const handleShowTokenDetails = (name: string) => {
-    showTokenDetails ? setShowTokenDetails('') : setShowTokenDetails(name)
-  }
-
   return (
     <>
       {showTableView ? (
@@ -78,24 +71,6 @@ const AssetsBorrowsTable = () => {
               <Th>
                 <div className="flex justify-end">{t('rate')}</div>
               </Th>
-              {/* <Th>
-                <div className="flex justify-end">
-                  <Tooltip content="The percentage of deposits that have been lent out.">
-                    <span className="tooltip-underline">
-                      {t('utilization')}
-                    </span>
-                  </Tooltip>
-                </div>
-              </Th> */}
-              <Th>
-                <div className="flex justify-end text-right">
-                  <Tooltip content={t('borrow:liability-weight-desc')}>
-                    <span className="tooltip-underline">
-                      {t('liability-weight')}
-                    </span>
-                  </Tooltip>
-                </div>
-              </Th>
               <Th />
             </TrHead>
           </thead>
@@ -164,29 +139,11 @@ const AssetsBorrowsTable = () => {
                       %
                     </p>
                   </Td>
-                  {/* <Td>
-                    <div className="flex flex-col text-right">
-                      <p>
-                        {bank.uiDeposits() > 0
-                          ? formatDecimal(
-                              (bank.uiBorrows() / bank.uiDeposits()) * 100,
-                              1,
-                              { fixed: true }
-                            )
-                          : '0.0'}
-                        %
-                      </p>
-                    </div>
-                  </Td> */}
-                  <Td>
-                    <div className="flex justify-end space-x-1.5 text-right">
-                      <p>{bank.initLiabWeight.toFixed(2)}</p>
-                    </div>
-                  </Td>
                   <Td>
                     <div className="flex justify-end">
                       <Tooltip content={`${t('borrow')} ${bank.name}`}>
                         <IconButton
+                          disabled={available === 0}
                           onClick={() => handleShowBorrowModal(bank.name)}
                           size="small"
                         >
@@ -210,7 +167,6 @@ const AssetsBorrowsTable = () => {
                 (t) => t.address === bank.mint.toString()
               )?.logoURI
             }
-            const borrows = bank.uiBorrows()
             const price = bank.uiPrice
 
             const available =
@@ -260,78 +216,14 @@ const AssetsBorrowsTable = () => {
                       </p>
                     </div>
                     <IconButton
-                      onClick={() => handleShowTokenDetails(bank.name)}
+                      disabled={available === 0}
+                      onClick={() => handleShowBorrowModal(bank.name)}
                       size="medium"
                     >
-                      <ChevronDownIcon
-                        className={`${
-                          showTokenDetails === bank.name
-                            ? 'rotate-180'
-                            : 'rotate-360'
-                        } h-6 w-6 flex-shrink-0 text-th-fgd-1`}
-                      />
+                      <ArrowUpLeftIcon className="h-5 w-5" />
                     </IconButton>
                   </div>
                 </div>
-                <Transition
-                  appear={true}
-                  show={showTokenDetails === bank.name}
-                  as={Fragment}
-                  enter="transition ease-in duration-200"
-                  enterFrom="opacity-0"
-                  enterTo="opacity-100"
-                  leave="transition ease-out"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0"
-                >
-                  <div className="mt-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4">
-                    <div className="col-span-1">
-                      <p className="mb-0.5 text-xs">{t('total-borrows')}</p>
-                      <AmountWithValue
-                        amount={formatFixedDecimals(borrows)}
-                        value={formatFixedDecimals(borrows * price, true, true)}
-                      />
-                    </div>
-                    {/* <div className="col-span-1">
-                      <p className="text-xs text-th-fgd-3">
-                        {t('utilization')}
-                      </p>
-                      <p className="font-mono text-th-fgd-1">
-                        {bank.uiDeposits() > 0
-                          ? formatDecimal(
-                              (bank.uiBorrows() / bank.uiDeposits()) * 100,
-                              1,
-                              { fixed: true }
-                            )
-                          : '0.0'}
-                        %
-                      </p>
-                    </div> */}
-                    <div className="col-span-1">
-                      <Tooltip content={t('borrow:liability-weight-desc')}>
-                        <p className="tooltip-underline text-xs text-th-fgd-3">
-                          {t('liability-weight')}
-                        </p>
-                      </Tooltip>
-                      <div className="flex space-x-1.5 font-mono">
-                        <p className="text-th-fgd-1">
-                          {bank.initLiabWeight.toFixed(2)}
-                        </p>
-                      </div>
-                    </div>
-                    <div className="col-span-1">
-                      <Button
-                        className="flex items-center"
-                        onClick={() => handleShowBorrowModal(bank.name)}
-                        secondary
-                        size="small"
-                      >
-                        <ArrowUpLeftIcon className="mr-1.5 h-5 w-5" />
-                        {`${t('borrow')} ${bank.name}`}
-                      </Button>
-                    </div>
-                  </div>
-                </Transition>
               </div>
             )
           })}

components/borrow/BorrowPage.tsx

@@ -18,6 +18,8 @@ import BorrowRepayModal from '@components/modals/BorrowRepayModal'
 import CreateAccountModal from '@components/modals/CreateAccountModal'
 import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
 import TabButtons from '@components/shared/TabButtons'
+import { useViewport } from 'hooks/useViewport'
+import { breakpoints } from 'utils/theme'
 
 const BorrowPage = () => {
   const { t } = useTranslation(['common', 'borrow'])
@@ -28,6 +30,8 @@ const BorrowPage = () => {
   const [showRepayModal, setShowRepayModal] = useState(false)
   const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
   const { connected } = useWallet()
+  const { width } = useViewport()
+  const fullWidthTabs = width ? width < breakpoints.sm : false
 
   const handleBorrowModal = () => {
     if (!connected || mangoAccount) {
@@ -77,17 +81,17 @@ const BorrowPage = () => {
     return []
   }, [group, mangoAccount])
 
-  useEffect(() => {
-    if (mangoAccountAddress && !banks.length) {
-      setActiveTab('borrow:assets-to-borrow')
-    }
-  }, [banks, mangoAccountAddress])
-
   const borrowValue = useMemo(() => {
     if (!banks.length) return 0
     return banks.reduce((a, c) => a + Math.abs(c.balance) * c.bank.uiPrice, 0)
   }, [banks])
 
+  useEffect(() => {
+    if (mangoAccountAddress && !borrowValue) {
+      setActiveTab('borrow:assets-to-borrow')
+    }
+  }, [borrowValue, mangoAccountAddress])
+
   const [collateralRemaining, collateralRemainingRatio] = useMemo(() => {
     if (mangoAccount && group) {
       const remaining = toUiDecimalsForQuote(
@@ -186,6 +190,7 @@ const BorrowPage = () => {
       <div className="border-b border-th-bkg-3">
         <TabButtons
           activeValue={activeTab}
+          fillWidth={fullWidthTabs}
           onChange={(v) => setActiveTab(v)}
           showBorders
           values={[

components/borrow/YourBorrowsTable.tsx

@@ -87,6 +87,10 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
                     ? getMaxWithdrawForBank(group, bank, mangoAccount, true)
                     : new Decimal(0)
 
+                const borrowedAmount = mangoAccount
+                  ? Math.abs(mangoAccount.getTokenBalanceUi(bank))
+                  : 0
+
                 return (
                   <TrBody key={bank.name} className="text-sm">
                     <Td>
@@ -110,11 +114,11 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
                       {mangoAccount ? (
                         <AmountWithValue
                           amount={formatDecimal(
-                            mangoAccount.getTokenBalanceUi(bank),
+                            borrowedAmount,
                             bank.mintDecimals
                           )}
                           value={formatFixedDecimals(
-                            mangoAccount.getTokenBalanceUi(bank) * bank.uiPrice,
+                            borrowedAmount * bank.uiPrice,
                             true
                           )}
                           stacked
@@ -156,6 +160,7 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
                         </Tooltip>
                         <Tooltip content={`${t('borrow')} ${bank.name}`}>
                           <IconButton
+                            disabled={available.eq(0)}
                             onClick={() =>
                               handleShowActionModals(bank.name, 'borrow')
                             }
@@ -172,64 +177,94 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
             </tbody>
           </Table>
         ) : (
-          <>
-            {/* {banks.map(({ key, value }) => {
-          const bank = value[0]
+          banks.map((b) => {
+            const bank: Bank = b.bank
 
-          let logoURI
-          if (mangoTokens.length) {
-            logoURI = mangoTokens.find(
-              (t) => t.address === bank.mint.toString()
-            )?.logoURI
-          }
+            let logoURI
+            if (mangoTokens.length) {
+              logoURI = mangoTokens.find(
+                (t) => t.address === bank.mint.toString()
+              )?.logoURI
+            }
 
-          const inOrders = spotBalances[bank.mint.toString()]?.inOrders || 0
-          const unsettled = spotBalances[bank.mint.toString()]?.unsettled || 0
+            const available =
+              group && mangoAccount
+                ? getMaxWithdrawForBank(group, bank, mangoAccount, true)
+                : new Decimal(0)
 
-          return (
-            <div
-              className="flex items-center justify-between border-b border-th-bkg-3 p-4"
-              key={key}
-            >
-              <div className="flex items-center">
-                <div className="mr-2.5 flex flex-shrink-0 items-center">
-                  {logoURI ? (
-                    <Image alt="" width="20" height="20" src={logoURI} />
-                  ) : (
-                    <QuestionMarkCircleIcon className="h-7 w-7 text-th-fgd-3" />
-                  )}
-                </div>
-                <span>{bank.name}</span>
-              </div>
-              <div className="text-right">
-                <div className="mb-0.5 flex justify-end space-x-1.5">
-                  <span className="text-sm text-th-fgd-4">
-                    {mangoAccount
-                      ? `${formatFixedDecimals(
-                          mangoAccount.getTokenBalanceUi(bank) * bank.uiPrice,
-                          false,
+            const borrowedAmount = mangoAccount
+              ? Math.abs(mangoAccount.getTokenBalanceUi(bank))
+              : 0
+
+            return (
+              <div
+                key={bank.name}
+                className="border-b border-th-bkg-3 px-6 py-4"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center">
+                    <div className="mr-2.5 flex flex-shrink-0 items-center">
+                      {logoURI ? (
+                        <Image alt="" width="24" height="24" src={logoURI} />
+                      ) : (
+                        <QuestionMarkCircleIcon className="h-7 w-7 text-th-fgd-3" />
+                      )}
+                    </div>
+                    <p className="text-th-fgd-1">{bank.name}</p>
+                  </div>
+                  <div className="flex items-center space-x-4">
+                    <div>
+                      <p className="mb-0.5 text-right text-xs">
+                        {t('borrow:borrowed-amount')}
+                      </p>
+                      <AmountWithValue
+                        amount={formatDecimal(
+                          borrowedAmount,
+                          bank.mintDecimals
+                        )}
+                        value={formatFixedDecimals(
+                          borrowedAmount * bank.uiPrice,
                           true
-                        )}`
-                      : '$0.00'}
-                  </span>
-                </div>
-                <div className="flex space-x-2">
-                  <p className="text-xs text-th-fgd-4">
-                    {t('trade:in-orders')}:{' '}
-                    <span className="font-mono text-th-fgd-3">{inOrders}</span>
-                  </p>
-                  <p className="text-xs text-th-fgd-4">
-                    {t('trade:unsettled')}:{' '}
-                    <span className="font-mono text-th-fgd-3">
-                      {unsettled ? unsettled.toFixed(bank.mintDecimals) : 0}
-                    </span>
-                  </p>
+                        )}
+                      />
+                    </div>
+                    <div>
+                      <p className="mb-0.5 text-right text-xs">{t('rate')}</p>
+                      <p className="text-right text-th-down">
+                        {formatDecimal(bank.getBorrowRateUi(), 2, {
+                          fixed: true,
+                        })}
+                        %
+                      </p>
+                    </div>
+                    <div className="flex space-x-2">
+                      <Tooltip content={`${t('repay')} ${bank.name}`}>
+                        <IconButton
+                          onClick={() =>
+                            handleShowActionModals(bank.name, 'repay')
+                          }
+                          size="medium"
+                        >
+                          <ArrowDownRightIcon className="h-5 w-5" />
+                        </IconButton>
+                      </Tooltip>
+                      <Tooltip content={`${t('borrow')} ${bank.name}`}>
+                        <IconButton
+                          disabled={available.eq(0)}
+                          onClick={() =>
+                            handleShowActionModals(bank.name, 'borrow')
+                          }
+                          size="medium"
+                        >
+                          <ArrowUpLeftIcon className="h-5 w-5" />
+                        </IconButton>
+                      </Tooltip>
+                    </div>
+                  </div>
                 </div>
               </div>
-            </div>
-          )
-        })} */}
-          </>
+            )
+          })
         )
       ) : mangoAccountAddress || connected ? (
         <div className="border-b border-th-bkg-3">