@reown/appkit-react-native 0.0.0-chore-solflare-20250730210452 → 0.0.0-chore-spring-effect-20250909214820

package/src/types.ts

@@ -0,0 +1,187 @@
+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 AppKitSIWEClient,
+  type ThemeMode,
+  type ThemeVariables,
+  type Tokens
+} 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.
+   *
+   * @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;
+
+  /**
+   * Optional SIWE (Sign-In with Ethereum) configuration.
+   * Enables authentication flow using Ethereum signatures.
+   * Must implement the AppKitSIWEClient interface.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/siwe | SIWE Documentation}
+   */
+  siweConfig?: AppKitSIWEClient;
+
+  /**
+   * 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

@@ -3,6 +3,9 @@ import {
   type AppKitNetwork,
   type CaipNetworkId,
   type ChainNamespace,
+  ConstantsUtil,
+  type UniversalProviderConfigOverride,
+  type WcWallet,
   solana,
   solanaDevnet
 } from '@reown/appkit-common-react-native';
@@ -64,7 +67,7 @@ export const WcHelpersUtil = {
 
   applyNamespaceOverrides(
     baseNamespaces: NamespaceConfig,
-    overrides?: any //TODO: add OptionsControllerState['universalProviderConfigOverride']
+    overrides?: UniversalProviderConfigOverride
   ): NamespaceConfig {
     if (!overrides) {
       return { ...baseNamespaces };
@@ -160,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;
@@ -199,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';
+    }
   }
 };
 

package/src/utils/NetworkUtil.ts

@@ -1,10 +1,10 @@
 import {
   type AppKitNetwork,
   type CaipNetworkId,
+  type CaipNamespaces,
   ConstantsUtil,
   type Network
 } from '@reown/appkit-common-react-native';
-import type { CaipNamespaces } from '@reown/appkit-core-react-native';
 
 export const NetworkUtil = {
   formatNetwork(network: Network, projectId: string): AppKitNetwork {
@@ -42,17 +42,17 @@ export const NetworkUtil = {
     return url.toString();
   },
 
-  getDefaultChainId(
+  getDefaultNetwork(
     namespaces: CaipNamespaces,
     defaultNetwork?: AppKitNetwork
-  ): CaipNetworkId | undefined {
+  ): AppKitNetwork | undefined {
     if (!defaultNetwork) return undefined;
 
     const isValidDefaultNetwork = Object.values(namespaces).some(
       namespace => namespace?.chains?.some(chain => chain === defaultNetwork.caipNetworkId)
     );
     if (isValidDefaultNetwork) {
-      return defaultNetwork.caipNetworkId;
+      return defaultNetwork;
     }
 
     return undefined;

package/src/utils/UiUtil.ts

@@ -1,11 +1,4 @@
-import {
-  AssetUtil,
-  ConnectionController,
-  RouterController,
-  StorageUtil,
-  type WcWallet
-} from '@reown/appkit-core-react-native';
-import type { WalletDeepLink } from '@reown/appkit-common-react-native';
+import { RouterController } from '@reown/appkit-core-react-native';
 
 // Global animation instance to coordinate transitions
 let currentRouteTransition: ((direction: 'forward' | 'backward' | 'none') => Promise<void>) | null =
@@ -24,23 +17,10 @@ export const UiUtil = {
     if (currentRouteTransition) {
       const { navigationDirection } = RouterController.state;
       await currentRouteTransition(navigationDirection);
-    }
-  },
-
-  storeConnectedWallet: async (wcLinking: WalletDeepLink, pressedWallet?: WcWallet) => {
-    StorageUtil.setWalletConnectDeepLink(wcLinking);
-
-    if (pressedWallet) {
-      UiUtil.storeRecentWallet(pressedWallet);
-      const url = AssetUtil.getWalletImage(pressedWallet);
-      ConnectionController.setConnectedWalletImageUrl(url);
-    }
-  },
-
-  storeRecentWallet: async (wallet: WcWallet) => {
-    const recentWallets = await StorageUtil.addRecentWallet(wallet);
-    if (recentWallets) {
-      ConnectionController.setRecentWallets(recentWallets);
+      // After the transition completes, ensure direction is reset to 'none'
+      if (RouterController.state.navigationDirection !== 'none') {
+        RouterController.state.navigationDirection = 'none';
+      }
     }
   }
 };

package/src/views/w3m-account-default-view/components/auth-buttons.tsx

@@ -21,7 +21,7 @@ export function AuthButtons({
   return (
     <>
       <UpgradeWalletButton onPress={onUpgradePress} style={styles.upgradeButton} />
-      {socialProvider && (
+      {socialProvider ? (
         <ListSocial
           logo={socialProvider}
           logoHeight={32}
@@ -34,7 +34,7 @@ export function AuthButtons({
             {text}
           </Text>
         </ListSocial>
-      )}
+      ) : null}
     </>
   );
 }

package/src/views/w3m-account-default-view/index.tsx

@@ -13,7 +13,8 @@ import {
   SwapController,
   OnRampController,
   ConnectionsController,
-  AssetController
+  AssetController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 // import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
 import {
@@ -24,17 +25,17 @@ import {
   Text,
   UiUtil,
   Spacing,
-  ListItem
+  ListItem,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { AuthButtons } from './components/auth-buttons';
 import styles from './styles';
 
 export function AccountDefaultView() {
-  const { switchAccountType, disconnect } = useAppKit();
+  const { switchAccountType, disconnect } = useInternalAppKit();
   const { loading } = useSnapshot(ModalController.state);
   const {
     activeAddress: address,
@@ -50,7 +51,7 @@ export function AccountDefaultView() {
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { history } = useSnapshot(RouterController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const showCopy = OptionsController.isClipboardAvailable();
   const isAuth = !!connection?.properties?.provider;
   const showBalance = balance && !isAuth;
@@ -182,9 +183,9 @@ export function AccountDefaultView() {
 
   return (
     <>
-      {showBack && (
+      {showBack ? (
         <IconLink icon="chevronLeft" style={styles.backIcon} onPress={RouterController.goBack} />
-      )}
+      ) : null}
       <IconLink
         icon="close"
         style={styles.closeIcon}
@@ -192,7 +193,7 @@ export function AccountDefaultView() {
         testID="header-close"
       />
       <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
-        <FlexView alignItems="center" padding={['3xl', 's', '3xl', 's']}>
+        <FlexView alignItems="center" padding={['3xl', 's', 's', 's']}>
           <Avatar imageSrc={identity?.avatar} address={account ?? ''} />
           <FlexView flexDirection="row" alignItems="center" margin={['s', '0', '0', '0']}>
             <Text variant="medium-title-600">
@@ -210,7 +211,7 @@ export function AccountDefaultView() {
                     truncate: 'middle'
                   })}
             </Text>
-            {showCopy && (
+            {showCopy ? (
               <IconLink
                 icon="copy"
                 size="md"
@@ -218,14 +219,14 @@ export function AccountDefaultView() {
                 onPress={onCopyAddress}
                 style={styles.copyButton}
               />
-            )}
+            ) : null}
           </FlexView>
-          {showBalance && (
+          {showBalance ? (
             <Text variant="paragraph-400" color="fg-200">
               {CoreHelperUtil.formatBalance(balance.amount, balance.symbol, 6)}
             </Text>
-          )}
-          {showExplorer && (
+          ) : null}
+          {showExplorer ? (
             <Button
               size="sm"
               variant="shade"
@@ -236,9 +237,9 @@ export function AccountDefaultView() {
             >
               Block Explorer
             </Button>
-          )}
+          ) : null}
           <FlexView margin={['s', '0', '0', '0']}>
-            {isAuth && (
+            {isAuth ? (
               <AuthButtons
                 onUpgradePress={onUpgradePress}
                 socialProvider={connection?.properties?.provider}
@@ -251,7 +252,7 @@ export function AccountDefaultView() {
                   truncate: 'end'
                 })}
               />
-            )}
+            ) : null}
             <ListItem
               chevron
               icon="networkPlaceholder"
@@ -267,7 +268,7 @@ export function AccountDefaultView() {
                 {activeNetwork?.name}
               </Text>
             </ListItem>
-            {showBuy && (
+            {showBuy ? (
               <ListItem
                 chevron
                 icon="card"
@@ -277,10 +278,10 @@ export function AccountDefaultView() {
                 testID="button-onramp"
                 style={styles.actionButton}
               >
-                <Text color="fg-100">Buy crypto</Text>
+                <Text color="fg-100">Buy Crypto</Text>
               </ListItem>
-            )}
-            {showSend && (
+            ) : null}
+            {showSend ? (
               <ListItem
                 chevron
                 icon="paperplane"
@@ -292,8 +293,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Send</Text>
               </ListItem>
-            )}
-            {showSwaps && (
+            ) : null}
+            {showSwaps ? (
               <ListItem
                 chevron
                 icon="recycleHorizontal"
@@ -305,8 +306,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Swap</Text>
               </ListItem>
-            )}
-            {showActivity && (
+            ) : null}
+            {showActivity ? (
               <ListItem
                 chevron
                 icon="clock"
@@ -318,8 +319,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Activity</Text>
               </ListItem>
-            )}
-            {showSwitchAccountType && (
+            ) : null}
+            {showSwitchAccountType ? (
               <ListItem
                 chevron
                 icon="swapHorizontal"
@@ -331,10 +332,10 @@ export function AccountDefaultView() {
                 loading={loading}
               >
                 <Text color="fg-100">{`Switch to your ${
-                  accountType === 'eoa' ? 'smart account' : 'EOA'
+                  accountType === 'eoa' ? 'Smart Account' : 'EOA'
                 }`}</Text>
               </ListItem>
-            )}
+            ) : null}
             <ListItem
               icon="disconnect"
               onPress={onDisconnect}

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

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { ScrollView } from 'react-native';
 import {
   AccountPill,
@@ -7,11 +7,13 @@ import {
   Icon,
   IconLink,
   NetworkButton,
-  useTheme
+  useTheme,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController,
   CoreHelperUtil,
   EventsController,
@@ -20,18 +22,16 @@ import {
   SendController
 } from '@reown/appkit-core-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { AccountWalletFeatures } from '../../partials/w3m-account-wallet-features';
 import styles from './styles';
 
 export function AccountView() {
   const Theme = useTheme();
-  const [isLoading, setIsLoading] = useState(false);
   const { padding } = useCustomDimensions();
   const { activeNetwork, activeAddress, identity } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const address = CoreHelperUtil.getPlainAddress(activeAddress);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const onProfilePress = () => {
     RouterController.push('AccountDefault');
@@ -46,34 +46,11 @@ export function AccountView() {
   };
 
   useEffect(() => {
-    async function fetchBalance() {
-      setIsLoading(true);
-      await ConnectionsController.fetchBalance();
-      setIsLoading(false);
-    }
-
-    fetchBalance();
     SendController.resetState();
-
-    const balanceInterval = setInterval(() => {
-      fetchBalance();
-    }, 10000);
-
-    return () => {
-      clearInterval(balanceInterval);
-    };
   }, []);
 
   return (
-    <ScrollView
-      bounces={false}
-      contentContainerStyle={[
-        styles.contentContainer,
-        {
-          paddingHorizontal: padding
-        }
-      ]}
-    >
+    <ScrollView bounces={false} contentContainerStyle={{ paddingHorizontal: padding }}>
       <NetworkButton
         imageSrc={networkImage}
         imageHeaders={ApiController._getApiHeaders()}
@@ -92,7 +69,7 @@ export function AccountView() {
           onPress={onProfilePress}
           style={styles.accountPill}
         />
-        <AccountWalletFeatures isBalanceLoading={isLoading} />
+        <AccountWalletFeatures />
       </FlexView>
     </ScrollView>
   );

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

@@ -1,10 +1,7 @@
 import { Spacing } from '@reown/appkit-ui-react-native';
-import { Platform, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-  contentContainer: {
-    paddingBottom: Platform.select({ ios: Spacing.s })
-  },
   networkIcon: {
     alignSelf: 'flex-start',
     position: 'absolute',