P-934: SDK: Crossmint integration#26
Conversation
|
@codex review |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new example project, with-crossmint, demonstrating the integration of Formo Analytics with Crossmint embedded wallets in a Next.js 15 environment. The implementation highlights manual event instrumentation for identification, connection, transactions, and signatures, which is necessary for smart wallets that do not expose standard providers. Reviewer feedback suggests improving type safety by defining interfaces for transfer objects, enhancing the user interface by replacing alert calls with more modern error handling, and implementing stricter validation for chain-related environment variables.
| ) : transfers?.data && transfers.data.length > 0 ? ( | ||
| <div className="flex-1 overflow-hidden"> | ||
| <div className="max-h-[378px] overflow-y-auto space-y-3"> | ||
| {transfers.data.map((tx: any, index: number) => { |
There was a problem hiding this comment.
Avoid using any for the tx object. Define an interface or type that reflects the structure of the transfer object to improve type safety and maintainability.
| setBalances(balances); | ||
| } catch (error) { | ||
| console.error("Error fetching wallet balances:", error); | ||
| alert("Error fetching wallet balances: " + error); |
There was a problem hiding this comment.
Using alert for error handling is poor UX. Consider using a state-based error message or a toast notification to display errors to the user.
| } else { | ||
| // Operational failure (network, sponsorship, validation) — not a user | ||
| // rejection. We don't emit REJECTED here so analytics stay accurate. | ||
| alert("Transfer: " + err); |
There was a problem hiding this comment.
Using alert for error handling is poor UX. Consider using a state-based error message or a toast notification to display errors to the user.
| // Cast to the Crossmint chain literal type. The matching numeric chain ID | ||
| // (84532) lives in lib/chain.ts and is used for Formo events — keep them in | ||
| // sync when changing chains. | ||
| const chain = (process.env.NEXT_PUBLIC_CHAIN ?? "base-sepolia") as "base-sepolia"; |
There was a problem hiding this comment.
The type cast as 'base-sepolia' is unsafe if NEXT_PUBLIC_CHAIN is set to a different value. Validate the environment variable against a list of supported chains instead.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b9b75cce95
ℹ️ 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".
| "@crossmint/client-sdk-react-ui": "4.2.0", | ||
| "@formo/analytics": "^1.30.0", | ||
| "clsx": "^2.1.1", | ||
| "next": "15.2.8", |
There was a problem hiding this comment.
This new example pins next to 15.2.8, which is in the affected range for GHSA-c4j6-fc7j-m34r/CVE-2026-44578 (>=13.4.13 <15.5.16): when someone follows the README and self-hosts with pnpm build/pnpm start, the built-in Next.js Node server can be exposed to SSRF via crafted WebSocket upgrade requests, potentially reaching internal services or cloud metadata. Please bump to a patched 15.x release (the repo’s other examples are already on 15.5.18) and refresh the lockfile.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
please address this before merging
|
Afterwards please add the new examples to https://docs.formo.so/sdks/web#code-examples |
will follow up on this after angular SDK |
2 participants
export-1779174674579.mp4
Summary
Adds
with-crossmint— a Next.js 15 App Router example demonstrating the Formo Analytics SDK with Crossmint embedded wallets (P-934). Crossmint wallets are ERC-4337 smart contracts created via email/Google login — they expose nowindow.ethereumand no wagmi config, so Formo's autocapture hooks have nothing to latch onto. The example explicitly disables autocapture and wires every wallet event by hand, making it the canonical reference for integrating Formo with any embedded/smart-contract wallet.Key Changes
New example (
with-crossmint/):Crossmint/wallets-quickstart; added@formo/analyticsdependency andNEXT_PUBLIC_FORMO_WRITE_KEYenv var — Crossmint key required, Formo key optional (app runs untracked without it)app/providers.tsx— wraps the Crossmint provider tree withFormoAnalyticsProvider;autocapture: falseandevm: falseare set explicitly with comments explaining why (no EIP-1193 / wagmi)lib/chain.ts— single source forCHAIN_NAME = "base-sepolia"andCHAIN_ID = 84532; both the Crossmint wallet config and all Formo event payloads derive from hereFormo instrumentation:
components/formo-bridge.tsx— render-null component mounted insideCrossmintWalletProvider; firesidentify+connectonce the wallet is ready (waits foruser.idso the userId is never missing from the identity call), anddisconnecton logoutcomponents/transfer.tsx— wrapswallet.send()withTransactionStatus.STARTED→BROADCASTED(carryingtxn.hash) and emits acrossmint_transfercustom track event on success;REJECTEDis emitted only forAuthRejectedError(explicit user cancel) — operational failures are not labelled as user rejectionscomponents/formo-event-tester.tsx— UI panel with "Sign message" (signatureevent viaEVMWallet.from(wallet).signMessage()) and "Track custom event" buttons, covering the remaining event typesFixes from post-implementation Codex review:
transfer.tsx:wallet.send()now receivesamountInput(raw user-typed string) instead ofamount.toString()— eliminates float-to-string rounding risk on small or high-precision valuesproviders.tsx: replacedas neverchain cast withas "base-sepolia"plus a comment pointing tolib/chain.tsRepo:
README.md— addedwith-crossmintentry under Wallet IntegrationsNeed help on this PR? Tag
@codesmithwith what you need.