Add environment picker to React example

[tolgahan-arikan]

Summary

• add persisted production, development, and staging sandbox selection to the React example
• rebuild the wallet client with the selected environment after changes
• show the active environment after login and improve the select caret spacing

Verification

• pnpm build:example
• git diff --check

[claude]

Claude finished @tolgahan-arikan's task —— View job

---

Code Review: Add environment picker to React example

I reviewed the 3 changed files against the requested criteria. This is example-only code (no SDK src/ changes), so SDK behavior, API.md, type-tests, and .js import criteria don't apply here.

Review checklist

• Read config.ts, main.tsx, styles.css (+ omsWallet.ts for context)
• Correctness of environment selection / client rebuild behavior
• Secrets check
• TypeScript soundness
• Styling conventions

---

Findings

1. PR summary vs. actual behavior — "rebuild the wallet client" (correctness)

The PR body says it "rebuild[s] the wallet client with the selected environment after changes", but changeDemoEnvironment in examples/react/src/main.tsx:303-307 persists the choice and calls window.location.reload():

function changeDemoEnvironment(id: DemoEnvironmentId) {
  if (id === SELECTED_DEMO_ENVIRONMENT.id) return
  selectDemoEnvironment(id)
  window.location.reload()
}

PUBLISHABLE_KEY / SELECTED_DEMO_ENVIRONMENT are resolved once at module load (config.ts:24-28) and omsWallet.ts:6-8 builds the client once at import. So the client isn't rebuilt in-place — the page reload re-runs module init with the new persisted key. That's a reasonable, simple approach for an example, but the PR description is slightly misleading. Consider rewording to "reload with the selected environment" for accuracy. Not a blocker.

2. localStorage access can throw (correctness / robustness) — examples/react/src/config.ts:24-36

storedDemoEnvironmentId() runs at module top-level via SELECTED_DEMO_ENVIRONMENT. globalThis.localStorage.getItem can throw (e.g. privacy mode / disabled storage), which would crash the entire example at import time rather than falling back to the default. The SDK's own StorageManager guards against this; the example does not. A try/catch returning null would make it robust:

function storedDemoEnvironmentId(): string | null {
  try {
    return globalThis.localStorage.getItem(DEMO_ENVIRONMENT_STORAGE_KEY)
  } catch {
    return null
  }
}

Same applies to setItem in selectDemoEnvironment (config.ts:30-32). Minor for a demo, but cheap to harden.

3. Non-null assertion on the default lookup (types) — examples/react/src/config.ts:24-26

export const SELECTED_DEMO_ENVIRONMENT =
  DEMO_ENVIRONMENTS.find(...) ?? DEMO_ENVIRONMENTS.find(e => e.id === DEFAULT_DEMO_ENVIRONMENT_ID)!

The ! is safe today because DEFAULT_DEMO_ENVIRONMENT_ID is typed as DemoEnvironmentId, so a match exists. But it's a runtime-unchecked invariant: if someone later changes the default id to a value not in the array, this silently becomes undefined and every downstream .publishableKey/.id/.label access crashes. Since DEMO_ENVIRONMENTS is non-empty, ?? DEMO_ENVIRONMENTS[0] (which TS still widens) or an explicit guard would be a bit safer than the assertion. Acceptable within existing example patterns.

4. Secrets check (passed with a note) — examples/react/src/config.ts:1-17

The three pk_*_sdbx_* keys are publishable sandbox keys (the same class as the existing VITE_OMS_PUBLISHABLE_KEY used elsewhere), not secret credentials, so this doesn't violate the "no secrets" rule. However, note two consistency points:

• The rest of the React example sources the key from VITE_OMS_PUBLISHABLE_KEY (examples/react/.env.example); this PR hardcodes keys directly in config.ts instead. That's a deliberate tradeoff (multiple envs vs. one env var), but worth confirming it's intended, since it diverges from the documented .env pattern in AGENTS.md.
• Hardcoded keys can't be overridden locally anymore. If that's undesirable, consider reading from env vars per environment.

5. Styling — orphaned selector — examples/react/src/styles.css:8-10

.environment-option + .header-options { margin-top: 10px; }

.header-options exists in examples/shared/example-components.tsx, but in main.tsx the .environment-option label is followed by <SessionOptions> (not a .header-options sibling). Verify this adjacent-sibling rule actually applies to the rendered markup; if SessionOptions's root isn't .header-options, this rule is dead. Minor.

6. Styling tokens — compliant. The new .environment-badge / .select-control rules correctly use --oms-* tokens per the design-system rule in AGENTS.md. Good.

---

Summary

No blocking correctness or security issues for an example app. Main suggestions: (a) reword the PR "rebuild the client" claim (it reloads), (b) guard localStorage access so storage-disabled browsers don't crash example startup, and (c) confirm the hardcoded-keys-vs-.env divergence is intentional. Items 3 and 5 are minor.

Since these are example-only changes with no observable SDK behavior change, no new tests are required per the repo's testing guidance; pnpm build:example (per the PR's verification) is the appropriate check.
• Branch: add-react-example-environment-picker

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 0ee36b33ed

ℹ️ 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".