@reown/appkit-react-native 0.0.0-canary-20251008180350

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"
+                  />
+                </>
+              ) : null}
+              <Text variant="small-400" color="fg-150">
+                {subtitle}
+              </Text>
+            </FlexView>
+          ) : null}
+        </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

@@ -0,0 +1,99 @@
+import { useSnapshot } from 'valtio';
+import { ThemeController } from '@reown/appkit-core-react-native';
+import { type OnRampPaymentMethod } from '@reown/appkit-common-react-native';
+import {
+  Pressable,
+  FlexView,
+  Spacing,
+  Text,
+  useTheme,
+  Image,
+  BorderRadius,
+  IconBox
+} from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export const ITEM_SIZE = 100;
+
+interface Props {
+  onPress: (item: OnRampPaymentMethod) => void;
+  item: OnRampPaymentMethod;
+  selected: boolean;
+  testID?: string;
+}
+
+export function PaymentMethod({ onPress, item, selected, testID }: Props) {
+  const Theme = useTheme();
+  const { themeMode } = useSnapshot(ThemeController.state);
+
+  const handlePress = () => {
+    onPress(item);
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      bounceScale={0.96}
+      style={styles.container}
+      transparent
+      pressable={!selected}
+      testID={testID}
+    >
+      <FlexView
+        style={[styles.logoContainer, { backgroundColor: Theme['gray-glass-005'] }]}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Image
+          source={item.logos[themeMode ?? 'light']}
+          style={styles.logo}
+          resizeMethod="resize"
+          resizeMode="contain"
+        />
+        {selected ? (
+          <IconBox
+            icon="checkmark"
+            size="sm"
+            background
+            backgroundColor="accent-100"
+            iconColor="inverse-100"
+            style={styles.checkmark}
+            testID="payment-method-checkmark"
+          />
+        ) : null}
+      </FlexView>
+      <Text variant="tiny-400" color="fg-100" numberOfLines={2} style={styles.text}>
+        {item.name}
+      </Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: ITEM_SIZE,
+    width: 85,
+    alignItems: 'center'
+  },
+  logoContainer: {
+    width: 60,
+    height: 60,
+    borderRadius: BorderRadius.full,
+    marginBottom: Spacing['4xs']
+  },
+  logo: {
+    width: 26,
+    height: 26
+  },
+  checkmark: {
+    borderRadius: BorderRadius.full,
+    position: 'absolute',
+    bottom: 0,
+    right: -10
+  },
+  text: {
+    marginTop: Spacing.xs,
+    paddingHorizontal: Spacing['3xs'],
+    textAlign: 'center'
+  }
+});

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

@@ -0,0 +1,96 @@
+import { NumberUtil, type OnRampQuote } from '@reown/appkit-common-react-native';
+import {
+  FlexView,
+  Image,
+  Spacing,
+  Text,
+  Tag,
+  useTheme,
+  BorderRadius,
+  Icon,
+  Pressable
+} from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+interface Props {
+  item: OnRampQuote;
+  isBestDeal?: boolean;
+  tagText?: string;
+  logoURL?: string;
+  onQuotePress: (item: OnRampQuote) => void;
+  selected?: boolean;
+  testID?: string;
+}
+
+export const ITEM_HEIGHT = 64;
+
+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"
+        alignItems="center"
+        flexDirection="row"
+        padding={['s', 's', 's', 's']}
+      >
+        <FlexView flexDirection="row" alignItems="center">
+          {logoURL ? (
+            <Image source={logoURL} style={styles.logo} />
+          ) : (
+            <FlexView
+              style={[styles.logo, { backgroundColor: Theme['gray-glass-005'] }]}
+              justifyContent="center"
+              alignItems="center"
+            />
+          )}
+          <FlexView flexDirection="column">
+            <FlexView flexDirection="row" alignItems="center" margin={['0', '0', '4xs', '0']}>
+              <Text variant="paragraph-500" style={styles.providerText}>
+                {item.serviceProvider?.toLowerCase()}
+              </Text>
+              {tagText ? (
+                <Tag variant="main" style={styles.tag}>
+                  {tagText}
+                </Tag>
+              ) : null}
+            </FlexView>
+            <Text variant="tiny-500">
+              {NumberUtil.roundNumber(item.destinationAmount, 6, 5)}{' '}
+              {item.destinationCurrencyCode?.split('_')[0]}
+            </Text>
+          </FlexView>
+        </FlexView>
+        {selected ? <Icon name="checkmark" color="accent-100" /> : null}
+      </FlexView>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: BorderRadius.xs,
+    borderWidth: 1,
+    borderColor: 'transparent',
+    height: ITEM_HEIGHT,
+    justifyContent: 'center'
+  },
+  logo: {
+    height: 40,
+    width: 40,
+    borderRadius: BorderRadius['3xs'],
+    marginRight: Spacing.xs
+  },
+  providerText: {
+    textTransform: 'capitalize'
+  },
+  tag: {
+    padding: Spacing['3xs'],
+    marginLeft: Spacing['2xs']
+  }
+});

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

@@ -0,0 +1,233 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useSnapshot } from 'valtio';
+import { useRef, useState, useMemo, useEffect } from 'react';
+import { FlatList, StyleSheet, View, Modal } from 'react-native';
+import {
+  FlexView,
+  IconLink,
+  Spacing,
+  Text,
+  useTheme,
+  Separator,
+  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';
+import { PaymentMethod } from './PaymentMethod';
+import { type OnRampPaymentMethod, type OnRampQuote } from '@reown/appkit-common-react-native';
+
+interface SelectPaymentModalProps {
+  title?: string;
+  visible: boolean;
+  onClose: () => void;
+}
+
+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);
+  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 || selectedQuote.paymentMethodType !== activePaymentMethod?.paymentMethod) {
+      return availableQuotes;
+    }
+
+    return [
+      selectedQuote,
+
+      ...(availableQuotes?.filter(
+        quote => quote.serviceProvider !== selectedQuote.serviceProvider
+      ) ?? [])
+    ];
+  }, [availableQuotes, selectedQuote, activePaymentMethod]);
+
+  const renderSeparator = () => {
+    return <View style={{ height: SEPARATOR_HEIGHT }} />;
+  };
+
+  const handleQuotePress = (quote: OnRampQuote) => {
+    if (activePaymentMethod) {
+      OnRampController.clearError();
+      OnRampController.setSelectedQuote(quote);
+      OnRampController.setSelectedPaymentMethod(activePaymentMethod);
+    }
+    onClose();
+  };
+
+  const handlePaymentMethodPress = (paymentMethod: OnRampPaymentMethod) => {
+    setActivePaymentMethod(paymentMethod);
+  };
+
+  const renderQuote = ({ item, index }: { item: OnRampQuote; index: number }) => {
+    const logoURL = OnRampController.getServiceProviderImage(item.serviceProvider);
+    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={isSelected}
+        logoURL={logoURL}
+        onQuotePress={() => handleQuotePress(item)}
+        tagText={tagText}
+        testID={`quote-item-${index}`}
+      />
+    );
+  };
+
+  const renderPaymentMethod = ({ item }: { item: OnRampPaymentMethod }) => {
+    const parsedItem = item as OnRampPaymentMethod;
+    const isSelected = parsedItem.paymentMethod === activePaymentMethod?.paymentMethod;
+
+    return (
+      <PaymentMethod
+        item={parsedItem}
+        onPress={() => handlePaymentMethodPress(parsedItem)}
+        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 visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <View style={styles.modalContent}>
+        <FlexView
+          style={[styles.container, { backgroundColor: Theme['bg-100'], height: maxHeight }]}
+        >
+          <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={sortedQuotes}
+            bounces={false}
+            renderItem={renderQuote}
+            extraData={selectedPaymentMethod}
+            contentContainerStyle={styles.listContent}
+            ItemSeparatorComponent={renderSeparator}
+            fadingEdgeLength={20}
+            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({
+  modalContent: {
+    margin: 0,
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  header: {
+    marginBottom: Spacing.l,
+    paddingHorizontal: Spacing.m,
+    paddingTop: Spacing.m
+  },
+  container: {
+    borderTopLeftRadius: BorderRadius.l,
+    borderTopRightRadius: BorderRadius.l
+  },
+  separator: {
+    width: undefined,
+    marginVertical: Spacing.m,
+    marginHorizontal: Spacing.m
+  },
+  listContent: {
+    paddingTop: Spacing['3xs'],
+    paddingBottom: Spacing['4xl'],
+    paddingHorizontal: Spacing.m
+  },
+  iconPlaceholder: {
+    height: 32,
+    width: 32
+  },
+  subtitle: {
+    marginBottom: Spacing.xs,
+    marginHorizontal: Spacing.m
+  },
+  emptyContainer: {
+    height: 150
+  },
+  paymentMethodsContainer: {
+    paddingHorizontal: Spacing['3xs']
+  },
+  paymentMethodsContent: {
+    paddingLeft: Spacing.xs
+  }
+});