chore: skip broken test

.eslintrc.json

@@ -73,11 +73,9 @@
           "error",
           {
             "prefer": "type-imports",
-            "disallowTypeAnnotations": true,
-            "fixStyle": "inline-type-imports"
+            "disallowTypeAnnotations": true
           }
         ],
-        "@typescript-eslint/no-useless-constructor": 0,
         "curly": ["error", "multi-line"]
       }
     },

.gitattributes

@@ -1,4 +1,3 @@
 * text eol=lf
 *.png binary
 *.ico binary
-*.woff2 binary

.github/workflows/ci-cd-trigger.yml

@@ -205,7 +205,7 @@ jobs:
 
   console-e2e:
     needs: [build-sources, check-e2e-needed]
-    name: '(CI) trading e2e python'
+    name: '(CI) console python'
     uses: ./.github/workflows/console-test-run.yml
     secrets: inherit
     if: needs.check-e2e-needed.outputs.run-tests == 'true' && contains(needs.build-sources.outputs.projects, 'trading')

.github/workflows/console-test-run.yml

@@ -10,7 +10,7 @@ on:
     inputs:
       console-test-branch:
         type: choice
-        description: 'main: v0.73.5, develop: v0.73.5'
+        description: 'main: v0.72.14, develop: v0.73.0-preview7'
         options:
           - main
           - develop
@@ -19,7 +19,7 @@ jobs:
   create-docker-image:
     name: Create docker image for console-test
     runs-on: ubuntu-22.04
-    timeout-minutes: 45
+    timeout-minutes: 20
     steps:
       #----------------------------------------------
       #       check-out frontend-monorepo
@@ -138,7 +138,7 @@ jobs:
     name: run-tests
     runs-on: 8-cores
     needs: [create-docker-image, console-test-branch]
-    timeout-minutes: 45
+    timeout-minutes: 20
     steps:
       #----------------------------------------------
       #       load docker image
@@ -153,19 +153,25 @@ jobs:
         run: |
           docker load --input /tmp/console-image.tar
           docker image ls -a
+
       #----------------------------------------------
-      #       check-out frontend-monorepo
+      #       check-out tests repo
       #----------------------------------------------
-      - name: Checkout frontend-monorepo
+      - name: Checkout console test repo
         uses: actions/checkout@v3
         with:
-          ref: ${{ inputs.github-sha || github.sha }}
-      #----------------------------------------------
-      #       get vega version
-      #----------------------------------------------
-      - name: Set VEGA_VERSION from .env
-        id: set_vega_version
-        run: echo "VEGA_VERSION=$(grep VEGA_VERSION apps/trading/e2e/.env | cut -d '=' -f2)" >> $GITHUB_ENV
+          repository: vegaprotocol/console-test
+          ref: ${{ needs.console-test-branch.outputs.console-branch }}
+
+      - name: Load console test envs
+        id: console-test-env
+        uses: falti/dotenv-action@v1.0.4
+        with:
+          path: '.env.${{ needs.console-test-branch.outputs.console-branch  }}'
+          export-variables: true
+          keys-case: upper
+          log-variables: true
+
       #----------------------------------------------
       #  -----  Setup python  -----
       #----------------------------------------------
@@ -188,25 +194,22 @@ jobs:
       #----------------------------------------------
       - name: Install dependencies
         run: poetry install --no-interaction --no-root
-        working-directory: apps/trading/e2e
       #----------------------------------------------
       # install vega binaries
       #----------------------------------------------
       - name: Install vega binaries
         run: poetry run python -m vega_sim.tools.load_binaries --force --version ${{ env.VEGA_VERSION }}
-        working-directory: apps/trading/e2e
       #----------------------------------------------
-      # install playwrightworking-directory: apps/trading/e2e
+      # install playwright
       #----------------------------------------------
       - name: install playwright
         run: poetry run playwright install --with-deps chromium
-        working-directory: apps/trading/e2e
       #----------------------------------------------
       # run tests
       #----------------------------------------------
       - name: Run tests
-        run: CONSOLE_IMAGE_NAME=ci/trading:local poetry run pytest -v -s --numprocesses 1 --dist loadfile --durations=45
-        working-directory: apps/trading/e2e
+        run: CONSOLE_IMAGE_NAME=ci/trading:local poetry run pytest -v -s --numprocesses 4 --dist loadfile --durations=15
+
       #----------------------------------------------
       # upload traces
       #----------------------------------------------
@@ -215,7 +218,7 @@ jobs:
         if: always()
         with:
           name: playwright-trace
-          path: apps/trading/e2e/traces/
+          path: ./traces/
           retention-days: 15
       #----------------------------------------------
       #  -----  upload logs  -----
@@ -227,46 +230,3 @@ jobs:
           name: worker-logs
           path: ./logs/
           retention-days: 15
-      #----------------------------------------------
-      #  -----  upload market-sim logs  -----
-      #----------------------------------------------
-      - name: Prepare and Zip market-sim-logs
-        if: always()
-        run: |
-          parent_dir="/tmp/market-sim-logs"
-          echo "Creating parent directory at $parent_dir"
-          mkdir -p "$parent_dir"
-
-          echo "Waiting for vega-sim-* folders to be created..."
-          sleep 10  # Waits 10 seconds to ensure all folders are created
-
-          echo "Before searching for vega-sim-* folders in /tmp..."
-          folders=$(find /tmp -mindepth 1 -type d -name 'vega-sim-*' -print) || echo "Find command failed with exit code $?"
-
-          echo "After searching for vega-sim-* folders in /tmp..."
-
-          if [ -z "$folders" ]; then
-            echo "No vega-sim-* folders found."
-            exit 0
-          fi
-
-          echo "Moving vega-sim-* folders to $parent_dir"
-          echo "$folders" | xargs -I {} mv {} "$parent_dir/"
-
-          echo "Checking if $parent_dir is not empty..."
-          if [ "$(ls -A $parent_dir)" ]; then
-            echo "Zipping the parent directory..."
-            zip -r market-sim-logs.zip "$parent_dir" && echo "Zip file created successfully."
-          else
-            echo "$parent_dir is empty. No zip file created."
-            exit 0
-          fi
-        shell: /usr/bin/bash -e {0}
-
-      - name: Upload market-sim-logs
-        uses: actions/upload-artifact@v3
-        if: always()
-        with:
-          name: market-sim-logs
-          path: market-sim-logs.zip
-          retention-days: 15

.gitignore

@@ -48,15 +48,9 @@ cypress.env.json
 # Next.js
 .next
 
-# cypress
+#cypress
 /apps/**/cypress/reports/
 /apps/**/cypress/downloads/
 /apps/**/fixtures/wallet/node**
 
-# apps/trading/e2e
-__pycache__/
-apps/trading/e2e/logs/
-apps/trading/e2e/.pytest_cache/
-apps/trading/e2e/traces/
-
-.nx/
+.nx/cache

.husky/pre-commit

@@ -1,8 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-# Auto-format all files
-yarn nx format:write
-
 # Lint all staged files
 yarn lint-staged

.husky/pre-push

@@ -1,8 +1,8 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-# Lint all staged files - this brings more value as pre-commit
-# yarn nx format:check
+# Lint all staged files
+yarn nx format:check
 
 # Test all projects with changes
-# yarn nx affected -t test --exclude trading
+yarn nx affected -t test --exclude trading

.prettierignore

@@ -1,7 +1,6 @@
 # Add files here to ignore them from prettier formatting
 
 /dist
-/dist-result
 /coverage
 __generated__
 __generated___
@@ -10,14 +9,4 @@ apps/static/src/assets/devnet-tranches.json
 apps/static/src/assets/mainnet-tranches.json
 apps/static/src/assets/testnet-tranches.json
 
-/apps/**/cypress/reports/
-/apps/**/cypress/downloads/
-
-/.nx/cache
-
-# apps/trading/e2e
-__pycache__/
-apps/trading/e2e/logs/
-apps/trading/e2e/.pytest_cache/
-apps/trading/e2e/traces/
-.pytest_cache/
+/.nx/cache

.prettierrc

@@ -1,3 +1,4 @@
 {
+  "plugins": ["prettier-plugin-tailwindcss"],
   "singleQuote": true
 }

README.md

@@ -4,7 +4,7 @@ The front-end monorepo provides a toolkit for building apps that interact with V
 
 This repository is managed using [Nx](https://nx.dev).
 
-## 🔎 Applications in this repo
+# 🔎 Applications in this repo
 
 ### [Block explorer](./apps/explorer)
 
@@ -30,7 +30,7 @@ Hosting for static content being shared across apps, for example fonts.
 
 The utility dApp for validators wishing to add or remove themselves as a signer of the multisig contract.
 
-## 🧱 Libraries in this repo
+# 🧱 Libraries in this repo
 
 ### [UI toolkit](./libs/ui-toolkit)
 
@@ -53,7 +53,7 @@ A utility library for connecting to the Ethereum network and interacting with Ve
 
 Generic react helpers that can be used across multiple applications, along with other utilities.
 
-## 💻 Develop
+# 💻 Develop
 
 ### Set up
 
@@ -103,7 +103,7 @@ In CI linting, formatting and also run. These checks can be seen in the [CI work
 
 Visit the [Nx Documentation](https://nx.dev/getting-started/intro) to learn more.
 
-## 🐋 Hosting a console
+# 🐋 Hosting a console
 
 To host a console there are two possible build scenarios for running the frontends: nx performed **outside** or **inside** docker build. For specific build instructions follow [build instructions](#build-instructions).
 
@@ -226,6 +226,6 @@ Note: The script is only needed if capsule was built for first time or fresh. To
 vega wallet service run -n DV --load-tokens --tokens-passphrase-file passphrase --no-version-check --automatic-consent --home ~/.vegacapsule/testnet/wallet
 ```
 
-## 📑 License
+# 📑 License
 
 [MIT](./LICENSE)

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

@@ -44,7 +44,7 @@ context('Proposal page', { tags: '@smoke' }, function () {
       cy.getByTestId('icon-cross').click();
     });
 
-    it('Proposal page displayed on mobile', function () {
+    it.skip('Proposal page displayed on mobile', function () {
       const proposalTitle = 'Add Lorem Ipsum market';
 
       cy.common_switch_to_mobile_and_click_toggle();
@@ -55,7 +55,7 @@ context('Proposal page', { tags: '@smoke' }, function () {
       });
     });
 
-    it.skip('Able to view new asset proposal', function () {
+    it('Able to view new asset proposal', function () {
       const proposalTitle = 'Test new asset proposal';
       const newAssetProposalBody = getNewAssetTxBody();
       cy.VegaWalletSubmitProposal(newAssetProposalBody);

apps/explorer/netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

apps/explorer/project.json

@@ -74,6 +74,15 @@
         ]
       }
     },
+    "build-netlify": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "cp apps/explorer/netlify.toml netlify.toml",
+          "nx build explorer"
+        ]
+      }
+    },
     "build-spec": {
       "executor": "nx:run-commands",
       "outputs": [],

apps/explorer/src/app/app.tsx

@@ -1,4 +1,3 @@
-import '../i18n';
 import {
   NetworkLoader,
   NodeFailure,
@@ -12,8 +11,7 @@ import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-web
 import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
 import { DEFAULT_CACHE_CONFIG } from '@vegaprotocol/apollo-client';
 import { RouterProvider } from 'react-router-dom';
-import { useRouterConfig } from './routes/router-config';
-import { createBrowserRouter } from 'react-router-dom';
+import { router } from './routes/router-config';
 import { t } from '@vegaprotocol/i18n';
 import { Suspense } from 'react';
 
@@ -30,27 +28,20 @@ function App() {
   );
   return (
     <TendermintWebsocketProvider>
-      <Suspense fallback={splashLoading}>
-        <NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
-          <NodeGuard
-            skeleton={<div>{t('Loading')}</div>}
-            failure={
-              <NodeFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />
-            }
-          >
-            <Suspense fallback={splashLoading}>
-              <RouterProvider
-                router={createBrowserRouter(useRouterConfig())}
-                fallbackElement={splashLoading}
-              />
-            </Suspense>
-          </NodeGuard>
-          <NodeSwitcherDialog
-            open={nodeSwitcherOpen}
-            setOpen={setNodeSwitcherOpen}
-          />
-        </NetworkLoader>
-      </Suspense>
+      <NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
+        <NodeGuard
+          skeleton={<div>{t('Loading')}</div>}
+          failure={<NodeFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
+        >
+          <Suspense fallback={splashLoading}>
+            <RouterProvider router={router} fallbackElement={splashLoading} />
+          </Suspense>
+        </NodeGuard>
+        <NodeSwitcherDialog
+          open={nodeSwitcherOpen}
+          setOpen={setNodeSwitcherOpen}
+        />
+      </NetworkLoader>
     </TendermintWebsocketProvider>
   );
 }

apps/explorer/src/app/components/asset-balance/asset-balance.tsx

@@ -1,5 +1,5 @@
 import { useAssetDataProvider } from '@vegaprotocol/assets';
-import { addDecimalsFixedFormatNumber } from '@vegaprotocol/utils';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { AssetLink } from '../links';
 
 export type AssetBalanceProps = {
@@ -23,12 +23,12 @@ const AssetBalance = ({
 
   const label =
     !loading && asset && asset.decimals
-      ? addDecimalsFixedFormatNumber(price, asset.decimals)
+      ? addDecimalsFormatNumber(price, asset.decimals)
       : price;
 
   return (
     <div className="inline-block">
-      <span className="font-mono">{label}</span>{' '}
+      <span>{label}</span>{' '}
       {showAssetLink && asset?.id ? (
         <AssetLink showAssetSymbol={showAssetSymbol} assetId={assetId} />
       ) : null}

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

@@ -1,30 +1,24 @@
 import { useMemo } from 'react';
-import {
-  useAssetTypeMapping,
-  useAssetStatusMapping,
-  type AssetFieldsFragment,
-} from '@vegaprotocol/assets';
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+import { AssetTypeMapping, AssetStatusMapping } from '@vegaprotocol/assets';
 import { t } from '@vegaprotocol/i18n';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-import { type AgGridReact } from 'ag-grid-react';
+import type { AgGridReact } from 'ag-grid-react';
 import { AgGrid } from '@vegaprotocol/datagrid';
-import { type VegaICellRendererParams } from '@vegaprotocol/datagrid';
+import type { VegaICellRendererParams } from '@vegaprotocol/datagrid';
 import { useRef, useLayoutEffect } from 'react';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
 import { useNavigate } from 'react-router-dom';
-import { type ColDef } from 'ag-grid-community';
-import type { RowClickedEvent } from 'ag-grid-community';
+import type { RowClickedEvent, ColDef } from 'ag-grid-community';
 
 type AssetsTableProps = {
   data: AssetFieldsFragment[] | null;
 };
 export const AssetsTable = ({ data }: AssetsTableProps) => {
-  const assetTypeMapping = useAssetTypeMapping();
-  const assetStatusMapping = useAssetStatusMapping();
   const navigate = useNavigate();
   const ref = useRef<AgGridReact>(null);
   const showColumnsOnDesktop = () => {
-    ref.current?.api.setColumnsVisible(
+    ref.current?.columnApi.setColumnsVisible(
       ['id', 'type', 'status'],
       window.innerWidth > BREAKPOINT_MD
     );
@@ -53,14 +47,14 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
         field: 'source.__typename',
         hide: window.innerWidth < BREAKPOINT_MD,
         valueFormatter: ({ value }: { value?: string }) =>
-          value ? assetTypeMapping[value].value : '',
+          value ? AssetTypeMapping[value].value : '',
       },
       {
         headerName: t('Status'),
         field: 'status',
         hide: window.innerWidth < BREAKPOINT_MD,
         valueFormatter: ({ value }: { value?: string }) =>
-          value ? assetStatusMapping[value].value : '',
+          value ? AssetStatusMapping[value].value : '',
       },
       {
         colId: 'actions',
@@ -75,7 +69,7 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
         }: VegaICellRendererParams<AssetFieldsFragment, 'id'>) =>
           value ? (
             <ButtonLink
-              onClick={() => {
+              onClick={(e) => {
                 navigate(value);
               }}
             >
@@ -86,7 +80,7 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
           ),
       },
     ],
-    [navigate, assetStatusMapping, assetTypeMapping]
+    [navigate]
   );
 
   return (

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

@@ -14,7 +14,7 @@ import { Routes } from '../../routes/route-names';
 import { NetworkSwitcher } from '@vegaprotocol/environment';
 import type { Navigable } from '../../routes/router-config';
 import { isNavigable } from '../../routes/router-config';
-import { useRouterConfig } from '../../routes/router-config';
+import { routerConfig } from '../../routes/router-config';
 import { useMemo } from 'react';
 import compact from 'lodash/compact';
 import { Search } from '../search';
@@ -26,7 +26,6 @@ const routeToNavigationItem = (r: Navigable) => (
 );
 
 export const Header = () => {
-  const routerConfig = useRouterConfig();
   const isHome = Boolean(useMatch(Routes.HOME));
   const pages = routerConfig[0].children || [];
   const mainItems = compact(

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

@@ -60,7 +60,7 @@ const PartyLink = ({ id, truncate = false, ...props }: PartyLinkProps) => {
   }
 
   return (
-    <span>
+    <span className="whitespace-nowrap">
       {useName && <Icon size={4} name="cube" className="mr-2" />}
       <Link
         className="underline font-mono"

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

@@ -2,18 +2,18 @@ import { useMemo } from 'react';
 import { getAsset, type MarketFieldsFragment } from '@vegaprotocol/markets';
 import { t } from '@vegaprotocol/i18n';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-import { type AgGridReact } from 'ag-grid-react';
-import { type ColDef } from 'ag-grid-community';
+import type { AgGridReact } from 'ag-grid-react';
+import type { ColDef } from 'ag-grid-community';
 import { AgGrid } from '@vegaprotocol/datagrid';
-import {
-  type VegaICellRendererParams,
-  type VegaValueGetterParams,
+import type {
+  VegaICellRendererParams,
+  VegaValueGetterParams,
 } from '@vegaprotocol/datagrid';
 import { useRef, useLayoutEffect } from 'react';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
 import { MarketStateMapping } from '@vegaprotocol/types';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
-import { type RowClickedEvent } from 'ag-grid-community';
+import type { RowClickedEvent } from 'ag-grid-community';
 import { Link, useNavigate } from 'react-router-dom';
 
 type MarketsTableProps = {
@@ -29,7 +29,7 @@ export const MarketsTable = ({ data }: MarketsTableProps) => {
   const gridRef = useRef<AgGridReact>(null);
   useLayoutEffect(() => {
     const showColumnsOnDesktop = () => {
-      gridRef.current?.api.setColumnsVisible(
+      gridRef.current?.columnApi.setColumnsVisible(
         ['id', 'state', 'asset'],
         window.innerWidth > BREAKPOINT_MD
       );

apps/explorer/src/app/components/nested-data-list/nested-data-list.spec.tsx

@@ -1,5 +1,9 @@
 import { render, waitFor } from '@testing-library/react';
-import { NestedDataList, sortNestedDataByChildren } from './nested-data-list';
+import {
+  BORDER_COLOURS,
+  NestedDataList,
+  sortNestedDataByChildren,
+} from './nested-data-list';
 import userEvent from '@testing-library/user-event';
 
 const mockData = {
@@ -57,6 +61,38 @@ describe('NestedDataList', () => {
     expect(parent[0].querySelector('li')).toHaveClass('pl-4 border-l-4 pt-2');
   });
 
+  it('should repeat the border colours in the correct order', () => {
+    const colourMockData = {
+      t0: {
+        t1: {
+          t2: {
+            t3: {
+              t4: {
+                t5: {
+                  t6: {
+                    t7: {
+                      t8: {
+                        hello: 'world',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    };
+    const tree = render(<NestedDataList data={colourMockData} />);
+    const { getByTestId } = tree;
+
+    for (let i = 0; i < 8; i++) {
+      const item = getByTestId(`T${i}`);
+      const expected = BORDER_COLOURS.light[i % 5];
+      expect(item.style.borderColor.toUpperCase()).toBe(expected);
+    }
+  });
+
   it('should sort the data by values with children', () => {
     const mockData = {
       nonce: '5980890939790185837',

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

@@ -6,7 +6,6 @@ import { Time } from '../time';
 import { sideText, statusText, tifFull, tifShort } from './lib/order-labels';
 import SizeInMarket from '../size-in-market/size-in-market';
 import { TxOrderPeggedReference } from '../txs/details/order/tx-order-peg';
-import { OrderTypeMapping } from '@vegaprotocol/types';
 
 export interface DeterministicOrderDetailsProps {
   id: string;
@@ -60,7 +59,7 @@ const DeterministicOrderDetails = ({
   const o = data.orderByID;
   return (
     <div className={wrapperClasses}>
-      <div className="mb-0">
+      <div className="mb-12 lg:mb-0">
         <div className="relative block px-3 py-6 md:px-6 lg:-mr-7">
           <h2 className="text-3xl font-bold mb-4 display-5">
             <abbr title={tifFull[o.timeInForce]} className="bb-dotted mr-2">
@@ -70,7 +69,7 @@ const DeterministicOrderDetails = ({
             <span className="mx-5 text-base">@</span>
             <PriceInMarket price={o.price} marketId={o.market.id} />
           </h2>
-          <p className="text-gray-400 dark:text-gray-600">
+          <p className="text-gray-200">
             In <MarketLink id={o.market.id} /> at <Time date={o.createdAt} />.
           </p>
           {o.peggedOrder ? (
@@ -84,14 +83,15 @@ const DeterministicOrderDetails = ({
               />
             </p>
           ) : null}
+
           {o.reference ? (
             <p className="text-gray-500 mt-4">
               <span>{t('Reference')}</span>: {o.reference}
             </p>
           ) : null}
-          <div className="grid grid-cols-2 md:grid-cols-5 gap-x-6 mt-4">
-            <div className="mb-6 md:mb-0">
-              <h2 className="text-2xl font-bold text-dark mb-0 md:mb-4">
+          <div className="grid md:grid-cols-4 gap-x-6 mt-4">
+            <div className="mb-12 md:mb-0">
+              <h2 className="text-2xl font-bold text-dark mb-4">
                 {t('Status')}
               </h2>
               <h5 className="text-lg font-medium text-gray-500 mb-0 capitalize">
@@ -99,33 +99,21 @@ const DeterministicOrderDetails = ({
               </h5>
             </div>
 
-            <div className="mb-6 md:mb-0">
-              <h2 className="text-2xl font-bold text-dark mb-0 md:mb-4">
-                {t('Size')}
-              </h2>
+            <div className="mb-12 md:mb-0">
+              <h2 className="text-2xl font-bold text-dark mb-4">{t('Size')}</h2>
               <h5 className="text-lg font-medium text-gray-500 mb-0">
                 <SizeInMarket size={o.size} marketId={o.market.id} />
               </h5>
             </div>
 
-            <div className="mb-6 md:mb-0">
-              <h2 className="text-2xl font-bold text-dark mb-0 md:mb-4">
+            <div className="">
+              <h2 className="text-2xl font-bold text-dark mb-4">
                 {t('Version')}
               </h2>
               <h5 className="text-lg font-medium text-gray-500 mb-0">
                 {o.version}
               </h5>
             </div>
-            {o.type ? (
-              <div className="mb-6 md:mb-0">
-                <h2 className="text-2xl font-bold text-dark mb-0 md:mb-4">
-                  {t('Type')}
-                </h2>
-                <h5 className="text-lg font-medium text-gray-500 mb-0">
-                  {OrderTypeMapping[o.type]}
-                </h5>
-              </div>
-            ) : null}
           </div>
         </div>
       </div>

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

@@ -1,15 +1,14 @@
-import { type ProposalListFieldsFragment } from '@vegaprotocol/proposals';
+import type { ProposalListFieldsFragment } from '@vegaprotocol/proposals';
 import { VoteProgress } from '@vegaprotocol/proposals';
-import { type AgGridReact } from 'ag-grid-react';
+import type { AgGridReact } from 'ag-grid-react';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { AgGrid } from '@vegaprotocol/datagrid';
-import {
-  type VegaICellRendererParams,
-  type VegaValueFormatterParams,
+import type {
+  VegaICellRendererParams,
+  VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { type ColDef } from 'ag-grid-community';
-import type { RowClickedEvent } from 'ag-grid-community';
+import type { RowClickedEvent, ColDef } from 'ag-grid-community';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
@@ -44,11 +43,11 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
   const gridRef = useRef<AgGridReact>(null);
   useLayoutEffect(() => {
     const showColumnsOnDesktop = () => {
-      gridRef.current?.api.setColumnsVisible(
+      gridRef.current?.columnApi.setColumnsVisible(
         ['voting', 'cDate', 'eDate', 'type'],
         window.innerWidth > BREAKPOINT_MD
       );
-      gridRef.current?.api.setColumnWidth(
+      gridRef.current?.columnApi.setColumnWidth(
         'actions',
         window.innerWidth > BREAKPOINT_MD ? 221 : 80
       );
@@ -106,7 +105,7 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
               ? new BigNumber(0)
               : yesTokens.multipliedBy(100).dividedBy(totalTokensVoted);
             return (
-              <div className="flex h-full items-center justify-center pt-2 uppercase">
+              <div className="flex items-center justify-center h-full pt-2 uppercase">
                 <VoteProgress
                   threshold={requiredMajorityPercentage}
                   progress={yesPercentage}

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

@@ -1,59 +0,0 @@
-import { useState } from 'react';
-import type { BlockExplorerTransactionResult } from '../../routes/types/block-explorer-response';
-import {
-  CopyWithTooltip,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
-
-interface SignatureProps {
-  signature: BlockExplorerTransactionResult['signature'];
-}
-
-const valueClass =
-  'font-mono px-2.5 py-0.5 text-xs max-w-[200px] cursor-pointer';
-const valueClassClosed = 'text-ellipsis overflow-hidden';
-const valueClassOpen = 'break-words text-left';
-
-/**
- * Viewer component for a vega signature. Featuers copy and pasting, truncation
- *
- * @param signature
- */
-export const Signature = ({ signature }: SignatureProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  if (!signature || !signature.value || !signature.version || !signature.algo) {
-    return null;
-  }
-
-  return (
-    <div className="inline-flex border rounded signature-component relative pr-[20px]">
-      <div
-        className="bg-gray-100 px-2.5 py-0.5 text-xs text-gray-500 select-none cursor-default"
-        title={`${signature.algo}`}
-      >
-        <span>v{signature.version}</span>
-      </div>
-      <div
-        className={
-          isOpen
-            ? `${valueClass} ${valueClassOpen}`
-            : `${valueClass} ${valueClassClosed}`
-        }
-      >
-        <CopyWithTooltip text={signature.value}>
-          <span title={signature.value}>{signature.value}</span>
-        </CopyWithTooltip>
-      </div>
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="absolute top-[-3px] right-0 pr-2"
-        title={t('Show full signature')}
-      >
-        <VegaIcon name={isOpen ? VegaIconNames.EYE_OFF : VegaIconNames.EYE} />
-      </button>
-    </div>
-  );
-};

apps/explorer/src/app/components/txs/details/chain-events/index.tsx

@@ -15,7 +15,6 @@ import isUndefined from 'lodash/isUndefined';
 import type { BlockExplorerTransactionResult } from '../../../../routes/types/block-explorer-response';
 import { TxDetailsChainEventWithdrawal } from './tx-erc20-withdrawal';
 import { TxDetailsChainEventErc20AssetDelist } from './tx-erc20-asset-delist';
-import { TxDetailsContractCall } from './tx-contract-call';
 
 interface ChainEventProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -39,7 +38,7 @@ export const ChainEvent = ({ txData }: ChainEventProps) => {
     return null;
   }
 
-  const { builtin, erc20, erc20Multisig, stakingEvent, contractCall } =
+  const { builtin, erc20, erc20Multisig, stakingEvent } =
     txData.command.chainEvent;
 
   // Builtin Asset events
@@ -141,10 +140,6 @@ export const ChainEvent = ({ txData }: ChainEventProps) => {
     }
   }
 
-  if (contractCall) {
-    return <TxDetailsContractCall contractCall={contractCall} />;
-  }
-
   // If we hit this return, tx-shared-details should give a basic overview
   return null;
 };

apps/explorer/src/app/components/txs/details/chain-events/tx-contract-call.spec.tsx

@@ -1,26 +0,0 @@
-import { decodeEthCallResult } from './tx-contract-call';
-import { base64 } from 'ethers/lib/utils';
-import { defaultAbiCoder } from '@ethersproject/abi';
-import { BigNumber } from '@ethersproject/bignumber';
-
-describe('decodeEthCallResult', () => {
-  it('should decode contractData correctly (mocked)', () => {
-    const mockContractData = base64.encode(
-      defaultAbiCoder.encode(['int256'], [BigNumber.from(123)])
-    );
-    const result = decodeEthCallResult(mockContractData);
-    expect(result).toBe('123');
-  });
-
-  it('should decode contractData correctly (known data)', () => {
-    const mockContractData = 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADH8cueyY=';
-    const result = decodeEthCallResult(mockContractData);
-    expect(result).toBe('3435020581670');
-  });
-
-  it('should return "-" when an error occurs', () => {
-    const mockContractData = 'invalid_data';
-    const result = decodeEthCallResult(mockContractData);
-    expect(result).toBe('-');
-  });
-});

apps/explorer/src/app/components/txs/details/chain-events/tx-contract-call.tsx

@@ -1,88 +0,0 @@
-import { TableCell, TableRow } from '../../../table';
-import { t } from '@vegaprotocol/i18n';
-import {
-  EthExplorerLink,
-  EthExplorerLinkTypes,
-} from '../../../links/eth-explorer-link/eth-explorer-link';
-import type { components } from '../../../../../types/explorer';
-import { defaultAbiCoder, base64 } from 'ethers/lib/utils';
-import { BigNumber } from 'ethers';
-import OracleLink from '../../../links/oracle-link/oracle-link';
-import { useExplorerOracleSpecByIdQuery } from '../../../../routes/oracles/__generated__/Oracles';
-import { OracleEthSource } from '../../../../routes/oracles/components/oracle-eth-source';
-
-/**
- * Decodes the b64/ABIcoded result from an eth cal
- * @param data
- * @returns
- */
-export function decodeEthCallResult(contractData: string): string {
-  try {
-    const rawResult = defaultAbiCoder.decode(
-      ['int256'],
-      base64.decode(contractData)
-    );
-
-    // Finally, convert the resulting BigNumber in to a string
-    const res = BigNumber.from(rawResult[0]).toString();
-    return res;
-  } catch (e) {
-    return '-';
-  }
-}
-
-interface TxDetailsContractCallProps {
-  contractCall: components['schemas']['vegaEthContractCallEvent'];
-}
-
-export const TxDetailsContractCall = ({
-  contractCall,
-}: TxDetailsContractCallProps) => {
-  const { data } = useExplorerOracleSpecByIdQuery({
-    variables: {
-      id: contractCall.specId || '1',
-    },
-  });
-
-  if (!contractCall || !contractCall.result) {
-    return null;
-  }
-
-  return (
-    <>
-      {contractCall.specId && (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Oracle')}</TableCell>
-          <TableCell>
-            <OracleLink
-              id={contractCall.specId}
-              hasSeenOracleReports={true}
-              status={data?.oracleSpec?.dataSourceSpec.spec.status || '-'}
-            />
-          </TableCell>
-        </TableRow>
-      )}
-      {contractCall.blockHeight && (
-        <TableRow modifier="bordered">
-          <TableCell>{t('ETH block')}</TableCell>
-          <TableCell>
-            <EthExplorerLink
-              id={contractCall.blockHeight}
-              type={EthExplorerLinkTypes.block}
-            />
-          </TableCell>
-        </TableRow>
-      )}
-      {data?.oracleSpec?.dataSourceSpec && (
-        <OracleEthSource
-          sourceType={data.oracleSpec.dataSourceSpec.spec.data.sourceType}
-        />
-      )}
-
-      <TableRow modifier="bordered">
-        <TableCell>{t('Result')}</TableCell>
-        <TableCell>{decodeEthCallResult(contractCall.result)}</TableCell>
-      </TableRow>
-    </>
-  );
-};

apps/explorer/src/app/components/txs/details/referrals/__generated__/code-owner.ts

@@ -1,54 +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 ExplorerReferralCodeOwnerQueryVariables = Types.Exact<{
-  id: Types.Scalars['ID'];
-}>;
-
-
-export type ExplorerReferralCodeOwnerQuery = { __typename?: 'Query', referralSets: { __typename?: 'ReferralSetConnection', edges: Array<{ __typename?: 'ReferralSetEdge', node: { __typename?: 'ReferralSet', createdAt: any, updatedAt: any, referrer: string } } | null> } };
-
-
-export const ExplorerReferralCodeOwnerDocument = gql`
-    query ExplorerReferralCodeOwner($id: ID!) {
-  referralSets(id: $id) {
-    edges {
-      node {
-        createdAt
-        updatedAt
-        referrer
-      }
-    }
-  }
-}
-    `;
-
-/**
- * __useExplorerReferralCodeOwnerQuery__
- *
- * To run a query within a React component, call `useExplorerReferralCodeOwnerQuery` and pass it any options that fit your needs.
- * When your component renders, `useExplorerReferralCodeOwnerQuery` 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 } = useExplorerReferralCodeOwnerQuery({
- *   variables: {
- *      id: // value for 'id'
- *   },
- * });
- */
-export function useExplorerReferralCodeOwnerQuery(baseOptions: Apollo.QueryHookOptions<ExplorerReferralCodeOwnerQuery, ExplorerReferralCodeOwnerQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ExplorerReferralCodeOwnerQuery, ExplorerReferralCodeOwnerQueryVariables>(ExplorerReferralCodeOwnerDocument, options);
-      }
-export function useExplorerReferralCodeOwnerLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerReferralCodeOwnerQuery, ExplorerReferralCodeOwnerQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ExplorerReferralCodeOwnerQuery, ExplorerReferralCodeOwnerQueryVariables>(ExplorerReferralCodeOwnerDocument, options);
-        }
-export type ExplorerReferralCodeOwnerQueryHookResult = ReturnType<typeof useExplorerReferralCodeOwnerQuery>;
-export type ExplorerReferralCodeOwnerLazyQueryHookResult = ReturnType<typeof useExplorerReferralCodeOwnerLazyQuery>;
-export type ExplorerReferralCodeOwnerQueryResult = Apollo.QueryResult<ExplorerReferralCodeOwnerQuery, ExplorerReferralCodeOwnerQueryVariables>;

apps/explorer/src/app/components/txs/details/referrals/code-owner.graphql

@@ -1,11 +0,0 @@
-query ExplorerReferralCodeOwner($id: ID!) {
-  referralSets(id: $id) {
-    edges {
-      node {
-        createdAt
-        updatedAt
-        referrer
-      }
-    }
-  }
-}

apps/explorer/src/app/components/txs/details/referrals/referral-code-owner.test.tsx

@@ -1,95 +0,0 @@
-import { render, waitFor } from '@testing-library/react';
-import type { MockedResponse } from '@apollo/client/testing';
-import { MockedProvider } from '@apollo/client/testing';
-import { MemoryRouter } from 'react-router-dom';
-import { ReferralCodeOwner } from './referral-code-owner';
-import type { ReferralCodeOwnerProps } from './referral-code-owner';
-import { ExplorerReferralCodeOwnerDocument } from './__generated__/code-owner';
-const renderComponent = (
-  props: ReferralCodeOwnerProps,
-  mocks: MockedResponse[]
-) => {
-  return render(
-    <MockedProvider mocks={mocks}>
-      <MemoryRouter>
-        <ReferralCodeOwner {...props} />
-      </MemoryRouter>
-    </MockedProvider>
-  );
-};
-
-describe('ReferralCodeOwner', () => {
-  it('should render loading state', () => {
-    const mocks = [
-      {
-        request: {
-          query: ExplorerReferralCodeOwnerDocument,
-          variables: {
-            id: 'ABC123',
-          },
-        },
-      },
-    ];
-
-    const { getByText } = renderComponent({ code: 'ABC123' }, mocks);
-
-    expect(getByText('Loading...')).toBeInTheDocument();
-  });
-
-  it('should render error state', async () => {
-    const errorMessage = 'Error fetching referrer: ABC123';
-    const mocks = [
-      {
-        request: {
-          query: ExplorerReferralCodeOwnerDocument,
-          variables: {
-            id: 'ABC123',
-          },
-        },
-        error: new Error('nope'),
-      },
-    ];
-    const { getByText } = renderComponent({ code: 'ABC123' }, mocks);
-
-    await waitFor(() => {
-      expect(getByText(errorMessage)).toBeInTheDocument();
-    });
-  });
-
-  it('should render link to referring party', async () => {
-    const referrerId = 'DEF789';
-
-    const mocks = [
-      {
-        request: {
-          query: ExplorerReferralCodeOwnerDocument,
-          variables: {
-            id: 'ABC123',
-          },
-        },
-        result: {
-          data: {
-            referralSets: {
-              edges: [
-                {
-                  node: {
-                    __typename: 'ReferralSet',
-                    referrer: referrerId,
-                    createdAt: '123',
-                    updatedAt: '456',
-                  },
-                },
-              ],
-            },
-          },
-        },
-      },
-    ];
-
-    const { getByText } = renderComponent({ code: 'ABC123' }, mocks);
-
-    await waitFor(() => {
-      expect(getByText(referrerId)).toBeInTheDocument();
-    });
-  });
-});

apps/explorer/src/app/components/txs/details/referrals/referral-code-owner.tsx

@@ -1,26 +0,0 @@
-import { TableCell } from '../../../table';
-import { useExplorerReferralCodeOwnerQuery } from './__generated__/code-owner';
-import { PartyLink } from '../../../links';
-
-export interface ReferralCodeOwnerProps {
-  code: string;
-}
-
-/**
- * Render the owner of a referral code
- */
-export const ReferralCodeOwner = ({ code }: ReferralCodeOwnerProps) => {
-  const { data, error, loading } = useExplorerReferralCodeOwnerQuery({
-    variables: {
-      id: code,
-    },
-  });
-  const referrer = data?.referralSets.edges[0]?.node.referrer || '';
-  return (
-    <TableCell>
-      {loading && 'Loading...'}
-      {error && `Error fetching referrer: ${code}`}
-      {referrer.length > 0 && <PartyLink id={referrer} />}
-    </TableCell>
-  );
-};

apps/explorer/src/app/components/txs/details/referrals/team.test.tsx

@@ -1,93 +0,0 @@
-import { render } from '@testing-library/react';
-import { ReferralTeam } from './team';
-import type { CreateReferralSet } from './team';
-import { MockedProvider } from '@apollo/client/testing';
-
-describe('ReferralTeam', () => {
-  const team = {
-    name: 'Test Team',
-    teamUrl: 'https://example.com/team',
-    avatarUrl: 'https://example.com/avatar',
-    closed: false,
-  };
-
-  const mockTx: CreateReferralSet = {
-    team,
-  };
-
-  const mockId = '123456';
-  const mockCreator = 'JohnDoe';
-
-  it('should render the team name', () => {
-    const { getByText } = render(
-      <MockedProvider>
-        <ReferralTeam tx={mockTx} id={mockId} creator={mockCreator} />
-      </MockedProvider>
-    );
-    expect(getByText('Test Team')).toBeInTheDocument();
-  });
-
-  it('should render the team ID', () => {
-    const { getByText } = render(
-      <MockedProvider>
-        <ReferralTeam tx={mockTx} id={mockId} creator={mockCreator} />
-      </MockedProvider>
-    );
-    expect(getByText('Id')).toBeInTheDocument();
-    expect(getByText(mockId)).toBeInTheDocument();
-  });
-
-  it('should render the creator', () => {
-    const { getByText } = render(
-      <MockedProvider>
-        <ReferralTeam tx={mockTx} id={mockId} creator={mockCreator} />
-      </MockedProvider>
-    );
-    expect(getByText('Creator')).toBeInTheDocument();
-    expect(getByText(mockCreator)).toBeInTheDocument();
-  });
-
-  it('should render the team URL', () => {
-    const { getByText } = render(
-      <MockedProvider>
-        <ReferralTeam tx={mockTx} id={mockId} creator={mockCreator} />
-      </MockedProvider>
-    );
-    expect(getByText('Team URL')).toBeInTheDocument();
-    expect(getByText(team.teamUrl)).toBeInTheDocument();
-  });
-
-  it('should render the avatar URL', () => {
-    const { getByText } = render(
-      <MockedProvider>
-        <ReferralTeam tx={mockTx} id={mockId} creator={mockCreator} />
-      </MockedProvider>
-    );
-    expect(getByText('Avatar')).toBeInTheDocument();
-    expect(getByText(team.avatarUrl)).toBeInTheDocument();
-  });
-
-  it('should render the open status as a tick if closed is falsy', () => {
-    const { getByTestId } = render(
-      <MockedProvider>
-        <ReferralTeam tx={mockTx} id={mockId} creator={mockCreator} />
-      </MockedProvider>
-    );
-    expect(getByTestId('open-yes')).toBeInTheDocument();
-  });
-
-  it('should render the open status as a cross if it is truthy', () => {
-    const m = {
-      team: {
-        closed: true,
-      },
-    };
-
-    const { getByTestId } = render(
-      <MockedProvider>
-        <ReferralTeam tx={m} id={mockId} creator={mockCreator} />
-      </MockedProvider>
-    );
-    expect(getByTestId('open-no')).toBeInTheDocument();
-  });
-});

apps/explorer/src/app/components/txs/details/referrals/team.tsx

@@ -1,73 +0,0 @@
-import {
-  VegaIcon,
-  Icon,
-  KeyValueTable,
-  KeyValueTableRow,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
-import type { components } from '../../../../../types/explorer';
-import Hash from '../../../links/hash';
-import { t } from 'i18next';
-import { PartyLink } from '../../../links';
-
-export type CreateReferralSet = components['schemas']['v1CreateReferralSet'];
-export type ReferralTeam = CreateReferralSet['team'];
-
-export interface ReferralTeamProps {
-  tx: CreateReferralSet;
-  id: string;
-  creator: string;
-}
-
-/**
- * Renders the details for a team in a CreateReferralSet or UpdateReferralSet transaction.
- *
- * Intentionally does not render the avatar image or link to the team url.
- */
-export const ReferralTeam = ({ tx, id, creator }: ReferralTeamProps) => {
-  if (!tx.team) {
-    return null;
-  }
-
-  return (
-    <section>
-      <div className="inline-block mr-2 leading-none">
-        <VegaIcon name={VegaIconNames.TEAM} />
-      </div>
-      {tx.team.name && (
-        <h3 className="inline-block leading-loose">{tx.team.name}</h3>
-      )}
-
-      <div className="min-w-fit max-w-2xl block">
-        <KeyValueTable>
-          <KeyValueTableRow>
-            {t('Id')}
-            <Hash text={id} truncate={false} />
-          </KeyValueTableRow>
-          <KeyValueTableRow>
-            {t('Creator')}
-            <PartyLink id={creator} truncate={false} />
-          </KeyValueTableRow>
-          {tx.team.teamUrl && (
-            <KeyValueTableRow>
-              {t('Team URL')}
-              <Hash text={tx.team.teamUrl} truncate={false} />
-            </KeyValueTableRow>
-          )}
-          {tx.team.avatarUrl && (
-            <KeyValueTableRow>
-              {t('Avatar')}
-              <Hash text={tx.team.avatarUrl} truncate={false} />
-            </KeyValueTableRow>
-          )}
-          <KeyValueTableRow>
-            {t('Open')}
-            <span data-testid={!tx.team.closed ? 'open-yes' : 'open-no'}>
-              {!tx.team.closed ? <Icon name="tick" /> : <Icon name="cross" />}
-            </span>
-          </KeyValueTableRow>
-        </KeyValueTable>
-      </div>
-    </section>
-  );
-};

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

@@ -9,7 +9,6 @@ import { Time } from '../../../time';
 import { ChainResponseCode } from '../chain-response-code/chain-reponse.code';
 import { TxDataView } from '../../tx-data-view';
 import Hash from '../../../links/hash';
-import { Signature } from '../../../signature/signature';
 
 interface TxDetailsSharedProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -27,8 +26,7 @@ export const sharedHeaderProps = {
   className: 'align-top',
 };
 
-// The incoming type field is usually the right thing to show. Exceptions are listed here
-const LabelOverrides: Record<BlockExplorerTransactionResult['type'], string> = {
+const Labels: Record<BlockExplorerTransactionResult['type'], string> = {
   'Stop Orders Submission': 'Stop Order',
   'Stop Orders Cancellation': 'Cancel Stop Order',
 };
@@ -51,7 +49,7 @@ export const TxDetailsShared = ({
   const time: string = blockData?.result.block.header.time || '';
   const height: string = blockData?.result.block.header.height || txData.block;
 
-  const type = LabelOverrides[txData.type] || txData.type;
+  const type = Labels[txData.type] || txData.type;
 
   return (
     <>
@@ -77,12 +75,6 @@ export const TxDetailsShared = ({
           <BlockLink height={height} />
         </TableCell>
       </TableRow>
-      <TableRow modifier="bordered">
-        <TableCell {...sharedHeaderProps}>{t('Signature')}</TableCell>
-        <TableCell>
-          <Signature signature={txData.signature} />
-        </TableCell>
-      </TableRow>
       <TableRow modifier="bordered">
         <TableCell {...sharedHeaderProps}>{t('Time')}</TableCell>
         <TableCell>

apps/explorer/src/app/components/txs/details/tx-apply-referral-code.tsx

@@ -1,47 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
-import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
-import { TxDetailsShared } from './shared/tx-details-shared';
-import { TableCell, TableRow, TableWithTbody } from '../../table';
-import { ReferralCodeOwner } from './referrals/referral-code-owner';
-
-interface TxDetailsApplyReferralCodeProps {
-  txData: BlockExplorerTransactionResult | undefined;
-  pubKey: string | undefined;
-  blockData: TendermintBlocksResponse | undefined;
-}
-
-/**
- * The signature can be turned in to an id with txSignatureToDeterministicId but
- */
-export const TxDetailsApplyReferralCode = ({
-  txData,
-  pubKey,
-  blockData,
-}: TxDetailsApplyReferralCodeProps) => {
-  if (!txData || !txData.command.applyReferralCode || !txData.signature) {
-    return <>{t('Awaiting Block Explorer transaction details')}</>;
-  }
-
-  const referralCode = txData.command.applyReferralCode.id;
-
-  return (
-    <div>
-      <TableWithTbody className="mb-8" allowWrap={true}>
-        <TxDetailsShared
-          txData={txData}
-          pubKey={pubKey}
-          blockData={blockData}
-        />
-        <TableRow modifier="bordered">
-          <TableCell>{t('Applied Code')}</TableCell>
-          <TableCell>{referralCode}</TableCell>
-        </TableRow>
-        <TableRow modifier="bordered">
-          <TableCell>{t('Referrer')}</TableCell>
-          <ReferralCodeOwner code={referralCode} />
-        </TableRow>
-      </TableWithTbody>
-    </div>
-  );
-};

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

@@ -1,11 +1,51 @@
 import { t } from '@vegaprotocol/i18n';
 import { TxDetailsShared } from './shared/tx-details-shared';
 import { TableWithTbody } from '../../table';
+import { defaultAbiCoder, base64 } from 'ethers/lib/utils';
 import { ChainEvent } from './chain-events';
+import { BigNumber } from 'ethers';
 
+import type { AbiType } from '../../../lib/encoders/abis/abi-types';
 import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
 import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
 
+interface AbiOutput {
+  type: AbiType;
+  internalType: AbiType;
+  name: string;
+}
+
+/**
+ * Decodes the b64/ABIcoded result from an eth cal
+ * @param data
+ * @returns
+ */
+export function decodeEthCallResult(
+  data: BlockExplorerTransactionResult
+): string {
+  const ethResult = data.command.chainEvent?.contractCall.result;
+
+  try {
+    // Decode the result string: base64 => uint8array
+    const data = base64.decode(ethResult);
+
+    // Parse the escaped ABI in to an object
+    const abi = JSON.parse(
+      '[{"inputs":[],"name":"latestAnswer","outputs":[{"internalType":"int256","name":"","type":"int256"}],"stateMutability":"view","type":"function"}]'
+    );
+    // Pull the expected types out of the Oracles ABI
+    const types: AbiType[] = abi[0].outputs.map((o: AbiOutput) => o.type);
+
+    const rawResult = defaultAbiCoder.decode(types, data);
+
+    // Finally, convert the resulting BigNumber in to a string
+    const res = BigNumber.from(rawResult[0]).toString();
+    return res;
+  } catch (e) {
+    return '-';
+  }
+}
+
 interface TxDetailsChainEventProps {
   txData: BlockExplorerTransactionResult | undefined;
   pubKey: string | undefined;

apps/explorer/src/app/components/txs/details/tx-create-referral-set.tsx

@@ -1,52 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
-import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
-import { TxDetailsShared } from './shared/tx-details-shared';
-import { TableCell, TableRow, TableWithTbody } from '../../table';
-import { txSignatureToDeterministicId } from '../lib/deterministic-ids';
-import { ReferralTeam } from './referrals/team';
-
-interface TxDetailsCreateReferralProps {
-  txData: BlockExplorerTransactionResult | undefined;
-  pubKey: string | undefined;
-  blockData: TendermintBlocksResponse | undefined;
-}
-
-/**
- * The signature can be turned in to an id with txSignatureToDeterministicId but
- */
-export const TxDetailsCreateReferralSet = ({
-  txData,
-  pubKey,
-  blockData,
-}: TxDetailsCreateReferralProps) => {
-  if (!txData || !txData.command.createReferralSet || !txData.signature) {
-    return <>{t('Awaiting Block Explorer transaction details')}</>;
-  }
-
-  const id = txSignatureToDeterministicId(txData.signature.value);
-
-  const isTeam = txData.command.createReferralSet.isTeam || false;
-
-  return (
-    <div>
-      <TableWithTbody className="mb-8" allowWrap={true}>
-        <TxDetailsShared
-          txData={txData}
-          pubKey={pubKey}
-          blockData={blockData}
-        />
-        <TableRow modifier="bordered">
-          <TableCell>{isTeam ? t('Team ID') : t('Referral code')}</TableCell>
-          <TableCell>{id}</TableCell>
-        </TableRow>
-      </TableWithTbody>
-
-      <ReferralTeam
-        tx={txData.command.createReferralSet}
-        id={id}
-        creator={txData.submitter}
-      />
-    </div>
-  );
-};

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

@@ -3,8 +3,8 @@ import { DATA_SOURCES } from '../../../config';
 import { t } from '@vegaprotocol/i18n';
 import { useFetch } from '@vegaprotocol/react-helpers';
 import { TxDetailsOrder } from './tx-order';
-import { type BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
-import { type TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
 import { TxDetailsHeartbeat } from './tx-hearbeat';
 import { TxDetailsGeneric } from './tx-generic';
 import { TxDetailsBatch } from './tx-batch';
@@ -28,10 +28,6 @@ import { TxProposal } from './tx-proposal';
 import { TxDetailsTransfer } from './tx-transfer';
 import { TxDetailsStopOrderSubmission } from './tx-stop-order-submission';
 import { TxDetailsLiquiditySubmission } from './tx-liquidity-submission';
-import { TxDetailsCreateReferralSet } from './tx-create-referral-set';
-import { TxDetailsApplyReferralCode } from './tx-apply-referral-code';
-import { TxDetailsUpdateReferralSet } from './tx-update-referral-set';
-import { TxDetailsJoinTeam } from './tx-join-team';
 
 interface TxDetailsWrapperProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -125,14 +121,6 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
       return TxDetailsStopOrderSubmission;
     case 'Transfer Funds':
       return TxDetailsTransfer;
-    case 'Create Referral Set':
-      return TxDetailsCreateReferralSet;
-    case 'Update Referral Set':
-      return TxDetailsUpdateReferralSet;
-    case 'Apply Referral Code':
-      return TxDetailsApplyReferralCode;
-    case 'Join Team':
-      return TxDetailsJoinTeam;
     default:
       return TxDetailsGeneric;
   }

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

@@ -1,47 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
-import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
-import { TxDetailsShared } from './shared/tx-details-shared';
-import { TableCell, TableRow, TableWithTbody } from '../../table';
-import { ReferralCodeOwner } from './referrals/referral-code-owner';
-
-interface TxDetailsJoinTeamProps {
-  txData: BlockExplorerTransactionResult | undefined;
-  pubKey: string | undefined;
-  blockData: TendermintBlocksResponse | undefined;
-}
-
-/**
- * The signature can be turned in to an id with txSignatureToDeterministicId but
- */
-export const TxDetailsJoinTeam = ({
-  txData,
-  pubKey,
-  blockData,
-}: TxDetailsJoinTeamProps) => {
-  if (!txData || !txData.command.joinTeam || !txData.signature) {
-    return <>{t('Awaiting Block Explorer transaction details')}</>;
-  }
-
-  const team = txData.command.joinTeam.id;
-
-  return (
-    <div>
-      <TableWithTbody className="mb-8" allowWrap={true}>
-        <TxDetailsShared
-          txData={txData}
-          pubKey={pubKey}
-          blockData={blockData}
-        />
-        <TableRow modifier="bordered">
-          <TableCell>{t('Team')}</TableCell>
-          <TableCell>{team}</TableCell>
-        </TableRow>
-        <TableRow modifier="bordered">
-          <TableCell>{t('Referrer')}</TableCell>
-          <ReferralCodeOwner code={team} />
-        </TableRow>
-      </TableWithTbody>
-    </div>
-  );
-};

apps/explorer/src/app/components/txs/details/tx-update-referral-set.tsx

@@ -1,54 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
-import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
-import { TxDetailsShared } from './shared/tx-details-shared';
-import { TableCell, TableRow, TableWithTbody } from '../../table';
-import { txSignatureToDeterministicId } from '../lib/deterministic-ids';
-import { ReferralTeam } from './referrals/team';
-
-interface TxDetailsUpdateReferralProps {
-  txData: BlockExplorerTransactionResult | undefined;
-  pubKey: string | undefined;
-  blockData: TendermintBlocksResponse | undefined;
-}
-
-/**
- * A copy of create referral set, effectively.
- * Updating a referral set without a team doesn't make sense,
- * but is valid, so this component ignores sense.
- */
-export const TxDetailsUpdateReferralSet = ({
-  txData,
-  pubKey,
-  blockData,
-}: TxDetailsUpdateReferralProps) => {
-  if (!txData || !txData.command.updateReferralSet || !txData.signature) {
-    return <>{t('Awaiting Block Explorer transaction details')}</>;
-  }
-
-  const id = txSignatureToDeterministicId(txData.signature.value);
-
-  const isTeam = txData.command.updateReferralSet.isTeam || false;
-
-  return (
-    <div>
-      <TableWithTbody className="mb-8" allowWrap={true}>
-        <TxDetailsShared
-          txData={txData}
-          pubKey={pubKey}
-          blockData={blockData}
-        />
-        <TableRow modifier="bordered">
-          <TableCell>{isTeam ? t('Team ID') : t('Referral code')}</TableCell>
-          <TableCell>{id}</TableCell>
-        </TableRow>
-      </TableWithTbody>
-
-      <ReferralTeam
-        tx={txData.command.updateReferralSet}
-        id={id}
-        creator={txData.submitter}
-      />
-    </div>
-  );
-};

apps/explorer/src/app/components/txs/tx-filter.tsx

@@ -28,7 +28,6 @@ export type FilterOption =
   | 'Delegate'
   | 'Ethereum Key Rotate Submission'
   | 'Issue Signatures'
-  | 'Join Team'
   | 'Key Rotate Submission'
   | 'Liquidity Provision Order'
   | 'Node Signature'
@@ -48,46 +47,45 @@ export type FilterOption =
   | 'Vote on Proposal'
   | 'Withdraw';
 
-export const filterOptions: Record<string, FilterOption[]> = {
-  'Market Instructions': [
-    'Amend LiquidityProvision Order',
-    'Amend Order',
-    'Batch Market Instructions',
-    'Cancel LiquidityProvision Order',
-    'Cancel Order',
-    'Liquidity Provision Order',
-    'Stop Orders Submission',
-    'Stop Orders Cancellation',
-    'Submit Order',
-  ],
-  'Transfers and Withdrawals': [
-    'Transfer Funds',
-    'Cancel Transfer Funds',
-    'Withdraw',
-  ],
-  Governance: ['Delegate', 'Undelegate', 'Vote on Proposal', 'Proposal'],
-  Referrals: [
-    'Apply Referral Code',
-    'Create Referral Set',
-    'Join Team',
-    'Update Referral Set',
-  ],
-  'External Data': ['Chain Event', 'Submit Oracle Data'],
-  Validators: [
-    'Ethereum Key Rotate Submission',
-    'Issue Signatures',
-    'Key Rotate Submission',
-    'Node Signature',
-    'Node Vote',
-    'Protocol Upgrade',
-    'Register new Node',
-    'State Variable Proposal',
-    'Validator Heartbeat',
-  ],
-};
+// Alphabetised list of transaction types to appear at the top level
+export const PrimaryFilterOptions: FilterOption[] = [
+  'Amend LiquidityProvision Order',
+  'Amend Order',
+  'Batch Market Instructions',
+  'Cancel LiquidityProvision Order',
+  'Cancel Order',
+  'Cancel Transfer Funds',
+  'Delegate',
+  'Liquidity Provision Order',
+  'Proposal',
+  'Stop Orders Submission',
+  'Stop Orders Cancellation',
+  'Submit Oracle Data',
+  'Submit Order',
+  'Transfer Funds',
+  'Undelegate',
+  'Vote on Proposal',
+  'Withdraw',
+];
 
-export const AllFilterOptions: FilterOption[] =
-  Object.values(filterOptions).flat();
+// Alphabetised list of transaction types to nest under a 'More...' submenu
+export const SecondaryFilterOptions: FilterOption[] = [
+  'Chain Event',
+  'Ethereum Key Rotate Submission',
+  'Issue Signatures',
+  'Key Rotate Submission',
+  'Node Signature',
+  'Node Vote',
+  'Protocol Upgrade',
+  'Register new Node',
+  'State Variable Proposal',
+  'Validator Heartbeat',
+];
+
+export const AllFilterOptions: FilterOption[] = [
+  ...PrimaryFilterOptions,
+  ...SecondaryFilterOptions,
+];
 
 export interface TxFilterProps {
   filters: Set<FilterOption>;
@@ -124,33 +122,46 @@ export const TxsFilter = ({ filters, setFilters }: TxFilterProps) => {
             <DropdownMenuSeparator />
           </>
         )}
-
-        {Object.entries(filterOptions).map(([key, value]) => (
-          <DropdownMenuSub key={key}>
-            <DropdownMenuSubTrigger>
-              {t(key)}
-              <Icon name="chevron-right" />
-            </DropdownMenuSubTrigger>
-            <DropdownMenuSubContent>
-              {value.map((f) => (
-                <DropdownMenuCheckboxItem
-                  key={f}
-                  checked={filters.has(f)}
-                  onCheckedChange={(checked) => {
-                    // NOTE: These act like radio buttons until the API supports multiple filters
-                    setFilters(new Set([f]));
-                  }}
-                  id={`radio-${f}`}
-                >
-                  {f}
-                  <DropdownMenuItemIndicator>
-                    <Icon name="tick-circle" className="inline" />
-                  </DropdownMenuItemIndicator>
-                </DropdownMenuCheckboxItem>
-              ))}
-            </DropdownMenuSubContent>
-          </DropdownMenuSub>
+        {PrimaryFilterOptions.map((f) => (
+          <DropdownMenuCheckboxItem
+            key={f}
+            checked={filters.has(f)}
+            onCheckedChange={() => {
+              // NOTE: These act like radio buttons until the API supports multiple filters
+              setFilters(new Set([f]));
+            }}
+            id={`radio-${f}`}
+          >
+            {f}
+            <DropdownMenuItemIndicator>
+              <Icon name="tick-circle" />
+            </DropdownMenuItemIndicator>
+          </DropdownMenuCheckboxItem>
         ))}
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            {t('More Types')}
+            <Icon name="chevron-right" />
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            {SecondaryFilterOptions.map((f) => (
+              <DropdownMenuCheckboxItem
+                key={f}
+                checked={filters.has(f)}
+                onCheckedChange={(checked) => {
+                  // NOTE: These act like radio buttons until the API supports multiple filters
+                  setFilters(new Set([f]));
+                }}
+                id={`radio-${f}`}
+              >
+                {f}
+                <DropdownMenuItemIndicator>
+                  <Icon name="tick-circle" className="inline" />
+                </DropdownMenuItemIndicator>
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
       </DropdownMenuContent>
     </DropdownMenu>
   );

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

@@ -48,8 +48,6 @@ const displayString: StringMap = {
   StopOrdersSubmission: 'Stop',
   StopOrdersCancellation: 'Cancel stop',
   'Stop Orders Cancellation': 'Cancel stop',
-  'Apply Referral Code': 'Referral',
-  'Create Referral Set': 'Create referral',
 };
 
 export function getLabelForStopOrderType(
@@ -82,12 +80,6 @@ export function getLabelForOrderType(
     if (command.orderSubmission.icebergOpts) {
       return 'Iceberg';
     }
-    if (command.orderSubmission.type === 'TYPE_MARKET') {
-      return 'Market order';
-    }
-    if (command.orderSubmission.type === 'TYPE_LIMIT') {
-      return 'Limit order';
-    }
   }
   return 'Order';
 }

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

@@ -98,8 +98,6 @@ describe('TxDetailsTransfer', () => {
       },
     },
     signature: {
-      version: '1',
-      algo: 'vega/ed25519',
       value:
         '610c2e196a7d4fed4413b9e82af267b1ff3e30e943df3a3d28096fd60604d430d752fbaf6dd4f84d496be78885bb6118f40560bff7832c06bd7a3d67b718b700',
     },

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

@@ -20,8 +20,6 @@ const generateTxs = (number: number): BlockExplorerTransactionResult[] => {
       '4b782482f587d291e8614219eb9a5ee9280fa2c58982dee71d976782a9be1964',
     type: 'Submit Order',
     signature: {
-      version: '1',
-      algo: 'vega/ed25519',
       value: '123',
     },
     code: 0,

apps/explorer/src/app/components/txs/txs-per-block.tsx

@@ -1,7 +1,7 @@
 import { Table, TableRow } from '../table';
 import { t } from '@vegaprotocol/i18n';
 import { useFetch } from '@vegaprotocol/react-helpers';
-import { type BlockExplorerTransactions } from '../../routes/types/block-explorer-response';
+import type { BlockExplorerTransactions } from '../../routes/types/block-explorer-response';
 import { getTxsDataUrl } from '../../hooks/get-txs-data-url';
 import { AsyncRenderer, Loader } from '@vegaprotocol/ui-toolkit';
 import EmptyList from '../empty-list/empty-list';
@@ -22,7 +22,7 @@ export const TxsPerBlock = ({ blockHeight, txCount }: TxsPerBlockProps) => {
   return (
     <AsyncRenderer data={data} error={error} loading={!!loading}>
       {data && data.transactions.length > 0 ? (
-        <div className="mb-28 overflow-x-auto whitespace-nowrap">
+        <div className="overflow-x-auto whitespace-nowrap mb-28">
           <Table>
             <thead>
               <TableRow modifier="bordered" className="font-mono">

apps/explorer/src/app/hooks/use-txs-data.ts

@@ -1,14 +1,14 @@
 import { useSearchParams } from 'react-router-dom';
-import { type URLSearchParamsInit } from 'react-router-dom';
+import type { URLSearchParamsInit } from 'react-router-dom';
 import { useCallback } from 'react';
 import { useFetch } from '@vegaprotocol/react-helpers';
-import {
-  type BlockExplorerTransactionResult,
-  type BlockExplorerTransactions,
+import type {
+  BlockExplorerTransactionResult,
+  BlockExplorerTransactions,
 } from '../routes/types/block-explorer-response';
 import isNumber from 'lodash/isNumber';
 import { AllFilterOptions } from '../components/txs/tx-filter';
-import { type FilterOption } from '../components/txs/tx-filter';
+import type { FilterOption } from '../components/txs/tx-filter';
 import { BE_TXS_PER_REQUEST, getTxsDataUrl } from './get-txs-data-url';
 
 export function getTypeFilters(filters?: Set<FilterOption>) {

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

@@ -9,13 +9,11 @@ import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
 import { useState } from 'react';
 import { PageTitle } from '../../components/page-helpers/page-title';
 
-type Params = { assetId: string };
-
 export const AssetPage = () => {
   useDocumentTitle(['Assets']);
   useScrollToLocation();
 
-  const { assetId } = useParams<Params>();
+  const { assetId } = useParams<{ assetId: string }>();
   const { data, loading, error } = useAssetDataProvider(assetId || '');
 
   const title = data ? data.name : error ? t('Asset not found') : '';
@@ -43,7 +41,7 @@ export const AssetPage = () => {
           loading={loading}
           error={error}
         >
-          <div className="relative h-full">
+          <div className="h-full relative">
             <AssetDetailsTable asset={data as AssetFieldsFragment} />
           </div>
         </AsyncRenderer>

apps/explorer/src/app/routes/blocks/home/index.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useState } from 'react';
 import { DATA_SOURCES } from '../../../config';
-import {
-  type BlockMeta,
-  type TendermintBlockchainResponse,
+import type {
+  BlockMeta,
+  TendermintBlockchainResponse,
 } from '../tendermint-blockchain-response';
 import { RouteTitle } from '../../../components/route-title';
 import { BlocksRefetch } from '../../../components/blocks';

apps/explorer/src/app/routes/blocks/id/block.tsx

@@ -17,10 +17,8 @@ import { NodeLink } from '../../../components/links';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
 import EmptyList from '../../../components/empty-list/empty-list';
 
-type Params = { block: string };
-
 const Block = () => {
-  const { block } = useParams<Params>();
+  const { block } = useParams<{ block: string }>();
   useDocumentTitle(['Blocks', `Block #${block}`]);
   const {
     state: { data: blockData, loading, error },
@@ -31,7 +29,7 @@ const Block = () => {
       <RouteTitle data-testid="block-header">{t(`BLOCK ${block}`)}</RouteTitle>
       <AsyncRenderer data={blockData} error={error} loading={!!loading}>
         <>
-          <div className="mb-8 grid grid-cols-2 gap-2">
+          <div className="grid grid-cols-2 gap-2 mb-8">
             <Link
               data-testid="previous-block"
               to={`/${Routes.BLOCKS}/${Number(block) - 1}`}
@@ -54,7 +52,7 @@ const Block = () => {
               </Button>
             </Link>
           </div>
-          {blockData && 'result' in blockData && (
+          {blockData && (
             <>
               <TableWithTbody className="mb-8">
                 <TableRow modifier="bordered">

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

@@ -3,7 +3,7 @@ import { useFetch } from '@vegaprotocol/react-helpers';
 import { RouteTitle } from '../../components/route-title';
 import { AsyncRenderer, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import { DATA_SOURCES } from '../../config';
-import { type TendermintGenesisResponse } from './tendermint-genesis-response';
+import type { TendermintGenesisResponse } from './tendermint-genesis-response';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 
 const Genesis = () => {

apps/explorer/src/app/routes/layout.tsx

@@ -73,7 +73,7 @@ export const Layout = () => {
           <ProtocolUpgradeInProgressNotification />
         </div>
         <div className={fixedWidthClasses}>
-          <main className="md:p-4">
+          <main className="p-4">
             {!isHome && <BreadcrumbsContainer className="mb-4" />}
             <Outlet />
           </main>

apps/explorer/src/app/routes/markets/market-page.tsx

@@ -11,12 +11,10 @@ import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
 import { marketInfoWithDataProvider } from '@vegaprotocol/markets';
 import { PageTitle } from '../../components/page-helpers/page-title';
 
-type Params = { marketId: string };
-
 export const MarketPage = () => {
   useScrollToLocation();
 
-  const { marketId } = useParams<Params>();
+  const { marketId } = useParams<{ marketId: string }>();
 
   const { data, loading, error } = useDataProvider({
     dataProvider: marketInfoWithDataProvider,

apps/explorer/src/app/routes/oracles/components/oracle-markets.tsx

@@ -1,10 +1,8 @@
 import { getNodes } from '@vegaprotocol/utils';
 import { MarketLink } from '../../../components/links';
 import { TableRow, TableCell, TableHeader } from '../../../components/table';
-import {
-  useExplorerOracleFormMarketsQuery,
-  type ExplorerOracleForMarketsMarketFragment,
-} from '../__generated__/OraclesForMarkets';
+import type { ExplorerOracleForMarketsMarketFragment } from '../__generated__/OraclesForMarkets';
+import { useExplorerOracleFormMarketsQuery } from '../__generated__/OraclesForMarkets';
 
 interface OracleMarketsProps {
   id: string;

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

@@ -9,10 +9,8 @@ import { AsyncRenderer, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
 import filter from 'recursive-key-filter';
 import { TruncateInline } from '../../../components/truncate/truncate';
 
-type Params = { id: string };
-
 export const Oracle = () => {
-  const { id } = useParams<Params>();
+  const { id } = useParams<{ id: string }>();
 
   useDocumentTitle(['Oracle', `Oracle #${truncateByChars(id || '1', 5, 5)}`]);
 

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

@@ -6,10 +6,8 @@ import { useDocumentTitle } from '../../../../hooks/use-document-title';
 
 import { PartyAccounts } from '../components/party-accounts';
 
-type Params = { party: string };
-
 const PartyAccountsByAsset = () => {
-  const { party } = useParams<Params>();
+  const { party } = useParams<{ party: string }>();
 
   useDocumentTitle(['Public keys', party || '-']);
   const partyId = toNonHex(party ? party : '');

apps/explorer/src/app/routes/parties/id/components/party-accounts.tsx

@@ -1,7 +1,6 @@
-import { useExplorerPartyAssetsQuery } from '../__generated__/Party-assets';
-import { AssetLink, MarketLink } from '../../../../components/links';
-import AssetBalance from '../../../../components/asset-balance/asset-balance';
-import { AccountTypeMapping } from '@vegaprotocol/types';
+import { AccountManager } from '@vegaprotocol/accounts';
+import { useCallback } from 'react';
+import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 
 interface PartyAccountsProps {
   partyId: string;
@@ -13,71 +12,21 @@ interface PartyAccountsProps {
  * appearing first and... tbd
  */
 export const PartyAccounts = ({ partyId }: PartyAccountsProps) => {
-  const { data } = useExplorerPartyAssetsQuery({
-    variables: { partyId },
-  });
-
-  const party = data?.partiesConnection?.edges[0]?.node;
-  const accounts =
-    party?.accountsConnection?.edges?.filter((edge) => edge?.node) || [];
+  const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
+  const onClickAsset = useCallback(
+    (assetId?: string) => {
+      assetId && openAssetDetailsDialog(assetId);
+    },
+    [openAssetDetailsDialog]
+  );
 
   return (
     <div className="block min-h-44 h-60 4 w-full border-red-800 relative">
-      <table>
-        <thead>
-          <tr>
-            <th className="text-right px-4">Balance</th>
-            <th className="text-left px-4">Type</th>
-            <th className="text-left px-4">Market</th>
-            <th className="text-left px-4">Asset</th>
-          </tr>
-        </thead>
-        <tbody>
-          {accounts
-            .sort((a, b) => {
-              // Sort by asset id, then market id, with general accounts first
-              if (!a) {
-                return 1;
-              }
-              if (!b) {
-                return -1;
-              }
-              if (a.node.asset.id !== b.node.asset.id) {
-                return a.node.asset.id.localeCompare(b.node.asset.id);
-              }
-              if (a.node.type === 'ACCOUNT_TYPE_GENERAL') return -1;
-              if (b.node.type === 'ACCOUNT_TYPE_GENERAL') return 1;
-              if (a.node.market && b.node.market) {
-                return a.node.market.id.localeCompare(b.node.market.id);
-              } else {
-                return a.node.type.localeCompare(b.node.type);
-              }
-            })
-            .map((e) => {
-              if (!e) return null;
-              const { type, asset, balance, market } = e.node;
-
-              return (
-                <tr className="border-t border-neutral-300 dark:border-neutral-600">
-                  <td className="px-4 text-right">
-                    <AssetBalance
-                      assetId={asset.id}
-                      price={balance}
-                      showAssetSymbol={true}
-                    />
-                  </td>
-                  <td className="px-4">{AccountTypeMapping[type]}</td>
-                  <td className="px-4">
-                    {market?.id ? <MarketLink id={market.id} /> : '-'}
-                  </td>
-                  <td className="px-4">
-                    <AssetLink assetId={asset.id} />
-                  </td>
-                </tr>
-              );
-            })}
-        </tbody>
-      </table>
+      <AccountManager
+        partyId={partyId}
+        onClickAsset={onClickAsset}
+        isReadOnly={true}
+      />
     </div>
   );
 };

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

@@ -19,13 +19,11 @@ import type { FilterOption } from '../../../components/txs/tx-filter';
 import { AllFilterOptions, TxsFilter } from '../../../components/txs/tx-filter';
 import { useSearchParams } from 'react-router-dom';
 
-type Params = { party: string };
-
 const Party = () => {
   const [params] = useSearchParams();
 
   const [filters, setFilters] = useState(new Set(AllFilterOptions));
-  const { party } = useParams<Params>();
+  const { party } = useParams<{ party: string }>();
 
   useDocumentTitle(['Public keys', party || '-']);
   const navigate = useNavigate();
@@ -62,7 +60,7 @@ const Party = () => {
 
   if (!isValidPartyId(partyId)) {
     return (
-      <div className="mx-auto max-w-sm">
+      <div className="max-w-sm mx-auto">
         <Notification
           message={t('Invalid party ID')}
           intent={Intent.Danger}
@@ -86,7 +84,7 @@ const Party = () => {
         truncateEnd={visibleChars}
       />
 
-      <div className="grid w-full grid-flow-row grid-cols-1 md:grid-flow-col md:grid-cols-2 md:space-x-4">
+      <div className="grid md:grid-flow-col grid-flow-row md:space-x-4 grid-cols-1 md:grid-cols-2 w-full">
         <PartyBlockAccounts
           accountError={AccountError}
           accountLoading={AccountLoading}

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

@@ -18,6 +18,7 @@ import { t } from '@vegaprotocol/i18n';
 import { Routes } from './route-names';
 import { NetworkParameters } from './network-parameters';
 import type { Params, RouteObject } from 'react-router-dom';
+import { createBrowserRouter } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 import { MarketPage, MarketsPage } from './markets';
 import type { ReactNode } from 'react';
@@ -28,7 +29,7 @@ import { truncateMiddle } from '@vegaprotocol/ui-toolkit';
 import { remove0x } from '@vegaprotocol/utils';
 import { PartyAccountsByAsset } from './parties/id/accounts';
 import { Disclaimer } from './pages/disclaimer';
-import { useFeatureFlags } from '@vegaprotocol/environment';
+import { FLAGS } from '@vegaprotocol/environment';
 import RestrictedPage from './restricted';
 
 export type Navigable = {
@@ -59,315 +60,311 @@ type Route = RouteItem & {
   children?: RouteItem[];
 };
 
-export const useRouterConfig = () => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
-
-  const partiesRoutes: Route[] = featureFlags.EXPLORER_PARTIES
-    ? [
-        {
-          path: Routes.PARTIES,
-          element: <Party />,
-          handle: {
-            name: t('Parties'),
-            text: t('Parties'),
-            breadcrumb: () => <Link to={Routes.PARTIES}>{t('Parties')}</Link>,
+const partiesRoutes: Route[] = FLAGS.EXPLORER_PARTIES
+  ? [
+      {
+        path: Routes.PARTIES,
+        element: <Party />,
+        handle: {
+          name: t('Parties'),
+          text: t('Parties'),
+          breadcrumb: () => <Link to={Routes.PARTIES}>{t('Parties')}</Link>,
+        },
+        children: [
+          {
+            index: true,
+            element: <Parties />,
           },
-          children: [
-            {
-              index: true,
-              element: <Parties />,
-            },
-            {
-              path: ':party',
-              element: <Party />,
+          {
+            path: ':party',
+            element: <Party />,
 
-              children: [
-                {
-                  index: true,
-                  element: <PartySingle />,
-                  handle: {
-                    breadcrumb: (params: Params<string>) => (
-                      <Link to={linkTo(Routes.PARTIES, params.party)}>
-                        {truncateMiddle(params.party as string)}
-                      </Link>
-                    ),
-                  },
+            children: [
+              {
+                index: true,
+                element: <PartySingle />,
+                handle: {
+                  breadcrumb: (params: Params<string>) => (
+                    <Link to={linkTo(Routes.PARTIES, params.party)}>
+                      {truncateMiddle(params.party as string)}
+                    </Link>
+                  ),
                 },
-                {
-                  path: 'assets',
-                  element: <Party />,
-                  handle: {
-                    breadcrumb: (params: Params<string>) => (
-                      <Link to={linkTo(Routes.PARTIES, params.party)}>
-                        {truncateMiddle(params.party as string)}
-                      </Link>
-                    ),
-                  },
-                  children: [
-                    {
-                      index: true,
-                      element: <PartyAccountsByAsset />,
-                      handle: {
-                        breadcrumb: () => {
-                          return t('Assets');
-                        },
+              },
+              {
+                path: 'assets',
+                element: <Party />,
+                handle: {
+                  breadcrumb: (params: Params<string>) => (
+                    <Link to={linkTo(Routes.PARTIES, params.party)}>
+                      {truncateMiddle(params.party as string)}
+                    </Link>
+                  ),
+                },
+                children: [
+                  {
+                    index: true,
+                    element: <PartyAccountsByAsset />,
+                    handle: {
+                      breadcrumb: () => {
+                        return t('Assets');
                       },
                     },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      ]
-    : [];
-
-  const assetsRoutes: Route[] = featureFlags.EXPLORER_ASSETS
-    ? [
-        {
-          path: Routes.ASSETS,
-          handle: {
-            name: t('Assets'),
-            text: t('Assets'),
-            breadcrumb: () => <Link to={Routes.ASSETS}>{t('Assets')}</Link>,
-          },
-          children: [
-            {
-              index: true,
-              element: <AssetsPage />,
-            },
-            {
-              path: ':assetId',
-              element: <AssetPage />,
-              handle: {
-                breadcrumb: (params: Params<string>) => (
-                  <AssetLink assetId={params.assetId as string} />
-                ),
+                  },
+                ],
               },
-            },
-          ],
-        },
-      ]
-    : [];
-
-  const genesisRoutes: Route[] = featureFlags.EXPLORER_GENESIS
-    ? [
-        {
-          path: Routes.GENESIS,
-          handle: {
-            name: t('Genesis'),
-            text: t('Genesis Parameters'),
-            breadcrumb: () => (
-              <Link to={Routes.GENESIS}>{t('Genesis Parameters')}</Link>
-            ),
+            ],
           },
-          element: <Genesis />,
-        },
-      ]
-    : [];
+        ],
+      },
+    ]
+  : [];
 
-  const governanceRoutes: Route[] = featureFlags.EXPLORER_GOVERNANCE
-    ? [
-        {
-          path: Routes.GOVERNANCE,
-          handle: {
-            name: t('Governance proposals'),
-            text: t('Governance Proposals'),
-            breadcrumb: () => (
-              <Link to={Routes.GOVERNANCE}>{t('Governance Proposals')}</Link>
-            ),
-          },
-          element: <Proposals />,
+const assetsRoutes: Route[] = FLAGS.EXPLORER_ASSETS
+  ? [
+      {
+        path: Routes.ASSETS,
+        handle: {
+          name: t('Assets'),
+          text: t('Assets'),
+          breadcrumb: () => <Link to={Routes.ASSETS}>{t('Assets')}</Link>,
         },
-      ]
-    : [];
-
-  const marketsRoutes: Route[] = featureFlags.EXPLORER_MARKETS
-    ? [
-        {
-          path: Routes.MARKETS,
-          handle: {
-            name: t('Markets'),
-            text: t('Markets'),
-            breadcrumb: () => <Link to={Routes.MARKETS}>{t('Markets')}</Link>,
-          },
-          children: [
-            {
-              index: true,
-              element: <MarketsPage />,
-            },
-            {
-              path: ':marketId',
-              element: <MarketPage />,
-              handle: {
-                breadcrumb: (params: Params<string>) => (
-                  <MarketLink id={params.marketId as string} />
-                ),
-              },
-            },
-          ],
-        },
-      ]
-    : [];
-
-  const networkParametersRoutes: Route[] =
-    featureFlags.EXPLORER_NETWORK_PARAMETERS
-      ? [
+        children: [
           {
-            path: Routes.NETWORK_PARAMETERS,
+            index: true,
+            element: <AssetsPage />,
+          },
+          {
+            path: ':assetId',
+            element: <AssetPage />,
             handle: {
-              name: t('NetworkParameters'),
-              text: t('Network Parameters'),
-              breadcrumb: () => (
-                <Link to={Routes.NETWORK_PARAMETERS}>
-                  {t('Network Parameters')}
+              breadcrumb: (params: Params<string>) => (
+                <AssetLink assetId={params.assetId as string} />
+              ),
+            },
+          },
+        ],
+      },
+    ]
+  : [];
+
+const genesisRoutes: Route[] = FLAGS.EXPLORER_GENESIS
+  ? [
+      {
+        path: Routes.GENESIS,
+        handle: {
+          name: t('Genesis'),
+          text: t('Genesis Parameters'),
+          breadcrumb: () => (
+            <Link to={Routes.GENESIS}>{t('Genesis Parameters')}</Link>
+          ),
+        },
+        element: <Genesis />,
+      },
+    ]
+  : [];
+
+const governanceRoutes: Route[] = FLAGS.EXPLORER_GOVERNANCE
+  ? [
+      {
+        path: Routes.GOVERNANCE,
+        handle: {
+          name: t('Governance proposals'),
+          text: t('Governance Proposals'),
+          breadcrumb: () => (
+            <Link to={Routes.GOVERNANCE}>{t('Governance Proposals')}</Link>
+          ),
+        },
+        element: <Proposals />,
+      },
+    ]
+  : [];
+
+const marketsRoutes: Route[] = FLAGS.EXPLORER_MARKETS
+  ? [
+      {
+        path: Routes.MARKETS,
+        handle: {
+          name: t('Markets'),
+          text: t('Markets'),
+          breadcrumb: () => <Link to={Routes.MARKETS}>{t('Markets')}</Link>,
+        },
+        children: [
+          {
+            index: true,
+            element: <MarketsPage />,
+          },
+          {
+            path: ':marketId',
+            element: <MarketPage />,
+            handle: {
+              breadcrumb: (params: Params<string>) => (
+                <MarketLink id={params.marketId as string} />
+              ),
+            },
+          },
+        ],
+      },
+    ]
+  : [];
+
+const networkParametersRoutes: Route[] = FLAGS.EXPLORER_NETWORK_PARAMETERS
+  ? [
+      {
+        path: Routes.NETWORK_PARAMETERS,
+        handle: {
+          name: t('NetworkParameters'),
+          text: t('Network Parameters'),
+          breadcrumb: () => (
+            <Link to={Routes.NETWORK_PARAMETERS}>
+              {t('Network Parameters')}
+            </Link>
+          ),
+        },
+        element: <NetworkParameters />,
+      },
+    ]
+  : [];
+
+const validators: Route[] = FLAGS.EXPLORER_VALIDATORS
+  ? [
+      {
+        path: Routes.VALIDATORS,
+        handle: {
+          name: t('Validators'),
+          text: t('Validators'),
+          breadcrumb: () => (
+            <Link to={Routes.VALIDATORS}>{t('Validators')}</Link>
+          ),
+        },
+        element: <ValidatorsPage />,
+      },
+    ]
+  : [];
+
+const linkTo = (...segments: (string | undefined)[]) =>
+  compact(segments).join('/');
+
+export const routerConfig: Route[] = [
+  {
+    path: Routes.HOME,
+    element: <Layout />,
+    handle: {
+      name: t('Home'),
+      text: t('Home'),
+      breadcrumb: () => <Link to={Routes.HOME}>{t('Home')}</Link>,
+    },
+    errorElement: <ErrorBoundary />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+      },
+      {
+        path: Routes.TX,
+        handle: {
+          name: t('Txs'),
+          text: t('Transactions'),
+          breadcrumb: () => <Link to={Routes.TX}>{t('Transactions')}</Link>,
+        },
+        children: [
+          {
+            path: ':txHash',
+            element: <Tx />,
+            handle: {
+              breadcrumb: (params: Params<string>) => (
+                <Link to={linkTo(Routes.TX, params.txHash)}>
+                  {truncateMiddle(remove0x(params.txHash as string))}
                 </Link>
               ),
             },
-            element: <NetworkParameters />,
           },
-        ]
-      : [];
-
-  const validators: Route[] = featureFlags.EXPLORER_VALIDATORS
-    ? [
-        {
-          path: Routes.VALIDATORS,
-          handle: {
-            name: t('Validators'),
-            text: t('Validators'),
-            breadcrumb: () => (
-              <Link to={Routes.VALIDATORS}>{t('Validators')}</Link>
-            ),
+          {
+            index: true,
+            element: <TxsList />,
           },
-          element: <ValidatorsPage />,
-        },
-      ]
-    : [];
-
-  const linkTo = (...segments: (string | undefined)[]) =>
-    compact(segments).join('/');
-
-  const routerConfig: Route[] = [
-    {
-      path: Routes.HOME,
-      element: <Layout />,
-      handle: {
-        name: t('Home'),
-        text: t('Home'),
-        breadcrumb: () => <Link to={Routes.HOME}>{t('Home')}</Link>,
+        ],
       },
-      errorElement: <ErrorBoundary />,
-      children: [
-        {
-          index: true,
-          element: <Home />,
+      {
+        path: Routes.BLOCKS,
+        handle: {
+          name: t('Blocks'),
+          text: t('Blocks'),
+          breadcrumb: () => <Link to={Routes.BLOCKS}>{t('Blocks')}</Link>,
         },
-        {
-          path: Routes.TX,
-          handle: {
-            name: t('Txs'),
-            text: t('Transactions'),
-            breadcrumb: () => <Link to={Routes.TX}>{t('Transactions')}</Link>,
+        element: <BlockPage />,
+        children: [
+          {
+            index: true,
+            element: <Blocks />,
           },
-          children: [
-            {
-              path: ':txHash',
-              element: <Tx />,
-              handle: {
-                breadcrumb: (params: Params<string>) => (
-                  <Link to={linkTo(Routes.TX, params.txHash)}>
-                    {truncateMiddle(remove0x(params.txHash as string))}
-                  </Link>
-                ),
-              },
+          {
+            path: ':block',
+            element: <Block />,
+            handle: {
+              breadcrumb: (params: Params<string>) => (
+                <Link to={linkTo(Routes.BLOCKS, params.block)}>
+                  {params.block}
+                </Link>
+              ),
             },
-            {
-              index: true,
-              element: <TxsList />,
-            },
-          ],
-        },
-        {
-          path: Routes.BLOCKS,
-          handle: {
-            name: t('Blocks'),
-            text: t('Blocks'),
-            breadcrumb: () => <Link to={Routes.BLOCKS}>{t('Blocks')}</Link>,
           },
-          element: <BlockPage />,
-          children: [
-            {
-              index: true,
-              element: <Blocks />,
-            },
-            {
-              path: ':block',
-              element: <Block />,
-              handle: {
-                breadcrumb: (params: Params<string>) => (
-                  <Link to={linkTo(Routes.BLOCKS, params.block)}>
-                    {params.block}
-                  </Link>
-                ),
-              },
-            },
-          ],
-        },
-        {
-          path: Routes.ORACLES,
-          handle: {
-            name: t('Oracles'),
-            text: t('Oracles'),
-            breadcrumb: () => <Link to={Routes.ORACLES}>{t('Oracles')}</Link>,
-          },
-          element: <OraclePage />,
-          children: [
-            {
-              index: true,
-              element: <Oracles />,
-            },
-            {
-              path: ':id',
-              element: <Oracle />,
-              handle: {
-                breadcrumb: (params: Params<string>) => (
-                  <Link to={linkTo(Routes.ORACLES, params.id)}>
-                    {truncateMiddle(params.id as string)}
-                  </Link>
-                ),
-              },
-            },
-          ],
-        },
-        {
-          path: Routes.DISCLAIMER,
-          element: <Disclaimer />,
-          handle: {
-            name: t('Disclaimer'),
-            text: t('Disclaimer'),
-            breadcrumb: () => (
-              <Link to={Routes.DISCLAIMER}>{t('Disclaimer')}</Link>
-            ),
-          },
-        },
-        ...partiesRoutes,
-        ...assetsRoutes,
-        ...genesisRoutes,
-        ...governanceRoutes,
-        ...marketsRoutes,
-        ...networkParametersRoutes,
-        ...validators,
-      ],
-    },
-    {
-      path: Routes.RESTRICTED,
-      element: <RestrictedPage />,
-      handle: {
-        name: t('Restricted'),
-        text: t('Restricted'),
+        ],
       },
+      {
+        path: Routes.ORACLES,
+        handle: {
+          name: t('Oracles'),
+          text: t('Oracles'),
+          breadcrumb: () => <Link to={Routes.ORACLES}>{t('Oracles')}</Link>,
+        },
+        element: <OraclePage />,
+        children: [
+          {
+            index: true,
+            element: <Oracles />,
+          },
+          {
+            path: ':id',
+            element: <Oracle />,
+            handle: {
+              breadcrumb: (params: Params<string>) => (
+                <Link to={linkTo(Routes.ORACLES, params.id)}>
+                  {truncateMiddle(params.id as string)}
+                </Link>
+              ),
+            },
+          },
+        ],
+      },
+      {
+        path: Routes.DISCLAIMER,
+        element: <Disclaimer />,
+        handle: {
+          name: t('Disclaimer'),
+          text: t('Disclaimer'),
+          breadcrumb: () => (
+            <Link to={Routes.DISCLAIMER}>{t('Disclaimer')}</Link>
+          ),
+        },
+      },
+      ...partiesRoutes,
+      ...assetsRoutes,
+      ...genesisRoutes,
+      ...governanceRoutes,
+      ...marketsRoutes,
+      ...networkParametersRoutes,
+      ...validators,
+    ],
+  },
+  {
+    path: Routes.RESTRICTED,
+    element: <RestrictedPage />,
+    handle: {
+      name: t('Restricted'),
+      text: t('Restricted'),
     },
-  ];
-  return routerConfig;
-};
+  },
+];
+
+export const router = createBrowserRouter(routerConfig);

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

@@ -4,15 +4,13 @@ import { useFetch } from '@vegaprotocol/react-helpers';
 import { DATA_SOURCES } from '../../../config';
 import { RenderFetched } from '../../../components/render-fetched';
 import { TxDetails } from './tx-details';
-import { type BlockExplorerTransaction } from '../../../routes/types/block-explorer-response';
+import type { BlockExplorerTransaction } from '../../../routes/types/block-explorer-response';
 import { toNonHex } from '../../../components/search/detect-search';
 import { PageHeader } from '../../../components/page-header';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
 
-type Params = { txHash: string };
-
 const Tx = () => {
-  const { txHash } = useParams<Params>();
+  const { txHash } = useParams<{ txHash: string }>();
   const hash = txHash ? toNonHex(txHash) : '';
   let errorMessage: string | undefined = undefined;
 
@@ -31,10 +29,6 @@ const Tx = () => {
     }
   }
 
-  if (!data || !data?.transaction) {
-    errorMessage = 'Transaction not found';
-  }
-
   return (
     <section>
       <PageHeader
@@ -53,7 +47,7 @@ const Tx = () => {
         <TxDetails
           className="mb-28"
           txData={data?.transaction}
-          pubKey={data?.transaction?.submitter}
+          pubKey={data?.transaction.submitter}
         />
       </RenderFetched>
     </section>

apps/explorer/src/app/routes/txs/id/tx-details.spec.tsx

@@ -23,8 +23,6 @@ const txData: BlockExplorerTransactionResult = {
   type: 'type',
   command: {} as ValidatorHeartbeat,
   signature: {
-    version: '1',
-    algo: 'vega/ed25519',
     value: '123',
   },
 };

apps/explorer/src/app/routes/txs/id/tx-details.tsx

@@ -11,8 +11,8 @@ interface TxDetailsProps {
 export const txDetailsTruncateLength = 30;
 
 export const TxDetails = ({ txData, pubKey }: TxDetailsProps) => {
-  if (!txData || !pubKey) {
-    return <>{t('Transaction could not be found')}</>;
+  if (!txData) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
   }
   return (
     <section className="mb-10" key={txData.hash}>

apps/explorer/src/app/routes/types/block-explorer-response.d.ts

@@ -11,8 +11,6 @@ export interface BlockExplorerTransactionResult {
   cursor: string;
   command: components['schemas']['blockexplorerv1transaction'];
   signature: {
-    version: string;
-    algo: string;
     value: string;
   };
   error?: string;

apps/explorer/src/app/setup-tests.ts

@@ -3,9 +3,6 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
-import { locales } from '@vegaprotocol/i18n';
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
 
 Object.defineProperty(window, 'ResizeObserver', {
   writable: false,
@@ -16,14 +13,3 @@ Object.defineProperty(window, 'ResizeObserver', {
     disconnect: jest.fn(),
   })),
 });
-
-// Set up i18n instance so that components have the correct default
-// en translations
-i18n.use(initReactI18next).init({
-  // we init with resources
-  resources: locales,
-  fallbackLng: 'en',
-  nsSeparator: false,
-  ns: ['explorer'],
-  defaultNS: 'explorer',
-});

apps/explorer/src/assets/locales

@@ -1 +0,0 @@
-../../../../libs/i18n/src/locales

apps/explorer/src/i18n/index.ts

@@ -1,45 +0,0 @@
-import type { Module } from 'i18next';
-import i18n from 'i18next';
-import HttpBackend from 'i18next-http-backend';
-import LocizeBackend from 'i18next-locize-backend';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import { initReactI18next } from 'react-i18next';
-
-const isInDev = process.env.NODE_ENV === 'development';
-const useLocize = isInDev && !!process.env.NX_USE_LOCIZE;
-
-const backend = useLocize
-  ? {
-      projectId: '96ac1231-4bdd-455a-b9d7-f5322a2e7430',
-      apiKey: process.env.NX_LOCIZE_API_KEY,
-      referenceLng: 'en',
-    }
-  : {
-      loadPath: '/assets/locales/{{lng}}/{{ns}}.json',
-    };
-
-const Backend: Module = useLocize ? LocizeBackend : HttpBackend;
-
-i18n
-  .use(Backend)
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    lng: 'en',
-    fallbackLng: 'en',
-    supportedLngs: ['en'],
-    load: 'languageOnly',
-    debug: isInDev,
-    // have a common namespace used around the full app
-    ns: ['explorer'],
-    defaultNS: 'explorer',
-    keySeparator: false, // we use content as keys
-    nsSeparator: false,
-    backend,
-    saveMissing: useLocize && !!process.env.NX_LOCIZE_API_KEY,
-    interpolation: {
-      escapeValue: false,
-    },
-  });
-
-export default i18n;

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

@@ -8,13 +8,13 @@ type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
 type XOR<T, U> = T | U extends object
   ? (Without<T, U> & U) | (Without<U, T> & T)
   : T | U;
-/* eslint-disable  @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 type OneOf<T extends any[]> = T extends [infer Only]
   ? Only
   : T extends [infer A, infer B, ...infer Rest]
   ? OneOf<[XOR<A, B>, ...Rest]>
   : never;
-/* eslint-enable  @typescript-eslint/no-explicit-any */
+/* eslint-enable @typescript-eslint/no-explicit-any */
 
 export interface paths {
   '/info': {

apps/governance-e2e/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "cypress"],
+  "ignorePatterns": ["!**/*"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/governance-e2e/src/fixtures/mocks/proposals.ts

@@ -133,7 +133,7 @@ export const proposalsData = {
               instrument: {
                 name: 'UNIDAI Monthly (Dec 2022)',
                 code: 'UNIDAI.MF21',
-                product: {
+                futureProduct: {
                   settlementAsset: { symbol: 'tDAI', __typename: 'Asset' },
                   __typename: 'FutureProduct',
                 },
@@ -240,7 +240,7 @@ export const proposalsData = {
               instrument: {
                 name: 'ETHBTC Quarterly (Feb 2023)',
                 code: 'ETHBTC.QM21',
-                product: {
+                futureProduct: {
                   settlementAsset: { symbol: 'tBTC', __typename: 'Asset' },
                   __typename: 'FutureProduct',
                 },

apps/governance-e2e/src/integration/flow/proposal-details.cy.ts

@@ -31,7 +31,7 @@ import {
   switchVegaWalletPubKey,
   vegaWalletSetSpecifiedApprovalAmount,
 } from '../../support/wallet-functions';
-import { type testFreeformProposal } from '../../support/common-interfaces';
+import type { testFreeformProposal } from '../../support/common-interfaces';
 import { formatDateWithLocalTimezone } from '@vegaprotocol/utils';
 import {
   createGovernanceTransferProposalTxBody,

apps/governance-e2e/src/integration/flow/proposal-flow.cy.ts

@@ -34,7 +34,7 @@ import {
   vegaWalletTeardown,
 } from '../../support/wallet-functions';
 import { ethereumWalletConnect } from '../../support/wallet-eth.functions';
-import { type testFreeformProposal } from '../../support/common-interfaces';
+import type { testFreeformProposal } from '../../support/common-interfaces';
 
 const vegaWalletStakedBalances = 'vega-wallet-balance-staked-validators';
 const vegaWalletAssociatedBalance = 'associated-amount';

apps/governance-e2e/src/integration/flow/proposal-list.cy.ts

@@ -1,4 +1,4 @@
-import { type testFreeformProposal } from '../../support/common-interfaces';
+import type { testFreeformProposal } from '../../support/common-interfaces';
 import {
   navigateTo,
   navigation,

apps/governance-e2e/src/integration/view/pubkey-view.cy.ts

@@ -47,7 +47,7 @@ context('View functionality with public key', { tags: '@smoke' }, function () {
       .and('contain.text', 'USDC (fake)');
   });
 
-  it.skip('Unable to submit proposal with public key', function () {
+  it('Unable to submit proposal with public key', function () {
     const expectedErrorTxt = `You are connected in a view only state for public key: ${vegaWalletPubKey}. In order to send transactions you must connect to a real wallet.`;
 
     goToMakeNewProposal(governanceProposalType.RAW);
@@ -55,10 +55,7 @@ context('View functionality with public key', { tags: '@smoke' }, function () {
     cy.getByTestId('dialog-content')
       .first()
       .within(() => {
-        cy.getByTestId('dialog-title').should(
-          'have.text',
-          'Transaction failed'
-        );
+        cy.get('h1').should('have.text', 'Transaction failed');
         cy.getByTestId('Error').should('have.text', expectedErrorTxt);
       });
   });

apps/governance-e2e/src/integration/view/wallet-vega.cy.ts

@@ -302,17 +302,14 @@ context(
 
               cy.getByTestId(vegaWalletCurrencyTitle)
                 .contains(name)
-                .parent() // back to currency-title
-                .parent() // back to container
-                .within(() => {
-                  cy.get(
-                    '[data-account-type="account_type_general"] [data-value]'
-                  ).should((elementAmount) => {
-                    const displayedAmount = parseFloat(elementAmount.text());
-                    // @ts-ignore clash between jest and cypress
-                    expect(displayedAmount).be.gte(expectedAmount);
-                  });
+                .parent()
+                .siblings(txTimeout)
+                .should((elementAmount) => {
+                  const displayedAmount = parseFloat(elementAmount.text());
+                  // @ts-ignore clash between jest and cypress
+                  expect(displayedAmount).be.gte(expectedAmount);
                 });
+
               cy.getByTestId(vegaWalletCurrencyTitle)
                 .contains(name)
                 .parent()

apps/governance-e2e/src/support/proposal.functions.ts

@@ -112,7 +112,6 @@ export function createNewMarketProposalTxBody(): ProposalSubmissionBody {
               performanceHysteresisEpochs: 2,
               slaCompetitionFactor: '0.1',
             },
-            // FIXME: workaround because of https://github.com/vegaprotocol/vega/issues/10343
             quadraticSlippageFactor: '0',
             instrument: {
               name: 'Token test market',
@@ -197,7 +196,6 @@ export function createNewMarketProposalTxBody(): ProposalSubmissionBody {
                 timeWindow: '3600',
                 scalingFactor: 10,
               },
-              // FIXME: workaround because of https://github.com/vegaprotocol/vega/issues/10343
               triggeringRatio: '0.7',
               auctionExtension: '1',
             },
@@ -242,7 +240,6 @@ export function createSuccessorMarketProposalTxBody(
             decimalPlaces: '5',
             positionDecimalPlaces: '5',
             linearSlippageFactor: '0.001',
-            // FIXME: workaround because of https://github.com/vegaprotocol/vega/issues/10343
             quadraticSlippageFactor: '0',
             liquiditySlaParameters: {
               priceRange: '0.5',
@@ -337,7 +334,6 @@ export function createSuccessorMarketProposalTxBody(
                 timeWindow: '3600',
                 scalingFactor: 10,
               },
-              // FIXME: workaround because of https://github.com/vegaprotocol/vega/issues/10343
               triggeringRatio: '0.7',
               auctionExtension: '1',
             },

apps/governance-e2e/src/support/staking.functions.ts

@@ -256,7 +256,10 @@ export function validateWalletCurrency(
     .parent()
     .parent()
     .within(() => {
-      cy.get('[data-value]', txTimeout).should('have.text', expectedAmount);
+      cy.getByTestId('currency-value', txTimeout).should(
+        'have.text',
+        expectedAmount
+      );
     });
 }
 

apps/governance/.env

@@ -35,5 +35,6 @@ NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=true
 NX_PRODUCT_PERPETUALS=false
 NX_UPDATE_MARKET_STATE=false
-NX_REFERRALS=true
+NX_REFERRALS=false
 NX_GOVERNANCE_TRANSFERS=false
+NX_VOLUME_DISCOUNTS=false

apps/governance/.env.capsule

@@ -31,8 +31,9 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
 CYPRESS_FAIRGROUND=false
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=true
-NX_METAMASK_SNAPS=true
+NX_SUCCESSOR_MARKETS=false
+NX_METAMASK_SNAPS=false
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
+NX_VOLUME_DISCOUNTS=true

apps/governance/.env.devnet

@@ -28,3 +28,4 @@ NX_METAMASK_SNAPS=true
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
+NX_VOLUME_DISCOUNTS=true

apps/governance/.env.mainnet

@@ -22,8 +22,9 @@ NX_TENDERMINT_URL=https://be.vega.community
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=true
-NX_METAMASK_SNAPS=true
-NX_PRODUCT_PERPETUALS=true
-NX_UPDATE_MARKET_STATE=true
-NX_REFERRALS=true
+NX_SUCCESSOR_MARKETS=false
+NX_METAMASK_SNAPS=false
+NX_PRODUCT_PERPETUALS=false
+NX_UPDATE_MARKET_STATE=false
+NX_REFERRALS=false
+NX_VOLUME_DISCOUNTS=false

apps/governance/.env.mainnet-mirror

@@ -21,8 +21,9 @@ NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=true
-NX_METAMASK_SNAPS=true
-NX_PRODUCT_PERPETUALS=true
-NX_UPDATE_MARKET_STATE=true
-NX_REFERRALS=true
+NX_SUCCESSOR_MARKETS=false
+NX_METAMASK_SNAPS=false
+NX_PRODUCT_PERPETUALS=false
+NX_UPDATE_MARKET_STATE=false
+NX_REFERRALS=false
+NX_VOLUME_DISCOUNTS=false

apps/governance/.env.stagnet1

@@ -25,3 +25,4 @@ NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
 NX_GOVERNANCE_TRANSFERS=true
+NX_VOLUME_DISCOUNTS=true

apps/governance/.env.testnet

@@ -29,3 +29,4 @@ NX_METAMASK_SNAPS=true
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
+NX_VOLUME_DISCOUNTS=true

apps/governance/.env.validators-testnet

@@ -20,8 +20,9 @@ NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=true
-NX_METAMASK_SNAPS=true
-NX_PRODUCT_PERPETUALS=true
-NX_UPDATE_MARKET_STATE=true
-NX_REFERRALS=true
+NX_SUCCESSOR_MARKETS=false
+NX_METAMASK_SNAPS=false
+NX_PRODUCT_PERPETUALS=false
+NX_UPDATE_MARKET_STATE=false
+NX_REFERRALS=false
+NX_VOLUME_DISCOUNTS=false

apps/governance/README.md

@@ -49,6 +49,10 @@ There are a few different configuration options offered for this app:
 | `NX_ETH_WALLET_MNEMONIC` (optional) | The mnemonic to be used to sign transactions with in browser                                                                                         |
 | `NX_LOCAL_PROVIDER_URL` (optional)  | The local node to use to send transaction to when signing in browser                                                                                 |
 
+## Example configs:
+
+For example configurations, check out our [netlify.toml](./netlify.toml).
+
 ## Testing
 
 To run the minimal set of unit tests, run the following:

apps/governance/netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

apps/governance/project.json

@@ -69,6 +69,15 @@
         "jestConfig": "apps/governance/jest.config.ts"
       }
     },
+    "build-netlify": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "cp apps/governance/netlify.toml netlify.toml",
+          "nx build token"
+        ]
+      }
+    },
     "build-spec": {
       "executor": "nx:run-commands",
       "outputs": [],

apps/governance/src/app-loader.tsx

@@ -2,9 +2,9 @@ import * as Sentry from '@sentry/react';
 import { toBigNum } from '@vegaprotocol/utils';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet, useEagerConnect } from '@vegaprotocol/wallet';
-import { useFeatureFlags, useEnvironment } from '@vegaprotocol/environment';
+import { FLAGS, useEnvironment } from '@vegaprotocol/environment';
 import { useWeb3React } from '@web3-react/core';
-import React, { Suspense } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { SplashError } from './components/splash-error';
@@ -15,23 +15,21 @@ import {
 } from './contexts/app-state/app-state-context';
 import { useContracts } from './contexts/contracts/contracts-context';
 import { useRefreshAssociatedBalances } from './hooks/use-refresh-associated-balances';
-import { useConnectors } from './lib/vega-connectors';
+import { Connectors } from './lib/vega-connectors';
 import { useSearchParams } from 'react-router-dom';
 
 const useVegaWalletEagerConnect = () => {
-  const connectors = useConnectors();
-  const vegaConnecting = useEagerConnect(connectors);
+  const vegaConnecting = useEagerConnect(Connectors);
   const { pubKey, connect } = useVegaWallet();
   const [searchParams] = useSearchParams();
   const [query] = React.useState(searchParams.get('address'));
   if (query && !pubKey) {
-    connect(connectors.view);
+    connect(Connectors['view']);
   }
   return vegaConnecting;
 };
 
 export const AppLoader = ({ children }: { children: React.ReactElement }) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   const { t } = useTranslation();
   const { account } = useWeb3React();
   const { VEGA_URL } = useEnvironment();
@@ -81,16 +79,10 @@ export const AppLoader = ({ children }: { children: React.ReactElement }) => {
       }
     };
 
-    if (!featureFlags.GOVERNANCE_NETWORK_DOWN) {
+    if (!FLAGS.GOVERNANCE_NETWORK_DOWN) {
       run();
     }
-  }, [
-    token,
-    appDispatch,
-    staking,
-    vesting,
-    featureFlags.GOVERNANCE_NETWORK_DOWN,
-  ]);
+  }, [token, appDispatch, staking, vesting]);
 
   React.useEffect(() => {
     if (account && pubKey) {
@@ -155,16 +147,16 @@ export const AppLoader = ({ children }: { children: React.ReactElement }) => {
     };
 
     // Only begin polling if network limits flag is set, as this is a new API not yet on mainnet 7/3/22
-    if (featureFlags.GOVERNANCE_NETWORK_LIMITS) {
+    if (FLAGS.GOVERNANCE_NETWORK_LIMITS) {
       getNetworkLimits();
     }
 
     return () => {
       stopPoll();
     };
-  }, [appDispatch, VEGA_URL, t, featureFlags.GOVERNANCE_NETWORK_LIMITS]);
+  }, [appDispatch, VEGA_URL, t]);
 
-  if (featureFlags.GOVERNANCE_NETWORK_DOWN) {
+  if (FLAGS.GOVERNANCE_NETWORK_DOWN) {
     return (
       <Splash>
         <SplashError />
@@ -172,14 +164,13 @@ export const AppLoader = ({ children }: { children: React.ReactElement }) => {
     );
   }
 
-  const loading = (
-    <Splash>
-      <SplashLoader />
-    </Splash>
-  );
-
   if (!loaded) {
-    return loading;
+    return (
+      <Splash>
+        <SplashLoader />
+      </Splash>
+    );
   }
-  return <Suspense fallback={loading}>{children}</Suspense>;
+
+  return children;
 };

apps/governance/src/app.tsx

@@ -26,7 +26,7 @@ import {
 } from '@vegaprotocol/web3';
 import { Web3Provider } from '@vegaprotocol/web3';
 import { VegaWalletDialogs } from './components/vega-wallet-dialogs';
-import { VegaWalletProvider, useChainId } from '@vegaprotocol/wallet';
+import { VegaWalletProvider } from '@vegaprotocol/wallet';
 import {
   useVegaTransactionManager,
   useVegaTransactionUpdater,
@@ -42,7 +42,6 @@ import {
   useNodeSwitcherStore,
   DocsLinks,
   NodeFailure,
-  AppLoader as Loader,
 } from '@vegaprotocol/environment';
 import { ENV } from './config';
 import type { InMemoryCacheConfig } from '@apollo/client';
@@ -96,9 +95,7 @@ const cache: InMemoryCacheConfig = {
 const Web3Container = ({
   chainId,
 }: {
-  /** Ethereum chain id */
   chainId: number;
-  /** Ethereum provider url */
   providerUrl: string;
 }) => {
   const InitializeHandlers = () => {
@@ -125,9 +122,6 @@ const Web3Container = ({
     MOZILLA_EXTENSION_URL,
     VEGA_WALLET_URL,
   } = useEnvironment();
-
-  const vegaChainId = useChainId(VEGA_URL);
-
   useEffect(() => {
     if (chainId) {
       return initializeConnectors(
@@ -162,8 +156,7 @@ const Web3Container = ({
     !VEGA_EXPLORER_URL ||
     !DocsLinks ||
     !CHROME_EXTENSION_URL ||
-    !MOZILLA_EXTENSION_URL ||
-    !vegaChainId
+    !MOZILLA_EXTENSION_URL
   ) {
     return null;
   }
@@ -175,7 +168,6 @@ const Web3Container = ({
           config={{
             network: VEGA_ENV,
             vegaUrl: VEGA_URL,
-            chainId: vegaChainId,
             vegaWalletServiceUrl: VEGA_WALLET_URL,
             links: {
               explorer: VEGA_EXPLORER_URL,
@@ -360,11 +352,9 @@ function App() {
   useInitializeEnv();
 
   return (
-    <React.Suspense fallback={<Loader />}>
-      <NetworkLoader cache={cache}>
-        <AppContainer />
-      </NetworkLoader>
-    </React.Suspense>
+    <NetworkLoader cache={cache}>
+      <AppContainer />
+    </NetworkLoader>
   );
 }
 

apps/governance/src/assets/locales

@@ -1 +0,0 @@
-../../../../libs/i18n/src/locales

apps/governance/src/components/heading/heading.tsx

@@ -23,13 +23,10 @@ export const Heading = ({
       })}
     >
       <h1
-        className={classNames(
-          'font-alpha calt text-5xl [word-break:break-word]',
-          {
-            'mt-0': !marginTop,
-            'mb-0': !marginBottom,
-          }
-        )}
+        className={classNames('font-alpha calt text-5xl break-words', {
+          'mt-0': !marginTop,
+          'mb-0': !marginBottom,
+        })}
       >
         {title}
       </h1>

apps/governance/src/components/vega-wallet-dialogs/vega-wallet-dialogs.tsx

@@ -7,16 +7,16 @@ import {
   AppStateActionType,
   useAppState,
 } from '../../contexts/app-state/app-state-context';
-import { useConnectors } from '../../lib/vega-connectors';
+import { Connectors } from '../../lib/vega-connectors';
 import { RiskMessage } from './risk-message';
 
 export const VegaWalletDialogs = () => {
   const { appState, appDispatch } = useAppState();
-  const connectors = useConnectors();
+
   return (
     <>
       <VegaConnectDialog
-        connectors={connectors}
+        connectors={Connectors}
         riskMessage={<RiskMessage />}
       />
 
@@ -30,7 +30,7 @@ export const VegaWalletDialogs = () => {
         }
       />
 
-      <ViewAsDialog connector={connectors.view} />
+      <ViewAsDialog connector={Connectors.view} />
     </>
   );
 };

apps/governance/src/components/vega-wallet/hooks.ts

@@ -10,7 +10,7 @@ import noIcon from '../../images/token-no-icon.png';
 import vegaBlack from '../../images/vega_black.png';
 import vegaVesting from '../../images/vega_vesting.png';
 import { BigNumber } from '../../lib/bignumber';
-import { type WalletCardAssetProps } from '../wallet-card';
+import type { WalletCardAssetProps } from '../wallet-card';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useContracts } from '../../contexts/contracts/contracts-context';
 import * as Schema from '@vegaprotocol/types';
@@ -21,12 +21,12 @@ import {
   toBigNum,
 } from '@vegaprotocol/utils';
 import { useAppState } from '../../contexts/app-state/app-state-context';
-import {
-  DelegationsDocument,
-  type DelegationsQuery,
-  type DelegationsQueryVariables,
-  type WalletDelegationFieldsFragment,
+import type {
+  DelegationsQuery,
+  DelegationsQueryVariables,
+  WalletDelegationFieldsFragment,
 } from './__generated__/Delegations';
+import { DelegationsDocument } from './__generated__/Delegations';
 import { isPartyNotFoundError } from '../../lib/party';
 
 export const usePollForDelegations = () => {
@@ -44,7 +44,6 @@ export const usePollForDelegations = () => {
   const [delegatedNodes, setDelegatedNodes] = React.useState<
     {
       nodeId: string;
-      // eslint-disable-next-line
       name: string;
       hasStakePending: boolean;
       currentEpochStake?: BigNumber;
@@ -114,16 +113,6 @@ export const usePollForDelegations = () => {
                     isAssetTypeERC20(a.asset) &&
                     a.asset.source.contractAddress === vegaToken.address;
 
-                  const isVesting =
-                    a.type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS ||
-                    a.type === Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS;
-
-                  let icon = noIcon;
-                  if (isVega) {
-                    if (isVesting) icon = vegaVesting;
-                    else icon = vegaBlack;
-                  }
-
                   return {
                     isVega,
                     name: a.asset.name,
@@ -134,7 +123,14 @@ export const usePollForDelegations = () => {
                     balance: new BigNumber(
                       addDecimal(a.balance, a.asset.decimals)
                     ),
-                    image: icon,
+                    image: isVega
+                      ? vegaBlack
+                      : a.type ===
+                          Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS ||
+                        a.type ===
+                          Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS
+                      ? vegaVesting
+                      : noIcon,
                     border: isVega,
                     address: isAssetTypeERC20(a.asset)
                       ? a.asset.source.contractAddress

apps/governance/src/components/vega-wallet/vega-wallet.tsx

@@ -11,10 +11,7 @@ import { BigNumber } from '../../lib/bignumber';
 import { truncateMiddle } from '../../lib/truncate-middle';
 import Routes from '../../routes/routes';
 import { BulletHeader } from '../bullet-header';
-import type {
-  WalletCardAssetProps,
-  WalletCardAssetWithMultipleBalancesProps,
-} from '../wallet-card';
+import type { WalletCardAssetProps } from '../wallet-card';
 import {
   WalletCard,
   WalletCardActions,
@@ -30,7 +27,6 @@ import { Button, ButtonLink } from '@vegaprotocol/ui-toolkit';
 import { toBigNum } from '@vegaprotocol/utils';
 import { usePendingBalancesStore } from '../../hooks/use-pending-balances-manager';
 import { StakingEventType } from '../../hooks/use-get-association-breakdown';
-import omit from 'lodash/omit';
 
 export const VegaWallet = () => {
   const { t } = useTranslation();
@@ -103,29 +99,12 @@ const VegaWalletAssetList = ({ accounts }: VegaWalletAssetsListProps) => {
   if (!accounts.length) {
     return null;
   }
-
-  const groupedByAsset = accounts.reduce((all, a) => {
-    const foundIndex = all.findIndex((acc) => acc.assetId === a.assetId);
-    if (foundIndex > -1) {
-      const found = all[foundIndex];
-      all[foundIndex] = {
-        ...found,
-        balances: [...found.balances, { balance: a.balance, type: a.type }],
-      };
-      return all;
-    }
-    const acc = {
-      ...omit(a, 'balance', 'type'),
-      balances: [{ balance: a.balance, type: a.type }],
-    };
-    return [...all, acc];
-  }, [] as WalletCardAssetWithMultipleBalancesProps[]);
   return (
     <>
       <WalletCardHeader>
         <BulletHeader tag="h2">{t('assets')}</BulletHeader>
       </WalletCardHeader>
-      {groupedByAsset.map((a, i) => (
+      {accounts.map((a, i) => (
         <WalletCardAsset key={i} {...a} />
       ))}
     </>
@@ -203,7 +182,6 @@ const VegaWalletConnected = ({ vegaKeys }: VegaWalletConnectedProps) => {
         subheading={t('Associated')}
         symbol="VEGA"
         balance={currentStakeAvailable}
-        allowZeroBalance={true}
       />
       {totalPending.eq(0) ? null : (
         <>
@@ -214,7 +192,6 @@ const VegaWalletConnected = ({ vegaKeys }: VegaWalletConnectedProps) => {
             subheading={t('Pending association')}
             symbol="VEGA"
             balance={totalPending}
-            allowZeroBalance={true}
           />
           <WalletCardAsset
             image={vegaWhite}
@@ -223,7 +200,6 @@ const VegaWalletConnected = ({ vegaKeys }: VegaWalletConnectedProps) => {
             subheading={t('Total associated after pending')}
             symbol="VEGA"
             balance={pendingStakeAmount}
-            allowZeroBalance={true}
           />
         </>
       )}

apps/governance/src/components/wallet-card/wallet-card.tsx

@@ -103,7 +103,7 @@ export const WalletCardActions = ({
   return <div className="flex justify-end gap-2 mb-4">{children}</div>;
 };
 
-export type WalletCardAssetProps = {
+export interface WalletCardAssetProps {
   image: string;
   name: string;
   symbol: string;
@@ -113,61 +113,42 @@ export type WalletCardAssetProps = {
   border?: boolean;
   subheading?: string;
   type?: Schema.AccountType;
-  allowZeroBalance?: boolean;
-};
-
-export type WalletCardAssetWithMultipleBalancesProps = Omit<
-  WalletCardAssetProps,
-  'balance' | 'type'
-> & {
-  balances: { balance: BigNumber; type?: Schema.AccountType }[];
-};
+}
 
 export const WalletCardAsset = ({
   image,
   name,
   symbol,
+  balance,
   decimals,
   assetId,
   border,
   subheading,
-  allowZeroBalance = false,
-  ...props
-}: WalletCardAssetProps | WalletCardAssetWithMultipleBalancesProps) => {
-  const balance = 'balance' in props ? props.balance : undefined;
-  const type = 'type' in props ? props.type : undefined;
-  const balances =
-    'balances' in props
-      ? props.balances
-      : balance
-      ? [{ balance, type }]
-      : undefined;
+  type,
+}: WalletCardAssetProps) => {
+  const [integers, decimalsPlaces, separator] = useNumberParts(
+    balance,
+    decimals
+  );
+  const { t } = useTranslation();
+  const consoleLink = useLinks(DApp.Console);
+  const transferAssetLink = (assetId: string) =>
+    consoleLink(CONSOLE_TRANSFER_ASSET.replace(':assetId', assetId));
+  const { param: baseRate } = useNetworkParam('rewards_vesting_baseRate');
 
-  const values =
-    balances &&
-    balances.length > 0 &&
-    balances
-      .filter((b) => allowZeroBalance || !b.balance.isZero())
-      .sort((a, b) => {
-        const order = [
-          Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS,
-          Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS,
-          Schema.AccountType.ACCOUNT_TYPE_GENERAL,
-          undefined,
-        ];
-        return order.indexOf(a.type) - order.indexOf(b.type);
-      })
-      .map(({ balance, type }, i) => (
-        <CurrencyValue
-          key={i}
-          balance={balance}
-          decimals={decimals}
-          type={type}
-          assetId={assetId}
-        />
-      ));
+  const isRedeemable =
+    type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS && assetId;
 
-  if (!values || values.length === 0) return;
+  const accountTypeTooltip = useMemo(() => {
+    if (type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS) {
+      return t('VestedRewardsTooltip');
+    }
+    if (type === Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS && baseRate) {
+      return t('VestingRewardsTooltip', { baseRate });
+    }
+
+    return null;
+  }, [baseRate, t, type]);
 
   return (
     <div className="flex flex-nowrap gap-2 mt-2 mb-4">
@@ -188,92 +169,35 @@ export const WalletCardAsset = ({
             {subheading || symbol}
           </div>
         </div>
-        {values}
-      </div>
-    </div>
-  );
-};
-
-const useAccountTypeTooltip = (type?: Schema.AccountType) => {
-  const { t } = useTranslation();
-  const { param: baseRate } = useNetworkParam('rewards_vesting_baseRate');
-  const accountTypeTooltip = useMemo(() => {
-    if (type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS) {
-      return t('VestedRewardsTooltip');
-    }
-    if (type === Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS && baseRate) {
-      return t('VestingRewardsTooltip', { baseRate });
-    }
-
-    return null;
-  }, [baseRate, t, type]);
-
-  return accountTypeTooltip;
-};
-
-const CurrencyValue = ({
-  balance,
-  decimals,
-  type,
-  assetId,
-}: {
-  balance: BigNumber;
-  decimals: number;
-  type?: Schema.AccountType;
-  assetId?: string;
-}) => {
-  const { t } = useTranslation();
-  const consoleLink = useLinks(DApp.Console);
-  const transferAssetLink = (assetId: string) =>
-    consoleLink(CONSOLE_TRANSFER_ASSET.replace(':assetId', assetId));
-
-  const [integers, decimalsPlaces, separator] = useNumberParts(
-    balance,
-    decimals
-  );
-  const accountTypeTooltip = useAccountTypeTooltip(type);
-
-  const accountType = type && (
-    <Tooltip description={accountTypeTooltip}>
-      <span className="px-2 py-1 leading-none text-xs bg-vega-cdark-700 rounded">
-        {Schema.AccountTypeMapping[type]}
-      </span>
-    </Tooltip>
-  );
-  const isRedeemable =
-    type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS && assetId;
-  const redeemBtn = isRedeemable ? (
-    <Tooltip description={t('RedeemRewardsTooltip')}>
-      <AnchorButton
-        variant="primary"
-        size="xs"
-        href={transferAssetLink(assetId)}
-        target="_blank"
-        className="px-2 py-1 leading-none text-xs bg-vega-yellow text-black rounded"
-      >
-        {t('Redeem')}
-      </AnchorButton>
-    </Tooltip>
-  ) : null;
-
-  return (
-    <div
-      className="basis-full font-mono mb-1"
-      data-account-type={type?.toLowerCase() || 'unspecified'}
-      data-testid="currency-value"
-    >
-      {type && (
-        <div data-type className="flex gap-1">
-          {accountType}
-          {redeemBtn}
+        {type ? (
+          <div className="mb-[2px] flex gap-2 items-baseline">
+            <Tooltip description={accountTypeTooltip}>
+              <span className="px-2 py-1 leading-none text-xs bg-vega-cdark-700 rounded">
+                {Schema.AccountTypeMapping[type]}
+              </span>
+            </Tooltip>
+            {isRedeemable ? (
+              <Tooltip description={t('RedeemRewardsTooltip')}>
+                <AnchorButton
+                  variant="primary"
+                  size="xs"
+                  href={transferAssetLink(assetId)}
+                  target="_blank"
+                  className="px-2 py-1 leading-none text-xs bg-vega-yellow text-black rounded"
+                >
+                  {t('Redeem')}
+                </AnchorButton>
+              </Tooltip>
+            ) : null}
+          </div>
+        ) : null}
+        <div className="basis-full font-mono" data-testid="currency-value">
+          <span>
+            {integers}
+            {separator}
+          </span>
+          <span className="text-neutral-400">{decimalsPlaces}</span>
         </div>
-      )}
-      <div data-value>
-        <span>
-          {integers}
-          {separator}
-        </span>
-        <span className="text-neutral-400">{decimalsPlaces}</span>
       </div>
     </div>
   );

apps/governance/src/contexts/contracts/contracts-provider.tsx

@@ -9,7 +9,7 @@ import { useWeb3React } from '@web3-react/core';
 import React from 'react';
 
 import { SplashLoader } from '../../components/splash-loader';
-import { type ContractsContextShape } from './contracts-context';
+import type { ContractsContextShape } from './contracts-context';
 import { ContractsContext } from './contracts-context';
 import { createDefaultProvider } from '../../lib/web3-connectors';
 import { useEthereumConfig } from '@vegaprotocol/web3';
@@ -49,8 +49,12 @@ export const ContractsProvider = ({ children }: { children: JSX.Element }) => {
             ? activeProvider
             : defaultProvider;
 
-        if (account && provider && typeof provider.getSigner === 'function') {
-          signer = provider.getSigner(account);
+        if (
+          account &&
+          activeProvider &&
+          typeof activeProvider.getSigner === 'function'
+        ) {
+          signer = provider.getSigner();
         }
 
         const tokenVestingAddress =

apps/governance/src/i18n/index.ts

@@ -1,42 +1,29 @@
-import type { Module } from 'i18next';
 import i18n from 'i18next';
-import HttpBackend from 'i18next-http-backend';
-import LocizeBackend from 'i18next-locize-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 
-const isInDev = process.env.NODE_ENV === 'development';
-const useLocize = isInDev && !!process.env.NX_USE_LOCIZE;
-
-const backend = useLocize
-  ? {
-      projectId: '96ac1231-4bdd-455a-b9d7-f5322a2e7430',
-      apiKey: process.env.NX_LOCIZE_API_KEY,
-      referenceLng: 'en',
-    }
-  : {
-      loadPath: '/assets/locales/{{lng}}/{{ns}}.json',
-    };
-
-const Backend: Module = useLocize ? LocizeBackend : HttpBackend;
+import dev from './translations/dev.json';
 
 i18n
-  .use(Backend)
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-    lng: 'en',
+    // we init with resources
+    resources: {
+      en: {
+        translations: {
+          ...dev,
+        },
+      },
+    },
+    lng: undefined,
     fallbackLng: 'en',
-    supportedLngs: ['en'],
-    load: 'languageOnly',
-    debug: isInDev,
+    debug: true,
     // have a common namespace used around the full app
-    ns: ['governance'],
-    defaultNS: 'governance',
+    ns: ['translations'],
+    defaultNS: 'translations',
     keySeparator: false, // we use content as keys
-    nsSeparator: false,
-    backend,
-    saveMissing: useLocize && !!process.env.NX_LOCIZE_API_KEY,
+
     interpolation: {
       escapeValue: false,
     },

apps/governance/src/lib/party.test.ts

@@ -1,112 +0,0 @@
-import type { ApolloError } from '@apollo/client';
-import {
-  PARTY_NOT_FOUND,
-  filterAcceptableGraphqlErrors,
-  isPartyNotFoundError,
-} from './party';
-import type { GraphQLError } from 'graphql';
-
-/**
- *
- * @param message
- * @returns GraphQLError
- */
-function createMockApolloErrors(message: string): GraphQLError {
-  return {
-    message,
-    extensions: {
-      code: message.toUpperCase().replace(/ /g, '_'),
-    },
-    locations: [],
-    originalError: new Error(message),
-    path: [],
-    nodes: [],
-    positions: [1],
-    name: message,
-    source: {
-      body: message,
-      name: message,
-      locationOffset: {
-        line: 1,
-        column: 1,
-      },
-    },
-  };
-}
-
-describe('filterAcceptableGraphqlErrors', () => {
-  it('should return undefined if the error is a party not found error', () => {
-    const error: Partial<ApolloError> = {
-      graphQLErrors: [createMockApolloErrors('failed to get party for ID')],
-    };
-
-    const result = filterAcceptableGraphqlErrors(error as ApolloError);
-
-    expect(result).toBeUndefined();
-  });
-
-  it('should return the error if it is not a party not found error', () => {
-    const error: Partial<ApolloError> = {
-      graphQLErrors: [createMockApolloErrors('Some other error')],
-    };
-
-    const result = filterAcceptableGraphqlErrors(error as ApolloError);
-
-    expect(result).toEqual(error);
-  });
-
-  it('should return the error if there are multiple errors', () => {
-    const error: Partial<ApolloError> = {
-      graphQLErrors: [
-        createMockApolloErrors('failed to get party for ID'),
-        createMockApolloErrors('Some other error'),
-      ],
-    };
-
-    const result = filterAcceptableGraphqlErrors(error as ApolloError);
-
-    expect(result).toEqual(error);
-  });
-
-  it('should return the error if there are no errors', () => {
-    const error: Partial<ApolloError> = {
-      graphQLErrors: [],
-    };
-
-    const result = filterAcceptableGraphqlErrors(error as ApolloError);
-
-    expect(result).toEqual(error);
-  });
-
-  it('should return undefined if the error is undefined', () => {
-    const result = filterAcceptableGraphqlErrors(undefined);
-
-    expect(result).toBeUndefined();
-  });
-});
-
-describe('isPartyNotFoundError', () => {
-  it('should return true if the error message includes PARTY_NOT_FOUND', () => {
-    const error = { message: 'failed to get party for ID' };
-
-    const result = isPartyNotFoundError(error);
-
-    expect(result).toBe(true);
-  });
-
-  it('should return false if the error message does not include PARTY_NOT_FOUND', () => {
-    const error = { message: 'Some other error' };
-
-    const result = isPartyNotFoundError(error);
-
-    expect(result).toBe(false);
-  });
-
-  // Will trip if the error message changes, which should not be a problem, but there
-  // might be logic that depends on it
-  it('expects party not found error to remain consistent', () => {
-    const error = 'failed to get party for ID';
-
-    expect(PARTY_NOT_FOUND).toStrictEqual(error);
-  });
-});

apps/governance/src/lib/party.ts

@@ -1,5 +1,3 @@
-import type { ApolloError } from '@apollo/client';
-
 export const PARTY_NOT_FOUND = 'failed to get party for ID';
 
 export const isPartyNotFoundError = (error: { message: string }) => {
@@ -8,23 +6,3 @@ export const isPartyNotFoundError = (error: { message: string }) => {
   }
   return false;
 };
-
-/**
- * If a party has no accounts or data, then this GraphQL query believes it does not exist
- * Not having any rewards is a valid state, so in some cases we can filter this error out.
- *
- * @param error ApolloError | undefined
- * @returns ApolloError | undefined
- */
-export function filterAcceptableGraphqlErrors(
-  error?: ApolloError
-): ApolloError | undefined {
-  // Currently the only error we expect is when a party has no accounts
-  if (error && error.graphQLErrors.length === 1) {
-    if (isPartyNotFoundError(error.graphQLErrors[0])) {
-      return;
-    }
-  }
-
-  return error;
-}

apps/governance/src/lib/vega-connectors.ts

@@ -1,5 +1,4 @@
-import { useFeatureFlags } from '@vegaprotocol/environment';
-import { useMemo } from 'react';
+import { FLAGS } from '@vegaprotocol/environment';
 import {
   JsonRpcConnector,
   ViewConnector,
@@ -14,17 +13,13 @@ export const jsonRpc = new JsonRpcConnector();
 export const injected = new InjectedConnector();
 export const view = new ViewConnector(urlParams.get('address'));
 
-export const snap = new SnapConnector(DEFAULT_SNAP_ID);
+export const snap = FLAGS.METAMASK_SNAPS
+  ? new SnapConnector(DEFAULT_SNAP_ID)
+  : undefined;
 
-export const useConnectors = () => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
-  return useMemo(
-    () => ({
-      injected,
-      jsonRpc,
-      view,
-      snap: featureFlags.METAMASK_SNAPS ? snap : undefined,
-    }),
-    [featureFlags.METAMASK_SNAPS]
-  );
+export const Connectors = {
+  injected,
+  jsonRpc,
+  view,
+  snap,
 };

apps/governance/src/routes/home/index.tsx

@@ -12,7 +12,7 @@ import { useRefreshAfterEpoch } from '../../hooks/use-refresh-after-epoch';
 import { ProposalsListItem } from '../proposals/components/proposals-list-item';
 import { ProtocolUpgradeProposalsListItem } from '../proposals/components/protocol-upgrade-proposals-list-item/protocol-upgrade-proposals-list-item';
 import Routes from '../routes';
-import { ExternalLinks, useFeatureFlags } from '@vegaprotocol/environment';
+import { ExternalLinks, FLAGS } from '@vegaprotocol/environment';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
 import { useNodesQuery } from '../staking/home/__generated__/Nodes';
 import { useProposalsQuery } from '../proposals/proposals/__generated__/Proposals';
@@ -175,7 +175,6 @@ export const ValidatorDetailsLink = ({
 };
 
 const GovernanceHome = ({ name }: RouteChildProps) => {
-  const featureFlags = useFeatureFlags((state) => state.flags);
   useDocumentTitle(name);
   const { t } = useTranslation();
   const {
@@ -187,9 +186,10 @@ const GovernanceHome = ({ name }: RouteChildProps) => {
     fetchPolicy: 'network-only',
     errorPolicy: 'ignore',
     variables: {
-      includeNewMarketProductFields: !!featureFlags.PRODUCT_PERPETUALS,
-      includeUpdateMarketStates: !!featureFlags.UPDATE_MARKET_STATE,
-      includeUpdateReferralPrograms: !!featureFlags.REFERRALS,
+      includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
+      includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
+      includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
+      includeUpdateVolumeDiscountPrograms: !!FLAGS.VOLUME_DISCOUNTS,
     },
   });