@reown/appkit-react-native 0.0.0-feat-multi-social-20250701154123 → 0.0.0-feat-multi-social-20250703185818

package/src/connectors/WalletConnectConnector.ts

@@ -10,7 +10,8 @@ import {
   type CaipNetworkId,
   type ConnectOptions,
   type ConnectorInitOptions,
-  type Metadata
+  type Metadata,
+  type ConnectionProperties
 } from '@reown/appkit-common-react-native';
 import { getDidAddress, getDidChainId, SIWEController } from '@reown/appkit-siwe-react-native';
 
@@ -49,6 +50,15 @@ export class WalletConnectConnector extends WalletConnector {
       this.namespaces = provider.session.namespaces as Namespaces;
     }
 
+    if (provider.session?.sessionProperties) {
+      this.properties = {
+        ...provider.session.sessionProperties,
+        smartAccounts: provider.session.sessionProperties['smartAccounts']
+          ? JSON.parse(provider.session.sessionProperties['smartAccounts'])
+          : []
+      };
+    }
+
     if (provider.session?.peer?.metadata) {
       const metadata = provider.session?.peer.metadata;
       if (metadata) {
@@ -81,10 +91,6 @@ export class WalletConnectConnector extends WalletConnector {
     return this.provider as IUniversalProvider;
   }
 
-  override disconnect(): Promise<void> {
-    return this.getProvider().disconnect();
-  }
-
   override async connect(opts: ConnectOptions) {
     const { siweConfig, namespaces, defaultChain, universalLink } = opts;
     function onUri(uri: string) {
@@ -96,7 +102,7 @@ export class WalletConnectConnector extends WalletConnector {
     // @ts-ignore
     provider.on('display_uri', onUri);
 
-    let session;
+    let session: IUniversalProvider['session'];
 
     // SIWE
     const isEVMOnly = Object.keys(namespaces ?? {}).length === 1 && namespaces?.['eip155'];
@@ -177,6 +183,15 @@ export class WalletConnectConnector extends WalletConnector {
       (this.provider as IUniversalProvider).setDefaultChain(defaultChain);
     }
 
+    if (session?.sessionProperties) {
+      this.properties = {
+        ...session.sessionProperties,
+        smartAccounts: session.sessionProperties['smartAccounts']
+          ? JSON.parse(session.sessionProperties['smartAccounts'])
+          : []
+      };
+    }
+
     this.namespaces = session?.namespaces as Namespaces;
 
     provider.off('display_uri', onUri);
@@ -196,6 +211,10 @@ export class WalletConnectConnector extends WalletConnector {
     return this.namespaces ?? {};
   }
 
+  override getProperties(): ConnectionProperties | undefined {
+    return this.properties;
+  }
+
   override switchNetwork(network: AppKitNetwork): Promise<void> {
     if (!network) throw new Error('No network provided');
 

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

@@ -11,8 +11,6 @@ import { ConnectingView } from '../../views/w3m-connecting-view';
 import { ConnectingExternalView } from '../../views/w3m-connecting-external-view';
 import { ConnectingSocialView } from '../../views/w3m-connecting-social-view';
 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';
 import { NetworksView } from '../../views/w3m-networks-view';
 import { NetworkSwitchView } from '../../views/w3m-network-switch-view';
@@ -30,7 +28,6 @@ import { UpdateEmailWalletView } from '../../views/w3m-update-email-wallet-view'
 import { UpdateEmailPrimaryOtpView } from '../../views/w3m-update-email-primary-otp-view';
 import { UpdateEmailSecondaryOtpView } from '../../views/w3m-update-email-secondary-otp-view';
 import { UpgradeEmailWalletView } from '../../views/w3m-upgrade-email-wallet-view';
-import { UpgradeToSmartAccountView } from '../../views/w3m-upgrade-to-smart-account-view';
 import { WalletCompatibleNetworks } from '../../views/w3m-wallet-compatible-networks-view';
 import { WalletReceiveView } from '../../views/w3m-wallet-receive-view';
 import { WalletSendView } from '../../views/w3m-wallet-send-view';
@@ -67,10 +64,6 @@ export function AppKitRouter() {
         return ConnectingSocialView;
       case 'ConnectingWalletConnect':
         return ConnectingView;
-      case 'EmailVerifyDevice':
-        return EmailVerifyDeviceView;
-      case 'EmailVerifyOtp':
-        return EmailVerifyOtpView;
       case 'GetWallet':
         return GetWalletView;
       case 'Networks':
@@ -105,8 +98,6 @@ export function AppKitRouter() {
         return UpdateEmailWalletView;
       case 'UpgradeEmailWallet':
         return UpgradeEmailWalletView;
-      case 'UpgradeToSmartAccount':
-        return UpgradeToSmartAccountView;
       case 'WalletCompatibleNetworks':
         return WalletCompatibleNetworks;
       case 'WalletReceive':

package/src/partials/w3m-account-activity/index.tsx

@@ -12,7 +12,6 @@ import {
 } from '@reown/appkit-ui-react-native';
 import { type Transaction, type TransactionImage } from '@reown/appkit-common-react-native';
 import {
-  AccountController,
   AssetUtil,
   ConnectionsController,
   ConstantsUtil,
@@ -40,7 +39,7 @@ export function AccountActivity({ style }: Props) {
     ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
 
   const handleLoadMore = () => {
-    const address = ConnectionsController.state.activeAddress?.split(':')[2];
+    const address = ConnectionsController.state.activeAddress;
     TransactionsController.fetchTransactions(address);
     EventsController.sendEvent({
       type: 'track',
@@ -49,14 +48,14 @@ export function AccountActivity({ style }: Props) {
         address,
         projectId: OptionsController.state.projectId,
         cursor: TransactionsController.state.next,
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+        isSmartAccount: ConnectionsController.state.accountType === 'smartAccount'
       }
     });
   };
 
   const onRefresh = useCallback(async () => {
     setRefreshing(true);
-    const address = ConnectionsController.state.activeAddress?.split(':')[2];
+    const address = ConnectionsController.state.activeAddress;
     await TransactionsController.fetchTransactions(address, true);
     setRefreshing(false);
   }, []);
@@ -67,7 +66,7 @@ export function AccountActivity({ style }: Props) {
 
   useEffect(() => {
     if (!TransactionsController.state.transactions.length) {
-      const address = ConnectionsController.state.activeAddress?.split(':')[2];
+      const address = ConnectionsController.state.activeAddress;
       TransactionsController.fetchTransactions(address, true);
     }
     // Set initial load to false after first fetch

package/src/partials/w3m-account-tokens/index.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
-  AccountController,
   AssetUtil,
   ConnectionsController,
   RouterController
@@ -29,13 +28,15 @@ interface Props {
 export function AccountTokens({ style }: Props) {
   const Theme = useTheme();
   const [refreshing, setRefreshing] = useState(false);
-  const { tokenBalance } = useSnapshot(AccountController.state);
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
   const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
 
+  // Show all tokens that come from the API
+  const filteredBalances = balances?.filter(balance => balance.quantity);
+
   const onRefresh = useCallback(async () => {
     setRefreshing(true);
-    AccountController.fetchTokenBalance();
+    await ConnectionsController.fetchBalance();
     setRefreshing(false);
   }, []);
 
@@ -43,7 +44,7 @@ export function AccountTokens({ style }: Props) {
     RouterController.push('WalletReceive');
   };
 
-  if (!tokenBalance?.length) {
+  if (!filteredBalances?.length) {
     return (
       <ListItem
         icon="arrowBottomCircle"
@@ -76,14 +77,14 @@ export function AccountTokens({ style }: Props) {
         />
       }
     >
-      {tokenBalance.map(token => (
+      {filteredBalances.map(token => (
         <ListToken
-          key={token.name}
-          name={token.name}
+          key={token.symbol}
+          name={token.name || 'Unknown'}
           imageSrc={token.iconUrl}
           networkSrc={networkImage}
           value={token.value}
-          amount={token.quantity.numeric}
+          amount={token.quantity?.numeric}
           currency={token.symbol}
           pressable={false}
         />

package/src/partials/w3m-account-wallet-features/index.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { useSnapshot } from 'valtio';
 import { Balance, FlexView, IconLink, Tabs } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ConnectionsController,
   ConstantsUtil,
   CoreHelperUtil,
@@ -23,10 +22,11 @@ export interface AccountWalletFeaturesProps {
 
 export function AccountWalletFeatures() {
   const [activeTab, setActiveTab] = useState(0);
-  const { tokenBalance } = useSnapshot(AccountController.state);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const balance = CoreHelperUtil.calculateAndFormatBalance(tokenBalance as BalanceType[]);
+  const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
+  const balance = CoreHelperUtil.calculateAndFormatBalance(balances as BalanceType[]);
+  const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
+  const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
   const isSwapsEnabled =
     features?.swaps &&
     activeNetwork?.caipNetworkId &&
@@ -43,9 +43,7 @@ export function AccountWalletFeatures() {
     EventsController.sendEvent({
       type: 'track',
       event: 'CLICK_TRANSACTIONS',
-      properties: {
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
-      }
+      properties: { isSmartAccount }
     });
   };
 
@@ -54,10 +52,7 @@ export function AccountWalletFeatures() {
     EventsController.sendEvent({
       type: 'track',
       event: 'OPEN_SWAP',
-      properties: {
-        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
-      }
+      properties: { network, isSmartAccount }
     });
     RouterController.push('Swap');
   };
@@ -66,10 +61,7 @@ export function AccountWalletFeatures() {
     EventsController.sendEvent({
       type: 'track',
       event: 'OPEN_SEND',
-      properties: {
-        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
-      }
+      properties: { network, isSmartAccount }
     });
     RouterController.push('WalletSend');
   };

package/src/partials/w3m-header/index.tsx

@@ -35,8 +35,6 @@ export function Header() {
       ConnectingSiwe: undefined,
       ConnectingSocial: socialName ?? 'Connecting Social',
       ConnectingWalletConnect: walletName ?? 'WalletConnect',
-      EmailVerifyDevice: ' ',
-      EmailVerifyOtp: 'Confirm email',
       GetWallet: 'Get a wallet',
       Networks: 'Select network',
       OnRamp: undefined,
@@ -54,7 +52,6 @@ export function Header() {
       UpdateEmailSecondaryOtp: 'Confirm new email',
       UpdateEmailWallet: 'Edit email',
       UpgradeEmailWallet: 'Upgrade wallet',
-      UpgradeToSmartAccount: undefined,
       WalletCompatibleNetworks: 'Compatible networks',
       WalletReceive: 'Receive',
       WalletSend: 'Send',

package/src/partials/w3m-send-input-token/index.tsx

@@ -27,7 +27,7 @@ export function SendInputToken({
   const [inputValue, setInputValue] = useState<string | undefined>(sendTokenAmount?.toString());
   const sendValue = getSendValue(token, sendTokenAmount);
   const maxAmount = getMaxAmount(token);
-  const maxError = token && sendTokenAmount && sendTokenAmount > Number(token.quantity.numeric);
+  const maxError = token && sendTokenAmount && sendTokenAmount > Number(token?.quantity?.numeric);
 
   const onInputChange = (value: string) => {
     const formattedValue = value.replace(/,/g, '.');
@@ -39,11 +39,11 @@ export function SendInputToken({
   };
 
   const onMaxPress = () => {
-    if (token && gasPrice) {
+    if (token?.quantity && gasPrice) {
       const isNetworkToken =
-        token.address === undefined ||
+        token.contractAddress === undefined ||
         Object.values(ConstantsUtil.NATIVE_TOKEN_ADDRESS).some(
-          nativeAddress => token?.address?.split(':')[2] === nativeAddress
+          nativeAddress => token?.contractAddress?.split(':')[2] === nativeAddress
         );
 
       const numericGas = NumberUtil.bigNumber(gasPrice).shiftedBy(-token.quantity.decimals);

package/src/partials/w3m-send-input-token/utils.ts

@@ -2,7 +2,7 @@ import { type Balance, NumberUtil } from '@reown/appkit-common-react-native';
 import { UiUtil } from '@reown/appkit-ui-react-native';
 
 export function getSendValue(token?: Balance, sendTokenAmount?: number) {
-  if (token && sendTokenAmount) {
+  if (token?.price && sendTokenAmount) {
     const price = token.price;
     const totalValue = price * sendTokenAmount;
 
@@ -13,7 +13,7 @@ export function getSendValue(token?: Balance, sendTokenAmount?: number) {
 }
 
 export function getMaxAmount(token?: Balance) {
-  if (token) {
+  if (token?.quantity) {
     return NumberUtil.roundNumber(Number(token.quantity.numeric), 6, 5);
   }
 

package/src/views/w3m-account-default-view/components/auth-buttons.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { UpgradeWalletButton } from './upgrade-wallet-button';
-import { ListItem, ListSocial, Spacing, Text } from '@reown/appkit-ui-react-native';
+import { ListSocial, Spacing, Text } from '@reown/appkit-ui-react-native';
 import type { SocialProvider } from '@reown/appkit-common-react-native';
 
 export interface AuthButtonsProps {
@@ -21,30 +21,19 @@ export function AuthButtons({
   return (
     <>
       <UpgradeWalletButton onPress={onUpgradePress} style={styles.upgradeButton} />
-      {socialProvider ? (
+      {socialProvider && (
         <ListSocial
           logo={socialProvider}
           logoHeight={32}
           logoWidth={32}
           style={[styles.socialContainer, style]}
+          onPress={onPress}
+          chevron={socialProvider === 'email'}
         >
           <Text color="fg-100" numberOfLines={1} ellipsizeMode="tail" style={styles.socialText}>
             {text}
           </Text>
         </ListSocial>
-      ) : (
-        <ListItem
-          icon="email"
-          onPress={onPress}
-          chevron
-          testID="button-email"
-          iconColor="fg-100"
-          style={style}
-        >
-          <Text color="fg-100" numberOfLines={1} ellipsizeMode="tail">
-            {text}
-          </Text>
-        </ListItem>
       )}
     </>
   );

package/src/views/w3m-account-default-view/index.tsx

@@ -5,16 +5,12 @@ import {
   AccountController,
   ApiController,
   AssetUtil,
-  ConnectionController,
-  ConnectorController,
   CoreHelperUtil,
   EventsController,
   ModalController,
-  NetworkController,
   OptionsController,
   RouterController,
   SnackController,
-  type AppKitFrameProvider,
   ConstantsUtil,
   SwapController,
   OnRampController,
@@ -38,27 +34,27 @@ import { AuthButtons } from './components/auth-buttons';
 import styles from './styles';
 
 export function AccountDefaultView() {
-  const { profileName, profileImage, preferredAccountType } = useSnapshot(AccountController.state);
+  const { profileName, profileImage } = useSnapshot(AccountController.state);
   const { loading } = useSnapshot(ModalController.state);
   const {
     activeAddress: address,
     activeBalance: balance,
     activeNetwork,
-    activeNamespace
+    activeNamespace,
+    connection,
+    accountType
   } = useSnapshot(ConnectionsController.state);
   const account = address?.split(':')[2];
   const [disconnecting, setDisconnecting] = useState(false);
-  const { connectedConnector } = useSnapshot(ConnectorController.state);
-  const { connectedSocialProvider } = useSnapshot(ConnectionController.state);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { history } = useSnapshot(RouterController.state);
   const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
   const showCopy = OptionsController.isClipboardAvailable();
-  const isAuth = connectedConnector === 'AUTH';
+  const isAuth = connection?.properties?.email || connection?.properties?.username;
   const showBalance = balance && !isAuth;
   const showExplorer = Object.keys(activeNetwork?.blockExplorers ?? {}).length > 0 && !isAuth;
   const showBack = history.length > 1;
-  const showSwitchAccountType = isAuth && NetworkController.checkIfSmartAccountEnabled();
+  const showSwitchAccountType = isAuth;
   const showActivity =
     !isAuth &&
     activeNamespace &&
@@ -80,17 +76,20 @@ export function AccountDefaultView() {
 
   const onSwitchAccountType = async () => {
     try {
-      if (isAuth) {
-        ModalController.setLoading(true);
-        const accountType =
-          AccountController.state.preferredAccountType === 'eoa' ? 'smartAccount' : 'eoa';
-        const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-        await provider?.setPreferredAccount(accountType);
+      if (isAuth && ConnectionsController.state.activeNamespace) {
+        const newType = ConnectionsController.state.accountType === 'eoa' ? 'smartAccount' : 'eoa';
+        ConnectionsController.setAccountType(
+          ConnectionsController.state.activeNamespace,
+          ConnectionsController.state.accountType === 'eoa' ? 'smartAccount' : 'eoa'
+        );
+        ConnectionsController.fetchBalance();
+
         EventsController.sendEvent({
           type: 'track',
           event: 'SET_PREFERRED_ACCOUNT_TYPE',
           properties: {
-            accountType,
+            // eslint-disable-next-line valtio/state-snapshot-rule
+            accountType: newType,
             network: ConnectionsController.state.activeNetwork?.caipNetworkId || ''
           }
         });
@@ -101,20 +100,6 @@ export function AccountDefaultView() {
     }
   };
 
-  const getUserEmail = () => {
-    const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-    if (!provider) return '';
-
-    return provider.getEmail();
-  };
-
-  const getUsername = () => {
-    const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-    if (!provider) return '';
-
-    return provider.getUsername();
-  };
-
   const onExplorerPress = () => {
     if (showExplorer && ConnectionsController.state.activeNetwork?.blockExplorers?.default?.url) {
       Linking.openURL(ConnectionsController.state.activeNetwork?.blockExplorers?.default?.url);
@@ -174,8 +159,10 @@ export function AccountDefaultView() {
   };
 
   const onEmailPress = () => {
-    if (ConnectionController.state.connectedSocialProvider) return;
-    RouterController.push('UpdateEmailWallet', { email: getUserEmail() });
+    const email = ConnectionsController.state.connection?.properties?.email;
+    const provider = ConnectionsController.state.connection?.properties?.provider;
+    if (provider !== 'email' || !email) return;
+    RouterController.push('UpdateEmailWallet', { email });
   };
 
   return (
@@ -239,11 +226,11 @@ export function AccountDefaultView() {
             {isAuth && (
               <AuthButtons
                 onUpgradePress={onUpgradePress}
-                socialProvider={connectedSocialProvider}
+                socialProvider={connection?.properties?.provider}
                 onPress={onEmailPress}
                 style={styles.actionButton}
                 text={UiUtil.getTruncateString({
-                  string: getUsername() || getUserEmail() || '',
+                  string: connection?.properties?.username || connection?.properties?.email || '',
                   charsStart: 30,
                   charsEnd: 0,
                   truncate: 'end'
@@ -316,7 +303,7 @@ export function AccountDefaultView() {
                 loading={loading}
               >
                 <Text color="fg-100">{`Switch to your ${
-                  preferredAccountType === 'eoa' ? 'smart account' : 'EOA'
+                  accountType === 'eoa' ? 'smart account' : 'EOA'
                 }`}</Text>
               </ListItem>
             )}

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

@@ -7,16 +7,14 @@ import {
   Icon,
   IconLink,
   NetworkButton,
-  useTheme,
-  Promo
+  useTheme
 } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ApiController,
   AssetUtil,
   ConnectionsController,
+  CoreHelperUtil,
   ModalController,
-  NetworkController,
   RouterController,
   SendController
 } from '@reown/appkit-core-react-native';
@@ -28,12 +26,8 @@ import styles from './styles';
 export function AccountView() {
   const Theme = useTheme();
   const { padding } = useCustomDimensions();
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const { address, profileName, profileImage, preferredAccountType } = useSnapshot(
-    AccountController.state
-  );
-  const showActivate =
-    preferredAccountType === 'eoa' && NetworkController.checkIfSmartAccountEnabled();
+  const { activeNetwork, activeAddress } = useSnapshot(ConnectionsController.state);
+  const address = CoreHelperUtil.getPlainAddress(activeAddress);
 
   const onProfilePress = () => {
     RouterController.push('AccountDefault');
@@ -43,20 +37,16 @@ export function AccountView() {
     RouterController.push('Networks');
   };
 
-  const onActivatePress = () => {
-    RouterController.push('UpgradeToSmartAccount');
-  };
-
   useEffect(() => {
-    AccountController.fetchTokenBalance();
+    ConnectionsController.fetchBalance();
     SendController.resetSend();
   }, []);
 
   useEffect(() => {
-    AccountController.fetchTokenBalance();
+    ConnectionsController.fetchBalance();
 
     const balanceInterval = setInterval(() => {
-      AccountController.fetchTokenBalance();
+      ConnectionsController.fetchBalance();
     }, 10000);
 
     return () => {
@@ -85,17 +75,10 @@ export function AccountView() {
       </NetworkButton>
       <IconLink icon="close" style={styles.closeIcon} onPress={ModalController.close} />
       <FlexView padding={['3xl', '0', '0', '0']} style={[{ backgroundColor: Theme['bg-100'] }]}>
-        {showActivate && (
-          <Promo
-            style={styles.promoPill}
-            text="Switch to your smart account"
-            onPress={onActivatePress}
-          />
-        )}
         <AccountPill
           address={address}
-          profileName={profileName}
-          profileImage={profileImage}
+          // profileName={profileName}
+          // profileImage={profileImage}
           onPress={onProfilePress}
           style={styles.accountPill}
         />

package/src/views/w3m-account-view/styles.ts

@@ -23,10 +23,5 @@ export default StyleSheet.create({
     alignSelf: 'center',
     marginBottom: Spacing.s,
     marginHorizontal: Spacing.s
-  },
-  promoPill: {
-    marginTop: Spacing.xs,
-    marginBottom: Spacing['2xl'],
-    alignSelf: 'center'
   }
 });

package/src/views/w3m-connect-view/components/social-login-list.tsx

@@ -18,11 +18,19 @@ export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
   bottomSocials = showMoreButton ? bottomSocials.slice(0, MAX_OPTIONS - 2) : bottomSocials;
 
   const onItemPress = (provider: SocialProvider) => {
-    EventsController.sendEvent({
-      type: 'track',
-      event: 'SOCIAL_LOGIN_STARTED',
-      properties: { provider }
-    });
+    if (provider === 'email') {
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'EMAIL_LOGIN_SELECTED'
+      });
+    } else {
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SOCIAL_LOGIN_STARTED',
+        properties: { provider }
+      });
+    }
+
     RouterController.push('ConnectingSocial', { socialProvider: provider });
   };