Merge pull request #198 from lidofinance/feature/si-1624-add-defaultc…

…hain-changing-on-the-reef-knot-demo-page

Add default chain changing to demo page

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>
+    </>
+  );
+};

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)`

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>
   );

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;
+};

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,

apps/demo-react/providers/sdk.tsx

@@ -52,14 +52,13 @@ export const LidoSDKProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const contextValue = useMemo(() => {
     // @ts-expect-error: typing (viem + LidoSDK)
     const sdk = new LidoSDK({
-      chainId: publicClient!.chain.id,
+      chainId: publicClient?.chain.id as any,
       logMode: 'none',
       rpcProvider: publicClient,
       web3Provider: walletClient,
     });
     // inject lido_sdk for console access
     if (typeof window !== 'undefined') (window as any).lido_sdk = sdk;
-
     return sdk;
   }, [publicClient, walletClient]);
 

apps/demo-react/providers/web3.tsx

@@ -5,16 +5,15 @@ import { WalletsListEthereum } from 'reef-knot/wallets';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { WagmiProvider, http } from 'wagmi';
 import * as wagmiChains from 'wagmi/chains';
-import { CHAINS } from '@lido-sdk/constants';
 import type { Transport } from 'viem';
 import {
   ReefKnotWalletsModal,
   getDefaultWalletsModalConfig,
 } from 'reef-knot/connect-wallet-modal';
 
 import metrics from 'utils/metrics';
-import { getBackendRPCPath } from 'config';
 import { useClientConfig } from 'providers/client-config';
+import { useRpcUrls } from 'hooks/useRpcUrls';
 
 const LINK_DONT_HAVE_WALLET =
   'https://support.metamask.io/hc/en-us/articles/360015489531-Getting-started-with-MetaMask';
@@ -49,17 +48,7 @@ const Web3Provider: FC<PropsWithChildren> = ({ children }) => {
     };
   }, [defaultChainId, supportedChainIds]);
 
-  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],
-  );
+  const backendRPC = useRpcUrls();
 
   const transports = useMemo(() => {
     return supportedChains.reduce<Record<number, Transport>>(