Get started

Get started with Whisk SDK in just a few lines of code.

Overview

Whisk SDK provides a suite of modular kits for seamless integration with the Whisk.so blockchain data pipeline. Each kit includes:

Customizable React components for rapid development.
React Hooks and SDK Core APIs for programmatic access to Whisk data.

Whisk Diagram

Installation

npm

npm i @paperclip-labs/whisk-sdk

Configuration

Import styles at the top of your layout or app

layout.tsx

import "@paperclip-labs/whisk-sdk/styles.css"
// Other style imports below

Wrap App in `WhiskSdkProvider`

providers.tsx

"use client";
import { WhiskSdkProvider } from "@paperclip-labs/whisk-sdk"; 
 
export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WhiskSdkProvider
        config={{ 
            // Define configuration for each kit you plan to use.
            // See respective Kit docs for full config.
            identity: { 
                resolvers: ["base", "uni", "nns", "ens", "farcaster"],  
            }, 
        }}
    >
        {children}
    </WhiskSdkProvider> 
  ); 
}

Use the SDK

To use a specific kit, simply import and utilize its components. Whisk SDK is optimized for tree-shaking, so only the imports you use will be included in your bundle.

For example, the Identity Kit:

import { Name, Avatar } from "@paperclip-labs/whisk-sdk/identity"; 
 
function ExampleComponent() {
    // This could come from a connected wallet via Wagmi, ethers.js, web3.js, Privy, etc.
    const address = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045";
 
    return (
        <div className="flex items-center gap-2">
            <Avatar address={address} size={30} />
            <Name address={address} />
        </div>
    );
}

Customization

You can customize all components via configuring the Whisk SDK Theme with CSS variables, or with tailwindCSS using the className prop.

More docs on this coming soon.