@reown/appkit-react-native 2.0.0 → 2.0.1

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

@@ -2,24 +2,22 @@ import { useSnapshot } from 'valtio';
 import { useState } from 'react';
 import { Linking, ScrollView } from 'react-native';
 import {
-  AccountController,
   ApiController,
-  AssetUtil,
-  ConnectionController,
-  ConnectorController,
   CoreHelperUtil,
   EventsController,
   ModalController,
-  NetworkController,
   OptionsController,
   RouterController,
   SnackController,
-  type AppKitFrameProvider,
   ConstantsUtil,
   SwapController,
   OnRampController,
-  ConnectionsController
+  ConnectionsController,
+  AssetController,
+  AssetUtil,
+  LogController
 } from '@reown/appkit-core-react-native';
+// import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
 import {
   Avatar,
   Button,
@@ -28,40 +26,41 @@ 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 { profileName, profileImage, preferredAccountType } = useSnapshot(AccountController.state);
+  const { switchAccountType, disconnect } = useInternalAppKit();
   const { loading } = useSnapshot(ModalController.state);
   const {
     activeAddress: address,
     activeBalance: balance,
     activeNetwork,
-    activeNamespace
+    activeNamespace,
+    connection,
+    accountType,
+    identity
   } = useSnapshot(ConnectionsController.state);
   const account = address?.split(':')[2];
   const [disconnecting, setDisconnecting] = useState(false);
-  const { connectedConnector } = useSnapshot(ConnectorController.state);
-  const { connectedSocialProvider } = useSnapshot(ConnectionController.state);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { history } = useSnapshot(RouterController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const showCopy = OptionsController.isClipboardAvailable();
-  const isAuth = connectedConnector === 'AUTH';
+  const isAuth = !!connection?.properties?.provider;
   const showBalance = balance && !isAuth;
   const showExplorer = Object.keys(activeNetwork?.blockExplorers ?? {}).length > 0 && !isAuth;
   const showBack = history.length > 1;
-  const showSwitchAccountType = isAuth && NetworkController.checkIfSmartAccountEnabled();
+  const showSwitchAccountType = isAuth && activeNamespace === 'eip155';
   const showActivity =
     !isAuth &&
-    activeNamespace &&
     activeNetwork?.caipNetworkId &&
     ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
   const showSwaps =
@@ -69,8 +68,17 @@ export function AccountDefaultView() {
     features?.swaps &&
     activeNetwork?.caipNetworkId &&
     ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(activeNetwork.caipNetworkId);
+
+  const showSend =
+    !isAuth && activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);
+
+  const showBuy =
+    !isAuth &&
+    isOnRampEnabled &&
+    activeNamespace &&
+    ConstantsUtil.ONRAMP_SUPPORTED_NAMESPACES.includes(activeNamespace);
+
   const { padding } = useCustomDimensions();
-  const { disconnect } = useAppKit();
 
   async function onDisconnect() {
     setDisconnecting(true);
@@ -80,41 +88,18 @@ export function AccountDefaultView() {
 
   const onSwitchAccountType = async () => {
     try {
-      if (isAuth) {
-        ModalController.setLoading(true);
-        const accountType =
-          AccountController.state.preferredAccountType === 'eoa' ? 'smartAccount' : 'eoa';
-        const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-        await provider?.setPreferredAccount(accountType);
-        EventsController.sendEvent({
-          type: 'track',
-          event: 'SET_PREFERRED_ACCOUNT_TYPE',
-          properties: {
-            accountType,
-            network: ConnectionsController.state.activeNetwork?.caipNetworkId || ''
-          }
-        });
+      const namespace = ConnectionsController.state.activeNamespace;
+      const network = ConnectionsController.state.activeNetwork;
+      if (isAuth && namespace && network) {
+        const newType = ConnectionsController.state.accountType === 'eoa' ? 'smartAccount' : 'eoa';
+        switchAccountType(namespace, newType, network);
       }
     } catch (error) {
-      ModalController.setLoading(false);
+      LogController.sendError(error, 'AccountDefaultView.tsx', 'onSwitchAccountType');
       SnackController.showError('Error switching account type');
     }
   };
 
-  const getUserEmail = () => {
-    const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-    if (!provider) return '';
-
-    return provider.getEmail();
-  };
-
-  const getUsername = () => {
-    const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-    if (!provider) return '';
-
-    return provider.getUsername();
-  };
-
   const onExplorerPress = () => {
     if (showExplorer && ConnectionsController.state.activeNetwork?.blockExplorers?.default?.url) {
       Linking.openURL(ConnectionsController.state.activeNetwork?.blockExplorers?.default?.url);
@@ -122,9 +107,8 @@ export function AccountDefaultView() {
   };
 
   const onCopyAddress = () => {
-    //TODO: Check ENS name
     if (OptionsController.isClipboardAvailable() && ConnectionsController.state.activeAddress) {
-      const _address = ConnectionsController.state.activeAddress.split(':')[2];
+      const _address = CoreHelperUtil.getPlainAddress(ConnectionsController.state.activeAddress);
       if (_address) {
         OptionsController.copyToClipboard(_address);
         SnackController.showSuccess('Address copied');
@@ -133,12 +117,12 @@ export function AccountDefaultView() {
   };
 
   const onSwapPress = () => {
-    SwapController.resetState();
+    SwapController.clearTokens();
     EventsController.sendEvent({
       type: 'track',
       event: 'OPEN_SWAP',
       properties: {
-        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId,
         isSmartAccount: false
       }
     });
@@ -173,16 +157,37 @@ export function AccountDefaultView() {
     RouterController.push('UpgradeEmailWallet');
   };
 
-  const onEmailPress = () => {
-    if (ConnectionController.state.connectedSocialProvider) return;
-    RouterController.push('UpdateEmailWallet', { email: getUserEmail() });
+  const onSendPress = () => {
+    const network = ConnectionsController.state.activeNetwork?.caipNetworkId;
+    const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'OPEN_SEND',
+      properties: { network, isSmartAccount }
+    });
+    RouterController.push('WalletSend');
+  };
+
+  const onEmailPress = async () => {
+    // TODO: Uncomment when email update is enabled
+    // const email = ConnectionsController.state.connection?.properties?.email;
+    // const provider = ConnectionsController.state.connection?.properties?.provider;
+    // if (provider !== 'email' || !email) return;
+    // const sessionTopic = ConnectionsController.state.connection?.properties?.sessionTopic;
+    // if (!sessionTopic) {
+    //   throw new Error('Session topic not found');
+    // }
+    // const link = `${CommonConstantsUtil.WEB_WALLET_URL}/emailUpdate/${sessionTopic}`;
+    // await CoreHelperUtil.openLink(link);
+    // Subscribe to email update event
   };
 
   return (
     <>
-      {showBack && (
+      {showBack ? (
         <IconLink icon="chevronLeft" style={styles.backIcon} onPress={RouterController.goBack} />
-      )}
+      ) : null}
       <IconLink
         icon="close"
         style={styles.closeIcon}
@@ -190,13 +195,13 @@ export function AccountDefaultView() {
         testID="header-close"
       />
       <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
-        <FlexView alignItems="center" padding={['3xl', 's', '3xl', 's']}>
-          <Avatar imageSrc={profileImage} address={account ?? ''} />
+        <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">
-              {profileName
+              {identity?.name
                 ? UiUtil.getTruncateString({
-                    string: profileName,
+                    string: identity?.name,
                     charsStart: 20,
                     charsEnd: 0,
                     truncate: 'end'
@@ -208,7 +213,7 @@ export function AccountDefaultView() {
                     truncate: 'middle'
                   })}
             </Text>
-            {showCopy && (
+            {showCopy ? (
               <IconLink
                 icon="copy"
                 size="md"
@@ -216,14 +221,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"
@@ -234,22 +239,22 @@ export function AccountDefaultView() {
             >
               Block Explorer
             </Button>
-          )}
+          ) : null}
           <FlexView margin={['s', '0', '0', '0']}>
-            {isAuth && (
+            {isAuth ? (
               <AuthButtons
                 onUpgradePress={onUpgradePress}
-                socialProvider={connectedSocialProvider}
+                socialProvider={connection?.properties?.provider}
                 onPress={onEmailPress}
                 style={styles.actionButton}
                 text={UiUtil.getTruncateString({
-                  string: getUsername() || getUserEmail() || '',
+                  string: connection?.properties?.username || connection?.properties?.email || '',
                   charsStart: 30,
                   charsEnd: 0,
                   truncate: 'end'
                 })}
               />
-            )}
+            ) : null}
             <ListItem
               chevron
               icon="networkPlaceholder"
@@ -265,7 +270,7 @@ export function AccountDefaultView() {
                 {activeNetwork?.name}
               </Text>
             </ListItem>
-            {!isAuth && isOnRampEnabled && (
+            {showBuy ? (
               <ListItem
                 chevron
                 icon="card"
@@ -275,10 +280,23 @@ export function AccountDefaultView() {
                 testID="button-onramp"
                 style={styles.actionButton}
               >
-                <Text color="fg-100">Buy crypto</Text>
+                <Text color="fg-100">Buy Crypto</Text>
+              </ListItem>
+            ) : null}
+            {showSend ? (
+              <ListItem
+                chevron
+                icon="paperplane"
+                iconColor="accent-100"
+                iconBackgroundColor="accent-glass-015"
+                onPress={onSendPress}
+                testID="button-send"
+                style={styles.actionButton}
+              >
+                <Text color="fg-100">Send</Text>
               </ListItem>
-            )}
-            {showSwaps && (
+            ) : null}
+            {showSwaps ? (
               <ListItem
                 chevron
                 icon="recycleHorizontal"
@@ -290,8 +308,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Swap</Text>
               </ListItem>
-            )}
-            {showActivity && (
+            ) : null}
+            {showActivity ? (
               <ListItem
                 chevron
                 icon="clock"
@@ -303,8 +321,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Activity</Text>
               </ListItem>
-            )}
-            {showSwitchAccountType && (
+            ) : null}
+            {showSwitchAccountType ? (
               <ListItem
                 chevron
                 icon="swapHorizontal"
@@ -316,10 +334,10 @@ export function AccountDefaultView() {
                 loading={loading}
               >
                 <Text color="fg-100">{`Switch to your ${
-                  preferredAccountType === '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

@@ -8,32 +8,30 @@ import {
   IconLink,
   NetworkButton,
   useTheme,
-  Promo
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ApiController,
+  AssetController,
   AssetUtil,
   ConnectionsController,
+  CoreHelperUtil,
+  EventsController,
   ModalController,
-  NetworkController,
   RouterController,
   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 { padding } = useCustomDimensions();
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const { address, profileName, profileImage, preferredAccountType } = useSnapshot(
-    AccountController.state
-  );
-  const showActivate =
-    preferredAccountType === 'eoa' && NetworkController.checkIfSmartAccountEnabled();
+  const { activeNetwork, activeAddress, identity } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const address = CoreHelperUtil.getPlainAddress(activeAddress);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const onProfilePress = () => {
     RouterController.push('AccountDefault');
@@ -41,41 +39,20 @@ export function AccountView() {
 
   const onNetworkPress = () => {
     RouterController.push('Networks');
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CLICK_NETWORKS'
+    });
   };
 
-  const onActivatePress = () => {
-    RouterController.push('UpgradeToSmartAccount');
-  };
-
-  useEffect(() => {
-    AccountController.fetchTokenBalance();
-    SendController.resetSend();
-  }, []);
-
   useEffect(() => {
-    AccountController.fetchTokenBalance();
-
-    const balanceInterval = setInterval(() => {
-      AccountController.fetchTokenBalance();
-    }, 10000);
-
-    return () => {
-      clearInterval(balanceInterval);
-    };
+    SendController.resetState();
   }, []);
 
   return (
-    <ScrollView
-      bounces={false}
-      contentContainerStyle={[
-        styles.contentContainer,
-        {
-          paddingHorizontal: padding
-        }
-      ]}
-    >
+    <ScrollView bounces={false} contentContainerStyle={{ paddingHorizontal: padding }}>
       <NetworkButton
-        imageSrc={AssetUtil.getNetworkImage(activeNetwork?.id)}
+        imageSrc={networkImage}
         imageHeaders={ApiController._getApiHeaders()}
         onPress={onNetworkPress}
         style={styles.networkIcon}
@@ -85,17 +62,10 @@ export function AccountView() {
       </NetworkButton>
       <IconLink icon="close" style={styles.closeIcon} onPress={ModalController.close} />
       <FlexView padding={['3xl', '0', '0', '0']} style={[{ backgroundColor: Theme['bg-100'] }]}>
-        {showActivate && (
-          <Promo
-            style={styles.promoPill}
-            text="Switch to your smart account"
-            onPress={onActivatePress}
-          />
-        )}
         <AccountPill
           address={address}
-          profileName={profileName}
-          profileImage={profileImage}
+          profileName={identity?.name}
+          profileImage={identity?.avatar}
           onPress={onProfilePress}
           style={styles.accountPill}
         />

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',
@@ -23,10 +20,5 @@ export default StyleSheet.create({
     alignSelf: 'center',
     marginBottom: Spacing.s,
     marginHorizontal: Spacing.s
-  },
-  promoPill: {
-    marginTop: Spacing.xs,
-    marginBottom: Spacing['2xl'],
-    alignSelf: 'center'
   }
 });

package/src/views/w3m-all-wallets-view/index.tsx

@@ -1,48 +1,53 @@
 import { useState } from 'react';
+import { WcController, EventsController, RouterController } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import {
-  ConnectionController,
-  ConnectorController,
-  EventsController,
-  RouterController,
-  type WcWallet
-} from '@reown/appkit-core-react-native';
-import { FlexView, IconLink, SearchBar, Spacing, useTheme } from '@reown/appkit-ui-react-native';
+  FlexView,
+  IconLink,
+  SearchBar,
+  useTheme,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 
 import styles from './styles';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { AllWalletsList } from '../../partials/w3m-all-wallets-list';
 import { AllWalletsSearch } from '../../partials/w3m-all-wallets-search';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { WcHelpersUtil } from '../../utils/HelpersUtil';
 
 export function AllWalletsView() {
   const Theme = useTheme();
   const [searchQuery, setSearchQuery] = useState<string>('');
-  const { maxWidth } = useCustomDimensions();
-  const numColumns = 4;
-  const usableWidth = maxWidth - Spacing.xs * 2;
-  const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns));
+  const { padding } = useCustomDimensions();
 
   const { debouncedCallback: onInputChange } = useDebounceCallback({ callback: setSearchQuery });
 
-  const onWalletPress = (wallet: WcWallet) => {
-    const connector = ConnectorController.state.connectors.find(c => c.explorerId === wallet.id);
-    if (connector) {
-      RouterController.push('ConnectingExternal', { connector, wallet });
+  const onWalletPress = (wallet: WcWallet, displayIndex: number) => {
+    const isExternal = WcHelpersUtil.isExternalWallet(wallet);
+    if (isExternal) {
+      RouterController.push('ConnectingExternal', { wallet });
     } else {
-      RouterController.push('ConnectingWalletConnect', { wallet });
+      RouterController.push('WalletConnect', { wallet });
     }
 
     EventsController.sendEvent({
       type: 'track',
       event: 'SELECT_WALLET',
-      properties: { name: wallet.name ?? 'Unknown', platform: 'mobile', explorer_id: wallet.id }
+      properties: {
+        name: wallet.name ?? 'Unknown',
+        platform: 'mobile',
+        explorerId: wallet.id,
+        walletRank: wallet.order,
+        displayIndex,
+        view: 'AllWallets'
+      }
     });
   };
 
   const onQrCodePress = () => {
-    ConnectionController.removePressedWallet();
-    ConnectionController.removeWcLinking();
-    RouterController.push('ConnectingWalletConnect');
+    WcController.removePressedWallet();
+    WcController.removeWcLinking();
+    RouterController.push('WalletConnect');
 
     EventsController.sendEvent({
       type: 'track',
@@ -54,12 +59,16 @@ export function AllWalletsView() {
   const headerTemplate = () => {
     return (
       <FlexView
-        padding={['s', 'l', 'xs', 'l']}
+        padding={['s', 'l', '4xs', 'l']}
         flexDirection="row"
         alignItems="center"
         style={[
           styles.header,
-          { backgroundColor: Theme['bg-100'], shadowColor: Theme['bg-100'], width: maxWidth }
+          {
+            backgroundColor: Theme['bg-100'],
+            shadowColor: Theme['bg-100'],
+            marginHorizontal: padding
+          }
         ]}
       >
         <SearchBar
@@ -83,19 +92,10 @@ export function AllWalletsView() {
 
   const listTemplate = () => {
     if (searchQuery) {
-      return (
-        <AllWalletsSearch
-          columns={numColumns}
-          itemWidth={itemWidth}
-          searchQuery={searchQuery}
-          onItemPress={onWalletPress}
-        />
-      );
+      return <AllWalletsSearch searchQuery={searchQuery} onItemPress={onWalletPress} />;
     }
 
-    return (
-      <AllWalletsList columns={numColumns} itemWidth={itemWidth} onItemPress={onWalletPress} />
-    );
+    return <AllWalletsList onItemPress={onWalletPress} />;
   };
 
   return (

package/src/views/w3m-connect-socials-view/index.tsx

@@ -1,17 +1,13 @@
-import { useEffect } from 'react';
 import { useSnapshot } from 'valtio';
 import { ScrollView } from 'react-native';
 import { StringUtil, type SocialProvider } from '@reown/appkit-common-react-native';
+import { FlexView, ListSocial, Text, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import {
-  ConnectionController,
   EventsController,
   OptionsController,
-  RouterController,
-  WebviewController
+  RouterController
 } from '@reown/appkit-core-react-native';
-import { FlexView, ListSocial, Text } from '@reown/appkit-ui-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 
 export function ConnectSocialsView() {
@@ -20,26 +16,18 @@ export function ConnectSocialsView() {
   const socialProviders = (features?.socials ?? []) as SocialProvider[];
 
   const onItemPress = (provider: SocialProvider) => {
-    ConnectionController.setSelectedSocialProvider(provider);
     EventsController.sendEvent({
       type: 'track',
       event: 'SOCIAL_LOGIN_STARTED',
       properties: { provider }
     });
-    if (provider === 'farcaster') {
-      RouterController.push('ConnectingFarcaster');
-    } else {
-      RouterController.push('ConnectingSocial');
-    }
-  };
 
-  useEffect(() => {
-    WebviewController.setConnecting(false);
-  }, []);
+    RouterController.push('ConnectingSocial', { socialProvider: provider });
+  };
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
-      <FlexView padding={['xs', 'm', '2xl', 'm']}>
+      <FlexView padding={['xs', 'm', '0', 'm']}>
         {socialProviders.map(provider => (
           <ListSocial
             key={provider}