Error on disconnect

[Mostafatalaat770]

Connecting with the modal works perfectly, although when trying to disconnect the user's session using provider.disconnect(), it throws an error Error: Please call connect() before enable().

How can I disconnect the user in that case? if I try to sign a message, it will open the wallet provider (eg: trust wallet) and prompt the user to sign the message, but then on retrieval, it throws Error: Failed to decrypt

For more context,
this happens only if the provider is accessed using the useWeb3Modal hook from another component rather than the one which initiated the connection.

Observation: the disconnect function may work, but isConnected is still true.
I guess the disconnection works but the isConnected is the problem, and it throws failed to decrypt due to a buggy connection state between the wallet connect and the wallet provider.

[ignaciosantise]

@Mostafatalaat770 👋 can you add the code you are using to create and sign the message?

I've used the useWeb3Modal hook in another component and it works well. Sometimes it breaks when i change code while running the app, i'll check whats happening there

[Mostafatalaat770]

The signing itself is not the problem, I guess due to the inconsistency of the connection, it throws the error failed to decrypt, I managed to bypass it by clearing the storage(AsyncStorage) of the app which is not practical of course.

Apparently, due to improper disconnection, the saved state by Walletconnect is corrupted. and when that happens, trust wallet takes more time before showing the connection modal, and when it redirects to the app, it takes so long before it gets connected or it doesn't even connect and throws multiple unhandled promises, and failed to decrypt is the star of the errors

[ignaciosantise]

@Mostafatalaat770 Can you provide steps to reproduce it? I still cannot get the failed to decrypt error.

And also, can you try reproducing the error disabling fast-refresh feature? Or in a production build

[StevenBarnett1]

Having same issue

[ignaciosantise]

@StevenBarnett1 @Mostafatalaat770 the disconnect error is probably related with the provider's events unsubscription, can you check if removing this works?

web3modal-react-native/src/hooks/useConfigure.ts

Lines 97 to 104 in 72cf3a5

	return () => {
	const provider = ClientCtrl.provider();
	provider?.removeListener('display_uri', onDisplayUri);
	provider?.client.core.relayer.subscriber.removeListener(
	SUBSCRIBER_EVENTS.deleted,
	onSessionDelete
	);
	};

[Mostafatalaat770]

@ignaciosantise Removing this:

web3modal-react-native/src/hooks/useConfigure.ts

Lines 97 to 104 in 72cf3a5

	return () => {
	const provider = ClientCtrl.provider();
	provider?.removeListener('display_uri', onDisplayUri);
	provider?.client.core.relayer.subscriber.removeListener(
	SUBSCRIBER_EVENTS.deleted,
	onSessionDelete
	);
	};

made it work perfectly

[StevenBarnett1]

Didn't work for me, I commented out that entire return block, reset npm cache, same issue

[Mostafatalaat770]

@StevenBarnett1

try to delete the asyncstorage, AsyncStorage.clear(), but it will delete all data related to the app so be careful

[StevenBarnett1]

Nope same problem, I ran AsyncStorage.clear() from app root index, commented it out, restarted app, same problem

 INFO  {"context": "core"} {"context": "core/history"} Emitting history_created
 INFO  {"context": "core"} {"context": "core/history"} Emitting history_created
 INFO  {"context": "client"} Unsupported request method wc_pairingDelete
 INFO  {"context": "core"} {"context": "core/relayer"} {"context": "core/relayer/subscription"} Emitting subscription_deleted
 INFO  {"context": "core"} {"context": "core/expirer"} Emitting expirer_deleted
 WARN  Possible Unhandled Promise Rejection (id: 0):
Error: Failed to decrypt
 WARN  Possible Unhandled Promise Rejection (id: 1):
Error: Failed to decrypt

[StevenBarnett1]

Transactions are going through but they just hang at signer.sendTransaction(tx) so I can't actually get any data / use anything

[Mostafatalaat770]

@StevenBarnett1 let me check

[ignaciosantise]

@StevenBarnett1 check this branch feat/more-methods, in MethodUtil.ts i added a transaction example. Maybe you can find a solution comparing it with your code. If you are using ethers.Web3Provider, you have to initialize it after the session is created

[StevenBarnett1]

Yes that's what I am doing,

  const { provider,isConnected } = useWeb3Modal();
  useEffect(()=>{
    if(provider && isConnected){
      const _web3Provider = new ethers.providers.Web3Provider(provider)
      setWeb3Provider(_web3Provider)
    }
  },[provider,isConnected])
  
  async function sendTransaction(){
  const formattedAmount = ethers.utils.parseUnits('0.01', 18).toHexString();
     const nativeTransfer = {
        to:"0x87ee2c49c08039c316F6bdef1Cb27dC61866c92c",
        value: formattedAmount,
        data: "0x",
      };
          const signer = web3Provider.getSigner();
          const txResponse = await signer.sendTransaction(nativeTransfer)
}

[Mostafatalaat770]

@ignaciosantise So apparently, the cleanup function of the useEffect is the problem, as when I try to access the provider or use the useWeb3Modal from other components that are not in the same tree aka conditional rendering from the entry point of the app, so maybe we need a provider(context) wrapping the app for proper access to the provider if needed.

Or, whoever wants to have full access to the walletconnect state is to put the Web3Modal component at the root of the app, which won't be removed by any chance/event. Tested by me and works nicely.

[Mostafatalaat770]

@ignaciosantise I used this to test:

web3modal-react-native/example/src/utils/MethodUtil.ts

Lines 41 to 48 in 388090a

	const msg = 'Hello World';
	const hexMsg = utf8ToHex(msg, true);
	const [address] = await web3Provider.listAccounts();
	if (!address) {
	throw new Error('No address found');
	}
	const signature = await web3Provider.send('personal_sign', [hexMsg, address]);

it still causes the failed to decrypt error, but I found something interesting when opened the wallet provider app this happens:

I added a log when it enters onSessionDelete in useConfigure hook, and as you see the sessions are not in sync or something is not right. the first one is from the event and the second is from the clientCtrl.

and it shows to sign the message normally, but on accepting, it throws the failed to decrypt error, so most probably it's a wallet connect issue than a modal issue, what do you think?

[StevenBarnett1]

So any fix here?

[boulinb]

Same error for me: Works fine on Rainbow but does not decode the return of a signature ('personal_sign') on TrustWallet.

[ignaciosantise]

Could you provide an example repo so i can reproduce the failed to decrypt error? @StevenBarnett1 @boulinb

[boulinb]

Hi @ignaciosantise

Here is the full POC with data on the versions used, let me know if you are missing information to reproduce!

Knowing that a new problem appeared since my last message (I didn't change anything to the code) but the wallets are not displayed anymore and an infinite loader is displayed 👀

=> https://github.com/boulinb/web3modal-react-native-issue

[ignaciosantise]

thanks @boulinb for the example repo!

I was able to reproduce the error, and i also noticed now it's failing in this sdk example too.
The good thing is that the same message works with Alpha Wallet and Rainbow.

I'll talk with the team and come back with more answers, but in the meantime please use Alpha/Rainbow for testing 🙏

[Mostafatalaat770]

@ignaciosantise thanks for confirming!

[Mostafatalaat770]

Let us close this issue and open another one related to the failed to decrypt issue, as the disconnection error is fixed!