fix: resolve CI lint error and add CI workflow with status badge

README.md

@@ -4,6 +4,8 @@ React TypeScript web application for the StepFi BNPL protocol on Stellar.
 
 **Live URL:** https://stepfi-web.vercel.app
 
+[![CI](https://github.com/StepFi-app/StepFi-Web/actions/workflows/ci.yml/badge.svg)](https://github.com/StepFi-app/StepFi-Web/actions/workflows/ci.yml)
+
 ## Stack
 
 Vite, React 18, TypeScript, Tailwind CSS, Zustand, TanStack Query, Freighter API

netlify.toml

@@ -10,10 +10,12 @@
 [[headers]]
   for = "/*"
   [headers.values]
+    Content-Security-Policy = "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://stepfi-api.onrender.com; font-src 'self'; frame-ancestors 'none'; form-action 'self'; base-uri 'self'"
     X-Frame-Options = "DENY"
     X-Content-Type-Options = "nosniff"
     Referrer-Policy = "strict-origin-when-cross-origin"
     Permissions-Policy = "camera=(), microphone=(), geolocation=()"
+    Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
 
 [[headers]]
   for = "/assets/*"

package.json

@@ -15,6 +15,7 @@
     "@tanstack/react-query": "^5.101.0",
     "axios": "^1.18.0",
     "clsx": "^2.1.1",
+    "dompurify": "^3.4.11",
     "framer-motion": "^12.40.0",
     "lucide-react": "^1.18.0",
     "react": "^19.2.6",
@@ -24,6 +25,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@types/dompurify": "^3.0.5",
     "@types/node": "^24.13.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

src/components/layout/Navbar.tsx

@@ -40,7 +40,11 @@
       <div className="max-w-7xl mx-auto px-4 md:px-6 py-4
         flex items-center justify-between">
 
-        <Link to="/" className="flex items-center gap-2 group">
+        <Link 
+          to="/" 
+          className="flex items-center gap-2 group"
+          onClick={() => setMobileOpen(false)}
+        >
           <svg width="28" height="24" viewBox="0 0 28 24">
             <rect x="0" y="18" width="6" height="6"
               rx="1.5" fill="#1D4ED8"/>
@@ -162,7 +166,7 @@
                 color: pathname === link.href
                   ? '#22C55E' : '#A8BCCF',
               }}
             >
               {link.label}
             </Link>
           ))}

src/hooks/useTransaction.ts

@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { signTransaction } from '@stellar/freighter-api'
+import { STELLAR_NETWORK } from '../constants/config'
+
+interface UseTransactionReturn {
+  isLoading: boolean
+  error: string | null
+  execute: <T>(
+    getXdr: () => Promise<{ xdr: string }>,
+    submit: (signedXdr: string) => Promise<T>
+  ) => Promise<T>
+}
+
+export function useTransaction(): UseTransactionReturn {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const execute = async <T>(
+    getXdr: () => Promise<{ xdr: string }>,
+    submit: (signedXdr: string) => Promise<T>
+  ): Promise<T> => {
+    setIsLoading(true)
+    setError(null)
+    try {
+      const { xdr } = await getXdr()
+
+      const networkPassphrase = (STELLAR_NETWORK as string) === 'PUBLIC'
+        ? 'Public Global Stellar Network ; October 2015'
+        : 'Test SDF Network ; September 2015'
+
+      const signedResponse = await signTransaction(xdr, {
+        networkPassphrase,
+      })
+
+      if (!signedResponse || signedResponse.error) {
+        throw new Error(typeof signedResponse.error === 'string' ? signedResponse.error : 'User rejected the transaction')
+      }
+
+      const result = await submit(signedResponse.signedTxXdr)
+      return result
+    } catch (err: unknown) {
+      console.error('Transaction failed:', err)
+      const message = err instanceof Error ? err.message : 'Transaction failed'
+      setError(message)
+      throw err
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return { isLoading, error, execute }
+}

src/lib/sanitize.ts

@@ -0,0 +1,11 @@
+import DOMPurify from 'dompurify'
+
+DOMPurify.setConfig({ ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
+
+export function sanitizeText(input: string): string {
+  return DOMPurify.sanitize(input, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
+}
+
+export function sanitizeHtml(input: string): string {
+  return DOMPurify.sanitize(input)
+}

src/pages/LearnerProfile.tsx

@@ -10,6 +10,7 @@ import { Card } from '../components/ui/Card'
 import { Button } from '../components/ui/Button'
 import { Badge } from '../components/ui/Badge'
 import { Spinner } from '../components/ui/Spinner'
+import { sanitizeText } from '../lib/sanitize'
 import type { LearnerProfile, ReputationHistoryPoint, Vouch, Loan } from '../types'
 
 const TIER_COLORS: Record<string, 'green' | 'blue' | 'amber' | 'red' | 'muted'> = {
@@ -272,7 +273,7 @@ export function LearnerProfile() {
                       <Badge label="Active" variant="green" />
                     </div>
                     {vouch.message && (
-                      <p className="text-text-muted text-xs mt-1">{vouch.message}</p>
+                      <p className="text-text-muted text-xs mt-1">{sanitizeText(vouch.message)}</p>
                     )}
                     <p className="text-text-muted text-xs mt-1">
                       {new Date(vouch.createdAt).toLocaleDateString()}