Merge pull request #389 from hardcordev/fix/wallet-modal-scrollspy-session-docs-nav

Author: therealjhay

app/pay/[linkId]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, Suspense } from "react";
+import { useState, useMemo, Suspense } from "react";
 import { useRouter } from "next/navigation";
 import dynamic from "next/dynamic";
 import { motion, AnimatePresence } from "framer-motion";
@@ -28,18 +28,30 @@ import { signWithFreighter } from "@/lib/stellar/freighter";
 import { apiClient } from "@/lib/api/axios";
 import { MULTI_CURRENCY_ASSETS, MOCK_RATES } from "@/lib/utils/constants";
 import { WalletModalFallback } from "@/components/wallet/WalletModalFallback";
+import { WalletModalErrorBoundary } from "@/components/wallet/WalletModalErrorBoundary";
 import { QRCodeModal } from "@/components/payments/QRCode";
-const WalletModal = dynamic(
-  () => import("@/components/wallet/WalletModal").then((m) => m.WalletModal),
-  { ssr: false },
-);
 
 export default function PaymentLinkPage() {
   const router = useRouter();
   const { isConnected, connect, address } = useWalletStore();
   const { error: notifyError } = useNotify();
   const [walletModalOpen, setWalletModalOpen] = useState(false);
   const [qrModalOpen, setQrModalOpen] = useState(false);
+  // Bumping this recreates the `dynamic()` import below with a fresh promise,
+  // so retrying after a chunk-load failure re-fetches the chunk instead of
+  // replaying the same cached rejection.
+  const [walletModalRetryKey, setWalletModalRetryKey] = useState(0);
+  const WalletModal = useMemo(
+    () =>
+      dynamic(
+        () => import("@/components/wallet/WalletModal").then((m) => m.WalletModal),
+        { ssr: false },
+      ),
+    // walletModalRetryKey isn't read inside the factory — it's only a cache
+    // key so bumping it forces a new dynamic() call (and a fresh import()).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [walletModalRetryKey],
+  );
 
   // Mock data for this link
   const linkData = {
@@ -158,19 +170,25 @@ export default function PaymentLinkPage() {
   return (
     <div className="min-h-screen bg-background flex flex-col items-center justify-center p-4">
       <div className="w-full max-w-md">
-        <Suspense
-          fallback={
-            <WalletModalFallback
+        <WalletModalErrorBoundary
+          open={walletModalOpen}
+          onOpenChange={setWalletModalOpen}
+          onRetry={() => setWalletModalRetryKey((key) => key + 1)}
+        >
+          <Suspense
+            fallback={
+              <WalletModalFallback
+                open={walletModalOpen}
+                onOpenChange={setWalletModalOpen}
+              />
+            }
+          >
+            <WalletModal
               open={walletModalOpen}
               onOpenChange={setWalletModalOpen}
             />
-          }
-        >
-          <WalletModal
-            open={walletModalOpen}
-            onOpenChange={setWalletModalOpen}
-          />
-        </Suspense>
+          </Suspense>
+        </WalletModalErrorBoundary>
 
         {/* Merchant Branding Header */}
         <div className="flex flex-col items-center mb-8">

components/SessionTimeoutModal.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -9,7 +10,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui';
-import { AlertTriangle, Clock, LogOut, RefreshCcw } from 'lucide-react';
+import { announce } from '@/lib/utils/announce';
 
 interface SessionTimeoutModalProps {
   open: boolean;
@@ -24,12 +25,31 @@ function formatCountdown(seconds: number): string {
   return `${m}:${s.toString().padStart(2, '0')}`;
 }
 
+/**
+ * Purely presentational — all countdown/timer logic lives in useSessionTimeout;
+ * this component only renders whatever `secondsRemaining` it's given. Focus
+ * trapping and Escape-to-dismiss come for free from the shared Dialog
+ * primitive, matching every other modal in the app.
+ */
 export function SessionTimeoutModal({
   open,
   secondsRemaining,
   onExtend,
   onLogout,
 }: SessionTimeoutModalProps) {
+  // Explicitly announce the warning once when it appears — Dialog already
+  // moves focus and exposes the title/description via aria-labelledby/
+  // aria-describedby, but this mirrors the codebase's announce() convention
+  // (see useNotify) so the warning is reliably read out even if focus
+  // handling alone doesn't trigger it in a given screen reader.
+  useEffect(() => {
+    if (open) {
+      announce(`Session expiring in ${secondsRemaining} seconds. Stay logged in to continue.`);
+    }
+    // Only announce on the open transition, not on every countdown tick.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
   return (
     <Dialog open={open} onOpenChange={() => {}}>
       <DialogContent className="sm:max-w-md" showCloseButton={false}>

components/docs/content/Authentication.tsx

@@ -77,7 +77,6 @@ export function Authentication() {
   return (
     <SectionShell
       id="authentication"
-      title="Authentication"
       lead="BettaPay issues a signed JWT that you attach as a Bearer token on every authenticated request. There are two ways to obtain one: Google OAuth and Stellar wallet auth."
     >
       {/* ── Google OAuth ── */}

components/docs/content/ErrorCodes.tsx

@@ -23,7 +23,6 @@ export function ErrorCodes() {
   return (
     <SectionShell
       id="error-codes"
-      title="Error Codes"
       lead="Every failure returns the same envelope with a stable, machine-readable code. Branch on error.code — messages may be reworded, codes will not."
     >
       <Snippet code={errorShape} lang="json" filename="Error envelope" />

components/docs/content/FxRates.tsx

@@ -7,7 +7,6 @@ export function FxRates() {
   return (
     <SectionShell
       id="fx-rates"
-      title="FX & Rates"
       lead="The gateway proxies the FX engine so you can read live USDC/fiat rates and price a conversion. These endpoints are public — no JWT required."
     >
       <P>

components/docs/content/HttpStatus.tsx

@@ -19,7 +19,6 @@ export function HttpStatus() {
   return (
     <SectionShell
       id="http-status"
-      title="HTTP Status"
       lead="How the gateway maps outcomes onto HTTP status codes, plus the rate limits and timeouts that govern every route."
     >
       <div className="overflow-x-auto rounded-xl border border-border">

components/docs/content/IdempotencyKeys.tsx

@@ -38,7 +38,6 @@ export function IdempotencyKeys() {
   return (
     <SectionShell
       id="idempotency-keys"
-      title="Idempotency Keys"
       lead="An idempotency key makes a create request safe to retry. Without one, a dropped response can turn a single checkout into two charges."
     >
       <SubSection id="idempotency-how" title="How they work">

components/docs/content/Merchants.tsx

@@ -7,7 +7,6 @@ export function Merchants() {
   return (
     <SectionShell
       id="merchants"
-      title="Merchants"
       lead="A merchant is the account that owns payments and settlements. The merchant your JWT acts as is fixed by the merchantId claim in the token."
     >
       <P>

components/docs/content/Overview.tsx

@@ -25,7 +25,6 @@ export function Overview() {
   return (
     <SectionShell
       id="overview"
-      title="Overview"
       lead="The BettaPay API lets you accept USDC payments on Stellar, settle to fiat, register merchants and read live FX rates — all over a small, predictable REST surface."
     >
       <SubSection id="overview-base-url" title="Base URL">

components/docs/content/Payments.tsx

@@ -7,7 +7,6 @@ export function Payments() {
   return (
     <SectionShell
       id="payments"
-      title="Payments"
       lead="Create payments (and hosted payment links), read their status as they settle on Stellar, and advance them through their lifecycle."
     >
       <SubSection id="payment-lifecycle" title="Status lifecycle">