App.jsx

import React, { useEffect, useState } from 'react';
import Web3 from 'web3';
import { ethers } from 'ethers';
import { configureGSN, RelayProvider } from '@opengsn/gsn';
import CaptureTheFlagJsonInterface from './abis/CaptureTheFlag.json';

const RELAY_HUB_ADDRESS = '0xF17eEDa3701cf50a2Cb1ad5cbeA64F753725DC80';
const FORWARDER_ADDRESS = '0xEd89B8Af2338054fdB9Bab87b6AA431bF3954711';
const STAKE_MANAGER_ADDRESS = '0x789c213D6671D76b481f7A72B7C68e8d303303bF';
const CAPTURE_THE_FLAG_ADDRESS = '0xd1a25969B516e0C9ecfc90cd7108E3E2e402f971';
const PAYMASTER_ADDRESS = '0xc7D2cfe88640122609fb668f4739fD22f9AD025c';

const ethProvider = new ethers.providers.JsonRpcProvider('http://127.0.0.1:7545');

const privateKey = '0x24a528f7ad6bb06f7059d7bfab1e6021890d3704fe9361003e514f5421aaa5c9';

const wallet = new ethers.Wallet(privateKey, ethProvider);

const rootProvider = new Web3.providers.HttpProvider('http://127.0.0.1:7545');

const networkId = 5777;

const gsnConfig = configureGSN({
  relayHubAddress: RELAY_HUB_ADDRESS,
  stakeManagerAddress: STAKE_MANAGER_ADDRESS,
  jsonStringifyRequest: true,
  chainId: networkId,
  paymasterAddress: PAYMASTER_ADDRESS,
  verbose: true
});

const provider = new RelayProvider(rootProvider, gsnConfig);

const web3 = new Web3(provider);
const web3Wallet = web3.eth.accounts.privateKeyToAccount(privateKey);

provider.addAccount({
  privateKey: Buffer.from(privateKey.substring(2), 'hex'),
  address: web3Wallet.address
});

const captureTheFlagContract = new ethers.Contract(
  CAPTURE_THE_FLAG_ADDRESS,
  CaptureTheFlagJsonInterface.abi,
  wallet
);

const App = () => {
  const [flagHolder, setFlagHolder] = useState();

  useEffect(() => {

    const load = async () => {
      setFlagHolder(await captureTheFlagContract.flagHolder());
    };

    load();

  }, []);

  const deploy = async () => {
    const contractFactory = ethers.ContractFactory.fromSolidity(
      CaptureTheFlagJsonInterface,
      wallet
    );
    console.log(await contractFactory.deploy(FORWARDER_ADDRESS));
  };

  const onCaptureTheFlag = async () => {
    const web3CaptureTheFlagContract = new web3.eth.Contract(CaptureTheFlagJsonInterface.abi, CAPTURE_THE_FLAG_ADDRESS);
    console.log(await web3CaptureTheFlagContract.methods.captureFlag().send({
      from: web3Wallet.address,
    }));
  };

  return (
    <div>
      <div>
        <pre>{`Flag Holder = ${flagHolder}`}</pre>
      </div>

      <button type="button" onClick={deploy}>Deploy</button>
      <button type="button" onClick={() => onCaptureTheFlag()}>Capture The Flag</button>
    </div>
  );
};

export default App;

CaptureTheFlag.sol

pragma solidity ^0.6.2;

// SPDX-License-Identifier: MIT OR Apache-2.0

import "@opengsn/gsn/contracts/BaseRelayRecipient.sol";
import "@opengsn/gsn/contracts/interfaces/IKnowForwarderAddress.sol";

contract CaptureTheFlag is BaseRelayRecipient, IKnowForwarderAddress {

  event FlagCaptured(address _from, address _to);

  address public flagHolder = address(0);

  // Get the forwarder address for the network
  // you are using from
  // https://docs.opengsn.org/gsn-provider/networks.html
  constructor(address _forwarder) public {
    trustedForwarder = _forwarder;
  }

  function captureFlag() external {
    address previous = flagHolder;

    // The real sender. If you are using GSNv2, this
    // is not the same as msg.sender.
    flagHolder = _msgSender();
    // flagHolder = msg.sender;

    emit FlagCaptured(previous, flagHolder);
  }

  function versionRecipient() external virtual view
  override returns (string memory) {
    return "1.0";
  }

  function getTrustedForwarder() public view
  override returns(address) {
    return trustedForwarder;
  }
}