@reown/appkit-react-native 2.0.0-alpha.0 → 2.0.0-alpha.2

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

@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import {
+  Avatar,
+  Button,
+  DoubleImageLoader,
+  FlexView,
+  IconLink,
+  Text
+} from '@reown/appkit-ui-react-native';
+import {
+  AssetUtil,
+  ConnectionController,
+  ConnectionsController,
+  EventsController,
+  ModalController,
+  OptionsController,
+  RouterController,
+  SnackController
+} from '@reown/appkit-core-react-native';
+import { SIWEController } from '@reown/appkit-siwe-react-native';
+
+import { useAppKit } from '../../AppKitContext';
+import styles from './styles';
+
+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 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();
+      ModalController.close();
+      setIsDisconnecting(false);
+    } else {
+      RouterController.push('Connect');
+    }
+    EventsController.sendEvent({
+      event: 'CLICK_CANCEL_SIWE',
+      type: 'track',
+      properties: { network, isSmartAccount }
+    });
+  };
+
+  //TODO: Add profile image in Avatar
+  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
+  }
+});

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

@@ -1,121 +1,73 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
-import { Platform } from 'react-native';
 import {
   ConnectionController,
-  ConnectorController,
+  CoreHelperUtil,
   EventsController,
-  ModalController,
   RouterController,
-  SnackController,
-  WebviewController,
-  type AppKitFrameProvider
+  SnackController
 } from '@reown/appkit-core-react-native';
 import { FlexView, LoadingThumbnail, IconBox, Logo, Text } from '@reown/appkit-ui-react-native';
-import { StringUtil } from '@reown/appkit-common-react-native';
+import { ConstantsUtil, StringUtil } from '@reown/appkit-common-react-native';
 
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { useAppKit } from '../../AppKitContext';
+import { UiUtil } from '../../utils/UiUtil';
 import styles from './styles';
 
 export function ConnectingSocialView() {
   const { maxWidth: width } = useCustomDimensions();
-  const { processingAuth } = useSnapshot(WebviewController.state);
-  const { selectedSocialProvider } = useSnapshot(ConnectionController.state);
-  const authConnector = ConnectorController.getAuthConnector();
+  const { connect } = useAppKit();
+  const { data } = useSnapshot(RouterController.state);
+  const { wcUri } = useSnapshot(ConnectionController.state);
   const [error, setError] = useState(false);
-  const provider = authConnector?.provider as AppKitFrameProvider;
 
   const onConnect = useCallback(async () => {
     try {
-      if (
-        !WebviewController.state.connecting &&
-        provider &&
-        ConnectionController.state.selectedSocialProvider
-      ) {
-        const { uri } = await provider.getSocialRedirectUri({
-          provider: ConnectionController.state.selectedSocialProvider
+      if (wcUri) {
+        const { redirect, href } = CoreHelperUtil.formatUniversalUrl(
+          ConstantsUtil.WEB_WALLET_URL,
+          wcUri,
+          RouterController.state.data?.socialProvider
+        );
+        const wcLinking = { name: 'Reown Wallet', href };
+        ConnectionController.setWcLinking(wcLinking);
+        await CoreHelperUtil.openLink(redirect);
+        await ConnectionController.state.wcPromise;
+        //todo: rename this. its not just UI
+        UiUtil.storeConnectedWallet(wcLinking);
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'SOCIAL_LOGIN_SUCCESS',
+          properties: { provider: RouterController.state.data?.socialProvider! }
         });
-        WebviewController.setWebviewUrl(uri);
-
-        const isNativeApple =
-          ConnectionController.state.selectedSocialProvider === 'apple' && Platform.OS === 'ios';
-
-        WebviewController.setWebviewVisible(!isNativeApple);
-        WebviewController.setConnecting(true);
-        WebviewController.setConnectingProvider(ConnectionController.state.selectedSocialProvider);
       }
     } catch (e) {
-      WebviewController.setWebviewVisible(false);
-      WebviewController.setWebviewUrl(undefined);
-      WebviewController.setConnecting(false);
-      WebviewController.setConnectingProvider(undefined);
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SOCIAL_LOGIN_ERROR',
+        properties: { provider: RouterController.state.data?.socialProvider! }
+      });
       SnackController.showError('Something went wrong');
       setError(true);
     }
-  }, [provider]);
-
-  const socialMessageHandler = useCallback(
-    async (url: string) => {
-      try {
-        if (
-          url.includes('/sdk/oauth') &&
-          ConnectionController.state.selectedSocialProvider &&
-          authConnector &&
-          !WebviewController.state.processingAuth
-        ) {
-          WebviewController.setProcessingAuth(true);
-          WebviewController.setWebviewVisible(false);
-          const parsedUrl = new URL(url);
-
-          EventsController.sendEvent({
-            type: 'track',
-            event: 'SOCIAL_LOGIN_REQUEST_USER_DATA',
-            properties: { provider: ConnectionController.state.selectedSocialProvider }
-          });
-
-          await provider?.connectSocial(parsedUrl.search);
-          await ConnectionController.connectExternal(authConnector);
-          ConnectionController.setConnectedSocialProvider(
-            ConnectionController.state.selectedSocialProvider
-          );
-          WebviewController.setConnecting(false);
-
-          EventsController.sendEvent({
-            type: 'track',
-            event: 'SOCIAL_LOGIN_SUCCESS',
-            properties: { provider: ConnectionController.state.selectedSocialProvider }
-          });
+  }, [wcUri]);
 
-          ModalController.close();
-          WebviewController.reset();
-        }
-      } catch (e) {
-        EventsController.sendEvent({
-          type: 'track',
-          event: 'SOCIAL_LOGIN_ERROR',
-          properties: { provider: ConnectionController.state.selectedSocialProvider! }
-        });
-        WebviewController.reset();
-        RouterController.goBack();
-        SnackController.showError('Something went wrong');
-      }
-    },
-    [authConnector, provider]
-  );
+  const initializeConnection = useCallback(async () => {
+    const connectPromise = connect('walletconnect');
+    ConnectionController.setWcPromise(connectPromise);
+  }, [connect]);
 
   useEffect(() => {
-    onConnect();
-  }, [onConnect]);
+    initializeConnection();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
-    if (!provider) return;
-
-    const unsubscribe = provider?.getEventEmitter().addListener('social', socialMessageHandler);
-
-    return () => {
-      unsubscribe.removeListener('social', socialMessageHandler);
-    };
-  }, [socialMessageHandler, provider]);
+    if (wcUri) {
+      onConnect();
+    }
+  }, [wcUri, onConnect]);
 
   return (
     <FlexView
@@ -125,7 +77,7 @@ export function ConnectingSocialView() {
       style={{ width }}
     >
       <LoadingThumbnail paused={!!error}>
-        <Logo logo={selectedSocialProvider ?? 'more'} height={72} width={72} />
+        <Logo logo={data?.socialProvider ?? 'more'} height={72} width={72} />
         {error && (
           <IconBox
             icon={'close'}
@@ -139,14 +91,10 @@ export function ConnectingSocialView() {
         )}
       </LoadingThumbnail>
       <Text style={styles.continueText} variant="paragraph-500">
-        {processingAuth
-          ? 'Loading user data'
-          : `Continue with ${StringUtil.capitalize(selectedSocialProvider)}`}
+        Continue with {StringUtil.capitalize(data?.socialProvider ?? 'Login')}
       </Text>
       <Text variant="small-400" color="fg-200">
-        {processingAuth
-          ? 'Please wait a moment while we load your data'
-          : 'Connect in the provider window'}
+        Continue in your browser
       </Text>
     </FlexView>
   );

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

@@ -1,11 +1,9 @@
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
 import {
-  AccountController,
   ConnectionController,
   ConstantsUtil,
   CoreHelperUtil,
-  ModalController,
   RouterController,
   SnackController,
   type Platform,
@@ -13,7 +11,6 @@ import {
   ApiController,
   EventsController
 } from '@reown/appkit-core-react-native';
-import { SIWEController } from '@reown/appkit-siwe-react-native';
 import { useAppKit } from '../../AppKitContext';
 import { ConnectingQrCode } from '../../partials/w3m-connecting-qrcode';
 import { ConnectingMobile } from '../../partials/w3m-connecting-mobile';
@@ -45,28 +42,14 @@ export function ConnectingView() {
   const initializeConnection = async (retry = false) => {
     try {
       const { wcPairingExpiry } = ConnectionController.state;
-      // const { data: routeData } = RouterController.state;
+      const { data: routeData } = RouterController.state;
       if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
         ConnectionController.setWcError(false);
-        // ConnectionController.connectWalletConnect(routeData?.wallet?.link_mode ?? undefined);
-
-        //TODO: check linkmode
-        const wcPromise = connect('walletconnect');
-        ConnectionController.setWcPromise(wcPromise);
-        await wcPromise;
-        // await ConnectionController.state.wcPromise;
-        // ConnectorController.setConnectedConnector('WALLET_CONNECT');
-        AccountController.setIsConnected(true);
-
-        if (OptionsController.state.isSiweEnabled) {
-          if (SIWEController.state.status === 'success') {
-            ModalController.close();
-          } else {
-            RouterController.push('ConnectingSiwe');
-          }
-        } else {
-          ModalController.close();
-        }
+
+        const connectPromise = connect('walletconnect', {
+          universalLink: routeData?.wallet?.link_mode ?? undefined
+        });
+        ConnectionController.setWcPromise(connectPromise);
       }
     } catch (error) {
       ConnectionController.setWcError(true);

package/src/views/w3m-network-switch-view/index.tsx

@@ -1,14 +1,10 @@
-/* eslint-disable valtio/state-snapshot-rule */
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
 import {
   ApiController,
-  AssetUtil,
+  AssetController,
   ConnectionController,
   ConnectionsController,
-  ConnectorController,
-  EventsController,
-  NetworkController,
   RouterController,
   RouterUtil
 } from '@reown/appkit-core-react-native';
@@ -20,30 +16,29 @@ import {
   NetworkImage,
   Text
 } from '@reown/appkit-ui-react-native';
+import { useAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function NetworkSwitchView() {
+  const { switchNetwork } = useAppKit();
   const { data } = useSnapshot(RouterController.state);
   const { recentWallets } = useSnapshot(ConnectionController.state);
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const isAuthConnected = ConnectorController.state.connectedConnector === 'AUTH';
+  const { networkImages } = useSnapshot(AssetController.state);
   const [error, setError] = useState<boolean>(false);
   const [showRetry, setShowRetry] = useState<boolean>(false);
-  const network = data?.network!;
+  const network = data?.network;
   const wallet = recentWallets?.[0];
+  const networkImage = network ? networkImages[network.id] : undefined;
 
   const onSwitchNetwork = async () => {
     try {
-      setError(false);
-      //TODO: change to appkit switchNetwork
-      await NetworkController.switchActiveNetwork(network);
-      EventsController.sendEvent({
-        type: 'track',
-        event: 'SWITCH_NETWORK',
-        properties: {
-          network: network.id
-        }
-      });
+      if (network) {
+        setError(false);
+        const _network = ConnectionsController.state.networks.find(n => n.id === network.id);
+        if (!_network) return;
+        await switchNetwork(_network);
+      }
     } catch {
       setError(true);
       setShowRetry(true);
@@ -57,9 +52,12 @@ export function NetworkSwitchView() {
 
   useEffect(() => {
     // Go back if network is already switched
+    // eslint-disable-next-line valtio/state-snapshot-rule
     if (activeNetwork?.id === network?.id) {
       RouterUtil.navigateAfterNetworkSwitch();
     }
+
+    // eslint-disable-next-line valtio/state-snapshot-rule
   }, [activeNetwork?.id, network?.id]);
 
   const retryTemplate = () => {
@@ -95,14 +93,6 @@ export function NetworkSwitchView() {
       );
     }
 
-    if (isAuthConnected) {
-      return (
-        <Text variant="paragraph-500" style={styles.text}>
-          Switching to {network.name} network
-        </Text>
-      );
-    }
-
     return (
       <>
         <Text variant="paragraph-500" style={styles.text}>{`Approve in ${walletName}`}</Text>
@@ -117,7 +107,7 @@ export function NetworkSwitchView() {
     <FlexView alignItems="center" padding={['2xl', 's', '4xl', 's']}>
       <LoadingHexagon paused={error}>
         <NetworkImage
-          imageSrc={AssetUtil.getNetworkImage(network?.id)}
+          imageSrc={networkImage}
           imageHeaders={ApiController._getApiHeaders()}
           size="lg"
         />

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

@@ -10,19 +10,22 @@ import {
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
-  NetworkController,
   RouterController,
   EventsController,
   ConnectionsController,
-  AssetUtil
+  ModalController,
+  OptionsController,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import type { AppKitNetwork } from '@reown/appkit-common-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 import { useAppKit } from '../../AppKitContext';
+import { useSnapshot } from 'valtio';
 
 export function NetworksView() {
-  const { caipNetwork } = NetworkController.state;
+  const { networks, isConnected } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const { maxWidth: width, padding } = useCustomDimensions();
   const numColumns = 4;
@@ -33,22 +36,31 @@ export function NetworksView() {
   );
   const { switchNetwork } = useAppKit();
 
+  const networkList = isConnected ? ConnectionsController.getConnectedNetworks() : networks;
+
   const onHelpPress = () => {
     RouterController.push('WhatIsANetwork');
     EventsController.sendEvent({ type: 'track', event: 'CLICK_NETWORK_HELP' });
   };
 
   const networksTemplate = () => {
-    //TODO: should show requested networks disabled
-    // const networks = CoreHelperUtil.sortNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
-    const networks = ConnectionsController.getConnectedNetworks();
-
     const onNetworkPress = async (network: AppKitNetwork) => {
       await switchNetwork(network);
-      RouterController.goBack();
+
+      if (RouterController.state.history.length > 1) {
+        RouterController.goBack();
+      } else {
+        ModalController.close();
+      }
     };
 
-    return networks.map(network => {
+    return networkList.map(network => {
+      const isSelected = ConnectionsController.state.isConnected
+        ? ConnectionsController.state.activeCaipNetworkId === network.caipNetworkId
+        : OptionsController.state.defaultNetwork?.caipNetworkId === network.caipNetworkId;
+      // eslint-disable-next-line valtio/state-snapshot-rule
+      const networkImage = network ? networkImages[network.id] : undefined;
+
       return (
         <View
           key={network.id}
@@ -64,10 +76,9 @@ export function NetworksView() {
             testID={`w3m-network-switch-${network.name ?? network.id}`}
             name={network.name ?? 'Unknown'}
             type="network"
-            imageSrc={AssetUtil.getNetworkImage(network.id)}
+            imageSrc={networkImage}
             imageHeaders={imageHeaders}
-            // disabled={!supportsAllNetworks && !approvedCaipNetworkIds?.includes(network.caipNetworkId)}
-            selected={caipNetwork?.id === network.id}
+            selected={isSelected}
             onPress={() => onNetworkPress(network)}
           />
         </View>

package/src/views/w3m-onramp-checkout-view/index.tsx

@@ -1,5 +1,5 @@
 import {
-  AssetUtil,
+  AssetController,
   ConnectionsController,
   OnRampController,
   RouterController,
@@ -23,12 +23,13 @@ import { NumberUtil, StringUtil } from '@reown/appkit-common-react-native';
 export function OnRampCheckoutView() {
   const Theme = useTheme();
   const { themeMode } = useSnapshot(ThemeController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const { selectedQuote, selectedPaymentMethod, purchaseCurrency } = useSnapshot(
     OnRampController.state
   );
 
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
 
   const value = NumberUtil.roundNumber(selectedQuote?.destinationAmount ?? 0, 6, 5);
   const symbol = selectedQuote?.destinationCurrencyCode;

package/src/views/w3m-onramp-transaction-view/index.tsx

@@ -1,8 +1,7 @@
 import { useSnapshot } from 'valtio';
 import { useEffect } from 'react';
 import {
-  AccountController,
-  ConnectorController,
+  ConnectionsController,
   OnRampController,
   RouterController
 } from '@reown/appkit-core-react-native';
@@ -15,7 +14,7 @@ export function OnRampTransactionView() {
   const { data } = useSnapshot(RouterController.state);
 
   const onClose = () => {
-    const isAuth = ConnectorController.state.connectedConnector === 'AUTH';
+    const isAuth = !!ConnectionsController.state.connection?.properties?.provider;
     RouterController.replace(isAuth ? 'Account' : 'AccountDefault');
   };
 
@@ -25,7 +24,7 @@ export function OnRampTransactionView() {
   useEffect(() => {
     return () => {
       OnRampController.resetState();
-      AccountController.fetchTokenBalance();
+      ConnectionsController.fetchBalance();
     };
   }, []);
 

package/src/views/w3m-onramp-view/components/Currency.tsx

@@ -9,10 +9,9 @@ import {
   Text,
   useTheme,
   Icon,
-  Image,
   BorderRadius
 } from '@reown/appkit-ui-react-native';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Image } from 'react-native';
 
 export const ITEM_HEIGHT = 60;
 
@@ -42,8 +41,8 @@ export function Currency({ onPress, item, selected, title, subtitle, testID }: P
       <FlexView flexDirection="row" alignItems="center" justifyContent="space-between" padding="xs">
         <FlexView flexDirection="row" alignItems="center" justifyContent="flex-start">
           <Image
-            source={item.symbolImageUrl}
-            style={[styles.logo, { backgroundColor: Theme['fg-100'] }]}
+            source={{ uri: item.symbolImageUrl }}
+            style={[styles.logo, { backgroundColor: Theme['inverse-100'] }]}
           />
           <FlexView>
             <Text variant="paragraph-500" color="fg-100" numberOfLines={1} ellipsizeMode="tail">