Sending a transaction requires manually switch to Metamask to confirm

[GangemiLorenzo]

Environment

I'm trying to develop a mobile app in Flutter which should interact with a very simple contract.
The contract contains a basic string which can be read or write.

My environment is the following:

• Ganache running on localhost, with the contract deployed at a know address.
• A physical Android device with adb-reverse to reach the Ganache network.
• On the Android I've Metamask app installed with the Ganache network set and one of the Ganache account.

I'm using the following dependencies:

  web3dart: ^2.3.0
  walletconnect_dart: ^0.0.11
  url_launcher: ^6.1.5

I use the Web3Dart code generator to generate the class to interact with my contract.

Expected behaviour

The app has a login button, which redirect the user to Metamask for the login, and it initialise the session.
After that it displays a screen with a text containing the value of the contract variable, a textField and a button.
Tapping on the button should execute a transaction that updates the value on the contract with the textField content.

Problem

After looking around on Github for examples I was able to assemble the code and make it work.
The EthClient, the Connector and the Contract are initialised correctly.
At login button tap the user is switched to Metamask and a popup ask to connect to the mobile app.
After that the user can interact with the TextField and submit the new value.

I copied the WalletConnectEthereumCredentials from the example folder and here's my version:

class WalletConnectEthereumCredentials extends CustomTransactionSender {
  WalletConnectEthereumCredentials(
      {required this.provider});

  final EthereumWalletConnectProvider provider;

  @override
  Future<EthereumAddress> extractAddress() => Future(
      () => EthereumAddress.fromHex(provider.connector.session.accounts.first));

  @override
  Future<String> sendTransaction(Transaction transaction) async {
    final from = await this.extractAddress();
    final hash = await provider.sendTransaction(
      from: from.hex,
      to: transaction.to?.hex,
      data: transaction.data,
      gas: transaction.maxGas,
      gasPrice: transaction.gasPrice?.getInWei,
      value: transaction.value?.getInWei,
      nonce: transaction.nonce,
    );

    return hash;
  }

  @override
  Future<MsgSignature> signToSignature(Uint8List payload,
      {int? chainId, bool isEIP1559 = false}) {
    // TODO: implement signToSignature
    throw UnimplementedError();
  }
}

When the user tap on the button, a transaction is sent.
Now if the user want to proceed he has to open manually Metamask and confirm the transaction through a popoup.

Is there a way to avoid having to move in Metamask and confirm every simple transaction every time, then switch back in the app?

I was able to automatically open Metamask every time a transaction is sent, with this code inside the sendTransaction:

 launchUrlString(metamaskUri, mode: LaunchMode.externalApplication);

But still a confirmation for every transaction is needed.

Thanks

[noman200898]

We also facing this type of issue, If we want to get the balance from Metamask, we need to first open the app. Anyone has any solution? Please help.

[ronpetit]

I do have a work around, I do use url launcher and launch the metamask wallet without awaiting for that call, and them, next to it I send the transacction, it works perfectly all the time @noman200898 @GangemiLorenzo

[samuel2629]

I do have a work around, I do use url launcher and launch the metamask wallet without awaiting for that call, and then, next to it I send the transaction, it works perfectly all the time @noman200898 @GangemiLorenzo

How do you launch the metamask wallet ? With an uri ?

[GangemiLorenzo]

I do have a work around, I do use url launcher and launch the metamask wallet without awaiting for that call, and then, next to it I send the transaction, it works perfectly all the time @noman200898 @GangemiLorenzo

How do you launch the metamask wallet ? With an uri ?

You can take a look at this code here:
GangemiLorenzo/Todo-DAPP

I added the following at line 22:

launchUrlString(metamaskUri, mode: LaunchMode.externalApplication);

[samuel2629]

Thank you. I just checked, he saved the metamask uri from connection, i realized that launchUrl(Uri.parse("metamask://"), mode: LaunchMode.externalApplication); is working great.
Issue is that first you need to connect then launch the url so, that makes 2 times a metamask page appearing which is not the best user experience unfortunalety.

[GangemiLorenzo]

Yeah, my whole point of this issue was exactly that!
In general, I think the User Experience with Dapps is not that great.
Also, in my opinion, Flutter/Dart still has a long way to go in this field.

[samuel2629]

Yes it's my opinion too, it is very difficult to dev a DApps without a looooot of issues... Let's hope that will go better and better !