Polkadot API (PAPI) Integration PR

packages/app/package.json

@@ -52,6 +52,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "plugin-staking-api": "workspace:*",
+    "polkadot-api": "^1.7.3",
     "qrcode-generator": "1.4.4",
     "rc-slider": "^11.1.6",
     "react": "^18.3.1",
@@ -62,6 +63,7 @@
     "react-i18next": "^15.0.2",
     "react-router-dom": "^6.23.1",
     "react-scroll": "^1.9.0",
+    "rxjs": "^7.8.1",
     "styled-components": "^6.1.13",
     "styles": "workspace:*",
     "ui-buttons": "workspace:*",

packages/app/src/config/networks.ts

@@ -17,7 +17,8 @@ export const NetworkList: Networks = {
   polkadot: {
     name: 'polkadot',
     endpoints: {
-      lightClient: 'polkadot',
+      lightClientKey: 'polkadot',
+      lightClient: async () => await import('polkadot-api/chains/polkadot'),
       defaultRpcEndpoint: 'IBP-GeoDNS1',
       rpcEndpoints: {
         'Automata 1RPC': 'wss://1rpc.io/dot',
@@ -72,7 +73,8 @@ export const NetworkList: Networks = {
   kusama: {
     name: 'kusama',
     endpoints: {
-      lightClient: 'ksmcc3',
+      lightClientKey: 'ksmcc3',
+      lightClient: async () => await import('polkadot-api/chains/ksmcc3'),
       defaultRpcEndpoint: 'IBP-GeoDNS1',
       rpcEndpoints: {
         'Automata 1RPC': 'wss://1rpc.io/ksm',
@@ -127,7 +129,8 @@ export const NetworkList: Networks = {
   westend: {
     name: 'westend',
     endpoints: {
-      lightClient: 'westend2',
+      lightClientKey: 'westend2',
+      lightClient: async () => await import('polkadot-api/chains/westend2'),
       defaultRpcEndpoint: 'IBP-GeoDNS1',
       rpcEndpoints: {
         Dwellir: 'wss://westend-rpc.dwellir.com',
@@ -187,34 +190,43 @@ export const SystemChainList: Record<string, SystemChain> = {
     units: 10,
     unit: 'DOT',
     endpoints: {
-      lightClient: 'polkadot_people',
+      lightClientKey: 'polkadot_people',
+      lightClient: async () =>
+        await import('polkadot-api/chains/polkadot_people'),
       rpcEndpoints: {
         Parity: 'wss://polkadot-people-rpc.polkadot.io',
       },
     },
+    relayChain: 'polkadot',
   },
   'people-kusama': {
     name: 'people-kusama',
     ss58: 2,
     units: 12,
     unit: 'KSM',
     endpoints: {
-      lightClient: 'kusama_people',
+      lightClientKey: 'ksmcc3_people',
+      lightClient: async () =>
+        await import('polkadot-api/chains/ksmcc3_people'),
       rpcEndpoints: {
         Parity: 'wss://kusama-people-rpc.polkadot.io',
       },
     },
+    relayChain: 'kusama',
   },
   'people-westend': {
     name: 'people-westend',
     ss58: 42,
     units: 12,
     unit: 'WND',
     endpoints: {
-      lightClient: 'westend_people',
+      lightClientKey: 'westend2_people',
+      lightClient: async () =>
+        await import('polkadot-api/chains/westend2_people'),
       rpcEndpoints: {
         Parity: 'wss://westend-people-rpc.polkadot.io',
       },
     },
+    relayChain: 'westend',
   },
 };

packages/app/src/config/util.ts

@@ -0,0 +1,45 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import type { ApiChainType } from 'model/Api/types';
+import type { AnyApi, NetworkName, SystemChainId } from 'types';
+import { NetworkList, SystemChainList } from './networks';
+
+// Get the light client metadata for the given chain type and network.
+export const getLightClientMetadata = (
+  chainType: ApiChainType,
+  network: NetworkName | SystemChainId
+): {
+  chain: {
+    key: string;
+    fn: () => Promise<AnyApi>;
+  };
+  relay?: {
+    key: string;
+    fn: () => Promise<AnyApi>;
+  };
+} => {
+  if (chainType === 'relay') {
+    return {
+      chain: {
+        key: NetworkList[network].endpoints.lightClientKey,
+        fn: NetworkList[network].endpoints.lightClient,
+      },
+    };
+  }
+
+  const { relayChain } = SystemChainList[network];
+  const relay = NetworkList[relayChain];
+  const system = SystemChainList[network];
+
+  return {
+    relay: {
+      key: relay.endpoints.lightClientKey,
+      fn: relay.endpoints.lightClient,
+    },
+    chain: {
+      key: system.endpoints.lightClientKey,
+      fn: system.endpoints.lightClient,
+    },
+  };
+};

packages/app/src/contexts/Api/defaults.ts

@@ -6,22 +6,14 @@ import { stringToU8a } from '@polkadot/util';
 import BigNumber from 'bignumber.js';
 import type {
   APIActiveEra,
-  APIChainState,
   APIConstants,
   APIContextInterface,
   APINetworkMetrics,
   APIPoolsConfig,
   APIStakingMetrics,
+  PapiChainSpecContext,
 } from 'contexts/Api/types';
 
-export const defaultChainState: APIChainState = {
-  chain: null,
-  version: {
-    specVersion: 0,
-  },
-  ss58Prefix: 0,
-};
-
 export const defaultConsts: APIConstants = {
   bondDuration: new BigNumber(0),
   maxNominations: new BigNumber(0),
@@ -43,6 +35,21 @@ export const defaultNetworkMetrics: APINetworkMetrics = {
   minimumActiveStake: new BigNumber(0),
 };
 
+export const defaultChainSpecs: PapiChainSpecContext = {
+  genesisHash: '',
+  ss58Format: 0,
+  tokenDecimals: 0,
+  tokenSymbol: '',
+  received: false,
+  authoringVersion: 0,
+  implName: '',
+  implVersion: 0,
+  specName: '',
+  specVersion: 0,
+  stateVersion: 0,
+  transactionVersion: 0,
+};
+
 export const defaultActiveEra: APIActiveEra = {
   index: new BigNumber(0),
   start: new BigNumber(0),
@@ -62,7 +69,6 @@ export const defaultPoolsConfig: APIPoolsConfig = {
 };
 
 export const defaultStakingMetrics: APIStakingMetrics = {
-  totalNominators: new BigNumber(0),
   totalValidators: new BigNumber(0),
   lastReward: new BigNumber(0),
   lastTotalStake: new BigNumber(0),
@@ -76,7 +82,7 @@ export const defaultStakingMetrics: APIStakingMetrics = {
 export const defaultApiContext: APIContextInterface = {
   api: null,
   peopleApi: null,
-  chainState: defaultChainState,
+  chainSpecs: defaultChainSpecs,
   isReady: false,
   apiStatus: 'disconnected',
   peopleApiStatus: 'disconnected',