Integration with web3dart for signing a transaction - code example needed

[crcdng]

I am using the web3dart library for a transaction and I would like to know how to sign this transaction with my connected wallet via web3modal. I have successfully connected a wallet.

Describe the solution you'd like Just some example code to show how this works (see below)

Additional context Here is a transaction method that shows that web3dart requires a EthPrivateKey parameter for the transaction. All I need to know is how I would sign this transaction with the wallet via web3modal instead of the dummy credentials in the example shown.

Future<TransactionHash> transact({
  required String functionName,
  required List<dynamic> params,
  EtherAmount? etherAmount,
}) async {
  final contract = await loadContractFromAbi();
  final ethFunction = contract.function(functionName);
  EthPrivateKey credentials = EthPrivateKey.fromHex(
    constants.testPrivateKey,
  ); // Temp account
  try {
    final result = await _ethClient.sendTransaction(
      credentials,
      Transaction.callContract(
        contract: contract,
        function: ethFunction,
        parameters: params,
        value: etherAmount,
      ),
      chainId: null,
      fetchChainIdFromNetworkId: true,
    );
    return result;
  } on RPCError {
    return "";
  }
}

[quetool]

Hello @crcdng! You don't need to use web3dart library directly if you are using Web3Modal. Looks like you are trying to call a contract function, for that you can use requestWriteContract() method from Web3Modal. Check out the docs: https://docs.walletconnect.com/web3modal/flutter/actions#interact-with-smart-contracts

You can check the example app in this repo as well https://github.com/WalletConnect/Web3ModalFlutter/blob/master/example/lib/utils/crypto/eip155.dart#L287

[crcdng]

It looked at the docs but already written a substantial amount of code in web3dart.

The majority of Flutter developers new to web3 or web3 developers new to flutter start with web3dart (478 LIKES, 130, PUB POINTS, 97% POPULARITY) therefore it makes sense and would be appreciated if you document how the Web3Modal wallet signing feature works with it.

[quetool]

Hello @crcdng ! I'll try to address a few of your statements:

1)

It looked at the docs but already written a substantial amount of code in web3dart.

Base on this statement it look like you don't require Web3Modal SDK at all and you should reach out to web3dart developers for help. I can help you on integrate WalletConnect's Web3Modal SDK but in regards of web3dart it's out of my/our scope. On our SDKs we do provide everything you need to interact with the wallet and only a few of those things are related to web3dart as WalletConnect's protocol don't rely on private keys to send requests. That is, in fact, the main goal of the protocol.

The idea behind WalletConnect protocol is that you establish a secure channel between Dapp and Wallet through a relay but the private key of your wallet always remain in (and is handled by) your wallet.

We have indeed already a task in our bucket list to remove web3dart dependency completely from our SDKs

2)

therefore it makes sense and would be appreciated if you document how the Web3Modal wallet signing feature works with it.

Here when you say "Web3Modal wallet signing feature" it seems like you are confusing Web3Modal with a wallet. Web3Modal is a specific SDK for dapps, not wallets. If by any chance you are developing a wallet then you should use WalletConnectFlutterV2

3) (From your first comment)

Here is a transaction method that shows that web3dart requires a EthPrivateKey parameter for the transaction. All I need to know is how I would sign this transaction with the wallet via web3modal instead of the dummy credentials in the example shown.

Indeed web3dart is expecting you to pass a private key in order to make a request and that is why we don't use web3dart for requests. All I can show you here is how the request would be constructed if you use Web3Modal:

// In this example _w3mService object is a W3MService instance as per docs https://docs.walletconnect.com/web3modal/flutter/options#w3mservice-initialization
Future<dynamic> transact({
  required String functionName,
  required List<dynamic> params,
  EtherAmount? etherAmount,
}) async {
  final contract = await loadContractFromAbi();
  try {
    final result = await _w3mService.requestWriteContract(
      topic: _w3mService.session!.topic ?? '',
      chainId: _w3mService.selectedChain!.namespace,
      rpcUrl: 'http://network-rpc-url.....',
      deployedContract: contract,
      functionName: functionName,
      transaction: Transaction(
        from: EthereumAddress.fromHex(_w3mService.session!.address!),
      ),
      parameters: params,
    );
    return result;
  } catch (e) {
    return "";
  }
}

That being said, I would be more than happy to help you with our protocol/SDKs integration but I can't do much if your whole implementation is based on web3dart

[crcdng]

Thanks a lot for explanations and for the example code, I will try going that route and report back.

Just to explain where I'm coming from:

go to pub.dev, enter "web3". Here is what you get:

"web3dart: Dart library to connect to Ethereum clients. Send transactions and interact with smart contracts!"

"WalletConnect Web3Modal: Simple, intuitive wallet login. With this drop-in UI SDK, enable any wallet's users to seamlessly log in to your app and enjoy a unified experience"

Clearly from these descriptions, web3dart manages the calls to the blockchain and web3modal manages the connection to wallets. The assumption then is that they complement each other.

As mentioned above, it is likely people start writing their dApps with web3dart based on its popularity and then realise that it does the job to talk to smart contracts but does not handle the connection to the installed wallet, e.g. Metamask. Then it is logical to turn to web3modal to handle that aspect. This is exactly how I got to the point where I got stuck trying to integrate both libs in my dApp and filed this issue.

So I do understand both libraries are used to write a dApp. From your explanation I now understand that web3modal does not complement web3dart but that you aim to provide an alternative to it. It would be useful if you put that very clearly at the top of the documentation / description.

[quetool]

I really appreciate the feedback and I'll totally present it to the team but to be fair you can clearly see that these packages have different publishers (a.k.a different companies/developers).

The main difference is that while web3dart aims to provide developers with the necessary tools to call EVM blockchain methods (and does a great job about it) we on Web3Modal try to go a bit further than that, adding a customizable UI (which web3dart does not) and providing a seamless connection to wallets mechanism, easy calls to smart contracts, Coinbase Wallet support, Email Wallets and much more... Plus, we are aiming to support every blockchain, not just EVMs.

I do agree however that we could make a bit more about marketing and how we present the SDK.

About the difference in popularity it's also due to how much time the SDK has been published. For web3dart is more than 4 years, for Web3Modal is less than 1 year.

Please keep feedback coming and open any new issue if you need help, Discussion tab is also opened!