@reown/appkit-react-native 0.0.0-feat-multichain-phantom-20250609201736 → 0.0.0-feat-multi-siwe-20250619160449

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

@@ -4,21 +4,17 @@ import { useWindowDimensions, StatusBar } from 'react-native';
 import Modal from 'react-native-modal';
 import { Card, ThemeProvider } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ApiController,
-  ConnectionController,
   ConnectorController,
-  CoreHelperUtil,
   EventsController,
   ModalController,
   OptionsController,
   RouterController,
-  TransactionsController,
   type AppKitFrameProvider,
   WebviewController,
-  ThemeController
+  ThemeController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
-import type { CaipAddress } from '@reown/appkit-common-react-native';
 import { SIWEController } from '@reown/appkit-siwe-react-native';
 
 import { AppKitRouter } from '../w3m-router';
@@ -26,11 +22,12 @@ import { Header } from '../../partials/w3m-header';
 import { Snackbar } from '../../partials/w3m-snackbar';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
+import { useAppKit } from '../../AppKitContext';
 
 export function AppKit() {
-  const { open, loading } = useSnapshot(ModalController.state);
+  const { disconnect } = useAppKit();
+  const { open } = useSnapshot(ModalController.state);
   const { connectors, connectedConnector } = useSnapshot(ConnectorController.state);
-  const { caipAddress, isConnected } = useSnapshot(AccountController.state);
   const { frameViewVisible, webviewVisible } = useSnapshot(WebviewController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
   const { projectId } = useSnapshot(OptionsController.state);
@@ -58,8 +55,11 @@ export function AppKit() {
 
   const handleClose = async () => {
     if (OptionsController.state.isSiweEnabled) {
-      if (SIWEController.state.status !== 'success' && AccountController.state.isConnected) {
-        await ConnectionController.disconnect();
+      if (
+        SIWEController.state.status !== 'success' &&
+        !!ConnectionsController.state.activeAddress
+      ) {
+        await disconnect();
       }
     }
 
@@ -71,62 +71,12 @@ export function AppKit() {
       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' });
-    }
-  };
-
   useEffect(() => {
     if (projectId) {
       prefetch();
     }
   }, [projectId, prefetch]);
 
-  useEffect(() => {
-    onNewAddress(caipAddress);
-  }, [caipAddress, onNewAddress]);
-
   return (
     <>
       <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>

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

@@ -12,7 +12,7 @@ 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 { ConnectingSiweView } from '../../views/w3m-connecting-siwe-view';
 import { EmailVerifyOtpView } from '../../views/w3m-email-verify-otp-view';
 import { EmailVerifyDeviceView } from '../../views/w3m-email-verify-device-view';
 import { GetWalletView } from '../../views/w3m-get-wallet-view';

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

@@ -0,0 +1,142 @@
+import { useSnapshot } from 'valtio';
+import {
+  Avatar,
+  Button,
+  DoubleImageLoader,
+  FlexView,
+  IconLink,
+  Text
+} from '@reown/appkit-ui-react-native';
+import {
+  AccountController,
+  AssetUtil,
+  ConnectionController,
+  ConnectionsController,
+  EventsController,
+  ModalController,
+  OptionsController,
+  RouterController,
+  SnackController
+} from '@reown/appkit-core-react-native';
+
+import { useState } from 'react';
+import { SIWEController } from '@reown/appkit-siwe-react-native';
+import styles from './styles';
+import { useAppKit } from '../../AppKitContext';
+
+export function ConnectingSiweView() {
+  const { disconnect } = useAppKit();
+  const { metadata } = useSnapshot(OptionsController.state);
+  const { connectedWalletImageUrl, pressedWallet } = useSnapshot(ConnectionController.state);
+  const { activeAddress } = 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 = AssetUtil.getWalletImage(pressedWallet) || connectedWalletImageUrl;
+
+  const onSign = async () => {
+    setIsSigning(true);
+    EventsController.sendEvent({
+      event: 'CLICK_SIGN_SIWE_MESSAGE',
+      type: 'track',
+      properties: {
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+      }
+    });
+    try {
+      const session = await SIWEController.signIn();
+
+      EventsController.sendEvent({
+        event: 'SIWE_AUTH_SUCCESS',
+        type: 'track',
+        properties: {
+          network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+        }
+      });
+
+      return session;
+    } catch (error) {
+      SnackController.showError('Signature declined');
+
+      SIWEController.setStatus('error');
+
+      return EventsController.sendEvent({
+        event: 'SIWE_AUTH_ERROR',
+        type: 'track',
+        properties: {
+          network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+        }
+      });
+    } finally {
+      setIsSigning(false);
+    }
+  };
+
+  const onCancel = async () => {
+    if (ConnectionsController.state.activeAddress) {
+      setIsDisconnecting(true);
+      await disconnect();
+      ModalController.close();
+      setIsDisconnecting(false);
+    } else {
+      RouterController.push('Connect');
+    }
+    EventsController.sendEvent({
+      event: 'CLICK_CANCEL_SIWE',
+      type: 'track',
+      properties: {
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+      }
+    });
+  };
+
+  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={undefined} 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
+  }
+});