Erc20 forwarder demo

README.md

@@ -1,42 +1,25 @@
 # Generalized Meta Transaction
 
-Repository containing a gas cost effective standard for meta transaction to be used by any contract to enable native meta transaction feature on any function. 
-The approach support signed typed messages so that while signing the data on client side user see a human readable message instead of scary hex string.
+Repository containing a gas cost effective standard for meta transaction to be used by any contract to enable users in paying gas cost using supported ERC20 tokens on any function. 
+The approach support signed typed messages (EIP712) so that while signing the data on client side user see a human readable message instead of scary hex string.
 
-You can see the LIVE DEMO <a href="https://metatx.biconomy.io" target="_blank" >Here</a>(works on Ropsten)
-
-The standard is the result of initiative by metamask here https://medium.com/metamask/announcing-a-generalized-metatransaction-contest-abd4f321470b
-
-Biconomy was selected as one of the finalist in the hackathon. Read <a href="https://medium.com/metamask/our-metatransaction-hackathon-winner-a620551ccb9b" target="_blank">here</a>
+<h2>This example showcases using DAI tokens to pay for gas in dapp transactions. The interaction from permitting tokens to target method call can be completely gasless!</h2>
 
 <h3>How do i use this in my Smart Contracts?</h3>
 
-1. Inherit <a href="https://github.com/bcnmy/metatx-standard/blob/master/src/contracts/EIP712MetaTransaction.sol" target="_blank" >EIP712MetaTransaction</a> contract 
-2. Use msgSender() method where ever you were using msg.sender
+1. Inherit <a href="https://github.com/opengsn/gsn/blob/master/contracts/BaseRelayRecipient.sol" target="_blank" >BaseRelayRecipient</a> contract 
+2. Use _msgSender() method where ever you were using msg.sender
 3. (Optional) Use msgRelayer() method to get the relayer address who paid for transaction gas fees
 That's it. Pretty simple
 
 <h3>How do i use this in my client code?</h3>
-In order to execute meta transactions you just need to call 
-executeMetaTransaction(address userAddress, bytes memory functionSignature, bytes32 sigR, bytes32 sigS, uint8 sigV)
-inherited from EIP712MetaTransaction.sol
+In order to execute meta transactions you just need to register your contracts as ERC20 Forwarder meta transactino approach, import the sdk and follow the documentation here https://docs.biconomy.io
 <br/>
 
 userAddress       => externally owned address of the user eg the user address in his metamask wallet<br/>
 
-functionSignature => ABI encoding of function name with its parameter. Use web3 <a href="https://web3js.readthedocs.io/en/v1.2.4/web3-eth-contract.html#methods-mymethod-encodeabi" target="_blank" >encodeABI</a> method here
-
-sigR              => 32 bytes r part of the signature
-
-sigS              => 32 bytes s part of the signature
-
-sigV              => integer v part of the signature
-
-
-r,s,v can be calculated using web3 <a href="https://web3js.readthedocs.io/en/v2.0.0-alpha/web3-utils.html#getsignatureparameters" target="_blank" >getSignatureParameters</a> utility method.
-
 Since this standard supports <a href="https://eips.ethereum.org/EIPS/eip-712" target="_blank" >EIP-712</a> so signature parameters should be generated using eth_signTypedData_v3 or eth_signTypedData_v4 JSON RPC method.
 
-Check out example front-end code <a href="https://github.com/bcnmy/metatx-standard/blob/master/example/react-ui/src/App.js" target="_blank" >here</a> and example solidity code <a href="https://github.com/bcnmy/metatx-standard/blob/master/src/contracts/TestContract.sol" target="_blank" >here</a>
+Check out example front-end code <a href="https://github.com/bcnmy/metatx-standard/blob/erc20-forwarder-demo/example/react-ui/src/App.js" target="_blank" >here</a> and example solidity code <a href="https://github.com/bcnmy/metatx-standard/blob/erc20-forwarder-demo/src/contracts/TestForwarder.sol" target="_blank" >here</a>
 
 This repository is basic implementation of Native Meta Transactions. This reposiory will be updated as per the <a href="https://github.com/ethereum/EIPs/issues/1776" target="_blank">EIP-1776</a> to implement native meta transactions with support of batching, transaction expiry etc

example/react-ui/README.md

@@ -1,13 +1,40 @@
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
+## ERC20 Forwarder Approach (Forward) for meta transaction 
+For more details please check this section
+https://docs.biconomy.io/guides/enable-paying-gas-in-erc20
+
+## Steps  
+This exmaple is on Kovan test network and showcases how you can pay gas fees in DAI and USDT tokens
+For using Ether provider or USDC check the branch https://github.com/bcnmy/metatx-standard/tree/erc20-forwarder-ethers-demo/example/react-ui/src
+
+i) register your smart contract on the dashboard as ERC20 Forwarder
+ii) register target method API
+iii) follow the steps referring App.js and pay in tokens
+
+## Actions
+
+a) Submit with EIP712 - signature is requested in EIP712 format when user signs a message
+b) Submit with Personal - signature is requested in personal sign format when user signs a message
+c) send backend signed Tx - signs a message and sends a transaction using private key from the backend. Refer to SDK backend section in the docs 
+
+## Note regarding Permit
+
+You may use permit client to provide one time permit for spending DAI tokens from the user.
+
+## Cost display 
+
+Before you send out final request sendTxEIP712/sendTxPersonalSign, you will receive the cost from the built transaction which is the maximum amount of fees to be charged in particular tokens. If gas tokens are enabled these fees come down depending on the efficiency of burning gas tokens. 
+https://medium.com/biconomy/gas-saving-by-biconomy-ea67d7e64d0c 
+
 ## Available Scripts
 
 In the project directory, you can run:
 
 ### `yarn start`
 
 Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Open [http://localhost:6005](http://localhost:6005) to view it in the browser.
 
 The page will reload if you make edits.<br />
 You will also see any lint errors in the console.

example/react-ui/package.json

@@ -3,13 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@biconomy/mexa": "^1.5.10",
+    "@biconomy/mexa": "^2.0.6",
     "@material-ui/core": "^4.9.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "eth-sig-util": "^2.5.2",
     "ethereumjs-tx": "^2.1.2",
+    "ethers": "^5.0.24",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-notifications": "^1.4.3",