@reown/appkit-react-native 2.0.0-alpha.0 → 2.0.0-alpha.2

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

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

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

@@ -1,7 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { ModalController, RouterController } from '@reown/appkit-core-react-native';
-import { IconLink, Text } from '@reown/appkit-ui-react-native';
-import { FlexView } from '@reown/appkit-ui-react-native';
+import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
 
 interface HeaderProps {
   onSettingsPress: () => void;

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

@@ -20,11 +20,11 @@ export function LoadingView() {
 
           {/* Currency Input Area */}
           <FlexView margin={['m', '0', 'm', '0']}>
-            <Shimmer width="100%" height={370} borderRadius={16} />
+            <Shimmer width="100%" height={323} borderRadius={16} />
           </FlexView>
 
           {/* Payment Method Button */}
-          <Shimmer width="100%" height={64} borderRadius={16} style={styles.paymentMethodButton} />
+          <Shimmer width="100%" height={64} borderRadius={16} style={styles.paymentButtonMock} />
 
           {/* Action Buttons */}
           <FlexView

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

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

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

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

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

@@ -20,17 +20,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"
@@ -60,7 +62,8 @@ export function Quote({ item, logoURL, onQuotePress, selected, tagText }: Props)
               )}
             </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>

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

@@ -1,7 +1,8 @@
+/* eslint-disable valtio/state-snapshot-rule */
 import { useSnapshot } from 'valtio';
-import { useRef, useState, useMemo } from 'react';
+import { useRef, useState, useMemo, useEffect } from 'react';
 import Modal from 'react-native-modal';
-import { Dimensions, FlatList, StyleSheet, View } from 'react-native';
+import { FlatList, StyleSheet, View } from 'react-native';
 import {
   FlexView,
   IconLink,
@@ -9,7 +10,6 @@ import {
   Text,
   useTheme,
   Separator,
-  LoadingSpinner,
   BorderRadius
 } from '@reown/appkit-ui-react-native';
 import {
@@ -17,9 +17,8 @@ import {
   type OnRampPaymentMethod,
   type OnRampQuote
 } from '@reown/appkit-core-react-native';
-import { Placeholder } from '../../../partials/w3m-placeholder';
 import { Quote, ITEM_HEIGHT as QUOTE_ITEM_HEIGHT } from './Quote';
-import { PaymentMethod, ITEM_SIZE } from './PaymentMethod';
+import { PaymentMethod } from './PaymentMethod';
 
 interface SelectPaymentModalProps {
   title?: string;
@@ -31,124 +30,110 @@ const SEPARATOR_HEIGHT = Spacing.s;
 
 export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentModalProps) {
   const Theme = useTheme();
-  const { selectedQuote, quotes } = useSnapshot(OnRampController.state);
+  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}
@@ -176,7 +161,7 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
         </Text>
         <FlexView>
           <FlatList
-            data={paymentMethods}
+            data={availablePaymentMethods}
             renderItem={renderPaymentMethod}
             ref={paymentMethodsRef}
             style={styles.paymentMethodsContainer}
@@ -195,10 +180,10 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
           data={sortedQuotes}
           bounces={false}
           renderItem={renderQuote}
+          extraData={selectedPaymentMethod}
           contentContainerStyle={styles.listContent}
           ItemSeparatorComponent={renderSeparator}
           fadingEdgeLength={20}
-          ListEmptyComponent={renderEmpty}
           keyExtractor={item => `${item.serviceProvider}-${item.paymentMethodType}`}
           getItemLayout={(_, index) => ({
             length: QUOTE_ITEM_HEIGHT + SEPARATOR_HEIGHT,