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

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

@@ -1,28 +1,25 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect } from 'react';
 import { useWindowDimensions, StatusBar } from 'react-native';
-import Modal from 'react-native-modal';
-import { Card, ThemeProvider } from '@reown/appkit-ui-react-native';
+import { Card, Modal, ThemeProvider } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   EventsController,
   ModalController,
   OptionsController,
   RouterController,
-  ThemeController,
-  ConnectionsController
+  ThemeController
 } from '@reown/appkit-core-react-native';
-import { SIWEController } from '@reown/appkit-siwe-react-native';
 
 import { AppKitRouter } from '../w3m-router';
 import { Header } from '../../partials/w3m-header';
 import { Snackbar } from '../../partials/w3m-snackbar';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
-import { useAppKit } from '../../AppKitContext';
 
 export function AppKit() {
-  const { disconnect } = useAppKit();
+  const { close } = useInternalAppKit();
   const { open } = useSnapshot(ModalController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
   const { projectId } = useSnapshot(OptionsController.state);
@@ -31,12 +28,12 @@ export function AppKit() {
   const portraitHeight = height - 80;
   const landScapeHeight = height * 0.95 - (StatusBar.currentHeight ?? 0);
 
-  const onBackButtonPress = () => {
+  const handleBackPress = () => {
     if (RouterController.state.history.length > 1) {
       return RouterController.goBack();
     }
 
-    return handleClose();
+    return handleModalClose();
   };
 
   const prefetch = useCallback(async () => {
@@ -44,27 +41,10 @@ export function AppKit() {
     EventsController.sendEvent({ type: 'track', event: 'MODAL_LOADED' });
   }, []);
 
-  const handleClose = async () => {
-    if (OptionsController.state.isSiweEnabled) {
-      const session = await SIWEController.getSession();
-      if (
-        !session &&
-        SIWEController.state.status !== 'success' &&
-        ConnectionsController.state.activeNamespace === 'eip155' &&
-        !!ConnectionsController.state.activeAddress
-      ) {
-        await disconnect();
-      }
-    }
-
-    if (
-      RouterController.state.view === 'OnRampLoading' &&
-      EventsController.state.data.event === 'BUY_SUBMITTED'
-    ) {
-      // Send event only if the onramp url was already created
-      EventsController.sendEvent({ type: 'track', event: 'BUY_CANCEL' });
-    }
+  const handleModalClose = async () => {
+    await close();
   };
+
   useEffect(() => {
     if (projectId) {
       prefetch();
@@ -75,16 +55,9 @@ export function AppKit() {
     <>
       <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
         <Modal
-          style={styles.modal}
-          isVisible={open}
-          useNativeDriver
-          useNativeDriverForBackdrop
-          statusBarTranslucent
-          hideModalContentWhileAnimating
-          propagateSwipe
-          onModalHide={handleClose}
-          onBackdropPress={ModalController.close}
-          onBackButtonPress={onBackButtonPress}
+          visible={open}
+          onRequestClose={handleBackPress}
+          onBackdropPress={handleModalClose}
           testID="w3m-modal"
         >
           <Card

package/src/modal/w3m-modal/styles.ts

@@ -1,10 +1,6 @@
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-  modal: {
-    margin: 0,
-    justifyContent: 'flex-end'
-  },
   card: {
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,

package/src/modal/w3m-network-button/index.tsx

@@ -3,6 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController,
   EventsController,
   ModalController,
@@ -24,7 +25,7 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
 
   const network = isConnected ? activeNetwork : defaultNetwork;
-  const networkImage = network ? networkImages[network.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(network, networkImages);
 
   const onNetworkPress = () => {
     ModalController.open({ view: 'Networks' });

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

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { useLayoutEffect, useMemo } from 'react';
+import { useEffect, useLayoutEffect, useMemo } from 'react';
 import { RouterController } from '@reown/appkit-core-react-native';
 
 import { AccountDefaultView } from '../../views/w3m-account-default-view';
@@ -32,9 +32,20 @@ import { WalletSendSelectTokenView } from '../../views/w3m-wallet-send-select-to
 import { WhatIsANetworkView } from '../../views/w3m-what-is-a-network-view';
 import { WhatIsAWalletView } from '../../views/w3m-what-is-a-wallet-view';
 import { UiUtil } from '../../utils/UiUtil';
+import { useRouteTransition } from '../../hooks/useRouteTransition';
+
+import { Animated } from 'react-native';
 
 export function AppKitRouter() {
   const { view } = useSnapshot(RouterController.state);
+  const { animateTransition, getAnimatedStyle } = useRouteTransition({
+    duration: 300,
+    useNativeDriver: true
+  });
+
+  useEffect(() => {
+    UiUtil.setRouteTransition(animateTransition);
+  }, [animateTransition]);
 
   useLayoutEffect(() => {
     UiUtil.createViewTransition();
@@ -105,5 +116,9 @@ export function AppKitRouter() {
     }
   }, [view]);
 
-  return <ViewComponent />;
+  return (
+    <Animated.View style={[getAnimatedStyle()]}>
+      <ViewComponent />
+    </Animated.View>
+  );
 }

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

@@ -13,6 +13,7 @@ import {
 import { type Transaction, type TransactionImage } from '@reown/appkit-common-react-native';
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   ConstantsUtil,
   EventsController,
@@ -34,7 +35,7 @@ export function AccountActivity({ style }: Props) {
   const { loading, transactions, next } = useSnapshot(TransactionsController.state);
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const isSupported =
     activeNetwork?.caipNetworkId &&
     ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
@@ -77,14 +78,14 @@ export function AccountActivity({ style }: Props) {
 
   useEffect(() => {
     const address = ConnectionsController.state.activeAddress;
-    if (!TransactionsController.state.transactions.length && address) {
+    if (!TransactionsController.state.transactions.length && address && isSupported) {
       TransactionsController.fetchTransactions(address, true);
     }
     // Set initial load to false after first fetch
     const timer = setTimeout(() => setInitialLoad(false), 100);
 
     return () => clearTimeout(timer);
-  }, []);
+  }, [isSupported]);
 
   // Show loading spinner during initial load or when loading with no transactions
   if ((initialLoad || loading) && !transactions.length) {
@@ -185,16 +186,16 @@ export function AccountActivity({ style }: Props) {
               ))}
           </View>
         ))}
-      {(next || loading) && !refreshing && (
+      {(next || loading) && !refreshing ? (
         <FlexView style={styles.footer} alignItems="center" justifyContent="center">
-          {next && !loading && (
+          {next && !loading ? (
             <Link size="md" style={styles.loadMoreButton} onPress={handleLoadMore}>
               Load more
             </Link>
-          )}
-          {loading && <LoadingSpinner color="accent-100" />}
+          ) : null}
+          {loading ? <LoadingSpinner color="accent-100" /> : null}
         </FlexView>
-      )}
+      ) : null}
     </ScrollView>
   );
 }

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

@@ -9,6 +9,7 @@ import {
 import { useSnapshot } from 'valtio';
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   RouterController
 } from '@reown/appkit-core-react-native';
@@ -32,7 +33,7 @@ export function AccountTokens({ style, isLoading }: Props) {
   const [refreshing, setRefreshing] = useState(false);
   const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const getBalance = useCallback(async () => {
     setRefreshing(true);
@@ -62,7 +63,7 @@ export function AccountTokens({ style, isLoading }: Props) {
             </Text>
           </FlexView>
         </ListItem>
-        {isLoading && <LoadingSpinner size="sm" style={styles.loadingSpinner} />}
+        {isLoading ? <LoadingSpinner size="sm" style={styles.loadingSpinner} /> : null}
       </>
     );
   }
@@ -92,7 +93,7 @@ export function AccountTokens({ style, isLoading }: Props) {
           pressable={false}
         />
       ))}
-      {isLoading && <LoadingSpinner size="sm" style={styles.loadingSpinner} />}
+      {isLoading ? <LoadingSpinner size="sm" style={styles.loadingSpinner} /> : null}
     </ScrollView>
   );
 }

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

@@ -90,7 +90,7 @@ export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeature
         justifyContent="space-around"
         padding={['0', 's', '0', 's']}
       >
-        {isOnRampEnabled && (
+        {isOnRampEnabled ? (
           <IconLink
             icon="card"
             size="lg"
@@ -101,8 +101,8 @@ export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeature
             style={[styles.action, isSwapsEnabled ? styles.actionCenter : styles.actionLeft]}
             onPress={onBuyPress}
           />
-        )}
-        {isSwapsEnabled && (
+        ) : null}
+        {isSwapsEnabled ? (
           <IconLink
             icon="recycleHorizontal"
             size="lg"
@@ -113,7 +113,7 @@ export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeature
             style={[styles.action, styles.actionLeft]}
             onPress={onSwapPress}
           />
-        )}
+        ) : null}
         <IconLink
           icon="arrowBottomCircle"
           size="lg"
@@ -124,7 +124,7 @@ export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeature
           style={[styles.action, isSwapsEnabled ? styles.actionCenter : styles.actionLeft]}
           onPress={onReceivePress}
         />
-        {showSend && (
+        {showSend ? (
           <IconLink
             icon="paperplane"
             size="lg"
@@ -135,7 +135,7 @@ export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeature
             style={[styles.action, styles.actionRight]}
             onPress={onSendPress}
           />
-        )}
+        ) : null}
       </FlexView>
       <FlexView style={styles.tab}>
         <Tabs tabs={['Tokens', 'Activity']} onTabChange={onTabChange} />

package/src/partials/w3m-all-wallets-list/index.tsx

@@ -6,9 +6,9 @@ import {
   AssetUtil,
   OptionsController,
   SnackController,
-  type OptionsControllerState,
-  type WcWallet
+  type OptionsControllerState
 } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import {
   CardSelect,
   CardSelectLoader,

package/src/partials/w3m-all-wallets-search/index.tsx

@@ -1,11 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { FlatList, View } from 'react-native';
-import {
-  ApiController,
-  AssetUtil,
-  SnackController,
-  type WcWallet
-} from '@reown/appkit-core-react-native';
+import { ApiController, AssetUtil, SnackController } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import {
   CardSelect,
   CardSelectHeight,

package/src/partials/w3m-connecting-body/index.tsx

@@ -12,11 +12,11 @@ export function ConnectingBody({ title, description }: ConnectingBodyProps) {
   return (
     <FlexView padding={['3xs', '2xl', '0', '2xl']} alignItems="center" style={styles.textContainer}>
       <Text variant="paragraph-500">{title}</Text>
-      {description && (
+      {description ? (
         <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
           {description}
         </Text>
-      )}
+      ) : null}
     </FlexView>
   );
 }

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

@@ -1,4 +1,4 @@
-import type { Platform } from '@reown/appkit-core-react-native';
+import type { Platform } from '@reown/appkit-common-react-native';
 import { FlexView, Tabs, type IconType } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 

package/src/partials/w3m-connecting-mobile/index.tsx

@@ -5,7 +5,7 @@ import {
   RouterController,
   ApiController,
   AssetUtil,
-  ConnectionController,
+  WcController,
   CoreHelperUtil,
   OptionsController,
   EventsController,
@@ -21,7 +21,6 @@ import {
 } from '@reown/appkit-ui-react-native';
 
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { UiUtil } from '../../utils/UiUtil';
 import { StoreLink } from './components/StoreLink';
 import { ConnectingBody, getMessage, type BodyErrorType } from '../w3m-connecting-body';
 import styles from './styles';
@@ -35,7 +34,7 @@ interface Props {
 export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   const { data } = RouterController.state;
   const { maxWidth: width } = useCustomDimensions();
-  const { wcUri, wcError } = useSnapshot(ConnectionController.state);
+  const { wcUri, wcError } = useSnapshot(WcController.state);
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const showCopy =
     OptionsController.isClipboardAvailable() &&
@@ -52,7 +51,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
 
   const onRetryPress = () => {
     setErrorType(undefined);
-    ConnectionController.setWcError(false);
+    WcController.setWcError(false);
     onRetry?.();
   };
 
@@ -68,11 +67,11 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
       if (name && mobile_link && wcUri) {
         const { redirect, href } = CoreHelperUtil.formatNativeUrl(mobile_link, wcUri);
         const wcLinking = { name, href };
-        ConnectionController.setWcLinking(wcLinking);
-        ConnectionController.setPressedWallet(data?.wallet);
+        WcController.setWcLinking(wcLinking);
+        WcController.setPressedWallet(data?.wallet);
         await CoreHelperUtil.openLink(redirect);
-        await ConnectionController.state.wcPromise;
-        UiUtil.storeConnectedWallet(wcLinking, data?.wallet);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking, data?.wallet);
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
@@ -112,7 +111,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
             imageSrc={AssetUtil.getWalletImage(RouterController.state.data?.wallet)}
             imageHeaders={ApiController._getApiHeaders()}
           />
-          {wcError && (
+          {wcError ? (
             <IconBox
               icon={'close'}
               border
@@ -122,10 +121,10 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
               iconColor="error-100"
               style={styles.errorIcon}
             />
-          )}
+          ) : null}
         </LoadingThumbnail>
         <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
-        {showRetry && (
+        {showRetry ? (
           <Button
             size="sm"
             variant="accent"
@@ -136,9 +135,9 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
           >
             Try again
           </Button>
-        )}
+        ) : null}
       </FlexView>
-      {showCopy && (
+      {showCopy ? (
         <Link
           iconLeft="copySmall"
           color="fg-200"
@@ -147,7 +146,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
         >
           Copy link
         </Link>
-      )}
+      ) : null}
       <StoreLink
         visible={!isInstalled && !!storeUrl}
         walletName={data?.wallet?.name}

package/src/partials/w3m-connecting-qrcode/index.tsx

@@ -1,32 +1,32 @@
 import { useEffect } from 'react';
 import { useSnapshot } from 'valtio';
 import {
-  AssetUtil,
-  ConnectionController,
+  WcController,
   EventsController,
   OptionsController,
   SnackController
 } from '@reown/appkit-core-react-native';
-import { FlexView, Link, QrCode, Text, Spacing } from '@reown/appkit-ui-react-native';
 import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { FlexView, Link, QrCode, Text, Spacing, Icon } from '@reown/appkit-ui-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
+import { Linking, Pressable } from 'react-native';
 
 export function ConnectingQrCode() {
-  const { wcUri } = useSnapshot(ConnectionController.state);
+  const { wcUri } = useSnapshot(WcController.state);
   const showCopy = OptionsController.isClipboardAvailable();
   const { maxWidth: windowSize, isPortrait } = useCustomDimensions();
   const qrSize = (windowSize - Spacing.xl * 2) / (isPortrait ? 1 : 1.5);
 
   const onCopyAddress = () => {
-    if (ConnectionController.state.wcUri) {
-      OptionsController.copyToClipboard(ConnectionController.state.wcUri);
+    if (WcController.state.wcUri) {
+      OptionsController.copyToClipboard(WcController.state.wcUri);
       SnackController.showSuccess('Link copied');
     }
   };
 
   const onConnect = async () => {
-    await ConnectionController.state.wcPromise;
+    await WcController.state.wcPromise;
 
     EventsController.sendEvent({
       type: 'track',
@@ -36,10 +36,6 @@ export function ConnectingQrCode() {
         name: 'WalletConnect'
       }
     });
-
-    //TODO: check this
-    const url = AssetUtil.getConnectorImage(ConstantsUtil.WALLET_CONNECT_IMAGE_ID);
-    ConnectionController.setConnectedWalletImageUrl(url);
   };
 
   useEffect(() => {
@@ -56,9 +52,9 @@ export function ConnectingQrCode() {
       padding={['xl', 'xl', '2xl', 'xl']}
     >
       <QrCode size={qrSize} uri={wcUri} testID="qr-code" />
-      <FlexView alignItems="center" margin="m">
+      <FlexView alignItems="center" margin={['m', 'm', '3xl', 'm']}>
         <Text variant="paragraph-500">Scan this QR code with your phone</Text>
-        {showCopy && (
+        {showCopy ? (
           <Link
             iconLeft="copySmall"
             color="fg-200"
@@ -68,8 +64,16 @@ export function ConnectingQrCode() {
           >
             Copy link
           </Link>
-        )}
+        ) : null}
       </FlexView>
+      <Pressable onPress={() => Linking.openURL(ConstantsUtil.REOWN_URL)}>
+        <FlexView alignItems="center" justifyContent="center" flexDirection="row" columnGap="2xs">
+          <Text variant="small-500" color="fg-100">
+            UX by
+          </Text>
+          <Icon name="reown" color="fg-150" width={100} height={30} />
+        </FlexView>
+      </Pressable>
     </FlexView>
   );
 }

package/src/partials/w3m-connecting-web/index.tsx

@@ -5,7 +5,7 @@ import {
   RouterController,
   ApiController,
   AssetUtil,
-  ConnectionController,
+  WcController,
   CoreHelperUtil,
   OptionsController,
   EventsController
@@ -19,7 +19,6 @@ import {
   IconBox
 } from '@reown/appkit-ui-react-native';
 
-import { UiUtil } from '../../utils/UiUtil';
 import { ConnectingBody, getMessage } from '../w3m-connecting-body';
 import styles from './styles';
 
@@ -29,7 +28,7 @@ interface ConnectingWebProps {
 
 export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
   const { data } = RouterController.state;
-  const { wcUri, wcError } = useSnapshot(ConnectionController.state);
+  const { wcUri, wcError } = useSnapshot(WcController.state);
   const showCopy = OptionsController.isClipboardAvailable();
   const bodyMessage = getMessage({
     walletName: data?.wallet?.name,
@@ -41,15 +40,14 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
     try {
       const { name, webapp_link } = data?.wallet ?? {};
       if (name && webapp_link && wcUri) {
-        ConnectionController.setWcError(false);
+        WcController.setWcError(false);
         const { redirect, href } = CoreHelperUtil.formatUniversalUrl(webapp_link, wcUri);
         const wcLinking = { name, href };
-        ConnectionController.setWcLinking(wcLinking);
-        ConnectionController.setPressedWallet(data?.wallet);
+        WcController.setWcLinking(wcLinking);
+        WcController.setPressedWallet(data?.wallet);
         await Linking.openURL(redirect);
-        await ConnectionController.state.wcPromise;
-
-        UiUtil.storeConnectedWallet(wcLinking, data?.wallet);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking, data?.wallet);
 
         EventsController.sendEvent({
           type: 'track',
@@ -73,7 +71,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
             imageSrc={AssetUtil.getWalletImage(data?.wallet)}
             imageHeaders={ApiController._getApiHeaders()}
           />
-          {wcError && (
+          {wcError ? (
             <IconBox
               icon={'close'}
               border
@@ -83,7 +81,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
               iconColor="error-100"
               style={styles.errorIcon}
             />
-          )}
+          ) : null}
         </LoadingThumbnail>
         <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
         <Button
@@ -95,7 +93,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
         >
           Open
         </Button>
-        {showCopy && (
+        {showCopy ? (
           <Link
             iconLeft="copySmall"
             color="fg-200"
@@ -104,7 +102,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
           >
             Copy link
           </Link>
-        )}
+        ) : null}
       </FlexView>
     </ScrollView>
   );

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

@@ -1,7 +1,6 @@
 import { useSnapshot } from 'valtio';
 import {
   RouterController,
-  ModalController,
   EventsController,
   type RouterControllerState
 } from '@reown/appkit-core-react-native';
@@ -9,8 +8,10 @@ import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
 import { StringUtil } from '@reown/appkit-common-react-native';
 
 import styles from './styles';
+import { useInternalAppKit } from '../../AppKitContext';
 
 export function Header() {
+  const { close, back } = useInternalAppKit();
   const { data, view } = useSnapshot(RouterController.state);
   const onHelpPress = () => {
     RouterController.push('WhatIsAWallet');
@@ -61,24 +62,12 @@ export function Header() {
   const showClose = !noCloseViews.includes(view);
   const header = headings(data, view);
 
-  const checkSocial = () => {
-    if (RouterController.state.view === 'ConnectingSocial') {
-      EventsController.sendEvent({
-        type: 'track',
-        event: 'SOCIAL_LOGIN_CANCELED',
-        properties: { provider: RouterController.state.data?.socialProvider! }
-      });
-    }
-  };
-
   const handleGoBack = () => {
-    checkSocial();
-    RouterController.goBack();
+    back();
   };
 
   const handleClose = () => {
-    checkSocial();
-    ModalController.close();
+    close();
   };
 
   const dynamicButtonTemplate = () => {