Vite Installation

Integrating the Deposit Widget into a Vite app

Vite Installation Guide for the Deposit Widget

This guide will help you integrate the Squid Deposit Widget into your Vite + TypeScript project.

Prerequisites

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

Installation Steps

Step 1: Install the package

yarn add @0xsquid/deposit-widget

Step 2: Add Polyfills

The widget's underlying wallet stack relies on some Node built-ins, so Vite needs browser polyfills:

1. Install the vite-plugin-node-polyfills plugin:

yarn add vite-plugin-node-polyfills -D

1. Update your vite.config.ts file:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({
  plugins: [react(), nodePolyfills()],
});

Step 3: Render the widget

Add the Deposit Widget to your desired component. For example, in src/App.tsx:

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 <DepositWidget config={config} />;
}

export default App;

Replace <your-integrator-id> with the Integrator ID you received from Squid.

Customization

Pass theme and themeType to brand the widget — see the Configuration page for all available options.

Running Your Vite App

yarn dev