From 4f905cf850d2861c6bf2aa05fc916a70fd09bbb7 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Mon, 13 Feb 2023 15:17:10 +1100
Subject: [PATCH] add unsettled perp to mobile unsettled table

---
 components/trade/UnsettledTrades.tsx | 51 +++++++++++++++++++++++++---
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/components/trade/UnsettledTrades.tsx b/components/trade/UnsettledTrades.tsx
index 015444c2..3a23da4a 100644
--- a/components/trade/UnsettledTrades.tsx
+++ b/components/trade/UnsettledTrades.tsx
@@ -160,13 +160,17 @@ const UnsettledTrades = ({
                   <div className="flex justify-end">
                     {unsettledSpotBalances[mktAddress].base ? (
                       <div>
-                        {unsettledSpotBalances[mktAddress].base}{' '}
+                        <FormatNumericValue
+                          value={unsettledSpotBalances[mktAddress].base}
+                        />{' '}
                         <span className="font-body text-th-fgd-4">{base}</span>
                       </div>
                     ) : null}
                     {unsettledSpotBalances[mktAddress].quote ? (
                       <div className="ml-4">
-                        {unsettledSpotBalances[mktAddress].quote}{' '}
+                        <FormatNumericValue
+                          value={unsettledSpotBalances[mktAddress].quote}
+                        />{' '}
                         <span className="font-body text-th-fgd-4">{quote}</span>
                       </div>
                     ) : null}
@@ -233,7 +237,40 @@ const UnsettledTrades = ({
         </tbody>
       </Table>
     ) : (
-      <div className="pb-20">
+      <div>
+        {unsettledPerpPositions.map((position) => {
+          const market = group.getPerpMarketByMarketIndex(position.marketIndex)
+
+          return (
+            <div
+              key={position.marketIndex}
+              className="flex items-center justify-between border-b border-th-bkg-3 p-4"
+            >
+              <TableMarketName market={market} />
+              <div className="flex items-center space-x-3">
+                <div>
+                  <FormatNumericValue
+                    value={position.getUnsettledPnlUi(market)}
+                    decimals={market.baseDecimals}
+                  />{' '}
+                  <span className="font-body text-th-fgd-4">USDC</span>
+                </div>
+                {!isUnownedAccount ? (
+                  <IconButton
+                    onClick={() => handleSettlePerpFunds(market)}
+                    size="medium"
+                  >
+                    {settleMktAddress === market.publicKey.toString() ? (
+                      <Loading className="h-4 w-4" />
+                    ) : (
+                      <CheckIcon className="h-4 w-4" />
+                    )}
+                  </IconButton>
+                ) : null}
+              </div>
+            </div>
+          )
+        })}
         {Object.entries(unsettledSpotBalances).map(([mktAddress]) => {
           const market = group.getSerum3MarketByExternalMarket(
             new PublicKey(mktAddress)
@@ -250,13 +287,17 @@ const UnsettledTrades = ({
               <div className="flex items-center space-x-3">
                 {unsettledSpotBalances[mktAddress].base ? (
                   <span className="font-mono text-sm">
-                    {unsettledSpotBalances[mktAddress].base}{' '}
+                    <FormatNumericValue
+                      value={unsettledSpotBalances[mktAddress].base}
+                    />{' '}
                     <span className="font-body text-th-fgd-4">{base}</span>
                   </span>
                 ) : null}
                 {unsettledSpotBalances[mktAddress].quote ? (
                   <span className="font-mono text-sm">
-                    {unsettledSpotBalances[mktAddress].quote}{' '}
+                    <FormatNumericValue
+                      value={unsettledSpotBalances[mktAddress].quote}
+                    />{' '}
                     <span className="font-body text-th-fgd-4">{quote}</span>
                   </span>
                 ) : null}