Quick Start: Gasless Apps (Third-party Wallets)

Web3 apps can easily enable gasless transactions through third-party wallets by integrating with the Arcana Gasless (Standalone) SDK!

Arcana wallet

Developers can enable gasless transactions in Arcana wallet by integrating the app with the Arcana Auth SDK and using the built-in gasless feature. See Gasless Quick Start Guide for details.

Arcana Gasless (Standalone) SDK allows gasless transactions in Web3 apps using third-party wallets easily!

1. Register App

Log into the Arcana Developer Dashboard:

https://dashboard.arcana.network

In the Manage Apps dashboard screen, create a new app entry to register app. Each app is assigned a unique Client ID at registration. The Client ID is used for integrating the app with the Arcana Auth SDK.

A default Testnet configuration profile is associated with the registered app.

2. Configure Gasless

Configure gasless transactions for the registered app through the Arcana Developer Dashboard. Gasless configuration involves setting up gas tanks on one or more supported chains, funding gas tanks, and providing smart contract ABI details to whitelist one or more app operations.

3. Install SDK

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);

Use latest SDKs

Use the latest Arcana Gasless (Standalone) SDK release: v0.0.30.

4. Add Gasless Transaction

Enable gasless transactions for third-party wallets by calling the doTx() method of the Arcana Gasless (Standalone) SDK in the authenticated user's context.

Assumption: The Web3 app is already enabled for user onboarding and integrated with third-party wallets.

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.")
  }

5. Deploy

Finally, deploy the app on Testnet (default). For Mainnet deployment, see Testnet > Mainnet Migration Guide.

That's all!

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