"use client";

import { useStorageAccount, Network } from "@shelby-protocol/solana-kit/react";
import { useUploadBlobs } from "@shelby-protocol/react";
import { ShelbyClient } from "@shelby-protocol/sdk/browser";
import { useWallet } from "@solana/wallet-adapter-react";

function MyComponent() {
  // use Solana wallet hook
  const { publicKey, signMessage } = useWallet();

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

  // use Shelby solana-kit hook
  const { storageAccountAddress, signAndSubmitTransaction } = useStorageAccount(
    {
      client: shelbyClient,
      solanaAddress: publicKey?.toBase58(),
      signMessageFn: signMessage,
    }
  );

  // 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>
  );
}