@reown/appkit-react-native 2.0.0-alpha.3 → 2.0.0-alpha.5

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,29 @@ 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>;
 }
 
 export const ITEM_HEIGHT = 60;
 
-export function Country({ onPress, item, selected }: Props) {
+export function Country({ onPress, item, selected, style }: Props) {
   const handlePress = () => {
     onPress(item);
   };
 
   return (
-    <Pressable onPress={handlePress} style={styles.container} backgroundColor="transparent">
+    <Pressable
+      onPress={handlePress}
+      style={[styles.container, style]}
+      backgroundColor="transparent"
+    >
       <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,7 @@ export function OnRampSettingsView() {
           item={parsedItem}
           onPress={onPressModalItem}
           selected={parsedItem.countryCode === selectedCountry?.countryCode}
+          style={styles.selectorItem}
         />
       );
     }
@@ -68,18 +76,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 +110,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 +136,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 +145,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
           />

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

@@ -24,6 +24,9 @@ export default StyleSheet.create({
     borderWidth: 0,
     borderRadius: BorderRadius['3xs']
   },
+  currencyItem: {
+    paddingHorizontal: Spacing.m
+  },
   currencyInput: {
     marginBottom: Spacing.m
   },

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

@@ -3,9 +3,16 @@ import { useEffect } from 'react';
 import { ScrollView } from 'react-native';
 import { NumberUtil } from '@reown/appkit-common-react-native';
 import { RouterController, SwapController } from '@reown/appkit-core-react-native';
-import { Button, FlexView, Icon, Text, TokenButton, UiUtil } from '@reown/appkit-ui-react-native';
+import {
+  Button,
+  FlexView,
+  Icon,
+  Text,
+  TokenButton,
+  UiUtil,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import { SwapDetails } from '../../partials/w3m-swap-details';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 
 export function SwapPreviewView() {
@@ -61,7 +68,7 @@ export function SwapPreviewView() {
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
-      <FlexView padding={['l', 'l', '2xl', 'l']} justifyContent="center">
+      <FlexView padding="l" justifyContent="center">
         <FlexView flexDirection="row" justifyContent="space-between">
           <FlexView>
             <Text variant="small-400" color="fg-150">

package/src/views/w3m-swap-preview-view/styles.ts

@@ -14,8 +14,5 @@ export default StyleSheet.create({
   sendButton: {
     marginLeft: Spacing.s,
     flex: 3
-  },
-  withKeyboard: {
-    height: '100%'
   }
 });

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

@@ -0,0 +1,181 @@
+import { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import {
+  Modal,
+  ScrollView,
+  SectionList,
+  View,
+  type SectionListData,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import {
+  FlexView,
+  IconLink,
+  InputText,
+  ListToken,
+  ListTokenTotalHeight,
+  Separator,
+  Text,
+  TokenButton,
+  useTheme,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+
+import {
+  AssetController,
+  AssetUtil,
+  ConnectionsController,
+  SwapController,
+  type SwapControllerState
+} from '@reown/appkit-core-react-native';
+
+import { type SwapInputTarget, type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
+
+import { Placeholder } from '../../../../partials/w3m-placeholder';
+import styles from './styles';
+import { createSections } from './utils';
+
+interface Props {
+  onClose: () => void;
+  visible: boolean;
+  type?: SwapInputTarget;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SwapSelectTokenModal({ onClose, type, style, visible }: Props) {
+  const { padding, maxHeight } = useCustomDimensions();
+  const Theme = useTheme();
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const { sourceToken, suggestedTokens, myTokensWithBalance } = useSnapshot(
+    SwapController.state
+  ) as SwapControllerState;
+
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
+  const [tokenSearch, setTokenSearch] = useState<string>('');
+  const isSourceToken = type === 'sourceToken';
+
+  const filteredTokens = createSections(isSourceToken, tokenSearch, myTokensWithBalance);
+
+  const suggestedList = suggestedTokens
+    ?.filter(token => token.address !== SwapController.state.sourceToken?.address)
+    .slice(0, 8);
+
+  const onSearchChange = (value: string) => {
+    setTokenSearch(value);
+  };
+
+  const onTokenPress = (token: SwapTokenWithBalance) => {
+    if (isSourceToken) {
+      SwapController.setSourceToken(token);
+    } else {
+      SwapController.setToToken(token);
+      if (SwapController.state.sourceToken && SwapController.state.sourceTokenAmount) {
+        SwapController.swapTokens();
+      }
+    }
+    onClose();
+  };
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <FlexView
+        padding={['xl', '0', '0', '0']}
+        style={[
+          styles.container,
+          {
+            paddingHorizontal: padding,
+            backgroundColor: Theme['bg-100'],
+            height: maxHeight
+          },
+          style
+        ]}
+      >
+        <FlexView
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+          padding={['0', 'm', 'm', 'm']}
+        >
+          <IconLink icon="chevronLeft" size="md" onPress={onClose} />
+          <Text variant="paragraph-600">Select token</Text>
+          <View style={styles.iconPlaceholder} />
+        </FlexView>
+        <FlexView margin={['0', '0', 'xs', '0']}>
+          <InputText
+            value={tokenSearch}
+            icon="search"
+            placeholder="Search token"
+            onChangeText={onSearchChange}
+            clearButtonMode="while-editing"
+            style={styles.input}
+          />
+          {!isSourceToken && (
+            <>
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                bounces={false}
+                fadingEdgeLength={20}
+                style={styles.suggestedList}
+                contentContainerStyle={styles.suggestedListContent}
+              >
+                {suggestedList?.map((token, index) => (
+                  <TokenButton
+                    key={token.name}
+                    text={token.symbol}
+                    imageUrl={token.logoUri}
+                    onPress={() => onTokenPress(token)}
+                    style={index !== suggestedList.length - 1 ? styles.suggestedToken : undefined}
+                  />
+                ))}
+              </ScrollView>
+              <Separator style={styles.suggestedSeparator} color="gray-glass-005" />
+            </>
+          )}
+        </FlexView>
+        <SectionList
+          sections={filteredTokens as SectionListData<SwapTokenWithBalance>[]}
+          bounces={false}
+          fadingEdgeLength={20}
+          contentContainerStyle={styles.tokenList}
+          renderSectionHeader={({ section: { title } }) => (
+            <Text
+              variant="paragraph-500"
+              color="fg-200"
+              style={[{ backgroundColor: Theme['bg-100'] }, styles.title]}
+            >
+              {title}
+            </Text>
+          )}
+          ListEmptyComponent={
+            <Placeholder
+              icon="coinPlaceholder"
+              title="No tokens found"
+              description="Your tokens will appear here"
+            />
+          }
+          getItemLayout={(_, index) => ({
+            length: ListTokenTotalHeight,
+            offset: ListTokenTotalHeight * index,
+            index
+          })}
+          renderItem={({ item }) => (
+            <ListToken
+              key={item.name}
+              name={item.name}
+              imageSrc={item.logoUri}
+              networkSrc={networkImage}
+              value={item.value}
+              amount={item.quantity.numeric}
+              currency={item.symbol}
+              onPress={() => onTokenPress(item)}
+              disabled={item.address === sourceToken?.address}
+            />
+          )}
+        />
+      </FlexView>
+    </Modal>
+  );
+}

package/src/views/w3m-swap-view/components/{select-token-view → select-token-modal}/styles.ts

@@ -8,7 +8,11 @@ export default StyleSheet.create({
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,
     overflow: 'hidden',
-    marginTop: 80
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    margin: 0
   },
   title: {
     paddingTop: Spacing['2xs']
@@ -29,7 +33,7 @@ export default StyleSheet.create({
     marginRight: Spacing.s
   },
   suggestedSeparator: {
-    marginVertical: Spacing.s
+    marginTop: Spacing.s
   },
   iconPlaceholder: {
     height: 32,

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

@@ -1,6 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
-import { ScrollView, Modal } from 'react-native';
+import { ScrollView } from 'react-native';
 import {
   ConnectionsController,
   ConstantsUtil,
@@ -8,16 +8,21 @@ import {
   RouterController,
   SwapController
 } from '@reown/appkit-core-react-native';
-import { Button, FlexView, IconLink, useTheme } from '@reown/appkit-ui-react-native';
+import {
+  Button,
+  FlexView,
+  IconLink,
+  useTheme,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import { NumberUtil, type SwapInputTarget } from '@reown/appkit-common-react-native';
 
 import { useKeyboard } from '../../hooks/useKeyboard';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { SwapInput } from '../../partials/w3m-swap-input';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { SwapDetails } from '../../partials/w3m-swap-details';
 import styles from './styles';
-import { SwapSelectTokenView } from './components/select-token-view';
+import { SwapSelectTokenModal } from './components/select-token-modal';
 
 export function SwapView() {
   const {
@@ -34,8 +39,8 @@ export function SwapView() {
     inputError
   } = useSnapshot(SwapController.state);
   const Theme = useTheme();
-  const { padding } = useCustomDimensions();
-  const { keyboardShown } = useKeyboard();
+  const { padding, maxHeight } = useCustomDimensions();
+  const { keyboardShown, keyboardHeight } = useKeyboard();
   const [showModal, setShowModal] = useState<SwapInputTarget | undefined>();
   const showDetails = !!sourceToken && !!toToken && !inputError;
 
@@ -152,11 +157,14 @@ export function SwapView() {
   return (
     <>
       <ScrollView
-        style={[{ paddingHorizontal: padding }, keyboardShown && styles.withKeyboard]}
+        style={[{ paddingHorizontal: padding, maxHeight }]}
+        contentContainerStyle={
+          keyboardShown && !showModal ? { paddingBottom: keyboardHeight } : undefined
+        }
         bounces={false}
         keyboardShouldPersistTaps="always"
       >
-        <FlexView padding={['l', 'l', '2xl', 'l']} alignItems="center" justifyContent="center">
+        <FlexView padding="l" alignItems="center" justifyContent="center">
           <SwapInput
             token={sourceToken}
             value={sourceTokenAmount}
@@ -203,9 +211,7 @@ export function SwapView() {
           </Button>
         </FlexView>
       </ScrollView>
-      <Modal visible={!!showModal} transparent animationType="slide" onRequestClose={onModalClose}>
-        <SwapSelectTokenView style={styles.modalContent} onClose={onModalClose} type={showModal} />
-      </Modal>
+      <SwapSelectTokenModal visible={!!showModal} onClose={onModalClose} type={showModal} />
     </>
   );
 }

package/src/views/w3m-swap-view/styles.ts

@@ -19,13 +19,5 @@ export default StyleSheet.create({
   actionButton: {
     marginTop: Spacing.xs,
     width: '100%'
-  },
-  modalContent: {
-    margin: 0,
-    flex: 1,
-    justifyContent: 'flex-end'
-  },
-  withKeyboard: {
-    height: '100%'
   }
 });