chore: update tooltip text for 24h volume

Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.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/static/src/assets/devnet-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/mirror-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/sandbox-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/stagnet1-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/stagnet3-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/testnet-tranches.json

@@ -1 +0,0 @@
-[]

apps/token-e2e/.env

@@ -12,6 +12,7 @@ NX_ETH_WALLET_MNEMONIC=ozone access unlock valid olympic save include omit suppl
 NX_LOCAL_PROVIDER_URL=http://localhost:8545/
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
+NX_TRANCHES_SERVICE_URL=https://tranches-stagnet3-k8s.ops.vega.xyz
 
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

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/home.cy.js

@@ -63,6 +63,39 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
             .and('have.text', 'Browse, vote, and propose');
         });
       });
+      it('should show open or enacted proposals with proposal summary', function () {
+        cy.get('body').then(($body) => {
+          if (!$body.find('[data-testid="proposals-list-item"]').length) {
+            cy.createMarket();
+            cy.reload();
+            cy.wait_for_spinner();
+          }
+        });
+        cy.getByTestId('proposals-list-item')
+          .should('have.length.at.least', 1)
+          .first()
+          .within(() => {
+            cy.getByTestId('proposal-title')
+              .invoke('text')
+              .should('not.be.empty');
+            cy.getByTestId('proposal-type')
+              .invoke('text')
+              .should('not.be.empty');
+            cy.getByTestId('proposal-description')
+              .invoke('text')
+              .should('not.be.empty');
+            cy.getByTestId('proposal-details')
+              .invoke('text')
+              .should('not.be.empty');
+            cy.getByTestId('proposal-status')
+              .invoke('text')
+              .should('not.be.empty');
+            cy.getByTestId('vote-details')
+              .invoke('text')
+              .should('not.be.empty');
+            cy.getByTestId('view-proposal-btn').should('be.visible');
+          });
+      });
       it('should have external link for governance', function () {
         cy.getByTestId('home-proposals').within(() => {
           cy.getByTestId('external-link')

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

@@ -30,11 +30,11 @@ context('Staking Page - verify elements on page', function () {
 
   describe('with wallets disconnected', { tags: '@smoke' }, function () {
     describe('description section', function () {
-      it('Should have staking tab highlighted', function () {
+      it('Should have validators tab highlighted', function () {
         cy.verify_tab_highlighted('validators');
       });
 
-      it('Should have STAKING ON VEGA header visible', function () {
+      it('Should have validators ON VEGA header visible', function () {
         cy.verify_page_header('Validators');
       });
 
@@ -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/integration/view/vesting.cy.js

@@ -1,4 +1,3 @@
-const connectPrompt = '[data-testid="eth-connect-prompt"]';
 const connectButton = '[data-testid="connect-to-eth-btn"]';
 
 context(
@@ -18,7 +17,7 @@ context(
       });
 
       it('should have connect Eth wallet info', function () {
-        cy.get(connectPrompt).should('be.visible');
+        cy.get(connectButton).should('be.visible');
       });
 
       it('should have connect Eth wallet button', function () {

apps/token-e2e/src/integration/view/wallet-vega.cy.js

@@ -338,8 +338,8 @@ context(
               .contains(currency.id)
               .parent()
               .siblings()
-              .within(() => cy.contains_exactly('10.00').should('be.visible'));
-
+              .invoke('text')
+              .should('not.be.empty');
             cy.get(vegaWalletCurrencyTitle)
               .contains(currency.id)
               .parent()

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/.browserslistrc

@@ -13,4 +13,4 @@ last 2 Edge major versions
 last 2 Safari major version
 last 2 iOS major versions
 Firefox ESR
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 9-11 # For IE 9-11 support, remove 'not'.

apps/token/.env

@@ -12,6 +12,7 @@ NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_DELEGATIONS_PAGINATION=50
+NX_TRANCHES_SERVICE_URL=https://tranches-stagnet3-k8s.ops.vega.xyz
 
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

apps/token/.env.capsule

@@ -15,6 +15,7 @@ NX_LOCAL_PROVIDER_URL=http://localhost:8545/
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_DELEGATIONS_PAGINATION=50
+NX_TRANCHES_SERVICE_URL=https://tranches-stagnet3-k8s.ops.vega.xyz
 
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

apps/token/.env.devnet

@@ -9,3 +9,4 @@ NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_EXPLORER_URL=https://dev.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_DELEGATIONS_PAGINATION=50
+NX_TRANCHES_SERVICE_URL=https://tranches-devnet1-k8s.ops.vega.xyz

apps/token/.env.mainnet

@@ -10,3 +10,4 @@ NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40:87edc2605e544f888305d7fc4a9141bd@o286262.ingest.sentry.io/5882996
 NX_DELEGATIONS_PAGINATION=50
+NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-k8s.ops.vega.xyz

apps/token/.env.stagnet1

@@ -6,3 +6,4 @@ NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet1-network.json
 NX_VEGA_EXPLORER_URL=https://stagnet1.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_DELEGATIONS_PAGINATION=50
+NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz

apps/token/.env.stagnet3

@@ -7,3 +7,4 @@ NX_VEGA_EXPLORER_URL=https://stagnet3.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_DELEGATIONS_PAGINATION=50
+NX_TRANCHES_SERVICE_URL=https://tranches-stagnet3-k8s.ops.vega.xyz

apps/token/.env.testnet

@@ -10,3 +10,4 @@ NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_DELEGATIONS_PAGINATION=50
+NX_TRANCHES_SERVICE_URL=https://tranches-testnet-k8s.ops.vega.xyz

apps/token/src/components/balance-manager/balance-manager.tsx

@@ -1,17 +1,17 @@
-import * as Sentry from '@sentry/react';
-import { toBigNum } from '@vegaprotocol/react-helpers';
-import { useEthereumConfig } from '@vegaprotocol/web3';
 import { useWeb3React } from '@web3-react/core';
 import { useEffect } from 'react';
 
 import { useAppState } from '../../contexts/app-state/app-state-context';
 import { useContracts } from '../../contexts/contracts/contracts-context';
 import { useGetAssociationBreakdown } from '../../hooks/use-get-association-breakdown';
-import { useGetUserTrancheBalances } from '../../hooks/use-get-user-tranche-balances';
+import { useGetUserBalances } from '../../hooks/use-get-user-balances';
 import { useBalances } from '../../lib/balances/balances-store';
 import type { ReactElement } from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useListenForStakingEvents as useListenForAssociationEvents } from '../../hooks/use-listen-for-staking-events';
+import { useTranches } from '../../lib/tranches/tranches-store';
+import { useUserTrancheBalances } from '../../routes/redemption/hooks';
+import { useEthereumConfig } from '@vegaprotocol/web3';
 
 interface BalanceManagerProps {
   children: ReactElement;
@@ -24,7 +24,13 @@ export const BalanceManager = ({ children }: BalanceManagerProps) => {
   const {
     appState: { decimals },
   } = useAppState();
-  const { updateBalances: updateStoreBalances } = useBalances();
+  const updateStoreBalances = useBalances((state) => state.updateBalances);
+  const setTranchesBalances = useBalances((state) => state.setTranchesBalances);
+  const getUserBalances = useGetUserBalances(account);
+  const userTrancheBalances = useUserTrancheBalances(account);
+  useEffect(() => {
+    setTranchesBalances(userTrancheBalances);
+  }, [setTranchesBalances, userTrancheBalances]);
   const { config } = useEthereumConfig();
 
   const numberOfConfirmations = config?.confirmations || 0;
@@ -41,10 +47,10 @@ export const BalanceManager = ({ children }: BalanceManagerProps) => {
     numberOfConfirmations
   );
 
-  const getUserTrancheBalances = useGetUserTrancheBalances(
-    account || '',
-    contracts?.vesting
-  );
+  const getTranches = useTranches((state) => state.getTranches);
+  useEffect(() => {
+    getTranches(decimals);
+  }, [decimals, getTranches]);
   const getAssociationBreakdown = useGetAssociationBreakdown(
     account || '',
     contracts?.staking,
@@ -54,50 +60,14 @@ export const BalanceManager = ({ children }: BalanceManagerProps) => {
   // update balances on connect to Ethereum
   useEffect(() => {
     const updateBalances = async () => {
-      if (!account || !config) return;
-      try {
-        const [b, w, stats, a] = await Promise.all([
-          contracts.vesting.user_total_all_tranches(account),
-          contracts.token.balanceOf(account),
-          contracts.vesting.user_stats(account),
-          contracts.token.allowance(
-            account,
-            config.staking_bridge_contract.address
-          ),
-        ]);
-
-        const balance = toBigNum(b, decimals);
-        const walletBalance = toBigNum(w, decimals);
-        const lien = toBigNum(stats.lien, decimals);
-        const allowance = toBigNum(a, decimals);
-
-        updateStoreBalances({
-          balanceFormatted: balance,
-          walletBalance,
-          lien,
-          allowance,
-        });
-      } catch (err) {
-        Sentry.captureException(err);
+      const balances = await getUserBalances();
+      if (balances) {
+        updateStoreBalances(balances);
       }
     };
 
     updateBalances();
-  }, [
-    decimals,
-    contracts.token,
-    contracts.vesting,
-    account,
-    config,
-    updateStoreBalances,
-  ]);
-
-  // This use effect hook is very expensive and is kept separate to prevent expensive reloading of data.
-  useEffect(() => {
-    if (account) {
-      getUserTrancheBalances();
-    }
-  }, [account, getUserTrancheBalances]);
+  }, [getUserBalances, updateStoreBalances]);
 
   useEffect(() => {
     if (account) {

apps/token/src/components/eth-connect-prompt/eth-connect-promp.tsx

@@ -6,27 +6,22 @@ import {
   useAppState,
 } from '../../contexts/app-state/app-state-context';
 
-interface EthConnectPrompProps {
-  children?: React.ReactNode;
-}
-
-export const EthConnectPrompt = ({ children }: EthConnectPrompProps) => {
+export const EthConnectPrompt = () => {
   const { t } = useTranslation();
   const { appDispatch } = useAppState();
   return (
-    <>
-      {children}
-      <Button
-        onClick={() =>
-          appDispatch({
-            type: AppStateActionType.SET_ETH_WALLET_OVERLAY,
-            isOpen: true,
-          })
-        }
-        data-testid="connect-to-eth-btn"
-      >
-        {t('connectEthWallet')}
-      </Button>
-    </>
+    <Button
+      variant="primary"
+      onClick={() =>
+        appDispatch({
+          type: AppStateActionType.SET_ETH_WALLET_OVERLAY,
+          isOpen: true,
+        })
+      }
+      fill={true}
+      data-testid="connect-to-eth-btn"
+    >
+      {t('connectEthWallet')}
+    </Button>
   );
 };

apps/token/src/components/nav/nav-dropdown.tsx

@@ -18,7 +18,7 @@ export const NavDropDown = ({ navbarTheme }: { navbarTheme: NavbarTheme }) => {
       <AppNavLink
         name={
           <NavDropdownMenuTrigger
-            className="w-auto flex items-center"
+            className="w-auto flex items-center -m-3 p-3 cursor-pointer"
             data-testid="state-trigger"
             onClick={() => setOpen(!isOpen)}
           >

apps/token/src/config/env.ts

@@ -58,6 +58,7 @@ const envName = windowOrDefault('NX_VEGA_ENV') ?? 'local';
 
 export const ENV = {
   // Environment
+  tranchesServiceUrl: windowOrDefault('NX_TRANCHES_SERVICE_URL'),
   dsn: windowOrDefault('NX_SENTRY_DSN'),
   urlConnect: TRUTHY.includes(windowOrDefault('NX_ETH_URL_CONNECT')),
   explorerUrl: windowOrDefault('NX_VEGA_EXPLORER'),

apps/token/src/contexts/app-state/app-state-context.ts

@@ -1,4 +1,3 @@
-import type { Tranche } from '@vegaprotocol/smart-contracts';
 import React from 'react';
 
 import type { BigNumber } from '../../lib/bignumber';
@@ -19,21 +18,7 @@ export interface VegaKey {
   meta: Array<{ key: string; value: string }> | null;
 }
 
-export interface UserTrancheBalance {
-  /** ID of tranche */
-  id: number;
-
-  /** Users vesting tokens on tranche */
-  locked: BigNumber;
-
-  /** Users vested tokens on tranche */
-  vested: BigNumber;
-}
-
 export interface AppState {
-  /** Array of tranche objects */
-  tranches: Tranche[] | null;
-
   /** Number of decimal places of the VEGA token (18 on Mainnet, 5 on Testnet) */
   decimals: number;
 
@@ -52,9 +37,6 @@ export interface AppState {
   /** Whether or not the connect to Ethereum wallet overlay is open */
   ethConnectOverlay: boolean;
 
-  /** The error if one was thrown during retrieval of tranche data */
-  trancheError: Error | null;
-
   /** Whether or not the mobile drawer is open. Only relevant on screens smaller than 960 */
   drawerOpen: boolean;
 
@@ -71,12 +53,10 @@ export enum AppStateActionType {
   SET_TOKEN,
   SET_ALLOWANCE,
   REFRESH_BALANCES,
-  SET_TRANCHE_DATA,
   SET_VEGA_WALLET_OVERLAY,
   SET_VEGA_WALLET_MANAGE_OVERLAY,
   SET_ETH_WALLET_OVERLAY,
   SET_DRAWER,
-  SET_TRANCHE_ERROR,
   REFRESH_ASSOCIATED_BALANCES,
   SET_ASSOCIATION_BREAKDOWN,
   SET_TRANSACTION_OVERLAY,
@@ -90,14 +70,6 @@ export type AppStateAction =
       totalSupply: BigNumber;
       totalAssociated: BigNumber;
     }
-  | {
-      type: AppStateActionType.SET_TRANCHE_DATA;
-      tranches: Tranche[];
-    }
-  | {
-      type: AppStateActionType.SET_TRANCHE_ERROR;
-      error: Error | null;
-    }
   | {
       type: AppStateActionType.SET_VEGA_WALLET_OVERLAY;
       isOpen: boolean;

apps/token/src/contexts/app-state/app-state-provider.tsx

@@ -14,11 +14,9 @@ const initialAppState: AppState = {
   totalAssociated: new BigNumber(0),
   decimals: 0,
   totalSupply: new BigNumber(0),
-  tranches: null,
   vegaWalletOverlay: false,
   vegaWalletManageOverlay: false,
   ethConnectOverlay: false,
-  trancheError: null,
   drawerOpen: false,
   transactionOverlay: false,
   bannerMessage: '',
@@ -34,17 +32,6 @@ function appStateReducer(state: AppState, action: AppStateAction): AppState {
         totalAssociated: action.totalAssociated,
       };
     }
-    case AppStateActionType.SET_TRANCHE_DATA:
-      return {
-        ...state,
-        tranches: action.tranches,
-      };
-    case AppStateActionType.SET_TRANCHE_ERROR: {
-      return {
-        ...state,
-        trancheError: action.error,
-      };
-    }
     case AppStateActionType.SET_VEGA_WALLET_OVERLAY: {
       return {
         ...state,

apps/token/src/hooks/__mocks__/tranches-mock.ts

@@ -1,666 +0,0 @@
-import parseJSON from 'date-fns/parseJSON';
-import { BigNumber } from '../../lib/bignumber';
-import type { Tranche } from '@vegaprotocol/smart-contracts';
-
-const json: Tranche[] = [
-  {
-    tranche_id: 1,
-    tranche_start: parseJSON('2022-03-05T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-06-05T00:00:00.000Z'),
-    total_added: new BigNumber('3505372.53445'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('3505372.53445'),
-    deposits: [
-      {
-        amount: new BigNumber('187637.95'),
-        user: '0xE6CacAE56Cca8dFdB7910b5A13578719D4E57DA0',
-        tx: '0xc4491908e3347b05f2394ac7e1006f573fe8cbc490a57cd1dadad70785e95024',
-      },
-      {
-        amount: new BigNumber('200000'),
-        user: '0x93b478148FF792B00076B7EdC89Db1FdE7772079',
-        tx: '0xcc8fba855a0d965044d4cc587701fe9ee9f5863852cede017382ffe02963d9b8',
-      },
-      {
-        amount: new BigNumber('21666.5743'),
-        user: '0xB523235B6c7C74DDB26b10E78bFb2d0Cb63Ae289',
-        tx: '0x8cc5159f3d665dd33a2bdac6e990cf1b65dc18b6b5e37a07b37dd54495a8d33c',
-      },
-      {
-        amount: new BigNumber('200000'),
-        user: '0x7227e17101E6C70F4dAfC7DDB77BB7D83DdfC1C8',
-        tx: '0x0cdef6868bd6b977362396fd06525e1e757e827659c5d75cd512db121947e6f7',
-      },
-      {
-        amount: new BigNumber('137998.56'),
-        user: '0x69eFc5642CfcCB1777bc663433640531F044D1F5',
-        tx: '0xaa9b3b39836a69f760f5d1d2fdba44ad348b27c8f31eb094ad6f779b39d7949c',
-      },
-      {
-        amount: new BigNumber('16249.93'),
-        user: '0x006B59DD3bC838A74476c0F4a33C1565831dA0DD',
-        tx: '0xda9bdc846300600c0d360edcaf4a5ed40fa2586ba7872f2bf68251a669adff0e',
-      },
-    ],
-    withdrawals: [],
-    users: [
-      {
-        address: '0xE6CacAE56Cca8dFdB7910b5A13578719D4E57DA0',
-        deposits: [
-          {
-            amount: new BigNumber('187637.95'),
-            user: '0xE6CacAE56Cca8dFdB7910b5A13578719D4E57DA0',
-            tranche_id: 1,
-            tx: '0xc4491908e3347b05f2394ac7e1006f573fe8cbc490a57cd1dadad70785e95024',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('187637.95'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('187637.95'),
-      },
-      {
-        address: '0x1A71e3ED1996CAbB91bB043f880CE963D601707e',
-        deposits: [
-          {
-            amount: new BigNumber('112323.67'),
-            user: '0x1A71e3ED1996CAbB91bB043f880CE963D601707e',
-            tranche_id: 1,
-            tx: '0xaa378d2d0d4d7b964a675bb19f19c4f7401deec6ce66b1bd98ad5b812026e53e',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('112323.67'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('112323.67'),
-      },
-    ],
-  },
-  {
-    tranche_id: 2,
-    tranche_start: parseJSON('2022-06-05T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-12-05T00:00:00.000Z'),
-    total_added: new BigNumber('15464357.550320999700000001'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('15464357.550320999700000001'),
-    deposits: [
-      {
-        amount: new BigNumber('1'),
-        user: '0x7fff551249D223f723557a96a0e1a469C79cC934',
-        tx: '0x55fa59d71aac37428a5804442c48da677a4426a4e92447919a8199520ce20f53',
-      },
-      {
-        amount: new BigNumber('100000'),
-        user: '0xe20D4d4fFb165e4b9926467d82d03c0e9ab66D89',
-        tx: '0xabf2cc96c41c8b4f0cff8d8ff7448e241ff83e296a7b7dea79d9d9868f33b7ad',
-      },
-      {
-        amount: new BigNumber('500000'),
-        user: '0x5f01A497e4033E4812ba5D494bCBc2220cd510Ed',
-        tx: '0xe3a1a74378a42eace12c21c24889d8b0da6a3736ca7987720e70f59886caa5a3',
-      },
-      {
-        amount: new BigNumber('59228.95'),
-        user: '0x1d20f66eF3889aa48Bb4Badbbf993dE965BDb029',
-        tx: '0xf31eab593b86aac54f5fa9fe24bb26105ff52386be60bc24617dd362df7c6f15',
-      },
-      {
-        amount: new BigNumber('206374.1211'),
-        user: '0x1b979e8AE3BbbaF96Dd1bbbC0060b360A23f2EBE',
-        tx: '0x2983daa9acf6da5fba0debc2aaaaf47389b92aea0de0c27b20809fb69a63ce69',
-      },
-      {
-        amount: new BigNumber('200000'),
-        user: '0xe45993F39183E148bC35BA02ba8C289111181c0f',
-        tx: '0xbda7b70ab8ac629617e74daaaa5451b04d7830bc0da516e10d533efc2eef1530',
-      },
-    ],
-    withdrawals: [
-      {
-        amount: new BigNumber('0'),
-        user: '0x4527F5A12bbbbb7c88c5863F8AB9a708928Fe702',
-        tx: '0xbaa8632cd162265ca46baaaad746ec3d283a474e344727854d962e057380a51',
-      },
-    ],
-    users: [
-      {
-        address: '0x7fff551249D223f723557a96a0e1aCCCC79cC934',
-        deposits: [
-          {
-            amount: new BigNumber('1'),
-            user: '0x7fff551249D223f723557a96a0e1aCCCC79cC934',
-            tranche_id: 2,
-            tx: '0x55fa59d71aac37428a0000042c48da677a4426a4e92447919a8199520ce20f53',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('1'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('1'),
-      },
-      {
-        address: '0xCc5CAFD3daA3bb2c1168521F35d1eBEB6cf7c051',
-        deposits: [
-          {
-            amount: new BigNumber('200000'),
-            user: '0xCc5CAFD3daA3bb2c1168521F35d1eBEB6cf7c051',
-            tranche_id: 2,
-            tx: '0x8168230eb08320a7a874ebeeea20f0def842b8059a2b05a036870e00ca624c88',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('200000'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('200000'),
-      },
-      {
-        address: '0x9cd59376F896a5F2084232E386A65c17EEA4Fe9f',
-        deposits: [
-          {
-            amount: new BigNumber('200000'),
-            user: '0x9cd59376F896a5F2084232E386A65c17EEA4Fe9f',
-            tranche_id: 2,
-            tx: '0x2eb27449e08a245314faaaaf0d93fafc70733586495f18cf2fb69ef979459efd',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('200000'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('200000'),
-      },
-      {
-        address: '0xe45993F39183E148bC35BA02ba8aaaa807981caa',
-        deposits: [
-          {
-            amount: new BigNumber('200000'),
-            user: '0xe45993F39183E148bC35BA02ba8aaaa07981caa',
-            tranche_id: 2,
-            tx: '0xbda7b70ab8ac629617e74d33575451b04d7830bc0da516e10d533efc2eef1530',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('200000'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('200000'),
-      },
-    ],
-  },
-  {
-    tranche_id: 3,
-    tranche_start: parseJSON('2021-11-05T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-05-05T00:00:00.000Z'),
-    total_added: new BigNumber('14597706.0446472999'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('14445316.74229298796336861823365303'),
-    deposits: [
-      {
-        amount: new BigNumber('129284.449'),
-        user: '0x26100B2C8168Cb0A6c869a5698265086A3Dfeaaa',
-        tx: '0xcc67a776a2e3b48864470aaa9e0940c1814663b4fde6df60c1a099a636dcae79',
-      },
-      {
-        amount: new BigNumber('1151405.093'),
-        user: '0x777Ec2e2beaB6a63c1E763D0dc4120AF60BEe39F',
-        tx: '0x1237d45a40aacc5dff7f8f69e8a4c0536fd0460b915de576bd3f0fdf5892c0a4',
-      },
-      {
-        amount: new BigNumber('1151073.595'),
-        user: '0x5CD0Ec63687588817044794bF15d4e37991efAB3',
-        tx: '0xb4eaca7d8abeaf7e1d9d28b1f1fa09fc1933af0e11bff4b0120dcef7d2dfc64d',
-      },
-      {
-        amount: new BigNumber('54034.5'),
-        user: '0xc01F2E57554Bb392384feCA6a54c8E3A3Ca94E42',
-        tx: '0xf33289a2a73a65b132accdddd600a8d2c7556c2d80784d5f8d4eea1ecacf93cc',
-      },
-      {
-        amount: new BigNumber('115049.22'),
-        user: '0x01a8055A97b461b58ba8e37cd349721FeAe77A8D',
-        tx: '0xf650c3599b24d01dfa1f3e19b22f870ff8ac8dfac529893f0b22d548c3535eda',
-      },
-    ],
-    withdrawals: [
-      {
-        amount: new BigNumber('0'),
-        user: '0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b',
-        tx: '0x1af894d1f9ce5ea79aa52d180fbff5f30b8b456e43b76ca5d7d73366e422ea37',
-      },
-    ],
-    users: [
-      {
-        address: '0x26100B2C8168Cb0A6c869a5698265086A3DfeF98',
-        deposits: [
-          {
-            amount: new BigNumber('129284.449'),
-            user: '0x26100B2C8168Cb0A6c869a5698265086A3DfeF98',
-            tranche_id: 3,
-            tx: '0xcc67a776a2e3b48864470eff9e0940c1814663b4fde6df60c1a099a636dcae79',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('129284.449'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('129284.449'),
-      },
-      {
-        address: '0xd4632B682228Db5f38E2283869AEe8c29ee6Eec8',
-        deposits: [
-          {
-            amount: new BigNumber('44499.2'),
-            user: '0xd4632B682228Db5f38E2283869AEe8c29ee6Eec8',
-            tranche_id: 3,
-            tx: '0x57019840d1ce05e0ef65c45801d6699e5eb1032bd8ad56493594d4866996ea82',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('44499.2'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('44499.2'),
-      },
-      {
-        address: '0xe2E6F37cb1f1980418012BF69f43910d6Bc73e73',
-        deposits: [
-          {
-            amount: new BigNumber('66748.8'),
-            user: '0xe2E6F37cb1f1980418012BF69f43910d6Bc73e73',
-            tranche_id: 3,
-            tx: '0xd257a3aacd5bdf86cbea0ed3db3697f55dff9092129db6baedacaf00b50af936',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('66748.8'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('66748.8'),
-      },
-      {
-        address: '0xc01F2E57554Bb392384feCA6a54c8E3A3Ca94E42',
-        deposits: [
-          {
-            amount: new BigNumber('54034.5'),
-            user: '0xc01F2E57554Bb392384feCA6a54c8E3A3Ca94E42',
-            tranche_id: 3,
-            tx: '0xf33289a2a73a65b132accdddd600a8d2c7556c2d80784d5f8d4eea1ecacf93cc',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('54034.5'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('54034.5'),
-      },
-    ],
-  },
-  {
-    tranche_id: 4,
-    tranche_start: parseJSON('2021-10-05T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-04-05T00:00:00.000Z'),
-    total_added: new BigNumber('5198082.8647159303'),
-    total_removed: new BigNumber('12706.1452878164044708'),
-    locked_amount: new BigNumber('4849328.20502099651595959714823613'),
-    deposits: [
-      {
-        amount: new BigNumber('110499.5291'),
-        user: '0xa8679b60612Fb2e19d68964326CA02dCe6a08D08',
-        tx: '0x9d3432b818054796489848c415af5c523acb16c1540e5865010baf71964c03a7',
-      },
-      {
-        amount: new BigNumber('331498.5873'),
-        user: '0x39fEc2e2beaB6a63c1E763D0dc4120AF60BEe39F',
-        tx: '0xdf5c6e44ef0763e785721802704e5fd186fa3964302a566899027447d0dda57b',
-      },
-      {
-        amount: new BigNumber('27624.032275'),
-        user: '0xF5Fb27b912D987B5b6e02A1B1BE0C1F0740E2c6f',
-        tx: '0x1860d39ae3e9ad710da9e2a9bf9606eedc1b176fca673473d6854ea91ed8beb5',
-      },
-      {
-        amount: new BigNumber('73666.3527333333'),
-        user: '0x2895059cB5a492BEd58D1fB22713006EfaD465eA',
-        tx: '0x260619e2129cc58ae03f6b4ecfc5a6eeab29b5998de69875accb3cb945beed04',
-      },
-    ],
-    withdrawals: [
-      {
-        amount: new BigNumber('1290.014571009862016'),
-        user: '0xBc934494675a6ceB639B9EfEe5b9C0f017D35a75',
-        tx: '0x637c3648ce941a77e08e741f981806a5d56275db6d280f041902386ae8567d06',
-      },
-      {
-        amount: new BigNumber('5197.621879605058623'),
-        user: '0xafa64cCa337eFEE0AD827F6C2684e69275226e90',
-        tx: '0xe8b8c1a38d3ae809dcaae54a11adeeba0f46be03924e91d8f251f3f2d48c3553',
-      },
-      {
-        amount: new BigNumber('376.2625308599198808'),
-        user: '0x1dD2718fd01d05C9F50Fce8Bb723A4C7483A1E15',
-        tx: '0x78af737235f1123bb1c6a607a0b4b7a3c5ed6859a4e8912f45bb7c812724b1de',
-      },
-      {
-        amount: new BigNumber('4162.301372742020875'),
-        user: '0xBc934494675a6ceB639B9EfEe5b9C0f017D35a75',
-        tx: '0x85c7d9979f0e3a3660dc5952732eaf9414f7c28a1c00a9a10f449843f91d85e0',
-      },
-      {
-        amount: new BigNumber('1679.944933599543076'),
-        user: '0x9058e12e2F32cB1cD4D3123359963D77786477FC',
-        tx: '0xd92083f2e90e84cb70ef27ac410ed1144200c41b1714fb54d29f5f23ca086ecb',
-      },
-    ],
-    users: [
-      {
-        address: '0xa8679b60612Fb2e19d68964326CA02dCe6a08D08',
-        deposits: [
-          {
-            amount: new BigNumber('110499.5291'),
-            user: '0xa8679b60612Fb2e19d68964326CA02dCe6a08D08',
-            tranche_id: 4,
-            tx: '0x9d3432b818054796489848c415af5c523acb16c1540e5865010baf71964c03a7',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('110499.5291'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('110499.5291'),
-      },
-      {
-        address: '0x8767d65677Cabaa2050b764AEf40610f2f9796F5',
-        deposits: [
-          {
-            amount: new BigNumber('1104995.291'),
-            user: '0x8767d65677Cabaa2050b764AEf40610f2f9796F5',
-            tranche_id: 4,
-            tx: '0xc6298f52c173a837abd051ed810b01eb5731be307376b73df6e31b4de39d0122',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('1104995.291'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('1104995.291'),
-      },
-      {
-        address: '0x91715128a71c9C734CDC20E5EdaaeA02E72e422E',
-        deposits: [
-          {
-            amount: new BigNumber('165749.29365'),
-            user: '0x91715128a71c9C734CDC20E5EdEEeA02E72e422E',
-            tranche_id: 4,
-            tx: '0xf828cea685a0689f27446f02d3376c3afa4398182d3b5bf1c81e949f5965d1c1',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('165749.29365'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('165749.29365'),
-      },
-      {
-        address: '0x2895059cB5a492BEd58D1fB22713006EfaD465eA',
-        deposits: [
-          {
-            amount: new BigNumber('73666.3527333333'),
-            user: '0x2895059cB5a492BEd58D1fB22713006EfaD465eA',
-            tranche_id: 4,
-            tx: '0x260619e2129cc58ae03f6b4ecfc5a6eeab29b5998de69875accb3cb945beed04',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('73666.3527333333'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('73666.3527333333'),
-      },
-    ],
-  },
-  {
-    tranche_id: 23,
-    tranche_start: parseJSON('2022-04-30T00:00:00.000Z'),
-    tranche_end: parseJSON('2022-04-30T00:00:00.000Z'),
-    total_added: new BigNumber('10833.29'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('10833.29'),
-    deposits: [
-      {
-        amount: new BigNumber('10833.29'),
-        user: '0xF3359E5B89f7804c8c9283781Aaaa33BBd979c9D',
-        tx: '0x65f904ef34d6992b52f449a709d7a24411a501fd07f90aaa9255eacc994bc229',
-      },
-    ],
-    withdrawals: [],
-    users: [
-      {
-        address: '0xF3359E5B89f7804c8c9283781Aaaa33BBd979c9D',
-        deposits: [
-          {
-            amount: new BigNumber('10833.29'),
-            user: '0xF3359E5B89f7804c8c9283781Aaaa33BBd979c9D',
-            tranche_id: 23,
-            tx: '0x65f904ef34d6992b52f449a709d7a24411a501fd07f90aaa9255eacc994bc229',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('10833.29'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('10833.29'),
-      },
-    ],
-  },
-  {
-    tranche_id: 24,
-    tranche_start: parseJSON('2022-09-26T00:00:00.000Z'),
-    tranche_end: parseJSON('2022-09-26T00:00:00.000Z'),
-    total_added: new BigNumber('16249.93'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('16249.93'),
-    deposits: [
-      {
-        amount: new BigNumber('16249.93'),
-        user: '0xcE96670971ec2E1E79D0d96688adbA2FfD6F6C7f',
-        tx: '0x3dbd991b7914986505d89a7c1562278dffffa2f5f444bdbf5d6bbd838e3d8d5d',
-      },
-    ],
-    withdrawals: [],
-    users: [
-      {
-        address: '0xcE96670971ec2E1E79D0d96688adbA2FfD6F6C7f',
-        deposits: [
-          {
-            amount: new BigNumber('16249.93'),
-            user: '0xcE96670971ec2E1E79D0d96688adbA2FfD6F6C7f',
-            tranche_id: 24,
-            tx: '0x3dbd991b7914986505d89a7c1562278dffffa2f5f444bdbf5d6bbd838e3d8d5d',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('16249.93'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('16249.93'),
-      },
-    ],
-  },
-  {
-    tranche_id: 25,
-    tranche_start: parseJSON('2022-02-10T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-04-05T00:00:00.000Z'),
-    total_added: new BigNumber('0'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('0'),
-    deposits: [],
-    withdrawals: [],
-    users: [],
-  },
-  {
-    tranche_id: 26,
-    tranche_start: parseJSON('2022-02-04T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-04-05T00:00:00.000Z'),
-    total_added: new BigNumber('135173.4239508'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('135173.4239508'),
-    deposits: [
-      {
-        amount: new BigNumber('135173.4239508'),
-        user: '0xc90eA4d8D214D548221EE3622a8BE1D61f7077A2',
-        tx: '0x123fb1e293a8246b92d85a47c8d33def9fb6468c7cbb70f1754d78914b12dbf8',
-      },
-    ],
-    withdrawals: [],
-    users: [
-      {
-        address: '0x222eA4d8D214D548221EE3622a8BE1D61f7077A2',
-        deposits: [
-          {
-            amount: new BigNumber('135173.4239508'),
-            user: '0x222eA4d8D214D548221EE3622a8BE1D61f7077A2',
-            tranche_id: 26,
-            tx: '0x9fafb1e293a8246b92d85a47c8d33def9fb6468c7cbb70f1754d78914b12dbf8',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('135173.4239508'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('135173.4239508'),
-      },
-    ],
-  },
-  {
-    tranche_id: 27,
-    tranche_start: parseJSON('2022-05-09T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-04-05T00:00:00.000Z'),
-    total_added: new BigNumber('32499.86'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('32499.86'),
-    deposits: [
-      {
-        amount: new BigNumber('32499.86'),
-        user: '0x1E7c4E57A1dc4dD4bBE81b833e3E437f69619DaB',
-        tx: '0x25a3dd4852ce8ac1c15fe42123cfab14e4bf8a5c1cb97167cb4d6fe20bd319ae',
-      },
-    ],
-    withdrawals: [],
-    users: [
-      {
-        address: '0x3E7c4E57A1dc4dD4bBE81bbEFBe3Eaaaf69619Da9',
-        deposits: [
-          {
-            amount: new BigNumber('32499.86'),
-            user: '0x3E7c4E57A1dc4dD4bBE81bbEFBe3Eaaaf69619Da9',
-            tranche_id: 27,
-            tx: '0x75a3dd4852ce8ac1c15fe42ff6cfab1455bf8a5c1cb97167cb4d6fe20bd319ae',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('32499.86'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('32499.86'),
-      },
-    ],
-  },
-  {
-    tranche_id: 28,
-    tranche_start: parseJSON('2022-04-30T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-04-05T00:00:00.000Z'),
-    total_added: new BigNumber('10833.29'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('10833.29'),
-    deposits: [
-      {
-        amount: new BigNumber('10833.29'),
-        user: '0xF3359E5B89f7804c8c9283781Aaa133BBd979c9D',
-        tx: '0x166d235eff44e7bcc63597c0d6e698552e4440fe90ec7cf07a1d510c275cf3e0',
-      },
-    ],
-    withdrawals: [],
-    users: [
-      {
-        address: '0x12349E5B89f7804c8c9283781A23133BBd979c22',
-        deposits: [
-          {
-            amount: new BigNumber('10833.29'),
-            user: '0x12349E5B89f7804c8c9283781A23133BBd979c22',
-            tranche_id: 28,
-            tx: '0x166d235eff44e7baa6359712345698552e6150fe90ec7cf07a1d510c275cf3e0',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('10833.29'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('10833.29'),
-      },
-    ],
-  },
-  {
-    tranche_id: 29,
-    tranche_start: parseJSON('2022-09-26T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-04-05T00:00:00.000Z'),
-    total_added: new BigNumber('16249.93'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('16249.93'),
-    deposits: [
-      {
-        amount: new BigNumber('16249.93'),
-        user: '0xcE96670971ec2E1E79D0d12388adbA2FfD6F6C7f',
-        tx: '0xa770ab2d05e6c81be46b73ac2326e81a111da4ce55a2d8544bd95b48ad530674',
-      },
-    ],
-    withdrawals: [],
-    users: [
-      {
-        address: '0xcE96670971ec2E1E79D0d96688adbA2FfD6F6C7f',
-        deposits: [
-          {
-            amount: new BigNumber('16249.93'),
-            user: '0xcE96670971ec212379D0d12388adbA2Ffc6F6C7f',
-            tranche_id: 29,
-            tx: '0xa220ab2d05e6c81be12373ac2326e81a912da4ce55a2d8544bd95b48ad530674',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('16249.93'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('16249.93'),
-      },
-    ],
-  },
-  {
-    tranche_id: 30,
-    tranche_start: parseJSON('2021-11-01T00:00:00.000Z'),
-    tranche_end: parseJSON('2022-05-01T00:00:00.000Z'),
-    total_added: new BigNumber('0'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('0'),
-    deposits: [],
-    withdrawals: [],
-    users: [],
-  },
-  {
-    tranche_id: 31,
-    tranche_start: parseJSON('2022-02-01T00:00:00.000Z'),
-    tranche_end: parseJSON('2022-08-01T00:00:00.000Z'),
-    total_added: new BigNumber('0'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('0'),
-    deposits: [],
-    withdrawals: [],
-    users: [],
-  },
-  {
-    tranche_id: 32,
-    tranche_start: parseJSON('2022-05-01T00:00:00.000Z'),
-    tranche_end: parseJSON('2022-11-01T00:00:00.000Z'),
-    total_added: new BigNumber('0'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('0'),
-    deposits: [],
-    withdrawals: [],
-    users: [],
-  },
-  {
-    tranche_id: 33,
-    tranche_start: parseJSON('2022-11-01T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-05-01T00:00:00.000Z'),
-    total_added: new BigNumber('0'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('0'),
-    deposits: [],
-    withdrawals: [],
-    users: [],
-  },
-];
-
-export default json;

apps/token/src/hooks/__mocks__/use-tranches.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import mock from './tranches-mock';
-import type { Tranche } from '@vegaprotocol/smart-contracts';
-
-export function useTranches() {
-  const [tranches, setTranches] = React.useState<Tranche[] | null>(null);
-  const [error, setError] = React.useState<string | null>(null);
-
-  React.useEffect(() => {
-    const run = async () => {
-      try {
-        setTranches(mock);
-      } catch (err) {
-        setError((err as Error).message);
-      }
-    };
-    run();
-  }, []);
-
-  return { tranches, error };
-}

apps/token/src/hooks/use-get-user-balances.ts

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+import * as Sentry from '@sentry/react';
+import { toBigNum } from '@vegaprotocol/react-helpers';
+import { useContracts } from '../contexts/contracts/contracts-context';
+import { useAppState } from '../contexts/app-state/app-state-context';
+import { useEthereumConfig } from '@vegaprotocol/web3';
+
+export const useGetUserBalances = (account: string | undefined) => {
+  const { token, vesting } = useContracts();
+  const { config } = useEthereumConfig();
+  const {
+    appState: { decimals },
+  } = useAppState();
+  return useCallback(async () => {
+    if (!account || !config) return;
+    try {
+      const [b, w, stats, a] = await Promise.all([
+        vesting.user_total_all_tranches(account),
+        token.balanceOf(account),
+        vesting.user_stats(account),
+        token.allowance(account, config.staking_bridge_contract.address),
+      ]);
+
+      const balance = toBigNum(b, decimals);
+      const walletBalance = toBigNum(w, decimals);
+      const lien = toBigNum(stats.lien, decimals);
+      const allowance = toBigNum(a, decimals);
+
+      return {
+        balanceFormatted: balance,
+        walletBalance,
+        lien,
+        allowance,
+        balance,
+      };
+    } catch (err) {
+      Sentry.captureException(err);
+      return null;
+    }
+  }, [account, config, decimals, token, vesting]);
+};

apps/token/src/hooks/use-get-user-tranche-balances.ts

@@ -1,70 +0,0 @@
-import React from 'react';
-import * as Sentry from '@sentry/react';
-import type { TokenVesting } from '@vegaprotocol/smart-contracts';
-
-import {
-  AppStateActionType,
-  useAppState,
-} from '../contexts/app-state/app-state-context';
-import { BigNumber } from '../lib/bignumber';
-import { useTranches } from './use-tranches';
-import { toBigNum } from '@vegaprotocol/react-helpers';
-import { useBalances } from '../lib/balances/balances-store';
-
-export const useGetUserTrancheBalances = (
-  address: string,
-  vesting: TokenVesting
-) => {
-  const {
-    appState: { decimals },
-    appDispatch,
-  } = useAppState();
-  const { setTranchesBalances } = useBalances();
-  const { tranches } = useTranches();
-  return React.useCallback(async () => {
-    appDispatch({
-      type: AppStateActionType.SET_TRANCHE_ERROR,
-      error: null,
-    });
-    try {
-      if (!tranches) {
-        return;
-      }
-      const userTranches = tranches?.filter((t) =>
-        t.users.some(
-          ({ address: a }) =>
-            a && address && a.toLowerCase() === address.toLowerCase()
-        )
-      );
-      const trancheIds = [0, ...userTranches.map((t) => t.tranche_id)];
-      const promises = trancheIds.map(async (tId) => {
-        const [t, v] = await Promise.all([
-          vesting.get_tranche_balance(address, tId),
-          vesting.get_vested_for_tranche(address, tId),
-        ]);
-
-        const total = toBigNum(t, decimals);
-        const vested = toBigNum(v, decimals);
-
-        return {
-          id: tId,
-          locked: tId === 0 ? total : total.minus(vested),
-          vested: tId === 0 ? new BigNumber(0) : vested,
-        };
-      });
-
-      const trancheBalances = await Promise.all(promises);
-      setTranchesBalances(trancheBalances);
-      appDispatch({
-        type: AppStateActionType.SET_TRANCHE_DATA,
-        tranches,
-      });
-    } catch (e) {
-      Sentry.captureException(e);
-      appDispatch({
-        type: AppStateActionType.SET_TRANCHE_ERROR,
-        error: e as Error,
-      });
-    }
-  }, [appDispatch, tranches, setTranchesBalances, address, vesting, decimals]);
-};

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[];