@reown/appkit-react-native 2.0.0-alpha.4 → 2.0.0-alpha.6

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

@@ -15,14 +15,16 @@ import {
   Spacing,
   Text,
   Toggle,
+  useCustomDimensions,
   useTheme
 } from '@reown/appkit-ui-react-native';
-import { StyleSheet } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 import { useSnapshot } from 'valtio';
 import { NumberUtil, StringUtil } from '@reown/appkit-common-react-native';
 
 export function OnRampCheckoutView() {
   const Theme = useTheme();
+  const { padding } = useCustomDimensions();
   const { themeMode } = useSnapshot(ThemeController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const { selectedQuote, selectedPaymentMethod, purchaseCurrency } = useSnapshot(
@@ -49,164 +51,166 @@ export function OnRampCheckoutView() {
   };
 
   return (
-    <FlexView padding={['2xl', 'l', '4xl', 'l']}>
-      <FlexView alignItems="center">
-        <Text color="fg-200">You Buy</Text>
-        <FlexView flexDirection="row" alignItems="center">
-          <Text style={[styles.amount, { color: Theme['fg-100'] }]}>{value}</Text>
-          <Text variant="paragraph-400" color="fg-200">
-            {symbol?.split('_')[0] ?? symbol ?? ''}
-          </Text>
-        </FlexView>
-        <FlexView flexDirection="row" alignItems="center" justifyContent="center">
-          <Text color="fg-200">via </Text>
-          {providerImage ? <Image source={providerImage} style={styles.providerImage} /> : null}
-          <Text color="fg-200">{StringUtil.capitalize(selectedQuote?.serviceProvider)}</Text>
+    <ScrollView style={{ paddingHorizontal: padding }}>
+      <FlexView padding={['2xl', 'l', 's', 'l']}>
+        <FlexView alignItems="center">
+          <Text color="fg-200">You Buy</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text style={[styles.amount, { color: Theme['fg-100'] }]}>{value}</Text>
+            <Text variant="paragraph-400" color="fg-200">
+              {symbol?.split('_')[0] ?? symbol ?? ''}
+            </Text>
+          </FlexView>
+          <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+            <Text color="fg-200">via </Text>
+            {providerImage ? <Image source={providerImage} style={styles.providerImage} /> : null}
+            <Text color="fg-200">{StringUtil.capitalize(selectedQuote?.serviceProvider)}</Text>
+          </FlexView>
         </FlexView>
-      </FlexView>
-      <Separator style={styles.separator} color="gray-glass-010" />
-      <FlexView
-        padding={['s', 's', 'xs', 's']}
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <Text color="fg-200">You Pay</Text>
-        <Text>
-          {selectedQuote?.sourceAmount} {selectedQuote?.sourceCurrencyCode}
-        </Text>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'xs', 's']}
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <Text color="fg-200">You Receive</Text>
-        <FlexView flexDirection="row" alignItems="center">
+        <Separator style={styles.separator} color="gray-glass-010" />
+        <FlexView
+          padding={['s', 's', 'xs', 's']}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Text color="fg-200">You Pay</Text>
           <Text>
-            {value} {symbol?.split('_')[0] ?? ''}
+            {selectedQuote?.sourceAmount} {selectedQuote?.sourceCurrencyCode}
           </Text>
-          {purchaseCurrency?.symbolImageUrl ? (
-            <Image
-              source={purchaseCurrency?.symbolImageUrl}
-              style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
-            />
-          ) : null}
         </FlexView>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'xs', 's']}
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text color="fg-200">Network</Text>
-        <FlexView flexDirection="row" alignItems="center">
-          <Text>{purchaseCurrency?.chainName}</Text>
+        <FlexView
+          padding={['xs', 's', 'xs', 's']}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Text color="fg-200">You Receive</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text>
+              {value} {symbol?.split('_')[0] ?? ''}
+            </Text>
+            {purchaseCurrency?.symbolImageUrl ? (
+              <Image
+                source={purchaseCurrency?.symbolImageUrl}
+                style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
+              />
+            ) : null}
+          </FlexView>
         </FlexView>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'm', 's']}
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text color="fg-200">Pay with</Text>
         <FlexView
+          padding={['xs', 's', 'xs', 's']}
           flexDirection="row"
           alignItems="center"
-          style={[styles.paymentMethodContainer, { borderColor: Theme['gray-glass-020'] }]}
+          justifyContent="space-between"
         >
-          {paymentLogo ? (
-            <Image
-              source={paymentLogo}
-              style={styles.paymentMethodImage}
-              tintColor={Theme['fg-150']}
-            />
-          ) : null}
-          <Text variant="small-600" color="fg-150">
-            {selectedPaymentMethod?.name}
-          </Text>
+          <Text color="fg-200">Network</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text>{purchaseCurrency?.chainName}</Text>
+          </FlexView>
+        </FlexView>
+        <FlexView
+          padding={['xs', 's', 'm', 's']}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Text color="fg-200">Pay with</Text>
+          <FlexView
+            flexDirection="row"
+            alignItems="center"
+            style={[styles.paymentMethodContainer, { borderColor: Theme['gray-glass-020'] }]}
+          >
+            {paymentLogo ? (
+              <Image
+                source={paymentLogo}
+                style={styles.paymentMethodImage}
+                tintColor={Theme['fg-150']}
+              />
+            ) : null}
+            <Text variant="small-600" color="fg-150">
+              {selectedPaymentMethod?.name}
+            </Text>
+          </FlexView>
         </FlexView>
-      </FlexView>
 
-      {showFees ? (
-        <Toggle
-          title={
-            <>
-              <Text variant="paragraph-400" color="fg-200">
-                Fees{' '}
-                {showTotalFee ? (
-                  <Text variant="paragraph-400">
-                    {selectedQuote?.totalFee} {selectedQuote?.sourceCurrencyCode}
+        {showFees ? (
+          <Toggle
+            title={
+              <>
+                <Text variant="paragraph-400" color="fg-200">
+                  Fees{' '}
+                  {showTotalFee ? (
+                    <Text variant="paragraph-400">
+                      {selectedQuote?.totalFee} {selectedQuote?.sourceCurrencyCode}
+                    </Text>
+                  ) : null}
+                </Text>
+              </>
+            }
+            style={[styles.feesToggle, { backgroundColor: Theme['gray-glass-002'] }]}
+            contentContainerStyle={styles.feesToggleContent}
+          >
+            {showNetworkFee ? (
+              <FlexView
+                flexDirection="row"
+                justifyContent="space-between"
+                style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
+                margin={['0', '0', 'xs', '0']}
+              >
+                <Text variant="small-500" color="fg-150">
+                  Network Fees
+                </Text>
+                <FlexView flexDirection="row" alignItems="center">
+                  {networkImage ? (
+                    <Image
+                      source={networkImage}
+                      style={[styles.networkImage, { borderColor: Theme['gray-glass-010'] }]}
+                    />
+                  ) : null}
+                  <Text variant="small-400">
+                    {selectedQuote?.networkFee} {selectedQuote?.sourceCurrencyCode}
                   </Text>
-                ) : null}
-              </Text>
-            </>
-          }
-          style={[styles.feesToggle, { backgroundColor: Theme['gray-glass-002'] }]}
-          contentContainerStyle={styles.feesToggleContent}
-        >
-          {showNetworkFee ? (
-            <FlexView
-              flexDirection="row"
-              justifyContent="space-between"
-              style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
-              margin={['0', '0', 'xs', '0']}
-            >
-              <Text variant="small-500" color="fg-150">
-                Network Fees
-              </Text>
-              <FlexView flexDirection="row" alignItems="center">
-                {networkImage ? (
-                  <Image
-                    source={networkImage}
-                    style={[styles.networkImage, { borderColor: Theme['gray-glass-010'] }]}
-                  />
-                ) : null}
+                </FlexView>
+              </FlexView>
+            ) : null}
+            {showTransactionFee ? (
+              <FlexView
+                flexDirection="row"
+                justifyContent="space-between"
+                style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
+              >
+                <Text variant="small-500" color="fg-150">
+                  Transaction Fees
+                </Text>
                 <Text variant="small-400">
-                  {selectedQuote?.networkFee} {selectedQuote?.sourceCurrencyCode}
+                  {selectedQuote.transactionFee} {selectedQuote?.sourceCurrencyCode}
                 </Text>
               </FlexView>
-            </FlexView>
-          ) : null}
-          {showTransactionFee ? (
-            <FlexView
-              flexDirection="row"
-              justifyContent="space-between"
-              style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
-            >
-              <Text variant="small-500" color="fg-150">
-                Transaction Fees
-              </Text>
-              <Text variant="small-400">
-                {selectedQuote.transactionFee} {selectedQuote?.sourceCurrencyCode}
-              </Text>
-            </FlexView>
-          ) : null}
-        </Toggle>
-      ) : null}
-      <FlexView flexDirection="row" justifyContent="space-between" margin={['xl', '0', '0', '0']}>
-        <Button
-          variant="shade"
-          size="md"
-          style={styles.cancelButton}
-          onPress={RouterController.goBack}
-        >
-          Back
-        </Button>
-        <Button
-          variant="fill"
-          size="md"
-          style={styles.confirmButton}
-          onPress={onConfirm}
-          testID="button-confirm"
-        >
-          Confirm
-        </Button>
+            ) : null}
+          </Toggle>
+        ) : null}
+        <FlexView flexDirection="row" justifyContent="space-between" margin={['xl', '0', '0', '0']}>
+          <Button
+            variant="shade"
+            size="md"
+            style={styles.cancelButton}
+            onPress={RouterController.goBack}
+          >
+            Back
+          </Button>
+          <Button
+            variant="fill"
+            size="md"
+            style={styles.confirmButton}
+            onPress={onConfirm}
+            testID="button-confirm"
+          >
+            Confirm
+          </Button>
+        </FlexView>
       </FlexView>
-    </FlexView>
+    </ScrollView>
   );
 }
 

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

@@ -21,7 +21,7 @@ import styles from './styles';
 import { StringUtil } from '@reown/appkit-common-react-native';
 
 export function OnRampLoadingView() {
-  const { maxWidth: width } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const { error } = useSnapshot(OnRampController.state);
   const providerName = StringUtil.capitalize(
     OnRampController.state.selectedQuote?.serviceProvider.toLowerCase()
@@ -111,14 +111,10 @@ export function OnRampLoadingView() {
       bounces={false}
       fadingEdgeLength={20}
       contentContainerStyle={styles.container}
+      style={{ paddingHorizontal: padding }}
       testID="onramp-loading-widget-view"
     >
-      <FlexView
-        alignItems="center"
-        alignSelf="center"
-        padding={['2xl', 'l', '0', 'l']}
-        style={{ width }}
-      >
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '0', 'l']}>
         <IconLink
           icon="chevronLeft"
           size="md"

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

@@ -3,7 +3,7 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 
 export default StyleSheet.create({
   container: {
-    paddingBottom: Spacing['3xl']
+    paddingBottom: Spacing['s']
   },
   backButton: {
     alignSelf: 'flex-start'

package/src/views/w3m-onramp-settings-view/components/Country.tsx

@@ -7,24 +7,31 @@ import {
   Icon,
   BorderRadius
 } from '@reown/appkit-ui-react-native';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 
 interface Props {
   onPress: (item: OnRampCountry) => void;
   item: OnRampCountry;
   selected: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 export const ITEM_HEIGHT = 60;
 
-export function Country({ onPress, item, selected }: Props) {
+export function Country({ onPress, item, selected, style, testID }: Props) {
   const handlePress = () => {
     onPress(item);
   };
 
   return (
-    <Pressable onPress={handlePress} style={styles.container} backgroundColor="transparent">
+    <Pressable
+      onPress={handlePress}
+      style={[styles.container, style]}
+      backgroundColor="transparent"
+      testID={testID}
+    >
       <FlexView flexDirection="row" alignItems="center" justifyContent="flex-start" padding="s">
         <FlexView style={styles.imageContainer}>
           {item.flagImageUrl && SvgUri ? (

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

@@ -13,7 +13,9 @@ import {
   getItemHeight,
   getModalItems,
   getModalItemKey,
-  getModalSearchPlaceholder
+  getModalSearchPlaceholder,
+  getModalEmptyTitle,
+  getModalEmptyDescription
 } from './utils';
 import { styles } from './styles';
 
@@ -28,6 +30,11 @@ export function OnRampSettingsView() {
   const [modalType, setModalType] = useState<ModalType>();
   const [searchValue, setSearchValue] = useState('');
 
+  const onModalClose = () => {
+    setModalType(undefined);
+    setSearchValue('');
+  };
+
   const onCountryPress = () => {
     setModalType('country');
   };
@@ -55,6 +62,8 @@ export function OnRampSettingsView() {
           item={parsedItem}
           onPress={onPressModalItem}
           selected={parsedItem.countryCode === selectedCountry?.countryCode}
+          style={styles.selectorItem}
+          testID={`country-item-${parsedItem.countryCode}`}
         />
       );
     }
@@ -68,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"
@@ -101,7 +111,7 @@ export function OnRampSettingsView() {
             ) : null}
           </FlexView>
         </ListItem>
-        <ListItem onPress={onPaymentCurrencyPress} chevron contentStyle={styles.itemContent}>
+        <ListItem onPress={onPaymentCurrencyPress} chevron contentStyle={styles.listItem}>
           <FlexView
             alignItems="center"
             justifyContent="center"
@@ -127,7 +137,7 @@ export function OnRampSettingsView() {
       </FlexView>
       <SelectorModal
         visible={!!modalType}
-        onClose={() => setModalType(undefined)}
+        onClose={onModalClose}
         items={getModalItems(modalType, searchValue, true)}
         selectedItem={modalType === 'country' ? selectedCountry : paymentCurrency}
         onSearch={setSearchValue}
@@ -136,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

@@ -17,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
@@ -40,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

@@ -29,7 +29,7 @@ export function OnRampTransactionView() {
   }, []);
 
   return (
-    <FlexView padding={['3xs', 'l', '4xl', 'l']}>
+    <FlexView padding={['3xs', 'l', 's', 'l']}>
       <FlexView>
         <FlexView alignItems="center">
           <IconBox

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

@@ -11,7 +11,7 @@ import {
   Icon,
   BorderRadius
 } from '@reown/appkit-ui-react-native';
-import { StyleSheet, Image } from 'react-native';
+import { StyleSheet, Image, type StyleProp, type ViewStyle } from 'react-native';
 
 export const ITEM_HEIGHT = 60;
 
@@ -22,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 = () => {
@@ -34,7 +35,7 @@ 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}
     >

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

@@ -23,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

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

@@ -9,7 +9,8 @@ import {
   Text,
   useTheme,
   Separator,
-  BorderRadius
+  BorderRadius,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import { OnRampController } from '@reown/appkit-core-react-native';
 import { Quote, ITEM_HEIGHT as QUOTE_ITEM_HEIGHT } from './Quote';
@@ -26,6 +27,7 @@ const SEPARATOR_HEIGHT = Spacing.s;
 
 export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentModalProps) {
   const Theme = useTheme();
+  const { maxHeight } = useCustomDimensions();
   const { selectedQuote, quotes, selectedPaymentMethod } = useSnapshot(OnRampController.state);
 
   const paymentMethodsRef = useRef<FlatList>(null);
@@ -133,7 +135,9 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
   return (
     <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
       <View style={styles.modalContent}>
-        <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
+        <FlexView
+          style={[styles.container, { backgroundColor: Theme['bg-100'], height: maxHeight }]}
+        >
           <FlexView
             alignItems="center"
             justifyContent="space-between"
@@ -196,7 +200,6 @@ const styles = StyleSheet.create({
     paddingTop: Spacing.m
   },
   container: {
-    height: '80%',
     borderTopLeftRadius: BorderRadius.l,
     borderTopRightRadius: BorderRadius.l
   },

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

@@ -135,6 +135,7 @@ export function OnRampView() {
         title={item.name}
         subtitle={item.currencyCode.split('_')[0] ?? item.currencyCode}
         testID={`currency-item-${item.currencyCode}`}
+        style={styles.currencyItem}
       />
     );
   };
@@ -177,13 +178,13 @@ export function OnRampView() {
     <>
       <Header onSettingsPress={() => RouterController.push('OnRampSettings')} />
       <ScrollView bounces={false}>
-        <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
             </Text>
             <TokenButton
-              placeholder={'Select currency'}
+              placeholder={'Select Token'}
               imageUrl={purchaseCurrency?.symbolImageUrl}
               text={purchaseCurrencyCode}
               onPress={() => setIsCurrencyModalVisible(true)}
@@ -258,7 +259,7 @@ export function OnRampView() {
             onSearch={handleSearch}
             renderItem={renderCurrencyItem}
             keyExtractor={item => item.currencyCode}
-            title="Select token"
+            title="Select Token"
             itemHeight={CURRENCY_ITEM_HEIGHT}
             showNetwork
           />