@reown/appkit-react-native 2.0.0 → 2.0.1

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,
@@ -20,17 +19,19 @@ interface Props {
   logoURL?: string;
   onQuotePress: (item: OnRampQuote) => void;
   selected?: boolean;
+  testID?: string;
 }
 
 export const ITEM_HEIGHT = 64;
 
-export function Quote({ item, logoURL, onQuotePress, selected, tagText }: Props) {
+export function Quote({ item, logoURL, onQuotePress, selected, tagText, testID }: Props) {
   const Theme = useTheme();
 
   return (
     <Pressable
       style={[styles.container, selected && { borderColor: Theme['accent-100'] }]}
       onPress={() => onQuotePress(item)}
+      testID={testID}
     >
       <FlexView
         justifyContent="space-between"
@@ -53,18 +54,19 @@ export function Quote({ item, logoURL, onQuotePress, selected, tagText }: Props)
               <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)} {item.destinationCurrencyCode}
+              {NumberUtil.roundNumber(item.destinationAmount, 6, 5)}{' '}
+              {item.destinationCurrencyCode?.split('_')[0]}
             </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

@@ -1,7 +1,7 @@
+/* eslint-disable valtio/state-snapshot-rule */
 import { useSnapshot } from 'valtio';
-import { useRef, useState, useMemo } from 'react';
-import Modal from 'react-native-modal';
-import { Dimensions, FlatList, StyleSheet, View } from 'react-native';
+import { useRef, useState, useMemo, useEffect } from 'react';
+import { FlatList, StyleSheet, View, Modal } from 'react-native';
 import {
   FlexView,
   IconLink,
@@ -9,17 +9,13 @@ import {
   Text,
   useTheme,
   Separator,
-  LoadingSpinner,
-  BorderRadius
+  BorderRadius,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
-import {
-  OnRampController,
-  type OnRampPaymentMethod,
-  type OnRampQuote
-} from '@reown/appkit-core-react-native';
-import { Placeholder } from '../../../partials/w3m-placeholder';
+import { OnRampController } from '@reown/appkit-core-react-native';
 import { Quote, ITEM_HEIGHT as QUOTE_ITEM_HEIGHT } from './Quote';
-import { PaymentMethod, ITEM_SIZE } from './PaymentMethod';
+import { PaymentMethod } from './PaymentMethod';
+import { type OnRampPaymentMethod, type OnRampQuote } from '@reown/appkit-common-react-native';
 
 interface SelectPaymentModalProps {
   title?: string;
@@ -31,188 +27,171 @@ const SEPARATOR_HEIGHT = Spacing.s;
 
 export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentModalProps) {
   const Theme = useTheme();
-  const { selectedQuote, quotes } = useSnapshot(OnRampController.state);
+  const { maxHeight } = useCustomDimensions();
+  const { selectedQuote, quotes, selectedPaymentMethod } = useSnapshot(OnRampController.state);
+
   const paymentMethodsRef = useRef<FlatList>(null);
   const [paymentMethods, setPaymentMethods] = useState<OnRampPaymentMethod[]>(
     OnRampController.state.paymentMethods
   );
 
+  const [activePaymentMethod, setActivePaymentMethod] = useState<OnRampPaymentMethod | undefined>(
+    OnRampController.state.selectedPaymentMethod
+  );
+
+  const availablePaymentMethods = useMemo(() => {
+    return paymentMethods.filter(
+      paymentMethod =>
+        quotes?.some(quote => quote.paymentMethodType === paymentMethod.paymentMethod)
+    );
+  }, [paymentMethods, quotes]);
+
+  const availableQuotes = useMemo(() => {
+    return quotes?.filter(quote => activePaymentMethod?.paymentMethod === quote.paymentMethodType);
+  }, [quotes, activePaymentMethod]);
+
   const sortedQuotes = useMemo(() => {
-    if (!selectedQuote) {
-      return quotes;
+    if (!selectedQuote || selectedQuote.paymentMethodType !== activePaymentMethod?.paymentMethod) {
+      return availableQuotes;
     }
 
     return [
       selectedQuote,
-      // eslint-disable-next-line valtio/state-snapshot-rule
-      ...(quotes?.filter(quote => quote.serviceProvider !== selectedQuote.serviceProvider) ?? [])
+
+      ...(availableQuotes?.filter(
+        quote => quote.serviceProvider !== selectedQuote.serviceProvider
+      ) ?? [])
     ];
-  }, [quotes, selectedQuote]);
+  }, [availableQuotes, selectedQuote, activePaymentMethod]);
 
   const renderSeparator = () => {
     return <View style={{ height: SEPARATOR_HEIGHT }} />;
   };
 
   const handleQuotePress = (quote: OnRampQuote) => {
-    if (quote.serviceProvider !== OnRampController.state.selectedQuote?.serviceProvider) {
+    if (activePaymentMethod) {
+      OnRampController.clearError();
       OnRampController.setSelectedQuote(quote);
+      OnRampController.setSelectedPaymentMethod(activePaymentMethod);
     }
     onClose();
   };
 
   const handlePaymentMethodPress = (paymentMethod: OnRampPaymentMethod) => {
-    if (
-      paymentMethod.paymentMethod !== OnRampController.state.selectedPaymentMethod?.paymentMethod
-    ) {
-      OnRampController.setSelectedPaymentMethod(paymentMethod);
-    }
-
-    const visibleItemsCount = Math.round(Dimensions.get('window').width / ITEM_SIZE);
-
-    // Switch payment method to the top if there are more than visibleItemsCount payment methods
-    if (OnRampController.state.paymentMethods.length > visibleItemsCount) {
-      const paymentIndex = paymentMethods.findIndex(
-        method => method.paymentMethod === paymentMethod.paymentMethod
-      );
-
-      // Switch payment if its not visible
-      if (paymentIndex + 1 > visibleItemsCount - 1) {
-        const realIndex = OnRampController.state.paymentMethods.findIndex(
-          method => method.paymentMethod === paymentMethod.paymentMethod
-        );
-
-        const newPaymentMethods = [
-          paymentMethod,
-          ...OnRampController.state.paymentMethods.slice(0, realIndex),
-          ...OnRampController.state.paymentMethods.slice(realIndex + 1)
-        ];
-        setPaymentMethods(newPaymentMethods);
-      }
-    }
-    paymentMethodsRef.current?.scrollToIndex({
-      index: 0,
-      animated: true
-    });
+    setActivePaymentMethod(paymentMethod);
   };
 
-  const renderQuote = ({ item }: { item: OnRampQuote }) => {
+  const renderQuote = ({ item, index }: { item: OnRampQuote; index: number }) => {
     const logoURL = OnRampController.getServiceProviderImage(item.serviceProvider);
-    const selected = item.serviceProvider === OnRampController.state.selectedQuote?.serviceProvider;
-    const isBestDeal =
-      OnRampController.state.quotes?.findIndex(
-        quote => quote.serviceProvider === item.serviceProvider
-      ) === 0;
-    const tagText = isBestDeal ? 'Best Deal' : item.lowKyc ? 'Low KYC' : undefined;
+    const isSelected =
+      item.serviceProvider === OnRampController.state.selectedQuote?.serviceProvider &&
+      item.paymentMethodType === OnRampController.state.selectedQuote?.paymentMethodType;
+
+    const isRecommended =
+      availableQuotes?.findIndex(quote => quote.serviceProvider === item.serviceProvider) === 0 &&
+      availableQuotes?.length > 1;
+    const tagText = isRecommended ? 'Recommended' : item.lowKyc ? 'Low KYC' : undefined;
 
     return (
       <Quote
         item={item}
-        selected={selected}
+        selected={isSelected}
         logoURL={logoURL}
         onQuotePress={() => handleQuotePress(item)}
         tagText={tagText}
-      />
-    );
-  };
-
-  const renderEmpty = () => {
-    return OnRampController.state.quotesLoading ? (
-      <FlexView
-        alignItems="center"
-        justifyContent="center"
-        padding="2xl"
-        style={styles.emptyContainer}
-      >
-        <LoadingSpinner />
-      </FlexView>
-    ) : (
-      <Placeholder
-        title="No providers available"
-        description="Please select a different payment method or increase the amount"
-        icon="warningCircle"
+        testID={`quote-item-${index}`}
       />
     );
   };
 
   const renderPaymentMethod = ({ item }: { item: OnRampPaymentMethod }) => {
     const parsedItem = item as OnRampPaymentMethod;
-    const selected =
-      parsedItem.paymentMethod === OnRampController.state.selectedPaymentMethod?.paymentMethod;
+    const isSelected = parsedItem.paymentMethod === activePaymentMethod?.paymentMethod;
 
     return (
       <PaymentMethod
         item={parsedItem}
         onPress={() => handlePaymentMethodPress(parsedItem)}
-        selected={selected}
+        selected={isSelected}
         testID={`payment-method-item-${parsedItem.paymentMethod}`}
       />
     );
   };
 
+  useEffect(() => {
+    if (visible && OnRampController.state.selectedPaymentMethod) {
+      const methods = [
+        OnRampController.state.selectedPaymentMethod,
+        ...OnRampController.state.paymentMethods.filter(
+          m => m.paymentMethod !== OnRampController.state.selectedPaymentMethod?.paymentMethod
+        )
+      ];
+      //Update payment methods order
+      setPaymentMethods(methods);
+      setActivePaymentMethod(OnRampController.state.selectedPaymentMethod);
+    }
+  }, [visible]);
+
   return (
-    <Modal
-      isVisible={visible}
-      useNativeDriver
-      useNativeDriverForBackdrop
-      statusBarTranslucent
-      hideModalContentWhileAnimating
-      onBackdropPress={onClose}
-      onDismiss={onClose}
-      style={styles.modal}
-    >
-      <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <View style={styles.modalContent}>
         <FlexView
-          alignItems="center"
-          justifyContent="space-between"
-          flexDirection="row"
-          style={styles.header}
+          style={[styles.container, { backgroundColor: Theme['bg-100'], height: maxHeight }]}
         >
-          <IconLink icon="arrowLeft" onPress={onClose} testID="payment-modal-button-back" />
-          {!!title && <Text variant="paragraph-600">{title}</Text>}
-          <View style={styles.iconPlaceholder} />
-        </FlexView>
-        <Text variant="small-500" color="fg-150" style={styles.subtitle}>
-          Pay with
-        </Text>
-        <FlexView>
+          <FlexView
+            alignItems="center"
+            justifyContent="space-between"
+            flexDirection="row"
+            style={styles.header}
+          >
+            <IconLink icon="arrowLeft" onPress={onClose} testID="payment-modal-button-back" />
+            {!!title && <Text variant="paragraph-600">{title}</Text>}
+            <View style={styles.iconPlaceholder} />
+          </FlexView>
+          <Text variant="small-500" color="fg-150" style={styles.subtitle}>
+            Pay with
+          </Text>
+          <FlexView>
+            <FlatList
+              data={availablePaymentMethods}
+              renderItem={renderPaymentMethod}
+              ref={paymentMethodsRef}
+              style={styles.paymentMethodsContainer}
+              contentContainerStyle={styles.paymentMethodsContent}
+              fadingEdgeLength={20}
+              keyExtractor={item => item.paymentMethod}
+              horizontal
+              showsHorizontalScrollIndicator={false}
+            />
+          </FlexView>
+          <Separator style={styles.separator} color="gray-glass-010" />
+          <Text variant="small-500" color="fg-150" style={styles.subtitle}>
+            Providers
+          </Text>
           <FlatList
-            data={paymentMethods}
-            renderItem={renderPaymentMethod}
-            ref={paymentMethodsRef}
-            style={styles.paymentMethodsContainer}
-            contentContainerStyle={styles.paymentMethodsContent}
+            data={sortedQuotes}
+            bounces={false}
+            renderItem={renderQuote}
+            extraData={selectedPaymentMethod}
+            contentContainerStyle={styles.listContent}
+            ItemSeparatorComponent={renderSeparator}
             fadingEdgeLength={20}
-            keyExtractor={item => item.paymentMethod}
-            horizontal
-            showsHorizontalScrollIndicator={false}
+            keyExtractor={item => `${item.serviceProvider}-${item.paymentMethodType}`}
+            getItemLayout={(_, index) => ({
+              length: QUOTE_ITEM_HEIGHT + SEPARATOR_HEIGHT,
+              offset: (QUOTE_ITEM_HEIGHT + SEPARATOR_HEIGHT) * index,
+              index
+            })}
           />
         </FlexView>
-        <Separator style={styles.separator} color="gray-glass-010" />
-        <Text variant="small-500" color="fg-150" style={styles.subtitle}>
-          Providers
-        </Text>
-        <FlatList
-          data={sortedQuotes}
-          bounces={false}
-          renderItem={renderQuote}
-          contentContainerStyle={styles.listContent}
-          ItemSeparatorComponent={renderSeparator}
-          fadingEdgeLength={20}
-          ListEmptyComponent={renderEmpty}
-          keyExtractor={item => `${item.serviceProvider}-${item.paymentMethodType}`}
-          getItemLayout={(_, index) => ({
-            length: QUOTE_ITEM_HEIGHT + SEPARATOR_HEIGHT,
-            offset: (QUOTE_ITEM_HEIGHT + SEPARATOR_HEIGHT) * index,
-            index
-          })}
-        />
-      </FlexView>
+      </View>
     </Modal>
   );
 }
 const styles = StyleSheet.create({
-  modal: {
+  modalContent: {
     margin: 0,
+    flex: 1,
     justifyContent: 'flex-end'
   },
   header: {
@@ -221,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,34 +3,36 @@ import { memo, useCallback, useEffect, useState } from 'react';
 import { ScrollView } from 'react-native';
 import {
   OnRampController,
-  type OnRampCryptoCurrency,
   ThemeController,
   RouterController,
   type OnRampControllerState,
-  AssetUtil,
   SnackController,
   ConstantsUtil,
-  ConnectionsController
+  ConnectionsController,
+  AssetController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import {
   Button,
   FlexView,
   Image,
-  ListItem,
   Text,
   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 } from './components/Currency';
-import { getPurchaseCurrencies, getCurrencySuggestedValues } from './utils';
+import { Currency, ITEM_HEIGHT as CURRENCY_ITEM_HEIGHT } from './components/Currency';
+import { getPurchaseCurrencies, getQuotesDebounced } from './utils';
 import { CurrencyInput } from './components/CurrencyInput';
 import { SelectPaymentModal } from './components/SelectPaymentModal';
-import { ITEM_HEIGHT as CURRENCY_ITEM_HEIGHT } from './components/Currency';
 import { Header } from './components/Header';
-import { UiUtil } from '../../utils/UiUtil';
 import { LoadingView } from './components/LoadingView';
+import PaymentButton from './components/PaymentButton';
 import styles from './styles';
 
 const MemoizedCurrency = memo(Currency);
@@ -42,24 +44,23 @@ export function OnRampView() {
   const {
     purchaseCurrency,
     paymentCurrency,
-    paymentMethods,
     selectedPaymentMethod,
     paymentAmount,
     quotesLoading,
+    quotes,
     selectedQuote,
     error,
     loading,
     initialLoading
   } = useSnapshot(OnRampController.state) as OnRampControllerState;
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const [searchValue, setSearchValue] = useState('');
   const [isCurrencyModalVisible, setIsCurrencyModalVisible] = useState(false);
   const [isPaymentMethodModalVisible, setIsPaymentMethodModalVisible] = useState(false);
-  const providerImage = OnRampController.getServiceProviderImage(selectedQuote?.serviceProvider);
-  const suggestedValues = getCurrencySuggestedValues(paymentCurrency);
   const purchaseCurrencyCode =
     purchaseCurrency?.currencyCode?.split('_')[0] ?? purchaseCurrency?.currencyCode;
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const getQuotes = useCallback(() => {
     if (OnRampController.canGenerateQuote()) {
@@ -67,24 +68,41 @@ export function OnRampView() {
     }
   }, []);
 
-  const getProviderButtonText = () => {
-    if (selectedQuote) {
-      return 'via ';
+  const getPaymentButtonTitle = () => {
+    if (selectedPaymentMethod) {
+      return selectedPaymentMethod.name;
+    }
+
+    if (quotesLoading) {
+      return 'Loading quotes';
+    }
+
+    if (!paymentAmount || quotes?.length === 0) {
+      return 'Enter a valid amount';
     }
 
-    if (!paymentAmount) {
-      return 'Enter an amount';
+    return '';
+  };
+
+  const getPaymentButtonSubtitle = () => {
+    if (selectedQuote) {
+      return StringUtil.capitalize(selectedQuote?.serviceProvider);
     }
 
-    if (!paymentMethods?.length) {
-      return 'No payment methods available';
+    if (selectedPaymentMethod) {
+      if (quotesLoading) {
+        return 'Loading quotes';
+      }
+
+      if (!paymentAmount || quotes?.length === 0) {
+        return 'Enter a valid amount';
+      }
     }
 
-    return 'Select a provider';
+    return undefined;
   };
 
   const onValueChange = (value: number) => {
-    UiUtil.animateChange();
     if (!value) {
       OnRampController.abortGetQuotes();
       OnRampController.setPaymentAmount(0);
@@ -95,13 +113,7 @@ export function OnRampView() {
     }
 
     OnRampController.setPaymentAmount(value);
-    OnRampController.getQuotesDebounced();
-  };
-
-  const onSuggestedValuePress = (value: number) => {
-    UiUtil.animateChange();
-    OnRampController.setPaymentAmount(value);
-    getQuotes();
+    getQuotesDebounced();
   };
 
   const handleSearch = (value: string) => {
@@ -123,6 +135,7 @@ export function OnRampView() {
         title={item.name}
         subtitle={item.currencyCode.split('_')[0] ?? item.currencyCode}
         testID={`currency-item-${item.currencyCode}`}
+        style={styles.currencyItem}
       />
     );
   };
@@ -141,10 +154,6 @@ export function OnRampView() {
     setIsPaymentMethodModalVisible(false);
   };
 
-  useEffect(() => {
-    getQuotes();
-  }, [selectedPaymentMethod, getQuotes]);
-
   useEffect(() => {
     if (error?.type === ConstantsUtil.ONRAMP_ERROR_TYPES.FAILED_TO_LOAD) {
       SnackController.showInternalError({
@@ -169,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)}
@@ -195,8 +204,6 @@ export function OnRampView() {
             value={paymentAmount?.toString()}
             symbol={paymentCurrency?.currencyCode}
             error={error?.message}
-            suggestedValues={suggestedValues}
-            onSuggestedValuePress={onSuggestedValuePress}
             isAmountError={
               error?.type === ConstantsUtil.ONRAMP_ERROR_TYPES.AMOUNT_TOO_LOW ||
               error?.type === ConstantsUtil.ONRAMP_ERROR_TYPES.AMOUNT_TOO_HIGH ||
@@ -211,46 +218,16 @@ export function OnRampView() {
             onValueChange={onValueChange}
             style={styles.currencyInput}
           />
-          <ListItem
-            chevron
-            backgroundColor="gray-glass-005"
+          <PaymentButton
+            title={getPaymentButtonTitle()}
+            subtitle={getPaymentButtonSubtitle()}
+            paymentLogo={selectedPaymentMethod?.logos[themeMode ?? 'light']}
+            providerLogo={OnRampController.getServiceProviderImage(selectedQuote?.serviceProvider)}
+            disabled={!paymentAmount || quotes?.length === 0}
             loading={quotesLoading || loading}
             onPress={() => setIsPaymentMethodModalVisible(true)}
-            style={styles.paymentMethodButton}
-            imageSrc={selectedPaymentMethod?.logos[themeMode ?? 'light']}
-            imageStyle={styles.paymentMethodImage}
-            imageContainerStyle={[
-              styles.paymentMethodImageContainer,
-              { backgroundColor: Theme['gray-glass-010'] }
-            ]}
-            disabled={!selectedPaymentMethod || !paymentAmount}
             testID="payment-method-button"
-          >
-            <FlexView>
-              {selectedPaymentMethod?.name && (
-                <Text variant="paragraph-400" color="fg-100">
-                  {selectedPaymentMethod.name}
-                </Text>
-              )}
-              {getProviderButtonText() && (
-                <FlexView flexDirection="row" alignItems="center" margin={['3xs', '0', '0', '0']}>
-                  <Text variant="small-400" color="fg-150">
-                    {getProviderButtonText()}
-                  </Text>
-                  {selectedQuote && (
-                    <>
-                      {providerImage && (
-                        <Image source={providerImage} style={styles.providerImage} />
-                      )}
-                      <Text variant="small-400" color="fg-150">
-                        {StringUtil.capitalize(selectedQuote?.serviceProvider)}
-                      </Text>
-                    </>
-                  )}
-                </FlexView>
-              )}
-            </FlexView>
-          </ListItem>
+          />
           <FlexView
             flexDirection="row"
             alignItems="center"
@@ -282,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
   },
@@ -37,5 +40,9 @@ export default StyleSheet.create({
     width: 14,
     borderRadius: BorderRadius.full,
     borderWidth: 1
+  },
+  paymentButtonMock: {
+    borderRadius: BorderRadius.s,
+    height: 64
   }
 });