npm install @wallet-ui/react gill \
  @lazorkit/wallet

import { useEffect } from 'react';
import {
  createSolanaDevnet,
  createWalletUiConfig,
  WalletUi,
} from '@wallet-ui/react';
import { registerLazorkitWallet } from '@lazorkit/wallet';

const config = createWalletUiConfig({
  clusters: [createSolanaDevnet()],
});

function AppProvider({ children }) {
  // Register LazorKit on mount
  useEffect(() => {
    registerLazorkitWallet({
      rpcUrl: 'https://api.devnet.solana.com',
      portalUrl: 'https://portal.lazor.sh',
      paymasterConfig: {
        paymasterUrl: 'https://kora.devnet.lazorkit.com',
      },
      clusterSimulation: 'devnet',
    });
  }, []);

  return (
    <WalletUi config={config}>
      {children}
    </WalletUi>
  );
}

import {
  useWalletUi,
  useWalletUiSigner,
  WalletUiDropdown
} from '@wallet-ui/react';
import {
  address,
  createSolanaClient,
  createTransaction
} from 'gill';
import {
  getTransferTokensInstructions,
  getAssociatedTokenAccountAddress,
} from 'gill/programs/token';

function MyComponent() {
  const { account } = useWalletUi();
  const signer = useWalletUiSigner({ account });
  const client = createSolanaClient({ urlOrMoniker: 'devnet' });

  const handleSend = async () => {
    const instructions = getTransferTokensInstructions({
      feePayer: signer,
      mint: address('...'),
      authority: signer,
      sourceAta: await getAssociatedTokenAccountAddress(...),
      destination: address('...'),
      destinationAta: await getAssociatedTokenAccountAddress(...),
      amount: 1000000n, // 1 USDC (6 decimals)
    });

    const { value: latestBlockhash } = await client.rpc
      .getLatestBlockhash().send();

    const tx = createTransaction({
      version: 'legacy',
      feePayer: signer,
      instructions,
      latestBlockhash,
    });

    const sig = await client.sendAndConfirmTransaction(tx);
  };

  return (
    <div>
      <WalletUiDropdown />
      {account && (
        <button onClick={handleSend}>Send TX</button>
      )}
    </div>
  );
}