Comment on page
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 users
authToken
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>}
</>
)
}
For examples of react usage, you can check out our sample apps using the Niftory SDK:
Last modified 3mo ago