# Handle account change event doesn't work when setSelector is used

**URL:** <https://forum.fuel.network/t/handle-account-change-event-doesnt-work-when-setselector-is-used/3362>\
**Category:** Fuel Wallet\
**Created:** [October 20, 2023, 4:27pm UTC](https://forum.fuel.network/t/handle-account-change-event-doesnt-work-when-setselector-is-used/3362 "2023-10-20T16:27:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sway](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/sway/32/103_2.png) [@sway](https://forum.fuel.network/u/sway)\
**Post date:** [October 20, 2023, 4:27pm UTC](https://forum.fuel.network/t/handle-account-change-event-doesnt-work-when-setselector-is-used/3362/1 "2023-10-20T16:27:54Z")

</div>

We have in our Spark app both wallets like Fuel Wallet and Fuelet Wallet.  
The code that used to work before with events like change account, change network and etc was based on **window.fuel** and **window.fuelet** instances, but I decided to update to workflow based on connector, everything work fine except

```auto
window.fuel.on(window.fuel?.events?.currentAccount, this.handleAccEvent);

```

It doesn’t work anymore in both wallets

Code of AccountStore

```auto
import RootStore from "@stores/RootStore";
import { makeAutoObservable, reaction, when } from "mobx";
import { Address, Provider, Wallet, WalletLocked, WalletUnlocked } from "fuels";
import { IToken, NODE_URL, TOKENS_LIST } from "@src/constants";
import BN from "@src/utils/BN";
import Balance from "@src/entities/Balance";
import { FuelWalletProvider } from "@fuel-wallet/sdk";

export enum LOGIN_TYPE {
	FUEL_WALLET = "Fuel Wallet",
	FUELET = "Fuelet Wallet",
}

export interface ISerializedAccountStore {
	address: string | null;
	loginType: LOGIN_TYPE | null;
}

class AccountStore {
	public readonly rootStore: RootStore;
	public provider: Provider | null = null;

	public get initialized() {
		return this.provider != null;
	}

	private setProvider = (provider: Provider | null) => (this.provider = provider);

	constructor(rootStore: RootStore, initState?: ISerializedAccountStore) {
		makeAutoObservable(this);

		this.rootStore = rootStore;
		if (initState) {
			this.setLoginType(initState.loginType);
			this.setAddress(initState.address);
			document.addEventListener("FuelLoaded", this.onFuelLoaded);
		}
		this.initProvider();
		when(() => this.provider != null, this.updateAccountBalances);
		setInterval(this.updateAccountBalances, 10 * 1000);
		reaction(
			() => this.address,
			() => Promise.all([this.updateAccountBalances()]),
		);
	}

	listConnectors: string[] = [];
	setListConnectors = (value: string[]) => (this.listConnectors = value);

	initProvider = async () => {
		Provider.create(NODE_URL)
			.then((provider) => this.setProvider(provider))
			.catch(console.error);
	};

	public assetBalances: Balance[] | null = null;
	setAssetBalances = (v: Balance[] | null) => (this.assetBalances = v);

	updateAccountBalances = async () => {
		if (this.address == null) {
			this.setAssetBalances([]);
			return;
		}
		const address = Address.fromString(this.address);
		const balances = (await this.provider?.getBalances(address)) ?? [];
		const assetBalances = TOKENS_LIST.map((asset) => {
			const t = balances.find(({ assetId }) => asset.assetId === assetId);
			const balance = t != null ? new BN(t.amount.toString()) : BN.ZERO;
			if (t == null) return new Balance({ balance, usdEquivalent: BN.ZERO, ...asset });

			return new Balance({ balance, ...asset });
		});
		this.setAssetBalances(assetBalances);
	};

	getBalance = (token: IToken): BN | null => {
		const balance = this.findBalanceByAssetId(token.assetId);
		if (balance == null) return null;
		return balance.balance ?? BN.ZERO;
	};
	findBalanceByAssetId = (assetId: string) =>
		this.assetBalances && this.assetBalances.find((balance) => balance.assetId === assetId);

// used to get connectors after window.fuel id defined
	onFuelLoaded = () => {
		if (window.fuel == null) return;
		const connectors = window.fuel.listConnectors();
		this.setListConnectors(connectors.map((c: { name: string }) => c.name));
		window.fuel.on(window.fuel?.events?.currentAccount, this.handleAccEvent);
		window.fuel.on(window.fuel?.events?.network, this.handleNetworkEvent);
		window.fuel.on(window.fuel?.events?.currentConnector, this.handleConnectorEvent);
	};

//🛑🛑🛑🛑🛑🛑🛑🛑this even doesn't work
	handleAccEvent = (account: string) => {
		console.log("handleAccEvent", account);
		this.setAddress(account);
	};
	handleConnectorEvent = (con: string) => {
		console.log("handleConnectorEvent", con);
	};

	handleNetworkEvent = (network: FuelWalletProvider) => {
		if (network.url !== NODE_URL) {
			this.rootStore.notificationStore.toast(`Please change network url to Testnet Beta 4`);
		}
	};

	public address: string | null = null;
	setAddress = (address: string | null) => (this.address = address);

	public loginType: LOGIN_TYPE | null = null;
	setLoginType = (loginType: LOGIN_TYPE | null) => (this.loginType = loginType);

	serialize = (): ISerializedAccountStore => ({
		address: this.address,
		loginType: this.loginType,
	});

	login = async (loginType: LOGIN_TYPE) => {
		this.setLoginType(loginType);
		await this.loginWithWallet(loginType);
	};

	disconnect = async () => {
		try {
			window.fuel?.disconnect();
		} catch (e) {
			this.setAddress(null);
			this.setLoginType(null);
			return;
		}
		this.setAddress(null);
		this.setLoginType(null);
	};

	loginWithWallet = async (connector: LOGIN_TYPE) => {
		//fixme change to notification
		try {
			await window.fuel.selectConnector(connector);
			await window.fuel.connect();
			const account = await window.fuel.currentAccount();
			const provider = await window.fuel.getProvider();
			if (provider.url !== NODE_URL) {
				this.rootStore.notificationStore.toast(`Please change network url to beta 4`);
			}
			this.setAddress(account);
		} catch (e) {
			this.rootStore.notificationStore.toast("User denied", {
				type: "error",
			});
			return;
		}
	};

	get isLoggedIn() {
		return this.address != null;
	}

	getWallet = async (): Promise<WalletLocked | WalletUnlocked | null> => {
		if (this.address == null || window.fuel == null) return null;
		return window.fuel.getWallet(this.address);
	};

	get walletToRead(): WalletLocked | null {
		return this.provider == null
			? null
			: Wallet.fromAddress("fuel1m56y48mej3366h6460y4rvqqt62y9vn8ad3meyfa5wkk5dc6mxmss7rwnr", this.provider ?? "");
	}

	get addressInput(): null | { value: string } {
		if (this.address == null) return null;
		return { value: Address.fromString(this.address).toB256() };
	}

	get addressB256(): null | string {
		if (this.address == null) return null;
		return Address.fromString(this.address).toB256();
	}
}

export default AccountStore;

```

---

<div class="post-metadata">

**Author:** ![sandusky](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/sandusky/32/1313_2.png) [@sandusky](https://forum.fuel.network/u/sandusky)\
**Post date:** [October 20, 2023, 5:36pm UTC](https://forum.fuel.network/t/handle-account-change-event-doesnt-work-when-setselector-is-used/3362/2 "2023-10-20T17:36:06Z")

</div>

Hi there!

Be aware that window.fuel is being [removed](https://github.com/FuelLabs/fuels-wallet/pull/896).

I highly recommend you to use [@fuels-wallet/react](https://github.com/FuelLabs/fuels-wallet/tree/master/packages/react/src/hooks) which contains a set of useful React Hooks with systems in place to handle behaviors such as `onFuelLoaded`.

Please visit the [hooks-reference](https://github.com/FuelLabs/fuels-wallet/blob/docs/fuel-wallet-react/packages/docs/docs/dev/hooks-reference.mdx) for more details.

---

<div class="post-metadata">

**Author:** ![stacio](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@stacio](https://forum.fuel.network/u/stacio)\
**Post date:** [October 20, 2023, 8:05pm UTC](https://forum.fuel.network/t/handle-account-change-event-doesnt-work-when-setselector-is-used/3362/3 "2023-10-20T20:05:43Z")

</div>

For better compatibility, you can use an instance of Fuel directly instead of the `window.fuel`.

```tsx
import { Fuel } from "@fuel-wallet/sdk";

const fuel = new Fuel();

await fuel.hasWallet();
await fuel.listConnectors();

```

But as you are using react, if you can use hooks, I highly recommend using the `@fuels-wallet/react` as @sandusky mentioned. Documentation is on the way, but you can see a preview on the PR: [docs: @fuel-wallet/react by cold-briu · Pull Request #884 · FuelLabs/fuels-wallet · GitHub](https://github.com/FuelLabs/fuels-wallet/pull/884)

---

<div class="post-metadata">

**Author:** ![sway](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/sway/32/103_2.png) [@sway](https://forum.fuel.network/u/sway)\
**Post date:** [October 23, 2023, 10:52am UTC](https://forum.fuel.network/t/handle-account-change-event-doesnt-work-when-setselector-is-used/3362/4 "2023-10-23T10:52:46Z")

</div>

okie, I tried to do the way you proposed because I have the logic of account in store that is TS file, so the approach of bringing logic to components via hooks is not the one I like.

but, I have questions related to the fuel object

1. 

```auto
const f = new Fuel();
console.log(f)
console.log(Object.values(f.listConnectors()).length)

```

 ![image](https://us1.discourse-cdn.com/flex022/uploads/fuel/original/2X/7/7c31e9c7575940d11d9d11751fc56a5b2f44ef89.png)

`connectors` field in fuel object is always working well and shows correct amount of them (in my case is 2), but this field is private, so I can’t get it, but function `listConnectors` always gives me always different amount of them, sometimes after hard reset is 2, sometimes is 0 after usual reset

1. 

document.addEventListener(“FuelLoaded”, this.onFuelLoaded);  
started to work also strangely, after hard reset it never runs, only after command + R  
So it seems to be cash-related question, but I couldn’t find the final documentation about this approach, all info on [Connecting | Fuel Wallet](https://wallet.fuel.network/docs/dev/connecting/) depends on window.object, so please provide how to work with that

And I think that all hooks that were shared by sandusky would be cool to deploy to npm package

---

<div class="post-metadata">

**Author:** ![stacio](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@stacio](https://forum.fuel.network/u/stacio)\
**Post date:** [October 23, 2023, 7:14pm UTC](https://forum.fuel.network/t/handle-account-change-event-doesnt-work-when-setselector-is-used/3362/5 "2023-10-23T19:14:59Z")

</div>

As the time between your instance of Fuel and the connectors being injected can vary you need to listen for the connectors event. [Wallet Connectors | Fuel Wallet](https://next-wallet.fuel.network/docs/dev/connectors/#connectors)

```ts
fuel.on(fuel.events.connectors, (connectors) => {
   // get the connectors.
});

```

---

<div class="post-metadata">

**Author:** ![sway](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/sway/32/103_2.png) [@sway](https://forum.fuel.network/u/sway)\
**Post date:** [October 24, 2023, 9:36pm UTC](https://forum.fuel.network/t/handle-account-change-event-doesnt-work-when-setselector-is-used/3362/6 "2023-10-24T21:36:45Z")

</div>

thanks a lot , it worked!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex022/uploads/fuel/original/2X/5/57d5a345cc15a64b636e0d56e042857f8a0e80b1.png) [@system](https://forum.fuel.network/u/system)\
**Post date:** [November 14, 2023, 5:37pm UTC](https://forum.fuel.network/t/handle-account-change-event-doesnt-work-when-setselector-is-used/3362/7 "2023-11-14T17:37:21Z")

</div>

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.