Merge pull request #50 from blockworks-foundation/recent-trades-ratio

add buy/sell ratio to recent trades

components/trade/RecentTrades.tsx

@@ -97,9 +97,27 @@ const RecentTrades = () => {
     actions.loadMarketFills()
   }, 5000)
 
+  const [buyRatio, sellRatio] = useMemo(() => {
+    if (!fills.length) return [0, 0]
+
+    const vol = fills.reduce(
+      (a: { buys: number; sells: number }, c: any) => {
+        if (c.side === 'buy' || c.takerSide === 1) {
+          a.buys = a.buys + c.size
+        } else {
+          a.sells = a.sells + c.size
+        }
+        return a
+      },
+      { buys: 0, sells: 0 }
+    )
+    const totalVol = vol.buys + vol.sells
+    return [vol.buys / totalVol, vol.sells / totalVol]
+  }, [fills])
+
   return (
     <div className="thin-scroll h-full overflow-y-scroll">
-      <div className="flex justify-end border-b border-th-bkg-3 px-2 py-1">
+      <div className="flex items-center justify-between border-b border-th-bkg-3 py-1 px-2">
         <Tooltip content={t('trade:trade-sounds-tooltip')} delay={250}>
           <IconButton
             onClick={() =>
@@ -118,6 +136,17 @@ const RecentTrades = () => {
             )}
           </IconButton>
         </Tooltip>
+        <span className="text-xs text-th-fgd-4">
+          {t('trade:buys')}:{' '}
+          <span className="font-mono text-th-up">
+            {(buyRatio * 100).toFixed(1)}%
+          </span>
+          <span className="px-2">|</span>
+          {t('trade:sells')}:{' '}
+          <span className="font-mono text-th-down">
+            {(sellRatio * 100).toFixed(1)}%
+          </span>
+        </span>
       </div>
       <div className="px-2">
         <table className="min-w-full">

public/locales/en/trade.json

@@ -2,6 +2,7 @@
     "amount": "Amount",
     "base": "Base",
     "book": "Book",
+    "buys": "Buys",
     "cancel-order-error": "Failed to cancel order",
     "connect-orders": "Connect to view your open orders",
     "connect-positions": "Connect to view your perp positions",
@@ -32,6 +33,7 @@
     "place-order": "Place {{side}} Order",
     "placing-order": "Placing Order",
     "quote": "Quote",
+    "sells": "Sells",
     "settle-funds": "Settle Funds",
     "settle-funds-error": "Failed to settle funds",
     "show-asks": "Show Asks",

public/locales/es/trade.json

@@ -2,6 +2,7 @@
     "amount": "Amount",
     "base": "Base",
     "book": "Book",
+    "buys": "Buys",
     "cancel-order-error": "Failed to cancel order",
     "connect-orders": "Connect to view your open orders",
     "connect-positions": "Connect to view your perp positions",
@@ -32,6 +33,7 @@
     "place-order": "Place {{side}} Order",
     "placing-order": "Placing Order",
     "quote": "Quote",
+    "sells": "Sells",
     "settle-funds": "Settle Funds",
     "settle-funds-error": "Failed to settle funds",
     "show-asks": "Show Asks",

public/locales/ru/trade.json

@@ -2,6 +2,7 @@
     "amount": "Amount",
     "base": "Base",
     "book": "Book",
+    "buys": "Buys",
     "cancel-order-error": "Failed to cancel order",
     "connect-orders": "Connect to view your open orders",
     "connect-positions": "Connect to view your perp positions",
@@ -21,17 +22,18 @@
     "no-orders": "No open orders",
     "no-positions": "No perp positions",
     "no-unsettled": "No unsettled funds",
+    "notional": "Notional",
     "open-interest": "Open Interest",
     "oracle-price": "Oracle Price",
     "order-error": "Failed to place order",
     "order-type": "Order Type",
     "order-value": "Order Value",
     "orders": "Orders",
-    "notional": "Notional",
     "post": "Post",
     "place-order": "Place {{side}} Order",
     "placing-order": "Placing Order",
     "quote": "Quote",
+    "sells": "Sells",
     "settle-funds": "Settle Funds",
     "settle-funds-error": "Failed to settle funds",
     "show-asks": "Show Asks",

public/locales/zh/trade.json

@@ -2,6 +2,7 @@
     "amount": "Amount",
     "base": "Base",
     "book": "Book",
+    "buys": "Buys",
     "cancel-order-error": "Failed to cancel order",
     "connect-orders": "Connect to view your open orders",
     "connect-positions": "Connect to view your perp positions",
@@ -32,6 +33,7 @@
     "place-order": "Place {{side}} Order",
     "placing-order": "Placing Order",
     "quote": "Quote",
+    "sells": "Sells",
     "settle-funds": "Settle Funds",
     "settle-funds-error": "Failed to settle funds",
     "show-asks": "Show Asks",

public/locales/zh_tw/trade.json

@@ -2,6 +2,7 @@
     "amount": "Amount",
     "base": "Base",
     "book": "Book",
+    "buys": "Buys",
     "cancel-order-error": "Failed to cancel order",
     "connect-orders": "Connect to view your open orders",
     "connect-positions": "Connect to view your perp positions",
@@ -32,6 +33,7 @@
     "place-order": "Place {{side}} Order",
     "placing-order": "Placing Order",
     "quote": "Quote",
+    "sells": "Sells",
     "settle-funds": "Settle Funds",
     "settle-funds-error": "Failed to settle funds",
     "show-asks": "Show Asks",