From 6151aa17a11b2ba67888664bd6c42cfa6433c458 Mon Sep 17 00:00:00 2001
From: Malin Antonsson <mantonsson90@gmail.com>
Date: Mon, 26 Sep 2022 17:38:25 +0200
Subject: [PATCH] feat: liquidity provision calculate volume

---
 .../components/market-list/market-list.tsx    | 27 +++--------
 .../src/lib/liquidity-provision-provider.tsx  |  2 +-
 .../src/lib/utils/liquidity-utils.ts          | 48 +++++++++++++++++--
 3 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/apps/liquidity-provision-dashboard/src/app/components/market-list/market-list.tsx b/apps/liquidity-provision-dashboard/src/app/components/market-list/market-list.tsx
index 8cf53dd35..f10cbbf8b 100644
--- a/apps/liquidity-provision-dashboard/src/app/components/market-list/market-list.tsx
+++ b/apps/liquidity-provision-dashboard/src/app/components/market-list/market-list.tsx
@@ -1,7 +1,5 @@
-import React, { useState, useMemo, useCallback } from 'react';
-import { t } from '@vegaprotocol/react-helpers';
-// import type { AgGridReact } from 'ag-grid-react';
-//import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
+import { useCallback } from 'react';
+import { formatNumber, t } from '@vegaprotocol/react-helpers';
 import { AgGridReact, AgGridColumn } from 'ag-grid-react';
 import type {
   GroupCellRendererParams,
@@ -80,7 +78,7 @@ const MarketList = ({ data }: { data: MarketsListData }) => {
           rowHeight={80}
         >
           <AgGridColumn
-            headerName={t('Market (futures) TEST')}
+            headerName={t('Market (futures)')}
             field="tradableInstrument.instrument.name"
             headerTooltip={t('This is the tooltip')}
             cellRenderer={marketNameCellRenderer}
@@ -88,13 +86,11 @@ const MarketList = ({ data }: { data: MarketsListData }) => {
           />
           <AgGridColumn
             headerName={t('Volume 24h')}
-            field="volume"
+            field="dayVolume"
             headerTooltip={t('This is the volume tooltip')}
-            cellRenderer={({ value }: GroupCellRendererParams) => {
-              //TODO: get from candles
-              // const dayVolume = calcCandleVolume(market);
-              return '0';
-            }}
+            valueFormatter={({ value }: ValueFormatterParams) =>
+              formatNumber(value)
+            }
           />
 
           <AgGridColumn
@@ -151,13 +147,4 @@ const MarketList = ({ data }: { data: MarketsListData }) => {
 />; */
 }
 
-{
-  /* <AgGridColumn
-  headerName={t('Committed liquidity')}
-  cellRenderer={({ data }: GroupCellRendererParams) => {
-    return formatStake(data.marketData.suppliedStake, data);
-  }}
-/>; */
-}
-
 export default MarketList;
diff --git a/libs/liquidity-provision/src/lib/liquidity-provision-provider.tsx b/libs/liquidity-provision/src/lib/liquidity-provision-provider.tsx
index ee426949e..6f32848c4 100644
--- a/libs/liquidity-provision/src/lib/liquidity-provision-provider.tsx
+++ b/libs/liquidity-provision/src/lib/liquidity-provision-provider.tsx
@@ -1,4 +1,4 @@
-import { useQuery, gql } from '@apollo/client';
+import { gql } from '@apollo/client';
 import {
   makeDataProvider,
   makeDerivedDataProvider,
diff --git a/libs/liquidity-provision/src/lib/utils/liquidity-utils.ts b/libs/liquidity-provision/src/lib/utils/liquidity-utils.ts
index 8fda9b06d..45dd26100 100644
--- a/libs/liquidity-provision/src/lib/utils/liquidity-utils.ts
+++ b/libs/liquidity-provision/src/lib/utils/liquidity-utils.ts
@@ -2,8 +2,25 @@
 /* eslint-disable */
 
 import type { Market } from '@vegaprotocol/market-list';
+// import type { CandleClose } from '@vegaprotocol/types';
+// import isNil from 'lodash/isNil';
+
+import BigNumber from 'bignumber.js';
 import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
 
+// @ts-ignore
+const calcCandleVolume = (market) => {
+  const edges = market?.candlesConnection?.edges || [];
+  return (
+    edges
+      // @ts-ignore
+      .reduce((acc, c) => {
+        return acc.plus(new BigNumber(c?.node?.volume ?? 0));
+      }, new BigNumber(edges?.[0]?.node?.volume ?? 0))
+      .toString()
+  );
+};
+
 export const formatWithAsset = (value: string, market: Market) => {
   const formattedValue = addDecimalsFormatNumber(
     value,
@@ -28,14 +45,39 @@ export const sumLiquidityCommitted = (edges = []) => {
     : 0;
 };
 
+// const getPriceChange = () => {
+
+// }
+// // @ts-ignore
+// const getMarketChange = (market) => {
+//   const decimalPlaces = market.decimalPlaces;
+//   const edges = market?.candlesConnection?.edges || [];
+//   // @ts-ignore
+//   const candles = edges
+//     // @ts-ignore
+//     .map((e) => {
+//       return e.node;
+//     })
+//     // @ts-ignore
+//     .filter((e) => e);
+
+//   // @ts-ignore
+//   const candlesClose = candles
+//     // @ts-ignore
+//     ?.map((candle) => candle?.close)
+//     .filter((c: string | undefined): c is CandleClose => !isNil(c));
+// };
+
+// <PriceCellChange candles={candlesClose} decimalPlaces={market.decimalPlaces} />;
+
 // @ts-ignore
 export const mapMarketLists = (markets) => {
   return markets.map((market = {}) => {
-    // @ts-ignore
-    console.log(market?.liquidityProvisionsConnection);
-    //return market;
+    const dayVolume = calcCandleVolume(market);
+
     return {
       ...market,
+      dayVolume,
       liquidityCommitted: sumLiquidityCommitted(
         // @ts-ignore
         market?.liquidityProvisionsConnection?.edges