@reown/appkit-react-native 0.0.0-chore-bump-builder-20250728195048 → 0.0.0-chore-solflare-20250730210452

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-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,6 +1,6 @@
 {
   "name": "@reown/appkit-react-native",
-  "version": "0.0.0-chore-bump-builder-20250728195048",
+  "version": "0.0.0-chore-solflare-20250730210452",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "module": "lib/module/index.js",
@@ -38,12 +38,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@reown/appkit-common-react-native": "0.0.0-chore-bump-builder-20250728195048",
-    "@reown/appkit-core-react-native": "0.0.0-chore-bump-builder-20250728195048",
-    "@reown/appkit-siwe-react-native": "0.0.0-chore-bump-builder-20250728195048",
-    "@reown/appkit-ui-react-native": "0.0.0-chore-bump-builder-20250728195048",
+    "@reown/appkit-common-react-native": "0.0.0-chore-solflare-20250730210452",
+    "@reown/appkit-core-react-native": "0.0.0-chore-solflare-20250730210452",
+    "@reown/appkit-siwe-react-native": "0.0.0-chore-solflare-20250730210452",
+    "@reown/appkit-ui-react-native": "0.0.0-chore-solflare-20250730210452",
     "@walletconnect/universal-provider": "2.21.5",
-    "react-native-modal": ">=13",
     "valtio": "2.1.5"
   },
   "peerDependencies": {

package/src/AppKit.ts

@@ -46,6 +46,7 @@ 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;
@@ -296,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) {
@@ -693,6 +719,15 @@ export class AppKit {
       customList.push(ConstantsUtil.PHANTOM_CUSTOM_WALLET);
     }
 
+    const addSolflare =
+      adapters.some(adapter => adapter.getSupportedNamespace() === 'solana') &&
+      extraConnectors?.some(connector => connector.type.toLowerCase() === 'solflare') &&
+      !customList.some(wallet => wallet.id === ConstantsUtil.SOLFLARE_CUSTOM_WALLET.id);
+
+    if (addSolflare) {
+      customList.push(ConstantsUtil.SOLFLARE_CUSTOM_WALLET);
+    }
+
     OptionsController.setCustomWallets(customList);
   }
 
@@ -743,7 +778,7 @@ export class AppKit {
         // If it's connected but there's no session, show sign view
         return this.onSiweNavigation();
       } else if (isConnection) {
-        //Connected with 1CA
+        // 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/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-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,

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,