From ce22da1c9adbafb8a36231e3efcabcb71335f8c6 Mon Sep 17 00:00:00 2001
From: dexturr <dexturr@users.noreply.github.com>
Date: Wed, 3 May 2023 18:09:05 +0000
Subject: [PATCH 1/5] chore: update tranches

Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 apps/static/src/assets/mainnet-tranches.json | 32 ++++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/apps/static/src/assets/mainnet-tranches.json b/apps/static/src/assets/mainnet-tranches.json
index 523fcc395..6daac815b 100644
--- a/apps/static/src/assets/mainnet-tranches.json
+++ b/apps/static/src/assets/mainnet-tranches.json
@@ -38,7 +38,7 @@
     "tranche_end": "2023-05-20T00:00:00.000Z",
     "total_added": "19242.125",
     "total_removed": "959.3245960538025",
-    "locked_amount": "10578.4844209587189695125",
+    "locked_amount": "10418.7792376543211777",
     "deposits": [
       {
         "amount": "188",
@@ -845,7 +845,7 @@
     "tranche_end": "2023-05-06T00:00:00.000Z",
     "total_added": "14520",
     "total_removed": "5079.76864115505",
-    "locked_amount": "1206.465231481482324",
+    "locked_amount": "1085.952592592592978",
     "deposits": [
       {
         "amount": "111",
@@ -4715,7 +4715,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "86666.297",
     "total_removed": "0",
-    "locked_amount": "51166.9974210106919556663",
+    "locked_amount": "51107.876034425155701037",
     "deposits": [
       {
         "amount": "86666.297",
@@ -4781,7 +4781,7 @@
     "tranche_end": "2023-06-01T00:00:00.000Z",
     "total_added": "2500",
     "total_removed": "0",
-    "locked_amount": "391.38319724257215",
+    "locked_amount": "387.962962962963",
     "deposits": [
       {
         "amount": "2500",
@@ -4814,7 +4814,7 @@
     "tranche_end": "2023-11-01T00:00:00.000Z",
     "total_added": "15000.000000000000015",
     "total_removed": "0",
-    "locked_amount": "14795.60027928744001479560027928744",
+    "locked_amount": "14775.301932367149014775301932367149",
     "deposits": [
       {
         "amount": "1.5e-14",
@@ -4902,7 +4902,7 @@
     "tranche_end": "2023-09-01T00:00:00.000Z",
     "total_added": "17500",
     "total_removed": "0",
-    "locked_amount": "11459.903224386071",
+    "locked_amount": "11436.2218196457315",
     "deposits": [
       {
         "amount": "12500",
@@ -5169,7 +5169,7 @@
     "tranche_end": "2023-08-01T00:00:00.000Z",
     "total_added": "37500",
     "total_removed": "17836.1796921",
-    "locked_amount": "18541.30457719459875",
+    "locked_amount": "18489.717618170655",
     "deposits": [
       {
         "amount": "7500",
@@ -5577,7 +5577,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "129999.45",
     "total_removed": "0",
-    "locked_amount": "51120.313973942497539045",
+    "locked_amount": "51061.24652818329987399",
     "deposits": [
       {
         "amount": "129999.45",
@@ -5610,7 +5610,7 @@
     "tranche_end": "2024-04-01T00:00:00.000Z",
     "total_added": "54144.7663",
     "total_removed": "0",
-    "locked_amount": "49335.74898575644407623565",
+    "locked_amount": "49298.9138196269965560045",
     "deposits": [
       {
         "amount": "54144.7663",
@@ -5643,7 +5643,7 @@
     "tranche_end": "2023-09-03T00:00:00.000Z",
     "total_added": "62600",
     "total_removed": "0",
-    "locked_amount": "21008.336485286656638",
+    "locked_amount": "20965.63247082699134",
     "deposits": [
       {
         "amount": "10000",
@@ -5836,7 +5836,7 @@
     "tranche_end": "2023-09-17T00:00:00.000Z",
     "total_added": "5000",
     "total_removed": "0",
-    "locked_amount": "1869.76296930492115",
+    "locked_amount": "1866.352105530188",
     "deposits": [
       {
         "amount": "5000",
@@ -6894,7 +6894,7 @@
     "tranche_end": "2023-06-02T00:00:00.000Z",
     "total_added": "1939928.38",
     "total_removed": "1709370.7872515768348",
-    "locked_amount": "156749.9162904687626235986",
+    "locked_amount": "155426.5500030847769098336",
     "deposits": [
       {
         "amount": "1852091.69",
@@ -40766,7 +40766,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "3732368.4671",
     "total_removed": "715655.108029600523393",
-    "locked_amount": "265371.371543329369775774863",
+    "locked_amount": "263337.818306825404305623187",
     "deposits": [
       {
         "amount": "1998.95815",
@@ -42159,7 +42159,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "15870102.715470999700000001",
     "total_removed": "867610.78878511272497352",
-    "locked_amount": "6240677.4306629368200704822080834181008381",
+    "locked_amount": "6233466.5814528903248765151216390212111382",
     "deposits": [
       {
         "amount": "16249.93",
@@ -48748,7 +48748,7 @@
     "tranche_end": "2023-05-05T00:00:00.000Z",
     "total_added": "14597706.0446472999",
     "total_removed": "6168897.174282186485373182",
-    "locked_amount": "39908.33059608817917720398993360406",
+    "locked_amount": "33251.32064708015607663338925032586",
     "deposits": [
       {
         "amount": "129284.449",
@@ -58847,7 +58847,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "472355.6199999996",
     "total_removed": "44078.8527972103416",
-    "locked_amount": "42049.610748470926039581595332312",
+    "locked_amount": "41727.382613860946149215697311012",
     "deposits": [
       {
         "amount": "3000",

From a9267de6538b50551050c20d0144e75c39d683fd Mon Sep 17 00:00:00 2001
From: Art <artur@vegaprotocol.io>
Date: Wed, 3 May 2023 21:35:05 +0200
Subject: [PATCH 2/5] feat(trading): asset balances inside asset selector
 (deposit, withdraw form) (#3590)

---
 libs/assets/src/lib/asset-option.tsx          | 45 ++++++++++--
 libs/assets/src/lib/index.ts                  |  3 +-
 libs/assets/src/lib/use-balances-store.ts     | 69 +++++++++++++++++++
 libs/deposits/src/lib/asset-balance.tsx       | 42 +++++++++++
 libs/deposits/src/lib/deposit-form.tsx        | 13 +++-
 libs/deposits/src/lib/index.ts                |  5 +-
 libs/deposits/src/lib/use-submit-faucet.ts    |  4 +-
 libs/utils/src/lib/is-asset-erc20.ts          |  2 +-
 libs/withdraws/src/lib/asset-balance.tsx      | 30 ++++++++
 .../src/lib/withdraw-form-container.spec.tsx  |  6 ++
 libs/withdraws/src/lib/withdraw-form.spec.tsx |  5 ++
 libs/withdraws/src/lib/withdraw-form.tsx      |  7 +-
 .../src/lib/withdraw-manager.spec.tsx         |  5 ++
 13 files changed, 223 insertions(+), 13 deletions(-)
 create mode 100644 libs/assets/src/lib/use-balances-store.ts
 create mode 100644 libs/deposits/src/lib/asset-balance.tsx
 create mode 100644 libs/withdraws/src/lib/asset-balance.tsx

diff --git a/libs/assets/src/lib/asset-option.tsx b/libs/assets/src/lib/asset-option.tsx
index 0df06a490..2d67c79a8 100644
--- a/libs/assets/src/lib/asset-option.tsx
+++ b/libs/assets/src/lib/asset-option.tsx
@@ -1,13 +1,50 @@
 import { Option } from '@vegaprotocol/ui-toolkit';
 import type { AssetFieldsFragment } from './__generated__/Asset';
+import classNames from 'classnames';
+import { t } from '@vegaprotocol/i18n';
+import type { ReactNode } from 'react';
 
-export const AssetOption = ({ asset }: { asset: AssetFieldsFragment }) => {
+type AssetOptionProps = {
+  asset: AssetFieldsFragment;
+  balance?: ReactNode;
+};
+
+export const Balance = ({
+  balance,
+  symbol,
+}: {
+  balance?: string;
+  symbol: string;
+}) =>
+  balance ? (
+    <div className="mt-1 font-alpha">
+      {balance} {symbol}
+    </div>
+  ) : (
+    <div className="text-vega-orange-500">{t('Fetching balance…')}</div>
+  );
+
+export const AssetOption = ({ asset, balance }: AssetOptionProps) => {
   return (
     <Option key={asset.id} value={asset.id}>
       <div className="flex flex-col items-start">
-        <span>{asset.name}</span>
-        <div className="text-[10px] font-mono w-full text-left break-all">
-          <span className="text-gray-500">{asset.id} -</span> {asset.symbol}
+        <div className="flex flex-row align-baseline gap-2">
+          <span>{asset.name}</span>{' '}
+          <span
+            className={classNames(
+              'bg-vega-light-200 dark:bg-vega-dark-200',
+              'text-black dark:text-white text-xs',
+              'py-[2px] px-[4px] rounded'
+            )}
+          >
+            {asset.symbol}
+          </span>
+        </div>
+        {balance}
+        <div className="text-[12px] font-mono w-full text-left break-all">
+          <span className="text-vega-light-300 dark:text-vega-dark-300">
+            {asset.id}
+          </span>
         </div>
       </div>
     </Option>
diff --git a/libs/assets/src/lib/index.ts b/libs/assets/src/lib/index.ts
index de6516378..f85c8581f 100644
--- a/libs/assets/src/lib/index.ts
+++ b/libs/assets/src/lib/index.ts
@@ -1,8 +1,9 @@
 export * from './__generated__/Asset';
 export * from './__generated__/Assets';
 export * from './asset-data-provider';
-export * from './assets-data-provider';
 export * from './asset-details-dialog';
 export * from './asset-details-table';
 export * from './asset-option';
+export * from './assets-data-provider';
 export * from './constants';
+export * from './use-balances-store';
diff --git a/libs/assets/src/lib/use-balances-store.ts b/libs/assets/src/lib/use-balances-store.ts
new file mode 100644
index 000000000..d934aa830
--- /dev/null
+++ b/libs/assets/src/lib/use-balances-store.ts
@@ -0,0 +1,69 @@
+import type BigNumber from 'bignumber.js';
+import type { AssetFieldsFragment } from './__generated__/Asset';
+import { create } from 'zustand';
+import * as Sentry from '@sentry/react';
+import { immer } from 'zustand/middleware/immer';
+
+type AssetWithBalance = {
+  asset: AssetFieldsFragment;
+  balanceOnEth?: BigNumber;
+  balanceOnVega?: BigNumber;
+  updatedAt: number;
+};
+
+type SetBalanceArgs = Omit<AssetWithBalance, 'updatedAt'> & {
+  ethBalanceFetcher?: () => Promise<BigNumber | undefined>;
+};
+
+type BalancesStore = {
+  balances: (AssetWithBalance & { fetchFromEth?: () => void })[];
+  getBalance: (assetId: string) => AssetWithBalance | undefined;
+  setBalance: (args: SetBalanceArgs) => void;
+  refetch: (assetId: string) => void;
+};
+
+export const useBalancesStore = create(
+  immer<BalancesStore>((set, get) => ({
+    balances: [],
+    getBalance: (assetId) =>
+      get().balances.find(({ asset: a }) => a.id === assetId),
+    setBalance: ({ asset, balanceOnEth, balanceOnVega, ethBalanceFetcher }) => {
+      set((state) => {
+        const found = state.balances.find(({ asset: a }) => a.id === asset.id);
+        const fetchFromEth = ethBalanceFetcher
+          ? () => {
+              if (!ethBalanceFetcher) return;
+              ethBalanceFetcher()
+                .then((balance) => {
+                  if (balance) {
+                    get().setBalance({ asset, balanceOnEth: balance });
+                  }
+                })
+                .catch((err) => {
+                  Sentry.captureException(err);
+                });
+            }
+          : undefined;
+
+        if (found) {
+          if (balanceOnEth) found.balanceOnEth = balanceOnEth;
+          if (balanceOnVega) found.balanceOnVega = balanceOnVega;
+          if (fetchFromEth) found.fetchFromEth = fetchFromEth;
+          found.updatedAt = Date.now();
+        } else {
+          state.balances.push({
+            asset,
+            balanceOnEth,
+            balanceOnVega,
+            fetchFromEth,
+            updatedAt: Date.now(),
+          });
+        }
+      });
+    },
+    refetch: (assetId) => {
+      const found = get().balances.find((a) => a.asset.id === assetId);
+      found?.fetchFromEth?.();
+    },
+  }))
+);
diff --git a/libs/deposits/src/lib/asset-balance.tsx b/libs/deposits/src/lib/asset-balance.tsx
new file mode 100644
index 000000000..563c8db57
--- /dev/null
+++ b/libs/deposits/src/lib/asset-balance.tsx
@@ -0,0 +1,42 @@
+import { useCallback, useEffect } from 'react';
+import { useGetBalanceOfERC20Token } from './use-get-balance-of-erc20-token';
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+import { useBalancesStore } from '@vegaprotocol/assets';
+import { Balance } from '@vegaprotocol/assets';
+import { isAssetTypeERC20 } from '@vegaprotocol/utils';
+import { useTokenContract } from '@vegaprotocol/web3';
+
+const REFETCH_DELAY = 5000;
+
+export const AssetBalance = ({ asset }: { asset: AssetFieldsFragment }) => {
+  const [setBalance, getBalance] = useBalancesStore((state) => [
+    state.setBalance,
+    state.getBalance,
+  ]);
+
+  const tokenContract = useTokenContract(
+    isAssetTypeERC20(asset) ? asset.source.contractAddress : undefined
+  );
+  const ethBalanceFetcher = useGetBalanceOfERC20Token(tokenContract, asset);
+
+  const fetchFromEth = useCallback(async () => {
+    const balance = await ethBalanceFetcher();
+    if (balance) {
+      setBalance({ asset, balanceOnEth: balance, ethBalanceFetcher });
+    }
+  }, [asset, ethBalanceFetcher, setBalance]);
+
+  useEffect(() => {
+    const balance = getBalance(asset.id);
+    if (!balance || Date.now() - balance.updatedAt > REFETCH_DELAY) {
+      fetchFromEth();
+    }
+  }, [asset.id, fetchFromEth, getBalance]);
+
+  return (
+    <Balance
+      balance={getBalance(asset.id)?.balanceOnEth?.toString()}
+      symbol={asset.symbol}
+    />
+  );
+};
diff --git a/libs/deposits/src/lib/deposit-form.tsx b/libs/deposits/src/lib/deposit-form.tsx
index 960107169..9ec2eb05f 100644
--- a/libs/deposits/src/lib/deposit-form.tsx
+++ b/libs/deposits/src/lib/deposit-form.tsx
@@ -41,6 +41,7 @@ import type { DepositBalances } from './use-deposit-balances';
 import { FaucetNotification } from './faucet-notification';
 import { ApproveNotification } from './approve-notification';
 import { usePersistentDeposit } from './use-persistent-deposit';
+import { AssetBalance } from './asset-balance';
 
 interface FormFields {
   asset: string;
@@ -253,9 +254,15 @@ export const DepositForm = ({
               value={selectedAsset?.id}
               hasError={Boolean(errors.asset?.message)}
             >
-              {assets.filter(isAssetTypeERC20).map((a) => (
-                <AssetOption asset={a} key={a.id} />
-              ))}
+              {assets
+                .filter((asset) => isAssetTypeERC20(asset))
+                .map((asset) => (
+                  <AssetOption
+                    asset={asset}
+                    key={asset.id}
+                    balance={<AssetBalance asset={asset} />}
+                  />
+                ))}
             </RichSelect>
           )}
         />
diff --git a/libs/deposits/src/lib/index.ts b/libs/deposits/src/lib/index.ts
index 32152393f..f381470c1 100644
--- a/libs/deposits/src/lib/index.ts
+++ b/libs/deposits/src/lib/index.ts
@@ -1,15 +1,16 @@
 export * from './__generated__/Deposit';
+export * from './asset-balance';
 export * from './deposit-container';
+export * from './deposit-dialog';
 export * from './deposit-form';
 export * from './deposit-limits';
 export * from './deposit-manager';
+export * from './deposits-provider';
 export * from './deposits-table';
 export * from './use-deposit-balances';
-export * from './deposits-provider';
 export * from './use-get-allowance';
 export * from './use-get-balance-of-erc20-token';
 export * from './use-get-deposit-maximum';
 export * from './use-get-deposited-amount';
 export * from './use-submit-approval';
 export * from './use-submit-faucet';
-export * from './deposit-dialog';
diff --git a/libs/deposits/src/lib/use-submit-faucet.ts b/libs/deposits/src/lib/use-submit-faucet.ts
index 05ef3e5b8..3d61596e5 100644
--- a/libs/deposits/src/lib/use-submit-faucet.ts
+++ b/libs/deposits/src/lib/use-submit-faucet.ts
@@ -5,6 +5,7 @@ import {
 } from '@vegaprotocol/web3';
 import { isAssetTypeERC20 } from '@vegaprotocol/utils';
 import type { Asset } from '@vegaprotocol/assets';
+import { useBalancesStore } from '@vegaprotocol/assets';
 import { useEffect, useState } from 'react';
 
 export const useSubmitFaucet = (
@@ -25,8 +26,9 @@ export const useSubmitFaucet = (
   useEffect(() => {
     if (tx?.status === EthTxStatus.Confirmed) {
       getBalances();
+      if (asset) useBalancesStore.getState().refetch(asset.id);
     }
-  }, [tx?.status, getBalances]);
+  }, [tx?.status, getBalances, asset]);
 
   return {
     id,
diff --git a/libs/utils/src/lib/is-asset-erc20.ts b/libs/utils/src/lib/is-asset-erc20.ts
index a7e1de722..4437a01e4 100644
--- a/libs/utils/src/lib/is-asset-erc20.ts
+++ b/libs/utils/src/lib/is-asset-erc20.ts
@@ -7,7 +7,7 @@ interface Asset {
       };
 }
 
-interface ERC20Asset {
+export interface ERC20Asset {
   __typename?: 'Asset';
   source: {
     __typename: 'ERC20';
diff --git a/libs/withdraws/src/lib/asset-balance.tsx b/libs/withdraws/src/lib/asset-balance.tsx
new file mode 100644
index 000000000..8c4cce702
--- /dev/null
+++ b/libs/withdraws/src/lib/asset-balance.tsx
@@ -0,0 +1,30 @@
+import { useAccountBalance } from '@vegaprotocol/accounts';
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+import { useBalancesStore } from '@vegaprotocol/assets';
+import { Balance } from '@vegaprotocol/assets';
+import { addDecimal } from '@vegaprotocol/utils';
+import BigNumber from 'bignumber.js';
+import { useEffect } from 'react';
+
+export const AssetBalance = ({ asset }: { asset: AssetFieldsFragment }) => {
+  const [setBalance, getBalance] = useBalancesStore((state) => [
+    state.setBalance,
+    state.getBalance,
+  ]);
+  const { accountBalance, accountDecimals } = useAccountBalance(asset?.id);
+
+  useEffect(() => {
+    const balance =
+      accountBalance && accountDecimals
+        ? new BigNumber(addDecimal(accountBalance, accountDecimals))
+        : undefined;
+    setBalance({ asset, balanceOnVega: balance });
+  }, [accountBalance, accountDecimals, asset, setBalance]);
+
+  return (
+    <Balance
+      balance={getBalance(asset.id)?.balanceOnVega?.toString()}
+      symbol={asset.symbol}
+    />
+  );
+};
diff --git a/libs/withdraws/src/lib/withdraw-form-container.spec.tsx b/libs/withdraws/src/lib/withdraw-form-container.spec.tsx
index 5ca9483e9..a16393b9e 100644
--- a/libs/withdraws/src/lib/withdraw-form-container.spec.tsx
+++ b/libs/withdraws/src/lib/withdraw-form-container.spec.tsx
@@ -1,6 +1,7 @@
 import { render, screen, act, waitFor } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import type { Account } from '@vegaprotocol/accounts';
+import { useAccountBalance } from '@vegaprotocol/accounts';
 import { WithdrawFormContainer } from './withdraw-form-container';
 import * as Types from '@vegaprotocol/types';
 import { useWeb3React } from '@web3-react/core';
@@ -12,6 +13,7 @@ jest.mock('@vegaprotocol/react-helpers', () => ({
   }),
 }));
 jest.mock('@web3-react/core');
+jest.mock('@vegaprotocol/accounts');
 
 describe('WithdrawFormContainer', () => {
   const props = {
@@ -91,6 +93,10 @@ describe('WithdrawFormContainer', () => {
 
   beforeEach(() => {
     (useWeb3React as jest.Mock).mockReturnValue({ account: MOCK_ETH_ADDRESS });
+    (useAccountBalance as jest.Mock).mockReturnValue({
+      accountBalance: 0,
+      accountDecimals: null,
+    });
   });
   afterEach(() => {
     jest.resetAllMocks();
diff --git a/libs/withdraws/src/lib/withdraw-form.spec.tsx b/libs/withdraws/src/lib/withdraw-form.spec.tsx
index a0e895cbd..d67a7ef99 100644
--- a/libs/withdraws/src/lib/withdraw-form.spec.tsx
+++ b/libs/withdraws/src/lib/withdraw-form.spec.tsx
@@ -8,6 +8,11 @@ import type { Asset } from '@vegaprotocol/assets';
 
 jest.mock('@web3-react/core');
 
+jest.mock('@vegaprotocol/accounts', () => ({
+  ...jest.requireActual('@vegaprotocol/accounts'),
+  useAccountBalance: jest.fn(() => ({ accountBalance: 0, accountDecimals: 0 })),
+}));
+
 const MOCK_ETH_ADDRESS = '0x72c22822A19D20DE7e426fB84aa047399Ddd8853';
 
 let assets: Asset[];
diff --git a/libs/withdraws/src/lib/withdraw-form.tsx b/libs/withdraws/src/lib/withdraw-form.tsx
index 5fec610a2..add36e0d9 100644
--- a/libs/withdraws/src/lib/withdraw-form.tsx
+++ b/libs/withdraws/src/lib/withdraw-form.tsx
@@ -33,6 +33,7 @@ import {
   useWeb3ConnectStore,
   useWeb3Disconnect,
 } from '@vegaprotocol/web3';
+import { AssetBalance } from './asset-balance';
 
 interface FormFields {
   asset: string;
@@ -154,7 +155,11 @@ export const WithdrawForm = ({
         hasError={Boolean(errors.asset?.message)}
       >
         {assets.filter(isAssetTypeERC20).map((a) => (
-          <AssetOption key={a.id} asset={a} />
+          <AssetOption
+            key={a.id}
+            asset={a}
+            balance={<AssetBalance asset={a} />}
+          />
         ))}
       </RichSelect>
     );
diff --git a/libs/withdraws/src/lib/withdraw-manager.spec.tsx b/libs/withdraws/src/lib/withdraw-manager.spec.tsx
index 4790fbe5d..88234ef36 100644
--- a/libs/withdraws/src/lib/withdraw-manager.spec.tsx
+++ b/libs/withdraws/src/lib/withdraw-manager.spec.tsx
@@ -25,6 +25,11 @@ jest.mock('./use-withdraw-asset', () => ({
   useWithdrawAsset: () => withdrawAsset,
 }));
 
+jest.mock('@vegaprotocol/accounts', () => ({
+  ...jest.requireActual('@vegaprotocol/accounts'),
+  useAccountBalance: jest.fn(() => ({ accountBalance: 0, accountDecimals: 0 })),
+}));
+
 jest.mock('@vegaprotocol/web3', () => ({
   ...jest.requireActual('@vegaprotocol/web3'),
   useGetWithdrawThreshold: () => {

From 523598645a28c89061f2e4c9293b85c13906b07b Mon Sep 17 00:00:00 2001
From: dexturr <dexturr@users.noreply.github.com>
Date: Thu, 4 May 2023 00:13:39 +0000
Subject: [PATCH 3/5] chore: update tranches

Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 apps/static/src/assets/mainnet-tranches.json | 32 ++++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/apps/static/src/assets/mainnet-tranches.json b/apps/static/src/assets/mainnet-tranches.json
index 6daac815b..68cb2621e 100644
--- a/apps/static/src/assets/mainnet-tranches.json
+++ b/apps/static/src/assets/mainnet-tranches.json
@@ -38,7 +38,7 @@
     "tranche_end": "2023-05-20T00:00:00.000Z",
     "total_added": "19242.125",
     "total_removed": "959.3245960538025",
-    "locked_amount": "10418.7792376543211777",
+    "locked_amount": "10256.394113329474405925",
     "deposits": [
       {
         "amount": "188",
@@ -845,7 +845,7 @@
     "tranche_end": "2023-05-06T00:00:00.000Z",
     "total_added": "14520",
     "total_removed": "5079.76864115505",
-    "locked_amount": "1085.952592592592978",
+    "locked_amount": "963.4176851851856172",
     "deposits": [
       {
         "amount": "111",
@@ -4715,7 +4715,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "86666.297",
     "total_removed": "0",
-    "locked_amount": "51107.876034425155701037",
+    "locked_amount": "51047.7625583794359499554",
     "deposits": [
       {
         "amount": "86666.297",
@@ -4781,7 +4781,7 @@
     "tranche_end": "2023-06-01T00:00:00.000Z",
     "total_added": "2500",
     "total_removed": "0",
-    "locked_amount": "387.962962962963",
+    "locked_amount": "384.4853352665853",
     "deposits": [
       {
         "amount": "2500",
@@ -4814,7 +4814,7 @@
     "tranche_end": "2023-11-01T00:00:00.000Z",
     "total_added": "15000.000000000000015",
     "total_removed": "0",
-    "locked_amount": "14775.301932367149014775301932367149",
+    "locked_amount": "14754.662967995169014754662967995169",
     "deposits": [
       {
         "amount": "1.5e-14",
@@ -4902,7 +4902,7 @@
     "tranche_end": "2023-09-01T00:00:00.000Z",
     "total_added": "17500",
     "total_removed": "0",
-    "locked_amount": "11436.2218196457315",
+    "locked_amount": "11412.1430278784215",
     "deposits": [
       {
         "amount": "12500",
@@ -5169,7 +5169,7 @@
     "tranche_end": "2023-08-01T00:00:00.000Z",
     "total_added": "37500",
     "total_removed": "17836.1796921",
-    "locked_amount": "18489.717618170655",
+    "locked_amount": "18437.26500153468375",
     "deposits": [
       {
         "amount": "7500",
@@ -5577,7 +5577,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "129999.45",
     "total_removed": "0",
-    "locked_amount": "51061.24652818329987399",
+    "locked_amount": "51001.187898120696003495",
     "deposits": [
       {
         "amount": "129999.45",
@@ -5610,7 +5610,7 @@
     "tranche_end": "2024-04-01T00:00:00.000Z",
     "total_added": "54144.7663",
     "total_removed": "0",
-    "locked_amount": "49298.9138196269965560045",
+    "locked_amount": "49261.46053910287183235295",
     "deposits": [
       {
         "amount": "54144.7663",
@@ -5643,7 +5643,7 @@
     "tranche_end": "2023-09-03T00:00:00.000Z",
     "total_added": "62600",
     "total_removed": "0",
-    "locked_amount": "20965.63247082699134",
+    "locked_amount": "20922.211859462201678",
     "deposits": [
       {
         "amount": "10000",
@@ -5836,7 +5836,7 @@
     "tranche_end": "2023-09-17T00:00:00.000Z",
     "total_added": "5000",
     "total_removed": "0",
-    "locked_amount": "1866.352105530188",
+    "locked_amount": "1862.88400558092315",
     "deposits": [
       {
         "amount": "5000",
@@ -6894,7 +6894,7 @@
     "tranche_end": "2023-06-02T00:00:00.000Z",
     "total_added": "1939928.38",
     "total_removed": "1709370.7872515768348",
-    "locked_amount": "155426.5500030847769098336",
+    "locked_amount": "154080.9768998339405702344",
     "deposits": [
       {
         "amount": "1852091.69",
@@ -40766,7 +40766,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "3732368.4671",
     "total_removed": "715655.108029600523393",
-    "locked_amount": "263337.818306825404305623187",
+    "locked_amount": "261270.04639921004532711544",
     "deposits": [
       {
         "amount": "1998.95815",
@@ -42159,7 +42159,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "15870102.715470999700000001",
     "total_removed": "867610.78878511272497352",
-    "locked_amount": "6233466.5814528903248765151216390212111382",
+    "locked_amount": "6226134.3950321305604573162290286986739659",
     "deposits": [
       {
         "amount": "16249.93",
@@ -48748,7 +48748,7 @@
     "tranche_end": "2023-05-05T00:00:00.000Z",
     "total_added": "14597706.0446472999",
     "total_removed": "6168897.174282186485373182",
-    "locked_amount": "33251.32064708015607663338925032586",
+    "locked_amount": "26482.29295988910220527880604583333",
     "deposits": [
       {
         "amount": "129284.449",
@@ -58847,7 +58847,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "472355.6199999996",
     "total_removed": "44078.8527972103416",
-    "locked_amount": "41727.382613860946149215697311012",
+    "locked_amount": "41399.732335211144801563177168956",
     "deposits": [
       {
         "amount": "3000",

From 378946f22b8cf5249a010b79ffb7518ee5f1dce9 Mon Sep 17 00:00:00 2001
From: dexturr <dexturr@users.noreply.github.com>
Date: Thu, 4 May 2023 06:07:49 +0000
Subject: [PATCH 4/5] chore: update tranches

Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 apps/static/src/assets/mainnet-tranches.json | 32 ++++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/apps/static/src/assets/mainnet-tranches.json b/apps/static/src/assets/mainnet-tranches.json
index 68cb2621e..b122cb499 100644
--- a/apps/static/src/assets/mainnet-tranches.json
+++ b/apps/static/src/assets/mainnet-tranches.json
@@ -38,7 +38,7 @@
     "tranche_end": "2023-05-20T00:00:00.000Z",
     "total_added": "19242.125",
     "total_removed": "959.3245960538025",
-    "locked_amount": "10256.394113329474405925",
+    "locked_amount": "10098.6413524305566245625",
     "deposits": [
       {
         "amount": "188",
@@ -845,7 +845,7 @@
     "tranche_end": "2023-05-06T00:00:00.000Z",
     "total_added": "14520",
     "total_removed": "5079.76864115505",
-    "locked_amount": "963.4176851851856172",
+    "locked_amount": "844.3783333333340916",
     "deposits": [
       {
         "amount": "111",
@@ -4715,7 +4715,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "86666.297",
     "total_removed": "0",
-    "locked_amount": "51047.7625583794359499554",
+    "locked_amount": "50989.3639405696310624204",
     "deposits": [
       {
         "amount": "86666.297",
@@ -4781,7 +4781,7 @@
     "tranche_end": "2023-06-01T00:00:00.000Z",
     "total_added": "2500",
     "total_removed": "0",
-    "locked_amount": "384.4853352665853",
+    "locked_amount": "381.106913919414",
     "deposits": [
       {
         "amount": "2500",
@@ -4814,7 +4814,7 @@
     "tranche_end": "2023-11-01T00:00:00.000Z",
     "total_added": "15000.000000000000015",
     "total_removed": "0",
-    "locked_amount": "14754.662967995169014754662967995169",
+    "locked_amount": "14734.6127717391315147346127717391315",
     "deposits": [
       {
         "amount": "1.5e-14",
@@ -4902,7 +4902,7 @@
     "tranche_end": "2023-09-01T00:00:00.000Z",
     "total_added": "17500",
     "total_removed": "0",
-    "locked_amount": "11412.1430278784215",
+    "locked_amount": "11388.75113224637775",
     "deposits": [
       {
         "amount": "12500",
@@ -5169,7 +5169,7 @@
     "tranche_end": "2023-08-01T00:00:00.000Z",
     "total_added": "37500",
     "total_removed": "17836.1796921",
-    "locked_amount": "18437.26500153468375",
+    "locked_amount": "18386.3087016574575",
     "deposits": [
       {
         "amount": "7500",
@@ -5577,7 +5577,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "129999.45",
     "total_removed": "0",
-    "locked_amount": "51001.187898120696003495",
+    "locked_amount": "50942.84256170164543551",
     "deposits": [
       {
         "amount": "129999.45",
@@ -5610,7 +5610,7 @@
     "tranche_end": "2024-04-01T00:00:00.000Z",
     "total_added": "54144.7663",
     "total_removed": "0",
-    "locked_amount": "49261.46053910287183235295",
+    "locked_amount": "49225.07568900056925620748",
     "deposits": [
       {
         "amount": "54144.7663",
@@ -5643,7 +5643,7 @@
     "tranche_end": "2023-09-03T00:00:00.000Z",
     "total_added": "62600",
     "total_removed": "0",
-    "locked_amount": "20922.211859462201678",
+    "locked_amount": "20880.029908675801182",
     "deposits": [
       {
         "amount": "10000",
@@ -5836,7 +5836,7 @@
     "tranche_end": "2023-09-17T00:00:00.000Z",
     "total_added": "5000",
     "total_removed": "0",
-    "locked_amount": "1862.88400558092315",
+    "locked_amount": "1859.51484018264835",
     "deposits": [
       {
         "amount": "5000",
@@ -6894,7 +6894,7 @@
     "tranche_end": "2023-06-02T00:00:00.000Z",
     "total_added": "1939928.38",
     "total_removed": "1709370.7872515768348",
-    "locked_amount": "154080.9768998339405702344",
+    "locked_amount": "152773.788985228250267064",
     "deposits": [
       {
         "amount": "1852091.69",
@@ -40766,7 +40766,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "3732368.4671",
     "total_removed": "715655.108029600523393",
-    "locked_amount": "261270.04639921004532711544",
+    "locked_amount": "259261.353688955187027242512",
     "deposits": [
       {
         "amount": "1998.95815",
@@ -42159,7 +42159,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "15870102.715470999700000001",
     "total_removed": "867610.78878511272497352",
-    "locked_amount": "6226134.3950321305604573162290286986739659",
+    "locked_amount": "6219011.6996519651564294467839700764949986",
     "deposits": [
       {
         "amount": "16249.93",
@@ -48748,7 +48748,7 @@
     "tranche_end": "2023-05-05T00:00:00.000Z",
     "total_added": "14597706.0446472999",
     "total_removed": "6168897.174282186485373182",
-    "locked_amount": "26482.29295988910220527880604583333",
+    "locked_amount": "19906.6660637589358104620198755149",
     "deposits": [
       {
         "amount": "129284.449",
@@ -58847,7 +58847,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "472355.6199999996",
     "total_removed": "44078.8527972103416",
-    "locked_amount": "41399.732335211144801563177168956",
+    "locked_amount": "41081.44349309421705422120903094",
     "deposits": [
       {
         "amount": "3000",

From 768b3b29f0731149c421bf28e2c7e4bb98ad953d Mon Sep 17 00:00:00 2001
From: Art <artur@vegaprotocol.io>
Date: Thu, 4 May 2023 09:51:24 +0200
Subject: [PATCH 5/5] feat(trading): protocol upgrade notification (#3517)

---
 .../src/support/proposal.functions.ts         |  2 +-
 apps/governance/src/routes/home/index.tsx     |  6 +-
 .../proposals-list/proposals-list.tsx         |  2 +-
 .../protocol-upgrade-proposal-detail-info.tsx |  2 +-
 ...tocol-upgrade-proposals-list-item.spec.tsx |  2 +-
 .../protocol-upgrade-proposals-list-item.tsx  |  2 +-
 .../proposals/proposals-container.tsx         |  7 +-
 .../__generated__/ProtocolUpgradeProposals.ts | 59 -----------
 .../protocol-upgrade-proposal-container.tsx   |  4 +-
 .../protocol-upgrade-proposal.spec.tsx        |  2 +-
 .../protocol-upgrade-proposal.tsx             |  2 +-
 apps/trading/components/navbar/navbar.tsx     |  9 +-
 .../components/viewing-banner/index.tsx       |  4 +-
 apps/trading/pages/_app.page.tsx              | 11 ++-
 libs/environment/src/hooks/use-links.ts       | 19 +++-
 libs/proposals/src/components/index.ts        |  2 +
 .../components/protocol-upgrade-countdown.tsx | 99 +++++++++++++++++++
 ...protocol-upgrade-proposal-notification.tsx | 79 +++++++++++++++
 libs/proposals/src/lib/index.ts               |  1 +
 .../BlockStatistics.graphql                   |  6 ++
 .../ProtocolUpgradeProposals.graphql          |  4 +-
 .../__generated__/BlockStatistics.ts          | 46 +++++++++
 .../__generated__/ProtocolUpgradeProposals.ts | 62 ++++++++++++
 .../lib/protocol-upgrade-proposals/index.ts   |  3 +
 .../use-next-protocol-upgrade-proposals.ts    | 53 ++++++++++
 .../use-time-to-upgrade.spec.ts               | 32 ++++++
 .../use-time-to-upgrade.ts                    | 64 ++++++++++++
 libs/utils/src/lib/time.spec.ts               | 47 ++++++++-
 libs/utils/src/lib/time.ts                    | 44 +++++++++
 29 files changed, 591 insertions(+), 84 deletions(-)
 delete mode 100644 apps/governance/src/routes/proposals/protocol-upgrade/__generated__/ProtocolUpgradeProposals.ts
 create mode 100644 libs/proposals/src/components/protocol-upgrade-countdown.tsx
 create mode 100644 libs/proposals/src/components/protocol-upgrade-proposal-notification.tsx
 create mode 100644 libs/proposals/src/lib/protocol-upgrade-proposals/BlockStatistics.graphql
 rename {apps/governance/src/routes/proposals/protocol-upgrade => libs/proposals/src/lib/protocol-upgrade-proposals}/ProtocolUpgradeProposals.graphql (65%)
 create mode 100644 libs/proposals/src/lib/protocol-upgrade-proposals/__generated__/BlockStatistics.ts
 create mode 100644 libs/proposals/src/lib/protocol-upgrade-proposals/__generated__/ProtocolUpgradeProposals.ts
 create mode 100644 libs/proposals/src/lib/protocol-upgrade-proposals/index.ts
 create mode 100644 libs/proposals/src/lib/protocol-upgrade-proposals/use-next-protocol-upgrade-proposals.ts
 create mode 100644 libs/proposals/src/lib/protocol-upgrade-proposals/use-time-to-upgrade.spec.ts
 create mode 100644 libs/proposals/src/lib/protocol-upgrade-proposals/use-time-to-upgrade.ts

diff --git a/apps/governance-e2e/src/support/proposal.functions.ts b/apps/governance-e2e/src/support/proposal.functions.ts
index 42253c670..00bd0ece4 100644
--- a/apps/governance-e2e/src/support/proposal.functions.ts
+++ b/apps/governance-e2e/src/support/proposal.functions.ts
@@ -89,6 +89,6 @@ export function mockNetworkUpgradeProposal() {
   cy.mockGQL((req) => {
     aliasGQLQuery(req, 'Nodes', nodeData);
     aliasGQLQuery(req, 'Proposals', proposalsData);
-    aliasGQLQuery(req, 'ProtocolUpgrades', upgradeProposalsData);
+    aliasGQLQuery(req, 'ProtocolUpgradeProposals', upgradeProposalsData);
   });
 }
diff --git a/apps/governance/src/routes/home/index.tsx b/apps/governance/src/routes/home/index.tsx
index 3f5751ccf..00ffd171c 100644
--- a/apps/governance/src/routes/home/index.tsx
+++ b/apps/governance/src/routes/home/index.tsx
@@ -15,7 +15,6 @@ import Routes from '../routes';
 import { ExternalLinks, removePaginationWrapper } from '@vegaprotocol/utils';
 import { useNodesQuery } from '../staking/home/__generated__/Nodes';
 import { useProposalsQuery } from '../proposals/proposals/__generated__/Proposals';
-import { useProtocolUpgradesQuery } from '../proposals/protocol-upgrade/__generated__/ProtocolUpgradeProposals';
 import {
   getNotRejectedProposals,
   getNotRejectedProtocolUpgradeProposals,
@@ -25,7 +24,8 @@ import * as Schema from '@vegaprotocol/types';
 import type { RouteChildProps } from '..';
 import type { ProposalFieldsFragment } from '../proposals/proposals/__generated__/Proposals';
 import type { NodesFragmentFragment } from '../staking/home/__generated__/Nodes';
-import type { ProtocolUpgradeProposalFieldsFragment } from '../proposals/protocol-upgrade/__generated__/ProtocolUpgradeProposals';
+import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
+import { useProtocolUpgradeProposalsQuery } from '@vegaprotocol/proposals';
 
 const nodesToShow = 6;
 
@@ -181,7 +181,7 @@ const GovernanceHome = ({ name }: RouteChildProps) => {
     data: protocolUpgradesData,
     loading: protocolUpgradesLoading,
     error: protocolUpgradesError,
-  } = useProtocolUpgradesQuery({
+  } = useProtocolUpgradeProposalsQuery({
     pollInterval: 5000,
     fetchPolicy: 'network-only',
     errorPolicy: 'ignore',
diff --git a/apps/governance/src/routes/proposals/components/proposals-list/proposals-list.tsx b/apps/governance/src/routes/proposals/components/proposals-list/proposals-list.tsx
index f31921db5..c6b8e761f 100644
--- a/apps/governance/src/routes/proposals/components/proposals-list/proposals-list.tsx
+++ b/apps/governance/src/routes/proposals/components/proposals-list/proposals-list.tsx
@@ -12,7 +12,7 @@ import { ExternalLinks } from '@vegaprotocol/utils';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
-import type { ProtocolUpgradeProposalFieldsFragment } from '../../protocol-upgrade/__generated__/ProtocolUpgradeProposals';
+import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
 
 interface ProposalsListProps {
   proposals: Array<ProposalFieldsFragment | ProposalQuery['proposal']>;
diff --git a/apps/governance/src/routes/proposals/components/protocol-upgrade-proposal-detail-info/protocol-upgrade-proposal-detail-info.tsx b/apps/governance/src/routes/proposals/components/protocol-upgrade-proposal-detail-info/protocol-upgrade-proposal-detail-info.tsx
index 3aace79fd..95b3612f7 100644
--- a/apps/governance/src/routes/proposals/components/protocol-upgrade-proposal-detail-info/protocol-upgrade-proposal-detail-info.tsx
+++ b/apps/governance/src/routes/proposals/components/protocol-upgrade-proposal-detail-info/protocol-upgrade-proposal-detail-info.tsx
@@ -5,7 +5,7 @@ import {
   RoundedWrapper,
 } from '@vegaprotocol/ui-toolkit';
 import { SubHeading } from '../../../../components/heading';
-import type { ProtocolUpgradeProposalFieldsFragment } from '../../protocol-upgrade/__generated__/ProtocolUpgradeProposals';
+import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
 
 export interface ProtocolUpgradeProposalDetailInfoProps {
   proposal: ProtocolUpgradeProposalFieldsFragment;
diff --git a/apps/governance/src/routes/proposals/components/protocol-upgrade-proposals-list-item/protocol-upgrade-proposals-list-item.spec.tsx b/apps/governance/src/routes/proposals/components/protocol-upgrade-proposals-list-item/protocol-upgrade-proposals-list-item.spec.tsx
index 65b78c073..4d0bdce7f 100644
--- a/apps/governance/src/routes/proposals/components/protocol-upgrade-proposals-list-item/protocol-upgrade-proposals-list-item.spec.tsx
+++ b/apps/governance/src/routes/proposals/components/protocol-upgrade-proposals-list-item/protocol-upgrade-proposals-list-item.spec.tsx
@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 import { ProtocolUpgradeProposalsListItem } from './protocol-upgrade-proposals-list-item';
 import { ProtocolUpgradeProposalStatus } from '@vegaprotocol/types';
-import type { ProtocolUpgradeProposalFieldsFragment } from '../../protocol-upgrade/__generated__/ProtocolUpgradeProposals';
+import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
 
 const proposal = {
   status:
diff --git a/apps/governance/src/routes/proposals/components/protocol-upgrade-proposals-list-item/protocol-upgrade-proposals-list-item.tsx b/apps/governance/src/routes/proposals/components/protocol-upgrade-proposals-list-item/protocol-upgrade-proposals-list-item.tsx
index c4be5acda..e96fb5941 100644
--- a/apps/governance/src/routes/proposals/components/protocol-upgrade-proposals-list-item/protocol-upgrade-proposals-list-item.tsx
+++ b/apps/governance/src/routes/proposals/components/protocol-upgrade-proposals-list-item/protocol-upgrade-proposals-list-item.tsx
@@ -11,8 +11,8 @@ import { stripFullStops } from '@vegaprotocol/utils';
 import { ProtocolUpgradeProposalStatus } from '@vegaprotocol/types';
 import { SubHeading } from '../../../../components/heading';
 import type { ReactNode } from 'react';
-import type { ProtocolUpgradeProposalFieldsFragment } from '../../protocol-upgrade/__generated__/ProtocolUpgradeProposals';
 import Routes from '../../../routes';
+import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
 
 interface ProtocolProposalsListItemProps {
   proposal: ProtocolUpgradeProposalFieldsFragment;
diff --git a/apps/governance/src/routes/proposals/proposals/proposals-container.tsx b/apps/governance/src/routes/proposals/proposals/proposals-container.tsx
index 4a92bd5d9..7d63a91f2 100644
--- a/apps/governance/src/routes/proposals/proposals/proposals-container.tsx
+++ b/apps/governance/src/routes/proposals/proposals/proposals-container.tsx
@@ -13,10 +13,9 @@ import {
 } from '@vegaprotocol/types';
 import type { NodeConnection, NodeEdge } from '@vegaprotocol/utils';
 import type { ProposalFieldsFragment } from './__generated__/Proposals';
-import type { ProtocolUpgradeProposalFieldsFragment } from '../protocol-upgrade/__generated__/ProtocolUpgradeProposals';
-
 import orderBy from 'lodash/orderBy';
-import { useProtocolUpgradesQuery } from '../protocol-upgrade/__generated__/ProtocolUpgradeProposals';
+import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
+import { useProtocolUpgradeProposalsQuery } from '@vegaprotocol/proposals';
 
 const orderByDate = (arr: ProposalFieldsFragment[]) =>
   orderBy(
@@ -73,7 +72,7 @@ export const ProposalsContainer = () => {
     data: protocolUpgradesData,
     loading: protocolUpgradesLoading,
     error: protocolUpgradesError,
-  } = useProtocolUpgradesQuery({
+  } = useProtocolUpgradeProposalsQuery({
     pollInterval: 5000,
     fetchPolicy: 'network-only',
     errorPolicy: 'ignore',
diff --git a/apps/governance/src/routes/proposals/protocol-upgrade/__generated__/ProtocolUpgradeProposals.ts b/apps/governance/src/routes/proposals/protocol-upgrade/__generated__/ProtocolUpgradeProposals.ts
deleted file mode 100644
index ef5f9928f..000000000
--- a/apps/governance/src/routes/proposals/protocol-upgrade/__generated__/ProtocolUpgradeProposals.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type ProtocolUpgradeProposalFieldsFragment = { __typename?: 'ProtocolUpgradeProposal', upgradeBlockHeight: string, vegaReleaseTag: string, approvers: Array<string>, status: Types.ProtocolUpgradeProposalStatus };
-
-export type ProtocolUpgradesQueryVariables = Types.Exact<{ [key: string]: never; }>;
-
-
-export type ProtocolUpgradesQuery = { __typename?: 'Query', lastBlockHeight: string, protocolUpgradeProposals?: { __typename?: 'ProtocolUpgradeProposalConnection', edges?: Array<{ __typename?: 'ProtocolUpgradeProposalEdge', node: { __typename?: 'ProtocolUpgradeProposal', upgradeBlockHeight: string, vegaReleaseTag: string, approvers: Array<string>, status: Types.ProtocolUpgradeProposalStatus } }> | null } | null };
-
-export const ProtocolUpgradeProposalFieldsFragmentDoc = gql`
-    fragment ProtocolUpgradeProposalFields on ProtocolUpgradeProposal {
-  upgradeBlockHeight
-  vegaReleaseTag
-  approvers
-  status
-}
-    `;
-export const ProtocolUpgradesDocument = gql`
-    query ProtocolUpgrades {
-  lastBlockHeight
-  protocolUpgradeProposals {
-    edges {
-      node {
-        ...ProtocolUpgradeProposalFields
-      }
-    }
-  }
-}
-    ${ProtocolUpgradeProposalFieldsFragmentDoc}`;
-
-/**
- * __useProtocolUpgradesQuery__
- *
- * To run a query within a React component, call `useProtocolUpgradesQuery` and pass it any options that fit your needs.
- * When your component renders, `useProtocolUpgradesQuery` 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 } = useProtocolUpgradesQuery({
- *   variables: {
- *   },
- * });
- */
-export function useProtocolUpgradesQuery(baseOptions?: Apollo.QueryHookOptions<ProtocolUpgradesQuery, ProtocolUpgradesQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ProtocolUpgradesQuery, ProtocolUpgradesQueryVariables>(ProtocolUpgradesDocument, options);
-      }
-export function useProtocolUpgradesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProtocolUpgradesQuery, ProtocolUpgradesQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ProtocolUpgradesQuery, ProtocolUpgradesQueryVariables>(ProtocolUpgradesDocument, options);
-        }
-export type ProtocolUpgradesQueryHookResult = ReturnType<typeof useProtocolUpgradesQuery>;
-export type ProtocolUpgradesLazyQueryHookResult = ReturnType<typeof useProtocolUpgradesLazyQuery>;
-export type ProtocolUpgradesQueryResult = Apollo.QueryResult<ProtocolUpgradesQuery, ProtocolUpgradesQueryVariables>;
\ No newline at end of file
diff --git a/apps/governance/src/routes/proposals/protocol-upgrade/protocol-upgrade-proposal-container.tsx b/apps/governance/src/routes/proposals/protocol-upgrade/protocol-upgrade-proposal-container.tsx
index 72b54e039..8cbe6d03b 100644
--- a/apps/governance/src/routes/proposals/protocol-upgrade/protocol-upgrade-proposal-container.tsx
+++ b/apps/governance/src/routes/proposals/protocol-upgrade/protocol-upgrade-proposal-container.tsx
@@ -6,14 +6,14 @@ import * as Schema from '@vegaprotocol/types';
 
 import { ProtocolUpgradeProposal } from './protocol-upgrade-proposal';
 import { ProposalNotFound } from '../components/proposal-not-found';
-import { useProtocolUpgradesQuery } from './__generated__/ProtocolUpgradeProposals';
 import { useNodesQuery } from '../../staking/home/__generated__/Nodes';
 import { useRefreshAfterEpoch } from '../../../hooks/use-refresh-after-epoch';
+import { useProtocolUpgradeProposalsQuery } from '@vegaprotocol/proposals';
 
 export const ProtocolUpgradeProposalContainer = () => {
   const params = useParams<{ proposalReleaseTag: string }>();
 
-  const { data, loading, error, refetch } = useProtocolUpgradesQuery({
+  const { data, loading, error, refetch } = useProtocolUpgradeProposalsQuery({
     fetchPolicy: 'network-only',
     errorPolicy: 'ignore',
     skip: !params.proposalReleaseTag,
diff --git a/apps/governance/src/routes/proposals/protocol-upgrade/protocol-upgrade-proposal.spec.tsx b/apps/governance/src/routes/proposals/protocol-upgrade/protocol-upgrade-proposal.spec.tsx
index 8e59e8b0d..229fbf001 100644
--- a/apps/governance/src/routes/proposals/protocol-upgrade/protocol-upgrade-proposal.spec.tsx
+++ b/apps/governance/src/routes/proposals/protocol-upgrade/protocol-upgrade-proposal.spec.tsx
@@ -9,7 +9,7 @@ import {
 import { ProtocolUpgradeProposalStatus } from '@vegaprotocol/types';
 import { getNormalisedVotingPower } from '../../staking/shared';
 import type { NodesFragmentFragment } from '../../staking/home/__generated__/Nodes';
-import type { ProtocolUpgradeProposalFieldsFragment } from './__generated__/ProtocolUpgradeProposals';
+import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
 
 const mockProposal: ProtocolUpgradeProposalFieldsFragment = {
   vegaReleaseTag: 'v0.1.234',
diff --git a/apps/governance/src/routes/proposals/protocol-upgrade/protocol-upgrade-proposal.tsx b/apps/governance/src/routes/proposals/protocol-upgrade/protocol-upgrade-proposal.tsx
index 6610a17ab..30747e594 100644
--- a/apps/governance/src/routes/proposals/protocol-upgrade/protocol-upgrade-proposal.tsx
+++ b/apps/governance/src/routes/proposals/protocol-upgrade/protocol-upgrade-proposal.tsx
@@ -3,8 +3,8 @@ import { ProtocolUpgradeProposalDetailHeader } from '../components/protocol-upgr
 import { ProtocolUpdateProposalDetailApprovals } from '../components/protocol-upgrade-proposal-detail-approvals';
 import { ProtocolUpgradeProposalDetailInfo } from '../components/protocol-upgrade-proposal-detail-info';
 import { getNormalisedVotingPower } from '../../staking/shared';
-import type { ProtocolUpgradeProposalFieldsFragment } from './__generated__/ProtocolUpgradeProposals';
 import type { NodesFragmentFragment } from '../../staking/home/__generated__/Nodes';
+import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
 
 export interface ProtocolUpgradeProposalProps {
   proposal: ProtocolUpgradeProposalFieldsFragment;
diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx
index ccbd32b91..c2e5e7464 100644
--- a/apps/trading/components/navbar/navbar.tsx
+++ b/apps/trading/components/navbar/navbar.tsx
@@ -24,6 +24,10 @@ import {
 import { Links, Routes } from '../../pages/client-router';
 import { createDocsLinks } from '@vegaprotocol/utils';
 import { SettingsButton } from '../../client-pages/settings';
+import {
+  ProtocolUpgradeCountdown,
+  ProtocolUpgradeCountdownMode,
+} from '@vegaprotocol/proposals';
 
 export const Navbar = ({
   theme = 'system',
@@ -45,11 +49,14 @@ export const Navbar = ({
       theme={theme}
       actions={
         <>
+          <ProtocolUpgradeCountdown
+            mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
+          />
           <SettingsButton />
           <VegaWalletConnectButton />
         </>
       }
-      breakpoints={[521, 1067]}
+      breakpoints={[521, 1122]}
     >
       <NavigationList
         className="[.drawer-content_&]:border-b [.drawer-content_&]:border-b-vega-light-200 dark:[.drawer-content_&]:border-b-vega-dark-200 [.drawer-content_&]:pb-8 [.drawer-content_&]:mb-2"
diff --git a/apps/trading/components/viewing-banner/index.tsx b/apps/trading/components/viewing-banner/index.tsx
index 2f01e7842..1d6adc884 100644
--- a/apps/trading/components/viewing-banner/index.tsx
+++ b/apps/trading/components/viewing-banner/index.tsx
@@ -5,7 +5,5 @@ export const ViewingBanner = () => {
   const { isReadOnly, pubKey, disconnect } = useVegaWallet();
   return isReadOnly ? (
     <ViewingAsBanner pubKey={pubKey} disconnect={disconnect} />
-  ) : (
-    <div />
-  );
+  ) : null;
 };
diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx
index 3996631d3..4f7d6ccab 100644
--- a/apps/trading/pages/_app.page.tsx
+++ b/apps/trading/pages/_app.page.tsx
@@ -37,6 +37,10 @@ import { ENV } from '../lib/config';
 import { useDataProvider } from '@vegaprotocol/react-helpers';
 import { activeOrdersProvider } from '@vegaprotocol/orders';
 import { useTelemetryApproval } from '../lib/hooks/use-telemetry-approval';
+import {
+  ProtocolUpgradeCountdownMode,
+  ProtocolUpgradeProposalNotification,
+} from '@vegaprotocol/proposals';
 
 const DEFAULT_TITLE = t('Welcome to Vega trading!');
 
@@ -89,7 +93,12 @@ function AppBody({ Component }: AppProps) {
       <div className={gridClasses}>
         <AnnouncementBanner />
         <Navbar theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'system'} />
-        <ViewingBanner />
+        <div data-testid="banners">
+          <ProtocolUpgradeProposalNotification
+            mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
+          />
+          <ViewingBanner />
+        </div>
         <main data-testid={location.pathname}>
           <Component />
         </main>
diff --git a/libs/environment/src/hooks/use-links.ts b/libs/environment/src/hooks/use-links.ts
index 674f29c46..69197976c 100644
--- a/libs/environment/src/hooks/use-links.ts
+++ b/libs/environment/src/hooks/use-links.ts
@@ -2,6 +2,7 @@ import trim from 'lodash/trim';
 import { useCallback } from 'react';
 import { Networks } from '../types';
 import { useEnvironment } from './use-environment';
+import { stripFullStops } from '@vegaprotocol/utils';
 
 type Net = Exclude<Networks, 'CUSTOM'>;
 export enum DApp {
@@ -89,15 +90,31 @@ export const useEtherscanLink = () => {
 // Vega blog
 export const BLOG = 'https://blog.vega.xyz/';
 
-// Token pages
+// Governance pages
 export const TOKEN_NEW_MARKET_PROPOSAL = '/proposals/propose/new-market';
 export const TOKEN_NEW_NETWORK_PARAM_PROPOSAL =
   '/proposals/propose/network-parameter';
 export const TOKEN_GOVERNANCE = '/proposals';
 export const TOKEN_PROPOSALS = '/proposals';
 export const TOKEN_PROPOSAL = '/proposals/:id';
+export const TOKEN_PROTOCOL_UPGRADE_PROPOSAL =
+  '/proposals/protocol-upgrade/:tag';
 export const TOKEN_VALIDATOR = '/validators/:id';
 
+/**
+ * Generates link to the protocol upgrade proposal details on Governance
+ */
+export const useProtocolUpgradeProposalLink = () => {
+  const governance = useLinks(DApp.Token);
+  return (releaseTag: string) =>
+    governance(
+      TOKEN_PROTOCOL_UPGRADE_PROPOSAL.replace(
+        ':tag',
+        stripFullStops(releaseTag)
+      )
+    );
+};
+
 // Explorer pages
 export const EXPLORER_TX = '/txs/:hash';
 export const EXPLORER_ORACLE = '/oracles/:id';
diff --git a/libs/proposals/src/components/index.ts b/libs/proposals/src/components/index.ts
index 8bf06c268..f6dabd48d 100644
--- a/libs/proposals/src/components/index.ts
+++ b/libs/proposals/src/components/index.ts
@@ -1,2 +1,4 @@
 export * from './asset-proposal-notification';
 export * from './market-proposal-notification';
+export * from './protocol-upgrade-countdown';
+export * from './protocol-upgrade-proposal-notification';
diff --git a/libs/proposals/src/components/protocol-upgrade-countdown.tsx b/libs/proposals/src/components/protocol-upgrade-countdown.tsx
new file mode 100644
index 000000000..2d8ab4071
--- /dev/null
+++ b/libs/proposals/src/components/protocol-upgrade-countdown.tsx
@@ -0,0 +1,99 @@
+import { t } from '@vegaprotocol/i18n';
+import { useNextProtocolUpgradeProposal, useTimeToUpgrade } from '../lib';
+import { convertToCountdownString } from '@vegaprotocol/utils';
+import { IconNames } from '@blueprintjs/icons';
+import classNames from 'classnames';
+import { Icon, NavigationContext } from '@vegaprotocol/ui-toolkit';
+import { useProtocolUpgradeProposalLink } from '@vegaprotocol/environment';
+import { useContext } from 'react';
+export enum ProtocolUpgradeCountdownMode {
+  IN_BLOCKS,
+  IN_ESTIMATED_TIME_REMAINING,
+}
+type ProtocolUpgradeCountdownProps = {
+  mode?: ProtocolUpgradeCountdownMode;
+};
+export const ProtocolUpgradeCountdown = ({
+  mode = ProtocolUpgradeCountdownMode.IN_BLOCKS,
+}: ProtocolUpgradeCountdownProps) => {
+  const { theme } = useContext(NavigationContext);
+  const { data, lastBlockHeight } = useNextProtocolUpgradeProposal();
+
+  const time = useTimeToUpgrade(
+    data && data.upgradeBlockHeight
+      ? Number(data.upgradeBlockHeight)
+      : undefined
+  );
+
+  const detailsLink = useProtocolUpgradeProposalLink();
+
+  if (!data) return null;
+
+  const emphasis = classNames(
+    'text-vega-orange-500 dark:text-vega-orange-500',
+    {
+      '!text-black': theme === 'yellow',
+    }
+  );
+
+  let countdown;
+  switch (mode) {
+    case ProtocolUpgradeCountdownMode.IN_BLOCKS:
+      countdown = (
+        <>
+          <span className={emphasis}>
+            {Number(data.upgradeBlockHeight) - Number(lastBlockHeight)}
+          </span>{' '}
+          {t('blocks')}
+        </>
+      );
+      break;
+    case ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING:
+      countdown =
+        time !== undefined ? (
+          <span className={emphasis}>
+            {convertToCountdownString(time, '0:00:00:00')}
+          </span>
+        ) : (
+          <span
+            className={classNames('italic lowercase text-vega-orange-600', {
+              '!text-black': theme === 'yellow',
+            })}
+          >
+            {t('estimating...')}
+          </span>
+        );
+      break;
+  }
+
+  return (
+    <a
+      href={detailsLink(data.vegaReleaseTag)}
+      target="_blank"
+      rel="noreferrer nofollow noopener"
+    >
+      <div
+        data-testid="protocol-upgrade-counter"
+        className={classNames(
+          'flex flex-nowrap items-center text-xs py-2 px-4',
+          'border rounded',
+          'border-vega-orange-500 dark:border-vega-orange-500',
+          'bg-vega-orange-300 dark:bg-vega-orange-700',
+          {
+            '!bg-transparent !border-black': theme === 'yellow',
+          }
+        )}
+      >
+        <Icon
+          name={IconNames.WARNING_SIGN}
+          size={3}
+          className={classNames('mr-2', emphasis)}
+        />{' '}
+        <span className="flex gap-1 flex-nowrap whitespace-nowrap">
+          <span>{t('Network upgrade in')} </span>
+          {countdown}
+        </span>
+      </div>
+    </a>
+  );
+};
diff --git a/libs/proposals/src/components/protocol-upgrade-proposal-notification.tsx b/libs/proposals/src/components/protocol-upgrade-proposal-notification.tsx
new file mode 100644
index 000000000..0fdc63813
--- /dev/null
+++ b/libs/proposals/src/components/protocol-upgrade-proposal-notification.tsx
@@ -0,0 +1,79 @@
+import {
+  ExternalLink,
+  Intent,
+  NotificationBanner,
+} from '@vegaprotocol/ui-toolkit';
+import { useNextProtocolUpgradeProposal, useTimeToUpgrade } from '../lib';
+import { t } from '@vegaprotocol/i18n';
+import { useProtocolUpgradeProposalLink } from '@vegaprotocol/environment';
+import { ProtocolUpgradeCountdownMode } from './protocol-upgrade-countdown';
+import { convertToCountdownString } from '@vegaprotocol/utils';
+import { useState } from 'react';
+
+type ProtocolUpgradeProposalNotificationProps = {
+  mode?: ProtocolUpgradeCountdownMode;
+};
+export const ProtocolUpgradeProposalNotification = ({
+  mode = ProtocolUpgradeCountdownMode.IN_BLOCKS,
+}: ProtocolUpgradeProposalNotificationProps) => {
+  const [visible, setVisible] = useState(true);
+  const { data, lastBlockHeight } = useNextProtocolUpgradeProposal();
+  const detailsLink = useProtocolUpgradeProposalLink();
+  const time = useTimeToUpgrade(
+    data && data.upgradeBlockHeight
+      ? Number(data.upgradeBlockHeight)
+      : undefined
+  );
+
+  if (!data || !lastBlockHeight || !visible) return null;
+
+  const { vegaReleaseTag, upgradeBlockHeight } = data;
+
+  let countdown;
+  switch (mode) {
+    case ProtocolUpgradeCountdownMode.IN_BLOCKS:
+      countdown = (
+        <>
+          <span className="text-vega-orange-500">
+            {Number(upgradeBlockHeight) - Number(lastBlockHeight)}
+          </span>{' '}
+          {t('blocks')}
+        </>
+      );
+      break;
+    case ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING:
+      countdown =
+        time !== undefined ? (
+          <span className="text-vega-orange-500">
+            {convertToCountdownString(time, '0:00:00:00')}
+          </span>
+        ) : (
+          <span className="text-vega-orange-600 lowercase italic">
+            {t('estimating...')}
+          </span>
+        );
+      break;
+  }
+
+  return (
+    <NotificationBanner
+      intent={Intent.Warning}
+      onClose={() => {
+        setVisible(false);
+      }}
+    >
+      <div className="uppercase ">
+        {t('The network will upgrade to %s in ', [data.vegaReleaseTag])}
+        {countdown}
+      </div>
+      <div>
+        {t(
+          'Trading activity will be interrupted, manage your risk appropriately.'
+        )}{' '}
+        <ExternalLink href={detailsLink(vegaReleaseTag)}>
+          {t('View details')}
+        </ExternalLink>
+      </div>
+    </NotificationBanner>
+  );
+};
diff --git a/libs/proposals/src/lib/index.ts b/libs/proposals/src/lib/index.ts
index a9e213996..f8ae02537 100644
--- a/libs/proposals/src/lib/index.ts
+++ b/libs/proposals/src/lib/index.ts
@@ -3,3 +3,4 @@ export * from './voting-hooks';
 export * from './proposals-data-provider';
 export * from './proposals-list';
 export * from './voting-progress';
+export * from './protocol-upgrade-proposals';
diff --git a/libs/proposals/src/lib/protocol-upgrade-proposals/BlockStatistics.graphql b/libs/proposals/src/lib/protocol-upgrade-proposals/BlockStatistics.graphql
new file mode 100644
index 000000000..a1bcfc112
--- /dev/null
+++ b/libs/proposals/src/lib/protocol-upgrade-proposals/BlockStatistics.graphql
@@ -0,0 +1,6 @@
+query BlockStatistics {
+  statistics {
+    blockHeight
+    blockDuration
+  }
+}
diff --git a/apps/governance/src/routes/proposals/protocol-upgrade/ProtocolUpgradeProposals.graphql b/libs/proposals/src/lib/protocol-upgrade-proposals/ProtocolUpgradeProposals.graphql
similarity index 65%
rename from apps/governance/src/routes/proposals/protocol-upgrade/ProtocolUpgradeProposals.graphql
rename to libs/proposals/src/lib/protocol-upgrade-proposals/ProtocolUpgradeProposals.graphql
index 35959a69f..f895a3f53 100644
--- a/apps/governance/src/routes/proposals/protocol-upgrade/ProtocolUpgradeProposals.graphql
+++ b/libs/proposals/src/lib/protocol-upgrade-proposals/ProtocolUpgradeProposals.graphql
@@ -5,9 +5,9 @@ fragment ProtocolUpgradeProposalFields on ProtocolUpgradeProposal {
   status
 }
 
-query ProtocolUpgrades {
+query ProtocolUpgradeProposals($inState: ProtocolUpgradeProposalStatus) {
   lastBlockHeight
-  protocolUpgradeProposals {
+  protocolUpgradeProposals(inState: $inState) {
     edges {
       node {
         ...ProtocolUpgradeProposalFields
diff --git a/libs/proposals/src/lib/protocol-upgrade-proposals/__generated__/BlockStatistics.ts b/libs/proposals/src/lib/protocol-upgrade-proposals/__generated__/BlockStatistics.ts
new file mode 100644
index 000000000..c4c4ff579
--- /dev/null
+++ b/libs/proposals/src/lib/protocol-upgrade-proposals/__generated__/BlockStatistics.ts
@@ -0,0 +1,46 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type BlockStatisticsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type BlockStatisticsQuery = { __typename?: 'Query', statistics: { __typename?: 'Statistics', blockHeight: string, blockDuration: string } };
+
+
+export const BlockStatisticsDocument = gql`
+    query BlockStatistics {
+  statistics {
+    blockHeight
+    blockDuration
+  }
+}
+    `;
+
+/**
+ * __useBlockStatisticsQuery__
+ *
+ * To run a query within a React component, call `useBlockStatisticsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useBlockStatisticsQuery` 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 } = useBlockStatisticsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useBlockStatisticsQuery(baseOptions?: Apollo.QueryHookOptions<BlockStatisticsQuery, BlockStatisticsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<BlockStatisticsQuery, BlockStatisticsQueryVariables>(BlockStatisticsDocument, options);
+      }
+export function useBlockStatisticsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<BlockStatisticsQuery, BlockStatisticsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<BlockStatisticsQuery, BlockStatisticsQueryVariables>(BlockStatisticsDocument, options);
+        }
+export type BlockStatisticsQueryHookResult = ReturnType<typeof useBlockStatisticsQuery>;
+export type BlockStatisticsLazyQueryHookResult = ReturnType<typeof useBlockStatisticsLazyQuery>;
+export type BlockStatisticsQueryResult = Apollo.QueryResult<BlockStatisticsQuery, BlockStatisticsQueryVariables>;
\ No newline at end of file
diff --git a/libs/proposals/src/lib/protocol-upgrade-proposals/__generated__/ProtocolUpgradeProposals.ts b/libs/proposals/src/lib/protocol-upgrade-proposals/__generated__/ProtocolUpgradeProposals.ts
new file mode 100644
index 000000000..f9a49f138
--- /dev/null
+++ b/libs/proposals/src/lib/protocol-upgrade-proposals/__generated__/ProtocolUpgradeProposals.ts
@@ -0,0 +1,62 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ProtocolUpgradeProposalFieldsFragment = { __typename?: 'ProtocolUpgradeProposal', upgradeBlockHeight: string, vegaReleaseTag: string, approvers: Array<string>, status: Types.ProtocolUpgradeProposalStatus };
+
+export type ProtocolUpgradeProposalsQueryVariables = Types.Exact<{
+  inState?: Types.InputMaybe<Types.ProtocolUpgradeProposalStatus>;
+}>;
+
+
+export type ProtocolUpgradeProposalsQuery = { __typename?: 'Query', lastBlockHeight: string, protocolUpgradeProposals?: { __typename?: 'ProtocolUpgradeProposalConnection', edges?: Array<{ __typename?: 'ProtocolUpgradeProposalEdge', node: { __typename?: 'ProtocolUpgradeProposal', upgradeBlockHeight: string, vegaReleaseTag: string, approvers: Array<string>, status: Types.ProtocolUpgradeProposalStatus } }> | null } | null };
+
+export const ProtocolUpgradeProposalFieldsFragmentDoc = gql`
+    fragment ProtocolUpgradeProposalFields on ProtocolUpgradeProposal {
+  upgradeBlockHeight
+  vegaReleaseTag
+  approvers
+  status
+}
+    `;
+export const ProtocolUpgradeProposalsDocument = gql`
+    query ProtocolUpgradeProposals($inState: ProtocolUpgradeProposalStatus) {
+  lastBlockHeight
+  protocolUpgradeProposals(inState: $inState) {
+    edges {
+      node {
+        ...ProtocolUpgradeProposalFields
+      }
+    }
+  }
+}
+    ${ProtocolUpgradeProposalFieldsFragmentDoc}`;
+
+/**
+ * __useProtocolUpgradeProposalsQuery__
+ *
+ * To run a query within a React component, call `useProtocolUpgradeProposalsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useProtocolUpgradeProposalsQuery` 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 } = useProtocolUpgradeProposalsQuery({
+ *   variables: {
+ *      inState: // value for 'inState'
+ *   },
+ * });
+ */
+export function useProtocolUpgradeProposalsQuery(baseOptions?: Apollo.QueryHookOptions<ProtocolUpgradeProposalsQuery, ProtocolUpgradeProposalsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ProtocolUpgradeProposalsQuery, ProtocolUpgradeProposalsQueryVariables>(ProtocolUpgradeProposalsDocument, options);
+      }
+export function useProtocolUpgradeProposalsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProtocolUpgradeProposalsQuery, ProtocolUpgradeProposalsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ProtocolUpgradeProposalsQuery, ProtocolUpgradeProposalsQueryVariables>(ProtocolUpgradeProposalsDocument, options);
+        }
+export type ProtocolUpgradeProposalsQueryHookResult = ReturnType<typeof useProtocolUpgradeProposalsQuery>;
+export type ProtocolUpgradeProposalsLazyQueryHookResult = ReturnType<typeof useProtocolUpgradeProposalsLazyQuery>;
+export type ProtocolUpgradeProposalsQueryResult = Apollo.QueryResult<ProtocolUpgradeProposalsQuery, ProtocolUpgradeProposalsQueryVariables>;
\ No newline at end of file
diff --git a/libs/proposals/src/lib/protocol-upgrade-proposals/index.ts b/libs/proposals/src/lib/protocol-upgrade-proposals/index.ts
new file mode 100644
index 000000000..9e18c4bf3
--- /dev/null
+++ b/libs/proposals/src/lib/protocol-upgrade-proposals/index.ts
@@ -0,0 +1,3 @@
+export * from './__generated__/ProtocolUpgradeProposals';
+export * from './use-next-protocol-upgrade-proposals';
+export * from './use-time-to-upgrade';
diff --git a/libs/proposals/src/lib/protocol-upgrade-proposals/use-next-protocol-upgrade-proposals.ts b/libs/proposals/src/lib/protocol-upgrade-proposals/use-next-protocol-upgrade-proposals.ts
new file mode 100644
index 000000000..70bc3bff7
--- /dev/null
+++ b/libs/proposals/src/lib/protocol-upgrade-proposals/use-next-protocol-upgrade-proposals.ts
@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+import * as Schema from '@vegaprotocol/types';
+import { removePaginationWrapper } from '@vegaprotocol/utils';
+import { useProtocolUpgradeProposalsQuery } from './__generated__/ProtocolUpgradeProposals';
+
+export const useNextProtocolUpgradeProposals = (since?: number) => {
+  const { data, loading, error } = useProtocolUpgradeProposalsQuery({
+    pollInterval: 5000,
+    fetchPolicy: 'network-only',
+    errorPolicy: 'ignore',
+    variables: {
+      inState:
+        Schema.ProtocolUpgradeProposalStatus
+          .PROTOCOL_UPGRADE_PROPOSAL_STATUS_APPROVED,
+    },
+  });
+
+  const nextUpgrades = useMemo(() => {
+    if (!data) return [];
+
+    const proposals = removePaginationWrapper(
+      data?.protocolUpgradeProposals?.edges
+    );
+
+    return proposals
+      .filter(
+        (p) =>
+          Number(p.upgradeBlockHeight) > (since || Number(data.lastBlockHeight))
+      )
+      .sort(
+        (a, b) => Number(a.upgradeBlockHeight) - Number(b.upgradeBlockHeight)
+      );
+  }, [data, since]);
+
+  return {
+    data: nextUpgrades,
+    lastBlockHeight: data?.lastBlockHeight,
+    loading,
+    error,
+  };
+};
+
+export const useNextProtocolUpgradeProposal = (since?: number) => {
+  const { data, lastBlockHeight, loading, error } =
+    useNextProtocolUpgradeProposals(since);
+
+  return {
+    data: !data ? undefined : data[0],
+    lastBlockHeight,
+    loading,
+    error,
+  };
+};
diff --git a/libs/proposals/src/lib/protocol-upgrade-proposals/use-time-to-upgrade.spec.ts b/libs/proposals/src/lib/protocol-upgrade-proposals/use-time-to-upgrade.spec.ts
new file mode 100644
index 000000000..34343a748
--- /dev/null
+++ b/libs/proposals/src/lib/protocol-upgrade-proposals/use-time-to-upgrade.spec.ts
@@ -0,0 +1,32 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { useTimeToUpgrade } from './use-time-to-upgrade';
+
+jest.mock('./__generated__/BlockStatistics', () => ({
+  ...jest.requireActual('./__generated__/BlockStatistics'),
+  useBlockStatisticsQuery: jest.fn(() => {
+    return {
+      data: {
+        statistics: {
+          blockHeight: 1,
+          blockDuration: 500,
+        },
+      },
+    };
+  }),
+}));
+
+describe('useTimeToUpgrade', () => {
+  it.each([
+    [-1, -1000],
+    [0, -500],
+    [1, 0],
+    [2, 500],
+    [3, 1000],
+    [10, 4500],
+  ])('time in %d block(s) should be %d ms', async (block, avg) => {
+    const { result } = renderHook(() => useTimeToUpgrade(block, 1));
+    await waitFor(() => {
+      expect(result.current).toEqual(avg);
+    });
+  });
+});
diff --git a/libs/proposals/src/lib/protocol-upgrade-proposals/use-time-to-upgrade.ts b/libs/proposals/src/lib/protocol-upgrade-proposals/use-time-to-upgrade.ts
new file mode 100644
index 000000000..10b5a22f5
--- /dev/null
+++ b/libs/proposals/src/lib/protocol-upgrade-proposals/use-time-to-upgrade.ts
@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import { useBlockStatisticsQuery } from './__generated__/BlockStatistics';
+import sum from 'lodash/sum';
+
+const DEFAULT_POLLS = 10;
+const INTERVAL = 1000;
+const durations = [] as number[];
+
+const useAverageBlockDuration = (polls = DEFAULT_POLLS) => {
+  const [avg, setAvg] = useState<number | undefined>(undefined);
+  const { data } = useBlockStatisticsQuery({
+    pollInterval: INTERVAL,
+    fetchPolicy: 'network-only',
+    errorPolicy: 'ignore',
+    skip: durations.length === polls,
+  });
+
+  useEffect(() => {
+    if (durations.length < polls && data) {
+      durations.push(parseFloat(data.statistics.blockDuration));
+    }
+    if (durations.length === polls) {
+      const averageBlockDuration = sum(durations) / durations.length; // ms
+      console.log('setting avg', averageBlockDuration);
+      setAvg(averageBlockDuration);
+    }
+  }, [data, polls]);
+
+  return avg;
+};
+
+export const useTimeToUpgrade = (
+  upgradeBlockHeight?: number,
+  polls = DEFAULT_POLLS
+) => {
+  const [time, setTime] = useState<number | undefined>(undefined);
+  const avg = useAverageBlockDuration(polls);
+  const { data } = useBlockStatisticsQuery({
+    fetchPolicy: 'network-only',
+    errorPolicy: 'ignore',
+  });
+
+  useEffect(() => {
+    const t =
+      (Number(upgradeBlockHeight) - Number(data?.statistics.blockHeight)) *
+      Number(avg);
+    if (!isNaN(t)) {
+      setTime(t);
+    }
+  }, [avg, data?.statistics.blockHeight, upgradeBlockHeight]);
+
+  useEffect(() => {
+    const i = setInterval(() => {
+      if (time !== undefined) {
+        setTime(time - 1000);
+      }
+    }, 1000);
+    return () => {
+      clearInterval(i);
+    };
+  }, [time]);
+
+  return time;
+};
diff --git a/libs/utils/src/lib/time.spec.ts b/libs/utils/src/lib/time.spec.ts
index 1c2518d4c..0cd024661 100644
--- a/libs/utils/src/lib/time.spec.ts
+++ b/libs/utils/src/lib/time.spec.ts
@@ -1,4 +1,8 @@
-import { getSecondsFromInterval } from './time';
+import {
+  convertToCountdown,
+  convertToCountdownString,
+  getSecondsFromInterval,
+} from './time';
 
 describe('getSecondsFromInterval', () => {
   it('returns 0 for bad data', () => {
@@ -34,3 +38,44 @@ describe('getSecondsFromInterval', () => {
     expect(getSecondsFromInterval('1D1h30m1s')).toEqual(91801);
   });
 });
+
+describe('convertToCountdown', () => {
+  it.each([
+    [1 * 1000, [0, 0, 0, 1]],
+    [2 * 1000, [0, 0, 0, 2]],
+    [3999, [0, 0, 0, 3]],
+    [1 * 60 * 1000 + 3 * 1000, [0, 0, 1, 3]],
+    [12 * 60 * 1000 + 3 * 1000, [0, 0, 12, 3]],
+    [3 * 60 * 60 * 1000 + 12 * 60 * 1000 + 3 * 1000, [0, 3, 12, 3]],
+    [
+      30 * 24 * 60 * 60 * 1000 + 3 * 60 * 60 * 1000 + 12 * 60 * 1000 + 3 * 1000,
+      [30, 3, 12, 3],
+    ],
+    [
+      -1 *
+        (30 * 24 * 60 * 60 * 1000 +
+          3 * 60 * 60 * 1000 +
+          12 * 60 * 1000 +
+          3 * 1000),
+      [30, 3, 12, 3],
+    ],
+  ])('converts %d ms to %s', (time, countdown) => {
+    expect(convertToCountdown(time)).toEqual(countdown);
+  });
+});
+
+describe('convertToCountdownString', () => {
+  it.each([
+    [1 * 1000, '00m01s'],
+    [2 * 1000, '00m02s'],
+    [1 * 60 * 1000 + 3 * 1000, '01m03s'],
+    [12 * 60 * 1000 + 3 * 1000, '12m03s'],
+    [3 * 60 * 60 * 1000 + 12 * 60 * 1000 + 3 * 1000, '03h12m03s'],
+    [
+      30 * 24 * 60 * 60 * 1000 + 3 * 60 * 60 * 1000 + 12 * 60 * 1000 + 3 * 1000,
+      '30d03h12m03s',
+    ],
+  ])('converts %d ms to %s', (time, countdown) => {
+    expect(convertToCountdownString(time)).toEqual(countdown);
+  });
+});
diff --git a/libs/utils/src/lib/time.ts b/libs/utils/src/lib/time.ts
index 1ac28755f..0b41bcc53 100644
--- a/libs/utils/src/lib/time.ts
+++ b/libs/utils/src/lib/time.ts
@@ -46,3 +46,47 @@ export function getSecondsFromInterval(str: string) {
   }
   return seconds;
 }
+
+export const convertToCountdown = (time: number) => {
+  const s = 1000;
+  const m = 1000 * 60;
+  const h = 1000 * 60 * 60;
+  const d = 1000 * 60 * 60 * 24;
+
+  const t = Math.abs(time);
+
+  const days = Math.floor(t / d);
+  const hours = Math.floor((t - days * d) / h);
+  const minutes = Math.floor((t - days * d - hours * h) / m);
+  const seconds = Math.floor((t - days * d - hours * h - minutes * m) / s);
+
+  return [days, hours, minutes, seconds];
+};
+
+/**
+ * Converts given time in ms to countdown string, e.g. 1d20h34m10s
+ */
+export const convertToCountdownString = (
+  time: number,
+  pattern = '0d00h00m00s'
+) => {
+  const values = convertToCountdown(time);
+
+  let i = 0;
+  const countdown = pattern
+    .replace(/00*/g, (match) => {
+      const value = String(values[i++]);
+      if (value.length < match.length) {
+        const filler = Array(match.length - value.length)
+          .fill('0')
+          .join('');
+        return `${filler}${value}`;
+      }
+
+      return value;
+    })
+    .replace(/^00*[^\d]*/g, '') // replace leading 00, e.g. 00d01h23m45s -> 01h23m45s
+    .replace(/^00[^\d]*/g, ''); // replace leading 00, e.g. 00d00h23m45s -> 23m45s
+
+  return countdown;
+};