feat: refactor wallet & network, add network switch detect, some ui

src/refactor/base-provider.tsx

@@ -53,5 +53,6 @@ export const MasaBaseProvider = ({
   );
 };
 
-export const useConfig = (): MasaReactConfigBaseProvider => useContext(MasaBaseContext);
+export const useConfig = (): MasaReactConfigBaseProvider =>
+  useContext(MasaBaseContext);
 export default MasaBaseProvider;

src/refactor/masanew.stories.tsx

@@ -1,10 +1,13 @@
 import type { Args, Meta } from '@storybook/react';
+import type { Chain } from 'wagmi';
 import React from 'react';
 import { Button } from './ui';
 import './ui/styles.scss';
 import { useConfig } from './base-provider';
 import MasaProvider from './masa-provider';
-import { useWalletClient } from './wallet-client/wallet-client-provider';
+// import { useWalletClient } from './wallet-client/wallet-client-provider';
+import { useWallet } from './wallet-client/wallet/use-wallet';
+import { useNetwork } from './wallet-client/network/use-network';
 
 const meta: Meta = {
   title: 'Refactor Test',
@@ -20,44 +23,135 @@ const meta: Meta = {
 
 export default meta;
 
-const Component = ({ name }: { name?: string }): JSX.Element => {
-  const { openConnectModal, address, connector, isConnected } =
-    useWalletClient();
-  const config = useConfig();
+const NetworkInfo = () => {
+  const {
+    switchNetwork,
+    switchingToChain,
+    canProgramaticallySwitchNetwork,
+    activeChain,
+    isSwitchingChain,
+    chains,
+    isActiveChainUnsupported,
+  } = useNetwork();
   return (
-    <section
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <h1>{name}</h1>
-      <ul
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
+    <ul>
+      <h3>Chain / Network</h3>
+      <li>Chain: {activeChain?.name}</li>
+      <li>isSwitchingChain: {String(isSwitchingChain)}</li>
+      <li>switchingToChain: {String(switchingToChain)}</li>
+      <li>
+        canProgramaticallySwitchNetwork:{' '}
+        {String(canProgramaticallySwitchNetwork)}
+      </li>
+      <li>isActiveChainUnsupported: {String(isActiveChainUnsupported)}</li>
+      <li>
+        <ul style={{ flexDirection: 'row' }}>
+          {chains.map((chain: Chain) => (
+            <li key={chain.name}>
+              <Button
+                style={{ maxWidth: '48px', fontSize: '10px' }}
+                disabled={!canProgramaticallySwitchNetwork}
+                type="button"
+                onClick={() => switchNetwork?.(chain.id)}
+              >
+                Switch to {chain.name}
+              </Button>
+            </li>
+          ))}
+        </ul>
+      </li>
+    </ul>
+  );
+};
 
-          padding: '4px',
-        }}
-      >
-        <li>Address: {address}</li>
-        <li>Connector: {connector?.name}</li>
-        <li>isConnected?: {String(isConnected)}</li>
-      </ul>
-      <ul
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
+const WalletInfo = () => {
+  const {
+    address,
+    // provider,
+    // signer,
+    connector,
+    isConnected,
+    isConnecting,
+    isDisconnected,
+    openConnectModal,
+    openChainModal,
+    openAccountModal,
+    disconnect,
+    // disconnectAsync,
+    isLoadingSigner,
+  } = useWallet();
+
+  return (
+    <ul>
+      <h3>Wallet</h3>
+      <li>address: {address}</li>
+      <li>isConnected: {String(isConnected)}</li>
+      <li>isConnecting: {String(isConnecting)}</li>
+      <li>isDisconnected: {String(isDisconnected)}</li>
+      <li>isLoadingSigner: {String(isLoadingSigner)}</li>
+      <li>activeConnector: {connector?.name}</li>
+      <li>
+        <Button
+          type="button"
+          disabled={isDisconnected}
+          onClick={() => {
+            disconnect?.();
+          }}
+        >
+          Disconnect
+        </Button>
+      </li>
+
+      <li>
+        <ul>
+          <h3>RainbowKit</h3>
+          <li>
+            <Button
+              type="button"
+              disabled={!openConnectModal}
+              onClick={() => {
+                openConnectModal?.();
+              }}
+            >
+              Open ConnectModal
+            </Button>
+          </li>
+          <li>
+            <Button
+              type="button"
+              disabled={!openAccountModal}
+              onClick={() => {
+                openAccountModal?.();
+              }}
+            >
+              Open AccountModal
+            </Button>
+          </li>
+          <li>
+            <Button
+              type="button"
+              disabled={!openChainModal}
+              onClick={() => {
+                openChainModal?.();
+              }}
+            >
+              Open ChainModal
+            </Button>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  );
+};
 
-          padding: '4px',
-        }}
-      >
+const Component = (): JSX.Element => {
+  const config = useConfig();
+  return (
+    <section>
+      <WalletInfo />
+      <NetworkInfo />
+      <ul>
+        <h3>Config</h3>
         <li>
           <Button
             type="button"
@@ -66,16 +160,6 @@ const Component = ({ name }: { name?: string }): JSX.Element => {
             Log Config
           </Button>
         </li>
-        <li>
-          <Button
-            type="button"
-            onClick={() => {
-              openConnectModal?.();
-            }}
-          >
-            Open ConnectModal
-          </Button>
-        </li>
       </ul>
     </section>
   );

src/refactor/ui/styles.scss

@@ -8,8 +8,44 @@
   --color-primary: white;
 }
 
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  color: var(--color-secondary);
+}
+
+h1,
+h2,
+h3 {
+  font-family: Ezra;
+  font-weight: 500;
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
 ul {
+  margin: 8px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  h3 {
+    text-decoration: underline;
+  }
   list-style: none;
+  border: 1px solid black;
+  li {
+    flex-wrap: wrap;
+    padding: 4px;
+  }
 }
 
 @import '~@rainbow-me/rainbowkit/styles.css';

src/refactor/wallet-client/network/use-network.ts

@@ -1,9 +1,68 @@
-import { useMemo } from 'react';
-import { useSwitchNetwork, useNetwork as useNetworkWagmi } from 'wagmi';
+import type { Provider } from '@wagmi/core';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  useSwitchNetwork,
+  useNetwork as useNetworkWagmi,
+  useAccount,
+} from 'wagmi';
 
 export const useNetwork = () => {
-  const { switchNetwork } = useSwitchNetwork();
-  const { chains, chain } = useNetworkWagmi();
+  const { switchNetwork: switchNetworkWagmi, error: networkError } =
+    useSwitchNetwork();
+  const { connector: activeConnector } = useAccount();
+  const { chains, chain: activeChain } = useNetworkWagmi();
+  const [switchingToChain, setSwitchingToChain] = useState<number | null>();
+  console.log({ switchingToChain });
+  const isSwitchingChain = useMemo(
+    () => !!switchingToChain,
+    [switchingToChain]
+  );
+  const isActiveChainUnsupported = activeChain?.unsupported ?? false;
+
+  const switchNetwork = useCallback(
+    (chainId: number) => {
+      setSwitchingToChain(chainId);
+      switchNetworkWagmi?.(chainId);
+    },
+    [switchNetworkWagmi]
+  );
+
+  const stopSwitching = useCallback(() => {
+    setSwitchingToChain(null);
+    // onClose();
+  }, []);
+
+  useEffect(() => {
+    if (!activeConnector) {
+      return undefined;
+    }
+
+    // const stopSwitchingHandle = () => {
+    //   setSwitchingToChain(null);
+    // };
+
+    let provider: Provider;
+
+    activeConnector
+      ?.getProvider?.()
+      .then((provider_: Provider) => {
+        provider = provider_;
+        provider.on('chainChanged', stopSwitching);
+      })
+      .catch((error: unknown) => {
+        console.log("error getting provider's chainChanged event", error);
+      });
+
+    return () => {
+      provider?.removeListener('chainChanged', stopSwitching);
+    };
+  }, [activeConnector, stopSwitching]);
+
+  useEffect(() => {
+    if (networkError && networkError.name === 'UserRejectedRequestError') {
+      stopSwitching();
+    }
+  }, [networkError, stopSwitching]);
 
   const canProgramaticallySwitchNetwork = useMemo(
     () => !!switchNetwork,
@@ -12,8 +71,11 @@ export const useNetwork = () => {
 
   return {
     switchNetwork,
+    switchingToChain,
     canProgramaticallySwitchNetwork,
-    chain,
+    activeChain,
+    isSwitchingChain,
     chains,
+    isActiveChainUnsupported,
   };
-};  
+};