Merge branch 'main' into positions-stats

components/trade/OpenOrders.tsx

@@ -295,8 +295,8 @@ const OpenOrders = () => {
                 const side =
                   o instanceof PerpOrder
                     ? 'bid' in o.side
-                      ? 'buy'
-                      : 'sell'
+                      ? 'long'
+                      : 'short'
                     : o.side
                 return (
                   <TrBody

components/trade/Orderbook.tsx

@@ -854,7 +854,8 @@ const OrderbookRow = ({
     const set = mangoStore.getState().set
     set((state) => {
       state.tradeForm.price = formattedPrice.toFixed()
-      if (state.tradeForm.baseSize && state.tradeForm.tradeType === 'Limit') {
+      state.tradeForm.tradeType = 'Limit'
+      if (state.tradeForm.baseSize) {
         const quoteSize = floorToDecimal(
           formattedPrice.mul(new Decimal(state.tradeForm.baseSize)),
           getDecimalCount(tickSize)

components/trade/PerpPositions.tsx

@@ -163,7 +163,7 @@ const PerpPositions = () => {
                         <Td>
                           <TableMarketName
                             market={market}
-                            side={isLong ? 'buy' : 'sell'}
+                            side={isLong ? 'long' : 'short'}
                           />
                         </Td>
                         <Td className="text-right font-mono">
@@ -233,7 +233,7 @@ const PerpPositions = () => {
                           )}
                         </Td>
                         <Td className="text-right font-mono">
-                          <div className="flex flex-col items-end space-y-0.5">
+                          <div className="flex flex-col items-end ">
                             <Tooltip
                               content={
                                 <PnlTooltipContent

components/trade/TableMarketName.tsx

@@ -3,10 +3,7 @@ import useSelectedMarket from 'hooks/useSelectedMarket'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import MarketLogos from './MarketLogos'
-import {
-  ArrowTrendingDownIcon,
-  ArrowTrendingUpIcon,
-} from '@heroicons/react/20/solid'
+import { useTranslation } from 'next-i18next'
 
 const TableMarketName = ({
   market,
@@ -19,30 +16,10 @@ const TableMarketName = ({
   const { asPath } = useRouter()
 
   return selectedMarket?.name === market.name && asPath.includes('/trade') ? (
-    <div
-      className={`flex items-center ${
-        side === 'buy'
-          ? 'text-th-up'
-          : side === 'sell'
-          ? 'text-th-down'
-          : 'text-th-fgd-2'
-      }`}
-    >
-      <NameAndSide market={market} side={side} />
-    </div>
+    <NameAndSide market={market} side={side} />
   ) : (
     <Link href={`/trade?name=${market.name}`}>
-      <div
-        className={`flex items-center underline underline-offset-2 md:underline-offset-4 md:hover:no-underline ${
-          side === 'buy'
-            ? 'text-th-up'
-            : side === 'sell'
-            ? 'text-th-down'
-            : 'text-th-fgd-2 md:hover:text-th-fgd-3'
-        }`}
-      >
-        <NameAndSide market={market} side={side} />
-      </div>
+      <NameAndSide market={market} side={side} />
     </Link>
   )
 }
@@ -56,15 +33,28 @@ const NameAndSide = ({
   market: PerpMarket | Serum3Market
   side?: string
 }) => {
+  const { t } = useTranslation('common')
+  const textColor =
+    side === 'buy' || side === 'long'
+      ? 'text-th-up'
+      : side === 'sell' || side === 'short'
+      ? 'text-th-down'
+      : 'text-th-fgd-2'
   return (
-    <>
+    <div className="flex items-center">
       <MarketLogos market={market} size="large" />
-      <span className="mr-1 whitespace-nowrap">{market.name}</span>
-      {side === 'buy' ? (
-        <ArrowTrendingUpIcon className="h-5 w-5" />
-      ) : side === 'sell' ? (
-        <ArrowTrendingDownIcon className="h-5 w-5" />
-      ) : null}
-    </>
+      <div>
+        <span className="whitespace-nowrap">{market.name}</span>
+        {side ? (
+          <div className="mt-0.5 flex items-center">
+            <p
+              className={`mr-1 font-body text-xs uppercase no-underline ${textColor}`}
+            >
+              {t(side)}
+            </p>
+          </div>
+        ) : null}
+      </div>
+    </div>
   )
 }

components/trade/TradeHistory.tsx

@@ -72,7 +72,16 @@ const TradeHistory = () => {
                     className="my-1 p-2"
                   >
                     <Td>
-                      <TableMarketName market={market} side={side} />
+                      <TableMarketName
+                        market={market}
+                        side={
+                          market instanceof PerpMarket
+                            ? side === 'buy'
+                              ? 'long'
+                              : 'short'
+                            : side
+                        }
+                      />
                     </Td>
                     <Td className="text-right font-mono">{size}</Td>
                     <Td className="text-right font-mono">

components/trade/TradeSummary.tsx

@@ -14,8 +14,13 @@ import useSelectedMarket from 'hooks/useSelectedMarket'
 import { useTranslation } from 'next-i18next'
 import { useMemo } from 'react'
 import Slippage from './Slippage'
-import { floorToDecimal, formatNumericValue } from 'utils/numbers'
+import {
+  floorToDecimal,
+  formatNumericValue,
+  // getDecimalCount,
+} from 'utils/numbers'
 import { formatTokenSymbol } from 'utils/tokens'
+// import useOpenPerpPositions from 'hooks/useOpenPerpPositions'
 
 const TradeSummary = ({
   mangoAccount,
@@ -28,6 +33,28 @@ const TradeSummary = ({
   const { group } = useMangoGroup()
   const tradeForm = mangoStore((s) => s.tradeForm)
   const { selectedMarket, quoteBank } = useSelectedMarket()
+  // const openPerpPositions = useOpenPerpPositions()
+
+  // this isn't correct yet
+
+  // const avgEntryPrice = useMemo(() => {
+  //   if (
+  //     !openPerpPositions.length ||
+  //     !selectedMarket ||
+  //     selectedMarket instanceof Serum3Market
+  //   )
+  //     return
+  //   const openPosition = openPerpPositions.find(
+  //     (pos) => pos.marketIndex === selectedMarket.perpMarketIndex
+  //   )
+  //   if (openPosition && tradeForm.price) {
+  //     const currentAvgPrice =
+  //       openPosition.getAverageEntryPriceUi(selectedMarket)
+  //     const newAvgPrice = (currentAvgPrice + Number(tradeForm.price)) / 2
+  //     return newAvgPrice
+  //   }
+  //   return
+  // }, [openPerpPositions, selectedMarket, tradeForm])
 
   const maintProjectedHealth = useMemo(() => {
     if (!mangoAccount || !group) return 100
@@ -213,6 +240,19 @@ const TradeSummary = ({
         </p>
       </div> */}
       <Slippage />
+      {/* {avgEntryPrice && selectedMarket instanceof PerpMarket ? (
+        <div className="flex justify-between text-xs">
+          <p>{t('trade:avg-entry-price')}</p>
+          <p className="text-th-fgd-2">
+            {tradeForm.tradeType === 'Market' ? '~' : ''}
+            <FormatNumericValue
+              value={avgEntryPrice}
+              decimals={getDecimalCount(selectedMarket.tickSize)}
+              isUsd
+            />
+          </p>
+        </div>
+      ) : null} */}
     </div>
   )
 }