Fix address truncation, payment resubmit, stale invoice cache and loading timeout

comebackhere-frontend/src/components/InvoicePayment.tsx

@@ -8,11 +8,13 @@ import { PayConfirmationModal } from "./PayConfirmationModal"
 import { CancelConfirmationModal } from "./CancelConfirmationModal"
 import { TransactionHistory } from "./TransactionHistory"
 import { InvoiceQRCode } from "./InvoiceQRCode"
+import { useCompletedPaymentGuard } from "../hooks/useCompletedPaymentGuard"
 import { formatAmount, USDC_DECIMALS } from "../utils/format"
 
 export function InvoicePayment() {
-  const { invoice, loading, error, loadInvoice, pay, cancel } = useInvoice()
+  const { isCompleted, markCompleted } = useCompletedPaymentGuard()
   const { address, connected, connecting, connect, notReadyReason } = useWallet()
+  const { invoice, loading, error, loadInvoice, pay, cancel } = useInvoice(address)
   const [invoiceId, setInvoiceId] = useState("")
   const [showConfirm, setShowConfirm] = useState(false)
   const [showCancelConfirm, setShowCancelConfirm] = useState(false)
@@ -80,9 +82,10 @@ export function InvoicePayment() {
   }
 
   const handleConfirmPayment = async () => {
-    if (!address) return
+    if (!address || submitting || (invoice && isCompleted(invoice.id))) return
     setSubmitting(true)
     const res = await pay(address)
+    if (res.success && invoice) markCompleted(invoice.id)
     setSubmitting(false)
     setShowConfirm(false)
     setResult({

comebackhere-frontend/src/components/WalletBar.tsx

@@ -1,5 +1,6 @@
 import type { FC, ReactNode } from "react"
 import type { WalletState } from "../hooks/useWallet"
+import { truncateAddress } from "../utils/truncateAddress"
 
 interface WalletBarProps {
   wallet: WalletState
@@ -9,7 +10,7 @@ interface WalletBarProps {
 }
 
 function shortAddress(address: string): string {
-  return `${address.slice(0, 6)}...${address.slice(-4)}`
+  return truncateAddress(address)
 }
 
 /** Human-readable name for a network passphrase, e.g. "Test SDF Network". */

comebackhere-frontend/src/hooks/useCompletedPaymentGuard.ts

@@ -0,0 +1,28 @@
+import { useCallback } from "react"
+
+const KEY = "cbh:completedPayments"
+
+function read(): string[] {
+  try {
+    const parsed = JSON.parse(sessionStorage.getItem(KEY) ?? "[]")
+    return Array.isArray(parsed) ? parsed.map(String) : []
+  } catch {
+    return []
+  }
+}
+
+/**
+ * Remembers invoices paid in this browser session so that back/forward
+ * navigation (including bfcache restores) cannot submit the payment again.
+ */
+export function useCompletedPaymentGuard() {
+  const isCompleted = useCallback((id: string | number) => read().includes(String(id)), [])
+  const markCompleted = useCallback((id: string | number) => {
+    try {
+      sessionStorage.setItem(KEY, JSON.stringify([...read(), String(id)]))
+    } catch {
+      // storage unavailable; the on-chain status check remains the backstop
+    }
+  }, [])
+  return { isCompleted, markCompleted }
+}

comebackhere-frontend/src/hooks/useInvoice.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react"
+import { useState, useCallback, useEffect, useRef } from "react"
 import { InvoiceStatus, type Invoice, type PaymentResult } from "../types"
 import { fetchInvoice, payInvoice, cancelInvoice, requestRefund, releaseEscrow } from "../utils/soroban"
 
@@ -15,20 +15,37 @@ interface UseInvoiceReturn {
   release: (publicKey: string) => Promise<PaymentResult>
 }
 
-export function useInvoice(): UseInvoiceReturn {
+const LOAD_TIMEOUT_MS = 30_000
+
+export function useInvoice(accountKey?: string | null): UseInvoiceReturn {
   const [invoice, setInvoice] = useState<Invoice | null>(null)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
+  // Drop cached invoice details when the connected account changes.
+  const prevAccount = useRef(accountKey)
+  useEffect(() => {
+    if (prevAccount.current !== accountKey) {
+      prevAccount.current = accountKey
+      setInvoice(null)
+      setError(null)
+    }
+  }, [accountKey])
+
   const loadInvoice = useCallback(async (id: number) => {
     setLoading(true)
     setError(null)
+    let timer: ReturnType<typeof setTimeout> | undefined
     try {
-      const result = await fetchInvoice(CONTRACT_ID, id)
+      const timeout = new Promise<never>((_, reject) => {
+        timer = setTimeout(() => reject(new Error("Invoice request timed out")), LOAD_TIMEOUT_MS)
+      })
+      const result = await Promise.race([fetchInvoice(CONTRACT_ID, id), timeout])
       setInvoice(result)
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : "Failed to load invoice")
     } finally {
+      clearTimeout(timer)
       setLoading(false)
     }
   }, [])

comebackhere-frontend/src/tests/WalletBar.test.tsx

@@ -127,7 +127,7 @@ describe("WalletBar — connected state", () => {
   it("renders the truncated address with the full address accessible", () => {
     renderBar(STATES.connected)
     const addr = screen.getByTestId("wallet-address")
-    expect(addr).toHaveTextContent(`GBDXOE...${ADDRESS.slice(-4)}`)
+    expect(addr).toHaveTextContent(`${ADDRESS.slice(0, 8)}...${ADDRESS.slice(-8)}`)
     expect(addr).toHaveAttribute("aria-label", `Wallet connected: ${ADDRESS}`)
   })
 

comebackhere-frontend/src/utils/truncateAddress.ts

@@ -0,0 +1,5 @@
+/** Shorten a wallet address while keeping enough characters to tell accounts apart. */
+export function truncateAddress(address: string, head = 8, tail = 8): string {
+  if (address.length <= head + tail + 3) return address
+  return `${address.slice(0, head)}...${address.slice(-tail)}`
+}