test(e2e): add wallet connect flow E2E tests with mocked Freighter and SEP-10 auth

.env.example

@@ -1,6 +1,7 @@
 # TrusTrove Environment Variables
 
 #
+
 # This root file is the single source of truth for local, Testnet, and Mainnet
 # configuration across the frontend app, Go indexer/API, and TypeScript SDK.
 # Copy it before local development:

.github/workflows/ci.yml

@@ -41,8 +41,44 @@ jobs:
       - name: Check Formatting
         run: npx prettier --check .
 
-    - name: Check Formatting
-      run: npx prettier --check .
+  e2e-tests:
+    name: E2E Tests (Playwright)
+    runs-on: ubuntu-latest
+    needs: verify-frontend-and-sdk
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Packages (SDK & Web App)
+        run: pnpm build
+
+      - name: Install Playwright Browsers
+        run: pnpm --filter web exec playwright install chromium
+
+      - name: Run E2E Tests
+        run: pnpm test:e2e
+
+      - name: Upload Playwright Report
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: apps/web/playwright-report/
+          retention-days: 7
 
   verify-go-indexer:
     name: Verify Go Indexer & API

apps/web/app/dashboard/page.tsx

@@ -2,11 +2,10 @@
 
 import React, { useState } from "react";
 import Link from "next/link";
-import dynamic from "next/dynamic";
 import { PageLayout } from "@/components/shared/PageLayout";
+import { InvoiceForm } from "@/components/invoice/InvoiceForm";
 import { InvoiceTable } from "@/components/invoice/InvoiceTable";
 import { InvoiceCard } from "@/components/invoice/InvoiceCard";
-import { ErrorBoundary } from "@/components/shared/ErrorBoundary";
 import { useInvoices } from "@/hooks/useInvoices";
 import { useRecentEvents } from "@/hooks/useEvents";
 import { useWalletStore } from "@/store/wallet";
@@ -29,15 +28,6 @@ import { motion, AnimatePresence } from "framer-motion";
 import { formatAmount } from "@/lib/assets";
 import { useFocusTrap } from "@/hooks/useFocusTrap";
 
-const InvoiceForm = dynamic(() => import("@/components/invoice/InvoiceForm"), {
-  ssr: false,
-  loading: () => (
-    <div className="h-64 w-full flex items-center justify-center">
-      <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary" />
-    </div>
-  ),
-});
-
 export default function SMEDashboard() {
   const { address, connected, role } = useWalletStore();
   const { invoices, isLoading } = useInvoices({ issuer: address || undefined });
@@ -331,12 +321,11 @@ export default function SMEDashboard() {
             {isLoading ? (
               <InvoiceTableSkeleton />
             ) : (
-              <ErrorBoundary context="InvoiceTable">
-                <InvoiceTable
-                  invoices={invoices}
-                  onSelectInvoice={(invoice) => setSelectedInvoice(invoice)}
-                  activeId={selectedInvoice?.id}
-                  emptyState={
+              <InvoiceTable
+                invoices={invoices}
+                onSelectInvoice={(invoice) => setSelectedInvoice(invoice)}
+                activeId={selectedInvoice?.id}
+                emptyState={
                   <div className="flex flex-col items-center justify-center py-16 px-6 text-center">
                     <p className="text-slate-500 text-xs font-mono mb-6 leading-relaxed max-w-xs">
                       Create your first invoice to get started
@@ -351,14 +340,12 @@ export default function SMEDashboard() {
                   </div>
                 }
               />
-              </ErrorBoundary>
             )}
 
             {/* Recent activity timeline */}
             {eventsLoading ? (
               <ActivityTimelineSkeleton />
             ) : (
-              <ErrorBoundary context="ActivityLog">
               <div className="bg-card border border-border rounded-lg p-5 space-y-4">
                 <h3 className="text-xs font-bold font-mono text-white uppercase tracking-wider border-b border-border/40 pb-2">
                   On-Chain Activity Logs
@@ -392,7 +379,6 @@ export default function SMEDashboard() {
                   })}
                 </div>
               </div>
-              </ErrorBoundary>
             )}
           </div>
 
@@ -402,7 +388,6 @@ export default function SMEDashboard() {
               Management console
             </h2>
 
-            <ErrorBoundary context="ManagementConsole">
             <AnimatePresence mode="wait">
               {selectedInvoice ? (
                 <motion.div
@@ -444,7 +429,6 @@ export default function SMEDashboard() {
                 </div>
               )}
             </AnimatePresence>
-            </ErrorBoundary>
           </div>
         </div>
       </div>
@@ -484,7 +468,7 @@ export default function SMEDashboard() {
             </div>
           </div>
         </div>
-      </Modal>
+      )}
     </PageLayout>
   );
 }

apps/web/app/lp/page.tsx

@@ -31,9 +31,10 @@ import { PoolClient } from "@trusttrove/sdk";
 import { Address, nativeToScVal } from "@stellar/stellar-sdk";
 import { SimulationPreview } from "@/components/shared/SimulationPreview";
 import { useQuery } from "@tanstack/react-query";
+import { useRecentEvents } from "@/hooks/useEvents";
 import { getPoolSnapshots } from "@/lib/api";
 
-const TransactionPending = dynamic(() => import("@/components/shared/TransactionPending"), {
+const TransactionPending = dynamic(() => import("@/components/shared/TransactionPending").then(mod => mod.TransactionPending), {
   ssr: false,
   loading: () => (
     <div className="fixed inset-0 flex items-center justify-center z-50 bg-black/50">
@@ -478,7 +479,7 @@ export default function LPDashboard() {
                       <path d={chartLines.areaD} fill="url(#chartGlow)" />
 
                       {/* Line path */}
-                      <path
+                      <motion.path
                         d={chartLines.lineD}
                         fill="transparent"
                         stroke="#00d4aa"

apps/web/app/page.tsx

@@ -136,7 +136,7 @@ export default function Home() {
             </div>
 
             <div className="text-xs font-mono text-slate-400 border-l-2 border-primary pl-3">
-              "From invoice to USDC in minutes. Not weeks."
+              &ldquo;From invoice to USDC in minutes. Not weeks.&rdquo;
             </div>
           </div>
 

apps/web/app/profile/page.tsx

@@ -4,9 +4,7 @@ import React, { useState } from "react";
 import { PageLayout } from "@/components/shared/PageLayout";
 import { useWalletStore } from "@/store/wallet";
 import { useProfile } from "@/hooks/useProfile";
-import { useFocusTrap } from "@/hooks/useFocusTrap";
 import { WalletConnect } from "@/components/shared/WalletConnect";
-import { ErrorBoundary } from "@/components/shared/ErrorBoundary";
 import { TransactionPending } from "@/components/shared/TransactionPending";
 import { Button } from "@/components/ui/button";
 import {
@@ -38,9 +36,6 @@ export default function ProfilePage() {
     registerError,
   } = useProfile();
 
-  // Modal Refs
-  const modalRef = useFocusTrap<HTMLDivElement>(showRegModal, () => setShowRegModal(false));
-
   // Registration Form States
   const [showRegModal, setShowRegModal] = useState(false);
   const [regRole, setRegRole] = useState<"issuer" | "buyer">("issuer");
@@ -144,7 +139,6 @@ export default function ProfilePage() {
           </p>
         </div>
 
-        <ErrorBoundary context="ProfileContent">
         {isLoading ? (
           <div className="bg-[#0d131a] border border-border rounded-lg p-12 flex flex-col items-center justify-center space-y-4 font-mono text-xs">
             <span className="w-1.5 h-1.5 rounded-full bg-primary animate-ping" />
@@ -329,12 +323,10 @@ export default function ProfilePage() {
             </div>
           </div>
         )}
-        </ErrorBoundary>
       </div>
 
       {/* Registration Modal Dialog */}
       {showRegModal && (
-        <ErrorBoundary context="RegistrationModal">
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#080c10]/95 backdrop-blur-sm p-4">
           <div className="w-full max-w-lg bg-card border border-border rounded-lg p-6 relative shadow-[0_0_50px_rgba(0,212,170,0.05)]">
             <button
@@ -389,61 +381,95 @@ export default function ProfilePage() {
                   </button>
                 </div>
               </div>
-            </div>
 
-            {/* Tax ID & Country */}
-            <div className="grid grid-cols-2 gap-4">
+              {/* Company Name */}
               <div className="space-y-1">
                 <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider">
-                  Tax ID / Registration No.
+                  Company Name
                 </label>
                 <div className="relative">
-                  <FileText className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" />
+                  <Building className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" />
                   <input
                     type="text"
                     required
-                    placeholder="e.g. EU123456789"
+                    placeholder="e.g. Acme Corp"
                     className="w-full bg-[#080c10] border border-border rounded pl-10 pr-3 py-2 text-white placeholder-slate-600 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
-                    value={taxId}
-                    onChange={(e) => setTaxId(e.target.value)}
+                    value={companyName}
+                    onChange={(e) => setCompanyName(e.target.value)}
                   />
                 </div>
               </div>
 
+              {/* Tax ID & Country */}
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider">
+                    Tax ID / Registration No.
+                  </label>
+                  <div className="relative">
+                    <FileText className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" />
+                    <input
+                      type="text"
+                      required
+                      placeholder="e.g. EU123456789"
+                      className="w-full bg-[#080c10] border border-border rounded pl-10 pr-3 py-2 text-white placeholder-slate-600 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
+                      value={taxId}
+                      onChange={(e) => setTaxId(e.target.value)}
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-1">
+                  <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider">
+                    Country of Incorporation
+                  </label>
+                  <div className="relative">
+                    <Globe className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" />
+                    <input
+                      type="text"
+                      required
+                      placeholder="e.g. Germany"
+                      className="w-full bg-[#080c10] border border-border rounded pl-10 pr-3 py-2 text-white placeholder-slate-600 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
+                      value={country}
+                      onChange={(e) => setCountry(e.target.value)}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Website URL */}
               <div className="space-y-1">
                 <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider">
-                  Country of Incorporation
+                  Corporate Website URL (Optional)
                 </label>
                 <div className="relative">
                   <Globe className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" />
                   <input
-                    type="text"
-                    required
-                    placeholder="e.g. Germany"
+                    type="url"
+                    placeholder="e.g. https://acme.corp"
                     className="w-full bg-[#080c10] border border-border rounded pl-10 pr-3 py-2 text-white placeholder-slate-600 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
-                    value={country}
-                    onChange={(e) => setCountry(e.target.value)}
+                    value={website}
+                    onChange={(e) => setWebsite(e.target.value)}
                   />
                 </div>
               </div>
-            </div>
 
-            {/* Website URL */}
-            <div className="space-y-1">
-              <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider">
-                Corporate Website URL (Optional)
-              </label>
-              <div className="relative">
-                <Globe className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" />
-                <input
-                  type="url"
-                  placeholder="e.g. https://acme.corp"
-                  className="w-full bg-[#080c10] border border-border rounded pl-10 pr-3 py-2 text-white placeholder-slate-600 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
-                  value={website}
-                  onChange={(e) => setWebsite(e.target.value)}
-                />
+              {/* Email */}
+              <div className="space-y-1">
+                <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider">
+                  Contact Email (Optional)
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" />
+                  <input
+                    type="email"
+                    placeholder="e.g. admin@acme.corp"
+                    className="w-full bg-[#080c10] border border-border rounded pl-10 pr-3 py-2 text-white placeholder-slate-600 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                  />
+                </div>
               </div>
-            </div>
 
               {/* Warnings and errors */}
               {(localError || registerError) && (
@@ -465,7 +491,6 @@ export default function ProfilePage() {
                   your wallet address and locks your business credentials.
                 </span>
               </div>
-            </div>
 
               {/* Buttons */}
               <div className="flex gap-2 pt-2">
@@ -485,36 +510,9 @@ export default function ProfilePage() {
                   {isRegistering ? "Signing..." : "Register Profile"}
                 </button>
               </div>
-            )}
-
-            <div className="bg-[#080c10] border border-amber-500/20 p-3 rounded text-[10px] text-amber-500 leading-normal flex items-start gap-1.5">
-              <Lock className="w-3.5 h-3.5 shrink-0 mt-0.5" />
-              <span>
-                Signing this registration requires Freighter authorization. You will submit a Soroban write transaction, which whitelists your wallet address and locks your business credentials.
-              </span>
-            </div>
-
-            {/* Buttons */}
-            <div className="flex gap-2 pt-2">
-              <button
-                type="button"
-                onClick={() => setShowRegModal(false)}
-                className="flex-1 border border-border bg-transparent hover:bg-slate-900 text-slate-400 font-bold uppercase py-2.5 rounded"
-                disabled={isRegistering}
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                className="flex-1 bg-primary hover:bg-primary-hover text-black font-bold uppercase py-2.5 rounded shadow-[0_0_15px_rgba(0,212,170,0.15)] flex items-center justify-center gap-1.5"
-                disabled={isRegistering}
-              >
-                {isRegistering ? 'Signing...' : 'Register Profile'}
-              </button>
-            </div>
-          </form>
+            </form>
+          </div>
         </div>
-        </ErrorBoundary>
       )}
 
       {/* Transaction Pending Dialog Modal */}