@reown/appkit-react-native 2.0.0-alpha.2 → 2.0.0-alpha.4

package/src/partials/w3m-connecting-web/index.tsx

@@ -5,10 +5,11 @@ import {
   RouterController,
   ApiController,
   AssetUtil,
-  ConnectionController,
+  WcController,
   CoreHelperUtil,
   OptionsController,
-  EventsController
+  EventsController,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -19,7 +20,6 @@ import {
   IconBox
 } from '@reown/appkit-ui-react-native';
 
-import { UiUtil } from '../../utils/UiUtil';
 import { ConnectingBody, getMessage } from '../w3m-connecting-body';
 import styles from './styles';
 
@@ -29,7 +29,8 @@ interface ConnectingWebProps {
 
 export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
   const { data } = RouterController.state;
-  const { wcUri, wcError } = useSnapshot(ConnectionController.state);
+  const { wcUri, wcError } = useSnapshot(WcController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const showCopy = OptionsController.isClipboardAvailable();
   const bodyMessage = getMessage({
     walletName: data?.wallet?.name,
@@ -41,15 +42,14 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
     try {
       const { name, webapp_link } = data?.wallet ?? {};
       if (name && webapp_link && wcUri) {
-        ConnectionController.setWcError(false);
+        WcController.setWcError(false);
         const { redirect, href } = CoreHelperUtil.formatUniversalUrl(webapp_link, wcUri);
         const wcLinking = { name, href };
-        ConnectionController.setWcLinking(wcLinking);
-        ConnectionController.setPressedWallet(data?.wallet);
+        WcController.setWcLinking(wcLinking);
+        WcController.setPressedWallet(data?.wallet);
         await Linking.openURL(redirect);
-        await ConnectionController.state.wcPromise;
-
-        UiUtil.storeConnectedWallet(wcLinking, data?.wallet);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking, data?.wallet);
 
         EventsController.sendEvent({
           type: 'track',
@@ -70,10 +70,10 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
         <LoadingThumbnail paused={wcError}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
+            imageSrc={AssetUtil.getWalletImage(data?.wallet, walletImages)}
             imageHeaders={ApiController._getApiHeaders()}
           />
-          {wcError && (
+          {wcError ? (
             <IconBox
               icon={'close'}
               border
@@ -83,7 +83,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
               iconColor="error-100"
               style={styles.errorIcon}
             />
-          )}
+          ) : null}
         </LoadingThumbnail>
         <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
         <Button
@@ -95,7 +95,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
         >
           Open
         </Button>
-        {showCopy && (
+        {showCopy ? (
           <Link
             iconLeft="copySmall"
             color="fg-200"
@@ -104,7 +104,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
           >
             Copy link
           </Link>
-        )}
+        ) : null}
       </FlexView>
     </ScrollView>
   );

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

@@ -1,7 +1,6 @@
 import { useSnapshot } from 'valtio';
 import {
   RouterController,
-  ModalController,
   EventsController,
   type RouterControllerState
 } from '@reown/appkit-core-react-native';
@@ -9,11 +8,13 @@ import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
 import { StringUtil } from '@reown/appkit-common-react-native';
 
 import styles from './styles';
+import { useInternalAppKit } from '../../AppKitContext';
 
 export function Header() {
+  const { close, back } = useInternalAppKit();
   const { data, view } = useSnapshot(RouterController.state);
   const onHelpPress = () => {
-    RouterController.push('WhatIsAWallet');
+    RouterController.push('WhatIsAWallet', undefined, 'backward');
     EventsController.sendEvent({ type: 'track', event: 'CLICK_WALLET_HELP' });
   };
 
@@ -61,24 +62,12 @@ export function Header() {
   const showClose = !noCloseViews.includes(view);
   const header = headings(data, view);
 
-  const checkSocial = () => {
-    if (RouterController.state.view === 'ConnectingSocial') {
-      EventsController.sendEvent({
-        type: 'track',
-        event: 'SOCIAL_LOGIN_CANCELED',
-        properties: { provider: RouterController.state.data?.socialProvider! }
-      });
-    }
-  };
-
   const handleGoBack = () => {
-    checkSocial();
-    RouterController.goBack();
+    back();
   };
 
   const handleClose = () => {
-    checkSocial();
-    ModalController.close();
+    close();
   };
 
   const dynamicButtonTemplate = () => {

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

@@ -1,4 +1,4 @@
-import Modal from 'react-native-modal';
+import { Modal } from 'react-native';
 import {
   FlexView,
   Text,
@@ -27,38 +27,34 @@ export function InformationModal({
   const Theme = useTheme();
 
   return (
-    <Modal
-      isVisible={visible}
-      useNativeDriver
-      useNativeDriverForBackdrop
-      onBackdropPress={onClose}
-      onDismiss={onClose}
-      style={styles.modal}
-    >
-      <FlexView
-        style={[
-          styles.content,
-          {
-            backgroundColor: Theme['bg-200']
-          }
-        ]}
-        padding="2xl"
-      >
-        <IconBox icon={iconName} size="lg" background />
-        {!!title && (
-          <Text variant="paragraph-500" style={styles.title}>
-            {title}
-          </Text>
-        )}
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <FlexView style={styles.modal}>
+        <FlexView
+          style={[
+            styles.content,
+            {
+              backgroundColor: Theme['bg-100'],
+              borderColor: Theme['gray-glass-015']
+            }
+          ]}
+          padding="2xl"
+        >
+          <IconBox icon={iconName} size="lg" background />
+          {!!title && (
+            <Text variant="paragraph-500" style={styles.title}>
+              {title}
+            </Text>
+          )}
 
-        {!!description && (
-          <Text variant="small-400" color="fg-150" center>
-            {description}
-          </Text>
-        )}
-        <Button onPress={onClose} variant="fill" style={styles.button}>
-          Got it
-        </Button>
+          {!!description && (
+            <Text variant="small-400" color="fg-150" center>
+              {description}
+            </Text>
+          )}
+          <Button onPress={onClose} variant="fill" style={styles.button}>
+            Got it
+          </Button>
+        </FlexView>
       </FlexView>
     </Modal>
   );

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

@@ -1,15 +1,17 @@
-import { Spacing } from '@reown/appkit-ui-react-native';
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   modal: {
     margin: 0,
-    justifyContent: 'flex-end'
+    justifyContent: 'flex-end',
+    flex: 1
   },
   content: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    alignItems: 'center'
+    borderTopLeftRadius: BorderRadius.l,
+    borderTopRightRadius: BorderRadius.l,
+    alignItems: 'center',
+    borderWidth: StyleSheet.hairlineWidth
   },
   title: {
     marginTop: Spacing.s,

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

@@ -32,20 +32,20 @@ export function Placeholder({
 }: Props) {
   return (
     <FlexView alignItems="center" justifyContent="center" style={[styles.container, style]}>
-      {icon && (
+      {icon ? (
         <IconBox icon={icon} size="xl" iconColor={iconColor} background style={styles.icon} />
-      )}
-      {title && (
+      ) : null}
+      {title ? (
         <Text variant="paragraph-500" style={styles.title}>
           {title}
         </Text>
-      )}
-      {description && (
+      ) : null}
+      {description ? (
         <Text variant="small-400" color="fg-200" center>
           {description}
         </Text>
-      )}
-      {actionPress && (
+      ) : null}
+      {actionPress ? (
         <Button
           style={styles.button}
           iconLeft={actionIcon}
@@ -55,7 +55,7 @@ export function Placeholder({
         >
           {actionTitle ?? ''}
         </Button>
-      )}
+      ) : null}
     </FlexView>
   );
 }

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

@@ -1,6 +1,5 @@
 import { useSnapshot } from 'valtio';
-import Modal from 'react-native-modal';
-import { FlatList, View } from 'react-native';
+import { FlatList, View, Modal } from 'react-native';
 import {
   FlexView,
   IconBox,
@@ -13,7 +12,7 @@ import {
   useTheme
 } from '@reown/appkit-ui-react-native';
 import styles from './styles';
-import { AssetController, ConnectionsController } from '@reown/appkit-core-react-native';
+import { AssetController, AssetUtil, ConnectionsController } from '@reown/appkit-core-react-native';
 
 interface SelectorModalProps {
   title?: string;
@@ -47,79 +46,76 @@ export function SelectorModal({
   const Theme = useTheme();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   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>
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <View 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"
+                />
+              )
             ) : (
-              <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" />
+              <View style={styles.iconPlaceholder} />
+            )}
           </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>
+          <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>
+          ) : null}
+          <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>
+      </View>
     </Modal>
   );
 }

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

@@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   modal: {
+    flex: 1,
     margin: 0,
     justifyContent: 'flex-end'
   },

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

@@ -94,7 +94,7 @@ export function SendInputToken({
           chevron
         />
       </FlexView>
-      {token && (
+      {token ? (
         <FlexView
           flexDirection="row"
           alignItems="center"
@@ -111,7 +111,7 @@ export function SendInputToken({
             <Link onPress={onMaxPress}>Max</Link>
           </FlexView>
         </FlexView>
-      )}
+      ) : null}
     </FlexView>
   );
 }

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;
@@ -142,7 +141,7 @@ export function SwapInput({
                   ? `~$${UiUtil.formatNumberToLocalString(marketValue, 6)}`
                   : ''}
               </Text>
-              {showMax && (
+              {showMax ? (
                 <FlexView flexDirection="row" alignItems="center" justifyContent="center">
                   <Text
                     variant="small-400"
@@ -153,7 +152,7 @@ export function SwapInput({
                   </Text>
                   <Link onPress={handleMaxPress}>Max</Link>
                 </FlexView>
-              )}
+              ) : null}
             </FlexView>
           ) : null}
         </>

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;
+}