scaffold-eth project

Introduction

The 'scaffold-eth' is a great project that showcases the toolbox of a modern dapp developer, from blockchain to website UI.

We are showing here how simple it was to add support for GSN to this project.

Here is the commit from the dev session that can be used as a guide: https://github.com/austintgriffith/scaffold-eth/commit/7b972afe9f4cb3ad6d0c2fb2bd533ad8ead9a9c3

Watch the integration walkthrough video:

Converting 'scaffold-eth' to Support GSNv2

Steps to add GSN to 'scaffold-eth':

  1. Add dependency on '@opengsn/gsn' for 'buidler' package

    "dependencies": {
        "@opengsn/gsn": "0.9.0"
    }
  2. Make SmartContractWallet.sol inherit from BaseRelayRecipient

    import "@opengsn/gsn/contracts/BaseRelayRecipient.sol";
    
    contract SmartContractWallet is BaseRelayRecipient {
  3. Create and call 'setTrustedFrowarder' method in SmartContractWallet

    function setTrustedForwarder(address _trustedForwarder) public {
      trustedForwarder = _trustedForwarder;
    }

    and later in deployment script:

    await walletInstance.setTrustedForwarder(forwarderAddress)
  4. Replace 'msg.sender' with '_msgSender()' everywhere

  5. Add yarn command to deploy and run GSN.

    "gsn-start": "cd packages/react-app/src && gsn start"

    Note: 'gsn start' will create artifacts files in the directory it is started in

  6. In 'Account.js' wrap BurnerProvider with RelayProvider

    const relayHubAddress = require('../build/gsn/RelayHub.json').address
    const stakeManagerAddress = require('../build/gsn/StakeManager.json').address
    const paymasterAddress = require('../build/gsn/Paymaster.json').address
    
    const burnerProvider = new BurnerProvider(props.localProvider.connection.url)
    const gsnConfig = {
      relayHubAddress,
      stakeManagerAddress,
      paymasterAddress
    }
    const gsnProvider = new RelayProvider(burnerProvider, gsnConfig)
    props.setInjectedProvider(new ethers.providers.Web3Provider(gsnProvider))