Phantom and Other Wallets

npm install @solana/kora @solana/kit@6 @solana-program/token@0.12 @solana/react@6 @wallet-standard/react

import { KoraClient } from "@solana/kora";
 
const kora = new KoraClient({
    rpcUrl: "https://solana.pimlico.io/v1/mainnet/rpc?apikey=YOUR_API_KEY",
});

import type { KoraClient } from "@solana/kora";
import {
    type Instruction,
    address,
    appendTransactionMessageInstructions,
    blockhash,
    createNoopSigner,
    createTransactionMessage,
    pipe,
    setTransactionMessageFeePayerSigner,
    setTransactionMessageLifetimeUsingBlockhash,
} from "@solana/kit";
 
export async function createSponsoredTransactionMessage(
    kora: KoraClient,
    instructions: Instruction[],
) {
    const { signer_address } = await kora.getPayerSigner();
    const { blockhash: latestBlockhash } = await kora.getBlockhash();
 
    // pipe passes the message through each step below, in order
    return pipe(
        // Start an empty version 0 transaction message
        createTransactionMessage({ version: 0 }),
        // The paymaster pays the fee. It signs later, so a noop signer leaves its signature slot empty.
        (m) => setTransactionMessageFeePayerSigner(createNoopSigner(address(signer_address)), m),
        // The blockhash keeps the transaction valid for about a minute. lastValidBlockHeight is only
        // read by @solana/kit's own send-and-confirm, and the paymaster sends the transaction for you.
        (m) =>
            setTransactionMessageLifetimeUsingBlockhash(
                { blockhash: blockhash(latestBlockhash), lastValidBlockHeight: 0n },
                m,
            ),
        // Add your app's instructions (transfers, swaps, etc.)
        (m) => appendTransactionMessageInstructions(instructions, m),
    );
}

import {
    type UiWallet,
    type UiWalletAccount,
    useConnect,
    useWallets,
} from "@wallet-standard/react";
 
function ConnectPhantom({ onConnect }: { onConnect: (account: UiWalletAccount) => void }) {
    const phantom = useWallets().find((wallet) => wallet.name === "Phantom");
 
    if (!phantom) {
        return <a href="https://phantom.com/download">Install Phantom</a>;
    }
    return <ConnectButton wallet={phantom} onConnect={onConnect} />;
}
 
function ConnectButton({
    wallet,
    onConnect,
}: {
    wallet: UiWallet;
    onConnect: (account: UiWalletAccount) => void;
}) {
    const [isConnecting, connect] = useConnect(wallet);
 
    return (
        <button
            type="button"
            disabled={isConnecting}
            onClick={async () => {
                const [account] = await connect();
                onConnect(account);
            }}
        >
            Connect {wallet.name}
        </button>
    );
}

import { useWalletAccountTransactionSigner } from "@solana/react";
 
const user = useWalletAccountTransactionSigner(account, "solana:mainnet");

import {
    type Address,
    type TransactionSigner,
    address,
    getBase64EncodedWireTransaction,
    partiallySignTransactionMessageWithSigners,
} from "@solana/kit";
import {
    findAssociatedTokenPda,
    getTransferInstruction,
    TOKEN_PROGRAM_ADDRESS,
} from "@solana-program/token";
import { createSponsoredTransactionMessage } from "./sponsored-transaction";
 
const USDC = address("EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v");
 
async function sendUsdc(user: TransactionSigner, recipient: Address, amount: bigint) {
    const [source] = await findAssociatedTokenPda({
        owner: user.address,
        mint: USDC,
        tokenProgram: TOKEN_PROGRAM_ADDRESS,
    });
    const [destination] = await findAssociatedTokenPda({
        owner: recipient,
        mint: USDC,
        tokenProgram: TOKEN_PROGRAM_ADDRESS,
    });
 
    const message = await createSponsoredTransactionMessage(kora, [
        getTransferInstruction({ source, destination, authority: user, amount }),
    ]);
 
    // Opens the wallet for your user to approve. The paymaster adds the fee payer signature.
    const transaction = getBase64EncodedWireTransaction(
        await partiallySignTransactionMessageWithSigners(message),
    );
 
    const { signature } = await kora.signAndSendTransaction({ transaction });
    return signature;
}

function SendUsdcButton({ account }: { account: UiWalletAccount }) {
    const user = useWalletAccountTransactionSigner(account, "solana:mainnet");
 
    return (
        <button
            type="button"
            onClick={async () => {
                const signature = await sendUsdc(user, RECIPIENT, 1_000_000n); // 1 USDC
                console.log(`https://solscan.io/tx/${signature}`);
            }}
        >
            Send 1 USDC
        </button>
    );
}