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

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/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-all-wallets-view/index.tsx

@@ -26,7 +26,8 @@ export function AllWalletsView() {
 
   const onWalletPress = (wallet: WcWallet) => {
     const isExternal =
-      wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID ||
+      wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id ||
+      wallet.id === ConstantsUtil.SOLFLARE_CUSTOM_WALLET.id ||
       wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
     if (isExternal) {
       RouterController.push('ConnectingExternal', { wallet });

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

@@ -31,8 +31,9 @@ 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_EXPLORER_ID ||
+      wallet.id === ConstantsUtil.SOLFLARE_CUSTOM_WALLET.id;
     if (isExternal) {
       RouterController.push('ConnectingExternal', { wallet });
     } else {

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

@@ -39,8 +39,10 @@ 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.SOLFLARE_CUSTOM_WALLET.id) {
+          await connect('solflare');
         } else if (wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID) {
           await connect('coinbase');
         } else {

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-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 (

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

@@ -1,8 +1,7 @@
 /* eslint-disable valtio/state-snapshot-rule */
 import { useSnapshot } from 'valtio';
 import { useRef, useState, useMemo, useEffect } from 'react';
-import Modal from 'react-native-modal';
-import { FlatList, StyleSheet, View } from 'react-native';
+import { FlatList, StyleSheet, View, Modal } from 'react-native';
 import {
   FlexView,
   IconLink,
@@ -135,69 +134,63 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
   }, [visible]);
 
   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="arrowLeft" onPress={onClose} testID="payment-modal-button-back" />
-          {!!title && <Text variant="paragraph-600">{title}</Text>}
-          <View style={styles.iconPlaceholder} />
-        </FlexView>
-        <Text variant="small-500" color="fg-150" style={styles.subtitle}>
-          Pay with
-        </Text>
-        <FlexView>
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <View style={styles.modalContent}>
+        <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
+          <FlexView
+            alignItems="center"
+            justifyContent="space-between"
+            flexDirection="row"
+            style={styles.header}
+          >
+            <IconLink icon="arrowLeft" onPress={onClose} testID="payment-modal-button-back" />
+            {!!title && <Text variant="paragraph-600">{title}</Text>}
+            <View style={styles.iconPlaceholder} />
+          </FlexView>
+          <Text variant="small-500" color="fg-150" style={styles.subtitle}>
+            Pay with
+          </Text>
+          <FlexView>
+            <FlatList
+              data={availablePaymentMethods}
+              renderItem={renderPaymentMethod}
+              ref={paymentMethodsRef}
+              style={styles.paymentMethodsContainer}
+              contentContainerStyle={styles.paymentMethodsContent}
+              fadingEdgeLength={20}
+              keyExtractor={item => item.paymentMethod}
+              horizontal
+              showsHorizontalScrollIndicator={false}
+            />
+          </FlexView>
+          <Separator style={styles.separator} color="gray-glass-010" />
+          <Text variant="small-500" color="fg-150" style={styles.subtitle}>
+            Providers
+          </Text>
           <FlatList
-            data={availablePaymentMethods}
-            renderItem={renderPaymentMethod}
-            ref={paymentMethodsRef}
-            style={styles.paymentMethodsContainer}
-            contentContainerStyle={styles.paymentMethodsContent}
+            data={sortedQuotes}
+            bounces={false}
+            renderItem={renderQuote}
+            extraData={selectedPaymentMethod}
+            contentContainerStyle={styles.listContent}
+            ItemSeparatorComponent={renderSeparator}
             fadingEdgeLength={20}
-            keyExtractor={item => item.paymentMethod}
-            horizontal
-            showsHorizontalScrollIndicator={false}
+            keyExtractor={item => `${item.serviceProvider}-${item.paymentMethodType}`}
+            getItemLayout={(_, index) => ({
+              length: QUOTE_ITEM_HEIGHT + SEPARATOR_HEIGHT,
+              offset: (QUOTE_ITEM_HEIGHT + SEPARATOR_HEIGHT) * index,
+              index
+            })}
           />
         </FlexView>
-        <Separator style={styles.separator} color="gray-glass-010" />
-        <Text variant="small-500" color="fg-150" style={styles.subtitle}>
-          Providers
-        </Text>
-        <FlatList
-          data={sortedQuotes}
-          bounces={false}
-          renderItem={renderQuote}
-          extraData={selectedPaymentMethod}
-          contentContainerStyle={styles.listContent}
-          ItemSeparatorComponent={renderSeparator}
-          fadingEdgeLength={20}
-          keyExtractor={item => `${item.serviceProvider}-${item.paymentMethodType}`}
-          getItemLayout={(_, index) => ({
-            length: QUOTE_ITEM_HEIGHT + SEPARATOR_HEIGHT,
-            offset: (QUOTE_ITEM_HEIGHT + SEPARATOR_HEIGHT) * index,
-            index
-          })}
-        />
-      </FlexView>
+      </View>
     </Modal>
   );
 }
 const styles = StyleSheet.create({
-  modal: {
+  modalContent: {
     margin: 0,
+    flex: 1,
     justifyContent: 'flex-end'
   },
   header: {

package/src/views/w3m-swap-preview-view/index.tsx

@@ -1,25 +1,15 @@
 import { useSnapshot } from 'valtio';
 import { useEffect } from 'react';
-import { Platform, ScrollView } from 'react-native';
+import { ScrollView } from 'react-native';
 import { NumberUtil } from '@reown/appkit-common-react-native';
 import { RouterController, SwapController } from '@reown/appkit-core-react-native';
-import {
-  Button,
-  FlexView,
-  Icon,
-  Spacing,
-  Text,
-  TokenButton,
-  UiUtil
-} from '@reown/appkit-ui-react-native';
+import { Button, FlexView, Icon, Text, TokenButton, UiUtil } from '@reown/appkit-ui-react-native';
 import { SwapDetails } from '../../partials/w3m-swap-details';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { useKeyboard } from '../../hooks/useKeyboard';
 import styles from './styles';
 
 export function SwapPreviewView() {
   const { padding } = useCustomDimensions();
-  const { keyboardShown, keyboardHeight } = useKeyboard();
   const {
     sourceToken,
     sourceTokenAmount,
@@ -37,11 +27,6 @@ export function SwapPreviewView() {
     NumberUtil.parseLocalStringToNumber(sourceTokenAmount) * sourceTokenPriceInUSD;
   const toTokenMarketValue = NumberUtil.parseLocalStringToNumber(toTokenAmount) * toTokenPriceInUSD;
 
-  const paddingBottom = Platform.select({
-    android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
-    default: Spacing['2xl']
-  });
-
   const loading =
     loadingQuote || loadingBuildTransaction || loadingTransaction || loadingApprovalTransaction;
 
@@ -75,12 +60,8 @@ export function SwapPreviewView() {
   }, []);
 
   return (
-    <ScrollView
-      style={{ paddingHorizontal: padding }}
-      bounces={false}
-      keyboardShouldPersistTaps="always"
-    >
-      <FlexView padding="l" justifyContent="center" style={{ paddingBottom }}>
+    <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
+      <FlexView padding={['l', 'l', '2xl', 'l']} justifyContent="center">
         <FlexView flexDirection="row" justifyContent="space-between">
           <FlexView>
             <Text variant="small-400" color="fg-150">

package/src/views/w3m-swap-preview-view/styles.ts

@@ -14,5 +14,8 @@ export default StyleSheet.create({
   sendButton: {
     marginLeft: Spacing.s,
     flex: 3
+  },
+  withKeyboard: {
+    height: '100%'
   }
 });

package/src/views/w3m-swap-view/components/select-token-view/index.tsx

@@ -1,6 +1,13 @@
 import { useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { ScrollView, SectionList, View, type SectionListData } from 'react-native';
+import {
+  ScrollView,
+  SectionList,
+  View,
+  type SectionListData,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
 import {
   FlexView,
   IconLink,
@@ -30,9 +37,10 @@ import { createSections } from './utils';
 interface Props {
   onClose: () => void;
   type?: SwapInputTarget;
+  style?: StyleProp<ViewStyle>;
 }
 
-export function SwapSelectTokenView({ onClose, type }: Props) {
+export function SwapSelectTokenView({ onClose, type, style }: Props) {
   const { padding } = useCustomDimensions();
   const Theme = useTheme();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
@@ -77,7 +85,8 @@ export function SwapSelectTokenView({ onClose, type }: Props) {
         {
           paddingHorizontal: padding,
           backgroundColor: Theme['bg-100']
-        }
+        },
+        style
       ]}
     >
       <FlexView

package/src/views/w3m-swap-view/components/select-token-view/styles.ts

@@ -8,8 +8,7 @@ export default StyleSheet.create({
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,
     overflow: 'hidden',
-    marginTop: 80,
-    flex: 1
+    marginTop: 80
   },
   title: {
     paddingTop: Spacing['2xs']

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

@@ -1,7 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
-import { Platform, ScrollView } from 'react-native';
-import Modal from 'react-native-modal';
+import { ScrollView, Modal } from 'react-native';
 import {
   ConnectionsController,
   ConstantsUtil,
@@ -10,7 +9,7 @@ import {
   SwapController,
   type SwapInputTarget
 } from '@reown/appkit-core-react-native';
-import { Button, FlexView, IconLink, Spacing, useTheme } from '@reown/appkit-ui-react-native';
+import { Button, FlexView, IconLink, useTheme } from '@reown/appkit-ui-react-native';
 import { NumberUtil } from '@reown/appkit-common-react-native';
 
 import { useKeyboard } from '../../hooks/useKeyboard';
@@ -37,7 +36,7 @@ export function SwapView() {
   } = useSnapshot(SwapController.state);
   const Theme = useTheme();
   const { padding } = useCustomDimensions();
-  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const { keyboardShown } = useKeyboard();
   const [showModal, setShowModal] = useState<SwapInputTarget | undefined>();
   const showDetails = !!sourceToken && !!toToken && !inputError;
 
@@ -51,11 +50,6 @@ export function SwapView() {
       token => token.address === SwapController.state.toToken?.address
     ) >= 0;
 
-  const paddingBottom = Platform.select({
-    android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
-    default: Spacing['2xl']
-  });
-
   const getActionButtonState = () => {
     if (!SwapController.state.sourceToken || !SwapController.state.toToken) {
       return { text: 'Select token', disabled: true };
@@ -159,11 +153,11 @@ export function SwapView() {
   return (
     <>
       <ScrollView
-        style={{ paddingHorizontal: padding }}
+        style={[{ paddingHorizontal: padding }, keyboardShown && styles.withKeyboard]}
         bounces={false}
         keyboardShouldPersistTaps="always"
       >
-        <FlexView padding="l" alignItems="center" justifyContent="center" style={{ paddingBottom }}>
+        <FlexView padding={['l', 'l', '2xl', 'l']} alignItems="center" justifyContent="center">
           <SwapInput
             token={sourceToken}
             value={sourceTokenAmount}
@@ -210,15 +204,8 @@ export function SwapView() {
           </Button>
         </FlexView>
       </ScrollView>
-      <Modal
-        isVisible={!!showModal}
-        useNativeDriver
-        useNativeDriverForBackdrop
-        onBackdropPress={onModalClose}
-        onDismiss={onModalClose}
-        style={styles.modal}
-      >
-        <SwapSelectTokenView onClose={onModalClose} type={showModal} />
+      <Modal visible={!!showModal} transparent animationType="slide" onRequestClose={onModalClose}>
+        <SwapSelectTokenView style={styles.modalContent} onClose={onModalClose} type={showModal} />
       </Modal>
     </>
   );