feat: setup Playwright E2E tests with mocking and CI workflow

.github/workflows/django-tests.yml

@@ -36,15 +36,15 @@ jobs:
           --health-retries 5
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: "3.11"
 
       - name: Cache pip packages
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.cache/pip
           key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements.txt') }}
@@ -69,7 +69,7 @@ jobs:
           pytest --cov=soroscan.ingest --cov-report=term-missing --cov-report=xml --cov-fail-under=80
 
       - name: Upload coverage reports
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v4
         with:
           file: ./django-backend/coverage.xml
           flags: backend

.github/workflows/e2e.yml

@@ -0,0 +1,34 @@
+name: E2E Tests
+on: [push, pull_request]
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+          cache-dependency-path: 'soroscan-frontend/pnpm-lock.yaml'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+        working-directory: soroscan-frontend
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+        working-directory: soroscan-frontend
+      - name: Build
+        run: pnpm run build
+        working-directory: soroscan-frontend
+      - name: Run Playwright tests
+        run: npx playwright test
+        working-directory: soroscan-frontend
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: soroscan-frontend/playwright-report/
+          retention-days: 30

soroscan-frontend/app/contracts/[id]/components/ContractForm.tsx → soroscan-frontend/app/contracts/[contractId]/components/ContractForm.tsx

@@ -141,11 +141,11 @@ export function ContractForm({ contract, onSave, onCancel }: ContractFormProps)
         </div>
       )}
 
-     <div className="flex flex-col sm:flex-row gap-3 pt-4">
+      <div className="flex gap-3 pt-4">
         <Button type="submit" variant="primary" disabled={isSubmitting} className="flex-1">
           {isSubmitting ? "SAVING..." : "SAVE CHANGES"}
         </Button>
-        <Button type="button" variant="secondary" onClick={onCancel} disabled={isSubmitting} className="sm:w-auto">
+        <Button type="button" variant="secondary" onClick={onCancel} disabled={isSubmitting}>
           CANCEL
         </Button>
       </div>

soroscan-frontend/app/contracts/[contractId]/events/explorer/page.tsx

@@ -0,0 +1,10 @@
+import { EventExplorerView } from "@/components/ingest/EventExplorerView";
+
+export default function ContractExplorerPage({
+    params,
+}: {
+    params: { contractId: string };
+}) {
+    const { contractId } = params;
+    return <EventExplorerView contractId={contractId} />;
+}

soroscan-frontend/app/contracts/[contractId]/page.tsx

@@ -127,18 +127,16 @@ export default function ContractDetailPage({ params }: { params: { contractId: s
                 <div>
                   <div className="text-xs text-terminal-cyan uppercase mb-1">Status</div>
                   <span
-                    className={`inline-flex items-center gap-2 px-2 py-1 text-xs font-mono ${
-                      contract.status === "active"
-                        ? "text-terminal-green border border-terminal-green/30 bg-terminal-green/10"
-                        : "text-terminal-gray border border-terminal-gray/30 bg-terminal-gray/10"
-                    }`}
+                    className={`inline-flex items-center gap-2 px-2 py-1 text-xs font-mono ${contract.status === "active"
+                      ? "text-terminal-green border border-terminal-green/30 bg-terminal-green/10"
+                      : "text-terminal-gray border border-terminal-gray/30 bg-terminal-gray/10"
+                      }`}
                   >
                     <span
-                      className={`w-2 h-2 rounded-full ${
-                        contract.status === "active"
-                          ? "bg-terminal-green animate-pulse"
-                          : "bg-terminal-gray"
-                      }`}
+                      className={`w-2 h-2 rounded-full ${contract.status === "active"
+                        ? "bg-terminal-green animate-pulse"
+                        : "bg-terminal-gray"
+                        }`}
                     />
                     {contract.status.toUpperCase()}
                   </span>

soroscan-frontend/app/contracts/[id]/timeline/page.tsx → soroscan-frontend/app/contracts/[contractId]/timeline/page.tsx

@@ -3,8 +3,8 @@ import { TimelineView } from "@/components/ingest/TimelineView";
 export default function ContractTimelinePage({
   params,
 }: {
-  params: { id: string };
+  params: { contractId: string };
 }) {
-  const { id } = params;
-  return <TimelineView contractId={id} />;
+  const { contractId } = params;
+  return <TimelineView contractId={contractId} />;
 }

soroscan-frontend/jest.config.ts

@@ -10,6 +10,7 @@ const createJestConfig = nextJest({
 const config: Config = {
   coverageProvider: 'v8',
   testEnvironment: 'jsdom',
+  testPathIgnorePatterns: ['<rootDir>/tests/'],
   // Add more setup options before each test is run
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   moduleNameMapper: {