web-app/ci: Add pipeline for quality checks

- We build, typecheck and lint. This makes sure everything still works
  at least according to on static checks

- Scripts for building and typechecking were added to infra directories

- Typechecking issues were fixed by modifying the tsconfig.json to ignore
  library typechecking, and also by fixing the type issues in our app
  files

.github/workflows/web-app-qc.yml

@@ -0,0 +1,45 @@
+name: Web App Quality Check
+
+on: pull_request 
+
+jobs: 
+  build-typecheck-lint:
+    name: Build web app, typecheck and lint
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      # We need foundry for contract types
+      - name: Install Foundry
+        uses: foundry-rs/foundry-toolchain@v1
+        with:
+          version: nightly
+
+      - name: Install node dependencies
+        run: |
+          cd web-app/infra
+          npm ci
+
+      - name: Build infra and src
+        env:
+          WEB_APP_INFRA_ENV: ${{ secrets.WEB_APP_INFRA_ENV }}
+        run: |
+          cd web-app/infra
+          echo $WEB_APP_INFRA_ENV > .env
+          npm run build
+
+      - name: Lint
+        run: |
+          cd web-app/infra
+          npm run lint
+          cd ../src
+          npm run lint
+
+      - name: Typecheck
+        run: |
+          cd web-app/infra
+          npm run typecheck
+          cd ../src
+          npm run typecheck

web-app/infra/package.json

@@ -6,13 +6,15 @@
   },
   "scripts": {
     "preinstall": "cd ../src && npm ci",
-    "build": "cd ../src && npm run build",
+    "prebuild": "cd ../src && npm run build",
+    "build": "env-cmd -f .env cdk synth -q",
     "predeploy": "npm run build",
     "predeploy:ci": "npm run build",
     "deploy": "env-cmd -f .env cdk deploy",
     "deploy:ci": "env-cmd -f .env cdk deploy --require-approval never",
     "undeploy": "env-cmd -f .env cdk destroy",
-    "lint": "eslint . --ext '.ts' --ignore-path .gitignore"
+    "lint": "eslint . --ext '.ts' --ignore-path .gitignore",
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^1.7.0",

web-app/src/app/lib/constants.ts

@@ -12,6 +12,7 @@ export const LOCAL_CHAIN_INFO: ChainInfo = {
   ],
   chainId: `0x${(31337).toString(16)}`,
   chainName: 'Anvil',
+  blockExplorerUrls: [],
 };
 
 export const FINTHETIX_GITHUB_URL = 'https://www.github.com/sayandcode/finthetix';

web-app/src/tsconfig.json

@@ -1,7 +1,15 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "remix.env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ES2022"
+    ],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
@@ -13,11 +21,13 @@
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
-      "~/*": ["./app/*"]
+      "~/*": [
+        "./app/*"
+      ]
     },
     "noUncheckedIndexedAccess": true,
-
+    "skipLibCheck": true,
     // Remix takes care of building everything in `remix build`.
     "noEmit": true
   }
-}
+}