Get Started

The Aarc iframe widget is a powerful tool that allows developers to embed cross-chain transaction functionality directly into their decentralized applications (dApps) or websites. It simplifies the user experience by enabling seamless interactions—such as funding intents, executing cross-chain transactions, or managing wallets—without requiring users to leave the application interface.

Introduction

The iframe widget integrates Aarc’s Intent Execution Protocol into your application, providing users with a streamlined interface for:

Transaction Intent Management

Create and manage transaction intents with ease, handling complex cross-chain operations seamlessly.

Cross-Chain Operations

Execute cross-chain deposits, swaps, or payments with guaranteed outcomes and atomic transactions.

Flexible Funding Options

Interact with various funding sources including wallets and fiat onramps for seamless transactions.

---

Setup Guide (Using SDK Recommended)

1. Install Core Packages

   Install the required Aarc packages:

   npm i @aarc-xyz/fundkit-web-sdk @aarc-xyz/eth-connector
   
2. Install Dependencies

   Install additional required dependencies:

   npm i @tanstack/react-query @rainbow-me/rainbowkit viem wagmi
   
3. Configure Widget

   Create an aarcConfig.ts file with your application configuration:

   To learn more about the config type visit this link

   If you add contract details in the destination then the widget will automatically enable checkout mode where it will call a smart contract.

4. Setup Root Component

   Wrap your application with the necessary providers and create an AarcFundKitModal instance:

   Learn more about AarcFundKitModal from this guide.

   import {
       AarcFundKitModal,
       FKConfig,
       ThemeName,
       TransactionErrorData,
       TransactionSuccessData,
   } from "@aarc-xyz/fundkit-web-sdk"
   import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
   import { AarcEthWalletConnector } from "@aarc-xyz/eth-connector";
   import { aarcConfig } from "aarcConfig.ts"
   import "@aarc-xyz/eth-connector/styles.css";
   
   const queryClient = new QueryClient();
   
   function App({ children }) {
     const aarcModalRef = useRef<AarcFundKitModal | null>(new AarcFundKitModal(aarcConfig));
     const aarcModal = aarcModalRef.current;
     
     return (
       <WagmiProvider config={wagmiConfig}>
         <QueryClientProvider client={queryClient}>
           <RainbowKitProvider>
             <AarcEthWalletConnector aarcWebClient={aarcModal}>
                 {children}
             </AarcEthWalletConnector>
           </RainbowKitProvider>
         </QueryClientProvider>
       </WagmiProvider>
     );
   }
   
5. Add Widget Trigger

   Create a component to open the widget:

   "use client";
   import { aarcConfig } from "aarcConfig.ts"
   
   export default function Home() {
     const aarcModal = new AarcFundKitModal(aarcConfig);
   
     return (
         <button onClick={() => {aarcModal?.openModal()}}>
             Open Widget
         </button>
     );
   }
   
6. Optional: Preset Configuration

   You can preset the widget with specific configurations to enhance user experience.

7. State Management

   For effective widget state management across your application, we recommend using a custom context. This approach centralizes state management and ensures seamless integration. You can view an example implementation here.