feat(announcements): announcements (#3252)

Co-authored-by: Mikołaj Młodzikowski <mikolaj.mlodzikowski@gmail.com>
2023-03-29 15:20:49 +02:00 · 2023-03-29 15:20:49 +02:00 · 528fd96721
commit 528fd96721
parent 155923ff8e
63 changed files with 1104 additions and 94 deletions
--- a/.github/workflows/pr-trigger.yml
+++ b/.github/workflows/pr-trigger.yml
@ -18,6 +18,7 @@ jobs:
      - name: Checkout frontend mono repo
        uses: actions/checkout@v3
        with:
+          # We need to fetch all branches and commits so that Nx affected has a base to compare against.
          fetch-depth: 0

      - name: Check node version
@ -33,10 +34,9 @@ jobs:

      # Check SHAs
      - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@v2
+        uses: nrwl/nx-set-shas@v3
        with:
-          main-branch-name: ${{ github.base_ref || github.ref_name }}
-          set-environment-variables-for-job: true
+          main-branch-name: develop

      # See affected apps
      - name: See affected apps
@ -44,8 +44,36 @@ jobs:
          nx_version=$(cat package.json | grep '"nx"' | cut -d ':' -f 2 | tr -d '",[:space:]')
          rm package.json yarn.lock
          yarn add nx@$nx_version
-          affected=$(yarn nx print-affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --select=projects)
+
+          echo ">>>> debug"
+          echo "NX Version: $nx_version"
+          echo "NX_BASE: ${{ env.NX_BASE }}"
+          echo "NX_HEAD: ${{ env.NX_HEAD }}"
+
+          # echo "Main branch name: ${{ github.base_ref || github.ref_name }}"
+          # echo "git rev-parse HEAD: $(git rev-parse HEAD)"
+          # echo "Head: ${{ github.head_ref }}"
+
+          # echo "command to execute: 'yarn nx print-affected --base=${{ github.base_ref || github.ref_name }} --head=${{ github.head_ref }} --select=projects'"
+
+          # merge_base=$(git merge-base origin/develop HEAD)
+          # echo "git merge-base origin/develop HEAD: $merge_base"
+
+          # head_sha="${{ github.event.pull_request.head.sha || github.sha }}"
+          # echo "Head SHA: $head_sha"
+
+          # echo "command to execute (without nx-set-sha): 'yarn nx print-affected --base=$merge_base --head=$head_sha --select=projects'"
+          echo ">>>> eof debug"
+
+          # affected_1=$(yarn nx print-affected --base=$merge_base --head=$head_sha --select=projects || true)
+          # echo -n "Affected projects (allowed to fail): $affected_1"
+
+          # affected=$(yarn nx print-affected --base=${{ github.base_ref || github.ref_name }} --head=${{ github.head_ref }} --select=projects)
+          # echo -n "Affected projects: $affected"
+
+          affected="$(yarn nx print-affected --base=${{ env.NX_BASE }} --head=HEAD --select=projects)"
          echo -n "Affected projects: $affected"
+
          projects_e2e=""
          if [[ $affected == *"governance"* ]]; then projects_e2e+='"governance-e2e" '; fi
          if [[ $affected == *"trading"* ]]; then projects_e2e+='"trading-e2e" '; fi
--- a/.github/workflows/publish-npm.yml
+++ b/.github/workflows/publish-npm.yml
@ -8,6 +8,7 @@ on:
        required: true
        type: choice
        options:
+          - announcements
          - ui-toolkit
          - react-helpers
          - tailwindcss-config
--- a/apps/explorer/.env.capsule
+++ b/apps/explorer/.env.capsule
@ -3,6 +3,7 @@ NX_TENDERMINT_URL=http://localhost:26617
 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
 NX_VEGA_ENV=CUSTOM
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/main/announcements.json

 # App flags
 NX_EXPLORER_ASSETS=1
--- a/apps/explorer/.env.devnet
+++ b/apps/explorer/.env.devnet
@ -8,3 +8,4 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://dev.token.vega.xyz
 NX_VEGA_URL=https://api.devnet1.vega.xyz/graphql
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/devnet1/vegawallet-devnet1.toml
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
--- a/apps/explorer/.env.mainnet
+++ b/apps/explorer/.env.mainnet
@ -6,3 +6,4 @@ NX_VEGA_ENV=MAINNET
 NX_BLOCK_EXPLORER=https://be.explorer.vega.xyz/rest/
 NX_ETHERSCAN_URL=https://etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://token.vega.xyz
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
--- a/apps/explorer/.env.mirror
+++ b/apps/explorer/.env.mirror
@ -6,6 +6,7 @@ NX_VEGA_ENV=MIRROR
 NX_BLOCK_EXPLORER=https://be.mainnet-mirror.vega.xyz/rest/
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://mainnet-mirror.token.vega.xyz
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json

 # App flags
 NX_EXPLORER_ASSETS=1
--- a/apps/explorer/.env.sandbox
+++ b/apps/explorer/.env.sandbox
@ -9,3 +9,4 @@ NX_TENDERMINT_URL=https://tm.sandbox.vega.xyz
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.sandbox.vega.xyz/websocket
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://sandbox.token.vega.xyz
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
--- a/apps/explorer/.env.stagnet1
+++ b/apps/explorer/.env.stagnet1
@ -11,3 +11,4 @@ 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_VEGA_GOVERNANCE_URL=https://stagnet1.token.vega.xyz
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
--- a/apps/explorer/.env.stagnet3
+++ b/apps/explorer/.env.stagnet3
@ -5,3 +5,4 @@ NX_VEGA_ENV=STAGNET3
 NX_BLOCK_EXPLORER=https://be.stagnet3.vega.xyz/rest
 NX_VEGA_GOVERNANCE_URL=https://stagnet3.token.vega.xyz
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega-dev-releases/releases/
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
--- a/apps/explorer/.env.testnet
+++ b/apps/explorer/.env.testnet
@ -8,3 +8,4 @@ NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://token.fairground.wtf
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
--- a/apps/explorer/.env.validator-testnet
+++ b/apps/explorer/.env.validator-testnet
@ -5,6 +5,7 @@ NX_VEGA_URL=https://api-validators-testnet.vega.rocks/graphql
 NX_VEGA_REST=https://api-validators-testnet.vega.rocks/
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json

 NX_VEGA_GOVERNANCE_URL=https://validator-testnet.governance.vega.xyz
 NX_TENDERMINT_URL=https://tm-be.validators-testnet.vega.rocks
--- a/apps/explorer/.env.vegacapsule
+++ b/apps/explorer/.env.vegacapsule
@ -4,3 +4,4 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26607/websocket
 NX_VEGA_ENV=CUSTOM
 NX_BLOCK_EXPLORER=
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/main/announcements.json
--- a/apps/explorer/src/app/routes/layout.tsx
+++ b/apps/explorer/src/app/routes/layout.tsx
@ -3,16 +3,14 @@ import {
  useAssetDetailsDialogStore,
 } from '@vegaprotocol/assets';
 import { t } from '@vegaprotocol/i18n';
+import { useEnvironment } from '@vegaprotocol/environment';
+import { AnnouncementBanner } from '@vegaprotocol/announcements';
 import {
-  AnnouncementBanner,
  BackgroundVideo,
  BreadcrumbsContainer,
  ButtonLink,
-  ExternalLink,
-  Icon,
 } from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
-import { useState } from 'react';
 import {
  isRouteErrorResponse,
  Link,
@ -37,35 +35,9 @@ const DialogsContainer = () => {
  );
 };

-const MainnetSimAd = () => {
-  const [shouldDisplayBanner, setShouldDisplayBanner] = useState<boolean>(true);
-
-  // Return an empty div so that the grid layout in _app.page.ts
-  // renders correctly
-  if (!shouldDisplayBanner) {
-    return <div />;
-  }
-
-  return (
-    <AnnouncementBanner>
-      <div className="grid grid-cols-[auto_1fr] gap-4 font-alpha calt uppercase text-center text-lg text-white">
-        <button
-          className="flex items-center"
-          onClick={() => setShouldDisplayBanner(false)}
-        >
-          <Icon name="cross" className="w-6 h-6" ariaLabel="dismiss" />
-        </button>
-        <div>
-          <span className="pr-4">Mainnet sim 3 is live!</span>
-          <ExternalLink href="https://fairground.wtf/">Learn more</ExternalLink>
-        </div>
-      </div>
-    </AnnouncementBanner>
-  );
-};
-
 export const Layout = () => {
  const isHome = Boolean(useMatch(Routes.HOME));
+  const { ANNOUNCEMENTS_CONFIG_URL } = useEnvironment();
  return (
    <>
      <div
@ -79,7 +51,12 @@ export const Layout = () => {
        )}
      >
        <div>
-          <MainnetSimAd />
+          {ANNOUNCEMENTS_CONFIG_URL && (
+            <AnnouncementBanner
+              app="explorer"
+              configUrl={ANNOUNCEMENTS_CONFIG_URL}
+            />
+          )}
          <Header />
        </div>
        <div>
--- a/apps/governance/.env
+++ b/apps/governance/.env
@ -13,6 +13,7 @@ NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-stagnet3-k8s.ops.vega.xyz
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/main/announcements.json

 #Test configuration variables
 CYPRESS_FAIRGROUND=false
--- a/apps/governance/.env.capsule
+++ b/apps/governance/.env.capsule
@ -16,6 +16,7 @@ NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-stagnet3-k8s.ops.vega.xyz
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/main/announcements.json

 #Test configuration variables
 CYPRESS_FAIRGROUND=false
--- a/apps/governance/.env.devnet
+++ b/apps/governance/.env.devnet
@ -10,3 +10,4 @@ NX_VEGA_EXPLORER_URL=https://dev.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-devnet1-k8s.ops.vega.xyz
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
--- a/apps/governance/.env.mainnet
+++ b/apps/governance/.env.mainnet
@ -11,3 +11,4 @@ NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40:87edc2605e544f888305d7fc4a9141bd@o286262.ingest.sentry.io/5882996
 NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-k8s.ops.vega.xyz
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
--- a/apps/governance/.env.mirror
+++ b/apps/governance/.env.mirror
@ -9,3 +9,4 @@ NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_EXPLORER_URL=https://mirror.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
 NX_DELEGATIONS_PAGINATION=50
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
--- a/apps/governance/.env.sandbox
+++ b/apps/governance/.env.sandbox
@ -6,3 +6,4 @@ NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-inter
 NX_VEGA_EXPLORER_URL=https://sandbox.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_DELEGATIONS_PAGINATION=50
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
--- a/apps/governance/.env.stagnet1
+++ b/apps/governance/.env.stagnet1
@ -7,3 +7,4 @@ NX_VEGA_EXPLORER_URL=https://stagnet1.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
--- a/apps/governance/.env.stagnet3
+++ b/apps/governance/.env.stagnet3
@ -8,3 +8,4 @@ NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-stagnet3-k8s.ops.vega.xyz
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
--- a/apps/governance/.env.testnet
+++ b/apps/governance/.env.testnet
@ -11,3 +11,4 @@ NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-testnet-k8s.ops.vega.xyz
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
--- a/apps/governance/src/components/page-templates/template-sidebar.tsx
+++ b/apps/governance/src/components/page-templates/template-sidebar.tsx
@ -1,9 +1,6 @@
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
-import {
-  ViewingAsBanner,
-  AnnouncementBanner,
-  ExternalLink,
-} from '@vegaprotocol/ui-toolkit';
+import { ViewingAsBanner } from '@vegaprotocol/ui-toolkit';
+import { AnnouncementBanner } from '@vegaprotocol/announcements';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import React from 'react';

@ -15,18 +12,16 @@ export interface TemplateSidebarProps {
 }

 export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
-  const { VEGA_ENV } = useEnvironment();
+  const { VEGA_ENV, ANNOUNCEMENTS_CONFIG_URL } = useEnvironment();
  const { isReadOnly, pubKey, disconnect } = useVegaWallet();
  return (
    <>
-      <AnnouncementBanner>
-        <div className="font-alpha calt uppercase text-center text-lg text-white">
-          <span className="pr-4">Wait no longer, SIM3 is here!</span>
-          <ExternalLink href="https://fairground.wtf/sim3">
-            Learn more
-          </ExternalLink>
-        </div>
-      </AnnouncementBanner>
+      {ANNOUNCEMENTS_CONFIG_URL && (
+        <AnnouncementBanner
+          app="governance"
+          configUrl={ANNOUNCEMENTS_CONFIG_URL}
+        />
+      )}
      <Nav theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} />
      {isReadOnly ? (
        <ViewingAsBanner pubKey={pubKey} disconnect={disconnect} />
--- a/apps/trading/.env
+++ b/apps/trading/.env
@ -10,3 +10,4 @@ NX_VEGA_TOKEN_URL=https://token.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/main/announcements.json
--- a/apps/trading/.env.capsule
+++ b/apps/trading/.env.capsule
@ -11,6 +11,7 @@ NX_VEGA_URL=http://localhost:3028/query
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json

 NX_ETH_LOCAL_PROVIDER_URL=http://localhost:8545/
 NX_ETH_WALLET_MNEMONIC="ozone access unlock valid olympic save include omit supply green clown session"
--- a/apps/trading/.env.devnet
+++ b/apps/trading/.env.devnet
@ -10,4 +10,5 @@ NX_VEGA_TOKEN_URL=https://token.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega-dev-releases/releases
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
--- a/apps/trading/.env.mainnet
+++ b/apps/trading/.env.mainnet
@ -9,4 +9,5 @@ NX_VEGA_TOKEN_URL=https://token.vega.xyz
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
--- a/apps/trading/.env.stagnet1
+++ b/apps/trading/.env.stagnet1
@ -10,4 +10,5 @@ NX_VEGA_TOKEN_URL=https://stagnet1.token.vega.xyz
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
--- a/apps/trading/.env.stagnet3
+++ b/apps/trading/.env.stagnet3
@ -10,4 +10,5 @@ NX_VEGA_TOKEN_URL=https://token.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega-dev-releases/releases
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
--- a/apps/trading/.env.testnet
+++ b/apps/trading/.env.testnet
@ -10,4 +10,5 @@ NX_VEGA_TOKEN_URL=https://token.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
--- a/apps/trading/.env.validator-testnet
+++ b/apps/trading/.env.validator-testnet
@ -10,4 +10,5 @@ NX_VEGA_TOKEN_URL=https://validator-testnet.governance.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
--- a/apps/trading/components/banner/banner.tsx
+++ b/apps/trading/components/banner/banner.tsx
@ -1,39 +1,16 @@
-import {
-  AnnouncementBanner,
-  ExternalLink,
-  Icon,
-} from '@vegaprotocol/ui-toolkit';
-import { useGlobalStore } from '../../stores';
-import React from 'react';
+import { AnnouncementBanner } from '@vegaprotocol/announcements';
+import { useEnvironment } from '@vegaprotocol/environment';

 export const Banner = () => {
-  const { update, shouldDisplayAnnouncementBanner } = useGlobalStore(
-    (store) => ({
-      update: store.update,
-      shouldDisplayAnnouncementBanner: store.shouldDisplayAnnouncementBanner,
-    })
-  );
+  const { ANNOUNCEMENTS_CONFIG_URL } = useEnvironment();

  // Return an empty div so that the grid layout in _app.page.ts
  // renders correctly
-  if (!shouldDisplayAnnouncementBanner) {
+  if (!ANNOUNCEMENTS_CONFIG_URL) {
    return <div />;
  }

  return (
-    <AnnouncementBanner>
-      <div className="grid grid-cols-[auto_1fr] gap-4 font-alpha calt uppercase text-center text-lg text-white">
-        <button
-          className="flex items-center"
-          onClick={() => update({ shouldDisplayAnnouncementBanner: false })}
-        >
-          <Icon name="cross" className="w-6 h-6" ariaLabel="dismiss" />
-        </button>
-        <div>
-          <span className="pr-4">Mainnet sim 3 is live!</span>
-          <ExternalLink href="https://fairground.wtf/">Learn more</ExternalLink>
-        </div>
-      </div>
-    </AnnouncementBanner>
+    <AnnouncementBanner app="console" configUrl={ANNOUNCEMENTS_CONFIG_URL} />
  );
 };
--- a/apps/trading/stores/global.ts
+++ b/apps/trading/stores/global.ts
@ -7,7 +7,6 @@ interface GlobalStore {
  marketId: string | null;
  update: (store: Partial<Omit<GlobalStore, 'update'>>) => void;
  shouldDisplayWelcomeDialog: boolean;
-  shouldDisplayAnnouncementBanner: boolean;
 }

 interface PageTitleStore {
@ -19,7 +18,6 @@ export const useGlobalStore = create<GlobalStore>()((set) => ({
  nodeSwitcherDialog: false,
  marketId: LocalStorage.getItem('marketId') || null,
  shouldDisplayWelcomeDialog: false,
-  shouldDisplayAnnouncementBanner: true,
  update: (newState) => {
    set(
      produce((state: GlobalStore) => {
--- a/libs/announcements/.babelrc
+++ b/libs/announcements/.babelrc
@ -0,0 +1,4 @@
+{
+  "presets": ["@nrwl/next/babel"],
+  "plugins": []
+}
--- a/libs/announcements/.eslintrc.json
+++ b/libs/announcements/.eslintrc.json
@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "__generated__", "__generated___"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
--- a/libs/announcements/.storybook/main.js
+++ b/libs/announcements/.storybook/main.js
@ -0,0 +1,28 @@
+const rootMain = require('../../../.storybook/main');
+
+module.exports = {
+  ...rootMain,
+
+  core: { ...rootMain.core, builder: 'webpack5' },
+
+  stories: [
+    ...rootMain.stories,
+    '../src/lib/**/*.stories.mdx',
+    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    ...rootMain.addons,
+    '@nrwl/react/plugins/storybook',
+    'storybook-addon-themes',
+  ],
+  webpackFinal: async (config, { configType }) => {
+    // apply any global webpack configs that might have been specified in .storybook/main.js
+    if (rootMain.webpackFinal) {
+      config = await rootMain.webpackFinal(config, { configType });
+    }
+
+    // add your own webpack tweaks if needed
+
+    return config;
+  },
+};
--- a/libs/announcements/.storybook/preview-head.html
+++ b/libs/announcements/.storybook/preview-head.html
@ -0,0 +1 @@
+<link rel="stylesheet" href="https://static.vega.xyz/fonts.css" />
--- a/libs/announcements/.storybook/preview.js
+++ b/libs/announcements/.storybook/preview.js
@ -0,0 +1,2 @@
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+export * from '../../ui-toolkit/.storybook/preview';
--- a/libs/announcements/.storybook/styles.scss
+++ b/libs/announcements/.storybook/styles.scss
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/libs/announcements/.storybook/tsconfig.json
+++ b/libs/announcements/.storybook/tsconfig.json
@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": ""
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts",
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "../**/*.spec.ts",
+    "../**/*.spec.js",
+    "../**/*.spec.tsx",
+    "../**/*.spec.jsx",
+    "jest.config.ts"
+  ],
+  "include": ["../src/**/*", "*.js"]
+}
--- a/libs/announcements/README.md
+++ b/libs/announcements/README.md
@ -0,0 +1,11 @@
+# announcements
+
+This library was generated with [Nx](https://nx.dev).
+
+## Creating announcements
+
+The announcements config lives in the [announcements repo](https://github.com/vegaprotocol/announcements). To create app/env specific announcements, check out the readme in the repo!
+
+## Running unit tests
+
+Run `nx test announcements` to execute the unit tests via [Jest](https://jestjs.io).
--- a/libs/announcements/jest.config.ts
+++ b/libs/announcements/jest.config.ts
@ -0,0 +1,16 @@
+/* eslint-disable */
+export default {
+  displayName: 'announcements',
+  preset: '../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+    },
+  },
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/announcements',
+  setupFilesAfterEnv: ['./src/setup-tests.ts'],
+};
--- a/libs/announcements/package.json
+++ b/libs/announcements/package.json
@ -0,0 +1,4 @@
+{
+  "name": "@vegaprotocol/announcements",
+  "version": "0.0.1"
+}
--- a/libs/announcements/project.json
+++ b/libs/announcements/project.json
@ -0,0 +1,81 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/announcements/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nrwl/web:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/accounts",
+        "tsConfig": "libs/announcements/tsconfig.lib.json",
+        "project": "libs/announcements/package.json",
+        "entryFile": "libs/announcements/src/index.ts",
+        "external": ["react/jsx-runtime"],
+        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+        "compiler": "babel",
+        "assets": [
+          {
+            "glob": "libs/announcements/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/announcements/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/libs/announcements"],
+      "options": {
+        "jestConfig": "libs/announcements/jest.config.ts",
+        "passWithNoTests": true
+      }
+    },
+    "storybook": {
+      "executor": "@nrwl/storybook:storybook",
+      "options": {
+        "uiFramework": "@storybook/react",
+        "port": 4400,
+        "config": {
+          "configFolder": "libs/announcements/.storybook"
+        }
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nrwl/storybook:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "uiFramework": "@storybook/react",
+        "outputPath": "dist/storybook/announcements",
+        "config": {
+          "configFolder": "libs/announcements/.storybook"
+        }
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-spec": {
+      "executor": "@nrwl/workspace:run-commands",
+      "outputs": [],
+      "options": {
+        "command": "yarn tsc --project ./libs/announcements/tsconfig.spec.json"
+      }
+    }
+  }
+}
--- a/libs/announcements/src/index.ts
+++ b/libs/announcements/src/index.ts
@ -0,0 +1 @@
+export * from './lib';
--- a/libs/announcements/src/lib/announcements.spec.tsx
+++ b/libs/announcements/src/lib/announcements.spec.tsx
@ -0,0 +1,207 @@
+import fetchMock from 'fetch-mock';
+import { addDays } from 'date-fns';
+import { act, render, waitFor } from '@testing-library/react';
+import { AnnouncementBanner } from './announcements';
+
+const MOCK_URL = 'http://somewhere.com/config.json';
+const MOCK_ANNOUNCEMENT = {
+  text: 'Attention everyone!',
+  url: 'http://click.me/',
+  urlText: 'Read more',
+};
+
+describe('Announcements', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+    fetchMock.reset();
+  });
+
+  it('does not display the banner when fetching announcements fails', async () => {
+    fetchMock.get(MOCK_URL, 500);
+    const { container } = render(
+      <AnnouncementBanner app="console" configUrl={MOCK_URL} />
+    );
+    await waitFor(() => {
+      expect(container.firstChild).toBeEmptyDOMElement();
+    });
+  });
+
+  it('does not display the banner when there are no announcements', async () => {
+    fetchMock.get(MOCK_URL, {
+      console: [],
+      governance: [],
+      explorer: [],
+      wallet: [],
+      website: [],
+    });
+    const { container } = render(
+      <AnnouncementBanner app="console" configUrl={MOCK_URL} />
+    );
+    await waitFor(() => {
+      expect(container.firstChild).toBeEmptyDOMElement();
+    });
+  });
+
+  it('shows the correct announcement', async () => {
+    fetchMock.get(MOCK_URL, {
+      console: [
+        {
+          text: 'Console announcement',
+        },
+      ],
+      governance: [
+        {
+          text: 'Governance announcement',
+        },
+      ],
+      explorer: [
+        {
+          text: 'Explorer announcement',
+        },
+      ],
+      wallet: [
+        {
+          text: 'Wallet announcement',
+        },
+      ],
+      website: [
+        {
+          text: 'Website announcement',
+        },
+      ],
+    });
+
+    const { rerender, findByText } = render(
+      <AnnouncementBanner app="console" configUrl={MOCK_URL} />
+    );
+    expect(await findByText('Console announcement')).toBeVisible();
+
+    rerender(<AnnouncementBanner app="governance" configUrl={MOCK_URL} />);
+    expect(await findByText('Governance announcement')).toBeVisible();
+
+    rerender(<AnnouncementBanner app="explorer" configUrl={MOCK_URL} />);
+    expect(await findByText('Explorer announcement')).toBeVisible();
+
+    rerender(<AnnouncementBanner app="wallet" configUrl={MOCK_URL} />);
+    expect(await findByText('Wallet announcement')).toBeVisible();
+
+    rerender(<AnnouncementBanner app="website" configUrl={MOCK_URL} />);
+    expect(await findByText('Website announcement')).toBeVisible();
+  });
+
+  it('shows the announcement link', async () => {
+    fetchMock.get(MOCK_URL, {
+      console: [MOCK_ANNOUNCEMENT],
+      governance: [],
+      explorer: [],
+      wallet: [],
+      website: [],
+    });
+
+    const { findByText, findByRole } = render(
+      <AnnouncementBanner app="console" configUrl={MOCK_URL} />
+    );
+    const text = await findByText(MOCK_ANNOUNCEMENT.text);
+    const link = (await findByRole('link')) as HTMLAnchorElement;
+    const linkText = await findByText(MOCK_ANNOUNCEMENT.urlText);
+
+    expect(text).toBeVisible();
+    expect(link).toBeVisible();
+    expect(link.href).toBe(MOCK_ANNOUNCEMENT.url);
+    expect(linkText).toBeVisible();
+  });
+
+  it('shows the first announcement', async () => {
+    fetchMock.get(MOCK_URL, {
+      console: [
+        {
+          text: 'First text',
+        },
+        {
+          text: 'Second text',
+        },
+      ],
+      governance: [],
+      explorer: [],
+      wallet: [],
+      website: [],
+    });
+
+    const { queryByText } = render(
+      <AnnouncementBanner app="console" configUrl={MOCK_URL} />
+    );
+
+    await waitFor(() => {
+      expect(queryByText('First text')).toBeInTheDocument();
+    });
+  });
+
+  it('does not show expired announcements', async () => {
+    fetchMock.get(MOCK_URL, {
+      console: [
+        {
+          text: 'Expired text',
+          timing: {
+            to: new Date(0).toISOString(),
+          },
+        },
+        {
+          text: 'Live text',
+        },
+      ],
+      governance: [],
+      explorer: [],
+      wallet: [],
+      website: [],
+    });
+
+    const { queryByText } = render(
+      <AnnouncementBanner app="console" configUrl={MOCK_URL} />
+    );
+
+    await waitFor(() => {
+      expect(queryByText('Live text')).toBeInTheDocument();
+    });
+  });
+
+  it('hides announcements after they expire', async () => {
+    const now = new Date();
+    const tomorrow = addDays(now, 1);
+
+    fetchMock.get(MOCK_URL, {
+      console: [
+        {
+          text: 'Live text',
+          timing: {
+            to: tomorrow.toISOString(),
+          },
+        },
+      ],
+      governance: [],
+      explorer: [],
+      wallet: [],
+      website: [],
+    });
+
+    const { queryByText } = render(
+      <AnnouncementBanner app="console" configUrl={MOCK_URL} />
+    );
+
+    await waitFor(() => {
+      expect(queryByText('Live text')).toBeInTheDocument();
+    });
+
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+
+    await waitFor(() => {
+      expect(queryByText('Live text')).not.toBeInTheDocument();
+    });
+  });
+});
--- a/libs/announcements/src/lib/announcements.stories.tsx
+++ b/libs/announcements/src/lib/announcements.stories.tsx
@ -0,0 +1,57 @@
+import fetchMock from 'fetch-mock';
+import type { Story, Meta } from '@storybook/react';
+import { AnnouncementBanner } from './announcements';
+
+export default {
+  component: AnnouncementBanner,
+  title: 'AnnouncementBanner',
+} as Meta;
+
+const MOCK_URL = 'http://somewhere.com/config.json';
+fetchMock.get(MOCK_URL, {
+  console: [
+    {
+      text: 'Console announcement',
+      url: 'http://vega.xyz',
+      urlText: 'Read more',
+    },
+  ],
+  governance: [
+    {
+      text: 'Governance announcement',
+      url: 'http://vega.xyz',
+      urlText: 'Read more',
+    },
+  ],
+  explorer: [
+    {
+      text: 'Explorer announcement',
+      url: 'http://vega.xyz',
+      urlText: 'Read more',
+    },
+  ],
+  wallet: [
+    {
+      text: 'Wallet announcement',
+      url: 'http://vega.xyz',
+      urlText: 'Read more',
+    },
+  ],
+  website: [
+    {
+      text: 'Website announcement',
+      url: 'http://vega.xyz',
+      urlText: 'Read more',
+    },
+  ],
+});
+
+const Template: Story = (args) => (
+  <AnnouncementBanner app={args.app} configUrl={args.configUrl} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  configUrl: MOCK_URL,
+  app: 'console',
+};
--- a/libs/announcements/src/lib/announcements.tsx
+++ b/libs/announcements/src/lib/announcements.tsx
@ -0,0 +1,96 @@
+import { useEffect, useState } from 'react';
+import type { AppNameType, Announcement } from './schema';
+import { useAnnouncement } from './hooks/use-announcement';
+import {
+  Icon,
+  AnnouncementBanner as Banner,
+  ExternalLink,
+} from '@vegaprotocol/ui-toolkit';
+
+export type AnnouncementBannerProps = {
+  app: AppNameType;
+  configUrl: string;
+};
+
+// run only if below the allowed maximum delay ~24.8 days (https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value)
+const MAX_DELAY = 2147483648;
+
+const doesStartInTheFuture = (now: Date, data: Announcement) => {
+  return data.timing?.from
+    ? now < data.timing.from &&
+        data.timing.from.valueOf() - now.valueOf() < MAX_DELAY
+    : false;
+};
+
+const doesEndInTheFuture = (now: Date, data: Announcement) => {
+  return data.timing?.to
+    ? now < data.timing.to &&
+        data.timing.to.valueOf() - now.valueOf() < MAX_DELAY
+    : false;
+};
+
+export const AnnouncementBanner = ({
+  app,
+  configUrl,
+}: AnnouncementBannerProps) => {
+  const [isVisible, setVisible] = useState(false);
+  const { data, reload } = useAnnouncement(app, configUrl);
+
+  useEffect(() => {
+    const now = new Date();
+    let stampFrom: NodeJS.Timeout;
+    let stampTo: NodeJS.Timeout;
+
+    if (data) {
+      const startsInTheFuture = doesStartInTheFuture(now, data);
+      const endsInTheFuture = doesEndInTheFuture(now, data);
+
+      if (!startsInTheFuture) {
+        setVisible(true);
+      }
+
+      if (data.timing?.from && startsInTheFuture) {
+        stampFrom = setTimeout(() => {
+          setVisible(true);
+        }, data.timing.from.valueOf() - now.valueOf());
+      }
+
+      if (data.timing?.to && endsInTheFuture) {
+        stampTo = setTimeout(() => {
+          setVisible(false);
+          reload();
+        }, data.timing.to.valueOf() - now.valueOf());
+      }
+    }
+
+    return () => {
+      clearTimeout(stampFrom);
+      clearTimeout(stampTo);
+    };
+  }, [data, reload, setVisible]);
+
+  if (!data || !isVisible) {
+    return <div />;
+  }
+
+  return (
+    <Banner className="relative px-10">
+      <button
+        className="absolute left-0 top-0 w-10 h-full flex items-center justify-center"
+        data-testid="app-announcement-close"
+        onClick={() => setVisible(false)}
+      >
+        <Icon name="cross" className="w-6 h-6" ariaLabel="dismiss" />
+      </button>
+      <div
+        data-testid="app-announcement"
+        className="relative font-alpha flex gap-2 justify-center calt uppercase text-center text-lg text-white"
+      >
+        <span className="pr-4">{data.text}</span>
+        {data.urlText && data.url && (
+          <ExternalLink href={data.url}>{data.urlText}</ExternalLink>
+        )}
+      </div>
+    </Banner>
+  );
+};
--- a/libs/announcements/src/lib/hooks/use-announcement.spec.ts
+++ b/libs/announcements/src/lib/hooks/use-announcement.spec.ts
@ -0,0 +1,91 @@
+import fetchMock from 'fetch-mock';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useAnnouncement } from './use-announcement';
+
+const MOCK_URL = 'http://somewhere.com/config.json';
+const MOCK_ANNOUNCEMENT = {
+  text: 'Attention everyone!',
+  url: 'http://click.me/',
+  urlText: 'Read more',
+};
+
+describe('Use announcement hook', () => {
+  afterEach(() => {
+    fetchMock.reset();
+  });
+
+  it('loads the data', async () => {
+    fetchMock.get(MOCK_URL, {
+      console: [MOCK_ANNOUNCEMENT],
+      governance: [],
+      explorer: [],
+      wallet: [],
+    });
+    const { result } = renderHook(() => useAnnouncement('console', MOCK_URL));
+    expect(result.current.loading).toBe(true);
+    expect(result.current.data).toEqual(null);
+    expect(result.current.error).toBe(null);
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(result.current.data).toEqual(MOCK_ANNOUNCEMENT);
+      expect(result.current.error).toBe(null);
+    });
+  });
+
+  it('returns an error when cannot load data', async () => {
+    fetchMock.get(MOCK_URL, 404);
+    const { result } = renderHook(() => useAnnouncement('console', MOCK_URL));
+    expect(result.current.loading).toBe(true);
+    expect(result.current.data).toEqual(null);
+    expect(result.current.error).toBe(null);
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(result.current.data).toBe(null);
+      expect(result.current.error).not.toBe(null);
+    });
+  });
+
+  it('returns an error when data is malformed', async () => {
+    fetchMock.get(MOCK_URL, {
+      some: 'json',
+    });
+    const { result } = renderHook(() => useAnnouncement('console', MOCK_URL));
+    expect(result.current.loading).toBe(true);
+    expect(result.current.data).toEqual(null);
+    expect(result.current.error).toBe(null);
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(result.current.data).toBe(null);
+      expect(result.current.error).not.toBe(null);
+    });
+  });
+
+  it('filters out expired announcements', async () => {
+    fetchMock.get(MOCK_URL, {
+      console: [
+        {
+          ...MOCK_ANNOUNCEMENT,
+          timing: {
+            to: new Date(0).toISOString(),
+          },
+        },
+      ],
+      governance: [],
+      explorer: [],
+      wallet: [],
+    });
+    const { result } = renderHook(() => useAnnouncement('console', MOCK_URL));
+    expect(result.current.loading).toBe(true);
+    expect(result.current.data).toEqual(null);
+    expect(result.current.error).toBe(null);
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(result.current.data).toBe(null);
+      expect(result.current.error).toBe(null);
+    });
+  });
+});
--- a/libs/announcements/src/lib/hooks/use-announcement.ts
+++ b/libs/announcements/src/lib/hooks/use-announcement.ts
@ -0,0 +1,77 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { AppNameType, Announcement } from '../schema';
+import { AnnouncementsSchema } from '../schema';
+
+const getData = async (name: AppNameType, url: string) => {
+  const now = new Date();
+  const response = await fetch(url);
+  const data = await response.json();
+  const parsed = AnnouncementsSchema.parse(data);
+
+  const list = parsed[name] || [];
+
+  const announcements = list
+    .filter((item) => {
+      // Don't add expired items
+      return !item.timing?.to || (item.timing.to && now < item.timing.to);
+    })
+    .sort((a, b) => {
+      const fromA = a.timing?.from || new Date(0);
+      const fromB = b.timing?.from || new Date(0);
+      // Sort by from date
+      return fromA.valueOf() - fromB.valueOf();
+    });
+
+  return announcements[0] || null;
+};
+
+type State = {
+  loading: boolean;
+  data: null | Announcement;
+  error: null | string;
+};
+
+export const useAnnouncement = (name: AppNameType, url: string) => {
+  const [state, setState] = useState<State>({
+    loading: true,
+    data: null,
+    error: null,
+  });
+
+  const fetchData = useCallback(() => {
+    let mounted = true;
+
+    getData(name, url)
+      .then((data) => {
+        if (mounted) {
+          setState({
+            loading: false,
+            data,
+            error: null,
+          });
+        }
+      })
+      .catch((err) => {
+        if (mounted) {
+          setState({
+            loading: false,
+            data: null,
+            error: `${err}`,
+          });
+        }
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, [name, url, setState]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return {
+    ...state,
+    reload: fetchData,
+  };
+};
--- a/libs/announcements/src/lib/index.ts
+++ b/libs/announcements/src/lib/index.ts
@ -0,0 +1,2 @@
+export * from './announcements';
+export * from './hooks/use-announcement';
--- a/libs/announcements/src/lib/schema.ts
+++ b/libs/announcements/src/lib/schema.ts
@ -0,0 +1,30 @@
+import { z } from 'zod';
+
+const AppName = z.enum([
+  'console',
+  'governance',
+  'explorer',
+  'wallet',
+  'website',
+]);
+
+export type AppNameType = z.infer<typeof AppName>;
+
+export const AnnouncementSchema = z.object({
+  text: z.string(),
+  url: z.string().url().optional(),
+  urlText: z.string().optional(),
+  timing: z
+    .object({
+      from: z.coerce.date().optional(),
+      to: z.coerce.date().optional(),
+    })
+    .optional(),
+});
+
+export type Announcement = z.infer<typeof AnnouncementSchema>;
+
+export const AnnouncementsSchema = z.record(
+  AppName,
+  z.array(AnnouncementSchema)
+);
--- a/libs/announcements/src/setup-tests.ts
+++ b/libs/announcements/src/setup-tests.ts
@ -0,0 +1 @@
+import '@testing-library/jest-dom';
--- a/libs/announcements/tsconfig.json
+++ b/libs/announcements/tsconfig.json
@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
+    }
+  ]
+}
--- a/libs/announcements/tsconfig.lib.json
+++ b/libs/announcements/tsconfig.lib.json
@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/next/typings/image.d.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "jest.config.ts"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
--- a/libs/announcements/tsconfig.spec.json
+++ b/libs/announcements/tsconfig.spec.json
@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"]
+  },
+  "include": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts",
+    "../react-helpers/src/lib/grid-cells/summary-row.spec.ts",
+    "jest.config.ts"
+  ]
+}
--- a/libs/environment/src/hooks/use-environment.ts
+++ b/libs/environment/src/hooks/use-environment.ts
@ -285,6 +285,7 @@ function compileEnvVars() {
    GIT_BRANCH: process.env['GIT_COMMIT_BRANCH'],
    GIT_COMMIT_HASH: process.env['GIT_COMMIT_HASH'],
    GIT_ORIGIN_URL: process.env['GIT_ORIGIN_URL'],
+    ANNOUNCEMENTS_CONFIG_URL: process.env['NX_ANNOUNCEMENTS_CONFIG_URL'],
    VEGA_INCIDENT_URL: process.env['NX_VEGA_INCIDENT_URL'],
  };

--- a/libs/environment/src/utils/validate-environment.ts
+++ b/libs/environment/src/utils/validate-environment.ts
@ -50,6 +50,7 @@ const schemaObject = {
  MAINTENANCE_PAGE: z.optional(z.boolean()),
  ETH_LOCAL_PROVIDER_URL: z.optional(z.string()),
  ETH_WALLET_MNEMONIC: z.optional(z.string()),
+  ANNOUNCEMENTS_CONFIG_URL: z.optional(z.string()),
  VEGA_INCIDENT_URL: z.optional(z.string()),
 };

--- a/libs/ui-toolkit/src/components/announcement-banner/announcement-banner.tsx
+++ b/libs/ui-toolkit/src/components/announcement-banner/announcement-banner.tsx
@ -3,12 +3,14 @@ import type { ReactNode } from 'react';

 export interface BannerProps {
  children?: ReactNode;
+  className?: string;
 }

-export const AnnouncementBanner = ({ children }: BannerProps) => {
+export const AnnouncementBanner = ({ className, children }: BannerProps) => {
  const bannerClasses = classnames(
    "bg-[url('https://static.vega.xyz/assets/img/banner-bg.jpg')] bg-cover bg-center bg-no-repeat",
-    'p-4'
+    'p-4',
+    className
  );

  return <div className={bannerClasses}>{children}</div>;
--- a/package.json
+++ b/package.json
@ -83,7 +83,7 @@
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.4",
-    "zod": "^3.17.3",
+    "zod": "^3.20.3",
    "zustand": "^4.3.2"
  },
  "devDependencies": {
@ -162,6 +162,7 @@
    "eslint-plugin-react-hooks": "4.6.0",
    "eslint-plugin-unicorn": "^41.0.0",
    "faker": "^5.5.3",
+    "fetch-mock": "^9.11.0",
    "flush-promises": "^1.0.2",
    "glob": "^8.0.3",
    "husky": "^7.0.4",
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@ -17,6 +17,7 @@
    "resolveJsonModule": true,
    "paths": {
      "@vegaprotocol/accounts": ["libs/accounts/src/index.ts"],
+      "@vegaprotocol/announcements": ["libs/announcements/src/index.ts"],
      "@vegaprotocol/apollo-client": ["libs/apollo-client/src/index.ts"],
      "@vegaprotocol/assets": ["libs/assets/src/index.ts"],
      "@vegaprotocol/candles-chart": ["libs/candles-chart/src/index.ts"],
--- a/workspace.json
+++ b/workspace.json
@ -2,6 +2,7 @@
  "version": 2,
  "projects": {
    "accounts": "libs/accounts",
+    "announcements": "libs/announcements",
    "apollo-client": "libs/apollo-client",
    "assets": "libs/assets",
    "candles-chart": "libs/candles-chart",
--- a/yarn.lock
+++ b/yarn.lock
@ -7,7 +7,7 @@
  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.0.1.tgz#b38b444ad3aa5fedbb15f2f746dcd934226a12dd"
  integrity sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==

-"@ampproject/remapping@^2.1.0":
+"@ampproject/remapping@^2.1.0", "@ampproject/remapping@^2.2.0":
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
@ -137,6 +137,11 @@
  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.1.tgz#f2e6ef7790d8c8dbf03d379502dcc246dcce0b30"
  integrity sha512-EWZ4mE2diW3QALKvDMiXnbZpRvlj+nayZ112nK93SnhqOtpdsbVD4W+2tEoT3YNBAG9RBR0ISY758ZkOgsn6pQ==

+"@babel/compat-data@^7.20.5":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.0.tgz#c241dc454e5b5917e40d37e525e2f4530c399298"
+  integrity sha512-gMuZsmsgxk/ENC3O/fRw5QY8A9/uxQbbCEypnLIiYYc/qVJtEV7ouxC3EllIIwNzMqAQee5tanFabWsUOutS7g==
+
 "@babel/core@7.12.13":
  version "7.12.13"
  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.13.tgz#b73a87a3a3e7d142a66248bf6ad88b9ceb093425"
@ -180,6 +185,27 @@
    semver "^5.4.1"
    source-map "^0.5.0"

+"@babel/core@^7.0.0":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.3.tgz#cf1c877284a469da5d1ce1d1e53665253fae712e"
+  integrity sha512-qIJONzoa/qiHghnm0l1n4i/6IIziDpzqc36FBs4pzMhDUraHqponwJLiAKm1hGLP3OSB/TVNz6rMwVGpwxxySw==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.21.3"
+    "@babel/helper-compilation-targets" "^7.20.7"
+    "@babel/helper-module-transforms" "^7.21.2"
+    "@babel/helpers" "^7.21.0"
+    "@babel/parser" "^7.21.3"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.3"
+    "@babel/types" "^7.21.3"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.2"
+    semver "^6.3.0"
+
 "@babel/core@^7.0.1", "@babel/core@^7.14.0", "@babel/core@^7.15.0", "@babel/core@^7.18.5", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.8.0":
  version "7.19.3"
  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.19.3.tgz#2519f62a51458f43b682d61583c3810e7dcee64c"
@ -249,6 +275,16 @@
    "@jridgewell/gen-mapping" "^0.3.2"
    jsesc "^2.5.1"

+"@babel/generator@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.3.tgz#232359d0874b392df04045d72ce2fd9bb5045fce"
+  integrity sha512-QS3iR1GYC/YGUnW7IdggFeN5c1poPUurnGttOV/bZgPGV+izC/D8HnD6DLwod0fsatNyVn1G3EVWMYIF0nHbeA==
+  dependencies:
+    "@babel/types" "^7.21.3"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
@ -274,6 +310,17 @@
    browserslist "^4.21.3"
    semver "^6.3.0"

+"@babel/helper-compilation-targets@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz#a6cd33e93629f5eb473b021aac05df62c4cd09bb"
+  integrity sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==
+  dependencies:
+    "@babel/compat-data" "^7.20.5"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.21.3"
+    lru-cache "^5.1.1"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.19.0", "@babel/helper-create-class-features-plugin@^7.20.2":
  version "7.20.2"
  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.2.tgz#3c08a5b5417c7f07b5cf3dfb6dc79cbec682e8c2"
@ -341,6 +388,14 @@
    "@babel/template" "^7.18.10"
    "@babel/types" "^7.19.0"

+"@babel/helper-function-name@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
+  integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
+  dependencies:
+    "@babel/template" "^7.20.7"
+    "@babel/types" "^7.21.0"
+
 "@babel/helper-hoist-variables@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
@ -390,6 +445,20 @@
    "@babel/traverse" "^7.19.0"
    "@babel/types" "^7.19.0"

+"@babel/helper-module-transforms@^7.21.2":
+  version "7.21.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz#160caafa4978ac8c00ac66636cb0fa37b024e2d2"
+  integrity sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.20.2"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.2"
+    "@babel/types" "^7.21.2"
+
 "@babel/helper-optimise-call-expression@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
@ -492,6 +561,15 @@
    "@babel/traverse" "^7.20.1"
    "@babel/types" "^7.20.0"

+"@babel/helpers@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.21.0.tgz#9dd184fb5599862037917cdc9eecb84577dc4e7e"
+  integrity sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==
+  dependencies:
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.0"
+    "@babel/types" "^7.21.0"
+
 "@babel/highlight@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
@ -516,6 +594,11 @@
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.5.tgz#7f3c7335fe417665d929f34ae5dceae4c04015e8"
  integrity sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==

+"@babel/parser@^7.20.7", "@babel/parser@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.3.tgz#1d285d67a19162ff9daa358d4cb41d50c06220b3"
+  integrity sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
@ -1514,6 +1597,15 @@
    "@babel/parser" "^7.18.10"
    "@babel/types" "^7.18.10"

+"@babel/template@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
+  integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+
 "@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.13", "@babel/traverse@^7.14.0", "@babel/traverse@^7.16.0", "@babel/traverse@^7.16.8", "@babel/traverse@^7.7.2":
  version "7.19.4"
  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.4.tgz#f117820e18b1e59448a6c1fa9d0ff08f7ac459a8"
@ -1546,6 +1638,22 @@
    debug "^4.1.0"
    globals "^11.1.0"

+"@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.3.tgz#4747c5e7903d224be71f90788b06798331896f67"
+  integrity sha512-XLyopNeaTancVitYZe2MlUEvgKb6YVVPXzofHgqHijCImG33b/uTurMS488ht/Hbsb2XK3U2BnSTxKVNGV3nGQ==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.21.3"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.21.3"
+    "@babel/types" "^7.21.3"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@7.17.10":
  version "7.17.10"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.10.tgz#d35d7b4467e439fcf06d195f8100e0fea7fc82c4"
@ -1572,6 +1680,15 @@
    "@babel/helper-validator-identifier" "^7.19.1"
    to-fast-properties "^2.0.0"

+"@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2", "@babel/types@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.3.tgz#4865a5357ce40f64e3400b0f3b737dc6d4f64d05"
+  integrity sha512-sBGdETxC+/M4o/zKC0sl6sjWv62WFR/uzxrJ6uYyMLZOUlPnwzw0tKgVHOXxaAd5l2g8pEDM5RZ495GPQI77kg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
 "@base2/pretty-print-object@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@ -3239,7 +3356,7 @@
    "@jridgewell/resolve-uri" "3.1.0"
    "@jridgewell/sourcemap-codec" "1.4.14"

-"@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
  version "0.3.17"
  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
  integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
@ -10450,6 +10567,11 @@ core-js-pure@^3.10.2, core-js-pure@^3.23.3, core-js-pure@^3.25.1:
  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.25.5.tgz#79716ba54240c6aa9ceba6eee08cf79471ba184d"
  integrity sha512-oml3M22pHM+igfWHDfdLVq2ShWmjM2V4L+dQEBs0DWVIqEm9WHCwGAlZ6BmyBQGy5sFrJmcx+856D9lVKyGWYg==

+core-js@^3.0.0:
+  version "3.29.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.29.1.tgz#40ff3b41588b091aaed19ca1aa5cb111803fa9a6"
+  integrity sha512-+jwgnhg6cQxKYIIjGtAHq2nwUOolo9eoFZ4sHfUH09BLXBgxnH4gA0zEd+t+BO2cNB8idaBtZFcFTRjQJRJmAw==
+
 core-js@^3.0.1, core-js@^3.6.4, core-js@^3.6.5:
  version "3.25.5"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.25.5.tgz#e86f651a2ca8a0237a5f064c2fe56cef89646e27"
@ -12769,6 +12891,22 @@ fd-slicer@~1.1.0:
  dependencies:
    pend "~1.2.0"

+fetch-mock@^9.11.0:
+  version "9.11.0"
+  resolved "https://registry.yarnpkg.com/fetch-mock/-/fetch-mock-9.11.0.tgz#371c6fb7d45584d2ae4a18ee6824e7ad4b637a3f"
+  integrity sha512-PG1XUv+x7iag5p/iNHD4/jdpxL9FtVSqRMUQhPab4hVDt80T1MH5ehzVrL2IdXO9Q2iBggArFvPqjUbHFuI58Q==
+  dependencies:
+    "@babel/core" "^7.0.0"
+    "@babel/runtime" "^7.0.0"
+    core-js "^3.0.0"
+    debug "^4.1.1"
+    glob-to-regexp "^0.4.0"
+    is-subset "^0.1.1"
+    lodash.isequal "^4.5.0"
+    path-to-regexp "^2.2.1"
+    querystring "^0.2.0"
+    whatwg-url "^6.5.0"
+
 fetch-retry@^5.0.2:
  version "5.0.3"
  resolved "https://registry.yarnpkg.com/fetch-retry/-/fetch-retry-5.0.3.tgz#edfa3641892995f9afee94f25b168827aa97fe3d"
@ -13430,7 +13568,7 @@ glob-to-regexp@^0.3.0:
  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
  integrity sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig==

-glob-to-regexp@^0.4.1:
+glob-to-regexp@^0.4.0, glob-to-regexp@^0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
@ -14932,6 +15070,11 @@ is-string@^1.0.5, is-string@^1.0.7:
  dependencies:
    has-tostringtag "^1.0.0"

+is-subset@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
+  integrity sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw==
+
 is-symbol@^1.0.2, is-symbol@^1.0.3:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
@ -15840,6 +15983,11 @@ json5@^1.0.1:
  dependencies:
    minimist "^1.2.0"

+json5@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
 jsonc-parser@3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.0.0.tgz#abdd785701c7e7eaca8a9ec8cf070ca51a745a22"
@ -18270,6 +18418,11 @@ path-to-regexp@0.1.7:
  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
  integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==

+path-to-regexp@^2.2.1:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.4.0.tgz#35ce7f333d5616f1c1e1bfe266c3aba2e5b2e704"
+  integrity sha512-G6zHoVqC6GGTQkZwF4lkuEyMbVOjoBKAEybQUypI1WTkqinCOrq2x6U2+phkJ1XsEMTy4LjtwPI7HW+NVrRR2w==
+
 path-type@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@ -19212,6 +19365,11 @@ querystring@0.2.0:
  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
  integrity sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==

+querystring@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.1.tgz#40d77615bb09d16902a85c3e38aa8b5ed761c2dd"
+  integrity sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==
+
 querystringify@^2.1.1:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@ -21851,6 +22009,13 @@ tough-cookie@~2.5.0:
    psl "^1.1.28"
    punycode "^2.1.1"

+tr46@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  integrity sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==
+  dependencies:
+    punycode "^2.1.0"
+
 tr46@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.1.0.tgz#fa87aa81ca5d5941da8cbf1f9b749dc969a4e240"
@ -22904,6 +23069,11 @@ webidl-conversions@^3.0.0:
  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==

+webidl-conversions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+  integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
+
 webidl-conversions@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
@ -23155,6 +23325,15 @@ whatwg-url@^5.0.0:
    tr46 "~0.0.3"
    webidl-conversions "^3.0.0"

+whatwg-url@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.5.0.tgz#f2df02bff176fd65070df74ad5ccbb5a199965a8"
+  integrity sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
 whatwg-url@^8.0.0, whatwg-url@^8.5.0:
  version "8.7.0"
  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.7.0.tgz#656a78e510ff8f3937bc0bcbe9f5c0ac35941b77"
@ -23510,10 +23689,10 @@ zen-observable@0.8.15, zen-observable@^0.8.0:
  resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
  integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==

-zod@^3.17.3:
-  version "3.19.1"
-  resolved "https://registry.yarnpkg.com/zod/-/zod-3.19.1.tgz#112f074a97b50bfc4772d4ad1576814bd8ac4473"
-  integrity sha512-LYjZsEDhCdYET9ikFu6dVPGp2YH9DegXjdJToSzD9rO6fy4qiRYFoyEYwps88OseJlPyl2NOe2iJuhEhL7IpEA==
+zod@^3.20.3:
+  version "3.21.4"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"
+  integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==

 zustand@^4.0.0-beta.2:
  version "4.1.2"
				`@ -0,0 +1 @@`
				`<link rel="stylesheet" href="https://static.vega.xyz/fonts.css" />`