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

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

@@ -0,0 +1,124 @@
+import {
+  OnRampController,
+  NetworkController,
+  type OnRampFiatCurrency,
+  ConstantsUtil
+} from '@reown/appkit-core-react-native';
+
+// -------------------------- Utils --------------------------
+export const getPurchaseCurrencies = (searchValue?: string, filterSelected?: boolean) => {
+  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: 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;
+
+  // 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: 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;
+  }
+}
+
+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;
+  }
+
+  // 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 [];
+};

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

@@ -0,0 +1,145 @@
+import { useSnapshot } from 'valtio';
+import { useEffect } from 'react';
+import { Platform, 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 { 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,
+    sourceTokenPriceInUSD,
+    toToken,
+    toTokenAmount,
+    toTokenPriceInUSD,
+    loadingQuote,
+    loadingBuildTransaction,
+    loadingTransaction,
+    loadingApprovalTransaction
+  } = useSnapshot(SwapController.state);
+
+  const sourceTokenMarketValue =
+    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 = () => {
+    RouterController.goBack();
+  };
+
+  const onSwap = () => {
+    if (SwapController.state.approvalTransaction) {
+      SwapController.sendTransactionForApproval(SwapController.state.approvalTransaction);
+    } else {
+      SwapController.sendTransactionForSwap(SwapController.state.swapTransaction);
+    }
+  };
+
+  useEffect(() => {
+    function refreshTransaction() {
+      if (!SwapController.state.loadingApprovalTransaction) {
+        SwapController.getTransaction();
+      }
+    }
+
+    SwapController.getTransaction();
+
+    const interval = setInterval(refreshTransaction, 10000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return (
+    <ScrollView
+      style={{ paddingHorizontal: padding }}
+      bounces={false}
+      keyboardShouldPersistTaps="always"
+    >
+      <FlexView padding="l" justifyContent="center" style={{ paddingBottom }}>
+        <FlexView flexDirection="row" justifyContent="space-between">
+          <FlexView>
+            <Text variant="small-400" color="fg-150">
+              Send
+            </Text>
+            <Text variant="paragraph-400" color="fg-100">
+              ${UiUtil.formatNumberToLocalString(sourceTokenMarketValue, 2)}
+            </Text>
+          </FlexView>
+          <TokenButton
+            text={` ${sourceTokenAmount} ${sourceToken?.symbol}`}
+            imageUrl={sourceToken?.logoUri}
+            inverse
+            disabled
+          />
+        </FlexView>
+        <Icon name="recycleHorizontal" size="md" color="fg-200" style={styles.swapIcon} />
+        <FlexView flexDirection="row" justifyContent="space-between" margin={['0', '0', 'xl', '0']}>
+          <FlexView>
+            <Text variant="small-400" color="fg-150">
+              Receive
+            </Text>
+            <Text variant="paragraph-400" color="fg-100">
+              ${UiUtil.formatNumberToLocalString(toTokenMarketValue, 2)}
+            </Text>
+          </FlexView>
+          <TokenButton
+            text={` ${toTokenAmount} ${toToken?.symbol}`}
+            imageUrl={toToken?.logoUri}
+            inverse
+            disabled
+          />
+        </FlexView>
+        <SwapDetails initialOpen={true} canClose={false} />
+        <FlexView
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="center"
+          margin={['m', '0', 'm', '0']}
+        >
+          <Icon name="warningCircle" size="sm" color="fg-200" style={styles.reviewIcon} />
+          <Text variant="small-400" color="fg-200">
+            Review transaction carefully
+          </Text>
+        </FlexView>
+        <FlexView flexDirection="row">
+          <Button variant="shade" style={styles.cancelButton} onPress={onCancel}>
+            Cancel
+          </Button>
+          <Button
+            variant="fill"
+            style={styles.sendButton}
+            loading={loading}
+            disabled={loading}
+            onPress={onSwap}
+          >
+            Swap
+          </Button>
+        </FlexView>
+      </FlexView>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  swapIcon: {
+    marginVertical: Spacing.xs
+  },
+  reviewIcon: {
+    marginRight: Spacing['3xs']
+  },
+  cancelButton: {
+    flex: 1
+  },
+  sendButton: {
+    marginLeft: Spacing.s,
+    flex: 3
+  }
+});

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

@@ -0,0 +1,137 @@
+import { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import { ScrollView, SectionList, type SectionListData } from 'react-native';
+import {
+  FlexView,
+  InputText,
+  ListToken,
+  ListTokenTotalHeight,
+  Separator,
+  Text,
+  TokenButton,
+  useTheme
+} from '@reown/appkit-ui-react-native';
+
+import {
+  AssetUtil,
+  ConnectionsController,
+  RouterController,
+  SwapController,
+  type SwapTokenWithBalance
+} from '@reown/appkit-core-react-native';
+
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { Placeholder } from '../../partials/w3m-placeholder';
+import styles from './styles';
+import { createSections } from './utils';
+
+export function SwapSelectTokenView() {
+  const { padding } = useCustomDimensions();
+  const Theme = useTheme();
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { sourceToken, suggestedTokens } = useSnapshot(SwapController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const [tokenSearch, setTokenSearch] = useState<string>('');
+  const isSourceToken = RouterController.state.data?.swapTarget === 'sourceToken';
+
+  const [filteredTokens, setFilteredTokens] = useState(createSections(isSourceToken, tokenSearch));
+  const suggestedList = suggestedTokens
+    ?.filter(token => token.address !== SwapController.state.sourceToken?.address)
+    .slice(0, 8);
+
+  const onSearchChange = (value: string) => {
+    setTokenSearch(value);
+    setFilteredTokens(createSections(isSourceToken, value));
+  };
+
+  const onTokenPress = (token: SwapTokenWithBalance) => {
+    if (isSourceToken) {
+      SwapController.setSourceToken(token);
+    } else {
+      SwapController.setToToken(token);
+      if (SwapController.state.sourceToken && SwapController.state.sourceTokenAmount) {
+        SwapController.swapTokens();
+      }
+    }
+    RouterController.goBack();
+  };
+
+  return (
+    <FlexView
+      margin={['l', '0', '2xl', '0']}
+      style={[styles.container, { paddingHorizontal: padding }]}
+    >
+      <FlexView>
+        <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>
+        )}
+      </FlexView>
+      <Separator style={styles.suggestedSeparator} color="gray-glass-020" />
+      <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>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  container: {
+    minHeight: 250,
+    maxHeight: 600
+  },
+  title: {
+    paddingTop: Spacing['2xs']
+  },
+  tokenList: {
+    paddingHorizontal: Spacing.m
+  },
+  input: {
+    marginHorizontal: Spacing.xs
+  },
+  suggestedList: {
+    marginTop: Spacing.xs
+  },
+  suggestedListContent: {
+    paddingHorizontal: Spacing.s
+  },
+  suggestedToken: {
+    marginRight: Spacing.s
+  },
+  suggestedSeparator: {
+    marginVertical: Spacing.s
+  }
+});

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

@@ -0,0 +1,33 @@
+import { SwapController, type SwapTokenWithBalance } from '@reown/appkit-core-react-native';
+
+export function filterTokens(tokens: SwapTokenWithBalance[], searchValue?: string) {
+  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) {
+  const myTokensFiltered = filterTokens(
+    SwapController.state.myTokensWithBalance ?? [],
+    searchValue
+  );
+  const popularFiltered = isSourceToken
+    ? []
+    : filterTokens(SwapController.getFilteredPopularTokens() ?? [], 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

@@ -0,0 +1,209 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect } from 'react';
+import { Platform, ScrollView } from 'react-native';
+import {
+  AccountController,
+  EventsController,
+  NetworkController,
+  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 { useKeyboard } from '../../hooks/useKeyboard';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { SwapInput } from '../../partials/w3m-swap-input';
+import { useDebounceCallback } from '../../hooks/useDebounceCallback';
+import { SwapDetails } from '../../partials/w3m-swap-details';
+import styles from './styles';
+
+export function SwapView() {
+  const {
+    initializing,
+    sourceToken,
+    toToken,
+    sourceTokenAmount,
+    toTokenAmount,
+    loadingPrices,
+    loadingQuote,
+    sourceTokenPriceInUSD,
+    toTokenPriceInUSD,
+    myTokensWithBalance,
+    inputError
+  } = useSnapshot(SwapController.state);
+  const Theme = useTheme();
+  const { padding } = useCustomDimensions();
+  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const showDetails = !!sourceToken && !!toToken && !inputError;
+
+  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 };
+    }
+
+    if (!SwapController.state.sourceTokenAmount || !SwapController.state.toTokenAmount) {
+      return { text: 'Enter amount', disabled: true };
+    }
+
+    if (SwapController.state.inputError) {
+      return { text: SwapController.state.inputError, disabled: true };
+    }
+
+    return { text: 'Review swap', disabled: false };
+  };
+
+  const actionState = getActionButtonState();
+  const actionLoading = initializing || loadingPrices || loadingQuote;
+
+  const { debouncedCallback: onDebouncedSwap } = useDebounceCallback({
+    callback: SwapController.swapTokens.bind(SwapController),
+    delay: 400
+  });
+
+  const onSourceTokenChange = (value: string) => {
+    SwapController.setSourceTokenAmount(value);
+    onDebouncedSwap();
+  };
+
+  const onToTokenChange = (value: string) => {
+    SwapController.setToTokenAmount(value);
+    onDebouncedSwap();
+  };
+
+  const onSourceTokenPress = () => {
+    RouterController.push('SwapSelectToken', { swapTarget: 'sourceToken' });
+  };
+
+  const onReviewPress = () => {
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'INITIATE_SWAP',
+      properties: {
+        network: NetworkController.state.caipNetwork?.id || '',
+        swapFromToken: SwapController.state.sourceToken?.symbol || '',
+        swapToToken: SwapController.state.toToken?.symbol || '',
+        swapFromAmount: SwapController.state.sourceTokenAmount || '',
+        swapToAmount: SwapController.state.toTokenAmount || '',
+        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+      }
+    });
+    RouterController.push('SwapPreview');
+  };
+
+  const onSourceMaxPress = () => {
+    const isNetworkToken =
+      SwapController.state.sourceToken?.address ===
+      NetworkController.getActiveNetworkTokenAddress();
+
+    const _gasPriceInUSD = SwapController.state.gasPriceInUSD;
+    const _sourceTokenPriceInUSD = SwapController.state.sourceTokenPriceInUSD;
+    const _balance = SwapController.state.sourceToken?.quantity.numeric;
+
+    if (_balance) {
+      if (!_gasPriceInUSD) {
+        return SwapController.setSourceTokenAmount(_balance);
+      }
+
+      const amountOfTokenGasRequires = NumberUtil.bigNumber(_gasPriceInUSD.toFixed(5)).dividedBy(
+        _sourceTokenPriceInUSD
+      );
+
+      const maxValue = isNetworkToken
+        ? NumberUtil.bigNumber(_balance).minus(amountOfTokenGasRequires)
+        : NumberUtil.bigNumber(_balance);
+
+      SwapController.setSourceTokenAmount(maxValue.isGreaterThan(0) ? maxValue.toFixed(20) : '0');
+      SwapController.swapTokens();
+    }
+  };
+
+  const onToTokenPress = () => {
+    RouterController.push('SwapSelectToken', { swapTarget: 'toToken' });
+  };
+
+  const onSwitchPress = () => {
+    SwapController.switchTokens();
+  };
+
+  const watchTokens = useCallback(() => {
+    SwapController.getNetworkTokenPrice();
+    SwapController.getMyTokensWithBalance();
+    SwapController.swapTokens();
+  }, []);
+
+  useEffect(() => {
+    SwapController.initializeState();
+
+    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}>
+          <SwapInput
+            token={toToken}
+            value={toTokenAmount}
+            marketValue={NumberUtil.parseLocalStringToNumber(toTokenAmount) * toTokenPriceInUSD}
+            style={styles.tokenInput}
+            loading={initializing}
+            onChange={onToTokenChange}
+            onTokenPress={onToTokenPress}
+            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}
+            />
+          )}
+        </FlexView>
+        {showDetails && <SwapDetails />}
+        <Button
+          style={styles.actionButton}
+          loading={actionLoading}
+          disabled={actionState.disabled || actionLoading}
+          onPress={onReviewPress}
+        >
+          {actionState.text}
+        </Button>
+      </FlexView>
+    </ScrollView>
+  );
+}