feat(wallet): add settings toggle for staging Pay config#1039
Open
ganchoradkov wants to merge 2 commits into
Open
feat(wallet): add settings toggle for staging Pay config#1039ganchoradkov wants to merge 2 commits into
ganchoradkov wants to merge 2 commits into
Conversation
Add a Pay Environment toggle in the react-wallet-v2 settings page that defaults to production and switches to the staging Pay environment when enabled. The toggle state is persisted to localStorage and read by createWalletKit, which now selects the staging appId/baseUrl when the toggle is on (or NEXT_PUBLIC_PAY_ENV is set to a non-production value). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
6 Skipped Deployments
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a persisted “Pay Environment” toggle in the React wallet settings to allow opting into WalletConnect Pay’s staging environment client-side (defaulting to production), replacing the prior non-browser-exposed env gating.
Changes:
- Add
payStagingEnabledsetting persisted tolocalStoragewith a toggle action. - Derive Pay env selection in
createWalletKit()from settings (with env fallback) and use staging/prod Pay endpoints accordingly. - Add a Production/Staging switch to the settings page with a reload hint.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| advanced/wallets/react-wallet-v2/src/utils/WalletConnectUtil.ts | Derives Pay env from settings/env and configures WalletKit Pay settings; adjusts session typing in updateSignClientChainId. |
| advanced/wallets/react-wallet-v2/src/store/SettingsStore.ts | Introduces payStagingEnabled state, PAY_STAGING storage key, and a toggle action. |
| advanced/wallets/react-wallet-v2/src/pages/settings.tsx | Adds the Pay Environment toggle UI and reload hint text. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+21
to
+23
| const env = process.env.NEXT_PUBLIC_PAY_ENV || 'production' | ||
| // Defaults to production. The settings toggle (or NEXT_PUBLIC_PAY_ENV=staging) opts into staging. | ||
| const useStaging = SettingsStore.state.payStagingEnabled || env !== 'production' |
Comment on lines
+45
to
+56
| payConfig: { | ||
| ...(useStaging | ||
| ? { | ||
| appId: stagingPayAppId, | ||
| baseUrl: stagingPayUrl | ||
| } | ||
| : { | ||
| appId: payProjectId, | ||
| apiKey, | ||
| baseUrl: prodPayUrl | ||
| }) | ||
| } |
Comment on lines
+73
to
+77
| Object.values(sessions as unknown as Record<string, SessionTypes.Struct>).forEach( | ||
| async (session: SessionTypes.Struct) => { | ||
| await walletkit.updateSession({ | ||
| topic: session.topic, | ||
| namespaces: { |
Add a PayEnvPill component that surfaces the active Pay environment (production / staging) driven by the settings toggle, and render it in the PaymentOptionsModal header and SessionCheckoutModal title row. Also log the resolved Pay environment and the payment link uri before fetching payment options to aid debugging. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a Pay Environment toggle to the react-wallet-v2 settings page that defaults to production and switches to the staging Pay environment only when enabled.
Previously the staging branch was gated behind
process.env.PAY_ENV, which is not exposed to the browser bundle (noNEXT_PUBLIC_prefix), making the staging config effectively unreachable client-side. This replaces that with a persisted, user-controllable toggle.Changes
src/store/SettingsStore.ts— newpayStagingEnabledstate (defaultfalse), aPAY_STAGINGlocalStorage key, and atogglePayStagingEnabled()action, following the existing toggle pattern.src/utils/WalletConnectUtil.ts—createWalletKitderivesuseStagingfromSettingsStore.state.payStagingEnabled(falling back toNEXT_PUBLIC_PAY_ENVfor env-based setups). StagingappId/baseUrlare used only when opted in; production is the default.src/pages/settings.tsx— a Production/Staging switch with a hint that a page reload is required to apply.Flow
flowchart TD A[Settings page toggle] -->|togglePayStagingEnabled| B[SettingsStore.payStagingEnabled] B --> C[localStorage: PAY_STAGING] C -->|on reload| D[createWalletKit] E[NEXT_PUBLIC_PAY_ENV fallback] --> D D -->|useStaging?| F{Pay env} F -->|true| G[staging appId + baseUrl] F -->|false default| H[production appId + apiKey + baseUrl]Note
walletkitis created once during initialization, so changing the toggle requires a page reload to take effect — documented in the UI hint rather than wiring up live re-initialization.🤖 Generated with Claude Code