feat: wip client, network switching & detection works

package.json

@@ -41,6 +41,9 @@
     "@masa-finance/masa-sdk": "^3.2.1",
     "@metamask/providers": "^11.0.0",
     "@rainbow-me/rainbowkit": "0.12.14",
+    "@tanstack/query-sync-storage-persister": "^4.27.1",
+    "@tanstack/react-query": "^4.28.0",
+    "@tanstack/react-query-persist-client": "^4.28.0",
     "@wagmi/core": "0.10.11",
     "babel-loader": "^9.1.2",
     "babel-plugin-import": "^1.13.6",
@@ -76,6 +79,7 @@
     "@storybook/addons": "^7.0.2",
     "@storybook/react": "^7.0.18",
     "@storybook/react-webpack5": "^7.0.12",
+    "@tanstack/react-query-devtools": "^4.29.12",
     "@types/jest": "^29.5.0",
     "@types/mocha": "^10.0.1",
     "@types/node": "^20.1.5",

src/refactor/masa-client/use-masa-sdk.ts

@@ -1,10 +1,15 @@
 import { Masa } from '@masa-finance/masa-sdk';
+import { Signer } from 'ethers';
 import { useMemo } from 'react';
 
-export const useMasa = ({ signer }) => {
-  const masa = useMemo(() => new Masa({
-      signer,
-    }), [signer]);
+export const useMasaSDK = ({ signer }: { signer: Signer }) => {
+  const masa = useMemo(
+    () =>
+      new Masa({
+        signer,
+      }),
+    [signer]
+  );
 
   return masa;
 };

src/refactor/masanew.stories.tsx

@@ -1,3 +1,5 @@
+import * as buffer from 'buffer';
+
 import type { Args, Meta } from '@storybook/react';
 import type { Chain } from 'wagmi';
 import React from 'react';
@@ -9,6 +11,12 @@ import MasaProvider from './masa-provider';
 import { useWallet } from './wallet-client/wallet/use-wallet';
 import { useNetwork } from './wallet-client/network/use-network';
 
+// * nextjs fix
+// * TODO: move this to index.ts file at some point
+if (typeof window !== 'undefined') {
+  window.Buffer = buffer.Buffer;
+}
+
 const meta: Meta = {
   title: 'Refactor Test',
   component: () => <div />,
@@ -37,28 +45,69 @@ const NetworkInfo = () => {
     <ul>
       <h3>Chain / Network</h3>
       <li>Chain: {activeChain?.name}</li>
+      <li>chain-id: {activeChain?.id}</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' }}>
+      <li style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
+        <ul
+          className="width-50"
+          style={{
+            flexDirection: 'row',
+            width: '50%',
+            alignItems: 'center',
+            justifyContent: 'center',
+
+            flexWrap: 'wrap',
+          }}
+        >
+          <h3 className="flex-100">Switch Network</h3>
           {chains.map((chain: Chain) => (
-            <li key={chain.name}>
+            <li
+              style={{
+                fontSize: '10px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+              key={chain.name}
+            >
               <Button
-                style={{ maxWidth: '48px', fontSize: '10px' }}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+
+                  fontSize: '16px',
+                }}
                 disabled={!canProgramaticallySwitchNetwork}
                 type="button"
-                onClick={() => switchNetwork?.(chain.id)}
+                onClick={() => {
+                  console.log({ chain });
+                  try {
+                    switchNetwork?.(chain.id);
+                  } catch (error: unknown) {
+                    console.log({ e: error });
+                  }
+                }}
               >
-                Switch to {chain.name}
+                Switch to {chain.testnet ? 'Testnet' : ''} {chain.name}
               </Button>
             </li>
           ))}
         </ul>
+        <ul className="width-50">
+          <h3>Availible Chains</h3>
+          {chains.map((chain) => (
+            <li key={chain.name}>
+              <span>{chain.name}</span>
+            </li>
+          ))}
+        </ul>
       </li>
     </ul>
   );
@@ -79,27 +128,40 @@ const WalletInfo = () => {
     disconnect,
     // disconnectAsync,
     isLoadingSigner,
+    isLoadingBalance,
+    balance,
   } = 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>
+    <ul className="row wrap">
+      <li className="flex-50">
+        <ul>
+          <h3>Wallet</h3>
+          <li>address: {address}</li>
+          <li>activeConnector: {connector?.name}</li>
+          <li>isConnected: {String(isConnected)}</li>
+          <li>isConnecting: {String(isConnecting)}</li>
+          <li>isDisconnected: {String(isDisconnected)}</li>
+          <li>isLoadingSigner: {String(isLoadingSigner)}</li>
+          <li>isLoadingBalance: {String(isLoadingBalance)}</li>
+          <li>balance: {balance}</li>
+        </ul>
+      </li>
       <li>
-        <Button
-          type="button"
-          disabled={isDisconnected}
-          onClick={() => {
-            disconnect?.();
-          }}
-        >
-          Disconnect
-        </Button>
+        <ul>
+          <h3>Wagmi Functions</h3>
+          <li>
+            <Button
+              type="button"
+              disabled={isDisconnected}
+              onClick={() => {
+                disconnect?.();
+              }}
+            >
+              Disconnect
+            </Button>
+          </li>
+        </ul>
       </li>
 
       <li>

src/refactor/ui/styles.scss

@@ -6,8 +6,23 @@
   --z-index-front: 1000;
   --color-secondary: black;
   --color-primary: white;
+  --base-padding: 8px;
+  --base-margin: 8px;
 }
 
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.wrap {
+  flex-wrap: wrap;
+}
+.column {
+  display: flex;
+  flex-direction: column;
+}
 * {
   box-sizing: border-box;
   margin: 0;
@@ -25,20 +40,32 @@ h3 {
 }
 
 section {
+  width: 100%;
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-direction: row;
+  align-items: start;
+  flex-wrap: wrap;
+
   justify-content: center;
 }
+
 ul {
-  margin: 8px;
-  padding: 8px;
+  width: 100%;
+  margin: var(--base-margin);
+  padding: var(--base-padding);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  ul {
+    &:nth-child(3n) {
+      flex-basis: 100%;
+    }
+  }
+
   h3 {
     text-decoration: underline;
+    text-align: center;
   }
   list-style: none;
   border: 1px solid black;
@@ -48,5 +75,15 @@ ul {
   }
 }
 
+.flex-100 {
+  flex-basis: 100%;
+}
+.flex-50 {
+  flex-basis: 50%;
+}
+.width-50 {
+  width: calc(50% - 32px);
+}
+
 @import '~@rainbow-me/rainbowkit/styles.css';
 @import '~react-phone-number-input/style.css';

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

@@ -0,0 +1 @@
+export * from './use-network';

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

@@ -4,15 +4,22 @@ import {
   useSwitchNetwork,
   useNetwork as useNetworkWagmi,
   useAccount,
+  useConnect,
 } from 'wagmi';
 
 export const useNetwork = () => {
   const { switchNetwork: switchNetworkWagmi, error: networkError } =
     useSwitchNetwork();
   const { connector: activeConnector } = useAccount();
+  const { connectors, pendingConnector } = useConnect();
   const { chains, chain: activeChain } = useNetworkWagmi();
   const [switchingToChain, setSwitchingToChain] = useState<number | null>();
-  console.log({ switchingToChain });
+
+  const availibleConnectors = useMemo(
+    () => connectors.map((c) => c.chains),
+    [connectors]
+  );
+  console.log({ pendingConnector, connectors, availibleConnectors });
   const isSwitchingChain = useMemo(
     () => !!switchingToChain,
     [switchingToChain]

src/refactor/wallet-client/wallet-client-provider.tsx

@@ -29,9 +29,13 @@ export const WalletClientProvider = ({ children }: WalletClientProps) => {
     isConnecting,
     isDisconnected,
     openConnectModal,
+    openChainModal,
+    openAccountModal,
     disconnect,
     disconnectAsync,
     isLoadingSigner,
+    isLoadingBalance,
+    balance,
   } = useWallet();
   const {
     switchNetwork,
@@ -63,9 +67,13 @@ export const WalletClientProvider = ({ children }: WalletClientProps) => {
         isConnecting,
         isDisconnected,
         openConnectModal,
+        openChainModal,
+        openAccountModal,
         disconnect,
         disconnectAsync,
         isLoadingSigner,
+        isLoadingBalance,
+        balance,
 
         // network
         switchNetwork,
@@ -86,9 +94,13 @@ export const WalletClientProvider = ({ children }: WalletClientProps) => {
       isConnecting,
       isDisconnected,
       openConnectModal,
+      openChainModal,
+      openAccountModal,
       disconnect,
       disconnectAsync,
       isLoadingSigner,
+      isLoadingBalance,
+      balance,
 
       // network
       switchNetwork,

src/refactor/wallet-client/wallet/types.d.ts

@@ -0,0 +1,8 @@
+import type { Provider } from '@wagmi/core';
+import type { Signer } from 'ethers';
+
+export type UseWalletReturnType = {
+  address: `0x${string}` | undefined;
+  provider: Provider;
+  signer: Signer | undefined;
+};

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

@@ -5,7 +5,13 @@ import {
 } from '@rainbow-me/rainbowkit';
 import { useMemo } from 'react';
 
-import { useAccount, useDisconnect, useProvider, useSigner } from 'wagmi';
+import {
+  useAccount,
+  useBalance,
+  useDisconnect,
+  useProvider,
+  useSigner,
+} from 'wagmi';
 
 const useWallet = () => {
   const { openConnectModal } = useConnectModal();
@@ -16,6 +22,21 @@ const useWallet = () => {
   const provider = useProvider();
   const { data: signer, isLoading: isLoadingSigner } = useSigner();
   const { disconnect, disconnectAsync } = useDisconnect();
+  const {
+    data: balanceResult,
+    // isError: isErrorBalance,
+    isLoading: isLoadingBalance,
+  } = useBalance({
+    address,
+  });
+
+  const balance = useMemo(
+    () =>
+      `${balanceResult?.formatted as string} ${
+        balanceResult?.symbol as string
+      }`,
+    [balanceResult]
+  );
 
   const useWalletValue = useMemo(
     () => ({
@@ -32,6 +53,8 @@ const useWallet = () => {
       disconnect,
       disconnectAsync,
       isLoadingSigner,
+      isLoadingBalance,
+      balance,
     }),
     [
       address,
@@ -47,6 +70,8 @@ const useWallet = () => {
       disconnect,
       disconnectAsync,
       isLoadingSigner,
+      isLoadingBalance,
+      balance,
     ]
   );