From cafb3b1c5737ea278b911680a56ba0a90e1693c7 Mon Sep 17 00:00:00 2001
From: Davide S <77234633+davidedaji@users.noreply.github.com>
Date: Thu, 29 Jun 2023 03:35:38 +1200
Subject: [PATCH] fix(explorer): liquidity provision fee percentage (#4183)

Co-authored-by: Edd <edd@vega.xyz>
---
 .../txs/details/tx-liquidity-amend.test.tsx   | 86 +++++++++++++++++++
 .../txs/details/tx-liquidity-amend.tsx        |  7 +-
 .../details/tx-liquidity-submission.test.tsx  | 86 +++++++++++++++++++
 .../txs/details/tx-liquidity-submission.tsx   |  7 +-
 4 files changed, 184 insertions(+), 2 deletions(-)
 create mode 100644 apps/explorer/src/app/components/txs/details/tx-liquidity-amend.test.tsx
 create mode 100644 apps/explorer/src/app/components/txs/details/tx-liquidity-submission.test.tsx

diff --git a/apps/explorer/src/app/components/txs/details/tx-liquidity-amend.test.tsx b/apps/explorer/src/app/components/txs/details/tx-liquidity-amend.test.tsx
new file mode 100644
index 000000000..2770d25ca
--- /dev/null
+++ b/apps/explorer/src/app/components/txs/details/tx-liquidity-amend.test.tsx
@@ -0,0 +1,86 @@
+import { render } from '@testing-library/react';
+import { TxDetailsLiquidityAmendment } from './tx-liquidity-amend';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+import { MockedProvider } from '@apollo/client/testing';
+import { MemoryRouter } from 'react-router-dom';
+
+describe('TxDetailsLiquidityAmendment', () => {
+  const mockTxData = {
+    hash: 'test',
+    command: {
+      liquidityProvisionAmendment: {
+        marketId: 'BTC-USD',
+        commitmentAmount: 100,
+        fee: '0.01',
+      },
+    },
+  };
+  const mockPubKey = '123';
+  const mockBlockData = {
+    result: {
+      block: {
+        header: {
+          height: '123',
+        },
+      },
+    },
+  };
+
+  it('should render the component with correct data', () => {
+    const { getByText } = render(
+      <MockedProvider>
+        <MemoryRouter>
+          <TxDetailsLiquidityAmendment
+            txData={mockTxData as BlockExplorerTransactionResult}
+            pubKey={mockPubKey}
+            blockData={mockBlockData as TendermintBlocksResponse}
+          />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(getByText('Market')).toBeInTheDocument();
+    expect(getByText('BTC-USD')).toBeInTheDocument();
+    expect(getByText('Commitment amount')).toBeInTheDocument();
+    expect(getByText('100')).toBeInTheDocument();
+    expect(getByText('Fee')).toBeInTheDocument();
+    expect(getByText('1%')).toBeInTheDocument();
+  });
+
+  it('should display awaiting message when tx data is undefined', () => {
+    const { getByText } = render(
+      <MockedProvider>
+        <MemoryRouter>
+          <TxDetailsLiquidityAmendment
+            txData={undefined}
+            pubKey={mockPubKey}
+            blockData={mockBlockData as TendermintBlocksResponse}
+          />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(
+      getByText('Awaiting Block Explorer transaction details')
+    ).toBeInTheDocument();
+  });
+
+  it('should display awaiting message when liquidityProvisionAmendment is undefined', () => {
+    const { getByText } = render(
+      <MockedProvider>
+        <MemoryRouter>
+          <TxDetailsLiquidityAmendment
+            txData={{ command: {} } as BlockExplorerTransactionResult}
+            pubKey={mockPubKey}
+            blockData={mockBlockData as TendermintBlocksResponse}
+          />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(
+      getByText('Awaiting Block Explorer transaction details')
+    ).toBeInTheDocument();
+  });
+});
diff --git a/apps/explorer/src/app/components/txs/details/tx-liquidity-amend.tsx b/apps/explorer/src/app/components/txs/details/tx-liquidity-amend.tsx
index bc9fc350f..b4824e7ae 100644
--- a/apps/explorer/src/app/components/txs/details/tx-liquidity-amend.tsx
+++ b/apps/explorer/src/app/components/txs/details/tx-liquidity-amend.tsx
@@ -7,6 +7,7 @@ import { TableCell, TableRow, TableWithTbody } from '../../table';
 import type { components } from '../../../../types/explorer';
 import { LiquidityProvisionDetails } from './liquidity-provision/liquidity-provision-details';
 import PriceInMarket from '../../price-in-market/price-in-market';
+import BigNumber from 'bignumber.js';
 
 export type LiquidityAmendment =
   components['schemas']['v1LiquidityProvisionAmendment'];
@@ -34,6 +35,10 @@ export const TxDetailsLiquidityAmendment = ({
     txData.command.liquidityProvisionAmendment;
   const marketId: string = amendment.marketId || '-';
 
+  const fee = amendment.fee
+    ? new BigNumber(amendment.fee).times(100).toString()
+    : '-';
+
   return (
     <>
       <TableWithTbody className="mb-8" allowWrap={true}>
@@ -63,7 +68,7 @@ export const TxDetailsLiquidityAmendment = ({
         {amendment.fee ? (
           <TableRow modifier="bordered">
             <TableCell>{t('Fee')}</TableCell>
-            <TableCell>{amendment.fee}%</TableCell>
+            <TableCell>{fee}%</TableCell>
           </TableRow>
         ) : null}
       </TableWithTbody>
diff --git a/apps/explorer/src/app/components/txs/details/tx-liquidity-submission.test.tsx b/apps/explorer/src/app/components/txs/details/tx-liquidity-submission.test.tsx
new file mode 100644
index 000000000..33bc982f4
--- /dev/null
+++ b/apps/explorer/src/app/components/txs/details/tx-liquidity-submission.test.tsx
@@ -0,0 +1,86 @@
+import { render } from '@testing-library/react';
+import { TxDetailsLiquiditySubmission } from './tx-liquidity-submission';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+import { MockedProvider } from '@apollo/client/testing';
+import { MemoryRouter } from 'react-router-dom';
+
+describe('TxDetailsLiquiditySubmission', () => {
+  const mockTxData = {
+    hash: 'test',
+    command: {
+      liquidityProvisionSubmission: {
+        marketId: 'BTC-USD',
+        commitmentAmount: 100,
+        fee: '0.01',
+      },
+    },
+  };
+  const mockPubKey = '123';
+  const mockBlockData = {
+    result: {
+      block: {
+        header: {
+          height: '123',
+        },
+      },
+    },
+  };
+
+  it('should render the component with correct data', () => {
+    const { getByText } = render(
+      <MockedProvider>
+        <MemoryRouter>
+          <TxDetailsLiquiditySubmission
+            txData={mockTxData as BlockExplorerTransactionResult}
+            pubKey={mockPubKey}
+            blockData={mockBlockData as TendermintBlocksResponse}
+          />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(getByText('Market')).toBeInTheDocument();
+    expect(getByText('BTC-USD')).toBeInTheDocument();
+    expect(getByText('Commitment amount')).toBeInTheDocument();
+    expect(getByText('100')).toBeInTheDocument();
+    expect(getByText('Fee')).toBeInTheDocument();
+    expect(getByText('1%')).toBeInTheDocument();
+  });
+
+  it('should display awaiting message when tx data is undefined', () => {
+    const { getByText } = render(
+      <MockedProvider>
+        <MemoryRouter>
+          <TxDetailsLiquiditySubmission
+            txData={undefined}
+            pubKey={mockPubKey}
+            blockData={mockBlockData as TendermintBlocksResponse}
+          />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(
+      getByText('Awaiting Block Explorer transaction details')
+    ).toBeInTheDocument();
+  });
+
+  it('should display awaiting message when liquidityProvisionSubmission is undefined', () => {
+    const { getByText } = render(
+      <MockedProvider>
+        <MemoryRouter>
+          <TxDetailsLiquiditySubmission
+            txData={{ command: {} } as BlockExplorerTransactionResult}
+            pubKey={mockPubKey}
+            blockData={mockBlockData as TendermintBlocksResponse}
+          />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(
+      getByText('Awaiting Block Explorer transaction details')
+    ).toBeInTheDocument();
+  });
+});
diff --git a/apps/explorer/src/app/components/txs/details/tx-liquidity-submission.tsx b/apps/explorer/src/app/components/txs/details/tx-liquidity-submission.tsx
index cba6d8f32..90289c2f6 100644
--- a/apps/explorer/src/app/components/txs/details/tx-liquidity-submission.tsx
+++ b/apps/explorer/src/app/components/txs/details/tx-liquidity-submission.tsx
@@ -7,6 +7,7 @@ import { TableCell, TableRow, TableWithTbody } from '../../table';
 import type { components } from '../../../../types/explorer';
 import { LiquidityProvisionDetails } from './liquidity-provision/liquidity-provision-details';
 import PriceInMarket from '../../price-in-market/price-in-market';
+import BigNumber from 'bignumber.js';
 
 export type LiquiditySubmission =
   components['schemas']['v1LiquidityProvisionSubmission'];
@@ -33,6 +34,10 @@ export const TxDetailsLiquiditySubmission = ({
     txData.command.liquidityProvisionSubmission;
   const marketId: string = submission.marketId || '-';
 
+  const fee = submission.fee
+    ? new BigNumber(submission.fee).times(100).toString()
+    : '-';
+
   return (
     <>
       <TableWithTbody className="mb-8" allowWrap={true}>
@@ -62,7 +67,7 @@ export const TxDetailsLiquiditySubmission = ({
         {submission.fee ? (
           <TableRow modifier="bordered">
             <TableCell>{t('Fee')}</TableCell>
-            <TableCell>{submission.fee}%</TableCell>
+            <TableCell>{fee}%</TableCell>
           </TableRow>
         ) : null}
       </TableWithTbody>