feat(oracles): oracle full profile (#3545)

Co-authored-by: asiaznik <artur@vegaprotocol.io>
2023-05-05 12:52:03 +03:00 · 2023-05-05 12:52:03 +03:00 · bf63f9d46d
commit bf63f9d46d
parent 023a83e0f7
29 changed files with 815 additions and 173 deletions
--- a/apps/explorer/.env
+++ b/apps/explorer/.env
@ -10,6 +10,7 @@ NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.xyz
 NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
 NX_BLOCK_EXPLORER=https://be.stagnet1.vega.xyz/rest
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json
 NX_VEGA_GOVERNANCE_URL=https://stagnet1.token.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.jsoo

--- a/apps/explorer/src/app/components/markets/market-details.tsx
+++ b/apps/explorer/src/app/components/markets/market-details.tsx
@ -14,10 +14,72 @@ import {
  SettlementAssetInfoPanel,
 } from '@vegaprotocol/market-info';
 import { MarketInfoTable } from '@vegaprotocol/market-info';
+import type { DataSourceDefinition } from '@vegaprotocol/types';
+import isEqual from 'lodash/isEqual';

 export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
  if (!market) return null;

+  const settlementData =
+    market.tradableInstrument.instrument.product.dataSourceSpecForSettlementData
+      .data;
+  const terminationData =
+    market.tradableInstrument.instrument.product
+      .dataSourceSpecForTradingTermination.data;
+
+  const getSigners = (data: DataSourceDefinition) => {
+    if (data.sourceType.__typename === 'DataSourceDefinitionExternal') {
+      const signers = data.sourceType.sourceType.signers || [];
+
+      return signers.map(({ signer }, i) => {
+        return (
+          (signer.__typename === 'ETHAddress' && signer.address) ||
+          (signer.__typename === 'PubKey' && signer.key)
+        );
+      });
+    }
+    return [];
+  };
+
+  const oraclePanels = isEqual(
+    getSigners(settlementData),
+    getSigners(terminationData)
+  )
+    ? [
+        {
+          title: t('Settlement Oracle'),
+          content: (
+            <OracleInfoPanel
+              noBorder={false}
+              market={market}
+              type="settlementData"
+            />
+          ),
+        },
+        {
+          title: t('Termination Oracle'),
+          content: (
+            <OracleInfoPanel
+              noBorder={false}
+              market={market}
+              type="termination"
+            />
+          ),
+        },
+      ]
+    : [
+        {
+          title: t('Oracle'),
+          content: (
+            <OracleInfoPanel
+              noBorder={false}
+              market={market}
+              type="settlementData"
+            />
+          ),
+        },
+      ];
+
  const panels = [
    {
      title: t('Key details'),
@ -95,22 +157,7 @@ export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
        <LiquidityPriceRangeInfoPanel market={market} noBorder={false} />
      ),
    },
-    {
-      title: t('Settlement Oracle'),
-      content: (
-        <OracleInfoPanel
-          noBorder={false}
-          market={market}
-          type="settlementData"
-        />
-      ),
-    },
-    {
-      title: t('Termination Oracle'),
-      content: (
-        <OracleInfoPanel noBorder={false} market={market} type="termination" />
-      ),
-    },
+    ...oraclePanels,
  ];

  return (
--- a/apps/trading-e2e/src/integration/market-info.cy.ts
+++ b/apps/trading-e2e/src/integration/market-info.cy.ts
@ -184,17 +184,9 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
      .getByTestId('provider-name')
      .and('contain', 'Another oracle');

-    cy.getByTestId(accordionContent)
-      .getByTestId('signed-proofs')
-      .and('contain', '1');
-
    cy.getByTestId(accordionContent)
      .getByTestId('verified-proofs')
      .and('contain', '1');
-
-    cy.getByTestId(accordionContent)
-      .getByTestId('signed-proofs')
-      .and('contain', '1');
  });

  it('proposal displayed', () => {
--- a/libs/market-info/src/components/market-info/generated/MarketInfo.ts
+++ b/libs/market-info/src/components/market-info/generated/MarketInfo.ts
@ -198,4 +198,4 @@ export function useMarketInfoLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions
        }
 export type MarketInfoQueryHookResult = ReturnType<typeof useMarketInfoQuery>;
 export type MarketInfoLazyQueryHookResult = ReturnType<typeof useMarketInfoLazyQuery>;
-export type MarketInfoQueryResult = Apollo.QueryResult<MarketInfoQuery, MarketInfoQueryVariables>;
+export type MarketInfoQueryResult = Apollo.QueryResult<MarketInfoQuery, MarketInfoQueryVariables>;
--- a/libs/market-info/src/components/market-info/market-info-accordion.tsx
+++ b/libs/market-info/src/components/market-info/market-info-accordion.tsx
@ -35,6 +35,8 @@ import {
  RiskParametersInfoPanel,
  SettlementAssetInfoPanel,
 } from './market-info-panels';
+import type { DataSourceDefinition } from '@vegaprotocol/types';
+import isEqual from 'lodash/isEqual';

 export interface MarketInfoAccordionProps {
  market: MarketInfo;
@ -70,7 +72,7 @@ export const MarketInfoAccordionContainer = ({
  );
 };

-const MarketInfoAccordion = ({
+export const MarketInfoAccordion = ({
  market,
  onSelect,
 }: MarketInfoAccordionProps) => {
@ -103,8 +105,64 @@ const MarketInfoAccordion = ({
        content: <InsurancePoolInfoPanel market={market} account={a} />,
      })),
  ];
-  const product = market.tradableInstrument.instrument.product;
+  const settlementData =
+    market.tradableInstrument.instrument.product.dataSourceSpecForSettlementData
+      .data;
+  const terminationData =
+    market.tradableInstrument.instrument.product
+      .dataSourceSpecForTradingTermination.data;

+  const getSigners = (data: DataSourceDefinition) => {
+    if (data.sourceType.__typename === 'DataSourceDefinitionExternal') {
+      const signers = data.sourceType.sourceType.signers || [];
+
+      return signers.map(({ signer }, i) => {
+        return (
+          (signer.__typename === 'ETHAddress' && signer.address) ||
+          (signer.__typename === 'PubKey' && signer.key)
+        );
+      });
+    }
+    return [];
+  };
+  const oraclePanels = isEqual(
+    getSigners(settlementData),
+    getSigners(terminationData)
+  )
+    ? [
+        {
+          title: t('Oracle'),
+          content: (
+            <OracleInfoPanel
+              noBorder={false}
+              market={market}
+              type="settlementData"
+            />
+          ),
+        },
+      ]
+    : [
+        {
+          title: t('Settlement Oracle'),
+          content: (
+            <OracleInfoPanel
+              noBorder={false}
+              market={market}
+              type="settlementData"
+            />
+          ),
+        },
+        {
+          title: t('Termination Oracle'),
+          content: (
+            <OracleInfoPanel
+              noBorder={false}
+              market={market}
+              type="termination"
+            />
+          ),
+        },
+      ];
  const marketSpecPanels = [
    {
      title: t('Key details'),
@ -114,14 +172,7 @@ const MarketInfoAccordion = ({
      title: t('Instrument'),
      content: <InstrumentInfoPanel market={market} />,
    },
-    product.dataSourceSpecForSettlementData && {
-      title: t('Settlement Oracle'),
-      content: <OracleInfoPanel market={market} type="settlementData" />,
-    },
-    product.dataSourceSpecForTradingTermination && {
-      title: t('Termination Oracle'),
-      content: <OracleInfoPanel market={market} type="termination" />,
-    },
+    ...oraclePanels,
    {
      title: t('Settlement asset'),
      content: <SettlementAssetInfoPanel market={market} />,
@ -182,33 +233,37 @@ const MarketInfoAccordion = ({
      title: t('Proposal'),
      content: (
        <div className="">
-          <ExternalLink
-            className="mb-2 w-full"
-            href={generatePath(TokenLinks.PROPOSAL_PAGE, {
-              tokenUrl: VEGA_TOKEN_URL,
-              proposalId: market.proposal?.id || '',
-            })}
-            title={
-              market.proposal?.rationale.title ||
-              market.proposal?.rationale.description ||
-              ''
-            }
-          >
-            {t('View governance proposal')}
-          </ExternalLink>
-          <ExternalLink
-            className="w-full"
-            href={generatePath(TokenLinks.UPDATE_PROPOSAL_PAGE, {
-              tokenUrl: VEGA_TOKEN_URL,
-            })}
-            title={
-              market.proposal?.rationale.title ||
-              market.proposal?.rationale.description ||
-              ''
-            }
-          >
-            {t('Propose a change to market')}
-          </ExternalLink>
+          {VEGA_TOKEN_URL && (
+            <ExternalLink
+              className="mb-2 w-full"
+              href={generatePath(TokenLinks.PROPOSAL_PAGE, {
+                tokenUrl: VEGA_TOKEN_URL,
+                proposalId: market.proposal?.id || '',
+              })}
+              title={
+                market.proposal?.rationale.title ||
+                market.proposal?.rationale.description ||
+                ''
+              }
+            >
+              {t('View governance proposal')}
+            </ExternalLink>
+          )}
+          {VEGA_TOKEN_URL && (
+            <ExternalLink
+              className="w-full"
+              href={generatePath(TokenLinks.UPDATE_PROPOSAL_PAGE, {
+                tokenUrl: VEGA_TOKEN_URL,
+              })}
+              title={
+                market.proposal?.rationale.title ||
+                market.proposal?.rationale.description ||
+                ''
+              }
+            >
+              {t('Propose a change to market')}
+            </ExternalLink>
+          )}
        </div>
      ),
    },
@ -225,7 +280,7 @@ const MarketInfoAccordion = ({
        <h3 className={headerClassName}>{t('Market specification')}</h3>
        <Accordion panels={marketSpecPanels} />
      </div>
-      {VEGA_TOKEN_URL && market.proposal?.id && (
+      {VEGA_TOKEN_URL && marketGovPanels && market.proposal?.id && (
        <div>
          <h3 className={headerClassName}>{t('Market governance')}</h3>
          <Accordion panels={marketGovPanels} />
--- a/libs/market-info/src/components/market-info/market-info-panels.spec.tsx
+++ b/libs/market-info/src/components/market-info/market-info-panels.spec.tsx
@ -5,62 +5,13 @@ import {
 } from '@vegaprotocol/types';
 import { DataSourceProof } from './market-info-panels';

+jest.mock('@vegaprotocol/oracles', () => ({
+  useOracleMarkets: () => [],
+}));
+
 describe('DataSourceProof', () => {
  const ORACLE_PUBKEY =
    '69464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6f';
-  it('renders correct proof for external data sources', () => {
-    const props = {
-      data: {
-        sourceType: {
-          __typename: 'DataSourceDefinitionExternal' as const,
-          sourceType: {
-            __typename: 'DataSourceSpecConfiguration' as const,
-            signers: [
-              {
-                __typename: 'Signer' as const,
-                signer: {
-                  __typename: 'PubKey' as const,
-                  key: ORACLE_PUBKEY,
-                },
-              },
-            ],
-          },
-        },
-      },
-      providers: [
-        {
-          name: 'Another oracle',
-          url: 'https://zombo.com',
-          description_markdown:
-            'Some markdown describing the oracle provider.\n\nTwitter: @FacesPics2\n',
-          oracle: {
-            status: 'GOOD' as const,
-            status_reason: '',
-            first_verified: '2022-01-01T00:00:00.000Z',
-            last_verified: '2022-12-31T00:00:00.000Z',
-            type: 'public_key' as const,
-            public_key: ORACLE_PUBKEY,
-          },
-          proofs: [
-            {
-              format: 'signed_message' as const,
-              available: true,
-              type: 'public_key' as const,
-              public_key: ORACLE_PUBKEY,
-              message: 'SOMEHEX',
-            },
-          ],
-          github_link: `https://github.com/vegaprotocol/well-known/blob/main/oracle-providers/PubKey-${ORACLE_PUBKEY}.toml`,
-        },
-      ],
-      type: 'termination' as const,
-    };
-    render(<DataSourceProof {...props} />);
-    expect(screen.getByRole('link')).toHaveAttribute(
-      'href',
-      props.providers[0].github_link
-    );
-  });

  it('renders message if there are no providers', () => {
    const props = {
@ -84,7 +35,7 @@ describe('DataSourceProof', () => {
      providers: [],
      type: 'termination' as const,
    };
-    render(<DataSourceProof {...props} />);
+    render(<DataSourceProof id={''} {...props} />);
    expect(
      screen.getByText('No oracle proof for termination')
    ).toBeInTheDocument();
@ -137,7 +88,7 @@ describe('DataSourceProof', () => {
      ],
      type: 'settlementData' as const,
    };
-    render(<DataSourceProof {...props} />);
+    render(<DataSourceProof id={''} {...props} />);
    expect(
      screen.getByText('No oracle proof for settlement data')
    ).toBeInTheDocument();
@ -177,7 +128,7 @@ describe('DataSourceProof', () => {
      providers: [],
      type: 'termination' as const,
    };
-    render(<DataSourceProof {...props} />);
+    render(<DataSourceProof id={''} {...props} />);
    expect(screen.getByText('Internal conditions')).toBeInTheDocument();
    expect(
      screen.getByText(
--- a/libs/market-info/src/components/market-info/market-info-panels.tsx
+++ b/libs/market-info/src/components/market-info/market-info-panels.tsx
@ -1,4 +1,5 @@
 import type { ComponentProps } from 'react';
+import { useState } from 'react';
 import { useMemo } from 'react';
 import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
 import { t } from '@vegaprotocol/i18n';
@ -6,7 +7,7 @@ import {
  totalFeesPercentage,
  marketDataProvider,
 } from '@vegaprotocol/market-list';
-import { ExternalLink, Splash } from '@vegaprotocol/ui-toolkit';
+import { Dialog, ExternalLink, Splash } from '@vegaprotocol/ui-toolkit';
 import {
  addDecimalsFormatNumber,
  formatNumber,
@ -26,7 +27,12 @@ import { ConditionOperatorMapping } from '@vegaprotocol/types';
 import { MarketTradingModeMapping } from '@vegaprotocol/types';
 import { useEnvironment } from '@vegaprotocol/environment';
 import type { Provider } from '@vegaprotocol/oracles';
-import { OracleBasicProfile, useOracleProofs } from '@vegaprotocol/oracles';
+import { OracleProfileTitle, OracleFullProfile } from '@vegaprotocol/oracles';
+import {
+  OracleBasicProfile,
+  useOracleProofs,
+  useOracleMarkets,
+} from '@vegaprotocol/oracles';
 import { useDataProvider } from '@vegaprotocol/react-helpers';

 type PanelProps = Pick<
@ -456,6 +462,11 @@ export const OracleInfoPanel = ({
  const { VEGA_EXPLORER_URL, ORACLE_PROOFS_URL } = useEnvironment();
  const { data } = useOracleProofs(ORACLE_PROOFS_URL);

+  const dataSourceSpecId =
+    type === 'settlementData'
+      ? product.dataSourceSpecForSettlementData.id
+      : product.dataSourceSpecForTradingTermination.id;
+
  return (
    <div className="flex flex-col gap-4">
      <DataSourceProof
@ -467,6 +478,7 @@ export const OracleInfoPanel = ({
        }
        providers={data}
        type={type}
+        id={dataSourceSpecId}
      />
      <ExternalLink
        data-testid="oracle-spec-links"
@ -488,10 +500,12 @@ export const DataSourceProof = ({
  data,
  providers,
  type,
+  id,
 }: {
  data: DataSourceDefinition;
  providers: Provider[] | undefined;
  type: 'settlementData' | 'termination';
+  id: string;
 }) => {
  if (data.sourceType.__typename === 'DataSourceDefinitionExternal') {
    const signers = data.sourceType.sourceType.signers || [];
@ -509,7 +523,7 @@ export const DataSourceProof = ({
              providers={providers}
              signer={signer}
              type={type}
-              index={i}
+              id={id}
            />
          );
        })}
@ -540,11 +554,12 @@ const OracleLink = ({
  providers,
  signer,
  type,
+  id,
 }: {
  providers: Provider[];
  signer: SignerKind;
  type: 'settlementData' | 'termination';
-  index: number;
+  id: string;
 }) => {
  const signerProviders = providers.filter((p) => {
    if (signer.__typename === 'PubKey') {
@ -575,10 +590,7 @@ const OracleLink = ({
  return (
    <div>
      {signerProviders.map((provider) => (
-        <OracleBasicProfile
-          key={provider.name}
-          provider={provider}
-        ></OracleBasicProfile>
+        <OracleProfile key={id} provider={provider} id={id} />
      ))}
    </div>
  );
@ -598,3 +610,36 @@ const NoOracleProof = ({
    </p>
  );
 };
+
+const OracleProfile = ({
+  provider,
+  id,
+}: {
+  provider: Provider;
+  id: string;
+}) => {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const oracleMarkets = useOracleMarkets(provider);
+  return (
+    <div key={provider.name}>
+      <OracleBasicProfile
+        provider={provider}
+        onClick={() => setDialogOpen(!dialogOpen)}
+        markets={oracleMarkets}
+      />
+      <Dialog
+        title={<OracleProfileTitle provider={provider} />}
+        open={dialogOpen}
+        onChange={() => setDialogOpen(!dialogOpen)}
+        aria-labelledby="oracle-proof-dialog"
+      >
+        <OracleFullProfile
+          provider={provider}
+          id={id}
+          key={id}
+          markets={oracleMarkets}
+        />
+      </Dialog>
+    </div>
+  );
+};
--- a/libs/market-info/src/setup-tests.ts
+++ b/libs/market-info/src/setup-tests.ts
@ -1 +1,7 @@
 import '@testing-library/jest-dom';
+import 'jest-canvas-mock';
+import ResizeObserver from 'resize-observer-polyfill';
+import { defaultFallbackInView } from 'react-intersection-observer';
+
+defaultFallbackInView(true);
+global.ResizeObserver = ResizeObserver;
--- a/libs/oracles/.storybook/styles.scss
+++ b/libs/oracles/.storybook/styles.scss
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/libs/oracles/src/lib/OracleMarketsSpec.graphql
+++ b/libs/oracles/src/lib/OracleMarketsSpec.graphql
@ -0,0 +1,63 @@
+fragment OracleMarketSpecFields on Market {
+  id
+  state
+  tradingMode
+  tradableInstrument {
+    instrument {
+      id
+      name
+      code
+      product {
+        ... on Future {
+          dataSourceSpecForSettlementData {
+            id
+            data {
+              ...DataSourceSpec
+            }
+          }
+          dataSourceSpecForTradingTermination {
+            id
+            data {
+              ...DataSourceSpec
+            }
+          }
+          dataSourceSpecBinding {
+            settlementDataProperty
+            tradingTerminationProperty
+          }
+        }
+      }
+    }
+  }
+}
+
+fragment DataSourceSpec on DataSourceDefinition {
+  sourceType {
+    ... on DataSourceDefinitionExternal {
+      sourceType {
+        ... on DataSourceSpecConfiguration {
+          signers {
+            signer {
+              ... on PubKey {
+                key
+              }
+              ... on ETHAddress {
+                address
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+query OracleMarketsSpec {
+  marketsConnection {
+    edges {
+      node {
+        ...OracleMarketSpecFields
+      }
+    }
+  }
+}
--- a/libs/oracles/src/lib/generated/OracleMarketsSpec.ts
+++ b/libs/oracles/src/lib/generated/OracleMarketsSpec.ts
@ -0,0 +1,109 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+
+export type OracleMarketSpecFieldsFragment = { __typename?: 'Market', id: string, state: Types.MarketState, tradingMode: Types.MarketTradingMode, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, product: { __typename?: 'Future', dataSourceSpecForSettlementData: { __typename?: 'DataSourceSpec', id: string, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null } } | { __typename?: 'DataSourceDefinitionInternal' } } }, dataSourceSpecForTradingTermination: { __typename?: 'DataSourceSpec', id: string, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null } } | { __typename?: 'DataSourceDefinitionInternal' } } }, dataSourceSpecBinding: { __typename?: 'DataSourceSpecToFutureBinding', settlementDataProperty: string, tradingTerminationProperty: string } } } } };
+
+export type DataSourceSpecFragment = { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null } } | { __typename?: 'DataSourceDefinitionInternal' } };
+
+export type OracleMarketsSpecQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type OracleMarketsSpecQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, state: Types.MarketState, tradingMode: Types.MarketTradingMode, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, product: { __typename?: 'Future', dataSourceSpecForSettlementData: { __typename?: 'DataSourceSpec', id: string, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null } } | { __typename?: 'DataSourceDefinitionInternal' } } }, dataSourceSpecForTradingTermination: { __typename?: 'DataSourceSpec', id: string, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null } } | { __typename?: 'DataSourceDefinitionInternal' } } }, dataSourceSpecBinding: { __typename?: 'DataSourceSpecToFutureBinding', settlementDataProperty: string, tradingTerminationProperty: string } } } } } }> } | null };
+
+export const DataSourceSpecFragmentDoc = gql`
+    fragment DataSourceSpec on DataSourceDefinition {
+  sourceType {
+    ... on DataSourceDefinitionExternal {
+      sourceType {
+        ... on DataSourceSpecConfiguration {
+          signers {
+            signer {
+              ... on PubKey {
+                key
+              }
+              ... on ETHAddress {
+                address
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+export const OracleMarketSpecFieldsFragmentDoc = gql`
+    fragment OracleMarketSpecFields on Market {
+  id
+  state
+  tradingMode
+  tradableInstrument {
+    instrument {
+      id
+      name
+      code
+      product {
+        ... on Future {
+          dataSourceSpecForSettlementData {
+            id
+            data {
+              ...DataSourceSpec
+            }
+          }
+          dataSourceSpecForTradingTermination {
+            id
+            data {
+              ...DataSourceSpec
+            }
+          }
+          dataSourceSpecBinding {
+            settlementDataProperty
+            tradingTerminationProperty
+          }
+        }
+      }
+    }
+  }
+}
+    ${DataSourceSpecFragmentDoc}`;
+export const OracleMarketsSpecDocument = gql`
+    query OracleMarketsSpec {
+  marketsConnection {
+    edges {
+      node {
+        ...OracleMarketSpecFields
+      }
+    }
+  }
+}
+    ${OracleMarketSpecFieldsFragmentDoc}`;
+
+/**
+ * __useOracleMarketsSpecQuery__
+ *
+ * To run a query within a React component, call `useOracleMarketsSpecQuery` and pass it any options that fit your needs.
+ * When your component renders, `useOracleMarketsSpecQuery` 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 } = useOracleMarketsSpecQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useOracleMarketsSpecQuery(baseOptions?: Apollo.QueryHookOptions<OracleMarketsSpecQuery, OracleMarketsSpecQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<OracleMarketsSpecQuery, OracleMarketsSpecQueryVariables>(OracleMarketsSpecDocument, options);
+      }
+export function useOracleMarketsSpecLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<OracleMarketsSpecQuery, OracleMarketsSpecQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<OracleMarketsSpecQuery, OracleMarketsSpecQueryVariables>(OracleMarketsSpecDocument, options);
+        }
+export type OracleMarketsSpecQueryHookResult = ReturnType<typeof useOracleMarketsSpecQuery>;
+export type OracleMarketsSpecLazyQueryHookResult = ReturnType<typeof useOracleMarketsSpecLazyQuery>;
+export type OracleMarketsSpecQueryResult = Apollo.QueryResult<OracleMarketsSpecQuery, OracleMarketsSpecQueryVariables>;
--- a/libs/oracles/src/lib/components/index.ts
+++ b/libs/oracles/src/lib/components/index.ts
@ -1 +1,2 @@
 export * from './oracle-basic-profile';
+export * from './oracle-full-profile';
--- a/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.spec.tsx
+++ b/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.spec.tsx
@ -35,11 +35,10 @@ describe('OracleBasicProfile', () => {
  });

  it('should render the name', () => {
-    render(<OracleBasicProfile provider={testProvider} />);
+    render(<OracleBasicProfile provider={testProvider} markets={undefined} />);
    expect(screen.getByTestId('provider-name')).toHaveTextContent(
      'Test oracle'
    );
    expect(screen.getByTestId('verified-proofs')).toHaveTextContent('1');
-    expect(screen.getByTestId('signed-proofs')).toHaveTextContent('1');
  });
 });
--- a/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.tsx
+++ b/libs/oracles/src/lib/components/oracle-basic-profile/oracle-basic-profile.tsx
@ -1,18 +1,19 @@
 import { t } from '@vegaprotocol/i18n';
 import type { Provider } from '../../oracle-schema';
 import {
+  ButtonLink,
  ExternalLink,
  Icon,
  Intent,
-  Link,
  VegaIcon,
  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import type { IconName } from '@blueprintjs/icons';
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
+import type { OracleMarketSpecFieldsFragment } from '../../__generated__/OracleMarketsSpec';

-const getVerifiedStatusIcon = (provider: Provider) => {
+export const getVerifiedStatusIcon = (provider: Provider) => {
  const getIconIntent = () => {
    switch (provider.oracle.status) {
      case 'GOOD':
@ -54,17 +55,21 @@ const getVerifiedStatusIcon = (provider: Provider) => {
  };
 };

-export const OracleBasicProfile = ({ provider }: { provider: Provider }) => {
+export const OracleBasicProfile = ({
+  provider,
+  onClick,
+  markets: oracleMarkets,
+}: {
+  provider: Provider;
+  markets?: OracleMarketSpecFieldsFragment[] | undefined;
+  onClick?: (value?: boolean) => void;
+}) => {
  const { icon, message, intent } = getVerifiedStatusIcon(provider);

  const verifiedProofs = provider.proofs.filter(
    (proof) => proof.available === true
  );

-  const signedProofs = provider.proofs.filter(
-    (proof) => proof.format === 'signed_message' && proof.available === true
-  );
-
  const links = provider.proofs
    .filter((proof) => proof.format === 'url' && proof.available === true)
    .map((proof) => ({
@ -77,23 +82,20 @@ export const OracleBasicProfile = ({ provider }: { provider: Provider }) => {
    <>
      <span className="flex gap-1">
        {provider.url && (
-          <Link
-            href={provider.github_link}
-            className="flex align-items-bottom text-md"
-            target="_blank"
-          >
-            <span>
-              <span data-testid="provider-name" className="underline pr-1">
-                {provider.name}
-              </span>
-              <span
-                data-testid="verified-proofs"
-                className="dark:text-vega-light-300 text-vega-dark-300"
-              >
-                ({verifiedProofs.length})
-              </span>
+          <span className="flex align-items-bottom text-md gap-1">
+            <ButtonLink
+              onClick={() => onClick && onClick(true)}
+              data-testid="provider-name"
+            >
+              {provider.name}
+            </ButtonLink>
+            <span
+              className="dark:text-vega-light-300 text-vega-dark-300"
+              data-testid="verified-proofs"
+            >
+              ({verifiedProofs.length})
            </span>
-          </Link>
+          </span>
        )}
        <span
          className={classNames(
@ -115,10 +117,11 @@ export const OracleBasicProfile = ({ provider }: { provider: Provider }) => {
        data-testid="signed-proofs"
        className="dark:text-vega-light-300 text-vega-dark-300"
      >
-        {t('Involved in %s %s', [
-          signedProofs.length.toString(),
-          signedProofs.length !== 1 ? t('markets') : t('market'),
-        ])}
+        {oracleMarkets &&
+          t('Involved in %s %s', [
+            oracleMarkets.length.toString(),
+            oracleMarkets.length !== 1 ? t('markets') : t('market'),
+          ])}
      </p>
      {links.length > 0 && (
        <div className="flex flex-row gap-1">
@ -133,7 +136,7 @@ export const OracleBasicProfile = ({ provider }: { provider: Provider }) => {
                <VegaIcon name={getLinkIcon(link.type)} />
              </span>
              <span className="underline capitalize">
-                {link.type}{' '}
+                {link.type}
                <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} size={13} />
              </span>
            </ExternalLink>
--- a/libs/oracles/src/lib/components/oracle-full-profile/index.ts
+++ b/libs/oracles/src/lib/components/oracle-full-profile/index.ts
@ -0,0 +1,2 @@
+export * from './oracle-full-profile.stories';
+export * from './oracle-full-profile';
--- a/libs/oracles/src/lib/components/oracle-full-profile/oracle-full-profile.spec.tsx
+++ b/libs/oracles/src/lib/components/oracle-full-profile/oracle-full-profile.spec.tsx
@ -0,0 +1,54 @@
+import { OracleFullProfile } from './oracle-full-profile';
+import type { Provider } from '../../oracle-schema';
+import { render, screen } from '@testing-library/react';
+
+describe('OracleFullProfile', () => {
+  const testProvider = {
+    name: 'Test oracle',
+    url: 'https://zombo.com',
+    description_markdown:
+      'Some markdown describing the oracle provider.\n\nTwitter: @FacesPics2\n',
+    oracle: {
+      status: 'GOOD',
+      status_reason: '',
+      first_verified: '2023-02-28T00:00:00.000Z',
+      last_verified: '2023-02-28T00:00:00.000Z',
+      type: 'eth_address',
+      eth_address: '0xfCEAdAFab14d46e20144F48824d0C09B1a03F2BC',
+    },
+    proofs: [
+      {
+        format: 'signed_message',
+        available: true,
+        type: 'eth_address',
+        eth_address: '0x949AF81E51D57831AE52591d17fBcdd1014a5f52',
+        message: 'SOMEHEX',
+      },
+    ],
+    github_link:
+      'https://github.com/vegaprotocol/well-known/blob/main/oracle-providers/eth_address-0xfCEAdAFab14d46e20144F48824d0C09B1a03F2BC.toml',
+  } as Provider;
+
+  it('should render successfully', () => {
+    const component = (
+      <OracleFullProfile provider={testProvider} id={''} markets={[]} />
+    );
+    expect(component).toBeTruthy();
+  });
+
+  it('should render the name', () => {
+    render(
+      <OracleFullProfile
+        provider={testProvider}
+        id={'oracle-id'}
+        markets={[]}
+      />
+    );
+    expect(screen.getByTestId('github-link')).toHaveTextContent(
+      'Oracle repository'
+    );
+    expect(screen.getByTestId('block-explorer-link')).toHaveTextContent(
+      'Block explorer'
+    );
+  });
+});
--- a/libs/oracles/src/lib/components/oracle-full-profile/oracle-full-profile.stories.tsx
+++ b/libs/oracles/src/lib/components/oracle-full-profile/oracle-full-profile.stories.tsx
@ -0,0 +1,41 @@
+import type { Story, Meta } from '@storybook/react';
+import { OracleFullProfile } from './oracle-full-profile';
+
+export default {
+  component: OracleFullProfile,
+  title: 'OracleFullProfile',
+} as Meta;
+
+const Template: Story = (args) => (
+  <OracleFullProfile provider={args['provider']} id="4578" />
+);
+
+export const OraclePrimary = Template.bind({});
+
+OraclePrimary.args = {
+  provider: {
+    name: 'Test oracle',
+    url: 'https://zombo.com',
+    description_markdown:
+      'Some markdown describing the oracle provider.\n\nTwitter: @FacesPics2\n',
+    oracle: {
+      status: 'GOOD',
+      status_reason: '',
+      first_verified: '2023-02-28T00:00:00.000Z',
+      last_verified: '2023-02-28T00:00:00.000Z',
+      type: 'eth_address',
+      eth_address: '0xfCEAdAFab14d46e20144F48824d0C09B1a03F2BC',
+    },
+    proofs: [
+      {
+        format: 'signed_message',
+        available: true,
+        type: 'eth_address',
+        eth_address: '0x949AF81E51D57831AE52591d17fBcdd1014a5f52',
+        message: 'SOMEHEX',
+      },
+    ],
+    github_link:
+      'https://github.com/vegaprotocol/well-known/blob/main/oracle-providers/eth_address-0xfCEAdAFab14d46e20144F48824d0C09B1a03F2BC.toml',
+  },
+};
--- a/libs/oracles/src/lib/components/oracle-full-profile/oracle-full-profile.tsx
+++ b/libs/oracles/src/lib/components/oracle-full-profile/oracle-full-profile.tsx
@ -0,0 +1,216 @@
+import { t } from '@vegaprotocol/i18n';
+import type { Provider } from '../../oracle-schema';
+import { MarketState, MarketStateMapping } from '@vegaprotocol/types';
+import {
+  ButtonLink,
+  ExternalLink,
+  Icon,
+  Intent,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
+import type { IconName } from '@blueprintjs/icons';
+import classNames from 'classnames';
+import { getLinkIcon, getVerifiedStatusIcon } from '../oracle-basic-profile';
+import { useEnvironment } from '@vegaprotocol/environment';
+import type { OracleMarketSpecFieldsFragment } from '../../__generated__/OracleMarketsSpec';
+import { useState } from 'react';
+
+export const OracleProfileTitle = ({ provider }: { provider: Provider }) => {
+  const { icon, intent } = getVerifiedStatusIcon(provider);
+  const verifiedProofs = provider.proofs.filter(
+    (proof) => proof.available === true
+  );
+  return (
+    <span className="flex gap-1">
+      {provider.url && (
+        <span>
+          <span className="pr-1">{provider.name}</span>
+          <span className="dark:text-vega-light-300 text-vega-dark-300">
+            ({verifiedProofs.length})
+          </span>
+        </span>
+      )}
+      <span
+        className={classNames(
+          {
+            'text-gray-700 dark:text-gray-300': intent === Intent.None,
+            'text-vega-blue': intent === Intent.Primary,
+            'text-vega-green dark:text-vega-green': intent === Intent.Success,
+            'text-yellow-600 dark:text-yellow': intent === Intent.Warning,
+            'text-vega-pink': intent === Intent.Danger,
+          },
+          'flex items-start align-text-bottom p-1'
+        )}
+      >
+        <Icon size={6} name={icon as IconName} />
+      </span>
+    </span>
+  );
+};
+
+export const OracleFullProfile = ({
+  provider,
+  id,
+  markets: oracleMarkets,
+}: {
+  provider: Provider;
+  id: string;
+  markets?: OracleMarketSpecFieldsFragment[] | undefined;
+}) => {
+  const { message } = getVerifiedStatusIcon(provider);
+  const { VEGA_EXPLORER_URL } = useEnvironment();
+  const [showMore, setShowMore] = useState(false);
+
+  const links = provider.proofs
+    .filter((proof) => proof.format === 'url' && proof.available === true)
+    .map((proof) => ({
+      ...proof,
+      url: 'url' in proof ? proof.url : '',
+      icon: getLinkIcon(proof.type),
+    }));
+
+  return (
+    <div className="flex flex-col text-sm">
+      <div className="dark:text-vega-light-300 text-vega-dark-300">
+        <p className=" pb-2">{message}</p>
+        {!showMore && (
+          <p className="pb-2">
+            {provider.description_markdown.slice(0, 100)}
+            {'... '}
+            <span className="ml-2">
+              <ButtonLink onClick={() => setShowMore(!showMore)}>
+                Read more
+              </ButtonLink>
+            </span>
+          </p>
+        )}
+        {showMore && (
+          <p className="pb-2">
+            {provider.description_markdown}
+            <span className="ml-2">
+              <ButtonLink onClick={() => setShowMore(!showMore)}>
+                Show less
+              </ButtonLink>
+            </span>
+          </p>
+        )}
+      </div>
+      <div className="grid grid-cols-2 gap-6">
+        <div className="col-span-1">
+          <p
+            className="dark:text-vega-light-300 text-vega-dark-300 uppercase"
+            data-testid="verified-accounts"
+          >
+            {t('%s proofs of ownership', links.length.toString())}
+          </p>
+          {links.length > 0 ? (
+            <div className="flex flex-col gap-1">
+              {links.map((link) => (
+                <ExternalLink
+                  key={link.url}
+                  href={link.url}
+                  className="flex align-items-bottom underline text-sm"
+                >
+                  <span className="pt-1">
+                    <VegaIcon name={getLinkIcon(link.type)} />
+                  </span>
+                  <span className="underline capitalize">
+                    {link.type}{' '}
+                    <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} size={13} />
+                  </span>
+                </ExternalLink>
+              ))}
+            </div>
+          ) : (
+            <p className="dark:text-vega-light-300 text-vega-dark-300">
+              {t('This oracle has not proven ownership of any accounts.')}
+            </p>
+          )}
+        </div>
+        <div className="col-span-1 gap-2 py-2 flex flex-col">
+          <p className="dark:text-vega-light-300 text-vega-dark-300 uppercase">
+            {t('Details')}
+          </p>
+          {id && (
+            <ExternalLink
+              href={`${VEGA_EXPLORER_URL}/oracles/${id}`}
+              data-testid="block-explorer-link"
+            >
+              {t('Block explorer')}
+            </ExternalLink>
+          )}
+          {provider.github_link && (
+            <ExternalLink href={provider.github_link} data-testid="github-link">
+              {t('Oracle repository')}
+            </ExternalLink>
+          )}
+        </div>
+      </div>
+      <div>
+        {oracleMarkets && (
+          <p className="dark:text-vega-light-300 text-vega-dark-300 uppercase mt-4">
+            {t('Oracle in %s %s', [
+              oracleMarkets.length.toString(),
+              oracleMarkets.length === 1 ? 'market' : 'markets',
+            ])}
+          </p>
+        )}
+      </div>
+      {oracleMarkets && oracleMarkets.length > 0 && (
+        <div
+          data-testid="oracle-markets"
+          className="border-vega-light-200 dark:border-vega-dark-200 border-solid border-2 py-4 px-2 rounded-lg my-2"
+        >
+          <div className="grid grid-cols-4 gap-1 uppercase mb-2 font-alpha calt dark:text-vega-light-300 text-vega-dark-300">
+            <div className="col-span-1">{t('Market')}</div>
+            <div className="col-span-1">{t('Status')}</div>
+            <div className="col-span-1">{t('Specifications')}</div>
+          </div>
+          <div className="max-h-60 overflow-auto">
+            {oracleMarkets?.map((market) => (
+              <div
+                className="grid grid-cols-4 gap-1 capitalize mb-2 last:mb-0"
+                key={`oracle-market-${market.id}`}
+              >
+                <div className="col-span-1">
+                  {market.tradableInstrument.instrument.code}
+                </div>
+                <div
+                  className={classNames('col-span-1', {
+                    'dark:text-vega-light-300 text-vega-dark-300': ![
+                      MarketState.STATE_ACTIVE,
+                      MarketState.STATE_PROPOSED,
+                    ].includes(market.state),
+                  })}
+                >
+                  {MarketStateMapping[market.state]}
+                </div>
+                <div className="col-span-1">
+                  {
+                    <ExternalLink
+                      href={`${VEGA_EXPLORER_URL}/oracles/${market.tradableInstrument?.instrument.product?.dataSourceSpecForSettlementData.id}`}
+                      data-testid="block-explorer-link-settlement"
+                    >
+                      {t('Settlement')}
+                    </ExternalLink>
+                  }
+                </div>
+                <div className="col-span-1">
+                  {
+                    <ExternalLink
+                      href={`${VEGA_EXPLORER_URL}/oracles/${market.tradableInstrument?.instrument.product?.dataSourceSpecForTradingTermination.id}`}
+                      data-testid="block-explorer-link-termination"
+                    >
+                      {t('Termination')}
+                    </ExternalLink>
+                  }
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
--- a/libs/oracles/src/lib/hooks/index.ts
+++ b/libs/oracles/src/lib/hooks/index.ts
@ -0,0 +1,3 @@
+export * from './use-oracle-markets';
+export * from './use-oracle-proofs';
+export * from './use-oracle-spec-binding-data';
--- a/libs/oracles/src/lib/hooks/use-oracle-markets.ts
+++ b/libs/oracles/src/lib/hooks/use-oracle-markets.ts
@ -0,0 +1,50 @@
+import type { Provider } from '../oracle-schema';
+import type { OracleMarketSpecFieldsFragment } from '../__generated__/OracleMarketsSpec';
+import { useOracleMarketsSpecQuery } from '../__generated__/OracleMarketsSpec';
+
+export const useOracleMarkets = (
+  provider: Provider
+): OracleMarketSpecFieldsFragment[] | undefined => {
+  const signedProofs = provider.proofs.filter(
+    (proof) => proof.format === 'signed_message' && proof.available === true
+  );
+
+  const { data: markets } = useOracleMarketsSpecQuery();
+
+  const oracleMarkets = markets?.marketsConnection?.edges
+    ?.map((edge) => edge.node)
+    ?.filter((node) => {
+      const p = node.tradableInstrument.instrument.product;
+      const sourceType = p.dataSourceSpecForSettlementData.data.sourceType;
+      if (sourceType.__typename !== 'DataSourceDefinitionExternal') {
+        return false;
+      }
+      const signers = sourceType?.sourceType.signers;
+
+      const signerKeys = signers?.filter(Boolean).map((signer) => {
+        if (signer.signer.__typename === 'ETHAddress') {
+          return signer.signer.address;
+        }
+
+        if (signer.signer.__typename === 'PubKey') {
+          return signer.signer.key;
+        }
+
+        return undefined;
+      });
+
+      const signedProofsKeys = signedProofs.map((proof) => {
+        if ('public_key' in proof && proof.public_key) {
+          return proof.public_key;
+        }
+        if ('eth_address' in proof && proof.eth_address) {
+          return proof.eth_address;
+        }
+        return undefined;
+      });
+
+      const key = signedProofsKeys.find((key) => signerKeys?.includes(key));
+      return !!key;
+    });
+  return oracleMarkets;
+};
--- a/libs/oracles/src/lib/hooks/use-oracle-proofs.spec.ts
+++ b/libs/oracles/src/lib/hooks/use-oracle-proofs.spec.ts
@ -1,5 +1,5 @@
 import { renderHook, waitFor } from '@testing-library/react';
-import type { Provider } from './oracle-schema';
+import type { Provider } from '../oracle-schema';
 import { useOracleProofs, cache, invalidateCache } from './use-oracle-proofs';

 global.fetch = jest.fn();
--- a/libs/oracles/src/lib/hooks/use-oracle-proofs.ts
+++ b/libs/oracles/src/lib/hooks/use-oracle-proofs.ts
@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import type { Provider } from './oracle-schema';
-import { providersSchema } from './oracle-schema';
+import type { Provider } from '../oracle-schema';
+import { providersSchema } from '../oracle-schema';

 export let cache: {
  [url: string]: Provider[];
--- a/libs/oracles/src/lib/hooks/use-oracle-spec-binding-data.spec.tsx
+++ b/libs/oracles/src/lib/hooks/use-oracle-spec-binding-data.spec.tsx
@ -4,8 +4,8 @@ import { MockedProvider } from '@apollo/client/testing';
 import type { ReactNode } from 'react';
 import { useOracleSpecBindingData } from './use-oracle-spec-binding-data';
 import type { Property } from '@vegaprotocol/types';
-import type { OracleSpecDataConnectionQuery } from './__generated__/OracleSpecDataConnection';
-import { OracleSpecDataConnectionDocument } from './__generated__/OracleSpecDataConnection';
+import type { OracleSpecDataConnectionQuery } from '../__generated__/OracleSpecDataConnection';
+import { OracleSpecDataConnectionDocument } from '../__generated__/OracleSpecDataConnection';

 describe('useSettlementPrice', () => {
  const setup = (
--- a/libs/oracles/src/lib/hooks/use-oracle-spec-binding-data.ts
+++ b/libs/oracles/src/lib/hooks/use-oracle-spec-binding-data.ts
@ -1,4 +1,4 @@
-import { useOracleSpecDataConnectionQuery } from './__generated__/OracleSpecDataConnection';
+import { useOracleSpecDataConnectionQuery } from '../__generated__/OracleSpecDataConnection';

 export const useOracleSpecBindingData = (
  oracleSpecId: string | undefined,
--- a/libs/oracles/src/lib/index.ts
+++ b/libs/oracles/src/lib/index.ts
@ -2,5 +2,4 @@ export * from './__generated__';
 export * from './components';
 export * from './oracle-schema';
 export * from './oracle-spec-data-connection.mock';
-export * from './use-oracle-proofs';
-export * from './use-oracle-spec-binding-data';
+export * from './hooks';
--- a/libs/oracles/tsconfig.lib.json
+++ b/libs/oracles/tsconfig.lib.json
@ -6,7 +6,7 @@
  },
  "files": [
    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../node_modules/@nrwl/next/typings/image.d.ts"
  ],
  "exclude": [
    "**/*.spec.ts",
--- a/libs/ui-toolkit/src/components/dialog/dialog.tsx
+++ b/libs/ui-toolkit/src/components/dialog/dialog.tsx
@ -13,7 +13,7 @@ interface DialogProps {
  onChange?: (isOpen: boolean) => void;
  onCloseAutoFocus?: (e: Event) => void;
  onInteractOutside?: (e: Event) => void;
-  title?: string;
+  title?: string | ReactNode;
  icon?: ReactNode;
  intent?: Intent;
  size?: 'small' | 'medium';
--- a/libs/ui-toolkit/src/components/link/link.spec.tsx
+++ b/libs/ui-toolkit/src/components/link/link.spec.tsx
@ -40,7 +40,7 @@ describe('ExternalLink', () => {
    render(<ExternalLink href="https://vega.xyz/">Go to Vega</ExternalLink>);
    const link = screen.getByTestId('external-link');
    expect(link.children.length).toEqual(2);
-    expect(link.children[1].tagName.toUpperCase()).toEqual('SVG');
+    expect(link.children[1].tagName.toUpperCase()).toEqual('SPAN');
  });

  it('should have an underlined text part', () => {
--- a/libs/ui-toolkit/src/components/link/link.tsx
+++ b/libs/ui-toolkit/src/components/link/link.tsx
@ -1,7 +1,6 @@
-import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import type { ReactNode, AnchorHTMLAttributes } from 'react';
-import { Icon } from '../icon';
+import { VegaIcon, VegaIconNames } from '../icon';

 type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
  children?: ReactNode;
@ -24,7 +23,7 @@ export const Link = ({ className, children, ...props }: LinkProps) => {
  };

  // if no href is passed just render a span, this is so that we can wrap an
-  // element with our links styles with a react router link compoment
+  // element with our links styles with a react router link component
  if (!props.href) {
    return (
      <span {...shared} {...props}>
@ -43,7 +42,10 @@ Link.displayName = 'Link';

 export const ExternalLink = ({ children, className, ...props }: LinkProps) => (
  <Link
-    className={classNames(className, 'inline-flex items-baseline')}
+    className={classNames(
+      className,
+      'inline-flex items-baseline underline-offset-4'
+    )}
    target="_blank"
    data-testid="external-link"
    rel="noreferrer nofollow noopener"
@ -56,7 +58,7 @@ export const ExternalLink = ({ children, className, ...props }: LinkProps) => (
        >
          {children}
        </span>
-        <Icon size={3} name={IconNames.SHARE} className="ml-1" />
+        <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} size={13} />
      </>
    ) : (
      children