wallet-stack 1.0.0-alpha.138 → 1.0.0-alpha.140

package/metro-config.js

@@ -1,9 +1,5 @@
-const { getDefaultConfig: getDefaultConfigExpo } = require('expo/metro-config')
-
-// Wraps Expo's getDefaultConfig to add our customizations
-function getDefaultConfig(...args) {
-  const config = getDefaultConfigExpo(...args)
-
+// Wraps a Metro config (Expo's or Sentry's) with wallet-stack customizations.
+function withWalletStackConfig(config) {
   config.transformer.getTransformOptions = async () => ({
     transform: {
       experimentalImportSupport: false,
@@ -15,6 +11,7 @@ function getDefaultConfig(...args) {
   config.resolver.assetExts = [...config.resolver.assetExts, 'txt']
 
   config.resolver.extraNodeModules = {
+    ...config.resolver.extraNodeModules,
     // This is the crypto module we want to use moving forward (unless something better comes up).
     // It is implemented natively using OpenSSL.
     crypto: require.resolve('react-native-quick-crypto'),
@@ -23,6 +20,7 @@ function getDefaultConfig(...args) {
     buffer: require.resolve('@craftzdog/react-native-buffer'),
   }
 
+  const baseResolveRequest = config.resolver.resolveRequest
   // TODO: remove this once we stop using absolute imports
   config.resolver.resolveRequest = (context, moduleName, platform) => {
     if (moduleName.startsWith('src/')) {
@@ -31,10 +29,10 @@ function getDefaultConfig(...args) {
     if (moduleName === 'locales') {
       return context.resolveRequest(context, 'wallet-stack/locales', platform)
     }
-    return context.resolveRequest(context, moduleName, platform)
+    return (baseResolveRequest ?? context.resolveRequest)(context, moduleName, platform)
   }
 
   return config
 }
 
-module.exports = { getDefaultConfig }
+module.exports = { withWalletStackConfig }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallet-stack",
-  "version": "1.0.0-alpha.138",
+  "version": "1.0.0-alpha.140",
   "author": "Valora Inc",
   "license": "Apache-2.0",
   "repository": {
@@ -89,12 +89,12 @@
     "@valora/react-native-keychain": "^10.0.0-valora.1",
     "@valora/react-native-webview": "^13.13.4",
     "@walletconnect/react-native-compat": "2.21.9",
-    "expo-camera": "~16.1.11",
+    "expo-camera": "~17.0.10",
     "expo-splash-screen": "~0.30.10",
     "lottie-react-native": "^5.1.6",
     "mixpanel-react-native": "^3.2.1",
-    "react": "19.0.0",
-    "react-native": "0.79.6",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
     "react-native-adjust": "^4.38.1",
     "react-native-app-control": "^1.0.2",
     "react-native-auth0": "5.0.0-beta.5",
@@ -112,10 +112,10 @@
     "react-native-permissions": "^4.1.5",
     "react-native-quick-base64": ">=2.1.0",
     "react-native-quick-crypto": "^1.0.16",
-    "react-native-reanimated": "~3.17.4",
+    "react-native-reanimated": "~3.19.5",
     "react-native-restart": "^0.0.27",
     "react-native-safe-area-context": "^5.6.1",
-    "react-native-screens": "~4.11.1",
+    "react-native-screens": "~4.16.0",
     "react-native-shake": "5.5.2",
     "react-native-share": "^11.1.0",
     "react-native-simple-toast": "^3.3.2",
@@ -148,8 +148,8 @@
     "bignumber.js": "^9.1.2",
     "country-data": "^0.0.31",
     "date-fns": "^4.1.0",
-    "expo": "^53.0.22",
-    "expo-image": "~2.4.0",
+    "expo": "^54.0.33",
+    "expo-image": "~3.0.11",
     "fast-levenshtein": "^3.0.0",
     "fp-ts": "2.16.9",
     "futoin-hkdf": "^1.5.3",
@@ -198,9 +198,9 @@
     "@tsconfig/node-lts": "^22.0.1",
     "@types/jest": "^29.5.3",
     "@types/node": "^20",
-    "@types/react": "~19.0.10",
+    "@types/react": "~19.1.10",
     "@types/react-native-video": "^5.0.15",
-    "@types/react-test-renderer": "^19.0.0",
+    "@types/react-test-renderer": "^19.1.0",
     "@types/redux-mock-store": "^1.0.6",
     "@walletconnect/types": "2.21.9",
     "ajv": "^8.18.0",
@@ -211,18 +211,18 @@
     "jest-junit": "^10.0.0",
     "jest-snapshot": "^29.6.2",
     "mockdate": "^3.0.5",
-    "react": "19.0.0",
-    "react-native": "0.79.6",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
     "react-native-contacts": "https://github.com/valora-xyz/react-native-contacts#9940121",
     "react-native-kill-packager": "^1.0.0",
     "react-native-svg-mock": "^2.0.0",
-    "react-test-renderer": "19.0.0",
+    "react-test-renderer": "19.1.0",
     "redux-mock-store": "^1.5.3",
     "redux-saga-test-plan": "^4.0.6",
     "rimraf": "^6.0.1",
     "ts-jest": "^29.1.1",
     "ts-node": "^11.0.0-beta.1",
-    "typescript": "^5.8.3",
+    "typescript": "~5.9.2",
     "typescript-json-schema": "^0.59.0"
   },
   "resolutions": {

package/plugin/build/index.js

@@ -4,6 +4,7 @@ const config_plugins_1 = require("@expo/config-plugins");
 const withAndroidUserAgent_1 = require("./withAndroidUserAgent");
 const withAndroidWindowSoftInputModeAdjustNothing_1 = require("./withAndroidWindowSoftInputModeAdjustNothing");
 const withIosAppDelegateResetKeychain_1 = require("./withIosAppDelegateResetKeychain");
+const withIosLiquidGlassCompat_1 = require("./withIosLiquidGlassCompat");
 const withIosUserAgent_1 = require("./withIosUserAgent");
 /**
  * A config plugin for configuring `wallet-stack`
@@ -13,6 +14,7 @@ const withMobileApp = (config, props = {}) => {
         // iOS
         withIosAppDelegateResetKeychain_1.withIosAppDelegateResetKeychain,
         [withIosUserAgent_1.withIosUserAgent, props],
+        withIosLiquidGlassCompat_1.withIosLiquidGlassCompat,
         // Android
         [withAndroidUserAgent_1.withAndroidUserAgent, props],
         withAndroidWindowSoftInputModeAdjustNothing_1.withAndroidWindowSoftInputModeAdjustNothing,

package/plugin/build/withAndroidUserAgent.js

@@ -46,7 +46,7 @@ function addNeededImports(src) {
         tag: 'wallet-stack/main-application-user-agent-imports',
         src,
         newSrc: imports.join('\n'),
-        anchor: /import com\.facebook\.soloader\.SoLoader/,
+        anchor: /import expo\.modules\.ReactNativeHostWrapper/,
         offset: 1,
         comment: '//',
     });

package/plugin/build/withIosLiquidGlassCompat.d.ts

@@ -0,0 +1,14 @@
+import { ConfigPlugin } from '@expo/config-plugins';
+/**
+ * Opt the app out of iOS 26's Liquid Glass redesign by setting
+ * `UIDesignRequiresCompatibility` in Info.plist. The flag is ignored on
+ * iOS < 26, so older versions are unaffected.
+ *
+ * This is a temporary measure: Apple removes the flag in Xcode 27 and
+ * Liquid Glass becomes mandatory by iOS 27. Track adoption of the new
+ * design as tech debt and remove this mod once wallet-stack's nav bar
+ * styling is updated for Liquid Glass.
+ *
+ * See https://www.donnywals.com/opting-your-app-out-of-the-liquid-glass-redesign-with-xcode-26/
+ */
+export declare const withIosLiquidGlassCompat: ConfigPlugin;

package/plugin/build/withIosLiquidGlassCompat.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withIosLiquidGlassCompat = void 0;
+const config_plugins_1 = require("@expo/config-plugins");
+/**
+ * Opt the app out of iOS 26's Liquid Glass redesign by setting
+ * `UIDesignRequiresCompatibility` in Info.plist. The flag is ignored on
+ * iOS < 26, so older versions are unaffected.
+ *
+ * This is a temporary measure: Apple removes the flag in Xcode 27 and
+ * Liquid Glass becomes mandatory by iOS 27. Track adoption of the new
+ * design as tech debt and remove this mod once wallet-stack's nav bar
+ * styling is updated for Liquid Glass.
+ *
+ * See https://www.donnywals.com/opting-your-app-out-of-the-liquid-glass-redesign-with-xcode-26/
+ */
+const withIosLiquidGlassCompat = (config) => {
+    return (0, config_plugins_1.withInfoPlist)(config, (config) => {
+        config.modResults.UIDesignRequiresCompatibility = true;
+        return config;
+    });
+};
+exports.withIosLiquidGlassCompat = withIosLiquidGlassCompat;

package/src/app/saga.ts

@@ -260,9 +260,8 @@ function* watchDeepLinks() {
 
 export function* handleOpenUrl(action: OpenUrlAction) {
   const { url, openExternal, isSecureOrigin } = action
-  const walletConnectEnabled: boolean = yield* call(isWalletConnectEnabled, url)
   Logger.debug(TAG, 'Handling url', url)
-  if (isDeepLink(url) || (walletConnectEnabled && isWalletConnectDeepLink(url))) {
+  if (isDeepLink(url) || (isWalletConnectDeepLink(url) && (yield* call(isWalletConnectEnabled)))) {
     // Handle celo links directly, this avoids showing the "Open with App" sheet on Android
     yield* call(handleDeepLink, openDeepLink(url, isSecureOrigin))
   } else if (/^https?:\/\//i.test(url) === true && !openExternal) {

package/src/components/Modal.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
-import ReactNativeModal from 'react-native-modal'
-import { SafeAreaView, useSafeAreaFrame } from 'react-native-safe-area-context'
+import { Modal as RNModal, Pressable, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import Card from 'src/components/Card'
 import colors from 'src/styles/colors'
 
@@ -24,31 +23,51 @@ export default function Modal({
   onBackgroundPress,
   onModalHide,
 }: Props) {
-  const { height } = useSafeAreaFrame()
+  // RN's <Modal> only fires `onDismiss` on iOS; emit `onModalHide` cross-platform
+  // whenever `isVisible` transitions from true to false.
+  const wasVisible = React.useRef(isVisible)
+  React.useEffect(() => {
+    if (wasVisible.current && !isVisible) {
+      onModalHide?.()
+    }
+    wasVisible.current = isVisible
+  }, [isVisible, onModalHide])
 
   return (
-    <ReactNativeModal
-      testID={testID}
-      style={modalStyle}
-      isVisible={isVisible}
-      backdropOpacity={0.1}
-      onBackdropPress={onBackgroundPress}
-      // The default uses `Dimensions.get('window').height` but sometimes reports an incorrect height on Android
-      // `useSafeAreaFrame()` seems to work better
-      deviceHeight={height}
+    <RNModal
+      visible={isVisible}
+      transparent={true}
+      animationType="fade"
       statusBarTranslucent={true}
-      onModalHide={onModalHide}
+      onRequestClose={onBackgroundPress}
+      testID={testID}
     >
-      <SafeAreaView>
-        <Card style={[styles.root, style]} rounded={true}>
-          {children}
-        </Card>
-      </SafeAreaView>
-    </ReactNativeModal>
+      <View style={styles.overlay}>
+        <Pressable style={StyleSheet.absoluteFill} onPress={onBackgroundPress} />
+        <View style={[styles.contentWrapper, modalStyle]} pointerEvents="box-none">
+          <SafeAreaView>
+            <Card style={[styles.root, style]} rounded={true}>
+              {children}
+            </Card>
+          </SafeAreaView>
+        </View>
+      </View>
+    </RNModal>
   )
 }
 
 const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+  },
+  // Mirrors react-native-modal's default outer style so the card stays inset
+  // from screen edges and centered vertically.
+  contentWrapper: {
+    flex: 1,
+    margin: 20,
+    justifyContent: 'center',
+  },
   root: {
     backgroundColor: colors.backgroundPrimary,
     padding: 24,

package/src/components/TextInput.tsx

@@ -4,13 +4,13 @@
 
 import * as React from 'react'
 import {
-  NativeSyntheticEvent,
+  BlurEvent,
+  FocusEvent,
   Platform,
   TextInput as RNTextInput,
   TextInputProps as RNTextInputProps,
   StyleProp,
   StyleSheet,
-  TextInputFocusEventData,
   View,
   ViewStyle,
 } from 'react-native'
@@ -46,12 +46,12 @@ export class CTextInput extends React.Component<Props, State> {
     }
   }
 
-  handleInputFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+  handleInputFocus = (e: FocusEvent) => {
     this.setState({ isFocused: true })
     this.props.onFocus?.(e)
   }
 
-  handleInputBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+  handleInputBlur = (e: BlurEvent) => {
     this.setState({ isFocused: false })
     this.props.onBlur?.(e)
   }

package/src/components/__snapshots__/AccountNumber.test.tsx.snap

@@ -45,7 +45,6 @@ exports[`AccountNumber renders correctly when touch enabled 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  ref={null}
   style={
     [
       undefined,

package/src/components/__snapshots__/CircleButton.test.tsx.snap

@@ -48,7 +48,6 @@ exports[`CircleButton renders correctly with minimum props 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
-    ref={null}
     style={
       [
         [
@@ -154,7 +153,6 @@ exports[`CircleButton when given optional props renders correctly 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
-    ref={null}
     style={
       [
         [

package/src/components/__snapshots__/Dialog.test.tsx.snap

@@ -2,247 +2,218 @@
 
 exports[`renders correctly 1`] = `
 <Modal
-  animationType="none"
-  deviceHeight={1334}
-  deviceWidth={null}
-  hardwareAccelerated={false}
-  hideModalContentWhileAnimating={false}
-  onBackdropPress={[Function]}
-  onModalHide={[Function]}
-  onModalWillHide={[Function]}
-  onModalWillShow={[Function]}
-  onRequestClose={[Function]}
-  panResponderThreshold={4}
-  scrollHorizontal={false}
-  scrollOffset={0}
-  scrollOffsetMax={0}
-  scrollTo={null}
+  animationType="fade"
   statusBarTranslucent={true}
-  supportedOrientations={
-    [
-      "portrait",
-      "landscape",
-    ]
-  }
-  swipeThreshold={100}
   transparent={true}
   visible={true}
 >
   <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "backgroundColor": "black",
-        "bottom": 0,
-        "height": 1334,
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "width": 750,
-      }
-    }
-  />
-  <View
-    collapsable={false}
-    deviceHeight={1334}
-    deviceWidth={null}
-    hideModalContentWhileAnimating={false}
-    onBackdropPress={[Function]}
-    onModalHide={[Function]}
-    onModalWillHide={[Function]}
-    onModalWillShow={[Function]}
-    panResponderThreshold={4}
-    pointerEvents="box-none"
-    scrollHorizontal={false}
-    scrollOffset={0}
-    scrollOffsetMax={0}
-    scrollTo={null}
-    statusBarTranslucent={true}
     style={
       {
+        "backgroundColor": "rgba(0, 0, 0, 0.1)",
         "flex": 1,
-        "justifyContent": "center",
-        "margin": 37.5,
-        "transform": [
-          {
-            "translateY": 1334,
-          },
-        ],
       }
     }
-    supportedOrientations={
-      [
-        "portrait",
-        "landscape",
-      ]
-    }
-    swipeThreshold={100}
   >
-    <RNCSafeAreaView
-      edges={
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
         {
-          "bottom": "additive",
-          "left": "additive",
-          "right": "additive",
-          "top": "additive",
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
         }
       }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      pointerEvents="box-none"
+      style={
+        [
+          {
+            "flex": 1,
+            "justifyContent": "center",
+            "margin": 20,
+          },
+          undefined,
+        ]
+      }
     >
-      <View
-        style={
-          [
-            {
-              "backgroundColor": "#FFFFFF",
-              "padding": 16,
-            },
-            {
-              "borderRadius": 8,
-            },
-            {
-              "elevation": 12,
-              "shadowColor": "rgba(156, 164, 169, 0.4)",
-              "shadowOffset": {
-                "height": 2,
-                "width": 0,
-              },
-              "shadowOpacity": 1,
-              "shadowRadius": 12,
-            },
+      <RNCSafeAreaView
+        edges={
+          {
+            "bottom": "additive",
+            "left": "additive",
+            "right": "additive",
+            "top": "additive",
+          }
+        }
+      >
+        <View
+          style={
             [
               {
                 "backgroundColor": "#FFFFFF",
-                "maxHeight": "100%",
-                "padding": 24,
+                "padding": 16,
               },
-              undefined,
-            ],
-          ]
-        }
-      >
-        <RCTScrollView
-          contentContainerStyle={
-            {
-              "alignItems": "center",
-            }
-          }
-        >
-          <View>
-            <Text
-              style={
-                {
-                  "color": "#2E3338",
-                  "fontFamily": "Inter-Bold",
-                  "fontSize": 20,
-                  "lineHeight": 28,
-                  "marginBottom": 12,
-                  "textAlign": "center",
-                }
-              }
-            >
-              Dialog
-            </Text>
-            <Text
-              style={
+              {
+                "borderRadius": 8,
+              },
+              {
+                "elevation": 12,
+                "shadowColor": "rgba(156, 164, 169, 0.4)",
+                "shadowOffset": {
+                  "height": 2,
+                  "width": 0,
+                },
+                "shadowOpacity": 1,
+                "shadowRadius": 12,
+              },
+              [
                 {
-                  "color": "#2E3338",
-                  "fontFamily": "Inter-Regular",
-                  "fontSize": 16,
-                  "lineHeight": 24,
-                  "marginBottom": 24,
-                  "textAlign": "center",
-                }
-              }
-            >
-              "HELLO"
-            </Text>
-          </View>
-        </RCTScrollView>
-        <View
-          style={
-            {
-              "flexDirection": "row",
-              "flexWrap": "wrap",
-              "justifyContent": "space-around",
-              "maxWidth": "100%",
-            }
+                  "backgroundColor": "#FFFFFF",
+                  "maxHeight": "100%",
+                  "padding": 24,
+                },
+                undefined,
+              ],
+            ]
           }
         >
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": undefined,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            focusable={true}
-            nativeBackgroundAndroid={
+          <RCTScrollView
+            contentContainerStyle={
               {
-                "attribute": "selectableItemBackgroundBorderless",
-                "rippleRadius": undefined,
-                "type": "ThemeAttrAndroid",
+                "alignItems": "center",
               }
             }
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
           >
-            <Text
-              style={
-                [
+            <View>
+              <Text
+                style={
                   {
-                    "color": "#1AB775",
-                    "fontFamily": "Inter-SemiBold",
+                    "color": "#2E3338",
+                    "fontFamily": "Inter-Bold",
+                    "fontSize": 20,
+                    "lineHeight": 28,
+                    "marginBottom": 12,
+                    "textAlign": "center",
+                  }
+                }
+              >
+                Dialog
+              </Text>
+              <Text
+                style={
+                  {
+                    "color": "#2E3338",
+                    "fontFamily": "Inter-Regular",
                     "fontSize": 16,
                     "lineHeight": 24,
-                  },
-                  {
-                    "paddingTop": 16,
-                  },
-                ]
+                    "marginBottom": 24,
+                    "textAlign": "center",
+                  }
+                }
+              >
+                "HELLO"
+              </Text>
+            </View>
+          </RCTScrollView>
+          <View
+            style={
+              {
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+                "justifyContent": "space-around",
+                "maxWidth": "100%",
+              }
+            }
+          >
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
+              accessible={true}
+              focusable={true}
+              nativeBackgroundAndroid={
+                {
+                  "attribute": "selectableItemBackgroundBorderless",
+                  "rippleRadius": undefined,
+                  "type": "ThemeAttrAndroid",
+                }
+              }
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
             >
-              Press Me
-            </Text>
+              <Text
+                style={
+                  [
+                    {
+                      "color": "#1AB775",
+                      "fontFamily": "Inter-SemiBold",
+                      "fontSize": 16,
+                      "lineHeight": 24,
+                    },
+                    {
+                      "paddingTop": 16,
+                    },
+                  ]
+                }
+              >
+                Press Me
+              </Text>
+            </View>
           </View>
         </View>
-      </View>
-    </RNCSafeAreaView>
+      </RNCSafeAreaView>
+    </View>
   </View>
 </Modal>
 `;

package/src/components/__snapshots__/TextInputWithButtons.test.tsx.snap

@@ -59,7 +59,6 @@ exports[`TextInputWithButtons renders correctly 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
-    ref={null}
     style={
       [
         undefined,

package/src/dapps/saga.ts

@@ -43,8 +43,10 @@ export function* handleOpenDapp(action: PayloadAction<DappSelectedAction>) {
   ).inAppWebviewEnabled
 
   if (dappsWebViewEnabled) {
-    const walletConnectEnabled: boolean = yield* call(isWalletConnectEnabled, dappUrl)
-    if (isDeepLink(dappUrl) || (walletConnectEnabled && isWalletConnectDeepLink(dappUrl))) {
+    if (
+      isDeepLink(dappUrl) ||
+      (isWalletConnectDeepLink(dappUrl) && (yield* call(isWalletConnectEnabled)))
+    ) {
       yield* call(handleDeepLink, openDeepLink(dappUrl, true))
     } else {
       navigate(Screens.WebViewScreen, { uri: dappUrl })

package/src/public/components/Button.tsx

@@ -1,5 +1,10 @@
+// See useWallet.ts for why we lazy-require the internal module rather than
+// using top-level runtime imports.
 import React from 'react'
-import BaseButton, { BtnSizes, BtnTypes, ButtonProps, TextSizes } from '../../components/Button'
+import type * as InternalButton from '../../components/Button'
+import type { ButtonProps } from '../../components/Button'
+
+const loadInternal = (): typeof InternalButton => require('../../components/Button')
 
 export type ButtonSize = 'small' | 'medium' | 'full'
 export type ButtonType = 'primary' | 'secondary' | 'tertiary'
@@ -11,8 +16,9 @@ export interface CustomButtonProps extends Omit<ButtonProps, 'size' | 'type' | '
   textSize?: ButtonTextSize
 }
 
-function toInternalBtnType(type?: ButtonType): BtnTypes | undefined {
+function toInternalBtnType(type?: ButtonType): InternalButton.BtnTypes | undefined {
   if (!type) return undefined
+  const { BtnTypes } = loadInternal()
   switch (type) {
     case 'primary':
       return BtnTypes.PRIMARY
@@ -26,8 +32,9 @@ function toInternalBtnType(type?: ButtonType): BtnTypes | undefined {
   }
 }
 
-function toInternalBtnSize(size?: ButtonSize): BtnSizes | undefined {
+function toInternalBtnSize(size?: ButtonSize): InternalButton.BtnSizes | undefined {
   if (!size) return undefined
+  const { BtnSizes } = loadInternal()
   switch (size) {
     case 'small':
       return BtnSizes.SMALL
@@ -41,8 +48,9 @@ function toInternalBtnSize(size?: ButtonSize): BtnSizes | undefined {
   }
 }
 
-function toInternalTextSize(size?: ButtonTextSize): TextSizes | undefined {
+function toInternalTextSize(size?: ButtonTextSize): InternalButton.TextSizes | undefined {
   if (!size) return undefined
+  const { TextSizes } = loadInternal()
   switch (size) {
     case 'small':
       return TextSizes.SMALL
@@ -55,6 +63,7 @@ function toInternalTextSize(size?: ButtonTextSize): TextSizes | undefined {
 }
 
 export function Button(props: CustomButtonProps) {
+  const { default: BaseButton } = loadInternal()
   return (
     <BaseButton
       {...props}

package/src/qrcode/utils.ts

@@ -88,11 +88,9 @@ export function* handleQRCodeDefault({
 }: HandleQRCodeDetectedAction) {
   AppAnalytics.track(QrScreenEvents.qr_scanned, qrCode)
 
-  const walletConnectEnabled: boolean = yield* call(isWalletConnectEnabled, qrCode.data)
-
   // TODO there's some duplication with deep links handing
   // would be nice to refactor this
-  if (qrCode.data.startsWith('wc:') && walletConnectEnabled) {
+  if (qrCode.data.startsWith('wc:') && (yield* call(isWalletConnectEnabled))) {
     yield* fork(handleLoadingWithTimeout, WalletConnectPairingOrigin.Scan)
     yield* call(initialiseWalletConnect, qrCode.data, WalletConnectPairingOrigin.Scan)
     return

package/src/send/EnterAmount.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Keyboard, TextInput as RNTextInput, StyleSheet, Text } from 'react-native'
 import { View } from 'react-native-animatable'
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
+import Svg, { Path } from 'react-native-svg'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { SendEvents } from 'src/analytics/Events'
 import BackButton from 'src/components/BackButton'
@@ -29,8 +30,8 @@ import { getLocalCurrencySymbol } from 'src/localCurrency/selectors'
 import { useSelector } from 'src/redux/hooks'
 import EnterAmountOptions from 'src/send/EnterAmountOptions'
 import { AmountEnteredIn } from 'src/send/types'
-import { typeScale } from 'src/styles/fonts'
 import Colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
 import { feeCurrenciesSelector } from 'src/tokens/selectors'
 import { TokenBalance } from 'src/tokens/slice'
@@ -258,7 +259,7 @@ export default function EnterAmount({
 
           {!!recipientSlot && (
             <>
-              <View style={styles.connectorLine} />
+              <ConnectorArrow />
               {recipientSlot}
             </>
           )}
@@ -367,6 +368,20 @@ export default function EnterAmount({
   )
 }
 
+function ConnectorArrow() {
+  return (
+    <Svg width={12} height={16} viewBox="0 0 12 16" fill="none" style={styles.connector}>
+      <Path
+        d="M6 0 V13 M2 9 L6 13 L10 9"
+        stroke={Colors.borderPrimary}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  )
+}
+
 const styles = StyleSheet.create({
   safeAreaContainer: {
     flex: 1,
@@ -394,10 +409,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: Spacing.Regular16,
     borderRadius: 16,
   },
-  connectorLine: {
-    width: 2,
-    height: 12,
-    backgroundColor: Colors.borderPrimary,
+  connector: {
     alignSelf: 'center',
     marginVertical: Spacing.Tiny4,
   },

package/src/walletConnect/saga.test.ts

@@ -36,6 +36,8 @@ import {
   handlePendingState,
   initialiseWalletConnect,
   initialiseWalletConnectV2,
+  isWalletConnectEnabled,
+  isWalletConnectV2Uri,
   normalizeTransactions,
   walletConnectSaga,
 } from 'src/walletConnect/saga'
@@ -1046,6 +1048,63 @@ describe('showActionRequest', () => {
 const v2ConnectionString =
   'wc:79a02f869d0f921e435a5e0643304548ebfa4a0430f9c66fe8b1a9254db7ef77@2?relay-protocol=irn&symKey=f661b0a9316a4ce0b6892bdce42bea0f45037f2c1bee9e118a3a4bc868a32a39'
 
+describe('isWalletConnectV2Uri', () => {
+  it('returns true for a v2 wc: URI', () => {
+    expect(isWalletConnectV2Uri(v2ConnectionString)).toBe(true)
+  })
+
+  it('returns false for any string that is not a wc: pairing URI', () => {
+    // parseUri is meant for wc: URIs only; passing anything else would force it
+    // down its base64 link-mode fallback, which can throw on RN's strict native
+    // base64 decoder. The startsWith('wc:') guard keeps non-WC strings out.
+    expect(isWalletConnectV2Uri('https://churrito.fi')).toBe(false)
+    expect(isWalletConnectV2Uri('testapp://wallet/wc?uri=wc:abc@2')).toBe(false)
+    expect(isWalletConnectV2Uri('')).toBe(false)
+  })
+
+  it('returns false for a v1 wc: URI', () => {
+    expect(isWalletConnectV2Uri('wc:abc@1?bridge=https%3A%2F%2Fbridge.walletconnect.org')).toBe(
+      false
+    )
+  })
+})
+
+describe('isWalletConnectEnabled', () => {
+  it('returns true when project id is set and v2 is not disabled', () => {
+    jest.mocked(getAppConfig).mockReturnValue({
+      displayName: 'Test App',
+      deepLinkUrlScheme: 'testapp',
+      registryName: 'test',
+      features: { walletConnect: { projectId: '123' } },
+    })
+    jest.mocked(getFeatureGate).mockReturnValue(false)
+    expect(isWalletConnectEnabled()).toBe(true)
+  })
+
+  it('returns false when project id is missing', () => {
+    jest.mocked(getAppConfig).mockReturnValue({
+      displayName: 'Test App',
+      deepLinkUrlScheme: 'testapp',
+      registryName: 'test',
+    })
+    jest.mocked(getFeatureGate).mockReturnValue(false)
+    expect(isWalletConnectEnabled()).toBe(false)
+  })
+
+  it('returns false when v2 is feature-gated off', () => {
+    jest.mocked(getAppConfig).mockReturnValue({
+      displayName: 'Test App',
+      deepLinkUrlScheme: 'testapp',
+      registryName: 'test',
+      features: { walletConnect: { projectId: '123' } },
+    })
+    jest
+      .mocked(getFeatureGate)
+      .mockImplementation((gate) => gate === StatsigFeatureGates.DISABLE_WALLET_CONNECT_V2)
+    expect(isWalletConnectEnabled()).toBe(false)
+  })
+})
+
 describe('initialiseWalletConnect', () => {
   const origin = WalletConnectPairingOrigin.Deeplink
   it('initializes v2 if enabled and there is a wallet connect project id', async () => {

package/src/walletConnect/saga.ts

@@ -1123,31 +1123,29 @@ export function* initialiseWalletConnectV2(uri: string, origin: WalletConnectPai
   yield* put(initialisePairing(uri, origin))
 }
 
-export function isWalletConnectEnabled(uri: string) {
-  const { version } = parseUri(uri)
+export function isWalletConnectV2Uri(uri: string): boolean {
+  if (!uri.startsWith('wc:')) {
+    return false
+  }
+  return parseUri(uri).version === 2
+}
+
+export function isWalletConnectEnabled(): boolean {
   const walletConnectV2Disabled = getFeatureGate(StatsigFeatureGates.DISABLE_WALLET_CONNECT_V2)
   const walletConnectProjectId = getAppConfig().features?.walletConnect?.projectId
-
-  return !!walletConnectProjectId && !walletConnectV2Disabled && version === 2
+  return !!walletConnectProjectId && !walletConnectV2Disabled
 }
 
 export function* initialiseWalletConnect(uri: string, origin: WalletConnectPairingOrigin) {
-  const walletConnectEnabled = yield* call(isWalletConnectEnabled, uri)
-
-  const { version } = parseUri(uri)
-  if (!walletConnectEnabled) {
-    Logger.debug('initialiseWalletConnect', `v${version} is disabled, ignoring`)
+  if (!isWalletConnectV2Uri(uri)) {
+    Logger.debug('initialiseWalletConnect', 'URI is not a WalletConnect v2 link, ignoring')
     return
   }
-
-  switch (version) {
-    case 2:
-      yield* call(initialiseWalletConnectV2, uri, origin)
-      break
-    case 1:
-    default:
-      throw new Error(`Unsupported WalletConnect version '${version}'`)
+  if (!isWalletConnectEnabled()) {
+    Logger.debug('initialiseWalletConnect', 'WalletConnect is disabled, ignoring')
+    return
   }
+  yield* call(initialiseWalletConnectV2, uri, origin)
 }
 
 export function* showWalletConnectionSuccessMessage(dappName: string) {

package/src/webview/__snapshots__/WebViewAndroidBottomSheet.test.tsx.snap

@@ -7,7 +7,6 @@ exports[`WebViewAndroidBottomSheet renders correctly when visible 1`] = `
   animationType="none"
   deviceHeight={null}
   deviceWidth={null}
-  hardwareAccelerated={false}
   hideModalContentWhileAnimating={false}
   onBackdropPress={[MockFunction]}
   onModalHide={[Function]}