@reown/appkit-react-native 0.0.0-chore-bump-builder-20250728194329

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

@@ -0,0 +1,149 @@
+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 = () => {
+    SwapController.clearTransactionLoaders();
+    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, 6)}
+            </Text>
+          </FlexView>
+          <TokenButton
+            text={` ${UiUtil.formatNumberToLocalString(
+              sourceTokenAmount,
+              8
+            )} ${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, 6)}
+            </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-view/components/select-token-view/index.tsx

@@ -0,0 +1,166 @@
+import { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import { ScrollView, SectionList, View, type SectionListData } from 'react-native';
+import {
+  FlexView,
+  IconLink,
+  InputText,
+  ListToken,
+  ListTokenTotalHeight,
+  Separator,
+  Text,
+  TokenButton,
+  useTheme
+} from '@reown/appkit-ui-react-native';
+
+import {
+  AssetController,
+  ConnectionsController,
+  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 styles from './styles';
+import { createSections } from './utils';
+
+interface Props {
+  onClose: () => void;
+  type?: SwapInputTarget;
+}
+
+export function SwapSelectTokenView({ onClose, type }: Props) {
+  const { padding } = 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 = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const [tokenSearch, setTokenSearch] = useState<string>('');
+  const isSourceToken = type === 'sourceToken';
+
+  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, myTokensWithBalance));
+  };
+
+  const onTokenPress = (token: SwapTokenWithBalance) => {
+    if (isSourceToken) {
+      SwapController.setSourceToken(token);
+    } else {
+      SwapController.setToToken(token);
+      if (SwapController.state.sourceToken && SwapController.state.sourceTokenAmount) {
+        SwapController.swapTokens();
+      }
+    }
+    onClose();
+  };
+
+  return (
+    <FlexView
+      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}
+          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-view/components/select-token-view/styles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  container: {
+    borderRadius: BorderRadius.l,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    overflow: 'hidden',
+    marginTop: 80,
+    flex: 1
+  },
+  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
+  },
+  iconPlaceholder: {
+    height: 32,
+    width: 32
+  }
+});

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

@@ -0,0 +1,38 @@
+import { SwapController, type SwapTokenWithBalance } 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

@@ -0,0 +1,225 @@
+import { useSnapshot } from 'valtio';
+import { useEffect, useState } from 'react';
+import { Platform, ScrollView } from 'react-native';
+import Modal from 'react-native-modal';
+import {
+  ConnectionsController,
+  ConstantsUtil,
+  EventsController,
+  RouterController,
+  SwapController,
+  type SwapInputTarget
+} 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';
+import { SwapSelectTokenView } from './components/select-token-view';
+
+export function SwapView() {
+  const {
+    loadingTokens,
+    sourceToken,
+    toToken,
+    sourceTokenAmount,
+    toTokenAmount,
+    loadingPrices,
+    loadingQuote,
+    sourceTokenPriceInUSD,
+    toTokenPriceInUSD,
+    myTokensWithBalance,
+    inputError
+  } = useSnapshot(SwapController.state);
+  const Theme = useTheme();
+  const { padding } = useCustomDimensions();
+  const { keyboardShown, keyboardHeight } = 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 };
+    }
+
+    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 = loadingTokens || 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 onReviewPress = () => {
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'INITIATE_SWAP',
+      properties: {
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+        swapFromToken: SwapController.state.sourceToken?.symbol || '',
+        swapToToken: SwapController.state.toToken?.symbol || '',
+        swapFromAmount: SwapController.state.sourceTokenAmount || '',
+        swapToAmount: SwapController.state.toTokenAmount || '',
+        isSmartAccount: ConnectionsController.state.accountType === 'smartAccount'
+      }
+    });
+    RouterController.push('SwapPreview');
+  };
+
+  const onSourceMaxPress = () => {
+    const { activeNamespace, activeCaipNetworkId } = ConnectionsController.state;
+    const networkTokenAddress = activeNamespace
+      ? `${activeCaipNetworkId}:${ConstantsUtil.NATIVE_TOKEN_ADDRESS[activeNamespace]}`
+      : undefined;
+
+    const isNetworkToken = SwapController.state.sourceToken?.address === networkTokenAddress;
+
+    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 onSwitchPress = () => {
+    SwapController.switchTokens();
+  };
+
+  useEffect(() => {
+    SwapController.fetchTokens();
+
+    function watchTokens() {
+      SwapController.getNetworkTokenPrice();
+      SwapController.getMyTokensWithBalance();
+      SwapController.swapTokens();
+    }
+
+    const interval = setInterval(watchTokens, 10000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  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={loadingTokens}
+            onChange={onSourceTokenChange}
+            onTokenPress={() => setShowModal('sourceToken')}
+            onMaxPress={onSourceMaxPress}
+          />
+          <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}
+              />
+            )}
+          </FlexView>
+          {showDetails && <SwapDetails />}
+          <Button
+            style={styles.actionButton}
+            loading={actionLoading}
+            disabled={actionState.disabled || actionLoading}
+            onPress={onReviewPress}
+          >
+            {actionState.text}
+          </Button>
+        </FlexView>
+      </ScrollView>
+      <Modal
+        isVisible={!!showModal}
+        useNativeDriver
+        useNativeDriverForBackdrop
+        onBackdropPress={onModalClose}
+        onDismiss={onModalClose}
+        style={styles.modal}
+      >
+        <SwapSelectTokenView onClose={onModalClose} type={showModal} />
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  bottomInputContainer: {
+    width: '100%'
+  },
+  arrowIcon: {
+    position: 'absolute',
+    top: -30,
+    borderRadius: BorderRadius.xs,
+    borderWidth: 4,
+    height: 50,
+    width: 50
+  },
+  tokenInput: {
+    marginBottom: Spacing.xs
+  },
+  actionButton: {
+    marginTop: Spacing.xs,
+    width: '100%'
+  },
+  modal: {
+    margin: 0,
+    justifyContent: 'flex-end'
+  }
+});

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

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { AccountActivity } from '../../partials/w3m-account-activity';
+
+export function TransactionsView() {
+  return <AccountActivity style={styles.container} />;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: Spacing.l,
+    marginTop: Spacing.s
+  }
+});