P-2202: P-2209: Examples: Add Angular example for the Formo Web SDK by keiloktql · Pull Request #27 · getformo/examples

keiloktql · 2026-05-19T09:49:55Z

export-1779184131699.mp4

Summary

Adds with-angular/, an example app demonstrating the Formo Web SDK (@formo/analytics) in Angular — the repo's first non-React example, and the first time the SDK has been exercised on Angular. The SDK's documented integration (FormoAnalyticsProvider / useFormo()) is React-only, and the repo's other wallet examples use wagmi, which is also React-only — so this example wires the framework-agnostic FormoAnalytics.init() core into an Angular service, with a bare EIP-1193 (window.ethereum) wallet and viem. Building it also surfaced two SDK rough edges outside a React/Webpack toolchain.

Key Changes

New with-angular/ example:

Angular 21 standalone-component app — signals, zoneless change detection — with two routed pages: a wallet demo and an integration explainer
FormoAnalyticsService wraps the framework-agnostic FormoAnalytics.init() core; initialized via provideAppInitializer so the SDK's autocapture wraps window.ethereum before any wallet interaction is possible
WalletService connects over the bare EIP-1193 provider with viem for signMessage / sendTransaction — no wagmi; it rehydrates an already-authorized wallet on reload and disconnects via wallet_revokePermissions
SPA route changes are tracked with no extra code — Angular's router navigates via history.pushState, which the SDK already hooks

SDK compatibility findings:

Buffer polyfill — the SDK decodes signed messages with Node's Buffer; Angular's esbuild build doesn't polyfill Node globals, so signing threw ReferenceError: Buffer is not defined. src/polyfills.ts exposes Buffer on the global scope.
React in the bundle — the SDK's single entrypoint also re-exports its React provider, pulling React into this non-React app; harmless, and allowedCommonJsDependencies silences the resulting build warnings

Config:

@ngx-env/builder reads NG_APP_FORMO_WRITE_KEY from .env, matching the repo's env-file convention
Root README.md lists the new example under Web Frameworks

^{Need help on this PR? Tag @codesmith with what you need.}

Let Codesmith autofix CI failures and bot reviews

linear-code · 2026-05-19T09:49:59Z

P-2202

P-2209

yosriady · 2026-05-19T09:50:11Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 4191a1404a

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-05-19T09:53:37Z

+        "build": {
+          "builder": "@ngx-env/builder:application",
+          "options": {
+            "browser": "src/main.ts",


Add the HTML entry point to the build target

The build target never points Angular at the committed src/index.html. For the application builder, the index option is what configures generation/serving of the HTML shell and the schema does not default it, so pnpm start/pnpm build won't use this app's host page and the example won't load correctly at /. Add "index": "src/index.html" alongside browser.

Useful? React with 👍 / 👎.

gemini-code-assist

Code Review

This pull request introduces a new Angular example project demonstrating the integration of the Formo Analytics Web SDK in a non-React environment. The implementation features a dedicated service to wrap the SDK core, an initialization strategy using Angular's app initializer to ensure early event autocapture, and a wallet service utilizing viem for bare EIP-1193 provider interactions. Review feedback focuses on improving type safety and runtime robustness within the wallet service, specifically when handling account addresses returned by the provider.

gemini-code-assist · 2026-05-19T09:55:09Z

+      if (accounts.length === 0) return;
+      const chainIdHex = await provider.request({ method: 'eth_chainId' });
+      this.chainId.set(Number.parseInt(chainIdHex, 16));
+      this.setAddress(accounts[0]);


The accounts[0] value is of type string | undefined, but setAddress expects Address | null. Since you've already checked that accounts.length > 0, you can safely cast this to Address to satisfy strict type checking, similar to how it's handled in the accountsChanged listener.

Suggested change

this.setAddress(accounts[0]);

this.setAddress(accounts[0] as Address);

gemini-code-assist · 2026-05-19T09:55:09Z

+    const provider = this.requireProvider();
+
+    provider.on('accountsChanged', (accounts) => {
+      this.setAddress((accounts as Address[])[0] ?? null);


The accounts parameter in the accountsChanged event is typed as unknown by default in many EIP-1193 provider definitions. While casting to Address[] is correct for viem, ensure that accounts is indeed an array before accessing the first element to prevent potential runtime errors if a non-compliant provider is used.

Suggested change

this.setAddress((accounts as Address[])[0] ?? null);

provider.on('accountsChanged', (accounts) => {

const accountList = Array.isArray(accounts) ? (accounts as Address[]) : [];

this.setAddress(accountList[0] ?? null);

});

yosriady · 2026-05-19T10:26:33Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 2e921a8f24

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-05-19T10:31:02Z

+
+### Prerequisites
+
+- Node.js 20+


Raise the Node prerequisite to Angular 21's minimum

This example depends on Angular 21, whose compatibility table requires Node ^20.19.0 || ^22.12.0 || ^24.0.0 (the lockfile also records that engine range for @angular/cli@21.2.11). With the current Node.js 20+ prerequisite, users on Node 20.0 through 20.18 can follow the README and then hit Angular CLI engine/version failures when running pnpm install, pnpm start, or pnpm build; please document the actual minimum, e.g. Node 20.19+.

Useful? React with 👍 / 👎.

keiloktql · 2026-05-20T04:55:41Z

updated to work with latest SDK 1.30.1 to reduce unnecessary bloat with react imports

socket-security · 2026-05-20T04:56:29Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@radix-ui/react-separator@1.1.8
	class-variance-authority@0.7.1
	@radix-ui/react-dropdown-menu@2.1.16
	jsdom@28.1.0
	@angular/cli@21.2.11
	@angular/core@21.2.13
	@angular/compiler@21.2.13
	@angular/platform-browser@21.2.13
	@types/react-dom@18.3.7 ⏵ 19.2.3
	@angular/compiler-cli@21.2.13
	@formo/analytics@1.30.1
	@angular/forms@21.2.13
	@angular/router@21.2.13
	@angular/build@21.2.11
	@types/react@18.3.28 ⏵ 19.2.14	⁺¹
	vitest@4.1.6
	@angular/common@21.2.13
	rxjs@7.8.2
	@eslint/eslintrc@2.1.4 ⏵ 3.3.5	⁺¹
	tslib@2.8.1
	@tanstack/react-query@5.29.2 ⏵ 5.100.10
	typescript@5.9.3
	prettier@3.8.3
	@ngx-env/builder@21.0.1
	viem@2.49.3

View full report

socket-security · 2026-05-20T04:56:31Z

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert (click "▶" to expand/collapse)
Warn		Obfuscated code: npm `entities` is 91.0% likely obfuscated Confidence: 0.91 Location: Package overview From: with-angular/pnpm-lock.yaml → `npm/@angular/build@21.2.11` → `npm/entities@4.5.0` ℹ Read more on: This package \| This alert \| What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/entities@4.5.0`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Obfuscated code: npm `entities` is 91.0% likely obfuscated Confidence: 0.91 Location: Package overview From: with-angular/pnpm-lock.yaml → `npm/@angular/cli@21.2.11` → `npm/@angular/build@21.2.11` → `npm/entities@6.0.1` ℹ Read more on: This package \| This alert \| What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/entities@6.0.1`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

keiloktql · 2026-05-20T06:13:51Z

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action Severity Alert (click "▶" to expand/collapse)
Warn
Obfuscated code: npm entities is 91.0% likely obfuscated
Confidence: 0.91

Location: Package overview

From: with-angular/pnpm-lock.yaml → npm/@angular/build@21.2.11 → npm/entities@4.5.0

ℹ Read more on: This package | This alert | What is obfuscated code?
Next steps: Take a moment to review the security alert above. Review
the linked package source code to understand the potential risk. Ensure the
package is not malicious before proceeding. If you're unsure how to proceed,
reach out to your security team or ask the Socket team for help at
support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.
_Mark the package as acceptable risk_. To ignore this alert only
in this pull request, reply with the comment
`@SocketSecurity ignore npm/entities@4.5.0`. You can
also ignore all packages with `@SocketSecurity ignore-all`.
To ignore an alert for all future pull requests, use Socket's Dashboard to
change the [triage state of this alert](https://socket.dev/dashboard/org/formo-s6e5w/diff-scan/3ac5846f-56b7-48a2-ac69-dc578b6661b6/alert/QT-hmVgWdSOO39VFzYAFn4VdlbRxBR55w6VweWS9GqGA).
Warn
Obfuscated code: npm entities is 91.0% likely obfuscated
Confidence: 0.91

Location: Package overview

From: with-angular/pnpm-lock.yaml → npm/@angular/cli@21.2.11 → npm/@angular/build@21.2.11 → npm/entities@6.0.1

ℹ Read more on: This package | This alert | What is obfuscated code?
Next steps: Take a moment to review the security alert above. Review
the linked package source code to understand the potential risk. Ensure the
package is not malicious before proceeding. If you're unsure how to proceed,
reach out to your security team or ask the Socket team for help at
support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.
_Mark the package as acceptable risk_. To ignore this alert only
in this pull request, reply with the comment
`@SocketSecurity ignore npm/entities@6.0.1`. You can
also ignore all packages with `@SocketSecurity ignore-all`.
To ignore an alert for all future pull requests, use Socket's Dashboard to
change the [triage state of this alert](https://socket.dev/dashboard/org/formo-s6e5w/diff-scan/3ac5846f-56b7-48a2-ac69-dc578b6661b6/alert/QT-hmVgWdSOO39VFzYAFn4VdlbRxBR55w6VweWS9GqGA).
View full report

should be false positive

yosriady

please check the failing CI

yosriady · 2026-05-20T08:52:51Z

@codex review

chatgpt-codex-connector · 2026-05-20T09:00:17Z

Codex Review: Didn't find any major issues. Swish!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

keiloktql · 2026-05-20T09:02:28Z

Skipping the build step for with-crossmint because Crossmint's SDK validates the API key cryptographically at Next.js prerender (we walked the placeholder progression and got format → environment → signature, can't fake the last one). Only a real key passes, which would need to be a GitHub secret, and fork PRs can't access secrets anyway. Audit job still runs. Build works fine locally with a real NEXT_PUBLIC_CROSSMINT_API_KEY.

angular example with formo web sdk

4191a14

keiloktql requested a review from yosriady May 19, 2026 09:49

keiloktql self-assigned this May 19, 2026

chatgpt-codex-connector Bot reviewed May 19, 2026

View reviewed changes

gemini-code-assist Bot reviewed May 19, 2026

View reviewed changes

fix: minor typing fix

2e921a8

chatgpt-codex-connector Bot reviewed May 19, 2026

View reviewed changes

fix: update readme

1df7f23

keiloktql mentioned this pull request May 20, 2026

P-2202: Examples: Add Angular example for the Formo Web SDK getformo/docs.formo.so#78

Merged

1 task

keiloktql changed the title ~~P-2202: Examples: Add Angular example for the Formo Web SDK~~ P-2202: P-2209: Examples: Add Angular example for the Formo Web SDK May 20, 2026

feat: update angular example to latest sdk

119d1ea

feat: harden supply chain security

66921d1

yosriady approved these changes May 20, 2026

View reviewed changes

fix: ci fix

d732c73

yosriady approved these changes May 20, 2026

View reviewed changes

fix: crossmint build error

376ae75

keiloktql merged commit 8aaf80d into main May 20, 2026
39 checks passed

keiloktql deleted the keilok/angular-example-with-formo-web-sdk branch May 20, 2026 09:05

	this.setAddress(accounts[0]);
	this.setAddress(accounts[0] as Address);

Conversation

keiloktql commented May 19, 2026 • edited by blacksmith-sh Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Key Changes

Uh oh!

linear-code Bot commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yosriady commented May 19, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot May 19, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot May 19, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 19, 2026

Choose a reason for hiding this comment

Uh oh!

yosriady commented May 19, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot May 19, 2026

Choose a reason for hiding this comment

Uh oh!

keiloktql commented May 20, 2026

Uh oh!

socket-security Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-security Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

keiloktql commented May 20, 2026

Uh oh!

yosriady left a comment

Choose a reason for hiding this comment

Uh oh!

yosriady commented May 20, 2026

Uh oh!

chatgpt-codex-connector Bot commented May 20, 2026

Uh oh!

keiloktql commented May 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

keiloktql commented May 19, 2026 •

edited by blacksmith-sh Bot

Loading

linear-code Bot commented May 19, 2026 •

edited

Loading

socket-security Bot commented May 20, 2026 •

edited

Loading

socket-security Bot commented May 20, 2026 •

edited

Loading