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

package/src/views/w3m-connect-view/components/custom-wallet-list.tsx

@@ -2,28 +2,29 @@ import { useSnapshot } from 'valtio';
 import type { StyleProp, ViewStyle } from 'react-native';
 import {
   OptionsController,
-  type CustomWallet,
   type OptionsControllerState,
   ApiController,
-  ConnectionController,
-  type ConnectionControllerState
+  WcController,
+  type WcControllerState,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
+import { type CustomWallet } from '@reown/appkit-common-react-native';
 import { ListWallet } from '@reown/appkit-ui-react-native';
 import { filterOutRecentWallets } from '../utils';
 
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
   onWalletPress: (wallet: CustomWallet) => void;
-  isWalletConnectEnabled: boolean;
 }
 
-export function CustomWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: Props) {
+export function CustomWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed } = useSnapshot(ApiController.state);
-  const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
+  const imageHeaders = ApiController._getApiHeaders();
+  const { recentWallets } = useSnapshot(WcController.state) as WcControllerState;
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
-  if (!isWalletConnectEnabled || !customWallets?.length) {
+  if (!customWallets?.length) {
     return null;
   }
 
@@ -32,7 +33,8 @@ export function CustomWalletList({ itemStyle, onWalletPress, isWalletConnectEnab
   return list.map(wallet => (
     <ListWallet
       key={wallet.id}
-      imageSrc={wallet.image_url}
+      imageSrc={AssetUtil.getWalletImage(wallet)}
+      imageHeaders={imageHeaders}
       name={wallet.name}
       onPress={() => onWalletPress(wallet)}
       style={itemStyle}

package/src/views/w3m-connect-view/components/recent-wallet-list.tsx

@@ -1,26 +1,21 @@
 import { useSnapshot } from 'valtio';
-import {
-  ApiController,
-  AssetUtil,
-  type WcWallet,
-  ConnectionController
-} from '@reown/appkit-core-react-native';
+import { ApiController, AssetUtil, WcController } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import { ListWallet } from '@reown/appkit-ui-react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
   onWalletPress: (wallet: WcWallet, installed: boolean) => void;
-  isWalletConnectEnabled: boolean;
 }
 
-export function RecentWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: Props) {
+export function RecentWalletList({ itemStyle, onWalletPress }: Props) {
   const installed = ApiController.state.installed;
-  const { recentWallets } = useSnapshot(ConnectionController.state);
+  const { recentWallets } = useSnapshot(WcController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
-  if (!isWalletConnectEnabled || !recentWallets?.length) {
+  if (!recentWallets?.length) {
     return null;
   }
 

package/src/views/w3m-connect-view/components/social-login-list.tsx

@@ -1,12 +1,7 @@
 import { StyleSheet } from 'react-native';
 import { FlexView, ListSocial, LogoSelect, Spacing, Text } from '@reown/appkit-ui-react-native';
 import { type SocialProvider, StringUtil } from '@reown/appkit-common-react-native';
-import {
-  ConnectionController,
-  EventsController,
-  RouterController,
-  WebviewController
-} from '@reown/appkit-core-react-native';
+import { EventsController, RouterController } from '@reown/appkit-core-react-native';
 
 export interface SocialLoginListProps {
   options: readonly SocialProvider[];
@@ -23,19 +18,20 @@ export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
   bottomSocials = showMoreButton ? bottomSocials.slice(0, MAX_OPTIONS - 2) : bottomSocials;
 
   const onItemPress = (provider: SocialProvider) => {
-    ConnectionController.setSelectedSocialProvider(provider);
-    EventsController.sendEvent({
-      type: 'track',
-      event: 'SOCIAL_LOGIN_STARTED',
-      properties: { provider }
-    });
-    WebviewController.setConnecting(false);
-
-    if (provider === 'farcaster') {
-      RouterController.push('ConnectingFarcaster');
+    if (provider === 'email') {
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'EMAIL_LOGIN_SELECTED'
+      });
     } else {
-      RouterController.push('ConnectingSocial');
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SOCIAL_LOGIN_STARTED',
+        properties: { provider }
+      });
     }
+
+    RouterController.push('ConnectingSocial', { socialProvider: provider });
   };
 
   const onMorePress = () => {
@@ -44,13 +40,13 @@ export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
 
   return (
     <FlexView padding={['xs', 's', '0', 's']}>
-      {topSocial && (
+      {topSocial ? (
         <ListSocial logo={topSocial} disabled={disabled} onPress={() => onItemPress(topSocial)}>
           <Text style={styles.topDescription} color={disabled ? 'fg-300' : 'fg-100'}>
             {`Continue with ${StringUtil.capitalize(topSocial)}`}
           </Text>
         </ListSocial>
-      )}
+      ) : null}
       <FlexView flexDirection="row" justifyContent="space-between" margin={['xs', '0', '0', '0']}>
         {bottomSocials?.map((social: SocialProvider, index) => (
           <LogoSelect
@@ -65,14 +61,14 @@ export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
             ]}
           />
         ))}
-        {showMoreButton && (
+        {showMoreButton ? (
           <LogoSelect
             logo="more"
             disabled={disabled}
             style={[styles.socialItem, styles.socialItemLast]}
             onPress={onMorePress}
           />
-        )}
+        ) : null}
       </FlexView>
     </FlexView>
   );

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

@@ -1,61 +1,39 @@
 import { useSnapshot } from 'valtio';
-import { Platform, ScrollView, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import {
   ApiController,
-  ConnectorController,
   EventUtil,
   EventsController,
   OptionsController,
-  RouterController,
-  type WcWallet
+  RouterController
 } from '@reown/appkit-core-react-native';
-import { FlexView, Icon, ListItem, Separator, Spacing, Text } from '@reown/appkit-ui-react-native';
+import { type WcWallet, ConstantsUtil } from '@reown/appkit-common-react-native';
+import { FlexView, Icon, ListItem, Separator, Text } from '@reown/appkit-ui-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { ConnectEmailInput } from './components/connect-email-input';
-import { useKeyboard } from '../../hooks/useKeyboard';
 import { Placeholder } from '../../partials/w3m-placeholder';
-import { ConnectorList } from './components/connectors-list';
 import { CustomWalletList } from './components/custom-wallet-list';
 import { AllWalletsButton } from './components/all-wallets-button';
 import { AllWalletList } from './components/all-wallet-list';
 import { RecentWalletList } from './components/recent-wallet-list';
 import { SocialLoginList } from './components/social-login-list';
-import { WalletGuide } from './components/wallet-guide';
 import styles from './styles';
 
 export function ConnectView() {
-  const connectors = ConnectorController.state.connectors;
-  const { authLoading } = useSnapshot(ConnectorController.state);
   const { prefetchError } = useSnapshot(ApiController.state);
   const { features } = useSnapshot(OptionsController.state);
   const { padding } = useCustomDimensions();
-  const { keyboardShown, keyboardHeight } = useKeyboard();
 
-  //TODO: check this
-  // const isWalletConnectEnabled = connectors.some(c => c.type === 'WALLET_CONNECT');
-  const isWalletConnectEnabled = true;
-  const isAuthEnabled = connectors.some(c => c.type === 'AUTH');
-  const isCoinbaseEnabled = connectors.some(c => c.type === 'COINBASE');
-  const isEmailEnabled = isAuthEnabled && features?.email;
-  const isSocialEnabled = isAuthEnabled && features?.socials && features?.socials.length > 0;
-  const showConnectWalletsButton =
-    isWalletConnectEnabled && isAuthEnabled && !features?.emailShowWallets;
-  const showSeparator =
-    isAuthEnabled &&
-    (isEmailEnabled || isSocialEnabled) &&
-    (isWalletConnectEnabled || isCoinbaseEnabled);
+  const isSocialEnabled = features?.socials && features?.socials.length > 0;
+  const showConnectWalletsButton = isSocialEnabled && !features?.showWallets;
   const showLoadingError = !showConnectWalletsButton && prefetchError;
   const showList = !showConnectWalletsButton && !showLoadingError;
 
-  const paddingBottom = Platform.select({
-    android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
-    default: Spacing['2xl']
-  });
-
   const onWalletPress = (wallet: WcWallet, isInstalled?: boolean) => {
-    const connector = connectors.find(c => c.explorerId === wallet.id);
-    if (connector) {
-      RouterController.push('ConnectingExternal', { connector, wallet });
+    const isExternal =
+      wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id ||
+      wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id;
+    if (isExternal) {
+      RouterController.push('ConnectingExternal', { wallet });
     } else {
       RouterController.push('ConnectingWalletConnect', { wallet });
     }
@@ -65,7 +43,7 @@ export function ConnectView() {
       type: 'track',
       event: 'SELECT_WALLET',
       properties: {
-        name: wallet.name ?? connector?.name ?? 'Unknown',
+        name: wallet.name ?? 'Unknown',
         platform,
         explorer_id: wallet.id
       }
@@ -79,20 +57,23 @@ export function ConnectView() {
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
-      <FlexView padding={['xs', '0', '0', '0']} style={{ paddingBottom }}>
-        {isEmailEnabled && <ConnectEmailInput loading={authLoading} />}
-        {isSocialEnabled && <SocialLoginList options={features?.socials} disabled={authLoading} />}
-        {showSeparator && <Separator text="or" style={styles.socialSeparator} />}
+      <FlexView padding={['xs', '0', '2xl', '0']}>
+        {isSocialEnabled ? (
+          <>
+            <SocialLoginList options={features?.socials} />
+            <Separator text="or" style={styles.socialSeparator} />
+          </>
+        ) : null}
 
-        <FlexView padding={['0', 's', '0', 's']}>
-          {showConnectWalletsButton && (
+        <FlexView padding={['0', 's', 'xs', 's']}>
+          {showConnectWalletsButton ? (
             <ListItem contentStyle={styles.connectWalletButton} onPress={onViewAllPress}>
               <Icon name="wallet" size="lg" />
               <Text variant="paragraph-500">Continue with a wallet</Text>
               <View style={styles.connectWalletEmpty} />
             </ListItem>
-          )}
-          {showLoadingError && (
+          ) : null}
+          {showLoadingError ? (
             <FlexView alignItems="center" justifyContent="center" margin={['l', '0', '0', '0']}>
               <Placeholder
                 icon="warningCircle"
@@ -105,36 +86,15 @@ export function ConnectView() {
               />
               <Separator style={styles.socialSeparator} />
             </FlexView>
-          )}
-          {showList && (
+          ) : null}
+          {showList ? (
             <>
-              <RecentWalletList
-                itemStyle={styles.item}
-                onWalletPress={onWalletPress}
-                isWalletConnectEnabled={isWalletConnectEnabled}
-              />
-              <AllWalletList
-                itemStyle={styles.item}
-                onWalletPress={onWalletPress}
-                isWalletConnectEnabled={isWalletConnectEnabled}
-              />
-              <CustomWalletList
-                itemStyle={styles.item}
-                onWalletPress={onWalletPress}
-                isWalletConnectEnabled={isWalletConnectEnabled}
-              />
-              <ConnectorList
-                itemStyle={styles.item}
-                isWalletConnectEnabled={isWalletConnectEnabled}
-              />
-              <AllWalletsButton
-                itemStyle={styles.item}
-                onPress={onViewAllPress}
-                isWalletConnectEnabled={isWalletConnectEnabled}
-              />
+              <RecentWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
+              <AllWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
+              <CustomWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
+              <AllWalletsButton itemStyle={styles.item} onPress={onViewAllPress} />
             </>
-          )}
-          {isAuthEnabled && <WalletGuide guide="get-started" />}
+          ) : null}
         </FlexView>
       </FlexView>
     </ScrollView>

package/src/views/w3m-connect-view/utils.ts

@@ -1,4 +1,4 @@
-import type { WcWallet } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 
 export const filterOutRecentWallets = (
   recentWallets?: WcWallet[],

package/src/views/w3m-connecting-external-view/index.tsx

@@ -1,14 +1,12 @@
+import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
 import { ScrollView } from 'react-native';
 import {
   RouterController,
   ApiController,
-  AssetUtil,
-  ConnectionController,
-  ModalController,
   EventsController,
-  StorageUtil,
-  type WcWallet
+  WcController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -21,10 +19,12 @@ import {
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { ConnectingBody, getMessage, type BodyErrorType } from '../../partials/w3m-connecting-body';
 import styles from './styles';
+import { useInternalAppKit } from '../../AppKitContext';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
 
 export function ConnectingExternalView() {
-  const { data } = RouterController.state;
-  const connector = data?.connector;
+  const { data } = useSnapshot(RouterController.state);
+  const { connect } = useInternalAppKit();
   const { maxWidth: width } = useCustomDimensions();
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType });
@@ -34,35 +34,27 @@ export function ConnectingExternalView() {
     onConnect();
   };
 
-  const storeConnectedWallet = useCallback(
-    async (wallet?: WcWallet) => {
-      if (wallet) {
-        const recentWallets = await StorageUtil.addRecentWallet(wallet);
-        if (recentWallets) {
-          ConnectionController.setRecentWallets(recentWallets);
-        }
-      }
-      if (connector) {
-        const url = AssetUtil.getConnectorImage(connector);
-        ConnectionController.setConnectedWalletImageUrl(url);
-      }
-    },
-    [connector]
-  );
-
   const onConnect = useCallback(async () => {
     try {
-      if (connector) {
-        await ConnectionController.connectExternal(connector);
-        storeConnectedWallet(data?.wallet);
-        ModalController.close();
+      const wallet = RouterController.state.data?.wallet;
+      if (wallet) {
+        if (wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id) {
+          await connect('phantom');
+        } else if (wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id) {
+          await connect('coinbase');
+        } else {
+          // All other wallets are handled by WalletConnect connector
+          return;
+        }
+        WcController.addRecentWallet(wallet);
+        WcController.setPressedWallet(wallet);
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
           properties: {
-            name: data.wallet?.name ?? 'Unknown',
+            name: wallet?.name ?? 'Unknown',
             method: 'mobile',
-            explorer_id: data.wallet?.id
+            explorer_id: wallet?.id
           }
         });
       }
@@ -80,7 +72,7 @@ export function ConnectingExternalView() {
         properties: { message: (error as Error)?.message ?? 'Unknown' }
       });
     }
-  }, [connector, storeConnectedWallet, data?.wallet]);
+  }, [connect]);
 
   useEffect(() => {
     onConnect();
@@ -97,10 +89,10 @@ export function ConnectingExternalView() {
         <LoadingThumbnail paused={!!errorType}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getConnectorImage(connector)}
+            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
             imageHeaders={ApiController._getApiHeaders()}
           />
-          {errorType && (
+          {errorType ? (
             <IconBox
               icon={'close'}
               border
@@ -110,7 +102,7 @@ export function ConnectingExternalView() {
               iconColor="error-100"
               style={styles.errorIcon}
             />
-          )}
+          ) : null}
         </LoadingThumbnail>
         <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
         {errorType !== 'not_installed' && (

package/src/views/w3m-connecting-siwe-view/index.tsx

@@ -0,0 +1,126 @@
+import { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import {
+  Avatar,
+  Button,
+  DoubleImageLoader,
+  FlexView,
+  IconLink,
+  Text
+} from '@reown/appkit-ui-react-native';
+import {
+  ConnectionsController,
+  EventsController,
+  OptionsController,
+  RouterController,
+  SnackController
+} from '@reown/appkit-core-react-native';
+import { SIWEController } from '@reown/appkit-siwe-react-native';
+
+import { useInternalAppKit } from '../../AppKitContext';
+import styles from './styles';
+
+export function ConnectingSiweView() {
+  const { disconnect } = useInternalAppKit();
+  const { metadata } = useSnapshot(OptionsController.state);
+  const { activeAddress, identity, walletInfo } = useSnapshot(ConnectionsController.state);
+  const [isSigning, setIsSigning] = useState(false);
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
+
+  const dappName = metadata?.name || 'Dapp';
+  const dappIcon = metadata?.icons[0] || '';
+  const walletIcon = walletInfo?.icon;
+  const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
+  const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
+
+  const onSign = async () => {
+    setIsSigning(true);
+    EventsController.sendEvent({
+      event: 'CLICK_SIGN_SIWE_MESSAGE',
+      type: 'track',
+      properties: { network, isSmartAccount }
+    });
+    try {
+      const session = await SIWEController.signIn();
+
+      EventsController.sendEvent({
+        event: 'SIWE_AUTH_SUCCESS',
+        type: 'track',
+        properties: { network, isSmartAccount }
+      });
+
+      return session;
+    } catch (error) {
+      SnackController.showError('Signature declined');
+
+      SIWEController.setStatus('error');
+
+      return EventsController.sendEvent({
+        event: 'SIWE_AUTH_ERROR',
+        type: 'track',
+        properties: { network, isSmartAccount }
+      });
+    } finally {
+      setIsSigning(false);
+    }
+  };
+
+  const onCancel = async () => {
+    if (ConnectionsController.state.activeAddress) {
+      setIsDisconnecting(true);
+      await disconnect();
+      setIsDisconnecting(false);
+    } else {
+      RouterController.push('Connect');
+    }
+    EventsController.sendEvent({
+      event: 'CLICK_CANCEL_SIWE',
+      type: 'track',
+      properties: { network, isSmartAccount }
+    });
+  };
+
+  return (
+    <FlexView padding={['2xl', 's', '3xl', 's']}>
+      <IconLink
+        icon="close"
+        size="md"
+        onPress={onCancel}
+        testID="header-close"
+        style={styles.closeButton}
+      />
+      <Text variant="paragraph-600" numberOfLines={1} center>
+        Sign in
+      </Text>
+      <DoubleImageLoader
+        style={styles.logoContainer}
+        leftImage={dappIcon}
+        rightImage={walletIcon}
+        renderRightPlaceholder={() => (
+          <Avatar imageSrc={identity?.avatar} address={activeAddress} size={60} borderWidth={0} />
+        )}
+        rightItemStyle={!walletIcon && styles.walletAvatar}
+      />
+      <Text center variant="medium-600" color="fg-100" style={styles.title}>
+        {dappName} needs to connect to your wallet
+      </Text>
+      <Text center variant="small-400" color="fg-200" style={styles.subtitle}>
+        Sign this message to prove you own this wallet and proceed. Cancelling will disconnect you
+      </Text>
+      <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
+        <Button variant="shade" onPress={onCancel} style={styles.button} loading={isDisconnecting}>
+          Cancel
+        </Button>
+        <Button
+          variant="fill"
+          loading={isSigning}
+          disabled={isDisconnecting}
+          onPress={onSign}
+          style={styles.button}
+        >
+          Sign
+        </Button>
+      </FlexView>
+    </FlexView>
+  );
+}

package/src/views/w3m-connecting-siwe-view/styles.ts

@@ -0,0 +1,29 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  logoContainer: {
+    marginTop: Spacing.xl,
+    marginBottom: Spacing.m
+  },
+  button: {
+    width: '48%'
+  },
+  title: {
+    marginHorizontal: '15%'
+  },
+  subtitle: {
+    marginHorizontal: '10%',
+    marginVertical: Spacing.l
+  },
+  closeButton: {
+    alignSelf: 'flex-end',
+    right: Spacing.xl,
+    top: Spacing.l,
+    position: 'absolute',
+    zIndex: 2
+  },
+  walletAvatar: {
+    borderRadius: BorderRadius.full
+  }
+});