Network switch

package.json

@@ -44,6 +44,7 @@
     "node-sass": "^8.0.0",
     "react": "^18.2.0",
     "react-query": "^3.39.3",
+    "react-spinners": "^0.13.8",
     "rodal": "^2.0.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-copy": "^3.4.0",

src/common/components/masa-interface/pages/authenticate/index.tsx

@@ -1,25 +1,50 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useMasa } from '../../../../helpers/provider/use-masa';
+import { Spinner } from '../../../spinner';
 
 export const InterfaceAuthenticate = () => {
-  const { handleLogin } = useMasa();
+  const { handleLogin, walletAddress, identity, loading } = useMasa();
 
+  const hasIdentity = useMemo(() => {
+    return identity && identity?.identityId;
+  }, [identity]);
+  const shortAddress = useMemo(() => {
+    return `${walletAddress?.substring(0, 2)}...${walletAddress?.substring(
+      walletAddress.length - 4,
+      walletAddress.length - 1
+    )}`;
+  }, [walletAddress]);
+
+  if (loading) {
+    return <Spinner />;
+  }
   return (
     <div className="interface-authenticate">
       <div>
-        <h3>Wallet connected!</h3>
-        <p className="connected-paragraph">
-          Now that you connected your wallet, you need to run through a little
-          authentication process, it wont take much and only needs a signature
+        <h3 className="title">Wallet connected!</h3>
+        <p className="connected-wallet">
+          Your wallet is connected you can now create an account by minting a
+          Masa Soulbound Identity and Masa Soulname!
+        </p>
+
+        <p className="connected-wallet with-wallet">
+          You are connected with the following wallet
+          <span>{shortAddress}</span>
         </p>
       </div>
       <div>
-        <button className="masa-button" onClick={handleLogin}>
-          Authenticate with Masa servers
+        <button
+          className="masa-button authenticate-button"
+          onClick={handleLogin}
+        >
+          {loading ? 'loading...' : hasIdentity ? 'Sign in' : 'Register'}
         </button>
         <div className="dont-have-a-wallet">
           <a>
-            <p>I don't want to use this wallet</p>
+            <p>
+              Want to use a different wallet? Close this window and disconnect
+              your wallet in Metamask to connect a new wallet
+            </p>
           </a>
         </div>
       </div>

src/common/components/masa-interface/pages/connected/index.tsx

@@ -1,50 +1,24 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import { useMasa } from '../../../../helpers/provider/use-masa';
 import { MasaLoading } from '../../../masa-loading';
+import { Spinner } from '../../../spinner';
 
 export const InterfaceConnected = () => {
-  const {
-    handleLogout,
-    closeModal,
-    company,
-    soulnames,
-    loadSoulnames,
-    loading,
-  } = useMasa();
+  const { company, loading, closeModal } = useMasa();
 
   useEffect(() => {
-    loadSoulnames?.();
-  }, [loadSoulnames]);
-
-  const name = useMemo(() => {
-    if (soulnames?.length) {
-      return soulnames[0].tokenDetails.sbtName;
-    } else {
-      return null;
-    }
-  }, [soulnames]);
+    setTimeout(() => {
+      closeModal?.();
+    }, 3000);
+  }, []);
 
   if (loading) return <MasaLoading />;
   return (
     <div className="interface-connected">
       <div>
-        <h3>
-          Hello{name ? ', ' : '!'} {name}
-        </h3>
-        <p>
-          Woo hoo!
-          <br /> you have successfully connected your wallet.
-        </p>
-      </div>
-      <div>
-        <button className="masa-button" onClick={() => closeModal?.()}>
-          Continue with {company ?? 'Masa'}
-        </button>
-        <div className="dont-have-a-wallet" onClick={() => handleLogout?.()}>
-          <a>
-            <p>I don't want to use this wallet</p>
-          </a>
-        </div>
+        <h3 className="title">We are taking you to {company}</h3>
+
+        <Spinner />
       </div>
     </div>
   );

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

@@ -7,7 +7,7 @@ export const InterfaceConnector = ({ disable }: { disable?: boolean }) => {
   return (
     <div className="interface-connect">
       <div>
-        <h3>Select a wallet</h3>
+        <h3 className="title">Select a wallet</h3>
         <p>
           By connecting your wallet, you agree to our <a>Terms of Service</a>{' '}
           and <a>Privacy Policy</a>

src/common/components/masa-loading/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import { Spinner } from '../spinner';
 
 export const MasaLoading = () => {
   return (
     <div className="spinner">
-      <p>Loading...</p>
+      <Spinner />
     </div>
   );
 };

src/common/components/modal/index.tsx

@@ -13,7 +13,8 @@ export interface ModalProps {
 export const ModalComponent = ({ children, open, close }: ModalProps) => {
   return (
     <Rodal
-      height={450}
+      height={520}
+      width={500}
       visible={open}
       onClose={() => close()}
       className="masa-rodal-container"

src/common/components/modal/styles.scss

@@ -4,13 +4,15 @@
 
   justify-content: center;
   align-items: center;
+  border-radius: 24px;
 }
 .masa-modal {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  box-sizing: border-box;
 
-  padding-top: 1em;
+  padding: 1.2em;
 
   width: 100%;
   height: 100%;
@@ -71,7 +73,10 @@
     flex-direction: row;
     justify-content: center;
 
-    padding-top: 2em;
+    text-align: center;
+    p {
+      font-size: 16px;
+    }
   }
 
   .masa-input {
@@ -82,6 +87,11 @@
     padding: 1em 1.2em;
   }
 
+  .authenticate-button {
+    margin: 20px 0;
+    font-weight: 500;
+  }
+
   .input-row {
     display: flex;
     flex-direction: row;
@@ -93,6 +103,7 @@
 
   .spinner {
     width: 100%;
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -114,6 +125,30 @@
       padding-top: 0;
     }
   }
+
+  .interface-authenticate,
+  .interface-connected {
+    .title {
+      text-align: center;
+    }
+
+    .connected-wallet {
+      text-align: center;
+      font-size: 18px;
+      color: rgba(0, 0, 0, 0.6);
+
+      &.with-wallet {
+        margin-top: 64px;
+        display: flex;
+        flex-direction: column;
+        span {
+          margin-top: 12px;
+          font-weight: 800;
+          color: #5987a6;
+        }
+      }
+    }
+  }
 }
 
 // RODAL STYLES
@@ -148,7 +183,7 @@
   z-index: 101;
   padding: 15px;
   background: #fff;
-  border-radius: 3px;
+  border-radius: 16px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 

src/common/components/spinner/index.ts

@@ -0,0 +1 @@
+export { Spinner } from './spinner';

src/common/components/spinner/spinner.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import MoonLoader from 'react-spinners/MoonLoader';
+
+export interface SpinnerProps {
+  /** Spinner color */
+  color?: string;
+}
+
+export function Spinner({ color = '#000' }: SpinnerProps) {
+  return (
+    <div className="masa-spinner">
+      <MoonLoader color={color} />
+    </div>
+  );
+}

src/common/helpers/masa/index.ts

@@ -2,6 +2,25 @@ import { environments, Masa } from '@masa-finance/masa-sdk';
 import { ethers, Wallet } from 'ethers';
 import { ArweaveConfig } from '../provider/masa-context';
 
+const getChainName = (chainId) => {
+  switch (chainId) {
+    case 1:
+      return 'mainnet';
+    case 5:
+      return 'goerli';
+    case 44787:
+      return 'alfajores';
+    case 42220:
+      return 'celo';
+    case 137:
+      return 'polygon';
+    case 80001:
+      return 'mumbai';
+
+    default:
+      return 'goerli';
+  }
+};
 export const createRandomWallet = (): Wallet | null => {
   console.info('Creating random wallet!');
   const wallet = ethers.Wallet.createRandom();
@@ -37,6 +56,7 @@ export const createNewMasa = (
     cookie: cookie || undefined,
     wallet: signer,
     apiUrl: environment.apiUrl,
+    defaultNetwork: getChainName(signer?.provider?._network?.chainId ?? 5),
     environment: environment.environment,
     arweave: {
       host: arweaveConfig?.host || 'arweave.net',

src/common/helpers/provider/masa-context.tsx

@@ -91,12 +91,15 @@ export const MasaContextProvider = ({
     masaInstance,
     provider
   );
+
   const {
     identity,
     handlePurchaseIdentity,
     isLoading: identityLoading,
   } = useIdentity(masaInstance, walletAddress);
+
   const { soulnames } = useSoulnames(masaInstance, walletAddress, identity);
+
   const {
     creditScores,
     isLoading: creditScoreLoading,
@@ -176,7 +179,7 @@ export const MasaContextProvider = ({
         setMasaInstance(null);
       }
     }
-  }, [provider, noWallet]);
+  }, [provider, noWallet, walletAddress]);
 
   const context = {
     setProvider,

src/common/helpers/provider/modules/identity/identity.ts

@@ -6,8 +6,11 @@ export const useIdentity = (masa, walletAddress) => {
   const { data, status, isLoading, error } = useQuery(
     `identity-${walletAddress}`,
     () => masa.identity.load(walletAddress),
-    { enabled: !!masa && !!walletAddress }
+    {
+      enabled: !!masa && !!walletAddress,
+    }
   );
+  console.log('IDENTITYU', { data, error, ENABLED: !!masa && !!walletAddress });
 
   const handlePurchaseIdentity = useCallback(async () => {
     await masa?.identity.create();

src/common/helpers/provider/use-metamask.ts

@@ -4,7 +4,7 @@ import { queryClient } from './masa-query-client';
 import { useMasa } from './use-masa';
 
 export const useMetamask = ({ disable }: { disable?: boolean }) => {
-  const { setProvider, setMissingProvider, masa } = useMasa();
+  const { setProvider, setMissingProvider, handleLogout } = useMasa();
 
   const provider = useMemo(() => {
     if (typeof window !== 'undefined') {
@@ -71,12 +71,8 @@ export const useMetamask = ({ disable }: { disable?: boolean }) => {
     localStorage.setItem('isWalletConnected', 'true');
   };
 
-  const handleLogout = useCallback(async () => {
-    await masa?.session.logout();
-  }, [masa]);
-
   const disconnect = useCallback(async () => {
-    await handleLogout();
+    await handleLogout?.();
     localStorage.setItem('isWalletConnected', 'false');
     setProvider?.(null);
   }, [handleLogout, setProvider]);
@@ -87,11 +83,27 @@ export const useMetamask = ({ disable }: { disable?: boolean }) => {
       window?.ethereum?.on('accountsChanged', async (accounts) => {
         if (accounts.length === 0) {
           setProvider?.(null);
-          await handleLogout();
+          await handleLogout?.();
           await disconnect();
           queryClient.invalidateQueries('wallet');
         }
       });
+
+      //@ts-ignore
+      window?.ethereum?.on('networkChanged', async (accounts) => {
+        //@ts-ignore
+        const newProvider = new ethers.providers.Web3Provider(window?.ethereum);
+        if (newProvider) {
+          await newProvider.send('eth_requestAccounts', []);
+
+          await accountChangedHandler(newProvider.getSigner(0));
+          if (newProvider && setProvider) {
+            setProvider(newProvider.getSigner(0));
+            onConnect();
+          }
+          queryClient.invalidateQueries('wallet');
+        }
+      });
     }
   }, [handleLogout, disconnect, setProvider]);