Send Tokens with Stellar Libraries

import { useParaStellar } from "./hooks/useParaStellar";
import { TransactionBuilder, Operation, Asset, BASE_FEE, Networks } from "@stellar/stellar-sdk";

function SendXLM() {
  const { server, signer, isLoading } = useParaStellar();

  const sendPayment = async (recipient: string, amount: string) => {
    if (!signer) {
      console.error("No signer available. Connect wallet first.");
      return;
    }

    // Load the sender's account from the network
    const sourceAccount = await server.loadAccount(signer.address);

    // Build the payment transaction
    const transaction = new TransactionBuilder(sourceAccount, {
      fee: BASE_FEE,
      networkPassphrase: Networks.PUBLIC,
    })
      .addOperation(
        Operation.payment({
          destination: recipient,
          asset: Asset.native(),
          amount, // e.g. "10" for 10 XLM
        })
      )
      .setTimeout(180)
      .build();

    // Sign the transaction with Para
    const { signedTxXdr } = await signer.signTransaction(transaction.toXDR());

    // Submit to the network
    const tx = TransactionBuilder.fromXDR(signedTxXdr, Networks.PUBLIC);
    const result = await server.submitTransaction(tx);
    console.log("Transaction hash:", result.hash);

    return result;
  };

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <p>Address: {signer?.address}</p>
      <button onClick={() => sendPayment("GRECIPI...", "10")}>
        Send 10 XLM
      </button>
    </div>
  );
}

import { Asset } from "@stellar/stellar-sdk";

// Example: USDC on Stellar
const usdc = new Asset(
  "USDC",
  "GA5ZSEJYB37JRC5AVCIA5MOP4RHTM335X2KGX3IHOJAPP5RE34K4KZVN"
);

// Use in your payment operation
Operation.payment({
  destination: recipient,
  asset: usdc,
  amount: "100", // 100 USDC
});