EIP-2771 Approach

Search…
EIP-2771 Approach
Secure Protocol For Native Meta Transactions
Smart Contract change - Personal & EIP712 Signature 
1.Inherit BaseRelayRecipient contract in your contract. 
2.Set trustedForwarder to Biconomy Forwarder's address while deploying your contract.
3.Replace msg.sender in your contract with _msgSender().
More details about Standard EIP-2771 Approach can be found here.
1
import "@opengsn/gsn/contracts/BaseRelayRecipient.sol";
2
​
3
contract MyContract is BaseRelayRecipient {
4
​
5
    /** 
6
     * Set the trustedForwarder address either in constructor or 
7
     * in other init function in your contract
8
     */ 
9
    constructor(address _trustedForwarder) public {
10
        trustedForwarder = _trustedForwarder;
11
    }
12
    
13
    ...
14
    
15
    /**
16
     * OPTIONAL
17
     * You should add one setTrustedForwarder(address _trustedForwarder)
18
     * method with onlyOwner modifier so you can change the trusted
19
     * forwarder address to switch to some other meta transaction protocol
20
     * if any better protocol comes tomorrow or current one is upgraded.
21
     */
22
    
23
    /** 
24
     * Override this function.
25
     * This version is to keep track of BaseRelayRecipient you are using
26
     * in your contract. 
27
     */
28
    function versionRecipient() external view override returns (string memory) {
29
        return "1";
30
    }
31
}
Copied!
Client Side changes
Now the contracts are updated and deployed, it's time to do the changes in your script.
1.After Registering Your dApp, SmartContact & Contract method on Desired network on Biconomy Dashboard, copy the <api-key>, you will need it on the client-side code.
2.Here comes the most important part, you need to pass the normal provider from your connected wallet e.g. window.ethereum for Metamask in Biconomy options. Using this provider Biconomy will take care of getting the User Signature. 
The main provider object to be passed in Biconomy should be JSON RPC provider initialized with network RPC URL on which your Dapp is deployed. 
That's it.
3.So the flow will be, Mexa will take the user signature using the connected wallet and will relay the transaction on your network via Biconomy servers.
SDK Based Integration
In basic terms, you need one provider object for using Biconomy (Mexa), another for signing meta transactions (to be passed in Biconomy options) 
1. Importing Mexa
Via npm
Standalone JS File
1
npm install @biconomy/mexa
Copied!
1
// Install Biconomy
2
<script src="https://cdn.jsdelivr.net/npm/@biconomy/[email protected]/dist/mexa.js"></script>
3
​
4
// Import Biconomy
5
let Biconomy = window.Biconomy;
Copied!
2. Initializing SDK 
You can use Mexa either with Web3.js or Ethers.js. We'll be making two provider objects, one linked to your dApp's network RPC, and the other to your user's wallet. 
Web3 + EIP2771/Forward
Ethers + EIP2771/Forward
1
import {Biconomy} from "@biconomy/mexa";
2
import { Web3 } from "web3";
3
​
4
// Pass connected wallet provider under walletProvider field
5
let biconomy = new Biconomy(new Web3.providers.HttpProvider("YOUR RPC URL HERE"),{
6
    walletProvider: <Wallet Provider>, 
7
    apiKey: <API Key>, 
8
    debug: true
9
  });   
10
            
11
let networkWeb3 = new Web3(biconomy);
Copied!
1
import {Biconomy} from "@biconomy/mexa";
2
import { ethers } from "ethers";
3
​
4
// Pass connected wallet provider under walletProvider field
5
let biconomy = new Biconomy(new ethers.providers.JsonRpcProvider("YOUR RPC URL HERE"),
6
  {
7
    walletProvider: <Wallet Provider>, 
8
    apiKey: <API Key>, 
9
    debug: true
10
  });   
11
  
12
let networkProvider = new ethers.providers.Web3Provider(biconomy);
13
​
Copied!
3. Initialize your dApp after Mexa initialization
Mexa fetches data from Biconomy's servers. Because of this, it's best to initialize your dApp or perform any action after the biconomy.READY event occurs. 
If there is an error while initializing Mexa, it's good to catch and log a biconomy.ERROR event for better debugging.
In this scenario, you may need to initialise both instances of Mexa.
EIP2771
1
biconomy.onEvent(biconomy.READY, () => {
2
  // Initialize your contracts here using biconomy's provider instance
3
  // Initialize dapp here like getting user accounts etc
4
}).onEvent(biconomy.ERROR, (error, message) => {
5
  // Handle error while initializing mexa
6
});
Copied!
4. Sign & Send Meta Transactions 
EIP2771 + Ethers
EIP2771 + Web3
​Check the repository here for complete example code
1
// Initialize Constants
2
let contract = new ethers.Contract(<CONTRACT_ADDRESS>,
3
              <CONTRACT_ABI>, biconomy.getSignerByAddress(userAddress));
4
              
5
let contractInterface = new ethers.utils.Interface(<CONTRACT_ABI>);
6
​
7
let userAddress = <Selected Address>;
8
​
9
// Create your target method signature.. here we are calling setQuote() method of our contract
10
let { data } = await contract.populateTransaction.setQuote(newQuote);
11
let provider = biconomy.getEthersProvider();
12
​
13
// you can also use networkProvider created above
14
let gasLimit = await provider.estimateGas({
15
                    to: <CONTRACT_ADDRESS>,
16
                    from: userAddress,
17
                    data: data
18
                });
19
console.log("Gas limit : ", gasLimit);
20
​
21
let txParams = {
22
                    data: data,
23
                    to: <CONTRACT_ADDRESS>,
24
                    from: userAddress,
25
                    gasLimit: gasLimit, // optional
26
                    signatureType: "EIP712_SIGN"
27
                };
28
                
29
​
30
// as ethers does not allow providing custom options while sending transaction
31
// you can also use networkProvider created above               
32
// signature will be taken by mexa using normal provider (metamask wallet etc) that you passed in Biconomy options  
33
let tx = await provider.send("eth_sendTransaction", [txParams]);
34
console.log("Transaction hash : ", tx);
35
​
36
//event emitter methods
37
provider.once(tx, (transaction) => {
38
                    // Emitted when the transaction has been mined
39
                    //show success message
40
                    console.log(transaction);
41
                    //do something with transaction hash
42
                });
Copied!
​Check the repository here for complete example code
1
// Mexa takes care of getting signatures as explained above so you only need to use networkWeb3
2
​
3
// Initialize constants
4
let contract = new networkWeb3.eth.Contract(
5
            <Your Contract ABI>,
6
            <Your Contract Address>
7
          );
8
​
9
let userAddress = <selected address>;
10
​
11
//Call your target method (must be registered on the dashboard).. here we are calling setQuote() method of our contract
12
let tx = contract.methods.setQuote(newQuote).send({
13
                    from: userAddress,
14
                    signatureType: biconomy.EIP712_SIGN,
15
                    //optionally you can add other options like gasLimit
16
                });
17
​
18
tx.on("transactionHash", function (hash) {
19
                    console.log(`Transaction hash is ${hash}`);
20
                    showInfoMessage(`Transaction sent. Waiting for confirmation ..`);
21
                }).once("confirmation", function (confirmationNumber, receipt) {
22
                    console.log(receipt);
23
                    console.log(receipt.transactionHash);
24
                    //do something with transaction hash
25
                });  
26
​
Copied!
Network Agnostic Transactions
Custom Approach
Last modified 3mo ago
Copy link
Contents
Smart Contract change - Personal & EIP712 Signature
Client Side changes
SDK Based Integration
1. Importing Mexa
2. Initializing SDK
3. Initialize your dApp after Mexa initialization
4. Sign & Send Meta Transactions