neo-wallet-adapter icon indicating copy to clipboard operation
neo-wallet-adapter copied to clipboard

Add a way to react on network and wallet changes

Open csmuller opened this issue 3 years ago • 5 comments

We need a functionality that allows the user of the wallet-adapt to react on network changes (e.g., changing from mainnet to testnet) and wallet changes. Currently the adapter simply disconnects the wallet on such changes.

It would be nice if the WALLET_CHANGED/NETWORK_CHANGED events would bubble up to the library user or the useWallet() method would return variables that hold such state. Something like:

const { address, wallet, connecting, walletChanged, networkChaged } = useWallet();

csmuller avatar Jun 27 '22 16:06 csmuller

@alexsteixeira, @gsmachado please comment if my description is unclear.

csmuller avatar Jun 27 '22 16:06 csmuller

I think that's fine. 👍

Basically, we need that a way to pass through the events from the specific wallet to the NWA SDK users. 😸

gsmachado avatar Jun 27 '22 18:06 gsmachado

Yep, at the moment it disconnects everytime to act like walletconnect. Anyway, I agree regarding the fact that it would be cool to have those events also if they won't work when connecting to walletconnect wallet.

mfbz avatar Jun 27 '22 20:06 mfbz

hey @mfbz! any timeline for this feature?! 😄

gsmachado avatar Aug 20 '23 13:08 gsmachado

Heyy @gsmachado Actually, considering @csmuller question I'm thinking about 2 ways of implementing this:

Case 1

No changes needed on the codebase. You implement directly the hooks needed.

walletChanged

...
const [currentWalletName, setCurrentWalletName] = useState<string | null>(null);
useEffect(()=> {
  if (wallet?.name !== currentWalletName) {
    setCurrentWalletName(wallet.name);
    onWalletChanged(currentWalletName);
  }
}, [wallet, currentWalletName]);

networkChanged

...
const [walletNetwork, setWalletNetwork] = useState<string | null>(null);
const fetchWalletNetwork = useCallback(async () => {
  try {
	  const result = await getNetworks();
	  if (result?.status === 'success') {
		  setWalletNetwork(result.data?.defaultNetwork || null);
	  }
  } catch (error) {
	  console.error(error);
  }
}, [getNetworks]);
useEffect(() => {
  if (connected) {
	  fetchWalletNetwork();
  } else {
	  setWalletNetwork(null);
  }
}, [connected, fetchWalletNetwork]);

Case 2:

Basically the same but in the library. Maybe with custom hooks separated from useWallet one to avoid having wallet network fetching happening also when not needed.

Thoughts about this? If you need them in a hurry I think it's better to go with Case 1.

mfbz avatar Aug 21 '23 05:08 mfbz