@reown/appkit-react-native 0.0.0-feat-multichain-20250818141206 → 0.0.0-feat-multichain-20250902153701

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.xs * 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-siwe-view/index.tsx

@@ -11,6 +11,7 @@ import {
 import {
   ConnectionsController,
   EventsController,
+  ModalController,
   OptionsController,
   RouterController,
   SnackController
@@ -49,6 +50,8 @@ export function ConnectingSiweView() {
         properties: { network, isSmartAccount }
       });
 
+      ModalController.close();
+
       return session;
     } catch (error) {
       SnackController.showError('Signature declined');

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

@@ -19,9 +19,10 @@ import { ConstantsUtil, StringUtil } from '@reown/appkit-common-react-native';
 
 import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
+import { ScrollView } from 'react-native';
 
 export function ConnectingSocialView() {
-  const { maxWidth: width } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const { connect } = useInternalAppKit();
   const { data } = useSnapshot(RouterController.state);
   const { wcUri } = useSnapshot(WcController.state);
@@ -74,32 +75,29 @@ export function ConnectingSocialView() {
   }, [wcUri, onConnect]);
 
   return (
-    <FlexView
-      alignItems="center"
-      alignSelf="center"
-      padding={['2xl', 'l', '3xl', 'l']}
-      style={{ width }}
-    >
-      <LoadingThumbnail paused={!!error}>
-        <Logo logo={data?.socialProvider ?? 'more'} height={72} width={72} />
-        {error ? (
-          <IconBox
-            icon={'close'}
-            border
-            background
-            backgroundColor="icon-box-bg-error-100"
-            size="sm"
-            iconColor="error-100"
-            style={styles.errorIcon}
-          />
-        ) : null}
-      </LoadingThumbnail>
-      <Text style={styles.continueText} variant="paragraph-500">
-        Continue with {StringUtil.capitalize(data?.socialProvider ?? 'Login')}
-      </Text>
-      <Text variant="small-400" color="fg-200">
-        Continue in your browser
-      </Text>
-    </FlexView>
+    <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '2xl', 'l']}>
+        <LoadingThumbnail paused={!!error}>
+          <Logo logo={data?.socialProvider ?? 'more'} height={72} width={72} />
+          {error ? (
+            <IconBox
+              icon={'close'}
+              border
+              background
+              backgroundColor="icon-box-bg-error-100"
+              size="sm"
+              iconColor="error-100"
+              style={styles.errorIcon}
+            />
+          ) : null}
+        </LoadingThumbnail>
+        <Text style={styles.continueText} variant="paragraph-500">
+          Continue with {StringUtil.capitalize(data?.socialProvider ?? 'Login')}
+        </Text>
+        <Text variant="small-400" color="fg-200">
+          Continue in your browser
+        </Text>
+      </FlexView>
+    </ScrollView>
   );
 }

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

@@ -1,4 +1,4 @@
-import { ScrollView, View } from 'react-native';
+import { ScrollView, useWindowDimensions, View } from 'react-native';
 import {
   CardSelect,
   CardSelectWidth,
@@ -24,12 +24,14 @@ import { useInternalAppKit } from '../../AppKitContext';
 import { useSnapshot } from 'valtio';
 
 export function NetworksView() {
+  const { height, width } = useWindowDimensions();
+  const windowSize = Math.min(height, width);
   const { networks, isConnected } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
-  const { maxWidth: width, padding } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const numColumns = 4;
-  const usableWidth = width - Spacing.xs * 2 - Spacing['4xs'];
+  const usableWidth = windowSize - Spacing.xs * 2 - Spacing['4xs'];
   const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns));
   const itemGap = Math.abs(
     Math.trunc((usableWidth - numColumns * CardSelectWidth) / numColumns) / 2
@@ -83,11 +85,7 @@ export function NetworksView() {
 
   return (
     <>
-      <ScrollView
-        bounces={false}
-        fadingEdgeLength={20}
-        style={{ paddingHorizontal: padding, marginBottom: Spacing.xl }}
-      >
+      <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
         <FlexView flexDirection="row" flexWrap="wrap" padding={['xs', 'xs', '4xl', 'xs']}>
           {networksTemplate()}
         </FlexView>

package/src/views/w3m-onramp-checkout-view/index.tsx

@@ -15,14 +15,16 @@ import {
   Spacing,
   Text,
   Toggle,
+  useCustomDimensions,
   useTheme
 } from '@reown/appkit-ui-react-native';
-import { StyleSheet } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 import { useSnapshot } from 'valtio';
 import { NumberUtil, StringUtil } from '@reown/appkit-common-react-native';
 
 export function OnRampCheckoutView() {
   const Theme = useTheme();
+  const { padding } = useCustomDimensions();
   const { themeMode } = useSnapshot(ThemeController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const { selectedQuote, selectedPaymentMethod, purchaseCurrency } = useSnapshot(
@@ -49,164 +51,166 @@ export function OnRampCheckoutView() {
   };
 
   return (
-    <FlexView padding={['2xl', 'l', '4xl', 'l']}>
-      <FlexView alignItems="center">
-        <Text color="fg-200">You Buy</Text>
-        <FlexView flexDirection="row" alignItems="center">
-          <Text style={[styles.amount, { color: Theme['fg-100'] }]}>{value}</Text>
-          <Text variant="paragraph-400" color="fg-200">
-            {symbol?.split('_')[0] ?? symbol ?? ''}
-          </Text>
-        </FlexView>
-        <FlexView flexDirection="row" alignItems="center" justifyContent="center">
-          <Text color="fg-200">via </Text>
-          {providerImage ? <Image source={providerImage} style={styles.providerImage} /> : null}
-          <Text color="fg-200">{StringUtil.capitalize(selectedQuote?.serviceProvider)}</Text>
+    <ScrollView style={{ paddingHorizontal: padding }}>
+      <FlexView padding={['2xl', 'l', '4xl', 'l']}>
+        <FlexView alignItems="center">
+          <Text color="fg-200">You Buy</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text style={[styles.amount, { color: Theme['fg-100'] }]}>{value}</Text>
+            <Text variant="paragraph-400" color="fg-200">
+              {symbol?.split('_')[0] ?? symbol ?? ''}
+            </Text>
+          </FlexView>
+          <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+            <Text color="fg-200">via </Text>
+            {providerImage ? <Image source={providerImage} style={styles.providerImage} /> : null}
+            <Text color="fg-200">{StringUtil.capitalize(selectedQuote?.serviceProvider)}</Text>
+          </FlexView>
         </FlexView>
-      </FlexView>
-      <Separator style={styles.separator} color="gray-glass-010" />
-      <FlexView
-        padding={['s', 's', 'xs', 's']}
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <Text color="fg-200">You Pay</Text>
-        <Text>
-          {selectedQuote?.sourceAmount} {selectedQuote?.sourceCurrencyCode}
-        </Text>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'xs', 's']}
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <Text color="fg-200">You Receive</Text>
-        <FlexView flexDirection="row" alignItems="center">
+        <Separator style={styles.separator} color="gray-glass-010" />
+        <FlexView
+          padding={['s', 's', 'xs', 's']}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Text color="fg-200">You Pay</Text>
           <Text>
-            {value} {symbol?.split('_')[0] ?? ''}
+            {selectedQuote?.sourceAmount} {selectedQuote?.sourceCurrencyCode}
           </Text>
-          {purchaseCurrency?.symbolImageUrl ? (
-            <Image
-              source={purchaseCurrency?.symbolImageUrl}
-              style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
-            />
-          ) : null}
         </FlexView>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'xs', 's']}
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text color="fg-200">Network</Text>
-        <FlexView flexDirection="row" alignItems="center">
-          <Text>{purchaseCurrency?.chainName}</Text>
+        <FlexView
+          padding={['xs', 's', 'xs', 's']}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Text color="fg-200">You Receive</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text>
+              {value} {symbol?.split('_')[0] ?? ''}
+            </Text>
+            {purchaseCurrency?.symbolImageUrl ? (
+              <Image
+                source={purchaseCurrency?.symbolImageUrl}
+                style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
+              />
+            ) : null}
+          </FlexView>
         </FlexView>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'm', 's']}
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text color="fg-200">Pay with</Text>
         <FlexView
+          padding={['xs', 's', 'xs', 's']}
           flexDirection="row"
           alignItems="center"
-          style={[styles.paymentMethodContainer, { borderColor: Theme['gray-glass-020'] }]}
+          justifyContent="space-between"
         >
-          {paymentLogo ? (
-            <Image
-              source={paymentLogo}
-              style={styles.paymentMethodImage}
-              tintColor={Theme['fg-150']}
-            />
-          ) : null}
-          <Text variant="small-600" color="fg-150">
-            {selectedPaymentMethod?.name}
-          </Text>
+          <Text color="fg-200">Network</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text>{purchaseCurrency?.chainName}</Text>
+          </FlexView>
+        </FlexView>
+        <FlexView
+          padding={['xs', 's', 'm', 's']}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Text color="fg-200">Pay with</Text>
+          <FlexView
+            flexDirection="row"
+            alignItems="center"
+            style={[styles.paymentMethodContainer, { borderColor: Theme['gray-glass-020'] }]}
+          >
+            {paymentLogo ? (
+              <Image
+                source={paymentLogo}
+                style={styles.paymentMethodImage}
+                tintColor={Theme['fg-150']}
+              />
+            ) : null}
+            <Text variant="small-600" color="fg-150">
+              {selectedPaymentMethod?.name}
+            </Text>
+          </FlexView>
         </FlexView>
-      </FlexView>
 
-      {showFees ? (
-        <Toggle
-          title={
-            <>
-              <Text variant="paragraph-400" color="fg-200">
-                Fees{' '}
-                {showTotalFee ? (
-                  <Text variant="paragraph-400">
-                    {selectedQuote?.totalFee} {selectedQuote?.sourceCurrencyCode}
+        {showFees ? (
+          <Toggle
+            title={
+              <>
+                <Text variant="paragraph-400" color="fg-200">
+                  Fees{' '}
+                  {showTotalFee ? (
+                    <Text variant="paragraph-400">
+                      {selectedQuote?.totalFee} {selectedQuote?.sourceCurrencyCode}
+                    </Text>
+                  ) : null}
+                </Text>
+              </>
+            }
+            style={[styles.feesToggle, { backgroundColor: Theme['gray-glass-002'] }]}
+            contentContainerStyle={styles.feesToggleContent}
+          >
+            {showNetworkFee ? (
+              <FlexView
+                flexDirection="row"
+                justifyContent="space-between"
+                style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
+                margin={['0', '0', 'xs', '0']}
+              >
+                <Text variant="small-500" color="fg-150">
+                  Network Fees
+                </Text>
+                <FlexView flexDirection="row" alignItems="center">
+                  {networkImage ? (
+                    <Image
+                      source={networkImage}
+                      style={[styles.networkImage, { borderColor: Theme['gray-glass-010'] }]}
+                    />
+                  ) : null}
+                  <Text variant="small-400">
+                    {selectedQuote?.networkFee} {selectedQuote?.sourceCurrencyCode}
                   </Text>
-                ) : null}
-              </Text>
-            </>
-          }
-          style={[styles.feesToggle, { backgroundColor: Theme['gray-glass-002'] }]}
-          contentContainerStyle={styles.feesToggleContent}
-        >
-          {showNetworkFee ? (
-            <FlexView
-              flexDirection="row"
-              justifyContent="space-between"
-              style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
-              margin={['0', '0', 'xs', '0']}
-            >
-              <Text variant="small-500" color="fg-150">
-                Network Fees
-              </Text>
-              <FlexView flexDirection="row" alignItems="center">
-                {networkImage ? (
-                  <Image
-                    source={networkImage}
-                    style={[styles.networkImage, { borderColor: Theme['gray-glass-010'] }]}
-                  />
-                ) : null}
+                </FlexView>
+              </FlexView>
+            ) : null}
+            {showTransactionFee ? (
+              <FlexView
+                flexDirection="row"
+                justifyContent="space-between"
+                style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
+              >
+                <Text variant="small-500" color="fg-150">
+                  Transaction Fees
+                </Text>
                 <Text variant="small-400">
-                  {selectedQuote?.networkFee} {selectedQuote?.sourceCurrencyCode}
+                  {selectedQuote.transactionFee} {selectedQuote?.sourceCurrencyCode}
                 </Text>
               </FlexView>
-            </FlexView>
-          ) : null}
-          {showTransactionFee ? (
-            <FlexView
-              flexDirection="row"
-              justifyContent="space-between"
-              style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
-            >
-              <Text variant="small-500" color="fg-150">
-                Transaction Fees
-              </Text>
-              <Text variant="small-400">
-                {selectedQuote.transactionFee} {selectedQuote?.sourceCurrencyCode}
-              </Text>
-            </FlexView>
-          ) : null}
-        </Toggle>
-      ) : null}
-      <FlexView flexDirection="row" justifyContent="space-between" margin={['xl', '0', '0', '0']}>
-        <Button
-          variant="shade"
-          size="md"
-          style={styles.cancelButton}
-          onPress={RouterController.goBack}
-        >
-          Back
-        </Button>
-        <Button
-          variant="fill"
-          size="md"
-          style={styles.confirmButton}
-          onPress={onConfirm}
-          testID="button-confirm"
-        >
-          Confirm
-        </Button>
+            ) : null}
+          </Toggle>
+        ) : null}
+        <FlexView flexDirection="row" justifyContent="space-between" margin={['xl', '0', '0', '0']}>
+          <Button
+            variant="shade"
+            size="md"
+            style={styles.cancelButton}
+            onPress={RouterController.goBack}
+          >
+            Back
+          </Button>
+          <Button
+            variant="fill"
+            size="md"
+            style={styles.confirmButton}
+            onPress={onConfirm}
+            testID="button-confirm"
+          >
+            Confirm
+          </Button>
+        </FlexView>
       </FlexView>
-    </FlexView>
+    </ScrollView>
   );
 }
 

package/src/views/w3m-onramp-loading-view/index.tsx

@@ -21,7 +21,7 @@ import styles from './styles';
 import { StringUtil } from '@reown/appkit-common-react-native';
 
 export function OnRampLoadingView() {
-  const { maxWidth: width } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const { error } = useSnapshot(OnRampController.state);
   const providerName = StringUtil.capitalize(
     OnRampController.state.selectedQuote?.serviceProvider.toLowerCase()
@@ -111,14 +111,10 @@ export function OnRampLoadingView() {
       bounces={false}
       fadingEdgeLength={20}
       contentContainerStyle={styles.container}
+      style={{ paddingHorizontal: padding }}
       testID="onramp-loading-widget-view"
     >
-      <FlexView
-        alignItems="center"
-        alignSelf="center"
-        padding={['2xl', 'l', '0', 'l']}
-        style={{ width }}
-      >
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '0', 'l']}>
         <IconLink
           icon="chevronLeft"
           size="md"