@reown/appkit-react-native 0.0.0-feat-multichain-phantom-20250606201606 → 0.0.0-feat-multi-siwe-20250619154334

package/src/connectors/WalletConnectConnector.ts

@@ -12,6 +12,7 @@ import {
   type ConnectorInitOptions,
   type Metadata
 } from '@reown/appkit-common-react-native';
+import { getDidAddress, getDidChainId, SIWEController } from '@reown/appkit-siwe-react-native';
 
 interface WalletConnectConnectorConfig {
   projectId: string;
@@ -85,6 +86,7 @@ export class WalletConnectConnector extends WalletConnector {
   }
 
   override async connect(opts: ConnectOptions) {
+    const { siweConfig, namespaces, defaultChain, universalLink } = opts;
     function onUri(uri: string) {
       ConnectionController.setWcUri(uri);
     }
@@ -94,13 +96,84 @@ export class WalletConnectConnector extends WalletConnector {
     // @ts-ignore
     provider.on('display_uri', onUri);
 
-    const session = await (this.provider as IUniversalProvider).connect({
-      namespaces: {},
-      optionalNamespaces: opts.namespaces
-    });
+    let session;
+
+    // SIWE
+    const params = await siweConfig?.getMessageParams?.();
+    if (siweConfig?.options?.enabled && params && Object.keys(params).length > 0) {
+      // @ts-ignore
+      const result = await provider.authenticate(
+        {
+          ...params,
+          nonce: await siweConfig.getNonce(),
+          methods: namespaces?.['eip155']?.methods,
+          chains: params.chains.map(chain => `eip155:${chain}`)
+        },
+        universalLink
+      );
+
+      console.log('result SIWE', result);
+
+      // Auths is an array of signed CACAO objects https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-74.md
+      const signedCacao = result?.auths?.[0];
+      if (signedCacao) {
+        const { p, s } = signedCacao;
+        const chainId = getDidChainId(p.iss);
+        const address = getDidAddress(p.iss);
+
+        try {
+          // Kicks off verifyMessage and populates external states
+          const message = provider?.client?.formatAuthMessage({
+            request: p,
+            iss: p.iss
+          })!;
+
+          await SIWEController.verifyMessage({
+            message,
+            signature: s.s,
+            cacao: signedCacao
+          });
+
+          if (address && chainId) {
+            const session = {
+              address,
+              chainId: parseInt(chainId, 10)
+            };
+
+            SIWEController.setSession(session);
+            SIWEController.onSignIn?.(session);
+          }
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('Error verifying message', error);
+          // eslint-disable-next-line no-console
+          await provider.disconnect().catch(console.error);
+          // eslint-disable-next-line no-console
+          await SIWEController.signOut().catch(console.error);
+          throw error;
+        }
+      }
+      session = result?.session;
+    } else {
+      session = await (this.provider as IUniversalProvider).connect({
+        namespaces: {},
+        optionalNamespaces: namespaces
+      });
+    }
+
+    const metadata = session?.peer?.metadata;
+    if (metadata) {
+      this.wallet = {
+        ...metadata,
+        name: metadata?.name,
+        icon: metadata?.icons?.[0]
+      };
+    } else {
+      this.wallet = undefined;
+    }
 
-    if (opts.defaultChain) {
-      (this.provider as IUniversalProvider).setDefaultChain(opts.defaultChain);
+    if (defaultChain) {
+      (this.provider as IUniversalProvider).setDefaultChain(defaultChain);
     }
 
     this.namespaces = session?.namespaces as Namespaces;
@@ -133,6 +206,7 @@ export class WalletConnectConnector extends WalletConnector {
   }
 
   override getWalletInfo(): WalletInfo | undefined {
+    console.log('getWalletInfo', this.wallet);
     return this.wallet;
   }
 

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
+  }
+});