feat: refactor PaymentOptionsModal with reducer pattern and improved UI (#323)

* feat: refactor PaymentOptionsModal with reducer pattern and improved UI

- Implement reducer-based state management for cleaner payment flow logic
- Decompose PaymentOptionsModal into separate views (IntroView, CollectDataView, ConfirmPaymentView, ResultView, ViewWrapper)
- Add new WalletConnectLoading animated component with reanimated
- Add new icon assets (ArrowLeft, CaretUpDown, CheckCircle, Close, SealCheck)
- Replace base.webp with base.png for better compatibility
- Update session modals with consistent styling
- Improve theme utilities and helper functions

* fix: address PR review feedback for PaymentOptionsModal

- Remove unnecessary key prop from View in ConfirmPaymentView
- Add null check for merchant iconUrl in MerchantInfo
- Replace hardcoded #9A9A9A with Theme['text-secondary'] in IntroView
- Fix toggle condition to only expand when options.length > 1
- Add try-catch error handling in signature loop
- Add warning/error for unsupported RPC methods

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

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: ignaciosantise

wallets/rn_cli_wallet/.vscode/settings.json

@@ -1,2 +1,13 @@
 {
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
 }

wallets/rn_cli_wallet/babel.config.js

@@ -24,5 +24,6 @@ module.exports = {
         },
       },
     ],
+    ['react-native-worklets/plugin'],
   ],
 };

wallets/rn_cli_wallet/ios/Podfile.lock

@@ -1818,6 +1818,63 @@ PODS:
     - React-Core
   - react-native-get-random-values (1.11.0):
     - React-Core
+  - react-native-keyboard-controller (1.20.6):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - react-native-keyboard-controller/common (= 1.20.6)
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - SocketRocket
+    - Yoga
+  - react-native-keyboard-controller/common (1.20.6):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - SocketRocket
+    - Yoga
   - react-native-mmkv (3.3.3):
     - boost
     - DoubleConversion
@@ -2620,6 +2677,98 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
+  - RNReanimated (4.2.1):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNReanimated/reanimated (= 4.2.1)
+    - RNWorklets
+    - SocketRocket
+    - Yoga
+  - RNReanimated/reanimated (4.2.1):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNReanimated/reanimated/apple (= 4.2.1)
+    - RNWorklets
+    - SocketRocket
+    - Yoga
+  - RNReanimated/reanimated/apple (4.2.1):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNWorklets
+    - SocketRocket
+    - Yoga
   - RNScreens (4.16.0):
     - boost
     - DoubleConversion
@@ -2766,6 +2915,95 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
+  - RNWorklets (0.7.1):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNWorklets/worklets (= 0.7.1)
+    - SocketRocket
+    - Yoga
+  - RNWorklets/worklets (0.7.1):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNWorklets/worklets/apple (= 0.7.1)
+    - SocketRocket
+    - Yoga
+  - RNWorklets/worklets/apple (0.7.1):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - SocketRocket
+    - Yoga
   - Sentry/HybridSDK (8.56.2)
   - SocketRocket (0.7.1)
   - VisionCamera (4.7.2):
@@ -2822,6 +3060,7 @@ DEPENDENCIES:
   - "react-native-compat (from `../node_modules/@walletconnect/react-native-compat`)"
   - react-native-config (from `../node_modules/react-native-config`)
   - react-native-get-random-values (from `../node_modules/react-native-get-random-values`)
+  - react-native-keyboard-controller (from `../node_modules/react-native-keyboard-controller`)
   - react-native-mmkv (from `../node_modules/react-native-mmkv`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-quick-base64 (from `../node_modules/react-native-quick-base64`)
@@ -2864,9 +3103,11 @@ DEPENDENCIES:
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - "RNSentry (from `../node_modules/@sentry/react-native`)"
   - RNSVG (from `../node_modules/react-native-svg`)
+  - RNWorklets (from `../node_modules/react-native-worklets`)
   - SocketRocket (~> 0.7.1)
   - VisionCamera (from `../node_modules/react-native-vision-camera`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -2966,6 +3207,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-config"
   react-native-get-random-values:
     :path: "../node_modules/react-native-get-random-values"
+  react-native-keyboard-controller:
+    :path: "../node_modules/react-native-keyboard-controller"
   react-native-mmkv:
     :path: "../node_modules/react-native-mmkv"
   react-native-netinfo:
@@ -3050,12 +3293,16 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-device-info"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   RNSentry:
     :path: "../node_modules/@sentry/react-native"
   RNSVG:
     :path: "../node_modules/react-native-svg"
+  RNWorklets:
+    :path: "../node_modules/react-native-worklets"
   VisionCamera:
     :path: "../node_modules/react-native-vision-camera"
   Yoga:
@@ -3106,6 +3353,7 @@ SPEC CHECKSUMS:
   react-native-compat: 3c39c3d97e7aca94e8c6576ca89d9e6326061216
   react-native-config: 644074ab88db883fcfaa584f03520ec29589d7df
   react-native-get-random-values: d16467cf726c618e9c7a8c3c39c31faa2244bbba
+  react-native-keyboard-controller: f2ed31d12d9d8cb8ad2f9110c18fa5df499b66a3
   react-native-mmkv: ac7507625cd74bac0eb5333604a7cd7b08fe9e3e
   react-native-netinfo: cec9c4e86083cb5b6aba0e0711f563e2fbbff187
   react-native-quick-base64: 6568199bb2ac8e72ecdfdc73a230fbc5c1d3aac4
@@ -3148,9 +3396,11 @@ SPEC CHECKSUMS:
   RNCClipboard: 4b58c780f63676367640f23c8e114e9bd0cf86ac
   RNDeviceInfo: bcce8752b5043a623fe3c26789679b473f705d3c
   RNGestureHandler: f1dd7f92a0faa2868a919ab53bb9d66eb4ebfcf5
+  RNReanimated: 7d59df16c018cf3ed5d5b45964cedea4fc5c26ef
   RNScreens: 0bbf16c074ae6bb1058a7bf2d1ae017f4306797c
   RNSentry: bbaa7ef3a4b131bc947de327ed9e47a054ce0978
   RNSVG: 8c0bbfa480a24b24468f1c76bd852a4aac3178e6
+  RNWorklets: d9c050940f140af5d8b611d937eab1cbfce5e9a5
   Sentry: b53951377b78e21a734f5dc8318e333dbfc682d7
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   VisionCamera: 30b358b807324c692064f78385e9a732ce1bebfe
@@ -3159,4 +3409,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 37b3abb743131d0d701e76db155ef06d7f5954ad
 
-COCOAPODS: 1.16.2
+COCOAPODS: 1.14.3

wallets/rn_cli_wallet/package.json

@@ -52,15 +52,18 @@
     "react-native-dialog": "9.3.0",
     "react-native-gesture-handler": "2.28.0",
     "react-native-get-random-values": "1.11.0",
+    "react-native-keyboard-controller": "^1.20.6",
     "react-native-mmkv": "3.3.3",
     "react-native-modal": "14.0.0-rc.1",
     "react-native-quick-base64": "2.2.2",
     "react-native-quick-crypto": "0.7.17",
+    "react-native-reanimated": "^4.2.1",
     "react-native-safe-area-context": "5.6.1",
     "react-native-screens": "4.16.0",
     "react-native-svg": "15.14.0",
     "react-native-toast-message": "2.3.3",
     "react-native-vision-camera": "4.7.2",
+    "react-native-worklets": "^0.7.1",
     "stream-browserify": "3.0.0",
     "tronweb": "^6.1.1",
     "valtio": "2.1.8"

wallets/rn_cli_wallet/src/assets/AlertCircle.tsx

@@ -7,7 +7,7 @@ const SvgAlertCircle = (props: SvgProps) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M7 0.583344C3.45617 0.583344 0.583332 3.45618 0.583332 7.00001C0.583332 10.5438 3.45617 13.4167 7 13.4167C10.5438 13.4167 13.4167 10.5438 13.4167 7.00001C13.4167 3.45618 10.5438 0.583344 7 0.583344ZM7.58333 4.66668C7.58333 4.34451 7.32217 4.08334 7 4.08334C6.67783 4.08334 6.41667 4.34451 6.41667 4.66668V7.00001C6.41667 7.32218 6.67783 7.58334 7 7.58334C7.32217 7.58334 7.58333 7.32218 7.58333 7.00001V4.66668ZM7 8.75001C6.67783 8.75001 6.41667 9.01118 6.41667 9.33334C6.41667 9.65551 6.67783 9.91668 7 9.91668H7.00583C7.328 9.91668 7.58917 9.65551 7.58917 9.33334C7.58917 9.01118 7.328 8.75001 7.00583 8.75001H7Z"
-      fill="#FF800A"
+      fill={props.fill || "#FF800A"}
     />
   </Svg>
 );

wallets/rn_cli_wallet/src/assets/ArrowLeft.tsx

@@ -0,0 +1,11 @@
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+
+const SvgArrowLeft = (props: SvgProps) => (
+  <Svg viewBox="0 0 38 38" fill="none" {...props}>
+    <Path
+      d="M26.8123 19.0008C26.8123 19.2495 26.7135 19.4879 26.5377 19.6638C26.3619 19.8396 26.1234 19.9383 25.8748 19.9383H14.3904L18.4154 23.9626C18.5915 24.1387 18.6905 24.3776 18.6905 24.6266C18.6905 24.8757 18.5915 25.1146 18.4154 25.2907C18.2393 25.4668 18.0004 25.5658 17.7513 25.5658C17.5023 25.5658 17.2634 25.4668 17.0873 25.2907L11.4623 19.6657C11.3749 19.5786 11.3055 19.4751 11.2582 19.3611C11.2109 19.2472 11.1865 19.125 11.1865 19.0016C11.1865 18.8782 11.2109 18.7561 11.2582 18.6421C11.3055 18.5282 11.3749 18.4247 11.4623 18.3376L17.0873 12.7126C17.1745 12.6254 17.278 12.5562 17.3919 12.509C17.5059 12.4618 17.628 12.4375 17.7513 12.4375C17.8747 12.4375 17.9968 12.4618 18.1107 12.509C18.2247 12.5562 18.3282 12.6254 18.4154 12.7126C18.5026 12.7998 18.5718 12.9033 18.619 13.0172C18.6662 13.1312 18.6905 13.2533 18.6905 13.3766C18.6905 13.5 18.6662 13.6221 18.619 13.736C18.5718 13.85 18.5026 13.9535 18.4154 14.0407L14.3904 18.0633H25.8748C26.1234 18.0633 26.3619 18.1621 26.5377 18.3379C26.7135 18.5137 26.8123 18.7522 26.8123 19.0008Z"
+      fill={props.fill || '#202020'}
+    />
+  </Svg>
+);
+export default SvgArrowLeft;