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

• Migrate from an EOA

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

---

Install the package

npm i @aarc-xyz/deposit-widget @aarc-xyz/deposit-widget-coinbase  @aarc-xyz/deposit-widget-transak 

Import the Components

import { AarcProvider, useAarc} from "@aarc-xyz/deposit-widget";
import '@aarc-xyz/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'

We have also imported a css for the styling of the Component.

Setting up the config

Configuring the component only includes defining your application needs.

It accepts the following parameters

• destination:

  • chainId: The chain ID of the destination chain.

  • tokenAddress: The token application wants to accept.

  • walletAddress: The address where the application wants to accept the assets.

  • tokenSymbol: The symbol of the token.

  • tokenDecimals: The number of decimals of the token.

• apperance:

  • logoUrl: Url of the image to show on the widget.

  • themeColor: Hex of the theme color of the widget

• apiKeys:

  • transak[OPTIONAL]: The API key of the fiat on-ramp provider.

  • aarcSDK: Aarc API Key. You can get it from here.

config = {
    modules: {
      Transak: function (props) {
        return <Transak {...props} />
      },
      Coinbase: function (props) {
        return <Coinbase {...props} />
      },
    },
    destination: {
      chainId: 137,
      tokenAddress: "0xc2132d05d31c914a87c6611c10748aeb04b58e8f",
      walletAddress: "0x7C1a357e76E0D118bB9E2aCB3Ec4789922f3e050",
      tokenSymbol: "USDC",
      tokenDecimals: 6,
    },
    appearance: {
      logoUrl: "demo.aarc.xyz/AarcLogo.png",
      themeColor: "#1677FF",
    },
    apiKeys: {
      transak: "TRANSAK_API_KEY",
      aarcSDK: "AARC_API_KEY"
    },
    onTransactionSuccess: (data) => {
        // Logic after successful transaction
    },
    onTransactionError: (data) => {
        // Logic if a transaction error occurs
    },
    onWidgetClose: () => {
        // Logic on Widget Closing 
    },
    onWidgetOpen: () => {
        // Logic on Widget Opening 
    }
  }

Initializing the component

import { AarcProvider, useAarc } from "deposit-widget"
import '/node_modules/deposit-widget/dist/style.css';

function App() {
const deposit = useAarc();

return (
<AarcProvider config={config}>
//...
</AarcProvider>
)};

export const App;

Invoke the Component

To invoke the above component, call the useAarc the state we imported above.

<Button onClick={() => deposit()}

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.