Merge pull request #191 from lidofinance/feature/si-1640-update-llhar…

…dware-ledger-connector

Update ledger connector to support chain change

apps/demo-react/components/walletModal/walletModal.tsx

@@ -6,9 +6,10 @@ import {
   Identicon,
   External,
   Copy,
+  Select,
+  Option,
 } from '@lidofinance/lido-ui';
-import { useEtherscanOpen } from '@lido-sdk/react';
-import { useWeb3 } from 'reef-knot/web3-react';
+
 import { useForceDisconnect, useConnectorInfo } from 'reef-knot/core-react';
 import { useCopyToClipboard } from 'hooks/useCopyToClipboard';
 import { FC, useCallback } from 'react';
@@ -21,20 +22,35 @@ import {
   WalletModalAddressStyle,
   WalletModalActionsStyle,
 } from './walletModalStyles';
+import { usePublicClient } from 'wagmi';
+import { useAccount } from 'wagmi';
+import { useChainId } from 'wagmi';
+import { useSwitchChain } from 'wagmi';
+import { useConnections } from 'wagmi';
 
 const WalletModal: FC<ModalProps> = (props) => {
   const { onClose } = props;
-  const { account } = useWeb3();
+  const chainId = useChainId();
+  const [connection] = useConnections();
+  const { chains, switchChain } = useSwitchChain();
+  const { address } = useAccount();
+  const client = usePublicClient();
   const { connectorName } = useConnectorInfo();
   const { forceDisconnect } = useForceDisconnect();
   const handleDisconnect = useCallback(() => {
     forceDisconnect?.();
     onClose?.();
   }, [onClose, forceDisconnect]);
 
-  const handleCopy = useCopyToClipboard(account ?? '');
-  const handleEtherscan = useEtherscanOpen(account ?? '', 'address');
+  const handleCopy = useCopyToClipboard(address ?? '');
 
+  const handleEtherscan = () => {
+    if (address && client) {
+      window.open(
+        `${client.chain.blockExplorers?.default.url}/address/${address}`,
+      );
+    }
+  };
   return (
     <Modal title="Account" {...props}>
       <WalletModalContentStyle>
@@ -57,12 +73,29 @@ const WalletModal: FC<ModalProps> = (props) => {
         </WalletModalConnectedStyle>
 
         <WalletModalAccountStyle>
-          <Identicon address={account ?? ''} />
+          <Identicon address={address ?? ''} />
           <WalletModalAddressStyle>
-            <Address address={account ?? ''} symbols={6} />
+            <Address address={address ?? ''} symbols={6} />
           </WalletModalAddressStyle>
         </WalletModalAccountStyle>
 
+        <WalletModalAccountStyle>
+          <Select
+            value={chainId}
+            disabled={!connection?.connector.switchChain}
+            onChange={(newChain) => {
+              switchChain({ chainId: Number(newChain) });
+            }}
+            fullwidth
+          >
+            {chains.map((chain) => (
+              <Option key={chain.id} value={chain.id}>
+                {chain.name}
+              </Option>
+            ))}
+          </Select>
+        </WalletModalAccountStyle>
+
         <WalletModalActionsStyle>
           <ButtonIcon
             onClick={handleCopy}

apps/demo-react/config/rpc.ts

@@ -1,11 +1,6 @@
-import { mainnet, holesky, Chain } from 'wagmi/chains';
+import { Chain } from 'wagmi/chains';
 import dynamics from './dynamics';
 
 export const getBackendRPCPath = (chainId: Chain['id']) => {
   return dynamics.rpcProviderUrls[chainId];
 };
-
-export const backendRPC = {
-  [mainnet.id]: getBackendRPCPath(mainnet.id),
-  [holesky.id]: getBackendRPCPath(holesky.id),
-};

apps/demo-react/env-dynamics.mjs

@@ -2,6 +2,9 @@
 export const rpcProviderUrls = {
   1: process.env[`RPC_PROVIDER_URL_1`],
   17000: process.env[`RPC_PROVIDER_URL_17000`],
+  11155111: process.env[`RPC_PROVIDER_URL_11155111`],
+  10: process.env[`RPC_PROVIDER_URL_10`],
+  11155420: process.env[`RPC_PROVIDER_URL_11155420`],
 };
 /** @type number */
 export const defaultChain = parseInt(process.env.DEFAULT_CHAIN, 10) || 17000;

apps/demo-react/package.json

@@ -15,9 +15,8 @@
     "@ethersproject/constants": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@lido-sdk/constants": "^3.2.1",
-    "@lido-sdk/providers": "^1.4.14",
     "@lido-sdk/react": "2.0.2",
-    "@lidofinance/lido-ethereum-sdk": "4.0.0",
+    "@lidofinance/lido-ethereum-sdk": "^4.0.0",
     "@lidofinance/lido-ui": "^3.18.0",
     "@svgr/webpack": "^8.0.1",
     "@tanstack/react-query": "^5.29.0",

apps/demo-react/providers/sdk.tsx

@@ -1,11 +1,21 @@
-import { createContext, useMemo, PropsWithChildren, useContext } from 'react';
-import { useSDK } from '@lido-sdk/react';
-
-import { createWalletClient, custom } from 'viem';
+import {
+  createContext,
+  useMemo,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+} from 'react';
 
 import { LidoSDK } from '@lidofinance/lido-ethereum-sdk';
 import invariant from 'tiny-invariant';
-import { getBackendRPCPath } from 'config';
+import {
+  useWalletClient,
+  usePublicClient,
+  useAccount,
+  useConfig,
+  useSwitchChain,
+} from 'wagmi';
+import { useClientConfig } from './client-config';
 
 const context = createContext<LidoSDK | null>(null);
 
@@ -16,25 +26,42 @@ export const useLidoSDK = () => {
 };
 
 export const LidoSDKProvider: React.FC<PropsWithChildren> = ({ children }) => {
-  const { providerWeb3, chainId, account } = useSDK();
-  const value = useMemo(() => {
-    const client =
-      providerWeb3 && account
-        ? createWalletClient({
-            transport: custom(providerWeb3.provider as any),
-          })
-        : undefined;
+  const { defaultChain: defaultChainId } = useClientConfig();
+  const { data: walletClient } = useWalletClient();
+  const publicClient = usePublicClient();
+  // reset internal wagmi state after disconnect
+  const { isConnected } = useAccount();
+
+  const wagmiConfig = useConfig();
+  const { switchChain } = useSwitchChain();
 
+  useEffect(() => {
+    if (isConnected) {
+      return () => {
+        // protecs from side effect double run
+        if (!wagmiConfig.state.current) {
+          switchChain({
+            chainId: defaultChainId,
+          });
+        }
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isConnected]);
+
+  const contextValue = useMemo(() => {
+    // @ts-expect-error: typing (viem + LidoSDK)
     const sdk = new LidoSDK({
-      chainId: chainId as any,
-      rpcUrls: [getBackendRPCPath(chainId)],
-      web3Provider: client as any,
+      chainId: publicClient!.chain.id,
       logMode: 'none',
+      rpcProvider: publicClient,
+      web3Provider: walletClient,
     });
     // inject lido_sdk for console access
     if (typeof window !== 'undefined') (window as any).lido_sdk = sdk;
+
     return sdk;
-  }, [providerWeb3, chainId, account]);
+  }, [publicClient, walletClient]);
 
-  return <context.Provider value={value}>{children}</context.Provider>;
+  return <context.Provider value={contextValue}>{children}</context.Provider>;
 };

apps/demo-react/providers/web3.tsx

@@ -15,7 +15,6 @@ import {
 import metrics from 'utils/metrics';
 import { getBackendRPCPath } from 'config';
 import { useClientConfig } from 'providers/client-config';
-import { SDKLegacyProvider } from './sdk-legacy';
 
 const LINK_DONT_HAVE_WALLET =
   'https://support.metamask.io/hc/en-us/articles/360015489531-Getting-started-with-MetaMask';
@@ -110,13 +109,7 @@ const Web3Provider: FC<PropsWithChildren> = ({ children }) => {
             config={walletsModalConfig}
             darkThemeEnabled={themeName === 'dark'}
           />
-          <SDKLegacyProvider
-            defaultChainId={defaultChain.id}
-            supportedChains={supportedChains}
-            rpc={backendRPC}
-          >
-            {children}
-          </SDKLegacyProvider>
+          {children}
         </ReefKnotProvider>
       </QueryClientProvider>
     </WagmiProvider>

packages/connectors/ledger-connector/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @reef-knot/ledger-connector
 
+## 4.2.0
+
+### Minor Changes
+
+- add chainChange to ledger hardware connector
+
 ## 4.1.4
 
 ### Patch Changes

packages/connectors/ledger-connector/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/ledger-connector",
-  "version": "4.1.4",
+  "version": "4.2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {