Creating Metatransactions with Web3Auth and Starton

WHAT IS WEB3AUTH?

Web3auth is an open-source authentication library for web3 applications. It allows users to authenticate with wallets using a social login flow. Similarly, Web3auth offers a solution of wallet address from social login, allowing users to discover Web3 while using a login system they are most likely used to.

This tutorial will cover how to create meta transactions with Starton and Web3auth. Meta transactions are a useful way to onboard users to the Web3 ecosystem by allowing them to use their familiar social login system, and execute transactions without having to pay gas fees or have Ether in their wallets.

By using two routes on Starton, you can create meta transactions. This use case is handy when you want to onboard users to web3.

Installing the project​

The project has been set up using a client-side and a server-side so that your API key is not exposed on client. You can also use the server-side to connect a database for metrics.

Creating Starton Project​

1. Clone the project from Starton Metatransactions GitHub.

Setting up the server side​

Here we would like to enter the data needed to request funds and set up your metatransactions as well as entering your API, so that you can authenticate safely to the API.

1. In server, add your Starton API key in .env.
2. In src > config > startonconfig.ts, set the following parameters:
   • the route to interact with your smart contract call URL (ex: /smart-contract/avalanche-fuji/0xcEB17Bf0E3d198ec985370f456332f10f373CdB3/call)
   • the speed of your transaction (ex: low, average, fast, fastest)
   • the signer wallet
   • the amount of requested funds

Let’s continue with our config files in client.

Setting up our client side​

On the client side, we will set up all the information of your smart contract to connect your project to Web3Auth.

1. Install the client side.

2. In client, add the port where your server is running in .env.

3. In src > config >smart-contract go to smartContract.config.ts and set the following parameters:

   • the version of your smart contract
   • the name of your smart contract
   • the chainId of the network on which you deployed your contract
   • the address of your smart contract

   USING FUNCTIONS TO RETRIEVE YOUR SMART CONTRACT INFORMATION

   You can retrieve all of this information using the Interact tab of your smart contract. Learn more

4. In src>config > smart-contractABI.config.ts, enter the ABI of your contract.

5. In starton, go to starton.config.ts, enter the value of the meta transaction.

6. In src > services> ethersRPC.ts, enter the wallet from which to transfer.

7. In src > hooks> useWeb3AuthInit.ts:

   1. In chainId, replace the value in Number(43113) with the chainId of your network.
   2. In rpcTarget, enter the address of your node, such as 'https://api.avax-test.network/ext/bc/C/rpc'.

   info

   You can find public nodes on https://chainlist.org/

Now that we’re all set, let’s run our project.

Running the project​

To run your project, you will need to run commands both on server and client side.

1. In server, run the command npm run build

2. Then, run npm run start

3. In client, run the command npm run build

4. Then, run npm run start

   Visit http://localhost:3000 to test your project.

Now that you have used our project, visit this guide to learn more about the project How did we build a Meta-Transaction Site with Web3Auth and Starton.