Niftory SDK

Simple wrapper SDK for easily interacting with Niftory API

 

Getting Started

Follow the getting started here

 

Serverside (Client Auth)

import { NiftoryClient } from "@niftory/sdk"


...

const client =
    new NiftoryClient({
      environmentName: process.env.ENVIRONMENT //testnet or mainnet,
      appId: process.env.CLIENT_ID,
      apiKey: process.env.API_KEY,
      clientSecret: process.env.CLIENT_SECRET,
    })

await client.createNiftoryWallet()

You can find an API reference of the available methods here

React (Token Auth)

Setup provider

You need to wrap your entire app with a NiftoryProvider and pass in an instance of NiftoryClient as follows:

  import { NiftoryClient } from "@niftory/sdk"
  import { NiftoryProvider } from "@niftory/sdk/react"


  // _app.tsx
  const authToken = "YOUR_AUTH_TOKEN"
  const client = useMemo(() => {
    return new NiftoryClient({
      appId: process.env.NEXT_PUBLIC_CLIENT_ID,
      environmentName: process.env.NEXT_PUBLIC_ENV,
      apiKey: process.env.NEXT_PUBLIC_API_KEY,
      authToken,
    })
  }, [authToken])

  return (
    <NiftoryProvider client={client}>
     ....
    </NiftoryProvider>)

Important Note: to use the react imports (providers and hooks) you need your compilerOptions in tsconfig moduleResolution to be set as nodenext

// tsconfig.json
{
  "compilerOptions": {
    ....

    "moduleResolution": "nodenext",
    ...
  },
  ...
}

Calling api with React hooks

The hooks are urql generated hooks and are always named in the format use[APIName]Query for queries and use[APIName]Mutation for mutations. For APIName you can view Niftory API docs here.

Example:

import { useWalletQuery, useRegisterWalletMutation, useNiftoryClient } from "@niftory/sdk/react"

const MyComponent = () => {
  // Query
  const [userWalletResponse, reExecuteQuery] = useWalletQuery()
  // Mutation
  const [{ data, fetching }, registerWallet] = useRegisterWalletMutation()
  // Use client directly
  const niftoryClient = useNiftoryClient()

  if (userWalletResponse.fetching) {
    return <div>...Loading</div>
  }

  const { wallet } = userWalletResponse.data

  return (
    <>
      {wallet && <p>Your wallet address is {wallet.address}</p>}{" "}
      {<button onClick={() => registerWallet({ address: "0x123456" })}>Register Wallet</button>}
    </>
  )
}