diff --git a/src/components/masa-interface/masa-interface.tsx b/src/components/masa-interface/masa-interface.tsx index c58f121e..c1093660 100644 --- a/src/components/masa-interface/masa-interface.tsx +++ b/src/components/masa-interface/masa-interface.tsx @@ -44,7 +44,7 @@ export const MasaInterface = ({ hasWalletAddress, identity, isLoggedIn, - signer, + closeModal, scope, creditScores, @@ -59,21 +59,20 @@ export const MasaInterface = ({ const page = useMemo(() => { if (verbose) { - console.log('INTERFACE', { - hasWalletAddress, - verbose, - identity, - isLoggedIn, - scope, - signer, - creditScores, - soulnames, - forcedPage, - forceNetwork, - currentNetwork, - useRainbowKit, - isConnected, - }); + // console.log('INTERFACE', { + // hasWalletAddress, + // verbose, + // identity, + // isLoggedIn, + // scope, + // creditScores, + // soulnames, + // forcedPage, + // forceNetwork, + // currentNetwork, + // useRainbowKit, + // isConnected, + // }); } if (forcedPage) return forcedPage; @@ -130,7 +129,6 @@ export const MasaInterface = ({ identity, isLoggedIn, scope, - signer, creditScores, soulnames, forcedPage, diff --git a/src/components/masa-interface/pages/authenticate/authenticate.tsx b/src/components/masa-interface/pages/authenticate/authenticate.tsx index 23f06fce..ce3800cc 100644 --- a/src/components/masa-interface/pages/authenticate/authenticate.tsx +++ b/src/components/masa-interface/pages/authenticate/authenticate.tsx @@ -90,14 +90,14 @@ export const InterfaceAuthenticate = (): JSX.Element => {

Want to use a different wallet? {!isLoggedIn && isConnected && ( -

+ Switch Wallet -
+ )}

diff --git a/src/components/modal/styles.scss b/src/components/modal/styles.scss index b25ceded..78af2746 100644 --- a/src/components/modal/styles.scss +++ b/src/components/modal/styles.scss @@ -534,6 +534,9 @@ } .connected-wallet { + display: flex; + justify-content: center; + align-items: center; text-align: center; font-size: 18px; color: rgba(0, 0, 0, 0.6); diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index e3815586..3cd418c2 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -25,6 +25,7 @@ import { useWagmi } from './modules/wagmi'; import { useNetworkSwitch } from './use-network-switch'; import { MasaNetworks } from './configured-rainbowkit-provider/utils'; import { useLogout } from './hooks'; +import { useAccountState } from './use-account-state'; export { SoulNameErrorCodes }; @@ -100,6 +101,20 @@ export const MasaContextProvider = ({ reloadIdentity, } = useIdentity(masaInstance, walletAddress); + const { + isDisconnected, + isLoggedIn: loggedIn, + isLoggingOut, + hasAccountAddress, + } = useAccountState({ + masa: masaInstance, + walletAddress, + signer, + isLoggedIn, + hasWalletAddress, + }); + + console.log({ isDisconnected, loggedIn, isLoggingOut }); // soul names const { soulnames, isSoulnamesLoading, reloadSoulnames } = useSoulnames( masaInstance, @@ -139,6 +154,14 @@ export const MasaContextProvider = ({ setRainbowKitModalCallback, } = useRainbowKit(); + const { logout } = useLogout({ + onLogoutStart: handleLogout, + onLogoutFinish: () => console.log('finished logout'), + walletAddress, + masa: masaInstance, + signer, + }); + // modal const { isModalOpen, @@ -151,7 +174,11 @@ export const MasaContextProvider = ({ openMintMasaGreen, useModalSize, modalSize, - } = useModal(isLoggedIn, hasWalletAddress, areScopesFullfiled); + } = useModal( + isLoggedIn, + hasAccountAddress, // used to be hasWalletAddress + areScopesFullfiled + ); // global loading flag const isLoading = useMemo(() => { @@ -176,13 +203,6 @@ export const MasaContextProvider = ({ wagmiLoading, ]); - const { logout } = useLogout({ - onLogoutStart: () => console.log('starting logout'), - onLogoutFinish: () => console.log('finished logout'), - walletAddress, - masa: masaInstance, - signer, - }); // const providerWagmi = useProvider(); // useEffect(() => { diff --git a/src/provider/modules/network/network.ts b/src/provider/modules/network/network.ts index 1d382e26..16344506 100644 --- a/src/provider/modules/network/network.ts +++ b/src/provider/modules/network/network.ts @@ -9,17 +9,21 @@ import { import { MetaMaskInpageProvider } from '@metamask/providers'; import { useSwitchNetwork } from 'wagmi'; -export const useNetwork = ({ - provider, - useRainbowKitWalletConnect, -}: { - provider?: Wallet | Signer; - useRainbowKitWalletConnect?: boolean; -}): { +export type UseNetworkReturnValue = { addNetwork: (networkDetails: Network) => void; switchNetwork: (networkName: NetworkName) => void; currentNetwork?: Network; -} => { +}; + +export type UseNetworkInputValue = { + provider?: Wallet | Signer; + useRainbowKitWalletConnect?: boolean; +}; + +export const useNetwork = ({ + provider, + useRainbowKitWalletConnect, +}: UseNetworkInputValue): UseNetworkReturnValue => { const [currentNetwork, setCurrentNetwork] = useState(); const { switchNetwork: switchNetworkWagmi } = useSwitchNetwork(); diff --git a/src/provider/modules/session/session.ts b/src/provider/modules/session/session.ts index 560acf06..1235c904 100644 --- a/src/provider/modules/session/session.ts +++ b/src/provider/modules/session/session.ts @@ -90,17 +90,19 @@ export const useSessionDataQuery = ({ }; }; -export const useSession = ( - masa?: Masa, - walletAddress?: string -): { +export type UseSessionReturnType = { isLoggedIn?: boolean; isSessionLoading: boolean; handleLogin: () => void; handleLogout: (logoutCallback?: () => void) => Promise; status: string; error: unknown; -} => { +}; + +export const useSession = ( + masa?: Masa, + walletAddress?: string +): UseSessionReturnType => { const { sessionData, isSessionDataFetching, isSessionDataLoading } = useSessionDataQuery({ masa, walletAddress }); const { diff --git a/src/provider/use-account-state.ts b/src/provider/use-account-state.ts new file mode 100644 index 00000000..134606e8 --- /dev/null +++ b/src/provider/use-account-state.ts @@ -0,0 +1,94 @@ +/** + * quick collector object for account state; + */ + +import { Masa } from '@masa-finance/masa-sdk'; +import { Signer } from 'ethers'; +import { ConnectorData, useAccount } from 'wagmi'; +import { useLogout } from './hooks'; +import { useEffect, useMemo, useState } from 'react'; + +export const useAccountState = ({ + masa, + walletAddress, + signer, + identity, + isLoggedIn, + hasWalletAddress, +}: { + masa?: Masa; + walletAddress?: string; + signer?: Signer; + isLoggedIn?: boolean; + identity?: { + identityId?: string; + address?: string; + }; + hasWalletAddress?: boolean; +}) => { + const [accountAddress, setAccountAddress] = useState( + walletAddress + ); + + const { + isConnected, + isConnecting, + isDisconnected, + connector: activeConnector, + address: wagmiAddress, + } = useAccount(); + const { isLoggingOut, hasLoggedOut } = useLogout({ + masa, + signer, + walletAddress, + }); + + // * detects if we have a new account or chain + useEffect(() => { + const handleConnectorUpdate = ({ account, chain }: ConnectorData) => { + if (account) { + console.log('new account', account); + setAccountAddress(account); + } else if (chain) { + console.log('new chain', chain); + } + }; + + if (activeConnector) { + activeConnector.on('change', handleConnectorUpdate); + } + + return () => { + activeConnector?.off('change', handleConnectorUpdate); + }; + }, [activeConnector]); + + const hasAccountAddress = useMemo(() => { + return !!accountAddress; + }, [accountAddress]); + + useEffect(() => { + // * initial state, just make sure walletAddress is passed to account address + // * if we are initializing + // * TODO: remove this logic once proper walletAddress scoping is in place + if (walletAddress && !accountAddress && !isDisconnected) { + console.log('setting account address to wallet address', walletAddress); + setAccountAddress(walletAddress); + } + }, [walletAddress, accountAddress, wagmiAddress, isDisconnected]); + + return { + accountAddress, + isConnected, + isConnecting, + isDisconnected, + identity, + isLoggedIn, + hasLoggedOut, + isLoggingOut, + + hasWalletAddress, + hasAccountAddress, + walletAddress, + }; +};