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

package/src/utils/UiUtil.ts

@@ -1,38 +1,22 @@
-import {
-  AssetUtil,
-  ConnectionController,
-  StorageUtil,
-  type WcWallet
-} from '@reown/appkit-core-react-native';
-import type { WalletDeepLink } from '@reown/appkit-common-react-native';
+import { RouterController } from '@reown/appkit-core-react-native';
+
+// Global animation instance to coordinate transitions
+let currentRouteTransition: ((direction: 'forward' | 'backward' | 'none') => Promise<void>) | null =
+  null;
 
 export const UiUtil = {
   TOTAL_VISIBLE_WALLETS: 4,
 
-  createViewTransition: () => {
-    //TODO: replace this with reanimated
-    // LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'));
-  },
-
-  animateChange: () => {
-    //TODO: replace this with reanimated
-    // LayoutAnimation.configureNext(LayoutAnimation.create(150, type, creationProp));
-  },
-
-  storeConnectedWallet: async (wcLinking: WalletDeepLink, pressedWallet?: WcWallet) => {
-    StorageUtil.setWalletConnectDeepLink(wcLinking);
-
-    if (pressedWallet) {
-      UiUtil.storeRecentWallet(pressedWallet);
-      const url = AssetUtil.getWalletImage(pressedWallet);
-      ConnectionController.setConnectedWalletImageUrl(url);
-    }
+  setRouteTransition: (
+    transitionFn: (direction: 'forward' | 'backward' | 'none') => Promise<void>
+  ) => {
+    currentRouteTransition = transitionFn;
   },
 
-  storeRecentWallet: async (wallet: WcWallet) => {
-    const recentWallets = await StorageUtil.addRecentWallet(wallet);
-    if (recentWallets) {
-      ConnectionController.setRecentWallets(recentWallets);
+  createViewTransition: async () => {
+    if (currentRouteTransition) {
+      const { navigationDirection } = RouterController.state;
+      await currentRouteTransition(navigationDirection);
     }
   }
 };

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

@@ -21,7 +21,7 @@ export function AuthButtons({
   return (
     <>
       <UpgradeWalletButton onPress={onUpgradePress} style={styles.upgradeButton} />
-      {socialProvider && (
+      {socialProvider ? (
         <ListSocial
           logo={socialProvider}
           logoHeight={32}
@@ -34,7 +34,7 @@ export function AuthButtons({
             {text}
           </Text>
         </ListSocial>
-      )}
+      ) : null}
     </>
   );
 }

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

@@ -13,7 +13,8 @@ import {
   SwapController,
   OnRampController,
   ConnectionsController,
-  AssetController
+  AssetController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 // import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
 import {
@@ -27,14 +28,14 @@ import {
   ListItem
 } from '@reown/appkit-ui-react-native';
 
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { AuthButtons } from './components/auth-buttons';
 import styles from './styles';
 
 export function AccountDefaultView() {
-  const { switchAccountType, disconnect } = useAppKit();
+  const { switchAccountType, disconnect } = useInternalAppKit();
   const { loading } = useSnapshot(ModalController.state);
   const {
     activeAddress: address,
@@ -50,7 +51,7 @@ export function AccountDefaultView() {
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { history } = useSnapshot(RouterController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const showCopy = OptionsController.isClipboardAvailable();
   const isAuth = !!connection?.properties?.provider;
   const showBalance = balance && !isAuth;
@@ -182,9 +183,9 @@ export function AccountDefaultView() {
 
   return (
     <>
-      {showBack && (
+      {showBack ? (
         <IconLink icon="chevronLeft" style={styles.backIcon} onPress={RouterController.goBack} />
-      )}
+      ) : null}
       <IconLink
         icon="close"
         style={styles.closeIcon}
@@ -210,7 +211,7 @@ export function AccountDefaultView() {
                     truncate: 'middle'
                   })}
             </Text>
-            {showCopy && (
+            {showCopy ? (
               <IconLink
                 icon="copy"
                 size="md"
@@ -218,14 +219,14 @@ export function AccountDefaultView() {
                 onPress={onCopyAddress}
                 style={styles.copyButton}
               />
-            )}
+            ) : null}
           </FlexView>
-          {showBalance && (
+          {showBalance ? (
             <Text variant="paragraph-400" color="fg-200">
               {CoreHelperUtil.formatBalance(balance.amount, balance.symbol, 6)}
             </Text>
-          )}
-          {showExplorer && (
+          ) : null}
+          {showExplorer ? (
             <Button
               size="sm"
               variant="shade"
@@ -236,9 +237,9 @@ export function AccountDefaultView() {
             >
               Block Explorer
             </Button>
-          )}
+          ) : null}
           <FlexView margin={['s', '0', '0', '0']}>
-            {isAuth && (
+            {isAuth ? (
               <AuthButtons
                 onUpgradePress={onUpgradePress}
                 socialProvider={connection?.properties?.provider}
@@ -251,7 +252,7 @@ export function AccountDefaultView() {
                   truncate: 'end'
                 })}
               />
-            )}
+            ) : null}
             <ListItem
               chevron
               icon="networkPlaceholder"
@@ -267,7 +268,7 @@ export function AccountDefaultView() {
                 {activeNetwork?.name}
               </Text>
             </ListItem>
-            {showBuy && (
+            {showBuy ? (
               <ListItem
                 chevron
                 icon="card"
@@ -279,8 +280,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Buy crypto</Text>
               </ListItem>
-            )}
-            {showSend && (
+            ) : null}
+            {showSend ? (
               <ListItem
                 chevron
                 icon="paperplane"
@@ -292,8 +293,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Send</Text>
               </ListItem>
-            )}
-            {showSwaps && (
+            ) : null}
+            {showSwaps ? (
               <ListItem
                 chevron
                 icon="recycleHorizontal"
@@ -305,8 +306,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Swap</Text>
               </ListItem>
-            )}
-            {showActivity && (
+            ) : null}
+            {showActivity ? (
               <ListItem
                 chevron
                 icon="clock"
@@ -318,8 +319,8 @@ export function AccountDefaultView() {
               >
                 <Text color="fg-100">Activity</Text>
               </ListItem>
-            )}
-            {showSwitchAccountType && (
+            ) : null}
+            {showSwitchAccountType ? (
               <ListItem
                 chevron
                 icon="swapHorizontal"
@@ -334,7 +335,7 @@ export function AccountDefaultView() {
                   accountType === 'eoa' ? 'smart account' : 'EOA'
                 }`}</Text>
               </ListItem>
-            )}
+            ) : null}
             <ListItem
               icon="disconnect"
               onPress={onDisconnect}

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

@@ -12,6 +12,7 @@ import {
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController,
   CoreHelperUtil,
   EventsController,
@@ -31,7 +32,7 @@ export function AccountView() {
   const { activeNetwork, activeAddress, identity } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const address = CoreHelperUtil.getPlainAddress(activeAddress);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const onProfilePress = () => {
     RouterController.push('AccountDefault');

package/src/views/w3m-all-wallets-view/index.tsx

@@ -1,12 +1,7 @@
 import { useState } from 'react';
-import {
-  ConnectionController,
-  EventsController,
-  RouterController,
-  type WcWallet
-} from '@reown/appkit-core-react-native';
+import { WcController, EventsController, RouterController } from '@reown/appkit-core-react-native';
+import { type WcWallet, ConstantsUtil } from '@reown/appkit-common-react-native';
 import { FlexView, IconLink, SearchBar, Spacing, useTheme } from '@reown/appkit-ui-react-native';
-import { ConstantsUtil } from '@reown/appkit-common-react-native';
 
 import styles from './styles';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
@@ -26,8 +21,8 @@ export function AllWalletsView() {
 
   const onWalletPress = (wallet: WcWallet) => {
     const isExternal =
-      wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID ||
-      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
+      wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id ||
+      wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id;
     if (isExternal) {
       RouterController.push('ConnectingExternal', { wallet });
     } else {
@@ -42,8 +37,8 @@ export function AllWalletsView() {
   };
 
   const onQrCodePress = () => {
-    ConnectionController.removePressedWallet();
-    ConnectionController.removeWcLinking();
+    WcController.removePressedWallet();
+    WcController.removeWcLinking();
     RouterController.push('ConnectingWalletConnect');
 
     EventsController.sendEvent({

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

@@ -3,10 +3,10 @@ import { useSnapshot } from 'valtio';
 import {
   ApiController,
   AssetUtil,
-  ConnectionController,
-  type ConnectionControllerState,
-  type WcWallet
+  WcController,
+  type WcControllerState
 } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import { ListItemLoader, ListWallet } from '@reown/appkit-ui-react-native';
 import { UiUtil } from '../../../utils/UiUtil';
 import { filterOutRecentWallets } from '../utils';
@@ -18,7 +18,7 @@ interface Props {
 
 export function AllWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed, featured, recommended, prefetchLoading } = useSnapshot(ApiController.state);
-  const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
+  const { recentWallets } = useSnapshot(WcController.state) as WcControllerState;
   const imageHeaders = ApiController._getApiHeaders();
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 

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

@@ -2,13 +2,13 @@ import { useSnapshot } from 'valtio';
 import type { StyleProp, ViewStyle } from 'react-native';
 import {
   OptionsController,
-  type CustomWallet,
   type OptionsControllerState,
   ApiController,
-  ConnectionController,
-  type ConnectionControllerState,
+  WcController,
+  type WcControllerState,
   AssetUtil
 } from '@reown/appkit-core-react-native';
+import { type CustomWallet } from '@reown/appkit-common-react-native';
 import { ListWallet } from '@reown/appkit-ui-react-native';
 import { filterOutRecentWallets } from '../utils';
 
@@ -20,7 +20,7 @@ interface Props {
 export function CustomWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed } = useSnapshot(ApiController.state);
   const imageHeaders = ApiController._getApiHeaders();
-  const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
+  const { recentWallets } = useSnapshot(WcController.state) as WcControllerState;
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 

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

@@ -1,10 +1,6 @@
 import { useSnapshot } from 'valtio';
-import {
-  ApiController,
-  AssetUtil,
-  type WcWallet,
-  ConnectionController
-} from '@reown/appkit-core-react-native';
+import { ApiController, AssetUtil, WcController } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import { ListWallet } from '@reown/appkit-ui-react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
@@ -15,7 +11,7 @@ interface Props {
 
 export function RecentWalletList({ itemStyle, onWalletPress }: Props) {
   const installed = ApiController.state.installed;
-  const { recentWallets } = useSnapshot(ConnectionController.state);
+  const { recentWallets } = useSnapshot(WcController.state);
   const imageHeaders = ApiController._getApiHeaders();
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 

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

@@ -40,13 +40,13 @@ export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
 
   return (
     <FlexView padding={['xs', 's', '0', 's']}>
-      {topSocial && (
+      {topSocial ? (
         <ListSocial logo={topSocial} disabled={disabled} onPress={() => onItemPress(topSocial)}>
           <Text style={styles.topDescription} color={disabled ? 'fg-300' : 'fg-100'}>
             {`Continue with ${StringUtil.capitalize(topSocial)}`}
           </Text>
         </ListSocial>
-      )}
+      ) : null}
       <FlexView flexDirection="row" justifyContent="space-between" margin={['xs', '0', '0', '0']}>
         {bottomSocials?.map((social: SocialProvider, index) => (
           <LogoSelect
@@ -61,14 +61,14 @@ export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
             ]}
           />
         ))}
-        {showMoreButton && (
+        {showMoreButton ? (
           <LogoSelect
             logo="more"
             disabled={disabled}
             style={[styles.socialItem, styles.socialItemLast]}
             onPress={onMorePress}
           />
-        )}
+        ) : null}
       </FlexView>
     </FlexView>
   );

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

@@ -5,11 +5,10 @@ import {
   EventUtil,
   EventsController,
   OptionsController,
-  RouterController,
-  type WcWallet
+  RouterController
 } from '@reown/appkit-core-react-native';
+import { type WcWallet, ConstantsUtil } from '@reown/appkit-common-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 { Placeholder } from '../../partials/w3m-placeholder';
 import { CustomWalletList } from './components/custom-wallet-list';
@@ -31,8 +30,8 @@ export function ConnectView() {
 
   const onWalletPress = (wallet: WcWallet, isInstalled?: boolean) => {
     const isExternal =
-      wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID ||
-      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
+      wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id ||
+      wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id;
     if (isExternal) {
       RouterController.push('ConnectingExternal', { wallet });
     } else {
@@ -59,22 +58,22 @@ export function ConnectView() {
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
       <FlexView padding={['xs', '0', '2xl', '0']}>
-        {isSocialEnabled && (
+        {isSocialEnabled ? (
           <>
             <SocialLoginList options={features?.socials} />
             <Separator text="or" style={styles.socialSeparator} />
           </>
-        )}
+        ) : null}
 
         <FlexView padding={['0', 's', 'xs', 's']}>
-          {showConnectWalletsButton && (
+          {showConnectWalletsButton ? (
             <ListItem contentStyle={styles.connectWalletButton} onPress={onViewAllPress}>
               <Icon name="wallet" size="lg" />
               <Text variant="paragraph-500">Continue with a wallet</Text>
               <View style={styles.connectWalletEmpty} />
             </ListItem>
-          )}
-          {showLoadingError && (
+          ) : null}
+          {showLoadingError ? (
             <FlexView alignItems="center" justifyContent="center" margin={['l', '0', '0', '0']}>
               <Placeholder
                 icon="warningCircle"
@@ -87,15 +86,15 @@ export function ConnectView() {
               />
               <Separator style={styles.socialSeparator} />
             </FlexView>
-          )}
-          {showList && (
+          ) : null}
+          {showList ? (
             <>
               <RecentWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
               <AllWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
               <CustomWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
               <AllWalletsButton itemStyle={styles.item} onPress={onViewAllPress} />
             </>
-          )}
+          ) : null}
         </FlexView>
       </FlexView>
     </ScrollView>

package/src/views/w3m-connect-view/utils.ts

@@ -1,4 +1,4 @@
-import type { WcWallet } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 
 export const filterOutRecentWallets = (
   recentWallets?: WcWallet[],

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

@@ -5,7 +5,7 @@ import {
   RouterController,
   ApiController,
   EventsController,
-  ConnectionController,
+  WcController,
   AssetUtil
 } from '@reown/appkit-core-react-native';
 import {
@@ -19,13 +19,12 @@ 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 { useInternalAppKit } from '../../AppKitContext';
 import { ConstantsUtil } from '@reown/appkit-common-react-native';
-import { UiUtil } from '../../utils/UiUtil';
 
 export function ConnectingExternalView() {
   const { data } = useSnapshot(RouterController.state);
-  const { connect } = useAppKit();
+  const { connect } = useInternalAppKit();
   const { maxWidth: width } = useCustomDimensions();
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType });
@@ -39,16 +38,16 @@ export function ConnectingExternalView() {
     try {
       const wallet = RouterController.state.data?.wallet;
       if (wallet) {
-        if (wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID) {
+        if (wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id) {
           await connect('phantom');
-        } else if (wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID) {
+        } else if (wallet.id === ConstantsUtil.COINBASE_CUSTOM_WALLET.id) {
           await connect('coinbase');
         } else {
           // All other wallets are handled by WalletConnect connector
           return;
         }
-        UiUtil.storeRecentWallet(wallet);
-        ConnectionController.setPressedWallet(wallet);
+        WcController.addRecentWallet(wallet);
+        WcController.setPressedWallet(wallet);
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
@@ -93,7 +92,7 @@ export function ConnectingExternalView() {
             imageSrc={AssetUtil.getWalletImage(data?.wallet)}
             imageHeaders={ApiController._getApiHeaders()}
           />
-          {errorType && (
+          {errorType ? (
             <IconBox
               icon={'close'}
               border
@@ -103,7 +102,7 @@ export function ConnectingExternalView() {
               iconColor="error-100"
               style={styles.errorIcon}
             />
-          )}
+          ) : null}
         </LoadingThumbnail>
         <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
         {errorType !== 'not_installed' && (

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

@@ -9,31 +9,27 @@ import {
   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 { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function ConnectingSiweView() {
-  const { disconnect } = useAppKit();
+  const { disconnect } = useInternalAppKit();
   const { metadata } = useSnapshot(OptionsController.state);
-  const { connectedWalletImageUrl, pressedWallet } = useSnapshot(ConnectionController.state);
-  const { activeAddress } = useSnapshot(ConnectionsController.state);
+  const { activeAddress, identity, walletInfo } = 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 walletIcon = walletInfo?.icon;
   const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
   const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
 
@@ -73,7 +69,6 @@ export function ConnectingSiweView() {
     if (ConnectionsController.state.activeAddress) {
       setIsDisconnecting(true);
       await disconnect();
-      ModalController.close();
       setIsDisconnecting(false);
     } else {
       RouterController.push('Connect');
@@ -85,7 +80,6 @@ export function ConnectingSiweView() {
     });
   };
 
-  //TODO: Add profile image in Avatar
   return (
     <FlexView padding={['2xl', 's', '3xl', 's']}>
       <IconLink
@@ -103,7 +97,7 @@ export function ConnectingSiweView() {
         leftImage={dappIcon}
         rightImage={walletIcon}
         renderRightPlaceholder={() => (
-          <Avatar imageSrc={undefined} address={activeAddress} size={60} borderWidth={0} />
+          <Avatar imageSrc={identity?.avatar} address={activeAddress} size={60} borderWidth={0} />
         )}
         rightItemStyle={!walletIcon && styles.walletAvatar}
       />

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

@@ -1,7 +1,7 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
 import {
-  ConnectionController,
+  WcController,
   CoreHelperUtil,
   EventsController,
   RouterController,
@@ -11,15 +11,14 @@ import { FlexView, LoadingThumbnail, IconBox, Logo, Text } from '@reown/appkit-u
 import { ConstantsUtil, StringUtil } from '@reown/appkit-common-react-native';
 
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { useAppKit } from '../../AppKitContext';
-import { UiUtil } from '../../utils/UiUtil';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function ConnectingSocialView() {
   const { maxWidth: width } = useCustomDimensions();
-  const { connect } = useAppKit();
+  const { connect } = useInternalAppKit();
   const { data } = useSnapshot(RouterController.state);
-  const { wcUri } = useSnapshot(ConnectionController.state);
+  const { wcUri } = useSnapshot(WcController.state);
   const [error, setError] = useState(false);
 
   const onConnect = useCallback(async () => {
@@ -31,11 +30,10 @@ export function ConnectingSocialView() {
           RouterController.state.data?.socialProvider
         );
         const wcLinking = { name: 'Reown Wallet', href };
-        ConnectionController.setWcLinking(wcLinking);
+        WcController.setWcLinking(wcLinking);
         await CoreHelperUtil.openLink(redirect);
-        await ConnectionController.state.wcPromise;
-        //todo: rename this. its not just UI
-        UiUtil.storeConnectedWallet(wcLinking);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking);
         EventsController.sendEvent({
           type: 'track',
           event: 'SOCIAL_LOGIN_SUCCESS',
@@ -55,7 +53,7 @@ export function ConnectingSocialView() {
 
   const initializeConnection = useCallback(async () => {
     const connectPromise = connect('walletconnect');
-    ConnectionController.setWcPromise(connectPromise);
+    WcController.setWcPromise(connectPromise);
   }, [connect]);
 
   useEffect(() => {
@@ -78,7 +76,7 @@ export function ConnectingSocialView() {
     >
       <LoadingThumbnail paused={!!error}>
         <Logo logo={data?.socialProvider ?? 'more'} height={72} width={72} />
-        {error && (
+        {error ? (
           <IconBox
             icon={'close'}
             border
@@ -88,7 +86,7 @@ export function ConnectingSocialView() {
             iconColor="error-100"
             style={styles.errorIcon}
           />
-        )}
+        ) : null}
       </LoadingThumbnail>
       <Text style={styles.continueText} variant="paragraph-500">
         Continue with {StringUtil.capitalize(data?.socialProvider ?? 'Login')}