From bc13750c2309a2d43af4bee8bbbf0b85df28cd31 Mon Sep 17 00:00:00 2001
From: Madalina Raicu <madalina@raygroup.uk>
Date: Tue, 27 Dec 2022 21:14:11 +0200
Subject: [PATCH] feat(#2367): show liquidity supplied percentage

---
 .../liquidity-supplied/liquidity-supplied.tsx | 66 ++++++++++++-------
 .../src/lib/utils/liquidity-utils.ts          | 13 ++--
 2 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/apps/trading/components/liquidity-supplied/liquidity-supplied.tsx b/apps/trading/components/liquidity-supplied/liquidity-supplied.tsx
index 8ff142ded..fe830aad5 100644
--- a/apps/trading/components/liquidity-supplied/liquidity-supplied.tsx
+++ b/apps/trading/components/liquidity-supplied/liquidity-supplied.tsx
@@ -1,10 +1,11 @@
 import { useCallback, useMemo, useState } from 'react';
 import {
   addDecimalsFormatNumber,
+  formatNumberPercentage,
   NetworkParams,
   t,
   useDataProvider,
-  useNetworkParam,
+  useNetworkParams,
 } from '@vegaprotocol/react-helpers';
 import type { MarketDealTicket } from '@vegaprotocol/market-list';
 import type {
@@ -17,6 +18,7 @@ import { HeaderStat } from '../header';
 import { Link, Tooltip } from '@vegaprotocol/ui-toolkit';
 import BigNumber from 'bignumber.js';
 import { useCheckLiquidityStatus } from '@vegaprotocol/liquidity';
+import { MarketDataGrid } from '@vegaprotocol/deal-ticket';
 
 interface Props {
   marketId?: string;
@@ -34,15 +36,16 @@ export const MarketLiquiditySupplied = ({
   noUpdate = false,
 }: Props) => {
   const [market, setMarket] = useState<MarketDealTicket>();
-  const { param: stakeToCcyVolume } = useNetworkParam(
-    NetworkParams.market_liquidity_stakeToCcySiskas
+  const { params } = useNetworkParams([
+    NetworkParams.market_liquidity_stakeToCcySiskas,
+    NetworkParams.market_liquidity_targetstake_triggering_ratio,
+  ]);
+
+  const stakeToCcyVolume = Number(params.market_liquidity_stakeToCcySiskas);
+  const triggeringRatio = Number(
+    params.market_liquidity_targetstake_triggering_ratio
   );
 
-  const { param: triggeringRatio } = useNetworkParam(
-    NetworkParams.market_liquidity_targetstake_triggering_ratio
-  );
-
-  console.log({ stakeToCcyVolume, triggeringRatio });
   const variables = useMemo(
     () => ({
       marketId: marketId,
@@ -76,17 +79,16 @@ export const MarketLiquiditySupplied = ({
     skip: noUpdate || !marketId || !data,
   });
 
-  const suppliedStake = market?.data.suppliedStake
+  const supplied = market?.data.suppliedStake
     ? addDecimalsFormatNumber(
         new BigNumber(market?.data.suppliedStake)
-
           .multipliedBy(stakeToCcyVolume || 1)
           .toString(),
         assetDecimals
       )
     : '';
 
-  const targetStake = market?.data.targetStake
+  const target = market?.data.targetStake
     ? addDecimalsFormatNumber(
         new BigNumber(market?.data.targetStake)
           .multipliedBy(stakeToCcyVolume || 1)
@@ -95,23 +97,37 @@ export const MarketLiquiditySupplied = ({
       )
     : '';
 
-  const { status, percentage } = useCheckLiquidityStatus({
-    suppliedStake,
-    targetStake,
-    triggeringRatio: (triggeringRatio && Number(triggeringRatio)) || 1,
+  const { percentage } = useCheckLiquidityStatus({
+    suppliedStake: market?.data.suppliedStake || 0,
+    targetStake: market?.data.targetStake || 0,
+    triggeringRatio,
   });
 
+  const compiledGrid = [
+    {
+      label: t('Supplied stake'),
+      value: addDecimalsFormatNumber(
+        new BigNumber(market?.data.suppliedStake || 0).toString(),
+        assetDecimals
+      ),
+    },
+    {
+      label: t('Target stake'),
+      value: addDecimalsFormatNumber(
+        new BigNumber(market?.data.targetStake || 0).toString(),
+        assetDecimals
+      ),
+    },
+  ];
+
   const description = (
-    <>
-      <p>{status}</p>
-      <p>{percentage}</p>
-      <p>{suppliedStake}</p>
-      <p>{targetStake}</p>
-      <p>{stakeToCcyVolume}</p>
+    <section>
+      {compiledGrid && <MarketDataGrid grid={compiledGrid} />}
+      <br />
       <Link href={`/#/liquidity/${marketId}`} data-testid="view-liquidity-link">
         {t('View liquidity provision table')}
       </Link>
-    </>
+    </section>
   );
 
   return isHeader ? (
@@ -120,11 +136,13 @@ export const MarketLiquiditySupplied = ({
       description={description}
       testId="liquidity-supplied"
     >
-      <div>{suppliedStake}</div>
+      <div>
+        ({formatNumberPercentage(percentage, 2)}) {supplied}
+      </div>
     </HeaderStat>
   ) : (
     <Tooltip description={description}>
-      <span>{suppliedStake}</span>
+      <span>{supplied}</span>
     </Tooltip>
   );
 };
diff --git a/libs/liquidity/src/lib/utils/liquidity-utils.ts b/libs/liquidity/src/lib/utils/liquidity-utils.ts
index bf557b1b1..b8cab73a1 100644
--- a/libs/liquidity/src/lib/utils/liquidity-utils.ts
+++ b/libs/liquidity/src/lib/utils/liquidity-utils.ts
@@ -126,12 +126,14 @@ export const useCheckLiquidityStatus = ({
   suppliedStake: string | number;
   targetStake: string | number;
   triggeringRatio: string | number;
-}): { status: 'green' | 'amber' | 'red' | undefined; percentage: number } => {
+}): {
+  status: 'green' | 'amber' | 'red' | undefined;
+  percentage: BigNumber;
+} => {
   // percentage supplied
   const percentage = new BigNumber(suppliedStake)
     .dividedBy(targetStake)
-    .multipliedBy(100)
-    .toNumber();
+    .multipliedBy(100);
   // IF supplied_stake >= target_stake THEN
   if (new BigNumber(suppliedStake).gte(new BigNumber(targetStake))) {
     // show a green status, e.g. "🟢 $13,666,999 liquidity supplied"
@@ -139,20 +141,19 @@ export const useCheckLiquidityStatus = ({
       status: 'green',
       percentage,
     };
+    // ELSE IF supplied_stake > NETPARAM[market.liquidity.targetstake.triggering.ratio] * target_stake THEN
   } else if (
     new BigNumber(suppliedStake).gte(
       new BigNumber(targetStake).multipliedBy(triggeringRatio)
     )
   ) {
-    // ELSE IF supplied_stake > NETPARAM[market.liquidity.targetstake.triggering.ratio] * target_stake THEN
     // show an amber status, e.g. "🟠 $3,456,123 liquidity supplied"
     return {
       status: 'amber',
       percentage,
     };
+    // ELSE show a red status, e.g. "🔴 $600,002 liquidity supplied"
   } else {
-    // ELSE
-    // show a red status, e.g. "🔴 $600,002 liquidity supplied"
     return {
       status: 'red',
       percentage,