@reown/appkit-react-native 0.0.0-feat-multichain-20250513175016

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

@@ -0,0 +1,94 @@
+import { NumberUtil } from '@reown/appkit-common-react-native';
+import { type OnRampQuote } from '@reown/appkit-core-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;
+}
+
+export const ITEM_HEIGHT = 64;
+
+export function Quote({ item, logoURL, onQuotePress, selected, tagText }: Props) {
+  const Theme = useTheme();
+
+  return (
+    <Pressable
+      style={[styles.container, selected && { borderColor: Theme['accent-100'] }]}
+      onPress={() => onQuotePress(item)}
+    >
+      <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>
+              )}
+            </FlexView>
+            <Text variant="tiny-500">
+              {NumberUtil.roundNumber(item.destinationAmount, 6, 5)} {item.destinationCurrencyCode}
+            </Text>
+          </FlexView>
+        </FlexView>
+        {selected && <Icon name="checkmark" color="accent-100" />}
+      </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,255 @@
+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 {
+  FlexView,
+  IconLink,
+  Spacing,
+  Text,
+  useTheme,
+  Separator,
+  LoadingSpinner,
+  BorderRadius
+} 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 { Quote, ITEM_HEIGHT as QUOTE_ITEM_HEIGHT } from './Quote';
+import { PaymentMethod, ITEM_SIZE } from './PaymentMethod';
+
+interface SelectPaymentModalProps {
+  title?: string;
+  visible: boolean;
+  onClose: () => void;
+}
+
+const SEPARATOR_HEIGHT = Spacing.s;
+
+export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentModalProps) {
+  const Theme = useTheme();
+  const { selectedQuote, quotes } = useSnapshot(OnRampController.state);
+  const paymentMethodsRef = useRef<FlatList>(null);
+  const [paymentMethods, setPaymentMethods] = useState<OnRampPaymentMethod[]>(
+    OnRampController.state.paymentMethods
+  );
+
+  const sortedQuotes = useMemo(() => {
+    if (!selectedQuote) {
+      return quotes;
+    }
+
+    return [
+      selectedQuote,
+      // eslint-disable-next-line valtio/state-snapshot-rule
+      ...(quotes?.filter(quote => quote.serviceProvider !== selectedQuote.serviceProvider) ?? [])
+    ];
+  }, [quotes, selectedQuote]);
+
+  const renderSeparator = () => {
+    return <View style={{ height: SEPARATOR_HEIGHT }} />;
+  };
+
+  const handleQuotePress = (quote: OnRampQuote) => {
+    if (quote.serviceProvider !== OnRampController.state.selectedQuote?.serviceProvider) {
+      OnRampController.setSelectedQuote(quote);
+    }
+    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
+    });
+  };
+
+  const renderQuote = ({ item }: { item: OnRampQuote }) => {
+    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;
+
+    return (
+      <Quote
+        item={item}
+        selected={selected}
+        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"
+      />
+    );
+  };
+
+  const renderPaymentMethod = ({ item }: { item: OnRampPaymentMethod }) => {
+    const parsedItem = item as OnRampPaymentMethod;
+    const selected =
+      parsedItem.paymentMethod === OnRampController.state.selectedPaymentMethod?.paymentMethod;
+
+    return (
+      <PaymentMethod
+        item={parsedItem}
+        onPress={() => handlePaymentMethodPress(parsedItem)}
+        selected={selected}
+        testID={`payment-method-item-${parsedItem.paymentMethod}`}
+      />
+    );
+  };
+
+  return (
+    <Modal
+      isVisible={visible}
+      useNativeDriver
+      useNativeDriverForBackdrop
+      statusBarTranslucent
+      hideModalContentWhileAnimating
+      onBackdropPress={onClose}
+      onDismiss={onClose}
+      style={styles.modal}
+    >
+      <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
+        <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={paymentMethods}
+            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}
+          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>
+    </Modal>
+  );
+}
+const styles = StyleSheet.create({
+  modal: {
+    margin: 0,
+    justifyContent: 'flex-end'
+  },
+  header: {
+    marginBottom: Spacing.l,
+    paddingHorizontal: Spacing.m,
+    paddingTop: Spacing.m
+  },
+  container: {
+    height: '80%',
+    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
+  }
+});

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

@@ -0,0 +1,293 @@
+import { useSnapshot } from 'valtio';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { ScrollView } from 'react-native';
+import {
+  OnRampController,
+  type OnRampCryptoCurrency,
+  ThemeController,
+  RouterController,
+  type OnRampControllerState,
+  AssetUtil,
+  SnackController,
+  ConstantsUtil,
+  ConnectionsController
+} 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 { SelectorModal } from '../../partials/w3m-selector-modal';
+import { Currency } from './components/Currency';
+import { getPurchaseCurrencies, getCurrencySuggestedValues } 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 styles from './styles';
+
+const MemoizedCurrency = memo(Currency);
+
+export function OnRampView() {
+  const { themeMode } = useSnapshot(ThemeController.state);
+  const Theme = useTheme();
+
+  const {
+    purchaseCurrency,
+    paymentCurrency,
+    paymentMethods,
+    selectedPaymentMethod,
+    paymentAmount,
+    quotesLoading,
+    selectedQuote,
+    error,
+    loading,
+    initialLoading
+  } = useSnapshot(OnRampController.state) as OnRampControllerState;
+  const { activeNetwork } = useSnapshot(ConnectionsController.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 getQuotes = useCallback(() => {
+    if (OnRampController.canGenerateQuote()) {
+      OnRampController.getQuotes();
+    }
+  }, []);
+
+  const getProviderButtonText = () => {
+    if (selectedQuote) {
+      return 'via ';
+    }
+
+    if (!paymentAmount) {
+      return 'Enter an amount';
+    }
+
+    if (!paymentMethods?.length) {
+      return 'No payment methods available';
+    }
+
+    return 'Select a provider';
+  };
+
+  const onValueChange = (value: number) => {
+    UiUtil.animateChange();
+    if (!value) {
+      OnRampController.abortGetQuotes();
+      OnRampController.setPaymentAmount(0);
+      OnRampController.setSelectedQuote(undefined);
+      OnRampController.clearError();
+
+      return;
+    }
+
+    OnRampController.setPaymentAmount(value);
+    OnRampController.getQuotesDebounced();
+  };
+
+  const onSuggestedValuePress = (value: number) => {
+    UiUtil.animateChange();
+    OnRampController.setPaymentAmount(value);
+    getQuotes();
+  };
+
+  const handleSearch = (value: string) => {
+    setSearchValue(value);
+  };
+
+  const handleContinue = async () => {
+    if (OnRampController.state.selectedQuote) {
+      RouterController.push('OnRampCheckout');
+    }
+  };
+
+  const renderCurrencyItem = ({ item }: { item: OnRampCryptoCurrency }) => {
+    return (
+      <MemoizedCurrency
+        item={item}
+        onPress={onPressPurchaseCurrency}
+        selected={item.currencyCode === purchaseCurrency?.currencyCode}
+        title={item.name}
+        subtitle={item.currencyCode.split('_')[0] ?? item.currencyCode}
+        testID={`currency-item-${item.currencyCode}`}
+      />
+    );
+  };
+
+  const onPressPurchaseCurrency = (item: any) => {
+    setIsCurrencyModalVisible(false);
+    setIsPaymentMethodModalVisible(false);
+    setSearchValue('');
+    OnRampController.setPurchaseCurrency(item as OnRampCryptoCurrency);
+    getQuotes();
+  };
+
+  const onModalClose = () => {
+    setSearchValue('');
+    setIsCurrencyModalVisible(false);
+    setIsPaymentMethodModalVisible(false);
+  };
+
+  useEffect(() => {
+    getQuotes();
+  }, [selectedPaymentMethod, getQuotes]);
+
+  useEffect(() => {
+    if (error?.type === ConstantsUtil.ONRAMP_ERROR_TYPES.FAILED_TO_LOAD) {
+      SnackController.showInternalError({
+        shortMessage: 'Failed to load data. Please try again later.',
+        longMessage: error?.message
+      });
+      RouterController.goBack();
+    }
+  }, [error]);
+
+  useEffect(() => {
+    if (OnRampController.state.countries.length === 0) {
+      OnRampController.loadOnRampData();
+    }
+  }, []);
+
+  if (initialLoading || OnRampController.state.countries.length === 0) {
+    return <LoadingView />;
+  }
+
+  return (
+    <>
+      <Header onSettingsPress={() => RouterController.push('OnRampSettings')} />
+      <ScrollView bounces={false}>
+        <FlexView padding={['s', 'l', '4xl', 'l']}>
+          <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
+            <Text variant="small-400" color="fg-150">
+              You Buy
+            </Text>
+            <TokenButton
+              placeholder={'Select currency'}
+              imageUrl={purchaseCurrency?.symbolImageUrl}
+              text={purchaseCurrencyCode}
+              onPress={() => setIsCurrencyModalVisible(true)}
+              testID="currency-selector"
+              chevron
+              renderClip={
+                networkImage ? (
+                  <Image
+                    source={networkImage}
+                    style={[styles.networkImage, { borderColor: Theme['bg-300'] }]}
+                  />
+                ) : null
+              }
+            />
+          </FlexView>
+          <CurrencyInput
+            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 ||
+              error?.type === ConstantsUtil.ONRAMP_ERROR_TYPES.INVALID_AMOUNT
+            }
+            loading={loading || quotesLoading}
+            purchaseValue={`${
+              selectedQuote?.destinationAmount
+                ? NumberUtil.roundNumber(selectedQuote.destinationAmount, 6, 5)?.toString()
+                : '0.00'
+            } ${purchaseCurrencyCode ?? ''}`}
+            onValueChange={onValueChange}
+            style={styles.currencyInput}
+          />
+          <ListItem
+            chevron
+            backgroundColor="gray-glass-005"
+            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"
+            justifyContent="center"
+            margin={['m', '0', '0', '0']}
+          >
+            <Button variant="shade" style={styles.cancelButton} onPress={RouterController.goBack}>
+              Cancel
+            </Button>
+            <Button
+              style={styles.continueButton}
+              onPress={handleContinue}
+              disabled={quotesLoading || loading || !selectedQuote}
+              testID="button-continue"
+            >
+              Continue
+            </Button>
+          </FlexView>
+          <SelectPaymentModal
+            visible={isPaymentMethodModalVisible}
+            onClose={onModalClose}
+            title="Payment"
+          />
+          <SelectorModal
+            selectedItem={purchaseCurrency}
+            visible={isCurrencyModalVisible}
+            onClose={onModalClose}
+            items={getPurchaseCurrencies(searchValue, true)}
+            onSearch={handleSearch}
+            renderItem={renderCurrencyItem}
+            keyExtractor={item => item.currencyCode}
+            title="Select token"
+            itemHeight={CURRENCY_ITEM_HEIGHT}
+            showNetwork
+          />
+        </FlexView>
+      </ScrollView>
+    </>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  continueButton: {
+    marginLeft: Spacing.m,
+    flex: 3
+  },
+  cancelButton: {
+    flex: 1
+  },
+  paymentMethodButton: {
+    borderRadius: BorderRadius.s,
+    height: 64
+  },
+  paymentMethodImage: {
+    width: 20,
+    height: 20,
+    borderRadius: 0
+  },
+  paymentMethodImageContainer: {
+    width: 40,
+    height: 40,
+    borderWidth: 0,
+    borderRadius: BorderRadius['3xs']
+  },
+  currencyInput: {
+    marginBottom: Spacing.m
+  },
+  providerImage: {
+    height: 16,
+    width: 16,
+    marginRight: 2
+  },
+  networkImage: {
+    height: 14,
+    width: 14,
+    borderRadius: BorderRadius.full,
+    borderWidth: 1
+  }
+});