fix(accounts): show breakdown in view as user mode (#3021)

2023-02-28 12:21:57 -05:00 · 2023-02-28 12:21:57 -05:00 · cc6ea6176a
commit cc6ea6176a
parent 6b280d8a70
10 changed files with 77 additions and 38 deletions
--- a/apps/explorer/src/app/app.tsx
+++ b/apps/explorer/src/app/app.tsx
@ -40,9 +40,9 @@ function App() {
      <NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
        <AnnouncementBanner>
          <div className="font-alpha calt uppercase text-center text-lg text-white">
-            <span className="pr-4">Mainnet sim 2 coming in March!</span>
+            <span className="pr-4">Mainnet sim 2 is live!</span>
            <ExternalLink href="https://fairground.wtf/">
-              Learn more
+              Come help stress test the network
            </ExternalLink>
          </div>
        </AnnouncementBanner>
--- a/apps/token/src/components/page-templates/template-sidebar.tsx
+++ b/apps/token/src/components/page-templates/template-sidebar.tsx
@ -21,8 +21,10 @@ export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
    <>
      <AnnouncementBanner>
        <div className="font-alpha calt uppercase text-center text-lg text-white">
-          <span className="pr-4">Mainnet sim 2 coming in March!</span>
-          <ExternalLink href="https://fairground.wtf/">Learn more</ExternalLink>
+          <span className="pr-4">Mainnet sim 2 is live!</span>
+          <ExternalLink href="https://fairground.wtf/">
+            Come help stress test the network
+          </ExternalLink>
        </div>
      </AnnouncementBanner>
      <Nav navbarTheme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} />
--- a/apps/trading-e2e/src/integration/market-info.cy.ts
+++ b/apps/trading-e2e/src/integration/market-info.cy.ts
@ -125,9 +125,9 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
    validateMarketDataRow(1, 'Long', '0.008508132993273576');
  });

-  it('price monitoring trigger displayed', () => {
+  it('price monitoring bounds displayed', () => {
    cy.getByTestId(marketTitle).contains('Price monitoring bounds 1').click();
-    cy.get('p.col-span-1').contains('100% probability of trading');
+    cy.get('p.col-span-1').contains('99.99999% probability price bounds');
    cy.get('p.col-span-1').contains('Within 43,200 seconds');
    validateMarketDataRow(0, 'Highest Price', '7.97323 ');
    validateMarketDataRow(1, 'Lowest Price', '6.54701 ');
--- a/apps/trading/components/banner/banner.tsx
+++ b/apps/trading/components/banner/banner.tsx
@ -29,7 +29,7 @@ export const Banner = () => {
          <Icon name="cross" className="w-6 h-6" ariaLabel="dismiss" />
        </button>
        <div>
-          <span className="pr-4">Mainnet sim 2 coming in March!</span>
+          <span className="pr-4">Mainnet sim 2 is live!</span>
          <ExternalLink href="https://fairground.wtf/">Learn more</ExternalLink>
        </div>
      </div>
--- a/libs/accounts/src/lib/accounts-table.spec.tsx
+++ b/libs/accounts/src/lib/accounts-table.spec.tsx
@ -68,6 +68,32 @@ describe('AccountsTable', () => {
      '1,256.00',
      'Breakdown',
      'Deposit',
+      'Withdraw',
+    ];
+    cells.forEach((cell, i) => {
+      expect(cell).toHaveTextContent(expectedValues[i]);
+    });
+    const rows = await screen.findAllByRole('row');
+    expect(rows.length).toBe(6);
+  });
+
+  it('should apply correct formatting in view as user mode', async () => {
+    await act(async () => {
+      render(
+        <AccountTable
+          rowData={singleRowData}
+          onClickAsset={() => null}
+          isReadOnly={true}
+        />
+      );
+    });
+    const cells = await screen.findAllByRole('gridcell');
+    const expectedValues = [
+      'tBTC',
+      '1,256.00',
+      '1,256.00',
+      '1,256.00',
+      'Breakdown',
    ];
    cells.forEach((cell, i) => {
      expect(cell).toHaveTextContent(expectedValues[i]);
--- a/libs/accounts/src/lib/accounts-table.tsx
+++ b/libs/accounts/src/lib/accounts-table.tsx
@ -154,7 +154,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
            }
            maxWidth={300}
          />
-          {!props.isReadOnly && (
+          {
            <AgGridColumn
              colId="breakdown"
              headerName=""
@ -193,29 +193,33 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
                        {t('Breakdown')}
                      </ButtonLink>
                      <span className="mx-1" />
-                      <ButtonLink
-                        data-testid="deposit"
-                        onClick={() => {
-                          onClickDeposit && onClickDeposit(data.asset.id);
-                        }}
-                      >
-                        {t('Deposit')}
-                      </ButtonLink>
+                      {!props.isReadOnly && (
+                        <ButtonLink
+                          data-testid="deposit"
+                          onClick={() => {
+                            onClickDeposit && onClickDeposit(data.asset.id);
+                          }}
+                        >
+                          {t('Deposit')}
+                        </ButtonLink>
+                      )}
                      <span className="mx-1" />
-                      <ButtonLink
-                        data-testid="withdraw"
-                        onClick={() =>
-                          onClickWithdraw && onClickWithdraw(data.asset.id)
-                        }
-                      >
-                        {t('Withdraw')}
-                      </ButtonLink>
+                      {!props.isReadOnly && (
+                        <ButtonLink
+                          data-testid="withdraw"
+                          onClick={() =>
+                            onClickWithdraw && onClickWithdraw(data.asset.id)
+                          }
+                        >
+                          {t('Withdraw')}
+                        </ButtonLink>
+                      )}
                    </>
                  );
                }
              }}
            />
-          )}
+          }
        </AgGrid>
        <Dialog size="medium" open={openBreakdown} onChange={setOpenBreakdown}>
          <div className="h-[35vh] w-full m-auto flex flex-col">
--- a/libs/fills/src/lib/fills-table.tsx
+++ b/libs/fills/src/lib/fills-table.tsx
@ -267,24 +267,24 @@ const FeesBreakdownTooltip = ({
      data-testid="fee-breakdown-tooltip"
      className="max-w-sm border border-neutral-600 bg-neutral-100 dark:bg-neutral-800 px-4 py-2 z-20 rounded text-sm break-word text-black dark:text-white"
    >
-      <dl className="grid grid-cols-2 gap-x-2">
-        <dt>{t('Infrastructure fee')}</dt>
-        <dd className="text-right">
+      <dl className="grid grid-cols-3 gap-x-1">
+        <dt className="col-span-1">{t('Infrastructure fee')}</dt>
+        <dd className="text-right col-span-2">
          {addDecimalsFormatNumber(feesObj.infrastructureFee, asset.decimals)}{' '}
          {asset.symbol}
        </dd>
-        <dt>{t('Liquidity fee')}</dt>
-        <dd className="text-right">
+        <dt className="col-span-1">{t('Liquidity fee')}</dt>
+        <dd className="text-right col-span-2">
          {addDecimalsFormatNumber(feesObj.liquidityFee, asset.decimals)}{' '}
          {asset.symbol}
        </dd>
-        <dt>{t('Maker fee')}</dt>
-        <dd className="text-right">
+        <dt className="col-span-1">{t('Maker fee')}</dt>
+        <dd className="text-right col-span-2">
          {addDecimalsFormatNumber(feesObj.makerFee, asset.decimals)}{' '}
          {asset.symbol}
        </dd>
-        <dt>{t('Total fees')}</dt>
-        <dd className="text-right">{valueFormatted}</dd>
+        <dt className="col-span-1">{t('Total fees')}</dt>
+        <dd className="text-right col-span-2">{valueFormatted}</dd>
      </dl>
    </div>
  );
--- a/libs/market-info/src/components/market-info/info-market.tsx
+++ b/libs/market-info/src/components/market-info/info-market.tsx
@ -317,8 +317,10 @@ export const Info = ({ market, onSelect }: InfoProps) => {
            <div className="text-xs">
              <div className="grid grid-cols-2 text-xs mb-4">
                <p className="col-span-1">
-                  {t('%s% probability of trading', [
-                    formatNumber(trigger.probability * 100),
+                  {t('%s probability price bounds', [
+                    formatNumberPercentage(
+                      new BigNumber(trigger.probability).times(100)
+                    ),
                  ])}
                </p>
                <p className="col-span-1 text-right">
@ -338,6 +340,11 @@ export const Info = ({ market, onSelect }: InfoProps) => {
                  />
                )}
              </div>
+              <p className="mt-4">
+                {t('Results in %s seconds auction if breached', [
+                  trigger.auctionExtensionSecs.toString(),
+                ])}
+              </p>
            </div>
          ),
        };
--- a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx
+++ b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx
@ -166,7 +166,7 @@ export const OrderListManager = ({
            />
          </div>
        </div>
-        {hasActiveOrder && (
+        {!isReadOnly && hasActiveOrder && (
          <div className="w-full dark:bg-black bg-white absolute bottom-0 h-auto flex justify-end px-[11px] py-2">
            <Button
              size="sm"
--- a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
@ -73,7 +73,7 @@ export const DropdownMenuContent = forwardRef<
  <DropdownMenuPrimitive.Content
    {...contentProps}
    ref={forwardedRef}
-    className="min-w-[290px] bg-neutral-200 dark:bg-white p-2 rounded"
+    className="min-w-[290px] bg-neutral-200 dark:bg-white p-2 rounded text-black"
    align="start"
    sideOffset={10}
  />