fix(explorer): liquidity provision fee percentage (#4183)

Co-authored-by: Edd <edd@vega.xyz>

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();
+  });
+});

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>

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();
+  });
+});

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>