From be031cc0fe9ccf2ba43c45205ae31e4a91526915 Mon Sep 17 00:00:00 2001
From: Tyler Shipe <tjshipe@gmail.com>
Date: Sat, 24 Jul 2021 16:15:27 -0400
Subject: [PATCH] consistency with user info tabs

---
 components/BalancesTable.tsx     |  98 ++++++++++++++-----------
 components/PositionsTable.tsx    |  30 +++++---
 components/TradeHistoryTable.tsx | 121 ++++++-------------------------
 components/WithdrawModal.tsx     |  16 +---
 hooks/useBalances.tsx            |   4 +-
 hooks/useWallet.tsx              |   1 -
 yarn.lock                        |  14 ++--
 7 files changed, 108 insertions(+), 176 deletions(-)

diff --git a/components/BalancesTable.tsx b/components/BalancesTable.tsx
index dad46d64..11abf4cc 100644
--- a/components/BalancesTable.tsx
+++ b/components/BalancesTable.tsx
@@ -7,11 +7,15 @@ import { InformationCircleIcon } from '@heroicons/react/outline'
 import Tooltip from './Tooltip'
 import { sleep } from '../utils'
 import { Market } from '@project-serum/serum'
-import { ZERO_I80F48 } from '@blockworks-foundation/mango-client'
+import {
+  getTokenBySymbol,
+  ZERO_I80F48,
+} from '@blockworks-foundation/mango-client'
 
 const BalancesTable = () => {
   const balances = useBalances()
   const actions = useMangoStore((s) => s.actions)
+  const mangoGroupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
 
   async function handleSettleAll() {
     const mangoAccount = useMangoStore.getState().selectedMangoAccount.current
@@ -117,53 +121,59 @@ const BalancesTable = () => {
                   </Tr>
                 </Thead>
                 <Tbody>
-                  {balances.map((balance, index) => (
-                    <Tr
-                      key={`${index}`}
-                      className={`border-b border-th-bkg-3
+                  {balances.map((balance, index) => {
+                    const tokenConfig = getTokenBySymbol(
+                      mangoGroupConfig,
+                      balance.symbol.toUpperCase()
+                    )
+                    return (
+                      <Tr
+                        key={`${index}`}
+                        className={`border-b border-th-bkg-3
                         ${index % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-2`}
                       `}
-                    >
-                      <Td
-                        className={`flex items-center px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
                       >
-                        <img
-                          alt=""
-                          width="20"
-                          height="20"
-                          src={`/assets/icons/${balance.symbol.toLowerCase()}.svg`}
-                          className={`mr-2.5`}
-                        />
+                        <Td
+                          className={`flex items-center px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
+                        >
+                          <img
+                            alt=""
+                            width="20"
+                            height="20"
+                            src={`/assets/icons/${balance.symbol.toLowerCase()}.svg`}
+                            className={`mr-2.5`}
+                          />
 
-                        {balance.symbol}
-                      </Td>
-                      <Td
-                        className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
-                      >
-                        {balance.marginDeposits.toFixed()}
-                      </Td>
-                      <Td
-                        className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
-                      >
-                        {balance.borrows.toFixed()}
-                      </Td>
-                      <Td
-                        className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
-                      >
-                        {balance.orders}
-                      </Td>
-                      <Td
-                        className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
-                      >
-                        {balance.unsettled}
-                      </Td>
-                      <Td
-                        className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
-                      >
-                        {balance.net.toFixed()}
-                      </Td>
-                    </Tr>
-                  ))}
+                          {balance.symbol}
+                        </Td>
+                        <Td
+                          className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
+                        >
+                          {balance.marginDeposits.toFixed(tokenConfig.decimals)}
+                        </Td>
+                        <Td
+                          className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
+                        >
+                          {balance.borrows.toFixed(tokenConfig.decimals)}
+                        </Td>
+                        <Td
+                          className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
+                        >
+                          {balance.orders}
+                        </Td>
+                        <Td
+                          className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
+                        >
+                          {balance.unsettled}
+                        </Td>
+                        <Td
+                          className={`px-4 py-2.5 whitespace-nowrap text-sm text-th-fgd-1`}
+                        >
+                          {balance.net.toFixed(tokenConfig.decimals)}
+                        </Td>
+                      </Tr>
+                    )
+                  })}
                 </Tbody>
               </Table>
             </div>
diff --git a/components/PositionsTable.tsx b/components/PositionsTable.tsx
index dc371781..04c58dea 100644
--- a/components/PositionsTable.tsx
+++ b/components/PositionsTable.tsx
@@ -49,7 +49,6 @@ const PositionsTable = () => {
         perpAccount.basePosition.eq(new BN(0))
       )
   )
-  console.log('perp acc length', filteredPerpAccounts.length)
 
   const handleSettlePnl = async (
     perpMarket: PerpMarket,
@@ -98,7 +97,7 @@ const PositionsTable = () => {
                 <Thead>
                   <Tr className="text-th-fgd-3">
                     <Th scope="col" className="px-6 py-2 text-left font-normal">
-                      Market
+                      Perp Market
                     </Th>
                     <Th scope="col" className="px-2 py-2 text-left font-normal">
                       Side
@@ -140,13 +139,22 @@ const PositionsTable = () => {
                         <Tr
                           key={`${marketIndex}`}
                           className={`border-b border-th-bkg-3
-                        ${index % 2 === 0 ? `bg-th-bkg-2` : `bg-th-bkg-3`}
+                        ${index % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-2`}
                       `}
                         >
-                          <Td className="px-6 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
-                            {marketConfig.name}
+                          <Td className="px-6 py-1 whitespace-nowrap text-sm text-th-fgd-1">
+                            <div className="flex items-center">
+                              <img
+                                alt=""
+                                width="20"
+                                height="20"
+                                src={`/assets/icons/${marketConfig.baseSymbol.toLowerCase()}.svg`}
+                                className={`mr-2.5`}
+                              />
+                              <div>{marketConfig.name}</div>
+                            </div>
                           </Td>
-                          <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
+                          <Td className="px-2 py-1 whitespace-nowrap text-sm text-th-fgd-1">
                             <SideBadge
                               side={
                                 perpAccount.basePosition.gt(new BN(0))
@@ -155,25 +163,25 @@ const PositionsTable = () => {
                               }
                             />
                           </Td>
-                          <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
+                          <Td className="px-2 py-1 whitespace-nowrap text-sm text-th-fgd-1">
                             {perpMarket.baseLotsToNumber(
                               perpAccount.basePosition
                             )}
                           </Td>
-                          <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
+                          <Td className="px-2 py-1 whitespace-nowrap text-sm text-th-fgd-1">
                             {nativeI80F48ToUi(
                               perpAccount.quotePosition,
                               marketConfig.quoteDecimals
                             ).toFixed()}
                           </Td>
-                          <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
+                          <Td className="px-2 py-1 whitespace-nowrap text-sm text-th-fgd-1">
                             $
                             {nativeI80F48ToUi(
                               perpAccount.getPnl(perpMarketInfo, price),
                               marketConfig.quoteDecimals
                             ).toFixed()}
                           </Td>
-                          <Td className="px-2 py-2.5 whitespace-nowrap text-sm text-th-fgd-1">
+                          <Td className="px-2 py-1 whitespace-nowrap text-sm text-th-fgd-1">
                             {perpAccount
                               .getHealth(
                                 perpMarketInfo,
@@ -185,7 +193,7 @@ const PositionsTable = () => {
                               )
                               .toFixed(3)}
                           </Td>
-                          <Td className="px-6 whitespace-nowrap text-sm text-th-fgd-1">
+                          <Td className="px-6 py-1 whitespace-nowrap text-sm text-th-fgd-1">
                             <div className="flex justify-end">
                               <Button
                                 onClick={() =>
diff --git a/components/TradeHistoryTable.tsx b/components/TradeHistoryTable.tsx
index dec43b9f..37341734 100644
--- a/components/TradeHistoryTable.tsx
+++ b/components/TradeHistoryTable.tsx
@@ -30,38 +30,16 @@ const TradeHistoryTable = () => {
   }
 
   return (
-    <div className={`flex flex-col py-4`}>
-      <div className={`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
-        <div className={`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
+    <div className="flex flex-col py-4">
+      <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+        <div className="align-middle inline-block min-w-full sm:px-6 lg:px-8">
           {tradeHistory && tradeHistory.length ? (
-            <div className={`shadow overflow-hidden border-b border-th-bkg-2`}>
-              <Table className={`min-w-full divide-y divide-th-bkg-2`}>
+            <div className="shadow overflow-hidden border-b border-th-bkg-2">
+              <div className="text-xs text-th-fgd-4">For selected market</div>
+              <Table className="min-w-full divide-y divide-th-bkg-2">
                 <Thead>
                   <Tr className="text-th-fgd-3 text-xs">
-                    <Th
-                      scope="col"
-                      className={`px-6 py-3 text-left font-normal`}
-                    >
-                      <LinkButton
-                        className="flex items-center no-underline"
-                        onClick={() => requestSort('market')}
-                      >
-                        Market
-                        <ArrowSmDownIcon
-                          className={`default-transition flex-shrink-0 h-4 w-4 ml-1 ${
-                            sortConfig?.key === 'market'
-                              ? sortConfig.direction === 'ascending'
-                                ? 'transform rotate-180'
-                                : 'transform rotate-360'
-                              : null
-                          }`}
-                        />
-                      </LinkButton>
-                    </Th>
-                    <Th
-                      scope="col"
-                      className={`px-6 py-3 text-left font-normal`}
-                    >
+                    <Th scope="col" className="px-6 py-3 text-left font-normal">
                       <LinkButton
                         className="flex items-center no-underline"
                         onClick={() => requestSort('side')}
@@ -78,10 +56,7 @@ const TradeHistoryTable = () => {
                         />
                       </LinkButton>
                     </Th>
-                    <Th
-                      scope="col"
-                      className={`px-6 py-3 text-left font-normal`}
-                    >
+                    <Th scope="col" className="px-6 py-3 text-left font-normal">
                       <LinkButton
                         className="flex items-center no-underline"
                         onClick={() => requestSort('size')}
@@ -98,10 +73,7 @@ const TradeHistoryTable = () => {
                         />
                       </LinkButton>
                     </Th>
-                    <Th
-                      scope="col"
-                      className={`px-6 py-3 text-left font-normal`}
-                    >
+                    <Th scope="col" className="px-6 py-3 text-left font-normal">
                       <LinkButton
                         className="flex items-center no-underline"
                         onClick={() => requestSort('price')}
@@ -118,10 +90,7 @@ const TradeHistoryTable = () => {
                         />
                       </LinkButton>
                     </Th>
-                    <Th
-                      scope="col"
-                      className={`px-6 py-3 text-left font-normal`}
-                    >
+                    <Th scope="col" className="px-6 py-3 text-left font-normal">
                       <LinkButton
                         className="flex items-center no-underline"
                         onClick={() => requestSort('value')}
@@ -138,10 +107,7 @@ const TradeHistoryTable = () => {
                         />
                       </LinkButton>
                     </Th>
-                    <Th
-                      scope="col"
-                      className={`px-6 py-3 text-left font-normal`}
-                    >
+                    <Th scope="col" className="px-6 py-3 text-left font-normal">
                       <LinkButton
                         className="flex items-center no-underline"
                         onClick={() => requestSort('liquidity')}
@@ -158,10 +124,7 @@ const TradeHistoryTable = () => {
                         />
                       </LinkButton>
                     </Th>
-                    <Th
-                      scope="col"
-                      className={`px-6 py-3 text-left font-normal`}
-                    >
+                    <Th scope="col" className="px-6 py-3 text-left font-normal">
                       <LinkButton
                         className="flex items-center no-underline"
                         onClick={() => requestSort('feeCost')}
@@ -178,10 +141,7 @@ const TradeHistoryTable = () => {
                         />
                       </LinkButton>
                     </Th>
-                    <Th
-                      scope="col"
-                      className={`px-6 py-3 text-left font-normal`}
-                    >
+                    <Th scope="col" className="px-6 py-3 text-left font-normal">
                       <LinkButton
                         className="flex items-center no-underline"
                         onClick={() => requestSort('loadTimestamp')}
@@ -208,55 +168,25 @@ const TradeHistoryTable = () => {
                         ${index % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-2`}
                       `}
                     >
-                      <Td
-                        className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
-                      >
-                        <div className="flex items-center">
-                          <img
-                            alt=""
-                            width="20"
-                            height="20"
-                            src={`/assets/icons/${trade.marketName
-                              .split(/-|\//)[0]
-                              .toLowerCase()}.svg`}
-                            className={`mr-2.5`}
-                          />
-                          <div>{trade.marketName}</div>
-                        </div>
-                      </Td>
-                      <Td
-                        className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
-                      >
+                      <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
                         <SideBadge side={trade.side} />
                       </Td>
-                      <Td
-                        className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
-                      >
+                      <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
                         {trade.size}
                       </Td>
-                      <Td
-                        className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
-                      >
+                      <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
                         {trade.price}
                       </Td>
-                      <Td
-                        className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
-                      >
+                      <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
                         ${trade.value.toFixed(2)}
                       </Td>
-                      <Td
-                        className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
-                      >
+                      <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
                         {trade.liquidity}
                       </Td>
-                      <Td
-                        className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
-                      >
+                      <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
                         ${trade.feeCost}
                       </Td>
-                      <Td
-                        className={`px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1`}
-                      >
+                      <Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
                         {trade.loadTimestamp || trade.timestamp
                           ? renderTradeDateTime(
                               trade.loadTimestamp || trade.timestamp
@@ -269,18 +199,11 @@ const TradeHistoryTable = () => {
               </Table>
             </div>
           ) : (
-            <div
-              className={`w-full text-center py-6 bg-th-bkg-1 text-th-fgd-3 rounded-md`}
-            >
+            <div className="w-full text-center py-6 bg-th-bkg-1 text-th-fgd-3 rounded-md">
               No trade history.
               {asPath === '/account' ? (
                 <Link href={'/'}>
-                  <a
-                    className={`inline-flex ml-2 py-0
-        `}
-                  >
-                    Make a trade
-                  </a>
+                  <a className="inline-flex ml-2 py-0">Make a trade</a>
                 </Link>
               ) : null}
             </div>
diff --git a/components/WithdrawModal.tsx b/components/WithdrawModal.tsx
index 2edb00e5..e38c30bc 100644
--- a/components/WithdrawModal.tsx
+++ b/components/WithdrawModal.tsx
@@ -604,18 +604,10 @@ const WithdrawModal: FunctionComponent<WithdrawModalProps> = ({
                       </div>
                       <div className="flex justify-between pb-2">
                         <div className="text-th-fgd-4">Leverage</div>
-                        {/* <div className="text-th-fgd-1">
-                          {simulation.leverage.toFixed(2)}x
-                        </div> */}
-                      </div>
-                      <div className="flex justify-between">
-                        <div className="text-th-fgd-4">Collateral Ratio</div>
-                        {/* <div className="text-th-fgd-1">
-                          {simulation.collateralRatio * 100 < 200
-                            ? Math.floor(simulation.collateralRatio * 100)
-                            : '>200'}
-                          %
-                        </div> */}
+                        <div className="text-th-fgd-1">
+                          {/* {simulation.leverage.toFixed(2)}x */}
+                          X.XXx
+                        </div>
                       </div>
                       {simulation.liabsVal > 0.05 ? (
                         <div className="flex justify-between pt-2">
diff --git a/hooks/useBalances.tsx b/hooks/useBalances.tsx
index edb16989..3b70cd40 100644
--- a/hooks/useBalances.tsx
+++ b/hooks/useBalances.tsx
@@ -122,7 +122,7 @@ export function useBalances(): Balances[] {
     .sub(quoteMeta.borrows)
     .sub(I80F48.fromNumber(quoteInOrders))
 
-  return baseBalances.concat([
+  return [
     {
       market: null,
       key: `${quoteMeta.symbol}${quoteMeta.symbol}`,
@@ -133,5 +133,5 @@ export function useBalances(): Balances[] {
       unsettled,
       net,
     },
-  ])
+  ].concat(baseBalances)
 }
diff --git a/hooks/useWallet.tsx b/hooks/useWallet.tsx
index 620ea477..157fca7e 100644
--- a/hooks/useWallet.tsx
+++ b/hooks/useWallet.tsx
@@ -93,7 +93,6 @@ export default function useWallet() {
   useEffect(() => {
     if (!wallet) return
     wallet.on('connect', async () => {
-      console.log('connected wallet')
       sleep(250)
       await actions.fetchMangoAccounts()
       setMangoStore((state) => {
diff --git a/yarn.lock b/yarn.lock
index e5398dbc..105674ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -995,7 +995,7 @@
 
 "@blockworks-foundation/mango-client@git+https://github.com/blockworks-foundation/mango-client-v3.git":
   version "3.0.1"
-  resolved "git+https://github.com/blockworks-foundation/mango-client-v3.git#300815fc84e7576c3b4fa43249958c85d1012128"
+  resolved "git+https://github.com/blockworks-foundation/mango-client-v3.git#06d0d92b5d15d319ef7db5320b8427851c7c4a03"
   dependencies:
     "@project-serum/serum" "^0.13.45"
     "@project-serum/sol-wallet-adapter" "^0.2.0"
@@ -1891,14 +1891,14 @@
   integrity sha512-7eQ2xYLLI/LsicL2nejW9Wyko3lcpN6O/z0ZLHrEQsg280zIdCv1t/0m6UtBjUHokCGBQ3gYTbHzDkZ1xOBwwg==
 
 "@types/node@*":
-  version "16.4.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.1.tgz#9fad171a5b701613ee8a6f4ece3c88b1034b1b03"
-  integrity sha512-UW7cbLqf/Wu5XH2RKKY1cHwUNLicIDRLMraYKz+HHAerJ0ZffUEk+fMnd8qU2JaS6cAy0r8tsaf7yqHASf/Y0Q==
+  version "16.4.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.2.tgz#0a95d7fd950cb1eaca0ce11031d72e8f680b775a"
+  integrity sha512-vxyhOzFCm+jC/T5KugbVsYy1DbQM0h3NCFUrVbu0+pYa/nr+heeucpqxpa8j4pUmIGLPYzboY9zIdOF0niFAjQ==
 
 "@types/node@^12.12.54":
-  version "12.20.16"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.16.tgz#1acf34f6456208f495dac0434dd540488d17f991"
-  integrity sha512-6CLxw83vQf6DKqXxMPwl8qpF8I7THFZuIwLt4TnNsumxkp1VsRZWT8txQxncT/Rl2UojTsFzWgDG4FRMwafrlA==
+  version "12.20.17"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.17.tgz#ffd44c2801fc527a6fe6e86bc9b900261df1c87e"
+  integrity sha512-so8EHl4S6MmatPS0f9sE1ND94/ocbcEshW5OpyYthRqeRpiYyW2uXYTo/84kmfdfeNrDycARkvuiXl6nO40NGg==
 
 "@types/node@^14.14.25":
   version "14.17.3"