feat: add nft API in kit

apps/web/components/LocalAccountNFTs.tsx

@@ -1,30 +1,12 @@
 import useChain from '@/hooks/useChain'
-import { OwnedNft } from 'alchemy-sdk'
-import { useEffect, useState } from 'react'
-import { getAlchemyNFT } from 'shared-config'
+import { useListAccountNFTsQuery } from '@instate/kit'
 
 const AccountNFTs = ({ account }: { account?: string }) => {
   const { chainId } = useChain()
-  const [nfts, setNfts] = useState<OwnedNft[] | null>(null)
-  const [nftsLoading, setNftsLoading] = useState(false)
-
-  const fetchNFTs = async () => {
-    if (!account) return
-
-    setNftsLoading(true)
-
-    const nfts = getAlchemyNFT(chainId)
-
-    const { ownedNfts } = await nfts.getNftsForOwner(account)
-
-    setNfts(ownedNfts)
-
-    setNftsLoading(false)
-  }
-
-  useEffect(() => {
-    fetchNFTs()
-  }, [account])
+  const { data: nfts, isLoading } = useListAccountNFTsQuery({
+    chainId,
+    account,
+  })
 
   return (
     <div className="flex flex-row gap-3">
@@ -43,7 +25,7 @@ const AccountNFTs = ({ account }: { account?: string }) => {
             </div>
           )
         })
-      ) : nftsLoading ? (
+      ) : isLoading ? (
         <div className="w-full text-center">
           <span className="loading loading-spinner bg-primary loading-xs"></span>
         </div>

packages/kit/index.ts

@@ -4,3 +4,4 @@ export { ConnectButton } from "./src/ConnectButton";
 export { InstateProvider } from "./rtk/store";
 export { emojiAvatarForAddress } from "./utils/rainbow";
 export * from "./rtk/generated";
+export { useListAccountNFTsQuery } from "./rtk/nft";

packages/kit/rtk/nft.tsx

@@ -0,0 +1,22 @@
+import { createApi, fakeBaseQuery } from "@reduxjs/toolkit/query/react";
+import { getAlchemyNFT } from "shared-config";
+
+export const nftAPI = createApi({
+  reducerPath: "nftAPI",
+  baseQuery: fakeBaseQuery(),
+  endpoints: (builder) => ({
+    listAccountNFTs: builder.query({
+      queryFn: async ({ chainId, account }) => {
+        const nfts = getAlchemyNFT(chainId);
+
+        const { ownedNfts } = await nfts.getNftsForOwner(account);
+
+        return {
+          data: ownedNfts,
+        };
+      },
+    }),
+  }),
+});
+
+export const { useListAccountNFTsQuery } = nftAPI;

packages/kit/rtk/store.tsx

@@ -6,16 +6,20 @@ import { LocalAccountProvider } from "../src/LocalAccountButton";
 import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
 import { chains } from "wagmi-config";
 import { DaisyTheme } from "shared-config";
+import { nftAPI } from "./nft";
 
 export const store = configureStore({
   reducer: {
     // Add the generated reducer as a specific top-level slice
     [subgraphAPI.reducerPath]: subgraphAPI.reducer,
+    [nftAPI.reducerPath]: nftAPI.reducer,
   },
   // Adding the api middleware enables caching, invalidation, polling,
   // and other useful features of `rtk-query`.
   middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware().concat(subgraphAPI.middleware),
+    getDefaultMiddleware()
+      .concat(subgraphAPI.middleware)
+      .concat(nftAPI.middleware),
 });
 
 export const InstateProvider = ({