Aarc FDK Widget Tutorial

megabyte,AarcAccount-Abstraction

gm! Web3 is growing rapidly in technical aspects, and to utilize the power of web3, a non-web3 native person struggles.

The reasons are simple:

There are ways to solve the above issues, but it's too complex and too much work for the development team. Aarc FDK Widget (opens in a new tab) solves this issue by abstracting all the technical complexity and making the work equal to embedding a react component.

That's right, Aarc FDK Widget is a React component that provides all the necessary options to onboard your users seamlessly without sending them to any other page.

Application flow after Aarc FDK Widget Integration

After integrating the Aarc FDK Widget, everyone can instantly be onboarded on your application!

Aarc Widget Preview

Aarc Widget will enhance your application's onboarding experience by providing users with the following options:

To bring this onboarding experience to your application in this tutorial, we will learn how to use Aarc Widget.

LFG (🧱,🚀)

Prerequisites

It would be best if you had the understanding of the following before moving ahead with this tutorial:

Getting Started

We will be building a Nextjs application that will be utilizing the following:

  1. Get the Aarc API Key from the dashboard (opens in a new tab).

    ℹ️ INFO
    Learn how to get the Aarc API Key here (opens in a new tab).
  2. Create a Next application

    npx create-next-app aarc-widget-tutorial

    And select the following for this tutorial: Terminal Next App Setup

  3. Install the Aarc Widget (opens in a new tab) and other dependencies

    npm i @aarc-xyz/deposit-widget @aarc-xyz/deposit-widget-coinbase  @aarc-xyz/deposit-widget-transak @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query antd

After the above steps, you will have a folder structure looking like this 👇🏻

The Aarc Component

It's time to bring in the component to solve the User Onboarding.

  1. Open src/app/page.tsx

  2. Import the following at the top of the file

    'use client'
    import { useAarc, AarcProvider } from '@aarc-dev/deposit-widget';
    import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
    import '@aarc-dev/deposit-widget/dist/style.css';
    // For Coinbase Exchange
    import Coinbase from '@aarc-xyz/deposit-widget-coinbase'
    // For Transak On-ramp services
    import Transak from '@aarc-xyz/deposit-widget-transak'
    import { WagmiProvider, createConfig, http } from 'wagmi'
    import {  polygon } from 'wagmi/chains'
    import { message } from "antd";
    import Link from "next/link";
  3. Prepare the configs.

    AarcProvider requires configs that include the following:

    const aarc_config = {
        modules: {
            Transak: function (props: any) {
            return <Transak {...props} />
            },
            Coinbase: function (props: any) {
            return <Coinbase {...props} />
            },
        },
        destination: {
        chainId: number,    // Chain Id of the network where you want to accept the tokens.
        tokenAddress: string,  // Address of the token which you want to accept.
        walletAddress: string, // Wallet address where you want to accept the tokens.
        tokenSymbol: string,   
        tokenDecimals: number,
        },
        appearance: {
        logoUrl: string,
        themeColor: string,
        },
        apiKeys: {
        aarcSDK: "AARC_API_KEY",
        },
        onTransactionSuccess: (data: any) => {
            // Logic after successful transaction
            console.log(data)
            message.success('Transaction successful')
        },
        onTransactionError: (data: any) => {
            // Logic if a transaction error occurs
            console.log(data)
            message.error('Transaction failed')
        },
        onWidgetClose: () => {
            // Logic on Widget Closing 
            console.log('Widget closed')
        },
        onWidgetOpen: () => {
            // Logic on Widget Opening 
            console.log('Widget opened')
        }
    };
    Since we are building a static flow, for example, purpose, therefore we can use the following configs:
    const config = {
        modules: {
            Transak: function (props: any) {
                return <Transak {...props} />
            },
            Coinbase: function (props: any) {
                return <Coinbase {...props} />
            },
        },
        destination: {
            chainId: 137,
            tokenAddress: "0x2791bca1f2de4661ed88a30c99a7a9449aa84174", // USDC
            walletAddress: "YOUR_ADDRESS",
            tokenSymbol: "USDC",
            tokenDecimals: 6,
        },
        appearance: {
            logoUrl: "demo.aarc.xyz/AarcLogo.png",
            themeColor: "#1677FF",
        },
        apiKeys: {
            transak: "your-transak-api-key",
            aarcSDK: "YOUR_AARC_API_KEY",
        },
        onTransactionSuccess: (data: any) => {
            // Logic after successful transaction
            console.log(data)
            message.success('Transaction successful')
        },
        onTransactionError: (data: any) => {
            // Logic if a transaction error occurs
            console.log(data)
            message.error('Transaction failed')
        },
        onWidgetClose: () => {
            // Logic on Widget Closing 
            console.log('Widget closed')
        },
        onWidgetOpen: () => {
            // Logic on Widget Opening 
            console.log('Widget opened')
        }
    }
    The WagmiProvider requires the following config:
    const wagmiConfig = createConfig({
        chains: [ polygon],
        transports: {
            [polygon.id]: http('https://mainnet.example.com'),
        },
    })
  4. Add the Hooks in the application.

    function Home() {
        const open = useAarc();
        const queryClient = new QueryClient();
        return(
        // rest of the code
        );
    }
    • open will be used to call the useAarc hook to open the Aarc Widget.
    • queryClient is required for the QueryClientProvider.
  5. Add the component in the Application.

    export default function Home() {
        const open = useAarc();
        const queryClient = new QueryClient();
        return (
            <WagmiProvider config={wagmiConfig}>
                <QueryClientProvider client={queryClient}>
                    <AarcProvider config={config}>
                    // The Boilerplate code
                    </AarcProvider>
                </QueryClientProvider>
            </WagmiProvider>
        );
    }

    Now, your application is ready to work with the Aarc Widget.

    At the end, your page.tsx should look like this:
    "use client";
    import { useAarc, AarcProvider } from "@aarc-dev/deposit-widget";
    import "@aarc-dev/deposit-widget/dist/style.css";
    // For Coinbase Exchange
    import Coinbase from '@aarc-xyz/deposit-widget-coinbase'
    // For Transak On-ramp services
    import Transak from '@aarc-xyz/deposit-widget-transak'
     
    import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
    import { WagmiProvider, createConfig, http } from "wagmi";
    import { polygon } from "wagmi/chains";
    import Link from "next/link";
    import { message } from "antd";
     
    const wagmiConfig = createConfig({
        chains: [polygon],
        transports: {
            [polygon.id]: http("https://rpc-mainnet.maticvigil.com/"),
        },
    });
    const AARC_API_KEY: string = process.env.NEXT_PUBLIC_AARC_API_KEY ? process.env.NEXT_PUBLIC_AARC_API_KEY : "";
     
    const config = {
        modules: {
            Transak: function (props: any) {
            return <Transak {...props} />
            },
            Coinbase: function (props: any) {
            return <Coinbase {...props} />
            },
        },
        destination: {
            chainId: 137,
            tokenAddress: "0x2791bca1f2de4661ed88a30c99a7a9449aa84174",
            walletAddress: "0x1Cb30cb181D7854F91c2410BD037E6F42130e860",
            tokenSymbol: "USDC",
            tokenDecimals: 6,
        },
        appearance: {
            logoUrl: "https://raw.githubusercontent.com/megabyte0x/aarc-widget-tutorial/main/src/app/aarc.png",
            themeColor: "#1677FF",
        },
        apiKeys: {
            transak: "your-transak-api-key",
            aarcSDK: AARC_API_KEY
        },
        onTransactionSuccess: (data: any) => {
            // Logic after successful transaction
            console.log(data)
            message.success('Transaction successful')
        },
        onTransactionError: (data: any) => {
            // Logic if a transaction error occurs
            console.log(data)
            message.error('Transaction failed')
        },
        onWidgetClose: () => {
            // Logic on Widget Closing 
            console.log('Widget closed')
        },
        onWidgetOpen: () => {
            // Logic on Widget Opening 
            console.log('Widget opened')
        }
    };
     
    export default function Home() {
    const open = useAarc();
    const queryClient = new QueryClient();
        return (
            <WagmiProvider config={wagmiConfig}>
            <QueryClientProvider client={queryClient}>
                <AarcProvider config={config}>
                    // boiler plate code
                </AarcProvider>
            </QueryClientProvider>
            </WagmiProvider>
        );
    }
  6. Create the Button to Open the Aarc Widget.

    • Remove the boilerplate code and add the following button to open the Aarc Widget.
    <button onClick={open}>Open Aarc Widget</button>

    Now, your application is ready to work with the Aarc Widget.


Thanks for building with us!

Deployed SS (opens in a new tab)

You can check the complete code here:

https://github.com/aarc-xyz/aarc-widget-tutorial (opens in a new tab)

Learn more about Aarc SDK through our Developer Docs (opens in a new tab).

If you have any doubts or wanna discuss something:

© megabyte.RSS