@reown/appkit-react-native 0.0.0-feat-multichain-20250818154639 → 0.0.0-feat-multichain-20250903132047

package/src/partials/w3m-connecting-mobile/index.tsx

@@ -34,7 +34,7 @@ interface Props {
 
 export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   const { data } = RouterController.state;
-  const { maxWidth: width } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const { wcUri, wcError } = useSnapshot(WcController.state);
   const { walletImages } = useSnapshot(AssetController.state);
   const [errorType, setErrorType] = useState<BodyErrorType>();
@@ -100,13 +100,13 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   }, [wcUri, onConnect]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
-      <FlexView
-        alignItems="center"
-        alignSelf="center"
-        padding={['2xl', 'l', '0', 'l']}
-        style={{ width }}
-      >
+    <ScrollView
+      bounces={false}
+      fadingEdgeLength={20}
+      style={{ paddingHorizontal: padding }}
+      contentContainerStyle={styles.container}
+    >
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '0', 'l']}>
         <LoadingThumbnail paused={!!errorType || wcError}>
           <WalletImage
             size="xl"

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

@@ -3,7 +3,8 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 
 export default StyleSheet.create({
   container: {
-    paddingBottom: Spacing['3xl']
+    paddingBottom: Spacing['3xl'],
+    minHeight: '30%'
   },
   retryButton: {
     marginTop: Spacing.m

package/src/partials/w3m-connecting-qrcode/index.tsx

@@ -16,11 +16,14 @@ import {
 } from '@reown/appkit-ui-react-native';
 import styles from './styles';
 import { ReownButton } from './components/ReownButton';
+import { useWindowDimensions } from 'react-native';
 
 export function ConnectingQrCode() {
+  const { height, width } = useWindowDimensions();
+  const windowSize = Math.min(height, width);
   const { wcUri } = useSnapshot(WcController.state);
   const showCopy = OptionsController.isClipboardAvailable();
-  const { maxWidth: windowSize, isPortrait } = useCustomDimensions();
+  const { isPortrait } = useCustomDimensions();
   const qrSize = (windowSize - Spacing.xl * 2) / (isPortrait ? 1 : 1.5);
 
   const onCopyAddress = () => {

package/src/partials/w3m-connecting-web/index.tsx

@@ -65,7 +65,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
   }, [data?.wallet, wcUri]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20}>
+    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
       <FlexView alignItems="center" padding={['2xl', 'm', '3xl', 'm']}>
         <LoadingThumbnail paused={wcError}>
           <WalletImage

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

@@ -32,7 +32,7 @@ export function Header() {
       Connect: 'Connect wallet',
       ConnectSocials: 'All socials',
       ConnectingExternal: walletName ?? 'Connect wallet',
-      ConnectingSiwe: undefined,
+      ConnectingSiwe: 'Sign in',
       ConnectingSocial: socialName ?? 'Connecting Social',
       ConnectingWalletConnect: walletName ?? 'WalletConnect',
       GetWallet: 'Get a wallet',
@@ -58,7 +58,8 @@ export function Header() {
     }[_view];
   };
 
-  const noCloseViews = ['OnRampSettings'];
+  const noCloseViews = ['OnRampSettings', 'ConnectingSiwe'];
+  const noBackViews = ['UnsupportedChain'];
   const showClose = !noCloseViews.includes(view);
   const header = headings(data, view);
 
@@ -71,7 +72,9 @@ export function Header() {
   };
 
   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) {

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

@@ -9,10 +9,12 @@ import {
   Separator,
   Spacing,
   Text,
+  useCustomDimensions,
   useTheme
 } from '@reown/appkit-ui-react-native';
-import styles from './styles';
 import { AssetController, AssetUtil, ConnectionsController } from '@reown/appkit-core-react-native';
+import { Placeholder } from '../w3m-placeholder';
+import styles from './styles';
 
 interface SelectorModalProps {
   title?: string;
@@ -44,6 +46,7 @@ export function SelectorModal({
   showNetwork
 }: SelectorModalProps) {
   const Theme = useTheme();
+  const { maxHeight } = useCustomDimensions();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
@@ -55,66 +58,83 @@ export function SelectorModal({
   return (
     <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"
+        <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="No tokens found"
+              description="There's no available tokens for this network"
+            />
+          }
+          ListHeaderComponent={
+            <>
+              <FlexView
+                alignItems="center"
+                justifyContent="space-between"
+                flexDirection="row"
+                style={styles.headerTop}
+              >
+                <IconLink
+                  icon="chevronLeft"
+                  onPress={onClose}
+                  testID="selector-modal-button-back"
                 />
-              )
-            ) : (
-              <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>
-          ) : null}
-          <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>
+                {!!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}
+          getItemLayout={
+            itemHeight
+              ? (_, index) => ({
+                  length: itemHeight + SEPARATOR_HEIGHT,
+                  offset: (itemHeight + SEPARATOR_HEIGHT) * index,
+                  index
+                })
+              : undefined
+          }
+        />
       </View>
     </Modal>
   );

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

@@ -8,21 +8,19 @@ export default StyleSheet.create({
     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,
@@ -38,6 +36,6 @@ export default StyleSheet.create({
     marginHorizontal: Spacing.s
   },
   separator: {
-    marginTop: Spacing.m
+    marginVertical: Spacing.xs
   }
 });

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

@@ -278,7 +278,7 @@ export function AccountDefaultView() {
                 testID="button-onramp"
                 style={styles.actionButton}
               >
-                <Text color="fg-100">Buy crypto</Text>
+                <Text color="fg-100">Buy Crypto</Text>
               </ListItem>
             ) : null}
             {showSend ? (
@@ -332,7 +332,7 @@ export function AccountDefaultView() {
                 loading={loading}
               >
                 <Text color="fg-100">{`Switch to your ${
-                  accountType === 'eoa' ? 'smart account' : 'EOA'
+                  accountType === 'eoa' ? 'Smart Account' : 'EOA'
                 }`}</Text>
               </ListItem>
             ) : null}

package/src/views/w3m-all-wallets-view/index.tsx

@@ -5,7 +5,6 @@ import {
   FlexView,
   IconLink,
   SearchBar,
-  Spacing,
   useTheme,
   useCustomDimensions
 } from '@reown/appkit-ui-react-native';
@@ -15,24 +14,14 @@ import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { AllWalletsList } from '../../partials/w3m-all-wallets-list';
 import { AllWalletsSearch } from '../../partials/w3m-all-wallets-search';
 import { WcHelpersUtil } from '../../utils/HelpersUtil';
-import type { LayoutChangeEvent } from 'react-native';
 
 export function AllWalletsView() {
   const Theme = useTheme();
   const [searchQuery, setSearchQuery] = useState<string>('');
-  const { maxWidth } = useCustomDimensions();
-  const [headerHeight, setHeaderHeight] = useState<number>(0);
-  const numColumns = 4;
-  const usableWidth = maxWidth - Spacing['s'] * 2;
-  const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns));
+  const { padding } = useCustomDimensions();
 
   const { debouncedCallback: onInputChange } = useDebounceCallback({ callback: setSearchQuery });
 
-  const onHeaderLayout = (event: LayoutChangeEvent) => {
-    const { height } = event.nativeEvent.layout;
-    setHeaderHeight(height);
-  };
-
   const onWalletPress = (wallet: WcWallet) => {
     const isExternal = WcHelpersUtil.isExternalWallet(wallet);
     if (isExternal) {
@@ -63,13 +52,16 @@ export function AllWalletsView() {
   const headerTemplate = () => {
     return (
       <FlexView
-        padding={['s', 'l', 'xs', 'l']}
+        padding={['s', 'l', '4xs', 'l']}
         flexDirection="row"
-        onLayout={onHeaderLayout}
         alignItems="center"
         style={[
           styles.header,
-          { backgroundColor: Theme['bg-100'], shadowColor: Theme['bg-100'], width: maxWidth }
+          {
+            backgroundColor: Theme['bg-100'],
+            shadowColor: Theme['bg-100'],
+            marginHorizontal: padding
+          }
         ]}
       >
         <SearchBar
@@ -93,25 +85,10 @@ export function AllWalletsView() {
 
   const listTemplate = () => {
     if (searchQuery) {
-      return (
-        <AllWalletsSearch
-          columns={numColumns}
-          itemWidth={itemWidth}
-          searchQuery={searchQuery}
-          onItemPress={onWalletPress}
-          headerHeight={headerHeight}
-        />
-      );
+      return <AllWalletsSearch searchQuery={searchQuery} onItemPress={onWalletPress} />;
     }
 
-    return (
-      <AllWalletsList
-        columns={numColumns}
-        itemWidth={itemWidth}
-        onItemPress={onWalletPress}
-        headerHeight={headerHeight}
-      />
-    );
+    return <AllWalletsList onItemPress={onWalletPress} />;
   };
 
   return (

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

@@ -62,7 +62,7 @@ export function ConnectView() {
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
-      <FlexView padding={['xs', '0', '2xl', '0']}>
+      <FlexView padding={['xs', '0', 's', '0']}>
         {isSocialEnabled ? (
           <>
             <SocialLoginList options={features?.socials} />

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

@@ -29,7 +29,7 @@ export function ConnectingExternalView() {
   const { data } = useSnapshot(RouterController.state);
   const { walletImages } = useSnapshot(AssetController.state);
   const { connect } = useInternalAppKit();
-  const { maxWidth: width } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType });
 
@@ -92,13 +92,13 @@ export function ConnectingExternalView() {
   }, [onConnect]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
-      <FlexView
-        alignItems="center"
-        alignSelf="center"
-        padding={['2xl', 'l', '0', 'l']}
-        style={{ width }}
-      >
+    <ScrollView
+      bounces={false}
+      fadingEdgeLength={20}
+      style={{ paddingHorizontal: padding }}
+      contentContainerStyle={styles.container}
+    >
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '0', 'l']}>
         <LoadingThumbnail paused={!!errorType}>
           <WalletImage
             size="xl"

package/src/views/w3m-connecting-external-view/styles.ts

@@ -3,7 +3,8 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   container: {
-    paddingBottom: Spacing['3xl']
+    paddingBottom: Spacing['3xl'],
+    minHeight: '30%'
   },
   retryButton: {
     marginTop: Spacing.m

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

@@ -5,12 +5,13 @@ import {
   Button,
   DoubleImageLoader,
   FlexView,
-  IconLink,
-  Text
+  Text,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
   ConnectionsController,
   EventsController,
+  ModalController,
   OptionsController,
   RouterController,
   SnackController
@@ -19,9 +20,11 @@ import { SIWEController } from '@reown/appkit-siwe-react-native';
 
 import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
+import { ScrollView } from 'react-native';
 
 export function ConnectingSiweView() {
   const { disconnect } = useInternalAppKit();
+  const { padding } = useCustomDimensions();
   const { metadata } = useSnapshot(OptionsController.state);
   const { activeAddress, identity, walletInfo } = useSnapshot(ConnectionsController.state);
   const [isSigning, setIsSigning] = useState(false);
@@ -49,6 +52,8 @@ export function ConnectingSiweView() {
         properties: { network, isSmartAccount }
       });
 
+      ModalController.close();
+
       return session;
     } catch (error) {
       SnackController.showError('Signature declined');
@@ -81,46 +86,48 @@ export function ConnectingSiweView() {
   };
 
   return (
-    <FlexView padding={['2xl', 's', '3xl', 's']}>
-      <IconLink
-        icon="close"
-        size="md"
-        onPress={onCancel}
-        testID="header-close"
-        style={styles.closeButton}
-      />
-      <Text variant="paragraph-600" numberOfLines={1} center>
-        Sign in
-      </Text>
-      <DoubleImageLoader
-        style={styles.logoContainer}
-        leftImage={dappIcon}
-        rightImage={walletIcon}
-        renderRightPlaceholder={() => (
-          <Avatar imageSrc={identity?.avatar} address={activeAddress} size={60} borderWidth={0} />
-        )}
-        rightItemStyle={!walletIcon && styles.walletAvatar}
-      />
-      <Text center variant="medium-600" color="fg-100" style={styles.title}>
-        {dappName} needs to connect to your wallet
-      </Text>
-      <Text center variant="small-400" color="fg-200" style={styles.subtitle}>
-        Sign this message to prove you own this wallet and proceed. Cancelling will disconnect you
-      </Text>
-      <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
-        <Button variant="shade" onPress={onCancel} style={styles.button} loading={isDisconnecting}>
-          Cancel
-        </Button>
-        <Button
-          variant="fill"
-          loading={isSigning}
-          disabled={isDisconnecting}
-          onPress={onSign}
-          style={styles.button}
-        >
-          Sign
-        </Button>
+    <ScrollView
+      bounces={false}
+      fadingEdgeLength={20}
+      style={{ paddingHorizontal: padding }}
+      contentContainerStyle={styles.container}
+    >
+      <FlexView padding={['0', 's', '3xl', 's']}>
+        <DoubleImageLoader
+          style={styles.logoContainer}
+          leftImage={dappIcon}
+          rightImage={walletIcon}
+          renderRightPlaceholder={() => (
+            <Avatar imageSrc={identity?.avatar} address={activeAddress} size={60} borderWidth={0} />
+          )}
+          rightItemStyle={!walletIcon && styles.walletAvatar}
+        />
+        <Text center variant="medium-600" color="fg-100" style={styles.title}>
+          {dappName} needs to connect to your wallet
+        </Text>
+        <Text center variant="small-400" color="fg-200" style={styles.subtitle}>
+          Sign this message to prove you own this wallet and proceed. Cancelling will disconnect you
+        </Text>
+        <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
+          <Button
+            variant="shade"
+            onPress={onCancel}
+            style={styles.button}
+            loading={isDisconnecting}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="fill"
+            loading={isSigning}
+            disabled={isDisconnecting}
+            onPress={onSign}
+            style={styles.button}
+          >
+            Sign
+          </Button>
+        </FlexView>
       </FlexView>
-    </FlexView>
+    </ScrollView>
   );
 }

package/src/views/w3m-connecting-siwe-view/styles.ts

@@ -2,6 +2,9 @@ import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
+  container: {
+    minHeight: '30%'
+  },
   logoContainer: {
     marginTop: Spacing.xl,
     marginBottom: Spacing.m
@@ -16,13 +19,6 @@ export default StyleSheet.create({
     marginHorizontal: '10%',
     marginVertical: Spacing.l
   },
-  closeButton: {
-    alignSelf: 'flex-end',
-    right: Spacing.xl,
-    top: Spacing.l,
-    position: 'absolute',
-    zIndex: 2
-  },
   walletAvatar: {
     borderRadius: BorderRadius.full
   }