@reown/appkit-react-native 2.0.0 → 2.0.2

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

@@ -1,153 +1,105 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
-import { Platform } from 'react-native';
 import {
-  ConnectionController,
-  ConnectorController,
+  WcController,
+  CoreHelperUtil,
   EventsController,
-  ModalController,
   RouterController,
   SnackController,
-  WebviewController,
-  type AppKitFrameProvider
+  LogController
 } 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 {
+  FlexView,
+  LoadingThumbnail,
+  IconBox,
+  Logo,
+  Text,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import { ConstantsUtil, StringUtil } from '@reown/appkit-common-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
+import { ScrollView } from 'react-native';
 
 export function ConnectingSocialView() {
-  const { maxWidth: width } = useCustomDimensions();
-  const { processingAuth } = useSnapshot(WebviewController.state);
-  const { selectedSocialProvider } = useSnapshot(ConnectionController.state);
-  const authConnector = ConnectorController.getAuthConnector();
+  const { padding } = useCustomDimensions();
+  const { connect } = useInternalAppKit();
+  const { data } = useSnapshot(RouterController.state);
+  const { wcUri } = useSnapshot(WcController.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 };
+        WcController.setWcLinking(wcLinking);
+        await CoreHelperUtil.openLink(redirect);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(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);
+      LogController.sendError(e, 'ConnectingSocialView.tsx', 'onConnect');
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SOCIAL_LOGIN_ERROR',
+        properties: { provider: RouterController.state.data?.socialProvider! }
+      });
       SnackController.showError('Something went wrong');
       setError(true);
     }
-  }, [provider]);
+  }, [wcUri]);
 
-  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 }
-          });
-
-          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();
+    WcController.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
-      alignItems="center"
-      alignSelf="center"
-      padding={['2xl', 'l', '3xl', 'l']}
-      style={{ width }}
-    >
-      <LoadingThumbnail paused={!!error}>
-        <Logo logo={selectedSocialProvider ?? 'more'} height={72} width={72} />
-        {error && (
-          <IconBox
-            icon={'close'}
-            border
-            background
-            backgroundColor="icon-box-bg-error-100"
-            size="sm"
-            iconColor="error-100"
-            style={styles.errorIcon}
-          />
-        )}
-      </LoadingThumbnail>
-      <Text style={styles.continueText} variant="paragraph-500">
-        {processingAuth
-          ? 'Loading user data'
-          : `Continue with ${StringUtil.capitalize(selectedSocialProvider)}`}
-      </Text>
-      <Text variant="small-400" color="fg-200">
-        {processingAuth
-          ? 'Please wait a moment while we load your data'
-          : 'Connect in the provider window'}
-      </Text>
-    </FlexView>
+    <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', 'xl', 'l']}>
+        <LoadingThumbnail paused={!!error}>
+          <Logo logo={data?.socialProvider ?? 'more'} height={72} width={72} />
+          {error ? (
+            <IconBox
+              icon={'close'}
+              border
+              background
+              backgroundColor="icon-box-bg-error-100"
+              size="sm"
+              iconColor="error-100"
+              style={styles.errorIcon}
+            />
+          ) : null}
+        </LoadingThumbnail>
+        <Text style={styles.continueText} variant="paragraph-500">
+          Continue with {StringUtil.capitalize(data?.socialProvider ?? 'Login')}
+        </Text>
+        <Text variant="small-400" color="fg-200">
+          Continue in your browser
+        </Text>
+      </FlexView>
+    </ScrollView>
   );
 }

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

@@ -1,31 +1,28 @@
 import { useSnapshot } from 'valtio';
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { ErrorUtil, type Platform } from '@reown/appkit-common-react-native';
 import {
-  AccountController,
-  ConnectionController,
+  WcController,
   ConstantsUtil,
   CoreHelperUtil,
-  ModalController,
   RouterController,
   SnackController,
-  type Platform,
   OptionsController,
   ApiController,
-  EventsController
+  EventsController,
+  LogController
 } from '@reown/appkit-core-react-native';
-import { SIWEController } from '@reown/appkit-siwe-react-native';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import { ConnectingQrCode } from '../../partials/w3m-connecting-qrcode';
 import { ConnectingMobile } from '../../partials/w3m-connecting-mobile';
 import { ConnectingWeb } from '../../partials/w3m-connecting-web';
 import { ConnectingHeader } from '../../partials/w3m-connecting-header';
-import { UiUtil } from '../../utils/UiUtil';
 
 export function ConnectingView() {
-  const { connect } = useAppKit();
+  const { connect } = useInternalAppKit();
   const { installed } = useSnapshot(ApiController.state);
   const { data } = RouterController.state;
-  const [lastRetry, setLastRetry] = useState(Date.now());
+  const lastRetryRef = useRef<number>(Date.now());
   const isQr = !data?.wallet;
   const isInstalled = !!installed?.find(wallet => wallet.id === data?.wallet?.id);
 
@@ -33,9 +30,8 @@ export function ConnectingView() {
   const [platforms, setPlatforms] = useState<Platform[]>([]);
 
   const onRetry = () => {
-    if (CoreHelperUtil.isAllowedRetry(lastRetry)) {
-      setLastRetry(Date.now());
-      ConnectionController.clearUri();
+    if (CoreHelperUtil.isAllowedRetry(lastRetryRef.current)) {
+      lastRetryRef.current = Date.now();
       initializeConnection(true);
     } else {
       SnackController.showError('Please wait a second before retrying');
@@ -44,51 +40,43 @@ export function ConnectingView() {
 
   const initializeConnection = async (retry = false) => {
     try {
-      const { wcPairingExpiry } = ConnectionController.state;
-      // const { data: routeData } = RouterController.state;
-      if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
-        ConnectionController.setWcError(false);
-        // ConnectionController.connectWalletConnect(routeData?.wallet?.link_mode ?? undefined);
-
-        let connectPromise: Promise<void>;
-        // TODO: check phantom wallet id from cloud
-        if (data?.wallet?.id === 'phantom-wallet') {
-          connectPromise = connect('phantom');
-        } else {
-          //TODO: check linkmode
-          connectPromise = connect('walletconnect');
-        }
-        ConnectionController.setWcPromise(connectPromise);
+      const { wcPairingExpiry } = WcController.state;
+      const { data: routeData } = RouterController.state;
+      const isPairingExpired = CoreHelperUtil.isPairingExpired(wcPairingExpiry);
+      if (retry || isPairingExpired) {
+        WcController.setWcError(false);
+        WcController.clearUri();
+
+        const connectPromise = connect({
+          wallet: routeData?.wallet
+        });
+        WcController.setWcPromise(connectPromise);
         await connectPromise;
-        // 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();
-        }
       }
     } catch (error) {
-      ConnectionController.setWcError(true);
-      ConnectionController.clearUri();
-      SnackController.showError('Declined');
-      if (isQr && CoreHelperUtil.isAllowedRetry(lastRetry)) {
-        setLastRetry(Date.now());
-        initializeConnection(true);
+      LogController.sendError(error, 'ConnectingView.tsx', 'initializeConnection');
+      WcController.setWcError(true);
+
+      const isUserRejected = ErrorUtil.isUserRejectedRequestError(error);
+      const isProposalExpired = ErrorUtil.isProposalExpiredError(error);
+      if (!isProposalExpired) {
+        SnackController.showError(
+          isUserRejected ? 'User rejected the request' : 'Something went wrong'
+        );
       }
+
       EventsController.sendEvent({
         type: 'track',
-        event: 'CONNECT_ERROR',
+        event: isUserRejected ? 'USER_REJECTED' : 'CONNECT_ERROR',
         properties: {
           message: (error as Error)?.message ?? 'Unknown'
         }
       });
+
+      if (isQr && CoreHelperUtil.isAllowedRetry(lastRetryRef.current)) {
+        lastRetryRef.current = Date.now();
+        initializeConnection(true);
+      }
     }
   };
 
@@ -100,38 +88,10 @@ export function ConnectingView() {
   };
 
   const onSelectPlatform = (tab: Platform) => {
-    UiUtil.createViewTransition();
     setPlatform(tab);
   };
 
-  const headerTemplate = () => {
-    if (isQr) return null;
-
-    if (platforms.length > 1) {
-      return <ConnectingHeader platforms={platforms} onSelectPlatform={onSelectPlatform} />;
-    }
-
-    return null;
-  };
-
-  const platformTemplate = () => {
-    if (isQr) {
-      return <ConnectingQrCode />;
-    }
-
-    switch (platform) {
-      case 'mobile':
-        return (
-          <ConnectingMobile onRetry={onRetry} onCopyUri={onCopyUri} isInstalled={isInstalled} />
-        );
-      case 'web':
-        return <ConnectingWeb onCopyUri={onCopyUri} />;
-      default:
-        return undefined;
-    }
-  };
-
-  useEffect(() => {
+  useLayoutEffect(() => {
     const _platforms: Platform[] = [];
     if (data?.wallet?.mobile_link) {
       _platforms.push('mobile');
@@ -145,7 +105,7 @@ export function ConnectingView() {
   }, [data, isInstalled]);
 
   useEffect(() => {
-    initializeConnection();
+    initializeConnection(true);
     let _interval: NodeJS.Timeout;
 
     // Check if the pairing expired every 10 seconds. If expired, it will create a new uri.
@@ -159,8 +119,16 @@ export function ConnectingView() {
 
   return (
     <>
-      {headerTemplate()}
-      {platformTemplate()}
+      {platforms.length > 1 ? (
+        <ConnectingHeader platforms={platforms} onSelectPlatform={onSelectPlatform} />
+      ) : null}
+      {isQr ? (
+        <ConnectingQrCode />
+      ) : platform === 'mobile' ? (
+        <ConnectingMobile onRetry={onRetry} onCopyUri={onCopyUri} isInstalled={isInstalled} />
+      ) : platform === 'web' ? (
+        <ConnectingWeb onCopyUri={onCopyUri} />
+      ) : null}
     </>
   );
 }

package/src/views/w3m-get-wallet-view/index.tsx

@@ -1,10 +1,12 @@
 import { Linking, Platform, ScrollView } from 'react-native';
-import { FlexView, ListWallet } from '@reown/appkit-ui-react-native';
-import { ApiController, AssetUtil, type WcWallet } from '@reown/appkit-core-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { FlexView, ListWallet, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { ApiController, AssetController, AssetUtil } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import styles from './styles';
+import { useSnapshot } from 'valtio';
 
 export function GetWalletView() {
+  const { walletImages } = useSnapshot(AssetController.state);
   const { padding } = useCustomDimensions();
   const imageHeaders = ApiController._getApiHeaders();
 
@@ -21,7 +23,7 @@ export function GetWalletView() {
       <ListWallet
         key={wallet.id}
         name={wallet.name}
-        imageSrc={AssetUtil.getWalletImage(wallet)}
+        imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
         imageHeaders={imageHeaders}
         onPress={() => onWalletPress(wallet)}
         style={styles.item}
@@ -36,7 +38,7 @@ export function GetWalletView() {
       fadingEdgeLength={20}
       testID="get-a-wallet-view"
     >
-      <FlexView padding={['s', 's', '3xl', 's']}>
+      <FlexView padding="s">
         {listTemplate()}
         <ListWallet
           name="Explore all"

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

@@ -1,16 +1,11 @@
-/* eslint-disable valtio/state-snapshot-rule */
 import { useSnapshot } from 'valtio';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
   ApiController,
+  AssetController,
   AssetUtil,
-  ConnectionController,
-  ConnectionsController,
-  ConnectorController,
-  EventsController,
-  NetworkController,
-  RouterController,
-  RouterUtil
+  LogController,
+  RouterController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -18,123 +13,94 @@ import {
   IconBox,
   LoadingHexagon,
   NetworkImage,
-  Text
+  Text,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
+import { ScrollView } from 'react-native';
 
 export function NetworkSwitchView() {
+  const { switchNetwork, back } = useInternalAppKit();
+  const { padding } = useCustomDimensions();
   const { data } = useSnapshot(RouterController.state);
-  const { recentWallets } = useSnapshot(ConnectionController.state);
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const isAuthConnected = ConnectorController.state.connectedConnector === 'AUTH';
-  const [error, setError] = useState<boolean>(false);
+  const { networkImages } = useSnapshot(AssetController.state);
   const [showRetry, setShowRetry] = useState<boolean>(false);
-  const network = data?.network!;
-  const wallet = recentWallets?.[0];
+  const [isError, setIsError] = useState<boolean>(false);
+  const networkImage = AssetUtil.getNetworkImage(data?.network, networkImages);
 
-  const onSwitchNetwork = async () => {
+  const onSwitchNetwork = useCallback(async () => {
     try {
-      setError(false);
-      //TODO: change to appkit switchNetwork
-      await NetworkController.switchActiveNetwork(network);
-      EventsController.sendEvent({
-        type: 'track',
-        event: 'SWITCH_NETWORK',
-        properties: {
-          network: network.id
-        }
-      });
-    } catch {
-      setError(true);
+      if (!RouterController.state.data?.network) return;
+      setIsError(false);
+      await switchNetwork(RouterController.state.data.network);
+      back();
+    } catch (error) {
+      LogController.sendError(error, 'NetworkSwitchView.tsx', 'onSwitchNetwork');
+      setIsError(true);
       setShowRetry(true);
     }
-  };
+  }, [switchNetwork, back]);
 
   useEffect(() => {
     onSwitchNetwork();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    // Go back if network is already switched
-    if (activeNetwork?.id === network?.id) {
-      RouterUtil.navigateAfterNetworkSwitch();
-    }
-  }, [activeNetwork?.id, network?.id]);
-
-  const retryTemplate = () => {
-    if (!showRetry) return null;
-
-    return (
-      <Button
-        size="sm"
-        variant="accent"
-        iconLeft="refresh"
-        style={styles.retryButton}
-        iconStyle={styles.retryIcon}
-        onPress={onSwitchNetwork}
-      >
-        Try again
-      </Button>
-    );
-  };
-
-  const textTemplate = () => {
-    const walletName = wallet?.name ?? 'wallet';
-    if (error) {
-      return (
-        <>
-          <Text variant="paragraph-500" style={styles.text}>
-            Switch declined
-          </Text>
-          <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
-            Switch can be declined if chain is not supported by a wallet or previous request is
-            still active
-          </Text>
-        </>
-      );
-    }
-
-    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>
-        <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
-          Accept switch request in your wallet
-        </Text>
-      </>
-    );
-  };
-
   return (
-    <FlexView alignItems="center" padding={['2xl', 's', '4xl', 's']}>
-      <LoadingHexagon paused={error}>
-        <NetworkImage
-          imageSrc={AssetUtil.getNetworkImage(network?.id)}
-          imageHeaders={ApiController._getApiHeaders()}
-          size="lg"
-        />
-        {error && (
-          <IconBox
-            icon="close"
-            border
-            background
-            backgroundColor="icon-box-bg-error-100"
-            size="sm"
-            iconColor="error-100"
-            style={styles.errorIcon}
+    <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+      <FlexView alignItems="center" padding={['xl', 's', 's', 's']}>
+        <LoadingHexagon paused={isError}>
+          <NetworkImage
+            imageSrc={networkImage}
+            imageHeaders={ApiController._getApiHeaders()}
+            size="lg"
           />
+          {isError ? (
+            <IconBox
+              icon="close"
+              border
+              background
+              backgroundColor="icon-box-bg-error-100"
+              size="sm"
+              iconColor="error-100"
+              style={styles.errorIcon}
+            />
+          ) : null}
+        </LoadingHexagon>
+        {isError ? (
+          <>
+            <Text variant="paragraph-500" style={styles.text}>
+              Switch declined
+            </Text>
+            <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
+              Switch can be declined if chain is not supported by a wallet or previous request is
+              still active
+            </Text>
+          </>
+        ) : (
+          <>
+            <Text variant="paragraph-500" style={styles.text}>
+              Approve in your wallet
+            </Text>
+            <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
+              Accept the switch request in your wallet
+            </Text>
+          </>
         )}
-      </LoadingHexagon>
-      {textTemplate()}
-      {retryTemplate()}
-    </FlexView>
+        {showRetry ? (
+          <Button
+            size="sm"
+            variant="accent"
+            iconLeft="refresh"
+            style={styles.retryButton}
+            iconStyle={styles.retryIcon}
+            onPress={onSwitchNetwork}
+          >
+            Try again
+          </Button>
+        ) : null}
+      </FlexView>
+    </ScrollView>
   );
 }