Merge branch 'main' into feature/si-1594-ledger-hid-connection-via-lo…

…w-speed-internet
lidofinance · Nov 28, 2024 · ce015ef · ce015ef
2 parents 4a389fe + 8c4e92a
commit ce015ef
Show file tree

Hide file tree

Showing 86 changed files with 811 additions and 580 deletions.
diff --git a/apps/demo-react/components/wallet-info/chains-config.tsx b/apps/demo-react/components/wallet-info/chains-config.tsx
@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import { useClientConfig } from 'providers/client-config';
+import {
+  HeadingStyle,
+  DataTableRowAction,
+  DataTableRowInput,
+  DataTableRowStyle,
+} from './styles';
+import { useRpcUrls } from 'hooks/useRpcUrls';
+
+export const ChainsConfig = () => {
+  const { defaultChain, supportedChainIds, setSavedClientConfig } =
+    useClientConfig();
+
+  const rpcUrls = useRpcUrls();
+
+  const onChangeDefaultChain = useCallback(
+    (chainId: number) => {
+      setSavedClientConfig({ defaultChain: chainId });
+    },
+    [setSavedClientConfig],
+  );
+
+  return (
+    <>
+      <HeadingStyle>Chains config:</HeadingStyle>
+      <div>
+        <code>
+          {supportedChainIds.map((chainId) => (
+            <DataTableRowStyle
+              key={chainId}
+              highlight
+              title={
+                <>
+                  {chainId}
+                  {chainId === defaultChain ? <i> (default 🛎️)</i> : ''}
+                </>
+              }
+            >
+              <DataTableRowInput
+                value={rpcUrls[chainId]}
+                variant="small"
+                readOnly
+                disabled
+              />
+              <DataTableRowAction
+                onClick={() => onChangeDefaultChain(chainId)}
+                variant={chainId === defaultChain ? 'filled' : 'translucent'}
+              >
+                🛎️
+              </DataTableRowAction>
+            </DataTableRowStyle>
+          ))}
+        </code>
+      </div>
+    </>
+  );
+};
diff --git a/apps/demo-react/components/wallet-info/styles.tsx b/apps/demo-react/components/wallet-info/styles.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { DataTableRow, ButtonIcon } from '@lidofinance/lido-ui';
+import { DataTableRow, ButtonIcon, Button, Input } from '@lidofinance/lido-ui';
 
 export const ContainerStyle = styled.div`
   position: fixed;
@@ -40,6 +40,31 @@ export const HeadingStyle = styled.h4`
 
 export const DataTableRowStyle = styled(DataTableRow)`
   margin: 4px 0;
+  align-items: center;
+`;
+
+export const DataTableRowInput = styled(Input)`
+  width: 220px;
+
+  > span {
+    padding: 4px 10px;
+  }
+
+  input {
+    font-size: 12px;
+  }
+`;
+
+export const DataTableRowAction = styled(Button).attrs({
+  size: 'xs',
+})`
+  padding: 0;
+  min-width: auto;
+  margin-left: 6px;
+  border: none;
+  width: 26px;
+  height: 26px;
+  cursor: pointer;
 `;
 
 export const ProviderInfoRowStyle = styled(DataTableRowStyle)`

diff --git a/apps/demo-react/components/wallet-info/wallet-info-content.tsx b/apps/demo-react/components/wallet-info/wallet-info-content.tsx
@@ -12,6 +12,7 @@ import {
 } from './styles';
 import { Web3ProviderInfo } from './provider-info';
 import { useClientConfig } from 'providers/client-config';
+import { ChainsConfig } from './chains-config';
 
 export const WalletInfoContent = ({
   children,
@@ -97,6 +98,8 @@ export const WalletInfoContent = ({
         </code>
       </div>
 
+      <ChainsConfig />
+
       {children}
     </div>
   );

diff --git a/apps/demo-react/components/walletModal/walletModal.tsx b/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}

diff --git a/apps/demo-react/config/rpc.ts b/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),
-};
diff --git a/apps/demo-react/env-dynamics.mjs b/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;

diff --git a/apps/demo-react/hooks/useRpcUrls.ts b/apps/demo-react/hooks/useRpcUrls.ts
@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { CHAINS } from '@lido-sdk/constants';
+import { useClientConfig } from 'providers/client-config';
+import { getBackendRPCPath } from 'config';
+
+export const useRpcUrls = (): Record<number, string> => {
+  const { supportedChainIds } = useClientConfig();
+
+  const backendRPC: Record<number, string> = useMemo(
+    () =>
+      supportedChainIds.reduce(
+        (res, curr) => ({ ...res, [curr]: getBackendRPCPath(curr) }),
+        {
+          // Mainnet RPC is always required for some requests, e.g. ETH to USD price, ENS lookup
+          [CHAINS.Mainnet]: getBackendRPCPath(CHAINS.Mainnet),
+        },
+      ),
+    [supportedChainIds],
+  );
+
+  return backendRPC;
+};
diff --git a/apps/demo-react/hooks/useToken.ts b/apps/demo-react/hooks/useToken.ts
diff --git a/apps/demo-react/package.json b/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",

diff --git a/apps/demo-react/providers/client-config.tsx b/apps/demo-react/providers/client-config.tsx
@@ -17,17 +17,18 @@ import { CHAINS } from 'config/chains';
 import { parseEnvConfig } from 'utils/parse-env-config';
 
 type SavedClientConfig = {
+  defaultChain?: number;
   rpcUrls: Partial<Record<CHAINS, string>>;
 };
 
-type ClientConfigContext = EnvConfigParsed & {
-  savedClientConfig: SavedClientConfig;
-  setSavedClientConfig: (config: SavedClientConfig) => void;
-  isWalletConnectionAllowed: boolean;
-  setIsWalletConnectionAllowed: (isAllowed: boolean) => void;
-  setIsWalletInfoIsOpen: (isOpen: boolean) => void;
-  isWalletInfoIsOpen: boolean;
-};
+type ClientConfigContext = EnvConfigParsed &
+  SavedClientConfig & {
+    setSavedClientConfig: (config: Partial<SavedClientConfig>) => void;
+    isWalletConnectionAllowed: boolean;
+    setIsWalletConnectionAllowed: (isAllowed: boolean) => void;
+    setIsWalletInfoIsOpen: (isOpen: boolean) => void;
+    isWalletInfoIsOpen: boolean;
+  };
 
 export const ClientConfigContext = createContext<ClientConfigContext | null>(
   null,
@@ -56,19 +57,34 @@ export const ClientConfigProvider = ({ children }: PropsWithChildren) => {
     useState<SavedClientConfig>(restoredSettings);
 
   const setSavedConfigAndRemember = useCallback(
-    (config: SavedClientConfig) => {
-      setLocalStorage(config);
-      setSavedClientConfig(config);
+    (config: Partial<SavedClientConfig>) => {
+      const fullConfig = {
+        ...restoredSettings,
+        ...config,
+      };
+      setLocalStorage(fullConfig);
+      setSavedClientConfig(fullConfig);
     },
-    [setLocalStorage],
+    [restoredSettings, setLocalStorage, setSavedClientConfig],
   );
 
   const contextValue = useMemo(() => {
     const envConfig = parseEnvConfig(dynamics);
 
-    return {
+    const config = {
       ...envConfig,
-      savedClientConfig,
+      ...savedClientConfig,
+    };
+
+    const supportedChainIds = config.supportedChainIds.includes(
+      config.defaultChain,
+    )
+      ? config.supportedChainIds
+      : [...config.supportedChainIds, config.defaultChain];
+
+    return {
+      ...config,
+      supportedChainIds,
       setSavedClientConfig: setSavedConfigAndRemember,
       isWalletConnectionAllowed,
       setIsWalletConnectionAllowed,