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

package/src/connectors/WalletConnectConnector.ts

@@ -1,4 +1,4 @@
-import { ConnectionController } from '@reown/appkit-core-react-native';
+import { WcController } from '@reown/appkit-core-react-native';
 import { UniversalProvider, type IUniversalProvider } from '@walletconnect/universal-provider';
 import {
   WalletConnector,
@@ -11,7 +11,8 @@ import {
   type ConnectOptions,
   type ConnectorInitOptions,
   type Metadata,
-  type ConnectionProperties
+  type ConnectionProperties,
+  type RequestArguments
 } from '@reown/appkit-common-react-native';
 import { getDidAddress, getDidChainId, SIWEController } from '@reown/appkit-siwe-react-native';
 
@@ -93,9 +94,9 @@ export class WalletConnectConnector extends WalletConnector {
   }
 
   override async connect(opts: ConnectOptions) {
-    const { siweConfig, namespaces, defaultChain, universalLink } = opts;
+    const { siweConfig, namespaces, defaultNetwork, universalLink } = opts;
     function onUri(uri: string) {
-      ConnectionController.setWcUri(uri);
+      WcController.setWcUri(uri);
     }
 
     const provider = this.getProvider() as IUniversalProvider;
@@ -180,8 +181,8 @@ export class WalletConnectConnector extends WalletConnector {
       this.wallet = undefined;
     }
 
-    if (defaultChain) {
-      (this.provider as IUniversalProvider).setDefaultChain(defaultChain);
+    if (defaultNetwork?.caipNetworkId) {
+      (this.provider as IUniversalProvider).setDefaultChain(defaultNetwork.caipNetworkId);
     }
 
     if (session?.sessionProperties) {
@@ -198,19 +199,40 @@ export class WalletConnectConnector extends WalletConnector {
 
     provider.off('display_uri', onUri);
 
-    return this.namespaces;
+    return (session?.namespaces as Namespaces) ?? {};
   }
 
-  override getProvider(): Provider {
+  override getProvider(namespace?: ChainNamespace): Provider {
     if (!this.provider) {
       throw new Error('WalletConnectConnector: Provider not initialized. Call init() first.');
     }
 
+    const provider = this.provider;
+
+    if (namespace) {
+      return {
+        ...this.provider,
+        connect: async (params?: any) => provider.connect(params) as Promise<any>,
+        disconnect: provider.disconnect.bind(provider),
+        on: provider.on.bind(provider),
+        off: provider.off.bind(provider),
+        request: async (args: RequestArguments, chainId?: CaipNetworkId) => {
+          const _chainId = this.getChainId(namespace);
+
+          return provider.request(args, chainId || _chainId);
+        }
+      };
+    }
+
     return this.provider;
   }
 
   override getNamespaces(): Namespaces {
-    return this.namespaces ?? {};
+    const namespaces =
+      ((this.provider as IUniversalProvider)?.session?.namespaces as Namespaces) ?? {};
+    this.namespaces = namespaces;
+
+    return namespaces;
   }
 
   override getProperties(): ConnectionProperties | undefined {
@@ -232,13 +254,14 @@ export class WalletConnectConnector extends WalletConnector {
   }
 
   override getChainId(namespace: ChainNamespace): CaipNetworkId | undefined {
-    if (!this.namespaces || !this.namespaces[namespace]) {
+    const namespaces = this.getNamespaces();
+    if (!namespaces || !namespaces[namespace]) {
       return undefined;
     }
 
     const chainId = (this.provider as IUniversalProvider).rpcProviders[
       namespace
-    ]?.getDefaultChain();
+    ]?.getDefaultChain?.();
 
     if (!chainId) {
       return undefined;

package/src/hooks/useAccount.ts

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { ConnectionsController } from '@reown/appkit-core-react-native';
+import { ConnectionsController, CoreHelperUtil } from '@reown/appkit-core-react-native';
 import { useAppKit } from './useAppKit';
 
 export function useAccount() {
@@ -8,15 +8,20 @@ export function useAccount() {
   const {
     activeAddress: address,
     activeNamespace,
-    connections
+    connection,
+    networks
   } = useSnapshot(ConnectionsController.state);
 
-  const connection = activeNamespace ? connections.get(activeNamespace) : undefined;
+  const activeChain = connection?.caipNetwork
+    ? // eslint-disable-next-line valtio/state-snapshot-rule
+      networks.find(network => network.caipNetworkId === connection?.caipNetwork)
+    : undefined;
 
   return {
-    address: address?.split(':')[2],
+    address: CoreHelperUtil.getPlainAddress(address),
     isConnected: !!address,
-    chainId: connection?.caipNetwork,
+    chainId: activeChain?.id,
+    chain: activeChain,
     namespace: activeNamespace
   };
 }

package/src/hooks/useAppKitEvents.ts

@@ -1,10 +1,7 @@
 import { useEffect } from 'react';
 import { useSnapshot } from 'valtio';
-import {
-  EventsController,
-  type EventName,
-  type EventsControllerState
-} from '@reown/appkit-core-react-native';
+import { EventsController, type EventsControllerState } from '@reown/appkit-core-react-native';
+import { type EventName } from '@reown/appkit-common-react-native';
 import { useAppKit } from './useAppKit';
 
 export function useAppKitEvents(callback?: (newEvent: EventsControllerState) => void) {

package/src/hooks/useProvider.ts

@@ -2,24 +2,45 @@ import { useSnapshot } from 'valtio';
 import { ConnectionsController } from '@reown/appkit-core-react-native';
 import type { Provider, ChainNamespace } from '@reown/appkit-common-react-native';
 
+/**
+ * Interface representing the result of the useProvider hook
+ */
 interface ProviderResult {
+  /** The active connection provider instance */
   provider?: Provider;
+  /** The chain namespace supported by the provider */
   providerType?: ChainNamespace;
 }
 
-export function useProvider(namespace?: ChainNamespace): ProviderResult {
-  const { connections, activeNamespace } = useSnapshot(ConnectionsController.state);
-
-  const targetNamespace = namespace ?? activeNamespace;
-
-  if (!targetNamespace) return { provider: undefined, providerType: undefined };
-
-  const connection = connections.get(targetNamespace);
+/**
+ * Hook that returns the active connection provider and its supported chain namespace.
+ *
+ * This hook accesses the current connection and returns the provider instance along with its supported namespace.
+ *
+ * @returns {ProviderResult} An object containing:
+ *   - `provider`: The active connection provider instance, or undefined if no connection exists
+ *   - `providerType`: The chain namespace supported by the provider, or undefined if no connection exists
+ *
+ * @example
+ * ```typescript
+ * const { provider, providerType } = useProvider();
+ *
+ * if (provider) {
+ *   // Use the provider for blockchain operations
+ *   const balance = await provider.request({
+ *     method: 'eth_getBalance',
+ *     params: [address, 'latest']
+ *   });
+ * }
+ * ```
+ */
+export function useProvider(): ProviderResult {
+  const { connection } = useSnapshot(ConnectionsController.state);
 
   if (!connection) return { provider: undefined, providerType: undefined };
 
   return {
-    provider: connection.adapter.connector?.getProvider(),
+    provider: connection.adapter.getProvider(),
     providerType: connection.adapter.getSupportedNamespace()
   };
 }

package/src/hooks/useRouteTransition.ts

@@ -55,11 +55,18 @@ export function useRouteTransition(config: RouteTransitionConfig = {}) {
         currentAnimation.current = animation;
 
         animation.start(({ finished }) => {
-          if (finished) {
-            isAnimating.current = false;
-            currentAnimation.current = null;
-            resolve();
+          // Always clean up and resolve, even if the animation was interrupted
+          // Android often reports finished=false when interrupted, which otherwise
+          // would leave the view stuck at opacity 0 and block future animations.
+          if (!finished) {
+            // Ensure we end in the expected target state
+            fadeAnim.setValue(1);
+            slideAnim.setValue(0);
           }
+
+          isAnimating.current = false;
+          currentAnimation.current = null;
+          resolve();
         });
       });
     },

package/src/index.ts

@@ -17,6 +17,7 @@ export { AppKit } from './modal/w3m-modal';
 /********** Types **********/
 export type * from '@reown/appkit-core-react-native';
 export type { AppKitNetwork, Storage } from '@reown/appkit-common-react-native';
+export type { AppKitConfig } from './types';
 
 /****** Hooks *******/
 export { useAppKit } from './hooks/useAppKit';

package/src/modal/w3m-account-button/index.tsx

@@ -5,7 +5,8 @@ import {
   ModalController,
   ThemeController,
   ConnectionsController,
-  AssetController
+  AssetController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import { AccountButton as AccountButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
 
@@ -26,7 +27,7 @@ export function AccountButton({ balance, disabled, style, testID }: AccountButto
     identity
   } = useSnapshot(ConnectionsController.state);
 
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const showBalance = balance === 'show';
 
   return (

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

@@ -1,6 +1,5 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect } from 'react';
-import { useWindowDimensions, StatusBar } from 'react-native';
 import { Card, Modal, ThemeProvider } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
@@ -10,23 +9,20 @@ import {
   RouterController,
   ThemeController
 } from '@reown/appkit-core-react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { AppKitRouter } from '../w3m-router';
 import { Header } from '../../partials/w3m-header';
 import { Snackbar } from '../../partials/w3m-snackbar';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function AppKit() {
-  const { close } = useAppKit();
+  const { bottom, top } = useSafeAreaInsets();
+  const { close } = useInternalAppKit();
   const { open } = useSnapshot(ModalController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
   const { projectId } = useSnapshot(OptionsController.state);
-  const { height } = useWindowDimensions();
-  const { isLandscape } = useCustomDimensions();
-  const portraitHeight = height - 80;
-  const landScapeHeight = height * 0.95 - (StatusBar.currentHeight ?? 0);
 
   const handleBackPress = () => {
     if (RouterController.state.history.length > 1) {
@@ -52,23 +48,19 @@ export function AppKit() {
   }, [projectId, prefetch]);
 
   return (
-    <>
-      <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
-        <Modal
-          visible={open}
-          onRequestClose={handleBackPress}
-          onBackdropPress={handleModalClose}
-          testID="w3m-modal"
-        >
-          <Card
-            style={[styles.card, { maxHeight: isLandscape ? landScapeHeight : portraitHeight }]}
-          >
-            <Header />
-            <AppKitRouter />
-            <Snackbar />
-          </Card>
-        </Modal>
-      </ThemeProvider>
-    </>
+    <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+      <Modal
+        visible={open}
+        onRequestClose={handleBackPress}
+        onBackdropPress={handleModalClose}
+        testID="w3m-modal"
+      >
+        <Card style={[styles.card, { paddingBottom: bottom, marginTop: top }]}>
+          <Header />
+          <AppKitRouter />
+          <Snackbar />
+        </Card>
+      </Modal>
+    </ThemeProvider>
   );
 }

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

@@ -3,7 +3,6 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   card: {
     borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    maxHeight: '80%'
+    borderBottomRightRadius: 0
   }
 });

package/src/modal/w3m-network-button/index.tsx

@@ -3,6 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController,
   EventsController,
   ModalController,
@@ -24,7 +25,7 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
 
   const network = isConnected ? activeNetwork : defaultNetwork;
-  const networkImage = network ? networkImages[network.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(network, networkImages);
 
   const onNetworkPress = () => {
     ModalController.open({ view: 'Networks' });

package/src/modal/w3m-router/index.tsx

@@ -35,9 +35,11 @@ import { UiUtil } from '../../utils/UiUtil';
 import { useRouteTransition } from '../../hooks/useRouteTransition';
 
 import { Animated } from 'react-native';
+import { useCustomDimensions } from '@reown/appkit-ui-react-native';
 
 export function AppKitRouter() {
   const { view } = useSnapshot(RouterController.state);
+  const { maxHeight } = useCustomDimensions();
   const { animateTransition, getAnimatedStyle } = useRouteTransition({
     duration: 300,
     useNativeDriver: true
@@ -83,14 +85,14 @@ export function AppKitRouter() {
         return OnRampSettingsView;
       case 'OnRampLoading':
         return OnRampLoadingView;
-      case 'SwitchNetwork':
-        return NetworkSwitchView;
       case 'OnRampTransaction':
         return OnRampTransactionView;
       case 'Swap':
         return SwapView;
       case 'SwapPreview':
         return SwapPreviewView;
+      case 'SwitchNetwork':
+        return NetworkSwitchView;
       case 'Transactions':
         return TransactionsView;
       case 'UnsupportedChain':
@@ -117,7 +119,7 @@ export function AppKitRouter() {
   }, [view]);
 
   return (
-    <Animated.View style={[getAnimatedStyle()]}>
+    <Animated.View style={[getAnimatedStyle(), { maxHeight }]}>
       <ViewComponent />
     </Animated.View>
   );

package/src/partials/w3m-account-activity/index.tsx

@@ -13,6 +13,7 @@ import {
 import { type Transaction, type TransactionImage } from '@reown/appkit-common-react-native';
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   ConstantsUtil,
   EventsController,
@@ -34,7 +35,7 @@ export function AccountActivity({ style }: Props) {
   const { loading, transactions, next } = useSnapshot(TransactionsController.state);
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const isSupported =
     activeNetwork?.caipNetworkId &&
     ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
@@ -77,14 +78,14 @@ export function AccountActivity({ style }: Props) {
 
   useEffect(() => {
     const address = ConnectionsController.state.activeAddress;
-    if (!TransactionsController.state.transactions.length && address) {
+    if (!TransactionsController.state.transactions.length && address && isSupported) {
       TransactionsController.fetchTransactions(address, true);
     }
     // Set initial load to false after first fetch
     const timer = setTimeout(() => setInitialLoad(false), 100);
 
     return () => clearTimeout(timer);
-  }, []);
+  }, [isSupported]);
 
   // Show loading spinner during initial load or when loading with no transactions
   if ((initialLoad || loading) && !transactions.length) {
@@ -122,7 +123,7 @@ export function AccountActivity({ style }: Props) {
     <ScrollView
       style={[styles.container, style]}
       fadingEdgeLength={20}
-      contentContainerStyle={[styles.contentContainer]}
+      contentContainerStyle={styles.contentContainer}
       refreshControl={
         <RefreshControl
           refreshing={refreshing}
@@ -185,16 +186,16 @@ export function AccountActivity({ style }: Props) {
               ))}
           </View>
         ))}
-      {(next || loading) && !refreshing && (
+      {(next || loading) && !refreshing ? (
         <FlexView style={styles.footer} alignItems="center" justifyContent="center">
-          {next && !loading && (
+          {next && !loading ? (
             <Link size="md" style={styles.loadMoreButton} onPress={handleLoadMore}>
               Load more
             </Link>
-          )}
-          {loading && <LoadingSpinner color="accent-100" />}
+          ) : null}
+          {loading ? <LoadingSpinner color="accent-100" /> : null}
         </FlexView>
-      )}
+      ) : null}
     </ScrollView>
   );
 }

package/src/partials/w3m-account-tokens/index.tsx

@@ -9,6 +9,7 @@ import {
 import { useSnapshot } from 'valtio';
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   RouterController
 } from '@reown/appkit-core-react-native';
@@ -32,7 +33,7 @@ export function AccountTokens({ style, isLoading }: Props) {
   const [refreshing, setRefreshing] = useState(false);
   const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const getBalance = useCallback(async () => {
     setRefreshing(true);
@@ -62,7 +63,7 @@ export function AccountTokens({ style, isLoading }: Props) {
             </Text>
           </FlexView>
         </ListItem>
-        {isLoading && <LoadingSpinner size="sm" style={styles.loadingSpinner} />}
+        {isLoading ? <LoadingSpinner size="sm" style={styles.loadingSpinner} /> : null}
       </>
     );
   }
@@ -92,7 +93,7 @@ export function AccountTokens({ style, isLoading }: Props) {
           pressable={false}
         />
       ))}
-      {isLoading && <LoadingSpinner size="sm" style={styles.loadingSpinner} />}
+      {isLoading ? <LoadingSpinner size="sm" style={styles.loadingSpinner} /> : null}
     </ScrollView>
   );
 }

package/src/partials/w3m-account-wallet-features/index.tsx

@@ -16,11 +16,7 @@ import { AccountActivity } from '../w3m-account-activity';
 import { AccountTokens } from '../w3m-account-tokens';
 import styles from './styles';
 
-export interface AccountWalletFeaturesProps {
-  isBalanceLoading: boolean;
-}
-
-export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeaturesProps) {
+export function AccountWalletFeatures() {
   const [activeTab, setActiveTab] = useState(0);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { activeNetwork, balances, activeNamespace } = useSnapshot(ConnectionsController.state);
@@ -90,7 +86,7 @@ export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeature
         justifyContent="space-around"
         padding={['0', 's', '0', 's']}
       >
-        {isOnRampEnabled && (
+        {isOnRampEnabled ? (
           <IconLink
             icon="card"
             size="lg"
@@ -101,8 +97,8 @@ export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeature
             style={[styles.action, isSwapsEnabled ? styles.actionCenter : styles.actionLeft]}
             onPress={onBuyPress}
           />
-        )}
-        {isSwapsEnabled && (
+        ) : null}
+        {isSwapsEnabled ? (
           <IconLink
             icon="recycleHorizontal"
             size="lg"
@@ -113,7 +109,7 @@ export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeature
             style={[styles.action, styles.actionLeft]}
             onPress={onSwapPress}
           />
-        )}
+        ) : null}
         <IconLink
           icon="arrowBottomCircle"
           size="lg"
@@ -124,7 +120,7 @@ export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeature
           style={[styles.action, isSwapsEnabled ? styles.actionCenter : styles.actionLeft]}
           onPress={onReceivePress}
         />
-        {showSend && (
+        {showSend ? (
           <IconLink
             icon="paperplane"
             size="lg"
@@ -135,15 +131,13 @@ export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeature
             style={[styles.action, styles.actionRight]}
             onPress={onSendPress}
           />
-        )}
+        ) : null}
       </FlexView>
       <FlexView style={styles.tab}>
         <Tabs tabs={['Tokens', 'Activity']} onTabChange={onTabChange} />
       </FlexView>
       <FlexView padding={['m', '0', '0', '0']} style={styles.tabContainer}>
-        {activeTab === 0 && (
-          <AccountTokens style={styles.tabContent} isLoading={isBalanceLoading} />
-        )}
+        {activeTab === 0 && <AccountTokens style={styles.tabContent} />}
         {activeTab === 1 && <AccountActivity style={styles.tabContent} />}
       </FlexView>
     </FlexView>

package/src/partials/w3m-all-wallets-list/components/Loading.tsx

@@ -0,0 +1,24 @@
+import { memo } from 'react';
+import { WalletList } from './WalletList';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+interface LoadingProps {
+  loadingItems?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+function _Loading({ loadingItems = 20, style }: LoadingProps) {
+  return (
+    <WalletList
+      data={[]}
+      onItemPress={() => {}}
+      isLoading={true}
+      loadingItems={loadingItems}
+      style={style}
+    />
+  );
+}
+
+export const Loading = memo(_Loading, () => {
+  return true;
+});

package/src/partials/w3m-all-wallets-list/components/WalletItem.tsx

@@ -0,0 +1,38 @@
+import { useSnapshot } from 'valtio';
+import { ApiController, AssetController, AssetUtil } from '@reown/appkit-core-react-native';
+import { CardSelect, CardSelectLoader } from '@reown/appkit-ui-react-native';
+import type { WcWallet } from '@reown/appkit-common-react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { memo } from 'react';
+
+interface WalletItemProps {
+  item: WcWallet;
+  imageHeaders?: Record<string, string>;
+  onItemPress: (wallet: WcWallet) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function WalletItem({ item, imageHeaders, onItemPress, style }: WalletItemProps) {
+  const { walletImages } = useSnapshot(AssetController.state);
+  const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
+  const imageSrc = AssetUtil.getWalletImage(item, walletImages);
+
+  if (!item?.id) {
+    return <CardSelectLoader style={style} />;
+  }
+
+  return (
+    <CardSelect
+      imageSrc={imageSrc}
+      style={style}
+      imageHeaders={imageHeaders}
+      name={item?.name ?? 'Unknown'}
+      onPress={() => onItemPress(item)}
+      installed={!!isInstalled}
+    />
+  );
+}
+
+export const MemoizedWalletItem = memo(WalletItem, (prevProps, nextProps) => {
+  return prevProps.item.id === nextProps.item.id;
+});