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,
+ };
+};