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

package/src/partials/w3m-selector-modal/index.tsx

@@ -0,0 +1,124 @@
+import { useSnapshot } from 'valtio';
+import Modal from 'react-native-modal';
+import { FlatList, View } from 'react-native';
+import {
+  FlexView,
+  IconBox,
+  IconLink,
+  Image,
+  SearchBar,
+  Separator,
+  Spacing,
+  Text,
+  useTheme
+} from '@reown/appkit-ui-react-native';
+import styles from './styles';
+import { AssetUtil, ConnectionsController } from '@reown/appkit-core-react-native';
+
+interface SelectorModalProps {
+  title?: string;
+  visible: boolean;
+  onClose: () => void;
+  items: any[];
+  selectedItem?: any;
+  renderItem: ({ item }: { item: any }) => React.ReactElement;
+  keyExtractor: (item: any, index: number) => string;
+  onSearch: (value: string) => void;
+  itemHeight?: number;
+  showNetwork?: boolean;
+  searchPlaceholder?: string;
+}
+
+const SEPARATOR_HEIGHT = Spacing.s;
+
+export function SelectorModal({
+  title,
+  visible,
+  onClose,
+  items,
+  selectedItem,
+  renderItem,
+  onSearch,
+  searchPlaceholder,
+  keyExtractor,
+  itemHeight,
+  showNetwork
+}: SelectorModalProps) {
+  const Theme = useTheme();
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+
+  const renderSeparator = () => {
+    return <View style={{ height: SEPARATOR_HEIGHT }} />;
+  };
+
+  return (
+    <Modal
+      isVisible={visible}
+      useNativeDriver
+      useNativeDriverForBackdrop
+      statusBarTranslucent
+      hideModalContentWhileAnimating
+      onBackdropPress={onClose}
+      onDismiss={onClose}
+      style={styles.modal}
+    >
+      <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
+        <FlexView
+          alignItems="center"
+          justifyContent="space-between"
+          flexDirection="row"
+          style={styles.header}
+        >
+          <IconLink icon="chevronLeft" onPress={onClose} testID="selector-modal-button-back" />
+          {!!title && <Text variant="paragraph-600">{title}</Text>}
+          {showNetwork ? (
+            networkImage ? (
+              <FlexView alignItems="center" justifyContent="center" style={styles.iconPlaceholder}>
+                <Image source={networkImage} style={styles.networkImage} />
+              </FlexView>
+            ) : (
+              <IconBox
+                style={styles.iconPlaceholder}
+                icon="networkPlaceholder"
+                background
+                iconColor="fg-200"
+                size="sm"
+              />
+            )
+          ) : (
+            <View style={styles.iconPlaceholder} />
+          )}
+        </FlexView>
+        <SearchBar
+          onChangeText={onSearch}
+          style={styles.searchBar}
+          placeholder={searchPlaceholder}
+        />
+        {selectedItem && (
+          <FlexView style={styles.selectedContainer}>
+            {renderItem({ item: selectedItem })}
+            <Separator style={styles.separator} color="gray-glass-020" />
+          </FlexView>
+        )}
+        <FlatList
+          data={items}
+          renderItem={renderItem}
+          fadingEdgeLength={20}
+          contentContainerStyle={styles.listContent}
+          ItemSeparatorComponent={renderSeparator}
+          keyExtractor={keyExtractor}
+          getItemLayout={
+            itemHeight
+              ? (_, index) => ({
+                  length: itemHeight + SEPARATOR_HEIGHT,
+                  offset: (itemHeight + SEPARATOR_HEIGHT) * index,
+                  index
+                })
+              : undefined
+          }
+        />
+      </FlexView>
+    </Modal>
+  );
+}

package/src/partials/w3m-selector-modal/styles.ts

@@ -0,0 +1,42 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  modal: {
+    margin: 0,
+    justifyContent: 'flex-end'
+  },
+  header: {
+    marginBottom: Spacing.s,
+    paddingHorizontal: Spacing.m
+  },
+  container: {
+    height: '80%',
+    borderTopLeftRadius: BorderRadius.l,
+    borderTopRightRadius: BorderRadius.l,
+    paddingTop: Spacing.m
+  },
+  selectedContainer: {
+    paddingHorizontal: Spacing.m
+  },
+  listContent: {
+    paddingTop: Spacing.s,
+    paddingHorizontal: Spacing.m
+  },
+  iconPlaceholder: {
+    height: 32,
+    width: 32
+  },
+  networkImage: {
+    height: 20,
+    width: 20,
+    borderRadius: BorderRadius.full
+  },
+  searchBar: {
+    marginBottom: Spacing.s,
+    marginHorizontal: Spacing.s
+  },
+  separator: {
+    marginTop: Spacing.m
+  }
+});

package/src/partials/w3m-send-input-address/index.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { TextInput } from 'react-native';
+import { FlexView, useTheme } from '@reown/appkit-ui-react-native';
+import { ConnectionController, SendController } from '@reown/appkit-core-react-native';
+
+import { useDebounceCallback } from '../../hooks/useDebounceCallback';
+import styles from './styles';
+
+export interface SendInputAddressProps {
+  value?: string;
+}
+
+export function SendInputAddress({ value }: SendInputAddressProps) {
+  const Theme = useTheme();
+  const [inputValue, setInputValue] = useState<string | undefined>(value);
+
+  const onSearch = async (search: string) => {
+    SendController.setLoading(true);
+    const address = await ConnectionController.getEnsAddress(search);
+    SendController.setLoading(false);
+
+    if (address) {
+      SendController.setReceiverProfileName(search);
+      SendController.setReceiverAddress(address);
+      const avatar = await ConnectionController.getEnsAvatar(search);
+      SendController.setReceiverProfileImageUrl(avatar || undefined);
+    } else {
+      SendController.setReceiverAddress(search);
+      SendController.setReceiverProfileName(undefined);
+      SendController.setReceiverProfileImageUrl(undefined);
+    }
+  };
+
+  const { debouncedCallback: onDebounceSearch } = useDebounceCallback({
+    callback: onSearch,
+    delay: 800
+  });
+
+  const onInputChange = (address: string) => {
+    setInputValue(address);
+    SendController.setReceiverAddress(address);
+    onDebounceSearch(address);
+  };
+
+  return (
+    <FlexView
+      style={[
+        styles.container,
+        { backgroundColor: Theme['gray-glass-005'], borderColor: Theme['gray-glass-005'] }
+      ]}
+      justifyContent="center"
+      padding={['xl', 'l', 'l', 'l']}
+    >
+      <TextInput
+        placeholder="Type or paste address"
+        placeholderTextColor={Theme['fg-275']}
+        returnKeyType="done"
+        style={[styles.input, { color: Theme['fg-100'] }]}
+        autoCapitalize="none"
+        autoCorrect={false}
+        value={inputValue}
+        onChangeText={onInputChange}
+        keyboardType="default"
+        inputMode="text"
+        autoComplete="off"
+        spellCheck={false}
+        selectionColor={Theme['accent-100']}
+        underlineColorAndroid="transparent"
+        selectTextOnFocus={false}
+        returnKeyLabel="Done"
+      />
+    </FlexView>
+  );
+}

package/src/partials/w3m-send-input-address/styles.ts

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  container: {
+    height: 100,
+    width: '100%',
+    borderRadius: BorderRadius.s,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  input: {
+    fontSize: 18
+  }
+});

package/src/partials/w3m-send-input-token/index.tsx

@@ -0,0 +1,119 @@
+import { useRef, useState } from 'react';
+import { TextInput, type StyleProp, type ViewStyle } from 'react-native';
+import { FlexView, Link, Text, useTheme, TokenButton } from '@reown/appkit-ui-react-native';
+import { NumberUtil, type Balance } from '@reown/appkit-common-react-native';
+import { ConstantsUtil, SendController } from '@reown/appkit-core-react-native';
+
+import { getMaxAmount, getSendValue } from './utils';
+import styles from './styles';
+
+export interface SendInputTokenProps {
+  token?: Balance;
+  sendTokenAmount?: number;
+  gasPrice?: number;
+  style?: StyleProp<ViewStyle>;
+  onTokenPress?: () => void;
+}
+
+export function SendInputToken({
+  token,
+  sendTokenAmount,
+  gasPrice,
+  style,
+  onTokenPress
+}: SendInputTokenProps) {
+  const Theme = useTheme();
+  const valueInputRef = useRef<TextInput | null>(null);
+  const [inputValue, setInputValue] = useState<string | undefined>(sendTokenAmount?.toString());
+  const sendValue = getSendValue(token, sendTokenAmount);
+  const maxAmount = getMaxAmount(token);
+  const maxError = token && sendTokenAmount && sendTokenAmount > Number(token.quantity.numeric);
+
+  const onInputChange = (value: string) => {
+    const formattedValue = value.replace(/,/g, '.');
+
+    if (Number(formattedValue) >= 0 || formattedValue === '') {
+      setInputValue(formattedValue);
+      SendController.setTokenAmount(Number(formattedValue));
+    }
+  };
+
+  const onMaxPress = () => {
+    if (token && gasPrice) {
+      const isNetworkToken =
+        token.address === undefined ||
+        Object.values(ConstantsUtil.NATIVE_TOKEN_ADDRESS).some(
+          nativeAddress => token?.address === nativeAddress
+        );
+
+      const numericGas = NumberUtil.bigNumber(gasPrice).shiftedBy(-token.quantity.decimals);
+
+      const maxValue = isNetworkToken
+        ? NumberUtil.bigNumber(token.quantity.numeric).minus(numericGas)
+        : NumberUtil.bigNumber(token.quantity.numeric);
+
+      SendController.setTokenAmount(Number(maxValue.toFixed(20)));
+      setInputValue(maxValue.toFixed(20));
+      valueInputRef.current?.blur();
+    }
+  };
+
+  return (
+    <FlexView
+      style={[
+        styles.container,
+        { backgroundColor: Theme['gray-glass-005'], borderColor: Theme['gray-glass-005'] },
+        style
+      ]}
+      justifyContent="center"
+      padding={['xl', 'l', 'l', 'l']}
+    >
+      <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
+        <TextInput
+          ref={valueInputRef}
+          placeholder="0"
+          placeholderTextColor={Theme['fg-275']}
+          returnKeyType="done"
+          style={[styles.input, { color: Theme['fg-100'] }]}
+          autoCapitalize="none"
+          autoCorrect={false}
+          value={inputValue}
+          onChangeText={onInputChange}
+          keyboardType="decimal-pad"
+          inputMode="decimal"
+          autoComplete="off"
+          spellCheck={false}
+          selectionColor={Theme['accent-100']}
+          underlineColorAndroid="transparent"
+          selectTextOnFocus={false}
+          numberOfLines={1}
+          autoFocus={!!token}
+        />
+        <TokenButton
+          imageUrl={token?.iconUrl}
+          text={token?.symbol}
+          onPress={onTokenPress}
+          chevron
+        />
+      </FlexView>
+      {token && (
+        <FlexView
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+          margin={['3xs', '0', '0', '0']}
+        >
+          <Text variant="small-400" color="fg-200" style={styles.sendValue} numberOfLines={1}>
+            {sendValue ?? ''}
+          </Text>
+          <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+            <Text variant="small-400" color={maxError ? 'error-100' : 'fg-200'} numberOfLines={1}>
+              {maxAmount ?? ''}
+            </Text>
+            <Link onPress={onMaxPress}>Max</Link>
+          </FlexView>
+        </FlexView>
+      )}
+    </FlexView>
+  );
+}

package/src/partials/w3m-send-input-token/styles.ts

@@ -0,0 +1,20 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    height: 100,
+    width: '100%',
+    borderRadius: BorderRadius.s,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  input: {
+    fontSize: 32,
+    flex: 1,
+    marginRight: Spacing.xs
+  },
+  sendValue: {
+    flex: 1,
+    marginRight: Spacing.xs
+  }
+});

package/src/partials/w3m-send-input-token/utils.ts

@@ -0,0 +1,21 @@
+import { type Balance, NumberUtil } from '@reown/appkit-common-react-native';
+import { UiUtil } from '@reown/appkit-ui-react-native';
+
+export function getSendValue(token?: Balance, sendTokenAmount?: number) {
+  if (token && sendTokenAmount) {
+    const price = token.price;
+    const totalValue = price * sendTokenAmount;
+
+    return totalValue ? `$${UiUtil.formatNumberToLocalString(totalValue, 2)}` : 'Incorrect value';
+  }
+
+  return null;
+}
+
+export function getMaxAmount(token?: Balance) {
+  if (token) {
+    return NumberUtil.roundNumber(Number(token.quantity.numeric), 6, 5);
+  }
+
+  return null;
+}

package/src/partials/w3m-snackbar/index.tsx

@@ -0,0 +1,49 @@
+import { useSnapshot } from 'valtio';
+import { useEffect, useMemo } from 'react';
+import { Animated } from 'react-native';
+import { SnackController, type SnackControllerState } from '@reown/appkit-core-react-native';
+import { Snackbar as SnackbarComponent } from '@reown/appkit-ui-react-native';
+
+import styles from './styles';
+
+const getIcon = (variant: SnackControllerState['variant']) => {
+  if (variant === 'loading') return 'loading';
+
+  return variant === 'success' ? 'checkmark' : 'close';
+};
+
+export function Snackbar() {
+  const { open, message, variant, long } = useSnapshot(SnackController.state);
+  const componentOpacity = useMemo(() => new Animated.Value(0), []);
+
+  useEffect(() => {
+    if (open) {
+      Animated.timing(componentOpacity, {
+        toValue: 1,
+        duration: 150,
+        useNativeDriver: true
+      }).start();
+      setTimeout(
+        () => {
+          Animated.timing(componentOpacity, {
+            toValue: 0,
+            duration: 300,
+            useNativeDriver: true
+          }).start(() => {
+            SnackController.hide();
+          });
+        },
+        long ? 15000 : 2200
+      );
+    }
+  }, [open, long, componentOpacity]);
+
+  return (
+    <SnackbarComponent
+      message={message}
+      icon={getIcon(variant)}
+      iconColor={variant === 'success' ? 'success-100' : 'error-100'}
+      style={[styles.container, { opacity: componentOpacity }]}
+    />
+  );
+}

package/src/partials/w3m-snackbar/styles.ts

@@ -0,0 +1,12 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    marginTop: Spacing.s,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    alignSelf: 'center'
+  }
+});

package/src/partials/w3m-swap-details/index.tsx

@@ -0,0 +1,160 @@
+import { useSnapshot } from 'valtio';
+import { useState } from 'react';
+import { ConstantsUtil, NetworkController, SwapController } from '@reown/appkit-core-react-native';
+import {
+  FlexView,
+  Text,
+  UiUtil,
+  Toggle,
+  useTheme,
+  Pressable,
+  Icon
+} from '@reown/appkit-ui-react-native';
+import { NumberUtil } from '@reown/appkit-common-react-native';
+
+import { InformationModal } from '../w3m-information-modal';
+import styles from './styles';
+import { getModalData } from './utils';
+
+interface SwapDetailsProps {
+  initialOpen?: boolean;
+  canClose?: boolean;
+}
+
+// -- Constants ----------------------------------------- //
+const slippageRate = ConstantsUtil.CONVERT_SLIPPAGE_TOLERANCE;
+
+export function SwapDetails({ initialOpen, canClose }: SwapDetailsProps) {
+  const Theme = useTheme();
+  const {
+    maxSlippage = 0,
+    sourceToken,
+    toToken,
+    gasPriceInUSD = 0,
+    priceImpact,
+    toTokenAmount
+  } = useSnapshot(SwapController.state);
+
+  const [modalData, setModalData] = useState<{ title: string; description: string } | undefined>();
+
+  const toTokenSwappedAmount =
+    SwapController.state.sourceTokenPriceInUSD && SwapController.state.toTokenPriceInUSD
+      ? (1 / SwapController.state.toTokenPriceInUSD) * SwapController.state.sourceTokenPriceInUSD
+      : 0;
+
+  const renderTitle = () => (
+    <FlexView flexDirection="row" alignItems="flex-start">
+      <Text variant="small-400" color="fg-100">
+        1 {SwapController.state.sourceToken?.symbol} = {''}
+        {UiUtil.formatNumberToLocalString(toTokenSwappedAmount, 3)}{' '}
+        {SwapController.state.toToken?.symbol}
+      </Text>
+      <Text variant="small-400" color="fg-200" style={styles.titlePrice}>
+        ~$
+        {UiUtil.formatNumberToLocalString(SwapController.state.sourceTokenPriceInUSD)}
+      </Text>
+    </FlexView>
+  );
+
+  const minimumReceive = NumberUtil.parseLocalStringToNumber(toTokenAmount) - maxSlippage;
+  const providerFee = SwapController.getProviderFeePrice();
+
+  const onPriceImpactPress = () => {
+    setModalData(getModalData('priceImpact'));
+  };
+
+  const onSlippagePress = () => {
+    const minimumString = UiUtil.formatNumberToLocalString(
+      minimumReceive,
+      minimumReceive < 1 ? 8 : 2
+    );
+    setModalData(
+      getModalData('slippage', {
+        minimumReceive: minimumString,
+        toTokenSymbol: SwapController.state.toToken?.symbol
+      })
+    );
+  };
+
+  const onNetworkCostPress = () => {
+    setModalData(
+      getModalData('networkCost', {
+        networkSymbol: SwapController.state.networkTokenSymbol,
+        networkName: NetworkController.state.caipNetwork?.name
+      })
+    );
+  };
+
+  return (
+    <>
+      <Toggle
+        title={renderTitle()}
+        style={[styles.container, { backgroundColor: Theme['gray-glass-005'] }]}
+        initialOpen={initialOpen}
+        canClose={canClose}
+      >
+        <FlexView style={[styles.item, { backgroundColor: Theme['gray-glass-002'] }]}>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text variant="small-400" color="fg-150" style={styles.detailTitle}>
+              Network cost
+            </Text>
+            <Pressable onPress={onNetworkCostPress} style={styles.infoIcon} hitSlop={10}>
+              <Icon name="infoCircle" size="sm" color="fg-150" />
+            </Pressable>
+          </FlexView>
+          <Text variant="small-400" color="fg-100">
+            ${UiUtil.formatNumberToLocalString(gasPriceInUSD, gasPriceInUSD < 1 ? 8 : 2)}
+          </Text>
+        </FlexView>
+        {!!priceImpact && (
+          <FlexView style={[styles.item, { backgroundColor: Theme['gray-glass-002'] }]}>
+            <FlexView flexDirection="row" alignItems="center">
+              <Text variant="small-400" color="fg-150" style={styles.detailTitle}>
+                Price impact
+              </Text>
+              <Pressable onPress={onPriceImpactPress} style={styles.infoIcon} hitSlop={10}>
+                <Icon name="infoCircle" size="sm" color="fg-150" />
+              </Pressable>
+            </FlexView>
+            <Text variant="small-400" color="fg-100">
+              ~{UiUtil.formatNumberToLocalString(priceImpact, 3)}%
+            </Text>
+          </FlexView>
+        )}
+        {maxSlippage !== undefined && maxSlippage > 0 && !!sourceToken?.symbol && (
+          <FlexView style={[styles.item, { backgroundColor: Theme['gray-glass-002'] }]}>
+            <FlexView flexDirection="row" alignItems="center">
+              <Text variant="small-400" color="fg-150" style={styles.detailTitle}>
+                Max. slippage
+              </Text>
+              <Pressable onPress={onSlippagePress} style={styles.infoIcon} hitSlop={10}>
+                <Icon name="infoCircle" size="sm" color="fg-150" />
+              </Pressable>
+            </FlexView>
+            <Text variant="small-400" color="fg-200">
+              {UiUtil.formatNumberToLocalString(maxSlippage, 6)} {toToken?.symbol}{' '}
+              <Text variant="small-400" color="fg-100">
+                {slippageRate}%
+              </Text>
+            </Text>
+          </FlexView>
+        )}
+        <FlexView style={[styles.item, { backgroundColor: Theme['gray-glass-002'] }]}>
+          <Text variant="small-400" color="fg-150" style={styles.detailTitle}>
+            Included provider fee
+          </Text>
+          <Text variant="small-400" color="fg-100">
+            ${UiUtil.formatNumberToLocalString(providerFee, providerFee < 1 ? 8 : 2)}
+          </Text>
+        </FlexView>
+      </Toggle>
+      <InformationModal
+        iconName="infoCircle"
+        title={modalData?.title}
+        description={modalData?.description}
+        visible={!!modalData}
+        onClose={() => setModalData(undefined)}
+      />
+    </>
+  );
+}

package/src/partials/w3m-swap-details/styles.ts

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  container: {
+    width: '100%',
+    borderRadius: 16
+  },
+  titlePrice: {
+    marginLeft: Spacing['3xs']
+  },
+  detailTitle: {
+    marginRight: Spacing['3xs']
+  },
+  item: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: Spacing.s,
+    borderRadius: BorderRadius.xxs,
+    marginTop: Spacing['2xs']
+  },
+  infoIcon: {
+    borderRadius: BorderRadius.full
+  }
+});