Widget

Aarc Widget to buy tokens.

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 Fund Kit Widget.

The Aarc Fund Kit Widget has all the necessary options an application needs to onboard new users, like:

• Centralized Exchange Transfer

• Fiat On-Ramp

• Fund from an EOA

Aarc widget

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

---

Install the packages

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

Install the dependencies

npm i @tanstack/react-query @rainbow-me/rainbowkit viem wagmi

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.

In aarcConfig.ts:

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

export const aarcConfig: 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",
        connectors: [SourceConnectorName.ETHEREUM],
      },
    },
    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 root component

To open the widget, wrap your application with the necessary providers, create an AarcFundKitModal instance using the desired configuration, and then call .openModal() to display the widget.

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>

  );
}

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>
  );
}

You can also preset the widget with specifics making it further easy for user

To effectively manage the widget's state 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.