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

@aarc-xyz/eth-connector is a different package which needs to be installed seperately, it will help to connect EVM based wallets.

npm i @aarc-xyz/fund-kit-widget @aarc-xyz/eth-connector @tanstack/react-query wagmi

Import the Components

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider, createConfig, http } from "wagmi";
import { polygon } from "wagmi/chains"; // import all required chains
import { AarcEthWalletConnector } from "@aarc-xyz/eth-connector";
import {
  AarcSwitchWidgetProvider,
  FKConfig,
  TransactionErrorData,
  TransactionSuccessData,
} from "@aarc-xyz/fund-kit-widget";
import "@aarc-xyz/eth-connector/styles.css"; // this is mandatory, else widget won't render properly

Setting up the config

Configuring the component only includes defining your application needs.

To learn more about the config type visit

If you add contract details in destination then if will be a checkout mode where it will call a smart contract.

import { FKConfig } from "@aarc-xyz/fund-kit-widget"

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

Setting up Providers in root component

Add AarcSwitchWidgetProvider and AarcEthWalletConnector with other required providers.

AarcSwitchWidgetProvider and AarcEthWalletConnector should to be wrapped in root component only.

function App() {

  const wagmiConfig = createConfig({
    chains: [polygon],
    transports: {
      [polygon.id]: http(),
    },
  });

  const queryClient = new QueryClient();
  
  return (
  <WagmiProvider config={wagmiConfig}>
    <QueryClientProvider client={queryClient}>
      <AarcSwitchWidgetProvider config={config}>
          <AarcEthWalletConnector>
            //...//
          </AarcEthWalletConnector>
        </AarcSwitchWidgetProvider>
    </QueryClientProvider>
  </WagmiProvider>
)};

export const App;

Use Widget in component

To open the widget, call setOpenModal from the useModal hook and set it to true on button click as shown below.

Learn more about useModal from this guide.

import { useModal } from '@aarc-xyz/fund-kit-widget';

export default function Home() {
    const { setOpenModal } = useModal();

    return <button onClick={() => setOpenModal(true)}> Open Modal </button>
};

Additional Configuration (if needed)

If you are working with webpack > 5 in your react application, then you might face this error:

Error due to webpack>5

Module not found: Error: Can't resolve 'path' in '/Users/xxxxx/testing/node_modules/@aarc-xyz/migrator/node_modules/dotenv/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

To resolve this error, including Polyfill you may need additional configuration, which you can find here per your application requirements.