"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 { useWalletConnection } from "@solana/react-hooks";

function MyComponent() {
  // use Solana wallet hook
  const { wallet } = useWalletConnection();

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

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

import { useWallet } from "@solana/wallet-adapter-react";

function MyComponent() {
  const { publicKey, signMessage, signIn } = useWallet();

  const { storageAccountAddress, signAndSubmitTransaction } = useStorageAccount({
    client: shelbyClient,
    wallet: publicKey
      ? {
          account: { address: publicKey },
          signMessage,
          signIn,
        }
      : null,
  });

  // ...
}