Merge pull request #112 from lidofinance/feature/ledger-connector-rework

Ledger HID connector based on wagmi + adapter

apps/demo-react/components/NetworkSelector.tsx

@@ -4,6 +4,8 @@ import { useWeb3 } from 'reef-knot/web3-react';
 import { utils } from 'ethers';
 import { CHAINS } from '../config/chains';
 
+// not working properly, or not working at all
+// TODO: rework NetworkSelector or remove completely
 const NetworkSelector = () => {
   const { chainId = CHAINS.Goerli, library } = useWeb3();
 

apps/demo-react/components/ProviderWeb3WithProps.tsx

@@ -27,7 +27,9 @@ const connectors = getConnectors({
   rpc: rpcUrlsString,
   walletconnectProjectId: WC_PROJECT_ID,
   chains,
-  defaultChain: goerli,
+  defaultChain:
+    supportedChains.find((chain) => chain.id === defaultChainId) ||
+    supportedChains[0],
 });
 
 const client = createClient({

apps/demo-react/components/contractTesting/index.tsx

@@ -25,7 +25,7 @@ const ContractTesting = () => {
   const stethBalance = useSTETHBalance();
   const stethContractWeb3 = useSTETHContractWeb3();
 
-  const { chainId = 5, account } = useWeb3();
+  const { chainId = 17000, account } = useWeb3();
   const { providerWeb3 } = useSDK();
   const ethBalance = useEthereumBalance();
   const wstethBalance = useWSTETHBalance();

apps/demo-react/hooks/useWithdrawTxPrice.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useLidoSWR, useSDK } from '@lido-sdk/react';
 
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { TOKENS } from '@lido-sdk/constants';
 
 import { BigNumber } from 'ethers';

apps/demo-react/package.json

@@ -21,7 +21,6 @@
     "@lido-sdk/providers": "^1.4.13",
     "@lido-sdk/react": "^2.0.2",
     "@lidofinance/lido-ui": "^3.18.0",
-    "@reef-knot/web3-react": "^1.4.1",
     "@typechain/ethers-v5": "^11.1.0",
     "ethers": "^5.7.2",
     "flatted": "^3.2.7",

apps/demo-react/pages/index.tsx

@@ -19,7 +19,6 @@ import {
   WalletsModal,
   MainSection,
   ContractTesting,
-  NetworkSelector,
 } from '../components';
 
 import { GlobalStyle } from '../styles/global';
@@ -42,7 +41,6 @@ export function Web() {
           <MainContainer>
             <ConnectDisconnect handleOpen={handleOpen} />
             <div style={{ display: 'flex', gap: '40px' }}>
-              <NetworkSelector />
               <ThemeSelect
                 selectedTheme={selectedTheme}
                 handleSelect={setSelectedTheme as (e: OptionValue) => void}

packages/connect-wallet-modal/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @reef-knot/connect-wallet-modal
 
+## 1.16.0
+
+### Minor Changes
+
+- Use Ledger hid wallet adapter, based on wagmi
+
 ## 1.15.0
 
 ### Minor Changes

packages/connect-wallet-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/connect-wallet-modal",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -45,13 +45,13 @@
     "@types/react-dom": "18.2.17"
   },
   "devDependencies": {
-    "@reef-knot/core-react": "^1.7.0",
-    "@reef-knot/types": "^1.3.0",
+    "@reef-knot/core-react": "^1.8.0",
+    "@reef-knot/types": "^1.4.0",
     "@reef-knot/ui-react": "^1.0.7",
     "@reef-knot/wallets-helpers": "^1.1.5",
     "@reef-knot/wallets-icons": "^1.5.0",
-    "@reef-knot/web3-react": "^1.11.0",
-    "@reef-knot/ledger-connector": "^1.1.0",
+    "@reef-knot/web3-react": "^1.12.0",
+    "@reef-knot/ledger-connector": "^2.0.0",
     "@types/ua-parser-js": "^0.7.36",
     "eslint-config-custom": "*",
     "react": "18.2.0",
@@ -65,8 +65,8 @@
     "@reef-knot/ui-react": "^1.0.4",
     "@reef-knot/wallets-helpers": "^1.1.2",
     "@reef-knot/wallets-icons": "^1.0.0",
-    "@reef-knot/web3-react": "^1.3.0",
-    "@reef-knot/ledger-connector": "^1.0.1",
+    "@reef-knot/web3-react": "^1.12.0",
+    "@reef-knot/ledger-connector": "^2.0.0",
     "react": ">=18",
     "@lidofinance/lido-ui": "^3.18.0",
     "ua-parser-js": "^1.0.33",

packages/connect-wallet-modal/src/components/Ledger/LedgerAccountButton.tsx

@@ -12,6 +12,7 @@ const ButtonStyled = styled.div`
   padding: 16px 20px;
   justify-content: space-between;
   align-items: center;
+  box-sizing: border-box;
 
   margin-top: 10px;
 

packages/connect-wallet-modal/src/components/Ledger/LedgerAccountScreen.tsx

@@ -1,11 +1,12 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
 import styled from '@reef-knot/ui-react/styled-wrapper';
+import { helpers } from '@reef-knot/web3-react';
+import { useConnect } from 'wagmi';
 import { Pagination, Stack, StackItem } from '@lidofinance/lido-ui';
 import { AccountButton, AccountButtonSkeleton } from './LedgerAccountButton';
 import { useLedgerAccounts, useLedgerContext } from './hooks';
 import { getFirstIndexOnPage, saveLedgerDerivationPath } from './helpers';
 import { Metrics } from '../WalletsModal';
-import { useConnectorLedger, helpers } from '@reef-knot/web3-react';
 import { LedgerDerivationPathSelect } from './LedgerDerivationPathSelect';
 import { AccountsStorage } from './types';
 import { DERIVATION_PATHS } from './constants';
@@ -57,23 +58,29 @@ export const LedgerAccountScreen: FC<Props> = ({ metrics, closeScreen }) => {
     }
   }, [accountsForPage, accountsStorage, derivationPathTemplate]);
 
-  const onConnectLedger = metrics?.events?.connect?.handlers.onConnectLedger;
-  const { connect } = useConnectorLedger({
-    onConnect: onConnectLedger,
+  const metricsOnConnect = metrics?.events?.connect?.handlers.onConnectLedger;
+
+  const { connect, connectors } = useConnect({
+    onSuccess() {
+      metricsOnConnect?.();
+    },
   });
+  const ledgerConnector = connectors.find(
+    (connector) => connector.id === 'ledgerHID',
+  );
 
   const handleAccountButtonClick = useCallback(
     async (account) => {
       saveLedgerDerivationPath(account.path);
       await disconnectTransport(true);
       try {
-        await connect();
+        connect({ connector: ledgerConnector });
         closeScreen?.();
       } catch (e) {
         setError(helpers.interceptLedgerError(e as Error));
       }
     },
-    [closeScreen, connect, disconnectTransport, setError],
+    [closeScreen, connect, disconnectTransport, ledgerConnector, setError],
   );
 
   const handleDerivationPathSelect = useCallback((value) => {

packages/connect-wallet-modal/src/components/Ledger/LedgerContext.tsx

@@ -10,8 +10,8 @@ import React, {
 } from 'react';
 import type Transport from '@ledgerhq/hw-transport';
 import Eth from '@ledgerhq/hw-app-eth';
-import { useConnectorLedger, helpers } from '@reef-knot/web3-react';
-import { getTransport } from './helpers';
+import { helpers } from '@reef-knot/web3-react';
+import { getTransport, isHIDSupported } from './helpers';
 
 export interface LedgerContextProps {
   isActive: boolean;
@@ -40,7 +40,6 @@ export const LedgerContextProvider: FC<LedgerContextProps> = ({
   const [isTransportConnected, setIsTransportConnected] = useState(false);
   const [activeAccountsRequestsCounter, setActiveAccountsRequestsCounter] =
     useState(0);
-  const { connector } = useConnectorLedger();
 
   const disconnectTransport = useCallback(async (goingToReconnect = false) => {
     try {
@@ -59,7 +58,7 @@ export const LedgerContextProvider: FC<LedgerContextProps> = ({
     if (transport.current) return;
     setError(null);
 
-    if (!connector.isSupported()) {
+    if (!isHIDSupported()) {
       setError(
         new Error(
           "Your browser doesn't support direct connection with Ledger. Please, try another browser.",
@@ -77,7 +76,7 @@ export const LedgerContextProvider: FC<LedgerContextProps> = ({
       await disconnectTransport(true);
       setError(helpers.interceptLedgerError(e));
     }
-  }, [connector, disconnectTransport]);
+  }, [disconnectTransport]);
 
   const reconnectTransport = useCallback(async () => {
     await disconnectTransport(true);

packages/connect-wallet-modal/src/components/Ledger/helpers.ts

@@ -42,3 +42,11 @@ export const isDeviceBusy = (transport: LedgerContextValue['transport']) => {
 
 export const getFirstIndexOnPage = (page: number, accountsPerPage: number) =>
   accountsPerPage * (page - 1);
+
+export const isHIDSupported = () => {
+  try {
+    return 'hid' in window.navigator;
+  } catch (error) {
+    return false;
+  }
+};

packages/connect-wallet-modal/src/components/WalletsModalForEth/WalletsModalForEth.tsx

@@ -17,8 +17,8 @@ const walletsButtons: { [K in WalletId | string]: React.ComponentType } = {
   injected: ConnectInjected,
   walletConnect: ConnectWC,
   coinbaseWallet: ConnectCoinbase,
+  ledgerHID: ConnectLedger,
   [WALLET_IDS.METAMASK]: ConnectMetamask,
-  [WALLET_IDS.LEDGER]: ConnectLedger,
 };
 
 function getWalletButton(
@@ -59,7 +59,7 @@ function getWalletsButtons(
     addWalletTo(wallets, walletId, !!detector?.());
   });
 
-  wallets = [...wallets, WALLET_IDS.LEDGER].filter(
+  wallets = [...wallets].filter(
     // Filtering wallets marked as hidden
     (wallet) => !hiddenWallets.includes(wallet),
   );

packages/connect-wallet-modal/src/connectButtons/connectLedger.tsx → packages/connect-wallet-modal/src/connectButtons/ConnectLedger.tsx

@@ -1,20 +1,19 @@
 import React, { FC, useCallback } from 'react';
-import { Ledger, LedgerInversion } from '@reef-knot/wallets-icons/react';
-import { ConnectWalletProps } from './types';
+import { ConnectLedgerProps } from './types';
 import { ConnectButton } from '../components/ConnectButton';
 
-const ConnectLedger: FC<ConnectWalletProps> = (props) => {
+export const ConnectLedger: FC<ConnectLedgerProps> = (props) => {
   const {
     onConnect,
     onBeforeConnect,
     setRequirements,
     setLedgerScreenVisible,
     shouldInvertWalletIcon,
+    icon: WalletIcon,
     metrics,
     ...rest
   } = props;
   const onClickLedger = metrics?.events?.click?.handlers.onClickLedger;
-  const WalletIcon = shouldInvertWalletIcon ? LedgerInversion : Ledger;
 
   const handleConnect = useCallback(() => {
     onBeforeConnect?.();
@@ -24,10 +23,13 @@ const ConnectLedger: FC<ConnectWalletProps> = (props) => {
   }, [onBeforeConnect, onClickLedger, setLedgerScreenVisible]);
 
   return (
-    <ConnectButton {...rest} icon={WalletIcon} onClick={handleConnect}>
+    <ConnectButton
+      {...rest}
+      icon={WalletIcon}
+      shouldInvertWalletIcon={shouldInvertWalletIcon}
+      onClick={handleConnect}
+    >
       Ledger
     </ConnectButton>
   );
 };
-
-export default ConnectLedger;

packages/connect-wallet-modal/src/connectButtons/index.ts

@@ -1,4 +1,4 @@
-export { default as ConnectLedger } from './connectLedger';
+export * from './ConnectLedger';
 export { default as ConnectMetamask } from './connectMetamask';
 export * from './ConnectInjected';
 export * from './ConnectWC';

packages/connect-wallet-modal/src/connectButtons/types.ts

@@ -11,3 +11,4 @@ export type ConnectWalletProps = ButtonsCommonProps & ButtonProps;
 
 export type ConnectInjectedProps = WalletAdapterData & ConnectWalletProps;
 export type ConnectWCProps = WalletAdapterData & ConnectWalletProps;
+export type ConnectLedgerProps = WalletAdapterData & ConnectWalletProps;

packages/connect-wallet-modal/src/constants/wallets.ts

@@ -1,6 +1,5 @@
 export const WALLET_IDS = {
   METAMASK: 'Metamask',
-  LEDGER: 'Ledger',
   COINBASE: 'Coinbase',
 } as const;
 

packages/connectors/ledger-connector/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @reef-knot/ledger-connector
 
+## 2.0.0
+
+### Major Changes
+
+- Rework: use wagmi for hid connector instead of web3-react
+
 ## 1.1.1
 
 ### Patch Changes

packages/connectors/ledger-connector/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/ledger-connector",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -33,6 +33,7 @@
   },
   "devDependencies": {
     "@types/w3c-web-hid": "^1.0.2",
+    "wagmi": "^0.12.19",
     "eslint-config-custom": "*"
   },
   "dependencies": {
@@ -44,12 +45,15 @@
     "@ethersproject/strings": "^5.5.0",
     "@ethersproject/transactions": "^5.5.0",
     "@ethersproject/hash": "^5.5.0",
-    "@ledgerhq/hw-app-eth": "^6.34.8",
-    "@ledgerhq/hw-transport": "^6.28.8",
-    "@ledgerhq/hw-transport-webhid": "^6.27.19",
-    "@ledgerhq/iframe-provider": "0",
+    "@ledgerhq/hw-app-eth": "^6.35.0",
+    "@ledgerhq/hw-transport": "^6.30.0",
+    "@ledgerhq/hw-transport-webhid": "^6.28.0",
+    "@ledgerhq/iframe-provider": "^0.4.3",
     "@web3-react/abstract-connector": "^6.0.7",
     "@web3-react/types": "^6.0.7",
     "tiny-invariant": "^1.2.0"
+  },
+  "peerDependencies": {
+    "wagmi": "^0.12.19"
   }
 }