Sns 322 migrate to tanstack query for sns react hooks (#52)

* react: replace `react-async-hook` with`@tanstack/react-query` * example: adapt react example * fix: `useSearch` types * example: fix `useSearch` params + add `@tanstack/react-query-devtools` * readme: add missing hook + peer dep section
Bonfida · Feb 13, 2024 · d747124 · d747124
1 parent 71c475c
commit d747124
Show file tree

Hide file tree

Showing 22 changed files with 1,530 additions and 1,001 deletions.
diff --git a/.gitignore b/.gitignore
@@ -181,3 +181,4 @@ target
 .DS_Store
 js/stats.html
 *.tgz
+*.html
diff --git a/examples/react-app/package-lock.json b/examples/react-app/package-lock.json
diff --git a/examples/react-app/package.json b/examples/react-app/package.json
@@ -9,20 +9,22 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@bonfida/sns-react": "^2.0.2",
+    "@bonfida/sns-react": "file:../../react/bonfida-sns-react-3.0.0.tgz",
     "@solana/spl-token": "^0.3.9",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/wallet-adapter-react-ui": "^0.9.34",
     "@solana/wallet-adapter-wallets": "^0.19.23",
     "@solana/web3.js": "^1.87.6",
+    "@tanstack/react-query": "^5.18.1",
     "buffer": "^6.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tweetnacl": "^1.0.3"
   },
   "devDependencies": {
     "@bonfida/prettier-config": "^1.0.0",
+    "@tanstack/react-query-devtools": "^5.18.1",
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react-swc": "^3.5.0",

diff --git a/examples/react-app/src/App.tsx b/examples/react-app/src/App.tsx
@@ -10,27 +10,34 @@ import {
   WalletMultiButton,
 } from "@solana/wallet-adapter-react-ui";
 import { Example } from "./Example";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 // Default styles that can be overridden by your app
 import "@solana/wallet-adapter-react-ui/styles.css";
 
 export const RPC_URL = import.meta.env.VITE_RPC as string;
 
+const queryClient = new QueryClient();
+
 function App() {
   const wallets = useMemo(() => [new SolflareWalletAdapter()], []);
   return (
     <div className="min-h-screen bg-[#333]">
-      <ConnectionProvider endpoint={RPC_URL}>
-        <WalletProvider wallets={wallets} autoConnect>
-          <WalletModalProvider>
-            <div className="flex px-10 py-20 space-x-3">
-              <WalletMultiButton />
-              <WalletDisconnectButton />
-            </div>
-            <Example />
-          </WalletModalProvider>
-        </WalletProvider>
-      </ConnectionProvider>
+      <QueryClientProvider client={queryClient}>
+        <ConnectionProvider endpoint={RPC_URL}>
+          <WalletProvider wallets={wallets} autoConnect>
+            <WalletModalProvider>
+              <div className="flex px-10 py-20 space-x-3">
+                <WalletMultiButton />
+                <WalletDisconnectButton />
+              </div>
+              <Example />
+            </WalletModalProvider>
+          </WalletProvider>
+        </ConnectionProvider>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
     </div>
   );
 }

diff --git a/examples/react-app/src/Example.tsx b/examples/react-app/src/Example.tsx
@@ -18,22 +18,19 @@ export const Example = () => {
   const [searchQuery, updateSearchQuery] = useState("");
   const searchResult = useSearch({ connection, domain: searchQuery });
 
-  const domainSuggestions = useDomainSuggestions({
-    connection,
-    domain: searchQuery,
-  });
+  const domainSuggestions = useDomainSuggestions(connection, searchQuery);
 
   const topDomainsSales = useTopDomainsSales();
 
   return (
     <div className="flex flex-col h-full gap-3 px-10">
       <div className="flex space-x-4 text-white">
         <p>Owner of bonfida.sol: </p>{" "}
-        <p className="font-medium">{bonfidaOwner.result?.toBase58()}</p>
+        <p className="font-medium">{bonfidaOwner.data?.toBase58()}</p>
       </div>
       <div className="text-white">
         <p>Your domains:</p>
-        {domains?.result?.map((e) => {
+        {domains?.data?.map((e) => {
           return (
             <p key={e.pubkey.toBase58()}>
               - {e.domain}.sol ({e.pubkey.toBase58()})
@@ -61,8 +58,8 @@ export const Example = () => {
           <button>Submit</button>
         </form>
         <div className="py-2">
-          {searchResult.loading && "Loading..."}
-          {searchResult.result?.map((e) => {
+          {searchResult.isLoading && "Loading..."}
+          {searchResult.data?.map((e) => {
             return (
               <p key={e.domain}>
                 Domain name: {e.domain}
@@ -74,7 +71,7 @@ export const Example = () => {
         </div>
         <hr></hr>
         <p>Domain suggestions:</p>
-        {domainSuggestions.loading && "Loading..."}
+        {domainSuggestions.isLoading && "Loading..."}
         <table>
           <thead>
             <tr>
@@ -83,7 +80,7 @@ export const Example = () => {
             </tr>
           </thead>
           <tbody>
-            {domainSuggestions.result?.map((e) => {
+            {domainSuggestions.data?.map((e) => {
               return (
                 <tr key={e.domain}>
                   <td>{e.domain}</td>
@@ -106,7 +103,7 @@ export const Example = () => {
             </tr>
           </thead>
           <tbody>
-            {topDomainsSales.result?.map((e) => {
+            {topDomainsSales.data?.map((e) => {
               return (
                 <tr key={e.domain}>
                   <td>{e.domain}.sol</td>

diff --git a/react/README.md b/react/README.md
@@ -34,6 +34,17 @@ or
 yarn add @bonfida/sns-react
 ```
 
+<br />
+<h2 align="center">Peer Dependencies</h2>
+<br />
+
+This library depends on the following peer dependencies:
+
+- `@tanstack/react-query`
+- `@solana/web3.js`
+
+It utilizes React Query version 5, making all `useQuery` functionalities available (with the exception of `queryFn`) across all hooks. If you're not already using `@tanstack/react-query`, you'll need to install it, then initialize a query client and encapsulate your application with a provider. For more information, visit the [Tanstack Query documentation](https://tanstack.com/query/latest).
+
 <br />
 <h2 align="center">Available hooks</h2>
 <br />
@@ -62,7 +73,11 @@ This hook can be used to retrieve the profile picture of a domain name if it exi
 
 ### `useRecords`
 
-This hook can be used to retrieve the content of multiple records
+This hook can be used to retrieve the content of multiple records v1 (deperecated)
+
+### `useRecordsV2`
+
+This hook can be used to retrieve the content of multiple records v2
 
 ### `useReverseLookup`
 
@@ -72,6 +87,14 @@ This hook can be used to retrieve the reverse of domain name from this public ke
 
 This hook can be used to retrieve the subdomains of .sol domain name
 
+### `useSuggestions`
+
+This hook can be used to generate unregistered domain suggestions related to the given domain
+
+### `useTopDomainsSales`
+
+This hook can be used to retrieve the top domain sales for a given time window
+
 <br />
 <h2 align="center">Contributing</h2>
 <br />