"use client";

import { useStorageAccount, Network } from "@shelby-protocol/ethereum-kit/react";
import { useUploadBlobs } from "@shelby-protocol/react";
import { ShelbyClient } from "@shelby-protocol/sdk/browser";
import { useWalletClient } from "wagmi";

function MyComponent() {
  // Use wagmi wallet hook
  const { data: wallet } = useWalletClient();

  // Initiate Shelby client
  const shelbyClient = new ShelbyClient({
    network: Network.SHELBYNET,
    apiKey: "AG-***",
  });

  // Use Shelby ethereum-kit hook
  const { storageAccountAddress, signAndSubmitTransaction } = useStorageAccount({
    client: shelbyClient,
    wallet,
  });

  // Use Shelby react package upload blob hook
  const { mutateAsync: uploadBlobs } = useUploadBlobs({
    client: shelbyClient,
  });

  const handleUpload = async () => {
    await uploadBlobs({
      signer: { account: storageAccountAddress, signAndSubmitTransaction },
      blobs: [
        {
          blobName: "example.txt",
          blobData: new Uint8Array([1, 2, 3]),
        },
      ],
      // 30 days from now in microseconds
      expirationMicros: (1000 * 60 * 60 * 24 * 30 + Date.now()) * 1000,
    });
  };

  return (
    <div>
      <p>Storage Account: {storageAccountAddress?.toString()}</p>
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
}