@shelby-protocol/react 0.0.2

package/src/mutations/useUploadBlobs.tsx

@@ -0,0 +1,194 @@
+import { AccountAddress } from "@aptos-labs/ts-sdk";
+import {
+  createBlobKey,
+  createDefaultErasureCodingProvider,
+  DEFAULT_CHUNKSET_SIZE_BYTES,
+  expectedTotalChunksets,
+  generateCommitments,
+  ShelbyBlobClient,
+  type UploadOptions,
+} from "@shelby-protocol/sdk/browser";
+import { useMutation } from "@tanstack/react-query";
+import pLimit from "p-limit";
+import type { UseMutationOptionsWithClient } from "../types/mutations";
+import type { AccountSigner, Signer } from "../types/signers";
+
+export type UseUploadBlobsVariables = {
+  /**
+   * The signer to use for the transaction.
+   *
+   * @see {@link Signer}
+   *
+   * @example
+   * ```tsx
+   * const signer = new Account.generate();
+   * uploadBlobs.mutate({
+   *   signer,
+   *   blobs: [
+   *     { blobName: 'file1.txt', blobData: new Uint8Array([...]) },
+   *   ],
+   *   expirationMicros: Date.now() * 1000 + 86400000000,
+   * });
+   * ```
+   */
+  signer: Signer;
+  /**
+   * The blobs to upload.
+   */
+  blobs: {
+    blobName: string;
+    blobData: Uint8Array;
+  }[];
+  /**
+   * The expiration time of the blobs in microseconds.
+   */
+  expirationMicros: number;
+  /**
+   * Optional transaction building options.
+   */
+  options?: UploadOptions;
+  /**
+   * The maximum number of concurrent uploads.
+   * @default 3
+   */
+  maxConcurrentUploads?: number;
+};
+
+export type UseUploadBlobsOptions = UseMutationOptionsWithClient<
+  void,
+  Error,
+  UseUploadBlobsVariables
+>;
+
+/**
+ * Uploads blobs to the Shelby network.
+ *
+ * This mutation handles the complete blob upload process including:
+ * - Encoding blobs with erasure coding
+ * - Registering commitments on-chain (if not already registered)
+ * - Uploading blob data to the RPC endpoint
+ *
+ * It supports both account signers and wallet adapter signers, and includes
+ * logic to skip registration for blobs that already exist.
+ *
+ * @example
+ * ```tsx
+ * import { ShelbyClient } from "@shelby-protocol/sdk/browser";
+ * import { Network } from "@aptos-labs/ts-sdk";
+ * import { useUploadBlobs } from "@shelby-protocol/react";
+ *
+ * const shelbyClient = new ShelbyClient({ network: Network.SHELBYNET });
+ * const uploadBlobs = useUploadBlobs({
+ *   client: shelbyClient,
+ *   onSuccess: () => console.log('Upload complete'),
+ * });
+ *
+ * const signer = new Account.generate();
+ * uploadBlobs.mutate({
+ *   signer,
+ *   blobs: [
+ *     { blobName: 'file1.txt', blobData: new Uint8Array([...]) },
+ *   ],
+ *   expirationMicros: Date.now() * 1000 + 86400000000,
+ * });
+ * ```
+ */
+export function useUploadBlobs({
+  client: shelbyClient,
+  ...options
+}: UseUploadBlobsOptions) {
+  return useMutation({
+    mutationFn: async ({
+      blobs,
+      expirationMicros,
+      options,
+      signer: signerOrFn,
+      maxConcurrentUploads = 3,
+    }: UseUploadBlobsVariables) => {
+      if (!("account" in signerOrFn)) {
+        const accountSigner: AccountSigner = signerOrFn;
+
+        await shelbyClient.batchUpload({
+          blobs: blobs.map(({ blobData, blobName }) => ({
+            blobData,
+            blobName,
+          })),
+          expirationMicros,
+          signer: accountSigner,
+          options,
+        });
+      } else {
+        const { account, signAndSubmitTransaction } = signerOrFn;
+
+        const chunksetSize =
+          options?.chunksetSizeBytes ?? DEFAULT_CHUNKSET_SIZE_BYTES;
+
+        const existingBlobs = await shelbyClient.coordination.getBlobs({
+          where: {
+            blob_name: {
+              _in: blobs.map((blob) =>
+                createBlobKey({ account, blobName: blob.blobName }),
+              ),
+            },
+          },
+        });
+
+        const blobsToRegister = blobs.filter(
+          (blob) =>
+            !existingBlobs.some(
+              (existingBlob) =>
+                existingBlob.name ===
+                createBlobKey({ account, blobName: blob.blobName }),
+            ),
+        );
+
+        if (blobsToRegister.length > 0) {
+          const provider = await createDefaultErasureCodingProvider();
+
+          const blobCommitments = await Promise.all(
+            blobsToRegister.map(async (blob) =>
+              generateCommitments(provider, blob.blobData),
+            ),
+          );
+
+          const pendingRegisterBlobTransaction = await signAndSubmitTransaction(
+            {
+              data: ShelbyBlobClient.createBatchRegisterBlobsPayload({
+                account: AccountAddress.from(account),
+                expirationMicros,
+                blobs: blobsToRegister.map((blob, index) => ({
+                  blobName: blob.blobName,
+                  blobSize: blob.blobData.length,
+                  blobMerkleRoot: blobCommitments[index].blob_merkle_root,
+                  numChunksets: expectedTotalChunksets(
+                    blob.blobData.length,
+                    chunksetSize,
+                  ),
+                })),
+              }),
+              options: options?.build?.options,
+            },
+          );
+
+          await shelbyClient.coordination.aptos.waitForTransaction({
+            transactionHash: pendingRegisterBlobTransaction.hash,
+          });
+        }
+
+        const limit = pLimit(maxConcurrentUploads);
+        const uploadPromises = blobs.map((blob) =>
+          limit(() =>
+            shelbyClient.rpc.putBlob({
+              account,
+              blobName: blob.blobName,
+              blobData: blob.blobData,
+            }),
+          ),
+        );
+
+        await Promise.all(uploadPromises);
+      }
+    },
+    ...options,
+  });
+}

package/src/queries/index.ts

@@ -0,0 +1,2 @@
+export * from "./useAccountBlobs";
+export * from "./useBlobMetadata";

package/src/queries/useAccountBlobs.tsx

@@ -0,0 +1,72 @@
+import type { Network } from "@aptos-labs/ts-sdk";
+import type {
+  BlobMetadata,
+  ShelbyBlobClient,
+} from "@shelby-protocol/sdk/browser";
+import { useQuery } from "@tanstack/react-query";
+import type { UseQueryOptionsWithClient } from "../types/queries";
+
+export const getUseAccountBlobsQueryKey = (
+  params: Parameters<ShelbyBlobClient["getAccountBlobs"]>[0] & {
+    network: Network;
+  },
+) => [
+  "account-blobs",
+  params.network,
+  params.account.toString(),
+  params.pagination?.limit,
+  params.pagination?.offset,
+  params.orderBy,
+  params.where,
+];
+
+export type UseAccountBlobsOptions = UseQueryOptionsWithClient<BlobMetadata[]> &
+  Parameters<ShelbyBlobClient["getAccountBlobs"]>[0];
+
+/**
+ * Queries blobs associated with an account.
+ *
+ * This query fetches blob metadata for a specific account with support for
+ * pagination, filtering, and ordering.
+ *
+ * @example
+ * ```tsx
+ * import { ShelbyClient, Order_By} from "@shelby-protocol/sdk/browser";
+ * import { Network } from "@aptos-labs/ts-sdk";
+ * import { useAccountBlobs } from "@shelby-protocol/react";
+ *
+ * const shelbyClient = new ShelbyClient({ network: Network.SHELBYNET });
+ * const { data: blobs, isLoading } = useAccountBlobs({
+ *   client: shelbyClient,
+ *   account: '0x123...',
+ *   pagination: { limit: 10, offset: 0 },
+ *   orderBy: { updated_at: Order_By.Desc },
+ * });
+ * ```
+ */
+export function useAccountBlobs({
+  account,
+  pagination,
+  orderBy,
+  where,
+  client: shelbyClient,
+  ...options
+}: UseAccountBlobsOptions) {
+  return useQuery<BlobMetadata[]>({
+    queryKey: getUseAccountBlobsQueryKey({
+      network: shelbyClient.config.network,
+      account,
+      pagination,
+      orderBy,
+      where,
+    }),
+    queryFn: async () =>
+      await shelbyClient.coordination.getAccountBlobs({
+        account,
+        pagination,
+        orderBy,
+        where,
+      }),
+    ...options,
+  });
+}

package/src/queries/useBlobMetadata.tsx

@@ -0,0 +1,56 @@
+import type { Network } from "@aptos-labs/ts-sdk";
+import type {
+  BlobMetadata,
+  ShelbyBlobClient,
+} from "@shelby-protocol/sdk/browser";
+import { useQuery } from "@tanstack/react-query";
+import type { UseQueryOptionsWithClient } from "../types/queries";
+
+export const getUseBlobMetadataQueryKey = (
+  params: Parameters<ShelbyBlobClient["getBlobMetadata"]>[0] & {
+    network: Network;
+  },
+) => ["blob-metadata", params.network, params.account.toString(), params.name];
+
+export type UseBlobMetadataOptions =
+  UseQueryOptionsWithClient<BlobMetadata | null> &
+    Parameters<ShelbyBlobClient["getBlobMetadata"]>[0];
+
+/**
+ * Queries the metadata for a specific blob.
+ *
+ * This query fetches the metadata for a single blob identified by account and blob name.
+ * Returns `null` if the blob is not found.
+ *
+ * @example
+ * ```tsx
+ * import { ShelbyClient } from "@shelby-protocol/sdk/browser";
+ * import { Network } from "@aptos-labs/ts-sdk";
+ * import { useBlobMetadata } from "@shelby-protocol/react";
+ *
+ * const shelbyClient = new ShelbyClient({ network: Network.SHELBYNET });
+ * const { data: metadata } = useBlobMetadata({
+ *   client: shelbyClient,
+ *   account: '0x123...',
+ *   name: 'file1.txt',
+ * });
+ * ```
+ */
+export function useBlobMetadata({
+  account,
+  name,
+  client: shelbyClient,
+  ...options
+}: UseBlobMetadataOptions) {
+  return useQuery<BlobMetadata | null>({
+    queryKey: getUseBlobMetadataQueryKey({
+      network: shelbyClient.config.network,
+      account,
+      name,
+    }),
+    queryFn: async () =>
+      (await shelbyClient.coordination.getBlobMetadata({ account, name })) ??
+      null,
+    ...options,
+  });
+}

package/src/types/mutations.ts

@@ -0,0 +1,16 @@
+import type { ShelbyClient } from "@shelby-protocol/sdk/browser";
+import type {
+  DefaultError,
+  MutationKey,
+  UseMutationOptions,
+} from "@tanstack/react-query";
+
+export type UseMutationOptionsWithClient<
+  TMutationFnData = unknown,
+  TError = DefaultError,
+  TData = TMutationFnData,
+  TMutationKey extends MutationKey = MutationKey,
+> = Omit<
+  UseMutationOptions<TMutationFnData, TError, TData, TMutationKey>,
+  "mutationFn"
+> & { client: ShelbyClient };

package/src/types/queries.ts

@@ -0,0 +1,16 @@
+import type { ShelbyClient } from "@shelby-protocol/sdk/browser";
+import type {
+  DefaultError,
+  QueryKey,
+  UseQueryOptions,
+} from "@tanstack/react-query";
+
+export type UseQueryOptionsWithClient<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = Omit<
+  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  "queryFn" | "queryKey"
+> & { client: ShelbyClient };

package/src/types/signers.ts

@@ -0,0 +1,11 @@
+import type { Account, AccountAddressInput } from "@aptos-labs/ts-sdk";
+import type { SignAndSubmitTransactionFn } from "./walletAdapter";
+
+export type AccountSigner = Account;
+
+export type WalletAdapterSigner = {
+  account: AccountAddressInput;
+  signAndSubmitTransaction: SignAndSubmitTransactionFn;
+};
+
+export type Signer = AccountSigner | WalletAdapterSigner;

package/src/types/walletAdapter.ts

@@ -0,0 +1,4 @@
+import type { WalletContextState } from "@aptos-labs/wallet-adapter-react";
+
+export type SignAndSubmitTransactionFn =
+  WalletContextState["signAndSubmitTransaction"];