Using the SDK in React

First, make sure you've installed the Niftory SDK on your project with:

yarn add @niftory/sdk

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

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

  // _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>)

Note: This client created above uses user auth and you need to pass in your usersauthToken after your user is authenticated. API calls that do not require user authorization (generally queries like nftModels) will still function if authToken isn't provided. Important Note: In typescript projects, to use the react imports (providers and hooks) you might need your compilerOptions in tsconfig moduleResolution to be set as nodenext

Now, you now call the exported react hooks as follows:

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>}
    </>
  )
}

The hooks 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.

For examples of react usage, you can check out our sample apps using the Niftory SDK:

https://github.com/Niftory/niftory-samples