@reown/appkit-react-native 2.0.0 → 2.0.1

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

@@ -3,25 +3,24 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   modal: {
+    flex: 1,
     margin: 0,
     justifyContent: 'flex-end'
   },
   header: {
-    marginBottom: Spacing.s,
-    paddingHorizontal: Spacing.m
+    paddingTop: Spacing['2xs'],
+    paddingBottom: Spacing.s
+  },
+  headerTop: {
+    paddingHorizontal: Spacing.m,
+    paddingBottom: Spacing.xs
   },
   container: {
-    height: '80%',
     borderTopLeftRadius: BorderRadius.l,
-    borderTopRightRadius: BorderRadius.l,
-    paddingTop: Spacing.m
-  },
-  selectedContainer: {
-    paddingHorizontal: Spacing.m
+    borderTopRightRadius: BorderRadius.l
   },
   listContent: {
-    paddingTop: Spacing.s,
-    paddingHorizontal: Spacing.m
+    paddingTop: Spacing.s
   },
   iconPlaceholder: {
     height: 32,
@@ -37,6 +36,6 @@ export default StyleSheet.create({
     marginHorizontal: Spacing.s
   },
   separator: {
-    marginTop: Spacing.m
+    marginVertical: Spacing.xs
   }
 });

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

@@ -1,7 +1,7 @@
 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 { SendController } from '@reown/appkit-core-react-native';
 
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import styles from './styles';
@@ -15,20 +15,9 @@ export function SendInputAddress({ value }: SendInputAddressProps) {
   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);
-    }
+    SendController.setReceiverAddress(search);
+    SendController.setReceiverProfileName(undefined);
+    SendController.setReceiverProfileImageUrl(undefined);
   };
 
   const { debouncedCallback: onDebounceSearch } = useDebounceCallback({

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

@@ -1,8 +1,15 @@
 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 {
+  FlexView,
+  Link,
+  Text,
+  useTheme,
+  TokenButton,
+  Shimmer
+} 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 { SendController } from '@reown/appkit-core-react-native';
 
 import { getMaxAmount, getSendValue } from './utils';
 import styles from './styles';
@@ -10,24 +17,24 @@ import styles from './styles';
 export interface SendInputTokenProps {
   token?: Balance;
   sendTokenAmount?: number;
-  gasPrice?: number;
   style?: StyleProp<ViewStyle>;
   onTokenPress?: () => void;
+  loading?: boolean;
 }
 
 export function SendInputToken({
   token,
   sendTokenAmount,
-  gasPrice,
   style,
-  onTokenPress
+  onTokenPress,
+  loading
 }: 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 maxError = token && sendTokenAmount && sendTokenAmount > Number(token?.quantity?.numeric);
 
   const onInputChange = (value: string) => {
     const formattedValue = value.replace(/,/g, '.');
@@ -39,26 +46,17 @@ export function SendInputToken({
   };
 
   const onMaxPress = () => {
-    if (token && gasPrice) {
-      const isNetworkToken =
-        token.address === undefined ||
-        Object.values(ConstantsUtil.NATIVE_TOKEN_ADDRESS).some(
-          nativeAddress => token?.address?.split(':')[2] === 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);
-
+    if (token?.quantity?.numeric) {
+      const maxValue = NumberUtil.bigNumber(token.quantity.numeric);
       SendController.setTokenAmount(Number(maxValue.toFixed(20)));
       setInputValue(maxValue.toFixed(20));
       valueInputRef.current?.blur();
     }
   };
 
-  return (
+  return loading ? (
+    <Shimmer width="100%" height={100} borderRadius={16} style={styles.inputLoading} />
+  ) : (
     <FlexView
       style={[
         styles.container,
@@ -96,7 +94,7 @@ export function SendInputToken({
           chevron
         />
       </FlexView>
-      {token && (
+      {token ? (
         <FlexView
           flexDirection="row"
           alignItems="center"
@@ -113,7 +111,7 @@ export function SendInputToken({
             <Link onPress={onMaxPress}>Max</Link>
           </FlexView>
         </FlexView>
-      )}
+      ) : null}
     </FlexView>
   );
 }

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

@@ -16,5 +16,8 @@ export default StyleSheet.create({
   sendValue: {
     flex: 1,
     marginRight: Spacing.xs
+  },
+  inputLoading: {
+    marginBottom: Spacing.xs
   }
 });

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

@@ -2,7 +2,7 @@ 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) {
+  if (token?.price && sendTokenAmount) {
     const price = token.price;
     const totalValue = price * sendTokenAmount;
 
@@ -13,7 +13,7 @@ export function getSendValue(token?: Balance, sendTokenAmount?: number) {
 }
 
 export function getMaxAmount(token?: Balance) {
-  if (token) {
+  if (token?.quantity?.numeric) {
     return NumberUtil.roundNumber(Number(token.quantity.numeric), 6, 5);
   }
 

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

@@ -13,7 +13,7 @@ const getIcon = (variant: SnackControllerState['variant']) => {
 };
 
 export function Snackbar() {
-  const { open, message, variant, long } = useSnapshot(SnackController.state);
+  const { open, message, variant } = useSnapshot(SnackController.state);
   const componentOpacity = useMemo(() => new Animated.Value(0), []);
 
   useEffect(() => {
@@ -23,20 +23,14 @@ export function Snackbar() {
         duration: 150,
         useNativeDriver: true
       }).start();
-      setTimeout(
-        () => {
-          Animated.timing(componentOpacity, {
-            toValue: 0,
-            duration: 300,
-            useNativeDriver: true
-          }).start(() => {
-            SnackController.hide();
-          });
-        },
-        long ? 15000 : 2200
-      );
+    } else {
+      Animated.timing(componentOpacity, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true
+      }).start();
     }
-  }, [open, long, componentOpacity]);
+  }, [open, componentOpacity]);
 
   return (
     <SnackbarComponent

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

@@ -10,10 +10,9 @@ import {
   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';
+import { NumberUtil, type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
 
 export interface SwapInputProps {
   token?: SwapTokenWithBalance;
@@ -21,6 +20,7 @@ export interface SwapInputProps {
   gasPrice?: number;
   style?: StyleProp<ViewStyle>;
   loading?: boolean;
+  loadingValues?: boolean;
   onTokenPress?: () => void;
   onMaxPress?: () => void;
   onChange?: (value: string) => void;
@@ -37,6 +37,7 @@ export function SwapInput({
   value,
   style,
   loading,
+  loadingValues,
   onTokenPress,
   onMaxPress,
   onChange,
@@ -48,11 +49,11 @@ export function SwapInput({
   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 maxAmount = UiUtil.formatNumberToLocalString(token?.quantity?.numeric, 3);
+  const maxError = Number(value) > Number(token?.quantity?.numeric);
   const showMax =
     onMaxPress &&
-    !!token?.quantity.numeric &&
+    !!token?.quantity?.numeric &&
     NumberUtil.multiply(token?.quantity.numeric, token?.price).isGreaterThan(
       MINIMUM_USD_VALUE_TO_CONVERT
     );
@@ -85,33 +86,40 @@ export function SwapInput({
     >
       {loading ? (
         <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
-          <Shimmer height={36} width={80} borderRadius={12} />
+          <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">
-            <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}
-            />
+            {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}
@@ -119,7 +127,9 @@ export function SwapInput({
               chevron
             />
           </FlexView>
-          {(showMax || isMarketValueGreaterThanZero) && (
+          {loadingValues ? (
+            <Shimmer height={20} width={120} borderRadius={8} />
+          ) : showMax || isMarketValueGreaterThanZero ? (
             <FlexView
               flexDirection="row"
               alignItems="center"
@@ -131,7 +141,7 @@ export function SwapInput({
                   ? `~$${UiUtil.formatNumberToLocalString(marketValue, 6)}`
                   : ''}
               </Text>
-              {showMax && (
+              {showMax ? (
                 <FlexView flexDirection="row" alignItems="center" justifyContent="center">
                   <Text
                     variant="small-400"
@@ -142,9 +152,9 @@ export function SwapInput({
                   </Text>
                   <Link onPress={handleMaxPress}>Max</Link>
                 </FlexView>
-              )}
+              ) : null}
             </FlexView>
-          )}
+          ) : null}
         </>
       )}
     </FlexView>

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

@@ -16,5 +16,8 @@ export default StyleSheet.create({
   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;
+}

package/src/utils/HelpersUtil.ts

@@ -1,10 +1,14 @@
 import type { Namespace, NamespaceConfig } from '@walletconnect/universal-provider';
-import type {
-  AppKitNetwork,
-  CaipNetworkId,
-  ChainNamespace
+import {
+  type AppKitNetwork,
+  type CaipNetworkId,
+  type ChainNamespace,
+  ConstantsUtil,
+  type UniversalProviderConfigOverride,
+  type WcWallet,
+  solana,
+  solanaDevnet
 } from '@reown/appkit-common-react-native';
-import { solana, solanaDevnet } from '@reown/appkit-common-react-native';
 
 export const DEFAULT_METHODS = {
   solana: [
@@ -63,7 +67,7 @@ export const WcHelpersUtil = {
 
   applyNamespaceOverrides(
     baseNamespaces: NamespaceConfig,
-    overrides?: any //TODO: add OptionsControllerState['universalProviderConfigOverride']
+    overrides?: UniversalProviderConfigOverride
   ): NamespaceConfig {
     if (!overrides) {
       return { ...baseNamespaces };
@@ -159,7 +163,7 @@ export const WcHelpersUtil = {
 
   createNamespaces(
     caipNetworks: AppKitNetwork[],
-    configOverride?: any //TODO: fix this
+    configOverride?: UniversalProviderConfigOverride
   ): NamespaceConfig {
     const defaultNamespaces = caipNetworks.reduce<NamespaceConfig>((acc, chain) => {
       const { id, rpcUrls } = chain;
@@ -198,6 +202,34 @@ export const WcHelpersUtil = {
     }, {});
 
     return this.applyNamespaceOverrides(defaultNamespaces, configOverride);
+  },
+
+  isExternalWallet(wallet?: WcWallet) {
+    if (!wallet) {
+      return false;
+    }
+
+    return (
+      wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id ||
+      wallet.id === ConstantsUtil.SOLFLARE_CUSTOM_WALLET.id ||
+      wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id
+    );
+  },
+
+  getConnectorTypeByWallet(wallet?: WcWallet) {
+    if (!wallet) {
+      return 'walletconnect';
+    }
+
+    if (wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id) {
+      return 'phantom';
+    } else if (wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id) {
+      return 'coinbase';
+    } else if (wallet.id === ConstantsUtil.SOLFLARE_CUSTOM_WALLET.id) {
+      return 'solflare';
+    } else {
+      return 'walletconnect';
+    }
   }
 };