Skip to content

Quick Start: Gasless Apps

Already using Arcana Auth SDK?

Use the latest release: v1.0.9.

To upgrade Arcana Auth SDK v1.0.8 -> v1.0.9, see the Migration Guide. For versions older than Arcana Auth SDK v1.0.8, be aware of potential breaking changes that may require app reconfiguration and code updates. Check the Migration Guides and Release Notes for specifics.

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. Then they need to install one or more Arcana Auth SDK SDKs and integrate with them using the unique app identifier.

Auth Usage Overview Auth Usage Overview

In this guide, we will cover only the first two use cases. The third use case requires Arcana Gasless (Standalone) SDK only. For details, see how to enable gasless transactions in apps that use only third-party browser-based wallets.

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.

To enable gasless operations, you may be required to install one or more Arcana Auth SDKs depending upon the app use case.

  1. Only Arcana wallet apps requires simply installing and integrating with the Arcana Auth SDK (plus companion SDKs depending upon the app type, if required)

  2. Multi-wallet apps, require the developers to install both the Arcana Gasless (Standalone) SDK and the Arcana Auth SDK (plus companion SDKs depending upon the app type, if required).

Apps that are required to enable gasless transactions when using only the embedded, non-custodial Arcana wallet do not need to integrate with the Arcana Gasless (Standalone) SDK as the gasless feature is already built-in the Arcana Auth SDK. Simply select your app type and follow the instructions here for installing and integrating the app with the appropriate Arcana Auth SDK (plus companion SDKs depending upon the app type, if required).

Developers of multi-wallet apps that are required to enable gasless transactions in any third-party browser-based wallets in addition to the Arcana wallet need to do two things.

First, select the app type and follow the instructions here for installing and integrating the app with the appropriate Arcana Auth SDK (plus companion SDKs depending upon the app type, if required). This takes care of enabling gasless transactions in the Arcana wallet.

Second, install and integrate the app with the Arcana Gasless (Standalone) SDK. This is required to enable gasless transactions in the third-party browser-based wallets supported by the multi-party app. Refer to the code snippets below for details:

```sh

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.

```js
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 the requisite SDKs as per the use case and the app type, add code to onboard users. Depending upon the use case, developers can choose to use the social login offered by the Arcana Auth SDK or add custom code to onboard users in case of apps using only the third-party wallets.

Use the social login feature of the Arcana Auth SDK to onboard users. Gasless transactions are enabled by default for the Arcana wallet once the developer configures gas tanks and whitelists app operations through the Arcana Developer Dashboard. Authenticated users can instantly access the Arcana wallet and sign blockchain transactions with zero gas fees.

In multi-wallet apps, developers can choose to use the social login feature of the Arcana Auth SDK to onboard users or they can build their own user onboarding logic.

Gasless via Arcana wallet

Gasless transactions are enabled by default for the Arcana wallet once the developer configures gas tanks and whitelists app operations through the Arcana Developer Dashboard. Authenticated users can instantly access the Arcana wallet and sign blockchain transactions with zero gas fees.

Gasless via third-party wallets

For third-party wallets, enabling gasless transactions requires adding code to call the doTx() method of the Arcana Gasless (Standalone) SDK once the user is authenticated. This will allow third-party wallets to support the gasless transaction. For details, see code snippet below:

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 the Arcana SDKs.

Examples

See sample-gasless-arcana-only submodule in the Auth Examples GitHub repo for a sample app that integrates with the Arcana Auth SDK to use the authentication and built-in gasless transactions features when using Arcana wallet.

See sample-gasless-multi-wallet submodule in the Auth Examples GitHub repo for a sample app that uses MetaMask (or any third-party browser-based wallet) as well as the Arcana wallet and enables gasless transactions for both types of wallets. This example shows how to use the Arcana Auth SDK and the Arcana Gasless (Standalone) SDK together.

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 17, 2024 by shaloo, shalz