ChipCasher

import { useConnection, useWallet } from "@solana/wallet-adapter-react";import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";import { Keypair, Transaction } from "@solana/web3.js";import { findReference, FindReferenceError } from "@solana/pay";import { useRouter } from "next/router";import { useEffect, useMemo, useState } from "react";import dynamic from "next/dynamic";import BackLink from "../components/BackLink";import Loading from "../components/Loading";import { MakeTransactionInputData, MakeTransactionOutputData } from "./api/makeTransaction";import { WalletSendTransactionError } from "@solana/wallet-adapter-base"; // Dynamic import to prevent SSR issuesconst WalletMultiButtonDynamic = dynamic(  () => import("@solana/wallet-adapter-react-ui").then((mod) => mod.WalletMultiButton),  { ssr: false }); export default function Checkout() {  const router = useRouter();  const { connection } = useConnection();  const { publicKey, sendTransaction } = useWallet();   // State to hold API response fields

1. Line 4 import { findReference, FindReferenceError } from "@solana/pay";: Finds or validates the on-chain payment by its reference key.
2. Line 22 const { publicKey, sendTransaction } = useWallet();: Submits the signed transaction to the cluster.

      res.status(500).json({ error: "Error fetching associated token addresses" });      return;    }     // Fetch recent blockhash for transaction    let blockhash: string;    try {      ({ blockhash } = await connection.getLatestBlockhash('finalized'));      console.log('Fetched recent blockhash:', blockhash);    } catch (error) {      console.error('Error fetching recent blockhash:', error);      res.status(500).json({ error: "Error fetching recent blockhash" });      return;    }     const transaction = new Transaction({      recentBlockhash: blockhash,      feePayer: buyerPublicKey,    });     // Create the transfer instruction    try {      const transferInstruction = createTransferCheckedInstruction(        buyerUsdcAddress,

1. Line 92 ({ blockhash } = await connection.getLatestBlockhash('finalized'));: Fetches a recent blockhash. Transactions expire if it gets too old.
2. Line 107 const transferInstruction = createTransferCheckedInstruction(: A checked token transfer, which also verifies the mint and decimals.

import { createQR, encodeURL, TransactionRequestURLFields, findReference, validateTransfer, FindReferenceError, ValidateTransferError } from "@solana/pay";import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";import { clusterApiUrl, Connection, Keypair } from "@solana/web3.js";import { useRouter } from "next/router";import { useEffect, useMemo, useRef } from "react";import BackLink from "../../components/BackLink";import PageHeading from "../../components/PageHeading";import { shopAddress, usdcAddress } from "../../lib/addresses";import calculatePrice from "../../lib/calculatePrice"; export default function Checkout() {  const router = useRouter();   // ref to a div where we'll show the QR code  const qrRef = useRef<HTMLDivElement>(null);   const amount = useMemo(() => calculatePrice(router.query), [router.query]);   // Unique address that we can listen for payments to  const reference = useMemo(() => Keypair.generate().publicKey, []);   // Read the URL query (which includes our chosen products)  const searchParams = useMemo(() => {    const params = new URLSearchParams({ reference: reference.toString() });

1. Line 1 import { createQR, encodeURL, TransactionRequestURLFields, findReference, validateTransfer: Encodes a Solana Pay request URL.
2. Line 1 import { createQR, encodeURL, TransactionRequestURLFields, findReference, validateTransfer: Finds or validates the on-chain payment by its reference key.