@reown/appkit-react-native 2.0.0-alpha.1 → 2.0.0-alpha.3

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

@@ -1,25 +1,15 @@
 import { useSnapshot } from 'valtio';
 import { useEffect } from 'react';
-import { Platform, ScrollView } from 'react-native';
+import { ScrollView } from 'react-native';
 import { NumberUtil } from '@reown/appkit-common-react-native';
 import { RouterController, SwapController } from '@reown/appkit-core-react-native';
-import {
-  Button,
-  FlexView,
-  Icon,
-  Spacing,
-  Text,
-  TokenButton,
-  UiUtil
-} from '@reown/appkit-ui-react-native';
+import { Button, FlexView, Icon, Text, TokenButton, UiUtil } from '@reown/appkit-ui-react-native';
 import { SwapDetails } from '../../partials/w3m-swap-details';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { useKeyboard } from '../../hooks/useKeyboard';
 import styles from './styles';
 
 export function SwapPreviewView() {
   const { padding } = useCustomDimensions();
-  const { keyboardShown, keyboardHeight } = useKeyboard();
   const {
     sourceToken,
     sourceTokenAmount,
@@ -37,15 +27,11 @@ export function SwapPreviewView() {
     NumberUtil.parseLocalStringToNumber(sourceTokenAmount) * sourceTokenPriceInUSD;
   const toTokenMarketValue = NumberUtil.parseLocalStringToNumber(toTokenAmount) * toTokenPriceInUSD;
 
-  const paddingBottom = Platform.select({
-    android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
-    default: Spacing['2xl']
-  });
-
   const loading =
     loadingQuote || loadingBuildTransaction || loadingTransaction || loadingApprovalTransaction;
 
   const onCancel = () => {
+    SwapController.clearTransactionLoaders();
     RouterController.goBack();
   };
 
@@ -74,12 +60,8 @@ export function SwapPreviewView() {
   }, []);
 
   return (
-    <ScrollView
-      style={{ paddingHorizontal: padding }}
-      bounces={false}
-      keyboardShouldPersistTaps="always"
-    >
-      <FlexView padding="l" justifyContent="center" style={{ paddingBottom }}>
+    <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
+      <FlexView padding={['l', 'l', '2xl', 'l']} justifyContent="center">
         <FlexView flexDirection="row" justifyContent="space-between">
           <FlexView>
             <Text variant="small-400" color="fg-150">

package/src/views/w3m-swap-preview-view/styles.ts

@@ -14,5 +14,8 @@ export default StyleSheet.create({
   sendButton: {
     marginLeft: Spacing.s,
     flex: 3
+  },
+  withKeyboard: {
+    height: '100%'
   }
 });

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

@@ -1,8 +1,16 @@
 import { useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { ScrollView, SectionList, type SectionListData } from 'react-native';
+import {
+  ScrollView,
+  SectionList,
+  View,
+  type SectionListData,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
 import {
   FlexView,
+  IconLink,
   InputText,
   ListToken,
   ListTokenTotalHeight,
@@ -13,35 +21,49 @@ import {
 } from '@reown/appkit-ui-react-native';
 
 import {
+  AssetController,
   AssetUtil,
   ConnectionsController,
-  RouterController,
   SwapController,
-  type SwapTokenWithBalance
+  type SwapControllerState
 } from '@reown/appkit-core-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { Placeholder } from '../../partials/w3m-placeholder';
+import { type SwapInputTarget, type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
+
+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;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SwapSelectTokenView({ onClose, type, style }: 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 = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   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 +75,31 @@ 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']
+        },
+        style
+      ]}
     >
+      <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,14 @@
 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
   },
   title: {
     paddingTop: Spacing['2xs']
@@ -26,5 +30,9 @@ export default StyleSheet.create({
   },
   suggestedSeparator: {
     marginVertical: Spacing.s
+  },
+  iconPlaceholder: {
+    height: 32,
+    width: 32
   }
 });

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

@@ -0,0 +1,39 @@
+import { type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
+import { SwapController } from '@reown/appkit-core-react-native';
+
+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.symbol.toLowerCase().includes(searchValue.toLowerCase())
+  );
+}
+
+export function createSections(
+  isSourceToken: boolean,
+  searchValue: string,
+  balances?: SwapTokenWithBalance[]
+) {
+  const myTokensFiltered = filterTokens(balances ?? [], searchValue);
+  const popularFiltered = isSourceToken
+    ? []
+    : filterTokens(SwapController.getFilteredPopularTokens(balances), searchValue);
+
+  const sections = [];
+  if (myTokensFiltered.length > 0) {
+    sections.push({ title: 'Your tokens', data: myTokensFiltered });
+  }
+  if (popularFiltered.length > 0) {
+    sections.push({ title: 'Popular tokens', data: popularFiltered });
+  }
+
+  return sections;
+}

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

@@ -1,16 +1,15 @@
 import { useSnapshot } from 'valtio';
-import { useCallback, useEffect } from 'react';
-import { Platform, ScrollView } from 'react-native';
+import { useEffect, useState } from 'react';
+import { ScrollView, Modal } from 'react-native';
 import {
-  AccountController,
   ConnectionsController,
   ConstantsUtil,
   EventsController,
   RouterController,
   SwapController
 } from '@reown/appkit-core-react-native';
-import { Button, FlexView, IconLink, Spacing, useTheme } from '@reown/appkit-ui-react-native';
-import { NumberUtil } from '@reown/appkit-common-react-native';
+import { Button, FlexView, IconLink, useTheme } from '@reown/appkit-ui-react-native';
+import { NumberUtil, type SwapInputTarget } from '@reown/appkit-common-react-native';
 
 import { useKeyboard } from '../../hooks/useKeyboard';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
@@ -18,10 +17,11 @@ import { SwapInput } from '../../partials/w3m-swap-input';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { SwapDetails } from '../../partials/w3m-swap-details';
 import styles from './styles';
+import { SwapSelectTokenView } from './components/select-token-view';
 
 export function SwapView() {
   const {
-    initializing,
+    loadingTokens,
     sourceToken,
     toToken,
     sourceTokenAmount,
@@ -35,20 +35,20 @@ export function SwapView() {
   } = useSnapshot(SwapController.state);
   const Theme = useTheme();
   const { padding } = useCustomDimensions();
-  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const { keyboardShown } = useKeyboard();
+  const [showModal, setShowModal] = useState<SwapInputTarget | undefined>();
   const showDetails = !!sourceToken && !!toToken && !inputError;
 
+  const onModalClose = () => {
+    setShowModal(undefined);
+  };
+
   const showSwitch =
     myTokensWithBalance &&
     myTokensWithBalance.findIndex(
       token => token.address === SwapController.state.toToken?.address
     ) >= 0;
 
-  const paddingBottom = Platform.select({
-    android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
-    default: Spacing['2xl']
-  });
-
   const getActionButtonState = () => {
     if (!SwapController.state.sourceToken || !SwapController.state.toToken) {
       return { text: 'Select token', disabled: true };
@@ -66,7 +66,7 @@ export function SwapView() {
   };
 
   const actionState = getActionButtonState();
-  const actionLoading = initializing || loadingPrices || loadingQuote;
+  const actionLoading = loadingTokens || loadingPrices || loadingQuote;
 
   const { debouncedCallback: onDebouncedSwap } = useDebounceCallback({
     callback: SwapController.swapTokens.bind(SwapController),
@@ -83,10 +83,6 @@ export function SwapView() {
     onDebouncedSwap();
   };
 
-  const onSourceTokenPress = () => {
-    RouterController.push('SwapSelectToken', { swapTarget: 'sourceToken' });
-  };
-
   const onReviewPress = () => {
     EventsController.sendEvent({
       type: 'track',
@@ -97,7 +93,7 @@ export function SwapView() {
         swapToToken: SwapController.state.toToken?.symbol || '',
         swapFromAmount: SwapController.state.sourceTokenAmount || '',
         swapToAmount: SwapController.state.toTokenAmount || '',
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+        isSmartAccount: ConnectionsController.state.accountType === 'smartAccount'
       }
     });
     RouterController.push('SwapPreview');
@@ -133,81 +129,83 @@ export function SwapView() {
     }
   };
 
-  const onToTokenPress = () => {
-    RouterController.push('SwapSelectToken', { swapTarget: 'toToken' });
-  };
-
   const onSwitchPress = () => {
     SwapController.switchTokens();
   };
 
-  const watchTokens = useCallback(() => {
-    SwapController.getNetworkTokenPrice();
-    SwapController.getMyTokensWithBalance();
-    SwapController.swapTokens();
-  }, []);
-
   useEffect(() => {
-    SwapController.initializeState();
+    SwapController.fetchTokens();
+
+    function watchTokens() {
+      SwapController.getNetworkTokenPrice();
+      SwapController.getMyTokensWithBalance();
+      SwapController.swapTokens();
+    }
 
     const interval = setInterval(watchTokens, 10000);
 
     return () => {
       clearInterval(interval);
     };
-  }, [watchTokens]);
+  }, []);
 
   return (
-    <ScrollView
-      style={{ paddingHorizontal: padding }}
-      bounces={false}
-      keyboardShouldPersistTaps="always"
-    >
-      <FlexView padding="l" alignItems="center" justifyContent="center" style={{ paddingBottom }}>
-        <SwapInput
-          token={sourceToken}
-          value={sourceTokenAmount}
-          marketValue={parseFloat(sourceTokenAmount) * sourceTokenPriceInUSD}
-          style={styles.tokenInput}
-          loading={initializing}
-          onChange={onSourceTokenChange}
-          onTokenPress={onSourceTokenPress}
-          onMaxPress={onSourceMaxPress}
-        />
-        <FlexView alignItems="center" justifyContent="center" style={styles.bottomInputContainer}>
+    <>
+      <ScrollView
+        style={[{ paddingHorizontal: padding }, keyboardShown && styles.withKeyboard]}
+        bounces={false}
+        keyboardShouldPersistTaps="always"
+      >
+        <FlexView padding={['l', 'l', '2xl', 'l']} alignItems="center" justifyContent="center">
           <SwapInput
-            token={toToken}
-            value={toTokenAmount}
-            marketValue={NumberUtil.parseLocalStringToNumber(toTokenAmount) * toTokenPriceInUSD}
+            token={sourceToken}
+            value={sourceTokenAmount}
+            marketValue={parseFloat(sourceTokenAmount) * sourceTokenPriceInUSD}
             style={styles.tokenInput}
-            loading={initializing}
-            onChange={onToTokenChange}
-            onTokenPress={onToTokenPress}
-            editable={false}
+            loading={loadingTokens}
+            onChange={onSourceTokenChange}
+            onTokenPress={() => setShowModal('sourceToken')}
+            onMaxPress={onSourceMaxPress}
           />
-          {showSwitch && (
-            <IconLink
-              icon="recycleHorizontal"
-              size="lg"
-              iconColor="fg-275"
-              background
-              backgroundColor="bg-175"
-              pressedColor="bg-250"
-              style={[styles.arrowIcon, { borderColor: Theme['bg-100'] }]}
-              onPress={onSwitchPress}
+          <FlexView alignItems="center" justifyContent="center" style={styles.bottomInputContainer}>
+            <SwapInput
+              token={toToken}
+              value={toTokenAmount}
+              marketValue={NumberUtil.parseLocalStringToNumber(toTokenAmount) * toTokenPriceInUSD}
+              style={styles.tokenInput}
+              loading={loadingTokens}
+              loadingValues={actionLoading}
+              onChange={onToTokenChange}
+              onTokenPress={() => setShowModal('toToken')}
+              editable={false}
             />
-          )}
+            {showSwitch ? (
+              <IconLink
+                icon="recycleHorizontal"
+                size="lg"
+                iconColor="fg-275"
+                background
+                backgroundColor="bg-175"
+                pressedColor="bg-250"
+                style={[styles.arrowIcon, { borderColor: Theme['bg-100'] }]}
+                onPress={onSwitchPress}
+              />
+            ) : null}
+          </FlexView>
+          {showDetails ? <SwapDetails /> : null}
+          <Button
+            style={styles.actionButton}
+            loading={actionLoading}
+            disabled={actionState.disabled || actionLoading}
+            onPress={onReviewPress}
+          >
+            {actionState.text}
+          </Button>
         </FlexView>
-        {showDetails && <SwapDetails />}
-        <Button
-          style={styles.actionButton}
-          loading={actionLoading}
-          disabled={actionState.disabled || actionLoading}
-          onPress={onReviewPress}
-        >
-          {actionState.text}
-        </Button>
-      </FlexView>
-    </ScrollView>
+      </ScrollView>
+      <Modal visible={!!showModal} transparent animationType="slide" onRequestClose={onModalClose}>
+        <SwapSelectTokenView style={styles.modalContent} onClose={onModalClose} type={showModal} />
+      </Modal>
+    </>
   );
 }

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

@@ -19,5 +19,13 @@ export default StyleSheet.create({
   actionButton: {
     marginTop: Spacing.xs,
     width: '100%'
+  },
+  modalContent: {
+    margin: 0,
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  withKeyboard: {
+    height: '100%'
   }
 });