@reown/appkit-react-native 2.0.1 → 2.0.3

package/src/modal/w3m-modal/index.tsx

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, type ComponentType, type ReactNode } from 'react';
 import { useColorScheme } from 'react-native';
 import { Card, Modal, ThemeProvider } from '@reown/appkit-ui-react-native';
 import {
@@ -18,12 +18,22 @@ import { Snackbar } from '../../partials/w3m-snackbar';
 import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
-export function AppKit() {
+export interface AppKitModalContentWrapperProps {
+  children: ReactNode;
+}
+
+export type AppKitModalContentWrapperComponent = ComponentType<AppKitModalContentWrapperProps>;
+
+export interface AppKitProps {
+  modalContentWrapper?: AppKitModalContentWrapperComponent;
+}
+
+export function AppKit({ modalContentWrapper }: AppKitProps) {
   const theme = useColorScheme();
   const { bottom, top } = useSafeAreaInsets();
   const { close } = useInternalAppKit();
   const { open } = useSnapshot(ModalController.state);
-  const { themeMode, themeVariables, defaultThemeMode } = useSnapshot(ThemeController.state);
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
   const { projectId } = useSnapshot(OptionsController.state);
 
   const handleBackPress = () => {
@@ -35,10 +45,8 @@ export function AppKit() {
   };
 
   useEffect(() => {
-    if (theme && !defaultThemeMode) {
-      ThemeController.setThemeMode(theme);
-    }
-  }, [theme, defaultThemeMode]);
+    ThemeController.setSystemThemeMode(theme ?? undefined);
+  }, [theme]);
 
   const prefetch = useCallback(async () => {
     await ApiController.prefetch();
@@ -62,6 +70,7 @@ export function AppKit() {
         onRequestClose={handleBackPress}
         onBackdropPress={handleModalClose}
         testID="w3m-modal"
+        contentWrapper={modalContentWrapper}
       >
         <Card style={[styles.card, { paddingBottom: bottom, marginTop: top }]}>
           <Header />

package/src/modal/w3m-modal/styles.ts

@@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   card: {
     borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0
+    borderBottomRightRadius: 0,
+    borderWidth: 0
   }
 });

package/src/partials/w3m-connecting-body/index.tsx

@@ -11,7 +11,9 @@ export interface ConnectingBodyProps {
 export function ConnectingBody({ title, description }: ConnectingBodyProps) {
   return (
     <FlexView padding={['3xs', '2xl', '0', '2xl']} alignItems="center" style={styles.textContainer}>
-      <Text variant="paragraph-500">{title}</Text>
+      <Text center numberOfLines={1} variant="paragraph-500">
+        {title}
+      </Text>
       {description ? (
         <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
           {description}

package/src/partials/w3m-connecting-mobile/components/StoreLink.tsx

@@ -12,7 +12,7 @@ export function StoreLink({ visible, walletName = 'Wallet', onPress }: StoreLink
 
   return (
     <ActionEntry style={styles.storeButton}>
-      <Text numberOfLines={1} variant="paragraph-500" color="fg-200">
+      <Text numberOfLines={1} style={styles.storeText} variant="paragraph-500" color="fg-200">
         {`Don't have ${walletName}?`}
       </Text>
       <Button
@@ -34,5 +34,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: Spacing.l,
     marginHorizontal: Spacing.xl,
     marginTop: Spacing.l
+  },
+  storeText: {
+    flexShrink: 1
   }
 });

package/src/partials/w3m-connecting-qrcode/index.tsx

@@ -20,6 +20,9 @@ import styles from './styles';
 import { ReownButton } from './components/ReownButton';
 import { useWindowDimensions } from 'react-native';
 
+const LOGO_SIZE = 60;
+const LOGO_BORDER_RADIUS = 10;
+
 export function ConnectingQrCode() {
   const { height, width } = useWindowDimensions();
   const windowSize = Math.min(height, width);
@@ -65,7 +68,13 @@ export function ConnectingQrCode() {
       flexDirection={isPortrait ? 'column' : 'row'}
       padding={['xl', 'xl', 'xs', 'xl']}
     >
-      <QrCode size={qrSize} uri={wcUri} testID="qr-code" />
+      <QrCode
+        size={qrSize}
+        uri={wcUri}
+        testID="qr-code"
+        logoBorderRadius={LOGO_BORDER_RADIUS}
+        logoSize={LOGO_SIZE}
+      />
       <FlexView alignItems="center" margin="m">
         <Text variant="paragraph-500">Scan this QR code with your phone</Text>
         {showCopy ? (

package/src/partials/w3m-header/index.tsx

@@ -100,7 +100,12 @@ export function Header() {
       padding={['l', 'xl', bottomPadding, 'xl']}
     >
       {dynamicButtonTemplate()}
-      <Text variant="paragraph-600" numberOfLines={1} testID="header-text">
+      <Text
+        variant="paragraph-600"
+        numberOfLines={1}
+        style={styles.headerText}
+        testID="header-text"
+      >
         {header}
       </Text>
       {showClose ? (

package/src/partials/w3m-header/styles.ts

@@ -4,5 +4,8 @@ export default StyleSheet.create({
   iconPlaceholder: {
     height: 32,
     width: 32
+  },
+  headerText: {
+    flexShrink: 1
   }
 });

package/src/partials/w3m-send-input-token/index.tsx

@@ -20,6 +20,7 @@ export interface SendInputTokenProps {
   style?: StyleProp<ViewStyle>;
   onTokenPress?: () => void;
   loading?: boolean;
+  testID?: string;
 }
 
 export function SendInputToken({
@@ -27,7 +28,8 @@ export function SendInputToken({
   sendTokenAmount,
   style,
   onTokenPress,
-  loading
+  loading,
+  testID
 }: SendInputTokenProps) {
   const Theme = useTheme();
   const valueInputRef = useRef<TextInput | null>(null);
@@ -86,12 +88,14 @@ export function SendInputToken({
           selectTextOnFocus={false}
           numberOfLines={1}
           autoFocus={!!token}
+          testID={testID}
         />
         <TokenButton
           imageUrl={token?.iconUrl}
           text={token?.symbol}
           onPress={onTokenPress}
           chevron
+          testID={testID ? `${testID}-button` : undefined}
         />
       </FlexView>
       {token ? (

package/src/partials/w3m-swap-input/index.tsx

@@ -28,6 +28,7 @@ export interface SwapInputProps {
   marketValue?: number;
   editable?: boolean;
   autoFocus?: boolean;
+  testID?: string;
 }
 
 const MINIMUM_USD_VALUE_TO_CONVERT = 0.00005;
@@ -43,7 +44,8 @@ export function SwapInput({
   onChange,
   marketValue,
   editable,
-  autoFocus
+  autoFocus,
+  testID
 }: SwapInputProps) {
   const Theme = useTheme();
   const valueInputRef = useRef<TextInput | null>(null);
@@ -118,6 +120,7 @@ export function SwapInput({
                 numberOfLines={1}
                 editable={editable}
                 autoFocus={autoFocus}
+                testID={testID}
               />
             )}
             <TokenButton
@@ -125,6 +128,7 @@ export function SwapInput({
               imageUrl={token?.logoUri}
               onPress={onTokenPress}
               chevron
+              testID={testID ? `${testID}-button` : undefined}
             />
           </FlexView>
           {loadingValues ? (

package/src/views/w3m-account-default-view/index.tsx

@@ -186,7 +186,12 @@ export function AccountDefaultView() {
   return (
     <>
       {showBack ? (
-        <IconLink icon="chevronLeft" style={styles.backIcon} onPress={RouterController.goBack} />
+        <IconLink
+          icon="chevronLeft"
+          style={styles.backIcon}
+          onPress={RouterController.goBack}
+          testID="header-back"
+        />
       ) : null}
       <IconLink
         icon="close"

package/src/views/w3m-connecting-external-view/index.tsx

@@ -26,6 +26,7 @@ import styles from './styles';
 import { useInternalAppKit } from '../../AppKitContext';
 import { StoreLink } from '../../partials/w3m-connecting-mobile/components/StoreLink';
 import { WcHelpersUtil } from '../../utils/HelpersUtil';
+import { ErrorUtil } from '@reown/appkit-common-react-native';
 
 export function ConnectingExternalView() {
   const { data } = useSnapshot(RouterController.state);
@@ -94,16 +95,11 @@ export function ConnectingExternalView() {
       }
     } catch (error) {
       LogController.sendError(error, 'ConnectingExternalView.tsx', 'onConnect');
-      if (/(Wallet not found)/i.test((error as Error).message)) {
-        setErrorType('not_installed');
-      } else if (/(rejected)/i.test((error as Error).message)) {
-        setErrorType('declined');
-      } else {
-        setErrorType('default');
-      }
+      const type = ErrorUtil.categorizeConnectionError(error);
+      setErrorType(type);
       EventsController.sendEvent({
         type: 'track',
-        event: 'CONNECT_ERROR',
+        event: type === 'declined' ? 'USER_REJECTED' : 'CONNECT_ERROR',
         properties: { message: (error as Error)?.message ?? 'Unknown' }
       });
     }

package/src/views/w3m-connecting-view/index.tsx

@@ -1,6 +1,6 @@
 import { useSnapshot } from 'valtio';
-import { useEffect, useLayoutEffect, useState } from 'react';
-import { type Platform } from '@reown/appkit-common-react-native';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { ErrorUtil, type Platform } from '@reown/appkit-common-react-native';
 import {
   WcController,
   ConstantsUtil,
@@ -22,7 +22,7 @@ export function ConnectingView() {
   const { connect } = useInternalAppKit();
   const { installed } = useSnapshot(ApiController.state);
   const { data } = RouterController.state;
-  const [lastRetry, setLastRetry] = useState(Date.now());
+  const lastRetryRef = useRef<number>(Date.now());
   const isQr = !data?.wallet;
   const isInstalled = !!installed?.find(wallet => wallet.id === data?.wallet?.id);
 
@@ -30,9 +30,8 @@ export function ConnectingView() {
   const [platforms, setPlatforms] = useState<Platform[]>([]);
 
   const onRetry = () => {
-    if (CoreHelperUtil.isAllowedRetry(lastRetry)) {
-      setLastRetry(Date.now());
-      WcController.clearUri();
+    if (CoreHelperUtil.isAllowedRetry(lastRetryRef.current)) {
+      lastRetryRef.current = Date.now();
       initializeConnection(true);
     } else {
       SnackController.showError('Please wait a second before retrying');
@@ -43,30 +42,41 @@ export function ConnectingView() {
     try {
       const { wcPairingExpiry } = WcController.state;
       const { data: routeData } = RouterController.state;
-      if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
+      const isPairingExpired = CoreHelperUtil.isPairingExpired(wcPairingExpiry);
+      if (retry || isPairingExpired) {
         WcController.setWcError(false);
+        WcController.clearUri();
 
         const connectPromise = connect({
           wallet: routeData?.wallet
         });
         WcController.setWcPromise(connectPromise);
+        await connectPromise;
       }
     } catch (error) {
       LogController.sendError(error, 'ConnectingView.tsx', 'initializeConnection');
       WcController.setWcError(true);
-      WcController.clearUri();
-      SnackController.showError('Declined');
-      if (isQr && CoreHelperUtil.isAllowedRetry(lastRetry)) {
-        setLastRetry(Date.now());
-        initializeConnection(true);
+
+      const isUserRejected = ErrorUtil.isUserRejectedRequestError(error);
+      const isProposalExpired = ErrorUtil.isProposalExpiredError(error);
+      if (!isProposalExpired) {
+        SnackController.showError(
+          isUserRejected ? 'User rejected the request' : 'Something went wrong'
+        );
       }
+
       EventsController.sendEvent({
         type: 'track',
-        event: 'CONNECT_ERROR',
+        event: isUserRejected ? 'USER_REJECTED' : 'CONNECT_ERROR',
         properties: {
           message: (error as Error)?.message ?? 'Unknown'
         }
       });
+
+      if (isQr && CoreHelperUtil.isAllowedRetry(lastRetryRef.current)) {
+        lastRetryRef.current = Date.now();
+        initializeConnection(true);
+      }
     }
   };
 
@@ -95,7 +105,7 @@ export function ConnectingView() {
   }, [data, isInstalled]);
 
   useEffect(() => {
-    initializeConnection();
+    initializeConnection(true);
     let _interval: NodeJS.Timeout;
 
     // Check if the pairing expired every 10 seconds. If expired, it will create a new uri.

package/src/views/w3m-onramp-settings-view/index.tsx

@@ -90,6 +90,7 @@ export function OnRampSettingsView() {
           chevron
           style={styles.firstItem}
           contentStyle={styles.listItem}
+          testID="button-select-country"
         >
           <FlexView
             alignItems="center"
@@ -111,7 +112,12 @@ export function OnRampSettingsView() {
             ) : null}
           </FlexView>
         </ListItem>
-        <ListItem onPress={onPaymentCurrencyPress} chevron contentStyle={styles.listItem}>
+        <ListItem
+          onPress={onPaymentCurrencyPress}
+          chevron
+          contentStyle={styles.listItem}
+          testID="button-select-currency"
+        >
           <FlexView
             alignItems="center"
             justifyContent="center"

package/src/views/w3m-onramp-view/index.tsx

@@ -61,6 +61,7 @@ export function OnRampView() {
   const purchaseCurrencyCode =
     purchaseCurrency?.currencyCode?.split('_')[0] ?? purchaseCurrency?.currencyCode;
   const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
+  const isContinueDisabled = quotesLoading || loading || !selectedQuote;
 
   const getQuotes = useCallback(() => {
     if (OnRampController.canGenerateQuote()) {
@@ -240,8 +241,8 @@ export function OnRampView() {
             <Button
               style={styles.continueButton}
               onPress={handleContinue}
-              disabled={quotesLoading || loading || !selectedQuote}
-              testID="button-continue"
+              disabled={isContinueDisabled}
+              testID={`button-continue${isContinueDisabled ? '-disabled' : '-enabled'}`}
             >
               Continue
             </Button>

package/src/views/w3m-swap-view/components/select-token-modal/index.tsx

@@ -98,7 +98,7 @@ export function SwapSelectTokenModal({ onClose, type, style, visible }: Props) {
           alignItems="center"
           padding={['0', 'm', 'm', 'm']}
         >
-          <IconLink icon="chevronLeft" size="md" onPress={onClose} />
+          <IconLink icon="chevronLeft" size="md" onPress={onClose} testID="button-back" />
           <Text variant="paragraph-600">Select token</Text>
           <View style={styles.iconPlaceholder} />
         </FlexView>

package/src/views/w3m-swap-view/index.tsx

@@ -174,6 +174,7 @@ export function SwapView() {
             onChange={onSourceTokenChange}
             onTokenPress={() => setShowModal('sourceToken')}
             onMaxPress={onSourceMaxPress}
+            testID="swap-input-source"
           />
           <FlexView alignItems="center" justifyContent="center" style={styles.bottomInputContainer}>
             <SwapInput
@@ -186,6 +187,7 @@ export function SwapView() {
               onChange={onToTokenChange}
               onTokenPress={() => setShowModal('toToken')}
               editable={false}
+              testID="swap-input-to"
             />
             {showSwitch ? (
               <IconLink

package/src/views/w3m-wallet-send-view/index.tsx

@@ -92,6 +92,7 @@ export function WalletSendView() {
           style={styles.tokenInput}
           onTokenPress={() => RouterController.push('WalletSendSelectToken')}
           loading={isBalanceLoading}
+          testID="send-input-token"
         />
         <FlexView alignItems="center" justifyContent="center" style={styles.addressContainer}>
           <SendInputAddress value={receiverProfileName || receiverAddress} />