Add wallet and access management to React example

[tolgahan-arikan]

Summary

• add a Wallet management section for listing, creating, and switching wallets
• add an Access management section for showing access grants and revoking non-current grants
• keep the new controls aligned with the existing React example styling

Verification

• pnpm exec tsc --noEmit
• pnpm build:example
• git diff --check

Screen Recording

Screen.Recording.2026-06-11.at.17.42.34.mov

[claude]

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

---

PR Review: Wallet and Access Management

Todo List

• Read and analyze changed files
• Review SDK behavior changes for correctness
• Check test coverage requirements
• Verify no public API changes or proper documentation
• Check for proper .js extensions in relative imports
• Ensure no secrets or credentials committed
• Verify TypeScript soundness
• Address Codex review comment about wallet switching
• Provide comprehensive review feedback

---

Review Summary

This PR successfully adds wallet and access management features to the React example while maintaining good code quality and following existing patterns. The implementation correctly uses SDK APIs and integrates well with the existing codebase.

✅ Strengths

SDK Usage: All wallet and access management APIs are used correctly:

• listWallets(), createWallet(), useWallet() for wallet management
• listAccess(), revokeAccess() for access control
• Proper error handling and state management throughout

Code Quality:

• Well-structured with clear separation of concerns
• Consistent with existing patterns and styling
• Proper use of React hooks and state management
• Good accessibility practices (ARIA labels, semantic HTML)

Design Integration:

• Uses existing design tokens from examples/shared/oms-tokens.css
• Follows established styling patterns for cards, buttons, and layouts
• Maintains visual consistency with rest of the application

⚠️ Issues to Address

1. Critical: ERC20 Component State Issue (Codex Review)

Location: examples/react/src/main.tsx:721

The WalletKitDollarExample component has a serious stale state issue:

<WalletKitDollarExample key={walletAddress} />

Problem: The component initializes its wallet address from oms.wallet.walletAddress in a useEffect([]) and never updates when the parent's active wallet changes. This leads to:

• Stale balance information displayed
• Actions (mint/send) executing on the new wallet while showing old wallet's balance
• Confusing user experience

Solution: Key the component properly or pass the active wallet address as a prop so it refreshes on wallet switches.

2. Missing Test Coverage

The new UI functionality lacks corresponding tests. Consider adding:

• Integration tests for wallet switching flows
• Tests for access grant management UI behavior
• Tests ensuring ERC20 component refreshes correctly after wallet switches

3. State Management Consistency

Location: examples/react/src/main.tsx:339-346, 356-366

The wallet switching logic clears some state but not others:

// Clears these
clearWalletOperationResults()
setAccessGrants([])
setAccessStatus('')

// But doesn't clear managed wallets list - should it?

Consider whether managedWallets should also be cleared or refreshed after wallet switches for consistency.

✅ Verified Requirements

• No Public API Changes: Only UI changes, no SDK modifications ✓
• TypeScript Sound: No unsafe casts or type issues ✓
• No .js Extensions Required: Example code doesn't import from src/ ✓
• No Secrets Committed: Only UI code, no credentials ✓
• Follows Repo Patterns: Consistent with existing example patterns ✓

📝 Recommendations

1. Fix the ERC20 component keying issue - This should be addressed before merging
2. Add test coverage for the new functionality
3. Consider state management consistency for managedWallets
4. Run verification commands before merge:
   • pnpm exec tsc --noEmit
   • pnpm build:example

🎯 Verdict

This is a well-implemented feature that enhances the React example significantly. The code quality is good and it demonstrates proper SDK usage. However, the ERC20 component stale state issue is critical and should be fixed before merging, as it creates a confusing user experience.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 4606500a1c

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

[tolgahan-arikan]

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

PR Review: Wallet and Access Management

Todo List

• Read and analyze changed files
• Review SDK behavior changes for correctness
• Check test coverage requirements
• Verify no public API changes or proper documentation
• Check for proper .js extensions in relative imports
• Ensure no secrets or credentials committed
• Verify TypeScript soundness
• Address Codex review comment about wallet switching
• Provide comprehensive review feedback

Review Summary

This PR successfully adds wallet and access management features to the React example while maintaining good code quality and following existing patterns. The implementation correctly uses SDK APIs and integrates well with the existing codebase.

✅ Strengths

SDK Usage: All wallet and access management APIs are used correctly:

• listWallets(), createWallet(), useWallet() for wallet management
• listAccess(), revokeAccess() for access control
• Proper error handling and state management throughout

Code Quality:

• Well-structured with clear separation of concerns
• Consistent with existing patterns and styling
• Proper use of React hooks and state management
• Good accessibility practices (ARIA labels, semantic HTML)

Design Integration:

• Uses existing design tokens from examples/shared/oms-tokens.css
• Follows established styling patterns for cards, buttons, and layouts
• Maintains visual consistency with rest of the application

⚠️ Issues to Address

1. Critical: ERC20 Component State Issue (Codex Review)

Location: examples/react/src/main.tsx:721

The WalletKitDollarExample component has a serious stale state issue:

<WalletKitDollarExample key={walletAddress} />

Problem: The component initializes its wallet address from oms.wallet.walletAddress in a useEffect([]) and never updates when the parent's active wallet changes. This leads to:

• Stale balance information displayed
• Actions (mint/send) executing on the new wallet while showing old wallet's balance
• Confusing user experience

Solution: Key the component properly or pass the active wallet address as a prop so it refreshes on wallet switches.

2. Missing Test Coverage

The new UI functionality lacks corresponding tests. Consider adding:

• Integration tests for wallet switching flows
• Tests for access grant management UI behavior
• Tests ensuring ERC20 component refreshes correctly after wallet switches

3. State Management Consistency

Location: examples/react/src/main.tsx:339-346, 356-366

The wallet switching logic clears some state but not others:

// Clears these
clearWalletOperationResults()
setAccessGrants([])
setAccessStatus('')

// But doesn't clear managed wallets list - should it?

Consider whether managedWallets should also be cleared or refreshed after wallet switches for consistency.

✅ Verified Requirements

• No Public API Changes: Only UI changes, no SDK modifications ✓
• TypeScript Sound: No unsafe casts or type issues ✓
• No .js Extensions Required: Example code doesn't import from src/ ✓
• No Secrets Committed: Only UI code, no credentials ✓
• Follows Repo Patterns: Consistent with existing example patterns ✓

📝 Recommendations

1. Fix the ERC20 component keying issue - This should be addressed before merging

2. Add test coverage for the new functionality

3. Consider state management consistency for managedWallets

4. Run verification commands before merge:

   • pnpm exec tsc --noEmit
   • pnpm build:example

🎯 Verdict

This is a well-implemented feature that enhances the React example significantly. The code quality is good and it demonstrates proper SDK usage. However, the ERC20 component stale state issue is critical and should be fixed before merging, as it creates a confusing user experience.

---

The ERC20 stale-state issue was valid and has been fixed in 06b000a by keying the WalletKit Dollar example on the active wallet address:

<WalletKitDollarExample key={walletAddress} />

That remounts the ERC20 example after wallet switches/creates, so its local balance, transaction result, and status state are reset and reloaded for the active wallet.

For the other two notes:

• I do not think additional React UI tests are required for this PR. This repo does not currently have a React example UI test harness, and the underlying SDK wallet/access APIs are already covered. I verified the example with pnpm exec tsc --noEmit, pnpm build:example, and git diff --check.
• I intentionally keep managedWallets after switching wallets. It is the list used by the wallet management UI, and clearing it would force the user to reload the list after each switch. The stale cross-wallet state is handled by clearing operation results and access grants.