fix: Render safe guards, pool useEffect fixes (#1906)

src/contexts/Connect/ImportedAccounts/index.tsx

@@ -4,7 +4,10 @@
 import type { ReactNode } from 'react';
 import { createContext, useCallback, useContext } from 'react';
 import type { MaybeAddress } from 'types';
-import type { ExternalAccount } from '@polkadot-cloud/react/types';
+import type {
+ ExternalAccount,
+ ImportedAccount,
+} from '@polkadot-cloud/react/types';
 import { ManualSigners } from 'consts';
 import {
  useEffectIgnoreInitial,
@@ -33,13 +36,31 @@ export const ImportedAccountsProvider = ({
  const { extensionAccounts } = useExtensionAccounts();
  const allAccounts = extensionAccounts.concat(otherAccounts);
 
+ // Stringify account addresses and account names to determine if they have changed. Ignore other properties including `signer` and `source`.
+ const shallowAccountStringify = (accounts: ImportedAccount[]) => {
+ const sorted = accounts.sort((a, b) => {
+ if (a.address < b.address) {
+ return -1;
+ }
+ if (a.address > b.address) {
+ return 1;
+ }
+ return 0;
+ });
+ return JSON.stringify(
+ sorted.map((account) => [account.address, account.name])
+ );
+ };
+
+ const allAccountsStringified = shallowAccountStringify(allAccounts);
+
  // Gets an account from `allAccounts`.
  //
  // Caches the function when imported accounts update.
  const getAccount = useCallback(
  (who: MaybeAddress) =>
  allAccounts.find(({ address }) => address === who) || null,
- [allAccounts]
+ [allAccountsStringified]
  );
 
  // Checks if an address is a read-only account.
@@ -54,7 +75,7 @@ export const ImportedAccountsProvider = ({
  }
  return false;
  },
- [allAccounts]
+ [allAccountsStringified]
  );
 
  // Checks whether an account can sign transactions.
@@ -66,7 +87,7 @@ export const ImportedAccountsProvider = ({
  (account) =>
  account.address === address && account.source !== 'external'
  ) !== undefined,
- [allAccounts]
+ [allAccountsStringified]
  );
 
  // Checks whether an account needs manual signing.
@@ -80,15 +101,15 @@ export const ImportedAccountsProvider = ({
  allAccounts.find(
  (a) => a.address === address && ManualSigners.includes(a.source)
  ) !== undefined,
- [allAccounts]
+ [allAccountsStringified]
  );
 
  // Keep accounts in sync with `BalancesController`.
  useEffectIgnoreInitial(() => {
  if (isReady) {
  BalancesController.syncAccounts(allAccounts.map((a) => a.address));
  }
- }, [isReady, allAccounts]);
+ }, [isReady, allAccountsStringified]);
 
  return (
  <ImportedAccountsContext.Provider

src/contexts/Pools/ActivePools/index.tsx

@@ -467,7 +467,7 @@ export const ActivePoolsProvider = ({ children }: { children: ReactNode }) => {
  setStateWithRef('syncing', setSynced, syncedRef);
  handlePoolSubscriptions();
  }
- }, [network, isReady, syncedRef.current]);
+ }, [network, isReady, synced]);
 
  // re-calculate pending rewards when membership changes
  useEffectIgnoreInitial(() => {

src/contexts/Pools/PoolMemberships/index.tsx

@@ -34,8 +34,8 @@ export const PoolMembershipsProvider = ({
  const { t } = useTranslation('base');
  const { network } = useNetwork();
  const { api, isReady } = useApi();
+ const { accounts } = useImportedAccounts();
  const { activeAccount } = useActiveAccounts();
- const { accounts: connectAccounts } = useImportedAccounts();
 
  // Stores pool memberships for the imported accounts.
  const [poolMemberships, setPoolMemberships] = useState<PoolMembership[]>([]);
@@ -44,31 +44,13 @@ export const PoolMembershipsProvider = ({
  // Stores pool membership unsubs.
  const unsubs = useRef<AnyApi[]>([]);
 
- useEffectIgnoreInitial(() => {
- if (isReady) {
- (() => {
- setStateWithRef([], setPoolMemberships, poolMembershipsRef);
- unsubAll();
- getPoolMemberships();
- })();
- }
- }, [network, isReady, connectAccounts]);
-
  // subscribe to account pool memberships
  const getPoolMemberships = async () => {
  Promise.all(
- connectAccounts.map(({ address }) => subscribeToPoolMembership(address))
+ accounts.map(({ address }) => subscribeToPoolMembership(address))
  );
  };
 
- // unsubscribe from pool memberships on unmount
- useEffect(
- () => () => {
- unsubAll();
- },
- []
- );
-
  // unsubscribe from all pool memberships
  const unsubAll = () => {
  Object.values(unsubs.current).forEach((v: Fn) => v());
@@ -183,6 +165,37 @@ export const PoolMembershipsProvider = ({
  },
  ];
 
+ // Reset and re-sync pool memberships on network change.
+ // re-sync pool memberships when accounts update.
+ useEffectIgnoreInitial(() => {
+ if (isReady) {
+ (() => {
+ // NOTE: resetting memberships here.
+ setStateWithRef([], setPoolMemberships, poolMembershipsRef);
+ unsubAll();
+ getPoolMemberships();
+ })();
+ }
+ }, [network, isReady]);
+
+ // re-sync pool memberships when accounts update.
+ useEffectIgnoreInitial(() => {
+ if (isReady) {
+ (() => {
+ unsubAll();
+ getPoolMemberships();
+ })();
+ }
+ }, [isReady, accounts]);
+
+ // Unsubscribe from pool memberships on unmount.
+ useEffect(
+ () => () => {
+ unsubAll();
+ },
+ []
+ );
+
  return (
  <PoolMembershipsContext.Provider
  value={{