refactor(rn_cli_wallet): simplify payment flow with centralized store

Migrate payment state from local useReducer to centralized Valtio PaymentStore,
reducing PaymentOptionsModal from 573 to 203 lines. Remove IntroView,
CollectDataView, and reducer.ts. Add theme support for WebView data collection
and improve deep link debugging.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: ignaciosantise

wallets/rn_cli_wallet/AGENTS.md

@@ -81,7 +81,7 @@ rn_cli_wallet/
 │   ├── store/
 │   │   ├── SettingsStore.ts     # App state (addresses, sessions)
 │   │   ├── ModalStore.ts        # Modal state
-│   │   └── PayStore.ts          # Payment state
+│   │   └── PaymentStore.ts      # Payment state
 │   ├── lib/                     # Chain-specific wallet implementations
 │   │   ├── EIP155Lib.ts         # Ethereum wallet (ethers.js)
 │   │   ├── SuiLib.ts            # Sui wallet
@@ -117,7 +117,7 @@ Uses **Valtio** (proxy-based reactive state):
 
 - **SettingsStore**: Wallet addresses, sessions, chain settings, device ID
 - **ModalStore**: Modal visibility and request data
-- **PayStore**: WalletConnect Pay state
+- **PaymentStore**: WalletConnect Pay state
 
 ### Navigation
 
@@ -345,5 +345,5 @@ npx tsc --noEmit      # Check for TypeScript errors
 - Use path aliases (`@/`) for imports
 - Handle all blockchain errors gracefully
 - Show toast notifications for user feedback
-- Log important events via `useLogs` hook
+- Log important events via `LogStore` (e.g., `LogStore.log()`, `LogStore.warn()`, `LogStore.error()`)
 - Test signing flows on testnets before mainnet

wallets/rn_cli_wallet/android/app/build.gradle

@@ -85,7 +85,7 @@ android {
         applicationId "com.walletconnect.web3wallet.rnsample"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 57
+        versionCode 58
         versionName "1.0"
         resValue "string", "build_config_package", "com.walletconnect.web3wallet.rnsample"
     }

wallets/rn_cli_wallet/android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,20 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+	<application>
+			<activity android:name=".MainActivity">
+				<intent-filter>
+          <data android:scheme="rn-web3wallet-debug" />
+          <action android:name="android.intent.action.VIEW" />
+          <category android:name="android.intent.category.DEFAULT" />
+          <category android:name="android.intent.category.BROWSABLE" />
+        </intent-filter>
+        <intent-filter android:autoVerify="true">
+          <data android:scheme="https"/>
+          <data android:host="lab.reown.com"/>
+          <data android:pathPrefix="/rn_walletkit_debug"/>
+          <action android:name="android.intent.action.VIEW" />
+          <category android:name="android.intent.category.DEFAULT" />
+          <category android:name="android.intent.category.BROWSABLE" />
+        </intent-filter>
+			</activity>
+	</application>
+</manifest>

wallets/rn_cli_wallet/ios/Podfile.lock

@@ -1811,7 +1811,7 @@ PODS:
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
     - SocketRocket
-  - react-native-compat (2.23.4-canary.3):
+  - react-native-compat (2.23.5):
     - boost
     - DoubleConversion
     - fast_float
@@ -3413,7 +3413,7 @@ SPEC CHECKSUMS:
   React-logger: 30adf849117e87cf86e88dca1824bb0f18f87e10
   React-Mapbuffer: 499069c3dcd4b438a70fcc2a65e8a4185ea9170b
   React-microtasksnativemodule: f0238469cb9894fd18c419137d312665b8fc05b3
-  react-native-compat: bfee2dc4b6ead87b8095266b2f936fa48000241d
+  react-native-compat: 33720a178be8c565138dfdaa5d9d931f59786d2f
   react-native-config: 644074ab88db883fcfaa584f03520ec29589d7df
   react-native-get-random-values: d16467cf726c618e9c7a8c3c39c31faa2244bbba
   react-native-keyboard-controller: f2ed31d12d9d8cb8ad2f9110c18fa5df499b66a3
@@ -3473,4 +3473,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: c628b2429557a37c740a92f2f7ffe4c0bbb44669
 
-COCOAPODS: 1.16.2
+COCOAPODS: 1.14.3

wallets/rn_cli_wallet/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "postinstall": "./scripts/copy-sample-files.sh",
     "android": "react-native run-android --mode=debug --appId com.walletconnect.web3wallet.rnsample.debug",
+    "android:internal": "react-native run-android --mode=debug --appId com.walletconnect.web3wallet.rnsample.internal",
     "android:build": "cd android && ./gradlew clean && ./gradlew assembleRelease",
     "android:build:internal": "cd android && ./gradlew clean && ./gradlew assembleInternal",
     "ios": "react-native run-ios --scheme 'RNWallet-Debug'",
@@ -66,7 +67,7 @@
     "react-native-svg": "15.14.0",
     "react-native-toast-message": "2.3.3",
     "react-native-vision-camera": "4.7.2",
-    "react-native-webview": "^13.16.0",
+    "react-native-webview": "13.16.0",
     "react-native-worklets": "^0.7.1",
     "stream-browserify": "3.0.0",
     "tronweb": "^6.1.1",

wallets/rn_cli_wallet/src/hooks/usePairing.ts

@@ -4,22 +4,23 @@ import { walletKit, isPaymentLink } from '@/utils/WalletKitUtil';
 import LogStore from '@/store/LogStore';
 import ModalStore from '@/store/ModalStore';
 import SettingsStore from '@/store/SettingsStore';
+import PaymentStore from '@/store/PaymentStore';
 import { EIP155_CHAINS } from '@/constants/Eip155';
 
 export { isPaymentLink };
 
 export function usePairing() {
   const handlePaymentLink = useCallback(async (paymentLink: string) => {
-    ModalStore.open('PaymentOptionsModal', {
+    PaymentStore.startPayment({
       loadingMessage: 'Preparing your payment...',
     });
+    ModalStore.open('PaymentOptionsModal');
+
     await SettingsStore.state.initPromise;
 
     const payClient = walletKit?.pay;
     if (!payClient) {
-      ModalStore.open('PaymentOptionsModal', {
-        errorMessage: 'Pay SDK not initialized. Please restart the app.',
-      });
+      PaymentStore.setError('Pay SDK not initialized. Please restart the app.');
       return;
     }
 
@@ -47,11 +48,11 @@ export function usePairing() {
         { paymentOptions },
       );
 
-      ModalStore.open('PaymentOptionsModal', { paymentOptions });
+      PaymentStore.setPaymentOptions(paymentOptions);
     } catch (error: any) {
-      ModalStore.open('PaymentOptionsModal', {
-        errorMessage: error?.message || 'Failed to fetch payment options',
-      });
+      PaymentStore.setError(
+        error?.message || 'Failed to fetch payment options',
+      );
     }
   }, []);
 

wallets/rn_cli_wallet/src/modals/PaymentOptionsModal/CollectDataView.tsx

@@ -4,10 +4,13 @@ import { WebView, WebViewNavigation } from 'react-native-webview';
 import type { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTypes';
 import { btoa } from 'react-native-quick-base64';
 
+import { useSnapshot } from 'valtio';
+
 import { useTheme } from '@/hooks/useTheme';
 import { WalletConnectLoading } from '@/components/WalletConnectLoading';
 import { Spacing } from '@/utils/ThemeUtil';
 import LogStore from '@/store/LogStore';
+import SettingsStore from '@/store/SettingsStore';
 
 function getBaseUrl(urlString: string): string {
   try {
@@ -24,16 +27,27 @@ const PREFILL_DATA = {
   dob: '1990-06-15',
 };
 
-function buildUrlWithPrefill(baseUrl: string): string {
+function buildUrlWithPrefill(
+  baseUrl: string,
+  themeMode: 'light' | 'dark',
+): string {
   const prefillJson = JSON.stringify(PREFILL_DATA);
   const prefillBase64 = btoa(prefillJson);
 
-  if (baseUrl.includes('prefill=')) {
-    return baseUrl.replace(/prefill=([^&]*)/, `prefill=${prefillBase64}`);
+  let result = baseUrl;
+
+  if (result.includes('prefill=')) {
+    result = result.replace(/prefill=([^&]*)/, `prefill=${prefillBase64}`);
+  } else {
+    const separator = result.includes('?') ? '&' : '?';
+    result = `${result}${separator}prefill=${prefillBase64}`;
   }
 
-  const separator = baseUrl.includes('?') ? '&' : '?';
-  return `${baseUrl}${separator}prefill=${prefillBase64}`;
+  // Append theme param based on wallet config
+  const theme = themeMode === 'dark' ? 'dark' : 'light';
+  result += `&theme=${theme}`;
+
+  return result;
 }
 
 interface CollectDataWebViewProps {
@@ -48,18 +62,19 @@ export function CollectDataWebView({
   onError,
 }: CollectDataWebViewProps) {
   const Theme = useTheme();
+  const { themeMode } = useSnapshot(SettingsStore.state);
   const webViewRef = useRef<WebView>(null);
   const [isLoading, setIsLoading] = useState(true);
   const isMountedRef = useRef(true);
 
   const finalUrl = useMemo(() => {
-    const urlWithPrefill = buildUrlWithPrefill(url);
+    const urlWithPrefill = buildUrlWithPrefill(url, themeMode);
     LogStore.log('WebView URL with prefill', 'CollectDataWebView', 'finalUrl', {
       originalUrl: url,
       finalUrl: urlWithPrefill,
     });
     return urlWithPrefill;
-  }, [url]);
+  }, [url, themeMode]);
 
   useEffect(() => {
     isMountedRef.current = true;