P-2202: P-2209: Examples: Add Angular example for the Formo Web SDK (#27)

* angular example with formo web sdk

* fix: minor typing fix

* fix: update readme

* feat: update angular example to latest sdk

* feat: harden supply chain security

* fix: ci fix

* fix: crossmint build error

Author: keiloktql

.github/workflows/build.yml

@@ -13,7 +13,7 @@ jobs:
       matrix: ${{ steps.set.outputs.matrix }}
       any: ${{ steps.set.outputs.any }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - uses: dorny/paths-filter@d1c1ffe0248fe513906c8e24db8ea791d46f8590 # v3.0.3
         id: filter
         with:
@@ -61,6 +61,18 @@ jobs:
             with-solana:
               - 'with-solana/**'
               - '.github/workflows/build.yml'
+            with-angular:
+              - 'with-angular/**'
+              - '.github/workflows/build.yml'
+            with-crossmint:
+              - 'with-crossmint/**'
+              - '.github/workflows/build.yml'
+            with-openfort:
+              - 'with-openfort/**'
+              - '.github/workflows/build.yml'
+            with-turnkey:
+              - 'with-turnkey/**'
+              - '.github/workflows/build.yml'
 
       # Build the matrix from a static config, filtered to changed examples.
       # The matrix is consumed via `needs` (allowed in jobs.<id>.strategy);
@@ -74,7 +86,7 @@ jobs:
             {"name":"with-react","dir":"with-react","pm":"pnpm","build":"build","node":"22"},
             {"name":"with-next-app-router","dir":"with-next-app-router","pm":"pnpm","build":"next:build","node":"22"},
             {"name":"with-next-page-router","dir":"with-next-page-router","pm":"pnpm","build":"build","node":"22"},
-            {"name":"with-dynamic","dir":"with-dynamic","pm":"pnpm","build":"build","node":"22"},
+            {"name":"with-dynamic","dir":"with-dynamic","pm":"pnpm","build":"build","node":"22","audit":"critical"},
             {"name":"with-farcaster","dir":"with-farcaster","pm":"pnpm","build":"build","node":"22"},
             {"name":"with-metamask","dir":"with-metamask","pm":"pnpm","build":"build","node":"22"},
             {"name":"with-porto","dir":"with-porto","pm":"pnpm","build":"build","node":"22"},
@@ -83,8 +95,12 @@ jobs:
             {"name":"with-reown","dir":"with-reown","pm":"pnpm","build":"build","node":"22"},
             {"name":"with-thirdweb","dir":"with-thirdweb","pm":"pnpm","build":"build","node":"22"},
             {"name":"with-web3-onboard","dir":"with-web3-onboard","pm":"pnpm","build":"build","node":"22"},
-            {"name":"with-react-native","dir":"with-react-native","pm":"pnpm","build":"typecheck","node":"22"},
-            {"name":"with-solana","dir":"with-solana","pm":"pnpm","build":"build","node":"22"}
+            {"name":"with-react-native","dir":"with-react-native","pm":"pnpm","build":"typecheck","node":"22","audit":"critical"},
+            {"name":"with-solana","dir":"with-solana","pm":"pnpm","build":"build","node":"22"},
+            {"name":"with-angular","dir":"with-angular","pm":"pnpm","build":"build","node":"22"},
+            {"name":"with-crossmint","dir":"with-crossmint","pm":"pnpm","build":"build","node":"22","audit":"critical"},
+            {"name":"with-openfort","dir":"with-openfort/frontend","pm":"pnpm","build":"build","node":"22"},
+            {"name":"with-turnkey","dir":"with-turnkey","pm":"pnpm","build":"build","node":"22"}
           ]'
           MATRIX=$(jq -cn --argjson full "$FULL" --argjson changed "$CHANGED" \
             '{include: [ $full[] | select(.name as $n | ($changed | index($n)) != null) ]}')
@@ -101,15 +117,15 @@ jobs:
       matrix: ${{ fromJSON(needs.changes.outputs.matrix) }}
     name: ${{ matrix.name }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version: ${{ matrix.node }}
 
       - name: Install pnpm
         if: matrix.pm == 'pnpm'
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4
+        uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 # v6.0.8
         with:
           version: 11
 
@@ -134,6 +150,7 @@ jobs:
         run: |
           echo "NEXT_PUBLIC_FORMO_ANALYTICS_WRITE_KEY=ci_test_key" > with-next-app-router/packages/nextjs/.env
 
+
       - name: Install dependencies
         working-directory: ${{ matrix.dir }}
         shell: bash
@@ -151,6 +168,10 @@ jobs:
           esac
 
       - name: Build
+        # Crossmint's SDK cryptographically validates the API key at build-time
+        # during prerender, so a synthetic placeholder can't get the build past
+        # static generation. The audit job still covers `with-crossmint`.
+        if: matrix.name != 'with-crossmint'
         working-directory: ${{ matrix.dir }}
         shell: bash
         env:
@@ -164,3 +185,40 @@ jobs:
             bun)             bun run "$BUILD_SCRIPT" ;;
             *)               npm run "$BUILD_SCRIPT" ;;
           esac
+
+  # Parallel to `build`. Reuses the same matrix so audit only runs against
+  # changed examples. Fails the PR on high/critical advisories; moderate and
+  # low are still printed but don't break the check (tune `--audit-level` to
+  # `moderate` later if stricter coverage is wanted).
+  audit:
+    needs: changes
+    if: ${{ needs.changes.outputs.any == 'true' }}
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix: ${{ fromJSON(needs.changes.outputs.matrix) }}
+    name: audit (${{ matrix.name }})
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install pnpm
+        if: matrix.pm == 'pnpm'
+        uses: pnpm/action-setup@0e279bb959325dab635dd2c09392533439d90093 # v6.0.8
+        with:
+          version: 11
+
+      - name: Audit production dependencies
+        if: matrix.pm == 'pnpm'
+        working-directory: ${{ matrix.dir }}
+        shell: bash
+        env:
+          # Default gate is `high`. Specific examples carry their own
+          # `audit` value in the matrix when their dep tree has known
+          # unfixable transitive findings (e.g. bigint-buffer has no
+          # patched upstream release yet).
+          AUDIT_LEVEL: ${{ matrix.audit || 'high' }}
+        run: pnpm audit --prod --audit-level=$AUDIT_LEVEL

README.md

@@ -7,6 +7,7 @@ Check out the [SDK docs](https://docs.formo.so/sdks/web) for full installation i
 ## Web Frameworks
 
 - [with-react](./with-react) - React (Create React App) app
+- [with-angular](./with-angular) - Angular app using the non-React SDK core with a bare EIP-1193 wallet
 - [with-next-app-router](./with-next-app-router) - Next.js with App Router
 - [with-next-page-router](./with-next-page-router) - Next.js with Pages Router
 

with-angular/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

with-angular/.env.example

@@ -0,0 +1,4 @@
+# Formo Analytics configuration
+# Create a project at https://app.formo.so and copy its SDK write key.
+# Only variables prefixed with NG_APP_ are exposed to the browser by @ngx-env/builder.
+NG_APP_FORMO_WRITE_KEY=your_formo_write_key_here

with-angular/.gitignore

@@ -0,0 +1,50 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+pnpm-debug.log*
+
+# Environment files
+.env
+.env.local
+.env.*.local
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/mcp.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+__screenshots__/
+
+# System files
+.DS_Store
+Thumbs.db

with-angular/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}