Arcana's Chain Abstraction SDK on Scroll: A Step-by-Step Guide

Arcana Network

Jan 22, 2025 • 6 min read

Navigating the complexities of a multichain experience becomes intuitive when users can effortlessly manage their funds across chains. By integrating Arcana’s Chain Abstraction SDK, apps on Scroll can enable users to connect their existing EOA wallets and spend a Unified Balance across chains, eliminating the need for complex bridging or fragmented liquidity.

But how does Arcana’s Chain Abstraction work under the hood?

A user submits an intent to spend their unified balance on Scroll, even if their funds are spread across other chains.
Arcana verifies the intent, checking if the user has sufficient funds and allowances configured for the operation.
Funds are aggregated from the user’s balances on the source chains and transferred to the Arcana Vault.
Solvers are notified of the intent. Currently, Arcana serves as the primary solver, with third-party solvers being onboarded soon. Solvers race to fulfill the intent.
The winning solver provides liquidity to the user’s EOA on the destination chain (Scroll).
Once the solver fulfils the intent, the user submits the transaction on Scroll. Arcana verifies the fulfilment and settles with the solver periodically.

*In case of a timeout or failure, Arcana verifies and refunds the funds from the source chain to ensure a fail-safe user experience.

Why Choose Arcana’s CA SDK?

Unified Balances: Spend seamlessly across chains, in 1 click.
Developer-Friendly: Integrates in minutes with minimal code changes.
Self-Custody: Works with any EOA wallet (e.g. Metamask, Rabby)
Customizable UI: Plug & play or tailor to your app’s needs.

Integrate Arcana’s Chain Abstraction SDK: A Step-by-Step Guide

The following code samples and explanations guide you through adding the CA SDK to your app built on Scroll. In this example, we demonstrate how to fork Aave and integrate Arcana's CA SDK for seamless spending of unified balance from other chains.

Explore the GitHub repository for the forked integration with Aave: Aave-CA Integration
Refer to our Arcana’s documentation: Arcana Docs
Test the SDK on the Aave fork here: Aave Fork Demo

Let’s get started:

1. Installing the Arcana CA SDK

Begin by installing the Arcana CA SDK using your preferred package manager:

2. Initializing Arcana CA SDK

Initialize the Arcana CA SDK with the Scroll blockchain provider:

Example: SDK initialization in the Aave fork at src/services/ca.ts

3. Setting Up Allowances on Scroll

The Scroll chain requires explicit allowances to enable unified balances. Here’s how to configure them:

3.1) Setting Up Allowance Hooks:

Use the SDK's hooks to display necessary allowance details to the user. These allowances can be set up at the beginning, or during run time when the user is performing a transaction. During runtime, this would require a check to ensure the allowances are set.

Example: Intent and allowance hooks in the Aave fork example app at: src/services/ca.ts

3.2) Getting Allowances on Scroll:

Example: Getting allowance in the Aave fork example app at: src/services/ca.ts

3.3) Setting Allowances:

When the user initiates a chain-abstracted transaction, allowances are required to transfer the funds from the user’s wallet to Arcana’s vault contract on the respective chains where the balances will be used from.

Example: Allowances are set using the hooks at: src/components/transactions/Supply/SupplyActions.tsx

4. Fetching Unified Balances

Retrieve token balances unified across Scroll and other supported chains. The app can choose to display just the final token-specific unified balance for USDC, USDT, and ETH or choose to also display the unified token balance broken up by balances on each chain.

Example: Balances are fetched in the example app at: src/services/ca.ts

5. Handling Transactions on Scroll

The SDK allows direct interaction with the Scroll chain for transactions:

Note: .request() function supports all JSON-RPC methods

6. Additional Features for Scroll integration

6.1) Bridging Tokens to Scroll:

Example: src/components/transactions/supply/supplyActions.tsx

In the example app, bridge() function is used when the user clicks the supply button and chain abstraction is required ie. when the supply amount is more than the balance on chain but less than or equal to the unified balance, which is fetched from await ca.getUnifiedBalances()

When the bridge() function is implemented, the transaction goes as it would without chain abstraction and proceeds to supply the amount to Aave.

Defining the Function:

Calling the function:

6.2) Transferring Tokens on Scroll:

Unified balance can be transferred to another address on Scroll by using funds available on Scroll and other supported chains in a single click.

7. Event Handling for Smooth UX

Track SDK events during operations to update your UI dynamically:

7.1) Adding Event Listeners:

Once a user initiates and approves the intent, through the event listeners, you can monitor the status of the intent and transaction. You can choose to display one or more of these statuses to the user based on your design goals.

Example: event listener added at: src/services/ca.ts

7.2) Removing Event Listeners:

Note: trigger removeCAEventListner() when the site is closed or content is refreshed

Conclusion

By integrating Arcana’s Chain Abstraction SDK, you can enable seamless token management, unified balances, and smooth multichain transactions for your users.

For detailed documentation, visit the Arcana CA SDK Reference.

Get started today and bring the power of Chain Abstraction to your app!

About Arcana Network‍

Arcana Network is a leading Chain Abstraction Protocol powered by an Appchain, aimed at transforming the Web3 UX. Arcana’s Chain Abstraction-enabled Wallet and SDK, eliminate asset fragmentation, offering users a Unified Balance of their assets across chains, allowing them to spend on any chain, instantly, without bridging.

Arcana has raised from 40+ leading investors including Balaji S, the Founders of Polygon, John Lilic, Santiago Roel, and funds like Woodstock, Republic, Fenbushi, Polygon Ventures, DCG, and others. Our native token, $XAR, is listed on Bybit, Gate, and MEXC.

Try Arcana’s Chain Abstraction Today

Join our growing community: Website | Twitter | Telegram | Youtube