@reown/appkit-react-native 0.0.0-feat-multichain-20250725133522 → 0.0.0-feat-multichain-20250730193426

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-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 { useAppKit } from '../../AppKitContext';
 
 export function Header() {
+  const { close, back } = useAppKit();
   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 = () => {

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

@@ -1,4 +1,4 @@
-import Modal from 'react-native-modal';
+import { Modal } from 'react-native';
 import {
   FlexView,
   Text,
@@ -27,38 +27,34 @@ export function InformationModal({
   const Theme = useTheme();
 
   return (
-    <Modal
-      isVisible={visible}
-      useNativeDriver
-      useNativeDriverForBackdrop
-      onBackdropPress={onClose}
-      onDismiss={onClose}
-      style={styles.modal}
-    >
-      <FlexView
-        style={[
-          styles.content,
-          {
-            backgroundColor: Theme['bg-200']
-          }
-        ]}
-        padding="2xl"
-      >
-        <IconBox icon={iconName} size="lg" background />
-        {!!title && (
-          <Text variant="paragraph-500" style={styles.title}>
-            {title}
-          </Text>
-        )}
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <FlexView style={styles.modal}>
+        <FlexView
+          style={[
+            styles.content,
+            {
+              backgroundColor: Theme['bg-100'],
+              borderColor: Theme['gray-glass-015']
+            }
+          ]}
+          padding="2xl"
+        >
+          <IconBox icon={iconName} size="lg" background />
+          {!!title && (
+            <Text variant="paragraph-500" style={styles.title}>
+              {title}
+            </Text>
+          )}
 
-        {!!description && (
-          <Text variant="small-400" color="fg-150" center>
-            {description}
-          </Text>
-        )}
-        <Button onPress={onClose} variant="fill" style={styles.button}>
-          Got it
-        </Button>
+          {!!description && (
+            <Text variant="small-400" color="fg-150" center>
+              {description}
+            </Text>
+          )}
+          <Button onPress={onClose} variant="fill" style={styles.button}>
+            Got it
+          </Button>
+        </FlexView>
       </FlexView>
     </Modal>
   );

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

@@ -1,15 +1,17 @@
-import { Spacing } from '@reown/appkit-ui-react-native';
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   modal: {
     margin: 0,
-    justifyContent: 'flex-end'
+    justifyContent: 'flex-end',
+    flex: 1
   },
   content: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    alignItems: 'center'
+    borderTopLeftRadius: BorderRadius.l,
+    borderTopRightRadius: BorderRadius.l,
+    alignItems: 'center',
+    borderWidth: StyleSheet.hairlineWidth
   },
   title: {
     marginTop: Spacing.s,

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

@@ -1,6 +1,5 @@
 import { useSnapshot } from 'valtio';
-import Modal from 'react-native-modal';
-import { FlatList, View } from 'react-native';
+import { FlatList, View, Modal } from 'react-native';
 import {
   FlexView,
   IconBox,
@@ -54,72 +53,69 @@ export function SelectorModal({
   };
 
   return (
-    <Modal
-      isVisible={visible}
-      useNativeDriver
-      useNativeDriverForBackdrop
-      statusBarTranslucent
-      hideModalContentWhileAnimating
-      onBackdropPress={onClose}
-      onDismiss={onClose}
-      style={styles.modal}
-    >
-      <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
-        <FlexView
-          alignItems="center"
-          justifyContent="space-between"
-          flexDirection="row"
-          style={styles.header}
-        >
-          <IconLink icon="chevronLeft" onPress={onClose} testID="selector-modal-button-back" />
-          {!!title && <Text variant="paragraph-600">{title}</Text>}
-          {showNetwork ? (
-            networkImage ? (
-              <FlexView alignItems="center" justifyContent="center" style={styles.iconPlaceholder}>
-                <Image source={networkImage} style={styles.networkImage} />
-              </FlexView>
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <View style={styles.modal}>
+        <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
+          <FlexView
+            alignItems="center"
+            justifyContent="space-between"
+            flexDirection="row"
+            style={styles.header}
+          >
+            <IconLink icon="chevronLeft" onPress={onClose} testID="selector-modal-button-back" />
+            {!!title && <Text variant="paragraph-600">{title}</Text>}
+            {showNetwork ? (
+              networkImage ? (
+                <FlexView
+                  alignItems="center"
+                  justifyContent="center"
+                  style={styles.iconPlaceholder}
+                >
+                  <Image source={networkImage} style={styles.networkImage} />
+                </FlexView>
+              ) : (
+                <IconBox
+                  style={styles.iconPlaceholder}
+                  icon="networkPlaceholder"
+                  background
+                  iconColor="fg-200"
+                  size="sm"
+                />
+              )
             ) : (
-              <IconBox
-                style={styles.iconPlaceholder}
-                icon="networkPlaceholder"
-                background
-                iconColor="fg-200"
-                size="sm"
-              />
-            )
-          ) : (
-            <View style={styles.iconPlaceholder} />
+              <View style={styles.iconPlaceholder} />
+            )}
+          </FlexView>
+          <SearchBar
+            onChangeText={onSearch}
+            style={styles.searchBar}
+            placeholder={searchPlaceholder}
+          />
+          {selectedItem && (
+            <FlexView style={styles.selectedContainer}>
+              {renderItem({ item: selectedItem })}
+              <Separator style={styles.separator} color="gray-glass-020" />
+            </FlexView>
           )}
+          <FlatList
+            data={items}
+            renderItem={renderItem}
+            fadingEdgeLength={20}
+            contentContainerStyle={styles.listContent}
+            ItemSeparatorComponent={renderSeparator}
+            keyExtractor={keyExtractor}
+            getItemLayout={
+              itemHeight
+                ? (_, index) => ({
+                    length: itemHeight + SEPARATOR_HEIGHT,
+                    offset: (itemHeight + SEPARATOR_HEIGHT) * index,
+                    index
+                  })
+                : undefined
+            }
+          />
         </FlexView>
-        <SearchBar
-          onChangeText={onSearch}
-          style={styles.searchBar}
-          placeholder={searchPlaceholder}
-        />
-        {selectedItem && (
-          <FlexView style={styles.selectedContainer}>
-            {renderItem({ item: selectedItem })}
-            <Separator style={styles.separator} color="gray-glass-020" />
-          </FlexView>
-        )}
-        <FlatList
-          data={items}
-          renderItem={renderItem}
-          fadingEdgeLength={20}
-          contentContainerStyle={styles.listContent}
-          ItemSeparatorComponent={renderSeparator}
-          keyExtractor={keyExtractor}
-          getItemLayout={
-            itemHeight
-              ? (_, index) => ({
-                  length: itemHeight + SEPARATOR_HEIGHT,
-                  offset: (itemHeight + SEPARATOR_HEIGHT) * index,
-                  index
-                })
-              : undefined
-          }
-        />
-      </FlexView>
+      </View>
     </Modal>
   );
 }

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

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

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

@@ -15,21 +15,9 @@ export function SendInputAddress({ value }: SendInputAddressProps) {
   const [inputValue, setInputValue] = useState<string | undefined>(value);
 
   const onSearch = async (search: string) => {
-    // TODO: check when enabling ENS
-    // SendController.setLoading(true);
-    // const address = await ConnectionController.getEnsAddress(search);
-    // SendController.setLoading(false);
-
-    // if (address) {
-    //   SendController.setReceiverProfileName(search);
-    //   SendController.setReceiverAddress(address);
-    //   const avatar = await ConnectionController.getEnsAvatar(search);
-    //   SendController.setReceiverProfileImageUrl(avatar || undefined);
-    // } else {
     SendController.setReceiverAddress(search);
     SendController.setReceiverProfileName(undefined);
     SendController.setReceiverProfileImageUrl(undefined);
-    // }
   };
 
   const { debouncedCallback: onDebounceSearch } = useDebounceCallback({

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,22 +1,30 @@
 import {
   AssetUtil,
   ConnectionController,
+  RouterController,
   StorageUtil,
   type WcWallet
 } from '@reown/appkit-core-react-native';
 import type { WalletDeepLink } from '@reown/appkit-common-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'));
+  setRouteTransition: (
+    transitionFn: (direction: 'forward' | 'backward' | 'none') => Promise<void>
+  ) => {
+    currentRouteTransition = transitionFn;
   },
 
-  animateChange: () => {
-    //TODO: replace this with reanimated
-    // LayoutAnimation.configureNext(LayoutAnimation.create(150, type, creationProp));
+  createViewTransition: async () => {
+    if (currentRouteTransition) {
+      const { navigationDirection } = RouterController.state;
+      await currentRouteTransition(navigationDirection);
+    }
   },
 
   storeConnectedWallet: async (wcLinking: WalletDeepLink, pressedWallet?: WcWallet) => {

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

@@ -2,7 +2,6 @@ import { useSnapshot } from 'valtio';
 import { useState } from 'react';
 import { Linking, ScrollView } from 'react-native';
 import {
-  AccountController,
   ApiController,
   CoreHelperUtil,
   EventsController,
@@ -36,7 +35,6 @@ import styles from './styles';
 
 export function AccountDefaultView() {
   const { switchAccountType, disconnect } = useAppKit();
-  const { profileName, profileImage } = useSnapshot(AccountController.state);
   const { loading } = useSnapshot(ModalController.state);
   const {
     activeAddress: address,
@@ -44,7 +42,8 @@ export function AccountDefaultView() {
     activeNetwork,
     activeNamespace,
     connection,
-    accountType
+    accountType,
+    identity
   } = useSnapshot(ConnectionsController.state);
   const account = address?.split(':')[2];
   const [disconnecting, setDisconnecting] = useState(false);
@@ -71,6 +70,12 @@ export function AccountDefaultView() {
   const showSend =
     !isAuth && activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);
 
+  const showBuy =
+    !isAuth &&
+    isOnRampEnabled &&
+    activeNamespace &&
+    ConstantsUtil.ONRAMP_SUPPORTED_NAMESPACES.includes(activeNamespace);
+
   const { padding } = useCustomDimensions();
 
   async function onDisconnect() {
@@ -99,7 +104,6 @@ export function AccountDefaultView() {
   };
 
   const onCopyAddress = () => {
-    //TODO: Check ENS name
     if (OptionsController.isClipboardAvailable() && ConnectionsController.state.activeAddress) {
       const _address = CoreHelperUtil.getPlainAddress(ConnectionsController.state.activeAddress);
       if (_address) {
@@ -189,12 +193,12 @@ export function AccountDefaultView() {
       />
       <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
         <FlexView alignItems="center" padding={['3xl', 's', '3xl', 's']}>
-          <Avatar imageSrc={profileImage} address={account ?? ''} />
+          <Avatar imageSrc={identity?.avatar} address={account ?? ''} />
           <FlexView flexDirection="row" alignItems="center" margin={['s', '0', '0', '0']}>
             <Text variant="medium-title-600">
-              {profileName
+              {identity?.name
                 ? UiUtil.getTruncateString({
-                    string: profileName,
+                    string: identity?.name,
                     charsStart: 20,
                     charsEnd: 0,
                     truncate: 'end'
@@ -263,7 +267,7 @@ export function AccountDefaultView() {
                 {activeNetwork?.name}
               </Text>
             </ListItem>
-            {!isAuth && isOnRampEnabled && (
+            {showBuy && (
               <ListItem
                 chevron
                 icon="card"

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

@@ -14,6 +14,7 @@ import {
   AssetController,
   ConnectionsController,
   CoreHelperUtil,
+  EventsController,
   ModalController,
   RouterController,
   SendController
@@ -27,7 +28,7 @@ export function AccountView() {
   const Theme = useTheme();
   const [isLoading, setIsLoading] = useState(false);
   const { padding } = useCustomDimensions();
-  const { activeNetwork, activeAddress } = useSnapshot(ConnectionsController.state);
+  const { activeNetwork, activeAddress, identity } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const address = CoreHelperUtil.getPlainAddress(activeAddress);
   const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
@@ -38,6 +39,10 @@ export function AccountView() {
 
   const onNetworkPress = () => {
     RouterController.push('Networks');
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CLICK_NETWORKS'
+    });
   };
 
   useEffect(() => {
@@ -82,8 +87,8 @@ export function AccountView() {
       <FlexView padding={['3xl', '0', '0', '0']} style={[{ backgroundColor: Theme['bg-100'] }]}>
         <AccountPill
           address={address}
-          // profileName={profileName}
-          // profileImage={profileImage}
+          profileName={identity?.name}
+          profileImage={identity?.avatar}
           onPress={onProfilePress}
           style={styles.accountPill}
         />

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

@@ -13,7 +13,6 @@ import {
   ConnectionController,
   ConnectionsController,
   EventsController,
-  ModalController,
   OptionsController,
   RouterController,
   SnackController
@@ -73,7 +72,6 @@ export function ConnectingSiweView() {
     if (ConnectionsController.state.activeAddress) {
       setIsDisconnecting(true);
       await disconnect();
-      ModalController.close();
       setIsDisconnecting(false);
     } else {
       RouterController.push('Connect');

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

@@ -13,7 +13,6 @@ import {
   RouterController,
   EventsController,
   ConnectionsController,
-  ModalController,
   OptionsController,
   AssetController
 } from '@reown/appkit-core-react-native';
@@ -34,7 +33,7 @@ export function NetworksView() {
   const itemGap = Math.abs(
     Math.trunc((usableWidth - numColumns * CardSelectWidth) / numColumns) / 2
   );
-  const { switchNetwork } = useAppKit();
+  const { switchNetwork, back } = useAppKit();
 
   const networkList = isConnected ? ConnectionsController.getConnectedNetworks() : networks;
 
@@ -46,12 +45,7 @@ export function NetworksView() {
   const networksTemplate = () => {
     const onNetworkPress = async (network: AppKitNetwork) => {
       await switchNetwork(network);
-
-      if (RouterController.state.history.length > 1) {
-        RouterController.goBack();
-      } else {
-        ModalController.close();
-      }
+      back();
     };
 
     return networkList.map(network => {

package/src/views/w3m-onramp-transaction-view/index.tsx

@@ -1,7 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useEffect } from 'react';
 import {
-  AccountController,
   ConnectionsController,
   OnRampController,
   RouterController
@@ -25,7 +24,7 @@ export function OnRampTransactionView() {
   useEffect(() => {
     return () => {
       OnRampController.resetState();
-      AccountController.fetchTokenBalance();
+      ConnectionsController.fetchBalance();
     };
   }, []);
 

package/src/views/w3m-onramp-view/components/Header.tsx

@@ -1,18 +1,16 @@
 import { StyleSheet } from 'react-native';
-import { ModalController, RouterController } from '@reown/appkit-core-react-native';
 import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
+import { useAppKit } from '../../../AppKitContext';
 
 interface HeaderProps {
   onSettingsPress: () => void;
 }
 
 export function Header({ onSettingsPress }: HeaderProps) {
+  const { back } = useAppKit();
+
   const handleGoBack = () => {
-    if (RouterController.state.history.length > 1) {
-      RouterController.goBack();
-    } else {
-      ModalController.close();
-    }
+    back();
   };
 
   return (