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

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

@@ -11,16 +11,15 @@ 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 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 = () => {

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

@@ -1,61 +1,40 @@
 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
 } from '@reown/appkit-core-react-native';
-import { FlexView, Icon, ListItem, Separator, Spacing, Text } from '@reown/appkit-ui-react-native';
+import { FlexView, Icon, ListItem, Separator, Text } from '@reown/appkit-ui-react-native';
+import { ConstantsUtil } from '@reown/appkit-common-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_EXPLORER_ID ||
+      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
+    if (isExternal) {
+      RouterController.push('ConnectingExternal', { wallet });
     } else {
       RouterController.push('ConnectingWalletConnect', { wallet });
     }
@@ -65,7 +44,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,12 +58,15 @@ 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} />
+          </>
+        )}
 
-        <FlexView padding={['0', 's', '0', 's']}>
+        <FlexView padding={['0', 's', 'xs', 's']}>
           {showConnectWalletsButton && (
             <ListItem contentStyle={styles.connectWalletButton} onPress={onViewAllPress}>
               <Icon name="wallet" size="lg" />
@@ -108,33 +90,12 @@ export function ConnectView() {
           )}
           {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" />}
         </FlexView>
       </FlexView>
     </ScrollView>

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
+  ConnectionController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -21,10 +19,13 @@ import {
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { ConnectingBody, getMessage, type BodyErrorType } from '../../partials/w3m-connecting-body';
 import styles from './styles';
+import { useAppKit } from '../../AppKitContext';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { UiUtil } from '../../utils/UiUtil';
 
 export function ConnectingExternalView() {
-  const { data } = RouterController.state;
-  const connector = data?.connector;
+  const { data } = useSnapshot(RouterController.state);
+  const { connect } = useAppKit();
   const { maxWidth: width } = useCustomDimensions();
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType });
@@ -34,35 +35,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_EXPLORER_ID) {
+          await connect('phantom');
+        } else if (wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID) {
+          await connect('coinbase');
+        } else {
+          // All other wallets are handled by WalletConnect connector
+          return;
+        }
+        UiUtil.storeRecentWallet(wallet);
+        ConnectionController.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 +73,7 @@ export function ConnectingExternalView() {
         properties: { message: (error as Error)?.message ?? 'Unknown' }
       });
     }
-  }, [connector, storeConnectedWallet, data?.wallet]);
+  }, [connect]);
 
   useEffect(() => {
     onConnect();
@@ -97,7 +90,7 @@ export function ConnectingExternalView() {
         <LoadingThumbnail paused={!!errorType}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getConnectorImage(connector)}
+            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
             imageHeaders={ApiController._getApiHeaders()}
           />
           {errorType && (

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