Skip to content

Commit 0ce542c

Browse files
tanguyenvntanguyenvn
committed
turn plugins to functions
1 parent a337f8c commit 0ce542c

File tree

23 files changed

+137
-144
lines changed

23 files changed

+137
-144
lines changed

‎demo/vite-react-app/src/services/walletServiceHandlers.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/* eslint-disable @typescript-eslint/no-explicit-any */
2-
import { log, WalletServicesPlugin } from "@web3auth/modal";
2+
import { log, type WalletServicesPluginType } from "@web3auth/modal";
33
import { verifyMessage as eipVerifyMessage } from "@web3auth/sign-in-with-ethereum";
44
import { BrowserProvider, parseEther } from "ethers";
55

66
import { getV4TypedData } from "../config/config";
77

8-
export const walletSignPersonalMessage = async (provider: WalletServicesPlugin["provider"], uiConsole: any) => {
8+
export const walletSignPersonalMessage = async (provider: WalletServicesPluginType["provider"], uiConsole: any) => {
99
try {
1010
const ethProvider = new BrowserProvider(provider);
1111
const signer = await ethProvider.getSigner();
@@ -31,7 +31,7 @@ export const walletSignPersonalMessage = async (provider: WalletServicesPlugin["
3131
}
3232
};
3333

34-
export const walletSignTypedMessage = async (provider: WalletServicesPlugin["provider"], uiConsole: any) => {
34+
export const walletSignTypedMessage = async (provider: WalletServicesPluginType["provider"], uiConsole: any) => {
3535
try {
3636
const ethProvider = new BrowserProvider(provider);
3737
const signer = await ethProvider.getSigner();
@@ -55,7 +55,7 @@ export const walletSignTypedMessage = async (provider: WalletServicesPlugin["pro
5555
}
5656
};
5757

58-
export const walletSendEth = async (provider: WalletServicesPlugin["provider"], uiConsole: any) => {
58+
export const walletSendEth = async (provider: WalletServicesPluginType["provider"], uiConsole: any) => {
5959
try {
6060
const ethProvider = new BrowserProvider(provider);
6161
const signer = await ethProvider.getSigner();
@@ -73,7 +73,7 @@ export const walletSendEth = async (provider: WalletServicesPlugin["provider"],
7373
}
7474
};
7575

76-
export const walletSignTransaction = async (provider: WalletServicesPlugin["provider"], uiConsole: any) => {
76+
export const walletSignTransaction = async (provider: WalletServicesPluginType["provider"], uiConsole: any) => {
7777
try {
7878
const ethProvider = new BrowserProvider(provider);
7979
const accounts = await provider.request({ method: "eth_accounts" });

‎demo/vite-react-app/src/services/web3auth.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CONNECTOR_EVENTS, IProvider, PLUGIN_EVENTS, WalletServicesPlugin, Web3Auth, WEB3AUTH_NETWORK_TYPE, SMART_ACCOUNT } from "@web3auth/modal";
1+
import { CONNECTOR_EVENTS, IProvider, PLUGIN_EVENTS, WalletServicesPluginType, Web3Auth, WEB3AUTH_NETWORK_TYPE, SMART_ACCOUNT, walletServicesPlugin, EVM_PLUGINS } from "@web3auth/modal";
22
import { createContext, FunctionComponent, ReactNode, useContext, useEffect, useState } from "react";
33
import { CHAIN_CONFIG, CHAIN_CONFIG_TYPE } from "../config/chainConfig";
44
import * as ethHandler from "./ethHandler";
@@ -63,7 +63,7 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
6363
const [web3Auth, setWeb3Auth] = useState<Web3Auth | null>(null);
6464
const [provider, setProvider] = useState<IProvider | null>(null);
6565
const [waasProvider, setWaasProvider] = useState<IProvider | null>(null);
66-
const [walletServicesPlugin, setWalletServicesPlugin] = useState<WalletServicesPlugin | null>(null);
66+
const [wsPlugin, setWsPlugin] = useState<WalletServicesPluginType | null>(null);
6767
const [user, setUser] = useState<unknown | null>(null);
6868
const [isLoading, setIsLoading] = useState(false);
6969

@@ -90,7 +90,7 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
9090
});
9191
};
9292

93-
const subscribePluginEvents = (plugin: WalletServicesPlugin) => {
93+
const subscribePluginEvents = (plugin: WalletServicesPluginType) => {
9494
// Can subscribe to all PLUGIN_EVENTS and LOGIN_MODAL_EVENTS
9595
plugin.on(PLUGIN_EVENTS.CONNECTED, (data: unknown) => {
9696
console.log("Yeah!, you are successfully logged in to plugin");
@@ -147,19 +147,18 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
147147
primaryButton: "socialLogin",
148148
},
149149
enableLogging: true,
150+
plugins: [walletServicesPlugin()],
150151
});
151152

152-
// Wallet Services Plugin
153-
154-
const walletServicesPlugin = new WalletServicesPlugin();
155-
156-
subscribePluginEvents(walletServicesPlugin);
157-
setWalletServicesPlugin(walletServicesPlugin);
158-
web3AuthInstance.addPlugin(walletServicesPlugin);
153+
setWsPlugin(wsPlugin);
159154

160155
subscribeAuthEvents(web3AuthInstance);
161156
setWeb3Auth(web3AuthInstance);
162-
await web3AuthInstance.initModal();
157+
await web3AuthInstance.init();
158+
159+
const plugin = web3AuthInstance.getPlugin(EVM_PLUGINS.WALLET_SERVICES) as WalletServicesPluginType;
160+
setWsPlugin(plugin);
161+
subscribePluginEvents(plugin);
163162
} catch (error) {
164163
console.error(error);
165164
} finally {
@@ -265,7 +264,7 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
265264
};
266265

267266
const showWalletConnectScanner = async () => {
268-
if (!walletServicesPlugin) {
267+
if (!wsPlugin) {
269268
console.log("walletServicesPlugin not initialized yet");
270269
uiConsole("walletServicesPlugin not initialized yet");
271270
return;
@@ -275,11 +274,11 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
275274
uiConsole("web3Auth not initialized yet");
276275
return;
277276
}
278-
await walletServicesPlugin.showWalletConnectScanner();
277+
await wsPlugin.showWalletConnectScanner();
279278
};
280279

281280
const showWalletUi = async () => {
282-
if (!walletServicesPlugin) {
281+
if (!wsPlugin) {
283282
console.log("walletServicesPlugin not initialized yet");
284283
uiConsole("walletServicesPlugin not initialized yet");
285284
return;
@@ -289,7 +288,7 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
289288
uiConsole("web3Auth not initialized yet");
290289
return;
291290
}
292-
await walletServicesPlugin.showWalletUi();
291+
await wsPlugin.showWalletUi();
293292
};
294293

295294
const uiConsole = (...args: unknown[]): void => {

‎demo/vue-app-new/src/MainView.vue‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
3-
import { CHAIN_NAMESPACES, ChainNamespaceType, coinbaseConnector, ConnectorFn, NFTCheckoutPlugin, storageAvailable, WALLET_CONNECTORS, walletConnectV2Connector, WalletServicesPlugin, type Web3AuthOptions } from "@web3auth/modal";
3+
import { CHAIN_NAMESPACES, ChainNamespaceType, coinbaseConnector, ConnectorFn, nftCheckoutPlugin, PluginFn, storageAvailable, WALLET_CONNECTORS, walletConnectV2Connector, walletServicesPlugin, type Web3AuthOptions } from "@web3auth/modal";
44
import { Web3AuthContextConfig, Web3AuthProvider } from "@web3auth/modal/vue";
55
import { WalletServicesProvider } from "@web3auth/no-modal/vue";
66
import { computed, onBeforeMount, ref, watch } from "vue";
@@ -55,6 +55,17 @@ const options = computed((): Web3AuthOptions => {
5555
};
5656
}
5757
58+
// Plugins
59+
const plugins: PluginFn[] = [];
60+
if (formData.chainNamespace === CHAIN_NAMESPACES.EIP155 || formData.chainNamespace === CHAIN_NAMESPACES.SOLANA) {
61+
if (formData.nftCheckoutPlugin.enable && formData.chainNamespace === CHAIN_NAMESPACES.EIP155) {
62+
plugins.push(nftCheckoutPlugin({ clientId: NFT_CHECKOUT_CLIENT_ID }));
63+
}
64+
if (formData.walletPlugin.enable) {
65+
plugins.push(walletServicesPlugin());
66+
}
67+
}
68+
5869
5970
return {
6071
clientId: clientIds[formData.network],
@@ -72,6 +83,7 @@ const options = computed((): Web3AuthOptions => {
7283
chains: [chainConfig, chainConfigs.eip155.find((x) => x.chainId === "0xaa36a7")!],
7384
enableLogging: true,
7485
connectors: externalConnectors.value,
86+
plugins,
7587
multiInjectedProviderDiscovery: formData.multiInjectedProviderDiscovery,
7688
walletServicesConfig,
7789
};
@@ -153,23 +165,8 @@ watch(
153165
);
154166
155167
const configs = computed<Web3AuthContextConfig>(() => {
156-
const plugins = [];
157-
if (formData.chainNamespace === CHAIN_NAMESPACES.EIP155 || formData.chainNamespace === CHAIN_NAMESPACES.SOLANA) {
158-
if (formData.nftCheckoutPlugin.enable && formData.chainNamespace === CHAIN_NAMESPACES.EIP155) {
159-
const nftCheckoutPlugin = new NFTCheckoutPlugin({
160-
clientId: NFT_CHECKOUT_CLIENT_ID,
161-
});
162-
plugins.push(nftCheckoutPlugin);
163-
}
164-
if (formData.walletPlugin.enable) {
165-
const walletServicesPlugin = new WalletServicesPlugin();
166-
plugins.push(walletServicesPlugin);
167-
}
168-
}
169-
170168
return {
171169
web3AuthOptions: options.value,
172-
plugins,
173170
modalConfig: modalParams.value,
174171
hideWalletDiscovery: !formData.showWalletDiscovery,
175172
};

‎packages/modal/src/modalManager.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,9 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
9393
// initialize connectors
9494
this.on(CONNECTOR_EVENTS.CONNECTORS_UPDATED, () => this.initConnectors(projectConfig, params));
9595
await this.loadConnectors({ projectConfig });
96+
97+
// initialize plugins
98+
await this.initPlugins();
9699
}
97100

98101
public async connect(): Promise<IProvider | null> {

‎packages/modal/src/react/context/Web3AuthInnerContext.ts‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
CONNECTOR_EVENTS,
44
CONNECTOR_STATUS,
55
type CONNECTOR_STATUS_TYPE,
6-
type IPlugin,
76
type IProvider,
87
type LoginParams,
98
WalletInitializationError,
@@ -31,14 +30,6 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
3130
const [isInitialized, setIsInitialized] = useState<boolean>(false);
3231
const [status, setStatus] = useState<CONNECTOR_STATUS_TYPE | null>(null);
3332

34-
const addPlugin = useCallback(
35-
(plugin: IPlugin) => {
36-
if (!web3Auth) throw WalletInitializationError.notReady();
37-
return web3Auth.addPlugin(plugin);
38-
},
39-
[web3Auth]
40-
);
41-
4233
const getPlugin = useCallback(
4334
(name: string) => {
4435
if (!web3Auth) throw WalletInitializationError.notReady();
@@ -116,13 +107,8 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
116107
};
117108

118109
resetHookState();
119-
const { web3AuthOptions, plugins = [] } = config;
110+
const { web3AuthOptions } = config;
120111
const web3AuthInstance = new Web3Auth(web3AuthOptions);
121-
if (plugins.length) {
122-
plugins.forEach((plugin) => {
123-
web3AuthInstance.addPlugin(plugin);
124-
});
125-
}
126112
setWeb3Auth(web3AuthInstance);
127113
}, [config]);
128114

@@ -227,7 +213,6 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
227213
enableMFA,
228214
manageMFA,
229215
logout,
230-
addPlugin,
231216
authenticateUser,
232217
switchChain,
233218
getPlugin,
@@ -249,7 +234,6 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
249234
enableMFA,
250235
manageMFA,
251236
logout,
252-
addPlugin,
253237
authenticateUser,
254238
switchChain,
255239
isInitializing,

‎packages/modal/src/react/interfaces.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { ConnectorFn, IBaseWeb3AuthHookContext, IPlugin, IProvider, WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
1+
import type { ConnectorFn, IBaseWeb3AuthHookContext, IProvider, PluginFn, WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
22

33
import { type ModalConfig } from "../interface";
44
import type { Web3Auth, Web3AuthOptions } from "../modalManager";
@@ -8,7 +8,7 @@ export type Web3AuthContextConfig = {
88
modalConfig?: Record<WALLET_CONNECTOR_TYPE, ModalConfig>;
99
hideWalletDiscovery?: boolean;
1010
connectors?: ConnectorFn[];
11-
plugins?: IPlugin[];
11+
plugins?: PluginFn[];
1212
};
1313

1414
export interface Web3AuthProviderProps {

‎packages/modal/src/vue/Web3AuthProvider.ts‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
CONNECTOR_EVENTS,
44
CONNECTOR_STATUS,
55
type CONNECTOR_STATUS_TYPE,
6-
type IPlugin,
76
type IProvider,
87
LoginParams,
98
WalletInitializationError,
@@ -33,11 +32,6 @@ export const Web3AuthProvider = defineComponent({
3332
const connectError = ref<Error | null>(null);
3433
const isConnected = ref(false);
3534

36-
const addPlugin = (plugin: IPlugin) => {
37-
if (!web3Auth.value) throw WalletInitializationError.notReady();
38-
return web3Auth.value.addPlugin(plugin);
39-
};
40-
4135
const getPlugin = (name: string) => {
4236
if (!web3Auth.value) throw WalletInitializationError.notReady();
4337
return web3Auth.value.getPlugin(name);
@@ -101,14 +95,8 @@ export const Web3AuthProvider = defineComponent({
10195
};
10296

10397
resetHookState();
104-
const { web3AuthOptions, plugins = [] } = newConfig;
98+
const { web3AuthOptions } = newConfig;
10599
const web3AuthInstance = new Web3Auth(web3AuthOptions);
106-
if (plugins.length) {
107-
plugins.forEach((plugin) => {
108-
web3AuthInstance.addPlugin(plugin);
109-
});
110-
}
111-
112100
web3Auth.value = web3AuthInstance;
113101
},
114102
{ immediate: true }
@@ -223,7 +211,6 @@ export const Web3AuthProvider = defineComponent({
223211
enableMFA,
224212
manageMFA,
225213
logout,
226-
addPlugin,
227214
authenticateUser,
228215
switchChain,
229216
isInitializing,

‎packages/modal/src/vue/interfaces.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { AuthUserInfo, LoginParams } from "@web3auth/auth";
2-
import type { CONNECTOR_STATUS_TYPE, ConnectorFn, IPlugin, IProvider, UserAuthInfo, WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
2+
import type { CONNECTOR_STATUS_TYPE, ConnectorFn, IPlugin, IProvider, PluginFn, UserAuthInfo, WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
33
import { Ref, ShallowRef } from "vue";
44

55
import type { ModalConfig } from "../interface";
@@ -10,7 +10,7 @@ export type Web3AuthContextConfig = {
1010
modalConfig?: Record<WALLET_CONNECTOR_TYPE, ModalConfig>;
1111
hideWalletDiscovery?: boolean;
1212
connectors?: ConnectorFn[];
13-
plugins?: IPlugin[];
13+
plugins?: PluginFn[];
1414
};
1515

1616
export interface Web3AuthProviderProps {
@@ -31,7 +31,6 @@ interface IBaseWeb3AuthComposableContext {
3131
enableMFA(params?: LoginParams): Promise<void>;
3232
manageMFA(params?: LoginParams): Promise<void>;
3333
logout(params?: { cleanup: boolean }): Promise<void>;
34-
addPlugin(plugin: IPlugin): void;
3534
getPlugin(pluginName: string): IPlugin | null;
3635
authenticateUser(): Promise<UserAuthInfo>;
3736
switchChain(params: { chainId: string }): Promise<void>;

‎packages/no-modal/src/base/core/IWeb3Auth.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
type UserInfo,
1515
type WEB3AUTH_NETWORK_TYPE,
1616
} from "../connector";
17-
import { type IPlugin } from "../plugin";
17+
import { type IPlugin, PluginFn } from "../plugin";
1818
import { type WALLET_CONNECTOR_TYPE } from "../wallet";
1919

2020
export type WalletServicesConfig = Omit<
@@ -101,6 +101,11 @@ export interface IWeb3AuthCoreOptions {
101101
*/
102102
connectors?: ConnectorFn[];
103103

104+
/**
105+
* Plugins to use
106+
*/
107+
plugins?: PluginFn[];
108+
104109
/**
105110
* Whether to enable multi injected provider discovery
106111
* @defaultValue true
@@ -118,15 +123,14 @@ export interface IWeb3AuthCore extends SafeEventEmitter {
118123
connectedConnectorName: string | null;
119124
status: CONNECTOR_STATUS_TYPE;
120125
provider: IProvider | null;
121-
getCurrentChain(): CustomChainConfig;
122126
init(): Promise<void>;
123-
logout(options?: { cleanup: boolean }): Promise<void>;
127+
getCurrentChain(): CustomChainConfig;
124128
getConnector(connectorName: WALLET_CONNECTOR_TYPE): IConnector<unknown> | null;
129+
getPlugin(pluginName: string): IPlugin | null;
130+
logout(options?: { cleanup: boolean }): Promise<void>;
125131
getUserInfo(): Promise<Partial<UserInfo>>;
126132
authenticateUser(): Promise<UserAuthInfo>;
127133
switchChain(params: { chainId: string }): Promise<void>;
128-
addPlugin(plugin: IPlugin): void;
129-
getPlugin(pluginName: string): IPlugin | null;
130134
}
131135

132136
export interface IWeb3Auth extends IWeb3AuthCore {

‎packages/no-modal/src/base/hooks/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export interface IBaseWeb3AuthHookContext {
1818
enableMFA(params?: LoginParams): Promise<void>;
1919
manageMFA(params?: LoginParams): Promise<void>;
2020
logout(params?: { cleanup: boolean }): Promise<void>;
21-
addPlugin(plugin: IPlugin): void;
2221
getPlugin(pluginName: string): IPlugin | null;
2322
authenticateUser(): Promise<UserAuthInfo>;
2423
switchChain(params: { chainId: string }): Promise<void>;

0 commit comments

Comments
 (0)