chore: update package.json node version

a previous PR updated the node version for our actions to 16.15.1

so the build output is consumable by the website project

.github/workflows/cypress-live-test.yml

@@ -18,6 +18,12 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
 
+      - name: Use Node.js 16
+        id: Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.15.1
+
       - name: Run Cypress tests
         uses: cypress-io/github-action@v4
         with:

.github/workflows/generate-queries.yml

@@ -19,7 +19,7 @@ jobs:
         id: Node
         uses: actions/setup-node@v2
         with:
-          node-version: 16.14.0
+          node-version: 16.15.1
       - name: Install root dependencies
         run: yarn install
       - name: Generate queries

.github/workflows/lint_pr.yml

@@ -16,7 +16,7 @@ jobs:
         id: Node
         uses: actions/setup-node@v2
         with:
-          node-version: 16.14.0
+          node-version: 16.15.1
       - name: Install root dependencies
         run: yarn install
       - name: Check PR title

.github/workflows/process-tranches.yml

@@ -19,7 +19,7 @@ jobs:
         id: Node
         uses: actions/setup-node@v2
         with:
-          node-version: 16.14.0
+          node-version: 16.15.1
       - name: Install root dependencies
         run: yarn install
       - name: Generate queries

.github/workflows/publish-npm.yml

@@ -0,0 +1,47 @@
+name: Publish libs to npm
+
+on:
+  workflow_dispatch:
+    inputs:
+      project:
+        description: 'Monorepo project to publish'
+        required: true
+        type: choice
+        options:
+          - ui-toolkit
+          - react-helpers
+          - tailwindcss-config
+          - types
+
+jobs:
+  publish:
+    name: Build & Publish - Tag
+    runs-on: ubuntu-latest
+    permissions:
+      contents: 'read'
+      actions: 'read'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: User Node.js 16
+        id: Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.15.1
+      - name: Restore node_modules from cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: node_modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build project
+        run: yarn nx build ${{inputs.project}}
+      - name: Publish project to @vegaprotocol
+        uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          package: dist/libs/${{inputs.project}}/package.json
+          access: public

.github/workflows/test.yml

@@ -26,7 +26,7 @@ jobs:
         id: Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.14.0
+          node-version: 16.15.1
       - name: Restore node_modules from cache
         uses: actions/cache@v3
         with:

.nvmrc

@@ -1 +1 @@
-16.14.0
+16.15.1

apps/explorer-e2e/src/integration/asset.cy.js

@@ -4,15 +4,6 @@ context('Asset page', { tags: '@regression' }, () => {
   describe('Verify elements on page', () => {
     before('Navigate to assets page', () => {
       cy.visit('/assets');
-
-      // Check we have enough enough assets
-      cy.getAssets().then((assets) => {
-        assert.isAtLeast(
-          Object.keys(assets).length,
-          5,
-          'Ensuring we have at least 5 assets to test'
-        );
-      });
     });
 
     it('should be able to see full assets list', () => {
@@ -40,7 +31,7 @@ context('Asset page', { tags: '@regression' }, () => {
       });
     });
 
-    it('should open details dialog when clicked on "View details"', () => {
+    it('should open details page when clicked on "View details"', () => {
       cy.getAssets().then((assets) => {
         Object.values(assets).forEach((asset) => {
           cy.get(`[row-id="${asset.id}"] [col-id="actions"] button`)
@@ -49,8 +40,8 @@ context('Asset page', { tags: '@regression' }, () => {
           cy.get(`[row-id="${asset.id}"] [col-id="actions"] button`)
             .eq(0)
             .click();
-          cy.getByTestId('dialog-content').should('be.visible');
-          cy.getByTestId('dialog-close').click();
+          cy.getByTestId('asset-header').should('have.text', asset.name);
+          cy.go('back');
         });
       });
     });

apps/explorer/src/app/components/assets/assets-table.spec.tsx

@@ -1,22 +1,35 @@
 import { render, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { assetsList } from '../../mocks/assets';
 import { AssetsTable } from './assets-table';
 
 describe('AssetsTable', () => {
   it('shows loading message on first render', async () => {
-    const res = render(<AssetsTable data={null} />);
+    const res = render(
+      <MemoryRouter>
+        <AssetsTable data={null} />
+      </MemoryRouter>
+    );
     expect(await res.findByText('Loading...')).toBeInTheDocument();
   });
 
   it('shows no data message if no assets found', async () => {
-    const res = render(<AssetsTable data={[]} />);
+    const res = render(
+      <MemoryRouter>
+        <AssetsTable data={[]} />
+      </MemoryRouter>
+    );
     expect(
       await res.findByText('This chain has no assets')
     ).toBeInTheDocument();
   });
 
   it('shows a table/list with all the assets', async () => {
-    const res = render(<AssetsTable data={assetsList} />);
+    const res = render(
+      <MemoryRouter>
+        <AssetsTable data={assetsList} />
+      </MemoryRouter>
+    );
     await waitFor(() => {
       const rowA1 = res.container.querySelector('[row-id="123"]');
       expect(rowA1).toBeInTheDocument();

apps/explorer/src/app/components/assets/assets-table.tsx

@@ -1,5 +1,4 @@
 import type { AssetFieldsFragment } from '@vegaprotocol/assets';
-import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { AssetTypeMapping, AssetStatusMapping } from '@vegaprotocol/assets';
 import { t } from '@vegaprotocol/react-helpers';
 import type { VegaICellRendererParams } from '@vegaprotocol/ui-toolkit';
@@ -9,15 +8,14 @@ import { AgGridColumn } from 'ag-grid-react';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import { useRef, useLayoutEffect } from 'react';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
+import { useNavigate } from 'react-router-dom';
+import type { RowClickedEvent } from 'ag-grid-community';
 
 type AssetsTableProps = {
   data: AssetFieldsFragment[] | null;
 };
 export const AssetsTable = ({ data }: AssetsTableProps) => {
-  const openAssetDetailsDialog = useAssetDetailsDialogStore(
-    (state) => state.open
-  );
-
+  const navigate = useNavigate();
   const ref = useRef<AgGridReact>(null);
   const showColumnsOnDesktop = () => {
     ref.current?.columnApi.setColumnsVisible(
@@ -49,17 +47,23 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
         autoHeight: true,
       }}
       suppressCellFocus={true}
-      onGridReady={() => {
-        showColumnsOnDesktop();
+      onRowClicked={({ data }: RowClickedEvent) => {
+        navigate(data.id);
       }}
     >
       <AgGridColumn headerName={t('Symbol')} field="symbol" />
       <AgGridColumn headerName={t('Name')} field="name" />
-      <AgGridColumn flex="2" headerName={t('ID')} field="id" />
+      <AgGridColumn
+        flex="2"
+        headerName={t('ID')}
+        field="id"
+        hide={window.innerWidth < BREAKPOINT_MD}
+      />
       <AgGridColumn
         colId="type"
         headerName={t('Type')}
         field="source.__typename"
+        hide={window.innerWidth < BREAKPOINT_MD}
         valueFormatter={({ value }: { value?: string }) =>
           value && AssetTypeMapping[value].value
         }
@@ -67,6 +71,7 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
       <AgGridColumn
         headerName={t('Status')}
         field="status"
+        hide={window.innerWidth < BREAKPOINT_MD}
         valueFormatter={({ value }: { value?: string }) =>
           value && AssetStatusMapping[value].value
         }
@@ -83,28 +88,13 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
           value,
         }: VegaICellRendererParams<AssetFieldsFragment, 'id'>) =>
           value ? (
-            <div className="pb-1">
-              <ButtonLink
-                onClick={(e) => {
-                  openAssetDetailsDialog(value, e.target as HTMLElement);
-                }}
-              >
-                {t('View details')}
-              </ButtonLink>{' '}
-              <span className="max-md:hidden">
-                <ButtonLink
-                  onClick={(e) => {
-                    openAssetDetailsDialog(
-                      value,
-                      e.target as HTMLElement,
-                      true
-                    );
-                  }}
-                >
-                  {t('View JSON')}
-                </ButtonLink>
-              </span>
-            </div>
+            <ButtonLink
+              onClick={(e) => {
+                navigate(value);
+              }}
+            >
+              {t('View details')}
+            </ButtonLink>
           ) : (
             ''
           )

apps/explorer/src/app/components/epoch-overview/Epoch.graphql

@@ -0,0 +1,50 @@
+query ExplorerEpoch($id: ID!) {
+  epoch(id: $id) {
+    id
+    timestamps {
+      start
+      end
+      firstBlock
+      lastBlock
+    }
+  }
+}
+
+query ExplorerFutureEpoch {
+  networkParameter(key: "validators.epoch.length") {
+    value
+  }
+
+  epoch {
+    id
+    timestamps {
+      start
+    }
+  }
+}
+
+# query ExplorerEpoch($id: ID!) {
+#
+##### This could be useful for calculating roughly when a future epoch will
+##### occur, but epoch not exist results in a total error
+#  networkParameter(key: "validators.epoch.length") {
+#    value
+# }
+#
+##### This could be useful for relating where we are in time, but as above
+##### the total failure caused by epoch(id) not existing
+##### means this is useful
+#  currentEpoch: epoch {
+#    id
+#  }
+#
+#  epoch(id: $id) {
+#    id
+#    timestamps {
+#      start
+#      end
+#      firstBlock
+#      lastBlock
+#    }
+#  }
+#}

apps/explorer/src/app/components/epoch-overview/__generated__/Epoch.ts

@@ -0,0 +1,99 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ExplorerEpochQueryVariables = Types.Exact<{
+  id: Types.Scalars['ID'];
+}>;
+
+
+export type ExplorerEpochQuery = { __typename?: 'Query', epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null, firstBlock: string, lastBlock?: string | null } } };
+
+export type ExplorerFutureEpochQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type ExplorerFutureEpochQuery = { __typename?: 'Query', networkParameter?: { __typename?: 'NetworkParameter', value: string } | null, epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null } } };
+
+
+export const ExplorerEpochDocument = gql`
+    query ExplorerEpoch($id: ID!) {
+  epoch(id: $id) {
+    id
+    timestamps {
+      start
+      end
+      firstBlock
+      lastBlock
+    }
+  }
+}
+    `;
+
+/**
+ * __useExplorerEpochQuery__
+ *
+ * To run a query within a React component, call `useExplorerEpochQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerEpochQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useExplorerEpochQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useExplorerEpochQuery(baseOptions: Apollo.QueryHookOptions<ExplorerEpochQuery, ExplorerEpochQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerEpochQuery, ExplorerEpochQueryVariables>(ExplorerEpochDocument, options);
+      }
+export function useExplorerEpochLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerEpochQuery, ExplorerEpochQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerEpochQuery, ExplorerEpochQueryVariables>(ExplorerEpochDocument, options);
+        }
+export type ExplorerEpochQueryHookResult = ReturnType<typeof useExplorerEpochQuery>;
+export type ExplorerEpochLazyQueryHookResult = ReturnType<typeof useExplorerEpochLazyQuery>;
+export type ExplorerEpochQueryResult = Apollo.QueryResult<ExplorerEpochQuery, ExplorerEpochQueryVariables>;
+export const ExplorerFutureEpochDocument = gql`
+    query ExplorerFutureEpoch {
+  networkParameter(key: "validators.epoch.length") {
+    value
+  }
+  epoch {
+    id
+    timestamps {
+      start
+    }
+  }
+}
+    `;
+
+/**
+ * __useExplorerFutureEpochQuery__
+ *
+ * To run a query within a React component, call `useExplorerFutureEpochQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerFutureEpochQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useExplorerFutureEpochQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useExplorerFutureEpochQuery(baseOptions?: Apollo.QueryHookOptions<ExplorerFutureEpochQuery, ExplorerFutureEpochQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerFutureEpochQuery, ExplorerFutureEpochQueryVariables>(ExplorerFutureEpochDocument, options);
+      }
+export function useExplorerFutureEpochLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerFutureEpochQuery, ExplorerFutureEpochQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerFutureEpochQuery, ExplorerFutureEpochQueryVariables>(ExplorerFutureEpochDocument, options);
+        }
+export type ExplorerFutureEpochQueryHookResult = ReturnType<typeof useExplorerFutureEpochQuery>;
+export type ExplorerFutureEpochLazyQueryHookResult = ReturnType<typeof useExplorerFutureEpochLazyQuery>;
+export type ExplorerFutureEpochQueryResult = Apollo.QueryResult<ExplorerFutureEpochQuery, ExplorerFutureEpochQueryVariables>;

apps/explorer/src/app/components/epoch-overview/epoc.spec.tsx

@@ -0,0 +1,56 @@
+import { render } from '@testing-library/react';
+import { IconForEpoch } from './epoch';
+
+const THE_PAST = 'Monday, 17 February 2022 11:44:09';
+const THE_FUTURE = 'Monday, 17 February 3023 11:44:09';
+
+describe('IconForEpoch', () => {
+  it('Handles malformed dates', () => {
+    const start = 'This is n0t a d4te';
+    const end = '📅';
+    const screen = render(<IconForEpoch start={start} end={end} />);
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'aria-label',
+      'calendar icon'
+    );
+  });
+
+  it('defaults to a calendar icon', () => {
+    const start = null as unknown as string;
+    const end = null as unknown as string;
+    const screen = render(<IconForEpoch start={start} end={end} />);
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'aria-label',
+      'calendar icon'
+    );
+  });
+
+  it('if start and end are both in the future, stick with calendar', () => {
+    const screen = render(<IconForEpoch start={THE_FUTURE} end={THE_FUTURE} />);
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'aria-label',
+      'calendar icon'
+    );
+  });
+
+  it('if start is in the past and end is in the future, this is currently active', () => {
+    const screen = render(<IconForEpoch start={THE_PAST} end={THE_FUTURE} />);
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'aria-label',
+      'circle icon'
+    );
+  });
+
+  it('if start and end are in the paste, this is done', () => {
+    const screen = render(<IconForEpoch start={THE_PAST} end={THE_PAST} />);
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'aria-label',
+      'tick-circle icon'
+    );
+  });
+});

apps/explorer/src/app/components/epoch-overview/epoch-missing.spec.tsx

@@ -0,0 +1,125 @@
+import { MockedProvider } from '@apollo/client/testing';
+import { render } from '@testing-library/react';
+import EpochMissingOverview, { calculateEpochData } from './epoch-missing';
+import { getSecondsFromInterval } from '@vegaprotocol/react-helpers';
+const START_DATE_PAST = 'Monday, 17 February 2022 11:44:09';
+
+describe('getSecondsFromInterval', () => {
+  it('returns 0 for bad data', () => {
+    expect(getSecondsFromInterval(null as unknown as string)).toEqual(0);
+    expect(getSecondsFromInterval('')).toEqual(0);
+    expect(getSecondsFromInterval('🧙')).toEqual(0);
+    expect(getSecondsFromInterval(2 as unknown as string)).toEqual(0);
+  });
+
+  it('parses out months from a capital M', () => {
+    expect(getSecondsFromInterval('2M')).toEqual(5184000);
+  });
+
+  it('parses out days from a capital D', () => {
+    expect(getSecondsFromInterval('1D')).toEqual(86400);
+  });
+
+  it('parses out hours from a lower case h', () => {
+    expect(getSecondsFromInterval('11h')).toEqual(39600);
+  });
+
+  it('parses out minutes from a lower case m', () => {
+    expect(getSecondsFromInterval('10m')).toEqual(600);
+  });
+
+  it('parses out seconds from a lower case s', () => {
+    expect(getSecondsFromInterval('99s')).toEqual(99);
+  });
+
+  it('parses complex examples', () => {
+    expect(getSecondsFromInterval('24h')).toEqual(86400);
+    expect(getSecondsFromInterval('1h30m')).toEqual(5400);
+    expect(getSecondsFromInterval('1D1h30m1s')).toEqual(91801);
+  });
+});
+
+describe('calculateEpochData', () => {
+  it('Handles bad data', () => {
+    const currentEpochId = null as unknown as string;
+    const missingEpochId = null as unknown as string;
+    const epochStart = null as unknown as string;
+    const epochLength = null as unknown as string;
+    const res = calculateEpochData(
+      currentEpochId,
+      missingEpochId,
+      epochStart,
+      epochLength
+    );
+
+    expect(res).toHaveProperty('label', 'Missing data');
+    expect(res).toHaveProperty('isInFuture', false);
+  });
+
+  it('Calculates that a bigger epoch number is in the future from basic data', () => {
+    const currentEpochId = '10';
+    const missingEpochId = '20';
+    const epochStart = '';
+    const epochLength = '';
+    const res = calculateEpochData(
+      currentEpochId,
+      missingEpochId,
+      epochStart,
+      epochLength
+    );
+
+    expect(res).toHaveProperty('isInFuture', true);
+  });
+
+  it('If it has an epoch length and a start time, it provides an estimate', () => {
+    const currentEpochId = '10';
+    const missingEpochId = '20';
+    const epochStart = START_DATE_PAST;
+    const epochLength = '1s';
+    const res = calculateEpochData(
+      currentEpochId,
+      missingEpochId,
+      epochStart,
+      epochLength
+    );
+
+    // 'Estimate: 17/02/2022, 11:44:19 - in less than a minute')
+    expect(res).toHaveProperty('label');
+    expect(res.label).toMatch(/^Estimate/);
+    expect(res.label).toMatch(/in less than a minute$/);
+  });
+
+  it('Provide decent string for past', () => {
+    const currentEpochId = '20';
+    const missingEpochId = '10';
+    const epochStart = START_DATE_PAST;
+    const epochLength = '1s';
+    const res = calculateEpochData(
+      currentEpochId,
+      missingEpochId,
+      epochStart,
+      epochLength
+    );
+
+    // 'Estimate: 17/02/2022, 11:44:19 - in less than a minute')
+    expect(res).toHaveProperty('label');
+    expect(res.label).toMatch(/^Estimate/);
+    expect(res.label).toMatch(/less than a minute ago$/);
+  });
+});
+
+describe('EpochMissingOverview', () => {
+  function renderComponent(missingEpochId: string) {
+    return render(
+      <MockedProvider>
+        <EpochMissingOverview missingEpochId={missingEpochId} />
+      </MockedProvider>
+    );
+  }
+
+  it('renders a - if no id is provided', () => {
+    const n = null as unknown as string;
+    const screen = renderComponent(n);
+    expect(screen.getByTestId('empty')).toBeInTheDocument();
+  });
+});

apps/explorer/src/app/components/epoch-overview/epoch-missing.tsx

@@ -0,0 +1,111 @@
+import { useExplorerFutureEpochQuery } from './__generated__/Epoch';
+
+import addSeconds from 'date-fns/addSeconds';
+import formatDistance from 'date-fns/formatDistance';
+import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
+import isFuture from 'date-fns/isFuture';
+import { isValidDate } from '@vegaprotocol/react-helpers';
+import { getSecondsFromInterval } from '@vegaprotocol/react-helpers';
+
+export type EpochMissingOverviewProps = {
+  missingEpochId?: string;
+};
+
+/**
+ * Renders a set of details for an epoch that has no representation in the
+ * data node. This is primarily for one of two reasons:
+ *
+ * 1. The epoch hasn't happened yet
+ * 2. The epoch happened before a snapshot, and thus the details don't exist
+ *
+ * This component is used when the API has responded with no data for an epoch
+ * by ID, so we already know that we can't display start time/block etc.
+ *
+ * We can detect 1 if the epoch is a higher number than the current epoch
+ * We can detect 2 if the epoch is in the past, but we still get no response.
+ */
+const EpochMissingOverview = ({
+  missingEpochId,
+}: EpochMissingOverviewProps) => {
+  const { data, error, loading } = useExplorerFutureEpochQuery();
+
+  // This should not happen, but it's easily handled
+  if (!missingEpochId) {
+    return <span data-testid="empty">-</span>;
+  }
+
+  // No data should also not happen - we've requested the current epoch. This
+  // could happen at chain restart, but shouldn't. If it does, fallback.
+  if (!data || loading || error) {
+    return <span data-testid="empty">{missingEpochId}</span>;
+  }
+
+  // If we have enough information to predict a future or past block time, let's do it
+  if (
+    !missingEpochId ||
+    !data.epoch.id ||
+    !data.epoch.timestamps.start ||
+    !data?.networkParameter?.value
+  ) {
+    return <span data-testid="empty">{missingEpochId}</span>;
+  }
+
+  const { label, isInFuture } = calculateEpochData(
+    data.epoch.id,
+    missingEpochId,
+    data.epoch.timestamps.start,
+    data.networkParameter.value
+  );
+
+  return (
+    <Tooltip description={<p className="text-xs m-2">{label}</p>}>
+      <p>
+        {isInFuture ? (
+          <Icon name="calendar" className="mr-1" />
+        ) : (
+          <Icon name="outdated" className="mr-1" />
+        )}
+        {missingEpochId}
+      </p>
+    </Tooltip>
+  );
+};
+
+export function calculateEpochData(
+  currentEpochId: string,
+  missingEpochId: string,
+  epochStart: string,
+  epochLength: string
+) {
+  // Blank string will be return 0 seconds from getSecondsFromInterval
+  const epochLengthInSeconds = getSecondsFromInterval(epochLength);
+
+  if (!epochStart || !epochLength) {
+    // Let's just take a guess
+    return {
+      label: 'Missing data',
+      isInFuture: parseInt(missingEpochId) > parseInt(currentEpochId),
+    };
+  }
+
+  const startFrom = new Date(epochStart);
+
+  const diff = parseInt(missingEpochId) - parseInt(currentEpochId);
+  const futureDate = addSeconds(startFrom, diff * epochLengthInSeconds);
+
+  const label =
+    isValidDate(futureDate) && isValidDate(startFrom)
+      ? `Estimate: ${futureDate.toLocaleString()} - ${formatDistance(
+          futureDate,
+          startFrom,
+          { addSuffix: true }
+        )}`
+      : 'Missing data';
+
+  return {
+    label,
+    isInFuture: isFuture(futureDate),
+  };
+}
+
+export default EpochMissingOverview;

apps/explorer/src/app/components/epoch-overview/epoch.tsx

@@ -0,0 +1,127 @@
+import { useExplorerEpochQuery } from './__generated__/Epoch';
+
+import { t } from '@vegaprotocol/react-helpers';
+import { BlockLink } from '../links';
+import { Time } from '../time';
+import { TimeAgo } from '../time-ago';
+import EpochMissingOverview from './epoch-missing';
+import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
+import type { IconProps } from '@vegaprotocol/ui-toolkit';
+import isPast from 'date-fns/isPast';
+
+const borderClass =
+  'border-solid border-2 border-vega-dark-200 border-collapse';
+
+export type EpochOverviewProps = {
+  id?: string;
+};
+
+/**
+ * Displays detailed information about an epoch, given an ID. This
+ * works for past epochs and current epochs - future epochs, and a
+ * few other situations (see epoch-missing) will not return us
+ * enough information to render this.
+ *
+ * The details are hidden in a tooltip, behind the epoch number
+ */
+const EpochOverview = ({ id }: EpochOverviewProps) => {
+  const { data, error, loading } = useExplorerEpochQuery({
+    variables: { id: id || '' },
+  });
+
+  const ti = data?.epoch.timestamps;
+  if (
+    error?.message &&
+    error.message.includes('no resource corresponding to this id')
+  ) {
+    return <EpochMissingOverview missingEpochId={id} />;
+  }
+
+  if (!ti || loading || error) {
+    return <span>{id}</span>;
+  }
+
+  const description = (
+    <table className="text-xs m-2">
+      <thead>
+        <tr>
+          <th></th>
+          <th className={`text-center ${borderClass}`}>{t('Block')}</th>
+          <th className={`text-center ${borderClass}`}>{t('Time')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th className={`px-2 ${borderClass}`}>{t('Start')}</th>
+          <td className={`px-2 ${borderClass}`}>
+            {ti.firstBlock ? <BlockLink height={ti.firstBlock} /> : '-'}
+          </td>
+          <td className={`px-2 ${borderClass}`}>
+            <Time date={ti.start} />
+            <br />
+            <TimeAgo date={ti.start} />
+          </td>
+        </tr>
+        <tr>
+          <th className={`px-2 ${borderClass}`}>{t('End')}</th>
+          <td className={`px-2 ${borderClass}`}>
+            {ti.lastBlock ? (
+              <BlockLink height={ti.lastBlock} />
+            ) : (
+              t('In progress')
+            )}
+          </td>
+          <td className={`px-2 ${borderClass}`}>
+            {ti.end ? (
+              <>
+                <Time date={ti.end} />
+                <br />
+                <TimeAgo date={ti.end} />
+              </>
+            ) : (
+              <span>{t('-')}</span>
+            )}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+
+  return (
+    <Tooltip description={description}>
+      <p>
+        <IconForEpoch start={ti.start} end={ti.end} />
+        {id}
+      </p>
+    </Tooltip>
+  );
+};
+
+export type IconForEpochProps = {
+  start: string;
+  end: string;
+};
+
+/**
+ * Chooses an icon to display next to the epoch number, representing
+ * when the epoch is relative to now (i.e. not yet started, started,
+ * finished)
+ */
+export function IconForEpoch({ start, end }: IconForEpochProps) {
+  const startHasPassed = start ? isPast(new Date(start)) : false;
+  const endHasPassed = end ? isPast(new Date(end)) : false;
+
+  let i: IconProps['name'] = 'calendar';
+
+  if (!startHasPassed && !endHasPassed) {
+    i = 'calendar';
+  } else if (startHasPassed && !endHasPassed) {
+    i = 'circle';
+  } else if (startHasPassed && endHasPassed) {
+    i = 'tick-circle';
+  }
+
+  return <Icon name={i} className="mr-2" />;
+}
+
+export default EpochOverview;

apps/explorer/src/app/components/footer/footer.tsx

@@ -1,17 +1,24 @@
 import { NodeSwitcherDialog, useEnvironment } from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/react-helpers';
-import { Link } from '@vegaprotocol/ui-toolkit';
-import { useState } from 'react';
+import { t, useScreenDimensions } from '@vegaprotocol/react-helpers';
+import { ExternalLink, Link } from '@vegaprotocol/ui-toolkit';
+import { useMemo, useState } from 'react';
+import { ENV } from '../../config/env';
 
 export const Footer = () => {
   const { VEGA_URL, GIT_COMMIT_HASH, GIT_ORIGIN_URL } = useEnvironment();
   const [nodeSwitcherOpen, setNodeSwitcherOpen] = useState(false);
+  const { screenSize } = useScreenDimensions();
+  const showFullFeedbackLabel = useMemo(
+    () => ['lg', 'xl'].includes(screenSize),
+    [screenSize]
+  );
+
   return (
     <>
       <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-xs md:text-md md:flex md:col-span-2 px-4 py-2 gap-4 border-t border-neutral-700 dark:border-neutral-300">
         <div className="flex justify-between gap-2 align-middle">
-          <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
-            {GIT_COMMIT_HASH && (
+          {GIT_COMMIT_HASH && (
+            <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
               <p data-testid="git-commit-hash">
                 {t('Version')}:{' '}
                 <Link
@@ -25,15 +32,21 @@ export const Footer = () => {
                   {GIT_COMMIT_HASH}
                 </Link>
               </p>
-            )}
-          </div>
+            </div>
+          )}
 
-          <div className="flex pl-2 content-center">
+          <div className="content-center flex pl-2 md:border-r border-neutral-700 dark:border-neutral-300 pr-4">
             {VEGA_URL && <NodeUrl url={VEGA_URL} />}
             <Link className="ml-2" onClick={() => setNodeSwitcherOpen(true)}>
               {t('Change')}
             </Link>
           </div>
+
+          <div className="flex pl-2 content-center">
+            <ExternalLink href={ENV.addresses.feedback}>
+              {showFullFeedbackLabel ? t('Share your feedback') : t('Feedback')}
+            </ExternalLink>
+          </div>
         </div>
       </footer>
       <NodeSwitcherDialog

apps/explorer/src/app/components/info-block/info-block.tsx

@@ -11,14 +11,14 @@ export const InfoBlock = ({ title, subtitle, tooltipInfo }: InfoBlockProps) => {
   return (
     <div className="flex flex-col text-center	">
       <h3 className="text-4xl">{title}</h3>
-      <p className="text-zinc-800 dark:text-zinc-300">
+      <p className="text-vega-dark-100 dark:text-vega-light-200">
         {subtitle}
         {tooltipInfo ? (
           <Tooltip description={tooltipInfo} align="center">
             <span>
               <Icon
                 name="info-sign"
-                className="ml-2 text-zinc-400 dark:text-zinc-600"
+                className="ml-2 text-vega-light-300 dark:text-vega-dark-300"
               />
             </span>
           </Tooltip>

apps/explorer/src/app/components/info-panel/info-panel.tsx

@@ -44,12 +44,12 @@ export const InfoPanel = ({
                 text={id}
                 startChars={visibleChars}
                 endChars={visibleChars}
-                className="text-black dark:text-zinc-200"
+                className="text-vega-dark-100 dark:text-vega-light-200"
               />
             ) : (
               <p
                 title={id}
-                className="text-black dark:text-zinc-200 truncate ..."
+                className="text-vega-dark-100 dark:text-vega-light-200 truncate ..."
               >
                 {id}
               </p>
@@ -70,7 +70,7 @@ export const InfoPanel = ({
         </div>
         {copy && (
           <CopyWithTooltip text={id}>
-            <button className="bg-zinc-100 dark:bg-zinc-900 rounded-sm py-2 px-3">
+            <button className="bg-vega-light-100 dark:bg-vega-dark-100 rounded-sm py-2 px-3">
               <Icon name="duplicate" />
             </button>
           </CopyWithTooltip>

apps/explorer/src/app/components/links/asset-link/asset-link.tsx

@@ -5,9 +5,13 @@ import {
   useAssetDataProvider,
   useAssetDetailsDialogStore,
 } from '@vegaprotocol/assets';
+import { useNavigate } from 'react-router-dom';
+import { Routes } from '../../../routes/route-names';
 
 export type AssetLinkProps = Partial<ComponentProps<typeof ButtonLink>> & {
   assetId: string;
+  asDialog?: boolean;
+  showAssetSymbol?: boolean;
 };
 
 /**
@@ -15,17 +19,32 @@ export type AssetLinkProps = Partial<ComponentProps<typeof ButtonLink>> & {
  * with a link to the assets modal. If the name does not come back
  * it will use the ID instead.
  */
-export const AssetLink = ({ assetId, ...props }: AssetLinkProps) => {
+export const AssetLink = ({
+  assetId,
+  asDialog,
+  showAssetSymbol = false,
+  ...props
+}: AssetLinkProps) => {
   const { data: asset } = useAssetDataProvider(assetId);
 
   const open = useAssetDetailsDialogStore((state) => state.open);
-  const label = asset?.name ? asset.name : assetId;
+  const navigate = useNavigate();
+  const label = asset
+    ? showAssetSymbol
+      ? asset?.symbol
+      : asset?.name
+    : assetId;
+
   return (
     <ButtonLink
       data-testid="asset-link"
       disabled={!asset}
       onClick={(e) => {
-        open(assetId, e.target as HTMLElement);
+        if (asDialog) {
+          open(assetId, e.target as HTMLElement);
+        } else {
+          navigate(`${Routes.ASSETS}/${asset?.id}`);
+        }
       }}
       {...props}
     >

apps/explorer/src/app/components/links/market-link/market-link.tsx

@@ -48,7 +48,7 @@ const MarketLink = ({
       <Link
         className="underline"
         {...props}
-        to={`/${Routes.MARKETS}#${id}`}
+        to={`/${Routes.MARKETS}/${id}`}
         title={id}
       >
         {label}
@@ -56,7 +56,7 @@ const MarketLink = ({
     );
   } else {
     return (
-      <Link className="underline" {...props} to={`/${Routes.MARKETS}#${id}`}>
+      <Link className="underline" {...props} to={`/${Routes.MARKETS}/${id}`}>
         <Hash text={id} />
       </Link>
     );

apps/explorer/src/app/components/links/party-link/party-link.spec.tsx

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import PartyLink from './party-link';
+
+describe('PartyLink', () => {
+  it('renders Network for 000.000 party', () => {
+    const zeroes =
+      '0000000000000000000000000000000000000000000000000000000000000000';
+    const screen = render(<PartyLink id={zeroes} />);
+    expect(screen.getByText('Network')).toBeInTheDocument();
+  });
+
+  it('renders Network for network party', () => {
+    const screen = render(<PartyLink id="network" />);
+    expect(screen.getByText('Network')).toBeInTheDocument();
+  });
+
+  it('renders ID with no link for invalid party', () => {
+    const screen = render(<PartyLink id="this-party-is-not-valid" />);
+    expect(screen.getByTestId('invalid-party')).toBeInTheDocument();
+  });
+
+  it('links a valid party to the party page', () => {
+    const aValidParty =
+      '13464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6e';
+
+    const screen = render(
+      <MemoryRouter>
+        <PartyLink id={aValidParty} />
+      </MemoryRouter>
+    );
+
+    const el = screen.getByText(aValidParty);
+    expect(el).toBeInTheDocument();
+    // The text should be a link that points to the party's page
+    expect(el.parentElement?.tagName).toEqual('A');
+    expect(el.parentElement?.getAttribute('href')).toContain(aValidParty);
+  });
+});

apps/explorer/src/app/components/links/party-link/party-link.tsx

@@ -3,19 +3,47 @@ import { Link } from 'react-router-dom';
 
 import type { ComponentProps } from 'react';
 import Hash from '../hash';
+import { t } from '@vegaprotocol/react-helpers';
+import { isValidPartyId } from '../../../routes/parties/id/components/party-id-error';
+import { truncateMiddle } from '@vegaprotocol/ui-toolkit';
+
+export const SPECIAL_CASE_NETWORK_ID =
+  '0000000000000000000000000000000000000000000000000000000000000000';
+export const SPECIAL_CASE_NETWORK = 'network';
 
 export type PartyLinkProps = Partial<ComponentProps<typeof Link>> & {
   id: string;
+  truncate?: boolean;
 };
 
-const PartyLink = ({ id, ...props }: PartyLinkProps) => {
+const PartyLink = ({ id, truncate = false, ...props }: PartyLinkProps) => {
+  // Some transactions will involve the 'network' party, which is alias for  '000...000'
+  // The party page does not handle this nicely, so in this case we render the word 'Network'
+  if (id === SPECIAL_CASE_NETWORK || id === SPECIAL_CASE_NETWORK_ID) {
+    return (
+      <span className="font-mono" data-testid="network">
+        {t('Network')}
+      </span>
+    );
+  }
+
+  // If the party doesn't look correct, there's no point in linking to id. Just render
+  // the ID as it was given to us
+  if (!isValidPartyId(id)) {
+    return (
+      <span className="font-mono" data-testid="invalid-party">
+        {id}
+      </span>
+    );
+  }
+
   return (
     <Link
       className="underline font-mono"
       {...props}
       to={`/${Routes.PARTIES}/${id}`}
     >
-      <Hash text={id} />
+      <Hash text={truncate ? truncateMiddle(id) : id} />
     </Link>
   );
 };

apps/explorer/src/app/components/markets/market-details.tsx

@@ -22,8 +22,7 @@ export const MarketDetails = ({
 }: {
   market: MarketInfoNoCandlesQuery['market'];
 }) => {
-  const assetSymbol =
-    market?.tradableInstrument.instrument.product?.settlementAsset.symbol;
+  const quoteUnit = market?.tradableInstrument.instrument.product.quoteName;
   const assetId = useMemo(
     () => market?.tradableInstrument.instrument.product?.settlementAsset.id,
     [market]
@@ -39,6 +38,10 @@ export const MarketDetails = ({
   const assetDecimals =
     market.tradableInstrument.instrument.product.settlementAsset.decimals;
 
+  const liquidityPriceRange = formatNumberPercentage(
+    new BigNumber(market.lpPriceRange).times(100)
+  );
+
   const panels = [
     {
       title: t('Key details'),
@@ -179,32 +182,41 @@ export const MarketDetails = ({
     {
       title: t('Liquidity price range'),
       content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={{
-            liquidityPriceRange: formatNumberPercentage(
-              new BigNumber(market.lpPriceRange).times(100)
-            ),
-            LPVolumeMin:
-              market.data?.midPrice &&
-              `${addDecimalsFormatNumber(
-                new BigNumber(1)
-                  .minus(market.lpPriceRange)
-                  .times(market.data.midPrice)
-                  .toString(),
-                market.decimalPlaces
-              )} ${assetSymbol}`,
-            LPVolumeMax:
-              market.data?.midPrice &&
-              `${addDecimalsFormatNumber(
-                new BigNumber(1)
-                  .plus(market.lpPriceRange)
-                  .times(market.data.midPrice)
-                  .toString(),
-                market.decimalPlaces
-              )} ${assetSymbol}`,
-          }}
-        ></MarketInfoTable>
+        <>
+          <p className="text-xs mb-4">
+            {`For liquidity orders count towards a commitment they have to be
+        within either the liquidity or price monitoring bounds (whichever is
+        tighter).`}
+          </p>
+          <p className="text-xs mb-4">
+            {`The liquidity price range is a ${liquidityPriceRange} difference from the mid
+        price.`}
+          </p>
+          <MarketInfoTable
+            noBorder={false}
+            data={{
+              liquidityPriceRange: `${liquidityPriceRange} of mid price`,
+              lowestPrice:
+                market.data?.midPrice &&
+                `${addDecimalsFormatNumber(
+                  new BigNumber(1)
+                    .minus(market.lpPriceRange)
+                    .times(market.data.midPrice)
+                    .toString(),
+                  market.decimalPlaces
+                )} ${quoteUnit}`,
+              highestPrice:
+                market.data?.midPrice &&
+                `${addDecimalsFormatNumber(
+                  new BigNumber(1)
+                    .plus(market.lpPriceRange)
+                    .times(market.data.midPrice)
+                    .toString(),
+                  market.decimalPlaces
+                )} ${quoteUnit}`,
+            }}
+          ></MarketInfoTable>
+        </>
       ),
     },
     {

apps/explorer/src/app/components/order-details/deterministic-order-details.tsx

@@ -13,7 +13,7 @@ export interface DeterministicOrderDetailsProps {
 }
 
 export const wrapperClasses =
-  'grid lg:grid-cols-1 flex items-center max-w-xl border border-zinc-200 dark:border-zinc-800 rounded-md pv-2 ph-5 mb-5';
+  'grid lg:grid-cols-1 flex items-center max-w-xl border border-vega-light-200 dark:border-vega-dark-150 rounded-md pv-2 ph-5 mb-5';
 
 /**
  * This component renders the *current* details for an order
@@ -42,7 +42,7 @@ const DeterministicOrderDetails = ({
             <h2 className="text-3xl font-bold mb-4 display-5">
               {t('Order not found')}
             </h2>
-            <p className="text-gray-500 mb-12">
+            <p className="text-vega-light-400 mb-12">
               {t('No order created from this transaction')}
             </p>
           </div>

apps/explorer/src/app/components/page-header/page-header.tsx

@@ -38,7 +38,7 @@ export const PageHeader = ({
         </h2>
         {copy && (
           <CopyWithTooltip data-testid="copy-to-clipboard" text={title}>
-            <button className="bg-zinc-100 dark:bg-zinc-900 rounded-sm py-2 px-3">
+            <button className="bg-vega-light-100 dark:bg-vega-dark-100 rounded-sm py-2 px-3">
               <Icon name="duplicate" className="" />
             </button>
           </CopyWithTooltip>

apps/explorer/src/app/components/panel/panel.tsx

@@ -8,7 +8,7 @@ interface PanelProps {
 export const Panel = ({ children, className }: PanelProps) => (
   <div
     className={classNames(
-      'border border-zinc-200 dark:border-zinc-800 rounded-md p-5 mb-5',
+      'border border-vega-light-150 dark:border-vega-dark-150 rounded-md p-5 mb-5',
       className
     )}
   >

apps/explorer/src/app/components/proposals/proposals-table.tsx

@@ -0,0 +1,227 @@
+import type { ProposalListFieldsFragment } from '@vegaprotocol/governance';
+import { VoteProgress } from '@vegaprotocol/governance';
+import type { AgGridReact } from 'ag-grid-react';
+import { AgGridColumn } from 'ag-grid-react';
+import type {
+  VegaICellRendererParams,
+  VegaValueFormatterParams,
+} from '@vegaprotocol/ui-toolkit';
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import type { RowClickedEvent } from 'ag-grid-community';
+import {
+  getDateTimeFormat,
+  NetworkParams,
+  t,
+  useNetworkParams,
+} from '@vegaprotocol/react-helpers';
+import { ProposalStateMapping } from '@vegaprotocol/types';
+import BigNumber from 'bignumber.js';
+import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
+import { BREAKPOINT_MD } from '../../config/breakpoints';
+import { JsonViewerDialog } from '../dialogs/json-viewer-dialog';
+
+type ProposalTermsDialog = {
+  open: boolean;
+  title: string;
+  content: unknown;
+};
+type ProposalsTableProps = {
+  data: ProposalListFieldsFragment[] | null;
+};
+export const ProposalsTable = ({ data }: ProposalsTableProps) => {
+  const { params } = useNetworkParams([
+    NetworkParams.governance_proposal_market_requiredMajority,
+  ]);
+  const tokenLink = useLinks(DApp.Token);
+  const requiredMajorityPercentage = useMemo(() => {
+    const requiredMajority =
+      params?.governance_proposal_market_requiredMajority ?? 1;
+    return new BigNumber(requiredMajority).times(100);
+  }, [params?.governance_proposal_market_requiredMajority]);
+
+  const gridRef = useRef<AgGridReact>(null);
+  useLayoutEffect(() => {
+    const showColumnsOnDesktop = () => {
+      gridRef.current?.columnApi.setColumnsVisible(
+        ['voting', 'cDate', 'eDate', 'type'],
+        window.innerWidth > BREAKPOINT_MD
+      );
+      gridRef.current?.columnApi.setColumnWidth(
+        'actions',
+        window.innerWidth > BREAKPOINT_MD ? 221 : 80
+      );
+    };
+    window.addEventListener('resize', showColumnsOnDesktop);
+    return () => {
+      window.removeEventListener('resize', showColumnsOnDesktop);
+    };
+  }, []);
+
+  const [dialog, setDialog] = useState<ProposalTermsDialog>({
+    open: false,
+    title: '',
+    content: null,
+  });
+
+  return (
+    <>
+      <AgGrid
+        ref={gridRef}
+        rowData={data}
+        getRowId={({ data }: { data: ProposalListFieldsFragment }) =>
+          data.id || data.rationale.title
+        }
+        overlayNoRowsTemplate={t('This chain has no markets')}
+        domLayout="autoHeight"
+        defaultColDef={{
+          flex: 1,
+          resizable: true,
+          sortable: true,
+          filter: true,
+          filterParams: { buttons: ['reset'] },
+          autoHeight: true,
+        }}
+        suppressCellFocus={true}
+        onRowClicked={({ data, event }: RowClickedEvent) => {
+          if (
+            (event?.target as HTMLElement).tagName.toUpperCase() !== 'BUTTON'
+          ) {
+            const proposalPage = tokenLink(
+              TOKEN_PROPOSAL.replace(':id', data.id)
+            );
+            window.open(proposalPage, '_blank');
+          }
+        }}
+      >
+        <AgGridColumn
+          colId="title"
+          headerName={t('Title')}
+          field="rationale.title"
+          flex={2}
+          wrapText={true}
+        />
+        <AgGridColumn
+          colId="type"
+          maxWidth={180}
+          hide={window.innerWidth <= BREAKPOINT_MD}
+          headerName={t('Type')}
+          field="terms.change.__typename"
+        />
+        <AgGridColumn
+          maxWidth={100}
+          headerName={t('State')}
+          field="state"
+          valueFormatter={({
+            value,
+          }: VegaValueFormatterParams<ProposalListFieldsFragment, 'state'>) => {
+            return value ? ProposalStateMapping[value] : '-';
+          }}
+        />
+        <AgGridColumn
+          colId="voting"
+          maxWidth={100}
+          hide={window.innerWidth <= BREAKPOINT_MD}
+          headerName={t('Voting')}
+          cellRenderer={({
+            data,
+          }: VegaICellRendererParams<ProposalListFieldsFragment>) => {
+            if (data) {
+              const yesTokens = new BigNumber(data.votes.yes.totalTokens);
+              const noTokens = new BigNumber(data.votes.no.totalTokens);
+              const totalTokensVoted = yesTokens.plus(noTokens);
+              const yesPercentage = totalTokensVoted.isZero()
+                ? new BigNumber(0)
+                : yesTokens.multipliedBy(100).dividedBy(totalTokensVoted);
+              return (
+                <div className="uppercase flex h-full items-center justify-center pt-2">
+                  <VoteProgress
+                    threshold={requiredMajorityPercentage}
+                    progress={yesPercentage}
+                  />
+                </div>
+              );
+            }
+            return '-';
+          }}
+        />
+        <AgGridColumn
+          colId="cDate"
+          maxWidth={150}
+          hide={window.innerWidth <= BREAKPOINT_MD}
+          headerName={t('Closing date')}
+          field="terms.closingDatetime"
+          valueFormatter={({
+            value,
+          }: VegaValueFormatterParams<
+            ProposalListFieldsFragment,
+            'terms.closingDatetime'
+          >) => {
+            return value ? getDateTimeFormat().format(new Date(value)) : '-';
+          }}
+        />
+        <AgGridColumn
+          colId="eDate"
+          maxWidth={150}
+          hide={window.innerWidth <= BREAKPOINT_MD}
+          headerName={t('Enactment date')}
+          field="terms.enactmentDatetime"
+          valueFormatter={({
+            value,
+          }: VegaValueFormatterParams<
+            ProposalListFieldsFragment,
+            'terms.enactmentDatetime'
+          >) => {
+            return value ? getDateTimeFormat().format(new Date(value)) : '-';
+          }}
+        />
+        <AgGridColumn
+          colId="actions"
+          minWidth={window.innerWidth > BREAKPOINT_MD ? 221 : 80}
+          maxWidth={221}
+          sortable={false}
+          filter={false}
+          resizable={false}
+          cellRenderer={({
+            data,
+          }: VegaICellRendererParams<ProposalListFieldsFragment>) => {
+            const proposalPage = tokenLink(
+              TOKEN_PROPOSAL.replace(':id', data?.id || '')
+            );
+            const openDialog = () => {
+              if (!data) return;
+              setDialog({
+                open: true,
+                title: data.rationale.title,
+                content: data.terms,
+              });
+            };
+            return (
+              <div className="pb-1">
+                <button
+                  className="underline max-md:hidden"
+                  onClick={openDialog}
+                >
+                  {t('View terms')}
+                </button>{' '}
+                <ExternalLink className="max-md:hidden" href={proposalPage}>
+                  {t('Open in Governance')}
+                </ExternalLink>
+                <ExternalLink className="md:hidden" href={proposalPage}>
+                  {t('Open')}
+                </ExternalLink>
+              </div>
+            );
+          }}
+        />
+      </AgGrid>
+      <JsonViewerDialog
+        open={dialog.open}
+        onChange={(isOpen) => setDialog({ ...dialog, open: isOpen })}
+        title={dialog.title}
+        content={dialog.content}
+      />
+    </>
+  );
+};

apps/explorer/src/app/components/size-in-asset/size-in-asset.tsx

@@ -0,0 +1,43 @@
+import { useAssetDataProvider } from '@vegaprotocol/assets';
+import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
+import { AssetLink } from '../links';
+
+export type DecimalSource = 'ASSET';
+
+export type SizeInAssetProps = {
+  assetId: string;
+  size?: string | number;
+  decimalSource?: DecimalSource;
+};
+
+/**
+ * Given a market ID and an order size it will fetch the market
+ * order size, and format the size accordingly
+ */
+const SizeInAsset = ({
+  assetId,
+  size,
+  decimalSource = 'ASSET',
+}: SizeInAssetProps) => {
+  const { data } = useAssetDataProvider(assetId);
+  if (!size) {
+    return <span>-</span>;
+  }
+
+  let label = size;
+
+  if (data) {
+    if (decimalSource === 'ASSET' && data.decimals) {
+      label = addDecimalsFormatNumber(size, data.decimals);
+    }
+  }
+
+  return (
+    <p>
+      <span>{label}</span>&nbsp;
+      <AssetLink assetId={assetId} showAssetSymbol={true} asDialog={true} />
+    </p>
+  );
+};
+
+export default SizeInAsset;

apps/explorer/src/app/components/size-in-market/size-in-market.tsx

@@ -3,7 +3,7 @@ import { useExplorerMarketQuery } from '../links/market-link/__generated__/Marke
 
 export type DecimalSource = 'MARKET';
 
-export type PriceInMarketProps = {
+export type SizeInMarketProps = {
   marketId: string;
   size?: string | number;
   decimalSource?: DecimalSource;
@@ -17,7 +17,7 @@ const SizeInMarket = ({
   marketId,
   size,
   decimalSource = 'MARKET',
-}: PriceInMarketProps) => {
+}: SizeInMarketProps) => {
   const { data } = useExplorerMarketQuery({
     variables: { id: marketId },
     fetchPolicy: 'cache-first',

apps/explorer/src/app/components/txs/details/chain-events/tx-builtin-deposit.spec.tsx

@@ -10,7 +10,7 @@ import { MemoryRouter } from 'react-router-dom';
 type Deposit = components['schemas']['vegaBuiltinAssetDeposit'];
 
 const fullMock: Deposit = {
-  partyId: 'party123',
+  partyId: '0000000000000000000000000000000000000000000000000000000000000001',
   vegaAssetId: 'asset123',
   amount: 'amount123',
 };

apps/explorer/src/app/components/txs/details/chain-events/tx-builtin-withdrawal.spec.tsx

@@ -10,7 +10,7 @@ import { MemoryRouter } from 'react-router-dom';
 type Withdrawal = components['schemas']['vegaBuiltinAssetWithdrawal'];
 
 const fullMock: Withdrawal = {
-  partyId: 'party123',
+  partyId: '0000000000000000000000000000000000000000000000000000000000000001',
   vegaAssetId: 'asset123',
   amount: 'amount123',
 };
@@ -67,11 +67,12 @@ describe('Chain Event: Builtin asset withdrawal', () => {
     expect(screen.getByText(`${fullMock.amount}`)).toBeInTheDocument();
 
     expect(screen.getByText(t('Recipient'))).toBeInTheDocument();
+
     const partyLink = screen.getByText(`${fullMock.partyId}`);
-    expect(partyLink).toBeInTheDocument();
     if (!partyLink.parentElement) {
       throw new Error('Party link does not exist');
     }
+
     expect(partyLink.parentElement.tagName).toEqual('A');
     expect(partyLink.parentElement.getAttribute('href')).toEqual(
       `/parties/${fullMock.partyId}`

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-deposit.spec.tsx

@@ -10,10 +10,12 @@ import { TxDetailsChainEventDeposit } from './tx-erc20-deposit';
 type Deposit = components['schemas']['vegaERC20Deposit'];
 
 const fullMock: Deposit = {
-  vegaAssetId: 'asset123',
+  vegaAssetId:
+    '0000000000000000000000000000000000000000000000000000000000000002',
   amount: 'amount123',
   sourceEthereumAddress: 'eth123',
-  targetPartyId: 'vega123',
+  targetPartyId:
+    '0000000000000000000000000000000000000000000000000000000000000001',
 };
 
 describe('Chain Event: ERC20 asset deposit', () => {

apps/explorer/src/app/components/txs/details/chain-events/tx-stake-deposit.spec.tsx

@@ -13,7 +13,8 @@ const fullMock: Deposit = {
   amount: 'amount123',
   blockTime: 'block123',
   ethereumAddress: 'eth123',
-  vegaPublicKey: 'vega123',
+  vegaPublicKey:
+    '0000000000000000000000000000000000000000000000000000000000000001',
 };
 
 describe('Chain Event: Stake deposit', () => {

apps/explorer/src/app/components/txs/details/chain-events/tx-stake-remove.spec.tsx

@@ -13,7 +13,8 @@ const fullMock: Remove = {
   amount: 'amount123',
   blockTime: 'block123',
   ethereumAddress: 'eth123',
-  vegaPublicKey: 'vega123',
+  vegaPublicKey:
+    '0000000000000000000000000000000000000000000000000000000000000001',
 };
 
 describe('Chain Event: Stake remove', () => {

apps/explorer/src/app/components/txs/details/chain-response-code/chain-reponse.code.tsx

@@ -36,7 +36,7 @@ export const ChainResponseCode = ({
     error && error.length > 100 ? error.replace(/,/g, ',\r\n') : error;
 
   return (
-    <div title={`Response code: ${code} - ${label}`}>
+    <div title={`Response code: ${code} - ${label}`} className="inline-block">
       <span
         className="mr-2"
         aria-label={isSuccess ? 'Success' : 'Warning'}

apps/explorer/src/app/components/txs/details/shared/tx-details-shared.tsx

@@ -14,10 +14,14 @@ interface TxDetailsSharedProps {
   txData: BlockExplorerTransactionResult | undefined;
   pubKey: string | undefined;
   blockData: TendermintBlocksResponse | undefined;
+
+  // A transitional property used in some complex TX types to display more detailed type information
+  // than the shared component can derive
+  hideTypeRow?: boolean;
 }
 
 // Applied to all header cells
-const sharedHeaderProps = {
+export const sharedHeaderProps = {
   // Ensures that multi line contents still have the header aligned to the first line
   className: 'align-top',
 };
@@ -31,6 +35,7 @@ export const TxDetailsShared = ({
   txData,
   pubKey,
   blockData,
+  hideTypeRow = false,
 }: TxDetailsSharedProps) => {
   if (!txData) {
     return <>{t('Awaiting Block Explorer transaction details')}</>;
@@ -41,10 +46,12 @@ export const TxDetailsShared = ({
 
   return (
     <>
-      <TableRow modifier="bordered">
-        <TableCell {...sharedHeaderProps}>{t('Type')}</TableCell>
-        <TableCell>{txData.type}</TableCell>
-      </TableRow>
+      {hideTypeRow === false ? (
+        <TableRow modifier="bordered">
+          <TableCell {...sharedHeaderProps}>{t('Type')}</TableCell>
+          <TableCell>{txData.type}</TableCell>
+        </TableRow>
+      ) : null}
       <TableRow modifier="bordered">
         <TableCell {...sharedHeaderProps}>{t('Hash')}</TableCell>
         <TableCell>

apps/explorer/src/app/components/txs/details/transfer/blocks/transfer-participants.tsx

@@ -0,0 +1,138 @@
+import { t } from '@vegaprotocol/react-helpers';
+import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
+import { PartyLink } from '../../../../links';
+import {
+  SPECIAL_CASE_NETWORK,
+  SPECIAL_CASE_NETWORK_ID,
+} from '../../../../links/party-link/party-link';
+import SizeInAsset from '../../../../size-in-asset/size-in-asset';
+import { AccountTypeMapping } from '@vegaprotocol/types';
+import { AccountType } from '@vegaprotocol/types';
+import { headerClasses, wrapperClasses } from '../transfer-details';
+import type { Transfer } from '../transfer-details';
+
+interface TransferParticipantsProps {
+  transfer: Transfer;
+  from: string;
+}
+
+/**
+ * Renders a box containing the To, From and amount of a
+ * transfer. This is shown for all transfers, including
+ * recurring and reward transfers.
+ *
+ * @param transfer A recurring transfer object
+ * @param from The sender is not in the transaction, but comes from the Transaction submitter
+ */
+export function TransferParticipants({
+  transfer,
+  from,
+}: TransferParticipantsProps) {
+  // This mapping is required as the global account types require a type to be set, while
+  // the underlying protobufs allow for every field to be undefined.
+  const fromAcct =
+    transfer.fromAccountType &&
+    transfer.fromAccountType !== 'ACCOUNT_TYPE_UNSPECIFIED'
+      ? AccountType[transfer.fromAccountType]
+      : AccountType.ACCOUNT_TYPE_GENERAL;
+  const fromAccountTypeLabel = transfer.fromAccountType
+    ? AccountTypeMapping[fromAcct]
+    : 'Unknown';
+
+  const toAcct =
+    transfer.toAccountType &&
+    transfer.toAccountType !== 'ACCOUNT_TYPE_UNSPECIFIED'
+      ? AccountType[transfer.toAccountType]
+      : AccountType.ACCOUNT_TYPE_GENERAL;
+  const toAccountTypeLabel = transfer.fromAccountType
+    ? AccountTypeMapping[toAcct]
+    : 'Unknown';
+
+  return (
+    <div className={wrapperClasses}>
+      <h2 className={headerClasses}>{t('Transfer')}</h2>
+      <div className="relative block rounded-lg py-6 text-center">
+        <PartyLink id={from} truncate={true} />
+        <Tooltip
+          description={
+            <p>{`${t('From account')}:  ${fromAccountTypeLabel}`}</p>
+          }
+        >
+          <span>
+            <Icon className="ml-3" name={'bank-account'} />
+          </span>
+        </Tooltip>
+        <br />
+
+        {/* This block of divs is used to render the inset arrow containing the transfer amount */}
+        <div className="bg-vega-light-200 dark:vega-dark-200 flex items-center justify-center my-4 relative">
+          <div className="bg-vega-light-200 dark:bg-vega-dark-200 border w-full pt-5 pb-3 px-3 border-vega-light-200 dark:border-vega-dark-150 relative">
+            <div className="text-xs z-20 relative leading-none">
+              {transfer.asset ? (
+                <SizeInAsset assetId={transfer.asset} size={transfer.amount} />
+              ) : null}
+            </div>
+
+            {/* Empty divs for the top arrow and the bottom arrow of the transfer inset */}
+            <div className="z-10 absolute top-[-1px] left-1/2 w-4 h-4">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 9"
+                className="fill-vega-light-100 dark:fill-black"
+              >
+                <path d="M0,0L8,9l8,-9Z" />
+              </svg>
+            </div>
+            <div className="z-10 absolute bottom-[-16px] left-1/2 w-4 h-4">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 9"
+                className="fill-vega-light-100 dark:fill-vega-dark-200"
+              >
+                <path d="M0,0L8,9l8,-9Z" />
+              </svg>
+            </div>
+            {/*
+            <div className="z-10 absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-4 h-4 dark:border-vega-dark-200 border-vega-light-200 bg-white dark:bg-black border-r border-b"></div>
+            <div className="z-10 absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rotate-45 w-4 h-4 border-vega-light-200 dark:border-vega-dark-200 bg-vega-light-200 dark:bg-vega-dark-200 border-r border-b"></div>
+              */}
+          </div>
+        </div>
+
+        <TransferRecurringRecipient to={transfer.to} />
+        <Tooltip
+          description={<p>{`${t('To account')}: ${toAccountTypeLabel}`}</p>}
+        >
+          <span>
+            <Icon className="ml-3" name={'bank-account'} />
+          </span>
+        </Tooltip>
+        <br />
+      </div>
+    </div>
+  );
+}
+
+interface TransferRecurringRecipientProps {
+  to?: string;
+}
+
+/**
+ * If the transfer is to 000...000, then this is a transfer to the
+ * Rewards Pool rather than the network. This component saves this
+ * logic from complicating the To section of the participants block
+ *
+ * @param markets String[] IDs of markets for this dispatch strategy
+ */
+export function TransferRecurringRecipient({
+  to,
+}: TransferRecurringRecipientProps) {
+  if (to === SPECIAL_CASE_NETWORK || to === SPECIAL_CASE_NETWORK_ID) {
+    return <span>{t('Rewards pool')}</span>;
+  } else if (to) {
+    return <PartyLink id={to} truncate={true} />;
+  }
+
+  // Fallback should not happen
+  return null;
+}

apps/explorer/src/app/components/txs/details/transfer/blocks/transfer-repeat.tsx

@@ -0,0 +1,86 @@
+import { t } from '@vegaprotocol/react-helpers';
+import { Icon } from '@vegaprotocol/ui-toolkit';
+import EpochOverview from '../../../../epoch-overview/epoch';
+import { useExplorerFutureEpochQuery } from '../../../../epoch-overview/__generated__/Epoch';
+import { headerClasses, wrapperClasses } from '../transfer-details';
+import type { IconProps } from '@vegaprotocol/ui-toolkit';
+import type { Recurring } from '../transfer-details';
+
+interface TransferRepeatProps {
+  recurring: Recurring;
+}
+
+/**
+ * Renderer for a transfer. These can vary quite
+ * widely, essentially every field can be null.
+ *
+ * @param transfer A recurring transfer object
+ */
+export function TransferRepeat({ recurring }: TransferRepeatProps) {
+  const { data } = useExplorerFutureEpochQuery();
+
+  if (!recurring) {
+    return null;
+  }
+
+  return (
+    <div className={wrapperClasses}>
+      <h2 className={headerClasses}>{t('Active epochs')}</h2>
+      <div className="relative block rounded-lg py-6 text-center p-6">
+        <p>
+          <EpochOverview id={recurring.startEpoch} />
+        </p>
+        <p className="leading-10 my-2">
+          <IconForEpoch
+            start={recurring.startEpoch}
+            end={recurring.endEpoch}
+            current={data?.epoch.id}
+          />
+        </p>
+        <p>
+          {recurring.endEpoch ? (
+            <EpochOverview id={recurring.endEpoch} />
+          ) : (
+            <span>{t('Forever')}</span>
+          )}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export type IconForTransferProps = {
+  current?: string;
+  start?: string;
+  end?: string;
+};
+
+/**
+ * Pick an icon rto represent the state of the repetition for this recurring
+ * transfer. It can be unstarted, in progress, or complete.
+ *
+ * @param start The epoch in which the transfer first occurs
+ * @param end The last epoch in which the transfer occurs
+ * @param current The current epoch
+ */
+function IconForEpoch({ start, end, current }: IconForTransferProps) {
+  let i: IconProps['name'] = 'repeat';
+
+  if (current && start && end) {
+    const startEpoch = parseInt(start);
+    const endEpoch = parseInt(end);
+    const currentEpoch = parseInt(current);
+
+    if (currentEpoch > endEpoch) {
+      // If we've finished
+      i = 'updated';
+    } else if (startEpoch > currentEpoch) {
+      // If we haven't yet started
+      i = 'time';
+    } else if (startEpoch < currentEpoch && endEpoch > currentEpoch) {
+      i = 'repeat';
+    }
+  }
+
+  return <Icon name={i} className="mr-2" />;
+}

apps/explorer/src/app/components/txs/details/transfer/blocks/transfer-rewards.tsx

@@ -0,0 +1,97 @@
+import { t } from '@vegaprotocol/react-helpers';
+import { AssetLink, MarketLink } from '../../../../links';
+import { headerClasses, wrapperClasses } from '../transfer-details';
+import type { components } from '../../../../../../types/explorer';
+import type { Recurring } from '../transfer-details';
+import { DispatchMetricLabels } from '@vegaprotocol/types';
+
+export type Metric = components['schemas']['vegaDispatchMetric'];
+export type Strategy = components['schemas']['vegaDispatchStrategy'];
+
+const metricLabels = {
+  DISPATCH_METRIC_UNSPECIFIED: 'Unknown metric',
+  ...DispatchMetricLabels,
+};
+
+interface TransferRewardsProps {
+  recurring: Recurring;
+}
+
+/**
+ * Renderer for a transfer. These can vary quite
+ * widely, essentially every field can be null.
+ *
+ * @param transfer A recurring transfer object
+ */
+export function TransferRewards({ recurring }: TransferRewardsProps) {
+  const metric =
+    recurring?.dispatchStrategy?.metric || 'DISPATCH_METRIC_UNSPECIFIED';
+
+  if (!recurring || !recurring.dispatchStrategy) {
+    return null;
+  }
+
+  return (
+    <div className={wrapperClasses}>
+      <h2 className={headerClasses}>{t('Reward metrics')}</h2>
+      <ul className="relative block rounded-lg py-6 text-center p-6">
+        {recurring.dispatchStrategy.assetForMetric ? (
+          <li>
+            <strong>{t('Asset')}</strong>:{' '}
+            <AssetLink assetId={recurring.dispatchStrategy.assetForMetric} />
+          </li>
+        ) : null}
+        <li>
+          <strong>{t('Metric')}</strong>: {metricLabels[metric]}
+        </li>
+        {recurring.dispatchStrategy.markets &&
+        recurring.dispatchStrategy.markets.length > 0 ? (
+          <li>
+            <strong>{t('Markets in scope')}</strong>:
+            <ul>
+              {recurring.dispatchStrategy.markets.map((m) => (
+                <li key={m}>
+                  <MarketLink id={m} />
+                </li>
+              ))}
+            </ul>
+          </li>
+        ) : null}
+        <li>
+          <strong>{t('Factor')}</strong>: {recurring.factor}
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+interface TransferRecurringStrategyProps {
+  strategy: Strategy;
+}
+
+/**
+ * Simple renderer for a dispatch strategy in a recurring transfer
+ *
+ * @param strategy Dispatch strategy object
+ */
+export function TransferRecurringStrategy({
+  strategy,
+}: TransferRecurringStrategyProps) {
+  if (!strategy) {
+    return null;
+  }
+
+  return (
+    <>
+      {strategy.assetForMetric ? (
+        <li>
+          <strong>{t('Asset for metric')}</strong>:{' '}
+          <AssetLink assetId={strategy.assetForMetric} />
+        </li>
+      ) : null}
+      <li>
+        <strong>{t('Metric')}</strong>: {strategy.metric}
+      </li>
+    </>
+  );
+}

apps/explorer/src/app/components/txs/details/transfer/transfer-details.tsx

@@ -0,0 +1,39 @@
+import type { components } from '../../../../../types/explorer';
+import { TransferRepeat } from './blocks/transfer-repeat';
+import { TransferRewards } from './blocks/transfer-rewards';
+import { TransferParticipants } from './blocks/transfer-participants';
+
+export type Recurring = components['schemas']['v1RecurringTransfer'];
+export type Metric = components['schemas']['vegaDispatchMetric'];
+
+export const wrapperClasses =
+  'border border-vega-light-150 dark:border-vega-dark-200 rounded-md pv-2 mb-5 w-full sm:w-1/4 min-w-[200px] ';
+export const headerClasses =
+  'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 border-vega-light-150 text-center text-xl py-2 font-alpha';
+
+export type Transfer = components['schemas']['commandsv1Transfer'];
+
+interface TransferDetailsProps {
+  transfer: Transfer;
+  from: string;
+}
+
+/**
+ * Renderer for a transfer. These can vary quite
+ * widely, essentially every field can be null.
+ *
+ * @param transfer A recurring transfer object
+ */
+export function TransferDetails({ transfer, from }: TransferDetailsProps) {
+  const recurring = transfer.recurring;
+
+  return (
+    <div className="flex gap-5 flex-wrap">
+      <TransferParticipants from={from} transfer={transfer} />
+      {recurring ? <TransferRepeat recurring={transfer.recurring} /> : null}
+      {recurring && recurring.dispatchStrategy ? (
+        <TransferRewards recurring={transfer.recurring} />
+      ) : null}
+    </div>
+  );
+}

apps/explorer/src/app/components/txs/details/tx-details-wrapper.tsx

@@ -23,6 +23,7 @@ import { TxDetailsProtocolUpgrade } from './tx-details-protocol-upgrade';
 import { TxDetailsIssueSignatures } from './tx-issue-signatures';
 import { TxDetailsNodeAnnounce } from './tx-node-announce';
 import { TxDetailsStateVariable } from './tx-state-variable-proposal';
+import { TxDetailsTransfer } from './tx-transfer';
 
 interface TxDetailsWrapperProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -108,6 +109,8 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
       return TxDetailsUndelegate;
     case 'State Variable Proposal':
       return TxDetailsStateVariable;
+    case 'Transfer Funds':
+      return TxDetailsTransfer;
     default:
       return TxDetailsGeneric;
   }

apps/explorer/src/app/components/txs/details/tx-transfer.tsx

@@ -0,0 +1,125 @@
+import { t } from '@vegaprotocol/react-helpers';
+import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import { sharedHeaderProps, TxDetailsShared } from './shared/tx-details-shared';
+import { TableRow, TableCell, TableWithTbody } from '../../table';
+
+import type { components } from '../../../../types/explorer';
+import { PartyLink } from '../../links';
+import SizeInAsset from '../../size-in-asset/size-in-asset';
+import { TransferDetails } from './transfer/transfer-details';
+import {
+  SPECIAL_CASE_NETWORK,
+  SPECIAL_CASE_NETWORK_ID,
+} from '../../links/party-link/party-link';
+
+type Transfer = components['schemas']['commandsv1Transfer'];
+
+interface TxDetailsNodeAnnounceProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+/**
+ * Displays the details of a transfer. Broadly there are three distinct
+ * types of transfer, listed below in order of complexity:
+ *
+ * - A one off transfer
+ * - A recurring transfer
+ * - A recurring rewards pool transfer
+ *
+ * One off transfers are simple, really the important data is the amount
+ * and who sent it to whom. This is rendered as one distinct box.
+ *
+ * A recurring transfer has two components - the same as above, and an
+ * additional box that shows details about how it repeats. This is defined
+ * as a start epoch and and end epoch. The Epoch/MissingEpoch components
+ * render slightly differently depending on if the epoch is in the past,
+ * current or in the future.
+ *
+ * Finally rewards pool transfers get the two boxes above, and an additional
+ * one that describes how the reward is distributed.
+ *
+ * The information is split up in to three boxes to allow for the reuse across
+ * all the types of transfer above.
+ */
+export const TxDetailsTransfer = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxDetailsNodeAnnounceProps) => {
+  if (!txData) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+
+  const transfer: Transfer = txData.command.transfer;
+  if (!transfer) {
+    return <>{t('Transfer data missing')}</>;
+  }
+
+  const from = txData.submitter;
+
+  return (
+    <>
+      <TableWithTbody className="mb-8" allowWrap={true}>
+        <TableRow modifier="bordered">
+          <TableCell {...sharedHeaderProps}>{t('Type')}</TableCell>
+          <TableCell>{getTypeLabelForTransfer(transfer)}</TableCell>
+        </TableRow>
+        <TxDetailsShared
+          txData={txData}
+          pubKey={pubKey}
+          blockData={blockData}
+          hideTypeRow={true}
+        />
+        {from ? (
+          <TableRow modifier="bordered">
+            <TableCell>{t('From')}</TableCell>
+            <TableCell>
+              <PartyLink id={from} />
+            </TableCell>
+          </TableRow>
+        ) : null}
+        {transfer.to ? (
+          <TableRow modifier="bordered">
+            <TableCell>{t('To')}</TableCell>
+            <TableCell>
+              <PartyLink id={transfer.to} />
+            </TableCell>
+          </TableRow>
+        ) : null}
+        {transfer.asset && transfer.amount ? (
+          <TableRow modifier="bordered">
+            <TableCell>{t('Amount')}</TableCell>
+            <TableCell>
+              <SizeInAsset assetId={transfer.asset} size={transfer.amount} />
+            </TableCell>
+          </TableRow>
+        ) : null}
+      </TableWithTbody>
+      <TransferDetails from={from} transfer={transfer} />
+    </>
+  );
+};
+
+/**
+ * Gets a string description of this transfer
+ * @param txData A full transfer
+ * @returns string Transfer label
+ */
+export function getTypeLabelForTransfer(tx: Transfer) {
+  if (tx.to === SPECIAL_CASE_NETWORK || tx.to === SPECIAL_CASE_NETWORK_ID) {
+    if (tx.recurring && tx.recurring.dispatchStrategy) {
+      return 'Reward top up transfer';
+    }
+    // Else: we don't know that it's a reward transfer, so let's not guess
+  } else if (tx.recurring) {
+    return 'Recurring transfer';
+  } else if (tx.oneOff) {
+    // Currently redundant, but could be used to indicate something more specific
+    return 'Transfer';
+  }
+
+  return 'Transfer';
+}

apps/explorer/src/app/components/txs/tx-order-type.tsx

@@ -14,14 +14,17 @@ interface StringMap {
 // Using https://github.com/vegaprotocol/protos/blob/e0f646ce39aab1fc66a9200ceec0262306d3beb3/commands/transaction.go#L93 as a reference
 const displayString: StringMap = {
   OrderSubmission: 'Order Submission',
+  'Submit Order': 'Order',
   OrderCancellation: 'Order Cancellation',
   OrderAmendment: 'Order Amendment',
   VoteSubmission: 'Vote Submission',
   WithdrawSubmission: 'Withdraw Submission',
   Withdraw: 'Withdraw Request',
-  LiquidityProvisionSubmission: 'Liquidity Provision',
-  LiquidityProvisionCancellation: 'Liquidity Cancellation',
-  LiquidityProvisionAmendment: 'Liquidity Amendment',
+  LiquidityProvisionSubmission: 'LP order',
+  'Liquidity Provision Order': 'LP order',
+  LiquidityProvisionCancellation: 'LP cancel',
+  LiquidityProvisionAmendment: 'LP update',
+  'Amend LiquidityProvision Order': 'Amend LP',
   ProposalSubmission: 'Governance Proposal',
   AnnounceNode: 'Node Announcement',
   NodeVote: 'Node Vote',
@@ -31,10 +34,11 @@ const displayString: StringMap = {
   DelegateSubmission: 'Delegation',
   UndelegateSubmission: 'Undelegation',
   KeyRotateSubmission: 'Key Rotation',
-  StateVariableProposal: 'State Variable Proposal',
+  StateVariableProposal: 'State Variable',
   Transfer: 'Transfer',
   CancelTransfer: 'Cancel Transfer',
-  ValidatorHeartbeat: 'Validator Heartbeat',
+  ValidatorHeartbeat: 'Heartbeat',
+  'Batch Market Instructions': 'Batch',
 };
 
 /**
@@ -132,7 +136,8 @@ export function getLabelForChainEvent(
 export const TxOrderType = ({ orderType, command }: TxOrderTypeProps) => {
   let type = displayString[orderType] || orderType;
 
-  let colours = 'text-white dark:text-white bg-zinc-800 dark:bg-zinc-800';
+  let colours =
+    'text-white dark:text-white bg-vega-dark-150 dark:bg-vega-dark-150';
 
   // This will get unwieldy and should probably produce a different colour of tag
   if (type === 'Chain Event' && !!command?.chainEvent) {

apps/explorer/src/app/components/txs/tx-transfer.spec.tsx

@@ -0,0 +1,58 @@
+import { getTypeLabelForTransfer } from './details/tx-transfer';
+import type { components } from '../../../types/explorer';
+
+type Transfer = components['schemas']['commandsv1Transfer'];
+
+describe('TX: Transfer: getLabelForTransfer', () => {
+  it('renders reward top up label if the TO party is 000', () => {
+    const mock: Transfer = {
+      to: '0000000000000000000000000000000000000000000000000000000000000000',
+      recurring: {
+        dispatchStrategy: {},
+      },
+    };
+
+    expect(getTypeLabelForTransfer(mock)).toEqual('Reward top up transfer');
+  });
+
+  it('renders reward top up label if the TO party is network', () => {
+    const mock = {
+      to: 'network',
+      recurring: {
+        dispatchStrategy: {},
+      },
+    };
+
+    expect(getTypeLabelForTransfer(mock)).toEqual('Reward top up transfer');
+  });
+
+  it('renders recurring label if the tx has a recurring property', () => {
+    const mock: Transfer = {
+      to: '0000000000000000000000000000000000000000000000000000000000000001',
+      recurring: {
+        startEpoch: '0',
+      },
+    };
+
+    expect(getTypeLabelForTransfer(mock)).toEqual('Recurring transfer');
+  });
+
+  it('renders one off label if the tx has a oneOff property', () => {
+    const mock: Transfer = {
+      to: '0000000000000000000000000000000000000000000000000000000000000001',
+      oneOff: {
+        deliverOn: '0',
+      },
+    };
+
+    expect(getTypeLabelForTransfer(mock)).toEqual('Transfer');
+  });
+
+  it('renders one off label otherwise', () => {
+    const mock: Transfer = {
+      to: '0000000000000000000000000000000000000000000000000000000000000001',
+    };
+
+    expect(getTypeLabelForTransfer(mock)).toEqual('Transfer');
+  });
+});

apps/explorer/src/app/components/txs/txs-infinite-list-item.tsx

@@ -37,7 +37,9 @@ export const TxsInfiniteListItem = ({
         className="text-sm col-span-10 xl:col-span-3 leading-none"
         data-testid="tx-hash"
       >
-        <span className="xl:hidden uppercase text-zinc-500">ID:&nbsp;</span>
+        <span className="xl:hidden uppercase text-vega-dark-300">
+          ID:&nbsp;
+        </span>
         <TruncatedLink
           to={`/${Routes.TX}/${toHex(hash)}`}
           text={hash}
@@ -49,7 +51,9 @@ export const TxsInfiniteListItem = ({
         className="text-sm col-span-10 xl:col-span-3 leading-none"
         data-testid="pub-key"
       >
-        <span className="xl:hidden uppercase text-zinc-500">By:&nbsp;</span>
+        <span className="xl:hidden uppercase text-vega-dark-300">
+          By:&nbsp;
+        </span>
         <TruncatedLink
           to={`/${Routes.PARTIES}/${submitter}`}
           text={submitter}
@@ -64,7 +68,9 @@ export const TxsInfiniteListItem = ({
         className="text-sm col-span-3 xl:col-span-1 leading-none flex items-center"
         data-testid="tx-block"
       >
-        <span className="xl:hidden uppercase text-zinc-500">Block:&nbsp;</span>
+        <span className="xl:hidden uppercase text-vega-dark-300">
+          Block:&nbsp;
+        </span>
         <TruncatedLink
           to={`/${Routes.BLOCKS}/${block}`}
           text={block}
@@ -76,7 +82,7 @@ export const TxsInfiniteListItem = ({
         className="text-sm col-span-2 xl:col-span-1 leading-none flex items-center"
         data-testid="tx-success"
       >
-        <span className="xl:hidden uppercase text-zinc-500">
+        <span className="xl:hidden uppercase text-vega-dark-300">
           Success:&nbsp;
         </span>
         {isNumber(code) ? (

apps/explorer/src/app/components/txs/txs-infinite-list.tsx

@@ -94,7 +94,7 @@ export const TxsInfiniteList = ({
 
   return (
     <div className={className} data-testid="transactions-list">
-      <div className="xl:grid grid-cols-10 w-full mb-3 hidden text-zinc-500 uppercase">
+      <div className="xl:grid grid-cols-10 w-full mb-3 hidden text-vega-dark-300 uppercase">
         <div className="col-span-3">
           <span className="hidden xl:inline">Transaction &nbsp;</span>
           <span>ID</span>

apps/explorer/src/app/config/env.ts

@@ -33,4 +33,7 @@ export const ENV = {
     parties: truthy.includes(windowOrDefault('NX_EXPLORER_PARTIES')),
     validators: truthy.includes(windowOrDefault('NX_EXPLORER_VALIDATORS')),
   },
+  addresses: {
+    feedback: windowOrDefault('NX_GITHUB_FEEDBACK_URL'),
+  },
 };

apps/explorer/src/app/routes/assets/asset-page.tsx

@@ -0,0 +1,50 @@
+import { t } from '@vegaprotocol/react-helpers';
+import { RouteTitle } from '../../components/route-title';
+import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
+import { useScrollToLocation } from '../../hooks/scroll-to-location';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
+import { useParams } from 'react-router-dom';
+import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
+import { useState } from 'react';
+
+export const AssetPage = () => {
+  useDocumentTitle(['Assets']);
+  useScrollToLocation();
+
+  const { assetId } = useParams<{ assetId: string }>();
+  const { data, loading, error } = useAssetDataProvider(assetId || '');
+
+  const title = data ? data.name : error ? t('Asset not found') : '';
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <section className="relative">
+        <RouteTitle data-testid="asset-header">{title}</RouteTitle>
+        <AsyncRenderer
+          noDataMessage={t('Asset not found')}
+          data={data}
+          loading={loading}
+          error={error}
+        >
+          <div className="absolute top-0 right-0">
+            <Button size="xs" onClick={() => setDialogOpen(true)}>
+              {t('View JSON')}
+            </Button>
+          </div>
+          <div className="h-full relative">
+            <AssetDetailsTable asset={data as AssetFieldsFragment} />
+          </div>
+        </AsyncRenderer>
+      </section>
+      <JsonViewerDialog
+        open={dialogOpen}
+        onChange={(isOpen) => setDialogOpen(isOpen)}
+        title={data?.name || ''}
+        content={data}
+      />
+    </>
+  );
+};

apps/explorer/src/app/routes/assets/assets-page.tsx

@@ -6,7 +6,7 @@ import { useDocumentTitle } from '../../hooks/use-document-title';
 import { useAssetsDataProvider } from '@vegaprotocol/assets';
 import { AssetsTable } from '../../components/assets/assets-table';
 
-export const Assets = () => {
+export const AssetsPage = () => {
   useDocumentTitle(['Assets']);
   useScrollToLocation();
 

apps/explorer/src/app/routes/assets/index.tsx

@@ -1 +1,2 @@
-export * from './assets';
+export * from './assets-page';
+export * from './asset-page';

apps/explorer/src/app/routes/governance/Proposals.graphql

@@ -1,82 +0,0 @@
-query ExplorerProposals {
-  proposalsConnection {
-    edges {
-      node {
-        id
-        rationale {
-          title
-          description
-        }
-        reference
-        state
-        datetime
-        rejectionReason
-        party {
-          id
-        }
-        terms {
-          closingDatetime
-          enactmentDatetime
-          change {
-            ... on NewMarket {
-              instrument {
-                name
-              }
-            }
-            ... on UpdateMarket {
-              marketId
-            }
-            ... on NewAsset {
-              __typename
-              symbol
-              source {
-                ... on BuiltinAsset {
-                  maxFaucetAmountMint
-                }
-                ... on ERC20 {
-                  contractAddress
-                }
-              }
-            }
-            ... on UpdateNetworkParameter {
-              networkParameter {
-                key
-                value
-              }
-            }
-          }
-        }
-        votes {
-          yes {
-            totalTokens
-            totalNumber
-            votes {
-              value
-              party {
-                id
-                stakingSummary {
-                  currentStakeAvailable
-                }
-              }
-              datetime
-            }
-          }
-          no {
-            totalTokens
-            totalNumber
-            votes {
-              value
-              party {
-                id
-                stakingSummary {
-                  currentStakeAvailable
-                }
-              }
-              datetime
-            }
-          }
-        }
-      }
-    }
-  }
-}

apps/explorer/src/app/routes/governance/__generated__/Proposals.ts

@@ -1,122 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type ExplorerProposalsQueryVariables = Types.Exact<{ [key: string]: never; }>;
-
-
-export type ExplorerProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename: 'NewAsset', symbol: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string } } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, votes?: Array<{ __typename?: 'Vote', value: Types.VoteValue, datetime: any, party: { __typename?: 'Party', id: string, stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string } } }> | null }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, votes?: Array<{ __typename?: 'Vote', value: Types.VoteValue, datetime: any, party: { __typename?: 'Party', id: string, stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string } } }> | null } } } } | null> | null } | null };
-
-
-export const ExplorerProposalsDocument = gql`
-    query ExplorerProposals {
-  proposalsConnection {
-    edges {
-      node {
-        id
-        rationale {
-          title
-          description
-        }
-        reference
-        state
-        datetime
-        rejectionReason
-        party {
-          id
-        }
-        terms {
-          closingDatetime
-          enactmentDatetime
-          change {
-            ... on NewMarket {
-              instrument {
-                name
-              }
-            }
-            ... on UpdateMarket {
-              marketId
-            }
-            ... on NewAsset {
-              __typename
-              symbol
-              source {
-                ... on BuiltinAsset {
-                  maxFaucetAmountMint
-                }
-                ... on ERC20 {
-                  contractAddress
-                }
-              }
-            }
-            ... on UpdateNetworkParameter {
-              networkParameter {
-                key
-                value
-              }
-            }
-          }
-        }
-        votes {
-          yes {
-            totalTokens
-            totalNumber
-            votes {
-              value
-              party {
-                id
-                stakingSummary {
-                  currentStakeAvailable
-                }
-              }
-              datetime
-            }
-          }
-          no {
-            totalTokens
-            totalNumber
-            votes {
-              value
-              party {
-                id
-                stakingSummary {
-                  currentStakeAvailable
-                }
-              }
-              datetime
-            }
-          }
-        }
-      }
-    }
-  }
-}
-    `;
-
-/**
- * __useExplorerProposalsQuery__
- *
- * To run a query within a React component, call `useExplorerProposalsQuery` and pass it any options that fit your needs.
- * When your component renders, `useExplorerProposalsQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useExplorerProposalsQuery({
- *   variables: {
- *   },
- * });
- */
-export function useExplorerProposalsQuery(baseOptions?: Apollo.QueryHookOptions<ExplorerProposalsQuery, ExplorerProposalsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ExplorerProposalsQuery, ExplorerProposalsQueryVariables>(ExplorerProposalsDocument, options);
-      }
-export function useExplorerProposalsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerProposalsQuery, ExplorerProposalsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ExplorerProposalsQuery, ExplorerProposalsQueryVariables>(ExplorerProposalsDocument, options);
-        }
-export type ExplorerProposalsQueryHookResult = ReturnType<typeof useExplorerProposalsQuery>;
-export type ExplorerProposalsLazyQueryHookResult = ReturnType<typeof useExplorerProposalsLazyQuery>;
-export type ExplorerProposalsQueryResult = Apollo.QueryResult<ExplorerProposalsQuery, ExplorerProposalsQueryVariables>;

apps/explorer/src/app/routes/governance/index.tsx

@@ -1,63 +1 @@
-import { t } from '@vegaprotocol/react-helpers';
-import React from 'react';
-import { RouteTitle } from '../../components/route-title';
-import { SubHeading } from '../../components/sub-heading';
-import { Loader, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
-import { useExplorerProposalsQuery } from './__generated__/Proposals';
-import { useDocumentTitle } from '../../hooks/use-document-title';
-import EmptyList from '../../components/empty-list/empty-list';
-
-const Governance = () => {
-  const { data, loading } = useExplorerProposalsQuery({
-    errorPolicy: 'ignore',
-  });
-
-  useDocumentTitle();
-
-  if (!data || !data.proposalsConnection || !data.proposalsConnection.edges) {
-    if (!loading) {
-      return (
-        <section>
-          <RouteTitle data-testid="governance-header">
-            {t('Governance Proposals')}
-          </RouteTitle>
-
-          <EmptyList
-            heading={t('This chain has no proposals')}
-            label={t('0 proposals')}
-          />
-        </section>
-      );
-    } else {
-      return <Loader />;
-    }
-  }
-
-  const proposals = data?.proposalsConnection?.edges.map((e) => {
-    return e?.node;
-  });
-
-  return (
-    <section>
-      <RouteTitle data-testid="governance-header">
-        {t('Governance Proposals')}
-      </RouteTitle>
-      {proposals.map((p) => {
-        if (!p || !p.id) {
-          return null;
-        }
-
-        return (
-          <React.Fragment key={p.id}>
-            <SubHeading>
-              {p.rationale.title || p.rationale.description}
-            </SubHeading>
-            <SyntaxHighlighter data={p} />
-          </React.Fragment>
-        );
-      })}
-    </section>
-  );
-};
-
-export default Governance;
+export * from './proposals-page';

apps/explorer/src/app/routes/governance/proposals-page.tsx

@@ -0,0 +1,33 @@
+import { proposalsDataProvider } from '@vegaprotocol/governance';
+import { t, useDataProvider } from '@vegaprotocol/react-helpers';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { ProposalsTable } from '../../components/proposals/proposals-table';
+import { RouteTitle } from '../../components/route-title';
+import { useScrollToLocation } from '../../hooks/scroll-to-location';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+
+export const Proposals = () => {
+  useScrollToLocation();
+
+  const { data, loading, error } = useDataProvider({
+    dataProvider: proposalsDataProvider,
+  });
+
+  useDocumentTitle([t('Governance Proposals')]);
+
+  return (
+    <section>
+      <RouteTitle data-testid="proposals-heading">
+        {t('Governance proposals')}
+      </RouteTitle>
+      <AsyncRenderer
+        noDataMessage={t('This chain has no proposals')}
+        data={data}
+        loading={loading}
+        error={error}
+      >
+        <ProposalsTable data={data} />
+      </AsyncRenderer>
+    </section>
+  );
+};

apps/explorer/src/app/routes/parties/id/index.tsx

@@ -68,7 +68,7 @@ const Party = () => {
   return (
     <section>
       <h1
-        className="font-alpha uppercase font-xl mb-4 text-zinc-800 dark:text-zinc-200"
+        className="font-alpha uppercase font-xl mb-4 text-vega-dark-100 dark:text-vega-light-100"
         data-testid="parties-header"
       >
         {t('Public key')}

apps/explorer/src/app/routes/router-config.tsx

@@ -1,6 +1,6 @@
-import { Assets } from './assets';
+import { AssetPage, AssetsPage } from './assets';
 import BlockPage from './blocks';
-import Governance from './governance';
+import { Proposals } from './governance';
 import Home from './home';
 import OraclePage from './oracles';
 import Oracles from './oracles/home';
@@ -53,7 +53,16 @@ const assetsRoutes: Route[] = flags.assets
         path: Routes.ASSETS,
         text: t('Assets'),
         name: 'Assets',
-        element: <Assets />,
+        children: [
+          {
+            index: true,
+            element: <AssetsPage />,
+          },
+          {
+            path: ':assetId',
+            element: <AssetPage />,
+          },
+        ],
       },
     ]
   : [];
@@ -75,7 +84,7 @@ const governanceRoutes: Route[] = flags.governance
         path: Routes.GOVERNANCE,
         name: 'Governance proposals',
         text: t('Governance Proposals'),
-        element: <Governance />,
+        element: <Proposals />,
       },
     ]
   : [];

apps/explorer/src/types/explorer.d.ts

@@ -15,6 +15,7 @@ type OneOf<T extends any[]> = T extends [infer Only]
   ? OneOf<[XOR<A, B>, ...Rest]>
   : never;
 /* eslint-enable @typescript-eslint/no-explicit-any */
+
 export interface paths {
   '/info': {
     /**
@@ -40,8 +41,6 @@ export interface paths {
   };
 }
 
-export type webhooks = Record<string, never>;
-
 export interface components {
   schemas: {
     /**
@@ -66,7 +65,7 @@ export interface components {
       | 'OPERATOR_LESS_THAN'
       | 'OPERATOR_LESS_THAN_OR_EQUAL';
     /**
-     * The supported Oracle sources
+     * The supported oracle sources
      * @description - ORACLE_SOURCE_UNSPECIFIED: The default value
      *  - ORACLE_SOURCE_OPEN_ORACLE: Specifies that the payload will be base64 encoded JSON conforming to the Open Oracle standard
      *  - ORACLE_SOURCE_JSON: Specifies that the payload will be base64 encoded JSON, but does not specify the shape of the data
@@ -174,7 +173,7 @@ export interface components {
       readonly '@type'?: string;
       [key: string]: unknown | undefined;
     };
-    /** Used announce a node as a new pending validator */
+    /** Used to announce a node as a new pending validator */
     readonly v1AnnounceNode: {
       /** AvatarURL of the validator */
       readonly avatarUrl?: string;
@@ -269,13 +268,13 @@ export interface components {
     readonly v1ETHAddress: {
       readonly address?: string;
     };
-    /** A transaction to allow validator to rotate their ethereum keys */
+    /** A transaction to allow a validator to rotate their ethereum keys */
     readonly v1EthereumKeyRotateSubmission: {
       /** Currently used public address */
       readonly currentAddress?: string;
       /** Signature that can be verified using the new ethereum address */
       readonly ethereumSignature?: components['schemas']['v1Signature'];
-      /** The new adress to rotate to */
+      /** The new address to rotate to */
       readonly newAddress?: string;
       /** Ethereum public key to use as a submitter to allow automatic signature generation */
       readonly submitterAddress?: string;
@@ -309,7 +308,9 @@ export interface components {
       readonly version?: string;
     };
     readonly v1InputData: {
+      /** A command used by a node operator to announce its node as a pending validator */
       readonly announceNode?: components['schemas']['v1AnnounceNode'];
+      /** A command to submit a batch of order instructions to a market */
       readonly batchMarketInstructions?: components['schemas']['v1BatchMarketInstructions'];
       /**
        * Format: uint64
@@ -323,17 +324,35 @@ export interface components {
        * `block_height` prevents replay attacks in conjunction with `nonce` (see above).
        */
       readonly blockHeight?: string;
+      /** A command to request cancelling a recurring transfer */
       readonly cancelTransfer?: components['schemas']['v1CancelTransfer'];
+      /**
+       * Command used by a validator to submit an event forwarded to the Vega network to provide information
+       * on events happening on other networks, to be used by a foreign chain
+       * to recognise a decision taken by the Vega network
+       */
       readonly chainEvent?: components['schemas']['v1ChainEvent'];
+      /** Command to delegate tokens to a validator */
       readonly delegateSubmission?: components['schemas']['v1DelegateSubmission'];
+      /** Command used by a validator to allow given validator to rotate their Ethereum keys */
       readonly ethereumKeyRotateSubmission?: components['schemas']['v1EthereumKeyRotateSubmission'];
+      /** Command used by a validator to submit signatures to a smart contract */
       readonly issueSignatures?: components['schemas']['v1IssueSignatures'];
+      /** Command used by a validator to allow given validator to rotate their Vega keys */
       readonly keyRotateSubmission?: components['schemas']['v1KeyRotateSubmission'];
+      /** Command to request amending a liquidity commitment */
       readonly liquidityProvisionAmendment?: components['schemas']['v1LiquidityProvisionAmendment'];
+      /** Command to request cancelling a liquidity commitment */
       readonly liquidityProvisionCancellation?: components['schemas']['v1LiquidityProvisionCancellation'];
+      /** Command to submit a liquidity commitment */
       readonly liquidityProvisionSubmission?: components['schemas']['v1LiquidityProvisionSubmission'];
+      /** Command used by a validator to submit a signature, to be used by a foreign chain to recognise a decision taken by the Vega network */
       readonly nodeSignature?: components['schemas']['v1NodeSignature'];
-      /** Validator commands */
+      /**
+       * Validator commands
+       * Command used by a validator when a node votes for validating that a given resource exists or is valid,
+       * for example, an ERC20 deposit is valid and exists on ethereum
+       */
       readonly nodeVote?: components['schemas']['v1NodeVote'];
       /**
        * Format: uint64
@@ -349,30 +368,50 @@ export interface components {
        * slightly differently, causing a different hash.
        */
       readonly nonce?: string;
-      /** Oracles */
+      /**
+       * Oracles
+       * Command to submit new oracle data from third party providers
+       */
       readonly oracleDataSubmission?: components['schemas']['v1OracleDataSubmission'];
+      /** Command to amend an order */
       readonly orderAmendment?: components['schemas']['v1OrderAmendment'];
+      /**
+       * User commands
+       * Command to cancel an order
+       */
       readonly orderCancellation?: components['schemas']['v1OrderCancellation'];
-      /** User commands */
+      /** A command for submitting an order */
       readonly orderSubmission?: components['schemas']['v1OrderSubmission'];
+      /** Command to submit a governance proposal */
       readonly proposalSubmission?: components['schemas']['v1ProposalSubmission'];
+      /** Command used by a validator to propose a protocol upgrade */
       readonly protocolUpgradeProposal?: components['schemas']['v1ProtocolUpgradeProposal'];
+      /** Command used by a validator to submit a floating point value */
       readonly stateVariableProposal?: components['schemas']['v1StateVariableProposal'];
+      /** Command to submit a transfer */
       readonly transfer?: components['schemas']['commandsv1Transfer'];
+      /** Command to remove tokens delegated to a validator */
       readonly undelegateSubmission?: components['schemas']['v1UndelegateSubmission'];
+      /**
+       * Command used by a validator to signal they are still online and validating blocks
+       * or ready to validate blocks when they are still a pending validator
+       */
       readonly validatorHeartbeat?: components['schemas']['v1ValidatorHeartbeat'];
+      /** Command to submit a vote on a governance proposal */
       readonly voteSubmission?: components['schemas']['v1VoteSubmission'];
+      /** Command to submit a withdrawal */
       readonly withdrawSubmission?: components['schemas']['v1WithdrawSubmission'];
     };
+    /** A transaction for a validator to submit signatures to a smart contract */
     readonly v1IssueSignatures: {
       /** The kind of signatures to generate, namely for whether a signer is being added or removed */
       readonly kind?: components['schemas']['v1NodeSignatureKind'];
-      /** The ethereum address which will submit the signatures to the smart-contract */
+      /** The ethereum address which will submit the signatures to the smart contract */
       readonly submitter?: string;
-      /** The ID of the node that will be signed in or out of the smartcontract */
+      /** The ID of the node that will be signed in or out of the smart contract */
       readonly validatorNodeId?: string;
     };
-    /** A transaction to allow validator to rotate their Vega keys */
+    /** A transaction to allow a validator to rotate their Vega keys */
     readonly v1KeyRotateSubmission: {
       /** Hash of currently used public key */
       readonly currentPubKeyHash?: string;
@@ -496,8 +535,8 @@ export interface components {
     /** Specific details for a one off transfer */
     readonly v1OneOffTransfer: {
       /**
-       * A unix timestamp in second. Time at which the
-       * transfer should be delivered in the to account
+       * A unix timestamp in seconds. Time at which the
+       * transfer should be delivered into the To account
        * Format: int64
        */
       readonly deliverOn?: string;
@@ -512,7 +551,7 @@ export interface components {
       readonly payload?: string;
       /**
        * @description The source from which the data is coming from. Must be base64 encoded.
-       * Oracle data a type of external data source data.
+       * Oracle data is a type of external data source data.
        */
       readonly source?: components['schemas']['OracleDataSubmissionOracleSource'];
     };
@@ -603,7 +642,7 @@ export interface components {
       /** Type for the order, required field - See `Order.Type` */
       readonly type?: components['schemas']['vegaOrderType'];
     };
-    /** @description PropertyKey describes the property key contained in an data source data. */
+    /** @description PropertyKey describes the property key contained in data source data. */
     readonly v1PropertyKey: {
       /** @description name is the name of the property. */
       readonly name?: string;
@@ -650,6 +689,7 @@ export interface components {
       /** Proposal configuration and the actual change that is meant to be executed when proposal is enacted */
       readonly terms?: components['schemas']['vegaProposalTerms'];
     };
+    /** A transaction for a validator to suggest a protocol upgrade */
     readonly v1ProtocolUpgradeProposal: {
       /**
        * The block height at which to perform the upgrade
@@ -708,6 +748,7 @@ export interface components {
        */
       readonly pubKey?: components['schemas']['v1PubKey'];
     };
+    /** A transaction for a validator to submit a floating point value */
     readonly v1StateVariableProposal: {
       /** The state value proposal details */
       readonly proposal?: components['schemas']['vegaStateValueProposal'];
@@ -969,7 +1010,7 @@ export interface components {
       readonly sourceEthereumAddress?: string;
       /** The Vega network internal identifier of the asset */
       readonly vegaAssetId?: string;
-      /** The updated withdraw threshold */
+      /** The updated withdrawal threshold */
       readonly withdrawThreshold?: string;
     };
     /** An asset allow-listing for an ERC20 token */
@@ -1064,7 +1105,7 @@ export interface components {
       /** The ethereum address of the old signer */
       readonly oldSigner?: string;
     };
-    /** The threshold have been updated on the multisigcontrol */
+    /** The threshold has been updated on the multisig control */
     readonly vegaERC20ThresholdSet: {
       /**
        * Format: int64
@@ -1078,13 +1119,13 @@ export interface components {
        * Format: int64
        */
       readonly newThreshold?: number;
-      /** The nonce create by the vega network */
+      /** The nonce created by the Vega network */
       readonly nonce?: string;
     };
     readonly vegaERC20Update: {
       /**
        * The lifetime limits deposit per address.
-       * This is will be interpreted against the asset decimals.
+       * This will be interpreted against the asset decimals.
        * note: this is a temporary measure that can be changed by governance
        */
       readonly lifetimeLimit?: string;
@@ -1237,7 +1278,7 @@ export interface components {
        * price levels over which automated liquidity provision orders will be deployed
        */
       readonly lpPriceRange?: string;
-      /** Optional new market meta data, tags */
+      /** Optional new market metadata, tags */
       readonly metadata?: readonly string[];
       /**
        * Decimal places for order sizes, sets what size the smallest order / position on the market can be

apps/token-e2e/src/integration/flow/governance-flow.cy.js

@@ -1,849 +0,0 @@
-/// <reference types="cypress" />
-
-const vegaWalletUnstakedBalance =
-  '[data-testid="vega-wallet-balance-unstaked"]';
-const vegaWalletStakedBalances =
-  '[data-testid="vega-wallet-balance-staked-validators"]';
-const vegaWalletAssociatedBalance = '[data-testid="currency-value"]';
-const vegaWalletNameElement = '[data-testid="wallet-name"]';
-const vegaWallet = '[data-testid="vega-wallet"]';
-const connectToVegaWalletButton = '[data-testid="connect-to-vega-wallet-btn"]';
-const newProposalSubmitButton = '[data-testid="proposal-submit"]';
-const dialogCloseButton = '[data-testid="dialog-close"]';
-const viewProposalButton = '[data-testid="view-proposal-btn"]';
-const openProposals = '[data-testid="open-proposals"]';
-const proposalVoteProgressForPercentage =
-  '[data-testid="vote-progress-indicator-percentage-for"]';
-const proposalVoteProgressAgainstPercentage =
-  '[data-testid="vote-progress-indicator-percentage-against"]';
-const proposalVoteProgressForTokens =
-  '[data-testid="vote-progress-indicator-tokens-for"]';
-const proposalVoteProgressAgainstTokens =
-  '[data-testid="vote-progress-indicator-tokens-against"]';
-const changeVoteButton = '[data-testid="change-vote-button"]';
-const proposalDetailsTitle = '[data-testid="proposal-title"]';
-const proposalDetailsDescription = '[data-testid="proposal-description"]';
-const rawProposalData = '[data-testid="proposal-data"]';
-const minVoteButton = '[data-testid="min-vote"]';
-const maxVoteButton = '[data-testid="max-vote"]';
-const voteButtons = '[data-testid="vote-buttons"]';
-const votingDate = '[data-testid="voting-date"]';
-const voteTwoMinExtraNote = '[data-testid="voting-2-mins-extra"]';
-const voteStatus = '[data-testid="vote-status"]';
-const rejectProposalsLink = '[href="/proposals/rejected"]';
-const feedbackError = '[data-testid="Error"]';
-const noOpenProposals = '[data-testid="no-open-proposals"]';
-const noClosedProposals = '[data-testid="no-closed-proposals"]';
-const txTimeout = Cypress.env('txTimeout');
-const epochTimeout = Cypress.env('epochTimeout');
-const proposalTimeout = { timeout: 14000 };
-
-const minCloseDays = 2;
-const maxCloseDays = 3;
-const requiredParticipation = 0.001;
-
-const governanceProposalType = {
-  NETWORK_PARAMETER: 'Network parameter',
-  NEW_MARKET: 'New market',
-  UPDATE_MARKET: 'Update market',
-  NEW_ASSET: 'New asset',
-  FREEFORM: 'Freeform',
-  RAW: 'raw proposal',
-};
-
-context(
-  'Governance flow - with eth and vega wallets connected',
-  { tags: '@slow' },
-  function () {
-    before('connect wallets and set approval limit', function () {
-      cy.visit('/');
-      cy.get_network_parameters().then((network_parameters) => {
-        cy.wrap(
-          network_parameters['spam.protection.proposal.min.tokens'] /
-            1000000000000000000
-        ).as('minProposerBalance');
-        cy.wrap(
-          network_parameters['spam.protection.voting.min.tokens'] /
-            1000000000000000000
-        ).as('minVoterBalance');
-        cy.wrap(
-          network_parameters['governance.proposal.freeform.requiredMajority'] *
-            100
-        ).as('requiredMajority');
-        cy.wrap(
-          network_parameters['governance.proposal.freeform.minClose'].split(
-            'h'
-          )[0]
-        ).as('minCloseHours');
-        cy.wrap(
-          network_parameters['governance.proposal.freeform.maxClose'].split(
-            'h'
-          )[0]
-        ).as('maxCloseHours');
-      });
-      cy.vega_wallet_set_specified_approval_amount('1000');
-    });
-
-    describe('Eth wallet - contains VEGA tokens', function () {
-      before(
-        'checking network parameters (therefore environment) is fit for test',
-        function () {
-          assert.isAtLeast(
-            parseInt(this.minProposerBalance),
-            0.00001,
-            'Asserting that value is at least 0.00001 for network parameter minProposerBalance'
-          );
-          assert.isAtLeast(
-            parseInt(this.minVoterBalance),
-            0.00001,
-            'Asserting that value is at least 0.00001 for network parameter minVoterBalance'
-          );
-          // workaround for first eth tx hanging
-          associateTokenStartOfTests();
-        }
-      );
-
-      beforeEach('visit governance tab', function () {
-        cy.reload();
-        cy.wait_for_spinner();
-        cy.connectVegaWallet();
-        cy.ethereum_wallet_connect();
-        cy.navigate_to('proposals');
-      });
-
-      it('Should be able to see that no proposals exist', function () {
-        // 3001-VOTE-003
-        cy.get(noOpenProposals)
-          .should('be.visible')
-          .and('have.text', 'There are no open or yet to enact proposals');
-        cy.get(noClosedProposals)
-          .should('be.visible')
-          .and('have.text', 'There are no enacted or rejected proposals');
-      });
-
-      // 3002-PROP-002
-      // 3002-PROP-003
-      it('Submit a proposal form - shows how many vega tokens are required to make a proposal', function () {
-        // 3002-PROP-005
-        cy.go_to_make_new_proposal(governanceProposalType.NEW_MARKET);
-        cy.contains(
-          `You must have at least ${this.minProposerBalance} VEGA associated to make a proposal`
-        ).should('be.visible');
-      });
-
-      // 3002-PROP-011
-      it('Able to submit a valid freeform proposal - with minimum required tokens associated', function () {
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-        cy.get(minVoteButton).should('be.visible'); // 3002-PROP-008
-        cy.get(maxVoteButton).should('be.visible');
-        cy.get(votingDate).should('not.be.empty');
-        cy.get(voteTwoMinExtraNote).should(
-          'contain.text',
-          'we add 2 minutes of extra time'
-        );
-        cy.enter_unique_freeform_proposal_body('50', generateProposalTitle());
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        // 3002-PROP-012
-        // 3002-PROP-016
-        cy.wait_for_proposal_submitted();
-      });
-
-      it('Newly created proposals list - proposals closest to closing date appear higher in list', function () {
-        // 3001-VOTE-005
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        let proposalDays = [
-          minCloseDays + 1,
-          maxCloseDays,
-          minCloseDays + 3,
-          minCloseDays + 2,
-        ];
-        for (var index = 0; index < proposalDays.length; index++) {
-          cy.go_to_make_new_proposal(governanceProposalType.RAW);
-          cy.create_ten_digit_unix_timestamp_for_specified_days(
-            proposalDays[index]
-          ).then((closingDateTimestamp) => {
-            cy.enter_raw_proposal_body(closingDateTimestamp);
-          });
-          cy.get(newProposalSubmitButton).should('be.visible').click();
-          cy.contains('Awaiting network confirmation', epochTimeout).should(
-            'be.visible'
-          );
-          cy.contains('Proposal submitted', proposalTimeout).should(
-            'be.visible'
-          );
-          cy.get(dialogCloseButton).click();
-          cy.wait_for_proposal_sync();
-        }
-
-        let arrayOfProposals = [];
-
-        cy.navigate_to('proposals');
-        cy.get(proposalDetailsTitle)
-          .each((proposalTitleElement) => {
-            arrayOfProposals.push(proposalTitleElement.text());
-          })
-          .then(() => {
-            cy.get_sort_order_of_supplied_array(arrayOfProposals).should(
-              'equal',
-              'descending'
-            );
-          });
-      });
-
-      it('Able to submit a valid freeform proposal - with minimum required tokens associated - but also staked', function () {
-        cy.ensure_specified_unstaked_tokens_are_associated('2');
-        cy.navigate_to_page_if_not_already_loaded('proposals');
-        cy.get(vegaWalletUnstakedBalance, txTimeout).should('contain', '2');
-        cy.navigate_to('validators');
-        cy.click_on_validator_from_list(0);
-        cy.staking_validator_page_add_stake('2');
-        cy.close_staking_dialog();
-
-        cy.get(vegaWalletStakedBalances, txTimeout).should('contain', '2');
-
-        cy.navigate_to('proposals');
-        cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-        cy.enter_unique_freeform_proposal_body('50', generateProposalTitle());
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.wait_for_proposal_submitted();
-      });
-
-      it('Newly created proposals list - able to filter by proposerID to show it in list', function () {
-        const proposerId = Cypress.env('vegaWalletPublicKey');
-        const proposalTitle = generateProposalTitle();
-
-        createFreeformProposal(this.minProposerBalance, proposalTitle);
-        cy.get_proposal_id_from_list(proposalTitle);
-        cy.get('@proposalIdText').then((proposalId) => {
-          cy.get('[data-testid="set-proposals-filter-visible"]').click();
-          cy.get('[data-testid="filter-input"]').type(proposerId);
-          cy.get(`#${proposalId}`).should('contain', proposalId);
-        });
-      });
-
-      it('Newly created proposals list - shows title and portion of summary', function () {
-        createRawProposal(this.minProposerBalance); // 3001-VOTE-052
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_proposal_id_from_list(rawProposal.rationale.title);
-          cy.get('@proposalIdText').then((proposalId) => {
-            cy.get(openProposals).within(() => {
-              // 3001-VOTE-008
-              // 3001-VOTE-034
-              cy.get(`#${proposalId}`)
-                // 3001-VOTE-097
-                .should('contain', rawProposal.rationale.title)
-                .and('be.visible');
-              cy.get(`#${proposalId}`)
-                .should(
-                  'contain',
-                  rawProposal.rationale.description.substring(0, 59)
-                )
-                .and('be.visible');
-            });
-          });
-        });
-      });
-
-      it('Newly created proposals list - shows open proposals in an open state', function () {
-        // 3001-VOTE-004
-        // 3001-VOTE-035
-        createRawProposal(this.minProposerBalance);
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_submitted_proposal_from_proposal_list(
-            rawProposal.rationale.title
-          ).within(() => {
-            cy.get(viewProposalButton).should('be.visible').click();
-          });
-          cy.get('@proposalIdText').then((proposalId) => {
-            cy.get_proposal_information_from_table('ID')
-              .contains(proposalId)
-              .and('be.visible');
-          });
-          cy.get_proposal_information_from_table('State')
-            .contains('Open')
-            .and('be.visible');
-          cy.get_proposal_information_from_table('Type')
-            .contains('Freeform')
-            .and('be.visible');
-        });
-      });
-
-      // 3001-VOTE-071
-      it('Newly created freeform proposals list - shows proposal participation - both met and not', function () {
-        const proposalTitle = generateProposalTitle();
-        createFreeformProposal(this.minProposerBalance, proposalTitle);
-
-        cy.get_submitted_proposal_from_proposal_list(proposalTitle)
-          .as('submittedProposal')
-          .within(() => {
-            // 3001-VOTE-039
-            cy.get(voteStatus).should('have.text', 'Participation not reached');
-            cy.get(viewProposalButton).click();
-          });
-        cy.vote_for_proposal('for');
-        cy.get_proposal_information_from_table('Total Supply')
-          .invoke('text')
-          .then((totalSupply) => {
-            let tokensRequiredToAchieveResult = parseFloat(
-              (totalSupply.replace(/,/g, '') * requiredParticipation) / 100
-            ).toFixed(2);
-            cy.ensure_specified_unstaked_tokens_are_associated(
-              tokensRequiredToAchieveResult
-            );
-            cy.navigate_to_page_if_not_already_loaded('proposals');
-            cy.get('@submittedProposal').within(() =>
-              cy.get(viewProposalButton).click()
-            );
-            cy.get_proposal_information_from_table('Token participation met')
-              .contains('👍')
-              .should('be.visible');
-            cy.navigate_to('proposals');
-            cy.get('@submittedProposal').within(() =>
-              cy.get(voteStatus).should('have.text', 'Set to pass')
-            );
-          });
-      });
-
-      // 3001-VOTE-055
-      it('Newly created raw proposal details - shows proposal title and full description', function () {
-        createRawProposal(this.minProposerBalance);
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_proposal_id_from_list(rawProposal.rationale.title);
-          cy.get('@proposalIdText').then((proposalId) => {
-            cy.get(openProposals).within(() => {
-              cy.get(`#${proposalId}`).within(() => {
-                cy.get(viewProposalButton).should('be.visible').click();
-              });
-            });
-          });
-          cy.get(proposalDetailsTitle)
-            .should('contain', rawProposal.rationale.title)
-            .and('be.visible');
-          cy.get(proposalDetailsDescription)
-            .should('contain', rawProposal.rationale.description)
-            .and('be.visible');
-        });
-        // 3001-VOTE-052
-        cy.get('code.language-json')
-          .should('exist')
-          .within(() => {
-            cy.get('.hljs-string').eq(0).should('have.text', '"ProposalTerms"');
-          });
-      });
-
-      // 3001-VOTE-043
-      it('Newly created freeform proposal details - shows proposed and closing dates', function () {
-        const closingVoteHrs = '72';
-        const proposalTitle = generateProposalTitle();
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-        cy.create_ten_digit_unix_timestamp_for_specified_days('3').then(
-          (closingDateTimestamp) => {
-            cy.enter_unique_freeform_proposal_body(
-              closingVoteHrs,
-              proposalTitle
-            );
-            cy.get(newProposalSubmitButton).should('be.visible').click();
-
-            cy.wait_for_proposal_submitted();
-            cy.wait_for_proposal_sync();
-            cy.navigate_to('proposals');
-            cy.get_submitted_proposal_from_proposal_list(proposalTitle).within(
-              () => cy.get(viewProposalButton).click()
-            );
-            cy.convert_unix_timestamp_to_governance_data_table_date_format(
-              closingDateTimestamp
-            ).then((closingDate) => {
-              cy.get_proposal_information_from_table('Closes on')
-                .contains(closingDate)
-                .should('be.visible');
-            });
-          }
-        );
-        cy.get_governance_proposal_date_format_for_specified_days('0').then(
-          (proposalDate) => {
-            cy.get_proposal_information_from_table('Proposed on')
-              .contains(proposalDate)
-              .should('be.visible');
-          }
-        );
-      });
-
-      it('Newly created proposal details - shows default status set to fail', function () {
-        // 3001-VOTE-037
-        // 3001-VOTE-040
-        // 3001-VOTE-067
-        createRawProposal(this.minProposerBalance);
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_submitted_proposal_from_proposal_list(
-            rawProposal.rationale.title
-          ).within(() => cy.get(viewProposalButton).click());
-        });
-        cy.contains('Participation: Not Met 0.00 0.00%(0.00% Required)').should(
-          'be.visible'
-        );
-        cy.get_proposal_information_from_table('Expected to pass')
-          .contains('👎')
-          .should('be.visible');
-        // 3001-VOTE-062
-        // 3001-VOTE-040
-        // 3001-VOTE-070
-        cy.get_proposal_information_from_table('Token majority met')
-          .contains('👎')
-          .should('be.visible');
-        // 3001-VOTE-068
-        cy.get_proposal_information_from_table('Token participation met')
-          .contains('👎')
-          .should('be.visible');
-      });
-
-      // 3001-VOTE-080 3001-VOTE-090 3001-VOTE-069 3001-VOTE-072 3001-VOTE-073
-      it('Newly created proposal details - ability to vote for and against proposal - with minimum required tokens associated', function () {
-        createRawProposal(this.minProposerBalance);
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_submitted_proposal_from_proposal_list(
-            rawProposal.rationale.title
-          ).within(() => cy.get(viewProposalButton).click());
-        });
-        // 3001-VOTE-080
-        cy.get(voteButtons).contains('against').should('be.visible');
-        cy.get(voteButtons).contains('for').should('be.visible');
-        cy.vote_for_proposal('for');
-        cy.get_governance_proposal_date_format_for_specified_days(
-          '0',
-          'shortMonth'
-        ).then((votedDate) => {
-          // 3001-VOTE-051
-          // 3001-VOTE-093
-          cy.contains('You voted:')
-            .siblings()
-            .contains('For')
-            .siblings()
-            .contains(votedDate)
-            .should('be.visible');
-        });
-        cy.get(proposalVoteProgressForPercentage) // 3001-VOTE-072
-          .contains('100.00%')
-          .and('be.visible');
-        cy.get(proposalVoteProgressAgainstPercentage)
-          .contains('0.00%')
-          .and('be.visible');
-        cy.get(proposalVoteProgressForTokens)
-          .contains('1.00')
-          .and('be.visible');
-        cy.get(proposalVoteProgressAgainstTokens)
-          .contains('0.00')
-          .and('be.visible');
-        cy.get_proposal_information_from_table('Tokens for proposal')
-          .should('have.text', parseFloat(this.minProposerBalance).toFixed(2))
-          .and('be.visible');
-        cy.get_proposal_information_from_table('Tokens against proposal')
-          .should('have.text', '0.00')
-          .and('be.visible');
-        // 3001-VOTE-061
-        cy.get_proposal_information_from_table('Participation required')
-          .contains(`${requiredParticipation}%`)
-          .should('be.visible');
-        // 3001-VOTE-066
-        cy.get_proposal_information_from_table('Majority Required') // 3001-VOTE-073
-          .contains(`${parseFloat(this.requiredMajority).toFixed(2)}%`)
-          .should('be.visible');
-        cy.get_proposal_information_from_table('Number of voting parties')
-          .should('have.text', '1')
-          .and('be.visible');
-        cy.get(changeVoteButton).should('be.visible').click();
-        cy.vote_for_proposal('for');
-        // 3001-VOTE-064
-        cy.get_proposal_information_from_table('Tokens for proposal')
-          .should('have.text', parseFloat(this.minProposerBalance).toFixed(2))
-          .and('be.visible');
-        cy.get(changeVoteButton).should('be.visible').click();
-        cy.vote_for_proposal('against');
-        cy.get(proposalVoteProgressAgainstPercentage)
-          .contains('100.00%')
-          .and('be.visible');
-        cy.get_proposal_information_from_table('Tokens against proposal')
-          .should('have.text', parseFloat(this.minProposerBalance).toFixed(2))
-          .and('be.visible');
-        cy.get_proposal_information_from_table('Number of voting parties')
-          .should('have.text', '1')
-          .and('be.visible');
-      });
-
-      // 3001-VOTE-042, 3001-VOTE-057, 3001-VOTE-058, 3001-VOTE-059, 3001-VOTE-060
-      it('Newly created proposal details - ability to increase associated tokens - by voting again after association', function () {
-        createRawProposal(this.minProposerBalance);
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_submitted_proposal_from_proposal_list(
-            rawProposal.rationale.title
-          )
-            .as('submittedProposal')
-            .within(() => cy.get(viewProposalButton).click());
-        });
-        cy.vote_for_proposal('for');
-        // 3001-VOTE-079
-        cy.contains('You voted: For').should('be.visible');
-        cy.get(proposalVoteProgressForTokens).contains('1').and('be.visible');
-        cy.get_proposal_information_from_table('Total Supply')
-          .invoke('text')
-          .then((totalSupply) => {
-            let tokensRequiredToAchieveResult = parseFloat(
-              (totalSupply.replace(/,/g, '') * requiredParticipation) / 100
-            ).toFixed(2);
-            cy.ensure_specified_unstaked_tokens_are_associated(
-              tokensRequiredToAchieveResult
-            );
-            cy.navigate_to_page_if_not_already_loaded('proposals');
-            cy.get('@submittedProposal').within(() =>
-              cy.get(viewProposalButton).click()
-            );
-            cy.get(proposalVoteProgressForPercentage)
-              .contains('100.00%')
-              .and('be.visible');
-            cy.get(proposalVoteProgressAgainstPercentage)
-              .contains('0.00%')
-              .and('be.visible');
-            // 3001-VOTE-065
-            cy.get(changeVoteButton).should('be.visible').click();
-            cy.vote_for_proposal('for');
-            cy.get(proposalVoteProgressForTokens)
-              .contains(tokensRequiredToAchieveResult)
-              .and('be.visible');
-            cy.get(proposalVoteProgressAgainstTokens)
-              .contains('0.00')
-              .and('be.visible');
-            cy.get_proposal_information_from_table(
-              'Total tokens voted percentage'
-            )
-              .should('have.text', '0.00%')
-              .and('be.visible');
-            cy.get_proposal_information_from_table('Tokens for proposal')
-              .should('have.text', tokensRequiredToAchieveResult)
-              .and('be.visible');
-            cy.get_proposal_information_from_table('Tokens against proposal')
-              .should('have.text', '0.00')
-              .and('be.visible');
-            cy.get_proposal_information_from_table('Number of voting parties')
-              .should('have.text', '1')
-              .and('be.visible');
-            cy.get_proposal_information_from_table('Expected to pass')
-              .contains('👍')
-              .should('be.visible');
-            // 3001-VOTE-062
-            cy.get_proposal_information_from_table('Token majority met')
-              .contains('👍')
-              .should('be.visible');
-            cy.get_proposal_information_from_table('Token participation met')
-              .contains('👍')
-              .should('be.visible');
-            cy.get_proposal_information_from_table('Tokens for proposal')
-              .contains(tokensRequiredToAchieveResult)
-              .and('be.visible');
-          });
-      });
-
-      it('Creating a proposal - proposal rejected - when closing time sooner than system default', function () {
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-        cy.enter_unique_freeform_proposal_body('40', generateProposalTitle());
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.contains('Awaiting network confirmation', epochTimeout).should(
-          'not.exist'
-        );
-      });
-
-      it('Creating a proposal - proposal rejected - when closing time later than system default', function () {
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-        cy.enter_unique_freeform_proposal_body(
-          '100000',
-          generateProposalTitle()
-        );
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.contains('Awaiting network confirmation', epochTimeout).should(
-          'not.exist'
-        );
-      });
-
-      // 3001-VOTE-006
-      it('Creating a proposal - proposal rejected - able to access rejected proposals', function () {
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.RAW);
-        cy.create_ten_digit_unix_timestamp_for_specified_days('1000').then(
-          (closingDateTimestamp) => {
-            cy.enter_raw_proposal_body(closingDateTimestamp).as('rawProposal');
-          }
-        );
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.contains('Awaiting network confirmation', epochTimeout).should(
-          'be.visible'
-        );
-        cy.contains('Proposal rejected', proposalTimeout).should('be.visible');
-        cy.get(dialogCloseButton).click();
-        cy.wait_for_proposal_sync();
-        cy.navigate_to('proposals');
-        cy.get(rejectProposalsLink).click();
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_submitted_proposal_from_proposal_list(
-            rawProposal.rationale.title
-          ).within(() => {
-            cy.contains('Rejected').should('be.visible');
-            cy.contains('Close time too late').should('be.visible');
-            cy.get(viewProposalButton).click();
-          });
-        });
-        cy.get_proposal_information_from_table('State')
-          .contains('Rejected')
-          .and('be.visible');
-        cy.get_proposal_information_from_table('Rejection reason')
-          .contains('PROPOSAL_ERROR_CLOSE_TIME_TOO_LATE')
-          .and('be.visible');
-        cy.get_proposal_information_from_table('Error details')
-          .contains('proposal closing time too late')
-          .and('be.visible');
-      });
-
-      // 0005-ETXN-004
-      it('Unable to create a proposal - when no tokens are associated', function () {
-        cy.vega_wallet_teardown();
-        cy.get(vegaWalletAssociatedBalance, txTimeout).contains(
-          '0.00',
-          txTimeout
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.RAW);
-        cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
-          (closingDateTimestamp) => {
-            cy.enter_raw_proposal_body(closingDateTimestamp).as;
-          }
-        );
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.contains('Transaction failed', proposalTimeout).should('be.visible');
-        cy.get(feedbackError).should(
-          'have.text',
-          'Network error: the network blocked the transaction through the spam protection'
-        );
-        cy.get(dialogCloseButton).click();
-      });
-
-      // 3002-PROP-009
-      it('Unable to create a proposal - when some but not enough tokens are associated', function () {
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance - 0.000001
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.RAW);
-        cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
-          (closingDateTimestamp) => {
-            cy.enter_raw_proposal_body(closingDateTimestamp);
-          }
-        );
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.contains('Transaction failed', proposalTimeout).should('be.visible');
-        cy.get(feedbackError).should(
-          'have.text',
-          'Network error: the network blocked the transaction through the spam protection'
-        );
-        cy.get(dialogCloseButton).click();
-      });
-
-      it('Unable to create a freeform proposal - when json parent section contains unexpected field', function () {
-        // 3001-VOTE-038 3002-PROP-013 3002-PROP-014
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.RAW);
-        cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
-          (closingDateTimestamp) => {
-            cy.fixture('/proposals/raw.json').then((freeformProposal) => {
-              freeformProposal.terms.closingTimestamp = closingDateTimestamp;
-              freeformProposal.unexpected = `i shouldn't be here`;
-              let proposalPayload = JSON.stringify(freeformProposal);
-              cy.get(rawProposalData).type(proposalPayload, {
-                parseSpecialCharSequences: false,
-                delay: 2,
-              });
-            });
-          }
-        );
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-
-        cy.contains('Transaction failed', proposalTimeout).should('be.visible');
-        cy.get(feedbackError).should(
-          'have.text',
-          'Invalid params: the transaction is malformed'
-        );
-        cy.get(dialogCloseButton).click();
-        cy.get(rawProposalData)
-          .invoke('val')
-          .should('contain', "i shouldn't be here");
-      });
-
-      it('Unable to create a freeform proposal - when json terms section contains unexpected field', function () {
-        // 3001-VOTE-038
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.RAW);
-        cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
-          (closingDateTimestamp) => {
-            cy.fixture('/proposals/raw.json').then((rawProposal) => {
-              rawProposal.terms.closingTimestamp = closingDateTimestamp;
-              rawProposal.terms.unexpectedField = `i shouldn't be here`;
-              let proposalPayload = JSON.stringify(rawProposal);
-
-              cy.get(rawProposalData).type(proposalPayload, {
-                parseSpecialCharSequences: false,
-                delay: 2,
-              });
-            });
-          }
-        );
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-
-        cy.contains('Transaction failed', proposalTimeout).should('be.visible');
-        cy.get(feedbackError).should(
-          'have.text',
-          'Invalid params: the transaction is malformed'
-        );
-        cy.get(dialogCloseButton).click();
-      });
-
-      // 1005-PROP-009
-      it.skip(
-        'Unable to vote on a freeform proposal - when some but not enough vega associated',
-        { tags: '@smoke' },
-        function () {
-          const proposalTitle = generateProposalTitle();
-
-          cy.vega_wallet_teardown();
-          cy.ensure_specified_unstaked_tokens_are_associated(
-            this.minProposerBalance
-          );
-          cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-          cy.enter_unique_freeform_proposal_body('50', proposalTitle);
-          cy.get(newProposalSubmitButton).should('be.visible').click();
-          cy.wait_for_proposal_submitted();
-          cy.staking_page_disassociate_tokens('0.0001');
-          cy.get(vegaWallet).within(() => {
-            cy.get(vegaWalletAssociatedBalance, txTimeout).should(
-              'contain',
-              '0.9999'
-            );
-          });
-          cy.navigate_to('proposals');
-          cy.get_submitted_proposal_from_proposal_list(proposalTitle).within(
-            () => cy.get(viewProposalButton).click()
-          );
-          cy.contains('Vote breakdown').should('be.visible', {
-            timeout: 10000,
-          });
-          cy.get(voteButtons).should('not.exist');
-          cy.getByTestId('min-proposal-requirements').should(
-            'have.text',
-            `You must have at least ${this.minVoterBalance} VEGA associated to vote on this proposal`
-          );
-        }
-      );
-
-      it('Unable to vote on a proposal - when vega wallet disconnected - option to connect from within', function () {
-        createRawProposal(this.minProposerBalance);
-        cy.get('[data-testid="manage-vega-wallet"]').click();
-        cy.get('[data-testid="disconnect"]').click();
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_submitted_proposal_from_proposal_list(
-            rawProposal.rationale.title
-          ).within(() => cy.get(viewProposalButton).click());
-        });
-        // 3001-VOTE-075
-        // 3001-VOTE-076
-        cy.get(connectToVegaWalletButton)
-          .should('be.visible')
-          .and('have.text', 'Connect Vega wallet')
-          .click();
-        cy.getByTestId('connector-jsonRpc').click();
-        cy.get(vegaWalletNameElement).should('be.visible');
-        cy.get(connectToVegaWalletButton).should('not.exist');
-        // 3001-VOTE-100
-        cy.get(vegaWalletAssociatedBalance, txTimeout).contains(
-          '1.00',
-          txTimeout
-        );
-        cy.vote_for_proposal('against');
-        // 3001-VOTE-079
-        cy.contains('You voted: Against').should('be.visible');
-      });
-
-      function createRawProposal(proposerBalance) {
-        if (proposerBalance)
-          cy.ensure_specified_unstaked_tokens_are_associated(proposerBalance);
-        cy.go_to_make_new_proposal(governanceProposalType.RAW);
-        cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
-          (closingDateTimestamp) => {
-            cy.enter_raw_proposal_body(closingDateTimestamp).as('rawProposal');
-          }
-        );
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.wait_for_proposal_submitted();
-        cy.wait_for_proposal_sync();
-        cy.navigate_to('proposals');
-      }
-
-      function createFreeformProposal(proposerBalance, proposalTitle) {
-        cy.ensure_specified_unstaked_tokens_are_associated(proposerBalance);
-        cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-        cy.enter_unique_freeform_proposal_body('50', proposalTitle);
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.wait_for_proposal_submitted();
-        cy.wait_for_proposal_sync();
-        cy.get(proposalDetailsTitle).invoke('text').as('proposalTitle');
-        cy.navigate_to('proposals');
-      }
-
-      function generateProposalTitle() {
-        const randomNum = Math.floor(Math.random() * 1000) + 1;
-        return randomNum + ': Freeform e2e proposal';
-      }
-
-      // This is a workaround function to begin tests with associating tokens without failing
-      // Should be removed when eth transaction bug is fixed
-      function associateTokenStartOfTests() {
-        cy.highlight(`Associating tokens for first time`);
-        cy.ethereum_wallet_connect();
-        cy.connectVegaWallet();
-        cy.get('[href="/token/associate"]').first().click();
-        cy.getByTestId('associate-radio-wallet', { timeout: 30000 }).click();
-        cy.getByTestId('token-amount-input', epochTimeout).type('1');
-        cy.getByTestId('token-input-submit-button', txTimeout)
-          .should('be.enabled')
-          .click();
-        cy.contains(
-          `Associating with Vega key. Waiting for ${Cypress.env(
-            'blockConfirmations'
-          )} more confirmations..`,
-          txTimeout
-        ).should('be.visible');
-        cy.getByTestId('associated-amount', txTimeout).should(
-          'contain.text',
-          '1'
-        );
-        // Wait is needed to allow time for transaction to complete
-        // eslint-disable-next-line cypress/no-unnecessary-waiting
-        cy.wait(10000);
-        cy.vega_wallet_teardown();
-        cy.clearLocalStorage();
-      }
-    });
-  }
-);

apps/token-e2e/src/integration/flow/proposal-details.cy.js

@@ -0,0 +1,273 @@
+import { associateTokenStartOfTests } from '../../support/common.functions';
+import {
+  createRawProposal,
+  generateFreeFormProposalTitle,
+  governanceProposalType,
+} from '../../support/governance.functions';
+
+const proposalVoteProgressForPercentage =
+  '[data-testid="vote-progress-indicator-percentage-for"]';
+const proposalVoteProgressAgainstPercentage =
+  '[data-testid="vote-progress-indicator-percentage-against"]';
+const proposalVoteProgressForTokens =
+  '[data-testid="vote-progress-indicator-tokens-for"]';
+const proposalVoteProgressAgainstTokens =
+  '[data-testid="vote-progress-indicator-tokens-against"]';
+const changeVoteButton = '[data-testid="change-vote-button"]';
+const proposalDetailsTitle = '[data-testid="proposal-title"]';
+const proposalDetailsDescription = '[data-testid="proposal-description"]';
+const openProposals = '[data-testid="open-proposals"]';
+const viewProposalButton = '[data-testid="view-proposal-btn"]';
+
+describe(
+  'Governance flow for proposal details',
+  { tags: '@slow' },
+  function () {
+    before('connect wallets and set approval limit', function () {
+      cy.visit('/');
+      cy.vega_wallet_set_specified_approval_amount('1000');
+      associateTokenStartOfTests();
+    });
+
+    beforeEach('visit proposals tab', function () {
+      cy.reload();
+      cy.wait_for_spinner();
+      cy.connectVegaWallet();
+      cy.ethereum_wallet_connect();
+      cy.ensure_specified_unstaked_tokens_are_associated(1);
+      cy.navigate_to_page_if_not_already_loaded('proposals');
+    });
+
+    // 3001-VOTE-055
+    it('Newly created raw proposal details - shows proposal title and full description', function () {
+      createRawProposal();
+      cy.get('@rawProposal').then((rawProposal) => {
+        cy.get_proposal_id_from_list(rawProposal.rationale.title);
+        cy.get('@proposalIdText').then((proposalId) => {
+          cy.get(openProposals).within(() => {
+            cy.get(`#${proposalId}`).within(() => {
+              cy.get(viewProposalButton).should('be.visible').click();
+            });
+          });
+        });
+        cy.get(proposalDetailsTitle)
+          .should('contain', rawProposal.rationale.title)
+          .and('be.visible');
+        cy.get(proposalDetailsDescription)
+          .should('contain', rawProposal.rationale.description)
+          .and('be.visible');
+      });
+      // 3001-VOTE-052
+      cy.get('code.language-json')
+        .should('exist')
+        .within(() => {
+          cy.get('.hljs-string').eq(0).should('have.text', '"ProposalTerms"');
+        });
+    });
+
+    // 3001-VOTE-043
+    it('Newly created freeform proposal details - shows proposed and closing dates', function () {
+      const closingVoteHrs = '72';
+      const proposalTitle = generateFreeFormProposalTitle();
+
+      cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
+      cy.create_ten_digit_unix_timestamp_for_specified_days('3').then(
+        (closingDateTimestamp) => {
+          cy.enter_unique_freeform_proposal_body(closingVoteHrs, proposalTitle);
+
+          cy.wait_for_proposal_submitted();
+          cy.wait_for_proposal_sync();
+          cy.navigate_to('proposals');
+          cy.get_submitted_proposal_from_proposal_list(proposalTitle).within(
+            () => cy.get(viewProposalButton).click()
+          );
+          cy.convert_unix_timestamp_to_governance_data_table_date_format(
+            closingDateTimestamp
+          ).then((closingDate) => {
+            cy.get_proposal_information_from_table('Closes on')
+              .contains(closingDate)
+              .should('be.visible');
+          });
+        }
+      );
+      cy.get_governance_proposal_date_format_for_specified_days('0').then(
+        (proposalDate) => {
+          cy.get_proposal_information_from_table('Proposed on')
+            .contains(proposalDate)
+            .should('be.visible');
+        }
+      );
+    });
+
+    it('Newly created proposal details - shows default status set to fail', function () {
+      // 3001-VOTE-037
+      // 3001-VOTE-040
+      // 3001-VOTE-067
+      createRawProposal();
+      cy.get('@rawProposal').then((rawProposal) => {
+        cy.get_submitted_proposal_from_proposal_list(
+          rawProposal.rationale.title
+        ).within(() => cy.get(viewProposalButton).click());
+      });
+      cy.contains('Participation: Not Met 0.00 0.00%(0.00% Required)').should(
+        'be.visible'
+      );
+      cy.get_proposal_information_from_table('Expected to pass')
+        .contains('👎')
+        .should('be.visible');
+      // 3001-VOTE-062
+      // 3001-VOTE-040
+      // 3001-VOTE-070
+      cy.get_proposal_information_from_table('Token majority met')
+        .contains('👎')
+        .should('be.visible');
+      // 3001-VOTE-068
+      cy.get_proposal_information_from_table('Token participation met')
+        .contains('👎')
+        .should('be.visible');
+    });
+
+    // 3001-VOTE-080 3001-VOTE-090 3001-VOTE-069 3001-VOTE-072 3001-VOTE-073
+    it('Newly created proposal details - ability to vote for and against proposal - with minimum required tokens associated', function () {
+      createRawProposal();
+      cy.get('@rawProposal').then((rawProposal) => {
+        cy.get_submitted_proposal_from_proposal_list(
+          rawProposal.rationale.title
+        ).within(() => cy.get(viewProposalButton).click());
+      });
+      // 3001-VOTE-080
+      cy.getByTestId('vote-buttons').contains('against').should('be.visible');
+      cy.getByTestId('vote-buttons').contains('for').should('be.visible');
+      cy.vote_for_proposal('for');
+      cy.get_governance_proposal_date_format_for_specified_days(
+        '0',
+        'shortMonth'
+      ).then((votedDate) => {
+        // 3001-VOTE-051
+        // 3001-VOTE-093
+        cy.contains('You voted:')
+          .siblings()
+          .contains('For')
+          .siblings()
+          .contains(votedDate)
+          .should('be.visible');
+      });
+      cy.get(proposalVoteProgressForPercentage) // 3001-VOTE-072
+        .contains('100.00%')
+        .and('be.visible');
+      cy.get(proposalVoteProgressAgainstPercentage)
+        .contains('0.00%')
+        .and('be.visible');
+      cy.get(proposalVoteProgressForTokens).contains('1.00').and('be.visible');
+      cy.get(proposalVoteProgressAgainstTokens)
+        .contains('0.00')
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Tokens for proposal')
+        .should('have.text', parseFloat(1).toFixed(2))
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Tokens against proposal')
+        .should('have.text', '0.00')
+        .and('be.visible');
+      // 3001-VOTE-061
+      cy.get_proposal_information_from_table('Participation required')
+        .contains(0.001)
+        .should('be.visible');
+      // 3001-VOTE-066
+      cy.get_proposal_information_from_table('Majority Required') // 3001-VOTE-073
+        .contains(`${parseFloat(100).toFixed(2)}%`)
+        .should('be.visible');
+      cy.get_proposal_information_from_table('Number of voting parties')
+        .should('have.text', '1')
+        .and('be.visible');
+      cy.get(changeVoteButton).should('be.visible').click();
+      cy.vote_for_proposal('for');
+      // 3001-VOTE-064
+      cy.get_proposal_information_from_table('Tokens for proposal')
+        .should('have.text', parseFloat(1).toFixed(2))
+        .and('be.visible');
+      cy.get(changeVoteButton).should('be.visible').click();
+      cy.vote_for_proposal('against');
+      cy.get(proposalVoteProgressAgainstPercentage)
+        .contains('100.00%')
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Tokens against proposal')
+        .should('have.text', parseFloat(1).toFixed(2))
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Number of voting parties')
+        .should('have.text', '1')
+        .and('be.visible');
+    });
+
+    // 3001-VOTE-042, 3001-VOTE-057, 3001-VOTE-058, 3001-VOTE-059, 3001-VOTE-060
+    it('Newly created proposal details - ability to increase associated tokens - by voting again after association', function () {
+      createRawProposal();
+      cy.get('@rawProposal').then((rawProposal) => {
+        cy.get_submitted_proposal_from_proposal_list(
+          rawProposal.rationale.title
+        )
+          .as('submittedProposal')
+          .within(() => cy.get(viewProposalButton).click());
+      });
+      cy.vote_for_proposal('for');
+      // 3001-VOTE-079
+      cy.contains('You voted: For').should('be.visible');
+      cy.get(proposalVoteProgressForTokens).contains('1').and('be.visible');
+      cy.get_proposal_information_from_table('Total Supply')
+        .invoke('text')
+        .then((totalSupply) => {
+          let tokensRequiredToAchieveResult = parseFloat(
+            (totalSupply.replace(/,/g, '') * 0.001) / 100
+          ).toFixed(2);
+          cy.ensure_specified_unstaked_tokens_are_associated(
+            tokensRequiredToAchieveResult
+          );
+          cy.navigate_to_page_if_not_already_loaded('proposals');
+          cy.get('@submittedProposal').within(() =>
+            cy.get(viewProposalButton).click()
+          );
+          cy.get(proposalVoteProgressForPercentage)
+            .contains('100.00%')
+            .and('be.visible');
+          cy.get(proposalVoteProgressAgainstPercentage)
+            .contains('0.00%')
+            .and('be.visible');
+          // 3001-VOTE-065
+          cy.get(changeVoteButton).should('be.visible').click();
+          cy.vote_for_proposal('for');
+          cy.get(proposalVoteProgressForTokens)
+            .contains(tokensRequiredToAchieveResult)
+            .and('be.visible');
+          cy.get(proposalVoteProgressAgainstTokens)
+            .contains('0.00')
+            .and('be.visible');
+          cy.get_proposal_information_from_table(
+            'Total tokens voted percentage'
+          )
+            .should('have.text', '0.00%')
+            .and('be.visible');
+          cy.get_proposal_information_from_table('Tokens for proposal')
+            .should('have.text', tokensRequiredToAchieveResult)
+            .and('be.visible');
+          cy.get_proposal_information_from_table('Tokens against proposal')
+            .should('have.text', '0.00')
+            .and('be.visible');
+          cy.get_proposal_information_from_table('Number of voting parties')
+            .should('have.text', '1')
+            .and('be.visible');
+          cy.get_proposal_information_from_table('Expected to pass')
+            .contains('👍')
+            .should('be.visible');
+          // 3001-VOTE-062
+          cy.get_proposal_information_from_table('Token majority met')
+            .contains('👍')
+            .should('be.visible');
+          cy.get_proposal_information_from_table('Token participation met')
+            .contains('👍')
+            .should('be.visible');
+          cy.get_proposal_information_from_table('Tokens for proposal')
+            .contains(tokensRequiredToAchieveResult)
+            .and('be.visible');
+        });
+    });
+  }
+);

apps/token-e2e/src/integration/flow/proposal-enacted.cy.js

@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+import { associateTokenStartOfTests } from '../../support/governance.functions';
 
 import {
   createUpdateNetworkProposalTxBody,
@@ -21,6 +22,7 @@ context(
     before('Connect wallets and set approval', function () {
       cy.visit('/');
       cy.vega_wallet_set_specified_approval_amount('1000');
+      associateTokenStartOfTests();
       cy.connectVegaWallet();
       cy.ethereum_wallet_connect();
       cy.ensure_specified_unstaked_tokens_are_associated(1);

apps/token-e2e/src/integration/flow/proposal-flow.cy.js

@@ -0,0 +1,347 @@
+/// <reference types="cypress" />
+import {
+  createRawProposal,
+  generateFreeFormProposalTitle,
+  governanceProposalType,
+} from '../../support/governance.functions';
+
+import { associateTokenStartOfTests } from '../../support/common.functions';
+
+const vegaWalletUnstakedBalance =
+  '[data-testid="vega-wallet-balance-unstaked"]';
+const vegaWalletStakedBalances =
+  '[data-testid="vega-wallet-balance-staked-validators"]';
+const vegaWalletAssociatedBalance = '[data-testid="currency-value"]';
+const vegaWalletNameElement = '[data-testid="wallet-name"]';
+const vegaWallet = '[data-testid="vega-wallet"]';
+const connectToVegaWalletButton = '[data-testid="connect-to-vega-wallet-btn"]';
+const newProposalSubmitButton = '[data-testid="proposal-submit"]';
+const dialogCloseButton = '[data-testid="dialog-close"]';
+const viewProposalButton = '[data-testid="view-proposal-btn"]';
+const rawProposalData = '[data-testid="proposal-data"]';
+const minVoteButton = '[data-testid="min-vote"]';
+const maxVoteButton = '[data-testid="max-vote"]';
+const voteButtons = '[data-testid="vote-buttons"]';
+const votingDate = '[data-testid="voting-date"]';
+const voteTwoMinExtraNote = '[data-testid="voting-2-mins-extra"]';
+const rejectProposalsLink = '[href="/proposals/rejected"]';
+const feedbackError = '[data-testid="Error"]';
+const noOpenProposals = '[data-testid="no-open-proposals"]';
+const noClosedProposals = '[data-testid="no-closed-proposals"]';
+const txTimeout = Cypress.env('txTimeout');
+const epochTimeout = Cypress.env('epochTimeout');
+const proposalTimeout = { timeout: 14000 };
+
+context(
+  'Governance flow - with eth and vega wallets connected',
+  { tags: '@slow' },
+  function () {
+    before('connect wallets and set approval limit', function () {
+      cy.visit('/');
+      cy.get_network_parameters().then((network_parameters) => {
+        cy.wrap(
+          network_parameters['spam.protection.proposal.min.tokens'] /
+            1000000000000000000
+        ).as('minProposerBalance');
+        cy.wrap(
+          network_parameters['spam.protection.voting.min.tokens'] /
+            1000000000000000000
+        ).as('minVoterBalance');
+        cy.wrap(
+          network_parameters['governance.proposal.freeform.requiredMajority'] *
+            100
+        ).as('requiredMajority');
+      });
+
+      cy.vega_wallet_set_specified_approval_amount('1000');
+      associateTokenStartOfTests();
+    });
+
+    beforeEach('visit governance tab', function () {
+      cy.reload();
+      cy.wait_for_spinner();
+      cy.connectVegaWallet();
+      cy.ethereum_wallet_connect();
+      cy.ensure_specified_unstaked_tokens_are_associated(1);
+      cy.navigate_to_page_if_not_already_loaded('proposals');
+    });
+
+    it('Should be able to see that no proposals exist', function () {
+      // 3001-VOTE-003
+      cy.get(noOpenProposals)
+        .should('be.visible')
+        .and('have.text', 'There are no open or yet to enact proposals');
+      cy.get(noClosedProposals)
+        .should('be.visible')
+        .and('have.text', 'There are no enacted or rejected proposals');
+    });
+
+    // 3002-PROP-002
+    // 3002-PROP-003
+    it('Submit a proposal form - shows how many vega tokens are required to make a proposal', function () {
+      // 3002-PROP-005
+      cy.go_to_make_new_proposal(governanceProposalType.NEW_MARKET);
+      cy.contains(
+        `You must have at least 1 VEGA associated to make a proposal`
+      ).should('be.visible');
+    });
+
+    // 3002-PROP-011
+    it('Able to submit a valid freeform proposal - with minimum required tokens associated', function () {
+      cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
+      cy.get(minVoteButton).should('be.visible'); // 3002-PROP-008
+      cy.get(maxVoteButton).should('be.visible');
+      cy.get(votingDate).should('not.be.empty');
+      cy.get(voteTwoMinExtraNote).should(
+        'contain.text',
+        'we add 2 minutes of extra time'
+      );
+      cy.enter_unique_freeform_proposal_body(
+        '50',
+        generateFreeFormProposalTitle()
+      );
+      // 3002-PROP-012
+      // 3002-PROP-016
+      cy.wait_for_proposal_submitted();
+    });
+
+    it('Able to submit a valid freeform proposal - with minimum required tokens associated - but also staked', function () {
+      cy.ensure_specified_unstaked_tokens_are_associated('2');
+      cy.get(vegaWalletUnstakedBalance, txTimeout).should('contain', '2');
+      cy.navigate_to('validators');
+      cy.click_on_validator_from_list(0);
+      cy.staking_validator_page_add_stake('2');
+      cy.close_staking_dialog();
+
+      cy.get(vegaWalletStakedBalances, txTimeout).should('contain', '2');
+
+      cy.navigate_to('proposals');
+      cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
+      cy.enter_unique_freeform_proposal_body(
+        '50',
+        generateFreeFormProposalTitle()
+      );
+      cy.wait_for_proposal_submitted();
+    });
+
+    it('Creating a proposal - proposal rejected - when closing time sooner than system default', function () {
+      cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
+      cy.enter_unique_freeform_proposal_body(
+        '0.1',
+        generateFreeFormProposalTitle()
+      );
+      cy.contains('Awaiting network confirmation', epochTimeout).should(
+        'not.exist'
+      );
+      cy.get('input:invalid')
+        .invoke('prop', 'validationMessage')
+        .should('equal', 'Value must be greater than or equal to 1.');
+    });
+
+    it('Creating a proposal - proposal rejected - when closing time later than system default', function () {
+      cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
+      cy.enter_unique_freeform_proposal_body(
+        '100000',
+        generateFreeFormProposalTitle()
+      );
+      cy.contains('Awaiting network confirmation', epochTimeout).should(
+        'not.exist'
+      );
+      cy.get('input:invalid')
+        .invoke('prop', 'validationMessage')
+        .should('equal', 'Value must be less than or equal to 8760.');
+    });
+
+    // 3001-VOTE-006
+    it('Creating a proposal - proposal rejected - able to access rejected proposals', function () {
+      cy.go_to_make_new_proposal(governanceProposalType.RAW);
+      cy.create_ten_digit_unix_timestamp_for_specified_days('1000').then(
+        (closingDateTimestamp) => {
+          cy.enter_raw_proposal_body(closingDateTimestamp).as('rawProposal');
+        }
+      );
+      cy.contains('Awaiting network confirmation', epochTimeout).should(
+        'be.visible'
+      );
+      cy.contains('Proposal rejected', proposalTimeout).should('be.visible');
+      cy.get(dialogCloseButton).click();
+      cy.wait_for_proposal_sync();
+      cy.navigate_to('proposals');
+      cy.get(rejectProposalsLink).click();
+      cy.get('@rawProposal').then((rawProposal) => {
+        cy.get_submitted_proposal_from_proposal_list(
+          rawProposal.rationale.title
+        ).within(() => {
+          cy.contains('Rejected').should('be.visible');
+          cy.contains('Close time too late').should('be.visible');
+          cy.get(viewProposalButton).click();
+        });
+      });
+      cy.get_proposal_information_from_table('State')
+        .contains('Rejected')
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Rejection reason')
+        .contains('PROPOSAL_ERROR_CLOSE_TIME_TOO_LATE')
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Error details')
+        .contains('proposal closing time too late')
+        .and('be.visible');
+    });
+
+    // 0005-ETXN-004
+    it('Unable to create a proposal - when no tokens are associated', function () {
+      cy.vega_wallet_teardown();
+      cy.get(vegaWalletAssociatedBalance, txTimeout).contains(
+        '0.00',
+        txTimeout
+      );
+      cy.go_to_make_new_proposal(governanceProposalType.RAW);
+      cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
+        (closingDateTimestamp) => {
+          cy.enter_raw_proposal_body(closingDateTimestamp).as;
+        }
+      );
+      cy.contains('Transaction failed', proposalTimeout).should('be.visible');
+      cy.get(feedbackError).should(
+        'have.text',
+        'Network error: the network blocked the transaction through the spam protection'
+      );
+      cy.get(dialogCloseButton).click();
+    });
+
+    // 3002-PROP-009
+    it('Unable to create a proposal - when some but not enough tokens are associated', function () {
+      cy.ensure_specified_unstaked_tokens_are_associated(0.000001);
+      cy.go_to_make_new_proposal(governanceProposalType.RAW);
+      cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
+        (closingDateTimestamp) => {
+          cy.enter_raw_proposal_body(closingDateTimestamp);
+        }
+      );
+      cy.contains('Transaction failed', proposalTimeout).should('be.visible');
+      cy.get(feedbackError).should(
+        'have.text',
+        'Network error: the network blocked the transaction through the spam protection'
+      );
+      cy.get(dialogCloseButton).click();
+    });
+
+    it('Unable to create a freeform proposal - when json parent section contains unexpected field', function () {
+      // 3001-VOTE-038 3002-PROP-013 3002-PROP-014
+      cy.go_to_make_new_proposal(governanceProposalType.RAW);
+      cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
+        (closingDateTimestamp) => {
+          cy.fixture('/proposals/raw.json').then((freeformProposal) => {
+            freeformProposal.terms.closingTimestamp = closingDateTimestamp;
+            freeformProposal.unexpected = `i shouldn't be here`;
+            let proposalPayload = JSON.stringify(freeformProposal);
+            cy.get(rawProposalData).type(proposalPayload, {
+              parseSpecialCharSequences: false,
+              delay: 2,
+            });
+          });
+        }
+      );
+      cy.get(newProposalSubmitButton).should('be.visible').click();
+
+      cy.contains('Transaction failed', proposalTimeout).should('be.visible');
+      cy.get(feedbackError).should(
+        'have.text',
+        'Invalid params: the transaction is malformed'
+      );
+      cy.get(dialogCloseButton).click();
+      cy.get(rawProposalData)
+        .invoke('val')
+        .should('contain', "i shouldn't be here");
+    });
+
+    it('Unable to create a freeform proposal - when json terms section contains unexpected field', function () {
+      // 3001-VOTE-038
+      cy.go_to_make_new_proposal(governanceProposalType.RAW);
+      cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
+        (closingDateTimestamp) => {
+          cy.fixture('/proposals/raw.json').then((rawProposal) => {
+            rawProposal.terms.closingTimestamp = closingDateTimestamp;
+            rawProposal.terms.unexpectedField = `i shouldn't be here`;
+            let proposalPayload = JSON.stringify(rawProposal);
+
+            cy.get(rawProposalData).type(proposalPayload, {
+              parseSpecialCharSequences: false,
+              delay: 2,
+            });
+          });
+        }
+      );
+      cy.get(newProposalSubmitButton).should('be.visible').click();
+
+      cy.contains('Transaction failed', proposalTimeout).should('be.visible');
+      cy.get(feedbackError).should(
+        'have.text',
+        'Invalid params: the transaction is malformed'
+      );
+      cy.get(dialogCloseButton).click();
+    });
+
+    // 1005-PROP-009
+    it.skip(
+      'Unable to vote on a freeform proposal - when some but not enough vega associated',
+      { tags: '@smoke' },
+      function () {
+        const proposalTitle = generateFreeFormProposalTitle();
+
+        cy.ensure_specified_unstaked_tokens_are_associated(1);
+        cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
+        cy.enter_unique_freeform_proposal_body('50', proposalTitle);
+        cy.wait_for_proposal_submitted();
+        cy.staking_page_disassociate_tokens('0.0001');
+        cy.get(vegaWallet).within(() => {
+          cy.get(vegaWalletAssociatedBalance).should('have.length', 1);
+          cy.get(vegaWalletAssociatedBalance, txTimeout).should(
+            'contain',
+            '0.9999'
+          );
+        });
+        cy.navigate_to('proposals');
+        cy.get_submitted_proposal_from_proposal_list(proposalTitle).within(() =>
+          cy.get(viewProposalButton).click()
+        );
+        cy.contains('Vote breakdown').should('be.visible', {
+          timeout: 10000,
+        });
+        cy.get(voteButtons).should('not.exist');
+        cy.getByTestId('min-proposal-requirements').should(
+          'have.text',
+          `You must have at least ${this.minVoterBalance} VEGA associated to vote on this proposal`
+        );
+      }
+    );
+
+    it('Unable to vote on a proposal - when vega wallet disconnected - option to connect from within', function () {
+      createRawProposal();
+      cy.get('[data-testid="manage-vega-wallet"]').click();
+      cy.get('[data-testid="disconnect"]').click();
+      cy.get('@rawProposal').then((rawProposal) => {
+        cy.get_submitted_proposal_from_proposal_list(
+          rawProposal.rationale.title
+        ).within(() => cy.get(viewProposalButton).click());
+      });
+      // 3001-VOTE-075
+      // 3001-VOTE-076
+      cy.get(connectToVegaWalletButton)
+        .should('be.visible')
+        .and('have.text', 'Connect Vega wallet')
+        .click();
+      cy.getByTestId('connector-jsonRpc').click();
+      cy.get(vegaWalletNameElement).should('be.visible');
+      cy.get(connectToVegaWalletButton).should('not.exist');
+      // 3001-VOTE-100
+      cy.get(vegaWalletAssociatedBalance, txTimeout).contains(
+        '1.00',
+        txTimeout
+      );
+      cy.vote_for_proposal('against');
+      // 3001-VOTE-079
+      cy.contains('You voted: Against').should('be.visible');
+    });
+  }
+);

apps/token-e2e/src/integration/flow/proposal-forms.cy.js

@@ -54,11 +54,11 @@ context(
       cy.wait_for_spinner();
       cy.connectVegaWallet();
       cy.ethereum_wallet_connect();
+      cy.ensure_specified_unstaked_tokens_are_associated('1');
       cy.navigate_to('proposals');
     });
 
     it('Able to submit valid update network parameter proposal', function () {
-      cy.ensure_specified_unstaked_tokens_are_associated('1');
       cy.go_to_make_new_proposal(governanceProposalType.NETWORK_PARAMETER);
       // 3002-PROP-006
       cy.get(newProposalTitle).type('Test update network parameter proposal');

apps/token-e2e/src/integration/flow/proposal-list.cy.js

@@ -0,0 +1,162 @@
+import {
+  createFreeformProposal,
+  createRawProposal,
+  generateFreeFormProposalTitle,
+  governanceProposalType,
+} from '../../support/governance.functions';
+
+const proposalDetailsTitle = '[data-testid="proposal-title"]';
+const openProposals = '[data-testid="open-proposals"]';
+const voteStatus = '[data-testid="vote-status"]';
+const viewProposalButton = '[data-testid="view-proposal-btn"]';
+
+describe('Governance flow for proposal list', { tags: '@slow' }, function () {
+  before('connect wallets and set approval limit', function () {
+    cy.vega_wallet_set_specified_approval_amount('1000');
+    cy.visit('/');
+  });
+
+  beforeEach('visit proposals tab', function () {
+    cy.reload();
+    cy.wait_for_spinner();
+    cy.connectVegaWallet();
+    cy.ethereum_wallet_connect();
+    cy.ensure_specified_unstaked_tokens_are_associated(1);
+    cy.navigate_to_page_if_not_already_loaded('proposals');
+  });
+
+  it('Newly created proposals list - proposals closest to closing date appear higher in list', function () {
+    const minCloseDays = 2;
+    const maxCloseDays = 3;
+
+    // 3001-VOTE-005
+    let proposalDays = [
+      minCloseDays + 1,
+      maxCloseDays,
+      minCloseDays + 3,
+      minCloseDays + 2,
+    ];
+    for (var index = 0; index < proposalDays.length; index++) {
+      cy.go_to_make_new_proposal(governanceProposalType.RAW);
+      cy.create_ten_digit_unix_timestamp_for_specified_days(
+        proposalDays[index]
+      ).then((closingDateTimestamp) => {
+        cy.enter_raw_proposal_body(closingDateTimestamp);
+      });
+      cy.wait_for_proposal_submitted();
+      cy.wait_for_proposal_sync();
+    }
+
+    let arrayOfProposals = [];
+
+    cy.navigate_to('proposals');
+    cy.get(proposalDetailsTitle)
+      .each((proposalTitleElement) => {
+        arrayOfProposals.push(proposalTitleElement.text());
+      })
+      .then(() => {
+        cy.get_sort_order_of_supplied_array(arrayOfProposals).should(
+          'equal',
+          'descending'
+        );
+      });
+  });
+
+  it('Newly created proposals list - able to filter by proposerID to show it in list', function () {
+    const proposerId = Cypress.env('vegaWalletPublicKey');
+    const proposalTitle = generateFreeFormProposalTitle();
+
+    createFreeformProposal(proposalTitle);
+    cy.get_proposal_id_from_list(proposalTitle);
+    cy.get('@proposalIdText').then((proposalId) => {
+      cy.get('[data-testid="set-proposals-filter-visible"]').click();
+      cy.get('[data-testid="filter-input"]').type(proposerId);
+      cy.get(`#${proposalId}`).should('contain', proposalId);
+    });
+  });
+
+  it('Newly created proposals list - shows title and portion of summary', function () {
+    createRawProposal(this.minProposerBalance); // 3001-VOTE-052
+    cy.get('@rawProposal').then((rawProposal) => {
+      cy.get_proposal_id_from_list(rawProposal.rationale.title);
+      cy.get('@proposalIdText').then((proposalId) => {
+        cy.get(openProposals).within(() => {
+          // 3001-VOTE-008
+          // 3001-VOTE-034
+          cy.get(`#${proposalId}`)
+            // 3001-VOTE-097
+            .should('contain', rawProposal.rationale.title)
+            .and('be.visible');
+          cy.get(`#${proposalId}`)
+            .should(
+              'contain',
+              rawProposal.rationale.description.substring(0, 59)
+            )
+            .and('be.visible');
+        });
+      });
+    });
+  });
+
+  it('Newly created proposals list - shows open proposals in an open state', function () {
+    // 3001-VOTE-004
+    // 3001-VOTE-035
+    createRawProposal(this.minProposerBalance);
+    cy.get('@rawProposal').then((rawProposal) => {
+      cy.get_submitted_proposal_from_proposal_list(
+        rawProposal.rationale.title
+      ).within(() => {
+        cy.get(viewProposalButton).should('be.visible').click();
+      });
+      cy.get('@proposalIdText').then((proposalId) => {
+        cy.get_proposal_information_from_table('ID')
+          .contains(proposalId)
+          .and('be.visible');
+      });
+      cy.get_proposal_information_from_table('State')
+        .contains('Open')
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Type')
+        .contains('Freeform')
+        .and('be.visible');
+    });
+  });
+
+  // 3001-VOTE-071
+  it('Newly created freeform proposals list - shows proposal participation - both met and not', function () {
+    const proposalTitle = generateFreeFormProposalTitle();
+    const requiredParticipation = 0.001;
+
+    createFreeformProposal(proposalTitle);
+
+    cy.get_submitted_proposal_from_proposal_list(proposalTitle)
+      .as('submittedProposal')
+      .within(() => {
+        // 3001-VOTE-039
+        cy.get(voteStatus).should('have.text', 'Participation not reached');
+        cy.get(viewProposalButton).click();
+      });
+    cy.vote_for_proposal('for');
+    cy.get_proposal_information_from_table('Total Supply')
+      .invoke('text')
+      .then((totalSupply) => {
+        let tokensRequiredToAchieveResult = parseFloat(
+          (totalSupply.replace(/,/g, '') * requiredParticipation) / 100
+        ).toFixed(2);
+        cy.ensure_specified_unstaked_tokens_are_associated(
+          tokensRequiredToAchieveResult
+        );
+        cy.navigate_to_page_if_not_already_loaded('proposals');
+        cy.get('@submittedProposal').within(() =>
+          cy.get(viewProposalButton).click()
+        );
+        cy.get_proposal_information_from_table('Token participation met')
+          .contains('👍')
+          .should('be.visible');
+        cy.navigate_to('proposals');
+        cy.get('@submittedProposal').within(() =>
+          cy.get(voteStatus).should('have.text', 'Set to pass')
+        );
+      });
+  });
+});

apps/token-e2e/src/integration/view/pubkey-view.cy.js

@@ -38,7 +38,6 @@ context('View functionality with public key', { tags: '@smoke' }, function () {
     cy.navigate_to('proposals');
     cy.go_to_make_new_proposal('Freeform');
     cy.enter_unique_freeform_proposal_body('50', 'pub key proposal test');
-    cy.getByTestId('proposal-submit').should('be.visible').click();
     cy.getByTestId('dialog-content').within(() => {
       cy.get('h1').should('have.text', 'Transaction failed');
       cy.getByTestId('Error').should('have.text', expectedErrorTxt);

apps/token-e2e/src/integration/view/validators.cy.js

@@ -201,12 +201,21 @@ context('Staking Page - verify elements on page', function () {
         cy.get(stakeShare)
           .invoke('text')
           .then(($stakePercentage) => {
-            if ($stakePercentage != '-') {
-              cy.wrap($stakePercentage).should(
-                'match',
-                /\b(?<!\.)(?!0+(?:\.0+)?%)(?:\d|[1-9]\d|100)(?:(?<!100)\.\d+)?%/
-              );
-            }
+            // The pattern must start at a word boundary (\b).
+            // The pattern cannot be immediately preceded by a dot ((?<!\.)).
+            // The pattern can be one of the following:
+            // A percentage value of zero (0%), or
+            // A non-zero percentage value that can be:
+            // A single digit (\d) between 0 and 9, or
+            // A two-digit number between 0 and 99 (\d{1,2}), or
+            // The number 100.
+            // The pattern can optionally include a decimal point and one or more digits after the decimal point ((?:(?<!100)\.\d+)?). However, if the number is 100, it cannot have a decimal point.
+            // The pattern must end with a percentage sign (%).
+
+            cy.wrap($stakePercentage).should(
+              'match',
+              /\b(?<!\.)(?:0+(?:\.0+)?%|(?:\d|\d{1,2}|100)(?:(?<!100)\.\d+)?)%/
+            );
           });
       });
 

apps/token-e2e/src/support/common.functions.js

@@ -1,3 +1,6 @@
+const epochTimeout = Cypress.env('epochTimeout');
+const txTimeout = Cypress.env('txTimeout');
+
 Cypress.Commands.add(
   'convert_token_value_to_number',
   { prevSubject: true },
@@ -49,3 +52,29 @@ Cypress.Commands.add('wait_for_spinner', () => {
   cy.get(navigation.pageSpinner, Cypress.env('epochTimeout')).should('exist');
   cy.get(navigation.pageSpinner, { timeout: 20000 }).should('not.exist');
 });
+
+// This is a workaround function to begin tests with associating tokens without failing
+// Should be removed when eth transaction bug is fixed
+export function associateTokenStartOfTests() {
+  cy.highlight(`Associating tokens for first time`);
+  cy.ethereum_wallet_connect();
+  cy.connectVegaWallet();
+  cy.get('[href="/token/associate"]').first().click();
+  cy.getByTestId('associate-radio-wallet', { timeout: 30000 }).click();
+  cy.getByTestId('token-amount-input', epochTimeout).type('1');
+  cy.getByTestId('token-input-submit-button', txTimeout)
+    .should('be.enabled')
+    .click();
+  cy.contains(
+    `Associating with Vega key. Waiting for ${Cypress.env(
+      'blockConfirmations'
+    )} more confirmations..`,
+    txTimeout
+  ).should('be.visible');
+  cy.getByTestId('associated-amount', txTimeout).should('contain.text', '1');
+  // Wait is needed to allow time for transaction to complete
+  // eslint-disable-next-line cypress/no-unnecessary-waiting
+  cy.wait(10000);
+  cy.vega_wallet_teardown();
+  cy.clearLocalStorage();
+}

apps/token-e2e/src/support/governance.functions.js

@@ -8,6 +8,7 @@ const rawProposalData = '[data-testid="proposal-data"]';
 const voteButtons = '[data-testid="vote-buttons"]';
 const dialogTitle = '[data-testid="dialog-title"]';
 const proposalVoteDeadline = '[data-testid="proposal-vote-deadline"]';
+const newProposalSubmitButton = '[data-testid="proposal-submit"]';
 const dialogCloseButton = '[data-testid="dialog-close"]';
 const epochTimeout = Cypress.env('epochTimeout');
 const proposalTimeout = { timeout: 14000 };
@@ -61,6 +62,7 @@ Cypress.Commands.add('enter_raw_proposal_body', (timestamp) => {
       parseSpecialCharSequences: false,
       delay: 2,
     });
+    cy.get(newProposalSubmitButton).should('be.visible').click();
     cy.wrap(rawProposal);
   });
 });
@@ -73,6 +75,7 @@ Cypress.Commands.add(
       'this is a e2e freeform proposal description'
     );
     cy.get(proposalVoteDeadline).clear().click().type(timestamp);
+    cy.getByTestId('proposal-submit').should('be.visible').click();
   }
 );
 
@@ -185,3 +188,40 @@ Cypress.Commands.add('wait_for_proposal_submitted', () => {
   cy.contains('Proposal submitted', proposalTimeout).should('be.visible');
   cy.get(dialogCloseButton).click();
 });
+
+export function createRawProposal(proposerBalance) {
+  if (proposerBalance)
+    cy.ensure_specified_unstaked_tokens_are_associated(proposerBalance);
+  cy.go_to_make_new_proposal('raw proposal');
+  cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
+    (closingDateTimestamp) => {
+      cy.enter_raw_proposal_body(closingDateTimestamp).as('rawProposal');
+    }
+  );
+  cy.wait_for_proposal_submitted();
+  cy.wait_for_proposal_sync();
+  cy.navigate_to('proposals');
+}
+
+export function generateFreeFormProposalTitle() {
+  const randomNum = Math.floor(Math.random() * 1000) + 1;
+  return randomNum + ': Freeform e2e proposal';
+}
+
+export function createFreeformProposal(proposalTitle) {
+  cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
+  cy.enter_unique_freeform_proposal_body('50', proposalTitle);
+  cy.wait_for_proposal_submitted();
+  cy.wait_for_proposal_sync();
+  cy.getByTestId('proposal-title').invoke('text').as('proposalTitle');
+  cy.navigate_to('proposals');
+}
+
+export const governanceProposalType = {
+  NETWORK_PARAMETER: 'Network parameter',
+  NEW_MARKET: 'New market',
+  UPDATE_MARKET: 'Update market',
+  NEW_ASSET: 'New asset',
+  FREEFORM: 'Freeform',
+  RAW: 'raw proposal',
+};

apps/token/src/hooks/use-pending-balances-manager.spec.ts

@@ -1,4 +1,4 @@
-import { act } from '@testing-library/react-hooks';
+import { act } from '@testing-library/react';
 import { usePendingBalancesStore } from './use-pending-balances-manager';
 import type { Event } from 'ethers';
 

apps/token/src/hooks/use-pending-balances-manager.ts

@@ -1,7 +1,6 @@
-import type { Event } from 'ethers';
 import uniqBy from 'lodash/uniqBy';
-
-import create from 'zustand';
+import { create } from 'zustand';
+import type { Event } from 'ethers';
 
 export type PendingTxsStore = {
   pendingBalances: Event[];

apps/token/src/i18n/translations/dev.json

@@ -432,6 +432,7 @@
   "associatedWithVegaKeys": "Associated with Vega keys",
   "thisEpoch": "This Epoch",
   "nextEpoch": "Next epoch",
+  "toSeeYourRewardsConnectYourWallet": "TO SEE YOUR REWARDS, CONNECT YOUR WALLET",
   "rewardsIntro": "Earn rewards and infrastructure fees for trading and maintaining the network.",
   "rewardsCallout": "Rewards are credited {{duration}} after the epoch ends.",
   "rewardsCalloutDetail": "This delay is set by a network parameter",
@@ -457,6 +458,7 @@
   "rewardsColMarketCreationHeader": "MARKET CREATION",
   "rewardsColMarketCreationTooltip": "Market creation rewards are paid out to the creator of any market that exceeds a set threshold of cumulative volume in a given epoch, currently [rewards.marketCreationQuantumMultiple]",
   "rewardsColTotalHeader": "TOTAL",
+  "ofTotalDistributed": "of total distributed",
   "checkBackSoon": "Check back soon",
   "yourStake": "Your stake",
   "reward": "Reward",
@@ -742,13 +744,22 @@
   "Proposals": "Proposals",
   "Validators": "Validators",
   "Redeem": "Redeem",
+  "validatorFormIntro": "To learn more about validators and how scores are calculated,",
+  "readMoreValidatorForm": "read about staking on Vega",
   "StakeDescription": "The total amount $VEGA staked to this validator including self-stake and all delegation.",
-  "NormalisedVotingPowerDescription": "Voting power is the relative weighting given to the validator in tendermint consensus. It is calculated based on the stake share of the validator minus any penalties due to overstaking or performance.",
   "StakeShareDescription": "The stake a validator represents as a share of total stake across the network.",
   "TotalPenaltiesDescription": "Total of penalties taking into account performance (considering proportion of blocks proposed against the number of blocks the validator was expected to propose) and any overstaking.",
   "PendingStakeDescription": "The amount of stake that will be added or removed from the validator from the next epoch.",
   "StakeNeededForPromotionStandbyDescription": "{{prefix}} additional stake needed for promotion to consensus, assuming constant performance in line with previous epoch.",
   "StakeNeededForPromotionCandidateDescription": "{{prefix}} additional stake needed for promotion to standby, assuming constant performance in line with previous epoch.",
+  "StakedByOperatorDescription": "The stake provided as self-stake by the node operator, must be at least the minimum stake as defined by network parameter",
+  "AboutThisValidatorDescription": "External URL provided by the validator linking to information about themselves",
+  "ValidatorStatusDescription": "Consensus, Standby or Pending (Candidate), depending on how much stake the validator has attracted",
+  "StakedByDelegatesDescription": "The stake delegated to the node by other users",
+  "OverstakedPenaltyDescription": "A penalty applied for having more stake than the optimal stake for the network. Designed to avoid concentration of voting power with a small number of validators",
+  "PerformancePenaltyDescription": "Performance score is a measure of how often a validator proposed blocks in the last epoch relative to how many they should be expected to propose based on their voting power. Performance penalty is applied for having a performance score of less than 1",
+  "UnnormalisedVotingPowerDescription": "The voting power of the validator based on their final validator score after all penalties have been applied",
+  "NormalisedVotingPowerDescription": "The voting power of the validator, adjusted to ensure all validator scores sum to 1, used for distribution of rewards",
   "Score": "Score",
   "performancePenalty": "Performance penalty",
   "overstaked": "Overstaked",

apps/token/src/routes/proposals/proposal/Proposal.graphql

@@ -137,6 +137,24 @@ query Proposal($proposalId: ID!) {
               }
             }
           }
+          priceMonitoringParameters {
+            triggers {
+              horizonSecs
+              probability
+              auctionExtensionSecs
+            }
+          }
+          liquidityMonitoringParameters {
+            triggeringRatio
+            targetStakeParameters {
+              timeWindow
+              scalingFactor
+            }
+          }
+          positionDecimalPlaces
+          lpPriceRange
+          linearSlippageFactor
+          quadraticSlippageFactor
         }
         ... on UpdateMarket {
           marketId

apps/token/src/routes/rewards/connect-to-see-rewards.spec.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+import { AppStateProvider } from '../../contexts/app-state/app-state-provider';
+import { ConnectToSeeRewards } from './connect-to-see-rewards';
+
+describe('ConnectToSeeRewards', () => {
+  it('should render button correctly', () => {
+    const { getByTestId } = render(
+      <AppStateProvider>
+        <ConnectToSeeRewards />
+      </AppStateProvider>
+    );
+    expect(getByTestId('connect-to-vega-wallet-btn')).toBeInTheDocument();
+  });
+
+  it('should render the correct text', () => {
+    const { getByText } = render(
+      <AppStateProvider>
+        <ConnectToSeeRewards />
+      </AppStateProvider>
+    );
+    expect(
+      getByText('TO SEE YOUR REWARDS, CONNECT YOUR WALLET')
+    ).toBeInTheDocument();
+  });
+});

apps/token/src/routes/rewards/connect-to-see-rewards.tsx

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { useVegaWalletDialogStore } from '@vegaprotocol/wallet';
+import { Button } from '@vegaprotocol/ui-toolkit';
+import {
+  AppStateActionType,
+  useAppState,
+} from '../../contexts/app-state/app-state-context';
+import { SubHeading } from '../../components/heading';
+
+export const ConnectToSeeRewards = () => {
+  const { appDispatch } = useAppState();
+  const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({
+    openVegaWalletDialog: store.openVegaWalletDialog,
+  }));
+  const { t } = useTranslation();
+
+  const classes = classNames(
+    'flex flex-col items-center justify-center h-[300px] w-full',
+    'border border-vega-dark-200'
+  );
+
+  return (
+    <div className={classes}>
+      <SubHeading title={t('toSeeYourRewardsConnectYourWallet')} />
+      <Button
+        data-testid="connect-to-vega-wallet-btn"
+        onClick={() => {
+          appDispatch({
+            type: AppStateActionType.SET_VEGA_WALLET_OVERLAY,
+            isOpen: true,
+          });
+          openVegaWalletDialog();
+        }}
+      >
+        {t('connectVegaWallet')}
+      </Button>
+    </div>
+  );
+};

apps/token/src/routes/rewards/epoch-individual-awards/reward-table.tsx

@@ -1,79 +0,0 @@
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAppState } from '../../../contexts/app-state/app-state-context';
-import { formatNumber, toBigNum } from '@vegaprotocol/react-helpers';
-import { BigNumber } from '../../../lib/bignumber';
-import { KeyValueTable, KeyValueTableRow } from '@vegaprotocol/ui-toolkit';
-import { format } from 'date-fns';
-import { DATE_FORMAT_DETAILED } from '../../../lib/date-formats';
-import type {
-  DelegationFieldsFragment,
-  RewardFieldsFragment,
-} from '../home/__generated__/Rewards';
-
-interface RewardTableProps {
-  reward: RewardFieldsFragment;
-  delegations: DelegationFieldsFragment[] | [];
-}
-
-export const RewardTable = ({ reward, delegations }: RewardTableProps) => {
-  const { t } = useTranslation();
-  const {
-    appState: { decimals },
-  } = useAppState();
-
-  // Get your stake for epoch in which you have rewards
-  const stakeForEpoch = useMemo(() => {
-    if (!delegations.length) return '0';
-
-    const delegationsForEpoch = delegations
-      .filter((d) => d.epoch.toString() === reward.epoch.id)
-      .map((d) => toBigNum(d.amount, decimals));
-
-    if (delegationsForEpoch.length) {
-      return BigNumber.sum.apply(null, [
-        new BigNumber(0),
-        ...delegationsForEpoch,
-      ]);
-    }
-
-    return new BigNumber(0);
-  }, [decimals, delegations, reward.epoch.id]);
-
-  return (
-    <div className="mb-24">
-      <h3 className="text-lg text-white mb-4">
-        {t('Epoch')} {reward.epoch.id}
-      </h3>
-      <KeyValueTable>
-        <KeyValueTableRow>
-          {t('rewardType')}
-          <span>{reward.rewardType}</span>
-        </KeyValueTableRow>
-        <KeyValueTableRow>
-          {t('yourStake')}
-          <span>{stakeForEpoch.toString()}</span>
-        </KeyValueTableRow>
-        <KeyValueTableRow>
-          {t('reward')}
-          <span>
-            {formatNumber(toBigNum(reward.amount, decimals))}{' '}
-            {reward.asset.symbol}
-          </span>
-        </KeyValueTableRow>
-        <KeyValueTableRow>
-          {t('shareOfReward')}
-          <span>
-            {new BigNumber(reward.percentageOfTotal).dp(2).toString()}%
-          </span>
-        </KeyValueTableRow>
-        <KeyValueTableRow>
-          {t('received')}
-          <span>
-            {format(new Date(reward.receivedAt), DATE_FORMAT_DETAILED)}
-          </span>
-        </KeyValueTableRow>
-      </KeyValueTable>
-    </div>
-  );
-};

apps/token/src/routes/rewards/epoch-individual-rewards/epoch-individual-rewards-table.spec.tsx

@@ -0,0 +1,63 @@
+import { render } from '@testing-library/react';
+import { AppStateProvider } from '../../../contexts/app-state/app-state-provider';
+import { EpochIndividualRewardsTable } from './epoch-individual-rewards-table';
+
+const mockData = {
+  epoch: '4441',
+  rewards: [
+    {
+      asset: 'tDAI',
+      totalAmount: '5',
+      rewardTypes: {
+        ACCOUNT_TYPE_GLOBAL_REWARD: {
+          amount: '0',
+          percentageOfTotal: '0',
+        },
+        ACCOUNT_TYPE_FEES_INFRASTRUCTURE: {
+          amount: '5',
+          percentageOfTotal: '0.00305237260923',
+        },
+        ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES: {
+          amount: '0',
+          percentageOfTotal: '0',
+        },
+        ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES: {
+          amount: '0',
+          percentageOfTotal: '0',
+        },
+        ACCOUNT_TYPE_FEES_LIQUIDITY: {
+          amount: '0',
+          percentageOfTotal: '0',
+        },
+        ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS: {
+          amount: '0',
+          percentageOfTotal: '0',
+        },
+      },
+    },
+  ],
+};
+
+describe('EpochIndividualRewardsTable', () => {
+  it('should render correctly', () => {
+    const { getByTestId } = render(
+      <AppStateProvider>
+        <EpochIndividualRewardsTable data={mockData} />
+      </AppStateProvider>
+    );
+    expect(getByTestId('epoch-individual-rewards-table')).toBeInTheDocument();
+    expect(getByTestId('individual-rewards-asset')).toBeInTheDocument();
+    expect(getByTestId('ACCOUNT_TYPE_GLOBAL_REWARD')).toBeInTheDocument();
+    expect(getByTestId('ACCOUNT_TYPE_FEES_INFRASTRUCTURE')).toBeInTheDocument();
+    expect(
+      getByTestId('ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES')
+    ).toBeInTheDocument();
+    expect(
+      getByTestId('ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES')
+    ).toBeInTheDocument();
+    expect(getByTestId('ACCOUNT_TYPE_FEES_LIQUIDITY')).toBeInTheDocument();
+    expect(
+      getByTestId('ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS')
+    ).toBeInTheDocument();
+  });
+});

apps/token/src/routes/rewards/epoch-individual-rewards/epoch-individual-rewards-table.tsx

@@ -0,0 +1,111 @@
+import { formatNumber, toBigNum } from '@vegaprotocol/react-helpers';
+import { Tooltip } from '@vegaprotocol/ui-toolkit';
+import { useAppState } from '../../../contexts/app-state/app-state-context';
+import {
+  rowGridItemStyles,
+  RewardsTable,
+} from '../shared-rewards-table-assets/shared-rewards-table-assets';
+import type { EpochIndividualReward } from './generate-epoch-individual-rewards-list';
+import { useTranslation } from 'react-i18next';
+
+interface EpochIndividualRewardsGridProps {
+  data: EpochIndividualReward;
+}
+
+interface RewardItemProps {
+  value: string;
+  percentageOfTotal?: string;
+  dataTestId: string;
+  last?: boolean;
+}
+
+const DisplayReward = ({
+  reward,
+  percentageOfTotal,
+}: {
+  reward: string;
+  percentageOfTotal?: string;
+}) => {
+  const { t } = useTranslation();
+  const {
+    appState: { decimals },
+  } = useAppState();
+
+  if (Number(reward) === 0) {
+    return <span className="text-vega-dark-300">-</span>;
+  }
+
+  return (
+    <Tooltip
+      description={
+        <div className="flex flex-col items-start">
+          <span>{formatNumber(toBigNum(reward, decimals), decimals)}</span>
+          {percentageOfTotal && (
+            <span className="text-vega-dark-300">
+              ({percentageOfTotal}% {t('ofTotalDistributed')})
+            </span>
+          )}
+        </div>
+      }
+    >
+      <button>
+        <div className="flex flex-col items-start">
+          <span>{formatNumber(toBigNum(reward, decimals))}</span>
+          {percentageOfTotal && (
+            <span className="text-vega-dark-300">
+              ({formatNumber(toBigNum(percentageOfTotal, 4)).toString()}%)
+            </span>
+          )}
+        </div>
+      </button>
+    </Tooltip>
+  );
+};
+
+const RewardItem = ({
+  value,
+  percentageOfTotal,
+  dataTestId,
+  last,
+}: RewardItemProps) => (
+  <div data-testid={dataTestId} className={rowGridItemStyles(last)}>
+    <div className="h-full w-5 absolute right-0 top-0 bg-gradient-to-r from-transparent to-black pointer-events-none" />
+    <div className="overflow-auto p-5">
+      <DisplayReward reward={value} percentageOfTotal={percentageOfTotal} />
+    </div>
+    <div className="h-full w-5 absolute left-0 top-0 bg-gradient-to-l from-transparent to-black pointer-events-none" />
+  </div>
+);
+
+export const EpochIndividualRewardsTable = ({
+  data,
+}: EpochIndividualRewardsGridProps) => {
+  return (
+    <RewardsTable
+      dataTestId="epoch-individual-rewards-table"
+      epoch={Number(data.epoch)}
+    >
+      {data.rewards.map(({ asset, rewardTypes, totalAmount }, i) => (
+        <div className="contents" key={i}>
+          <div
+            data-testid="individual-rewards-asset"
+            className={`${rowGridItemStyles()} p-5`}
+          >
+            {asset}
+          </div>
+          {Object.entries(rewardTypes).map(
+            ([key, { amount, percentageOfTotal }]) => (
+              <RewardItem
+                key={key}
+                value={amount}
+                percentageOfTotal={percentageOfTotal}
+                dataTestId={key}
+              />
+            )
+          )}
+          <RewardItem dataTestId="total" value={totalAmount} last={true} />
+        </div>
+      ))}
+    </RewardsTable>
+  );
+};

apps/token/src/routes/rewards/epoch-individual-rewards/epoch-individual-rewards.tsx

@@ -5,9 +5,10 @@ import { removePaginationWrapper } from '@vegaprotocol/react-helpers';
 import { useRewardsQuery } from '../home/__generated__/Rewards';
 import { ENV } from '../../../config';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { RewardTable } from './reward-table';
+import { EpochIndividualRewardsTable } from './epoch-individual-rewards-table';
+import { generateEpochIndividualRewardsList } from './generate-epoch-individual-rewards-list';
 
-export const RewardInfo = () => {
+export const EpochIndividualRewards = () => {
   const { t } = useTranslation();
   const { pubKey } = useVegaWallet();
   const { delegationsPagination } = ENV;
@@ -30,13 +31,10 @@ export const RewardInfo = () => {
     return removePaginationWrapper(data.party.rewardsConnection.edges);
   }, [data]);
 
-  const delegations = useMemo(() => {
-    if (!data?.party || !data.party.delegationsConnection?.edges?.length) {
-      return [];
-    }
-
-    return removePaginationWrapper(data.party.delegationsConnection.edges);
-  }, [data]);
+  const epochIndividualRewardSummaries = useMemo(() => {
+    if (!data?.party) return [];
+    return generateEpochIndividualRewardsList(rewards);
+  }, [data?.party, rewards]);
 
   return (
     <AsyncRenderer
@@ -45,20 +43,18 @@ export const RewardInfo = () => {
       data={data}
       render={() => (
         <div>
-          <p>
-            {t('Connected Vega key')}: {pubKey}
+          <p className="mb-10">
+            {t('Connected Vega key')}:{' '}
+            <span className="text-white">{pubKey}</span>
           </p>
-          {rewards.length ? (
-            rewards.map((reward, i) => {
-              if (!reward) return null;
-              return (
-                <RewardTable
-                  key={i}
-                  reward={reward}
-                  delegations={delegations || []}
+          {epochIndividualRewardSummaries.length ? (
+            epochIndividualRewardSummaries.map(
+              (epochIndividualRewardSummary) => (
+                <EpochIndividualRewardsTable
+                  data={epochIndividualRewardSummary}
                 />
-              );
-            })
+              )
+            )
           ) : (
             <p>{t('noRewards')}</p>
           )}

apps/token/src/routes/rewards/epoch-individual-rewards/generate-epoch-individual-rewards-list.spec.ts

@@ -0,0 +1,235 @@
+import { generateEpochIndividualRewardsList } from './generate-epoch-individual-rewards-list';
+import { AccountType } from '@vegaprotocol/types';
+import type { RewardFieldsFragment } from '../home/__generated__/Rewards';
+
+describe('generateEpochIndividualRewardsList', () => {
+  const reward1: RewardFieldsFragment = {
+    rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
+    amount: '100',
+    percentageOfTotal: '0.1',
+    receivedAt: new Date(),
+    asset: { id: 'usd', symbol: 'USD' },
+    party: { id: 'blah' },
+    epoch: { id: '1' },
+  };
+
+  const reward2: RewardFieldsFragment = {
+    rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
+    amount: '50',
+    percentageOfTotal: '0.05',
+    receivedAt: new Date(),
+    asset: { id: 'eur', symbol: 'EUR' },
+    party: { id: 'blah' },
+    epoch: { id: '2' },
+  };
+
+  const reward3: RewardFieldsFragment = {
+    rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
+    amount: '200',
+    percentageOfTotal: '0.2',
+    receivedAt: new Date(),
+    asset: { id: 'gbp', symbol: 'GBP' },
+    party: { id: 'blah' },
+    epoch: { id: '2' },
+  };
+
+  const reward4: RewardFieldsFragment = {
+    rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
+    amount: '100',
+    percentageOfTotal: '0.1',
+    receivedAt: new Date(),
+    asset: { id: 'usd', symbol: 'USD' },
+    party: { id: 'blah' },
+    epoch: { id: '1' },
+  };
+
+  const rewardWrongType: RewardFieldsFragment = {
+    rewardType: AccountType.ACCOUNT_TYPE_INSURANCE,
+    amount: '50',
+    percentageOfTotal: '0.05',
+    receivedAt: new Date(),
+    asset: { id: 'eur', symbol: 'EUR' },
+    party: { id: 'blah' },
+    epoch: { id: '2' },
+  };
+
+  it('should return an empty array if no rewards are provided', () => {
+    expect(generateEpochIndividualRewardsList([])).toEqual([]);
+  });
+
+  it('should filter out any rewards of the wrong type', () => {
+    const result = generateEpochIndividualRewardsList([rewardWrongType]);
+
+    expect(result).toEqual([]);
+  });
+
+  it('should return reward in the correct format', () => {
+    const result = generateEpochIndividualRewardsList([reward1]);
+
+    expect(result[0]).toEqual({
+      epoch: '1',
+      rewards: [
+        {
+          asset: 'USD',
+          totalAmount: '100',
+          rewardTypes: {
+            [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+            [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+            [AccountType.ACCOUNT_TYPE_GLOBAL_REWARD]: {
+              amount: '100',
+              percentageOfTotal: '0.1',
+            },
+            [AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+            [AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+            [AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+          },
+        },
+      ],
+    });
+  });
+
+  it('should return an array sorted by epoch descending', () => {
+    const rewards = [reward1, reward2, reward3, reward4];
+    const result1 = generateEpochIndividualRewardsList(rewards);
+
+    expect(result1[0].epoch).toEqual('2');
+    expect(result1[1].epoch).toEqual('1');
+
+    const reorderedRewards = [reward4, reward3, reward2, reward1];
+    const result2 = generateEpochIndividualRewardsList(reorderedRewards);
+
+    expect(result2[0].epoch).toEqual('2');
+    expect(result2[1].epoch).toEqual('1');
+  });
+
+  it('correctly calculates the total value of rewards for an asset', () => {
+    const rewards = [reward1, reward4];
+    const result = generateEpochIndividualRewardsList(rewards);
+
+    expect(result[0].rewards[0].totalAmount).toEqual('200');
+  });
+
+  it('returns data in the expected shape', () => {
+    // Just sanity checking the whole structure here
+    const rewards = [reward1, reward2, reward3, reward4];
+    const result = generateEpochIndividualRewardsList(rewards);
+
+    expect(result).toEqual([
+      {
+        epoch: '2',
+        rewards: [
+          {
+            asset: 'EUR',
+            totalAmount: '50',
+            rewardTypes: {
+              [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
+                amount: '0',
+                percentageOfTotal: '0',
+              },
+              [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
+                amount: '0',
+                percentageOfTotal: '0',
+              },
+              [AccountType.ACCOUNT_TYPE_GLOBAL_REWARD]: {
+                amount: '50',
+                percentageOfTotal: '0.05',
+              },
+              [AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES]: {
+                amount: '0',
+                percentageOfTotal: '0',
+              },
+              [AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES]: {
+                amount: '0',
+                percentageOfTotal: '0',
+              },
+              [AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS]: {
+                amount: '0',
+                percentageOfTotal: '0',
+              },
+            },
+          },
+          {
+            asset: 'GBP',
+            totalAmount: '200',
+            rewardTypes: {
+              [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
+                amount: '0',
+                percentageOfTotal: '0',
+              },
+              [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
+                amount: '200',
+                percentageOfTotal: '0.2',
+              },
+              [AccountType.ACCOUNT_TYPE_GLOBAL_REWARD]: {
+                amount: '0',
+                percentageOfTotal: '0',
+              },
+              [AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES]: {
+                amount: '0',
+                percentageOfTotal: '0',
+              },
+              [AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES]: {
+                amount: '0',
+                percentageOfTotal: '0',
+              },
+              [AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS]: {
+                amount: '0',
+                percentageOfTotal: '0',
+              },
+            },
+          },
+        ],
+      },
+      {
+        epoch: '1',
+        rewards: [
+          {
+            asset: 'USD',
+            totalAmount: '200',
+            rewardTypes: {
+              [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
+                amount: '0',
+                percentageOfTotal: '0',
+              },
+              [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
+                amount: '100',
+                percentageOfTotal: '0.1',
+              },
+              [AccountType.ACCOUNT_TYPE_GLOBAL_REWARD]: {
+                amount: '100',
+                percentageOfTotal: '0.1',
+              },
+              [AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES]: {
+                amount: '0',
+                percentageOfTotal: '0',
+              },
+              [AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES]: {
+                amount: '0',
+                percentageOfTotal: '0',
+              },
+              [AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS]: {
+                amount: '0',
+                percentageOfTotal: '0',
+              },
+            },
+          },
+        ],
+      },
+    ]);
+  });
+});

apps/token/src/routes/rewards/epoch-individual-rewards/generate-epoch-individual-rewards-list.ts

@@ -0,0 +1,79 @@
+import { BigNumber } from '../../../lib/bignumber';
+import { RowAccountTypes } from '../shared-rewards-table-assets/shared-rewards-table-assets';
+import type { RewardFieldsFragment } from '../home/__generated__/Rewards';
+import type { AccountType } from '@vegaprotocol/types';
+
+export interface EpochIndividualReward {
+  epoch: string;
+  rewards: {
+    asset: string;
+    totalAmount: string;
+    rewardTypes: {
+      [key in AccountType]?: {
+        amount: string;
+        percentageOfTotal: string;
+      };
+    };
+  }[];
+}
+
+const accountTypes = Object.keys(RowAccountTypes);
+
+const emptyRowAccountTypes = accountTypes.map((type) => [
+  type,
+  {
+    amount: '0',
+    percentageOfTotal: '0',
+  },
+]);
+
+export const generateEpochIndividualRewardsList = (
+  rewards: RewardFieldsFragment[]
+) => {
+  // We take the rewards and aggregate them by epoch and asset.
+  const epochIndividualRewards = rewards.reduce((map, reward) => {
+    const epochId = reward.epoch.id;
+    const assetName = reward.asset.symbol;
+    const rewardType = reward.rewardType;
+    const amount = reward.amount;
+    const percentageOfTotal = reward.percentageOfTotal;
+
+    // if the rewardType is not of a type we display in the table, we skip it.
+    if (!accountTypes.includes(rewardType)) {
+      return map;
+    }
+
+    if (!map.has(epochId)) {
+      map.set(epochId, { epoch: epochId, rewards: [] });
+    }
+
+    const epoch = map.get(epochId);
+
+    let asset = epoch?.rewards.find((r) => r.asset === assetName);
+
+    if (!asset) {
+      asset = {
+        asset: assetName,
+        totalAmount: '0',
+        rewardTypes: Object.fromEntries(emptyRowAccountTypes),
+      };
+      epoch?.rewards.push(asset);
+    }
+
+    asset.rewardTypes[rewardType] = { amount, percentageOfTotal };
+
+    // totalAmount is the sum of all rewardTypes amounts
+    asset.totalAmount = Object.values(asset.rewardTypes).reduce(
+      (sum, rewardType) => {
+        return new BigNumber(sum).plus(rewardType.amount).toString();
+      },
+      '0'
+    );
+
+    return map;
+  }, new Map<string, EpochIndividualReward>());
+
+  return Array.from(epochIndividualRewards.values()).sort(
+    (a, b) => Number(b.epoch) - Number(a.epoch)
+  );
+};

apps/token/src/routes/rewards/epoch-total-rewards/epoch-total-rewards-table.spec.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import { AppStateProvider } from '../../../contexts/app-state/app-state-provider';
 import { EpochTotalRewardsTable } from './epoch-total-rewards-table';
 import { AccountType } from '@vegaprotocol/types';
 
@@ -10,10 +11,30 @@ const mockData = {
         'b340c130096819428a62e5df407fd6abe66e444b89ad64f670beb98621c9c663',
       name: 'tDAI TEST',
       rewards: [
+        {
+          rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
+          amount: '0',
+        },
         {
           rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
           amount: '295',
         },
+        {
+          rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
+          amount: '0',
+        },
+        {
+          rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
+          amount: '0',
+        },
+        {
+          rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
+          amount: '0',
+        },
+        {
+          rewardType: AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
+          amount: '0',
+        },
       ],
       totalAmount: '295',
     },
@@ -22,15 +43,25 @@ const mockData = {
 
 describe('EpochTotalRewardsTable', () => {
   it('should render correctly', () => {
-    const { getByTestId } = render(<EpochTotalRewardsTable data={mockData} />);
+    const { getByTestId } = render(
+      <AppStateProvider>
+        <EpochTotalRewardsTable data={mockData} />
+      </AppStateProvider>
+    );
     expect(getByTestId('epoch-total-rewards-table')).toBeInTheDocument();
     expect(getByTestId('asset')).toBeInTheDocument();
-    expect(getByTestId('global')).toBeInTheDocument();
-    expect(getByTestId('infra')).toBeInTheDocument();
-    expect(getByTestId('taker')).toBeInTheDocument();
-    expect(getByTestId('maker')).toBeInTheDocument();
-    expect(getByTestId('liquidity')).toBeInTheDocument();
-    expect(getByTestId('market-maker')).toBeInTheDocument();
+    expect(getByTestId('ACCOUNT_TYPE_GLOBAL_REWARD')).toBeInTheDocument();
+    expect(getByTestId('ACCOUNT_TYPE_FEES_INFRASTRUCTURE')).toBeInTheDocument();
+    expect(
+      getByTestId('ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES')
+    ).toBeInTheDocument();
+    expect(
+      getByTestId('ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES')
+    ).toBeInTheDocument();
+    expect(getByTestId('ACCOUNT_TYPE_FEES_LIQUIDITY')).toBeInTheDocument();
+    expect(
+      getByTestId('ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS')
+    ).toBeInTheDocument();
     expect(getByTestId('total')).toBeInTheDocument();
   });
 });

apps/token/src/routes/rewards/epoch-total-rewards/epoch-total-rewards-table.tsx

@@ -1,19 +1,14 @@
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import { formatNumber } from '@vegaprotocol/react-helpers';
-import { Tooltip, Icon } from '@vegaprotocol/ui-toolkit';
-import { AccountType } from '@vegaprotocol/types';
-import { SubHeading } from '../../../components/heading';
-import type { AggregatedEpochSummary } from './generate-epoch-total-rewards-list';
+import { formatNumber, toBigNum } from '@vegaprotocol/react-helpers';
+import { Tooltip } from '@vegaprotocol/ui-toolkit';
+import { useAppState } from '../../../contexts/app-state/app-state-context';
+import {
+  rowGridItemStyles,
+  RewardsTable,
+} from '../shared-rewards-table-assets/shared-rewards-table-assets';
+import type { EpochTotalSummary } from './generate-epoch-total-rewards-list';
 
 interface EpochTotalRewardsGridProps {
-  data: AggregatedEpochSummary;
-}
-
-interface ColumnHeaderProps {
-  title: string;
-  tooltipContent?: string;
-  className?: string;
+  data: EpochTotalSummary;
 }
 
 interface RewardItemProps {
@@ -22,61 +17,28 @@ interface RewardItemProps {
   last?: boolean;
 }
 
-const displayReward = (reward: string) => {
+const DisplayReward = ({ reward }: { reward: string }) => {
+  const {
+    appState: { decimals },
+  } = useAppState();
+
   if (Number(reward) === 0) {
-    return <span className="text-vega-dark-300">0</span>;
+    return <span className="text-vega-dark-300">-</span>;
   }
 
-  if (reward.split('.')[1] && reward.split('.')[1].length > 4) {
-    return (
-      <Tooltip description={formatNumber(reward)}>
-        <button>{formatNumber(Number(reward).toFixed(4))}</button>
-      </Tooltip>
-    );
-  }
-
-  return <span>{formatNumber(reward)}</span>;
+  return (
+    <Tooltip description={formatNumber(toBigNum(reward, decimals), decimals)}>
+      <button>{formatNumber(toBigNum(reward, decimals))}</button>
+    </Tooltip>
+  );
 };
 
-const gridStyles = classNames(
-  'grid grid-cols-[repeat(8,minmax(100px,auto))] max-w-full overflow-auto',
-  `border-t border-vega-dark-200`,
-  'text-sm'
-);
-
-const headerGridItemStyles = (last = false) =>
-  classNames('border-r border-b border-b-vega-dark-200', 'py-3 px-5', {
-    'border-r-vega-dark-150': !last,
-    'border-r-0': last,
-  });
-
-const rowGridItemStyles = (last = false) =>
-  classNames('relative', 'border-r border-b border-b-vega-dark-150', {
-    'border-r-vega-dark-150': !last,
-    'border-r-0': last,
-  });
-
-const ColumnHeader = ({
-  title,
-  tooltipContent,
-  className,
-}: ColumnHeaderProps) => (
-  <div className={className}>
-    <h2 className="mb-1 text-sm text-vega-dark-300">{title}</h2>
-    {tooltipContent && (
-      <Tooltip description={tooltipContent}>
-        <button>
-          <Icon name={'info-sign'} className="text-vega-dark-200" />
-        </button>
-      </Tooltip>
-    )}
-  </div>
-);
-
 const RewardItem = ({ value, dataTestId, last }: RewardItemProps) => (
   <div data-testid={dataTestId} className={rowGridItemStyles(last)}>
     <div className="h-full w-5 absolute right-0 top-0 bg-gradient-to-r from-transparent to-black pointer-events-none" />
-    <div className="overflow-auto p-5">{displayReward(value)}</div>
+    <div className="overflow-auto p-5">
+      <DisplayReward reward={value} />
+    </div>
     <div className="h-full w-5 absolute left-0 top-0 bg-gradient-to-l from-transparent to-black pointer-events-none" />
   </div>
 );
@@ -84,129 +46,19 @@ const RewardItem = ({ value, dataTestId, last }: RewardItemProps) => (
 export const EpochTotalRewardsTable = ({
   data,
 }: EpochTotalRewardsGridProps) => {
-  const { t } = useTranslation();
-
-  const rowData = data.assetRewards.map(({ name, rewards, totalAmount }) => ({
-    name,
-    ACCOUNT_TYPE_GLOBAL_REWARD:
-      rewards
-        .filter((r) => r.rewardType === AccountType.ACCOUNT_TYPE_GLOBAL_REWARD)
-        .map((r) => r.amount)[0] || '0',
-    ACCOUNT_TYPE_FEES_INFRASTRUCTURE:
-      rewards
-        .filter(
-          (r) => r.rewardType === AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE
-        )
-        .map((r) => r.amount)[0] || '0',
-    ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES:
-      rewards
-        .filter(
-          (r) =>
-            r.rewardType === AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES
-        )
-        .map((r) => r.amount)[0] || '0',
-    ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES:
-      rewards
-        .filter(
-          (r) =>
-            r.rewardType === AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES
-        )
-        .map((r) => r.amount)[0] || '0',
-    ACCOUNT_TYPE_FEES_LIQUIDITY:
-      rewards
-        .filter((r) => r.rewardType === AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY)
-        .map((r) => r.amount)[0] || '0',
-    ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS:
-      rewards
-        .filter(
-          (r) =>
-            r.rewardType === AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS
-        )
-        .map((r) => r.amount)[0] || '0',
-    totalAmount: totalAmount,
-  }));
-
   return (
-    <div data-testid="epoch-total-rewards-table" className="mb-12">
-      <SubHeading title={`EPOCH ${data.epoch}`} />
-
-      <div className={gridStyles}>
-        <ColumnHeader
-          title={t('rewardsColAssetHeader')}
-          className={headerGridItemStyles()}
-        />
-        <ColumnHeader
-          title={t('rewardsColStakingHeader')}
-          tooltipContent={t('rewardsColStakingTooltip')}
-          className={headerGridItemStyles()}
-        />
-        <ColumnHeader
-          title={t('rewardsColInfraHeader')}
-          tooltipContent={t('rewardsColInfraTooltip')}
-          className={headerGridItemStyles()}
-        />
-        <ColumnHeader
-          title={t('rewardsColPriceTakingHeader')}
-          tooltipContent={t('rewardsColPriceTakingTooltip')}
-          className={headerGridItemStyles()}
-        />
-        <ColumnHeader
-          title={t('rewardsColPriceMakingHeader')}
-          tooltipContent={t('rewardsColPriceMakingTooltip')}
-          className={headerGridItemStyles()}
-        />
-        <ColumnHeader
-          title={t('rewardsColLiquidityProvisionHeader')}
-          tooltipContent={t('rewardsColLiquidityProvisionTooltip')}
-          className={headerGridItemStyles()}
-        />
-        <ColumnHeader
-          title={t('rewardsColMarketCreationHeader')}
-          tooltipContent={t('rewardsColMarketCreationTooltip')}
-          className={headerGridItemStyles()}
-        />
-        <ColumnHeader
-          title={t('rewardsColTotalHeader')}
-          className={headerGridItemStyles(true)}
-        />
-
-        {rowData.map((row, i) => (
-          <div className="contents" key={i}>
-            <div data-testid="asset" className={`${rowGridItemStyles()} p-5`}>
-              {row.name}
-            </div>
-            <RewardItem
-              dataTestId="global"
-              value={row.ACCOUNT_TYPE_GLOBAL_REWARD}
-            />
-            <RewardItem
-              dataTestId="infra"
-              value={row.ACCOUNT_TYPE_FEES_INFRASTRUCTURE}
-            />
-            <RewardItem
-              dataTestId="taker"
-              value={row.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES}
-            />
-            <RewardItem
-              dataTestId="maker"
-              value={row.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES}
-            />
-            <RewardItem
-              dataTestId="liquidity"
-              value={row.ACCOUNT_TYPE_FEES_LIQUIDITY}
-            />
-            <RewardItem
-              dataTestId="market-maker"
-              value={row.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS}
-            />
-            <RewardItem
-              dataTestId="total"
-              value={row.totalAmount}
-              last={true}
-            />
+    <RewardsTable dataTestId="epoch-total-rewards-table" epoch={data.epoch}>
+      {data.assetRewards.map(({ name, rewards, totalAmount }, i) => (
+        <div className="contents" key={i}>
+          <div data-testid="asset" className={`${rowGridItemStyles()} p-5`}>
+            {name}
           </div>
-        ))}
-      </div>
-    </div>
+          {rewards.map(({ rewardType, amount }, i) => (
+            <RewardItem key={i} dataTestId={rewardType} value={amount} />
+          ))}
+          <RewardItem dataTestId="total" value={totalAmount} last={true} />
+        </div>
+      ))}
+    </RewardsTable>
   );
 };

apps/token/src/routes/rewards/epoch-total-rewards/epoch-total-rewards.tsx

@@ -5,7 +5,7 @@ import { generateEpochTotalRewardsList } from './generate-epoch-total-rewards-li
 import { NoRewards } from '../no-rewards';
 import { EpochTotalRewardsTable } from './epoch-total-rewards-table';
 
-export const EpochRewards = () => {
+export const EpochTotalRewards = () => {
   const { data, loading, error, refetch } = useEpochAssetsRewardsQuery({
     variables: {
       epochRewardSummariesPagination: {
@@ -15,7 +15,7 @@ export const EpochRewards = () => {
   });
   useRefreshAfterEpoch(data?.epoch.timestamps.expiry, refetch);
 
-  const epochRewardSummaries = generateEpochTotalRewardsList(data) || [];
+  const epochTotalRewardSummaries = generateEpochTotalRewardsList(data) || [];
 
   return (
     <AsyncRenderer
@@ -27,12 +27,12 @@ export const EpochRewards = () => {
           className="max-w-full overflow-auto"
           data-testid="epoch-rewards-total"
         >
-          {epochRewardSummaries.length === 0 ? (
+          {epochTotalRewardSummaries.length === 0 ? (
             <NoRewards />
           ) : (
             <>
-              {epochRewardSummaries.map((aggregatedEpochSummary) => (
-                <EpochTotalRewardsTable data={aggregatedEpochSummary} />
+              {epochTotalRewardSummaries.map((epochTotalSummary, index) => (
+                <EpochTotalRewardsTable data={epochTotalSummary} key={index} />
               ))}
             </>
           )}

apps/token/src/routes/rewards/epoch-total-rewards/generate-epoch-total-rewards-list.spec.ts

@@ -61,7 +61,7 @@ describe('generateEpochAssetRewardsList', () => {
     expect(result).toEqual([]);
   });
 
-  it('should return an array of unnamed assets if no assets are provided (should not happen)', () => {
+  it('should return an array of unnamed assets if no asset names are provided (should not happen)', () => {
     const epochData = {
       assetsConnection: {
         edges: [],
@@ -72,18 +72,10 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               epoch: 1,
               assetId: '1',
-              rewardType: AccountType.ACCOUNT_TYPE_INSURANCE,
+              rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
               amount: '123',
             },
           },
-          {
-            node: {
-              epoch: 2,
-              assetId: '1',
-              rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
-              amount: '5',
-            },
-          },
         ],
       },
       epoch: {
@@ -104,30 +96,34 @@ describe('generateEpochAssetRewardsList', () => {
             name: '',
             rewards: [
               {
-                rewardType: AccountType.ACCOUNT_TYPE_INSURANCE,
+                rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
                 amount: '123',
               },
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
+                amount: '0',
+              },
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
+                amount: '0',
+              },
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
+                amount: '0',
+              },
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
+                amount: '0',
+              },
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
+                amount: '0',
+              },
             ],
             totalAmount: '123',
           },
         ],
       },
-      {
-        epoch: 2,
-        assetRewards: [
-          {
-            assetId: '1',
-            name: '',
-            rewards: [
-              {
-                rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
-                amount: '5',
-              },
-            ],
-            totalAmount: '5',
-          },
-        ],
-      },
     ]);
   });
 
@@ -155,7 +151,7 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               epoch: 1,
               assetId: '1',
-              rewardType: AccountType.ACCOUNT_TYPE_INSURANCE,
+              rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
               amount: '123',
             },
           },
@@ -167,22 +163,6 @@ describe('generateEpochAssetRewardsList', () => {
               amount: '100',
             },
           },
-          {
-            node: {
-              epoch: 1,
-              assetId: '2',
-              rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
-              amount: '17.9873',
-            },
-          },
-          {
-            node: {
-              epoch: 1,
-              assetId: '2',
-              rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
-              amount: '1',
-            },
-          },
           {
             node: {
               epoch: 2,
@@ -211,30 +191,31 @@ describe('generateEpochAssetRewardsList', () => {
             name: 'Asset 1',
             rewards: [
               {
-                rewardType: AccountType.ACCOUNT_TYPE_INSURANCE,
-                amount: '123',
+                rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
+                amount: '0',
               },
               {
                 rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
                 amount: '100',
               },
-            ],
-            totalAmount: '223',
-          },
-          {
-            assetId: '2',
-            name: 'Asset 2',
-            rewards: [
               {
-                rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
-                amount: '17.9873',
+                rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
+                amount: '123',
+              },
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
+                amount: '0',
               },
               {
                 rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
-                amount: '1',
+                amount: '0',
+              },
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
+                amount: '0',
               },
             ],
-            totalAmount: '18.9873',
+            totalAmount: '223',
           },
         ],
       },
@@ -245,10 +226,30 @@ describe('generateEpochAssetRewardsList', () => {
             assetId: '1',
             name: 'Asset 1',
             rewards: [
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
+                amount: '0',
+              },
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
+                amount: '0',
+              },
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
+                amount: '0',
+              },
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
+                amount: '0',
+              },
               {
                 rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
                 amount: '5',
               },
+              {
+                rewardType: AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
+                amount: '0',
+              },
             ],
             totalAmount: '5',
           },

apps/token/src/routes/rewards/epoch-total-rewards/generate-epoch-total-rewards-list.ts

@@ -3,6 +3,8 @@ import type {
   EpochRewardSummaryFieldsFragment,
 } from '../home/__generated__/Rewards';
 import { removePaginationWrapper } from '@vegaprotocol/react-helpers';
+import { RowAccountTypes } from '../shared-rewards-table-assets/shared-rewards-table-assets';
+import type { AccountType } from '@vegaprotocol/types';
 
 interface EpochSummaryWithNamedReward extends EpochRewardSummaryFieldsFragment {
   name: string;
@@ -18,11 +20,16 @@ export interface AggregatedEpochRewardSummary {
   totalAmount: string;
 }
 
-export interface AggregatedEpochSummary {
+export interface EpochTotalSummary {
   epoch: EpochRewardSummaryFieldsFragment['epoch'];
   assetRewards: AggregatedEpochRewardSummary[];
 }
 
+const emptyRowAccountTypes = Object.keys(RowAccountTypes).map((type) => ({
+  rewardType: type as AccountType,
+  amount: '0',
+}));
+
 export const generateEpochTotalRewardsList = (
   epochData: EpochAssetsRewardsQuery | undefined
 ) => {
@@ -58,7 +65,7 @@ export const generateEpochTotalRewardsList = (
     }, [] as EpochSummaryWithNamedReward[][]);
 
   // Now aggregate the array of arrays of epoch summaries by asset rewards.
-  const aggregatedEpochSummaries: AggregatedEpochSummary[] =
+  const epochTotalRewards: EpochTotalSummary[] =
     aggregatedEpochSummariesByEpochNumber.map((epochSummaries) => {
       const assetRewards = epochSummaries.reduce((acc, epochSummary) => {
         const assetRewardIndex = acc.findIndex(
@@ -72,18 +79,36 @@ export const generateEpochTotalRewardsList = (
             assetId: epochSummary.assetId,
             name: epochSummary.name,
             rewards: [
-              {
-                rewardType: epochSummary.rewardType,
-                amount: epochSummary.amount,
-              },
+              ...emptyRowAccountTypes.map((emptyRowAccountType) => {
+                if (
+                  emptyRowAccountType.rewardType === epochSummary.rewardType
+                ) {
+                  return {
+                    rewardType: epochSummary.rewardType,
+                    amount: epochSummary.amount,
+                  };
+                } else {
+                  return emptyRowAccountType;
+                }
+              }),
             ],
             totalAmount: epochSummary.amount,
           });
         } else {
-          acc[assetRewardIndex].rewards.push({
-            rewardType: epochSummary.rewardType,
-            amount: epochSummary.amount,
-          });
+          acc[assetRewardIndex].rewards = acc[assetRewardIndex].rewards.map(
+            (reward) => {
+              if (reward.rewardType === epochSummary.rewardType) {
+                return {
+                  rewardType: epochSummary.rewardType,
+                  amount: (
+                    Number(reward.amount) + Number(epochSummary.amount)
+                  ).toString(),
+                };
+              } else {
+                return reward;
+              }
+            }
+          );
           acc[assetRewardIndex].totalAmount = (
             Number(acc[assetRewardIndex].totalAmount) +
             Number(epochSummary.amount)
@@ -99,5 +124,5 @@ export const generateEpochTotalRewardsList = (
       };
     });
 
-  return aggregatedEpochSummaries;
+  return epochTotalRewards;
 };

apps/token/src/routes/rewards/home/rewards-page.tsx

@@ -1,34 +1,30 @@
 // @ts-ignore No types available for duration-js
 import Duration from 'duration-js';
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { formatDistance } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import {
-  Button,
   Callout,
   Intent,
   AsyncRenderer,
   Toggle,
   ExternalLink,
 } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
+import { useVegaWallet } from '@vegaprotocol/wallet';
 import {
   useNetworkParams,
   NetworkParams,
   createDocsLinks,
 } from '@vegaprotocol/react-helpers';
-import {
-  AppStateActionType,
-  useAppState,
-} from '../../../contexts/app-state/app-state-context';
 import { useEpochQuery } from './__generated__/Rewards';
 
 import { EpochCountdown } from '../../../components/epoch-countdown';
 import { Heading, SubHeading } from '../../../components/heading';
-import { RewardInfo } from '../epoch-individual-awards/reward-info';
-import { EpochRewards } from '../epoch-total-rewards/epoch-rewards';
+import { EpochIndividualRewards } from '../epoch-individual-rewards/epoch-individual-rewards';
 import { useRefreshAfterEpoch } from '../../../hooks/use-refresh-after-epoch';
 import { useEnvironment } from '@vegaprotocol/environment';
+import { ConnectToSeeRewards } from '../connect-to-see-rewards';
+import { EpochTotalRewards } from '../epoch-total-rewards/epoch-total-rewards';
 
 type RewardsView = 'total' | 'individual';
 
@@ -39,25 +35,21 @@ export const RewardsPage = () => {
   const [toggleRewardsView, setToggleRewardsView] =
     useState<RewardsView>('total');
 
-  const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({
-    openVegaWalletDialog: store.openVegaWalletDialog,
-  }));
-  const { appDispatch } = useAppState();
-
-  const {
-    params,
-    loading: paramsLoading,
-    error: paramsError,
-  } = useNetworkParams([NetworkParams.reward_staking_delegation_payoutDelay]);
-
   const {
     data: epochData,
     loading: epochLoading,
     error: epochError,
     refetch,
   } = useEpochQuery();
+
   useRefreshAfterEpoch(epochData?.epoch.timestamps.expiry, refetch);
 
+  const {
+    params,
+    loading: paramsLoading,
+    error: paramsError,
+  } = useNetworkParams([NetworkParams.reward_staking_delegation_payoutDelay]);
+
   const payoutDuration = useMemo(() => {
     if (!params) {
       return 0;
@@ -103,8 +95,8 @@ export const RewardsPage = () => {
             </div>
           ) : null}
 
-          {epochData &&
-            epochData.epoch.id &&
+          {epochData?.epoch &&
+            epochData.epoch?.id &&
             epochData.epoch.timestamps.start &&
             epochData.epoch.timestamps.expiry && (
               <section className="mb-16">
@@ -148,26 +140,13 @@ export const RewardsPage = () => {
           </section>
 
           {toggleRewardsView === 'total' ? (
-            <EpochRewards />
+            <EpochTotalRewards />
           ) : (
             <section>
               {pubKey && pubKeys?.length ? (
-                <RewardInfo />
+                <EpochIndividualRewards />
               ) : (
-                <div>
-                  <Button
-                    data-testid="connect-to-vega-wallet-btn"
-                    onClick={() => {
-                      appDispatch({
-                        type: AppStateActionType.SET_VEGA_WALLET_OVERLAY,
-                        isOpen: true,
-                      });
-                      openVegaWalletDialog();
-                    }}
-                  >
-                    {t('connectVegaWallet')}
-                  </Button>
-                </div>
+                <ConnectToSeeRewards />
               )}
             </section>
           )}

apps/token/src/routes/rewards/shared-rewards-table-assets/shared-rewards-table-assets.tsx

@@ -0,0 +1,125 @@
+import classNames from 'classnames';
+import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
+import { useTranslation } from 'react-i18next';
+import type { ReactNode } from 'react';
+import { SubHeading } from '../../../components/heading';
+import { AccountType } from '@vegaprotocol/types';
+
+// This is the data structure that matters for defining which Account types
+// are displayed in the rewards tables. It sets column titles and tooltips,
+// and is used to filter the data that is passed to functions to generate
+// the table rows. It's important to preserve the order.
+export const RowAccountTypes = {
+  [AccountType.ACCOUNT_TYPE_GLOBAL_REWARD]: {
+    columnTitle: 'rewardsColStakingHeader',
+    description: 'rewardsColStakingTooltip',
+  },
+  [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
+    columnTitle: 'rewardsColInfraHeader',
+    description: 'rewardsColInfraTooltip',
+  },
+  [AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES]: {
+    columnTitle: 'rewardsColPriceTakingHeader',
+    description: 'rewardsColPriceTakingTooltip',
+  },
+  [AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES]: {
+    columnTitle: 'rewardsColPriceMakingHeader',
+    description: 'rewardsColPriceMakingTooltip',
+  },
+  [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
+    columnTitle: 'rewardsColLiquidityProvisionHeader',
+    description: 'rewardsColLiquidityProvisionTooltip',
+  },
+  [AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS]: {
+    columnTitle: 'rewardsColMarketCreationHeader',
+    description: 'rewardsColMarketCreationTooltip',
+  },
+};
+
+interface ColumnHeaderProps {
+  title: string;
+  tooltipContent?: string;
+  className?: string;
+}
+
+const headerGridItemStyles = (last = false) =>
+  classNames('border-r border-b border-b-vega-dark-200', 'py-3 px-5', {
+    'border-r-vega-dark-150': !last,
+    'border-r-0': last,
+  });
+
+export const rowGridItemStyles = (last = false) =>
+  classNames('relative', 'border-r border-b border-b-vega-dark-150', {
+    'border-r-vega-dark-150': !last,
+    'border-r-0': last,
+  });
+
+const gridStyles = classNames(
+  'grid grid-cols-[repeat(8,minmax(100px,auto))] max-w-full overflow-auto',
+  `border-t border-vega-dark-200`,
+  'text-sm'
+);
+
+const ColumnHeader = ({
+  title,
+  tooltipContent,
+  className,
+}: ColumnHeaderProps) => (
+  <div className={className}>
+    <h2 className="mb-1 text-sm text-vega-dark-300">{title}</h2>
+    {tooltipContent && (
+      <Tooltip description={tooltipContent}>
+        <button>
+          <Icon name={'info-sign'} className="text-vega-dark-200" />
+        </button>
+      </Tooltip>
+    )}
+  </div>
+);
+
+const ColumnHeaders = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="contents">
+      <ColumnHeader
+        title={t('rewardsColAssetHeader')}
+        className={headerGridItemStyles()}
+      />
+      {Object.values(RowAccountTypes).map(({ columnTitle, description }) => (
+        <ColumnHeader
+          key={columnTitle}
+          title={t(columnTitle)}
+          tooltipContent={t(description)}
+          className={headerGridItemStyles()}
+        />
+      ))}
+      <ColumnHeader
+        title={t('rewardsColTotalHeader')}
+        className={headerGridItemStyles(true)}
+      />
+    </div>
+  );
+};
+
+export interface RewardTableProps {
+  dataTestId: string;
+  epoch: number;
+  children: ReactNode;
+}
+
+// Rewards table children will be the row items. Make sure they contain
+// the same number of columns and map to the data of the ColumnHeaders component.
+export const RewardsTable = ({
+  dataTestId,
+  epoch,
+  children,
+}: RewardTableProps) => (
+  <div data-testid={dataTestId} className="mb-12">
+    <SubHeading title={`EPOCH ${epoch}`} />
+
+    <div className={gridStyles}>
+      <ColumnHeaders />
+      {children}
+    </div>
+  </div>
+);

apps/token/src/routes/staking/home/validator-tables/consensus-validators-table.tsx

@@ -363,6 +363,7 @@ export const ConsensusValidatorsTable = ({
             customThemeParams={NODE_LIST_GRID_STYLES}
             getRowHeight={(params: RowHeightParams) => getRowHeight(params)}
             defaultColDef={defaultColDef}
+            tooltipShowDelay={0}
             animateRows={true}
             suppressCellFocus={true}
             overlayNoRowsTemplate={t('noValidators')}

apps/token/src/routes/staking/home/validator-tables/shared.tsx

@@ -59,8 +59,6 @@ export const defaultColDef = {
   comparator: (a: string, b: string) => parseFloat(a) - parseFloat(b),
   cellStyle: { margin: '10px 0', padding: '0 12px' },
   tooltipComponent: TooltipCellComponent,
-  tooltipShowDelay: 0,
-  tooltipHideDelay: 0,
 };
 
 interface ValidatorRendererProps {

apps/token/src/routes/staking/home/validator-tables/standby-pending-validators-table.tsx

@@ -236,6 +236,7 @@ export const StandbyPendingValidatorsTable = ({
           customThemeParams={NODE_LIST_GRID_STYLES}
           rowHeight={52}
           defaultColDef={defaultColDef}
+          tooltipShowDelay={0}
           animateRows={true}
           suppressCellFocus={true}
           overlayNoRowsTemplate={t('noValidators')}

apps/token/src/routes/staking/node/validator-table.spec.tsx

@@ -0,0 +1,145 @@
+import { render } from '@testing-library/react';
+import { AppStateProvider } from '../../../contexts/app-state/app-state-provider';
+import { ValidatorTable } from './validator-table';
+import { ValidatorStatus } from '@vegaprotocol/types';
+import countryData from '../../../components/country-selector/country-data';
+import { formatNumber, toBigNum } from '@vegaprotocol/react-helpers';
+
+const mockNode = {
+  id: 'bb1822715aa86ce0e205aa4c78e9b71cdeaec94596ce72d366f0d50589eb1bf5',
+  name: 'Marvin',
+  pubkey: 'f45085a3bbce4e8197910448a0f22e7d5e79f8234336053bc11b177b0d70e785',
+  infoUrl: 'https://en.wikipedia.org/wiki/Marvin_the_Paranoid_Android',
+  location: 'AQ',
+  ethereumAddress: '0x6ae2ff81b4a00f2edbed1fe3551ee0e3d81aa4f4',
+  stakedByOperator: '3000000000000000000000',
+  stakedByDelegates: '1280000000000000000',
+  stakedTotal: '3001280000000000000000',
+  pendingStake: '0',
+  epochData: null,
+  rankingScore: {
+    rankingScore: '0.3999466965166174',
+    stakeScore: '0.1999733482583087',
+    performanceScore: '1',
+    votingPower: '2000',
+    status: ValidatorStatus.VALIDATOR_NODE_STATUS_TENDERMINT,
+  },
+};
+
+const mockStakedTotal = '15008.4';
+const decimals = 18;
+
+const renderComponent = () =>
+  render(
+    <AppStateProvider>
+      <ValidatorTable node={mockNode} stakedTotal={mockStakedTotal} />
+    </AppStateProvider>
+  );
+
+describe('ValidatorTable', () => {
+  it('should render successfully', () => {
+    const { baseElement } = renderComponent();
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should render a link to the staking guide', () => {
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('validator-table-staking-guide-link')).toBeTruthy();
+  });
+
+  it('should render the correct node id', () => {
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('validator-id')).toHaveTextContent(mockNode.id);
+  });
+
+  it('should render the validator description url', () => {
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('validator-description-url')).toHaveAttribute(
+      'href',
+      mockNode.infoUrl
+    );
+  });
+
+  it('should render the correct validator status', () => {
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('validator-status')).toHaveTextContent('Consensus');
+  });
+
+  it('should render a link to the validator forum', () => {
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('validator-forum-link')).toBeTruthy();
+  });
+
+  it('should render the pubkey', () => {
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('validator-public-key')).toHaveTextContent(
+      mockNode.pubkey
+    );
+  });
+
+  it('should render the server location', () => {
+    const location = countryData.find((c) => c.code === mockNode.location);
+
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('validator-server-location')).toHaveTextContent(
+      // @ts-ignore - location is not null
+      location.name
+    );
+  });
+
+  it('should render the ethereum address', () => {
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('validator-eth-address')).toHaveTextContent(
+      mockNode.ethereumAddress
+    );
+  });
+
+  it('should render the staked by operator', () => {
+    const stakedByOperator = formatNumber(
+      toBigNum(mockNode.stakedByOperator, decimals)
+    );
+
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('staked-by-operator')).toHaveTextContent(
+      stakedByOperator
+    );
+  });
+
+  it('should render the staked by delegates', () => {
+    const stakedByDelegates = formatNumber(
+      toBigNum(mockNode.stakedByDelegates, decimals)
+    );
+
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('staked-by-delegates')).toHaveTextContent(
+      stakedByDelegates
+    );
+  });
+
+  it('should render the total stake', () => {
+    const stakedTotal = formatNumber(toBigNum(mockNode.stakedTotal, decimals));
+
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('total-stake')).toHaveTextContent(stakedTotal);
+  });
+
+  it('should render the pending stake', () => {
+    const pendingStake = formatNumber(
+      toBigNum(mockNode.pendingStake, decimals)
+    );
+
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('pending-stake')).toHaveTextContent(pendingStake);
+  });
+
+  it('should render the values calculated by the helper functions', () => {
+    // these functions are all tested in shared.spec.ts
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('stake-percentage')).toBeInTheDocument();
+    expect(getByTestId('overstaking-penalty')).toBeInTheDocument();
+    expect(getByTestId('performance-penalty')).toBeInTheDocument();
+    expect(getByTestId('total-penalties')).toBeInTheDocument();
+    expect(getByTestId('unnormalised-voting-power')).toBeInTheDocument();
+    expect(getByTestId('normalised-voting-power')).toBeInTheDocument();
+  });
+});

apps/token/src/routes/staking/node/validator-table.tsx

@@ -1,19 +1,25 @@
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-
-import countryData from '../../../components/country-selector/country-data';
-import { Link as UTLink, Link } from '@vegaprotocol/ui-toolkit';
 import { useEnvironment } from '@vegaprotocol/environment';
 import {
+  createDocsLinks,
+  ExternalLinks,
+  toBigNum,
+} from '@vegaprotocol/react-helpers';
+import * as Schema from '@vegaprotocol/types';
+import {
+  Link as UTLink,
+  Link,
+  Tooltip,
   KeyValueTable,
   KeyValueTableRow,
   RoundedWrapper,
+  ExternalLink,
 } from '@vegaprotocol/ui-toolkit';
 import { BigNumber } from '../../../lib/bignumber';
 import { formatNumber } from '../../../lib/format-number';
-import { ExternalLinks, toBigNum } from '@vegaprotocol/react-helpers';
 import { useAppState } from '../../../contexts/app-state/app-state-context';
-import * as Schema from '@vegaprotocol/types';
+import countryData from '../../../components/country-selector/country-data';
 import { SubHeading } from '../../../components/heading';
 import {
   getLastEpochScoreAndPerformance,
@@ -23,6 +29,7 @@ import {
   getPerformancePenalty,
   getTotalPenalties,
   getUnnormalisedVotingPower,
+  getStakePercentage,
 } from '../shared';
 import type { ReactNode } from 'react';
 import type { StakingNodeFieldsFragment } from './__generated__/Staking';
@@ -62,7 +69,7 @@ export const ValidatorTable = ({
   stakedTotal,
   previousEpochData,
 }: ValidatorTableProps) => {
-  const { ETHERSCAN_URL } = useEnvironment();
+  const { ETHERSCAN_URL, VEGA_DOCS_URL } = useEnvironment();
   const { t } = useTranslation();
   const {
     appState: { decimals },
@@ -81,10 +88,7 @@ export const ValidatorTable = ({
     node.stakedTotal
   );
 
-  const stakePercentage =
-    total.isEqualTo(0) || stakedOnNode.isEqualTo(0)
-      ? '-'
-      : stakedOnNode.dividedBy(total).times(100).dp(2).toString() + '%';
+  const stakePercentage = getStakePercentage(total, stakedOnNode);
 
   const totalPenaltiesAmount = getTotalPenalties(
     rawValidatorScore,
@@ -94,158 +98,207 @@ export const ValidatorTable = ({
   );
 
   return (
-    <div className="my-12" data-testid="validator-table">
-      <SubHeading title={t('profile')} />
-      <RoundedWrapper>
-        <KeyValueTable data-testid="validator-table-profile">
-          <KeyValueTableRow>
-            <span>{t('id')}</span>
-            <ValidatorTableCell dataTestId="validator-id">
-              {node.id}
-            </ValidatorTableCell>
-          </KeyValueTableRow>
-          <KeyValueTableRow>
-            <span>{t('ABOUT THIS VALIDATOR')}</span>
-            <span>
-              <a href={node.infoUrl}>{node.infoUrl}</a>
-            </span>
-          </KeyValueTableRow>
-          <KeyValueTableRow noBorder={true}>
-            <span>
-              <strong>{t('STATUS')}</strong>
-            </span>
-            <span data-testid="validator-status">
-              <strong>
-                {t(statusTranslationKey(node.rankingScore.status))}
-              </strong>
-            </span>
-          </KeyValueTableRow>
-        </KeyValueTable>
-      </RoundedWrapper>
+    <>
+      <p className="mb-12">
+        {t('validatorFormIntro')}{' '}
+        {VEGA_DOCS_URL && (
+          <ExternalLink
+            href={createDocsLinks(VEGA_DOCS_URL).STAKING_GUIDE}
+            target="_blank"
+            data-testid="validator-table-staking-guide-link"
+            className="text-white"
+          >
+            {t('readMoreValidatorForm')}
+          </ExternalLink>
+        )}
+      </p>
 
-      <div className="mb-10">
-        {t('validatorTableIntro')}{' '}
-        <UTLink
-          href={ExternalLinks.VALIDATOR_FORUM}
-          target="_blank"
-          data-testid="validator-forum-link"
-        >
-          {t('onTheForum')}
-        </UTLink>
+      <div className="my-12" data-testid="validator-table">
+        <SubHeading title={t('profile')} />
+        <RoundedWrapper>
+          <KeyValueTable data-testid="validator-table-profile">
+            <KeyValueTableRow>
+              <span>{t('id')}</span>
+              <ValidatorTableCell dataTestId="validator-id">
+                {node.id}
+              </ValidatorTableCell>
+            </KeyValueTableRow>
+            <KeyValueTableRow>
+              <span>{t('ABOUT THIS VALIDATOR')}</span>
+
+              <Tooltip description={t('AboutThisValidatorDescription')}>
+                <a data-testid="validator-description-url" href={node.infoUrl}>
+                  {node.infoUrl}
+                </a>
+              </Tooltip>
+            </KeyValueTableRow>
+            <KeyValueTableRow noBorder={true}>
+              <span>
+                <strong>{t('STATUS')}</strong>
+              </span>
+
+              <Tooltip description={t('ValidatorStatusDescription')}>
+                <span data-testid="validator-status">
+                  <strong>
+                    {t(statusTranslationKey(node.rankingScore.status))}
+                  </strong>
+                </span>
+              </Tooltip>
+            </KeyValueTableRow>
+          </KeyValueTable>
+        </RoundedWrapper>
+
+        <div className="mb-10">
+          {t('validatorTableIntro')}{' '}
+          <UTLink
+            href={ExternalLinks.VALIDATOR_FORUM}
+            target="_blank"
+            data-testid="validator-forum-link"
+          >
+            {t('onTheForum')}
+          </UTLink>
+        </div>
+
+        <SubHeading title={t('ADDRESS')} />
+        <RoundedWrapper marginBottomLarge={true}>
+          <KeyValueTable data-testid="validator-table-address">
+            <KeyValueTableRow>
+              <span>{t('VEGA ADDRESS / PUBLIC KEY')}</span>
+              <ValidatorTableCell dataTestId="validator-public-key">
+                {node.pubkey}
+              </ValidatorTableCell>
+            </KeyValueTableRow>
+            <KeyValueTableRow>
+              <span>{t('SERVER LOCATION')}</span>
+              <ValidatorTableCell dataTestId="validator-server-location">
+                {countryData.find((c) => c.code === node.location)?.name ||
+                  t('not available')}
+              </ValidatorTableCell>
+            </KeyValueTableRow>
+            <KeyValueTableRow noBorder={true}>
+              <span>{t('ETHEREUM ADDRESS')}</span>
+              <span data-testid="validator-eth-address">
+                <Link
+                  title={t('View on Etherscan (opens in a new tab)')}
+                  href={`${ETHERSCAN_URL}/address/${node.ethereumAddress}`}
+                  target="_blank"
+                >
+                  {node.ethereumAddress}
+                </Link>
+              </span>
+            </KeyValueTableRow>
+          </KeyValueTable>
+        </RoundedWrapper>
+
+        <SubHeading title={t('STAKE')} />
+        <RoundedWrapper marginBottomLarge={true}>
+          <KeyValueTable data-testid="validator-table-stake">
+            <KeyValueTableRow>
+              <span>{t('STAKED BY OPERATOR')}</span>
+
+              <Tooltip description={t('StakedByOperatorDescription')}>
+                <span data-testid="staked-by-operator">
+                  {formatNumber(toBigNum(node.stakedByOperator, decimals))}
+                </span>
+              </Tooltip>
+            </KeyValueTableRow>
+            <KeyValueTableRow>
+              <span>{t('STAKED BY DELEGATES')}</span>
+
+              <Tooltip description={t('StakedByDelegatesDescription')}>
+                <span data-testid="staked-by-delegates">
+                  {formatNumber(toBigNum(node.stakedByDelegates, decimals))}
+                </span>
+              </Tooltip>
+            </KeyValueTableRow>
+            <KeyValueTableRow>
+              <span>
+                <strong>{t('TOTAL STAKE')}</strong>
+              </span>
+
+              <span data-testid="total-stake">
+                <strong>
+                  {formatNumber(toBigNum(node.stakedTotal, decimals))}
+                </strong>
+              </span>
+            </KeyValueTableRow>
+            <KeyValueTableRow>
+              <span>{t('PENDING STAKE')}</span>
+
+              <Tooltip description={t('PendingStakeDescription')}>
+                <span data-testid="pending-stake">
+                  {formatNumber(toBigNum(node.pendingStake, decimals))}
+                </span>
+              </Tooltip>
+            </KeyValueTableRow>
+            <KeyValueTableRow noBorder={true}>
+              <span>{t('STAKE SHARE')}</span>
+
+              <Tooltip description={t('StakeShareDescription')}>
+                <span data-testid="stake-percentage">{stakePercentage}</span>
+              </Tooltip>
+            </KeyValueTableRow>
+          </KeyValueTable>
+        </RoundedWrapper>
+
+        <SubHeading title={t('PENALTIES')} />
+        <RoundedWrapper marginBottomLarge={true}>
+          <KeyValueTable data-testid="validator-table-penalties">
+            <KeyValueTableRow>
+              <span>{t('OVERSTAKED PENALTY')}</span>
+
+              <Tooltip description={t('OverstakedPenaltyDescription')}>
+                <span data-testid="overstaking-penalty">
+                  {getOverstakingPenalty(overstakedAmount, node.stakedTotal)}
+                </span>
+              </Tooltip>
+            </KeyValueTableRow>
+            <KeyValueTableRow>
+              <span>{t('PERFORMANCE PENALTY')}</span>
+
+              <Tooltip description={t('PerformancePenaltyDescription')}>
+                <span data-testid="performance-penalty">
+                  {getPerformancePenalty(performanceScore)}
+                </span>
+              </Tooltip>
+            </KeyValueTableRow>
+            <KeyValueTableRow noBorder={true}>
+              <span>
+                <strong>{t('TOTAL PENALTIES')}</strong>
+              </span>
+              <span data-testid="total-penalties">
+                <strong>{totalPenaltiesAmount}</strong>
+              </span>
+            </KeyValueTableRow>
+          </KeyValueTable>
+        </RoundedWrapper>
+
+        <SubHeading title={t('VOTING POWER')} />
+        <RoundedWrapper marginBottomLarge={true}>
+          <KeyValueTable data-testid="validator-table-voting-power">
+            <KeyValueTableRow>
+              <span>{t('UNNORMALISED VOTING POWER')}</span>
+
+              <Tooltip description={t('UnnormalisedVotingPowerDescription')}>
+                <span data-testid="unnormalised-voting-power">
+                  {getUnnormalisedVotingPower(rawValidatorScore)}
+                </span>
+              </Tooltip>
+            </KeyValueTableRow>
+            <KeyValueTableRow noBorder={true}>
+              <span>
+                <strong>{t('NORMALISED VOTING POWER')}</strong>
+              </span>
+
+              <Tooltip description={t('NormalisedVotingPowerDescription')}>
+                <strong data-testid="normalised-voting-power">
+                  {getNormalisedVotingPower(node.rankingScore.votingPower)}
+                </strong>
+              </Tooltip>
+            </KeyValueTableRow>
+          </KeyValueTable>
+        </RoundedWrapper>
       </div>
-
-      <SubHeading title={t('ADDRESS')} />
-      <RoundedWrapper marginBottomLarge={true}>
-        <KeyValueTable data-testid="validator-table-address">
-          <KeyValueTableRow>
-            <span>{t('VEGA ADDRESS / PUBLIC KEY')}</span>
-            <ValidatorTableCell dataTestId="validator-public-key">
-              {node.pubkey}
-            </ValidatorTableCell>
-          </KeyValueTableRow>
-          <KeyValueTableRow>
-            <span>{t('SERVER LOCATION')}</span>
-            <ValidatorTableCell>
-              {countryData.find((c) => c.code === node.location)?.name ||
-                t('not available')}
-            </ValidatorTableCell>
-          </KeyValueTableRow>
-          <KeyValueTableRow noBorder={true}>
-            <span>{t('ETHEREUM ADDRESS')}</span>
-            <span>
-              <Link
-                title={t('View on Etherscan (opens in a new tab)')}
-                href={`${ETHERSCAN_URL}/address/${node.ethereumAddress}`}
-                target="_blank"
-              >
-                {node.ethereumAddress}
-              </Link>
-            </span>
-          </KeyValueTableRow>
-        </KeyValueTable>
-      </RoundedWrapper>
-
-      <SubHeading title={t('STAKE')} />
-      <RoundedWrapper marginBottomLarge={true}>
-        <KeyValueTable data-testid="validator-table-stake">
-          <KeyValueTableRow>
-            <span>{t('STAKED BY OPERATOR')}</span>
-            <span data-testid="staked-by-operator">
-              {formatNumber(toBigNum(node.stakedByOperator, decimals))}
-            </span>
-          </KeyValueTableRow>
-          <KeyValueTableRow>
-            <span>{t('STAKED BY DELEGATES')}</span>
-            <span data-testid="staked-by-delegates">
-              {formatNumber(toBigNum(node.stakedByDelegates, decimals))}
-            </span>
-          </KeyValueTableRow>
-          <KeyValueTableRow>
-            <span>
-              <strong>{t('TOTAL STAKE')}</strong>
-            </span>
-            <span data-testid="total-stake">
-              <strong>
-                {formatNumber(toBigNum(node.stakedTotal, decimals))}
-              </strong>
-            </span>
-          </KeyValueTableRow>
-          <KeyValueTableRow>
-            <span>{t('PENDING STAKE')}</span>
-            <span data-testid="pending-stake">
-              {formatNumber(toBigNum(node.pendingStake, decimals))}
-            </span>
-          </KeyValueTableRow>
-          <KeyValueTableRow noBorder={true}>
-            <span>{t('STAKE SHARE')}</span>
-            <span data-testid="stake-percentage">{stakePercentage}</span>
-          </KeyValueTableRow>
-        </KeyValueTable>
-      </RoundedWrapper>
-
-      <SubHeading title={t('PENALTIES')} />
-      <RoundedWrapper marginBottomLarge={true}>
-        <KeyValueTable data-testid="validator-table-penalties">
-          <KeyValueTableRow>
-            <span>{t('OVERSTAKED PENALTY')}</span>
-            <span>
-              {getOverstakingPenalty(overstakedAmount, node.stakedTotal)}
-            </span>
-          </KeyValueTableRow>
-          <KeyValueTableRow>
-            <span>{t('PERFORMANCE PENALTY')}</span>
-            <span>{getPerformancePenalty(performanceScore)}</span>
-          </KeyValueTableRow>
-          <KeyValueTableRow noBorder={true}>
-            <span>
-              <strong>{t('TOTAL PENALTIES')}</strong>
-            </span>
-            <span>
-              <strong>{totalPenaltiesAmount}</strong>
-            </span>
-          </KeyValueTableRow>
-        </KeyValueTable>
-      </RoundedWrapper>
-
-      <SubHeading title={t('VOTING POWER')} />
-      <RoundedWrapper marginBottomLarge={true}>
-        <KeyValueTable data-testid="validator-table-voting-power">
-          <KeyValueTableRow>
-            <span>{t('UNNORMALISED VOTING POWER')}</span>
-            <span>{getUnnormalisedVotingPower(rawValidatorScore)}</span>
-          </KeyValueTableRow>
-          <KeyValueTableRow noBorder={true}>
-            <span>
-              <strong>{t('NORMALISED VOTING POWER')}</strong>
-            </span>
-            <span>
-              <strong>
-                {getNormalisedVotingPower(node.rankingScore.votingPower)}
-              </strong>
-            </span>
-          </KeyValueTableRow>
-        </KeyValueTable>
-      </RoundedWrapper>
-    </div>
+    </>
   );
 };

apps/token/src/routes/staking/shared.spec.ts

@@ -8,6 +8,7 @@ import {
   getFormattedPerformanceScore,
   getPerformancePenalty,
   getTotalPenalties,
+  getStakePercentage,
 } from './shared';
 
 describe('getLastEpochScoreAndPerformance', () => {
@@ -139,3 +140,23 @@ describe('getTotalPenalties', () => {
     expect(getTotalPenalties('0.25', '0.5', '1000', '10000')).toEqual('0.00%');
   });
 });
+
+describe('getStakePercentage', () => {
+  it('should return the stake percentage', () => {
+    expect(
+      getStakePercentage(new BigNumber('1000'), new BigNumber('100'))
+    ).toEqual('10%');
+    expect(
+      getStakePercentage(new BigNumber('1000'), new BigNumber('500'))
+    ).toEqual('50%');
+    expect(
+      getStakePercentage(new BigNumber('1000'), new BigNumber('257.5'))
+    ).toEqual('25.75%');
+  });
+
+  it('should return "0%" if the total stake is 0', () => {
+    expect(getStakePercentage(new BigNumber('0'), new BigNumber('0'))).toEqual(
+      '0%'
+    );
+  });
+});

apps/token/src/routes/staking/shared.ts

@@ -95,3 +95,8 @@ export const getTotalPenalties = (
     2
   );
 };
+
+export const getStakePercentage = (total: BigNumber, stakedOnNode: BigNumber) =>
+  total.isEqualTo(0) || stakedOnNode.isEqualTo(0)
+    ? '0%'
+    : stakedOnNode.dividedBy(total).times(100).dp(2).toString() + '%';

apps/trading-e2e/cypress.config.js

@@ -22,6 +22,7 @@ module.exports = defineConfig({
     viewportHeight: 900,
     responseTimeout: 50000,
     requestTimeout: 20000,
+    retries: 2,
   },
   env: {
     ETHERSCAN_URL: 'https://sepolia.etherscan.io',

apps/trading-e2e/src/integration/capsule.cy.ts

@@ -72,7 +72,11 @@ describe('capsule - without MultiSign', { tags: '@slow' }, () => {
     cy.getByTestId('deposit-button').click();
     connectEthereumWallet('Unknown');
     cy.get(assetSelectField, txTimeout).select(btcName, { force: true });
-    cy.getByTestId('deposit-approve-submit').click();
+    cy.getByTestId('approve-warning').should(
+      'contain.text',
+      `Deposits of ${btcSymbol} not approved`
+    );
+    cy.getByTestId('deposit-submit').click();
     cy.getByTestId('dialog-title').should('contain.text', 'Approve complete');
     cy.get('[data-testid="Return to deposit"]').click();
     cy.get(amountField).clear().type('10');
@@ -407,7 +411,7 @@ describe('capsule', { tags: '@slow' }, () => {
     cy.getByTestId('deposit-button').click();
     connectEthereumWallet('Unknown');
     cy.get(assetSelectField, txTimeout).select(vegaName, { force: true });
-    cy.getByTestId('deposit-approve-submit').click();
+    cy.getByTestId('deposit-submit').click();
     cy.getByTestId('dialog-title').should('contain.text', 'Approve complete');
     cy.get('[data-testid="Return to deposit"]').click();
     cy.get(amountField).clear().type('10000');

apps/trading-e2e/src/integration/deposit.cy.ts

@@ -1,3 +1,5 @@
+import { removeDecimal } from '@vegaprotocol/cypress';
+import { ethers } from 'ethers';
 import { connectEthereumWallet } from '../support/ethereum-wallet';
 import { selectAsset } from '../support/helpers';
 
@@ -9,7 +11,7 @@ const formFieldError = 'input-error-text';
 const ASSET_EURO = 1;
 
 describe('deposit form validation', { tags: '@smoke' }, () => {
-  before(() => {
+  function openDepositForm() {
     cy.mockWeb3Provider();
     cy.mockSubscription();
     cy.mockTradingPage();
@@ -20,10 +22,14 @@ describe('deposit form validation', { tags: '@smoke' }, () => {
     cy.getByTestId('deposit-button').click();
     cy.wait('@Assets');
     connectEthereumWallet('MetaMask');
-    cy.getByTestId('deposit-submit').click();
+  }
+
+  before(() => {
+    openDepositForm();
   });
 
   it('handles empty fields', () => {
+    cy.getByTestId('deposit-submit').click();
     cy.getByTestId(formFieldError).should('contain.text', 'Required');
     cy.getByTestId(formFieldError).should('have.length', 2);
   });
@@ -44,6 +50,13 @@ describe('deposit form validation', { tags: '@smoke' }, () => {
   });
 
   it('invalid amount', () => {
+    mockWeb3DepositCalls({
+      allowance: '1000',
+      depositLifetimeLimit: '1000',
+      balance: '800',
+      deposited: '0',
+      dps: 5,
+    });
     // Deposit amount smaller than minimum viable for selected asset
     // Select an amount so that we have a known decimal places value to work with
     selectAsset(ASSET_EURO);
@@ -56,13 +69,126 @@ describe('deposit form validation', { tags: '@smoke' }, () => {
   });
 
   it('insufficient funds', () => {
-    // 1001-DEPO-005
-    // Deposit amount is valid, but less than approved. This will always be the case because our
-    // CI wallet wont have approved any assets
+    mockWeb3DepositCalls({
+      allowance: '1000',
+      depositLifetimeLimit: '1000',
+      balance: '800',
+      deposited: '0',
+      dps: 5,
+    });
     cy.get(amountField)
       .clear()
-      .type('100')
+      .type('850')
       .next(`[data-testid="${formFieldError}"]`)
       .should('have.text', 'Insufficient amount in Ethereum wallet');
   });
 });
+
+describe('deposit actions', { tags: '@smoke' }, () => {
+  before(() => {
+    cy.mockWeb3Provider();
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.setVegaWallet();
+    cy.visit('/');
+    cy.wait('@MarketsCandles');
+    cy.getByTestId('dialog-close').click();
+  });
+
+  it('Deposit to trade is visble', () => {
+    cy.getByTestId('Collateral').click();
+    cy.contains('[data-testid="deposit"]', 'Deposit to trade').should(
+      'be.visible'
+    );
+    cy.contains('[data-testid="deposit"]', 'Deposit to trade').click();
+    connectEthereumWallet('MetaMask');
+    cy.getByTestId('deposit-submit').should('be.visible');
+  });
+});
+
+function mockWeb3DepositCalls({
+  allowance,
+  depositLifetimeLimit,
+  balance,
+  deposited,
+  dps,
+}: {
+  allowance: string;
+  depositLifetimeLimit: string;
+  balance: string;
+  deposited: string;
+  dps: number;
+}) {
+  const assetContractAddress = '0x0158031158bb4df2ad02eaa31e8963e84ea978a4';
+  const collateralBridgeAddress = '0x7fe27d970bc8afc3b11cc8d9737bfb66b1efd799';
+  const toResult = (value: string, dps: number) => {
+    const rawValue = removeDecimal(value, dps);
+    return ethers.utils.hexZeroPad(
+      ethers.utils.hexlify(parseInt(rawValue)),
+      32
+    );
+  };
+  cy.intercept('POST', 'http://localhost:8545', (req) => {
+    // Mock chainId call
+    if (req.body.method === 'eth_chainId') {
+      req.alias = 'eth_chainId';
+      req.reply({
+        id: req.body.id,
+        jsonrpc: req.body.jsonrpc,
+        result: '0xaa36a7', // 11155111 for sepolia chain id
+      });
+    }
+
+    // Mock deposited amount
+    if (req.body.method === 'eth_getStorageAt') {
+      req.alias = 'eth_getStorageAt';
+      req.reply({
+        id: req.body.id,
+        jsonrpc: req.body.jsonrpc,
+        result: toResult(deposited, dps),
+      });
+    }
+
+    if (req.body.method === 'eth_call') {
+      // Mock approved amount for asset on collateral bridge
+      if (
+        req.body.params[0].to === assetContractAddress &&
+        req.body.params[0].data ===
+          '0xdd62ed3e000000000000000000000000ee7d375bcb50c26d52e1a4a472d8822a2a22d94f0000000000000000000000007fe27d970bc8afc3b11cc8d9737bfb66b1efd799'
+      ) {
+        req.alias = 'eth_call_allowance';
+        req.reply({
+          id: req.body.id,
+          jsonrpc: req.body.jsonrpc,
+          result: toResult(allowance, dps),
+        });
+      }
+      // Mock balance of asset in Ethereum wallet
+      else if (
+        req.body.params[0].to === assetContractAddress &&
+        req.body.params[0].data ===
+          '0x70a08231000000000000000000000000ee7d375bcb50c26d52e1a4a472d8822a2a22d94f'
+      ) {
+        req.alias = 'eth_call_balanceOf';
+        req.reply({
+          id: req.body.id,
+          jsonrpc: req.body.jsonrpc,
+          result: toResult(balance, dps),
+        });
+      }
+      // Mock deposit lifetime limit
+      else if (
+        req.body.params[0].to === collateralBridgeAddress &&
+        req.body.params[0].data ===
+          '0x354a897a0000000000000000000000000158031158bb4df2ad02eaa31e8963e84ea978a4'
+      ) {
+        req.alias = 'eth_call_get_deposit_maximum'; // deposit lifetime limit
+        req.reply({
+          id: req.body.id,
+          jsonrpc: req.body.jsonrpc,
+          result: toResult(depositLifetimeLimit, dps),
+        });
+      }
+    }
+  });
+}