feat: update network switching to use wagmi, update modals, add valora

package.json

@@ -35,11 +35,13 @@
     "@acusti/react-code-input": "^3.11.0",
     "@babel/preset-typescript": "^7.21.4",
     "@masa-finance/masa-sdk": "^1.15.1",
+    "@celo/rainbowkit-celo": "^0.11.1",
     "@metamask/providers": "^10.2.1",
     "@rainbow-me/rainbowkit": "^0.12.12",
     "babel-loader": "^9.1.2",
     "babel-plugin-import": "^1.13.6",
     "babel-preset-react-app": "^10.0.1",
+    "buffer": "^6.0.3",
     "clean-webpack-plugin": "^4.0.0",
     "cssnano": "^6.0.0",
     "ethers": "^5",

src/components/masa-interface/masa-interface.tsx

@@ -1,10 +1,13 @@
-import React, { useMemo } from 'react';
-import { useMasa, useMetamask } from '../../provider';
+import React, { useEffect, useMemo } from 'react';
+import {
+  useMasa,
+  // useMetamask
+} from '../../provider';
 import { ModalComponent } from '../modal';
 import {
   InterfaceAuthenticate,
   InterfaceConnected,
-  InterfaceConnector,
+  // InterfaceConnector,
   InterfaceCreateCreditScore,
   InterfaceCreateIdentity,
 } from './pages';
@@ -14,11 +17,11 @@ import { InterfaceSuccessCreateIdentity } from './pages/success-create-identity'
 import { InterfaceSwitchChain } from './pages/switch-chain';
 
 const pages = {
-  connector: ({
-    disableMetamask,
-  }: {
-    disableMetamask?: boolean;
-  }): JSX.Element => <InterfaceConnector disableMetamask={disableMetamask} />,
+  // connector: ({
+  //   disableMetamask,
+  // }: {
+  //   disableMetamask?: boolean;
+  // }): JSX.Element => <InterfaceConnector disableMetamask={disableMetamask} />,
   createIdentity: <InterfaceCreateIdentity />,
   successIdentityCreate: <InterfaceSuccessCreateIdentity />,
   createSoulname: <InterfaceCreateSoulname />,
@@ -34,7 +37,7 @@ export const MasaInterface = ({
 }: {
   disableMetamask?: boolean;
 }): JSX.Element => {
-  useMetamask({ disabled: disableMetamask });
+  // useMetamask({ disabled: disableMetamask });
 
   const {
     isModalOpen,
@@ -51,11 +54,17 @@ export const MasaInterface = ({
     currentNetwork,
     forceNetwork,
     verbose,
+
+    openConnectModal,
   } = useMasa();
 
   const page = useMemo(() => {
     if (forcedPage) return forcedPage;
-    if (!hasWalletAddress) return 'connector';
+    if (!hasWalletAddress) {
+      // openConnectModal?.();
+      return null;
+      // return 'connector';
+    }
 
     if (verbose) {
       console.info({ forceNetwork });
@@ -102,9 +111,18 @@ export const MasaInterface = ({
   ]);
 
   const isModal = useMemo(() => {
-    return ['createIdentity', 'successIdentityCreate'].includes(page);
+    return ['createIdentity', 'successIdentityCreate'].includes(String(page));
   }, [page]);
 
+  useEffect(() => {
+    // * when user closes connection during login process,
+    // * we want to reopen rainbowkit modal not our old connection modal
+    if (isModalOpen && !provider && page === 'connector') {
+      closeModal?.();
+      openConnectModal?.();
+    }
+  }, [isModalOpen, closeModal, provider, page, openConnectModal]);
+
   return (
     <>
       <ModalComponent
@@ -113,7 +131,8 @@ export const MasaInterface = ({
         setOpen={setModalOpen as (val: boolean) => void}
         height={isModal ? 340 : undefined}
       >
-        {page === 'connector' ? pages[page]({ disableMetamask }) : pages[page]}
+        {/* {page === 'connector' ? pages[page]({ disableMetamask }) :  */}
+        {page ? pages[page] : null}
       </ModalComponent>
     </>
   );

src/components/masa-interface/pages/connector/connector.tsx

@@ -7,7 +7,7 @@ export const InterfaceConnector = ({
 }: {
   disableMetamask?: boolean;
 }): JSX.Element => {
-  const { connectMetamask } = useMetamask({ disabled: disableMetamask });
+  // const { connectMetamask } = useMetamask({ disabled: disableMetamask });
 
   return (
     <div className="interface-connect">
@@ -33,10 +33,10 @@ export const InterfaceConnector = ({
         </p>
       </div>
       <div className="masa-connectors">
-        <div data-cy="metaMask" className="connector" onClick={connectMetamask}>
+        {/* <div data-cy="metaMask" className="connector" onClick={connectMetamask}>
           <p>MetaMask</p>
           <img alt="metamask" src={metamask} className="connector-image" />
-        </div>
+        </div> */}
         <div data-cy="walletConnect" className="connector disabled">
           <p>WalletConnect</p>
           <img

src/components/masa-interface/pages/switch-chain/switch-chain.tsx

@@ -2,10 +2,24 @@ import React, { useCallback, useMemo } from 'react';
 import { useMasa } from '../../../../provider';
 import { MasaLoading } from '../../../masa-loading';
 import { Network, SupportedNetworks } from '@masa-finance/masa-sdk';
+import { useNetwork, useSwitchNetwork } from 'wagmi';
 
 export const InterfaceSwitchChain = (): JSX.Element => {
-  const { isLoading, switchNetwork, forceNetwork } = useMasa();
-
+  const {
+    isLoading,
+    // switchNetwork,
+    forceNetwork,
+  } = useMasa();
+  // const { chain } = useNetwork();
+  const {
+    // chains,
+    // error,
+    isLoading: wagmiLoadingNetwork,
+    // pendingChainId,
+    switchNetwork: switchNetworkWagmi,
+  } = useSwitchNetwork({
+    onError: (err) => console.error('Network switch failed', err),
+  });
   const networkData: Network | undefined = useMemo(() => {
     if (forceNetwork) {
       return SupportedNetworks[forceNetwork];
@@ -16,9 +30,9 @@ export const InterfaceSwitchChain = (): JSX.Element => {
 
   const handleSwitch = useCallback(() => {
     if (networkData) {
-      switchNetwork?.(networkData.networkName);
+      switchNetworkWagmi?.(networkData.chainId);
     }
-  }, [switchNetwork, networkData]);
+  }, [switchNetworkWagmi, networkData]);
 
   if (isLoading) return <MasaLoading />;
 

src/index.tsx

@@ -1,3 +1,6 @@
+import * as buffer from 'buffer';
+window.Buffer = buffer.Buffer;
+
 export * from './components';
 export * from './helpers';
 export * from './provider';

src/provider/configured-rainbowkit-provider.tsx

@@ -1,23 +1,36 @@
-import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
+import {
+  getDefaultWallets,
+  connectorsForWallets,
+  RainbowKitProvider,
+} from '@rainbow-me/rainbowkit';
+
+// Import known recommended wallets
+import {
+  Valora,
+  // CeloWallet,
+  //  CeloDance
+} from '@celo/rainbowkit-celo/wallets';
+
+// Import CELO chain information
+import { Alfajores, Celo } from '@celo/rainbowkit-celo/chains';
+
 import { configureChains, createClient, WagmiConfig } from 'wagmi';
 import {
   mainnet,
   polygon,
   polygonMumbai,
   goerli,
-  celo,
   bsc,
   bscTestnet,
   baseGoerli,
-  celoAlfajores,
 } from 'wagmi/chains';
 import { publicProvider } from 'wagmi/providers/public';
+import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
+
 import React, { createContext, useContext, useMemo } from 'react';
 import type { ReactNode } from 'react';
 
-interface ConfiguredRainbowKitProviderValue {
-  [key: string]: never;
-}
+type ConfiguredRainbowKitProviderValue = Record<string, never>;
 
 interface ConfiguredRainbowKitProviderProps {
   children: ReactNode;
@@ -30,26 +43,43 @@ const { chains, provider } = configureChains(
     polygonMumbai,
     goerli,
     baseGoerli,
-    celo,
-    celoAlfajores,
+    // celo,
+    // celoAlfajores,
     bsc,
     bscTestnet,
+    Alfajores,
+    Celo,
   ],
   [
     // alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
     publicProvider(),
+    jsonRpcProvider({
+      rpc: (chain) => ({ http: chain.rpcUrls.default.http[0] }),
+    }),
   ]
 );
 
-const { connectors } = getDefaultWallets({
-  appName: 'My RainbowKit App',
+const { wallets } = getDefaultWallets({
+  appName: 'Masa React',
   projectId: '04a4088bf7ff775c3de808412c291cc0',
   chains,
 });
 
+const celoConnectors = connectorsForWallets([
+  { ...wallets[0] },
+  {
+    groupName: 'Celo',
+    wallets: [
+      Valora({ chains }),
+      // CeloWallet({ chains }),
+      // CeloDance({ chains }),
+    ],
+  },
+]);
+
 const wagmiClient = createClient({
-  // autoConnect: true,
-  connectors,
+  autoConnect: true,
+  connectors: celoConnectors,
   provider,
 });
 
@@ -62,7 +92,7 @@ export const ConfiguredRainbowKitProvider = ({
     <WagmiConfig client={wagmiClient}>
       <RainbowKitProvider modalSize="compact" chains={chains}>
         <ConfiguredRainbowKitContext.Provider value={contextValue}>
-          <>{children}</>
+          {children}
         </ConfiguredRainbowKitContext.Provider>
       </RainbowKitProvider>
     </WagmiConfig>

src/provider/masa-context-provider.tsx

@@ -16,11 +16,12 @@ import {
   useSoulnames,
   useWallet,
 } from './modules';
-import { Signer, Wallet } from 'ethers';
+import { Signer, Wallet, providers } from 'ethers';
 import { MasaContext } from './masa-context';
 import { MasaShape } from './masa-shape';
 import { useScopes } from './modules/scopes/scopes';
 import { useRainbowKit } from './use-rainbowkit';
+import { useWagmi } from './modules/wagmi';
 
 export { SoulNameErrorCodes };
 
@@ -63,19 +64,28 @@ export const MasaContextProvider = ({
   const [masaInstance, setMasaInstance] = useState<Masa | undefined>();
 
   // provider
-  const [provider, setProvider] = useState<Wallet | Signer | undefined>(signer);
+  const {
+    provider: wagmiProvider,
+    isLoading: wagmiLoading,
+    signer: wagmiSigner,
+  } = useWagmi();
+  const [provider, setProvider] = useState<Wallet | Signer | undefined>(
+    wagmiSigner as Signer | undefined
+  );
+
+  useEffect(() => setProvider(wagmiSigner as Signer), [wagmiSigner]);
 
   // wallet
   const { walletAddress, isWalletLoading, hasWalletAddress } = useWallet(
     masaInstance,
-    provider
+    wagmiSigner as Signer | undefined
   );
   // session
   const { isLoggedIn, handleLogin, handleLogout, isSessionLoading } =
     useSession(masaInstance, walletAddress);
 
   // network
-  const { switchNetwork, currentNetwork } = useNetwork(provider);
+  const { switchNetwork, currentNetwork } = useNetwork(wagmiSigner as Signer);
 
   // identity
   const {
@@ -123,7 +133,7 @@ export const MasaContextProvider = ({
     openConnectModal,
     openAccountModal,
     setRainbowKitModalCallback,
-  } = useRainbowKit(setProvider);
+  } = useRainbowKit();
 
   // modal
   const {
@@ -148,7 +158,8 @@ export const MasaContextProvider = ({
       isIdentityLoading ||
       isSoulnamesLoading ||
       isCreditScoresLoading ||
-      isGreensLoading
+      isGreensLoading ||
+      wagmiLoading
     );
   }, [
     masaInstance,
@@ -158,6 +169,7 @@ export const MasaContextProvider = ({
     isSoulnamesLoading,
     isCreditScoresLoading,
     isGreensLoading,
+    wagmiLoading,
   ]);
   // const providerWagmi = useProvider();
 
@@ -200,15 +212,19 @@ export const MasaContextProvider = ({
       openConnectModal,
       verbose,
       useRainbowKitWalletConnect,
+      // wagmiSigner,
+      // noWallet,
     ]
   );
 
   useEffect(() => {
     const loadMasa = (): void => {
-      if (!provider) return;
+      // if (!provider) return;
 
       const masa: Masa | undefined = createNewMasa({
-        signer: provider,
+        // signer: provider,
+        signer: wagmiSigner as Signer | null,
+        // provider: wagmiProvider as providers.Provider,
         environmentName,
         networkName: currentNetwork?.networkName,
         arweaveConfig,
@@ -220,13 +236,12 @@ export const MasaContextProvider = ({
 
     void loadMasa();
   }, [
-    provider,
-    noWallet,
-    walletAddress,
     arweaveConfig,
     environmentName,
     verbose,
     currentNetwork,
+    wagmiProvider,
+    wagmiSigner,
   ]);
 
   const context: MasaShape = {

src/provider/modules/modal/modal.ts

@@ -40,6 +40,7 @@ export const useModal = (
         isConnected
       ) {
         modalCallback();
+        console.log(modalCallback.name);
       } else if (forceCallback && modalCallback) {
         modalCallback();
       }