@reown/appkit-react-native 2.0.0 → 2.0.2

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

@@ -1,120 +1,50 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect } from 'react';
-import { useWindowDimensions, StatusBar } from 'react-native';
-import Modal from 'react-native-modal';
-import { Card, ThemeProvider } from '@reown/appkit-ui-react-native';
+import { useColorScheme } from 'react-native';
+import { Card, Modal, ThemeProvider } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ApiController,
-  ConnectionController,
-  ConnectorController,
-  CoreHelperUtil,
   EventsController,
   ModalController,
   OptionsController,
   RouterController,
-  TransactionsController,
-  type AppKitFrameProvider,
-  WebviewController,
   ThemeController
 } from '@reown/appkit-core-react-native';
-import type { CaipAddress } from '@reown/appkit-common-react-native';
-import { SIWEController } from '@reown/appkit-siwe-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 { open, loading } = useSnapshot(ModalController.state);
-  const { connectors, connectedConnector } = useSnapshot(ConnectorController.state);
-  const { caipAddress, isConnected } = useSnapshot(AccountController.state);
-  const { frameViewVisible, webviewVisible } = useSnapshot(WebviewController.state);
+  const theme = useColorScheme();
+  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 authProvider = connectors.find(c => c.type === 'AUTH')?.provider as AppKitFrameProvider;
-  const AuthView = authProvider?.AuthView;
-  const SocialView = authProvider?.Webview;
-  const showAuth = !connectedConnector || connectedConnector === 'AUTH';
 
-  const onBackButtonPress = () => {
+  const handleBackPress = () => {
     if (RouterController.state.history.length > 1) {
       return RouterController.goBack();
     }
 
-    return handleClose();
+    return handleModalClose();
   };
 
+  useEffect(() => {
+    ThemeController.setSystemThemeMode(theme ?? undefined);
+  }, [theme]);
+
   const prefetch = useCallback(async () => {
     await ApiController.prefetch();
     EventsController.sendEvent({ type: 'track', event: 'MODAL_LOADED' });
   }, []);
 
-  const handleClose = async () => {
-    if (OptionsController.state.isSiweEnabled) {
-      if (SIWEController.state.status !== 'success' && AccountController.state.isConnected) {
-        await ConnectionController.disconnect();
-      }
-    }
-
-    if (
-      RouterController.state.view === 'OnRampLoading' &&
-      EventsController.state.data.event === 'BUY_SUBMITTED'
-    ) {
-      // Send event only if the onramp url was already created
-      EventsController.sendEvent({ type: 'track', event: 'BUY_CANCEL' });
-    }
-  };
-
-  const onNewAddress = useCallback(
-    async (address?: CaipAddress) => {
-      if (!isConnected || loading) {
-        return;
-      }
-
-      const newAddress = CoreHelperUtil.getPlainAddress(address);
-      TransactionsController.resetTransactions();
-
-      if (OptionsController.state.isSiweEnabled) {
-        const newNetworkId = CoreHelperUtil.getNetworkId(address);
-
-        const { signOutOnAccountChange, signOutOnNetworkChange } =
-          SIWEController.state._client?.options ?? {};
-        const session = await SIWEController.getSession();
-
-        if (session && newAddress && signOutOnAccountChange) {
-          // If the address has changed and signOnAccountChange is enabled, sign out
-          await SIWEController.signOut();
-          onSiweNavigation();
-        } else if (
-          newNetworkId &&
-          session?.chainId.toString() !== newNetworkId &&
-          signOutOnNetworkChange
-        ) {
-          // If the network has changed and signOnNetworkChange is enabled, sign out
-          await SIWEController.signOut();
-          onSiweNavigation();
-        } else if (!session) {
-          // If it's connected but there's no session, show sign view
-          onSiweNavigation();
-        }
-      }
-    },
-    [isConnected, loading]
-  );
-
-  const onSiweNavigation = () => {
-    if (ModalController.state.open) {
-      RouterController.push('ConnectingSiwe');
-    } else {
-      ModalController.open({ view: 'ConnectingSiwe' });
-    }
+  const handleModalClose = async () => {
+    await close();
   };
 
   useEffect(() => {
@@ -123,38 +53,20 @@ export function AppKit() {
     }
   }, [projectId, prefetch]);
 
-  useEffect(() => {
-    onNewAddress(caipAddress);
-  }, [caipAddress, onNewAddress]);
-
   return (
-    <>
-      <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
-        <Modal
-          style={styles.modal}
-          coverScreen={!frameViewVisible && !webviewVisible}
-          isVisible={open}
-          useNativeDriver
-          useNativeDriverForBackdrop
-          statusBarTranslucent
-          hideModalContentWhileAnimating
-          propagateSwipe
-          onModalHide={handleClose}
-          onBackdropPress={ModalController.close}
-          onBackButtonPress={onBackButtonPress}
-          testID="w3m-modal"
-        >
-          <Card
-            style={[styles.card, { maxHeight: isLandscape ? landScapeHeight : portraitHeight }]}
-          >
-            <Header />
-            <AppKitRouter />
-            <Snackbar />
-          </Card>
-        </Modal>
-        {!!showAuth && AuthView && <AuthView />}
-        {!!showAuth && SocialView && <SocialView />}
-      </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

@@ -1,13 +1,9 @@
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-  modal: {
-    margin: 0,
-    justifyContent: 'flex-end'
-  },
   card: {
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,
-    maxHeight: '80%'
+    borderWidth: 0
   }
 });

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

@@ -1,12 +1,13 @@
 import { useSnapshot } from 'valtio';
 import type { StyleProp, ViewStyle } from 'react-native';
 import {
-  AccountController,
   ApiController,
+  AssetController,
   AssetUtil,
   ConnectionsController,
   EventsController,
   ModalController,
+  OptionsController,
   ThemeController
 } from '@reown/appkit-core-react-native';
 import { NetworkButton as NetworkButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
@@ -17,11 +18,15 @@ export interface NetworkButtonProps {
 }
 
 export function NetworkButton({ disabled, style }: NetworkButtonProps) {
-  const { isConnected } = useSnapshot(AccountController.state);
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { activeNetwork, isConnected } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const { defaultNetwork } = useSnapshot(OptionsController.state);
   const { loading } = useSnapshot(ModalController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
 
+  const network = isConnected ? activeNetwork : defaultNetwork;
+  const networkImage = AssetUtil.getNetworkImage(network, networkImages);
+
   const onNetworkPress = () => {
     ModalController.open({ view: 'Networks' });
     EventsController.sendEvent({
@@ -33,7 +38,7 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
   return (
     <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
       <NetworkButtonUI
-        imageSrc={AssetUtil.getNetworkImage(activeNetwork?.id)}
+        imageSrc={networkImage}
         imageHeaders={ApiController._getApiHeaders()}
         disabled={disabled || loading}
         style={style}
@@ -41,7 +46,7 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
         loading={loading}
         testID="network-button"
       >
-        {activeNetwork?.name ?? (isConnected ? 'Unknown Network' : 'Select Network')}
+        {network?.name ?? (isConnected ? 'Unknown Network' : 'Select Network')}
       </NetworkButtonUI>
     </ThemeProvider>
   );

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

@@ -1,5 +1,5 @@
-import { useLayoutEffect, useMemo } from 'react';
 import { useSnapshot } from 'valtio';
+import { useMemo } from 'react';
 import { RouterController } from '@reown/appkit-core-react-native';
 
 import { AccountDefaultView } from '../../views/w3m-account-default-view';
@@ -9,12 +9,8 @@ import { ConnectView } from '../../views/w3m-connect-view';
 import { ConnectSocialsView } from '../../views/w3m-connect-socials-view';
 import { ConnectingView } from '../../views/w3m-connecting-view';
 import { ConnectingExternalView } from '../../views/w3m-connecting-external-view';
-import { ConnectingFarcasterView } from '../../views/w3m-connecting-farcaster-view';
 import { ConnectingSocialView } from '../../views/w3m-connecting-social-view';
-import { CreateView } from '../../views/w3m-create-view';
-import { ConnectingSiweView } from '@reown/appkit-siwe-react-native';
-import { EmailVerifyOtpView } from '../../views/w3m-email-verify-otp-view';
-import { EmailVerifyDeviceView } from '../../views/w3m-email-verify-device-view';
+import { SIWXSignMessageView } from '../../views/w3m-siwx-sign-view';
 import { GetWalletView } from '../../views/w3m-get-wallet-view';
 import { NetworksView } from '../../views/w3m-networks-view';
 import { NetworkSwitchView } from '../../views/w3m-network-switch-view';
@@ -25,14 +21,9 @@ import { OnRampSettingsView } from '../../views/w3m-onramp-settings-view';
 import { OnRampTransactionView } from '../../views/w3m-onramp-transaction-view';
 import { SwapView } from '../../views/w3m-swap-view';
 import { SwapPreviewView } from '../../views/w3m-swap-preview-view';
-import { SwapSelectTokenView } from '../../views/w3m-swap-select-token-view';
 import { TransactionsView } from '../../views/w3m-transactions-view';
 import { UnsupportedChainView } from '../../views/w3m-unsupported-chain-view';
-import { UpdateEmailWalletView } from '../../views/w3m-update-email-wallet-view';
-import { UpdateEmailPrimaryOtpView } from '../../views/w3m-update-email-primary-otp-view';
-import { UpdateEmailSecondaryOtpView } from '../../views/w3m-update-email-secondary-otp-view';
 import { UpgradeEmailWalletView } from '../../views/w3m-upgrade-email-wallet-view';
-import { UpgradeToSmartAccountView } from '../../views/w3m-upgrade-to-smart-account-view';
 import { WalletCompatibleNetworks } from '../../views/w3m-wallet-compatible-networks-view';
 import { WalletReceiveView } from '../../views/w3m-wallet-receive-view';
 import { WalletSendView } from '../../views/w3m-wallet-send-view';
@@ -40,14 +31,24 @@ import { WalletSendPreviewView } from '../../views/w3m-wallet-send-preview-view'
 import { WalletSendSelectTokenView } from '../../views/w3m-wallet-send-select-token-view';
 import { WhatIsANetworkView } from '../../views/w3m-what-is-a-network-view';
 import { WhatIsAWalletView } from '../../views/w3m-what-is-a-wallet-view';
-import { UiUtil } from '../../utils/UiUtil';
+// 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();
 
-  useLayoutEffect(() => {
-    UiUtil.createViewTransition();
-  }, [view]);
+  // useEffect(() => {
+  //   UiUtil.setRouteTransition(animateTransition);
+  // }, [animateTransition]);
+
+  // useEffect(() => {
+  //   UiUtil.createViewTransition();
+  // }, [view]);
 
   const ViewComponent = useMemo(() => {
     switch (view) {
@@ -63,20 +64,12 @@ export function AppKitRouter() {
         return ConnectSocialsView;
       case 'ConnectingExternal':
         return ConnectingExternalView;
-      case 'ConnectingSiwe':
-        return ConnectingSiweView;
+      case 'SIWXSignMessage':
+        return SIWXSignMessageView;
       case 'ConnectingSocial':
         return ConnectingSocialView;
-      case 'ConnectingFarcaster':
-        return ConnectingFarcasterView;
-      case 'ConnectingWalletConnect':
+      case 'WalletConnect':
         return ConnectingView;
-      case 'Create':
-        return CreateView;
-      case 'EmailVerifyDevice':
-        return EmailVerifyDeviceView;
-      case 'EmailVerifyOtp':
-        return EmailVerifyOtpView;
       case 'GetWallet':
         return GetWalletView;
       case 'Networks':
@@ -89,30 +82,20 @@ 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 'SwapSelectToken':
-        return SwapSelectTokenView;
+      case 'SwitchNetwork':
+        return NetworkSwitchView;
       case 'Transactions':
         return TransactionsView;
       case 'UnsupportedChain':
         return UnsupportedChainView;
-      case 'UpdateEmailPrimaryOtp':
-        return UpdateEmailPrimaryOtpView;
-      case 'UpdateEmailSecondaryOtp':
-        return UpdateEmailSecondaryOtpView;
-      case 'UpdateEmailWallet':
-        return UpdateEmailWalletView;
       case 'UpgradeEmailWallet':
         return UpgradeEmailWalletView;
-      case 'UpgradeToSmartAccount':
-        return UpgradeToSmartAccountView;
       case 'WalletCompatibleNetworks':
         return WalletCompatibleNetworks;
       case 'WalletReceive':
@@ -132,5 +115,9 @@ export function AppKitRouter() {
     }
   }, [view]);
 
-  return <ViewComponent />;
+  return (
+    <Animated.View style={{ maxHeight }}>
+      <ViewComponent />
+    </Animated.View>
+  );
 }

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

@@ -12,7 +12,7 @@ import {
 } from '@reown/appkit-ui-react-native';
 import { type Transaction, type TransactionImage } from '@reown/appkit-common-react-native';
 import {
-  AccountController,
+  AssetController,
   AssetUtil,
   ConnectionsController,
   ConstantsUtil,
@@ -34,13 +34,19 @@ export function AccountActivity({ style }: Props) {
   const [initialLoad, setInitialLoad] = useState(true);
   const { loading, transactions, next } = useSnapshot(TransactionsController.state);
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const isSupported =
     activeNetwork?.caipNetworkId &&
     ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
 
   const handleLoadMore = () => {
-    const address = ConnectionsController.state.activeAddress?.split(':')[2];
+    const address = ConnectionsController.state.activeAddress;
+
+    if (!address) {
+      return;
+    }
+
     TransactionsController.fetchTransactions(address);
     EventsController.sendEvent({
       type: 'track',
@@ -49,14 +55,19 @@ export function AccountActivity({ style }: Props) {
         address,
         projectId: OptionsController.state.projectId,
         cursor: TransactionsController.state.next,
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+        isSmartAccount: ConnectionsController.state.accountType === 'smartAccount'
       }
     });
   };
 
   const onRefresh = useCallback(async () => {
+    const address = ConnectionsController.state.activeAddress;
+
+    if (!address) {
+      return;
+    }
+
     setRefreshing(true);
-    const address = ConnectionsController.state.activeAddress?.split(':')[2];
     await TransactionsController.fetchTransactions(address, true);
     setRefreshing(false);
   }, []);
@@ -66,15 +77,15 @@ export function AccountActivity({ style }: Props) {
   }, [transactions]);
 
   useEffect(() => {
-    if (!TransactionsController.state.transactions.length) {
-      const address = ConnectionsController.state.activeAddress?.split(':')[2];
+    const address = ConnectionsController.state.activeAddress;
+    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) {
@@ -112,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}
@@ -175,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

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
-  AccountController,
+  AssetController,
   AssetUtil,
   ConnectionsController,
   RouterController
@@ -19,23 +19,25 @@ import {
   Text,
   ListToken,
   useTheme,
-  Spacing
+  Spacing,
+  LoadingSpinner
 } from '@reown/appkit-ui-react-native';
 
 interface Props {
   style?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
 }
 
-export function AccountTokens({ style }: Props) {
+export function AccountTokens({ style, isLoading }: Props) {
   const Theme = useTheme();
   const [refreshing, setRefreshing] = useState(false);
-  const { tokenBalance } = useSnapshot(AccountController.state);
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
-  const onRefresh = useCallback(async () => {
+  const getBalance = useCallback(async () => {
     setRefreshing(true);
-    AccountController.fetchTokenBalance();
+    await ConnectionsController.fetchBalance();
     setRefreshing(false);
   }, []);
 
@@ -43,23 +45,26 @@ export function AccountTokens({ style }: Props) {
     RouterController.push('WalletReceive');
   };
 
-  if (!tokenBalance?.length) {
+  if (!balances?.length) {
     return (
-      <ListItem
-        icon="arrowBottomCircle"
-        iconColor="magenta-100"
-        onPress={onReceivePress}
-        style={styles.receiveButton}
-      >
-        <FlexView flexDirection="column" alignItems="flex-start">
-          <Text variant="paragraph-500" color="fg-100">
-            Receive funds
-          </Text>
-          <Text variant="small-400" color="fg-200">
-            Transfer tokens on your wallet
-          </Text>
-        </FlexView>
-      </ListItem>
+      <>
+        <ListItem
+          icon="arrowBottomCircle"
+          iconColor="magenta-100"
+          onPress={onReceivePress}
+          style={styles.receiveButton}
+        >
+          <FlexView flexDirection="column" alignItems="flex-start">
+            <Text variant="paragraph-500" color="fg-100">
+              Receive funds
+            </Text>
+            <Text variant="small-400" color="fg-200">
+              Transfer tokens on your wallet
+            </Text>
+          </FlexView>
+        </ListItem>
+        {isLoading ? <LoadingSpinner size="sm" style={styles.loadingSpinner} /> : null}
+      </>
     );
   }
 
@@ -70,24 +75,25 @@ export function AccountTokens({ style }: Props) {
       refreshControl={
         <RefreshControl
           refreshing={refreshing}
-          onRefresh={onRefresh}
+          onRefresh={getBalance}
           tintColor={Theme['accent-100']}
           colors={[Theme['accent-100']]}
         />
       }
     >
-      {tokenBalance.map(token => (
+      {balances.map(token => (
         <ListToken
-          key={token.name}
-          name={token.name}
+          key={token.symbol}
+          name={token.name || 'Unknown'}
           imageSrc={token.iconUrl}
           networkSrc={networkImage}
           value={token.value}
-          amount={token.quantity.numeric}
+          amount={token.quantity?.numeric}
           currency={token.symbol}
           pressable={false}
         />
       ))}
+      {isLoading ? <LoadingSpinner size="sm" style={styles.loadingSpinner} /> : null}
     </ScrollView>
   );
 }
@@ -96,5 +102,8 @@ const styles = StyleSheet.create({
   receiveButton: {
     width: 'auto',
     marginHorizontal: Spacing.s
+  },
+  loadingSpinner: {
+    marginTop: Spacing.m
   }
 });