fix use-metamask not able to retrieve current values from use-masa

refactor use-masa provider / wallet
fix react query requests loading / fetching state
properly expose reload methods
many smaller tweaks

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

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useMasa } from '../../provider';
+import { useMasa, useMetamask } from '../../provider';
 import { ModalComponent } from '../modal';
 import {
   InterfaceAuthenticate,
@@ -11,9 +11,11 @@ import {
 import { InterfaceSwitchChain } from './pages/switch-chain';
 
 const pages = {
-  connector: ({ disable }: { disable?: boolean }): JSX.Element => (
-    <InterfaceConnector disable={disable} />
-  ),
+  connector: ({
+    disableMetamask,
+  }: {
+    disableMetamask?: boolean;
+  }): JSX.Element => <InterfaceConnector disableMetamask={disableMetamask} />,
   createIdentity: <InterfaceCreateIdentity />,
   connectedState: <InterfaceConnected />,
   authenticate: <InterfaceAuthenticate />,
@@ -22,16 +24,18 @@ const pages = {
 };
 
 export const MasaInterface = ({
-  disable,
+  disableMetamask,
 }: {
-  disable?: boolean;
+  disableMetamask?: boolean;
 }): JSX.Element => {
+  useMetamask({ disabled: disableMetamask });
+
   const {
     isModalOpen,
     setModalOpen,
     isConnected,
     identity,
-    loggedIn,
+    isLoggedIn,
     closeModal,
     scope,
     creditScores,
@@ -41,15 +45,15 @@ export const MasaInterface = ({
     if (!isConnected) return 'connector';
 
     // if (network && !chain?.name.includes(network)) return 'switchNetwork';
-    if (!loggedIn) return 'authenticate';
+    if (!isLoggedIn) return 'authenticate';
     if (!identity?.identityId && scope?.includes('identity'))
       return 'createIdentity';
     if (identity && !creditScores?.length && scope?.includes('credit-score'))
       return 'createCreditScore';
-    if (isConnected && loggedIn) return 'connectedState';
+    if (isConnected && isLoggedIn) return 'connectedState';
 
     return 'connector';
-  }, [isConnected, identity, loggedIn, scope, creditScores]);
+  }, [isConnected, identity, isLoggedIn, scope, creditScores]);
 
   return (
     <>
@@ -58,7 +62,7 @@ export const MasaInterface = ({
         close={(): void => closeModal?.()}
         setOpen={setModalOpen as (val: boolean) => void}
       >
-        {page === 'connector' ? pages[page]({ disable }) : pages[page]}
+        {page === 'connector' ? pages[page]({ disableMetamask }) : pages[page]}
       </ModalComponent>
     </>
   );

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

@@ -3,7 +3,7 @@ import { useMasa } from '../../../../provider';
 import { Spinner } from '../../../spinner';
 
 export const InterfaceAuthenticate = (): JSX.Element => {
-  const { handleLogin, walletAddress, loading } = useMasa();
+  const { handleLogin, walletAddress, isLoading } = useMasa();
 
   const [copied, setCopied] = useState(false);
 
@@ -21,7 +21,7 @@ export const InterfaceAuthenticate = (): JSX.Element => {
     }
   }, [walletAddress]);
 
-  if (loading) {
+  if (isLoading) {
     return <Spinner />;
   }
   return (
@@ -45,7 +45,7 @@ export const InterfaceAuthenticate = (): JSX.Element => {
           className="masa-button authenticate-button"
           onClick={handleLogin}
         >
-          {loading ? 'loading...' : 'Get Started'}
+          {isLoading ? 'loading...' : 'Get Started'}
         </button>
         <div className="dont-have-a-wallet">
           <a>

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

@@ -4,17 +4,17 @@ import { MasaLoading } from '../../../masa-loading';
 import { Spinner } from '../../../spinner';
 
 export const InterfaceConnected = (): JSX.Element => {
-  const { loading, closeModal } = useMasa();
+  const { closeModal, isLoading } = useMasa();
 
   useEffect(() => {
-    if (!loading) {
+    if (!isLoading) {
       setTimeout(() => {
         closeModal?.();
       }, 3000);
     }
-  }, [loading, closeModal]);
+  }, [isLoading, closeModal]);
 
-  if (loading) return <MasaLoading />;
+  if (isLoading) return <MasaLoading />;
 
   return (
     <div className="interface-connected">

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

@@ -2,11 +2,11 @@ import React from 'react';
 import { useMetamask } from '../../../../provider';
 
 export const InterfaceConnector = ({
-  disable,
+  disableMetamask,
 }: {
-  disable?: boolean;
+  disableMetamask?: boolean;
 }): JSX.Element => {
-  const { connect } = useMetamask({ disable });
+  const { connect } = useMetamask({ disabled: disableMetamask });
 
   return (
     <div className="interface-connect">

src/components/masa-interface/pages/create-credit-score/create-credit-score.tsx

@@ -3,7 +3,7 @@ import { useMasa } from '../../../../provider';
 import { MasaLoading } from '../../../masa-loading';
 
 export const InterfaceCreateCreditScore = (): JSX.Element => {
-  const { handleCreateCreditScore, loading } = useMasa();
+  const { handleCreateCreditScore, isLoading } = useMasa();
   const [error, setError] = useState<string | null>(null);
 
   const createCreditScore = useCallback(async () => {
@@ -14,7 +14,7 @@ export const InterfaceCreateCreditScore = (): JSX.Element => {
       setError('There is not enough data for generating a credit report');
   }, [handleCreateCreditScore]);
 
-  if (loading) return <MasaLoading />;
+  if (isLoading) return <MasaLoading />;
 
   return (
     <div className="interface-create-identity">

src/components/masa-interface/pages/create-identity/create-identity.tsx

@@ -3,13 +3,13 @@ import { useMasa } from '../../../../provider';
 import { MasaLoading } from '../../../masa-loading';
 
 export const InterfaceCreateIdentity = (): JSX.Element => {
-  const { handlePurchaseIdentity, handleLogout, loading } = useMasa();
+  const { handlePurchaseIdentity, handleLogout, isLoading } = useMasa();
 
   const createIdentity = useCallback(async () => {
     await handlePurchaseIdentity?.();
   }, [handlePurchaseIdentity]);
 
-  if (loading) return <MasaLoading />;
+  if (isLoading) return <MasaLoading />;
 
   return (
     <div className="interface-create-identity">

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

@@ -4,7 +4,8 @@ import { MasaLoading } from '../../../masa-loading';
 import { Network } from '../../../../helpers';
 
 export const InterfaceSwitchChain = (): JSX.Element => {
-  const { networkName, loading, switchNetwork, SupportedNetworks } = useMasa();
+  const { networkName, isLoading, switchNetwork, SupportedNetworks } =
+    useMasa();
 
   const currentNetwork: Network | null = useMemo(() => {
     if (SupportedNetworks && networkName)
@@ -27,7 +28,7 @@ export const InterfaceSwitchChain = (): JSX.Element => {
     }
   }, [switchNetwork, currentNetwork]);
 
-  if (loading) return <MasaLoading />;
+  if (isLoading) return <MasaLoading />;
 
   return (
     <div className="interface-connected">

src/helpers/masa.ts

@@ -1,20 +1,13 @@
-import { Environment, environments, Masa } from '@masa-finance/masa-sdk';
-import { ethers, Wallet } from 'ethers';
+import {
+  createRandomWallet,
+  Environment,
+  environments,
+  Masa,
+} from '@masa-finance/masa-sdk';
+import { ethers } from 'ethers';
 import { ArweaveConfig, getWeb3Provider } from '../provider';
 import { getNetworkNameByChainId } from './networks';
 
-export const createRandomWallet = (): Wallet | null => {
-  console.info('Creating random wallet!');
-  const wallet = ethers.Wallet.createRandom();
-  const provider = getWeb3Provider();
-
-  if (provider) {
-    return wallet.connect(provider);
-  }
-
-  return null;
-};
-
 export const createNewMasa = async ({
   signer,
   environmentName,
@@ -25,20 +18,19 @@ export const createNewMasa = async ({
   environmentName: string;
   arweaveConfig?: ArweaveConfig;
   verbose: boolean;
-}): Promise<Masa | null> => {
+}): Promise<Masa | undefined> => {
   const newSigner: ethers.Signer | null = signer
     ? signer
-    : createRandomWallet();
+    : createRandomWallet(getWeb3Provider());
 
-  if (!newSigner) return null;
+  if (!newSigner) return;
 
   const environment = environments.find(
     (environment: Environment) => environment.name === environmentName
   );
-  if (!environment) return null;
+  if (!environment) return;
 
   const chainId: number = await newSigner.getChainId();
-  console.log({ NETWORK: chainId });
 
   return new Masa({
     wallet: newSigner,