@reown/appkit-react-native 2.0.0 → 2.0.2

package/src/partials/w3m-connecting-web/styles.ts

@@ -2,6 +2,9 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
+  container: {
+    minHeight: '30%'
+  },
   openButton: {
     marginTop: Spacing.m
   },

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

@@ -1,31 +1,28 @@
 import { useSnapshot } from 'valtio';
 import {
   RouterController,
-  ModalController,
   EventsController,
-  type RouterControllerState,
-  ConnectionController,
-  ConnectorController,
-  type AppKitFrameProvider
+  type RouterControllerState
 } from '@reown/appkit-core-react-native';
 import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
 import { StringUtil } from '@reown/appkit-common-react-native';
 
 import styles from './styles';
+import { useInternalAppKit } from '../../AppKitContext';
 
 export function Header() {
+  const { close, back } = useInternalAppKit();
   const { data, view } = useSnapshot(RouterController.state);
   const onHelpPress = () => {
-    RouterController.push('WhatIsAWallet');
+    RouterController.push('WhatIsAWallet', undefined, 'backward');
     EventsController.sendEvent({ type: 'track', event: 'CLICK_WALLET_HELP' });
   };
 
   const headings = (_data: RouterControllerState['data'], _view: RouterControllerState['view']) => {
-    const connectorName = _data?.connector?.name;
     const walletName = _data?.wallet?.name;
     const networkName = _data?.network?.name;
-    const socialName = ConnectionController.state.selectedSocialProvider
-      ? StringUtil.capitalize(ConnectionController.state.selectedSocialProvider)
+    const socialName = _data?.socialProvider
+      ? StringUtil.capitalize(_data?.socialProvider)
       : undefined;
 
     return {
@@ -34,14 +31,10 @@ export function Header() {
       AllWallets: 'All wallets',
       Connect: 'Connect wallet',
       ConnectSocials: 'All socials',
-      ConnectingExternal: connectorName ?? 'Connect wallet',
-      ConnectingSiwe: undefined,
-      ConnectingFarcaster: socialName ?? 'Connecting Social',
+      ConnectingExternal: walletName ?? 'Connect wallet',
+      SIWXSignMessage: 'Sign in',
       ConnectingSocial: socialName ?? 'Connecting Social',
-      ConnectingWalletConnect: walletName ?? 'WalletConnect',
-      Create: 'Create wallet',
-      EmailVerifyDevice: ' ',
-      EmailVerifyOtp: 'Confirm email',
+      WalletConnect: walletName ?? 'WalletConnect',
       GetWallet: 'Get a wallet',
       Networks: 'Select network',
       OnRamp: undefined,
@@ -51,15 +44,10 @@ export function Header() {
       OnRampTransaction: ' ',
       SwitchNetwork: networkName ?? 'Switch network',
       Swap: 'Swap',
-      SwapSelectToken: 'Select token',
       SwapPreview: 'Review swap',
       Transactions: 'Activity',
       UnsupportedChain: 'Switch network',
-      UpdateEmailPrimaryOtp: 'Confirm current email',
-      UpdateEmailSecondaryOtp: 'Confirm new email',
-      UpdateEmailWallet: 'Edit email',
       UpgradeEmailWallet: 'Upgrade wallet',
-      UpgradeToSmartAccount: undefined,
       WalletCompatibleNetworks: 'Compatible networks',
       WalletReceive: 'Receive',
       WalletSend: 'Send',
@@ -70,44 +58,23 @@ export function Header() {
     }[_view];
   };
 
-  const noCloseViews = ['OnRampSettings'];
+  const noCloseViews = ['OnRampSettings', 'SIWXSignMessage'];
+  const noBackViews = ['UnsupportedChain', 'SIWXSignMessage'];
   const showClose = !noCloseViews.includes(view);
   const header = headings(data, view);
 
-  const checkSocial = () => {
-    if (
-      RouterController.state.view === 'ConnectingFarcaster' ||
-      RouterController.state.view === 'ConnectingSocial'
-    ) {
-      const socialProvider = ConnectionController.state.selectedSocialProvider;
-      const authProvider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-
-      if (authProvider && socialProvider === 'farcaster') {
-        // TODO: remove this once Farcaster session refresh is implemented
-        // @ts-expect-error
-        authProvider.webviewRef?.current?.reload();
-      }
-
-      EventsController.sendEvent({
-        type: 'track',
-        event: 'SOCIAL_LOGIN_CANCELED',
-        properties: { provider: ConnectionController.state.selectedSocialProvider! }
-      });
-    }
-  };
-
   const handleGoBack = () => {
-    checkSocial();
-    RouterController.goBack();
+    back();
   };
 
   const handleClose = () => {
-    checkSocial();
-    ModalController.close();
+    close();
   };
 
   const dynamicButtonTemplate = () => {
-    const showBack = RouterController.state.history.length > 1;
+    const showBack =
+      RouterController.state.history.length > 1 &&
+      !noBackViews.includes(RouterController.state.view);
     const showHelp = RouterController.state.view === 'Connect';
 
     if (showHelp) {
@@ -133,7 +100,12 @@ export function Header() {
       padding={['l', 'xl', bottomPadding, 'xl']}
     >
       {dynamicButtonTemplate()}
-      <Text variant="paragraph-600" numberOfLines={1} testID="header-text">
+      <Text
+        variant="paragraph-600"
+        numberOfLines={1}
+        style={styles.headerText}
+        testID="header-text"
+      >
         {header}
       </Text>
       {showClose ? (

package/src/partials/w3m-header/styles.ts

@@ -4,5 +4,8 @@ export default StyleSheet.create({
   iconPlaceholder: {
     height: 32,
     width: 32
+  },
+  headerText: {
+    flexShrink: 1
   }
 });

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-placeholder/index.tsx

@@ -32,20 +32,20 @@ export function Placeholder({
 }: Props) {
   return (
     <FlexView alignItems="center" justifyContent="center" style={[styles.container, style]}>
-      {icon && (
+      {icon ? (
         <IconBox icon={icon} size="xl" iconColor={iconColor} background style={styles.icon} />
-      )}
-      {title && (
+      ) : null}
+      {title ? (
         <Text variant="paragraph-500" style={styles.title}>
           {title}
         </Text>
-      )}
-      {description && (
+      ) : null}
+      {description ? (
         <Text variant="small-400" color="fg-200" center>
           {description}
         </Text>
-      )}
-      {actionPress && (
+      ) : null}
+      {actionPress ? (
         <Button
           style={styles.button}
           iconLeft={actionIcon}
@@ -55,7 +55,7 @@ export function Placeholder({
         >
           {actionTitle ?? ''}
         </Button>
-      )}
+      ) : null}
     </FlexView>
   );
 }

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,
@@ -10,10 +9,12 @@ import {
   Separator,
   Spacing,
   Text,
+  useCustomDimensions,
   useTheme
 } from '@reown/appkit-ui-react-native';
+import { AssetController, AssetUtil, ConnectionsController } from '@reown/appkit-core-react-native';
+import { Placeholder } from '../w3m-placeholder';
 import styles from './styles';
-import { AssetUtil, ConnectionsController } from '@reown/appkit-core-react-native';
 
 interface SelectorModalProps {
   title?: string;
@@ -27,6 +28,8 @@ interface SelectorModalProps {
   itemHeight?: number;
   showNetwork?: boolean;
   searchPlaceholder?: string;
+  emptyTitle?: string;
+  emptyDescription?: string;
 }
 
 const SEPARATOR_HEIGHT = Spacing.s;
@@ -42,69 +45,83 @@ export function SelectorModal({
   searchPlaceholder,
   keyExtractor,
   itemHeight,
-  showNetwork
+  showNetwork,
+  emptyTitle = 'No tokens found',
+  emptyDescription = "There's no available tokens for this network"
 }: SelectorModalProps) {
   const Theme = useTheme();
+  const { maxHeight } = useCustomDimensions();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const renderSeparator = () => {
     return <View style={{ height: SEPARATOR_HEIGHT }} />;
   };
 
   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>
-            ) : (
-              <IconBox
-                style={styles.iconPlaceholder}
-                icon="networkPlaceholder"
-                background
-                iconColor="fg-200"
-                size="sm"
-              />
-            )
-          ) : (
-            <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>
-        )}
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <View style={styles.modal}>
         <FlatList
           data={items}
           renderItem={renderItem}
           fadingEdgeLength={20}
+          automaticallyAdjustKeyboardInsets={false}
+          keyboardShouldPersistTaps="always"
+          style={[styles.container, { backgroundColor: Theme['bg-100'], maxHeight }]}
+          ListHeaderComponentStyle={styles.header}
+          ListEmptyComponent={
+            <Placeholder icon="coinPlaceholder" title={emptyTitle} description={emptyDescription} />
+          }
+          ListHeaderComponent={
+            <>
+              <FlexView
+                alignItems="center"
+                justifyContent="space-between"
+                flexDirection="row"
+                style={styles.headerTop}
+              >
+                <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"
+                    />
+                  )
+                ) : (
+                  <View style={styles.iconPlaceholder} />
+                )}
+              </FlexView>
+              <SearchBar
+                onChangeText={onSearch}
+                style={styles.searchBar}
+                placeholder={searchPlaceholder}
+              />
+              {selectedItem ? (
+                <FlexView>
+                  {renderItem({ item: selectedItem })}
+                  <Separator style={styles.separator} color="gray-glass-005" />
+                </FlexView>
+              ) : null}
+            </>
+          }
           contentContainerStyle={styles.listContent}
           ItemSeparatorComponent={renderSeparator}
           keyExtractor={keyExtractor}
@@ -118,7 +135,7 @@ export function SelectorModal({
               : undefined
           }
         />
-      </FlexView>
+      </View>
     </Modal>
   );
 }

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

@@ -3,25 +3,24 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   modal: {
+    flex: 1,
     margin: 0,
     justifyContent: 'flex-end'
   },
   header: {
-    marginBottom: Spacing.s,
-    paddingHorizontal: Spacing.m
+    paddingTop: Spacing['2xs'],
+    paddingBottom: Spacing.s
+  },
+  headerTop: {
+    paddingHorizontal: Spacing.m,
+    paddingBottom: Spacing.xs
   },
   container: {
-    height: '80%',
     borderTopLeftRadius: BorderRadius.l,
-    borderTopRightRadius: BorderRadius.l,
-    paddingTop: Spacing.m
-  },
-  selectedContainer: {
-    paddingHorizontal: Spacing.m
+    borderTopRightRadius: BorderRadius.l
   },
   listContent: {
-    paddingTop: Spacing.s,
-    paddingHorizontal: Spacing.m
+    paddingTop: Spacing.s
   },
   iconPlaceholder: {
     height: 32,
@@ -37,6 +36,6 @@ export default StyleSheet.create({
     marginHorizontal: Spacing.s
   },
   separator: {
-    marginTop: Spacing.m
+    marginVertical: Spacing.xs
   }
 });

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { TextInput } from 'react-native';
 import { FlexView, useTheme } from '@reown/appkit-ui-react-native';
-import { ConnectionController, SendController } from '@reown/appkit-core-react-native';
+import { SendController } from '@reown/appkit-core-react-native';
 
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import styles from './styles';
@@ -15,20 +15,9 @@ export function SendInputAddress({ value }: SendInputAddressProps) {
   const [inputValue, setInputValue] = useState<string | undefined>(value);
 
   const onSearch = async (search: string) => {
-    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);
-    }
+    SendController.setReceiverAddress(search);
+    SendController.setReceiverProfileName(undefined);
+    SendController.setReceiverProfileImageUrl(undefined);
   };
 
   const { debouncedCallback: onDebounceSearch } = useDebounceCallback({

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,26 @@ import styles from './styles';
 export interface SendInputTokenProps {
   token?: Balance;
   sendTokenAmount?: number;
-  gasPrice?: number;
   style?: StyleProp<ViewStyle>;
   onTokenPress?: () => void;
+  loading?: boolean;
+  testID?: string;
 }
 
 export function SendInputToken({
   token,
   sendTokenAmount,
-  gasPrice,
   style,
-  onTokenPress
+  onTokenPress,
+  loading,
+  testID
 }: 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 +48,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,
@@ -88,15 +88,17 @@ export function SendInputToken({
           selectTextOnFocus={false}
           numberOfLines={1}
           autoFocus={!!token}
+          testID={testID}
         />
         <TokenButton
           imageUrl={token?.iconUrl}
           text={token?.symbol}
           onPress={onTokenPress}
           chevron
+          testID={testID ? `${testID}-button` : undefined}
         />
       </FlexView>
-      {token && (
+      {token ? (
         <FlexView
           flexDirection="row"
           alignItems="center"
@@ -113,7 +115,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);
   }