Installation

This guide covers everything you need to install and configure the @gizmolab/depositos package in your project.

Prerequisites

  • Node.js 20 or later
  • React 18.0+ or 19.0+
  • A package manager: npm, pnpm, or yarn

Install the Package

Choose your preferred package manager:

# pnpm (recommended)
pnpm add @gizmolab/depositos

# npm
npm install @gizmolab/depositos

# yarn
yarn add @gizmolab/depositos

Peer Dependencies

The widget requires React and React DOM as peer dependencies. These are not bundled with the package, so your project must have them installed:

pnpm add react react-dom

Only React is a peer dependency:

| Package | Required | Purpose | |---|---|---| | react | Yes | Core React library | | react-dom | Yes | React DOM rendering |

Wallet connectivity is bundled with @gizmolab/depositos — there are no extra vendor packages to install. Wrap your app in DepositOSWalletProvider (exported from the package) when you use wallet mode.

TypeScript Support

TypeScript types are included in the package — no separate @types install is needed. The package exports all relevant types:

import type {
  DepositOSConfig,
  DepositOSTheme,
  DepositOSThemeColors,
  DepositOSButtonStyle,
  DepositOSCustomLabels,
  WidgetMode,
} from "@gizmolab/depositos";

Module Formats

The package ships both CommonJS and ESM builds:

| Entry | Format | Path | |---|---|---| | import | ESM | dist/index.mjs | | require | CJS | dist/index.js | | types | TypeScript | dist/index.d.ts |

Modern bundlers (Vite, Next.js, webpack 5) will automatically resolve the correct format.

Monorepo Setup

If you're using a monorepo with pnpm workspaces and the widget package lives in the same repository, reference it via the workspace protocol:

{
  "dependencies": {
    "@gizmolab/depositos": "workspace:*"
  }
}

Make sure the widget package is built before the consuming app starts. In a typical setup, add a build script or use a tool like turborepo to manage the build order.

Verify the Installation

Create a minimal test to confirm the package is installed correctly:

import { DepositOSWidget } from "@gizmolab/depositos";

function Test() {
  return (
    <DepositOSWidget
      config={{
        apiKey: "dos_live_…",
        destChain: 42161,
        destToken: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
        destAddress: "0x0000000000000000000000000000000000000000",
      }}
    />
  );
}

If this renders without errors, you're ready to integrate. Head to the Quick Start guide or pick an integration method from the sidebar.

Previous← QuickstartNextReact Component →