@reown/appkit-react-native 0.0.0-chore-solflare-20250730210452 → 0.0.0-chore-spring-effect-20250909214820

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
@@ -76,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"
@@ -98,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
@@ -108,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,
@@ -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}
     >
@@ -53,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

@@ -117,7 +117,7 @@ export function CurrencyInput({
           )}
         </FlexView>
       </FlexView>
-      {suggestedValues && suggestedValues.length > 0 && (
+      {suggestedValues && suggestedValues.length > 0 ? (
         <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
           {suggestedValues?.map((suggestion: number) => {
             const isSelected = suggestion.toString() === value;
@@ -144,7 +144,7 @@ export function CurrencyInput({
             );
           })}
         </FlexView>
-      )}
+      ) : null}
       <Separator color="gray-glass-020" style={styles.separator} />
       <NumericKeyboard onKeyPress={handleKeyPress} />
     </FlexView>

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

@@ -1,13 +1,13 @@
 import { StyleSheet } from 'react-native';
 import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
-import { useAppKit } from '../../../AppKitContext';
+import { useInternalAppKit } from '../../../AppKitContext';
 
 interface HeaderProps {
   onSettingsPress: () => void;
 }
 
 export function Header({ onSettingsPress }: HeaderProps) {
-  const { back } = useAppKit();
+  const { back } = useInternalAppKit();
 
   const handleGoBack = () => {
     back();
@@ -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/PaymentButton.tsx

@@ -73,9 +73,9 @@ function PaymentButton({
           <Text variant="paragraph-400" color="fg-100">
             {title}
           </Text>
-          {subtitle && (
+          {subtitle ? (
             <FlexView flexDirection="row" alignItems="center" margin={['4xs', '0', '0', '0']}>
-              {providerLogo && (
+              {providerLogo ? (
                 <>
                   <Text variant="small-400" color="fg-150">
                     via
@@ -87,12 +87,12 @@ function PaymentButton({
                     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} />

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,
@@ -49,7 +50,7 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
           resizeMethod="resize"
           resizeMode="contain"
         />
-        {selected && (
+        {selected ? (
           <IconBox
             icon="checkmark"
             size="sm"
@@ -59,7 +60,7 @@ 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={2} style={styles.text}>
         {item.name}

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

@@ -1,5 +1,4 @@
-import { NumberUtil } from '@reown/appkit-common-react-native';
-import { type OnRampQuote } from '@reown/appkit-core-react-native';
+import { NumberUtil, type OnRampQuote } from '@reown/appkit-common-react-native';
 import {
   FlexView,
   Image,
@@ -55,11 +54,11 @@ export function Quote({ item, logoURL, onQuotePress, selected, tagText, testID }
               <Text variant="paragraph-500" style={styles.providerText}>
                 {item.serviceProvider?.toLowerCase()}
               </Text>
-              {tagText && (
+              {tagText ? (
                 <Tag variant="main" style={styles.tag}>
                   {tagText}
                 </Tag>
-              )}
+              ) : null}
             </FlexView>
             <Text variant="tiny-500">
               {NumberUtil.roundNumber(item.destinationAmount, 6, 5)}{' '}
@@ -67,7 +66,7 @@ export function Quote({ item, logoURL, onQuotePress, selected, tagText, testID }
             </Text>
           </FlexView>
         </FlexView>
-        {selected && <Icon name="checkmark" color="accent-100" />}
+        {selected ? <Icon name="checkmark" color="accent-100" /> : null}
       </FlexView>
     </Pressable>
   );

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

@@ -9,15 +9,13 @@ import {
   Text,
   useTheme,
   Separator,
-  BorderRadius
+  BorderRadius,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
-import {
-  OnRampController,
-  type OnRampPaymentMethod,
-  type OnRampQuote
-} from '@reown/appkit-core-react-native';
+import { OnRampController } from '@reown/appkit-core-react-native';
 import { Quote, ITEM_HEIGHT as QUOTE_ITEM_HEIGHT } from './Quote';
 import { PaymentMethod } from './PaymentMethod';
+import { type OnRampPaymentMethod, type OnRampQuote } from '@reown/appkit-common-react-native';
 
 interface SelectPaymentModalProps {
   title?: string;
@@ -29,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);
@@ -136,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"
@@ -199,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

@@ -3,14 +3,14 @@ import { memo, useCallback, useEffect, useState } from 'react';
 import { ScrollView } from 'react-native';
 import {
   OnRampController,
-  type OnRampCryptoCurrency,
   ThemeController,
   RouterController,
   type OnRampControllerState,
   SnackController,
   ConstantsUtil,
   ConnectionsController,
-  AssetController
+  AssetController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -20,7 +20,11 @@ import {
   TokenButton,
   useTheme
 } from '@reown/appkit-ui-react-native';
-import { NumberUtil, StringUtil } from '@reown/appkit-common-react-native';
+import {
+  NumberUtil,
+  StringUtil,
+  type OnRampCryptoCurrency
+} from '@reown/appkit-common-react-native';
 import { SelectorModal } from '../../partials/w3m-selector-modal';
 import { Currency, ITEM_HEIGHT as CURRENCY_ITEM_HEIGHT } from './components/Currency';
 import { getPurchaseCurrencies, getQuotesDebounced } from './utils';
@@ -56,7 +60,7 @@ export function OnRampView() {
   const [isPaymentMethodModalVisible, setIsPaymentMethodModalVisible] = useState(false);
   const purchaseCurrencyCode =
     purchaseCurrency?.currencyCode?.split('_')[0] ?? purchaseCurrency?.currencyCode;
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const getQuotes = useCallback(() => {
     if (OnRampController.canGenerateQuote()) {
@@ -131,6 +135,7 @@ export function OnRampView() {
         title={item.name}
         subtitle={item.currencyCode.split('_')[0] ?? item.currencyCode}
         testID={`currency-item-${item.currencyCode}`}
+        style={styles.currencyItem}
       />
     );
   };
@@ -173,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)}
@@ -254,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/components/{select-token-view → select-token-modal}/utils.ts

@@ -1,4 +1,5 @@
-import { SwapController, type SwapTokenWithBalance } from '@reown/appkit-core-react-native';
+import { type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
+import { SwapController } from '@reown/appkit-core-react-native';
 
 export function filterTokens(tokens?: SwapTokenWithBalance[], searchValue?: string) {
   if (!tokens) {