From 2b8586c6af2cedf5d6e64aa22d3fc7e345f951f2 Mon Sep 17 00:00:00 2001 From: Sebastian Gerske <13647606+H34D@users.noreply.github.com> Date: Tue, 7 Mar 2023 15:22:01 +0100 Subject: [PATCH] try to fix metamask handling --- .../masa-interface/masa-interface.tsx | 16 +++++--- src/provider/masa-context-provider.tsx | 37 ++++++++++++------ src/provider/masa-shape.ts | 11 ++++-- .../modules/credit-scores/credit-scores.ts | 2 +- src/provider/modules/green/green.ts | 2 +- src/provider/modules/identity/identity.ts | 2 +- src/provider/modules/scopes/scopes.ts | 12 +++--- src/provider/modules/soulnames/soulnames.ts | 2 +- src/provider/modules/wallet/wallet.ts | 6 +-- src/provider/use-metamask.ts | 39 +++++++++++-------- 10 files changed, 78 insertions(+), 51 deletions(-) diff --git a/src/components/masa-interface/masa-interface.tsx b/src/components/masa-interface/masa-interface.tsx index 882199ae..39622eb1 100644 --- a/src/components/masa-interface/masa-interface.tsx +++ b/src/components/masa-interface/masa-interface.tsx @@ -35,7 +35,7 @@ export const MasaInterface = ({ const { isModalOpen, setModalOpen, - isConnected, + hasWalletAddress, identity, isLoggedIn, provider, @@ -46,18 +46,21 @@ export const MasaInterface = ({ forcedPage, currentNetwork, forceNetwork, + verbose, } = useMasa(); const page = useMemo(() => { if (forcedPage) return forcedPage; - if (!isConnected) return 'connector'; + if (!hasWalletAddress) return 'connector'; + + if (verbose) { + console.info({ forceNetwork }); + } if (forceNetwork && currentNetwork?.networkName !== forceNetwork) { return 'switchNetwork'; } - console.log({ forceNetwork }); - if (!isLoggedIn && provider) return 'authenticate'; if ( @@ -73,11 +76,12 @@ export const MasaInterface = ({ if (identity && !creditScores?.length && scope?.includes('credit-score')) return 'createCreditScore'; - if (isConnected && isLoggedIn) return 'connectedState'; + if (hasWalletAddress && isLoggedIn) return 'connectedState'; return 'connector'; }, [ - isConnected, + hasWalletAddress, + verbose, identity, isLoggedIn, scope, diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index 8256c650..602591d2 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -26,13 +26,10 @@ export interface ArweaveConfig { export type EnvironmentNameEx = EnvironmentName & ('local' | 'stage'); export interface MasaContextProviderProps extends MasaShape { - children: React.ReactNode; - company?: string; noWallet?: boolean; signer?: Wallet | Signer; environmentName?: EnvironmentNameEx; arweaveConfig?: ArweaveConfig; - verbose?: boolean; } export const MasaContextProvider = ({ @@ -49,7 +46,7 @@ export const MasaContextProvider = ({ arweaveConfig, // verbose on /off verbose = false, - // force network + // force specific network forceNetwork, }: MasaContextProviderProps): JSX.Element => { // masa @@ -59,7 +56,7 @@ export const MasaContextProvider = ({ const [provider, setProvider] = useState(signer); // wallet - const { walletAddress, isWalletLoading, isConnected } = useWallet( + const { walletAddress, isWalletLoading, hasWalletAddress } = useWallet( masaInstance, provider ); @@ -104,9 +101,9 @@ export const MasaContextProvider = ({ // scope const { scope, setScope, areScopesFullfiled } = useScopes( - masaInstance, soulnames, - isLoggedIn + isLoggedIn, + masaInstance?.config.verbose ); // modal @@ -118,7 +115,7 @@ export const MasaContextProvider = ({ forcedPage, setForcedPage, openMintSoulnameModal, - } = useModal(isLoggedIn, isConnected, areScopesFullfiled); + } = useModal(isLoggedIn, hasWalletAddress, areScopesFullfiled); // global loading flag const isLoading = useMemo(() => { @@ -143,15 +140,29 @@ export const MasaContextProvider = ({ const connect = useCallback( (options?: { scope?: string[]; callback?: () => void }) => { - console.log({ forcedPage }); + if (verbose) { + console.info({ forcedPage }); + } + setModalOpen(true); setForcedPage?.(null); - if (options?.scope) setScope(options.scope); + + if (options?.scope) { + setScope(options.scope); + } + if (typeof options?.callback === 'function') { setModalCallback(() => options?.callback); } }, - [setModalOpen, setModalCallback, setScope, setForcedPage, forcedPage] + [ + setModalOpen, + setModalCallback, + setScope, + setForcedPage, + forcedPage, + verbose, + ] ); useEffect(() => { @@ -183,6 +194,8 @@ export const MasaContextProvider = ({ const context: MasaShape = { // masa instance masa: masaInstance, + verbose: masaInstance?.config.verbose, + // global loading isLoading, @@ -209,7 +222,7 @@ export const MasaContextProvider = ({ // wallet walletAddress, isWalletLoading, - isConnected, + hasWalletAddress, // identity identity, diff --git a/src/provider/masa-shape.ts b/src/provider/masa-shape.ts index 0cfd0f37..47c33db9 100644 --- a/src/provider/masa-shape.ts +++ b/src/provider/masa-shape.ts @@ -9,7 +9,7 @@ import { SoulNameDetails, VerifyGreenResult, } from '@masa-finance/masa-sdk'; -import { BigNumber, ethers } from 'ethers'; +import { BigNumber, Signer, Wallet } from 'ethers'; import { Network } from '../helpers'; export interface MasaShape { @@ -17,6 +17,9 @@ export interface MasaShape { // masa masa?: Masa; + // verbose flag + verbose?: boolean; + // global loading isLoading?: boolean; @@ -29,8 +32,8 @@ export interface MasaShape { company?: string; // provider - provider?: ethers.Wallet | ethers.Signer; - setProvider?: (provider?: ethers.Wallet | ethers.Signer) => void; + provider?: Wallet | Signer; + setProvider?: (provider?: Wallet | Signer) => void; // modal isModalOpen?: boolean; @@ -43,7 +46,7 @@ export interface MasaShape { // wallet walletAddress?: string; isWalletLoading?: boolean; - isConnected?: boolean; + hasWalletAddress?: boolean; // identity identity?: { diff --git a/src/provider/modules/credit-scores/credit-scores.ts b/src/provider/modules/credit-scores/credit-scores.ts index 90c45ee9..568865e8 100644 --- a/src/provider/modules/credit-scores/credit-scores.ts +++ b/src/provider/modules/credit-scores/credit-scores.ts @@ -54,7 +54,7 @@ export const useCreditScores = ( }[] ) => { if (masa?.config.verbose) { - console.log({ creditScores, network: masa?.config.network }); + console.info({ creditScores, network: masa?.config.network }); } }, }); diff --git a/src/provider/modules/green/green.ts b/src/provider/modules/green/green.ts index 20c0cedb..b2d7ba1a 100644 --- a/src/provider/modules/green/green.ts +++ b/src/provider/modules/green/green.ts @@ -61,7 +61,7 @@ export const useGreen = ( }[] ) => { if (masa?.config.verbose) { - console.log({ greens, network: masa?.config.network }); + console.info({ greens, network: masa?.config.network }); } }, }); diff --git a/src/provider/modules/identity/identity.ts b/src/provider/modules/identity/identity.ts index 4ccec4f7..000655ab 100644 --- a/src/provider/modules/identity/identity.ts +++ b/src/provider/modules/identity/identity.ts @@ -44,7 +44,7 @@ export const useIdentity = ( retry: false, onSuccess: (identity?: { identityId?: BigNumber; address?: string }) => { if (masa?.config.verbose) { - console.log({ identity, network: masa?.config.network }); + console.info({ identity, network: masa?.config.network }); } }, } diff --git a/src/provider/modules/scopes/scopes.ts b/src/provider/modules/scopes/scopes.ts index af3b31c4..13373904 100644 --- a/src/provider/modules/scopes/scopes.ts +++ b/src/provider/modules/scopes/scopes.ts @@ -1,15 +1,15 @@ -import { Masa, SoulNameDetails } from '@masa-finance/masa-sdk'; +import { SoulNameDetails } from '@masa-finance/masa-sdk'; import { useMemo, useState } from 'react'; export const useScopes = ( - masa?: Masa, soulnames?: SoulNameDetails[], - isLoggedIn?: boolean + isLoggedIn?: boolean, + verbose?: boolean ) => { const [scope, setScope] = useState([]); const areScopesFullfiled = useMemo(() => { - if (masa?.config.verbose) { - console.log({ scope, soulnames, isLoggedIn }); + if (verbose) { + console.info({ scope, soulnames, isLoggedIn }); } if (scope?.includes('soulname') && (soulnames?.length ?? 0) === 0) { @@ -21,7 +21,7 @@ export const useScopes = ( } return true; - }, [soulnames, scope, isLoggedIn, masa]); + }, [soulnames, scope, isLoggedIn, verbose]); return { scope, setScope, areScopesFullfiled }; }; diff --git a/src/provider/modules/soulnames/soulnames.ts b/src/provider/modules/soulnames/soulnames.ts index a3c58dac..4ff78cc2 100644 --- a/src/provider/modules/soulnames/soulnames.ts +++ b/src/provider/modules/soulnames/soulnames.ts @@ -37,7 +37,7 @@ export const useSoulnames = ( retry: false, onSuccess: (soulNames?: SoulNameDetails[]) => { if (masa?.config.verbose) { - console.log({ soulNames, network: masa?.config.network }); + console.info({ soulNames, network: masa?.config.network }); } }, } diff --git a/src/provider/modules/wallet/wallet.ts b/src/provider/modules/wallet/wallet.ts index 2fb5eddb..b508e1b5 100644 --- a/src/provider/modules/wallet/wallet.ts +++ b/src/provider/modules/wallet/wallet.ts @@ -9,7 +9,7 @@ export const useWallet = ( ): { walletAddress: string | undefined; isWalletLoading: boolean; - isConnected: boolean; + hasWalletAddress: boolean; status: string; error: unknown; } => { @@ -32,14 +32,14 @@ export const useWallet = ( } ); - const isConnected = useMemo(() => { + const hasWalletAddress = useMemo(() => { return !!walletAddress; }, [walletAddress]); return { walletAddress: !provider ? undefined : walletAddress, isWalletLoading: isLoading || isFetching, - isConnected, + hasWalletAddress, status, error, }; diff --git a/src/provider/use-metamask.ts b/src/provider/use-metamask.ts index b6a6d120..0d24651a 100644 --- a/src/provider/use-metamask.ts +++ b/src/provider/use-metamask.ts @@ -10,8 +10,7 @@ export const useMetamask = ({ disabled?: boolean; }): { connectMetamask: () => void } => { const [connectedAccounts, setConnectedAccounts] = useState([]); - const { setProvider, handleLogout, isConnected, walletAddress, masa } = - useMasa(); + const { setProvider, handleLogout, walletAddress, verbose } = useMasa(); const { localStorageSet, localStorageGet } = useLocalStorage(); const metamaskStorageKey = 'masa-react-metamask-connected'; @@ -31,7 +30,7 @@ export const useMetamask = ({ let metamaskConnected: boolean = localStorageGet(metamaskStorageKey) || false; - if (!disabled && window?.ethereum && !metamaskConnected) { + if (!disabled && window?.ethereum && !walletAddress) { let accounts: Maybe; try { @@ -39,8 +38,8 @@ export const useMetamask = ({ method: 'eth_requestAccounts', }); - if (masa?.config.verbose) { - console.log({ accounts }); + if (verbose) { + console.info({ accounts }); } } catch (error) { if (error instanceof Error) { @@ -50,8 +49,9 @@ export const useMetamask = ({ if (accounts && Array.isArray(accounts)) { const signer = getWeb3Provider()?.getSigner(); - if (accounts.length > 0 && signer) { - setProvider?.(signer); + + if (signer && accounts.length > 0 && setProvider) { + setProvider(signer); metamaskConnected = true; localStorageSet(metamaskStorageKey, true); } else { @@ -62,28 +62,35 @@ export const useMetamask = ({ } } - if (masa?.config.verbose) { - console.log({ metamaskConnected }); + if (verbose) { + console.info({ metamaskConnected }); } return metamaskConnected; - }, [disabled, setProvider, masa, localStorageGet, localStorageSet]); + }, [ + disabled, + verbose, + setProvider, + localStorageGet, + localStorageSet, + walletAddress, + ]); /** * Disconnect */ const disconnectMetamask = useCallback(async (): Promise => { - if (isConnected) { - localStorageSet(metamaskStorageKey, false); + if (walletAddress) { await handleLogout?.(); + localStorageSet(metamaskStorageKey, false); } - }, [isConnected, handleLogout, localStorageSet]); + }, [walletAddress, handleLogout, localStorageSet]); /** * try to connect metamask but not if already connected */ useEffect(() => { - const connectWalletOnPageLoad = async (): Promise => { + const connectMetamaskOnPageLoad = async (): Promise => { const metamaskConnected: boolean | undefined = localStorageGet(metamaskStorageKey); @@ -100,8 +107,8 @@ export const useMetamask = ({ } }; - void connectWalletOnPageLoad(); - }, [walletAddress, connectMetamask, masa, localStorageGet]); + void connectMetamaskOnPageLoad(); + }, [connectMetamask, localStorageGet]); /** * disconnect metamask on wallet change