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 programmatic access to Whisk data.
Direct graphQL access for low level control and use outside of React.

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

Generate API key

The API key will be sent to your email address.

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
        apiKey="<YOUR_API_KEY>" // Check your email from prev step. 
        config={{ 
            // Define configuration for each kit you plan to use.  
            // See respective Kit docs for full config. 
        }}
    >
        {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} /> // [!code focus]
            <Name address={address} /> // [!code focus]
        </div>
    );
}

GraphQL

Whisk data is all server via a GraphQL API. The SDK helps abstract this, but if you need direct data access checkout the GraphQL docs.

Customization

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

CSS theme variable you can set:

globals.css

  :root {
      --wk-background-primary: #ffffff; 
      --wk-background-secondary: #0000000d;
      --wk-foreground-primary: #000000;
      --wk-foreground-secondary: #00000099;
  }