UnleashNFTs SDK

A powerful, reusable React/Next.js SDK for creating beautiful data visualizations, fetching data, and rendering tables with the UnleashNFTs API. This package provides pre-built chart components, data fetching hooks, and table components for seamless integration into your NFT analytics projects.

📋 Table of Contents

• Overview
• Features
• Tech Stack
• Installation
• Quick Start
• Data Fetching
• Chart Components
• Table Component
• API Client
• Configuration
• Examples
• Customization
• Build & Development
• Troubleshooting
• Contributing
• License

🎯 Overview

UnleashNFTs SDK is a comprehensive toolkit for building NFT analytics dashboards. It includes:

• Data Fetching Hook: Standalone hook for fetching data without rendering components
• Chart Components: Pre-built, customizable chart components (Bar, Line, Combination, Pie/Cake charts)
• Table Component: Flexible, customizable data table with sorting and pagination
• API Client: Type-safe API client for interacting with UnleashNFTs API
• Data Visualization: Built with D3.js for powerful, interactive visualizations
• TypeScript Support: Full TypeScript definitions included
• React/Next.js Ready: Works seamlessly with React 18+ and Next.js

✨ Features

Data Fetching

• 🔄 Standalone Data Hook: Fetch data without rendering components
• 🔑 Flexible API Access: Use with or without Next.js proxy
• ⚡ Automatic Refetching: Built-in refetch functionality
• 🎯 Type-Safe: Full TypeScript support

Charts

• 📊 Multiple Chart Types: Bar charts, line charts, combination charts, and pie/cake charts
• 🎨 Customizable Styling: Configure colors, dimensions, and themes
• 🔄 Real-time Data: Fetch and display data from UnleashNFTs API
• 📱 Responsive Design: Mobile-friendly components

Tables

• 📋 Flexible Table Component: Render data in table format
• 🔄 Sorting: Built-in column sorting functionality
• 📄 Pagination: Automatic pagination with customizable page size
• 🎨 Customizable Styling: Full control over table appearance
• 🔧 Custom Formatters: Format columns as currency, numbers, percentages, dates, or custom

General

• ⚡ Performance Optimized: Efficient rendering with React hooks
• 🔧 Type-Safe: Full TypeScript support with exported types
• 🎯 Easy Integration: Simple API for quick setup
• 🔌 API Proxy Support: Built-in Next.js API route handler

🛠 Tech Stack

• React ^18.0.0
• TypeScript ^5.0.0
• D3.js ^7.9.0 - Data visualization
• Axios ^1.7.8 - HTTP client
• Lucide React ^0.460.0 - Icons
• Tailwind CSS - Styling (optional)

📦 Installation

Using npm

npm install unleashnfts-sdk

Using yarn

yarn add unleashnfts-sdk

Using pnpm

pnpm add unleashnfts-sdk

Peer Dependencies

Make sure you have React and React DOM installed:

npm install react react-dom

🚀 Quick Start

1. Next.js API Route Setup (Recommended)

For Next.js projects, create an API route to proxy requests:

pages/api/[...unleashnfts].ts (or app/api/[...unleashnfts]/route.ts for App Router):

import { NextApiRequest, NextApiResponse } from "next";
import { unleashNftsAPI } from "unleashnfts-sdk";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const apiKey = process.env.X_API_KEY;
  
  if (!apiKey) {
    return res.status(400).json({ error: "API key is required" });
  }

  const apiClient = unleashNftsAPI(apiKey);
  
  try {
    const response = await apiClient({
      method: req.method,
      url: req.url?.replace('/api', '') || '',
    });
    
    res.status(response.status).json(response.data);
  } catch (error) {
    res.status(500).json({ error: "An error occurred" });
  }
};

export default handler;

2. Environment Variables

Create a .env.local file in your project root:

X_API_KEY=your-unleashnfts-api-key-here

🔒 Security & API Key Management

⚠️ Important Security Guidelines

NEVER expose your API key in client-side code. API keys used in frontend components will be visible in the browser bundle, making them accessible to anyone.

Recommended Approach: Use Proxy (Default)

The SDK defaults to using a proxy route (useProxy: true), which keeps your API key secure on the server:

// ✅ SECURE: API key stays on server
const { data, loading } = useUnleashNFTsData(
  [{ endpoint: "nft/volume", keys: ["volume"], params: {...} }],
  { useProxy: true } // Default - safe for client-side
);

Benefits:

• ✅ API key never exposed to client
• ✅ Works in all React/Next.js apps
• ✅ Default behavior (no configuration needed)

When to Use Direct API Key

Direct API key usage (useProxy: false) should ONLY be used in:

1. Next.js Server Components (not client components)
2. Next.js API Routes (server-side only)
3. Node.js Backend Services
4. Server-Side Rendering (SSR)

// ⚠️ SERVER-SIDE ONLY: Next.js Server Component
// app/my-page.tsx (Server Component)
export default async function MyPage() {
  const { data } = useUnleashNFTsData(
    [{ endpoint: "nft/volume", keys: ["volume"], params: {...} }],
    { 
      apiKey: process.env.X_API_KEY, // From server environment
      useProxy: false // Only in server-side code
    }
  );
  
  return <div>{/* render with data */}</div>;
}

Never use direct API key in:

• ❌ Client-side React components
• ❌ Browser-based applications
• ❌ Any code that runs in the browser

Alternative: Use unleashNftsAPI Directly

For server-side code, you can also use the API client directly:

// Server-side only
import { unleashNftsAPI } from 'unleashnfts-sdk';

const apiClient = unleashNftsAPI(process.env.X_API_KEY);
const response = await apiClient.get('/v2/nft/volume', { params: {...} });

📊 Data Fetching

useUnleashNFTsData Hook

Fetch data from UnleashNFTs API without rendering any components. Perfect for custom implementations or when you need raw data.

Basic Usage (Recommended - Client-Side Safe)

import { useUnleashNFTsData } from 'unleashnfts-sdk';

function MyComponent() {
  // ✅ Default behavior: uses proxy (secure for client-side)
  const { data, loading, error, refetch } = useUnleashNFTsData(
    [
      {
        endpoint: "nft/volume",
        keys: ["volume"],
        params: {
          metrics: ["volume"],
          time_range: "7d",
          currency: "usd"
        }
      }
    ]
    // useProxy: true is the default, so you can omit it
  );

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

  return <div>{JSON.stringify(data, null, 2)}</div>;
}

Server-Side Usage (Advanced - Server Components Only)

// ⚠️ SERVER-SIDE ONLY: Next.js Server Component
// app/my-page.tsx
import { useUnleashNFTsData } from 'unleashnfts-sdk';

export default async function MyPage() {
  // Only use direct API key in server-side code
  const { data, loading, error } = useUnleashNFTsData(
    [
      {
        endpoint: "nft/volume",
        keys: ["volume"],
        params: {
          metrics: ["volume"],
          time_range: "7d"
        }
      }
    ],
    { 
      apiKey: process.env.X_API_KEY, // From server environment variables
      useProxy: false // Only safe in server-side code
    }
  );

  // Use data, loading, error states
  // Call refetch() to manually refresh data
}

⚠️ Security Warning: Never use useProxy: false in client-side components. Your API key will be exposed in the browser bundle.

Hook Options

| Option | Type | Default | Description | |-------|------|---------|-------------| | apiKey | string | - | ⚠️ Server-side only: API key for direct API calls (required if useProxy: false). Never use in client-side code. | | useProxy | boolean | true | ✅ Recommended: Use Next.js API proxy route to keep API key secure. Set to false only in server-side code. | | proxyPath | string | "/api/v2" | Custom proxy path. Only used when useProxy: true. | | validate | boolean | false | Enable API validation against the official API specification. Validates endpoints and parameters before making requests. | | strictValidation | boolean | false | When true, validation errors throw exceptions. When false, errors are logged as warnings. Only used when validate: true. |

Return Values

| Property | Type | Description | |----------|------|-------------| | data | any | Merged API response data | | loading | boolean | Loading state | | error | string \| null | Error message if request failed | | refetch | () => Promise<void> | Function to manually refetch data |

Multiple API Endpoints

// ✅ Safe for client-side: uses proxy by default
const { data, loading, error } = useUnleashNFTsData(
  [
    {
      endpoint: "nft/volume",
      keys: ["volume"],
      params: { metrics: ["volume"], time_range: "7d" }
    },
    {
      endpoint: "nft/sales",
      keys: ["sales"],
      params: { metrics: ["sales"], time_range: "7d" }
    }
  ]
  // useProxy: true is default, so you can omit it
);
// Data from both endpoints will be merged automatically

API Validation (Optional)

The SDK can validate your API endpoints and parameters against the official API specification. This helps catch errors during development:

// Enable validation in development
const { data, loading, error } = useUnleashNFTsData(
  [{
    endpoint: "nft/volume",
    keys: ["volume"],
    params: { metrics: ["volume"], time_range: "7d" }
  }],
  { 
    useProxy: true,
    validate: process.env.NODE_ENV === 'development', // Enable in dev
    strictValidation: false // Warnings only, don't throw
  }
);

Validation Features:

• ✅ Validates endpoint paths exist in the API spec
• ✅ Validates required parameters are provided
• ✅ Validates parameter types and enum values
• ✅ Warns about unknown parameters
• ✅ Caches API spec for performance (5-minute TTL)

Standalone Validation:

You can also use the validation utilities directly:

import { validateApiConfig, validateApiConfigs } from 'unleashnfts-sdk';

// Validate a single endpoint
const result = await validateApiConfig(
  'nft/volume',
  { metrics: ['volume'], time_range: '7d' },
  { apiKey: 'your-key', strict: false }
);

if (!result.valid) {
  console.warn('Validation errors:', result.errors);
  console.warn('Warnings:', result.warnings);
}

// Validate multiple endpoints
const multiResult = await validateApiConfigs([
  { endpoint: 'nft/volume', params: { metrics: ['volume'] } },
  { endpoint: 'nft/sales', params: { metrics: ['sales'] } }
]);

When to Use Each Approach

| Scenario | Recommended Approach | Example | |----------|---------------------|---------| | Client-side React component | useProxy: true (default) | Any component that renders in the browser | | Next.js Client Component | useProxy: true (default) | Components with 'use client' directive | | Next.js Server Component | useProxy: false with apiKey | Server Components (no 'use client') | | Next.js API Route | useProxy: false with apiKey | pages/api/ or app/api/ routes | | Node.js Backend | Use unleashNftsAPI() directly | Express, Fastify, etc. | | Pure React App (CRA/Vite) | Set up your own proxy backend | Create backend API route |

📈 Chart Components

ChartContainer

The main component that handles data fetching and renders the appropriate chart type.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | chartType | "bar-chart" \| "line-chart" \| "combination-chart" \| "combination-chart-2-axes" \| "cake-chart" | Yes | Type of chart to render | | apiConfig | ApiConfig[] | Yes | Array of API configuration objects | | chartTitle | string | No | Title displayed above the chart | | chartDescription | string | No | Description text below the title | | customLoader | Function | No | Custom loading component | | styleConfig | object | No | Styling configuration |

Style Config

{
  color?: string;           // Primary chart color (default: "#CC91FF")
  chartBgColor?: string;    // Background color (default: "#181818")
  chartHeight?: string;       // Chart height (default: "300px")
  chartWidth?: string;       // Chart width (default: "100%")
}

API Config Types

CommonApiConfig:

{
  endpoint: string;
  keys: string[];
  params: {
    metrics?: string[];
    time_range?: string;
    include_washtrade?: boolean;
    currency?: string;
    blockchain?: string | number;
    sort_by?: string;
    sort_order?: "desc" | "asc";
    offset?: number;
    limit?: number;
    contract_address?: string;
  };
}

CombinationChartApiConfig (extends CommonApiConfig):

{
  ...CommonApiConfig,
  color?: string[];  // Array of colors for each metric
}

CakeChartApiConfig (extends CommonApiConfig):

{
  ...CommonApiConfig,
  keyValue: Array<{ key: string; value: string }>;
}

📋 Table Component

DataTable

Render API data in a customizable table format with sorting, pagination, and custom formatting.

Basic Usage

import { DataTable, useUnleashNFTsData } from 'unleashnfts-sdk';

function MyTable() {
  const { data, loading } = useUnleashNFTsData(
    [{
      endpoint: "nft/collections",
      keys: ["name", "volume", "sales"],
      params: { limit: 50 }
    }],
    { useProxy: true }
  );

  // Transform data for table
  const tableData = data?.collections || [];

  return (
    <DataTable
      data={tableData}
      columns={[
        { key: "name", label: "Collection Name" },
        { key: "volume", label: "Volume", format: "currency" },
        { key: "sales", label: "Sales", format: "number" }
      ]}
      isLoading={loading}
      title="NFT Collections"
    />
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | data | any[] | Yes | Array of data objects to display | | columns | ColumnConfig[] | Yes | Column configuration array | | title | string | No | Table title | | description | string | No | Table description | | isLoading | boolean | No | Loading state | | emptyMessage | string | No | Message when no data (default: "No data available") | | customLoader | React.ComponentType | No | Custom loading component | | styleConfig | object | No | Styling configuration | | pagination | object | No | Pagination configuration | | sorting | object | No | Sorting configuration |

Column Configuration

interface ColumnConfig {
  key: string;                    // Data key
  label?: string;                 // Column header label
  format?: "currency" | "number" | "percentage" | "date" | "custom";
  customFormatter?: (value: any, row: any) => React.ReactNode;
  align?: "left" | "center" | "right";
  width?: string;
  sortable?: boolean;
}

Style Config

{
  tableBgColor?: string;      // Table background (default: "#181818")
  headerBgColor?: string;     // Header background (default: "#2a2a2a")
  headerTextColor?: string;    // Header text (default: "#fff")
  rowBgColor?: string;        // Row background (default: "#181818")
  rowHoverColor?: string;     // Row hover (default: "#2a2a2a")
  textColor?: string;          // Text color (default: "#fff")
  borderColor?: string;        // Border color (default: "#333")
}

Pagination Config

{
  enabled: boolean;            // Enable pagination
  pageSize?: number;           // Items per page (default: 10)
  showPageInfo?: boolean;     // Show page info (default: true)
}

Sorting Config

{
  enabled: boolean;            // Enable sorting
  defaultSortKey?: string;     // Default sort column
  defaultSortOrder?: "asc" | "desc";  // Default sort order
}

Advanced Table Example

<DataTable
  data={tableData}
  columns={[
    {
      key: "name",
      label: "Collection",
      sortable: true
    },
    {
      key: "volume",
      label: "Volume (USD)",
      format: "currency",
      align: "right",
      sortable: true
    },
    {
      key: "change",
      label: "24h Change",
      format: "percentage",
      align: "right",
      customFormatter: (value) => (
        <span style={{ color: value >= 0 ? "#5AC17D" : "#FF57A9" }}>
          {value >= 0 ? "+" : ""}{value}%
        </span>
      )
    },
    {
      key: "date",
      label: "Date",
      format: "date",
      sortable: true
    }
  ]}
  title="Top NFT Collections"
  description="Ranked by 24h volume"
  pagination={{
    enabled: true,
    pageSize: 20,
    showPageInfo: true
  }}
  sorting={{
    enabled: true,
    defaultSortKey: "volume",
    defaultSortOrder: "desc"
  }}
  styleConfig={{
    tableBgColor: "#181818",
    headerBgColor: "#2a2a2a",
    textColor: "#fff"
  }}
/>

🔌 API Client

unleashNftsAPI

Creates a configured Axios instance for UnleashNFTs API requests.

⚠️ Server-Side Only: This function should only be used in server-side code (Next.js API routes, Server Components, Node.js backends). Never use in client-side React components.

// ✅ Server-side only: Next.js API Route
import { unleashNftsAPI } from 'unleashnfts-sdk';

// pages/api/my-route.ts or app/api/my-route/route.ts
export default async function handler(req, res) {
  const apiClient = unleashNftsAPI(process.env.X_API_KEY); // From server env
  
  const response = await apiClient.get('/v2/endpoint', {
    params: { /* your params */ }
  });
  
  res.json(response.data);
}

// ✅ Server-side only: Next.js Server Component
import { unleashNftsAPI } from 'unleashnfts-sdk';

export default async function ServerComponent() {
  const apiClient = unleashNftsAPI(process.env.X_API_KEY);
  const response = await apiClient.get('/v2/nft/volume', {
    params: { metrics: ['volume'], time_range: '7d' }
  });
  
  return <div>{/* render with response.data */}</div>;
}

📝 Examples

1. Data Fetching Only (Client-Side Safe)

import { useUnleashNFTsData } from 'unleashnfts-sdk';

function DataFetcher() {
  // ✅ Default behavior: uses proxy (secure)
  const { data, loading, error, refetch } = useUnleashNFTsData(
    [{
      endpoint: "nft/volume",
      keys: ["volume"],
      params: { metrics: ["volume"], time_range: "7d" }
    }]
    // useProxy: true is default, safe for client-side
  );

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

  return (
    <div>
      <h2>Volume Data</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <button onClick={refetch}>Refresh</button>
    </div>
  );
}

2. Bar Chart

import ChartContainer from 'unleashnfts-sdk';

<ChartContainer
  chartType="bar-chart"
  chartTitle="NFT Volume"
  chartDescription="Total volume over the last 7 days"
  apiConfig={[
    {
      endpoint: "nft/volume",
      keys: ["volume"],
      params: {
        metrics: ["volume"],
        time_range: "7d",
        currency: "usd",
        include_washtrade: false
      }
    }
  ]}
  styleConfig={{
    color: "#CC91FF",
    chartBgColor: "#181818",
    chartHeight: "400px"
  }}
/>

3. Line Chart

<ChartContainer
  chartType="line-chart"
  chartTitle="Price Trend"
  apiConfig={[
    {
      endpoint: "nft/price",
      keys: ["price_trend"],
      params: {
        metrics: ["price_trend"],
        time_range: "30d"
      }
    }
  ]}
  styleConfig={{
    lineColor: "#FF57A9",
    chartHeight: "400px"
  }}
/>

4. Combination Chart

<ChartContainer
  chartType="combination-chart"
  chartTitle="Trading Metrics"
  apiConfig={[
    {
      endpoint: "nft/metrics",
      keys: ["volume_trend"],
      color: ["#FF57A9"],
      params: {
        metrics: ["volume_trend"],
        time_range: "7d"
      }
    },
    {
      endpoint: "nft/metrics",
      keys: ["sales_trend"],
      color: ["#5AC17D"],
      params: {
        metrics: ["sales_trend"],
        time_range: "7d"
      }
    }
  ]}
/>

5. Cake/Pie Chart

<ChartContainer
  chartType="cake-chart"
  chartTitle="Marketplace Distribution"
  apiConfig={[
    {
      endpoint: "nft/marketplace",
      keys: ["volume"],
      keyValue: [
        { key: "marketplace_name", value: "volume" }
      ],
      params: {
        metrics: ["volume"],
        limit: 10
      }
    }
  ]}
/>

6. Data Table

import { DataTable, useUnleashNFTsData } from 'unleashnfts-sdk';

function CollectionsTable() {
  const { data, loading } = useUnleashNFTsData(
    [{
      endpoint: "nft/collections",
      keys: ["name", "volume", "sales", "floor_price"],
      params: { limit: 100 }
    }],
    { useProxy: true }
  );

  const tableData = data?.collections || [];

  return (
    <DataTable
      data={tableData}
      columns={[
        { key: "name", label: "Collection", sortable: true },
        { 
          key: "volume", 
          label: "Volume", 
          format: "currency",
          align: "right",
          sortable: true
        },
        { 
          key: "sales", 
          label: "Sales", 
          format: "number",
          align: "right"
        },
        { 
          key: "floor_price", 
          label: "Floor Price", 
          format: "currency",
          align: "right"
        }
      ]}
      isLoading={loading}
      title="NFT Collections"
      pagination={{ enabled: true, pageSize: 25 }}
      sorting={{ enabled: true, defaultSortKey: "volume", defaultSortOrder: "desc" }}
    />
  );
}

7. Combined: Data Fetching + Custom Chart

import { useUnleashNFTsData } from 'unleashnfts-sdk';
import { Line } from 'react-chartjs-2'; // Example: using another chart library

function CustomVisualization() {
  const { data, loading } = useUnleashNFTsData(
    [{
      endpoint: "nft/volume",
      keys: ["volume"],
      params: { metrics: ["volume"], time_range: "30d" }
    }],
    { useProxy: true }
  );

  if (loading) return <div>Loading...</div>;

  // Transform data for your custom chart
  const chartData = {
    labels: data?.block_dates || [],
    datasets: [{
      label: 'Volume',
      data: data?.volume || []
    }]
  };

  return <Line data={chartData} />;
}

🎨 Customization

Custom Loader

const CustomLoader = () => (
  <div className="spinner">Loading...</div>
);

<ChartContainer
  chartType="bar-chart"
  apiConfig={[...]}
  customLoader={CustomLoader}
/>

Custom Table Formatter

<DataTable
  data={data}
  columns={[
    {
      key: "status",
      label: "Status",
      customFormatter: (value) => (
        <span className={`status-${value}`}>
          {value === 'active' ? '✓' : '✗'} {value}
        </span>
      )
    }
  ]}
/>

Custom Colors and Themes

// Chart
<ChartContainer
  styleConfig={{
    color: "#FF5733",
    chartBgColor: "#1a1a1a",
    chartHeight: "500px"
  }}
/>

// Table
<DataTable
  styleConfig={{
    tableBgColor: "#0a0a0a",
    headerBgColor: "#1a1a1a",
    rowHoverColor: "#2a2a2a",
    textColor: "#ffffff"
  }}
/>

🔧 Build & Development

Building the Package

npm run build

This compiles TypeScript to JavaScript and generates type definitions in the dist/ directory.

Development Setup

1. Clone the repository:

git clone https://github.com/bitscrunch-protocol/unleashnfts-sdk.git
cd unleashnfts-sdk

2. Install dependencies:

npm install

3. Build the package:

npm run build

4. Link locally (for testing in other projects):

npm link

In your test project:

npm link unleashnfts-sdk

🧪 Local Testing & Publishing

Local Testing Workflow

# In the SDK repo
npm run build
npm link

# In your host app / POC
npm link unleashnfts-sdk
npm install react react-dom   # ensure peer deps

When you're done testing:

# In the host app
npm unlink unleashnfts-sdk

# Back in the SDK repo
npm unlink

Pre-Publish Checks

npm run build
npm pack --dry-run   # inspect files that would ship

Confirm only dist/, README.md, package.json, and optional LICENSE are listed.

Publishing (Minor Release Example)

# 1. Bump version (minor example)
npm version minor

# 2. Final verification
npm run build
npm pack --dry-run

# 3. Publish
npm whoami          # ensure you are logged in
npm publish         # add --access public for scoped packages

# 4. Verify release
npm view unleashnfts-sdk version

Optional: push git tags after publishing (git tag v1.1.0 && git push origin v1.1.0).

🐛 Troubleshooting

Security Issues

API Key Exposed in Browser

Problem: You see your API key in the browser DevTools or network requests.

Solution:

• ✅ Use useProxy: true (default) for all client-side code
• ✅ Never pass apiKey prop in client-side React components
• ✅ Only use direct API key in server-side code (Server Components, API routes)
• ✅ Check that your API key is in .env.local (not committed to git)

How to verify:

1. Open browser DevTools → Network tab
2. Look for requests to api.unleashnfts.com
3. If you see x-api-key header in client requests, your key is exposed
4. Switch to proxy approach immediately

"API key is required" Error

Problem: Error when using useProxy: false without apiKey.

Solution:

• If you're in client-side code: Use useProxy: true (default) instead
• If you're in server-side code: Pass apiKey: process.env.X_API_KEY

Data Not Loading

• Check API Configuration: Ensure apiConfig is properly formatted
• Verify API Key: Make sure X_API_KEY is set in environment variables (for proxy) or passed directly
• Check Network: Verify API endpoint is accessible
• Console Errors: Check browser console for detailed error messages

Chart Not Rendering

• Check Data Format: Verify API returns data in expected format
• Validate Keys: Ensure keys in apiConfig match API response keys
• Check Loading State: Verify loading completes successfully

Table Not Displaying

• Check Data Structure: Ensure data is an array of objects
• Validate Columns: Ensure column key values match data object keys
• Check Empty State: Verify data is not empty or null

TypeScript Errors

• Missing Types: Ensure you're importing types from the package:

  import type { CommonApiConfig, ApiConfig, ColumnConfig } from 'unleashnfts-sdk';

API Route Issues (Next.js)

• Route Not Found: Ensure API route is in pages/api/ or app/api/
• CORS Issues: API routes should handle CORS if needed
• Method Not Allowed: Check that the route accepts the HTTP method being used

Styling Issues

• Tailwind Not Working: If using Tailwind, ensure it's configured in your project
• Colors Not Applied: Check that styleConfig props are correctly passed
• Responsive Issues: Components are responsive by default; check parent container width

API Validation Issues

• Validation Not Working: Ensure validate: true is set in options. Validation is disabled by default for performance.
• Spec Fetch Fails: The validator fetches the API spec from the devnet API. If it fails, validation is skipped with a warning. This won't block your requests.
• False Positives: Some endpoints may have dynamic parameters not fully documented in the spec. Use strictValidation: false to see warnings without blocking requests.
• Performance: Validation adds a small overhead (spec fetch + validation). Only enable in development or when debugging.

📚 Additional Resources

• UnleashNFTs API Documentation
• D3.js Documentation
• React Documentation
• Next.js Documentation

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Author

UnleashNFTs / BitsCrunch Protocol

🔗 Links

• Repository: GitHub
• NPM Package: npmjs.com/package/unleashnfts-sdk
• API Base URL: https://api.unleashnfts.com

Made with ❤️ by the BitsCrunch team