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

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

@@ -1,8 +1,15 @@
 import { useRef, useState } from 'react';
 import { TextInput, type StyleProp, type ViewStyle } from 'react-native';
-import { FlexView, Link, Text, useTheme, TokenButton } from '@reown/appkit-ui-react-native';
+import {
+  FlexView,
+  Link,
+  Text,
+  useTheme,
+  TokenButton,
+  Shimmer
+} from '@reown/appkit-ui-react-native';
 import { NumberUtil, type Balance } from '@reown/appkit-common-react-native';
-import { ConstantsUtil, SendController } from '@reown/appkit-core-react-native';
+import { SendController } from '@reown/appkit-core-react-native';
 
 import { getMaxAmount, getSendValue } from './utils';
 import styles from './styles';
@@ -10,24 +17,24 @@ import styles from './styles';
 export interface SendInputTokenProps {
   token?: Balance;
   sendTokenAmount?: number;
-  gasPrice?: number;
   style?: StyleProp<ViewStyle>;
   onTokenPress?: () => void;
+  loading?: boolean;
 }
 
 export function SendInputToken({
   token,
   sendTokenAmount,
-  gasPrice,
   style,
-  onTokenPress
+  onTokenPress,
+  loading
 }: SendInputTokenProps) {
   const Theme = useTheme();
   const valueInputRef = useRef<TextInput | null>(null);
   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,26 +46,17 @@ export function SendInputToken({
   };
 
   const onMaxPress = () => {
-    if (token && gasPrice) {
-      const isNetworkToken =
-        token.address === undefined ||
-        Object.values(ConstantsUtil.NATIVE_TOKEN_ADDRESS).some(
-          nativeAddress => token?.address?.split(':')[2] === nativeAddress
-        );
-
-      const numericGas = NumberUtil.bigNumber(gasPrice).shiftedBy(-token.quantity.decimals);
-
-      const maxValue = isNetworkToken
-        ? NumberUtil.bigNumber(token.quantity.numeric).minus(numericGas)
-        : NumberUtil.bigNumber(token.quantity.numeric);
-
+    if (token?.quantity?.numeric) {
+      const maxValue = NumberUtil.bigNumber(token.quantity.numeric);
       SendController.setTokenAmount(Number(maxValue.toFixed(20)));
       setInputValue(maxValue.toFixed(20));
       valueInputRef.current?.blur();
     }
   };
 
-  return (
+  return loading ? (
+    <Shimmer width="100%" height={100} borderRadius={16} style={styles.inputLoading} />
+  ) : (
     <FlexView
       style={[
         styles.container,
@@ -96,7 +94,7 @@ export function SendInputToken({
           chevron
         />
       </FlexView>
-      {token && (
+      {token ? (
         <FlexView
           flexDirection="row"
           alignItems="center"
@@ -113,7 +111,7 @@ export function SendInputToken({
             <Link onPress={onMaxPress}>Max</Link>
           </FlexView>
         </FlexView>
-      )}
+      ) : null}
     </FlexView>
   );
 }

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

@@ -16,5 +16,8 @@ export default StyleSheet.create({
   sendValue: {
     flex: 1,
     marginRight: Spacing.xs
+  },
+  inputLoading: {
+    marginBottom: Spacing.xs
   }
 });

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?.numeric) {
     return NumberUtil.roundNumber(Number(token.quantity.numeric), 6, 5);
   }
 

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

@@ -13,7 +13,7 @@ const getIcon = (variant: SnackControllerState['variant']) => {
 };
 
 export function Snackbar() {
-  const { open, message, variant, long } = useSnapshot(SnackController.state);
+  const { open, message, variant } = useSnapshot(SnackController.state);
   const componentOpacity = useMemo(() => new Animated.Value(0), []);
 
   useEffect(() => {
@@ -23,20 +23,14 @@ export function Snackbar() {
         duration: 150,
         useNativeDriver: true
       }).start();
-      setTimeout(
-        () => {
-          Animated.timing(componentOpacity, {
-            toValue: 0,
-            duration: 300,
-            useNativeDriver: true
-          }).start(() => {
-            SnackController.hide();
-          });
-        },
-        long ? 15000 : 2200
-      );
+    } else {
+      Animated.timing(componentOpacity, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true
+      }).start();
     }
-  }, [open, long, componentOpacity]);
+  }, [open, componentOpacity]);
 
   return (
     <SnackbarComponent

package/src/partials/w3m-swap-input/index.tsx

@@ -10,10 +10,9 @@ import {
   UiUtil,
   Link
 } from '@reown/appkit-ui-react-native';
-import { type SwapTokenWithBalance } from '@reown/appkit-core-react-native';
 
 import styles from './styles';
-import { NumberUtil } from '@reown/appkit-common-react-native';
+import { NumberUtil, type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
 
 export interface SwapInputProps {
   token?: SwapTokenWithBalance;
@@ -21,6 +20,7 @@ export interface SwapInputProps {
   gasPrice?: number;
   style?: StyleProp<ViewStyle>;
   loading?: boolean;
+  loadingValues?: boolean;
   onTokenPress?: () => void;
   onMaxPress?: () => void;
   onChange?: (value: string) => void;
@@ -37,6 +37,7 @@ export function SwapInput({
   value,
   style,
   loading,
+  loadingValues,
   onTokenPress,
   onMaxPress,
   onChange,
@@ -48,11 +49,11 @@ export function SwapInput({
   const valueInputRef = useRef<TextInput | null>(null);
   const isMarketValueGreaterThanZero =
     !!marketValue && NumberUtil.bigNumber(marketValue).isGreaterThan('0');
-  const maxAmount = UiUtil.formatNumberToLocalString(token?.quantity.numeric, 3);
-  const maxError = Number(value) > Number(token?.quantity.numeric);
+  const maxAmount = UiUtil.formatNumberToLocalString(token?.quantity?.numeric, 3);
+  const maxError = Number(value) > Number(token?.quantity?.numeric);
   const showMax =
     onMaxPress &&
-    !!token?.quantity.numeric &&
+    !!token?.quantity?.numeric &&
     NumberUtil.multiply(token?.quantity.numeric, token?.price).isGreaterThan(
       MINIMUM_USD_VALUE_TO_CONVERT
     );
@@ -85,33 +86,40 @@ export function SwapInput({
     >
       {loading ? (
         <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
-          <Shimmer height={36} width={80} borderRadius={12} />
+          <FlexView alignItems="flex-start">
+            <Shimmer height={36} width={80} borderRadius={12} style={styles.valueLoader} />
+            <Shimmer height={20} width={120} borderRadius={8} />
+          </FlexView>
           <Shimmer height={36} width={80} borderRadius={18} />
         </FlexView>
       ) : (
         <>
           <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
-            <TextInput
-              ref={valueInputRef}
-              placeholder="0"
-              placeholderTextColor={Theme['fg-275']}
-              returnKeyType="done"
-              style={[styles.input, { color: Theme['fg-100'] }]}
-              autoCapitalize="none"
-              autoCorrect={false}
-              value={value}
-              onChangeText={handleInputChange}
-              keyboardType="decimal-pad"
-              inputMode="decimal"
-              autoComplete="off"
-              spellCheck={false}
-              selectionColor={Theme['accent-100']}
-              underlineColorAndroid="transparent"
-              selectTextOnFocus={false}
-              numberOfLines={1}
-              editable={editable}
-              autoFocus={autoFocus}
-            />
+            {loadingValues ? (
+              <Shimmer height={36} width={80} borderRadius={12} style={styles.valueLoader} />
+            ) : (
+              <TextInput
+                ref={valueInputRef}
+                placeholder="0"
+                placeholderTextColor={Theme['fg-275']}
+                returnKeyType="done"
+                style={[styles.input, { color: Theme['fg-100'] }]}
+                autoCapitalize="none"
+                autoCorrect={false}
+                value={value}
+                onChangeText={handleInputChange}
+                keyboardType="decimal-pad"
+                inputMode="decimal"
+                autoComplete="off"
+                spellCheck={false}
+                selectionColor={Theme['accent-100']}
+                underlineColorAndroid="transparent"
+                selectTextOnFocus={false}
+                numberOfLines={1}
+                editable={editable}
+                autoFocus={autoFocus}
+              />
+            )}
             <TokenButton
               text={token?.symbol}
               imageUrl={token?.logoUri}
@@ -119,7 +127,9 @@ export function SwapInput({
               chevron
             />
           </FlexView>
-          {(showMax || isMarketValueGreaterThanZero) && (
+          {loadingValues ? (
+            <Shimmer height={20} width={120} borderRadius={8} />
+          ) : showMax || isMarketValueGreaterThanZero ? (
             <FlexView
               flexDirection="row"
               alignItems="center"
@@ -131,7 +141,7 @@ export function SwapInput({
                   ? `~$${UiUtil.formatNumberToLocalString(marketValue, 6)}`
                   : ''}
               </Text>
-              {showMax && (
+              {showMax ? (
                 <FlexView flexDirection="row" alignItems="center" justifyContent="center">
                   <Text
                     variant="small-400"
@@ -142,9 +152,9 @@ export function SwapInput({
                   </Text>
                   <Link onPress={handleMaxPress}>Max</Link>
                 </FlexView>
-              )}
+              ) : null}
             </FlexView>
-          )}
+          ) : null}
         </>
       )}
     </FlexView>

package/src/partials/w3m-swap-input/styles.ts

@@ -16,5 +16,8 @@ export default StyleSheet.create({
   sendValue: {
     flex: 1,
     marginRight: Spacing.xs
+  },
+  valueLoader: {
+    marginBottom: Spacing.xs
   }
 });

package/src/types.ts

@@ -0,0 +1,187 @@
+import { type OptionsControllerState } from '@reown/appkit-core-react-native';
+import {
+  type Features,
+  type UniversalProviderConfigOverride,
+  type WalletConnector,
+  type BlockchainAdapter,
+  type Metadata,
+  type Network,
+  type Storage,
+  type AppKitSIWEClient,
+  type ThemeMode,
+  type ThemeVariables,
+  type Tokens
+} from '@reown/appkit-common-react-native';
+
+/**
+ * Configuration interface for initializing the AppKit instance.
+ * This interface defines all the required and optional parameters needed to set up
+ * the AppKit with blockchain adapters, networks, storage, and various customization options.
+ *
+ * @see {@link https://docs.reown.com/appkit/react-native/core/options | AppKit Options Documentation}
+ */
+export interface AppKitConfig {
+  /**
+   * The WalletConnect project ID required for establishing connections.
+   * This is obtained from the https://dashboard.reown.com/
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#projectid | Project ID Documentation}
+   */
+  projectId: string;
+
+  /**
+   * Metadata information about your application.
+   * This is displayed to users during the connection process.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#metadata | Metadata Documentation}
+   */
+  metadata: Metadata;
+
+  /**
+   * Array of blockchain adapters that handle different blockchain networks.
+   * Each adapter must implement the BlockchainAdapter interface and support
+   * a specific chain namespace (eip155, solana, etc.).
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#adapters | Adapters Documentation}
+   * @example [new EthersAdapter(), new SolanaAdapter()]
+   */
+  adapters: BlockchainAdapter[];
+
+  /**
+   * Array of supported networks that your application can connect to.
+   * Each network should have a corresponding adapter in the adapters array.
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#networks | Networks Documentation}
+   * @example [ethereum, polygon, solana]
+   */
+  networks: Network[];
+
+  /**
+   * Storage implementation for persisting connection state, preferences, and session data.
+   * Must implement the Storage interface with async methods for data persistence.
+   */
+  storage: Storage;
+
+  /**
+   * Optional array of custom wallet connectors beyond the default WalletConnect connector.
+   * Useful for adding support for specific wallets like Coinbase, Phantom, etc.
+   * @example [new CoinbaseConnector(), new PhantomConnector()]
+   */
+  extraConnectors?: WalletConnector[];
+
+  /**
+   * Optional clipboard client for handling copy operations in different environments.
+   * Useful for customizing how addresses and other data are copied to clipboard.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#clipboardclient | Clipboard Client Documentation}
+   */
+  clipboardClient?: OptionsControllerState['clipboardClient'];
+
+  /**
+   * Optional array of wallet IDs to include in the wallet selection list.
+   * If provided, only these wallets will be shown to users.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#includewalletids | Include Wallet IDs Documentation}
+   * @example ["1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369", "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0"]
+   */
+  includeWalletIds?: OptionsControllerState['includeWalletIds'];
+
+  /**
+   * Optional array of wallet IDs to exclude from the wallet selection list.
+   * These wallets will not be shown to users even if they're available.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#excludewalletids | Exclude Wallet IDs Documentation}
+   * @example ["1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369", "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0"]
+   */
+  excludeWalletIds?: OptionsControllerState['excludeWalletIds'];
+
+  /**
+   * Optional array of wallet IDs to feature at the top of the wallet selection list.
+   * These wallets will appear prominently for better user experience.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#featuredwalletids | Featured Wallet IDs Documentation}
+   * @example ["1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369", "4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0"]
+   */
+  featuredWalletIds?: OptionsControllerState['featuredWalletIds'];
+
+  /**
+   * Optional array of custom wallet configurations.
+   * Allows you to add custom wallets with specific metadata and behavior.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#customwallets | Custom Wallets Documentation}
+   */
+  customWallets?: OptionsControllerState['customWallets'];
+
+  /**
+   * Optional token configurations for different networks.
+   * Used for displaying token balances and information in the UI.
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#tokens | Tokens Documentation}
+   * @example { "eip155:1": { address: "0x..." } }
+   */
+  tokens?: Tokens;
+
+  /**
+   * Optional flag to enable analytics tracking.
+   * When enabled, AppKit will send usage analytics events.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#enableanalytics | Enable Analytics Documentation}
+   * @default false
+   */
+  enableAnalytics?: OptionsControllerState['enableAnalytics'];
+
+  /**
+   * Optional flag to enable debug mode.
+   * When enabled, additional logging and debugging information will be output.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#debug | Debug Documentation}
+   * @default false
+   */
+  debug?: OptionsControllerState['debug'];
+
+  /**
+   * Optional theme mode for the AppKit UI.
+   * Controls whether the interface uses light or dark theme.
+   * @default "dark"
+   * @see {@link https://docs.reown.com/appkit/react-native/core/theming#thememode | Theme Mode Documentation}
+   * @example "light" | "dark"
+   */
+  themeMode?: ThemeMode;
+
+  /**
+   * Optional theme variables for customizing the AppKit UI appearance.
+   * Allows you to override default colors and styling.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/theming#themevariables | Theme Variables Documentation}
+   * @example { accent: "#3B82F6" }
+   */
+  themeVariables?: ThemeVariables;
+
+  /**
+   * Optional SIWE (Sign-In with Ethereum) configuration.
+   * Enables authentication flow using Ethereum signatures.
+   * Must implement the AppKitSIWEClient interface.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/siwe | SIWE Documentation}
+   */
+  siweConfig?: AppKitSIWEClient;
+
+  /**
+   * Optional default network to use when no specific network is selected.
+   * This network will be used as the initial active network.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#defaultnetwork | Default Network Documentation}
+   */
+  defaultNetwork?: Network;
+
+  /**
+   * Optional features configuration to enable/disable specific AppKit functionality.
+   * Controls which features are available in the UI and API.
+   *
+   * @see {@link https://docs.reown.com/appkit/react-native/core/options#features | Features Documentation}
+   * @example { onramp: true, swap: false }
+   */
+  features?: Features;
+
+  /**
+   * Optional configuration override for the Universal Provider.
+   * Allows customization of WalletConnect's Universal Provider behavior.
+   */
+  universalProviderConfigOverride?: UniversalProviderConfigOverride;
+}

package/src/utils/HelpersUtil.ts

@@ -1,10 +1,12 @@
 import type { Namespace, NamespaceConfig } from '@walletconnect/universal-provider';
-import type {
-  AppKitNetwork,
-  CaipNetworkId,
-  ChainNamespace
+import {
+  type AppKitNetwork,
+  type CaipNetworkId,
+  type ChainNamespace,
+  type UniversalProviderConfigOverride,
+  solana,
+  solanaDevnet
 } from '@reown/appkit-common-react-native';
-import { solana, solanaDevnet } from '@reown/appkit-common-react-native';
 
 export const DEFAULT_METHODS = {
   solana: [
@@ -63,7 +65,7 @@ export const WcHelpersUtil = {
 
   applyNamespaceOverrides(
     baseNamespaces: NamespaceConfig,
-    overrides?: any //TODO: add OptionsControllerState['universalProviderConfigOverride']
+    overrides?: UniversalProviderConfigOverride
   ): NamespaceConfig {
     if (!overrides) {
       return { ...baseNamespaces };
@@ -159,7 +161,7 @@ export const WcHelpersUtil = {
 
   createNamespaces(
     caipNetworks: AppKitNetwork[],
-    configOverride?: any //TODO: fix this
+    configOverride?: UniversalProviderConfigOverride
   ): NamespaceConfig {
     const defaultNamespaces = caipNetworks.reduce<NamespaceConfig>((acc, chain) => {
       const { id, rpcUrls } = chain;

package/src/utils/NetworkUtil.ts

@@ -1,5 +1,10 @@
-import { ConstantsUtil } from '@reown/appkit-common-react-native';
-import type { AppKitNetwork, CaipNetworkId, Network } from '@reown/appkit-common-react-native';
+import {
+  type AppKitNetwork,
+  type CaipNetworkId,
+  type CaipNamespaces,
+  ConstantsUtil,
+  type Network
+} from '@reown/appkit-common-react-native';
 
 export const NetworkUtil = {
   formatNetwork(network: Network, projectId: string): AppKitNetwork {
@@ -37,17 +42,19 @@ export const NetworkUtil = {
     return url.toString();
   },
 
-  getDefaultChainId(network?: AppKitNetwork): CaipNetworkId | undefined {
-    if (!network) return undefined;
-
-    if (network.caipNetworkId) {
-      return network.caipNetworkId;
-    }
-
-    if (network.chainNamespace) {
-      return `${network.chainNamespace}:${network.id}`;
+  getDefaultChainId(
+    namespaces: CaipNamespaces,
+    defaultNetwork?: AppKitNetwork
+  ): CaipNetworkId | undefined {
+    if (!defaultNetwork) return undefined;
+
+    const isValidDefaultNetwork = Object.values(namespaces).some(
+      namespace => namespace?.chains?.some(chain => chain === defaultNetwork.caipNetworkId)
+    );
+    if (isValidDefaultNetwork) {
+      return defaultNetwork.caipNetworkId;
     }
 
-    return `eip155:${network.id}`;
+    return undefined;
   }
 };

package/src/utils/RouterUtil.ts

@@ -0,0 +1,50 @@
+import {
+  EventsController,
+  OnRampController,
+  RouterController,
+  SendController,
+  SwapController
+} from '@reown/appkit-core-react-native';
+
+export const RouterUtil = {
+  checkBack() {
+    this.checkSwapBack();
+    this.checkSendBack();
+    this.checkOnRampBack();
+    this.checkSocialLoginBack();
+    this.checkOnRampBackLoading();
+  },
+  checkOnRampBackLoading() {
+    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' });
+    }
+  },
+  checkSocialLoginBack() {
+    if (RouterController.state.view === 'ConnectingSocial') {
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SOCIAL_LOGIN_CANCELED',
+        properties: { provider: RouterController.state.data?.socialProvider! }
+      });
+    }
+  },
+  checkSwapBack() {
+    if (RouterController.state.view === 'Swap') {
+      SwapController.clearTokens();
+    }
+  },
+  checkSendBack() {
+    if (RouterController.state.view === 'WalletSend') {
+      SendController.resetState();
+    }
+  },
+  checkOnRampBack() {
+    if (RouterController.state.view === 'OnRamp') {
+      OnRampController.resetState();
+    }
+  }
+};

package/src/utils/UiUtil.ts

@@ -1,36 +1,22 @@
-import {
-  AssetUtil,
-  ConnectionController,
-  StorageUtil,
-  type WcWallet
-} from '@reown/appkit-core-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: { name: string; href: string },
-    pressedWallet?: WcWallet
+  setRouteTransition: (
+    transitionFn: (direction: 'forward' | 'backward' | 'none') => Promise<void>
   ) => {
-    StorageUtil.setWalletConnectDeepLink(wcLinking);
+    currentRouteTransition = transitionFn;
+  },
 
-    if (pressedWallet) {
-      const recentWallets = await StorageUtil.addRecentWallet(pressedWallet);
-      if (recentWallets) {
-        ConnectionController.setRecentWallets(recentWallets);
-      }
-      const url = AssetUtil.getWalletImage(pressedWallet);
-      ConnectionController.setConnectedWalletImageUrl(url);
+  createViewTransition: async () => {
+    if (currentRouteTransition) {
+      const { navigationDirection } = RouterController.state;
+      await currentRouteTransition(navigationDirection);
     }
   }
 };