Installation

Learn how to set up the NiftyApes SDK

This SDK is intended to only be used with React projects

1. Install NiftyApes via NPM

Install the NiftyApes SDK and its peer dependencies into your project.

npm

npm i @niftyapes/sdk react react-dom wagmi@^0.12 ethers@^5

2. Setup

If you are running a NextJS app, you may need to add the NiftyApes SDK to be transpiled in your next.config.mjs.

TypeScript

const nextConfig = {
  reactStrictMode: true,
  transpilePackages: [..., '@niftyapes/sdk'],
}

3. Wrap Your App

Wrap your application with the NiftyApesProvider as well as the Wagmi provider. Follow the instructions for configuring Wagmi (version 0.12) found here. NiftyApes hooks and component library rely on Wagmi for handling interactions with the blockchain.

TypeScript

import React from "react";
import { NiftyApesProvider } from "@niftyapes/sdk";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { getDefaultWallets } from "@rainbow-me/rainbowkit";
import * as allChains from 'wagmi/chains'

const CHAIN_ID = 5;
const INTEGRATION_CONTRACT = "0xfa800eb4512a57f1dffe62f3ead634139dbb8547";
const NIFTY_APES_API_KEY = "nifty-apes-api-key";

const envChain = Object.values(allChains).find(
  (chain) => chain.id === +(CHAIN_ID || allChains.mainnet)
);
const { chains, provider } = configureChains(
  envChain ? [envChain] : [allChains.mainnet],
  [publicProvider()]
);

const { connectors } = getDefaultWallets({
  appName: "NiftyApes SDK",
  chains,
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});

function App() {
  return (
    <NiftyApesProvider
      config={{
        apiKey: NIFTY_APES_API_KEY,
        chainId: CHAIN_ID,
        integrationContractAddress: INTEGRATION_CONTRACT,
      }}
    >
      <WagmiConfig client={wagmiClient}>
        {/* ...Rest of your app goes here... */}
      </WagmiConfig>
    </NiftyApesProvider>
  );
}

export default App;

4. Import CSS (if using component library)

If you are using the NiftyApes component library, you will also need to import the CSS into your project like so.

app.tsx

import '@niftyapes/sdk/dist/styles.css'

5. Import and Call Hooks

Below is a basic example of retrieving offers

TypeScript

import { useOffers } from "@niftyapes/sdk";

const OffersComponent = () => {
  const { data: offers = [], isLoading } = useOffers({
    creator: '0x5Ad3b55625553CEf54D7561cD256658537d54AAd',
    includeExpired: true,
  });

  offers.map(...) // Access to loaded offers
}