refactor: Ledger support improvements + bug fixes

package.json

@@ -25,9 +25,9 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@ledgerhq/hw-transport-webhid": "^6.27.19",
-    "@polkadot-cloud/assets": "0.1.34",
-    "@polkadot-cloud/core": "^1.0.34",
-    "@polkadot-cloud/react": "^0.1.108",
+    "@polkadot-cloud/assets": "^0.1.34",
+    "@polkadot-cloud/core": "^1.0.42",
+    "@polkadot-cloud/react": "^0.1.118",
     "@polkadot-cloud/utils": "^0.0.25",
     "@polkadot/api": "^10.10.1",
     "@polkadot/keyring": "^12.1.1",

src/Providers.tsx

@@ -11,7 +11,7 @@ import {
 import { ExtrinsicsProvider } from 'contexts/Extrinsics';
 import { FastUnstakeProvider } from 'contexts/FastUnstake';
 import { FiltersProvider } from 'contexts/Filters';
-import { LedgerHardwareProvider } from 'contexts/Hardware/Ledger';
+import { LedgerHardwareProvider } from 'contexts/Hardware/Ledger/LedgerHardware';
 import { VaultHardwareProvider } from 'contexts/Hardware/Vault';
 import { HelpProvider } from 'contexts/Help';
 import { IdentitiesProvider } from 'contexts/Identities';
@@ -49,6 +49,7 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { DappName } from 'consts';
 import { ImportedAccountsProvider } from 'contexts/Connect/ImportedAccounts';
 import { PoolPerformanceProvider } from 'contexts/Pools/PoolPerformance';
+import { LedgerAccountsProvider } from 'contexts/Hardware/Ledger/LedgerAccounts';
 
 // Embed providers from hook.
 export const Providers = () => {
@@ -72,6 +73,7 @@ export const Providers = () => {
       { dappName: DappName, network, ss58, activeAccount, setActiveAccount },
     ],
     OtherAccountsProvider,
+    LedgerAccountsProvider,
     ImportedAccountsProvider,
     HelpProvider,
     NetworkMetricsProvider,

src/config/ledger.ts

@@ -1,7 +1,7 @@
 // Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import type { LedgerApp } from 'contexts/Hardware/types';
+import type { LedgerApp } from 'contexts/Hardware/Ledger/types';
 import KusamaSVG from 'img/appIcons/kusama.svg?react';
 import PolkadotSVG from 'img/appIcons/polkadot.svg?react';
 

src/contexts/Api/defaults.ts

@@ -4,9 +4,13 @@
 
 import { stringToU8a } from '@polkadot/util';
 import BigNumber from 'bignumber.js';
-import type { APIConstants, APIContextInterface } from 'contexts/Api/types';
+import type {
+  APIChainState,
+  APIConstants,
+  APIContextInterface,
+} from 'contexts/Api/types';
 
-export const consts: APIConstants = {
+export const defaultConsts: APIConstants = {
   bondDuration: new BigNumber(0),
   maxNominations: new BigNumber(0),
   sessionsPerEra: new BigNumber(0),
@@ -20,10 +24,18 @@ export const consts: APIConstants = {
   poolsPalletId: stringToU8a('0'),
 };
 
+export const defaultChainState: APIChainState = {
+  chain: null,
+  version: {
+    specVersion: 0,
+  },
+  ss58Prefix: 0,
+};
+
 export const defaultApiContext: APIContextInterface = {
   api: null,
-  consts,
-  chainState: undefined,
+  consts: defaultConsts,
+  chainState: defaultChainState,
   isReady: false,
   apiStatus: 'disconnected',
   isLightClient: false,

src/contexts/Api/index.tsx

@@ -25,7 +25,11 @@ import type {
 } from 'contexts/Api/types';
 import type { AnyApi } from 'types';
 import { useEffectIgnoreInitial } from '@polkadot-cloud/react/hooks';
-import * as defaults from './defaults';
+import {
+  defaultApiContext,
+  defaultChainState,
+  defaultConsts,
+} from './defaults';
 
 export const APIProvider = ({ children, network }: APIProviderProps) => {
   // Store povider instance.
@@ -34,7 +38,8 @@ export const APIProvider = ({ children, network }: APIProviderProps) => {
   );
 
   // Store chain state.
-  const [chainState, setchainState] = useState<APIChainState>(undefined);
+  const [chainState, setchainState] =
+    useState<APIChainState>(defaultChainState);
 
   // Store the active RPC provider.
   const initialRpcEndpoint = () => {
@@ -61,7 +66,7 @@ export const APIProvider = ({ children, network }: APIProviderProps) => {
   const [api, setApi] = useState<ApiPromise | null>(null);
 
   // Store network constants.
-  const [consts, setConsts] = useState<APIConstants>(defaults.consts);
+  const [consts, setConsts] = useState<APIConstants>(defaultConsts);
 
   // Store API connection status.
   const [apiStatus, setApiStatus] = useState<ApiStatus>('disconnected');
@@ -88,8 +93,8 @@ export const APIProvider = ({ children, network }: APIProviderProps) => {
 
   const handleApiSwitch = () => {
     setApi(null);
-    setConsts(defaults.consts);
-    setchainState(undefined);
+    setConsts(defaultConsts);
+    setchainState(defaultChainState);
   };
 
   // Handle connect to API.
@@ -134,22 +139,17 @@ export const APIProvider = ({ children, network }: APIProviderProps) => {
 
     const newChainState = await Promise.all([
       newApi.rpc.system.chain(),
-      newApi.rpc.system.version(),
+      newApi.consts.system.version,
       newApi.consts.system.ss58Prefix,
     ]);
 
     // check that chain values have been fetched before committing to state.
     // could be expanded to check supported chains.
-    if (
-      newChainState.every((c) => {
-        return !!c?.toHuman();
-      })
-    ) {
+    if (newChainState.every((c) => !!c?.toHuman())) {
       const chain = newChainState[0]?.toString();
-      const version = newChainState[1]?.toString();
+      const version = newChainState[1]?.toJSON();
       const ss58Prefix = Number(newChainState[2]?.toString());
 
-      // set fetched chain state in storage.
       setchainState({ chain, version, ss58Prefix });
     }
 
@@ -301,8 +301,6 @@ export const APIProvider = ({ children, network }: APIProviderProps) => {
   );
 };
 
-export const APIContext = createContext<APIContextInterface>(
-  defaults.defaultApiContext
-);
+export const APIContext = createContext<APIContextInterface>(defaultApiContext);
 
 export const useApi = () => useContext(APIContext);

src/contexts/Api/types.ts

@@ -5,7 +5,7 @@ import type { ApiPromise } from '@polkadot/api';
 import type { U8aLike } from '@polkadot/util/types';
 import type BigNumber from 'bignumber.js';
 import type { ReactNode } from 'react';
-import type { Network, NetworkName } from '../../types';
+import type { AnyJson, Network, NetworkName } from '../../types';
 
 export type ApiStatus = 'connecting' | 'connected' | 'disconnected';
 
@@ -32,13 +32,11 @@ export interface APIConstants {
   poolsPalletId: U8aLike;
 }
 
-export type APIChainState =
-  | {
-      chain: string;
-      version: string;
-      ss58Prefix: number;
-    }
-  | undefined;
+export type APIChainState = {
+  chain: string | null;
+  version: AnyJson;
+  ss58Prefix: number;
+};
 
 export interface APIContextInterface {
   api: ApiPromise | null;