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

package/lib/typescript/views/w3m-onramp-view/components/SelectPaymentModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPaymentModal.d.ts","sourceRoot":"","sources":["../../../../../src/views/w3m-onramp-view/components/SelectPaymentModal.tsx"],"names":[],"mappings":"AAsBA,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,uBAAuB,2CAsKtF"}
+{"version":3,"file":"SelectPaymentModal.d.ts","sourceRoot":"","sources":["../../../../../src/views/w3m-onramp-view/components/SelectPaymentModal.tsx"],"names":[],"mappings":"AAqBA,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,uBAAuB,2CA+JtF"}

package/lib/typescript/views/w3m-swap-preview-view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-preview-view/index.tsx"],"names":[],"mappings":"AAmBA,wBAAgB,eAAe,4CAiI9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-preview-view/index.tsx"],"names":[],"mappings":"AAUA,wBAAgB,eAAe,4CAuH9B"}

package/lib/typescript/views/w3m-swap-preview-view/styles.d.ts

@@ -12,6 +12,9 @@ declare const _default: {
         marginLeft: number;
         flex: number;
     };
+    withKeyboard: {
+        height: "100%";
+    };
 };
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/views/w3m-swap-preview-view/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-preview-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAGA,wBAcG"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-preview-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAGA,wBAiBG"}

package/lib/typescript/views/w3m-swap-view/components/select-token-view/index.d.ts

@@ -1,8 +1,10 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
 import { type SwapInputTarget } from '@reown/appkit-core-react-native';
 interface Props {
     onClose: () => void;
     type?: SwapInputTarget;
+    style?: StyleProp<ViewStyle>;
 }
-export declare function SwapSelectTokenView({ onClose, type }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function SwapSelectTokenView({ onClose, type, style }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/views/w3m-swap-view/components/select-token-view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-view/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,iCAAiC,CAAC;AAOzC,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,KAAK,2CAmI3D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-view/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAatB,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,iCAAiC,CAAC;AAOzC,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,2CAoIlE"}

package/lib/typescript/views/w3m-swap-view/components/select-token-view/styles.d.ts

@@ -6,7 +6,6 @@ declare const _default: {
         borderBottomRightRadius: number;
         overflow: "hidden";
         marginTop: number;
-        flex: number;
     };
     title: {
         paddingTop: number;

package/lib/typescript/views/w3m-swap-view/components/select-token-view/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAmCG"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAkCG"}

package/lib/typescript/views/w3m-swap-view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/index.tsx"],"names":[],"mappings":"AAuBA,wBAAgB,QAAQ,4CAyMvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/index.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,QAAQ,4CA6LvB"}

package/lib/typescript/views/w3m-swap-view/styles.d.ts

@@ -17,10 +17,14 @@ declare const _default: {
         marginTop: number;
         width: "100%";
     };
-    modal: {
+    modalContent: {
         margin: number;
+        flex: number;
         justifyContent: "flex-end";
     };
+    withKeyboard: {
+        height: "100%";
+    };
 };
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/views/w3m-swap-view/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAuBG"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBA2BG"}

package/lib/typescript/views/w3m-wallet-receive-view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-wallet-receive-view/index.tsx"],"names":[],"mappings":"AAuBA,wBAAgB,iBAAiB,wDAoEhC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-wallet-receive-view/index.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,iBAAiB,wDAmEhC"}

package/lib/typescript/views/w3m-wallet-send-view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-wallet-send-view/index.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,cAAc,4CA6G7B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-wallet-send-view/index.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,cAAc,4CAwG7B"}

package/lib/typescript/views/w3m-wallet-send-view/styles.d.ts

@@ -15,6 +15,9 @@ declare const _default: {
     addressContainer: {
         width: "100%";
     };
+    withKeyboard: {
+        height: "100%";
+    };
 };
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/views/w3m-wallet-send-view/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-wallet-send-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAGA,wBAiBG"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-wallet-send-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAGA,wBAoBG"}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@reown/appkit-react-native",
-  "version": "0.0.0-feat-multichain-20250725133522",
+  "version": "0.0.0-feat-multichain-20250730193426",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "module": "lib/module/index.js",
+  "react-native": "src/index.ts",
   "source": "src/index.ts",
   "scripts": {
     "build": "bob build",
@@ -37,32 +38,19 @@
     "access": "public"
   },
   "dependencies": {
-    "@reown/appkit-common-react-native": "0.0.0-feat-multichain-20250725133522",
-    "@reown/appkit-core-react-native": "0.0.0-feat-multichain-20250725133522",
-    "@reown/appkit-siwe-react-native": "0.0.0-feat-multichain-20250725133522",
-    "@reown/appkit-ui-react-native": "0.0.0-feat-multichain-20250725133522",
+    "@reown/appkit-common-react-native": "0.0.0-feat-multichain-20250730193426",
+    "@reown/appkit-core-react-native": "0.0.0-feat-multichain-20250730193426",
+    "@reown/appkit-siwe-react-native": "0.0.0-feat-multichain-20250730193426",
+    "@reown/appkit-ui-react-native": "0.0.0-feat-multichain-20250730193426",
     "@walletconnect/universal-provider": "2.21.5",
-    "react-native-modal": ">=13",
-    "valtio": "1.13.2"
+    "valtio": "2.1.5"
   },
   "peerDependencies": {
-    "react": ">=17",
-    "react-native": ">=0.68.5"
-  },
-  "react-native": "src/index.ts",
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      "commonjs",
-      "module",
-      [
-        "typescript",
-        {
-          "tsc": "../../node_modules/.bin/tsc"
-        }
-      ]
-    ]
+    "@walletconnect/react-native-compat": ">=2.16.1",
+    "@walletconnect/utils": ">=2.16.1",
+    "react": ">=18",
+    "react-native": ">=0.72",
+    "react-native-svg": ">=13.10"
   },
   "eslintIgnore": [
     "node_modules/",

package/src/AppKit.ts

@@ -1,6 +1,5 @@
 import {
   type Features,
-  AccountController,
   EventsController,
   ModalController,
   ConnectionsController,
@@ -14,7 +13,8 @@ import {
   SwapController,
   OnRampController,
   CoreHelperUtil,
-  SendController
+  SendController,
+  BlockchainApiController
 } from '@reown/appkit-core-react-native';
 
 import {
@@ -38,13 +38,15 @@ import {
   type ConnectionProperties,
   type AccountType,
   type AppKitOpenOptions,
-  ConstantsUtil
+  ConstantsUtil,
+  type Connection
 } from '@reown/appkit-common-react-native';
 import { SIWEController } from '@reown/appkit-siwe-react-native';
 
 import { WalletConnectConnector } from './connectors/WalletConnectConnector';
 import { WcHelpersUtil } from './utils/HelpersUtil';
 import { NetworkUtil } from './utils/NetworkUtil';
+import { RouterUtil } from './utils/RouterUtil';
 
 interface AppKitConfig {
   projectId: string;
@@ -97,7 +99,22 @@ export class AppKit {
       namespaceMap.set(chainNamespace, adapterName);
     }
 
-    this.networks = NetworkUtil.formatNetworks(config.networks, this.projectId); //TODO: check this
+    const formattedNetworks = NetworkUtil.formatNetworks(config.networks, this.projectId);
+
+    // Use only networks that have adapters
+    const networksWithAdapters = formattedNetworks.filter(network => {
+      return this.adapters.some(
+        adapter => adapter.getSupportedNamespace() === network.chainNamespace
+      );
+    });
+
+    config.networks.forEach(network => {
+      if (!networksWithAdapters.some(n => n.id === network.id)) {
+        console.warn(`AppKit: missing adapter for network ${network.name} - ${network.id}`);
+      }
+    });
+
+    this.networks = networksWithAdapters;
     this.namespaces = WcHelpersUtil.createNamespaces(this.networks) as ProposalNamespaces;
     this.config = config;
     this.extraConnectors = config.extraConnectors || [];
@@ -157,14 +174,11 @@ export class AppKit {
 
       this.syncAccounts(approvedAdapters);
 
-      //TODO: Replace this
-      AccountController.setIsConnected(true);
-
       if (
         OptionsController.state.isSiweEnabled &&
         ConnectionsController.state.activeNamespace === 'eip155'
       ) {
-        this.handleSiweChange();
+        this.handleSiweChange({ isConnection: true });
       } else {
         ModalController.close();
       }
@@ -200,7 +214,6 @@ export class AppKit {
 
       ModalController.close();
 
-      AccountController.setIsConnected(false); // Might need adjustment based on multi-connection logic
       RouterController.reset('Connect');
       TransactionsController.resetState();
       SwapController.resetState();
@@ -284,8 +297,33 @@ export class AppKit {
     ModalController.open(options);
   }
 
-  close() {
+  async close() {
     ModalController.close();
+
+    if (OptionsController.state.isSiweEnabled && ConnectionsController.state.isConnected) {
+      const session = await SIWEController.getSession();
+      if (
+        !session &&
+        SIWEController.state.status !== 'success' &&
+        ConnectionsController.state.activeNamespace === 'eip155' &&
+        !!ConnectionsController.state.activeAddress
+      ) {
+        await this.disconnect();
+      }
+    }
+
+    RouterUtil.checkOnRampBack();
+    RouterUtil.checkSocialLoginBack();
+  }
+
+  back() {
+    if (RouterController.state.history.length > 1) {
+      RouterUtil.checkBack();
+
+      return RouterController.goBack();
+    }
+
+    return this.close();
   }
 
   async switchAccountType(namespace: ChainNamespace, type: AccountType, network: AppKitNetwork) {
@@ -378,13 +416,11 @@ export class AppKit {
 
             this.syncAccounts(initializedAdapters);
 
-            AccountController.setIsConnected(true);
-
             if (
               OptionsController.state.isSiweEnabled &&
               ConnectionsController.state.activeNamespace === 'eip155'
             ) {
-              this.handleSiweChange();
+              this.handleSiweChange({ isConnection: true });
             }
           }
         } catch (error) {
@@ -438,6 +474,7 @@ export class AppKit {
       );
 
       this.syncBalances(adapter, network);
+      this.syncIdentity(namespace, connection);
     });
   }
 
@@ -456,6 +493,40 @@ export class AppKit {
     }
   }
 
+  private async syncIdentity(namespace?: ChainNamespace, connection?: Connection) {
+    if (namespace !== 'eip155' || !connection?.accounts?.length) return;
+
+    const uniqueAddresses = [
+      ...new Set(connection.accounts.map(account => CoreHelperUtil.getPlainAddress(account)))
+    ];
+
+    // Process addresses sequentially to avoid race conditions
+    for (const plainAddress of uniqueAddresses) {
+      try {
+        // Validate address format before type assertion
+        if (!plainAddress || !CoreHelperUtil.isAddress(plainAddress, 'eip155')) {
+          console.warn(`Invalid Ethereum address format: ${plainAddress}`);
+          continue;
+        }
+
+        const identity = await BlockchainApiController.fetchIdentity({
+          address: plainAddress as `0x${string}`
+        });
+
+        if (identity?.name) {
+          ConnectionsController.updateIdentity(
+            namespace,
+            connection,
+            plainAddress as `0x${string}`,
+            identity
+          );
+        }
+      } catch (error) {
+        // Continue processing other addresses even if one fails
+      }
+    }
+  }
+
   private setConnection(
     adapters: BlockchainAdapter[],
     approvedNamespaces: Namespaces,
@@ -670,26 +741,36 @@ export class AppKit {
   };
 
   private async handleSiweChange(params?: {
+    isConnection?: boolean;
     isNetworkChange?: boolean;
     isAccountChange?: boolean;
   }) {
-    const { isNetworkChange, isAccountChange } = params ?? {};
+    const { isNetworkChange, isAccountChange, isConnection } = params ?? {};
     const { enabled, signOutOnAccountChange, signOutOnNetworkChange } =
       SIWEController.state._client?.options ?? {};
 
     if (enabled) {
       const session = await SIWEController.getSession();
-      if (session && isAccountChange && signOutOnAccountChange) {
-        // If the address has changed and signOnAccountChange is enabled, sign out
-        await SIWEController.signOut();
-        this.onSiweNavigation();
-      } else if (isNetworkChange && signOutOnNetworkChange) {
-        // If the network has changed and signOnNetworkChange is enabled, sign out
-        await SIWEController.signOut();
-        this.onSiweNavigation();
+      if (session && isAccountChange) {
+        if (signOutOnAccountChange) {
+          // If the address has changed and signOnAccountChange is enabled, sign out
+          await SIWEController.signOut();
+
+          return this.onSiweNavigation();
+        }
+      } else if (isNetworkChange) {
+        if (signOutOnNetworkChange) {
+          // If the network has changed and signOnNetworkChange is enabled, sign out
+          await SIWEController.signOut();
+
+          return this.onSiweNavigation();
+        }
       } else if (!session) {
         // If it's connected but there's no session, show sign view
-        this.onSiweNavigation();
+        return this.onSiweNavigation();
+      } else if (isConnection) {
+        // Connected with 1CA
+        ModalController.close();
       }
     }
   }

package/src/AppKitContext.tsx

@@ -32,6 +32,7 @@ export const useAppKit = () => {
     disconnect: context.appKit.disconnect.bind(context.appKit),
     open: context.appKit.open.bind(context.appKit),
     close: context.appKit.close.bind(context.appKit),
+    back: context.appKit.back.bind(context.appKit),
     switchNetwork: context.appKit.switchNetwork.bind(context.appKit),
     getProvider: context.appKit.getProvider.bind(context.appKit),
     switchAccountType: context.appKit.switchAccountType.bind(context.appKit)

package/src/hooks/useAccount.ts

@@ -16,6 +16,7 @@ export function useAccount() {
   return {
     address: address?.split(':')[2],
     isConnected: !!address,
-    chainId: connection?.caipNetwork
+    chainId: connection?.caipNetwork,
+    namespace: activeNamespace
   };
 }

package/src/hooks/useRouteTransition.ts

@@ -0,0 +1,95 @@
+import { useCallback, useRef, useEffect } from 'react';
+import { Animated, Dimensions } from 'react-native';
+
+const { width: screenWidth } = Dimensions.get('window');
+
+export interface RouteTransitionConfig {
+  duration?: number;
+  useNativeDriver?: boolean;
+}
+
+export function useRouteTransition(config: RouteTransitionConfig = {}) {
+  const { duration = 300, useNativeDriver = true } = config;
+
+  const fadeAnim = useRef(new Animated.Value(1)).current;
+  const slideAnim = useRef(new Animated.Value(0)).current;
+  const isAnimating = useRef(false);
+  const currentAnimation = useRef<Animated.CompositeAnimation | null>(null);
+
+  const animateTransition = useCallback(
+    (direction: 'forward' | 'backward' | 'none') => {
+      if (isAnimating.current || direction === 'none') {
+        return Promise.resolve();
+      }
+
+      if (currentAnimation.current) {
+        currentAnimation.current.stop();
+      }
+
+      isAnimating.current = true;
+
+      return new Promise<void>(resolve => {
+        const startPosition =
+          direction === 'forward'
+            ? screenWidth * 0.02 // Start from right for forward
+            : -screenWidth * 0.02; // Start from left for backward
+
+        // Immediately set starting position and fade out
+        fadeAnim.setValue(0);
+        slideAnim.setValue(startPosition);
+
+        // Animate to final position with fade in
+        const animation = Animated.parallel([
+          Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration,
+            useNativeDriver
+          }),
+          Animated.timing(slideAnim, {
+            toValue: 0, // Slide to center
+            duration,
+            useNativeDriver
+          })
+        ]);
+
+        currentAnimation.current = animation;
+
+        animation.start(({ finished }) => {
+          if (finished) {
+            isAnimating.current = false;
+            currentAnimation.current = null;
+            resolve();
+          }
+        });
+      });
+    },
+    [fadeAnim, slideAnim, duration, useNativeDriver]
+  );
+
+  const getAnimatedStyle = useCallback(
+    () => ({
+      opacity: fadeAnim,
+      transform: [{ translateX: slideAnim }]
+    }),
+    [fadeAnim, slideAnim]
+  );
+
+  useEffect(() => {
+    fadeAnim.setValue(1);
+    slideAnim.setValue(0);
+
+    return () => {
+      if (currentAnimation.current) {
+        currentAnimation.current.stop();
+        currentAnimation.current = null;
+      }
+      isAnimating.current = false;
+    };
+  }, [fadeAnim, slideAnim]);
+
+  return {
+    animateTransition,
+    getAnimatedStyle,
+    isAnimating: isAnimating.current
+  };
+}

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

@@ -1,7 +1,6 @@
 import { useSnapshot } from 'valtio';
 import type { StyleProp, ViewStyle } from 'react-native';
 import {
-  AccountController,
   CoreHelperUtil,
   ModalController,
   ThemeController,
@@ -18,13 +17,13 @@ export interface AccountButtonProps {
 }
 
 export function AccountButton({ balance, disabled, style, testID }: AccountButtonProps) {
-  const { profileImage, profileName } = useSnapshot(AccountController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const {
     activeAddress: address,
     activeBalance,
-    activeNetwork
+    activeNetwork,
+    identity
   } = useSnapshot(ConnectionsController.state);
 
   const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
@@ -35,9 +34,9 @@ export function AccountButton({ balance, disabled, style, testID }: AccountButto
       <AccountButtonUI
         onPress={() => ModalController.open()}
         address={address?.split(':')[2] ?? ''}
-        profileName={profileName}
+        profileName={identity?.name}
         networkSrc={networkImage}
-        avatarSrc={profileImage}
+        avatarSrc={identity?.avatar}
         disabled={disabled}
         style={style}
         balance={

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