@reown/appkit-react-native 2.0.0-alpha.3 → 2.0.0-alpha.5

package/src/hooks/useAccount.ts

@@ -1,5 +1,7 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
 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 +10,23 @@ export function useAccount() {
   const {
     activeAddress: address,
     activeNamespace,
-    connections
+    connection,
+    networks
   } = useSnapshot(ConnectionsController.state);
 
-  const connection = activeNamespace ? connections.get(activeNamespace) : undefined;
+  const activeChain = useMemo(
+    () =>
+      connection?.caipNetwork
+        ? networks.find(network => network.caipNetworkId === connection?.caipNetwork)
+        : undefined,
+    [connection?.caipNetwork, networks]
+  );
 
   return {
-    address: address?.split(':')[2],
+    address: CoreHelperUtil.getPlainAddress(address),
     isConnected: !!address,
-    chainId: connection?.caipNetwork,
+    chainId: activeChain?.id,
+    chain: activeChain,
     namespace: activeNamespace
   };
 }

package/src/hooks/useAppKit.ts

@@ -1,6 +1,4 @@
-import { useContext } from 'react';
-import { useSnapshot } from 'valtio';
-import { ModalController } from '@reown/appkit-core-react-native';
+import { useContext, useMemo } from 'react';
 
 import type { AppKit } from '../AppKit';
 import { AppKitContext } from '../AppKitContext';
@@ -10,26 +8,33 @@ interface UseAppKitReturn {
   close: AppKit['close'];
   disconnect: (namespace?: string) => void;
   switchNetwork: AppKit['switchNetwork'];
-  isOpen: boolean;
 }
 
 export const useAppKit = (): UseAppKitReturn => {
   const context = useContext(AppKitContext);
-  const { open } = useSnapshot(ModalController.state);
 
   if (context === undefined) {
     throw new Error('useAppKit must be used within an AppKitProvider');
   }
+
   if (!context.appKit) {
     // This might happen if the provider is rendered before AppKit is initialized
     throw new Error('AppKit instance is not yet available in context.');
   }
 
-  return {
-    open: context.appKit.open.bind(context.appKit),
-    close: context.appKit.close.bind(context.appKit),
-    disconnect: (namespace?: string) => context.appKit?.disconnect.bind(context.appKit)(namespace),
-    switchNetwork: context.appKit.switchNetwork.bind(context.appKit),
-    isOpen: open
-  };
+  const stableFunctions = useMemo(() => {
+    if (!context.appKit) {
+      throw new Error('AppKit instance is not available');
+    }
+
+    return {
+      open: context.appKit.open.bind(context.appKit),
+      close: context.appKit.close.bind(context.appKit),
+      disconnect: (namespace?: string) =>
+        context.appKit!.disconnect.bind(context.appKit!)(namespace),
+      switchNetwork: context.appKit.switchNetwork.bind(context.appKit)
+    };
+  }, [context.appKit]);
+
+  return stableFunctions;
 };

package/src/hooks/useAppKitState.ts

@@ -0,0 +1,26 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import { ConnectionsController, ModalController } from '@reown/appkit-core-react-native';
+import { useAppKit } from './useAppKit';
+
+export function useAppKitState() {
+  useAppKit(); // Use the hook for checks
+  const { activeAddress: address, connection, networks } = useSnapshot(ConnectionsController.state);
+  const { open, loading } = useSnapshot(ModalController.state);
+
+  const activeChain = useMemo(
+    () =>
+      connection?.caipNetwork
+        ? networks.find(network => network.caipNetworkId === connection?.caipNetwork)
+        : undefined,
+    [connection?.caipNetwork, networks]
+  );
+
+  return {
+    isOpen: open,
+    isLoading: loading,
+    isConnected: !!address,
+    chain: activeChain
+  };
+}

package/src/hooks/useProvider.ts

@@ -1,3 +1,5 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { ConnectionsController } from '@reown/appkit-core-react-native';
 import type { Provider, ChainNamespace } from '@reown/appkit-common-react-native';
@@ -37,10 +39,14 @@ interface ProviderResult {
 export function useProvider(): ProviderResult {
   const { connection } = useSnapshot(ConnectionsController.state);
 
-  if (!connection) return { provider: undefined, providerType: undefined };
+  const returnValue = useMemo(() => {
+    if (!connection) return { provider: undefined, providerType: undefined };
 
-  return {
-    provider: connection.adapter.getProvider(),
-    providerType: connection.adapter.getSupportedNamespace()
-  };
+    return {
+      provider: connection.adapter.getProvider(),
+      providerType: connection.adapter.getSupportedNamespace()
+    };
+  }, [connection]);
+
+  return returnValue;
 }

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/hooks/useWalletInfo.ts

@@ -1,10 +1,13 @@
+import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { ConnectionsController } from '@reown/appkit-core-react-native';
 import { useAppKit } from './useAppKit';
 
 export function useWalletInfo() {
   useAppKit(); // Use the hook for checks
-  const { walletInfo } = useSnapshot(ConnectionsController.state);
+  const { walletInfo: walletInfoSnapshot } = useSnapshot(ConnectionsController.state);
 
-  return { walletInfo };
+  const walletInfo = useMemo(() => ({ walletInfo: walletInfoSnapshot }), [walletInfoSnapshot]);
+
+  return walletInfo;
 }

package/src/index.ts

@@ -25,6 +25,7 @@ export { useProvider } from './hooks/useProvider';
 export { useAccount } from './hooks/useAccount';
 export { useWalletInfo } from './hooks/useWalletInfo';
 export { useAppKitEvents, useAppKitEventSubscription } from './hooks/useAppKitEvents';
+export { useAppKitState } from './hooks/useAppKitState';
 
 /********** Networks **********/
 export { solana, solanaDevnet, solanaTestnet } from '@reown/appkit-common-react-native';

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

@@ -1,6 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect } from 'react';
-import { useWindowDimensions, StatusBar } from 'react-native';
+import { useColorScheme } from 'react-native';
 import { Card, Modal, ThemeProvider } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
@@ -10,23 +10,21 @@ 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 { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function AppKit() {
+  const theme = useColorScheme();
+  const { bottom, top } = useSafeAreaInsets();
   const { close } = useInternalAppKit();
   const { open } = useSnapshot(ModalController.state);
-  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+  const { themeMode, themeVariables, defaultThemeMode } = 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) {
@@ -36,6 +34,12 @@ export function AppKit() {
     return handleModalClose();
   };
 
+  useEffect(() => {
+    if (theme && !defaultThemeMode) {
+      ThemeController.setThemeMode(theme);
+    }
+  }, [theme, defaultThemeMode]);
+
   const prefetch = useCallback(async () => {
     await ApiController.prefetch();
     EventsController.sendEvent({ type: 'track', event: 'MODAL_LOADED' });
@@ -52,23 +56,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-router/index.tsx

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { useEffect, useLayoutEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { RouterController } from '@reown/appkit-core-react-native';
 
 import { AccountDefaultView } from '../../views/w3m-account-default-view';
@@ -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
@@ -47,7 +49,7 @@ export function AppKitRouter() {
     UiUtil.setRouteTransition(animateTransition);
   }, [animateTransition]);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     UiUtil.createViewTransition();
   }, [view]);
 
@@ -69,7 +71,7 @@ export function AppKitRouter() {
         return ConnectingSiweView;
       case 'ConnectingSocial':
         return ConnectingSocialView;
-      case 'ConnectingWalletConnect':
+      case 'WalletConnect':
         return ConnectingView;
       case 'GetWallet':
         return GetWalletView;
@@ -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

@@ -123,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}

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);
@@ -141,9 +137,7 @@ export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeature
         <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;
+});

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

@@ -0,0 +1,100 @@
+import { FlatList, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { WalletItem } from './WalletItem';
+import {
+  CardSelectHeight,
+  Spacing,
+  useCustomDimensions,
+  CardSelectLoader,
+  CardSelectWidth
+} from '@reown/appkit-ui-react-native';
+import { ApiController } from '@reown/appkit-core-react-native';
+import type { WcWallet } from '@reown/appkit-common-react-native';
+
+const imageHeaders = ApiController._getApiHeaders();
+
+const ITEM_HEIGHT = CardSelectHeight;
+const ITEM_WIDTH = CardSelectWidth;
+const ITEM_HEIGHT_WITH_GAP = ITEM_HEIGHT + Spacing['3xs'];
+
+interface Props {
+  data: WcWallet[];
+  onItemPress: (wallet: WcWallet) => void;
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+  isLoading?: boolean;
+  loadingItems?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function WalletList({
+  data,
+  onItemPress,
+  onEndReached,
+  onEndReachedThreshold,
+  isLoading = false,
+  loadingItems = 20,
+  style
+}: Props) {
+  const { padding, maxHeight } = useCustomDimensions();
+
+  // Create loading data if isLoading is true
+  const displayData = isLoading
+    ? Array.from({ length: loadingItems }, (_, index) => ({ id: `loading-${index}` }) as WcWallet)
+    : data;
+
+  return (
+    <FlatList
+      fadingEdgeLength={20}
+      bounces={false}
+      numColumns={4}
+      data={displayData}
+      style={[styles.list, { height: maxHeight }, style]}
+      columnWrapperStyle={styles.columnWrapperStyle}
+      renderItem={({ item }) => {
+        if (isLoading) {
+          return <CardSelectLoader style={styles.itemContainer} />;
+        }
+
+        return (
+          <WalletItem
+            item={item}
+            imageHeaders={imageHeaders}
+            onItemPress={onItemPress}
+            style={styles.itemContainer}
+          />
+        );
+      }}
+      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding }]}
+      initialNumToRender={32}
+      maxToRenderPerBatch={12}
+      windowSize={10}
+      onEndReached={onEndReached}
+      onEndReachedThreshold={onEndReachedThreshold}
+      keyExtractor={(item, index) => item?.id ?? `item-${index}`}
+      getItemLayout={(_, index) => ({
+        length: ITEM_HEIGHT_WITH_GAP,
+        offset: ITEM_HEIGHT_WITH_GAP * index,
+        index
+      })}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  list: {
+    paddingTop: Spacing['3xs']
+  },
+  contentContainer: {
+    paddingBottom: Spacing['xs'],
+    paddingTop: Spacing['3xs'],
+    gap: Spacing['3xs'],
+    alignItems: 'center'
+  },
+  columnWrapperStyle: {
+    justifyContent: 'space-around'
+  },
+  itemContainer: {
+    width: '23%',
+    minWidth: ITEM_WIDTH
+  }
+});