How to Use Gelato’s Gasless Wallet SDK

The main barrier standing in the way of mass adoption is the current onboarding experience and UX. Web2 is still the standard for usability, as it has been able to onboard even non-digital users. If we are relying on users creating blockchain wallets and never lose their private keys, we won’t be able to onboard more users to web3. Incorporating a seamless onboarding experience (like social login) that users are accustomed to will make it much easier for everyone to use web3 applications.

One topic gaining traction in the web3 space is account abstraction. Account abstraction is a broader topic with different interpretations, but the main consensus around account abstraction is that the user interacts with the blockchain through a smart contract wallet (e.g. Gnosis Safe),which can be programmed to incorporate user-friendly features such as social login, gasless transactions, and more. Check out our tweet thread to learn more about account abstraction and how it is critical for accelerating the adoption of web3 technology by providing a seamless experience for mainstream users.

It is still unclear whether smart contract wallets will substitute Externally Owned Accounts (EOA’s) as the most popularly used wallets, but improvement proposals like ERC-4337 are pushing in this direction.

Gelato Gasless Wallet

The Gelato Gasless Wallet offers developers the ability to create a smart contract wallet out of the box, making it much easier to onboard users without any previous web3 knowledge.

The Gelato Gasless Wallet has two packages:

1. Gasless Wallet SDK
2. Gasless Onboarding SDK

Let’s deep dive into them!

Gasless Wallet SDK

An account abstraction implementation that creates and uses EOA-owned Gnosis Safe Proxies, and relays the transactions using Gelato's 1Balance Service allowing projects to sponsor the gas of the executions.

Getting Started

First we need to install the SDK

yarn add @gelatonetwork/gasless-wallet

Then, we will import the required classes

import {
  GaslessWallet,
  GaslessWalletConfig,
} from "@gelatonetwork/gasless-wallet";
import { ethers } from "ethers";

And with these few lines of code we will able to create a smart contract wallet.

const eoaProvider:
    | ethers.providers.ExternalProvider
    | ethers.providers.JsonRpcFetchFunc = ...

const gaslessWalletConfig: GaslessWalletConfig = {
    apiKey: "1BALANCE_API_KEY",
};

The “1BALANCE_API_KEY” refers to the 1Balance sponsorKey to sponsor your users gas

const gaslessWallet = new GaslessWallet(eoaProvider, gaslessWalletConfig);
await gaslessWallet.init();

It is worth noticing that under the hood the Gasless Wallet SDK uses the getCreate2Address method to deterministically know in advance the address of the smart contract wallet. That means that the smart contract wallet is not yet deployed, it will be only deployed when we send our first transaction. We can check whether or not it is deployed with this method:

const isGaslessWalletAlreadyDeployed = await gaslessWallet.isDeployed();

Here we can see an example of how to send a transaction to a minting nft contract

const {data} = await mintingContract.mint()
const { taskId } = await gaslessWallet.sponsorTransaction(
  mintingContract.address,
  data
);

As result we receive the taskId of the relayed transaction

The Gasless Wallet SDK also exposes the ‘populaTransaction()’ method that enables to decouple the preparation of the transaction from relaying it.

A reasonable question at this point would be: Why do I need a smart contract wallet, when I can send the transaction directly from my EOA?

You don’t need it if you’re doing normal transactions, but the main benefit of the Gasless Wallet SDK is that when relaying your transactions, the transaction msg.sender will be your smart contract wallet.

Gasless Onboarding SDK

A SDK to directly import web3Auth features such as social logins and passwordless onboarding, as well as the gasless wallet integration.

Getting Started

First we will need to install yarn add @gelatonetwork/gasless-onboarding

Import the required classes

import {
  GaslessOnboarding,
  GaslessWalletConfig,
  GaslessWalletInterface,
  LoginConfig,
} from "@gelatonetwork/gasless-onboarding";

Do the initialization

const gaslessWalletConfig: GaslessWalletConfig = { apiKey };
const loginConfig: LoginConfig = {
  chain: {
    id: CHAIN_ID,
    rpcUrl: RPC_URL,
  }
     openLogin: {
       redirectUrl: `REDIRECT_URL`,
     },

};
const gaslessOnboarding = new GaslessOnboarding(
  loginConfig,
  gaslessWalletConfig
);
await gaslessOnboarding.init();

Let’s breakdown this code to understand what is happening:

We create the GaslessWalletConfig with the apiKey (Gelato 1Balance Sponsors key) that will sponsor the relayed transactions gas

 const gaslessWalletConfig: GaslessWalletConfig = { apiKey };

We create the loginConfig with the ChainId, RPC and the redirectUrl, this last one is required when using social logins to redirect after login to your app

const loginConfig: LoginConfig = {
  chain: {
    id: CHAIN_ID,
    rpcUrl: RPC_URL,
  }
     openLogin: {
       redirectUrl: `REDIRECT_URL`,
     },
};

We create an instance of GaslessOnbarding and we initialise it.

const gaslessOnboarding = new GaslessOnboarding(
  loginConfig,
  gaslessWalletConfig
);
await gaslessOnboarding.init();

Login & Logout

const web3AuthProvider = await gaslessOnboarding.login();
await gaslessOnboarding.logout();

When we log in through Web3Auth we will get the web3AuthProvider that will allow us to create a classic Web3Provider with ethers.js for instance.

const provider = new providers.Web3Provider(web3authProvider);

User Info:

If we chose to log in with social login, we could retrieve the user data provided by the social login credentials such as email, name or profileImage.

await gaslessOnboarding.getUserInfo();

Gasless Wallet

Using the Gasless Onboarding SDK we do two steps; the first being using Web3Auth under the hood to login either with social login/email or wallet; and the second , once we are logged in we create a gasless wallet as we did using the Gasless Wallet SDK. In order to retrieve the smart contract wallet we will:

const gaslessWallet: GaslessWalletInterface = gaslessOnboarding.getGaslessWallet();

With this gaslessWallet instance we can use the same methods as before.

Social login

Here we can see a brief description of what happens under the hood when logging in with social media:

1. • If it is the first time the user logs in, Web3Auth will create an EOA and assign it to this user. For further loggins, the same EOA will be used.
2. • A Safe smart contract wallet associated with the EOA is prepared to be deployed when the first transaction will be executed
3. • When a transaction is sent, the smart contract wallet will be deployed and the transaction will be relayed using the 1Balance sponsorKey to fund the gas. The msg.sender of the transaction will be the smart contract wallet address

Using this flow, nothing needs to be signed by the customer besides the initial social login. No provider has to be initiated nor wallet connected, and there is no need to have a browser wallet extension.

Gelato is paving the way to onboarding the next billion users to web3!

Gelato is a Web3 Cloud Platform empowering developers to create automated, gasless, and off-chain-aware Layer 2 chains and smart contracts. Over 400 web3 projects rely on Gelato for years to facilitate millions of transactions in DeFi, NFTs, and gaming.

• Gelato RaaS: Deploy your own tailor-made ZK or OP L2 chains in a single click with native Account Abstraction and all Gelato middleware baked in.

• Web3 Functions: Connect your smart contracts to off-chain data & computation by running decentralized cloud functions.

• Automate: Automate your smart contracts by executing transactions automatically in a reliable, developer-friendly & decentralized manner.

• Relay: Give your users access to reliable, robust, and scalable gasless transactions via a simple-to-use API.

• Account Abstraction SDK: Gelato has partnered with Safe, to build a fully-fledged Account Abstraction SDK, combining Gelato's industry's best gasless transaction capabilities, with the industry's most secure smart contract wallet.

Subscribe to our newsletter and turn on your Twitter notifications to get the most recent updates about the Gelato ecosystem! If you are interested in being part of the Gelato team and building the future of the Internet browse the open positions and apply here.