Your domains:
- {domains?.result?.map((e) => {
+ {domains?.data?.map((e) => {
return (
- {e.domain}.sol ({e.pubkey.toBase58()})
@@ -61,8 +58,8 @@ export const Example = () => {
Submit
- {searchResult.loading && "Loading..."}
- {searchResult.result?.map((e) => {
+ {searchResult.isLoading && "Loading..."}
+ {searchResult.data?.map((e) => {
return (
Domain name: {e.domain}
@@ -74,7 +71,7 @@ export const Example = () => {
Domain suggestions:
- {domainSuggestions.loading && "Loading..."}
+ {domainSuggestions.isLoading && "Loading..."}
@@ -83,7 +80,7 @@ export const Example = () => {
- {domainSuggestions.result?.map((e) => {
+ {domainSuggestions.data?.map((e) => {
return (
{e.domain}
@@ -106,7 +103,7 @@ export const Example = () => {
- {topDomainsSales.result?.map((e) => {
+ {topDomainsSales.data?.map((e) => {
return (
{e.domain}.sol
diff --git a/react/README.md b/react/README.md
index f3fae016..8c829e52 100644
--- a/react/README.md
+++ b/react/README.md
@@ -34,6 +34,17 @@ or
yarn add @bonfida/sns-react
```
+Peer Dependencies
+Available hooks
Contributing
= {
+ queryKey: ["useDomainOwner", domain],
+ },
) => {
- return useAsync(fn, [connection, domain]);
+ return useQuery({ ...options, queryFn: async () => fn(connection, domain) });
};
diff --git a/react/src/hooks/useDomainSize/index.tsx b/react/src/hooks/useDomainSize/index.tsx
index f418c5de..aea7f23b 100644
--- a/react/src/hooks/useDomainSize/index.tsx
+++ b/react/src/hooks/useDomainSize/index.tsx
@@ -1,7 +1,8 @@
-import { useAsync } from "react-async-hook";
import { Connection, PublicKey } from "@solana/web3.js";
import { toDomainKey } from "../../utils/domain-to-key";
import { NameRegistryState } from "@bonfida/spl-name-service";
+import { useQuery } from "@tanstack/react-query";
+import { Options } from "../../types";
/**
* Returns the size in kB of a domain name
@@ -12,12 +13,16 @@ import { NameRegistryState } from "@bonfida/spl-name-service";
export const useDomainSize = (
connection: Connection,
domain: string | PublicKey,
+ options: Options = { queryKey: ["useDomainSize"] },
) => {
const key = toDomainKey(domain);
- return useAsync(async () => {
- if (!key) return;
- const acc = await connection.getAccountInfo(key);
- if (!acc) return 0;
- return (acc.data.length - NameRegistryState.HEADER_LEN) / 1_000; // in kB;
- }, [key?.toBase58()]);
+ return useQuery({
+ ...options,
+ queryFn: async () => {
+ if (!key) return;
+ const acc = await connection.getAccountInfo(key);
+ if (!acc) return 0;
+ return (acc.data.length - NameRegistryState.HEADER_LEN) / 1_000; // in kB;
+ },
+ });
};
diff --git a/react/src/hooks/useDomainsForOwner/index.tsx b/react/src/hooks/useDomainsForOwner/index.tsx
index 67372334..0c52b777 100644
--- a/react/src/hooks/useDomainsForOwner/index.tsx
+++ b/react/src/hooks/useDomainsForOwner/index.tsx
@@ -1,7 +1,8 @@
-import { useAsync } from "react-async-hook";
import { getAllDomains, reverseLookupBatch } from "@bonfida/spl-name-service";
import { Connection, PublicKey } from "@solana/web3.js";
import { toKey } from "../../utils/pubkey";
+import { useQuery } from "@tanstack/react-query";
+import { Options } from "../../types";
type Result = { pubkey: PublicKey; domain: string }[];
@@ -14,20 +15,26 @@ type Result = { pubkey: PublicKey; domain: string }[];
export const useDomainsForOwner = (
connection: Connection,
owner: string | PublicKey | null | undefined,
+ options: Options = {
+ queryKey: ["useDomainsForOwner", owner],
+ },
) => {
const key = toKey(owner);
- return useAsync(async () => {
- if (!key) return;
- const domains = await getAllDomains(connection, key);
- const reverses = await reverseLookupBatch(connection, domains);
- const result = domains
- .map((e, idx) => {
- return { pubkey: e, domain: reverses[idx] };
- })
- .filter((e) => !!e.domain)
- .sort((a, b) =>
- (a.domain as string).localeCompare(b.domain as string),
- ) as Result;
- return result;
- }, [key?.toBase58()]);
+ return useQuery({
+ ...options,
+ queryFn: async () => {
+ if (!key) return;
+ const domains = await getAllDomains(connection, key);
+ const reverses = await reverseLookupBatch(connection, domains);
+ const result = domains
+ .map((e, idx) => {
+ return { pubkey: e, domain: reverses[idx] };
+ })
+ .filter((e) => !!e.domain)
+ .sort((a, b) =>
+ (a.domain as string).localeCompare(b.domain as string),
+ ) as Result;
+ return result;
+ },
+ });
};
diff --git a/react/src/hooks/useFavoriteDomain/index.tsx b/react/src/hooks/useFavoriteDomain/index.tsx
index 2637027a..e822aa56 100644
--- a/react/src/hooks/useFavoriteDomain/index.tsx
+++ b/react/src/hooks/useFavoriteDomain/index.tsx
@@ -1,8 +1,13 @@
-import { useAsync } from "react-async-hook";
+import { Options } from "../../types";
+import { useQuery } from "@tanstack/react-query";
import { getFavoriteDomain } from "@bonfida/spl-name-service";
import { Connection, PublicKey } from "@solana/web3.js";
import { toKey } from "../../utils/pubkey";
+type FavoriteDomainResult =
+ | { pubkey: PublicKey; domain: string; stale: boolean }
+ | undefined;
+
/**
* Returns the favorite domain if it exists.
* @param connection The Solana RPC connection object
@@ -12,9 +17,13 @@ import { toKey } from "../../utils/pubkey";
export const useFavoriteDomain = (
connection: Connection,
owner: string | PublicKey | null | undefined,
+ options: Options = {
+ queryKey: ["useFavoriteDomain", owner],
+ },
) => {
const key = toKey(owner);
- return useAsync(async () => {
+
+ const fn = async (): Promise => {
if (!key) return;
try {
const res = await getFavoriteDomain(connection, key);
@@ -23,5 +32,10 @@ export const useFavoriteDomain = (
console.log(err);
return undefined;
}
- }, [key?.toBase58()]);
+ };
+
+ return useQuery({
+ ...options,
+ queryFn: fn,
+ });
};
diff --git a/react/src/hooks/useProfilePic/index.tsx b/react/src/hooks/useProfilePic/index.tsx
index bf922852..c3b506d8 100644
--- a/react/src/hooks/useProfilePic/index.tsx
+++ b/react/src/hooks/useProfilePic/index.tsx
@@ -1,6 +1,8 @@
import { Connection } from "@solana/web3.js";
import { Record } from "@bonfida/spl-name-service";
import { useDeserializedRecords } from "../useRecords";
+import { Options } from "../../types";
+import { useQuery } from "@tanstack/react-query";
/**
* Returns the profile picture URI for the given domain
@@ -9,7 +11,5 @@ import { useDeserializedRecords } from "../useRecords";
* @returns The picture URI
*/
export const useProfilePic = (connection: Connection, domain: string) => {
- const record = useDeserializedRecords(connection, domain, [Record.Pic]);
- const { result, ...rest } = record;
- return { result: result?.[0], ...rest };
+ return useDeserializedRecords(connection, domain, [Record.Pic]);
};
diff --git a/react/src/hooks/useRecords/index.tsx b/react/src/hooks/useRecords/index.tsx
index 1351e96b..3870fabd 100644
--- a/react/src/hooks/useRecords/index.tsx
+++ b/react/src/hooks/useRecords/index.tsx
@@ -1,6 +1,11 @@
-import { useAsync } from "react-async-hook";
+import { Options } from "../../types";
+import { useQuery } from "@tanstack/react-query";
import { Connection } from "@solana/web3.js";
-import { Record, getRecords } from "@bonfida/spl-name-service";
+import {
+ NameRegistryState,
+ Record,
+ getRecords,
+} from "@bonfida/spl-name-service";
/**
* Returns the records of the given domain names
@@ -13,11 +18,17 @@ export const useRecords = (
connection: Connection,
domain: string,
records: Record[],
+ options: Options = {
+ queryKey: ["useRecords", domain, ...records],
+ },
) => {
- return useAsync(async () => {
- const res = await getRecords(connection, domain, records, false);
- return res;
- }, [domain, ...records]);
+ return useQuery({
+ ...options,
+ queryFn: async () => {
+ const res = await getRecords(connection, domain, records, false);
+ return res;
+ },
+ });
};
/**
@@ -31,9 +42,15 @@ export const useDeserializedRecords = (
connection: Connection,
domain: string,
records: Record[],
+ options: Options = {
+ queryKey: ["useDeserializedRecords", domain, ...records],
+ },
) => {
- return useAsync(async () => {
- const res = await getRecords(connection, domain, records, true);
- return res;
- }, [domain, ...records]);
+ return useQuery({
+ ...options,
+ queryFn: async () => {
+ const res = await getRecords(connection, domain, records, true);
+ return res;
+ },
+ });
};
diff --git a/react/src/hooks/useRecordsV2/index.tsx b/react/src/hooks/useRecordsV2/index.tsx
index 71475bd3..0b682e08 100644
--- a/react/src/hooks/useRecordsV2/index.tsx
+++ b/react/src/hooks/useRecordsV2/index.tsx
@@ -1,6 +1,11 @@
-import { useAsync } from "react-async-hook";
+import { Options } from "../../types";
+import { useQuery } from "@tanstack/react-query";
import { Connection } from "@solana/web3.js";
-import { Record, getMultipleRecordsV2 } from "@bonfida/spl-name-service";
+import {
+ Record,
+ RecordResult,
+ getMultipleRecordsV2,
+} from "@bonfida/spl-name-service";
/**
* Returns the deserialized (or not) records V2 of the given domain name
@@ -14,12 +19,18 @@ export const useRecordsV2 = (
connection: Connection,
domain: string,
records: Record[],
- deserialize?: boolean,
+ deserialize: boolean,
+ options: Options<(RecordResult | undefined)[]> = {
+ queryKey: ["useRecordsV2", domain, ...records, deserialize],
+ },
) => {
- return useAsync(async () => {
- const res = await getMultipleRecordsV2(connection, domain, records, {
- deserialize,
- });
- return res;
- }, [domain, ...records]);
+ return useQuery({
+ ...options,
+ queryFn: async () => {
+ const res = await getMultipleRecordsV2(connection, domain, records, {
+ deserialize,
+ });
+ return res;
+ },
+ });
};
diff --git a/react/src/hooks/useReverseLookup/index.tsx b/react/src/hooks/useReverseLookup/index.tsx
index 9594ed57..8404f120 100644
--- a/react/src/hooks/useReverseLookup/index.tsx
+++ b/react/src/hooks/useReverseLookup/index.tsx
@@ -1,4 +1,5 @@
-import { useAsync } from "react-async-hook";
+import { Options } from "../../types";
+import { useQuery } from "@tanstack/react-query";
import { reverseLookup } from "@bonfida/spl-name-service";
import { Connection, PublicKey } from "@solana/web3.js";
@@ -11,10 +12,14 @@ import { Connection, PublicKey } from "@solana/web3.js";
export const useReverseLookup = (
connection: Connection,
pubkey: PublicKey | null | undefined,
+ options: Options = { queryKey: ["useReverseLookup", pubkey] },
) => {
- return useAsync(async () => {
- if (!pubkey) return;
- const reverse = await reverseLookup(connection, pubkey);
- return reverse;
- }, [pubkey?.toBase58()]);
+ return useQuery({
+ ...options,
+ queryFn: async () => {
+ if (!pubkey) return;
+ const reverse = await reverseLookup(connection, pubkey);
+ return reverse;
+ },
+ });
};
diff --git a/react/src/hooks/useSearch/index.ts b/react/src/hooks/useSearch/index.ts
index d666352f..c8df76d8 100644
--- a/react/src/hooks/useSearch/index.ts
+++ b/react/src/hooks/useSearch/index.ts
@@ -1,4 +1,5 @@
-import { UseAsyncReturn, useAsync } from "react-async-hook";
+import { Options } from "../../types";
+import { useQuery } from "@tanstack/react-query";
import { getDomainKeySync } from "@bonfida/spl-name-service";
import type { Connection } from "@solana/web3.js";
import { generateRandomDomain } from "../../utils";
@@ -41,23 +42,27 @@ export const getDomainsResult = async (
* Asynchronously finds domain or subdomain and its availability. Provides basic
* alternatives for subdomains.
*
- * @param {Connection} params.connection - The Solana connection instance
- * @param {string[]} params.domain - Domain name.
- * @returns {Promise}
+ * @param {Object} params - The parameters object.
+ * @param {Connection} params.connection - The Solana connection instance.
+ * @param {string} params.domain - The domain name to search for.
+ * @param {Options} [params.options={ queryKey: ["useSearch", domain] }] - Optional. Configuration options for the query, including the query key.
+ * @returns A React Query object containing the search results.
*
* @example
* // Example usage
* const connection = new Connection(network);
* const domain = 'solana';
- * const result = await useSearch({ connection, domain });
+ * const { data, isLoading, error } = useSearch({ connection, domain });
*/
export const useSearch = ({
connection,
domain,
+ options = { queryKey: ["useSearch", domain] },
}: {
connection: Connection;
domain: string;
-}): UseAsyncReturn => {
+ options?: Options;
+}) => {
const fn = async (): Promise => {
if (!domain || !connection) return [];
@@ -74,7 +79,7 @@ export const useSearch = ({
connection,
domainsAlternatives,
);
- // if the subdomain doesn't exists check if the domain is available
+ // if the subdomain doesn't exist, check if the domain is available
if (!subdomainInfo?.data) {
const domainKey = getDomainKeySync(parsedDomain).pubkey;
const domainInfo = await connection?.getAccountInfo(domainKey);
@@ -95,5 +100,5 @@ export const useSearch = ({
return getDomainsResult(connection, domains);
};
- return useAsync(fn, [!!connection, domain]);
+ return useQuery({ ...options, queryFn: fn });
};
diff --git a/react/src/hooks/useSubdomains/index.tsx b/react/src/hooks/useSubdomains/index.tsx
index d91d8faf..6d7e4c04 100644
--- a/react/src/hooks/useSubdomains/index.tsx
+++ b/react/src/hooks/useSubdomains/index.tsx
@@ -1,4 +1,5 @@
-import { useAsync } from "react-async-hook";
+import { Options } from "../../types";
+import { useQuery } from "@tanstack/react-query";
import { findSubdomains } from "@bonfida/spl-name-service";
import { Connection, PublicKey } from "@solana/web3.js";
import { toDomainKey } from "../../utils/domain-to-key";
@@ -12,11 +13,17 @@ import { toDomainKey } from "../../utils/domain-to-key";
export const useSubdomains = (
connection: Connection,
domain: string | PublicKey | undefined | null,
+ options: Options = {
+ queryKey: ["useSubdomains", domain],
+ },
) => {
const key = toDomainKey(domain);
- return useAsync(async () => {
- if (!key) return;
- const subs = await findSubdomains(connection, key);
- return subs;
- }, [key?.toBase58()]);
+ return useQuery({
+ ...options,
+ queryFn: async () => {
+ if (!key) return;
+ const subs = await findSubdomains(connection, key);
+ return subs;
+ },
+ });
};
diff --git a/react/src/hooks/useSuggestions/index.ts b/react/src/hooks/useSuggestions/index.ts
index 32ec31a6..702fc64d 100644
--- a/react/src/hooks/useSuggestions/index.ts
+++ b/react/src/hooks/useSuggestions/index.ts
@@ -1,4 +1,5 @@
-import { UseAsyncReturn, useAsync } from "react-async-hook";
+import { Options } from "../../types";
+import { useQuery } from "@tanstack/react-query";
import { generateRandomDomain } from "../../utils";
import { getDomainsResult, type Result } from "../useSearch";
import type { Connection } from "@solana/web3.js";
@@ -10,7 +11,7 @@ const URL = "https://sns-api.bonfida.com/v2/suggestion/search";
* to suggest, generates basic alternatives.
*
* @param {Connection} params.connection - The Solana connection instance
- * @param {string[]} params.domain - Domain name.
+ * @param {string} params.domain - Domain name.
* @returns {Promise}
*
* @example
@@ -19,13 +20,11 @@ const URL = "https://sns-api.bonfida.com/v2/suggestion/search";
* const domain = 'solana';
* const result = await useDomainSuggestions({ connection, domain });
*/
-export const useDomainSuggestions = ({
- connection,
- domain,
-}: {
- connection: Connection;
- domain: string;
-}): UseAsyncReturn => {
+export const useDomainSuggestions = (
+ connection: Connection,
+ domain: string,
+ options: Options = { queryKey: ["useDomainSuggestions", domain] },
+) => {
const fn = async () => {
if (!domain || domain === "") return [];
const splitted = domain.split(".");
@@ -48,5 +47,5 @@ export const useDomainSuggestions = ({
});
};
- return useAsync(fn, [domain, !!connection]);
+ return useQuery({ ...options, queryFn: fn });
};
diff --git a/react/src/hooks/useTopDomainsSales/index.ts b/react/src/hooks/useTopDomainsSales/index.ts
index 96cbb364..b762d4eb 100644
--- a/react/src/hooks/useTopDomainsSales/index.ts
+++ b/react/src/hooks/useTopDomainsSales/index.ts
@@ -1,8 +1,14 @@
import { useRef } from "react";
-import { useAsync, type UseAsyncReturn } from "react-async-hook";
+import { Options } from "../../types";
+import { useQuery } from "@tanstack/react-query";
const URL = "https://sns-api.bonfida.com/sales/top";
+type Result = {
+ domain: string;
+ price: string;
+};
+
interface SearchResponseEntity {
domain_name: string;
domain_key: string;
@@ -33,17 +39,19 @@ const getDefaultStartTime = () => {
* // Example usage
* const topSales = await useTopDomainsSales();
*/
-export const useTopDomainsSales = ({
- isEnabled = true,
- startTime,
- endTime,
- limit = 10,
-}: {
- isEnabled?: boolean;
- startTime?: Date;
- endTime?: Date;
- limit?: number;
-} = {}): UseAsyncReturn<{ domain: string; price: string }[] | undefined> => {
+export const useTopDomainsSales = (
+ {
+ startTime,
+ endTime,
+ limit = 10,
+ options,
+ }: {
+ startTime?: Date;
+ endTime?: Date;
+ limit?: number;
+ options: Options;
+ } = { options: { queryKey: ["useTopDomainsSales"] } },
+) => {
const defaultStartTime = useRef(getDefaultStartTime());
const defaultEndTime = useRef(new Date());
@@ -51,8 +59,6 @@ export const useTopDomainsSales = ({
const effectiveEndTime = endTime || defaultEndTime.current;
const fn = async () => {
- if (!isEnabled) return;
-
const searchParams = new URLSearchParams({
start_time: String(Math.floor(effectiveStartTime.getTime() / 1000)),
end_time: String(Math.floor(effectiveEndTime.getTime() / 1000)),
@@ -72,5 +78,5 @@ export const useTopDomainsSales = ({
}));
};
- return useAsync(fn, [startTime, endTime, limit]);
+ return useQuery({ ...options, queryFn: fn });
};
diff --git a/react/src/types.tsx b/react/src/types.tsx
new file mode 100644
index 00000000..af04f1c0
--- /dev/null
+++ b/react/src/types.tsx
@@ -0,0 +1,6 @@
+import { type UseQueryOptions } from "@tanstack/react-query";
+
+export type Options = Omit<
+ UseQueryOptions,
+ "queryFn"
+>;