Web Apps

Estimated time to read: 2 minutes

Enable unified-balance in 'Web' apps by integrating with the Arcana CA SDK. Let the app users spend anywhere with chain abstracted transactions.

1. Install

npmyarn

npm install --save @arcana/ca-sdk

yarn add @arcana/ca-sdk

2. Integrate

import { CA } from '@arcana/ca-sdk'

const provider = window.ethereum
const ca = new CA();
//Set the EVM provider  
ca.setEVMProvider(provider);

try {
  await ca.init()
} catch (e) {
  // Handle exception case
}

Initialize First!

The app must use await until the init() call is complete, before invoking any of the other Arcana CA SDK functions listed in Arcana CA SDK Reference.

3. Set up Chain Abstraction

Web3 app developers must add code to allow the users to set up allowances. These allowances let users spend the unified balance on any chain if there are sufficient funds on the source chains.

Use setOnAllowanceHook UI Hook to set up allowance:

ca.setOnAllowanceHook(async ({ allow, deny, sources }) => {
    // This is a hook for the dev to show user the allowances that need to be setup for the current tx to happen

    // sources: an array of objects with minAllowance, chainID, token symbol etc
    // allow(allowances): allowances is an array with allowance for each source (len(sources) == len(allowances))
    // deny(): stop the flow
})

Use setOnIntentHook to let the users specify the intent for a chain abstracted transaction:

ca.setOnIntentHook(({ intent, allow, deny, refresh }) => {
    // This is a hook for the dev to show user the intent, the sources and associated fees

    // intent: Intent data containing sources and fees for display purpose
    // allow(): accept the current intent
    // deny(): deny the intent and stop the flow
    // refresh(): should be on a timer of 5s to refresh the intent (if not refreshed old intents might fail due to fee changes)
  })

4. Access Unified Balance

const balances = await ca.getUnifiedBalances()
const usdtBalance = await ca.getUnifiedBalance("usdt")

5. Issue CA Transaction

await ca.request({
    method: "eth_sendTransaction",
    params: [{
        to: "0xEa46Fb4b4Dc7755BA29D09Ef2a57C67bab383A2f", 
        from: "0x7f521A827Ce5e93f0C6D773525c0282a21466f8d",
        value: "0x001"
    }],
})

Developers can let users manage allowances in the Web3 app by accessing current allowance configurations associated with their EOA wallet and modify or revoke them.

Learn more about how to handle chain abstraction user intent processing events and other advanced functionality in the app.

Finished.

The 'Web' app is all set to let users spend on any chain via unified balance and chain abstracted transactions.