import { GrillProvider } from "@macalinao/grill";
import { WalletAdapterCompatProvider } from "@macalinao/wallet-adapter-compat";
import { createSolanaClient } from "gill";
import { SolanaProvider } from "@gillsdk/react";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "sonner";

const queryClient = new QueryClient();
const solanaClient = createSolanaClient({ urlOrMoniker: "mainnet-beta" });

function App() {
  const wallets = useMemo(
    () => [new PhantomWalletAdapter(), new SolflareWalletAdapter()],
    []
  );

  return (
    <QueryClientProvider client={queryClient}>
      <SolanaProvider client={solanaClient}>
        <ConnectionProvider endpoint="https://api.mainnet-beta.solana.com">
          <WalletProvider wallets={wallets} autoConnect>
            <WalletModalProvider>
              <WalletAdapterCompatProvider>
                <GrillProvider>
                  {/* Your app components */}
                  <Toaster position="bottom-right" />
                </GrillProvider>
              </WalletAdapterCompatProvider>
            </WalletModalProvider>
          </WalletProvider>
        </ConnectionProvider>
      </SolanaProvider>
    </QueryClientProvider>
  );
}

import { useAccount, useAssociatedTokenAccount } from "@macalinao/grill";

function Dashboard() {
  // All these requests are batched into 1 RPC call!
  const { data: userAccount } = useAccount({
    address: userAddress,
  });

  const { data: usdcAccount } = useAssociatedTokenAccount({
    mint: USDC_MINT,
    owner: userAddress,
  });

  const { data: solAccount } = useAccount({
    address: poolAddress,
  });
}

import { useSendTX, useKitWallet } from "@macalinao/grill";

function SwapButton() {
  const { signer } = useKitWallet();
  const sendTX = useSendTX();

  const handleSwap = async () => {
    const instructions = buildSwapInstructions();
    await sendTX("Swap USDC for SOL", instructions);
    // Automatic toast notifications for each stage!
  };

  return <button onClick={handleSwap}>Swap</button>;
}

import { useAccount } from "@macalinao/grill";
import { getTokenAccountDecoder } from "@solana-program/token";

function TokenBalance({ tokenAccountAddress }) {
  const { data: account } = useAccount({
    address: tokenAccountAddress,
    decoder: getTokenAccountDecoder(),
  });

  // account.data is fully typed as TokenAccount!
  return <div>Balance: {account?.data.amount.toString()}</div>;
}