Skip to content

Commit

Permalink
Merge pull request #1912 from Web3Auth/feat/error-loading-states
Browse files Browse the repository at this point in the history 
handle error, loading states
  • Loading branch information
@chaitanyapotti
chaitanyapotti authored Aug 30, 2024
2 parents 5658f61 + 52c8551 commit 19fc233
Show file tree
Hide file tree
Showing 6 changed files with 147 additions and 20 deletions.
42 changes: 35 additions & 7 deletions packages/composables/modal-vue-composables/src/Web3AuthProvider.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,19 @@ export default defineComponent({
},
setup(props) {
const web3Auth = shallowRef<Web3Auth | null>(null);
const isConnected = ref(false);
const provider = ref<IProvider | null>(null);
const userInfo = ref<Partial<OpenloginUserInfo> | null>(null);
const isMFAEnabled = ref(false);
const isInitialized = ref(false);
const status = ref<ADAPTER_STATUS_TYPE | null>(null);

const isInitializing = ref(false);
const initError = ref<Error | null>(null);
const isInitialized = ref(false);

const isConnecting = ref(false);
const connectError = ref<Error | null>(null);
const isConnected = ref(false);

const addPlugin = (plugin: IPlugin) => {
if (!web3Auth.value) throw WalletInitializationError.notReady();
return web3Auth.value.addPlugin(plugin);
Expand All @@ -41,8 +47,17 @@ export default defineComponent({

const initModal = async (modalParams: { modalConfig?: Record<string, ModalConfig> } = {}) => {
if (!web3Auth.value) throw WalletInitializationError.notReady();
await web3Auth.value.initModal(modalParams);
triggerRef(web3Auth);
try {
initError.value = null;
isInitializing.value = true;
await web3Auth.value.initModal(modalParams);
triggerRef(web3Auth);
} catch (error) {
initError.value = error as Error;
throw error;
} finally {
isInitializing.value = false;
}
};

const enableMFA = async (loginParams?: Partial<LoginParams>) => {
Expand All @@ -64,9 +79,18 @@ export default defineComponent({

const connect = async () => {
if (!web3Auth.value) throw WalletInitializationError.notReady();
const localProvider = await web3Auth.value.connect();
triggerRef(web3Auth);
return localProvider;
try {
connectError.value = null;
isConnecting.value = true;
const localProvider = await web3Auth.value.connect();
triggerRef(web3Auth);
return localProvider;
} catch (error) {
connectError.value = error as Error;
throw error;
} finally {
isConnecting.value = false;
}
};

const addAndSwitchChain = async (chainConfig: CustomChainConfig) => {
Expand Down Expand Up @@ -204,6 +228,10 @@ export default defineComponent({
addPlugin,
authenticateUser,
switchChain,
isInitializing,
isConnecting,
initError,
connectError,
});
},
render() {
Expand Down
4 changes: 4 additions & 0 deletions packages/composables/modal-vue-composables/src/interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,14 @@ export interface Web3AuthProviderProps {
}

interface IBaseWeb3AuthComposableContext {
isConnecting: Ref<boolean>;
connectError: Ref<Error | null>;
isConnected: Ref<boolean>;
provider: Ref<IProvider | null>;
userInfo: Ref<Partial<OpenloginUserInfo> | null>;
isMFAEnabled: Ref<boolean>;
isInitializing: Ref<boolean>;
initError: Ref<Error | null>;
isInitialized: Ref<boolean>;
status: Ref<ADAPTER_STATUS_TYPE | null>;
enableMFA(params?: LoginParams): Promise<void>;
Expand Down
42 changes: 35 additions & 7 deletions packages/composables/no-modal-vue-composables/src/Web3AuthProvider.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,19 @@ export default defineComponent({
},
setup(props) {
const web3Auth = shallowRef<Web3AuthNoModal | null>(null);
const isConnected = ref(false);
const provider = ref<IProvider | null>(null);
const userInfo = ref<Partial<OpenloginUserInfo> | null>(null);
const isMFAEnabled = ref(false);
const isInitialized = ref(false);
const status = ref<ADAPTER_STATUS_TYPE | null>(null);

const isInitializing = ref(false);
const initError = ref<Error | null>(null);
const isInitialized = ref(false);

const isConnecting = ref(false);
const connectError = ref<Error | null>(null);
const isConnected = ref(false);

const addPlugin = (plugin: IPlugin) => {
if (!web3Auth.value) throw WalletInitializationError.notReady();
return web3Auth.value.addPlugin(plugin);
Expand All @@ -42,8 +48,17 @@ export default defineComponent({

const init = async () => {
if (!web3Auth.value) throw WalletInitializationError.notReady();
await web3Auth.value.init();
triggerRef(web3Auth);
try {
initError.value = null;
isInitializing.value = true;
await web3Auth.value.init();
triggerRef(web3Auth);
} catch (error) {
initError.value = error as Error;
throw error;
} finally {
isInitializing.value = false;
}
};

const enableMFA = async (loginParams?: Partial<LoginParams>) => {
Expand All @@ -65,9 +80,18 @@ export default defineComponent({

const connectTo = async <T>(walletName: WALLET_ADAPTER_TYPE, loginParams?: T) => {
if (!web3Auth.value) throw WalletInitializationError.notReady();
const localProvider = await web3Auth.value.connectTo(walletName, loginParams);
triggerRef(web3Auth);
return localProvider;
try {
connectError.value = null;
isConnecting.value = true;
const localProvider = await web3Auth.value.connectTo(walletName, loginParams);
triggerRef(web3Auth);
return localProvider;
} catch (error) {
connectError.value = error as Error;
throw error;
} finally {
isConnecting.value = false;
}
};

const addAndSwitchChain = async (chainConfig: CustomChainConfig) => {
Expand Down Expand Up @@ -205,6 +229,10 @@ export default defineComponent({
addPlugin,
authenticateUser,
switchChain,
isInitializing,
isConnecting,
initError,
connectError,
});
},
render() {
Expand Down
4 changes: 4 additions & 0 deletions packages/composables/no-modal-vue-composables/src/interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,14 @@ export interface Web3AuthProviderProps {
}

interface IBaseWeb3AuthComposableContext {
isConnecting: Ref<boolean>;
connectError: Ref<Error | null>;
isConnected: Ref<boolean>;
provider: Ref<IProvider | null>;
userInfo: Ref<Partial<OpenloginUserInfo> | null>;
isMFAEnabled: Ref<boolean>;
isInitializing: Ref<boolean>;
initError: Ref<Error | null>;
isInitialized: Ref<boolean>;
status: Ref<ADAPTER_STATUS_TYPE | null>;
enableMFA(params?: LoginParams): Promise<void>;
Expand Down
36 changes: 33 additions & 3 deletions packages/hooks/modal-react-hooks/src/context/Web3AuthInnerContext.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
const { children, config } = params;
const [web3Auth, setWeb3Auth] = useState<Web3Auth | null>(null);

const [isConnecting, setIsConnecting] = useState<boolean>(false);
const [isInitializing, setIsInitializing] = useState<boolean>(false);
const [initError, setInitError] = useState<Error | null>(null);
const [connectError, setConnectError] = useState<Error | null>(null);
const [isConnected, setIsConnected] = useState<boolean>(false);
const [provider, setProvider] = useState<IProvider | null>(null);
const [userInfo, setUserInfo] = useState<Partial<OpenloginUserInfo> | null>(null);
Expand All @@ -46,7 +50,16 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
const initModal = useCallback(
async (modalParams: { modalConfig?: Record<string, ModalConfig> } = {}) => {
if (!web3Auth) throw WalletInitializationError.notReady();
await web3Auth.initModal(modalParams);
try {
setInitError(null);
setIsInitializing(true);
await web3Auth.initModal(modalParams);
} catch (error) {
setInitError(error as Error);
throw error;
} finally {
setIsInitializing(false);
}
},
[web3Auth]
);
Expand Down Expand Up @@ -75,8 +88,17 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider

const connect = useCallback(async () => {
if (!web3Auth) throw WalletInitializationError.notReady();
const localProvider = await web3Auth.connect();
return localProvider;
try {
setConnectError(null);
setIsConnecting(true);
const localProvider = await web3Auth.connect();
return localProvider;
} catch (error) {
setConnectError(error as Error);
throw error;
} finally {
setIsConnecting(false);
}
}, [web3Auth]);

const addAndSwitchChain = useCallback(
Expand Down Expand Up @@ -214,6 +236,10 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
authenticateUser,
switchChain,
getPlugin,
isInitializing,
isConnecting,
initError,
connectError,
};
}, [
web3Auth,
Expand All @@ -233,6 +259,10 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
addPlugin,
authenticateUser,
switchChain,
isInitializing,
isConnecting,
initError,
connectError,
]);

return createElement(Web3AuthInnerContext.Provider, { value }, children);
Expand Down
39 changes: 36 additions & 3 deletions packages/hooks/no-modal-react-hooks/src/context/Web3AuthInnerContext.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
const { children, config } = params;
const [web3Auth, setWeb3Auth] = useState<Web3AuthNoModal | null>(null);

const [isConnecting, setIsConnecting] = useState<boolean>(false);
const [isInitializing, setIsInitializing] = useState<boolean>(false);
const [initError, setInitError] = useState<Error | null>(null);
const [connectError, setConnectError] = useState<Error | null>(null);
const [isConnected, setIsConnected] = useState<boolean>(false);
const [provider, setProvider] = useState<IProvider | null>(null);
const [userInfo, setUserInfo] = useState<Partial<OpenloginUserInfo> | null>(null);
Expand Down Expand Up @@ -84,9 +88,21 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
}
}, [web3Auth, isConnected]);

// TODO: Init ourselves in v9
// TODO: don't throw error in init, connect in v9

const init = useCallback(async () => {
if (!web3Auth) throw WalletInitializationError.notReady();
await web3Auth.init();
try {
setInitError(null);
setIsInitializing(true);
await web3Auth.init();
} catch (error) {
setInitError(error as Error);
throw error;
} finally {
setIsInitializing(false);
}
}, [web3Auth]);

useEffect(() => {
Expand Down Expand Up @@ -158,8 +174,17 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
const connectTo = useCallback(
async <T>(walletName: WALLET_ADAPTER_TYPE, loginParams?: T) => {
if (!web3Auth) throw WalletInitializationError.notReady();
const localProvider = await web3Auth.connectTo(walletName, loginParams);
return localProvider;
try {
setConnectError(null);
setIsConnecting(true);
const localProvider = await web3Auth.connectTo(walletName, loginParams);
return localProvider;
} catch (error) {
setConnectError(error as Error);
throw error;
} finally {
setIsConnecting(false);
}
},
[web3Auth]
);
Expand Down Expand Up @@ -213,6 +238,10 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
addPlugin,
authenticateUser,
switchChain,
isInitializing,
isConnecting,
initError,
connectError,
};
}, [
web3Auth,
Expand All @@ -232,6 +261,10 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
addPlugin,
authenticateUser,
switchChain,
isConnecting,
isInitializing,
initError,
connectError,
]);

return createElement(Web3AuthInnerContext.Provider, { value }, children);
Expand Down

0 comments on commit 19fc233

Please sign in to comment.