Enable Ledger desktop via node-hid (#6385)

* Enable Ledger desktop via node-hid

* Node?

* Pass isElectron prop

packages/apps-electron/src/index.tsx

@@ -24,6 +24,9 @@ if (!rootElement) {
 const store = new RemoteElectronStore(electronMainApi.accountStore);
 
 ReactDOM.render(
-  <Root store={store} />,
+  <Root
+    isElectron
+    store={store}
+  />,
   rootElement
 );

packages/apps-electron/webpack.main.cjs

@@ -46,6 +46,9 @@ function createWebpack () {
         new CopyWebpackPlugin({ patterns: [{ from: 'assets' }] })
       ],
       resolve: {
+        alias: {
+          '@polkadot/hw-ledger-transports': require.resolve('@polkadot/hw-ledger-transports/node')
+        },
         extensions: ['.js', '.jsx', '.json', '.mjs', '.ts', '.tsx']
       },
       target: 'electron-main'

packages/apps/src/Root.tsx

@@ -18,6 +18,7 @@ import { darkTheme, lightTheme } from './themes';
 import WindowDimensions from './WindowDimensions';
 
 interface Props {
+  isElectron: boolean;
   store?: KeyringStore;
 }
 
@@ -32,7 +33,7 @@ function createTheme ({ uiTheme }: { uiTheme: string }): ThemeDef {
     : lightTheme;
 }
 
-function Root ({ store }: Props): React.ReactElement<Props> {
+function Root ({ isElectron, store }: Props): React.ReactElement<Props> {
   const [theme, setTheme] = useState(() => createTheme(settings));
 
   useEffect((): void => {
@@ -45,6 +46,7 @@ function Root ({ store }: Props): React.ReactElement<Props> {
         <Queue>
           <Api
             apiUrl={settings.apiUrl}
+            isElectron={isElectron}
             store={store}
           >
             <BlockAuthors>

packages/apps/src/index.tsx

@@ -19,6 +19,6 @@ if (!rootElement) {
 }
 
 ReactDOM.render(
-  <Root />,
+  <Root isElectron={false} />,
   rootElement
 );

packages/page-accounts/src/CreateAccount.slow.spec.tsx

@@ -27,6 +27,7 @@ const renderAccounts = () => {
       <ThemeProvider theme={lightTheme}>
         <Api
           apiUrl={`ws://127.0.0.1:${SUBSTRATE_PORT}`}
+          isElectron={false}
           store={memoryStore}
         >
           <WaitForApi>

packages/page-bounties/src/Bounties.slow.spec.tsx

@@ -29,6 +29,7 @@ const renderBounties = () => {
         <ThemeProvider theme={lightTheme}>
           <Api
             apiUrl={`ws://127.0.0.1:${SUBSTRATE_PORT}`}
+            isElectron={false}
             store={memoryStore}
           >
             <WaitForApi>

packages/page-settings/src/General.tsx

@@ -20,11 +20,11 @@ interface Props {
   className?: string;
 }
 
-const ledgerConnOptions = settings.availableLedgerConn;
+const _ledgerConnOptions = settings.availableLedgerConn;
 
 function General ({ className = '' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { api, isApiReady } = useApi();
+  const { api, isApiReady, isElectron } = useApi();
   const { isLedgerCapable } = useLedger();
   // tri-state: null = nothing changed, false = no reload, true = reload required
   const [changed, setChanged] = useState<boolean | null>(null);
@@ -34,6 +34,11 @@ function General ({ className = '' }: Props): React.ReactElement<Props> {
     return { ...values, uiTheme: values.uiTheme === 'dark' ? 'dark' : 'light' };
   });
 
+  const ledgerConnOptions = useMemo(
+    () => _ledgerConnOptions.filter(({ value }) => !isElectron || value !== 'webusb'),
+    [isElectron]
+  );
+
   const iconOptions = useMemo(
     () => settings.availableIcons
       .map((o): Option => createIdenticon(o, ['default']))

packages/react-api/src/Api.tsx

@@ -31,6 +31,7 @@ import { decodeUrlTypes } from './urlTypes';
 interface Props {
   children: React.ReactNode;
   apiUrl: string;
+  isElectron: boolean;
   store?: KeyringStore;
 }
 
@@ -178,7 +179,7 @@ async function loadOnReady (api: ApiPromise, injectedPromise: Promise<InjectedEx
   };
 }
 
-function Api ({ apiUrl, children, store }: Props): React.ReactElement<Props> | null {
+function Api ({ apiUrl, children, isElectron, store }: Props): React.ReactElement<Props> | null {
   const { queuePayload, queueSetTxStatus } = useContext(StatusContext);
   const [state, setState] = useState<ApiState>({ hasInjectedAccounts: false, isApiReady: false } as unknown as ApiState);
   const [isApiConnected, setIsApiConnected] = useState(false);
@@ -187,8 +188,8 @@ function Api ({ apiUrl, children, store }: Props): React.ReactElement<Props> | n
   const [extensions, setExtensions] = useState<InjectedExtension[] | undefined>();
 
   const value = useMemo<ApiProps>(
-    () => ({ ...state, api, apiError, apiUrl, extensions, isApiConnected, isApiInitialized, isWaitingInjected: !extensions }),
-    [apiError, extensions, isApiConnected, isApiInitialized, state, apiUrl]
+    () => ({ ...state, api, apiError, apiUrl, extensions, isApiConnected, isApiInitialized, isElectron, isWaitingInjected: !extensions }),
+    [apiError, extensions, isApiConnected, isApiInitialized, isElectron, state, apiUrl]
   );
 
   // initial initialization

packages/react-api/src/types.ts

@@ -35,6 +35,7 @@ export interface ApiProps extends ApiState {
   extensions?: InjectedExtension[];
   isApiConnected: boolean;
   isApiInitialized: boolean;
+  isElectron: boolean;
   isWaitingInjected: boolean;
 }