Build your app with the Gas Station Network

Santiago Palladino | August 16, 2019

 

Start building a gasless application today!

The Gas Station Network, or GSN for short, is a decentralized solution for solving user onboarding to Ethereum applications. It allows you as an app developer to pay for your users’ transactions in a secure way, so they don’t need to set up an account and acquire ETH to pay for their gas.

Since the GSN was announced last week, we’ve seen a lot of interest from the community in building dapps that leverage its potential. Today, we are happy to present the OpenZeppelin set of tools for working with the GSN all across the stack: from the smart contracts themselves to the dapp front end. But before we do that, we have other news to share.

Live on mainnet!

This week we deployed the central GSN RelayHub contract to mainnet and spun up a few relayers to get the ball rolling! Tabookey, the original developers of the protocol, also joined in with a relayer of their own. We hope to see more members of the GSN Alliance and the entire community joining the party soon!

You can check out the available relayers on the GSN in the Relayer Explorer built by the great team at DeltaCamp.

 

https://gsn.openzeppelin.com/relay-hubs/

Also, we’ve deployed the RelayHub contract to all pending testnets (Ropsten, Kovan, and Goerli), so no matter where your staging environment is, you can work with the GSN.

Writing contracts to use on the GSN

The GSN requires that your application contract conform to a certain interface, so that it can answer whether or not it will pay for a certain transaction to be relayed. To easily implement that interface, you can just extend from the base contracts provided by @openzeppelin/contracts-ethereum-package:

import "@openzeppelin/contracts-ethereum-package/contracts/GSN/GSNRecipient.sol";

contract Chat is GSNRecipient {
  event MessagePosted(string message, address user);

  function postMessage(string memory message) public {
    emit MessagePosted(message, _msgSender());
  }

  function acceptRelayedCall(
    /* snip */
  ) external view returns (uint256, bytes memory) {
    return _approveRelayedCall();
  }
}

You can read more about this in our Writing GSN-capable contracts guide, or check out the GSN payment strategies using ERC20 tokens or off-chain approvals that are shipped in the OpenZeppelin contracts package.

Building your dapp

A few weeks ago, we announced @openzeppelin/network.js, a front-end JavaScript library for easily managing your web3 connections. We are now leveraging it to also provide easy access to the GSN from your dapp, so with just the flick of an option, you can turn all your transactions into meta-transactions.

import { useWeb3Network, useEphemeralKey } from "@openzeppelin/network";

// Enable GSN on your web3 context using an ephemeral key for signing
const context = useWeb3Network(PROVIDER_URL, {
  gsn: { signKey: useEphemeralKey() }
});

// Get the web3 instance
const { lib: web3 } = context;

// Create a new contract and send a tx without needing gas!
const contract = new web3.eth.Contract(ABI, ADDRESS);
contract.methods.postMessage('Hello world!').send();

You can learn more going through our step-by-step Building a GSN powered (d)app from scratch guide or checking out the reference for @openzeppelin/network.js or the underlying @openzeppelin/gsn-provider.

The GSN may be running on mainnet and all Ethereum testnets, but it’s certainly not running in your local development network when you run ganache-cli or geth --dev. To make development easier, we’ve built @openzeppelin/gsn-helpers to easily deploy a local relay hub, spin up a relayer, and fund it to begin operating right away.

Also, if you don’t want to spin up a full relayer every time you develop or run your tests, you can also use the GSNDevProvider. This is a fake provider, built only for development environments, that acts as both provider and relayer. It allows you to quickly test your GSN setups locally or on your CI.

To enable it, just pass a dev: true option when creating the Web3 context. Read more about it and how it works on the @openzeppelin/gsn-provider repository.

Hit the ground running!

If you don’t want to go through all of the above and start coding right away, check out our GSN Starter Kit. This is a ready-to-use React app, already configured with all the OpenZeppelin components you need to get building on the GSN. Just unpack it using our CLI and start building!

openzeppelin unpack @openzeppelin/starter-kit-gsn

The kit includes a sample Counter contract as well, so you can try out how the GSN works right when you start the React application. It uses the GSNDevProvider under the hood when running locally.

Gasless chat

To put our tools to test, our own Dennison Bertram built a sample Chat application powered by the GSN, currently running on Rinkeby. Just open the site, without even having MetaMask, and start sending messages!

Be mindful that the chat app is currently paying for all messages, so please be kind and avoid spamming! Also, if you’re feeling generous, you can use the Dapp Tool to add some Rinkeby ETH to it on the GSN.

Learn more

Check out our getting started docs for more info on how to use the Gas Station Network with the OpenZeppelin platform, which will link you to anything you want to learn about this. 

Also, be sure to stop by our forum to ask any questions you may have or to share the awesome things you’re building on the GSN!

Happy coding!

Related Posts