@buildersgarden/drift NPM

Drift Widgets

Drift Widgets is a set of React components and hooks for integrating Drift's stablecoin and payment operations into your application.

Installation

To install the package, run:

npm install @buildersgarden/drift

yarn add @buildersgarden/drift

Features

DriftProvider: A context provider for Drift-related data, required to have the components below working properly
DriftOfframp: A component for off-ramping stablecoins to bank accounts
DriftOfframpModal: Same component as above, but in a modal version
useDriftUser: A hook for accessing Drift user data and create custom components / user flows in your application

Usage

DriftProvider

Wrap your application or the part of your application that needs access to Drift functionality with the DriftProvider:

import { DriftProvider } from "@buildersgarden/drift";

function App() {
  return (
    <DriftProvider>
      {/* Your app components */}
    </DriftProvider>;
  )
}

DriftOfframp

Use the DriftOfframp component to allow users to off-ramp their stablecoins:

import { DriftOfframp } from "@buildersgarden/drift";
import { useWalletClient } from "wagmi";

function OffRampPage() {
  const { data: walletClient } = useWalletClient();

  return <DriftOfframp walletClient={walletClient} />;
}

Optionally, the DriftOfframp component takes a driftUserId in input which prefills the input for the user to fill.

DriftOfframpModal

The DriftOfframpModal component provides a complete off-ramping experience for users. Here's how to integrate it into your application:

import { DriftOfframpModal } from "@buildersgarden/drift";
import { useWalletClient } from "wagmi";
import { useState } from "react";

function OffRampPage() {
  const { data: walletClient } = useWalletClient();
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Off-ramp Modal</button>
      <DriftOfframpModal
        walletClient={walletClient}
        isOpen={isModalOpen}
        onClose={closeModal}
      />
    </div>
  );
}

The DriftOfframpModal component handles the entire off-ramping process, including:

Connecting to a user's Drift account
Displaying the user's USDC balance
Allowing the user to specify an amount to withdraw
Handling the withdrawal transaction
Showing the status of the withdrawal

Optionally, the DriftOfframpModal component takes a driftUserId in input which prefills the input for the user to fill.

Make sure to wrap your application with the DriftProvider component to ensure all necessary context is available.

useDriftUser

Use the useDriftUser hook to access Drift user data and create a custom integration/component for your app:

import { useDriftUser } from "@buildersgarden/drift";

function UserProfile() {
  const { user, isLoading, error } = useDriftUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>User Profile</h1>
      <p>User ID: {user.id}</p>
      <p>KYC Status: {user.kyc ? "Verified" : "Not Verified"}</p>
      {/* Display other user information */}
    </div>
  );
}

API Reference

DriftProvider

The DriftProvider component accepts the following props:

appId: A string representing your Drift application ID
appSecret: A string representing your Drift application secret

DriftOfframp

The DriftOfframp component accepts the following props:

walletClient: A WalletClient object from the viem library
driftUserId (optional): A string representing the Drift user ID

useDriftUser

The useDriftUser hook returns an object with the following properties:

user: A DriftUser object containing user information
isLoading: A boolean indicating whether the user data is being fetched
error: An Error object if there was an error fetching the user data

Example integrations and playground

Development

To set up the development environment:

Clone the repository
Install dependencies with yarn install
Build the package with yarn build

Linking instructions: 1. Open the CLI on this repo folder 2. Run yarn link 3. On another repo where you want to integrate this, while testing with local changes run yarn link @buildersgarden/drift