Skip to content

Commit 8301d1e

Browse files
chaitanyapottichaitanyapotti
authored
Merge pull request #2302 from Web3Auth/fix/disconnect-state-mismatch
Fix: Disconnect state mismatch b/w web3auth sdk and wagmi
2 parents 6c6969c + 6deedb9 commit 8301d1e

File tree

4 files changed

+82
-13
lines changed

4 files changed

+82
-13
lines changed

‎packages/modal/src/react/wagmi/provider.ts‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,14 @@ import { WagmiProviderProps } from "./interface";
2222

2323
const WEB3AUTH_CONNECTOR_ID = "web3auth";
2424

25+
function getWeb3authConnector(config: Config) {
26+
return config.connectors.find((c) => c.id === WEB3AUTH_CONNECTOR_ID);
27+
}
28+
2529
// Helper to initialize connectors for the given wallets
2630
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2731
async function setupConnector(provider: any, config: Config) {
28-
let connector: Connector | CreateConnectorFn = config.connectors.find((c) => c.id === WEB3AUTH_CONNECTOR_ID);
32+
let connector: Connector | CreateConnectorFn = getWeb3authConnector(config);
2933

3034
if (connector) return connector;
3135

@@ -74,8 +78,15 @@ async function connectWeb3AuthWithWagmi(connector: Connector, config: Config) {
7478
}));
7579
}
7680

77-
async function disconnectWeb3AuthFromWagmi(config: Config) {
81+
function resetConnectorState(config: Config) {
7882
config._internal.connectors.setState((prev) => prev.filter((c) => c.id !== WEB3AUTH_CONNECTOR_ID));
83+
config.connectors.filter((c) => c.id !== WEB3AUTH_CONNECTOR_ID);
84+
}
85+
86+
async function disconnectWeb3AuthFromWagmi(config: Config) {
87+
const connector = getWeb3authConnector(config);
88+
await Promise.all([config.storage?.setItem(`${connector?.id}.disconnected`, true), config.storage?.removeItem("injected.connected")]);
89+
resetConnectorState(config);
7990
config.setState((state) => ({
8091
...state,
8192
chainId: state.chainId,
@@ -95,6 +106,13 @@ function Web3AuthWagmiProvider({ children }: PropsWithChildren) {
95106
onDisconnect: async () => {
96107
log.info("Disconnected from wagmi");
97108
if (isConnected) await disconnect();
109+
110+
const connector = getWeb3authConnector(wagmiConfig);
111+
// reset wagmi connector state if the provider handles disconnection because of the accountsChanged event
112+
// from the connected provider
113+
if (connector) {
114+
resetConnectorState(wagmiConfig);
115+
}
98116
},
99117
});
100118

‎packages/modal/src/vue/wagmi/provider.ts‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,14 @@ import { WagmiProviderProps } from "./interface";
1313

1414
const WEB3AUTH_CONNECTOR_ID = "web3auth";
1515

16+
function getWeb3authConnector(config: Config) {
17+
return config.connectors.find((c) => c.id === WEB3AUTH_CONNECTOR_ID);
18+
}
19+
1620
// Helper to initialize connectors for the given wallets
1721
// eslint-disable-next-line @typescript-eslint/no-explicit-any
1822
async function setupConnector(provider: any, config: Config) {
19-
let connector: Connector | CreateConnectorFn = config.connectors.find((c) => c.id === WEB3AUTH_CONNECTOR_ID);
23+
let connector: Connector | CreateConnectorFn = getWeb3authConnector(config);
2024

2125
if (connector) return connector;
2226

@@ -65,8 +69,15 @@ async function connectWeb3AuthWithWagmi(connector: Connector, config: Config) {
6569
}));
6670
}
6771

68-
async function disconnectWeb3AuthFromWagmi(config: Config) {
72+
function resetConnectorState(config: Config) {
6973
config._internal.connectors.setState((prev) => prev.filter((c) => c.id !== WEB3AUTH_CONNECTOR_ID));
74+
config.connectors.filter((c) => c.id !== WEB3AUTH_CONNECTOR_ID);
75+
}
76+
77+
async function disconnectWeb3AuthFromWagmi(config: Config) {
78+
const connector = getWeb3authConnector(config);
79+
await Promise.all([config.storage?.setItem(`${connector?.id}.disconnected`, true), config.storage?.removeItem("injected.connected")]);
80+
resetConnectorState(config);
7081
config.setState((state) => ({
7182
...state,
7283
chainId: state.chainId,
@@ -88,6 +99,13 @@ const Web3AuthWagmiProvider = defineComponent({
8899
onDisconnect: async () => {
89100
log.info("Disconnected from wagmi");
90101
if (isConnected.value) await disconnect();
102+
103+
const connector = getWeb3authConnector(wagmiConfig);
104+
// reset wagmi connector state if the provider handles disconnection because of the accountsChanged event
105+
// from the connected provider
106+
if (connector) {
107+
resetConnectorState(wagmiConfig);
108+
}
91109
},
92110
});
93111

‎packages/no-modal/src/react/wagmi/provider.ts‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,14 @@ import { WagmiProviderProps } from "./interface";
2424

2525
const WEB3AUTH_CONNECTOR_ID = "web3auth";
2626

27+
function getWeb3authConnector(config: Config) {
28+
return config.connectors.find((c) => c.id === WEB3AUTH_CONNECTOR_ID);
29+
}
30+
2731
// Helper to initialize connectors for the given wallets
2832
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2933
async function setupConnector(provider: any, config: Config) {
30-
let connector: Connector | CreateConnectorFn = config.connectors.find((c) => c.id === WEB3AUTH_CONNECTOR_ID);
34+
let connector: Connector | CreateConnectorFn = getWeb3authConnector(config);
3135

3236
if (connector) return connector;
3337

@@ -76,8 +80,15 @@ async function connectWeb3AuthWithWagmi(connector: Connector, config: Config) {
7680
}));
7781
}
7882

79-
async function disconnectWeb3AuthFromWagmi(config: Config) {
83+
function resetConnectorState(config: Config) {
8084
config._internal.connectors.setState((prev) => prev.filter((c) => c.id !== WEB3AUTH_CONNECTOR_ID));
85+
config.connectors.filter((c) => c.id !== WEB3AUTH_CONNECTOR_ID);
86+
}
87+
88+
async function disconnectWeb3AuthFromWagmi(config: Config) {
89+
const connector = getWeb3authConnector(config);
90+
await Promise.all([config.storage?.setItem(`${connector?.id}.disconnected`, true), config.storage?.removeItem("injected.connected")]);
91+
resetConnectorState(config);
8192
config.setState((state) => ({
8293
...state,
8394
chainId: state.chainId,
@@ -97,6 +108,13 @@ function Web3AuthWagmiProvider({ children }: PropsWithChildren) {
97108
onDisconnect: async () => {
98109
log.info("Disconnected from wagmi");
99110
if (isConnected) await disconnect();
111+
112+
const connector = getWeb3authConnector(wagmiConfig);
113+
// reset wagmi connector state if the provider handles disconnection because of the accountsChanged event
114+
// from the connected provider
115+
if (connector) {
116+
resetConnectorState(wagmiConfig);
117+
}
100118
},
101119
});
102120

@@ -191,7 +209,6 @@ export function WagmiProvider({ children, ...props }: PropsWithChildren<WagmiPro
191209
finalConfig.chains = [wagmiChains[0], ...wagmiChains.slice(1)];
192210
}
193211

194-
if (!finalConfig.chains) return;
195212
return createWagmiConfig(finalConfig);
196213
}, [config, web3Auth, isInitialized]);
197214

‎packages/no-modal/src/vue/wagmi/provider.ts‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,14 @@ import { WagmiProviderProps } from "./interface";
2121

2222
const WEB3AUTH_CONNECTOR_ID = "web3auth";
2323

24+
function getWeb3authConnector(config: Config) {
25+
return config.connectors.find((c) => c.id === WEB3AUTH_CONNECTOR_ID);
26+
}
27+
2428
// Helper to initialize connectors for the given wallets
2529
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2630
async function setupConnector(provider: any, config: Config) {
27-
let connector: Connector | CreateConnectorFn = config.connectors.find((c) => c.id === WEB3AUTH_CONNECTOR_ID);
31+
let connector: Connector | CreateConnectorFn = getWeb3authConnector(config);
2832

2933
if (connector) return connector;
3034

@@ -73,8 +77,15 @@ async function connectWeb3AuthWithWagmi(connector: Connector, config: Config) {
7377
}));
7478
}
7579

76-
async function disconnectWeb3AuthFromWagmi(config: Config) {
80+
function resetConnectorState(config: Config) {
7781
config._internal.connectors.setState((prev) => prev.filter((c) => c.id !== WEB3AUTH_CONNECTOR_ID));
82+
config.connectors.filter((c) => c.id !== WEB3AUTH_CONNECTOR_ID);
83+
}
84+
85+
async function disconnectWeb3AuthFromWagmi(config: Config) {
86+
const connector = getWeb3authConnector(config);
87+
await Promise.all([config.storage?.setItem(`${connector?.id}.disconnected`, true), config.storage?.removeItem("injected.connected")]);
88+
resetConnectorState(config);
7889
config.setState((state) => ({
7990
...state,
8091
chainId: state.chainId,
@@ -96,6 +107,13 @@ const Web3AuthWagmiProvider = defineComponent({
96107
onDisconnect: async () => {
97108
log.info("Disconnected from wagmi");
98109
if (isConnected.value) await disconnect();
110+
111+
const connector = getWeb3authConnector(wagmiConfig);
112+
// reset wagmi connector state if the provider handles disconnection because of the accountsChanged event
113+
// from the connected provider
114+
if (connector) {
115+
resetConnectorState(wagmiConfig);
116+
}
99117
},
100118
});
101119

@@ -219,9 +237,9 @@ export const WagmiProvider = defineComponent({
219237

220238
watch(
221239
isInitialized,
222-
(newIsInitialized) => {
240+
(newIsInitialized: boolean, prevIsInitialized: boolean) => {
223241
web3Auth.value?.setAnalyticsProperties({ wagmi_enabled: true });
224-
if (newIsInitialized && !finalConfig.value) {
242+
if (newIsInitialized && !prevIsInitialized) {
225243
finalConfig.value = defineWagmiConfig();
226244
hydrateWagmiConfig();
227245
configKey.value = randomId();
@@ -237,10 +255,8 @@ export const WagmiProvider = defineComponent({
237255
return { finalConfig, configKey };
238256
},
239257
render() {
240-
if (!this.finalConfig) return null;
241258
return h(
242259
Web3AuthWagmiInnerProvider,
243-
// This key is used to remount the provider when the config changes.
244260
{ config: this.finalConfig, key: this.configKey },
245261
{
246262
default: () => this.$slots.default?.(),

0 commit comments

Comments
 (0)