feat(refactor): create pool accounts to hooks (#1913)

src/Providers.tsx

@@ -23,7 +23,7 @@ import { ActivePoolsProvider } from 'contexts/Pools/ActivePools';
 import { BondedPoolsProvider } from 'contexts/Pools/BondedPools';
 import { PoolMembersProvider } from 'contexts/Pools/PoolMembers';
 import { PoolMembershipsProvider } from 'contexts/Pools/PoolMemberships';
-import { PoolsConfigProvider } from 'contexts/Pools/PoolsConfig';
+import { FavoritePoolsProvider } from 'contexts/Pools/FavoritePools';
 import { ProxiesProvider } from 'contexts/Proxies';
 import { SetupProvider } from 'contexts/Setup';
 import { StakingProvider } from 'contexts/Staking';
@@ -47,7 +47,6 @@ import { ImportedAccountsProvider } from 'contexts/Connect/ImportedAccounts';
 import { PoolPerformanceProvider } from 'contexts/Pools/PoolPerformance';
 import { ExternalAccountsProvider } from 'contexts/Connect/ExternalAccounts';
 
-// Embed providers from hook.
 export const Providers = () => {
   const {
     network,
@@ -76,7 +75,7 @@ export const Providers = () => {
     BondedProvider,
     BalancesProvider,
     StakingProvider,
-    PoolsConfigProvider,
+    FavoritePoolsProvider,
     BondedPoolsProvider,
     PoolMembershipsProvider,
     PoolMembersProvider,

src/contexts/Pools/ActivePools/index.tsx

@@ -21,12 +21,12 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useApi } from '../../Api';
 import { useBondedPools } from '../BondedPools';
 import { usePoolMemberships } from '../PoolMemberships';
-import { usePoolsConfig } from '../PoolsConfig';
 import * as defaults from './defaults';
 import { usePoolMembers } from '../PoolMembers';
 import type { ActivePool, ActivePoolsContextState, PoolTargets } from './types';
 import type { PoolAddresses } from '../BondedPools/types';
 import { SubscanController } from 'static/SubscanController';
+import { useCreatePoolAccounts } from 'library/Hooks/useCreatePoolAccounts';
 
 export const ActivePoolsContext = createContext<ActivePoolsContextState>(
   defaults.defaultActivePoolContext
@@ -40,8 +40,8 @@ export const ActivePoolsProvider = ({ children }: { children: ReactNode }) => {
   const { eraStakers } = useStaking();
   const { pluginEnabled } = usePlugins();
   const { membership } = usePoolMemberships();
-  const { createAccounts } = usePoolsConfig();
   const { activeAccount } = useActiveAccounts();
+  const createPoolAccounts = useCreatePoolAccounts();
   const { getMembersOfPoolFromNode } = usePoolMembers();
   const { getAccountPools, bondedPools } = useBondedPools();
 
@@ -155,7 +155,7 @@ export const ActivePoolsProvider = ({ children }: { children: ReactNode }) => {
       return;
     }
 
-    const addresses: PoolAddresses = createAccounts(poolId);
+    const addresses: PoolAddresses = createPoolAccounts(poolId);
 
     // new active pool subscription
     const subscribeActivePool = async (id: number) => {

src/contexts/Pools/BondedPools/index.tsx

@@ -18,8 +18,8 @@ import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks';
 import { useNetwork } from 'contexts/Network';
 import type { AnyJson } from '@polkadot-cloud/react/types';
 import { useApi } from '../../Api';
-import { usePoolsConfig } from '../PoolsConfig';
 import { defaultBondedPoolsContext } from './defaults';
+import { useCreatePoolAccounts } from 'library/Hooks/useCreatePoolAccounts';
 
 export const BondedPoolsContext = createContext<BondedPoolsContextState>(
   defaultBondedPoolsContext
@@ -35,7 +35,7 @@ export const BondedPoolsProvider = ({ children }: { children: ReactNode }) => {
     activeEra,
     poolsConfig: { lastPoolId },
   } = useApi();
-  const { createAccounts } = usePoolsConfig();
+  const createPoolAccounts = useCreatePoolAccounts();
   const { getNominationsStatusFromTargets } = useStaking();
 
   // Store bonded pools.
@@ -135,7 +135,7 @@ export const BondedPoolsProvider = ({ children }: { children: ReactNode }) => {
     }
     return {
       id,
-      addresses: createAccounts(id),
+      addresses: createPoolAccounts(id),
       ...bondedPool,
     };
   };
@@ -192,7 +192,7 @@ export const BondedPoolsProvider = ({ children }: { children: ReactNode }) => {
   const getPoolWithAddresses = (id: number, pool: BondedPool) => ({
     ...pool,
     id,
-    addresses: createAccounts(id),
+    addresses: createPoolAccounts(id),
   });
 
   const getBondedPool = (poolId: MaybePool) =>

src/contexts/Pools/PoolsConfig/defaults.ts → src/contexts/Pools/FavoritePools/defaults.ts

@@ -2,14 +2,13 @@
 // SPDX-License-Identifier: GPL-3.0-only
 /* eslint-disable @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
 
-import type { PoolsConfigContextState } from './types';
+import type { FavoritePoolsContextState } from './types';
 import type { PoolAddresses } from '../BondedPools/types';
 
-export const defaultPoolsConfigContext: PoolsConfigContextState = {
-  addFavorite: () => {},
-  removeFavorite: () => {},
-  createAccounts: () => poolAddresses,
+export const defaultFavoritePoolsContext: FavoritePoolsContextState = {
   favorites: [],
+  addFavorite: (address: string) => {},
+  removeFavorite: (address: string) => {},
 };
 
 export const poolAddresses: PoolAddresses = {

src/contexts/Pools/FavoritePools/index.tsx

@@ -0,0 +1,69 @@
+// Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import type { ReactNode } from 'react';
+import { createContext, useContext, useState } from 'react';
+import type { FavoritePoolsContextState } from './types';
+import { useNetwork } from 'contexts/Network';
+import { defaultFavoritePoolsContext } from './defaults';
+
+export const FavoritePoolsContext = createContext<FavoritePoolsContextState>(
+  defaultFavoritePoolsContext
+);
+
+export const useFavoritePools = () => useContext(FavoritePoolsContext);
+
+export const FavoritePoolsProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const { network } = useNetwork();
+
+  // Get favorite pools from local storage.
+  const getLocalFavorites = () => {
+    const localFavorites = localStorage.getItem(`${network}_favorite_pools`);
+    return localFavorites !== null ? JSON.parse(localFavorites) : [];
+  };
+
+  // Stores the user's favorite pools.
+  const [favorites, setFavorites] = useState<string[]>(getLocalFavorites());
+
+  // Adds a favorite validator.
+  const addFavorite = (address: string) => {
+    const newFavorites = Object.assign(favorites);
+    if (!newFavorites.includes(address)) {
+      newFavorites.push(address);
+    }
+
+    localStorage.setItem(
+      `${network}_favorite_pools`,
+      JSON.stringify(newFavorites)
+    );
+    setFavorites([...newFavorites]);
+  };
+
+  // Removes a favorite pool if they exist.
+  const removeFavorite = (address: string) => {
+    const newFavorites = Object.assign(favorites).filter(
+      (validator: string) => validator !== address
+    );
+    localStorage.setItem(
+      `${network}_favorite_pools`,
+      JSON.stringify(newFavorites)
+    );
+    setFavorites([...newFavorites]);
+  };
+
+  return (
+    <FavoritePoolsContext.Provider
+      value={{
+        favorites,
+        addFavorite,
+        removeFavorite,
+      }}
+    >
+      {children}
+    </FavoritePoolsContext.Provider>
+  );
+};

src/contexts/Pools/FavoritePools/types.ts

@@ -0,0 +1,8 @@
+// Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+export interface FavoritePoolsContextState {
+  favorites: string[];
+  addFavorite: (address: string) => void;
+  removeFavorite: (address: string) => void;
+}

src/contexts/Validators/types.ts

@@ -36,8 +36,8 @@ export interface AverageEraValidatorReward {
 }
 
 export interface FavoriteValidatorsContextInterface {
-  addFavorite: (a: string) => void;
-  removeFavorite: (a: string) => void;
+  addFavorite: (address: string) => void;
+  removeFavorite: (address: string) => void;
   favorites: string[];
   favoritesList: Validator[] | null;
 }

src/library/Hooks/useCreatePoolAccounts/index.tsx

@@ -0,0 +1,42 @@
+// Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { bnToU8a, u8aConcat } from '@polkadot/util';
+import BigNumber from 'bignumber.js';
+import { BN } from 'bn.js';
+import { EmptyH256, ModPrefix, U32Opts } from 'consts';
+import { useApi } from 'contexts/Api';
+
+export const useCreatePoolAccounts = () => {
+  const { api, consts } = useApi();
+  const { poolsPalletId } = consts;
+
+  // Generates pool stash and reward accounts. Assumes `poolsPalletId` is synced.
+  const createPoolAccounts = (poolId: number) => {
+    const poolIdBigNumber = new BigNumber(poolId);
+    return {
+      stash: createAccount(poolIdBigNumber, 0),
+      reward: createAccount(poolIdBigNumber, 1),
+    };
+  };
+
+  const createAccount = (poolId: BigNumber, index: number): string => {
+    if (!api) {
+      return '';
+    }
+    return api.registry
+      .createType(
+        'AccountId32',
+        u8aConcat(
+          ModPrefix,
+          poolsPalletId,
+          new Uint8Array([index]),
+          bnToU8a(new BN(poolId.toString()), U32Opts),
+          EmptyH256
+        )
+      )
+      .toString();
+  };
+
+  return createPoolAccounts;
+};

src/library/ListItem/Labels/FavoritePool.tsx

@@ -5,7 +5,7 @@ import { faHeart as faHeartRegular } from '@fortawesome/free-regular-svg-icons';
 import { faHeart } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useTranslation } from 'react-i18next';
-import { usePoolsConfig } from 'contexts/Pools/PoolsConfig';
+import { useFavoritePools } from 'contexts/Pools/FavoritePools';
 import { useTooltip } from 'contexts/Tooltip';
 import { TooltipTrigger } from 'library/ListItem/Wrappers';
 import type { FavoriteProps } from '../types';
@@ -14,7 +14,7 @@ import { NotificationsController } from 'static/NotificationsController';
 export const FavoritePool = ({ address }: FavoriteProps) => {
   const { t } = useTranslation('library');
   const { setTooltipTextAndOpen } = useTooltip();
-  const { favorites, addFavorite, removeFavorite } = usePoolsConfig();
+  const { favorites, addFavorite, removeFavorite } = useFavoritePools();
 
   const isFavorite = favorites.includes(address);