Integration Checklist

Estimated time to read: 7 minutes

Quickly integrate the Arcana SDKs to enable social login and gasless transactions in your Web3 apps. Use these checklists, organized by your app’s specific use case:

• Chain Type: EVM or non-EVM
• App Type: Web, Wallet connector, Mobile, Gaming
• Gasless: Arcana wallet or Third-party Wallets

Chain Type

EVMNon-EVM

Use this checklist for Web3 apps supported EVM chains.

• 1. Register Web3 app, get Arcana Client ID.

• 2. Use the pre-configured chain list and select active chains displayed in the Arcana wallet, set a chain as the default.

• 3. Configure Social Login providers through the dashboard (optional).

• 4. Configure Gasless Transactions (optional).

• 5. Install required SDKs. Depending upon the app type and usage, you may have to install one or more SDKs.

• 6. Integrate the app by following app-specific integration instructions:

  • Wagmi
  • RainbowKit
  • Walletconnect
  • Web3-react
  • React/Next
  • Vanilla HTML/CSS/JS
  • Vue
  • Gasless

• 7. Onboard users as per the app type and onboarding options:

  • Wagmi
  • RainbowKit
  • Walletconnect
  • Web3-react
  • React/Next
  • Vanilla HTML/CSS/JS
  • Vue *Gasless

• 8. Add code to issue supported Web3 wallet operations, JSON/RPC functions in the authenticated user's context.

Use this checklist for Web3 apps supported non-EVM chains.

• 1. Register the app and configure non-EVM Chain settings as per the chain type:

  • Solana
  • MultiversX
  • Near

• 2. Configure Social Login providers through the dashboard (optional).

• 3. Configure Gasless Transactions (optional).

• 4. Install required SDKs. Depending upon the app type and usage, you may have to install one or more SDKs.

• 5. Integrate the app by following app-specific integration instructions:

  • Wagmi
  • RainbowKit
  • Walletconnect
  • Web3-react
  • React/Next
  • Vanilla HTML/CSS/JS
  • Vue
  • Gasless

• 6. Onboard users as per the app type and onboarding options:

  • Wagmi
  • RainbowKit
  • Walletconnect
  • Web3-react
  • React/Next
  • Vanilla HTML/CSS/JS
  • Vue
  • Gasless

• 7. Add code to issue supported Web3 wallet operations, and JSON/RPC functions in the authenticated user's context. Note that these supported functions may vary across chains:

  • Solana
  • MultiversX
  • Near

App Type

WebWallet ConnectorsMobileGaming

Use this checklist for vanilla HTML/CSS/JS apps, React/NextJS, and Vue Web3 apps.

• 1. Register Web3 app, choose EVM/non-EVM chain type as required during app registration and configure the active and default chains via the dashboard. Get Arcana Client ID.

• 2. Configure Social Login providers through the dashboard (optional).

• 3. Configure Gasless Transactions (optional).

• 4. Install Arcana Auth SDK. For React/NextJS apps, also install the Arcana Auth React SDK.

• 5. Integrate the app by following app-specific integration instructions:

  • Vanilla HTML/CSS/JS
  • Vue
  • React/Next

• 6. Onboard users as per the app type and onboarding options:

  • Vanilla HTML/CSS/JS
  • Vue
  • React/Next

• 7. Add code to issue supported Web3 wallet operations, and JSON/RPC functions in the authenticated user's context. Note that the supported Web3 wallet operations may vary depending upon the chain type, EVM or non-EVM.

Use this checklist for Web3 apps using wallet connectors such as Wagmi, RainbowKit, WalletConnect and Web3-React.

• 1. Register Web3 app, choose EVM/non-EVM chain type as required and configure the active and default chains via the dashboard. Get Arcana Client ID.

• 2. Configure Social Login providers through the dashboard (optional).

• 3. Configure Gasless Transactions (optional).

• 4. Install Arcana Auth SDK and Arcana Auth Wagmi SDK.

• 5. Integrate the app by following app-specific integration instructions:

  • Wagmi
  • RainbowKit
  • Walletconnect
  • Web3-react

• 6. Onboard users as per the app type and onboarding options:

  • Wagmi
  • RainbowKit
  • Walletconnect
  • Web3-react

• 7. Add code to issue supported Web3 wallet operations, JSON/RPC functions in the authenticated user's context.

Use this checklist for Web3 mobile apps built using Flutter or React-Native frameworks.

• 1. Register Web3 app, choose EVM/non-EVM chain type as required during app registration and configure the active and default chains via the dashboard. Get Arcana Client ID.

• 2. Configure Social Login providers through the dashboard (optional).

• 3. Configure Gasless Transactions (optional).

• 4. Install Arcana Auth Flutter SDK or Arcana Auth React-Native SDK depending upon the app type.

• 5. Integrate the app and onboard users by following app-specific integration instructions:

  • Flutter
  • React-Native

• 6. Add code to issue supported Web3 wallet operations, and JSON/RPC functions in the authenticated user's context. Note that the supported Web3 wallet operations may vary depending upon the chain type, EVM or non-EVM.

Use this checklist for Web3 Unity apps.

• 1. Set up Unity packages before using Arcana SDKs.

• 2. Register Web3 app, choose EVM/non-EVM chain type as required and configure the active and default chains via the dashboard. Get Arcana Client ID.

• 3. Configure Social Login providers through the dashboard (optional).

• 4. Configure Gasless Transactions (optional).

• 5. Install Arcana Auth Unity SDK.

• 6. Integrate the Unity app with the SDK.

• 7. Onboard users via a single line of code using the plug-and-play login UI.

• 8. Add code to issue supported Web3 wallet operations, JSON/RPC functions via the Arcana wallet in the authenticated user's context. Note that the supported Web3 wallet operations may vary depending upon the chain type, EVM or non-EVM.

Gasless

Arcana Wallet3^rd party Wallet

Use this checklist to enable gasless transactions through the Arcana wallet by using the built-in gasless feature in the Arcana Auth SDK.

Wallet Operations

Note that the supported Web3 wallet operations may vary depending upon the chain type, EVM or non-EVM.

Issuing Gasless Transactions

There is no special function to issue gasless operations through the Arcana wallet. All app operations that were configured to be gasless by whitelisting them in the dashboard configuration settings will automatically happen in a gasless manner.

• 1. Register Web3 app, choose EVM/non-EVM chain types as required during app registration and configure the active and default chains via the dashboard. Get Arcana Client ID. Note that only a subset of chains support gasless transactions.

• 2. Configure Social Login providers through the dashboard (optional).

• 3. Configure Gasless Transactions through the dashboard by setting up the gas tanks, depositing funds in the tanks, and whitelisting app operations to make them gasless for the users.

• 4. Install Arcana Auth SDK. For React/NextJS apps, also install the Arcana Auth React SDK.

• 5. Integrate the app by following app-specific integration instructions.

• 6. Onboard users as per the app type and the choice of onboarding option - built-in, plug-and-play login option or custom login UI option.

• 7. Add code to issue supported Web3 wallet operations, and JSON/RPC functions in the authenticated user's context.

Use this checklist to enable gasless transactions in third-party, browser-based wallets, by using the Arcana Gasless (Standalone) SDK in Web3 apps.

• 1. Register Web3 app, choose EVM/non-EVM chain types as required during app registration and configure the active and default chains via the dashboard. Get Arcana Client ID. Note that only a subset of chains support gasless transactions.

• 2. Configure Gasless Transactions through the dashboard by setting up the gas tanks, depositing funds in the tanks, and whitelisting app operations to make them gasless for the users.

• 3. Install Arcana Gasless (Standalone) SDK.

• 4. Integrate the app by following app-specific integration instructions.

• 5. Add code to issue gasless transactions via the doTx() method. Optionally set up session keys to allow users to pre-approve the transactions issued through the smart contract wallet account by setting the time and transaction value limits.

Global Keys

Global keys automatically enable all supported social login providers for an app. No dashboard configuration is needed. When using global keys with a custom login UI, app developers can choose which providers to allow for user login. However, with the default plug-and-play login UI and global keys, disabling default social login providers is not possible.

---

Last update: August 19, 2024 by shaloo