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

package/lib/module/views/w3m-onramp-view/components/SelectPaymentModal.js

@@ -0,0 +1,211 @@
+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 } 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';
+const SEPARATOR_HEIGHT = Spacing.s;
+export function SelectPaymentModal({
+  title,
+  visible,
+  onClose
+}) {
+  const Theme = useTheme();
+  const {
+    selectedQuote,
+    quotes
+  } = useSnapshot(OnRampController.state);
+  const paymentMethodsRef = useRef(null);
+  const [paymentMethods, setPaymentMethods] = useState(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 /*#__PURE__*/React.createElement(View, {
+      style: {
+        height: SEPARATOR_HEIGHT
+      }
+    });
+  };
+  const handleQuotePress = quote => {
+    if (quote.serviceProvider !== OnRampController.state.selectedQuote?.serviceProvider) {
+      OnRampController.setSelectedQuote(quote);
+    }
+    onClose();
+  };
+  const handlePaymentMethodPress = paymentMethod => {
+    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
+  }) => {
+    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 /*#__PURE__*/React.createElement(Quote, {
+      item: item,
+      selected: selected,
+      logoURL: logoURL,
+      onQuotePress: () => handleQuotePress(item),
+      tagText: tagText
+    });
+  };
+  const renderEmpty = () => {
+    return OnRampController.state.quotesLoading ? /*#__PURE__*/React.createElement(FlexView, {
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "2xl",
+      style: styles.emptyContainer
+    }, /*#__PURE__*/React.createElement(LoadingSpinner, null)) : /*#__PURE__*/React.createElement(Placeholder, {
+      title: "No providers available",
+      description: "Please select a different payment method or increase the amount",
+      icon: "warningCircle"
+    });
+  };
+  const renderPaymentMethod = ({
+    item
+  }) => {
+    const parsedItem = item;
+    const selected = parsedItem.paymentMethod === OnRampController.state.selectedPaymentMethod?.paymentMethod;
+    return /*#__PURE__*/React.createElement(PaymentMethod, {
+      item: parsedItem,
+      onPress: () => handlePaymentMethodPress(parsedItem),
+      selected: selected,
+      testID: `payment-method-item-${parsedItem.paymentMethod}`
+    });
+  };
+  return /*#__PURE__*/React.createElement(Modal, {
+    isVisible: visible,
+    useNativeDriver: true,
+    useNativeDriverForBackdrop: true,
+    statusBarTranslucent: true,
+    hideModalContentWhileAnimating: true,
+    onBackdropPress: onClose,
+    onDismiss: onClose,
+    style: styles.modal
+  }, /*#__PURE__*/React.createElement(FlexView, {
+    style: [styles.container, {
+      backgroundColor: Theme['bg-100']
+    }]
+  }, /*#__PURE__*/React.createElement(FlexView, {
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(IconLink, {
+    icon: "arrowLeft",
+    onPress: onClose,
+    testID: "payment-modal-button-back"
+  }), !!title && /*#__PURE__*/React.createElement(Text, {
+    variant: "paragraph-600"
+  }, title), /*#__PURE__*/React.createElement(View, {
+    style: styles.iconPlaceholder
+  })), /*#__PURE__*/React.createElement(Text, {
+    variant: "small-500",
+    color: "fg-150",
+    style: styles.subtitle
+  }, "Pay with"), /*#__PURE__*/React.createElement(FlexView, null, /*#__PURE__*/React.createElement(FlatList, {
+    data: paymentMethods,
+    renderItem: renderPaymentMethod,
+    ref: paymentMethodsRef,
+    style: styles.paymentMethodsContainer,
+    contentContainerStyle: styles.paymentMethodsContent,
+    fadingEdgeLength: 20,
+    keyExtractor: item => item.paymentMethod,
+    horizontal: true,
+    showsHorizontalScrollIndicator: false
+  })), /*#__PURE__*/React.createElement(Separator, {
+    style: styles.separator,
+    color: "gray-glass-010"
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "small-500",
+    color: "fg-150",
+    style: styles.subtitle
+  }, "Providers"), /*#__PURE__*/React.createElement(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
+    })
+  })));
+}
+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
+  }
+});
+//# sourceMappingURL=SelectPaymentModal.js.map

package/lib/module/views/w3m-onramp-view/components/SelectPaymentModal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useSnapshot","useRef","useState","useMemo","Modal","Dimensions","FlatList","StyleSheet","View","FlexView","IconLink","Spacing","Text","useTheme","Separator","LoadingSpinner","BorderRadius","OnRampController","Placeholder","Quote","ITEM_HEIGHT","QUOTE_ITEM_HEIGHT","PaymentMethod","ITEM_SIZE","SEPARATOR_HEIGHT","s","SelectPaymentModal","title","visible","onClose","Theme","selectedQuote","quotes","state","paymentMethodsRef","paymentMethods","setPaymentMethods","sortedQuotes","filter","quote","serviceProvider","renderSeparator","React","createElement","style","height","handleQuotePress","setSelectedQuote","handlePaymentMethodPress","paymentMethod","selectedPaymentMethod","setSelectedPaymentMethod","visibleItemsCount","Math","round","get","width","length","paymentIndex","findIndex","method","realIndex","newPaymentMethods","slice","current","scrollToIndex","index","animated","renderQuote","item","logoURL","getServiceProviderImage","selected","isBestDeal","tagText","lowKyc","undefined","onQuotePress","renderEmpty","quotesLoading","alignItems","justifyContent","padding","styles","emptyContainer","description","icon","renderPaymentMethod","parsedItem","onPress","testID","isVisible","useNativeDriver","useNativeDriverForBackdrop","statusBarTranslucent","hideModalContentWhileAnimating","onBackdropPress","onDismiss","modal","container","backgroundColor","flexDirection","header","variant","iconPlaceholder","color","subtitle","data","renderItem","ref","paymentMethodsContainer","contentContainerStyle","paymentMethodsContent","fadingEdgeLength","keyExtractor","horizontal","showsHorizontalScrollIndicator","separator","bounces","listContent","ItemSeparatorComponent","ListEmptyComponent","paymentMethodType","getItemLayout","_","offset","create","margin","marginBottom","l","paddingHorizontal","m","paddingTop","borderTopLeftRadius","borderTopRightRadius","marginVertical","marginHorizontal","paddingBottom","xs","paddingLeft"],"sourceRoot":"../../../../../src","sources":["views/w3m-onramp-view/components/SelectPaymentModal.tsx"],"mappings":"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"}

package/lib/module/views/w3m-onramp-view/index.js

@@ -0,0 +1,228 @@
+import { useSnapshot } from 'valtio';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { ScrollView } from 'react-native';
+import { OnRampController, ThemeController, RouterController, 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 = /*#__PURE__*/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);
+  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 => {
+    UiUtil.animateChange();
+    if (!value) {
+      OnRampController.abortGetQuotes();
+      OnRampController.setPaymentAmount(0);
+      OnRampController.setSelectedQuote(undefined);
+      OnRampController.clearError();
+      return;
+    }
+    OnRampController.setPaymentAmount(value);
+    OnRampController.getQuotesDebounced();
+  };
+  const onSuggestedValuePress = value => {
+    UiUtil.animateChange();
+    OnRampController.setPaymentAmount(value);
+    getQuotes();
+  };
+  const handleSearch = value => {
+    setSearchValue(value);
+  };
+  const handleContinue = async () => {
+    if (OnRampController.state.selectedQuote) {
+      RouterController.push('OnRampCheckout');
+    }
+  };
+  const renderCurrencyItem = ({
+    item
+  }) => {
+    return /*#__PURE__*/React.createElement(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 => {
+    setIsCurrencyModalVisible(false);
+    setIsPaymentMethodModalVisible(false);
+    setSearchValue('');
+    OnRampController.setPurchaseCurrency(item);
+    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 /*#__PURE__*/React.createElement(LoadingView, null);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    onSettingsPress: () => RouterController.push('OnRampSettings')
+  }), /*#__PURE__*/React.createElement(ScrollView, {
+    bounces: false
+  }, /*#__PURE__*/React.createElement(FlexView, {
+    padding: ['s', 'l', '4xl', 'l']
+  }, /*#__PURE__*/React.createElement(FlexView, {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "small-400",
+    color: "fg-150"
+  }, "You Buy"), /*#__PURE__*/React.createElement(TokenButton, {
+    placeholder: 'Select currency',
+    imageUrl: purchaseCurrency?.symbolImageUrl,
+    text: purchaseCurrencyCode,
+    onPress: () => setIsCurrencyModalVisible(true),
+    testID: "currency-selector",
+    chevron: true,
+    renderClip: networkImage ? /*#__PURE__*/React.createElement(Image, {
+      source: networkImage,
+      style: [styles.networkImage, {
+        borderColor: Theme['bg-300']
+      }]
+    }) : null
+  })), /*#__PURE__*/React.createElement(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
+  }), /*#__PURE__*/React.createElement(ListItem, {
+    chevron: true,
+    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"
+  }, /*#__PURE__*/React.createElement(FlexView, null, selectedPaymentMethod?.name && /*#__PURE__*/React.createElement(Text, {
+    variant: "paragraph-400",
+    color: "fg-100"
+  }, selectedPaymentMethod.name), getProviderButtonText() && /*#__PURE__*/React.createElement(FlexView, {
+    flexDirection: "row",
+    alignItems: "center",
+    margin: ['3xs', '0', '0', '0']
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "small-400",
+    color: "fg-150"
+  }, getProviderButtonText()), selectedQuote && /*#__PURE__*/React.createElement(React.Fragment, null, providerImage && /*#__PURE__*/React.createElement(Image, {
+    source: providerImage,
+    style: styles.providerImage
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: "small-400",
+    color: "fg-150"
+  }, StringUtil.capitalize(selectedQuote?.serviceProvider)))))), /*#__PURE__*/React.createElement(FlexView, {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: ['m', '0', '0', '0']
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "shade",
+    style: styles.cancelButton,
+    onPress: RouterController.goBack
+  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+    style: styles.continueButton,
+    onPress: handleContinue,
+    disabled: quotesLoading || loading || !selectedQuote,
+    testID: "button-continue"
+  }, "Continue")), /*#__PURE__*/React.createElement(SelectPaymentModal, {
+    visible: isPaymentMethodModalVisible,
+    onClose: onModalClose,
+    title: "Payment"
+  }), /*#__PURE__*/React.createElement(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: true
+  }))));
+}
+//# sourceMappingURL=index.js.map

package/lib/module/views/w3m-onramp-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useSnapshot","memo","useCallback","useEffect","useState","ScrollView","OnRampController","ThemeController","RouterController","AssetUtil","SnackController","ConstantsUtil","ConnectionsController","Button","FlexView","Image","ListItem","Text","TokenButton","useTheme","NumberUtil","StringUtil","SelectorModal","Currency","getPurchaseCurrencies","getCurrencySuggestedValues","CurrencyInput","SelectPaymentModal","ITEM_HEIGHT","CURRENCY_ITEM_HEIGHT","Header","UiUtil","LoadingView","styles","MemoizedCurrency","OnRampView","themeMode","state","Theme","purchaseCurrency","paymentCurrency","paymentMethods","selectedPaymentMethod","paymentAmount","quotesLoading","selectedQuote","error","loading","initialLoading","activeNetwork","searchValue","setSearchValue","isCurrencyModalVisible","setIsCurrencyModalVisible","isPaymentMethodModalVisible","setIsPaymentMethodModalVisible","providerImage","getServiceProviderImage","serviceProvider","suggestedValues","purchaseCurrencyCode","currencyCode","split","networkImage","getNetworkImage","id","getQuotes","canGenerateQuote","getProviderButtonText","length","onValueChange","value","animateChange","abortGetQuotes","setPaymentAmount","setSelectedQuote","undefined","clearError","getQuotesDebounced","onSuggestedValuePress","handleSearch","handleContinue","push","renderCurrencyItem","item","React","createElement","onPress","onPressPurchaseCurrency","selected","title","name","subtitle","testID","setPurchaseCurrency","onModalClose","type","ONRAMP_ERROR_TYPES","FAILED_TO_LOAD","showInternalError","shortMessage","longMessage","message","goBack","countries","loadOnRampData","Fragment","onSettingsPress","bounces","padding","flexDirection","alignItems","justifyContent","variant","color","placeholder","imageUrl","symbolImageUrl","text","chevron","renderClip","source","style","borderColor","toString","symbol","isAmountError","AMOUNT_TOO_LOW","AMOUNT_TOO_HIGH","INVALID_AMOUNT","purchaseValue","destinationAmount","roundNumber","currencyInput","backgroundColor","paymentMethodButton","imageSrc","logos","imageStyle","paymentMethodImage","imageContainerStyle","paymentMethodImageContainer","disabled","margin","capitalize","cancelButton","continueButton","visible","onClose","selectedItem","items","onSearch","renderItem","keyExtractor","itemHeight","showNetwork"],"sourceRoot":"../../../../src","sources":["views/w3m-onramp-view/index.tsx"],"mappings":"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"}

package/lib/module/views/w3m-onramp-view/styles.js

@@ -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
+  }
+});
+//# sourceMappingURL=styles.js.map

package/lib/module/views/w3m-onramp-view/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","BorderRadius","Spacing","create","continueButton","marginLeft","m","flex","cancelButton","paymentMethodButton","borderRadius","s","height","paymentMethodImage","width","paymentMethodImageContainer","borderWidth","currencyInput","marginBottom","providerImage","marginRight","networkImage","full"],"sourceRoot":"../../../../src","sources":["views/w3m-onramp-view/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,YAAY,EAAEC,OAAO,QAAQ,+BAA+B;AAErE,eAAeF,UAAU,CAACG,MAAM,CAAC;EAC/BC,cAAc,EAAE;IACdC,UAAU,EAAEH,OAAO,CAACI,CAAC;IACrBC,IAAI,EAAE;EACR,CAAC;EACDC,YAAY,EAAE;IACZD,IAAI,EAAE;EACR,CAAC;EACDE,mBAAmB,EAAE;IACnBC,YAAY,EAAET,YAAY,CAACU,CAAC;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDC,kBAAkB,EAAE;IAClBC,KAAK,EAAE,EAAE;IACTF,MAAM,EAAE,EAAE;IACVF,YAAY,EAAE;EAChB,CAAC;EACDK,2BAA2B,EAAE;IAC3BD,KAAK,EAAE,EAAE;IACTF,MAAM,EAAE,EAAE;IACVI,WAAW,EAAE,CAAC;IACdN,YAAY,EAAET,YAAY,CAAC,KAAK;EAClC,CAAC;EACDgB,aAAa,EAAE;IACbC,YAAY,EAAEhB,OAAO,CAACI;EACxB,CAAC;EACDa,aAAa,EAAE;IACbP,MAAM,EAAE,EAAE;IACVE,KAAK,EAAE,EAAE;IACTM,WAAW,EAAE;EACf,CAAC;EACDC,YAAY,EAAE;IACZT,MAAM,EAAE,EAAE;IACVE,KAAK,EAAE,EAAE;IACTJ,YAAY,EAAET,YAAY,CAACqB,IAAI;IAC/BN,WAAW,EAAE;EACf;AACF,CAAC,CAAC"}

package/lib/module/views/w3m-onramp-view/utils.js

@@ -0,0 +1,90 @@
+import { OnRampController, NetworkController, ConstantsUtil } from '@reown/appkit-core-react-native';
+
+// -------------------------- Utils --------------------------
+export const getPurchaseCurrencies = (searchValue, filterSelected) => {
+  const networkId = NetworkController.state.caipNetwork?.id?.split(':')[1];
+  let networkTokens = OnRampController.state.purchaseCurrencies?.filter(c => c.chainId === networkId) ?? [];
+  if (filterSelected) {
+    networkTokens = networkTokens?.filter(c => c.currencyCode !== OnRampController.state.purchaseCurrency?.currencyCode);
+  }
+  return searchValue ? networkTokens.filter(item => item.name.toLowerCase().includes(searchValue) || item.currencyCode.toLowerCase().includes(searchValue)) : networkTokens;
+};
+
+// Helper function to generate values based on limits and default value
+function generateValuesFromLimits(minAmount, maxAmount, defaultAmount) {
+  // Use default amount if provided, otherwise calculate a reasonable default
+  const baseAmount = defaultAmount || Math.min(maxAmount, Math.max(minAmount * 5, 50));
+
+  // Generate two values less than the default and the default itself
+  const value1 = Math.max(minAmount, baseAmount * 0.5);
+  const value2 = Math.max(minAmount, baseAmount * 0.75);
+  const value3 = baseAmount;
+
+  // Ensure all values are within the maximum limit
+  const safeValue1 = Math.min(value1, maxAmount);
+  const safeValue2 = Math.min(value2, maxAmount);
+  const safeValue3 = Math.min(value3, maxAmount);
+
+  // Round all values to nice numbers
+  return [safeValue1, safeValue2, safeValue3].map(v => roundToNiceNumber(v));
+}
+
+// Helper function to round to nice numbers
+function roundToNiceNumber(value) {
+  if (value < 10) return Math.ceil(value);
+  if (value < 100) {
+    // Round to nearest 10
+    return Math.ceil(value / 10) * 10;
+  } else if (value < 1000) {
+    // Round to nearest 50
+    return Math.ceil(value / 50) * 50;
+  } else if (value < 10000) {
+    // Round to nearest 100
+    return Math.ceil(value / 100) * 100;
+  } else if (value < 100000) {
+    // Round to nearest 1000
+    return Math.ceil(value / 1000) * 1000;
+  } else if (value < 1000000) {
+    // Round to nearest 10000
+    return Math.ceil(value / 10000) * 10000;
+  } else {
+    // Round to nearest 100000
+    return Math.ceil(value / 100000) * 100000;
+  }
+}
+export const getCurrencySuggestedValues = currency => {
+  if (!currency) return [];
+  const limit = OnRampController.getCurrencyLimit(currency);
+
+  // If we have predefined values for this currency, use them
+  if (ConstantsUtil.CURRENCY_SUGGESTED_VALUES[currency.currencyCode]) {
+    const suggestedValues = ConstantsUtil.CURRENCY_SUGGESTED_VALUES[currency.currencyCode];
+
+    // Ensure values are within limits
+    if (limit) {
+      const minAmount = limit.minimumAmount ?? 0;
+      const maxAmount = limit.maximumAmount ?? Infinity;
+
+      // Filter values that are within limits
+      const validValues = suggestedValues?.filter(value => value >= minAmount && value <= maxAmount);
+
+      // If we have valid values, return them
+      if (validValues?.length) {
+        return validValues;
+      }
+
+      // If no valid values, generate new ones based on limits and default
+      return generateValuesFromLimits(minAmount, maxAmount, limit?.defaultAmount);
+    }
+    return suggestedValues;
+  }
+
+  // Fallback to generating values from limits
+  if (limit) {
+    const minAmount = limit.minimumAmount ?? 0;
+    const maxAmount = limit.maximumAmount ?? Infinity;
+    return generateValuesFromLimits(minAmount, maxAmount, limit?.defaultAmount);
+  }
+  return [];
+};
+//# sourceMappingURL=utils.js.map

package/lib/module/views/w3m-onramp-view/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["OnRampController","NetworkController","ConstantsUtil","getPurchaseCurrencies","searchValue","filterSelected","networkId","state","caipNetwork","id","split","networkTokens","purchaseCurrencies","filter","c","chainId","currencyCode","purchaseCurrency","item","name","toLowerCase","includes","generateValuesFromLimits","minAmount","maxAmount","defaultAmount","baseAmount","Math","min","max","value1","value2","value3","safeValue1","safeValue2","safeValue3","map","v","roundToNiceNumber","value","ceil","getCurrencySuggestedValues","currency","limit","getCurrencyLimit","CURRENCY_SUGGESTED_VALUES","suggestedValues","minimumAmount","maximumAmount","Infinity","validValues","length"],"sourceRoot":"../../../../src","sources":["views/w3m-onramp-view/utils.ts"],"mappings":"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"}