feat(2056): pending balances (#2185)

* chore: create store

* chore: migrate logic to use new store

* test: fix test typings

apps/token/src/components/balance-manager/balance-manager.tsx

@@ -4,13 +4,11 @@ import { useEthereumConfig } from '@vegaprotocol/web3';
 import { useWeb3React } from '@web3-react/core';
 import React from 'react';
 
-import {
+import { useAppState } from '../../contexts/app-state/app-state-context';
-  AppStateActionType,
-  useAppState,
-} from '../../contexts/app-state/app-state-context';
 import { useContracts } from '../../contexts/contracts/contracts-context';
 import { useGetAssociationBreakdown } from '../../hooks/use-get-association-breakdown';
 import { useGetUserTrancheBalances } from '../../hooks/use-get-user-tranche-balances';
+import { useBalances } from '../../lib/balances/balances-store';
 
 interface BalanceManagerProps {
   children: React.ReactElement;
@@ -21,8 +19,8 @@ export const BalanceManager = ({ children }: BalanceManagerProps) => {
   const { account } = useWeb3React();
   const {
     appState: { decimals },
-    appDispatch,
   } = useAppState();
+  const { updateBalances: updateStoreBalances } = useBalances();
   const { config } = useEthereumConfig();
 
   const getUserTrancheBalances = useGetUserTrancheBalances(
@@ -55,9 +53,8 @@ export const BalanceManager = ({ children }: BalanceManagerProps) => {
         const lien = toBigNum(stats.lien, decimals);
         const allowance = toBigNum(a, decimals);
 
-        appDispatch({
+        updateStoreBalances({
-          type: AppStateActionType.UPDATE_ACCOUNT_BALANCES,
+          balanceFormatted: balance,
-          balance,
           walletBalance,
           lien,
           allowance,
@@ -70,11 +67,11 @@ export const BalanceManager = ({ children }: BalanceManagerProps) => {
     updateBalances();
   }, [
     decimals,
-    appDispatch,
+    contracts.token,
-    contracts?.token,
+    contracts.vesting,
-    contracts?.vesting,
     account,
     config,
+    updateStoreBalances,
   ]);
 
   // This use effect hook is very expensive and is kept separate to prevent expensive reloading of data.

apps/token/src/components/eth-wallet/eth-wallet.tsx

@@ -25,6 +25,7 @@ import {
 } from '../wallet-card';
 import { Loader } from '@vegaprotocol/ui-toolkit';
 import colors from 'tailwindcss/colors';
+import { useBalances } from '../../lib/balances/balances-store';
 
 const removeLeadingAddressSymbol = (key: string) => {
   if (key && key.length > 2 && key.slice(0, 2) === '0x') {
@@ -92,31 +93,31 @@ const AssociatedAmounts = ({
 
 const ConnectedKey = () => {
   const { t } = useTranslation();
-  const { appState } = useAppState();
+  const {
-  const { walletBalance, totalLockedBalance, totalVestedBalance } = appState;
+    appState: { decimals },
+  } = useAppState();
+  const {
+    walletBalance,
+    totalLockedBalance,
+    totalVestedBalance,
+    associationBreakdown,
+  } = useBalances();
 
   const totalInVestingContract = React.useMemo(() => {
     return totalLockedBalance.plus(totalVestedBalance);
   }, [totalLockedBalance, totalVestedBalance]);
 
   const notAssociatedInContract = React.useMemo(() => {
-    const totals = Object.values(
+    const totals = Object.values(associationBreakdown.vestingAssociations);
-      appState.associationBreakdown.vestingAssociations
-    );
     const associated = BigNumber.sum.apply(null, [new BigNumber(0), ...totals]);
     return totalInVestingContract.minus(associated);
-  }, [
+  }, [associationBreakdown.vestingAssociations, totalInVestingContract]);
-    appState.associationBreakdown.vestingAssociations,
-    totalInVestingContract,
-  ]);
 
   const walletWithAssociations = React.useMemo(() => {
-    const totals = Object.values(
+    const totals = Object.values(associationBreakdown.stakingAssociations);
-      appState.associationBreakdown.stakingAssociations
-    );
     const associated = BigNumber.sum.apply(null, [new BigNumber(0), ...totals]);
     return walletBalance.plus(associated);
-  }, [appState.associationBreakdown.stakingAssociations, walletBalance]);
+  }, [associationBreakdown.stakingAssociations, walletBalance]);
 
   return (
     <>
@@ -125,7 +126,7 @@ const ConnectedKey = () => {
           <section>
             <WalletCardAsset
               image={vegaVesting}
-              decimals={appState.decimals}
+              decimals={decimals}
               name="VEGA"
               symbol="In vesting contract"
               balance={totalInVestingContract}
@@ -139,10 +140,10 @@ const ConnectedKey = () => {
             />
           </section>
         )}
-        {!Object.keys(appState.associationBreakdown.vestingAssociations)
+        {!Object.keys(associationBreakdown.vestingAssociations)
           .length ? null : (
           <AssociatedAmounts
-            associations={appState.associationBreakdown.vestingAssociations}
+            associations={associationBreakdown.vestingAssociations}
             notAssociated={notAssociatedInContract}
           />
         )}
@@ -150,16 +151,14 @@ const ConnectedKey = () => {
       <section data-testid="vega-in-wallet">
         <WalletCardAsset
           image={vegaWhite}
-          decimals={appState.decimals}
+          decimals={decimals}
           name="VEGA"
           symbol="In Wallet"
           balance={walletWithAssociations}
         />
-        {!Object.keys(
+        {!Object.keys(associationBreakdown.stakingAssociations) ? null : (
-          appState.associationBreakdown.stakingAssociations
-        ) ? null : (
           <AssociatedAmounts
-            associations={appState.associationBreakdown.stakingAssociations}
+            associations={associationBreakdown.stakingAssociations}
             notAssociated={walletBalance}
           />
         )}

apps/token/src/contexts/app-state/app-state-context.ts

@@ -31,15 +31,6 @@ export interface UserTrancheBalance {
 }
 
 export interface AppState {
-  /** Users vesting balance across all tranches */
-  balanceFormatted: BigNumber;
-
-  /** Users balance of VEGA in Metamask */
-  walletBalance: BigNumber;
-
-  /** Amount of tokens associated for a given eth address  */
-  lien: BigNumber;
-
   /** Array of tranche objects */
   tranches: Tranche[] | null;
 
@@ -52,18 +43,6 @@ export interface AppState {
   /** Total number of VEGA Tokens, both vesting and unlocked, associated for staking */
   totalAssociated: BigNumber;
 
-  /** Users total unlocked tokens */
-  totalVestedBalance: BigNumber;
-
-  /** Users total locked (vesting) tokens */
-  totalLockedBalance: BigNumber;
-
-  /** Breakdown of users vesting/vested balances across tranches */
-  trancheBalances: UserTrancheBalance[];
-
-  /** Approved amount of VEGA to be associated for staking */
-  allowance: BigNumber;
-
   /** Whether or not the connect to VEGA wallet overlay is open */
   vegaWalletOverlay: boolean;
 
@@ -73,27 +52,12 @@ export interface AppState {
   /** Whether or not the connect to Ethereum wallet overlay is open */
   ethConnectOverlay: boolean;
 
-  /** Amount of tokens associated with the current Vega key from wallet*/
-  walletAssociatedBalance: BigNumber | null;
-
-  /** Amount of tokens associated with the current Vega key from vesting contract*/
-  vestingAssociatedBalance: BigNumber | null;
-
   /** The error if one was thrown during retrieval of tranche data */
   trancheError: Error | null;
 
   /** Whether or not the mobile drawer is open. Only relevant on screens smaller than 960 */
   drawerOpen: boolean;
 
-  /**
-   * A breakdown of associations by Vega key. An object where each key is the vega key and
-   * the value is the total amount associated (staking and vesting combined) to that key.
-   */
-  associationBreakdown: {
-    stakingAssociations: { [vegaKey: string]: BigNumber };
-    vestingAssociations: { [vegaKey: string]: BigNumber };
-  };
-
   /**  Whether or not the transaction modal is open */
   transactionOverlay: boolean;
   /**
@@ -120,35 +84,14 @@ export enum AppStateActionType {
 }
 
 export type AppStateAction =
-  | {
-      type: AppStateActionType.UPDATE_ACCOUNT_BALANCES;
-      balance: BigNumber;
-      walletBalance: BigNumber;
-      lien: BigNumber;
-      allowance: BigNumber;
-    }
   | {
       type: AppStateActionType.SET_TOKEN;
       decimals: number;
       totalSupply: BigNumber;
       totalAssociated: BigNumber;
     }
-  | {
-      type: AppStateActionType.SET_ALLOWANCE;
-      allowance: BigNumber;
-    }
-  | {
-      type: AppStateActionType.REFRESH_BALANCES;
-      balance: BigNumber;
-      walletBalance: BigNumber;
-      lien: BigNumber;
-      allowance: BigNumber;
-      walletAssociatedBalance: BigNumber | null;
-      vestingAssociatedBalance: BigNumber | null;
-    }
   | {
       type: AppStateActionType.SET_TRANCHE_DATA;
-      trancheBalances: UserTrancheBalance[];
       tranches: Tranche[];
     }
   | {
@@ -171,18 +114,6 @@ export type AppStateAction =
       type: AppStateActionType.SET_DRAWER;
       isOpen: boolean;
     }
-  | {
-      type: AppStateActionType.REFRESH_ASSOCIATED_BALANCES;
-      walletAssociatedBalance: BigNumber;
-      vestingAssociatedBalance: BigNumber;
-    }
-  | {
-      type: AppStateActionType.SET_ASSOCIATION_BREAKDOWN;
-      breakdown: {
-        stakingAssociations: { [vegaKey: string]: BigNumber };
-        vestingAssociations: { [vegaKey: string]: BigNumber };
-      };
-    }
   | {
       type: AppStateActionType.SET_TRANSACTION_OVERLAY;
       isOpen: boolean;

apps/token/src/contexts/app-state/app-state-provider.tsx

@@ -14,51 +14,18 @@ const initialAppState: AppState = {
   totalAssociated: new BigNumber(0),
   decimals: 0,
   totalSupply: new BigNumber(0),
-  balanceFormatted: new BigNumber(0),
-  walletBalance: new BigNumber(0),
-  lien: new BigNumber(0),
-  allowance: new BigNumber(0),
   tranches: null,
   vegaWalletOverlay: false,
   vegaWalletManageOverlay: false,
   ethConnectOverlay: false,
-  walletAssociatedBalance: null,
-  vestingAssociatedBalance: null,
-  trancheBalances: [],
-  totalLockedBalance: new BigNumber(0),
-  totalVestedBalance: new BigNumber(0),
   trancheError: null,
   drawerOpen: false,
-  associationBreakdown: {
-    vestingAssociations: {},
-    stakingAssociations: {},
-  },
   transactionOverlay: false,
   bannerMessage: '',
 };
 
 function appStateReducer(state: AppState, action: AppStateAction): AppState {
   switch (action.type) {
-    case AppStateActionType.UPDATE_ACCOUNT_BALANCES: {
-      return {
-        ...state,
-        balanceFormatted: action.balance,
-        walletBalance: action.walletBalance,
-        allowance: action.allowance,
-        lien: action.lien,
-      };
-    }
-    case AppStateActionType.REFRESH_BALANCES: {
-      return {
-        ...state,
-        balanceFormatted: action.balance,
-        walletBalance: action.walletBalance,
-        allowance: action.allowance,
-        lien: action.lien,
-        walletAssociatedBalance: action.walletAssociatedBalance,
-        vestingAssociatedBalance: action.vestingAssociatedBalance,
-      };
-    }
     case AppStateActionType.SET_TOKEN: {
       return {
         ...state,
@@ -67,25 +34,10 @@ function appStateReducer(state: AppState, action: AppStateAction): AppState {
         totalAssociated: action.totalAssociated,
       };
     }
-    case AppStateActionType.SET_ALLOWANCE: {
-      return {
-        ...state,
-        allowance: action.allowance,
-      };
-    }
     case AppStateActionType.SET_TRANCHE_DATA:
       return {
         ...state,
         tranches: action.tranches,
-        totalVestedBalance: BigNumber.sum.apply(null, [
-          new BigNumber(0),
-          ...action.trancheBalances.map((b) => b.vested),
-        ]),
-        totalLockedBalance: BigNumber.sum.apply(null, [
-          new BigNumber(0),
-          ...action.trancheBalances.map((b) => b.locked),
-        ]),
-        trancheBalances: action.trancheBalances,
       };
     case AppStateActionType.SET_TRANCHE_ERROR: {
       return {
@@ -122,19 +74,6 @@ function appStateReducer(state: AppState, action: AppStateAction): AppState {
         vegaWalletOverlay: false,
       };
     }
-    case AppStateActionType.REFRESH_ASSOCIATED_BALANCES: {
-      return {
-        ...state,
-        walletAssociatedBalance: action.walletAssociatedBalance,
-        vestingAssociatedBalance: action.vestingAssociatedBalance,
-      };
-    }
-    case AppStateActionType.SET_ASSOCIATION_BREAKDOWN: {
-      return {
-        ...state,
-        associationBreakdown: { ...action.breakdown },
-      };
-    }
     case AppStateActionType.SET_TRANSACTION_OVERLAY: {
       return {
         ...state,

apps/token/src/hooks/use-get-association-breakdown.ts

@@ -7,11 +7,9 @@ import type {
   TokenVesting,
 } from '@vegaprotocol/smart-contracts';
 
-import {
+import { useAppState } from '../contexts/app-state/app-state-context';
-  AppStateActionType,
-  useAppState,
-} from '../contexts/app-state/app-state-context';
 import BigNumber from 'bignumber.js';
+import { useBalances } from '../lib/balances/balances-store';
 
 export function useGetAssociationBreakdown(
   ethAddress: string,
@@ -20,8 +18,8 @@ export function useGetAssociationBreakdown(
 ): () => Promise<void> {
   const {
     appState: { decimals },
-    appDispatch,
   } = useAppState();
+  const { setAssociationBreakdown } = useBalances();
 
   const getAssociationBreakdown = React.useCallback(async () => {
     try {
@@ -30,17 +28,14 @@ export function useGetAssociationBreakdown(
         userTotalStakedByVegaKey(vesting, ethAddress, decimals),
       ]);
 
-      appDispatch({
+      setAssociationBreakdown({
-        type: AppStateActionType.SET_ASSOCIATION_BREAKDOWN,
+        stakingAssociations,
-        breakdown: {
+        vestingAssociations,
-          stakingAssociations,
-          vestingAssociations,
-        },
       });
     } catch (err) {
       Sentry.captureException(err);
     }
-  }, [ethAddress, staking, vesting, decimals, appDispatch]);
+  }, [ethAddress, staking, vesting, decimals, setAssociationBreakdown]);
 
   return getAssociationBreakdown;
 }

apps/token/src/hooks/use-get-user-tranche-balances.ts

@@ -9,6 +9,7 @@ import {
 import { BigNumber } from '../lib/bignumber';
 import { useTranches } from './use-tranches';
 import { toBigNum } from '@vegaprotocol/react-helpers';
+import { useBalances } from '../lib/balances/balances-store';
 
 export const useGetUserTrancheBalances = (
   address: string,
@@ -18,6 +19,7 @@ export const useGetUserTrancheBalances = (
     appState: { decimals },
     appDispatch,
   } = useAppState();
+  const { setTranchesBalances } = useBalances();
   const { tranches } = useTranches();
   return React.useCallback(async () => {
     appDispatch({
@@ -52,9 +54,9 @@ export const useGetUserTrancheBalances = (
       });
 
       const trancheBalances = await Promise.all(promises);
+      setTranchesBalances(trancheBalances);
       appDispatch({
         type: AppStateActionType.SET_TRANCHE_DATA,
-        trancheBalances,
         tranches,
       });
     } catch (e) {
@@ -64,5 +66,5 @@ export const useGetUserTrancheBalances = (
         error: e as Error,
       });
     }
-  }, [address, decimals, appDispatch, tranches, vesting]);
+  }, [appDispatch, tranches, setTranchesBalances, address, vesting, decimals]);
 };

apps/token/src/hooks/use-refresh-associated-balances.ts

@@ -1,17 +1,15 @@
 import { toBigNum } from '@vegaprotocol/react-helpers';
 import React from 'react';
 
-import {
+import { useAppState } from '../contexts/app-state/app-state-context';
-  AppStateActionType,
-  useAppState,
-} from '../contexts/app-state/app-state-context';
 import { useContracts } from '../contexts/contracts/contracts-context';
+import { useBalances } from '../lib/balances/balances-store';
 
 export function useRefreshAssociatedBalances() {
   const {
-    appDispatch,
     appState: { decimals },
   } = useAppState();
+  const { updateBalances } = useBalances();
   const { staking, vesting } = useContracts();
 
   return React.useCallback(
@@ -22,12 +20,11 @@ export function useRefreshAssociatedBalances() {
           vesting.stake_balance(ethAddress, vegaKey),
         ]);
 
-      appDispatch({
+      updateBalances({
-        type: AppStateActionType.REFRESH_ASSOCIATED_BALANCES,
         walletAssociatedBalance: toBigNum(walletAssociatedBalance, decimals),
         vestingAssociatedBalance: toBigNum(vestingAssociatedBalance, decimals),
       });
     },
-    [staking, vesting, appDispatch, decimals]
+    [staking, vesting, updateBalances, decimals]
   );
 }

apps/token/src/hooks/use-refresh-balances.ts

@@ -4,17 +4,15 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useEthereumConfig } from '@vegaprotocol/web3';
 import React from 'react';
 
-import {
+import { useAppState } from '../contexts/app-state/app-state-context';
-  AppStateActionType,
-  useAppState,
-} from '../contexts/app-state/app-state-context';
 import { useContracts } from '../contexts/contracts/contracts-context';
+import { useBalances } from '../lib/balances/balances-store';
 
 export const useRefreshBalances = (address: string) => {
   const {
     appState: { decimals },
-    appDispatch,
   } = useAppState();
+  const { updateBalances } = useBalances();
   const { pubKey } = useVegaWallet();
   const { token, staking, vesting } = useContracts();
   const { config } = useEthereumConfig();
@@ -40,9 +38,8 @@ export const useRefreshBalances = (address: string) => {
       const walletAssociatedBalance = toBigNum(walletStakeBalance, decimals);
       const vestingAssociatedBalance = toBigNum(vestingStakeBalance, decimals);
 
-      appDispatch({
+      updateBalances({
-        type: AppStateActionType.REFRESH_BALANCES,
+        balanceFormatted: balance,
-        balance,
         walletBalance,
         allowance,
         lien,
@@ -52,5 +49,14 @@ export const useRefreshBalances = (address: string) => {
     } catch (err) {
       Sentry.captureException(err);
     }
-  }, [address, decimals, appDispatch, pubKey, staking, token, vesting, config]);
+  }, [
+    config,
+    vesting,
+    address,
+    token,
+    pubKey,
+    staking,
+    decimals,
+    updateBalances,
+  ]);
 };

apps/token/src/lib/balances/balances-store.tsx

@@ -0,0 +1,69 @@
+import BigNumber from 'bignumber.js';
+import create from 'zustand';
+import type { UserTrancheBalance } from '../../contexts/app-state/app-state-context';
+
+export interface AssociationBreakdown {
+  stakingAssociations: { [vegaKey: string]: BigNumber };
+  vestingAssociations: { [vegaKey: string]: BigNumber };
+}
+
+export type BalancesStore = {
+  associationBreakdown: AssociationBreakdown;
+  allowance: BigNumber;
+  balanceFormatted: BigNumber;
+  totalVestedBalance: BigNumber;
+  totalLockedBalance: BigNumber;
+  walletBalance: BigNumber;
+  trancheBalances: UserTrancheBalance[];
+  lien: BigNumber;
+  walletAssociatedBalance: BigNumber;
+  vestingAssociatedBalance: BigNumber;
+  updateBalances: (balances: Partial<RefreshBalances>) => void;
+  setAllowance: (allowance: BigNumber) => void;
+  setAssociationBreakdown: (associationBreakdown: AssociationBreakdown) => void;
+  setTranchesBalances: (trancheBalances: UserTrancheBalance[]) => void;
+};
+
+export interface RefreshBalances {
+  balanceFormatted: BigNumber;
+  walletBalance: BigNumber;
+  allowance: BigNumber;
+  lien: BigNumber;
+  walletAssociatedBalance: BigNumber;
+  vestingAssociatedBalance: BigNumber;
+}
+
+export const useBalances = create<BalancesStore>((set) => ({
+  associationBreakdown: {
+    stakingAssociations: {},
+    vestingAssociations: {},
+  },
+  trancheBalances: [],
+  allowance: new BigNumber(0),
+  totalVestedBalance: new BigNumber(0),
+  totalLockedBalance: new BigNumber(0),
+  balanceFormatted: new BigNumber(0),
+  walletBalance: new BigNumber(0),
+  lien: new BigNumber(0),
+  walletAssociatedBalance: new BigNumber(0),
+  vestingAssociatedBalance: new BigNumber(0),
+  updateBalances: (balances: Partial<RefreshBalances>) =>
+    set({
+      ...balances,
+    }),
+  setAllowance: (allowance: BigNumber) => set({ allowance }),
+  setAssociationBreakdown: (associationBreakdown: AssociationBreakdown) =>
+    set({ associationBreakdown }),
+  setTranchesBalances: (trancheBalances: UserTrancheBalance[]) =>
+    set({
+      trancheBalances,
+      totalLockedBalance: BigNumber.sum.apply(null, [
+        new BigNumber(0),
+        ...trancheBalances.map((b) => b.locked),
+      ]),
+      totalVestedBalance: BigNumber.sum.apply(null, [
+        new BigNumber(0),
+        ...trancheBalances.map((b) => b.vested),
+      ]),
+    }),
+}));

apps/token/src/routes/governance/components/list-asset/list-asset.spec.tsx

@@ -51,25 +51,12 @@ const mockAppState: AppState = {
   totalAssociated: new BigNumber('50063005'),
   decimals: 18,
   totalSupply: new BigNumber(65000000),
-  balanceFormatted: new BigNumber(0),
-  walletBalance: new BigNumber(0),
-  lien: new BigNumber(0),
-  allowance: new BigNumber(0),
   tranches: null,
   vegaWalletOverlay: false,
   vegaWalletManageOverlay: false,
   ethConnectOverlay: false,
-  walletAssociatedBalance: null,
-  vestingAssociatedBalance: null,
-  trancheBalances: [],
-  totalLockedBalance: new BigNumber(0),
-  totalVestedBalance: new BigNumber(0),
   trancheError: null,
   drawerOpen: false,
-  associationBreakdown: {
-    vestingAssociations: {},
-    stakingAssociations: {},
-  },
   transactionOverlay: false,
   bannerMessage: '',
 };

apps/token/src/routes/governance/hooks/use-vote-information.spec.ts

@@ -14,25 +14,12 @@ const mockAppState: AppState = {
   totalAssociated: new BigNumber('50063005'),
   decimals: 18,
   totalSupply: mockTotalSupply,
-  balanceFormatted: new BigNumber(0),
-  walletBalance: new BigNumber(0),
-  lien: new BigNumber(0),
-  allowance: new BigNumber(0),
   tranches: null,
   vegaWalletOverlay: false,
   vegaWalletManageOverlay: false,
   ethConnectOverlay: false,
-  walletAssociatedBalance: null,
-  vestingAssociatedBalance: null,
-  trancheBalances: [],
-  totalLockedBalance: new BigNumber(0),
-  totalVestedBalance: new BigNumber(0),
   trancheError: null,
   drawerOpen: false,
-  associationBreakdown: {
-    vestingAssociations: {},
-    stakingAssociations: {},
-  },
   transactionOverlay: false,
   bannerMessage: '',
 };

apps/token/src/routes/redemption/home/redemption-information.tsx

@@ -1,10 +1,10 @@
 import { Callout, Intent } from '@vegaprotocol/ui-toolkit';
+import { useBalances } from '../../../lib/balances/balances-store';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useNavigate, useOutletContext } from 'react-router-dom';
 
 import { AddLockedTokenAddress } from '../../../components/add-locked-token';
-import { useAppState } from '../../../contexts/app-state/app-state-context';
 import { formatNumber } from '../../../lib/format-number';
 import { truncateMiddle } from '../../../lib/truncate-middle';
 import Routes from '../../routes';
@@ -20,14 +20,12 @@ export const RedemptionInformation = () => {
   const navigate = useNavigate();
   const { t } = useTranslation();
   const {
-    appState: {
+    balanceFormatted,
-      balanceFormatted,
+    lien,
-      lien,
+    totalVestedBalance,
-      totalVestedBalance,
+    totalLockedBalance,
-      totalLockedBalance,
+    trancheBalances,
-      trancheBalances,
+  } = useBalances();
-    },
-  } = useAppState();
 
   const { userTranches } = state;
 

apps/token/src/routes/redemption/redemption.tsx

@@ -7,8 +7,8 @@ import { Link } from 'react-router-dom';
 
 import { EthConnectPrompt } from '../../components/eth-connect-prompt';
 import { SplashLoader } from '../../components/splash-loader';
-import { useAppState } from '../../contexts/app-state/app-state-context';
 import { useTranches } from '../../hooks/use-tranches';
+import { useBalances } from '../../lib/balances/balances-store';
 import RoutesConfig from '../routes';
 import {
   initialRedemptionState,
@@ -22,9 +22,7 @@ const RedemptionRouter = () => {
     redemptionReducer,
     initialRedemptionState
   );
-  const {
+  const { trancheBalances } = useBalances();
-    appState: { trancheBalances },
-  } = useAppState();
   const { account } = useWeb3React();
   const { tranches, error, loading } = useTranches();
 

apps/token/src/routes/redemption/tranche/index.tsx

@@ -1,9 +1,9 @@
+import { useBalances } from '../../../lib/balances/balances-store';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useParams, useOutletContext } from 'react-router-dom';
 
 import { TransactionCallout } from '../../../components/transaction-callout';
-import { useAppState } from '../../../contexts/app-state/app-state-context';
 import { useContracts } from '../../../contexts/contracts/contracts-context';
 import {
   TransactionActionType,
@@ -25,9 +25,8 @@ export const RedeemFromTranche = () => {
   }>();
   const { vesting } = useContracts();
   const { t } = useTranslation();
-  const {
+  const { lien, totalVestedBalance, trancheBalances, totalLockedBalance } =
-    appState: { lien, totalVestedBalance, trancheBalances, totalLockedBalance },
+    useBalances();
-  } = useAppState();
   const refreshBalances = useRefreshBalances(address);
   const getUserTrancheBalances = useGetUserTrancheBalances(address, vesting);
   const { id } = useParams<{ id: string }>();

apps/token/src/routes/staking/associate/associate-page.tsx

@@ -1,5 +1,6 @@
 import { Callout, Intent } from '@vegaprotocol/ui-toolkit';
 import type { EthereumConfig } from '@vegaprotocol/web3';
+import { useBalances } from '../../../lib/balances/balances-store';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -7,7 +8,6 @@ import {
   StakingMethod,
   StakingMethodRadio,
 } from '../../../components/staking-method-radio';
-import { useAppState } from '../../../contexts/app-state/app-state-context';
 import { TxState } from '../../../hooks/transaction-reducer';
 import { useSearchParams } from '../../../hooks/use-search-params';
 import { AssociateTransaction } from './associate-transaction';
@@ -52,10 +52,8 @@ export const AssociatePage = ({
 
   const linking = usePollForStakeLinking(vegaKey, txState.txData.hash);
 
-  const {
+  const { walletBalance, totalVestedBalance, totalLockedBalance } =
-    appState: { walletBalance, totalVestedBalance, totalLockedBalance },
+    useBalances();
-  } = useAppState();
-
   const zeroVesting = React.useMemo(
     () => totalVestedBalance.plus(totalLockedBalance).isEqualTo(0),
     [totalLockedBalance, totalVestedBalance]

apps/token/src/routes/staking/associate/contract-associate.tsx

@@ -1,9 +1,9 @@
 import { Callout } from '@vegaprotocol/ui-toolkit';
+import { useBalances } from '../../../lib/balances/balances-store';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { TokenInput } from '../../../components/token-input';
-import { useAppState } from '../../../contexts/app-state/app-state-context';
 import { BigNumber } from '../../../lib/bignumber';
 import { AssociateInfo } from './associate-info';
 
@@ -19,9 +19,7 @@ export const ContractAssociate = ({
   vegaKey: string | null;
 }) => {
   const { t } = useTranslation();
-  const {
+  const { balanceFormatted, lien } = useBalances();
-    appState: { balanceFormatted, lien },
-  } = useAppState();
 
   const maximum = React.useMemo(() => {
     return new BigNumber(balanceFormatted).minus(lien);

apps/token/src/routes/staking/associate/wallet-associate.tsx

@@ -2,10 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { TokenInput } from '../../../components/token-input';
-import {
+import { useAppState } from '../../../contexts/app-state/app-state-context';
-  AppStateActionType,
-  useAppState,
-} from '../../../contexts/app-state/app-state-context';
 import { useContracts } from '../../../contexts/contracts/contracts-context';
 import { TxState } from '../../../hooks/transaction-reducer';
 import { useTransaction } from '../../../hooks/use-transaction';
@@ -13,6 +10,7 @@ import { BigNumber } from '../../../lib/bignumber';
 import { AssociateInfo } from './associate-info';
 import { removeDecimal, toBigNum } from '@vegaprotocol/react-helpers';
 import type { EthereumConfig } from '@vegaprotocol/web3';
+import { useBalances } from '../../../lib/balances/balances-store';
 
 export const WalletAssociate = ({
   perform,
@@ -31,9 +29,10 @@ export const WalletAssociate = ({
 }) => {
   const { t } = useTranslation();
   const {
-    appDispatch,
+    appState: { decimals },
-    appState: { walletBalance, allowance, walletAssociatedBalance, decimals },
   } = useAppState();
+  const { walletBalance, allowance, walletAssociatedBalance, setAllowance } =
+    useBalances();
   const { token } = useContracts();
 
   const {
@@ -56,20 +55,17 @@ export const WalletAssociate = ({
           ethereumConfig.staking_bridge_contract.address
         );
         const allowance = toBigNum(a, decimals);
-        appDispatch({
+        setAllowance(allowance);
-          type: AppStateActionType.SET_ALLOWANCE,
-          allowance,
-        });
       }
     };
     run();
   }, [
     address,
-    appDispatch,
     approveState.txState,
     token,
     decimals,
     ethereumConfig,
+    setAllowance,
   ]);
 
   let pageContent = null;

apps/token/src/routes/staking/disassociate/components/disassociate-page/disassociate-page.tsx

@@ -5,7 +5,6 @@ import { Select } from '@vegaprotocol/ui-toolkit';
 import { StakingMethod } from '../../../../../components/staking-method-radio';
 import { TokenInput } from '../../../../../components/token-input';
 import { TxState } from '../../../../../hooks/transaction-reducer';
-import { useAppState } from '../../../../../contexts/app-state/app-state-context';
 import { useRefreshAssociatedBalances } from '../../../../../hooks/use-refresh-associated-balances';
 import { useRemoveStake } from '../../hooks';
 import type { RemoveStakePayload } from '../../hooks';
@@ -14,6 +13,7 @@ import type { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { BigNumber } from '../../../../../lib/bignumber';
 import { truncateMiddle } from '../../../../../lib/truncate-middle';
+import { useBalances } from '../../../../../lib/balances/balances-store';
 
 type Association = {
   /**
@@ -55,11 +55,9 @@ export const DisassociatePage = ({
 }) => {
   const { t } = useTranslation();
 
-  const {
+  const { stakingAssociations, vestingAssociations } = useBalances(
-    appState: {
+    (state) => state.associationBreakdown
-      associationBreakdown: { stakingAssociations, vestingAssociations },
+  );
-    },
-  } = useAppState();
 
   const associations = useMemo(
     () =>

apps/token/src/routes/staking/node/staking-form.tsx

@@ -28,6 +28,7 @@ import {
   removeDecimal,
   addDecimal,
 } from '@vegaprotocol/react-helpers';
+import { useBalances } from '../../../lib/balances/balances-store';
 
 export enum FormState {
   Default,
@@ -62,6 +63,7 @@ export const StakingForm = ({
   availableStakeToAdd,
   availableStakeToRemove,
 }: StakingFormProps) => {
+  const lien = useBalances((state) => state.lien);
   const params = useSearchParams();
   const navigate = useNavigate();
   const client = useApolloClient();
@@ -189,7 +191,7 @@ export const StakingForm = ({
         availableStakeToAdd.isEqualTo(0) &&
         availableStakeToRemove.isEqualTo(0) && (
           <div>
-            {appState.lien.isGreaterThan(0) ? (
+            {lien.isGreaterThan(0) ? (
               <span className="text-red">{t('stakeNodeWrongVegaKey')}</span>
             ) : (
               <span className="text-red">{t('stakeNodeNone')}</span>