Classifying trade on getTrades service and storying type on Trade (gnosis#1103)

Co-authored-by: Leandro Boscariol <[email protected]>

Author: alfetopito

src/api/exchange/ExchangeApi.ts

@@ -148,6 +148,8 @@ export interface EventWithBlockInfo extends BaseTradeEvent {
   timestamp: number
 }
 
+export type TradeType = 'full' | 'partial' | 'liquidity' | 'unknown'
+
 /**
  * Trade enriches BaseTradeEvent with block, order and token data
  */
@@ -157,6 +159,7 @@ export interface Trade extends EventWithBlockInfo {
   settlingTimestamp: number
   buyToken: TokenDetails
   sellToken: TokenDetails
+  type?: TradeType
   limitPrice?: BigNumber
   fillPrice: BigNumber
   remainingAmount?: BN

src/components/TradesWidget/TradeRow.tsx

@@ -4,37 +4,23 @@ import BigNumber from 'bignumber.js'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUndo } from '@fortawesome/free-solid-svg-icons'
 
-import { formatPrice, formatSmart, formatAmountFull, DEFAULT_PRECISION, isOrderUnlimited } from '@gnosis.pm/dex-js'
+import { formatPrice, formatSmart, formatAmountFull, DEFAULT_PRECISION } from '@gnosis.pm/dex-js'
 
-import { Trade } from 'api/exchange/ExchangeApi'
+import { Trade, TradeType } from 'api/exchange/ExchangeApi'
 
 import { EtherscanLink } from 'components/EtherscanLink'
 
-import { isTradeFilled, isTradeSettled, formatDateFromBatchId } from 'utils'
+import { isTradeSettled, formatDateFromBatchId } from 'utils'
 import { displayTokenSymbolOrLink } from 'utils/display'
 import { ONE_HUNDRED_BIG_NUMBER } from 'const'
 
-type TradeType = 'full' | 'partial' | 'liquidity' | 'unknown'
-
-export function classifyTrade(trade: Trade): TradeType {
-  const { remainingAmount, orderBuyAmount, orderSellAmount } = trade
-
-  if (!remainingAmount) {
-    return 'unknown'
-  }
-  if (orderBuyAmount && orderSellAmount && isOrderUnlimited(orderBuyAmount, orderSellAmount)) {
-    return 'liquidity'
-  }
-  return isTradeFilled(trade) ? 'full' : 'partial'
-}
-
 interface TradeRowProps {
   trade: Trade
   networkId?: number
 }
 
 const TypePill = styled.span<{
-  tradeType: TradeType
+  tradeType?: TradeType
 }>`
   background-color: ${({ tradeType }): string => {
     switch (tradeType) {
@@ -96,14 +82,13 @@ export const TradeRow: React.FC<TradeRowProps> = params => {
     timestamp,
     txHash,
     orderSellAmount,
+    type,
   } = trade
   const buyTokenDecimals = buyToken.decimals || DEFAULT_PRECISION
   const sellTokenDecimals = sellToken.decimals || DEFAULT_PRECISION
 
-  const tradeType = useMemo(() => classifyTrade(trade), [trade])
-
   const typeColumnTitle = useMemo(() => {
-    switch (tradeType) {
+    switch (type) {
       case 'full':
       case 'partial': {
         if (orderSellAmount) {
@@ -122,7 +107,7 @@ export const TradeRow: React.FC<TradeRowProps> = params => {
       default:
         return ''
     }
-  }, [orderSellAmount, sellAmount, sellToken, sellTokenDecimals, tradeType])
+  }, [orderSellAmount, sellAmount, sellToken, sellTokenDecimals, type])
 
   // Do not display trades that are not settled
   return !isTradeSettled(trade) ? null : (
@@ -146,7 +131,7 @@ export const TradeRow: React.FC<TradeRowProps> = params => {
         {formatSmart({ amount: buyAmount, precision: buyTokenDecimals })} {displayTokenSymbolOrLink(buyToken)}
       </td>
       <td data-label="Type" title={typeColumnTitle}>
-        <TypePill tradeType={tradeType}>{tradeType}</TypePill>
+        <TypePill tradeType={type}>{type}</TypePill>
       </td>
       <td>
         {/* TODO: remove icon and filter out reverted trades */}

src/components/TradesWidget/index.tsx

@@ -18,7 +18,7 @@ import { Trade } from 'api/exchange/ExchangeApi'
 
 import { toCsv, CsvColumns } from 'utils/csv'
 
-import { TradeRow, classifyTrade } from 'components/TradesWidget/TradeRow'
+import { TradeRow } from 'components/TradesWidget/TradeRow'
 import { getNetworkFromId, isTradeSettled, isTradeReverted } from 'utils'
 
 const CsvButtonContainer = styled.div`
@@ -74,7 +74,7 @@ function csvTransformer(trade: Trade): CsvColumns {
       thousandSeparator: false,
       isLocaleAware: false,
     }),
-    Type: classifyTrade(trade),
+    Type: trade.type || '',
     TransactionHash: txHash,
     EventLogIndex: eventIndex.toString(),
     OrderId: orderId,

src/services/factories/getTrades.ts

@@ -8,7 +8,7 @@ import { ExchangeApi, Trade, TradeReversion, Order, AuctionElement, BaseTradeEve
 import { getTokensFactory } from 'services/factories/tokenList'
 import { addUnlistedTokensToUserTokenListByIdFactory } from 'services/factories/addUnlistedTokensToUserTokenListById'
 
-import { dateToBatchId, calculateSettlingTimestamp, logDebug, isOrderDeleted } from 'utils'
+import { dateToBatchId, calculateSettlingTimestamp, logDebug, isOrderDeleted, classifyTrade } from 'utils'
 
 interface GetTradesAndTradeReversionParams {
   networkId: number
@@ -64,7 +64,7 @@ export function getTradesAndTradeReversionsFactory(factoryParams: {
       // Maybe we couldn't find the order /shrug
       const order = orders.get(event.orderId)
 
-      return {
+      const trade: Trade = {
         ...event,
         batchId,
         timestamp,
@@ -85,6 +85,10 @@ export function getTradesAndTradeReversionsFactory(factoryParams: {
         orderBuyAmount: order && order.priceNumerator,
         orderSellAmount: order && order.priceDenominator,
       }
+
+      trade.type = classifyTrade(trade)
+
+      return trade
     })
   }
 

src/utils/classifiers.ts

@@ -0,0 +1,17 @@
+import { isOrderUnlimited } from '@gnosis.pm/dex-js'
+
+import { isTradeFilled } from './miscellaneous'
+
+import { Trade, TradeType } from 'api/exchange/ExchangeApi'
+
+export function classifyTrade(trade: Trade): TradeType {
+  const { remainingAmount, orderBuyAmount, orderSellAmount } = trade
+
+  if (!remainingAmount) {
+    return 'unknown'
+  }
+  if (orderBuyAmount && orderSellAmount && isOrderUnlimited(orderBuyAmount, orderSellAmount)) {
+    return 'liquidity'
+  }
+  return isTradeFilled(trade) ? 'full' : 'partial'
+}

src/utils/index.ts

@@ -7,3 +7,4 @@ export * from './price'
 export * from './validation'
 export * from './flagCodes'
 export * from './deferred'
+export * from './classifiers'