React Installation

Installing the React component

React Installation Guide for the Deposit Widget

This guide will help you integrate the Squid Deposit Widget into your React application.

Prerequisites

Ensure you have completed the steps in the Installing the Widget guide before proceeding.

Basic Integration

After installing the npm package, follow these steps to add the widget to your React app:

1. Import the DepositWidget component and the DepositConfig type:

import { DepositWidget, type DepositConfig } from "@0xsquid/deposit-widget";

1. Define a config and render the widget:

import { DepositWidget, type DepositConfig } from "@0xsquid/deposit-widget";

const config: DepositConfig = {
  mode: "deposit",
  destinationAddress: "0xYourReceivingAddress",
  destinationToken: {
    address: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831", // USDC on Arbitrum
    chainId: "42161",
  },
  integrator: {
    id: "<your-integrator-id>",
    name: "Your App",
    logoUrl: "https://your.app/logo.png",
  },
};

function App() {
  return (
    <div className="App">
      <DepositWidget config={config} />
    </div>
  );
}

Replace <your-integrator-id> with the Integrator ID you received from Squid, and destinationAddress / destinationToken with the address and token you want to receive.

Customization

Pass theme and themeType to the config to brand the widget:

<DepositWidget
  config={{
    ...config,
    themeType: "dark", // or "light"
    theme: {
      // your theme overrides — see Configuration page
    },
  }}
/>

See the Configuration page for the full list of options.