@reown/appkit-react-native 0.0.0-canary-20251008180350

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

@@ -0,0 +1,164 @@
+import { useSnapshot } from 'valtio';
+import { useState } from 'react';
+import {
+  ConnectionsController,
+  ConstantsUtil,
+  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: ConnectionsController.state.activeNetwork?.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
+  }
+});

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

@@ -0,0 +1,33 @@
+export interface ModalData {
+  detail: ModalDetail;
+  opts?: ModalDataOpts;
+}
+
+export type ModalDetail = 'slippage' | 'networkCost' | 'priceImpact';
+
+export interface ModalDataOpts {
+  networkSymbol?: string;
+  networkName?: string;
+  minimumReceive?: string;
+  toTokenSymbol?: string;
+}
+
+export const getModalData = (detail: ModalDetail, opts?: ModalDataOpts) => {
+  switch (detail) {
+    case 'slippage':
+      return {
+        title: 'Max. slippage',
+        description: `Max slippage sets the minimum amount you must receive for the transaction to proceed. The transaction will be reversed if you receive less than ${opts?.minimumReceive} ${opts?.toTokenSymbol} due to price changes`
+      };
+    case 'networkCost':
+      return {
+        title: 'Network cost',
+        description: `Network cost is paid in ${opts?.networkSymbol} on the ${opts?.networkName} network in order to execute the transaction`
+      };
+    case 'priceImpact':
+      return {
+        title: 'Price impact',
+        description: 'Price impact reflects the change in market price due to your trade'
+      };
+  }
+};

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

@@ -0,0 +1,162 @@
+import { useRef } from 'react';
+import type BigNumber from 'bignumber.js';
+import { TextInput, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  FlexView,
+  useTheme,
+  TokenButton,
+  Shimmer,
+  Text,
+  UiUtil,
+  Link
+} from '@reown/appkit-ui-react-native';
+
+import styles from './styles';
+import { NumberUtil, type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
+
+export interface SwapInputProps {
+  token?: SwapTokenWithBalance;
+  value?: string;
+  gasPrice?: number;
+  style?: StyleProp<ViewStyle>;
+  loading?: boolean;
+  loadingValues?: boolean;
+  onTokenPress?: () => void;
+  onMaxPress?: () => void;
+  onChange?: (value: string) => void;
+  balance?: BigNumber;
+  marketValue?: number;
+  editable?: boolean;
+  autoFocus?: boolean;
+}
+
+const MINIMUM_USD_VALUE_TO_CONVERT = 0.00005;
+
+export function SwapInput({
+  token,
+  value,
+  style,
+  loading,
+  loadingValues,
+  onTokenPress,
+  onMaxPress,
+  onChange,
+  marketValue,
+  editable,
+  autoFocus
+}: SwapInputProps) {
+  const Theme = useTheme();
+  const valueInputRef = useRef<TextInput | null>(null);
+  const isMarketValueGreaterThanZero =
+    !!marketValue && NumberUtil.bigNumber(marketValue).isGreaterThan('0');
+  const maxAmount = UiUtil.formatNumberToLocalString(token?.quantity?.numeric, 3);
+  const maxError = Number(value) > Number(token?.quantity?.numeric);
+  const showMax =
+    onMaxPress &&
+    !!token?.quantity?.numeric &&
+    NumberUtil.multiply(token?.quantity.numeric, token?.price).isGreaterThan(
+      MINIMUM_USD_VALUE_TO_CONVERT
+    );
+
+  const handleInputChange = (_value: string) => {
+    const formattedValue = _value.replace(/,/g, '.');
+
+    if (Number(formattedValue) >= 0 || formattedValue === '') {
+      onChange?.(formattedValue);
+    }
+  };
+
+  const handleMaxPress = () => {
+    if (valueInputRef.current) {
+      valueInputRef.current.blur();
+    }
+
+    onMaxPress?.();
+  };
+
+  return (
+    <FlexView
+      style={[
+        styles.container,
+        { backgroundColor: Theme['gray-glass-005'], borderColor: Theme['gray-glass-005'] },
+        style
+      ]}
+      justifyContent="center"
+      padding={['xl', 'l', 'l', 'l']}
+    >
+      {loading ? (
+        <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
+          <FlexView alignItems="flex-start">
+            <Shimmer height={36} width={80} borderRadius={12} style={styles.valueLoader} />
+            <Shimmer height={20} width={120} borderRadius={8} />
+          </FlexView>
+          <Shimmer height={36} width={80} borderRadius={18} />
+        </FlexView>
+      ) : (
+        <>
+          <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
+            {loadingValues ? (
+              <Shimmer height={36} width={80} borderRadius={12} style={styles.valueLoader} />
+            ) : (
+              <TextInput
+                ref={valueInputRef}
+                placeholder="0"
+                placeholderTextColor={Theme['fg-275']}
+                returnKeyType="done"
+                style={[styles.input, { color: Theme['fg-100'] }]}
+                autoCapitalize="none"
+                autoCorrect={false}
+                value={value}
+                onChangeText={handleInputChange}
+                keyboardType="decimal-pad"
+                inputMode="decimal"
+                autoComplete="off"
+                spellCheck={false}
+                selectionColor={Theme['accent-100']}
+                underlineColorAndroid="transparent"
+                selectTextOnFocus={false}
+                numberOfLines={1}
+                editable={editable}
+                autoFocus={autoFocus}
+              />
+            )}
+            <TokenButton
+              text={token?.symbol}
+              imageUrl={token?.logoUri}
+              onPress={onTokenPress}
+              chevron
+            />
+          </FlexView>
+          {loadingValues ? (
+            <Shimmer height={20} width={120} borderRadius={8} />
+          ) : showMax || isMarketValueGreaterThanZero ? (
+            <FlexView
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="space-between"
+              margin={['3xs', '0', '0', '0']}
+            >
+              <Text variant="small-400" color="fg-200" numberOfLines={1}>
+                {isMarketValueGreaterThanZero
+                  ? `~$${UiUtil.formatNumberToLocalString(marketValue, 6)}`
+                  : ''}
+              </Text>
+              {showMax ? (
+                <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+                  <Text
+                    variant="small-400"
+                    color={maxError ? 'error-100' : 'fg-200'}
+                    numberOfLines={1}
+                  >
+                    {showMax ? maxAmount : ''}
+                  </Text>
+                  <Link onPress={handleMaxPress}>Max</Link>
+                </FlexView>
+              ) : null}
+            </FlexView>
+          ) : null}
+        </>
+      )}
+    </FlexView>
+  );
+}

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

@@ -0,0 +1,23 @@
+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
+  },
+  valueLoader: {
+    marginBottom: Spacing.xs
+  }
+});

package/src/types.ts

@@ -0,0 +1,186 @@
+import { type OptionsControllerState } from '@reown/appkit-core-react-native';
+import {
+  type Features,
+  type UniversalProviderConfigOverride,
+  type WalletConnector,
+  type BlockchainAdapter,
+  type Metadata,
+  type Network,
+  type Storage,
+  type ThemeMode,
+  type ThemeVariables,
+  type Tokens,
+  type SIWXConfig
+} from '@reown/appkit-common-react-native';
+
+/**
+ * Configuration interface for initializing the AppKit instance.
+ * This interface defines all the required and optional parameters needed to set up
+ * the AppKit with blockchain adapters, networks, storage, and various customization options.
+ *
+ * @see {@link https://docs.reown.com/appkit/react-native/core/options | AppKit Options Documentation}
+ */
+export interface AppKitConfig {
+  /**
+   * The WalletConnect project ID required for establishing connections.
+   * This is obtained from the https://dashboard.reown.com/
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#projectid | Project ID Documentation}
+   */
+  projectId: string;
+
+  /**
+   * Metadata information about your application.
+   * This is displayed to users during the connection process.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#metadata | Metadata Documentation}
+   */
+  metadata: Metadata;
+
+  /**
+   * Array of blockchain adapters that handle different blockchain networks.
+   * Each adapter must implement the BlockchainAdapter interface and support
+   * a specific chain namespace (eip155, solana, etc.).
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#adapters | Adapters Documentation}
+   * @example [new EthersAdapter(), new SolanaAdapter()]
+   */
+  adapters: BlockchainAdapter[];
+
+  /**
+   * Array of supported networks that your application can connect to.
+   * Each network should have a corresponding adapter in the adapters array.
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#networks | Networks Documentation}
+   * @example [ethereum, polygon, solana]
+   */
+  networks: Network[];
+
+  /**
+   * Storage implementation for persisting connection state, preferences, and session data.
+   * Must implement the Storage interface with async methods for data persistence.
+   */
+  storage: Storage;
+
+  /**
+   * Optional array of custom wallet connectors beyond the default WalletConnect connector.
+   * Useful for adding support for specific wallets like Coinbase, Phantom, etc.
+   * @example [new CoinbaseConnector(), new PhantomConnector()]
+   */
+  extraConnectors?: WalletConnector[];
+
+  /**
+   * Optional clipboard client for handling copy operations in different environments.
+   * Useful for customizing how addresses and other data are copied to clipboard.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#clipboardclient | Clipboard Client Documentation}
+   */
+  clipboardClient?: OptionsControllerState['clipboardClient'];
+
+  /**
+   * Optional array of wallet IDs to include in the wallet selection list.
+   * If provided, only these wallets will be shown to users.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#includewalletids | Include Wallet IDs Documentation}
+   * @example ["1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369", "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0"]
+   */
+  includeWalletIds?: OptionsControllerState['includeWalletIds'];
+
+  /**
+   * Optional array of wallet IDs to exclude from the wallet selection list.
+   * These wallets will not be shown to users even if they're available.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#excludewalletids | Exclude Wallet IDs Documentation}
+   * @example ["1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369", "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0"]
+   */
+  excludeWalletIds?: OptionsControllerState['excludeWalletIds'];
+
+  /**
+   * Optional array of wallet IDs to feature at the top of the wallet selection list.
+   * These wallets will appear prominently for better user experience.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#featuredwalletids | Featured Wallet IDs Documentation}
+   * @example ["1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369", "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0"]
+   */
+  featuredWalletIds?: OptionsControllerState['featuredWalletIds'];
+
+  /**
+   * Optional array of custom wallet configurations.
+   * Allows you to add custom wallets with specific metadata and behavior.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#customwallets | Custom Wallets Documentation}
+   */
+  customWallets?: OptionsControllerState['customWallets'];
+
+  /**
+   * Optional token configurations for different networks.
+   * Used for displaying token balances and information in the UI.
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#tokens | Tokens Documentation}
+   * @example { "eip155:1": { address: "0x..." } }
+   */
+  tokens?: Tokens;
+
+  /**
+   * Optional flag to enable analytics tracking.
+   * When enabled, AppKit will send usage analytics events.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#enableanalytics | Enable Analytics Documentation}
+   * @default false
+   */
+  enableAnalytics?: OptionsControllerState['enableAnalytics'];
+
+  /**
+   * Optional flag to enable debug mode.
+   * When enabled, additional logging and debugging information will be output.
+   * Only enabled in development mode.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#debug | Debug Documentation}
+   * @default false
+   */
+  debug?: OptionsControllerState['debug'];
+
+  /**
+   * Optional theme mode for the AppKit UI.
+   * Controls whether the interface uses light or dark theme.
+   * @default "dark"
+   * @see {@link https://docs.reown.com/appkit/react-native/core/theming#thememode | Theme Mode Documentation}
+   * @example "light" | "dark"
+   */
+  themeMode?: ThemeMode;
+
+  /**
+   * Optional theme variables for customizing the AppKit UI appearance.
+   * Allows you to override default colors and styling.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/theming#themevariables | Theme Variables Documentation}
+   * @example { accent: "#3B82F6" }
+   */
+  themeVariables?: ThemeVariables;
+
+  /**
+   * @experimental - This feature is not production ready.
+   * Enable Sign In With X (SIWX) feature.
+   * @default undefined
+   */
+  siwx?: SIWXConfig;
+
+  /**
+   * Optional default network to use when no specific network is selected.
+   * This network will be used as the initial active network.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#defaultnetwork | Default Network Documentation}
+   */
+  defaultNetwork?: Network;
+
+  /**
+   * Optional features configuration to enable/disable specific AppKit functionality.
+   * Controls which features are available in the UI and API.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#features | Features Documentation}
+   * @example { onramp: true, swap: false }
+   */
+  features?: Features;
+
+  /**
+   * Optional configuration override for the Universal Provider.
+   * Allows customization of WalletConnect's Universal Provider behavior.
+   */
+  universalProviderConfigOverride?: UniversalProviderConfigOverride;
+}