[820] General: Add frontend .env validation script for contract deployment

.github/workflows/frontend.yml

@@ -69,10 +69,27 @@ jobs:
       - name: Unit tests
         run: npm run test:run
 
+  frontend-env-validation:
+    name: Frontend env validation script
+    runs-on: ubuntu-latest
+    needs: changes
+    if: needs.changes.outputs.frontend == 'true' || needs.changes.outputs.contracts == 'true'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install root dependencies
+        run: npm ci
+      - name: Run frontend env validation unit tests
+        run: npm run test:validate-frontend-env
+
   frontend-build:
     name: Frontend build
     runs-on: ubuntu-latest
-    needs: changes
+    needs: [changes, frontend-env-validation]
     if: needs.changes.outputs.frontend == 'true'
     defaults:
       run:

.github/workflows/rust-wasm.yml

@@ -122,6 +122,22 @@ jobs:
           GIT_SHA: ${{ github.sha }}
         run: bash contracts/vault/scripts/smoke-test.sh
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install root dependencies
+        run: npm ci
+
+      - name: Validate frontend env against deployment.json
+        env:
+          VITE_SOROBAN_RPC_URL: https://soroban-testnet.stellar.org
+          VITE_STELLAR_NETWORK_PASSPHRASE: Test SDF Network ; September 2015
+        run: |
+          export VITE_VAULT_CONTRACT_ID="$(jq -r '.contract_id' deployment.json)"
+          npm run validate:frontend-env -- --strict --check-rpc --deployment-json deployment.json
+
       - name: Upload deployment artifact
         uses: actions/upload-artifact@v4
         with:

ENV_SETUP_README.md

@@ -22,6 +22,7 @@ nano .env.local
 # 3. Verify setup
 cd ..
 ./scripts/verify-env-security.sh
+npm run validate:frontend-env -- --env-file frontend/.env.local --strict --check-rpc
 ```
 
 ### For Production Deployment
@@ -42,6 +43,7 @@ nano .env.production
 # 3. Verify setup
 cd ..
 ./scripts/verify-env-security.sh
+npm run validate:frontend-env -- --env-file frontend/.env.production --strict --check-rpc
 ```
 
 ## 📋 Required Variables

README.md

@@ -61,7 +61,15 @@ For a comprehensive overview of the smart contract architecture, module responsi
    cd frontend && npm install && npm run dev
    ```
 
-4. **Open browser**: http://localhost:5173
+4. **Configure frontend contract env** (required before on-chain features work):
+
+   ```bash
+   cp frontend/.env.local.example frontend/.env.local
+   # Set VITE_VAULT_CONTRACT_ID from deployment.json after a contract deploy
+   npm run validate:frontend-env -- --env-file frontend/.env.local --strict --check-rpc
+   ```
+
+5. **Open browser**: http://localhost:5173
 
 For detailed setup instructions, prerequisites, and troubleshooting, see **[Local Development Quickstart](./docs/LOCAL_DEVELOPMENT_QUICKSTART.md)**.
 

frontend/.env.example

@@ -1,3 +1,6 @@
+# Required for on-chain vault reads (deposit/withdraw/share price). After CI deploy,
+# copy contract_id from deployment.json into VITE_VAULT_CONTRACT_ID, then run:
+#   npm run validate:frontend-env -- --env-file frontend/.env.local --strict
 VITE_SOROBAN_RPC_URL=https://soroban-testnet.stellar.org
 VITE_STELLAR_NETWORK_PASSPHRASE=Test SDF Network ; September 2015
 VITE_VAULT_CONTRACT_ID=

frontend/package.json

@@ -43,6 +43,7 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/canvas-confetti": "^1.9.0",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.7",

frontend/src/components/VaultDashboard.tsx

@@ -389,6 +389,9 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
 
     staleGuard.captureReviewSnapshot();
     dashboardUrl.setStep("review");
+    window.setTimeout(() => {
+      document.getElementById(`vault-${activeTab}-confirm`)?.focus();
+    }, 0);
   };
 
   const executeTransaction = async (

frontend/src/hooks/useFormFocusFlow.test.ts

@@ -22,7 +22,9 @@ describe("useFormFocusFlow", () => {
     );
 
     act(() => {
-      result.current.containerRef.current = document.getElementById("container");
+      result.current.containerRef.current = document.getElementById(
+        "container",
+      ) as HTMLDivElement | null;
       result.current.focusFirstError();
     });
 

frontend/src/index.css

@@ -2255,9 +2255,9 @@ button {
   }
 }
 
-/* ========================================
+/* =======================================
    Transaction Receipt Styles
-   ======================================== */
+   ======================================= */
 
 .receipt-page {
   min-height: 80vh;
@@ -2405,9 +2405,9 @@ button {
   text-decoration: underline;
 }
 
-/* ========================================
+/* =======================================
    Print Styles
-   ======================================== */
+   ======================================= */
 
 @media print {
   /* Hide non-essential UI */
@@ -2486,9 +2486,9 @@ button {
   }
 }
 
-/* ========================================
+/* =======================================
    Offline Banner Styles
-   ======================================== */
+   ======================================= */
 
 .offline-banner {
   position: fixed;
@@ -2570,9 +2570,9 @@ button {
   }
 }
 
-/* ========================================
+/* =======================================
    Infinite Scroll Styles
-   ======================================== */
+   ======================================= */
 
 /* View mode toggle */
 .infinite-scroll-toggle {

frontend/src/lib/formatters.ts

@@ -263,11 +263,14 @@ export function formatDate(
     return "";
   }
 
-  const options = (
-    "formatOptions" in formatOptionsOrOptions || "locale" in formatOptionsOrOptions
-      ? formatOptionsOrOptions
-      : { formatOptions: formatOptionsOrOptions, locale }
-  ) as DateFormatOptions;
+  const options: DateFormatOptions =
+    "formatOptions" in formatOptionsOrOptions ||
+    "fallbackLocale" in formatOptionsOrOptions
+      ? (formatOptionsOrOptions as DateFormatOptions)
+      : {
+          formatOptions: formatOptionsOrOptions as Intl.DateTimeFormatOptions,
+          locale,
+        };
 
   const resolvedLocale = resolveLocale(options.locale ?? locale, options.fallbackLocale);
   return new Intl.DateTimeFormat(resolvedLocale, options.formatOptions ?? {}).format(normalizedDate);

frontend/src/pages/Settings.tsx

@@ -288,14 +288,14 @@ const CURRENCY_OPTIONS: { value: Currency; label: string }[] = [
   { value: 'XLM', label: 'XLM — Stellar Lumens' },
 ];
 
-const NOTIF_KEYS: { key: keyof NotificationPreferences }[] = [
-  { key: 'depositAlerts' },
-  { key: 'withdrawalAlerts' },
-  { key: 'yieldUpdates' },
-  { key: 'priceAlerts' },
-  { key: 'weeklyReport' },
-  { key: 'securityAlerts' },
-];
+const NOTIF_KEYS = [
+  'depositAlerts',
+  'withdrawalAlerts',
+  'yieldUpdates',
+  'priceAlerts',
+  'weeklyReport',
+  'securityAlerts',
+] as const satisfies readonly (keyof NotificationPreferences)[];
 
 const Settings: React.FC = () => {
   const {
@@ -506,7 +506,7 @@ const Settings: React.FC = () => {
         }
       >
         <div style={{ display: 'flex', flexDirection: 'column' }}>
-          {NOTIF_KEYS.map(({ key }) => (
+          {NOTIF_KEYS.map((key) => (
             <NotifRow
               key={key}
               id={`settings-notif-${key}`}

frontend/tsconfig.app.json

@@ -5,7 +5,7 @@
     "useDefineForClassFields": true,
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "types": ["vite/client", "node", "vitest"],
+    "types": ["vite/client", "node", "vitest/globals"],
     "skipLibCheck": true,
 
     /* Bundler mode */