@reown/appkit-react-native 2.0.0 → 2.0.1

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

@@ -2,11 +2,8 @@ import { useSnapshot } from 'valtio';
 import { memo, useState } from 'react';
 import { SvgUri } from 'react-native-svg';
 import { FlexView, ListItem, Text, useTheme, Icon, Image } from '@reown/appkit-ui-react-native';
-import {
-  OnRampController,
-  type OnRampCountry,
-  type OnRampFiatCurrency
-} from '@reown/appkit-core-react-native';
+import { OnRampController } from '@reown/appkit-core-react-native';
+import { type OnRampCountry, type OnRampFiatCurrency } from '@reown/appkit-common-react-native';
 
 import { SelectorModal } from '../../partials/w3m-selector-modal';
 import { Country } from './components/Country';
@@ -16,7 +13,9 @@ import {
   getItemHeight,
   getModalItems,
   getModalItemKey,
-  getModalSearchPlaceholder
+  getModalSearchPlaceholder,
+  getModalEmptyTitle,
+  getModalEmptyDescription
 } from './utils';
 import { styles } from './styles';
 
@@ -31,6 +30,11 @@ export function OnRampSettingsView() {
   const [modalType, setModalType] = useState<ModalType>();
   const [searchValue, setSearchValue] = useState('');
 
+  const onModalClose = () => {
+    setModalType(undefined);
+    setSearchValue('');
+  };
+
   const onCountryPress = () => {
     setModalType('country');
   };
@@ -58,6 +62,8 @@ export function OnRampSettingsView() {
           item={parsedItem}
           onPress={onPressModalItem}
           selected={parsedItem.countryCode === selectedCountry?.countryCode}
+          style={styles.selectorItem}
+          testID={`country-item-${parsedItem.countryCode}`}
         />
       );
     }
@@ -71,18 +77,19 @@ export function OnRampSettingsView() {
         selected={parsedItem.currencyCode === paymentCurrency?.currencyCode}
         title={parsedItem.name}
         subtitle={parsedItem.currencyCode}
+        style={styles.selectorItem}
       />
     );
   };
 
   return (
     <>
-      <FlexView style={{ backgroundColor: Theme['bg-100'] }} padding={['s', 'm', '4xl', 'm']}>
+      <FlexView style={{ backgroundColor: Theme['bg-100'] }} padding={['s', 'm', 's', 'm']}>
         <ListItem
           onPress={onCountryPress}
           chevron
           style={styles.firstItem}
-          contentStyle={styles.itemContent}
+          contentStyle={styles.listItem}
         >
           <FlexView
             alignItems="center"
@@ -97,14 +104,14 @@ export function OnRampSettingsView() {
           </FlexView>
           <FlexView>
             <Text color="fg-100">Select Country</Text>
-            {selectedCountry?.name && (
+            {selectedCountry?.name ? (
               <Text variant="small-400" color="fg-200">
                 {selectedCountry?.name}
               </Text>
-            )}
+            ) : null}
           </FlexView>
         </ListItem>
-        <ListItem onPress={onPaymentCurrencyPress} chevron contentStyle={styles.itemContent}>
+        <ListItem onPress={onPaymentCurrencyPress} chevron contentStyle={styles.listItem}>
           <FlexView
             alignItems="center"
             justifyContent="center"
@@ -120,17 +127,17 @@ export function OnRampSettingsView() {
           </FlexView>
           <FlexView>
             <Text color="fg-100">Select Currency</Text>
-            {paymentCurrency?.name && (
+            {paymentCurrency?.name ? (
               <Text variant="small-400" color="fg-200">
                 {paymentCurrency?.name}
               </Text>
-            )}
+            ) : null}
           </FlexView>
         </ListItem>
       </FlexView>
       <SelectorModal
         visible={!!modalType}
-        onClose={() => setModalType(undefined)}
+        onClose={onModalClose}
         items={getModalItems(modalType, searchValue, true)}
         selectedItem={modalType === 'country' ? selectedCountry : paymentCurrency}
         onSearch={setSearchValue}
@@ -139,6 +146,8 @@ export function OnRampSettingsView() {
         title={getModalTitle(modalType)}
         itemHeight={getItemHeight(modalType)}
         searchPlaceholder={getModalSearchPlaceholder(modalType)}
+        emptyTitle={getModalEmptyTitle(modalType)}
+        emptyDescription={getModalEmptyDescription(modalType)}
       />
     </>
   );

package/src/views/w3m-onramp-settings-view/styles.ts

@@ -2,7 +2,7 @@ import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
-  itemContent: {
+  listItem: {
     paddingLeft: 0
   },
   firstItem: {
@@ -21,5 +21,8 @@ export const styles = StyleSheet.create({
   imageBorder: {
     borderRadius: BorderRadius.full,
     overflow: 'hidden'
+  },
+  selectorItem: {
+    paddingHorizontal: Spacing.m
   }
 });

package/src/views/w3m-onramp-settings-view/utils.ts

@@ -1,10 +1,7 @@
 import { ITEM_HEIGHT as COUNTRY_ITEM_HEIGHT } from './components/Country';
 import { ITEM_HEIGHT as CURRENCY_ITEM_HEIGHT } from '../w3m-onramp-view/components/Currency';
-import {
-  OnRampController,
-  type OnRampCountry,
-  type OnRampFiatCurrency
-} from '@reown/appkit-core-react-native';
+import { OnRampController } from '@reown/appkit-core-react-native';
+import { type OnRampCountry, type OnRampFiatCurrency } from '@reown/appkit-common-react-native';
 
 // -------------------------- Types --------------------------
 type ModalType = 'country' | 'paymentCurrency';
@@ -20,6 +17,16 @@ const MODAL_SEARCH_PLACEHOLDERS: Record<ModalType, string> = {
   paymentCurrency: 'Search currency'
 };
 
+const MODAL_EMPTY_TITLES: Record<ModalType, string> = {
+  country: 'No countries found',
+  paymentCurrency: 'No currencies found'
+};
+
+const MODAL_EMPTY_DESCRIPTIONS: Record<ModalType, string> = {
+  country: 'There are no available countries',
+  paymentCurrency: 'There are no available currencies'
+};
+
 const ITEM_HEIGHTS: Record<ModalType, number> = {
   country: COUNTRY_ITEM_HEIGHT,
   paymentCurrency: CURRENCY_ITEM_HEIGHT
@@ -43,6 +50,14 @@ export const getModalSearchPlaceholder = (type?: ModalType) => {
   return type ? MODAL_SEARCH_PLACEHOLDERS[type] : undefined;
 };
 
+export const getModalEmptyTitle = (type?: ModalType) => {
+  return type ? MODAL_EMPTY_TITLES[type] : undefined;
+};
+
+export const getModalEmptyDescription = (type?: ModalType) => {
+  return type ? MODAL_EMPTY_DESCRIPTIONS[type] : undefined;
+};
+
 const searchFilter = (
   item: { name: string; currencyCode?: string; countryCode?: string },
   searchValue: string

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

@@ -1,8 +1,7 @@
 import { useSnapshot } from 'valtio';
 import { useEffect } from 'react';
 import {
-  AccountController,
-  ConnectorController,
+  ConnectionsController,
   OnRampController,
   RouterController
 } from '@reown/appkit-core-react-native';
@@ -15,7 +14,7 @@ export function OnRampTransactionView() {
   const { data } = useSnapshot(RouterController.state);
 
   const onClose = () => {
-    const isAuth = ConnectorController.state.connectedConnector === 'AUTH';
+    const isAuth = !!ConnectionsController.state.connection?.properties?.provider;
     RouterController.replace(isAuth ? 'Account' : 'AccountDefault');
   };
 
@@ -25,12 +24,12 @@ export function OnRampTransactionView() {
   useEffect(() => {
     return () => {
       OnRampController.resetState();
-      AccountController.fetchTokenBalance();
+      ConnectionsController.fetchBalance();
     };
   }, []);
 
   return (
-    <FlexView padding={['3xs', 'l', '4xl', 'l']}>
+    <FlexView padding={['3xs', 'l', 's', 'l']}>
       <FlexView>
         <FlexView alignItems="center">
           <IconBox
@@ -77,15 +76,15 @@ export function OnRampTransactionView() {
                 {data?.onrampResult?.purchaseAmount}{' '}
                 {data?.onrampResult?.purchaseCurrency?.split('_')[0] ?? ''}
               </Text>
-              {data?.onrampResult?.purchaseImageUrl && (
+              {data?.onrampResult?.purchaseImageUrl ? (
                 <Image
                   source={data?.onrampResult?.purchaseImageUrl}
                   style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
                 />
-              )}
+              ) : null}
             </FlexView>
           </FlexView>
-          {showNetwork && (
+          {showNetwork ? (
             <FlexView
               flexDirection="row"
               alignItems="center"
@@ -99,8 +98,8 @@ export function OnRampTransactionView() {
                 {StringUtil.capitalize(data?.onrampResult?.network)}
               </Text>
             </FlexView>
-          )}
-          {showStatus && (
+          ) : null}
+          {showStatus ? (
             <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
               <Text variant="paragraph-400" color="fg-150">
                 Status
@@ -109,7 +108,7 @@ export function OnRampTransactionView() {
                 {StringUtil.capitalize(data?.onrampResult?.status)}
               </Text>
             </FlexView>
-          )}
+          ) : null}
         </FlexView>
       </FlexView>
       <Button variant="fill" size="md" onPress={onClose}>

package/src/views/w3m-onramp-view/components/Currency.tsx

@@ -1,7 +1,7 @@
 import {
   type OnRampFiatCurrency,
   type OnRampCryptoCurrency
-} from '@reown/appkit-core-react-native';
+} from '@reown/appkit-common-react-native';
 import {
   Pressable,
   FlexView,
@@ -9,10 +9,9 @@ import {
   Text,
   useTheme,
   Icon,
-  Image,
   BorderRadius
 } from '@reown/appkit-ui-react-native';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Image, type StyleProp, type ViewStyle } from 'react-native';
 
 export const ITEM_HEIGHT = 60;
 
@@ -23,9 +22,10 @@ interface Props {
   title: string;
   subtitle: string;
   testID?: string;
+  style?: StyleProp<ViewStyle>;
 }
 
-export function Currency({ onPress, item, selected, title, subtitle, testID }: Props) {
+export function Currency({ onPress, item, selected, title, subtitle, testID, style }: Props) {
   const Theme = useTheme();
 
   const handlePress = () => {
@@ -35,15 +35,15 @@ export function Currency({ onPress, item, selected, title, subtitle, testID }: P
   return (
     <Pressable
       onPress={handlePress}
-      style={styles.container}
+      style={[styles.container, style]}
       backgroundColor="transparent"
       testID={testID}
     >
       <FlexView flexDirection="row" alignItems="center" justifyContent="space-between" padding="xs">
         <FlexView flexDirection="row" alignItems="center" justifyContent="flex-start">
           <Image
-            source={item.symbolImageUrl}
-            style={[styles.logo, { backgroundColor: Theme['fg-100'] }]}
+            source={{ uri: item.symbolImageUrl }}
+            style={[styles.logo, { backgroundColor: Theme['inverse-100'] }]}
           />
           <FlexView>
             <Text variant="paragraph-500" color="fg-100" numberOfLines={1} ellipsizeMode="tail">
@@ -54,9 +54,9 @@ export function Currency({ onPress, item, selected, title, subtitle, testID }: P
             </Text>
           </FlexView>
         </FlexView>
-        {selected && (
+        {selected ? (
           <Icon name="checkmark" size="md" color="accent-100" style={styles.checkmark} />
-        )}
+        ) : null}
       </FlexView>
     </Pressable>
   );

package/src/views/w3m-onramp-view/components/CurrencyInput.tsx

@@ -10,8 +10,7 @@ import {
   Spacing,
   BorderRadius
 } from '@reown/appkit-ui-react-native';
-import { useEffect, useState } from 'react';
-import { useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 export interface InputTokenProps {
   style?: StyleProp<ViewStyle>;
@@ -91,7 +90,11 @@ export function CurrencyInput({
       <FlexView alignItems="center" margin={['m', '0', '0', '0']}>
         <FlexView flexDirection="row" alignItems="center">
           <Text style={[styles.input, { color: Theme[amountColor] }]}>{displayValue}</Text>
-          <Text variant="large-400" color={isAmountError ? 'error-100' : 'fg-200'}>
+          <Text
+            variant="large-400"
+            color={isAmountError ? 'error-100' : 'fg-200'}
+            testID="currency-input-symbol"
+          >
             {symbol || ''}
           </Text>
         </FlexView>
@@ -114,32 +117,34 @@ export function CurrencyInput({
           )}
         </FlexView>
       </FlexView>
-      <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
-        {suggestedValues?.map((suggestion: number) => {
-          const isSelected = suggestion.toString() === value;
+      {suggestedValues && suggestedValues.length > 0 ? (
+        <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
+          {suggestedValues?.map((suggestion: number) => {
+            const isSelected = suggestion.toString() === value;
 
-          return (
-            <Button
-              key={suggestion}
-              testID={`suggested-value-${suggestion}`}
-              style={[
-                styles.suggestedValue,
-                isSelected && {
-                  ...styles.selectedValue,
-                  backgroundColor: Theme['accent-glass-020'],
-                  borderColor: Theme['accent-100']
-                }
-              ]}
-              variant="shade"
-              onPress={() => onSuggestedValuePress?.(suggestion)}
-            >
-              <Text variant="small-400" color="fg-100">
-                {`${suggestion} ${symbol ?? ''}`}
-              </Text>
-            </Button>
-          );
-        })}
-      </FlexView>
+            return (
+              <Button
+                key={suggestion}
+                testID={`suggested-value-${suggestion}`}
+                style={[
+                  styles.suggestedValue,
+                  isSelected && {
+                    ...styles.selectedValue,
+                    backgroundColor: Theme['accent-glass-020'],
+                    borderColor: Theme['accent-100']
+                  }
+                ]}
+                variant="shade"
+                onPress={() => onSuggestedValuePress?.(suggestion)}
+              >
+                <Text variant="small-400" color="fg-100">
+                  {`${suggestion} ${symbol ?? ''}`}
+                </Text>
+              </Button>
+            );
+          })}
+        </FlexView>
+      ) : null}
       <Separator color="gray-glass-020" style={styles.separator} />
       <NumericKeyboard onKeyPress={handleKeyPress} />
     </FlexView>

package/src/views/w3m-onramp-view/components/Header.tsx

@@ -1,19 +1,16 @@
 import { StyleSheet } from 'react-native';
-import { ModalController, RouterController } from '@reown/appkit-core-react-native';
-import { IconLink, Text } from '@reown/appkit-ui-react-native';
-import { FlexView } from '@reown/appkit-ui-react-native';
+import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
+import { useInternalAppKit } from '../../../AppKitContext';
 
 interface HeaderProps {
   onSettingsPress: () => void;
 }
 
 export function Header({ onSettingsPress }: HeaderProps) {
+  const { back } = useInternalAppKit();
+
   const handleGoBack = () => {
-    if (RouterController.state.history.length > 1) {
-      RouterController.goBack();
-    } else {
-      ModalController.close();
-    }
+    back();
   };
 
   return (
@@ -26,7 +23,7 @@ export function Header({ onSettingsPress }: HeaderProps) {
         style={styles.icon}
       />
       <Text variant="paragraph-600" numberOfLines={1} testID="header-text">
-        Buy crypto
+        Buy Crypto
       </Text>
       <IconLink
         icon="settings"

package/src/views/w3m-onramp-view/components/LoadingView.tsx

@@ -10,7 +10,7 @@ export function LoadingView() {
     <>
       <Header onSettingsPress={() => {}} />
       <ScrollView bounces={false} testID="onramp-loading-view">
-        <FlexView padding={['s', 'l', '4xl', 'l']}>
+        <FlexView padding={['s', 'l', 's', 'l']}>
           <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
             <Text variant="small-400" color="fg-150">
               You Buy
@@ -20,11 +20,11 @@ export function LoadingView() {
 
           {/* Currency Input Area */}
           <FlexView margin={['m', '0', 'm', '0']}>
-            <Shimmer width="100%" height={370} borderRadius={16} />
+            <Shimmer width="100%" height={323} borderRadius={16} />
           </FlexView>
 
           {/* Payment Method Button */}
-          <Shimmer width="100%" height={64} borderRadius={16} style={styles.paymentMethodButton} />
+          <Shimmer width="100%" height={64} borderRadius={16} style={styles.paymentButtonMock} />
 
           {/* Action Buttons */}
           <FlexView

package/src/views/w3m-onramp-view/components/PaymentButton.tsx

@@ -0,0 +1,137 @@
+import {
+  BorderRadius,
+  FlexView,
+  Icon,
+  Image,
+  LoadingSpinner,
+  Pressable,
+  Spacing,
+  Text,
+  useTheme
+} from '@reown/appkit-ui-react-native';
+import { StyleSheet, View } from 'react-native';
+
+interface PaymentButtonProps {
+  disabled?: boolean;
+  loading?: boolean;
+  title: string;
+  subtitle?: string;
+  paymentLogo?: string;
+  providerLogo?: string;
+  onPress: () => void;
+  testID?: string;
+}
+
+function PaymentButton({
+  disabled,
+  loading,
+  title,
+  subtitle,
+  paymentLogo,
+  providerLogo,
+  onPress,
+  testID
+}: PaymentButtonProps) {
+  const Theme = useTheme();
+  const backgroundColor = Theme['gray-glass-005'];
+
+  return (
+    <Pressable
+      disabled={disabled || loading}
+      onPress={onPress}
+      style={styles.pressable}
+      testID={testID}
+    >
+      <FlexView
+        style={[styles.container, { backgroundColor }]}
+        alignItems="center"
+        justifyContent="space-between"
+        flexDirection="row"
+      >
+        <FlexView
+          alignItems="center"
+          justifyContent="center"
+          style={[styles.iconContainer, { backgroundColor: Theme['bg-300'] }]}
+        >
+          {paymentLogo ? (
+            <Image
+              source={paymentLogo}
+              style={styles.paymentLogo}
+              resizeMethod="resize"
+              resizeMode="contain"
+            />
+          ) : (
+            <Icon name="card" size="lg" />
+          )}
+        </FlexView>
+        <FlexView
+          flexGrow={1}
+          flexDirection="column"
+          alignItems="flex-start"
+          margin={['0', '0', '0', 's']}
+        >
+          <Text variant="paragraph-400" color="fg-100">
+            {title}
+          </Text>
+          {subtitle ? (
+            <FlexView flexDirection="row" alignItems="center" margin={['4xs', '0', '0', '0']}>
+              {providerLogo ? (
+                <>
+                  <Text variant="small-400" color="fg-150">
+                    via
+                  </Text>
+                  <Image
+                    source={providerLogo}
+                    style={styles.providerLogo}
+                    resizeMethod="resize"
+                    resizeMode="contain"
+                  />
+                </>
+              ) : null}
+              <Text variant="small-400" color="fg-150">
+                {subtitle}
+              </Text>
+            </FlexView>
+          ) : null}
+        </FlexView>
+        {loading ? (
+          <LoadingSpinner size="md" color="fg-200" style={styles.rightIcon} />
+        ) : disabled ? (
+          <View />
+        ) : (
+          <Icon name="chevronRight" size="md" color="fg-200" style={styles.rightIcon} />
+        )}
+      </FlexView>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  pressable: {
+    borderRadius: BorderRadius.xs
+  },
+  container: {
+    padding: Spacing.s,
+    borderRadius: BorderRadius.xs
+  },
+  iconContainer: {
+    height: 40,
+    width: 40,
+    borderRadius: BorderRadius['3xs']
+  },
+  paymentLogo: {
+    height: 24,
+    width: 24
+  },
+  providerLogo: {
+    height: 16,
+    width: 16,
+    marginHorizontal: Spacing['4xs'],
+    borderRadius: BorderRadius['5xs']
+  },
+  rightIcon: {
+    marginRight: Spacing.xs
+  }
+});
+
+export default PaymentButton;

package/src/views/w3m-onramp-view/components/PaymentMethod.tsx

@@ -1,5 +1,6 @@
 import { useSnapshot } from 'valtio';
-import { ThemeController, type OnRampPaymentMethod } from '@reown/appkit-core-react-native';
+import { ThemeController } from '@reown/appkit-core-react-native';
+import { type OnRampPaymentMethod } from '@reown/appkit-common-react-native';
 import {
   Pressable,
   FlexView,
@@ -12,7 +13,7 @@ import {
 } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
-export const ITEM_SIZE = 85;
+export const ITEM_SIZE = 100;
 
 interface Props {
   onPress: (item: OnRampPaymentMethod) => void;
@@ -47,9 +48,9 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
           source={item.logos[themeMode ?? 'light']}
           style={styles.logo}
           resizeMethod="resize"
-          resizeMode="center"
+          resizeMode="contain"
         />
-        {selected && (
+        {selected ? (
           <IconBox
             icon="checkmark"
             size="sm"
@@ -59,9 +60,9 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
             style={styles.checkmark}
             testID="payment-method-checkmark"
           />
-        )}
+        ) : null}
       </FlexView>
-      <Text variant="tiny-400" color="fg-100" numberOfLines={1} style={styles.text}>
+      <Text variant="tiny-400" color="fg-100" numberOfLines={2} style={styles.text}>
         {item.name}
       </Text>
     </Pressable>
@@ -71,8 +72,7 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
 const styles = StyleSheet.create({
   container: {
     height: ITEM_SIZE,
-    width: ITEM_SIZE,
-    justifyContent: 'center',
+    width: 85,
     alignItems: 'center'
   },
   logoContainer: {
@@ -82,8 +82,8 @@ const styles = StyleSheet.create({
     marginBottom: Spacing['4xs']
   },
   logo: {
-    width: 22,
-    height: 22
+    width: 26,
+    height: 26
   },
   checkmark: {
     borderRadius: BorderRadius.full,
@@ -92,6 +92,8 @@ const styles = StyleSheet.create({
     right: -10
   },
   text: {
-    marginTop: Spacing.xs
+    marginTop: Spacing.xs,
+    paddingHorizontal: Spacing['3xs'],
+    textAlign: 'center'
   }
 });