From 478cd03e7eab79113b7fe7a8f2ba29974d8d7536 Mon Sep 17 00:00:00 2001
From: Tarik Gul <47201679+TarikGul@users.noreply.github.com>
Date: Tue, 21 May 2024 11:28:03 -0700
Subject: [PATCH] Use apiSystemPeople for identities on {relay | system}
 chains, and keep compat for parachains (#10598)

* Use apiSystemPeople for identities on relay chains

* Add apiIdentity support

* add config

* Fix nits

* Get working condition for all chains!

* add enableIdentity for correct support

* Add comments to EndpointOption type

* Add some inline comments
---
 .../src/endpoints/productionRelayKusama.ts    | 13 ++++++
 .../src/endpoints/productionRelayPolkadot.ts  |  8 ++++
 .../src/endpoints/testingRelayPaseo.ts        |  2 +
 .../src/endpoints/testingRelayRococo.ts       | 14 ++++++
 .../src/endpoints/testingRelayWestend.ts      | 13 ++++++
 packages/apps-config/src/endpoints/types.ts   | 20 +++++++++
 packages/apps-config/src/endpoints/util.ts    |  6 ++-
 packages/apps/src/WarmUp.tsx                  |  4 +-
 .../page-accounts/src/Accounts/Account.tsx    | 44 +++++++++----------
 .../page-accounts/src/modals/IdentityMain.tsx | 18 ++++----
 .../page-accounts/src/modals/IdentitySub.tsx  |  8 ++--
 .../page-addresses/src/Contacts/Address.tsx   |  2 +-
 .../src/Referenda/Delegate/useSuperIds.ts     |  8 ++--
 .../page-staking-legacy/src/Filtering.tsx     |  4 +-
 .../src/Targets/Validator.tsx                 |  6 +--
 .../src/Validators/Address/index.tsx          |  6 +--
 packages/page-staking/src/Filtering.tsx       |  4 +-
 .../page-staking/src/Targets/Validator.tsx    |  6 +--
 .../src/Validators/Address/index.tsx          |  6 +--
 packages/react-api/src/Api.tsx                | 16 +++++--
 packages/react-api/src/types.ts               |  9 ++++
 packages/react-components/src/AccountName.tsx |  8 ++--
 .../src/AccountSidebar/Identity.tsx           |  4 +-
 .../src/AccountSidebar/RegistrarJudgement.tsx | 10 ++---
 .../react-components/src/AddressToggle.tsx    |  6 +--
 packages/react-hooks/src/ctx/types.ts         |  3 ++
 packages/react-hooks/src/index.ts             |  1 +
 packages/react-hooks/src/useAccountInfo.ts    |  6 +--
 .../react-hooks/src/useDeriveAccountInfo.ts   |  6 +--
 packages/react-hooks/src/usePeopleEndpoint.ts | 23 ++++++++++
 packages/react-hooks/src/useRegistrars.ts     |  4 +-
 packages/react-hooks/src/useSubidentities.ts  |  4 +-
 32 files changed, 206 insertions(+), 86 deletions(-)
 create mode 100644 packages/react-hooks/src/usePeopleEndpoint.ts

diff --git a/packages/apps-config/src/endpoints/productionRelayKusama.ts b/packages/apps-config/src/endpoints/productionRelayKusama.ts
index 7a232fc286..96529dd548 100644
--- a/packages/apps-config/src/endpoints/productionRelayKusama.ts
+++ b/packages/apps-config/src/endpoints/productionRelayKusama.ts
@@ -905,6 +905,7 @@ export const prodParasKusama: Omit<EndpointOption, 'teleport'>[] = [
 export const prodParasKusamaCommon: EndpointOption[] = [
   {
     info: 'KusamaAssetHub',
+    isPeopleForIdentity: true,
     paraId: 1000,
     providers: {
       Dwellir: 'wss://asset-hub-kusama-rpc.dwellir.com',
@@ -917,6 +918,7 @@ export const prodParasKusamaCommon: EndpointOption[] = [
       RadiumBlock: 'wss://statemine.public.curie.radiumblock.co/ws',
       Stakeworld: 'wss://ksm-rpc.stakeworld.io/assethub'
     },
+    relayName: 'kusama',
     teleport: [-1],
     text: 'AssetHub',
     ui: {
@@ -926,6 +928,7 @@ export const prodParasKusamaCommon: EndpointOption[] = [
   },
   {
     info: 'kusamaBridgeHub',
+    isPeopleForIdentity: true,
     paraId: 1002,
     providers: {
       Dwellir: 'wss://kusama-bridge-hub-rpc.dwellir.com',
@@ -938,6 +941,7 @@ export const prodParasKusamaCommon: EndpointOption[] = [
       RadiumBlock: 'wss://bridgehub-kusama.public.curie.radiumblock.co/ws',
       Stakeworld: 'wss://ksm-rpc.stakeworld.io/bridgehub'
     },
+    relayName: 'kusama',
     teleport: [-1],
     text: 'BridgeHub',
     ui: {
@@ -946,6 +950,7 @@ export const prodParasKusamaCommon: EndpointOption[] = [
   },
   {
     info: 'kusamaCoretime',
+    isPeopleForIdentity: true,
     paraId: 1005,
     providers: {
       'IBP-GeoDNS1': 'wss://sys.ibp.network/coretime-kusama',
@@ -953,6 +958,7 @@ export const prodParasKusamaCommon: EndpointOption[] = [
       Parity: 'wss://kusama-coretime-rpc.polkadot.io',
       Stakeworld: 'wss://ksm-rpc.stakeworld.io/coretime'
     },
+    relayName: 'kusama',
     teleport: [-1],
     text: 'Coretime',
     ui: {
@@ -962,6 +968,7 @@ export const prodParasKusamaCommon: EndpointOption[] = [
   {
     homepage: 'https://encointer.org/',
     info: 'encointer',
+    isPeopleForIdentity: true,
     paraId: 1001,
     providers: {
       Dwellir: 'wss://encointer-kusama-rpc.dwellir.com',
@@ -971,6 +978,7 @@ export const prodParasKusamaCommon: EndpointOption[] = [
       // OnFinality: 'wss://encointer.api.onfinality.io/public-ws', // https://github.com/polkadot-js/apps/issues/9986
       // Stakeworld: 'wss://ksm-rpc.stakeworld.io/encointer'
     },
+    relayName: 'kusama',
     teleport: [-1],
     text: 'Encointer Network',
     ui: {
@@ -980,11 +988,14 @@ export const prodParasKusamaCommon: EndpointOption[] = [
   },
   {
     info: 'kusamaPeople',
+    isPeople: true,
+    isPeopleForIdentity: false,
     paraId: 1004,
     providers: {
       Parity: 'wss://kusama-people-rpc.polkadot.io',
       Stakeworld: 'wss://ksm-rpc.stakeworld.io/people'
     },
+    relayName: 'kusama',
     teleport: [-1],
     text: 'People',
     ui: {}
@@ -995,6 +1006,8 @@ export const prodRelayKusama: EndpointOption = {
   dnslink: 'kusama',
   genesisHash: KUSAMA_GENESIS,
   info: 'kusama',
+  isPeopleForIdentity: true,
+  isRelay: true,
   linked: [
     ...prodParasKusamaCommon,
     ...prodParasKusama
diff --git a/packages/apps-config/src/endpoints/productionRelayPolkadot.ts b/packages/apps-config/src/endpoints/productionRelayPolkadot.ts
index 1eda5683a3..4a015b7bfe 100644
--- a/packages/apps-config/src/endpoints/productionRelayPolkadot.ts
+++ b/packages/apps-config/src/endpoints/productionRelayPolkadot.ts
@@ -832,6 +832,7 @@ export const prodParasPolkadot: Omit<EndpointOption, 'teleport'>[] = [
 export const prodParasPolkadotCommon: EndpointOption[] = [
   {
     info: 'PolkadotAssetHub',
+    isPeopleForIdentity: true,
     paraId: 1000,
     providers: {
       Dwellir: 'wss://asset-hub-polkadot-rpc.dwellir.com',
@@ -844,6 +845,7 @@ export const prodParasPolkadotCommon: EndpointOption[] = [
       RadiumBlock: 'wss://statemint.public.curie.radiumblock.co/ws',
       Stakeworld: 'wss://dot-rpc.stakeworld.io/assethub'
     },
+    relayName: 'polkadot',
     teleport: [-1],
     text: 'AssetHub',
     ui: {
@@ -853,6 +855,7 @@ export const prodParasPolkadotCommon: EndpointOption[] = [
   },
   {
     info: 'polkadotBridgeHub',
+    isPeopleForIdentity: true,
     paraId: 1002,
     providers: {
       Dwellir: 'wss://polkadot-bridge-hub-rpc.dwellir.com',
@@ -865,6 +868,7 @@ export const prodParasPolkadotCommon: EndpointOption[] = [
       RadiumBlock: 'wss://bridgehub-polkadot.public.curie.radiumblock.co/ws',
       Stakeworld: 'wss://dot-rpc.stakeworld.io/bridgehub'
     },
+    relayName: 'polkadot',
     teleport: [-1],
     text: 'BridgeHub',
     ui: {
@@ -873,6 +877,7 @@ export const prodParasPolkadotCommon: EndpointOption[] = [
   },
   {
     info: 'polkadotCollectives',
+    isPeopleForIdentity: true,
     paraId: 1001,
     providers: {
       Dwellir: 'wss://polkadot-collectives-rpc.dwellir.com',
@@ -885,6 +890,7 @@ export const prodParasPolkadotCommon: EndpointOption[] = [
       RadiumBlock: 'wss://collectives.public.curie.radiumblock.co/ws',
       Stakeworld: 'wss://dot-rpc.stakeworld.io/collectives'
     },
+    relayName: 'polkadot',
     teleport: [-1],
     text: 'Collectives',
     ui: {
@@ -898,6 +904,8 @@ export const prodRelayPolkadot: EndpointOption = {
   dnslink: 'polkadot',
   genesisHash: POLKADOT_GENESIS,
   info: 'polkadot',
+  isPeopleForIdentity: true,
+  isRelay: true,
   linked: [
     ...prodParasPolkadotCommon,
     ...prodParasPolkadot
diff --git a/packages/apps-config/src/endpoints/testingRelayPaseo.ts b/packages/apps-config/src/endpoints/testingRelayPaseo.ts
index 5ab37f47da..598c67e537 100644
--- a/packages/apps-config/src/endpoints/testingRelayPaseo.ts
+++ b/packages/apps-config/src/endpoints/testingRelayPaseo.ts
@@ -161,6 +161,8 @@ export const testRelayPaseo: EndpointOption = {
   dnslink: 'paseo',
   genesisHash: PASEO_GENESIS,
   info: 'paseo',
+  isPeopleForIdentity: true,
+  isRelay: true,
   linked: [
     ...testParasPaseoCommon,
     ...testParasPaseo
diff --git a/packages/apps-config/src/endpoints/testingRelayRococo.ts b/packages/apps-config/src/endpoints/testingRelayRococo.ts
index b4776c2ac0..eddb6016e4 100644
--- a/packages/apps-config/src/endpoints/testingRelayRococo.ts
+++ b/packages/apps-config/src/endpoints/testingRelayRococo.ts
@@ -703,11 +703,13 @@ export const testParasRococo: Omit<EndpointOption, 'teleport'>[] = [
 export const testParasRococoCommon: EndpointOption[] = [
   {
     info: 'RococoAssetHub',
+    isPeopleForIdentity: true,
     paraId: 1000,
     providers: {
       Dwellir: 'wss://asset-hub-rococo-rpc.dwellir.com',
       Parity: 'wss://rococo-asset-hub-rpc.polkadot.io'
     },
+    relayName: 'rococo',
     teleport: [-1],
     text: 'AssetHub',
     ui: {
@@ -717,11 +719,13 @@ export const testParasRococoCommon: EndpointOption[] = [
   },
   {
     info: 'rococoBridgehub',
+    isPeopleForIdentity: true,
     paraId: 1013,
     providers: {
       Dwellir: 'wss://rococo-bridge-hub-rpc.dwellir.com',
       Parity: 'wss://rococo-bridge-hub-rpc.polkadot.io'
     },
+    relayName: 'rococo',
     teleport: [-1],
     text: 'Bridgehub',
     ui: {
@@ -730,10 +734,12 @@ export const testParasRococoCommon: EndpointOption[] = [
   },
   {
     info: 'rococoContracts',
+    isPeopleForIdentity: true,
     paraId: 1002,
     providers: {
       Parity: 'wss://rococo-contracts-rpc.polkadot.io'
     },
+    relayName: 'rococo',
     teleport: [-1],
     text: 'Contracts',
     ui: {
@@ -743,10 +749,12 @@ export const testParasRococoCommon: EndpointOption[] = [
   },
   {
     info: 'rococoCoretime',
+    isPeopleForIdentity: true,
     paraId: 1005,
     providers: {
       Parity: 'wss://rococo-coretime-rpc.polkadot.io'
     },
+    relayName: 'rococo',
     teleport: [-1],
     text: 'Coretime',
     ui: {}
@@ -754,10 +762,12 @@ export const testParasRococoCommon: EndpointOption[] = [
   {
     homepage: 'https://encointer.org/',
     info: 'encointer',
+    isPeopleForIdentity: true,
     paraId: 1003,
     providers: {
       'Encointer Association': 'wss://rococo.api.encointer.org'
     },
+    relayName: 'rococo',
     teleport: [-1],
     text: 'Encointer Lietaer',
     ui: {
@@ -767,10 +777,12 @@ export const testParasRococoCommon: EndpointOption[] = [
   },
   {
     info: 'rococoPeople',
+    isPeopleForIdentity: false,
     paraId: 1004,
     providers: {
       Parity: 'wss://rococo-people-rpc.polkadot.io'
     },
+    relayName: 'rococo',
     teleport: [-1],
     text: 'People',
     ui: {}
@@ -781,6 +793,8 @@ export const testRelayRococo: EndpointOption = {
   dnslink: 'rococo',
   genesisHash: ROCOCO_GENESIS,
   info: 'rococo',
+  isPeopleForIdentity: true,
+  isRelay: true,
   linked: [
     ...testParasRococoCommon,
     ...testParasRococo
diff --git a/packages/apps-config/src/endpoints/testingRelayWestend.ts b/packages/apps-config/src/endpoints/testingRelayWestend.ts
index 384722eaae..2f740f9e98 100644
--- a/packages/apps-config/src/endpoints/testingRelayWestend.ts
+++ b/packages/apps-config/src/endpoints/testingRelayWestend.ts
@@ -113,6 +113,7 @@ export const testParasWestend: Omit<EndpointOption, 'teleport'>[] = [
 export const testParasWestendCommon: EndpointOption[] = [
   {
     info: 'WestendAssetHub',
+    isPeopleForIdentity: true,
     paraId: 1000,
     providers: {
       Dwellir: 'wss://asset-hub-westend-rpc.dwellir.com',
@@ -123,6 +124,7 @@ export const testParasWestendCommon: EndpointOption[] = [
       Parity: 'wss://westend-asset-hub-rpc.polkadot.io'
       // Stakeworld: 'wss://wnd-rpc.stakeworld.io/assethub'
     },
+    relayName: 'westend',
     teleport: [-1],
     text: 'AssetHub',
     ui: {
@@ -132,6 +134,7 @@ export const testParasWestendCommon: EndpointOption[] = [
   },
   {
     info: 'westendBridgeHub',
+    isPeopleForIdentity: true,
     paraId: 1002,
     providers: {
       Dwellir: 'wss://westend-bridge-hub-rpc.dwellir.com',
@@ -141,6 +144,7 @@ export const testParasWestendCommon: EndpointOption[] = [
       // OnFinality: 'wss://bridgehub-westend.api.onfinality.io/public-ws', // https://github.com/polkadot-js/apps/issues/9960
       Parity: 'wss://westend-bridge-hub-rpc.polkadot.io'
     },
+    relayName: 'westend',
     text: 'BridgeHub',
     ui: {
       logo: nodesBridgeHubSVG
@@ -148,6 +152,7 @@ export const testParasWestendCommon: EndpointOption[] = [
   },
   {
     info: 'westendCollectives',
+    isPeopleForIdentity: true,
     paraId: 1001,
     providers: {
       Dwellir: 'wss://westend-collectives-rpc.dwellir.com',
@@ -156,6 +161,7 @@ export const testParasWestendCommon: EndpointOption[] = [
       'IBP-GeoDNS2': 'wss://sys.dotters.network/collectives-westend',
       Parity: 'wss://westend-collectives-rpc.polkadot.io'
     },
+    relayName: 'westend',
     teleport: [-1],
     text: 'Collectives',
     ui: {
@@ -165,24 +171,29 @@ export const testParasWestendCommon: EndpointOption[] = [
   },
   {
     info: 'westendCoretime',
+    isPeopleForIdentity: true,
     paraId: 1005,
     providers: {
       'IBP-GeoDNS1': 'wss://sys.ibp.network/coretime-westend',
       'IBP-GeoDNS2': 'wss://sys.dotters.network/coretime-westend',
       Parity: 'wss://westend-coretime-rpc.polkadot.io'
     },
+    relayName: 'westend',
     teleport: [-1],
     text: 'Coretime',
     ui: {}
   },
   {
     info: 'westendPeople',
+    isPeople: true,
+    isPeopleForIdentity: false,
     paraId: 1004,
     providers: {
       'IBP-GeoDNS1': 'wss://sys.ibp.network/people-westend',
       'IBP-GeoDNS2': 'wss://sys.dotters.network/people-westend',
       Parity: 'wss://westend-people-rpc.polkadot.io'
     },
+    relayName: 'westend',
     teleport: [-1],
     text: 'People',
     ui: { }
@@ -193,6 +204,8 @@ export const testRelayWestend: EndpointOption = {
   dnslink: 'westend',
   genesisHash: WESTEND_GENESIS,
   info: 'westend',
+  isPeopleForIdentity: true,
+  isRelay: true,
   linked: [
     ...testParasWestendCommon,
     ...testParasWestend
diff --git a/packages/apps-config/src/endpoints/types.ts b/packages/apps-config/src/endpoints/types.ts
index ba881b7721..657eeb487a 100644
--- a/packages/apps-config/src/endpoints/types.ts
+++ b/packages/apps-config/src/endpoints/types.ts
@@ -24,11 +24,27 @@ export interface EndpointOption extends BaseOption {
   isChild?: boolean;
   isDevelopment?: boolean;
   isDisabled?: boolean;
+  /**
+   * Declares whether the given endpoint is the People chain used to store identity information.
+   */
+  isPeople?: boolean;
   isUnreachable?: boolean;
   linked?: EndpointOption[];
   info?: string;
   providers: Record<string, `${'wss://' | 'light://substrate-connect/'}${string}`>;
   text: string;
+  /**
+   * Declares whether or not the endpoint is a relay chain.
+   */
+  isRelay?: boolean;
+  /**
+   * Declares whether the given endpoint uses the People chain to store identity information.
+   */
+  isPeopleForIdentity?: boolean;
+  /**
+   * Declares the relays name.
+   */
+  relayName?: string;
 }
 
 export interface LinkOption extends BaseOption, Option {
@@ -36,12 +52,16 @@ export interface LinkOption extends BaseOption, Option {
   isChild?: boolean;
   isDevelopment?: boolean;
   isLightClient?: boolean;
+  isPeople?: boolean;
   isRelay?: boolean;
   isUnreachable?: boolean;
   isSpaced?: boolean;
   linked?: LinkOption[];
+  providers?: `${'wss://' | 'light://substrate-connect/'}${string}`[];
+  relayName?: string;
   textBy: string;
   textRelay?: React.ReactNode;
+  isPeopleForIdentity?: boolean;
   value: string;
   valueRelay?: string[];
 }
diff --git a/packages/apps-config/src/endpoints/util.ts b/packages/apps-config/src/endpoints/util.ts
index 4e067b7736..9239c9c024 100644
--- a/packages/apps-config/src/endpoints/util.ts
+++ b/packages/apps-config/src/endpoints/util.ts
@@ -53,7 +53,7 @@ function expandLinked (input: LinkOption[]): LinkOption[] {
   }, []);
 }
 
-function expandEndpoint (t: TFunction, { dnslink, genesisHash, homepage, info, isChild, isDisabled, isUnreachable, linked, paraId, providers, teleport, text, ui }: EndpointOption, firstOnly: boolean, withSort: boolean): LinkOption[] {
+function expandEndpoint (t: TFunction, { dnslink, genesisHash, homepage, info, isChild, isDisabled, isPeople, isPeopleForIdentity, isUnreachable, linked, paraId, providers, relayName, teleport, text, ui }: EndpointOption, firstOnly: boolean, withSort: boolean): LinkOption[] {
   const hasProviders = Object.keys(providers).length !== 0;
   const base = {
     genesisHash,
@@ -61,8 +61,12 @@ function expandEndpoint (t: TFunction, { dnslink, genesisHash, homepage, info, i
     info,
     isChild,
     isDisabled,
+    isPeople,
+    isPeopleForIdentity,
     isUnreachable: isUnreachable || !hasProviders,
     paraId,
+    providers: Object.keys(providers).map((k) => providers[k]),
+    relayName,
     teleport,
     text,
     ui
diff --git a/packages/apps/src/WarmUp.tsx b/packages/apps/src/WarmUp.tsx
index eaf5b1ccb9..d94e78e697 100644
--- a/packages/apps/src/WarmUp.tsx
+++ b/packages/apps/src/WarmUp.tsx
@@ -6,9 +6,9 @@ import React, { useEffect, useState } from 'react';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
 function WarmUp (): React.ReactElement {
-  const { api, isApiReady } = useApi();
+  const { api, apiIdentity, isApiReady } = useApi();
   const indexes = useCall<unknown>(isApiReady && api.derive.accounts?.indexes);
-  const registrars = useCall<unknown>(isApiReady && api.query.identity?.registrars);
+  const registrars = useCall<unknown>(isApiReady && apiIdentity.query.identity?.registrars);
   const issuance = useCall<unknown>(isApiReady && api.query.balances?.totalIssuance);
   const [hasValues, setHasValues] = useState(false);
 
diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index 864bf66537..a6149cf39d 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@@ -150,13 +150,13 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
   const { t } = useTranslation();
   const [isExpanded, toggleIsExpanded] = useToggle(false);
   const { queueExtrinsic } = useQueue();
-  const api = useApi();
+  const { api, apiIdentity, enableIdentity, isDevelopment: isDevelopmentApiProps, isEthereum: isEthereumApiProps } = useApi();
   const { getLedger } = useLedger();
   const bestNumber = useBestNumber();
   const balancesAll = useBalancesAll(address);
   const stakingInfo = useStakingInfo(address);
-  const democracyLocks = useCall<DeriveDemocracyLock[]>(api.api.derive.democracy?.locks, [address]);
-  const recoveryInfo = useCall<RecoveryConfig | null>(api.api.query.recovery?.recoverable, [address], transformRecovery);
+  const democracyLocks = useCall<DeriveDemocracyLock[]>(api.derive.democracy?.locks, [address]);
+  const recoveryInfo = useCall<RecoveryConfig | null>(api.query.recovery?.recoverable, [address], transformRecovery);
   const multiInfos = useMultisigApprovals(address);
   const proxyInfo = useProxies(address);
   const { flags: { isDevelopment, isEditable, isEthereum, isExternal, isHardware, isInjected, isMultisig, isProxied }, genesisHash, identity, name: accName, onSetGenesisHash, tags } = useAccountInfo(address);
@@ -190,10 +190,10 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         unbonding: calcUnbonding(stakingInfo)
       });
 
-      api.api.tx.vesting?.vest && setVestingTx(() =>
+      api.tx.vesting?.vest && setVestingTx(() =>
         balancesAll.vestingLocked.isZero()
           ? null
-          : api.api.tx.vesting.vest()
+          : api.tx.vesting.vest()
       );
     }
   }, [address, api, balancesAll, setBalance, stakingInfo]);
@@ -210,7 +210,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         }
 
         return {
-          democracyUnlockTx: createClearDemocracyTx(api.api, address, ids),
+          democracyUnlockTx: createClearDemocracyTx(api, address, ids),
           ids
         };
       }
@@ -230,7 +230,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
 
         return {
           ids,
-          referendaUnlockTx: createClearReferendaTx(api.api, address, ids)
+          referendaUnlockTx: createClearReferendaTx(api, address, ids)
         };
       }
     );
@@ -301,7 +301,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
 
   const menuItems = useMemo(() => [
     createMenuGroup('identityGroup', [
-      isFunction(api.api.tx.identity?.setIdentity) && !isHardware && (
+      isFunction(apiIdentity.tx.identity?.setIdentity) && enableIdentity && !isHardware && (
         <Menu.Item
           icon='link'
           key='identityMain'
@@ -309,7 +309,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           onClick={toggleIdentityMain}
         />
       ),
-      isFunction(api.api.tx.identity?.setSubs) && identity?.display && !isHardware && (
+      isFunction(apiIdentity.tx.identity?.setSubs) && enableIdentity && identity?.display && !isHardware && (
         <Menu.Item
           icon='vector-square'
           key='identitySub'
@@ -317,7 +317,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           onClick={toggleIdentitySub}
         />
       ),
-      isFunction(api.api.tx.democracy?.unlock) && democracyUnlockTx && (
+      isFunction(api.tx.democracy?.unlock) && democracyUnlockTx && (
         <Menu.Item
           icon='broom'
           key='clearDemocracy'
@@ -325,7 +325,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           onClick={_clearDemocracyLocks}
         />
       ),
-      isFunction(api.api.tx.convictionVoting?.unlock) && referendaUnlockTx && (
+      isFunction(api.tx.convictionVoting?.unlock) && referendaUnlockTx && (
         <Menu.Item
           icon='broom'
           key='clearReferenda'
@@ -333,7 +333,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           onClick={_clearReferendaLocks}
         />
       ),
-      isFunction(api.api.tx.vesting?.vest) && vestingVestTx && (
+      isFunction(api.tx.vesting?.vest) && vestingVestTx && (
         <Menu.Item
           icon='unlock'
           key='vestingVest'
@@ -343,7 +343,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
       )
     ], t('Identity')),
     createMenuGroup('deriveGroup', [
-      !(isEthereum || isExternal || isHardware || isInjected || isMultisig || api.isEthereum) && (
+      !(isEthereum || isExternal || isHardware || isInjected || isMultisig || isEthereumApiProps) && (
         <Menu.Item
           icon='download'
           key='deriveAccount'
@@ -386,7 +386,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         />
       )
     ], t('Backup')),
-    isFunction(api.api.tx.recovery?.createRecovery) && createMenuGroup('reoveryGroup', [
+    isFunction(api.tx.recovery?.createRecovery) && createMenuGroup('reoveryGroup', [
       !recoveryInfo && (
         <Menu.Item
           icon='redo'
@@ -402,7 +402,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         onClick={toggleRecoverAccount}
       />
     ], t('Recovery')),
-    isFunction(api.api.tx.multisig?.asMulti) && isMultisig && createMenuGroup('multisigGroup', [
+    isFunction(api.tx.multisig?.asMulti) && isMultisig && createMenuGroup('multisigGroup', [
       <Menu.Item
         icon='file-signature'
         isDisabled={!multiInfos?.length}
@@ -411,7 +411,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         onClick={toggleMultisig}
       />
     ], t('Multisig')),
-    isFunction(api.api.query.democracy?.votingOf) && delegation?.accountDelegated && createMenuGroup('undelegateGroup', [
+    isFunction(api.query.democracy?.votingOf) && delegation?.accountDelegated && createMenuGroup('undelegateGroup', [
       <Menu.Item
         icon='user-edit'
         key='changeDelegate'
@@ -426,7 +426,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
       />
     ], t('Undelegate')),
     createMenuGroup('delegateGroup', [
-      isFunction(api.api.query.democracy?.votingOf) && !delegation?.accountDelegated && (
+      isFunction(api.query.democracy?.votingOf) && !delegation?.accountDelegated && (
         <Menu.Item
           icon='user-plus'
           key='delegate'
@@ -434,7 +434,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           onClick={toggleDelegate}
         />
       ),
-      isFunction(api.api.query.proxy?.proxies) && (
+      isFunction(api.query.proxy?.proxies) && (
         <Menu.Item
           icon='sitemap'
           key='proxy-overview'
@@ -446,7 +446,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         />
       )
     ], t('Delegate')),
-    isEditable && !api.isDevelopment && createMenuGroup('genesisGroup', [
+    isEditable && !isDevelopmentApiProps && createMenuGroup('genesisGroup', [
       <ChainLock
         className='accounts--network-toggle'
         genesisHash={genesisHash}
@@ -455,7 +455,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
       />
     ])
   ].filter((i) => i),
-  [_clearDemocracyLocks, _clearReferendaLocks, _showOnHardware, _vestingVest, api, delegation, democracyUnlockTx, genesisHash, identity, isDevelopment, isEditable, isEthereum, isExternal, isHardware, isInjected, isMultisig, multiInfos, onSetGenesisHash, proxy, referendaUnlockTx, recoveryInfo, t, toggleBackup, toggleDelegate, toggleDerive, toggleForget, toggleIdentityMain, toggleIdentitySub, toggleMultisig, togglePassword, toggleProxyOverview, toggleRecoverAccount, toggleRecoverSetup, toggleUndelegate, vestingVestTx]);
+  [_clearDemocracyLocks, _clearReferendaLocks, _showOnHardware, _vestingVest, api, apiIdentity.tx.identity, enableIdentity, delegation, democracyUnlockTx, genesisHash, identity, isDevelopment, isDevelopmentApiProps, isEthereumApiProps, isEditable, isEthereum, isExternal, isHardware, isInjected, isMultisig, multiInfos, onSetGenesisHash, proxy, referendaUnlockTx, recoveryInfo, t, toggleBackup, toggleDelegate, toggleDerive, toggleForget, toggleIdentityMain, toggleIdentitySub, toggleMultisig, togglePassword, toggleProxyOverview, toggleRecoverAccount, toggleRecoverSetup, toggleUndelegate, vestingVestTx]);
 
   if (!isVisible) {
     return null;
@@ -660,7 +660,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                 onClick={toggleDelegate}
               />
             )}
-            {proxy && proxy[0].length !== 0 && api.api.tx.utility && (
+            {proxy && proxy[0].length !== 0 && api.tx.utility && (
               <Badge
                 className='information'
                 hover={
@@ -677,7 +677,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         </td>
         <td className='actions button'>
           <Button.Group>
-            {(isFunction(api.api.tx.balances?.transferAllowDeath) || isFunction(api.api.tx.balances?.transfer)) && (
+            {(isFunction(api.tx.balances?.transferAllowDeath) || isFunction(api.tx.balances?.transfer)) && (
               <Button
                 className='send-button'
                 icon='paper-plane'
diff --git a/packages/page-accounts/src/modals/IdentityMain.tsx b/packages/page-accounts/src/modals/IdentityMain.tsx
index 80a40c4a0a..0d7155c1ab 100644
--- a/packages/page-accounts/src/modals/IdentityMain.tsx
+++ b/packages/page-accounts/src/modals/IdentityMain.tsx
@@ -94,8 +94,8 @@ function checkValue (hasValue: boolean, value: string | null | undefined, minLen
 
 function IdentityMain ({ address, className = '', onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { api, specName } = useApi();
-  const identityOpt = useCall<Option<ITuple<[PalletIdentityRegistration, Option<Bytes>]>>>(api.query.identity.identityOf, [address]);
+  const { apiIdentity, enableIdentity, specName } = useApi();
+  const identityOpt = useCall<Option<ITuple<[PalletIdentityRegistration, Option<Bytes>]>>>(apiIdentity.query.identity.identityOf, [address]);
   const [{ okAll, okDiscord, okDisplay, okEmail, okGithub, okLegal, okMatrix, okRiot, okTwitter, okWeb }, setOkInfo] = useState<ValueState>({ okAll: false });
   const [legacyInfo, setLegacyInfo] = useState<Record<string, unknown>>({});
   const [info, setInfo] = useState<Record<string, unknown>>({});
@@ -143,7 +143,7 @@ function IdentityMain ({ address, className = '', onClose }: Props): React.React
         setData((foundInfo as unknown as PeopleIdentityInfo).matrix, setHasMatrix, setValMatrix);
         setData((foundInfo as unknown as PeopleIdentityInfo).github, setHasGithub, setValGithub);
         setData(foundInfo.web, setHasWeb, setValWeb);
-        const infoDiscord = isLegacyIdentity ? setAdditionalFieldData(api, foundInfo, AddressIdentityOtherDiscordKey, setHasDiscord, setValDiscord) : setDiscordFieldData((foundInfo as unknown as PeopleIdentityInfo), setHasDiscord, setValDiscord);
+        const infoDiscord = isLegacyIdentity ? setAdditionalFieldData(apiIdentity, foundInfo, AddressIdentityOtherDiscordKey, setHasDiscord, setValDiscord) : setDiscordFieldData((foundInfo as unknown as PeopleIdentityInfo), setHasDiscord, setValDiscord);
 
         const previousKeys = isLegacyIdentity
           ? [foundInfo.display, foundInfo.email, foundInfo.legal, foundInfo.riot, foundInfo.twitter, infoDiscord, foundInfo.web]
@@ -160,7 +160,7 @@ function IdentityMain ({ address, className = '', onClose }: Props): React.React
         });
       }
     }
-  }, [identityOpt, api, isLegacyIdentity, isPalletChecked]);
+  }, [identityOpt, apiIdentity, isLegacyIdentity, isPalletChecked]);
 
   useEffect((): void => {
     const okDisplay = checkValue(true, valDisplay, 1, [], [], []);
@@ -366,7 +366,7 @@ function IdentityMain ({ address, className = '', onClose }: Props): React.React
             : <div></div>
         }
         <InputBalance
-          defaultValue={api.consts.identity?.basicDeposit}
+          defaultValue={apiIdentity.consts.identity?.basicDeposit}
           isDisabled
           label={t('total deposit')}
         />
@@ -375,18 +375,18 @@ function IdentityMain ({ address, className = '', onClose }: Props): React.React
         <TxButton
           accountId={address}
           icon={'trash-alt'}
-          isDisabled={!gotPreviousIdentity}
+          isDisabled={!enableIdentity || !gotPreviousIdentity}
           label={t('Clear Identity')}
           onStart={onClose}
-          tx={api.tx.identity.clearIdentity}
+          tx={apiIdentity.tx.identity.clearIdentity}
         />
         <TxButton
           accountId={address}
-          isDisabled={!okAll}
+          isDisabled={!enableIdentity || !okAll}
           label={t('Set Identity')}
           onStart={onClose}
           params={[isLegacyIdentity ? legacyInfo : info]}
-          tx={api.tx.identity.setIdentity}
+          tx={apiIdentity.tx.identity.setIdentity}
         />
       </Modal.Actions>
     </Modal>
diff --git a/packages/page-accounts/src/modals/IdentitySub.tsx b/packages/page-accounts/src/modals/IdentitySub.tsx
index c35ee91a87..e5e0067107 100644
--- a/packages/page-accounts/src/modals/IdentitySub.tsx
+++ b/packages/page-accounts/src/modals/IdentitySub.tsx
@@ -83,10 +83,10 @@ const transformInfo = { withParams: true };
 
 function IdentitySubModal ({ address, className, onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { api } = useApi();
+  const { apiIdentity, enableIdentity } = useApi();
   const { allAccounts } = useAccounts();
   const queryIds = useSubidentities(address);
-  const queryInfos = useCall<[[string[]], Option<ITuple<[AccountId, Data]>>[]]>(queryIds && queryIds.length !== 0 && api.query.identity.superOf.multi, [queryIds], transformInfo);
+  const queryInfos = useCall<[[string[]], Option<ITuple<[AccountId, Data]>>[]]>(queryIds && queryIds.length !== 0 && apiIdentity.query.identity.superOf.multi, [queryIds], transformInfo);
   const [infos, setInfos] = useState<[string, string][] | undefined>();
 
   useEffect((): void => {
@@ -164,13 +164,13 @@ function IdentitySubModal ({ address, className, onClose }: Props): React.ReactE
         {infos && (
           <TxButton
             accountId={address}
-            isDisabled={infos.some(([address, raw]) => !address || !raw)}
+            isDisabled={!enableIdentity || infos.some(([address, raw]) => !address || !raw)}
             label={t('Set Subs')}
             onStart={onClose}
             params={[
               infos.map(([address, raw]) => [address, { raw }])
             ]}
-            tx={api.tx.identity.setSubs}
+            tx={apiIdentity.tx.identity.setSubs}
           />
         )}
       </Modal.Actions>
diff --git a/packages/page-addresses/src/Contacts/Address.tsx b/packages/page-addresses/src/Contacts/Address.tsx
index cb0e9e0f67..3b7d397e27 100644
--- a/packages/page-addresses/src/Contacts/Address.tsx
+++ b/packages/page-addresses/src/Contacts/Address.tsx
@@ -77,7 +77,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
   useEffect((): void => {
     const { identity, nickname } = info || {};
 
-    if (isFunction(api.api.query.identity?.identityOf)) {
+    if (isFunction(api.apiIdentity.query.identity?.identityOf)) {
       if (identity?.display) {
         setAccName(identity.display);
       }
diff --git a/packages/page-referenda/src/Referenda/Delegate/useSuperIds.ts b/packages/page-referenda/src/Referenda/Delegate/useSuperIds.ts
index 74eeb272c8..665188fed8 100644
--- a/packages/page-referenda/src/Referenda/Delegate/useSuperIds.ts
+++ b/packages/page-referenda/src/Referenda/Delegate/useSuperIds.ts
@@ -32,7 +32,7 @@ const SUPEROF_OPT = {
 };
 
 function useSuperIdsImpl (accountIds?: string[] | null): string[] | null | undefined {
-  const { api } = useApi();
+  const { apiIdentity } = useApi();
 
   // for the supplied accounts, retrieve the de-dupes parent identity
   const identityParam = useMemo(
@@ -40,17 +40,17 @@ function useSuperIdsImpl (accountIds?: string[] | null): string[] | null | undef
     [accountIds]
   );
 
-  const identities = useCall(identityParam && !!identityParam[0].length && api.query.identity?.superOf?.multi, identityParam, SUPEROF_OPT);
+  const identities = useCall(identityParam && !!identityParam[0].length && apiIdentity.query.identity?.superOf?.multi, identityParam, SUPEROF_OPT);
 
   return useMemo(
     () => identityParam
       ? identityParam[0].length
-        ? isFunction(api.query.identity?.superOf)
+        ? isFunction(apiIdentity.query.identity?.superOf)
           ? identities
           : accountIds
         : []
       : null,
-    [api, accountIds, identities, identityParam]
+    [apiIdentity, accountIds, identities, identityParam]
   );
 }
 
diff --git a/packages/page-staking-legacy/src/Filtering.tsx b/packages/page-staking-legacy/src/Filtering.tsx
index a1c6b197d3..39b190a30c 100644
--- a/packages/page-staking-legacy/src/Filtering.tsx
+++ b/packages/page-staking-legacy/src/Filtering.tsx
@@ -21,7 +21,7 @@ interface Props {
 
 function Filtering ({ children, className, nameFilter, setNameFilter, setWithIdentity, withIdentity }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const { api } = useApi();
+  const { apiIdentity } = useApi();
 
   // on load, parse the query string and extract the filter
   useEffect((): void => {
@@ -50,7 +50,7 @@ function Filtering ({ children, className, nameFilter, setNameFilter, setWithIde
       {(children || setWithIdentity) && (
         <div className='staking--optionsBar'>
           {children}
-          {setWithIdentity && api.query.identity && (
+          {setWithIdentity && apiIdentity.query.identity && (
             <Toggle
               className='staking--buttonToggle'
               label={t('with an identity')}
diff --git a/packages/page-staking-legacy/src/Targets/Validator.tsx b/packages/page-staking-legacy/src/Targets/Validator.tsx
index 6a4f09be66..3186c7877f 100644
--- a/packages/page-staking-legacy/src/Targets/Validator.tsx
+++ b/packages/page-staking-legacy/src/Targets/Validator.tsx
@@ -34,15 +34,15 @@ function queryAddress (address: string): void {
 
 function Validator ({ allSlashes, canSelect, filterName, info: { accountId, bondOther, bondOwn, bondTotal, commissionPer, isBlocking, isElected, isFavorite, key, lastPayout, numNominators, rankOverall, stakedReturnCmp }, isNominated, isSelected, nominatedBy = [], toggleFavorite, toggleSelected }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const { api } = useApi();
+  const { api, apiIdentity } = useApi();
   const accountInfo = useDeriveAccountInfo(accountId);
   const [,, time] = useBlockTime(lastPayout);
 
   const isVisible = useMemo(
     () => accountInfo
-      ? checkVisibility(api, key, accountInfo, filterName)
+      ? checkVisibility(apiIdentity, key, accountInfo, filterName)
       : true,
-    [accountInfo, api, filterName, key]
+    [accountInfo, filterName, apiIdentity, key]
   );
 
   const slashes = useMemo(
diff --git a/packages/page-staking-legacy/src/Validators/Address/index.tsx b/packages/page-staking-legacy/src/Validators/Address/index.tsx
index 6edc7f6579..691f31398a 100644
--- a/packages/page-staking-legacy/src/Validators/Address/index.tsx
+++ b/packages/page-staking-legacy/src/Validators/Address/index.tsx
@@ -92,7 +92,7 @@ function useAddressCalls (api: ApiPromise, address: string, isMain?: boolean) {
 
 function Address ({ address, className = '', filterName, hasQueries, isElected, isFavorite, isMain, isPara, lastBlock, minCommission, nominatedBy, points, recentlyOnline, toggleFavorite, validatorInfo, withIdentity }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const { api } = useApi();
+  const { api, apiIdentity } = useApi();
   const [isExpanded, toggleIsExpanded] = useToggle(false);
   const { accountInfo, slashingSpans } = useAddressCalls(api, address, isMain);
 
@@ -104,8 +104,8 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
   );
 
   const isVisible = useMemo(
-    () => accountInfo ? checkVisibility(api, address, accountInfo, filterName, withIdentity) : true,
-    [api, accountInfo, address, filterName, withIdentity]
+    () => accountInfo ? checkVisibility(apiIdentity, address, accountInfo, filterName, withIdentity) : true,
+    [accountInfo, address, filterName, apiIdentity, withIdentity]
   );
 
   const statsLink = useMemo(
diff --git a/packages/page-staking/src/Filtering.tsx b/packages/page-staking/src/Filtering.tsx
index a1c6b197d3..39b190a30c 100644
--- a/packages/page-staking/src/Filtering.tsx
+++ b/packages/page-staking/src/Filtering.tsx
@@ -21,7 +21,7 @@ interface Props {
 
 function Filtering ({ children, className, nameFilter, setNameFilter, setWithIdentity, withIdentity }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const { api } = useApi();
+  const { apiIdentity } = useApi();
 
   // on load, parse the query string and extract the filter
   useEffect((): void => {
@@ -50,7 +50,7 @@ function Filtering ({ children, className, nameFilter, setNameFilter, setWithIde
       {(children || setWithIdentity) && (
         <div className='staking--optionsBar'>
           {children}
-          {setWithIdentity && api.query.identity && (
+          {setWithIdentity && apiIdentity.query.identity && (
             <Toggle
               className='staking--buttonToggle'
               label={t('with an identity')}
diff --git a/packages/page-staking/src/Targets/Validator.tsx b/packages/page-staking/src/Targets/Validator.tsx
index 6a4f09be66..657221a4b6 100644
--- a/packages/page-staking/src/Targets/Validator.tsx
+++ b/packages/page-staking/src/Targets/Validator.tsx
@@ -34,15 +34,15 @@ function queryAddress (address: string): void {
 
 function Validator ({ allSlashes, canSelect, filterName, info: { accountId, bondOther, bondOwn, bondTotal, commissionPer, isBlocking, isElected, isFavorite, key, lastPayout, numNominators, rankOverall, stakedReturnCmp }, isNominated, isSelected, nominatedBy = [], toggleFavorite, toggleSelected }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const { api } = useApi();
+  const { api, apiIdentity } = useApi();
   const accountInfo = useDeriveAccountInfo(accountId);
   const [,, time] = useBlockTime(lastPayout);
 
   const isVisible = useMemo(
     () => accountInfo
-      ? checkVisibility(api, key, accountInfo, filterName)
+      ? checkVisibility(apiIdentity, key, accountInfo, filterName)
       : true,
-    [accountInfo, api, filterName, key]
+    [accountInfo, apiIdentity, filterName, key]
   );
 
   const slashes = useMemo(
diff --git a/packages/page-staking/src/Validators/Address/index.tsx b/packages/page-staking/src/Validators/Address/index.tsx
index be62050ed4..469c44b537 100644
--- a/packages/page-staking/src/Validators/Address/index.tsx
+++ b/packages/page-staking/src/Validators/Address/index.tsx
@@ -92,7 +92,7 @@ function useAddressCalls (api: ApiPromise, address: string, isMain?: boolean) {
 
 function Address ({ address, className = '', filterName, hasQueries, isElected, isFavorite, isMain, isPara, lastBlock, minCommission, nominatedBy, points, recentlyOnline, toggleFavorite, validatorInfo, withIdentity }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const { api } = useApi();
+  const { api, apiIdentity } = useApi();
   const [isExpanded, toggleIsExpanded] = useToggle(false);
   const { accountInfo, slashingSpans } = useAddressCalls(api, address, isMain);
 
@@ -104,8 +104,8 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
   );
 
   const isVisible = useMemo(
-    () => accountInfo ? checkVisibility(api, address, accountInfo, filterName, withIdentity) : true,
-    [api, accountInfo, address, filterName, withIdentity]
+    () => accountInfo ? checkVisibility(apiIdentity, address, accountInfo, filterName, withIdentity) : true,
+    [accountInfo, address, filterName, apiIdentity, withIdentity]
   );
 
   const statsLink = useMemo(
diff --git a/packages/react-api/src/Api.tsx b/packages/react-api/src/Api.tsx
index 1240630a4e..b53b7ecce7 100644
--- a/packages/react-api/src/Api.tsx
+++ b/packages/react-api/src/Api.tsx
@@ -18,7 +18,7 @@ import { deriveMapCache, setDeriveCache } from '@polkadot/api-derive/util';
 import { ethereumChains, typesBundle } from '@polkadot/apps-config';
 import { web3Accounts, web3Enable } from '@polkadot/extension-dapp';
 import { TokenUnit } from '@polkadot/react-components/InputConsts/units';
-import { useApiUrl, useEndpoint, useQueue } from '@polkadot/react-hooks';
+import { useApiUrl, useEndpoint, usePeopleEndpoint, useQueue } from '@polkadot/react-hooks';
 import { ApiCtx } from '@polkadot/react-hooks/ctx/Api';
 import { ApiSigner } from '@polkadot/react-signer/signers';
 import { keyring } from '@polkadot/ui-keyring';
@@ -279,20 +279,30 @@ export function ApiCtxRoot ({ apiUrl, children, isElectron, store: keyringStore
   const [extensions, setExtensions] = useState<InjectedExtension[] | undefined>();
   const [isLocalFork] = useState(store.get('localFork') === apiUrl);
   const apiEndpoint = useEndpoint(apiUrl);
+  const peopleEndpoint = usePeopleEndpoint(apiEndpoint?.relayName || apiEndpoint?.info);
   const relayUrls = useMemo(
     () => (apiEndpoint?.valueRelay && isNumber(apiEndpoint.paraId) && (apiEndpoint.paraId < 2000))
       ? apiEndpoint.valueRelay
       : null,
     [apiEndpoint]
   );
+  const peopleUrls = useMemo(
+    () => (peopleEndpoint?.isPeople && !apiEndpoint?.isPeople && peopleEndpoint?.providers && apiEndpoint?.isPeopleForIdentity)
+      ? peopleEndpoint.providers
+      : null,
+    [apiEndpoint, peopleEndpoint]
+  );
   const apiRelay = useApiUrl(relayUrls);
+  const apiSystemPeople = useApiUrl(peopleUrls);
   const createLink = useMemo(
     () => makeCreateLink(apiUrl, isElectron),
     [apiUrl, isElectron]
   );
+  // TODO: Once the people migration is complete for polkadot, we can remove the polkadot check at the end.
+  const enableIdentity = apiEndpoint?.isPeople || (isNumber(apiEndpoint?.paraId) && (apiEndpoint?.paraId >= 2000)) || apiEndpoint?.info?.toLowerCase() === 'polkadot';
   const value = useMemo<ApiProps>(
-    () => objectSpread({}, state, { api: statics.api, apiEndpoint, apiError, apiRelay, apiUrl, createLink, extensions, isApiConnected, isApiInitialized, isElectron, isLocalFork, isWaitingInjected: !extensions }),
-    [apiError, createLink, extensions, isApiConnected, isApiInitialized, isElectron, isLocalFork, state, apiEndpoint, apiRelay, apiUrl]
+    () => objectSpread({}, state, { api: statics.api, apiEndpoint, apiError, apiIdentity: ((apiEndpoint?.isPeopleForIdentity && apiSystemPeople) || statics.api), apiRelay, apiSystemPeople, apiUrl, createLink, enableIdentity, extensions, isApiConnected, isApiInitialized, isElectron, isLocalFork, isWaitingInjected: !extensions }),
+    [apiError, createLink, extensions, isApiConnected, isApiInitialized, isElectron, isLocalFork, state, apiEndpoint, apiRelay, apiUrl, apiSystemPeople, enableIdentity]
   );
 
   // initial initialization
diff --git a/packages/react-api/src/types.ts b/packages/react-api/src/types.ts
index 2965fd6a81..d7873857e5 100644
--- a/packages/react-api/src/types.ts
+++ b/packages/react-api/src/types.ts
@@ -45,7 +45,16 @@ export interface ApiProps extends ApiState {
   api: ApiPromise;
   apiEndpoint: LinkOption | null;
   apiError: string | null;
+  /**
+   * The identity api used for retrieving identities from the people chain.
+   */
+  apiIdentity: ApiPromise;
+  /**
+   * Used for checking if tx.idenitity.* should be used. Can be used for other scenarios as well.
+   */
+  enableIdentity: boolean;
   apiRelay: ApiPromise | null;
+  apiSystemPeople: ApiPromise | null;
   apiUrl?: string;
   createLink: (path: string, apiUrl?: string) => string;
   extensions?: InjectedExtension[];
diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index 62837df522..8bb1c2a186 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -8,7 +8,7 @@ import type { AccountId, AccountIndex, Address } from '@polkadot/types/interface
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
 import { statics } from '@polkadot/react-api/statics';
-import { useDeriveAccountInfo, useSystemApi } from '@polkadot/react-hooks';
+import { useApi, useDeriveAccountInfo } from '@polkadot/react-hooks';
 import { AccountSidebarCtx } from '@polkadot/react-hooks/ctx/AccountSidebar';
 import { formatNumber, isCodec, isFunction, stringToU8a, u8aEmpty, u8aEq, u8aToBn } from '@polkadot/util';
 
@@ -180,7 +180,7 @@ function extractIdentity (address: string, identity: DeriveAccountRegistration):
 }
 
 function AccountName ({ children, className = '', defaultName, label, onClick, override, toggle, value, withSidebar }: Props): React.ReactElement<Props> {
-  const api = useSystemApi();
+  const { apiIdentity } = useApi();
   const info = useDeriveAccountInfo(value);
   const [name, setName] = useState<React.ReactNode>(() => extractName((value || '').toString(), undefined, defaultName));
   const toggleSidebar = useContext(AccountSidebarCtx);
@@ -194,7 +194,7 @@ function AccountName ({ children, className = '', defaultName, label, onClick, o
       parentCache.set(cacheAddr, identity.parent.toString());
     }
 
-    if (api && isFunction(api.query.identity?.identityOf)) {
+    if (apiIdentity && isFunction(apiIdentity.query.identity?.identityOf)) {
       setName(() =>
         identity?.display
           ? extractIdentity(cacheAddr, identity)
@@ -205,7 +205,7 @@ function AccountName ({ children, className = '', defaultName, label, onClick, o
     } else {
       setName(defaultOrAddrNode(defaultName, cacheAddr, accountIndex));
     }
-  }, [api, defaultName, info, toggle, value]);
+  }, [apiIdentity, defaultName, info, toggle, value]);
 
   const _onNameEdit = useCallback(
     () => setName(defaultOrAddrNode(defaultName, (value || '').toString())),
diff --git a/packages/react-components/src/AccountSidebar/Identity.tsx b/packages/react-components/src/AccountSidebar/Identity.tsx
index 086abd9aa3..9befc10bc1 100644
--- a/packages/react-components/src/AccountSidebar/Identity.tsx
+++ b/packages/react-components/src/AccountSidebar/Identity.tsx
@@ -27,7 +27,7 @@ const SUBS_DISPLAY_THRESHOLD = 4;
 
 function Identity ({ address, identity }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const { api } = useApi();
+  const { apiIdentity } = useApi();
   const { isRegistrar, registrars } = useRegistrars();
   const [isJudgementOpen, toggleIsJudgementOpen] = useToggle();
   const subs = useSubidentities(address);
@@ -44,7 +44,7 @@ function Identity ({ address, identity }: Props): React.ReactElement<Props> | nu
   , [subs]
   );
 
-  if (!identity || !identity.isExistent || !api.query.identity?.identityOf) {
+  if (!identity || !identity.isExistent || !apiIdentity.query.identity?.identityOf) {
     return null;
   }
 
diff --git a/packages/react-components/src/AccountSidebar/RegistrarJudgement.tsx b/packages/react-components/src/AccountSidebar/RegistrarJudgement.tsx
index 3c77574d47..7166c703be 100644
--- a/packages/react-components/src/AccountSidebar/RegistrarJudgement.tsx
+++ b/packages/react-components/src/AccountSidebar/RegistrarJudgement.tsx
@@ -51,8 +51,8 @@ const OPT_ID = {
 
 function RegistrarJudgement ({ address, registrars, toggleJudgement }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { api } = useApi();
-  const identityHash = useCall(api.query.identity.identityOf, [address], OPT_ID);
+  const { apiIdentity, enableIdentity } = useApi();
+  const identityHash = useCall(apiIdentity.query.identity.identityOf, [address], OPT_ID);
   const [addresses] = useState(() => registrars.map(({ address }) => address));
   const [judgementAccountId, setJudgementAccountId] = useState<string | null>(null);
   const [judgementEnum, setJudgementEnum] = useState(2); // Reasonable
@@ -110,15 +110,15 @@ function RegistrarJudgement ({ address, registrars, toggleJudgement }: Props): R
         <TxButton
           accountId={judgementAccountId}
           icon='check'
-          isDisabled={!identityHash || registrarIndex === -1}
+          isDisabled={!enableIdentity || !identityHash || registrarIndex === -1}
           label={t('Judge')}
           onStart={toggleJudgement}
           params={
-            api.tx.identity.provideJudgement.meta.args.length === 4
+            apiIdentity.tx.identity.provideJudgement.meta.args.length === 4
               ? [registrarIndex, address, judgementEnum, identityHash]
               : [registrarIndex, address, judgementEnum]
           }
-          tx={api.tx.identity.provideJudgement}
+          tx={apiIdentity.tx.identity.provideJudgement}
         />
       </Modal.Actions>
     </Modal>
diff --git a/packages/react-components/src/AddressToggle.tsx b/packages/react-components/src/AddressToggle.tsx
index 12bfcf9df2..881eac3b68 100644
--- a/packages/react-components/src/AddressToggle.tsx
+++ b/packages/react-components/src/AddressToggle.tsx
@@ -21,12 +21,12 @@ interface Props {
 }
 
 function AddressToggle ({ address, className = '', filter, isHidden, noToggle, onChange, value }: Props): React.ReactElement<Props> | null {
-  const { api } = useApi();
+  const { apiIdentity } = useApi();
   const info = useDeriveAccountInfo(address);
 
   const isVisible = useMemo(
-    () => info ? checkVisibility(api, address, info, filter, false) : true,
-    [api, address, filter, info]
+    () => info ? checkVisibility(apiIdentity, address, info, filter, false) : true,
+    [address, filter, info, apiIdentity]
   );
 
   const _onClick = useCallback(
diff --git a/packages/react-hooks/src/ctx/types.ts b/packages/react-hooks/src/ctx/types.ts
index d07c49af63..c236701bec 100644
--- a/packages/react-hooks/src/ctx/types.ts
+++ b/packages/react-hooks/src/ctx/types.ts
@@ -30,7 +30,10 @@ export interface ApiProps extends ApiState {
   api: ApiPromise;
   apiEndpoint: LinkOption | null;
   apiError: string | null;
+  apiIdentity: ApiPromise;
+  enableIdentity: boolean;
   apiRelay: ApiPromise | null;
+  apiSystemPeople: ApiPromise | null;
   apiUrl?: string;
   createLink: (path: string, apiUrl?: string) => string;
   extensions?: InjectedExtension[];
diff --git a/packages/react-hooks/src/index.ts b/packages/react-hooks/src/index.ts
index c24ec91338..7df5a8db70 100644
--- a/packages/react-hooks/src/index.ts
+++ b/packages/react-hooks/src/index.ts
@@ -61,6 +61,7 @@ export { useOwnStashInfos } from './useOwnStashInfos.js';
 export { useParaApi } from './useParaApi.js';
 export { useIsParasLinked, useParaEndpoints } from './useParaEndpoints.js';
 export { usePassword } from './usePassword.js';
+export { usePeopleEndpoint } from './usePeopleEndpoint.js';
 export { usePopupWindow } from './usePopupWindow.js';
 export { usePreimage } from './usePreimage.js';
 export { useProxies } from './useProxies.js';
diff --git a/packages/react-hooks/src/useAccountInfo.ts b/packages/react-hooks/src/useAccountInfo.ts
index 72a57d54da..225f1a049a 100644
--- a/packages/react-hooks/src/useAccountInfo.ts
+++ b/packages/react-hooks/src/useAccountInfo.ts
@@ -40,7 +40,7 @@ const IS_NONE = {
 };
 
 function useAccountInfoImpl (value: string | null, isContract = false): UseAccountInfo {
-  const { api } = useApi();
+  const { api, apiIdentity, apiSystemPeople } = useApi();
   const { accounts: { isAccount }, addresses: { isAddress } } = useKeyring();
   const accountInfo = useDeriveAccountInfo(value);
   const accountFlags = useDeriveAccountFlags(value);
@@ -89,7 +89,7 @@ function useAccountInfoImpl (value: string | null, isContract = false): UseAccou
 
     let name;
 
-    if (isFunction(api.query.identity?.identityOf)) {
+    if (isFunction(apiIdentity.query.identity?.identityOf)) {
       if (identity?.display) {
         name = identity.display;
       }
@@ -113,7 +113,7 @@ function useAccountInfoImpl (value: string | null, isContract = false): UseAccou
     } else {
       setIdentity(undefined);
     }
-  }, [accountInfo, api]);
+  }, [accountInfo, api, apiSystemPeople, apiIdentity]);
 
   useEffect((): void => {
     if (value) {
diff --git a/packages/react-hooks/src/useDeriveAccountInfo.ts b/packages/react-hooks/src/useDeriveAccountInfo.ts
index 44dde5a705..290f3302a1 100644
--- a/packages/react-hooks/src/useDeriveAccountInfo.ts
+++ b/packages/react-hooks/src/useDeriveAccountInfo.ts
@@ -5,13 +5,13 @@ import type { DeriveAccountInfo } from '@polkadot/api-derive/types';
 import type { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
 
 import { createNamedHook } from './createNamedHook.js';
+import { useApi } from './useApi.js';
 import { useCall } from './useCall.js';
-import { useSystemApi } from './useSystemApi.js';
 
 function useDeriveAccountInfoImpl (value?: AccountId | AccountIndex | Address | Uint8Array | string | null): DeriveAccountInfo | undefined {
-  const api = useSystemApi();
+  const { apiIdentity } = useApi();
 
-  return useCall<DeriveAccountInfo>(api?.derive.accounts.info, [value]);
+  return useCall<DeriveAccountInfo>(apiIdentity?.derive.accounts.info, [value]);
 }
 
 export const useDeriveAccountInfo = createNamedHook('useDeriveAccountInfo', useDeriveAccountInfoImpl);
diff --git a/packages/react-hooks/src/usePeopleEndpoint.ts b/packages/react-hooks/src/usePeopleEndpoint.ts
new file mode 100644
index 0000000000..16741c4e91
--- /dev/null
+++ b/packages/react-hooks/src/usePeopleEndpoint.ts
@@ -0,0 +1,23 @@
+// Copyright 2017-2024 @polkadot/react-hooks authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { LinkOption } from '@polkadot/apps-config/endpoints/types';
+
+import { useMemo } from 'react';
+
+import { createWsEndpoints } from '@polkadot/apps-config';
+import { isString } from '@polkadot/util';
+
+import { createNamedHook } from './createNamedHook.js';
+
+const endpoints = createWsEndpoints((k, v) => v?.toString() || k);
+
+export function getPeopleEndpoint (curApiInfo?: string): LinkOption | null {
+  return endpoints.find(({ info, isPeople }) => isPeople && isString(info) && isString(curApiInfo) && info.toLowerCase().includes(curApiInfo.toLowerCase())) || null;
+}
+
+function usePeopleEndpointImpl (relayInfo?: string): LinkOption | null {
+  return useMemo(() => getPeopleEndpoint(relayInfo), [relayInfo]);
+}
+
+export const usePeopleEndpoint = createNamedHook('usePeopleEndpoint', usePeopleEndpointImpl);
diff --git a/packages/react-hooks/src/useRegistrars.ts b/packages/react-hooks/src/useRegistrars.ts
index dfb6c11536..5e90a7933a 100644
--- a/packages/react-hooks/src/useRegistrars.ts
+++ b/packages/react-hooks/src/useRegistrars.ts
@@ -24,9 +24,9 @@ interface State {
 }
 
 function useRegistrarsImpl (skipQuery?: boolean): State {
-  const { api } = useApi();
+  const { apiIdentity } = useApi();
   const { allAccounts, hasAccounts } = useAccounts();
-  const query = useCall<Option<RegistrarInfo>[]>(!skipQuery && api.query.identity?.registrars);
+  const query = useCall<Option<RegistrarInfo>[]>(!skipQuery && apiIdentity.query.identity?.registrars);
 
   // determine if we have a registrar or not - registrars are allowed to approve
   return useMemo(
diff --git a/packages/react-hooks/src/useSubidentities.ts b/packages/react-hooks/src/useSubidentities.ts
index f61d029d85..1636c6cd16 100644
--- a/packages/react-hooks/src/useSubidentities.ts
+++ b/packages/react-hooks/src/useSubidentities.ts
@@ -8,9 +8,9 @@ import { useApi } from './useApi.js';
 import { useCall } from './useCall.js';
 
 function useSubidentitiesImpl (address: string): AccountId[] | undefined {
-  const { api } = useApi();
+  const { apiIdentity } = useApi();
 
-  return useCall<[BalanceOf, AccountId[]]>(api.query.identity?.subsOf, [address])?.[1];
+  return useCall<[BalanceOf, AccountId[]]>(apiIdentity.query.identity?.subsOf, [address])?.[1];
 }
 
 export const useSubidentities = createNamedHook('useSubidentities', useSubidentitiesImpl);