Skip to content

Quick Start: Gasless Apps (Third-party Wallets)

Already using Arcana Gasless (Standalone) SDK?

Use the latest release: v0.0.25.

Overview

Web3 app developers can easily enable zero gas fees for app users by using Arcana SDKs. The process may vary depending on the app use case:

Use cases

  1. Only Arcana wallet Apps: This use case refers to apps that need to enable gasless transactions only with the embedded, non-custodial Arcana wallet.
  2. Multi-wallet Apps: Multi-wallet apps are those that support Arcana wallet and third-party browser-based wallets as well. They need to enable gasless transactions in both, the Arcana wallet and any third-party browser-based wallet.
  3. Only Third-party Wallet Apps: This use case refers to apps that only need to enable gasless transactions for other third-party, browser-based wallets. Such apps do not require any user onboarding functionality or the embedded, non-custodial Arcana wallet offered by the Arcana Auth SDK.

In every use case above, the developers must first use the Arcana Developer Dashboard and register the app, obtain a unique identifier for the app and configure gasless settings. After gasless configuration is complete, developers can proceed to install the requisite SDKs as per the use case and begin app integration.

Auth Usage Overview Auth Usage Overview

In this guide, we will cover only the last use case. For details on the first two use cases, see here.

Step 1: Register & Configure App

To register and configure your app, create a new entry for your app by logging into the Arcana Developer Dashboard:

https://dashboard.arcana.network

Save the unique Client ID assigned to the app after registration. It will be required when you integrate the app with the Arcana Auth SDK. Also, configure the Arcana Auth product usage by specifying branding, setting up authentication providers, managing blockchains displayed in the wallet, and other settings as required.

See how to register and configure app using the Arcana Developer Dashboard for details.

After registering and configuring the app, install the requisite Arcana SDKs as per the app-type and use case.

Step 2: Configure Gasless

Follow the instructions here to configure gasless feature usage as per your app requirements. You will be required to set up gas tanks for your app, deposit gas fees and provide smart contract ABI details to whitelist one or more app operations that should happen in a gasless manner.

Step 3: Install Required SDKs

Make sure the gasless configuration is completed via the Arcana Developer Dashboard before this step.

Apps that only need to enable gasless transactions for some third-party, browser-based wallets can simply install and integrate with the Arcana Gasless (Standalone) SDK. For details, see the code snippets below:

npm i @arcana/scw

Initialize the Arcana Gasless (Standalone) SDK using the unique app identifier obtained via the Arcana Developer Dashboard after registering the app. You need to also provide the browser-based wallet EIP-1193 Ethereum provider for enabling gasless operations in that wallet.

During initialization, the gasless SDK creates an SCW account associated with the EoA account corresponding to the provider window.ethereum. All gasless transactions use this SCW account address.

import { scw } from @arcana/scw;

const scw = new arcana.scw.SCW();
await scw.init("<app_id>", window.ethereum);

After the init call, you can all other methods of the SCW object. Use the getSCWAddress to get the logged-in user's smart contract address (SCW Address). Use getPaymasterBalance to check if the gas tank that is supposed to pay the gas fees for the logged-in user's transactions, is adequately funded.

  const erc20abi = [...];
  let amount = 0.1;

  const erc20Address = "0x2d7aC0907961c7.......45f981Ed8373b5dF86";
  const toAddress = "0x723455665060698....87689dA78E25";
  const Erc20Interface = new ethers.utils.Interface(erc20abi);

  const encodedData = Erc20Interface.encodeFunctionData("transfer", [
    toAddress,
    ethers.utils.parseEther(amount + ""),
  ]);

  console.log("Address: " + scw.getSCWAddress());

  // Check balance

  console.log("Paymaster Balance: " + (await scw.getPaymasterBalance()) / 1e18);

Next, add code to onboard users.

Step 4: Onboard Users

After installing and integrating with the Arcana Gasless (Standalone) SDK, developers need to add custom code to onboard users. After authenticating users, enable gasless transactions for third-party wallets by calling the doTx() method of the Arcana Gasless (Standalone) SDK.

After initializing the Arcana Gasless (Standalone) SDK, you can perform transactions using the doTx() method.

  const erc20abi = [...];
  let amount = 0.1;

  const erc20Address = "0x2d7aC0907961c7.......45f981Ed8373b5dF86";
  const toAddress = "0x723455665060698....87689dA78E25";
  const Erc20Interface = new ethers.utils.Interface(erc20abi);

  const encodedData = Erc20Interface.encodeFunctionData("transfer", [
    toAddress,
    ethers.utils.parseEther(amount + ""),
  ]);

  // You need to create transaction objects of the following interface
  const tx1 = {
    from: scw.getSCWAddress(),
    to: erc20Address, // destination smart contract address
    data: encodedData,
  };

  // Check balance
  // Use scw.getPaymaster() to check whether gas tanks are adequately funded

  console.log("Paymaster Balance: " + (await scw.getPaymasterBalance()) / 1e18);
  if (await scw.getPaymasterBalance()/1e18) > 0 {
    let tx = await scw.doTx(tx1);
    await tx.wait();
    console.log(`Transfer done ${tx.userOpHash}`)
  } else {
    console.log("Insufficient funds in the gas tank.")
  }

Step 5: Deploy App

Finally, deploy the app on the Testnet/Mainnet to let the users log into the app to use gasless transactions.

That's all!!!

Your app is now powered by gasless transactions built using Arcana Gasless (Standalone) SDK.

Examples

See sample-gasless-metamask-only submodule in the Auth Examples GitHub repo for a sample app that uses MetaMask (or any third-party browser-based wallet) and needs to enable gasless transactions for third-party wallet via the standalone Arcana Gasless (Standalone) SDK.

See Also

SDK Release Details

Arcana Auth SDK

See the latest Arcana Auth SDK release notes, refer to the GitHub Repo changelog and download the auth.

Arcana Gasless (Standalone) SDK

See the latest Arcana Gasless (Standalone) SDK release notes, refer to the GitHub Repo changelog and download the Arcana Gasless (Standalone) SDK.


Last update: January 16, 2024 by shaloo, shalz