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

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

@@ -0,0 +1,43 @@
+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 } = useSnapshot(SnackController.state);
+  const componentOpacity = useMemo(() => new Animated.Value(0), []);
+
+  useEffect(() => {
+    if (open) {
+      Animated.timing(componentOpacity, {
+        toValue: 1,
+        duration: 150,
+        useNativeDriver: true
+      }).start();
+    } else {
+      Animated.timing(componentOpacity, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true
+      }).start();
+    }
+  }, [open, 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,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,163 @@
+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 { type SwapTokenWithBalance } from '@reown/appkit-core-react-native';
+
+import styles from './styles';
+import { NumberUtil } 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>
+              )}
+            </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/utils/HelpersUtil.ts

@@ -0,0 +1,211 @@
+import type { Namespace, NamespaceConfig } from '@walletconnect/universal-provider';
+import {
+  type AppKitNetwork,
+  type CaipNetworkId,
+  type ChainNamespace,
+  solana,
+  solanaDevnet
+} from '@reown/appkit-common-react-native';
+
+export const DEFAULT_METHODS = {
+  solana: [
+    'solana_signMessage',
+    'solana_signTransaction',
+    'solana_requestAccounts',
+    'solana_getAccounts',
+    'solana_signAllTransactions',
+    'solana_signAndSendTransaction'
+  ],
+  eip155: [
+    'eth_accounts',
+    'eth_requestAccounts',
+    'eth_sendRawTransaction',
+    'eth_sign',
+    'eth_signTransaction',
+    'eth_signTypedData',
+    'eth_signTypedData_v3',
+    'eth_signTypedData_v4',
+    'eth_sendTransaction',
+    'personal_sign',
+    'wallet_switchEthereumChain',
+    'wallet_addEthereumChain',
+    'wallet_getPermissions',
+    'wallet_requestPermissions',
+    'wallet_registerOnboarding',
+    'wallet_watchAsset',
+    'wallet_scanQRCode',
+    // EIP-5792
+    'wallet_getCallsStatus',
+    'wallet_showCallsStatus',
+    'wallet_sendCalls',
+    'wallet_getCapabilities',
+    // EIP-7715
+    'wallet_grantPermissions',
+    'wallet_revokePermissions',
+    //EIP-7811
+    'wallet_getAssets'
+  ],
+  bip122: ['sendTransfer', 'signMessage', 'signPsbt', 'getAccountAddresses']
+};
+
+export const WcHelpersUtil = {
+  getMethodsByChainNamespace(chainNamespace: ChainNamespace): string[] {
+    return DEFAULT_METHODS[chainNamespace as keyof typeof DEFAULT_METHODS] || [];
+  },
+
+  createDefaultNamespace(chainNamespace: ChainNamespace): Namespace {
+    return {
+      methods: this.getMethodsByChainNamespace(chainNamespace),
+      events: ['accountsChanged', 'chainChanged'],
+      chains: [],
+      rpcMap: {}
+    };
+  },
+
+  applyNamespaceOverrides(
+    baseNamespaces: NamespaceConfig,
+    overrides?: any //TODO: add OptionsControllerState['universalProviderConfigOverride']
+  ): NamespaceConfig {
+    if (!overrides) {
+      return { ...baseNamespaces };
+    }
+
+    const result = { ...baseNamespaces };
+
+    const namespacesToOverride = new Set<string>();
+
+    if (overrides.methods) {
+      Object.keys(overrides.methods).forEach(ns => namespacesToOverride.add(ns));
+    }
+
+    if (overrides.chains) {
+      Object.keys(overrides.chains).forEach(ns => namespacesToOverride.add(ns));
+    }
+
+    if (overrides.events) {
+      Object.keys(overrides.events).forEach(ns => namespacesToOverride.add(ns));
+    }
+
+    if (overrides.rpcMap) {
+      Object.keys(overrides.rpcMap).forEach(chainId => {
+        const [ns] = chainId.split(':');
+        if (ns) {
+          namespacesToOverride.add(ns);
+        }
+      });
+    }
+
+    namespacesToOverride.forEach(ns => {
+      if (!result[ns]) {
+        result[ns] = this.createDefaultNamespace(ns as ChainNamespace);
+      }
+    });
+
+    if (overrides.methods) {
+      Object.entries(overrides.methods).forEach(([ns, methods]) => {
+        if (result[ns]) {
+          //@ts-ignore
+          result[ns].methods = methods;
+        }
+      });
+    }
+
+    if (overrides.chains) {
+      Object.entries(overrides.chains).forEach(([ns, chains]) => {
+        if (result[ns]) {
+          //@ts-ignore
+          result[ns].chains = chains;
+        }
+      });
+    }
+
+    if (overrides.events) {
+      Object.entries(overrides.events).forEach(([ns, events]) => {
+        if (result[ns]) {
+          //@ts-ignore
+          result[ns].events = events;
+        }
+      });
+    }
+
+    if (overrides.rpcMap) {
+      const processedNamespaces = new Set<string>();
+
+      Object.entries(overrides.rpcMap).forEach(([chainId, rpcUrl]) => {
+        const [ns, id] = chainId.split(':');
+        if (!ns || !id || !result[ns]) {
+          return;
+        }
+
+        //@ts-ignore
+        if (!result[ns].rpcMap) {
+          //@ts-ignore
+          result[ns].rpcMap = {};
+        }
+
+        //@ts-ignore
+        if (!processedNamespaces.has(ns)) {
+          //@ts-ignore
+          result[ns].rpcMap = {};
+          processedNamespaces.add(ns);
+        }
+
+        //@ts-ignore
+        result[ns].rpcMap[id] = rpcUrl;
+      });
+    }
+
+    return result;
+  },
+
+  createNamespaces(
+    caipNetworks: AppKitNetwork[],
+    configOverride?: any //TODO: fix this
+  ): NamespaceConfig {
+    const defaultNamespaces = caipNetworks.reduce<NamespaceConfig>((acc, chain) => {
+      const { id, rpcUrls } = chain;
+      const chainNamespace = chain.chainNamespace || 'eip155';
+      const rpcUrl = rpcUrls.default.http[0];
+
+      if (!acc[chainNamespace]) {
+        acc[chainNamespace] = this.createDefaultNamespace(chainNamespace);
+      }
+
+      const caipNetworkId: CaipNetworkId = `${chainNamespace}:${id}`;
+
+      const namespace = acc[chainNamespace];
+
+      if (namespace) {
+        //@ts-ignore
+        namespace.chains.push(caipNetworkId);
+
+        // Workaround for wallets that only support deprecated Solana network ID
+        switch (caipNetworkId) {
+          case solana.caipNetworkId:
+            namespace.chains.push(solana.deprecatedCaipNetworkId as string);
+            break;
+          case solanaDevnet.caipNetworkId:
+            namespace.chains.push(solanaDevnet.deprecatedCaipNetworkId as string);
+            break;
+          default:
+        }
+
+        if (namespace?.rpcMap && rpcUrl) {
+          namespace.rpcMap[id] = rpcUrl;
+        }
+      }
+
+      return acc;
+    }, {});
+
+    return this.applyNamespaceOverrides(defaultNamespaces, configOverride);
+  }
+};
+
+export namespace WcHelpersUtil {
+  export type SessionEventData = {
+    id: string;
+    topic: string;
+    params: { chainId: string; event: { data: unknown; name: string } };
+  };
+}