@shelby-protocol/react 0.0.4 → 0.0.5

package/src/mutations/useEncodeBlobs.tsx

@@ -5,7 +5,7 @@ import {
   generateCommitments,
 } from "@shelby-protocol/sdk/browser";
 import { useMutation } from "@tanstack/react-query";
-import type { UseMutationOptionsWithClient } from "../types/mutations";
+import type { UseMutationOptions } from "../types/mutations";
 
 export type UseEncodeBlobsOnChunkEvent = {
   /**
@@ -25,7 +25,14 @@ export type UseEncodeBlobsOnChunkEvent = {
    */
   chunkData: Uint8Array;
   /**
-   * The progress of the encoding.
+   * The progress of the encoding in percentage.
+   *
+   * @example
+   * ```tsx
+   * onChunk: ({ progress }) => {
+   *   console.log(`Encoding progress: ${progress * 100}%`);
+   * },
+   * ```
    */
   progress: number;
 };
@@ -45,7 +52,7 @@ export type UseEncodeBlobsVariables = {
   onChunk?: (event: UseEncodeBlobsOnChunkEvent) => void;
 };
 
-export type UseEncodeBlobsOptions = UseMutationOptionsWithClient<
+export type UseEncodeBlobsOptions = UseMutationOptions<
   BlobCommitments[],
   Error,
   UseEncodeBlobsVariables
@@ -60,13 +67,9 @@ export type UseEncodeBlobsOptions = UseMutationOptionsWithClient<
  *
  * @example
  * ```tsx
- * import { ShelbyClient } from "@shelby-protocol/sdk/browser";
- * import { Network } from "@aptos-labs/ts-sdk";
  * import { useEncodeBlobs } from "@shelby-protocol/react";
  *
- * const shelbyClient = new ShelbyClient({ network: Network.SHELBYNET });
  * const encodeBlobs = useEncodeBlobs({
- *   client: shelbyClient,
  *   onSuccess: (commitments) => console.log('Encoded', commitments.length, 'blobs'),
  * });
  *
@@ -78,10 +81,7 @@ export type UseEncodeBlobsOptions = UseMutationOptionsWithClient<
  * });
  * ```
  */
-export function useEncodeBlobs({
-  client: shelbyClient,
-  ...options
-}: UseEncodeBlobsOptions) {
+export function useEncodeBlobs({ ...options }: UseEncodeBlobsOptions = {}) {
   return useMutation({
     mutationFn: async ({ blobs, provider, onChunk }) => {
       const activeProvider =

package/src/mutations/useRegisterCommitments.tsx

@@ -7,6 +7,7 @@ import {
   type UploadOptions,
 } from "@shelby-protocol/sdk/browser";
 import { useMutation } from "@tanstack/react-query";
+import { useShelbyClient } from "../components/ShelbyClientProvider";
 import type { UseMutationOptionsWithClient } from "../types/mutations";
 import type { AccountSigner, Signer } from "../types/signers";
 
@@ -76,9 +77,10 @@ export type UseRegisterCommitmentsOptions = UseMutationOptionsWithClient<
  * ```
  */
 export function useRegisterCommitments({
-  client: shelbyClient,
+  client,
   ...options
 }: UseRegisterCommitmentsOptions) {
+  const shelbyClient = useShelbyClient(client);
   return useMutation({
     mutationFn: async ({
       commitments,
@@ -86,7 +88,7 @@ export function useRegisterCommitments({
       options,
       signer: signerOrFn,
     }) => {
-      if (!("account" in signerOrFn)) {
+      if (!("signAndSubmitTransaction" in signerOrFn)) {
         const accountSigner: AccountSigner = signerOrFn;
 
         const { transaction } =
@@ -105,9 +107,21 @@ export function useRegisterCommitments({
       }
 
       const { account, signAndSubmitTransaction } = signerOrFn;
+
+      if (!account) {
+        throw new Error(
+          "'account' is required if using a wallet adapter signer with 'useRegisterCommitments'",
+        );
+      }
+
+      const accountAddress =
+        typeof account === "object" && "address" in account
+          ? account.address
+          : account;
+
       const transaction = await signAndSubmitTransaction({
         data: ShelbyBlobClient.createBatchRegisterBlobsPayload({
-          account: AccountAddress.from(account),
+          account: AccountAddress.from(accountAddress),
           expirationMicros,
           blobs: commitments.map((commitment) => ({
             blobName: commitment.blobName,

package/src/mutations/useUploadBlobs.tsx

@@ -10,6 +10,7 @@ import {
 } from "@shelby-protocol/sdk/browser";
 import { useMutation } from "@tanstack/react-query";
 import pLimit from "p-limit";
+import { useShelbyClient } from "../components/ShelbyClientProvider";
 import type { UseMutationOptionsWithClient } from "../types/mutations";
 import type { AccountSigner, Signer } from "../types/signers";
 
@@ -93,10 +94,8 @@ export type UseUploadBlobsOptions = UseMutationOptionsWithClient<
  * });
  * ```
  */
-export function useUploadBlobs({
-  client: shelbyClient,
-  ...options
-}: UseUploadBlobsOptions) {
+export function useUploadBlobs({ client, ...options }: UseUploadBlobsOptions) {
+  const shelbyClient = useShelbyClient(client);
   return useMutation({
     mutationFn: async ({
       blobs,
@@ -105,7 +104,7 @@ export function useUploadBlobs({
       signer: signerOrFn,
       maxConcurrentUploads = 3,
     }: UseUploadBlobsVariables) => {
-      if (!("account" in signerOrFn)) {
+      if (!("signAndSubmitTransaction" in signerOrFn)) {
         const accountSigner: AccountSigner = signerOrFn;
 
         await shelbyClient.batchUpload({
@@ -120,6 +119,17 @@ export function useUploadBlobs({
       } else {
         const { account, signAndSubmitTransaction } = signerOrFn;
 
+        if (!account) {
+          throw new Error(
+            "'account' is required if using a wallet adapter signer with 'useUploadBlobs'",
+          );
+        }
+
+        const accountAddress =
+          typeof account === "object" && "address" in account
+            ? account.address
+            : account;
+
         const chunksetSize =
           options?.chunksetSizeBytes ?? DEFAULT_CHUNKSET_SIZE_BYTES;
 
@@ -127,7 +137,10 @@ export function useUploadBlobs({
           where: {
             blob_name: {
               _in: blobs.map((blob) =>
-                createBlobKey({ account, blobName: blob.blobName }),
+                createBlobKey({
+                  account: accountAddress,
+                  blobName: blob.blobName,
+                }),
               ),
             },
           },
@@ -138,7 +151,10 @@ export function useUploadBlobs({
             !existingBlobs.some(
               (existingBlob) =>
                 existingBlob.name ===
-                createBlobKey({ account, blobName: blob.blobName }),
+                createBlobKey({
+                  account: accountAddress,
+                  blobName: blob.blobName,
+                }),
             ),
         );
 
@@ -154,7 +170,7 @@ export function useUploadBlobs({
           const pendingRegisterBlobTransaction = await signAndSubmitTransaction(
             {
               data: ShelbyBlobClient.createBatchRegisterBlobsPayload({
-                account: AccountAddress.from(account),
+                account: AccountAddress.from(accountAddress),
                 expirationMicros,
                 blobs: blobsToRegister.map((blob, index) => ({
                   blobName: blob.blobName,
@@ -179,7 +195,7 @@ export function useUploadBlobs({
         const uploadPromises = blobs.map((blob) =>
           limit(() =>
             shelbyClient.rpc.putBlob({
-              account,
+              account: accountAddress,
               blobName: blob.blobName,
               blobData: blob.blobData,
             }),

package/src/queries/useAccountBlobs.tsx

@@ -4,6 +4,7 @@ import type {
   ShelbyBlobClient,
 } from "@shelby-protocol/sdk/browser";
 import { useQuery } from "@tanstack/react-query";
+import { useShelbyClient } from "../components/ShelbyClientProvider";
 import type { UseQueryOptionsWithClient } from "../types/queries";
 
 export const getUseAccountBlobsQueryKey = (
@@ -49,9 +50,10 @@ export function useAccountBlobs({
   pagination,
   orderBy,
   where,
-  client: shelbyClient,
+  client,
   ...options
 }: UseAccountBlobsOptions) {
+  const shelbyClient = useShelbyClient(client);
   return useQuery<BlobMetadata[]>({
     queryKey: getUseAccountBlobsQueryKey({
       network: shelbyClient.config.network,

package/src/queries/useBlobMetadata.tsx

@@ -4,6 +4,7 @@ import type {
   ShelbyBlobClient,
 } from "@shelby-protocol/sdk/browser";
 import { useQuery } from "@tanstack/react-query";
+import { useShelbyClient } from "../components/ShelbyClientProvider";
 import type { UseQueryOptionsWithClient } from "../types/queries";
 
 export const getUseBlobMetadataQueryKey = (
@@ -39,9 +40,10 @@ export type UseBlobMetadataOptions =
 export function useBlobMetadata({
   account,
   name,
-  client: shelbyClient,
+  client,
   ...options
 }: UseBlobMetadataOptions) {
+  const shelbyClient = useShelbyClient(client);
   return useQuery<BlobMetadata | null>({
     queryKey: getUseBlobMetadataQueryKey({
       network: shelbyClient.config.network,

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from "./signers";

package/src/types/mutations.ts

@@ -2,15 +2,24 @@ import type { ShelbyClient } from "@shelby-protocol/sdk/browser";
 import type {
   DefaultError,
   MutationKey,
-  UseMutationOptions,
+  UseMutationOptions as UseMutationOptionsTanstack,
 } from "@tanstack/react-query";
 
-export type UseMutationOptionsWithClient<
+export type UseMutationOptions<
   TMutationFnData = unknown,
   TError = DefaultError,
   TData = TMutationFnData,
   TMutationKey extends MutationKey = MutationKey,
 > = Omit<
-  UseMutationOptions<TMutationFnData, TError, TData, TMutationKey>,
+  UseMutationOptionsTanstack<TMutationFnData, TError, TData, TMutationKey>,
   "mutationFn"
-> & { client: ShelbyClient };
+>;
+
+export type UseMutationOptionsWithClient<
+  TMutationFnData = unknown,
+  TError = DefaultError,
+  TData = TMutationFnData,
+  TMutationKey extends MutationKey = MutationKey,
+> = UseMutationOptions<TMutationFnData, TError, TData, TMutationKey> & {
+  client?: ShelbyClient | null;
+};

package/src/types/queries.ts

@@ -13,4 +13,4 @@ export type UseQueryOptionsWithClient<
 > = Omit<
   UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   "queryFn" | "queryKey"
-> & { client: ShelbyClient };
+> & { client?: ShelbyClient | null };

package/src/types/signers.ts

@@ -4,8 +4,26 @@ import type { SignAndSubmitTransactionFn } from "./walletAdapter";
 export type AccountSigner = Account;
 
 export type WalletAdapterSigner = {
-  account: AccountAddressInput;
+  account?: AccountAddressInput | { address: AccountAddressInput } | null;
   signAndSubmitTransaction: SignAndSubmitTransactionFn;
 };
 
+/**
+ * A signer is a user who can sign transactions on the Shelby network.
+ * It can be an account signer or a wallet adapter signer.
+ *
+ * @example AccountSigner
+ * ```tsx
+ * const signer = new Account.generate();
+ * ```
+ *
+ * @example WalletAdapterSigner
+ * ```tsx
+ * const walletAdapterSigner = useWallet();
+ *
+ * if (!walletAdapterSigner.account) throw new Error("A wallet must be connected to sign transactions");
+ *
+ * const signer = walletAdapterSigner;
+ * ```
+ */
 export type Signer = AccountSigner | WalletAdapterSigner;