fix: fixed failing e2e tests, refactored assets page a bit

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

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

@@ -1,150 +1,57 @@
-context('Asset page', { tags: '@regression' }, function () {
-  before('gather system asset information', function () {
-    cy.get_asset_information().as('assetsInfo');
-  });
-
-  describe('Verify elements on page', function () {
-    const assetsNavigation = 'a[href="/assets"]';
-    const assetHeader = '[data-testid="asset-header"]';
-    const jsonSection = '.language-json';
-
-    before('Navigate to assets page', function () {
-      cy.visit('/');
-      cy.get(assetsNavigation).click();
+context('Asset page', { tags: '@regression' }, () => {
+  const columns = ['symbol', 'name', 'id', 'type', 'status', 'actions'];
+  const hiddenOnMobile = ['id', 'type', 'status'];
+  describe('Verify elements on page', () => {
+    before('Navigate to assets page', () => {
+      cy.visit('/assets');
 
       // Check we have enough enough assets
-      const assetNames = Object.keys(this.assetsInfo);
-      assert.isAtLeast(
-        assetNames.length,
-        5,
-        'Ensuring we have at least 5 assets to test'
-      );
-    });
-
-    it('should be able to see assets page sections', function () {
-      const assetNames = Object.keys(this.assetsInfo);
-      assetNames.forEach((assetName) => {
-        cy.get(assetHeader)
-          .contains(assetName)
-          .should('be.visible')
-          .next()
-          .within(() => {
-            cy.get(jsonSection).should('not.be.empty');
-          });
+      cy.getAssets().then((assets) => {
+        assert.isAtLeast(
+          Object.keys(assets).length,
+          5,
+          'Ensuring we have at least 5 assets to test'
+        );
       });
     });
 
-    it('should be able to see all asset details displayed in JSON', function () {
-      const assetNames = Object.keys(this.assetsInfo);
-      assetNames.forEach((assetName) => {
-        cy.get(assetHeader)
-          .contains(assetName)
-          .next()
-          .within(() => {
-            cy.get(jsonSection)
-              .invoke('text')
-              .convert_string_json_to_js_object()
-              .then((assetsListedInJson) => {
-                const assetInfo = this.assetsInfo[assetName];
-
-                assert.equal(assetsListedInJson.name, assetInfo.node.name);
-                assert.equal(assetsListedInJson.id, assetInfo.node.id);
-                assert.equal(
-                  assetsListedInJson.decimals,
-                  assetInfo.node.decimals
-                );
-                assert.equal(assetsListedInJson.symbol, assetInfo.node.symbol);
-                assert.equal(
-                  assetsListedInJson.source.__typename,
-                  assetInfo.node.source.__typename
-                );
-
-                if (assetInfo.node.source.__typename == 'ERC20') {
-                  assert.equal(
-                    assetsListedInJson.source.contractAddress,
-                    assetInfo.node.source.contractAddress
-                  );
-                }
-
-                if (assetInfo.node.source.__typename == 'BuiltinAsset') {
-                  assert.equal(
-                    assetsListedInJson.source.maxFaucetAmountMint,
-                    assetInfo.node.source.maxFaucetAmountMint
-                  );
-                }
-
-                let knownAssetTypes = ['BuiltinAsset', 'ERC20'];
-                assert.include(
-                  knownAssetTypes,
-                  assetInfo.node.source.__typename,
-                  `Checking that current asset type of ${assetInfo.node.source.__typename} /
-                  is one of: ${knownAssetTypes}: /
-                  If fail then we need to add extra tests for un-encountered asset types`
-                );
-              });
-          });
-      });
-    });
-
-    it('should be able to switch assets between light and dark mode', function () {
-      const whiteThemeSelectedMenuOptionColor = 'rgb(255, 7, 127)';
-      const whiteThemeJsonFieldBackColor = 'rgb(255, 255, 255)';
-      const whiteThemeSideMenuBackgroundColor = 'rgb(255, 255, 255)';
-      const darkThemeSelectedMenuOptionColor = 'rgb(215, 251, 80)';
-      const darkThemeJsonFieldBackColor = 'rgb(38, 38, 38)';
-      const darkThemeSideMenuBackgroundColor = 'rgb(0, 0, 0)';
-      const themeSwitcher = '[data-testid="theme-switcher"]';
-      const jsonFields = '.hljs';
-      const sideMenuBackground = '.absolute';
-
-      // Engage dark mode if not allready set
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .then((background_color) => {
-          if (background_color.includes(whiteThemeSideMenuBackgroundColor))
-            cy.get(themeSwitcher).click();
+    it('should be able to see full assets list', () => {
+      cy.getAssets().then((assets) => {
+        Object.values(assets).forEach((asset) => {
+          cy.get(`[row-id="${asset.id}"]`).should('be.visible');
         });
-
-      // Engage white mode
-      cy.get(themeSwitcher).click();
-
-      // White Mode
-      cy.get(assetsNavigation)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeSelectedMenuOptionColor);
-      cy.get(jsonFields)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeJsonFieldBackColor);
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeSideMenuBackgroundColor);
-
-      // Dark Mode
-      cy.get(themeSwitcher).click();
-      cy.get(assetsNavigation)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeSelectedMenuOptionColor);
-      cy.get(jsonFields)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeJsonFieldBackColor);
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeSideMenuBackgroundColor);
+      });
+      columns.forEach((col) => {
+        cy.get(`[col-id="${col}"]`).should('be.visible');
+      });
     });
 
-    it('should be able to see assets page displayed in mobile', function () {
-      cy.common_switch_to_mobile_and_click_toggle();
-      cy.get(assetsNavigation).click();
+    it('should be able to see assets page displayed in mobile', () => {
+      cy.switchToMobile();
 
-      const assetNames = Object.keys(this.assetsInfo);
-      assetNames.forEach((assetName) => {
-        cy.get(assetHeader)
-          .contains(assetName)
-          .should('be.visible')
-          .next()
-          .within(() => {
-            cy.get(jsonSection).should('not.be.empty');
-          });
+      hiddenOnMobile.forEach((col) => {
+        cy.get(`[col-id="${col}"]`).should('have.length', 0);
+      });
+
+      cy.getAssets().then((assets) => {
+        Object.values(assets).forEach((asset) => {
+          cy.get(`[row-id="${asset.id}"]`).should('be.visible');
+        });
+      });
+    });
+
+    it('should open details dialog when clicked on "View details"', () => {
+      cy.getAssets().then((assets) => {
+        Object.values(assets).forEach((asset) => {
+          cy.get(`[row-id="${asset.id}"] [col-id="actions"] button`)
+            .eq(0)
+            .should('contain.text', 'View details');
+          cy.get(`[row-id="${asset.id}"] [col-id="actions"] button`)
+            .eq(0)
+            .click();
+          cy.getByTestId('dialog-content').should('be.visible');
+          cy.getByTestId('dialog-close').click();
+        });
       });
     });
   });

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

@@ -123,7 +123,7 @@ context.skip('Parties page', { tags: '@regression' }, function () {
           .convert_string_json_to_js_object()
           .get_party_accounts_data_from_js_object()
           .then((accountsListedInJson) => {
-            cy.get_asset_information().then((assetsInfo) => {
+            cy.getAssets().then((assetsInfo) => {
               const assetInfo =
                 assetsInfo[accountsListedInJson[assetInTest].asset.name];
 
@@ -205,7 +205,7 @@ context.skip('Parties page', { tags: '@regression' }, function () {
     });
 
     Cypress.Commands.add('get_asset_decimals', (assetID) => {
-      cy.get_asset_information().then((assetsInfo) => {
+      cy.getAssets().then((assetsInfo) => {
         const assetDecimals = assetsInfo[assetData[assetID].name].decimals;
         let decimals = '';
         for (let i = 0; i < assetDecimals; i++) decimals += '0';

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

@@ -21,6 +21,10 @@ Cypress.Commands.add(
   }
 );
 
+Cypress.Commands.add('switchToMobile', () => {
+  cy.viewport('iphone-x');
+});
+
 Cypress.Commands.add('common_switch_to_mobile_and_click_toggle', function () {
   cy.viewport('iphone-x');
   cy.visit('/');

apps/explorer/src/app/app.tsx

@@ -9,6 +9,23 @@ import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-web
 import type { InMemoryCacheConfig } from '@apollo/client';
 import { Footer } from './components/footer/footer';
 import { AnnouncementBanner, ExternalLink } from '@vegaprotocol/ui-toolkit';
+import {
+  AssetDetailsDialog,
+  useAssetDetailsDialogStore,
+} from '@vegaprotocol/assets';
+
+const DialogsContainer = () => {
+  const { isOpen, id, trigger, asJson, setOpen } = useAssetDetailsDialogStore();
+  return (
+    <AssetDetailsDialog
+      assetId={id}
+      trigger={trigger || null}
+      asJson={asJson}
+      open={isOpen}
+      onChange={setOpen}
+    />
+  );
+};
 
 function App() {
   const [menuOpen, setMenuOpen] = useState(false);
@@ -56,6 +73,8 @@ function App() {
           <Main />
           <Footer />
         </div>
+
+        <DialogsContainer />
       </NetworkLoader>
     </TendermintWebsocketProvider>
   );

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

@@ -1,6 +1,6 @@
+import { useAssetDataProvider } from '@vegaprotocol/assets';
 import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
 import { AssetLink } from '../links';
-import { useExplorerAssetQuery } from '../links/asset-link/__generated__/Asset';
 
 export type AssetBalanceProps = {
   assetId: string;
@@ -17,21 +17,17 @@ const AssetBalance = ({
   price,
   showAssetLink = true,
 }: AssetBalanceProps) => {
-  const { data } = useExplorerAssetQuery({
-    variables: { id: assetId },
-  });
+  const { data: asset } = useAssetDataProvider(assetId);
 
   const label =
-    data && data.asset?.decimals
-      ? addDecimalsFormatNumber(price, data.asset.decimals)
+    asset && asset.decimals
+      ? addDecimalsFormatNumber(price, asset.decimals)
       : price;
 
   return (
     <div className="inline-block">
       <span>{label}</span>{' '}
-      {showAssetLink && data?.asset?.id ? (
-        <AssetLink id={data.asset.id} />
-      ) : null}
+      {showAssetLink && asset?.id ? <AssetLink assetId={assetId} /> : null}
     </div>
   );
 };

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

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

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

@@ -0,0 +1,115 @@
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
+import { AssetTypeMapping, AssetStatusMapping } from '@vegaprotocol/assets';
+import { t } from '@vegaprotocol/react-helpers';
+import type { VegaICellRendererParams } from '@vegaprotocol/ui-toolkit';
+import { ButtonLink } from '@vegaprotocol/ui-toolkit';
+import type { AgGridReact } from 'ag-grid-react';
+import { AgGridColumn } from 'ag-grid-react';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
+import { useRef, useLayoutEffect } from 'react';
+import { BREAKPOINT_MD } from '../../config/breakpoints';
+
+type AssetsTableProps = {
+  data: AssetFieldsFragment[] | null;
+};
+export const AssetsTable = ({ data }: AssetsTableProps) => {
+  const openAssetDetailsDialog = useAssetDetailsDialogStore(
+    (state) => state.open
+  );
+
+  const ref = useRef<AgGridReact>(null);
+  const showColumnsOnDesktop = () => {
+    ref.current?.columnApi.setColumnsVisible(
+      ['id', 'type', 'status'],
+      window.innerWidth > BREAKPOINT_MD
+    );
+  };
+
+  useLayoutEffect(() => {
+    window.addEventListener('resize', showColumnsOnDesktop);
+    return () => {
+      window.removeEventListener('resize', showColumnsOnDesktop);
+    };
+  }, []);
+
+  return (
+    <AgGrid
+      ref={ref}
+      rowData={data}
+      getRowId={({ data }: { data: AssetFieldsFragment }) => data.id}
+      overlayNoRowsTemplate={t('This chain has no assets')}
+      domLayout="autoHeight"
+      defaultColDef={{
+        flex: 1,
+        resizable: true,
+        sortable: true,
+        filter: true,
+        filterParams: { buttons: ['reset'] },
+        autoHeight: true,
+      }}
+      suppressCellFocus={true}
+      onGridReady={() => {
+        showColumnsOnDesktop();
+      }}
+    >
+      <AgGridColumn headerName={t('Symbol')} field="symbol" />
+      <AgGridColumn headerName={t('Name')} field="name" />
+      <AgGridColumn flex="2" headerName={t('ID')} field="id" />
+      <AgGridColumn
+        colId="type"
+        headerName={t('Type')}
+        field="source.__typename"
+        valueFormatter={({ value }: { value?: string }) =>
+          value && AssetTypeMapping[value].value
+        }
+      />
+      <AgGridColumn
+        headerName={t('Status')}
+        field="status"
+        valueFormatter={({ value }: { value?: string }) =>
+          value && AssetStatusMapping[value].value
+        }
+      />
+      <AgGridColumn
+        colId="actions"
+        headerName=""
+        sortable={false}
+        filter={false}
+        resizable={false}
+        wrapText={true}
+        field="id"
+        cellRenderer={({
+          value,
+        }: VegaICellRendererParams<AssetFieldsFragment, 'id'>) =>
+          value ? (
+            <div className="pb-1">
+              <ButtonLink
+                onClick={(e) => {
+                  openAssetDetailsDialog(value, e.target as HTMLElement);
+                }}
+              >
+                {t('View details')}
+              </ButtonLink>{' '}
+              <span className="max-md:hidden">
+                <ButtonLink
+                  onClick={(e) => {
+                    openAssetDetailsDialog(
+                      value,
+                      e.target as HTMLElement,
+                      true
+                    );
+                  }}
+                >
+                  {t('View JSON')}
+                </ButtonLink>
+              </span>
+            </div>
+          ) : (
+            ''
+          )
+        }
+      />
+    </AgGrid>
+  );
+};

apps/explorer/src/app/components/links/asset-link/Asset.graphql

@@ -1,8 +0,0 @@
-query ExplorerAsset($id: ID!) {
-  asset(id: $id) {
-    id
-    name
-    status
-    decimals
-  }
-}

apps/explorer/src/app/components/links/asset-link/__generated__/Asset.ts

@@ -1,51 +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 ExplorerAssetQueryVariables = Types.Exact<{
-  id: Types.Scalars['ID'];
-}>;
-
-
-export type ExplorerAssetQuery = { __typename?: 'Query', asset?: { __typename?: 'Asset', id: string, name: string, status: Types.AssetStatus, decimals: number } | null };
-
-
-export const ExplorerAssetDocument = gql`
-    query ExplorerAsset($id: ID!) {
-  asset(id: $id) {
-    id
-    name
-    status
-    decimals
-  }
-}
-    `;
-
-/**
- * __useExplorerAssetQuery__
- *
- * To run a query within a React component, call `useExplorerAssetQuery` and pass it any options that fit your needs.
- * When your component renders, `useExplorerAssetQuery` 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 } = useExplorerAssetQuery({
- *   variables: {
- *      id: // value for 'id'
- *   },
- * });
- */
-export function useExplorerAssetQuery(baseOptions: Apollo.QueryHookOptions<ExplorerAssetQuery, ExplorerAssetQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ExplorerAssetQuery, ExplorerAssetQueryVariables>(ExplorerAssetDocument, options);
-      }
-export function useExplorerAssetLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerAssetQuery, ExplorerAssetQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ExplorerAssetQuery, ExplorerAssetQueryVariables>(ExplorerAssetDocument, options);
-        }
-export type ExplorerAssetQueryHookResult = ReturnType<typeof useExplorerAssetQuery>;
-export type ExplorerAssetLazyQueryHookResult = ReturnType<typeof useExplorerAssetLazyQuery>;
-export type ExplorerAssetQueryResult = Apollo.QueryResult<ExplorerAssetQuery, ExplorerAssetQueryVariables>;

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

@@ -1,63 +1,37 @@
 import { MemoryRouter } from 'react-router-dom';
 import { MockedProvider } from '@apollo/client/testing';
 import type { MockedResponse } from '@apollo/client/testing';
-import { render } from '@testing-library/react';
-import AssetLink from './asset-link';
-import { ExplorerAssetDocument } from './__generated__/Asset';
+import { render, waitFor } from '@testing-library/react';
+import { AssetLink } from './asset-link';
+import { mockAssetA1 } from '../../../mocks/assets';
 
 function renderComponent(id: string, mock: MockedResponse[]) {
   return (
-    <MockedProvider mocks={mock}>
+    <MockedProvider mocks={mock} addTypename={false}>
       <MemoryRouter>
-        <AssetLink id={id} />
+        <AssetLink assetId={id} />
       </MemoryRouter>
     </MockedProvider>
   );
 }
 
-describe('Asset link component', () => {
-  it('Renders the ID at first', () => {
+describe('AssetLink', () => {
+  it('renders the asset id when not found and makes the button disabled', async () => {
     const res = render(renderComponent('123', []));
     expect(res.getByText('123')).toBeInTheDocument();
+    expect(await res.findByTestId('asset-link')).toBeDisabled();
+    await waitFor(async () => {
+      expect(await res.queryByText('A ONE')).toBeFalsy();
+    });
   });
 
-  it('Renders the asset name when the query returns a result', async () => {
-    const mock = {
-      request: {
-        query: ExplorerAssetDocument,
-        variables: {
-          id: '123',
-        },
-      },
-      result: {
-        data: {
-          asset: {
-            id: '123',
-            name: 'test-label',
-            status: 'irrelevant-test-data',
-            decimals: 18,
-          },
-        },
-      },
-    };
-
-    const res = render(renderComponent('123', [mock]));
+  it('renders the asset name when found and make the button enabled', async () => {
+    const res = render(renderComponent('123', [mockAssetA1]));
     expect(res.getByText('123')).toBeInTheDocument();
-    expect(await res.findByText('test-label')).toBeInTheDocument();
-  });
 
-  it('Leaves the asset id when the asset is not found', async () => {
-    const mock = {
-      request: {
-        query: ExplorerAssetDocument,
-        variables: {
-          id: '123',
-        },
-      },
-      error: new Error('No such asset'),
-    };
-
-    const res = render(renderComponent('123', [mock]));
-    expect(await res.findByText('123')).toBeInTheDocument();
+    await waitFor(async () => {
+      expect(await res.findByText('A ONE')).toBeInTheDocument();
+      expect(await res.findByTestId('asset-link')).not.toBeDisabled();
+    });
   });
 });

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

@@ -1,36 +1,35 @@
-import React from 'react';
-import { Routes } from '../../../routes/route-names';
-import { useExplorerAssetQuery } from './__generated__/Asset';
-import { Link } from 'react-router-dom';
-
 import type { ComponentProps } from 'react';
 import Hash from '../hash';
+import { ButtonLink } from '@vegaprotocol/ui-toolkit';
+import {
+  useAssetDataProvider,
+  useAssetDetailsDialogStore,
+} from '@vegaprotocol/assets';
 
-export type AssetLinkProps = Partial<ComponentProps<typeof Link>> & {
-  id: string;
+export type AssetLinkProps = Partial<ComponentProps<typeof ButtonLink>> & {
+  assetId: string;
 };
 
 /**
  * Given an asset ID, it will fetch the asset name and show that,
- * with a link to the assets list. If the name does not come back
+ * with a link to the assets modal. If the name does not come back
  * it will use the ID instead.
  */
-const AssetLink = ({ id, ...props }: AssetLinkProps) => {
-  const { data } = useExplorerAssetQuery({
-    variables: { id },
-  });
-
-  let label: string = id;
-
-  if (data?.asset?.name) {
-    label = data.asset.name;
-  }
+export const AssetLink = ({ assetId, ...props }: AssetLinkProps) => {
+  const { data: asset } = useAssetDataProvider(assetId);
 
+  const open = useAssetDetailsDialogStore((state) => state.open);
+  const label = asset?.name ? asset.name : assetId;
   return (
-    <Link className="underline" {...props} to={`/${Routes.ASSETS}#${id}`}>
+    <ButtonLink
+      data-testid="asset-link"
+      disabled={!asset}
+      onClick={(e) => {
+        open(assetId, e.target as HTMLElement);
+      }}
+      {...props}
+    >
       <Hash text={label} />
-    </Link>
+    </ButtonLink>
   );
 };
-
-export default AssetLink;

apps/explorer/src/app/components/links/index.ts

@@ -2,4 +2,4 @@ export { default as BlockLink } from './block-link/block-link';
 export { default as PartyLink } from './party-link/party-link';
 export { default as NodeLink } from './node-link/node-link';
 export { default as MarketLink } from './market-link/market-link';
-export { default as AssetLink } from './asset-link/asset-link';
+export * from './asset-link/asset-link';

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

@@ -76,9 +76,7 @@ describe('Chain Event: Builtin asset deposit', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('A');
-    expect(assetLink.parentElement.getAttribute('href')).toEqual(
-      `/assets#${fullMock.vegaAssetId}`
-    );
+    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
+    expect(assetLink.parentElement.textContent).toEqual(fullMock.vegaAssetId);
   });
 });

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

@@ -34,7 +34,7 @@ export const TxDetailsChainEventBuiltinDeposit = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Asset')}</TableCell>
         <TableCell>
-          <AssetLink id={deposit.vegaAssetId} /> ({t('built in asset')})
+          <AssetLink assetId={deposit.vegaAssetId} /> ({t('built in asset')})
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">

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

@@ -82,9 +82,7 @@ describe('Chain Event: Builtin asset withdrawal', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('A');
-    expect(assetLink.parentElement.getAttribute('href')).toEqual(
-      `/assets#${fullMock.vegaAssetId}`
-    );
+    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
+    expect(assetLink.parentElement.textContent).toEqual(fullMock.vegaAssetId);
   });
 });

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

@@ -39,8 +39,8 @@ export const TxDetailsChainEventBuiltinWithdrawal = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Asset')}</TableCell>
         <TableCell>
-          <AssetLink id={withdrawal.vegaAssetId || ''} /> ({t('built in asset')}
-          )
+          <AssetLink assetId={withdrawal.vegaAssetId || ''} /> (
+          {t('built in asset')})
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">

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

@@ -63,9 +63,7 @@ describe('Chain Event: ERC20 Asset Delist', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('A');
-    expect(assetLink.parentElement.getAttribute('href')).toEqual(
-      `/assets#${fullMock.vegaAssetId}`
-    );
+    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
+    expect(assetLink.parentElement.textContent).toEqual(fullMock.vegaAssetId);
   });
 });

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-asset-delist.tsx

@@ -29,7 +29,7 @@ export const TxDetailsChainEventErc20AssetDelist = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Removed Vega asset')}</TableCell>
         <TableCell>
-          <AssetLink id={assetDelist.vegaAssetId || ''} />
+          <AssetLink assetId={assetDelist.vegaAssetId || ''} />
         </TableCell>
       </TableRow>
     </>

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

@@ -79,10 +79,8 @@ describe('Chain Event: ERC20 Asset limits updated', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('A');
-    expect(assetLink.parentElement.getAttribute('href')).toEqual(
-      `/assets#${fullMock.vegaAssetId}`
-    );
+    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
+    expect(assetLink.parentElement.textContent).toEqual(fullMock.vegaAssetId);
 
     expect(screen.getByText(t('ERC20 asset'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.sourceEthereumAddress}`);

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-asset-limits-updated.tsx

@@ -51,7 +51,7 @@ export const TxDetailsChainEventErc20AssetLimitsUpdated = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Vega asset')}</TableCell>
         <TableCell>
-          <AssetLink id={assetLimitsUpdated.vegaAssetId} />
+          <AssetLink assetId={assetLimitsUpdated.vegaAssetId} />
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">

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

@@ -65,10 +65,8 @@ describe('Chain Event: ERC20 Asset List', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('A');
-    expect(assetLink.parentElement.getAttribute('href')).toEqual(
-      `/assets#${fullMock.vegaAssetId}`
-    );
+    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
+    expect(assetLink.parentElement.textContent).toEqual(fullMock.vegaAssetId);
 
     expect(screen.getByText(t('Source'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.assetSource}`);

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-asset-list.tsx

@@ -41,7 +41,7 @@ export const TxDetailsChainEventErc20AssetList = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Added Vega asset')}</TableCell>
         <TableCell>
-          <AssetLink id={assetList.vegaAssetId} />
+          <AssetLink assetId={assetList.vegaAssetId} />
         </TableCell>
       </TableRow>
     </>

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

@@ -75,10 +75,8 @@ describe('Chain Event: ERC20 asset deposit', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('A');
-    expect(assetLink.parentElement.getAttribute('href')).toEqual(
-      `/assets#${fullMock.vegaAssetId}`
-    );
+    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
+    expect(assetLink.parentElement.textContent).toEqual(fullMock.vegaAssetId);
 
     expect(screen.getByText(t('Source'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.sourceEthereumAddress}`);

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

@@ -51,7 +51,7 @@ export const TxDetailsChainEventDeposit = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Asset')}</TableCell>
         <TableCell>
-          <AssetLink id={deposit.vegaAssetId} />
+          <AssetLink assetId={deposit.vegaAssetId} />
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">

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

@@ -60,10 +60,8 @@ describe('Chain Event: ERC20 asset deposit', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('A');
-    expect(assetLink.parentElement.getAttribute('href')).toEqual(
-      `/assets#${fullMock.vegaAssetId}`
-    );
+    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
+    expect(assetLink.parentElement.textContent).toEqual(fullMock.vegaAssetId);
 
     expect(screen.getByText(t('Recipient'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.targetEthereumAddress}`);

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

@@ -45,7 +45,7 @@ export const TxDetailsChainEventWithdrawal = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Asset')}</TableCell>
         <TableCell>
-          <AssetLink id={withdrawal.vegaAssetId} />
+          <AssetLink assetId={withdrawal.vegaAssetId} />
         </TableCell>
       </TableRow>
     </>

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

@@ -0,0 +1,4 @@
+/**
+ * Equivalent of tailwind's `md` modifier
+ */
+export const BREAKPOINT_MD = 768;

apps/explorer/src/app/mocks/assets.ts

@@ -0,0 +1,134 @@
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+import { AssetDocument } from '@vegaprotocol/assets';
+import { AssetsDocument } from '@vegaprotocol/assets';
+import { AssetStatus } from '@vegaprotocol/types';
+
+const A1: AssetFieldsFragment = {
+  __typename: 'Asset',
+  id: '123',
+  name: 'A ONE',
+  symbol: 'A1',
+  decimals: 0,
+  quantum: '',
+  status: AssetStatus.STATUS_ENABLED,
+  source: {
+    __typename: 'BuiltinAsset',
+    maxFaucetAmountMint: '',
+  },
+  infrastructureFeeAccount: {
+    __typename: 'AccountBalance',
+    balance: '',
+  },
+  globalRewardPoolAccount: {
+    __typename: 'AccountBalance',
+    balance: '',
+  },
+  lpFeeRewardAccount: {
+    __typename: 'AccountBalance',
+    balance: '',
+  },
+  makerFeeRewardAccount: {
+    __typename: 'AccountBalance',
+    balance: '',
+  },
+  marketProposerRewardAccount: {
+    __typename: 'AccountBalance',
+    balance: '',
+  },
+  takerFeeRewardAccount: {
+    __typename: 'AccountBalance',
+    balance: '',
+  },
+};
+
+const A2: AssetFieldsFragment = {
+  __typename: 'Asset',
+  id: '456',
+  name: 'A TWO',
+  symbol: 'A2',
+  decimals: 0,
+  quantum: '',
+  status: AssetStatus.STATUS_ENABLED,
+  source: {
+    __typename: 'BuiltinAsset',
+    maxFaucetAmountMint: '',
+  },
+  infrastructureFeeAccount: {
+    __typename: 'AccountBalance',
+    balance: '',
+  },
+  globalRewardPoolAccount: {
+    __typename: 'AccountBalance',
+    balance: '',
+  },
+  lpFeeRewardAccount: {
+    __typename: 'AccountBalance',
+    balance: '',
+  },
+  makerFeeRewardAccount: {
+    __typename: 'AccountBalance',
+    balance: '',
+  },
+  marketProposerRewardAccount: {
+    __typename: 'AccountBalance',
+    balance: '',
+  },
+  takerFeeRewardAccount: {
+    __typename: 'AccountBalance',
+    balance: '',
+  },
+};
+
+export const assetsList = [A1, A2];
+
+export const mockAssetsList = {
+  request: {
+    query: AssetsDocument,
+  },
+  result: {
+    data: {
+      assetsConnection: {
+        __typename: 'AssetsConnection',
+        edges: [
+          {
+            __typename: 'AssetEdge',
+            node: A1,
+          },
+          {
+            __typename: 'AssetEdge',
+            node: A2,
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const mockEmptyAssetsList = {
+  request: {
+    query: AssetsDocument,
+  },
+  result: { data: null },
+};
+
+export const mockAssetA1 = {
+  request: {
+    query: AssetDocument,
+    variables: {
+      assetId: '123',
+    },
+  },
+  result: {
+    data: {
+      assetsConnection: {
+        __typename: 'AssetsConnection',
+        edges: [
+          {
+            __typename: 'AssetEdge',
+            node: A1,
+          },
+        ],
+      },
+    },
+  },
+};

apps/explorer/src/app/routes/assets/Assets.graphql

@@ -1,32 +0,0 @@
-fragment AssetsFields on Asset {
-  id
-  name
-  symbol
-  decimals
-  source {
-    ... on ERC20 {
-      contractAddress
-    }
-    ... on BuiltinAsset {
-      maxFaucetAmountMint
-    }
-  }
-
-  infrastructureFeeAccount {
-    type
-    balance
-    market {
-      id
-    }
-  }
-}
-
-query ExplorerAssets {
-  assetsConnection {
-    edges {
-      node {
-        ...AssetsFields
-      }
-    }
-  }
-}

apps/explorer/src/app/routes/assets/__generated__/Assets.ts

@@ -1,73 +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 AssetsFieldsFragment = { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string }, infrastructureFeeAccount?: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, market?: { __typename?: 'Market', id: string } | null } | null };
-
-export type ExplorerAssetsQueryVariables = Types.Exact<{ [key: string]: never; }>;
-
-
-export type ExplorerAssetsQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string }, infrastructureFeeAccount?: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, market?: { __typename?: 'Market', id: string } | null } | null } } | null> | null } | null };
-
-export const AssetsFieldsFragmentDoc = gql`
-    fragment AssetsFields on Asset {
-  id
-  name
-  symbol
-  decimals
-  source {
-    ... on ERC20 {
-      contractAddress
-    }
-    ... on BuiltinAsset {
-      maxFaucetAmountMint
-    }
-  }
-  infrastructureFeeAccount {
-    type
-    balance
-    market {
-      id
-    }
-  }
-}
-    `;
-export const ExplorerAssetsDocument = gql`
-    query ExplorerAssets {
-  assetsConnection {
-    edges {
-      node {
-        ...AssetsFields
-      }
-    }
-  }
-}
-    ${AssetsFieldsFragmentDoc}`;
-
-/**
- * __useExplorerAssetsQuery__
- *
- * To run a query within a React component, call `useExplorerAssetsQuery` and pass it any options that fit your needs.
- * When your component renders, `useExplorerAssetsQuery` 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 } = useExplorerAssetsQuery({
- *   variables: {
- *   },
- * });
- */
-export function useExplorerAssetsQuery(baseOptions?: Apollo.QueryHookOptions<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>(ExplorerAssetsDocument, options);
-      }
-export function useExplorerAssetsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>(ExplorerAssetsDocument, options);
-        }
-export type ExplorerAssetsQueryHookResult = ReturnType<typeof useExplorerAssetsQuery>;
-export type ExplorerAssetsLazyQueryHookResult = ReturnType<typeof useExplorerAssetsLazyQuery>;
-export type ExplorerAssetsQueryResult = Apollo.QueryResult<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>;

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

@@ -0,0 +1,30 @@
+import { t } from '@vegaprotocol/react-helpers';
+import { RouteTitle } from '../../components/route-title';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { useScrollToLocation } from '../../hooks/scroll-to-location';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+import { useAssetsDataProvider } from '@vegaprotocol/assets';
+import { AssetsTable } from '../../components/assets/assets-table';
+
+export const Assets = () => {
+  useDocumentTitle(['Assets']);
+  useScrollToLocation();
+
+  const { data, loading, error } = useAssetsDataProvider();
+
+  return (
+    <section>
+      <RouteTitle data-testid="assets-header">{t('Assets')}</RouteTitle>
+      <AsyncRenderer
+        noDataMessage={t('This chain has no assets')}
+        data={data}
+        loading={loading}
+        error={error}
+      >
+        <div className="h-full relative">
+          <AssetsTable data={data} />
+        </div>
+      </AsyncRenderer>
+    </section>
+  );
+};

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

@@ -1,44 +0,0 @@
-import { MockedProvider } from '@apollo/client/testing';
-import { render } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import Assets from './index';
-import type { MockedResponse } from '@apollo/client/testing';
-import { ExplorerAssetDocument } from '../../components/links/asset-link/__generated__/Asset';
-
-function renderComponent(mock: MockedResponse[]) {
-  return (
-    <MemoryRouter>
-      <MockedProvider mocks={mock}>
-        <Assets />
-      </MockedProvider>
-    </MemoryRouter>
-  );
-}
-
-describe('Assets index', () => {
-  it('Renders loader when loading', async () => {
-    const mock = {
-      request: {
-        query: ExplorerAssetDocument,
-      },
-      result: {
-        data: {},
-      },
-    };
-    const res = render(renderComponent([mock]));
-    expect(await res.findByTestId('loader')).toBeInTheDocument();
-  });
-
-  it('Renders EmptyList when loading completes and there are no results', async () => {
-    const mock = {
-      request: {
-        query: ExplorerAssetDocument,
-      },
-      result: {
-        data: {},
-      },
-    };
-    const res = render(renderComponent([mock]));
-    expect(await res.findByTestId('emptylist')).toBeInTheDocument();
-  });
-});

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

@@ -1,53 +1 @@
-import { getNodes, t } from '@vegaprotocol/react-helpers';
-import React from 'react';
-import { RouteTitle } from '../../components/route-title';
-import { SubHeading } from '../../components/sub-heading';
-import { Loader, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
-import { useExplorerAssetsQuery } from './__generated__/Assets';
-import type { AssetsFieldsFragment } from './__generated__/Assets';
-import { useScrollToLocation } from '../../hooks/scroll-to-location';
-import { useDocumentTitle } from '../../hooks/use-document-title';
-import EmptyList from '../../components/empty-list/empty-list';
-
-const Assets = () => {
-  const { data, loading } = useExplorerAssetsQuery();
-  useDocumentTitle(['Assets']);
-
-  useScrollToLocation();
-
-  const assets = getNodes<AssetsFieldsFragment>(data?.assetsConnection);
-
-  if (!assets || assets.length === 0) {
-    if (!loading) {
-      return (
-        <section>
-          <RouteTitle data-testid="assets-header">{t('Assets')}</RouteTitle>
-          <EmptyList
-            heading={t('This chain has no assets')}
-            label={t('0 assets')}
-          />
-        </section>
-      );
-    } else {
-      return <Loader />;
-    }
-  }
-
-  return (
-    <section>
-      <RouteTitle data-testid="assets-header">{t('Assets')}</RouteTitle>
-      {assets.map((a) => {
-        return (
-          <React.Fragment key={a.id}>
-            <SubHeading data-testid="asset-header" id={a.id}>
-              {a.name} ({a.symbol})
-            </SubHeading>
-            <SyntaxHighlighter data={a} />
-          </React.Fragment>
-        );
-      })}
-    </section>
-  );
-};
-
-export default Assets;
+export * from './assets';

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

@@ -71,7 +71,7 @@ export const PartyAccounts = ({ accounts }: PartyAccountsProps) => {
                 />
               </td>
               <td className="text-md">
-                <AssetLink id={account.asset.id} />
+                <AssetLink assetId={account.asset.id} />
               </td>
             </TableRow>
           );

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

@@ -1,4 +1,4 @@
-import Assets from './assets';
+import { Assets } from './assets';
 import BlockPage from './blocks';
 import Governance from './governance';
 import Home from './home';

apps/explorer/tailwind.config.js

@@ -1,9 +1,6 @@
 const { join } = require('path');
 const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
 const theme = require('../../libs/tailwindcss-config/src/theme');
-const {
-  VegaColours,
-} = require('../../libs/tailwindcss-config/src/vega-colours');
 const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
 
 module.exports = {
@@ -14,12 +11,7 @@ module.exports = {
   ],
   darkMode: 'class',
   theme: {
-    extend: {
-      ...theme,
-      colors: {
-        vega: VegaColours,
-      },
-    },
+    extend: theme,
   },
   plugins: [vegaCustomClasses],
 };

libs/assets/src/lib/asset-data-provider.ts

@@ -6,7 +6,7 @@ import { AssetDocument } from './__generated__/Asset';
 
 export type Asset = AssetFieldsFragment;
 
-const getData = (responseData: AssetQuery | null) => {
+export const getData = (responseData: AssetQuery | null | undefined) => {
   const foundAssets = responseData?.assetsConnection?.edges
     ?.filter((e) => Boolean(e?.node))
     .map((e) => e?.node as Asset);

libs/assets/src/lib/asset-details-dialog.tsx

@@ -1,6 +1,12 @@
 import { t } from '@vegaprotocol/react-helpers';
 import { useAssetsDataProvider } from './assets-data-provider';
-import { Button, Dialog, Icon, Splash } from '@vegaprotocol/ui-toolkit';
+import {
+  Button,
+  Dialog,
+  Icon,
+  Splash,
+  SyntaxHighlighter,
+} from '@vegaprotocol/ui-toolkit';
 import { create } from 'zustand';
 import { AssetDetailsTable } from './asset-details-table';
 import { AssetProposalNotification } from '@vegaprotocol/governance';
@@ -9,8 +15,9 @@ export type AssetDetailsDialogStore = {
   isOpen: boolean;
   id: string;
   trigger: HTMLElement | null | undefined;
+  asJson: boolean;
   setOpen: (isOpen: boolean) => void;
-  open: (id: string, trigger?: HTMLElement | null) => void;
+  open: (id: string, trigger?: HTMLElement | null, asJson?: boolean) => void;
 };
 
 export const useAssetDetailsDialogStore = create<AssetDetailsDialogStore>(
@@ -18,14 +25,16 @@ export const useAssetDetailsDialogStore = create<AssetDetailsDialogStore>(
     isOpen: false,
     id: '',
     trigger: null,
+    asJson: false,
     setOpen: (isOpen) => {
       set({ isOpen: isOpen });
     },
-    open: (id, trigger?) => {
+    open: (id, trigger?, asJson = false) => {
       set({
         isOpen: true,
         id,
         trigger,
+        asJson,
       });
     },
   })
@@ -36,6 +45,7 @@ export interface AssetDetailsDialogProps {
   trigger?: HTMLElement | null;
   open: boolean;
   onChange: (open: boolean) => void;
+  asJson?: boolean;
 }
 
 export const AssetDetailsDialog = ({
@@ -43,6 +53,7 @@ export const AssetDetailsDialog = ({
   trigger,
   open,
   onChange,
+  asJson = false,
 }: AssetDetailsDialogProps) => {
   const { data } = useAssetsDataProvider();
 
@@ -51,7 +62,13 @@ export const AssetDetailsDialog = ({
   const content = asset ? (
     <div className="my-2">
       <AssetProposalNotification assetId={asset.id} />
-      <AssetDetailsTable asset={asset} />
+      {asJson ? (
+        <div className="pr-8">
+          <SyntaxHighlighter size="smaller" data={asset} />
+        </div>
+      ) : (
+        <AssetDetailsTable asset={asset} />
+      )}
     </div>
   ) : (
     <div className="py-12" data-testid="splash">

libs/assets/src/lib/asset-details-table.tsx

@@ -2,6 +2,7 @@ import { useEtherscanLink } from '@vegaprotocol/environment';
 import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers';
 import type * as Schema from '@vegaprotocol/types';
 import type { KeyValueTableRowProps } from '@vegaprotocol/ui-toolkit';
+import { CopyWithTooltip, Icon } from '@vegaprotocol/ui-toolkit';
 import { Link } from '@vegaprotocol/ui-toolkit';
 import {
   KeyValueTable,
@@ -105,7 +106,16 @@ export const rows: Rows = [
         return;
       }
 
-      return <ContractAddressLink address={asset.source.contractAddress} />;
+      return (
+        <>
+          <ContractAddressLink address={asset.source.contractAddress} />{' '}
+          <CopyWithTooltip text={asset.source.contractAddress}>
+            <button title={t('Copy address to clipboard')}>
+              <Icon size={3} name="duplicate" />
+            </button>
+          </CopyWithTooltip>
+        </>
+      );
     },
   },
   {
@@ -180,7 +190,7 @@ export const rows: Rows = [
   },
 ];
 
-const AssetStatusMapping: Mapping = {
+export const AssetStatusMapping: Mapping = {
   STATUS_ENABLED: {
     value: t('Enabled'),
     tooltip: t('Asset can be used on the Vega network'),
@@ -199,7 +209,7 @@ const AssetStatusMapping: Mapping = {
   },
 };
 
-const AssetTypeMapping: Mapping = {
+export const AssetTypeMapping: Mapping = {
   BuiltinAsset: {
     value: 'Builtin asset',
     tooltip: t('A Vega builtin asset'),
@@ -274,7 +284,7 @@ const ContractAddressLink = ({ address }: { address: string }) => {
   const etherscanLink = useEtherscanLink();
   const href = etherscanLink(`/address/${address}`);
   return (
-    <Link href={href} target="_blank">
+    <Link href={href} target="_blank" title={t('View on etherscan')}>
       {address}
     </Link>
   );

libs/cypress/src/index.ts

@@ -5,7 +5,7 @@ import { addMockWalletCommand } from './lib/mock-rest';
 import { addMockWeb3ProviderCommand } from './lib/commands/mock-web3-provider';
 import { addSlackCommand } from './lib/commands/slack';
 import { addHighlightLog } from './lib/commands/highlight-log';
-import { addGetAssetInformation } from './lib/commands/get-asset-information';
+import { addGetAssets } from './lib/commands/get-assets';
 import { addVegaWalletReceiveFaucetedAsset } from './lib/commands/vega-wallet-receive-fauceted-asset';
 import { addContainsExactly } from './lib/commands/contains-exactly';
 import { addGetNetworkParameters } from './lib/commands/get-network-parameters';
@@ -26,7 +26,7 @@ addMockWalletCommand();
 addMockWeb3ProviderCommand();
 addHighlightLog();
 addVegaWalletReceiveFaucetedAsset();
-addGetAssetInformation();
+addGetAssets();
 addContainsExactly();
 addGetNetworkParameters();
 addUpdateCapsuleMultiSig();

libs/cypress/src/lib/commands/get-asset-information.ts

@@ -1,38 +0,0 @@
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace Cypress {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    interface Chainable<Subject> {
-      get_asset_information(): void;
-    }
-  }
-}
-
-export function addGetAssetInformation() {
-  // @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
-  Cypress.Commands.add('get_asset_information', () => {
-    const mutation =
-      '{ assetsConnection{edges{node{name id symbol decimals source{__typename \
-        ... on ERC20{contractAddress} \
-        ... on BuiltinAsset{maxFaucetAmountMint}} \
-        infrastructureFeeAccount{__typename type balance} \
-        globalRewardPoolAccount {balance}}}}}';
-    cy.request({
-      method: 'POST',
-      url: `http://localhost:3028/query`,
-      body: {
-        query: mutation,
-      },
-      headers: { 'content-type': 'application/json' },
-    })
-      .its('body.data.assetsConnection.edges')
-      .then(function (response) {
-        // @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
-        const object = response.reduce(function (assets, entry) {
-          assets[entry.node.name] = entry;
-          return assets;
-        }, {});
-        return object;
-      });
-  });
-}

libs/cypress/src/lib/commands/get-assets.ts

@@ -0,0 +1,83 @@
+import { gql } from '@apollo/client';
+import { print } from 'graphql';
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Chainable<Subject> {
+      getAssets(): Chainable<Record<string, AssetFieldsFragment>>;
+    }
+  }
+}
+
+export function addGetAssets() {
+  // @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
+  Cypress.Commands.add('getAssets', () => {
+    // TODO: Investigate why importing here an actual AssetsDocument fails and
+    // causes cypress's webpack to go bonkers
+    const query = gql`
+      query Assets {
+        assetsConnection {
+          edges {
+            node {
+              id
+              name
+              symbol
+              decimals
+              quantum
+              source {
+                __typename
+                ... on ERC20 {
+                  contractAddress
+                  lifetimeLimit
+                  withdrawThreshold
+                }
+                ... on BuiltinAsset {
+                  maxFaucetAmountMint
+                }
+              }
+              status
+              infrastructureFeeAccount {
+                balance
+              }
+              globalRewardPoolAccount {
+                balance
+              }
+              takerFeeRewardAccount {
+                balance
+              }
+              makerFeeRewardAccount {
+                balance
+              }
+              lpFeeRewardAccount {
+                balance
+              }
+              marketProposerRewardAccount {
+                balance
+              }
+            }
+          }
+        }
+      }
+    `;
+
+    cy.request({
+      method: 'POST',
+      url: 'http://localhost:3028/query',
+      body: {
+        query: print(query),
+      },
+      headers: { 'content-type': 'application/json' },
+    })
+      .its('body.data.assetsConnection.edges')
+      .then((edges) => {
+        // @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
+        return edges.reduce((list, edge) => {
+          list[edge.node.name] = edge.node;
+          return list;
+        }, {});
+      });
+  });
+}

libs/cypress/src/lib/commands/vega-wallet-receive-fauceted-asset.ts

@@ -21,7 +21,7 @@ export function addVegaWalletReceiveFaucetedAsset() {
         `Topping up vega wallet with ${assetName}, amount: ${amount}`
       );
       // @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
-      cy.get_asset_information().then((assets) => {
+      cy.getAssets().then((assets) => {
         console.log(assets);
         const asset = assets[assetName];
         if (assets[assetName] !== undefined) {

libs/tailwindcss-config/src/vega-custom-classes.js

@@ -15,7 +15,7 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
     },
     '.syntax-highlighter-wrapper .hljs': {
       fontSize: '1rem',
-      fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+      fontFamily: "'Roboto Mono', monospace",
       display: 'block',
       overflowX: 'auto',
       padding: '1em',
@@ -23,6 +23,10 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
       color: colors.neutral[700],
       border: `1px solid ${colors.neutral[300]}`,
     },
+    '.syntax-highlighter-wrapper-sm .hljs': {
+      fontSize: '0.875rem',
+      lineHeight: '1.25rem',
+    },
     '.dark .syntax-highlighter-wrapper .hljs': {
       background: colors.neutral[800],
       color: theme.colors.vega.green.DEFAULT,

libs/ui-toolkit/src/components/syntax-highlighter/syntax-highlighter.tsx

@@ -1,8 +1,19 @@
+import classNames from 'classnames';
 import Highlighter from 'react-syntax-highlighter';
 
-export const SyntaxHighlighter = ({ data }: { data: unknown }) => {
+export const SyntaxHighlighter = ({
+  data,
+  size = 'default',
+}: {
+  data: unknown;
+  size?: 'smaller' | 'default';
+}) => {
   return (
-    <div className="syntax-highlighter-wrapper">
+    <div
+      className={classNames('syntax-highlighter-wrapper', {
+        'syntax-highlighter-wrapper-sm': size === 'smaller',
+      })}
+    >
       <Highlighter language="json" useInlineStyles={false}>
         {JSON.stringify(data, null, '  ')}
       </Highlighter>