@reown/appkit-react-native 2.0.0 → 2.0.1

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-siwx-sign-view/index.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { ScrollView } from 'react-native';
+import { useSnapshot } from 'valtio';
+import {
+  Avatar,
+  Button,
+  DoubleImageLoader,
+  FlexView,
+  Text,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import {
+  ConnectionsController,
+  LogController,
+  OptionsController,
+  RouterController,
+  SnackController
+} from '@reown/appkit-core-react-native';
+
+import { useInternalAppKit } from '../../AppKitContext';
+import { SIWXUtil } from '../../utils/SIWXUtil';
+import styles from './styles';
+
+export function SIWXSignMessageView() {
+  const { disconnect } = useInternalAppKit();
+  const { padding } = useCustomDimensions();
+  const { metadata } = useSnapshot(OptionsController.state);
+  const { activeAddress, identity, walletInfo } = useSnapshot(ConnectionsController.state);
+  const [isSigning, setIsSigning] = useState(false);
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
+
+  const dappName = metadata?.name || 'Dapp';
+  const dappIcon = metadata?.icons[0] || '';
+  const walletIcon = walletInfo?.icon;
+
+  const onSign = async () => {
+    setIsSigning(true);
+    try {
+      await SIWXUtil.requestSignMessage();
+    } catch (error) {
+      LogController.sendError(error, 'SIWXSignMessageView.tsx', 'onSign');
+      SnackController.showError('Signature declined');
+    } finally {
+      setIsSigning(false);
+    }
+  };
+
+  const onCancel = async () => {
+    if (ConnectionsController.state.activeAddress) {
+      setIsDisconnecting(true);
+      await SIWXUtil.cancelSignMessage(disconnect);
+      setIsDisconnecting(false);
+    } else {
+      RouterController.push('Connect');
+    }
+  };
+
+  return (
+    <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+      <FlexView padding={['0', 's', 's', 's']}>
+        <DoubleImageLoader
+          style={styles.logoContainer}
+          leftImage={dappIcon}
+          rightImage={walletIcon}
+          renderRightPlaceholder={() => (
+            <Avatar imageSrc={identity?.avatar} address={activeAddress} size={60} borderWidth={0} />
+          )}
+          rightItemStyle={!walletIcon && styles.walletAvatar}
+        />
+        <Text center variant="medium-600" color="fg-100" style={styles.title}>
+          {dappName} needs to connect to your wallet
+        </Text>
+        <Text center variant="small-400" color="fg-200" style={styles.subtitle}>
+          Sign this message to prove you own this wallet and proceed. Cancelling will disconnect you
+        </Text>
+        <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
+          <Button
+            variant="shade"
+            onPress={onCancel}
+            style={styles.button}
+            loading={isDisconnecting}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="fill"
+            loading={isSigning}
+            disabled={isDisconnecting}
+            onPress={onSign}
+            style={styles.button}
+          >
+            Sign
+          </Button>
+        </FlexView>
+      </FlexView>
+    </ScrollView>
+  );
+}

package/src/views/w3m-siwx-sign-view/styles.ts

@@ -0,0 +1,22 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  logoContainer: {
+    marginTop: Spacing.xl,
+    marginBottom: Spacing.m
+  },
+  button: {
+    width: '48%'
+  },
+  title: {
+    marginHorizontal: '15%'
+  },
+  subtitle: {
+    marginHorizontal: '10%',
+    marginVertical: Spacing.l
+  },
+  walletAvatar: {
+    borderRadius: BorderRadius.full
+  }
+});

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

@@ -1,25 +1,22 @@
 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
+  UiUtil,
+  useCustomDimensions
 } 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 +34,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 +67,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" justifyContent="center">
         <FlexView flexDirection="row" justifyContent="space-between">
           <FlexView>
             <Text variant="small-400" color="fg-150">

package/src/views/w3m-swap-view/components/select-token-modal/index.tsx

@@ -0,0 +1,181 @@
+import { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import {
+  Modal,
+  ScrollView,
+  SectionList,
+  View,
+  type SectionListData,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import {
+  FlexView,
+  IconLink,
+  InputText,
+  ListToken,
+  ListTokenTotalHeight,
+  Separator,
+  Text,
+  TokenButton,
+  useTheme,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+
+import {
+  AssetController,
+  AssetUtil,
+  ConnectionsController,
+  SwapController,
+  type SwapControllerState
+} from '@reown/appkit-core-react-native';
+
+import { type SwapInputTarget, type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
+
+import { Placeholder } from '../../../../partials/w3m-placeholder';
+import styles from './styles';
+import { createSections } from './utils';
+
+interface Props {
+  onClose: () => void;
+  visible: boolean;
+  type?: SwapInputTarget;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SwapSelectTokenModal({ onClose, type, style, visible }: Props) {
+  const { padding, maxHeight } = useCustomDimensions();
+  const Theme = useTheme();
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  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 = type === 'sourceToken';
+
+  const filteredTokens = createSections(isSourceToken, tokenSearch, myTokensWithBalance);
+
+  const suggestedList = suggestedTokens
+    ?.filter(token => token.address !== SwapController.state.sourceToken?.address)
+    .slice(0, 8);
+
+  const onSearchChange = (value: string) => {
+    setTokenSearch(value);
+  };
+
+  const onTokenPress = (token: SwapTokenWithBalance) => {
+    if (isSourceToken) {
+      SwapController.setSourceToken(token);
+    } else {
+      SwapController.setToToken(token);
+      if (SwapController.state.sourceToken && SwapController.state.sourceTokenAmount) {
+        SwapController.swapTokens();
+      }
+    }
+    onClose();
+  };
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <FlexView
+        padding={['xl', '0', '0', '0']}
+        style={[
+          styles.container,
+          {
+            paddingHorizontal: padding,
+            backgroundColor: Theme['bg-100'],
+            height: maxHeight
+          },
+          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 margin={['0', '0', 'xs', '0']}>
+          <InputText
+            value={tokenSearch}
+            icon="search"
+            placeholder="Search token"
+            onChangeText={onSearchChange}
+            clearButtonMode="while-editing"
+            style={styles.input}
+          />
+          {!isSourceToken && (
+            <>
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                bounces={false}
+                fadingEdgeLength={20}
+                style={styles.suggestedList}
+                contentContainerStyle={styles.suggestedListContent}
+              >
+                {suggestedList?.map((token, index) => (
+                  <TokenButton
+                    key={token.name}
+                    text={token.symbol}
+                    imageUrl={token.logoUri}
+                    onPress={() => onTokenPress(token)}
+                    style={index !== suggestedList.length - 1 ? styles.suggestedToken : undefined}
+                  />
+                ))}
+              </ScrollView>
+              <Separator style={styles.suggestedSeparator} color="gray-glass-005" />
+            </>
+          )}
+        </FlexView>
+        <SectionList
+          sections={filteredTokens as SectionListData<SwapTokenWithBalance>[]}
+          bounces={false}
+          fadingEdgeLength={20}
+          contentContainerStyle={styles.tokenList}
+          renderSectionHeader={({ section: { title } }) => (
+            <Text
+              variant="paragraph-500"
+              color="fg-200"
+              style={[{ backgroundColor: Theme['bg-100'] }, styles.title]}
+            >
+              {title}
+            </Text>
+          )}
+          ListEmptyComponent={
+            <Placeholder
+              icon="coinPlaceholder"
+              title="No tokens found"
+              description="Your tokens will appear here"
+            />
+          }
+          getItemLayout={(_, index) => ({
+            length: ListTokenTotalHeight,
+            offset: ListTokenTotalHeight * index,
+            index
+          })}
+          renderItem={({ item }) => (
+            <ListToken
+              key={item.name}
+              name={item.name}
+              imageSrc={item.logoUri}
+              networkSrc={networkImage}
+              value={item.value}
+              amount={item.quantity.numeric}
+              currency={item.symbol}
+              onPress={() => onTokenPress(item)}
+              disabled={item.address === sourceToken?.address}
+            />
+          )}
+        />
+      </FlexView>
+    </Modal>
+  );
+}

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

@@ -1,10 +1,18 @@
 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',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    margin: 0
   },
   title: {
     paddingTop: Spacing['2xs']
@@ -25,6 +33,10 @@ export default StyleSheet.create({
     marginRight: Spacing.s
   },
   suggestedSeparator: {
-    marginVertical: Spacing.s
+    marginTop: Spacing.s
+  },
+  iconPlaceholder: {
+    height: 32,
+    width: 32
   }
 });

package/src/views/w3m-swap-view/components/select-token-modal/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;
+}