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

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

@@ -7,30 +7,28 @@ import {
   ThemeController,
   RouterController,
   type OnRampControllerState,
-  AssetUtil,
   SnackController,
   ConstantsUtil,
-  ConnectionsController
+  ConnectionsController,
+  AssetController
 } 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 { 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 +40,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 = activeNetwork ? networkImages[activeNetwork.id] : undefined;
 
   const getQuotes = useCallback(() => {
     if (OnRampController.canGenerateQuote()) {
@@ -67,24 +64,41 @@ export function OnRampView() {
     }
   }, []);
 
-  const getProviderButtonText = () => {
-    if (selectedQuote) {
-      return 'via ';
+  const getPaymentButtonTitle = () => {
+    if (selectedPaymentMethod) {
+      return selectedPaymentMethod.name;
+    }
+
+    if (quotesLoading) {
+      return 'Loading quotes';
     }
 
-    if (!paymentAmount) {
-      return 'Enter an amount';
+    if (!paymentAmount || quotes?.length === 0) {
+      return 'Enter a valid amount';
     }
 
-    if (!paymentMethods?.length) {
-      return 'No payment methods available';
+    return '';
+  };
+
+  const getPaymentButtonSubtitle = () => {
+    if (selectedQuote) {
+      return StringUtil.capitalize(selectedQuote?.serviceProvider);
+    }
+
+    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 +109,7 @@ export function OnRampView() {
     }
 
     OnRampController.setPaymentAmount(value);
-    OnRampController.getQuotesDebounced();
-  };
-
-  const onSuggestedValuePress = (value: number) => {
-    UiUtil.animateChange();
-    OnRampController.setPaymentAmount(value);
-    getQuotes();
+    getQuotesDebounced();
   };
 
   const handleSearch = (value: string) => {
@@ -141,10 +149,6 @@ export function OnRampView() {
     setIsPaymentMethodModalVisible(false);
   };
 
-  useEffect(() => {
-    getQuotes();
-  }, [selectedPaymentMethod, getQuotes]);
-
   useEffect(() => {
     if (error?.type === ConstantsUtil.ONRAMP_ERROR_TYPES.FAILED_TO_LOAD) {
       SnackController.showInternalError({
@@ -195,8 +199,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 +213,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"

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

@@ -37,5 +37,9 @@ export default StyleSheet.create({
     width: 14,
     borderRadius: BorderRadius.full,
     borderWidth: 1
+  },
+  paymentButtonMock: {
+    borderRadius: BorderRadius.s,
+    height: 64
   }
 });

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

@@ -1,13 +1,17 @@
 import {
   OnRampController,
-  NetworkController,
-  type OnRampFiatCurrency,
-  ConstantsUtil
+  ConnectionsController,
+  CoreHelperUtil
 } from '@reown/appkit-core-react-native';
 
 // -------------------------- Utils --------------------------
 export const getPurchaseCurrencies = (searchValue?: string, filterSelected?: boolean) => {
-  const networkId = NetworkController.state.caipNetwork?.id?.split(':')[1];
+  const networkId = getNetworkId();
+
+  if (!networkId) {
+    return [];
+  }
+
   let networkTokens =
     OnRampController.state.purchaseCurrencies?.filter(c => c.chainId === networkId) ?? [];
 
@@ -21,104 +25,30 @@ export const getPurchaseCurrencies = (searchValue?: string, filterSelected?: boo
     ? networkTokens.filter(
         item =>
           item.name.toLowerCase().includes(searchValue) ||
-          item.currencyCode.toLowerCase().includes(searchValue)
+          item.currencyCode.toLowerCase()?.split('_')?.[0]?.includes(searchValue)
       )
     : networkTokens;
 };
 
-// Helper function to generate values based on limits and default value
-function generateValuesFromLimits(
-  minAmount: number,
-  maxAmount: number,
-  defaultAmount?: number | null
-): number[] {
-  // 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;
+export const getQuotesDebounced = CoreHelperUtil.debounce(function () {
+  OnRampController.getQuotes();
+}, 500);
 
-  // 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);
+export const getNetworkId = (): string | undefined => {
+  const [namespace, chainId] =
+    ConnectionsController.state.activeNetwork?.caipNetworkId?.split(':') ?? [];
 
-  // Round all values to nice numbers
-  return [safeValue1, safeValue2, safeValue3].map(v => roundToNiceNumber(v));
-}
-
-// Helper function to round to nice numbers
-function roundToNiceNumber(value: number): number {
-  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;
+  if (!namespace || !chainId) {
+    return undefined;
   }
-}
-
-export const getCurrencySuggestedValues = (currency?: OnRampFiatCurrency) => {
-  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 as keyof typeof ConstantsUtil.CURRENCY_SUGGESTED_VALUES
-    ]
-  ) {
-    const suggestedValues =
-      ConstantsUtil.CURRENCY_SUGGESTED_VALUES[
-        currency.currencyCode as keyof typeof ConstantsUtil.CURRENCY_SUGGESTED_VALUES
-      ];
-
-    // 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: number) => 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;
+  if (namespace === 'solana') {
+    return '101'; // Solana mainnet on Meld
   }
 
-  // Fallback to generating values from limits
-  if (limit) {
-    const minAmount = limit.minimumAmount ?? 0;
-    const maxAmount = limit.maximumAmount ?? Infinity;
-
-    return generateValuesFromLimits(minAmount, maxAmount, limit?.defaultAmount);
+  if (namespace === 'bip122') {
+    return `${namespace}:${chainId}`; // Bitcoin mainnet
   }
 
-  return [];
+  return chainId;
 };

package/src/views/w3m-swap-preview-view/index.tsx

@@ -46,6 +46,7 @@ export function SwapPreviewView() {
     loadingQuote || loadingBuildTransaction || loadingTransaction || loadingApprovalTransaction;
 
   const onCancel = () => {
+    SwapController.clearTransactionLoaders();
     RouterController.goBack();
   };
 
@@ -86,11 +87,14 @@ export function SwapPreviewView() {
               Send
             </Text>
             <Text variant="paragraph-400" color="fg-100">
-              ${UiUtil.formatNumberToLocalString(sourceTokenMarketValue, 2)}
+              ${UiUtil.formatNumberToLocalString(sourceTokenMarketValue, 6)}
             </Text>
           </FlexView>
           <TokenButton
-            text={` ${sourceTokenAmount} ${sourceToken?.symbol}`}
+            text={` ${UiUtil.formatNumberToLocalString(
+              sourceTokenAmount,
+              8
+            )} ${sourceToken?.symbol}`}
             imageUrl={sourceToken?.logoUri}
             inverse
             disabled
@@ -103,7 +107,7 @@ export function SwapPreviewView() {
               Receive
             </Text>
             <Text variant="paragraph-400" color="fg-100">
-              ${UiUtil.formatNumberToLocalString(toTokenMarketValue, 2)}
+              ${UiUtil.formatNumberToLocalString(toTokenMarketValue, 6)}
             </Text>
           </FlexView>
           <TokenButton

package/src/views/{w3m-swap-select-token-view → w3m-swap-view/components/select-token-view}/index.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { ScrollView, SectionList, type SectionListData } from 'react-native';
+import { ScrollView, SectionList, View, type SectionListData } from 'react-native';
 import {
   FlexView,
+  IconLink,
   InputText,
   ListToken,
   ListTokenTotalHeight,
@@ -13,35 +14,47 @@ import {
 } from '@reown/appkit-ui-react-native';
 
 import {
-  AssetUtil,
+  AssetController,
   ConnectionsController,
-  RouterController,
   SwapController,
+  type SwapControllerState,
+  type SwapInputTarget,
   type SwapTokenWithBalance
 } from '@reown/appkit-core-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { Placeholder } from '../../partials/w3m-placeholder';
+import { useCustomDimensions } from '../../../../hooks/useCustomDimensions';
+import { Placeholder } from '../../../../partials/w3m-placeholder';
 import styles from './styles';
 import { createSections } from './utils';
 
-export function SwapSelectTokenView() {
+interface Props {
+  onClose: () => void;
+  type?: SwapInputTarget;
+}
+
+export function SwapSelectTokenView({ onClose, type }: Props) {
   const { padding } = useCustomDimensions();
   const Theme = useTheme();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const { sourceToken, suggestedTokens } = useSnapshot(SwapController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const { sourceToken, suggestedTokens, myTokensWithBalance } = useSnapshot(
+    SwapController.state
+  ) as SwapControllerState;
+
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
   const [tokenSearch, setTokenSearch] = useState<string>('');
-  const isSourceToken = RouterController.state.data?.swapTarget === 'sourceToken';
+  const isSourceToken = type === 'sourceToken';
 
-  const [filteredTokens, setFilteredTokens] = useState(createSections(isSourceToken, tokenSearch));
+  const [filteredTokens, setFilteredTokens] = useState(
+    createSections(isSourceToken, tokenSearch, myTokensWithBalance)
+  );
   const suggestedList = suggestedTokens
     ?.filter(token => token.address !== SwapController.state.sourceToken?.address)
     .slice(0, 8);
 
   const onSearchChange = (value: string) => {
     setTokenSearch(value);
-    setFilteredTokens(createSections(isSourceToken, value));
+    setFilteredTokens(createSections(isSourceToken, value, myTokensWithBalance));
   };
 
   const onTokenPress = (token: SwapTokenWithBalance) => {
@@ -53,14 +66,30 @@ export function SwapSelectTokenView() {
         SwapController.swapTokens();
       }
     }
-    RouterController.goBack();
+    onClose();
   };
 
   return (
     <FlexView
-      margin={['l', '0', '2xl', '0']}
-      style={[styles.container, { paddingHorizontal: padding }]}
+      padding={['xl', '0', '0', '0']}
+      style={[
+        styles.container,
+        {
+          paddingHorizontal: padding,
+          backgroundColor: Theme['bg-100']
+        }
+      ]}
     >
+      <FlexView
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+        padding={['0', 'm', 'm', 'm']}
+      >
+        <IconLink icon="chevronLeft" size="md" onPress={onClose} />
+        <Text variant="paragraph-600">Select token</Text>
+        <View style={styles.iconPlaceholder} />
+      </FlexView>
       <FlexView>
         <InputText
           value={tokenSearch}

package/src/views/{w3m-swap-select-token-view → w3m-swap-view/components/select-token-view}/styles.ts

@@ -1,10 +1,15 @@
 import { StyleSheet } from 'react-native';
-import { Spacing } from '@reown/appkit-ui-react-native';
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
 
 export default StyleSheet.create({
   container: {
-    minHeight: 250,
-    maxHeight: 600
+    borderRadius: BorderRadius.l,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    overflow: 'hidden',
+    marginTop: 80,
+    flex: 1
   },
   title: {
     paddingTop: Spacing['2xs']
@@ -26,5 +31,9 @@ export default StyleSheet.create({
   },
   suggestedSeparator: {
     marginVertical: Spacing.s
+  },
+  iconPlaceholder: {
+    height: 32,
+    width: 32
   }
 });

package/src/views/{w3m-swap-select-token-view → w3m-swap-view/components/select-token-view}/utils.ts

@@ -1,25 +1,30 @@
 import { SwapController, type SwapTokenWithBalance } from '@reown/appkit-core-react-native';
 
-export function filterTokens(tokens: SwapTokenWithBalance[], searchValue?: string) {
+export function filterTokens(tokens?: SwapTokenWithBalance[], searchValue?: string) {
+  if (!tokens) {
+    return [];
+  }
+
   if (!searchValue) {
     return tokens;
   }
 
   return tokens.filter(
     token =>
-      token.name.toLowerCase().includes(searchValue.toLowerCase()) ||
+      token.name?.toLowerCase().includes(searchValue.toLowerCase()) ||
       token.symbol.toLowerCase().includes(searchValue.toLowerCase())
   );
 }
 
-export function createSections(isSourceToken: boolean, searchValue: string) {
-  const myTokensFiltered = filterTokens(
-    SwapController.state.myTokensWithBalance ?? [],
-    searchValue
-  );
+export function createSections(
+  isSourceToken: boolean,
+  searchValue: string,
+  balances?: SwapTokenWithBalance[]
+) {
+  const myTokensFiltered = filterTokens(balances ?? [], searchValue);
   const popularFiltered = isSourceToken
     ? []
-    : filterTokens(SwapController.getFilteredPopularTokens() ?? [], searchValue);
+    : filterTokens(SwapController.getFilteredPopularTokens(balances), searchValue);
 
   const sections = [];
   if (myTokensFiltered.length > 0) {