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

or

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:

1. Clone the repository
2. Install dependencies with yarn install
3. 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

License

This package is licensed under a proprietary license. See the LICENSE file for details.

Contributing

Contributions are welcome. Please open an issue or submit a pull request on the GitHub repository.

Support

For support or questions, please open an issue on the GitHub repository or contact the maintainers at [email protected] or [email protected].