Fund Kit Widget

Aarc Widget to deposit funds.

Every web3 application struggles to get users on board with them for a very basic reason, i.e., users have to do too much work to use the embedded wallet provided by the application.

Aarc SDK provides a very simple yet efficient way to solve this issue, the Aarc Deposit Kit Widget.

The Aarc Deposit Kit Widget has all the necessary options for an application to onboard new users those are:

• Centralized Exchange Transfer

• Fiat On-Ramp

• Fund from an EOA

Fund Kit Widget only works for React or React based frameworks like Next.js

Let's get started on how you can integrate THE WIDGET!

---

Install the package

npm i @aarc-xyz/fundkit-web-sdk

Import the Components

import {
    AarcFundKitModal,
    FKConfig,
    ThemeName,
    TransactionErrorData,
    TransactionSuccessData,
} from "@aarc-xyz/fundkit-web-sdk"

Setting up the config

Configuring the component only includes defining your application needs.

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.

import {
    AarcFundKitModal,
    FKConfig,
    ThemeName,
    TransactionErrorData,
    TransactionSuccessData,
} from "@aarc-xyz/fundkit-web-sdk"

  const config: FKConfig = {
    appName: "Aarc Stage",
    module: {
      exchange: {
        enabled: false,
      },
      onRamp: {
        enabled: true,
        onRampConfig: {
          customerId: "123", // replace with any unique id for the user
        },
      },
      bridgeAndSwap: {
        enabled: true,
        fetchOnlyDestinationBalance: false,
        routeType: "Value",
      },
    },
    destination: {
      walletAddress: "0xeDa8Dec60B6C2055B61939dDA41E9173Bab372b2",
    },
    appearance: {
      roundness: 42,
      theme: ThemeName.DARK,
    },

    apiKeys: {
      aarcSDK: process.env.NEXT_PUBLIC_API_KEY!,
    },
    events: {
      onTransactionSuccess: (data: TransactionSuccessData) => {
        console.log("onTransactionSuccess", data);
      },
      onTransactionError: (data: TransactionErrorData) => {
        console.log("onTransactionError", data);
      },
      onWidgetClose: () => {
        console.log("onWidgetClose");
      },
      onWidgetOpen: () => {
        console.log("onWidgetOpen");
      },
    },
    origin: window.location.origin 
  };

Use Widget in component

To open the widget, first, create an AarcFundKitModal object, call the .init() this will initialize the listeners between the iFrame widget and your application. Then finally call .openModal()

Learn more about AarcFundKitModal from this guide.

import {
    AarcFundKitModal,
    FKConfig,
    ThemeName,
    TransactionErrorData,
    TransactionSuccessData,
} from "@aarc-xyz/fundkit-web-sdk"

const config: FKConfig = {
    appName: "Dapp Name",
    destination: {
        walletAddress: "0x0dfFe536e4.....66a387192C1",
    },
    // ... REST OF THE CONFIG ...
    origin: window.location.origin,
}

const aarcModal = new AarcFundKitModal(config)
aarcModal.init() // initilize listners

export default function Home() {
    return <button onClick={aarcModal.openModal}> Open Modal </button>
};