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
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.
See Also
Arcana CA SDK Quick Links