@reown/appkit-react-native 0.0.0-chore-solflare-20250730210452 → 0.0.0-chore-spring-effect-20250909214820

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

@@ -1,32 +1,40 @@
 import { useEffect } from 'react';
 import { useSnapshot } from 'valtio';
 import {
-  AssetUtil,
-  ConnectionController,
+  WcController,
   EventsController,
   OptionsController,
   SnackController
 } from '@reown/appkit-core-react-native';
-import { FlexView, Link, QrCode, Text, Spacing } from '@reown/appkit-ui-react-native';
-import { ConstantsUtil } from '@reown/appkit-common-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import {
+  FlexView,
+  Link,
+  QrCode,
+  Text,
+  Spacing,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import styles from './styles';
+import { ReownButton } from './components/ReownButton';
+import { useWindowDimensions } from 'react-native';
 
 export function ConnectingQrCode() {
-  const { wcUri } = useSnapshot(ConnectionController.state);
+  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 = () => {
-    if (ConnectionController.state.wcUri) {
-      OptionsController.copyToClipboard(ConnectionController.state.wcUri);
+    if (WcController.state.wcUri) {
+      OptionsController.copyToClipboard(WcController.state.wcUri);
       SnackController.showSuccess('Link copied');
     }
   };
 
   const onConnect = async () => {
-    await ConnectionController.state.wcPromise;
+    await WcController.state.wcPromise;
 
     EventsController.sendEvent({
       type: 'track',
@@ -36,10 +44,6 @@ export function ConnectingQrCode() {
         name: 'WalletConnect'
       }
     });
-
-    //TODO: check this
-    const url = AssetUtil.getConnectorImage(ConstantsUtil.WALLET_CONNECT_IMAGE_ID);
-    ConnectionController.setConnectedWalletImageUrl(url);
   };
 
   useEffect(() => {
@@ -53,12 +57,12 @@ export function ConnectingQrCode() {
       alignItems="center"
       justifyContent="center"
       flexDirection={isPortrait ? 'column' : 'row'}
-      padding={['xl', 'xl', '2xl', 'xl']}
+      padding={['xl', 'xl', 'xs', 'xl']}
     >
       <QrCode size={qrSize} uri={wcUri} testID="qr-code" />
       <FlexView alignItems="center" margin="m">
         <Text variant="paragraph-500">Scan this QR code with your phone</Text>
-        {showCopy && (
+        {showCopy ? (
           <Link
             iconLeft="copySmall"
             color="fg-200"
@@ -68,7 +72,8 @@ export function ConnectingQrCode() {
           >
             Copy link
           </Link>
-        )}
+        ) : null}
+        <ReownButton style={styles.reownButton} />
       </FlexView>
     </FlexView>
   );

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

@@ -4,5 +4,8 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   copyButton: {
     marginTop: Spacing.m
+  },
+  reownButton: {
+    marginTop: Spacing['2xl']
   }
 });

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

@@ -5,10 +5,11 @@ import {
   RouterController,
   ApiController,
   AssetUtil,
-  ConnectionController,
+  WcController,
   CoreHelperUtil,
   OptionsController,
-  EventsController
+  EventsController,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -19,7 +20,6 @@ import {
   IconBox
 } from '@reown/appkit-ui-react-native';
 
-import { UiUtil } from '../../utils/UiUtil';
 import { ConnectingBody, getMessage } from '../w3m-connecting-body';
 import styles from './styles';
 
@@ -29,7 +29,8 @@ interface ConnectingWebProps {
 
 export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
   const { data } = RouterController.state;
-  const { wcUri, wcError } = useSnapshot(ConnectionController.state);
+  const { wcUri, wcError } = useSnapshot(WcController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
   const showCopy = OptionsController.isClipboardAvailable();
   const bodyMessage = getMessage({
     walletName: data?.wallet?.name,
@@ -41,15 +42,14 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
     try {
       const { name, webapp_link } = data?.wallet ?? {};
       if (name && webapp_link && wcUri) {
-        ConnectionController.setWcError(false);
+        WcController.setWcError(false);
         const { redirect, href } = CoreHelperUtil.formatUniversalUrl(webapp_link, wcUri);
         const wcLinking = { name, href };
-        ConnectionController.setWcLinking(wcLinking);
-        ConnectionController.setPressedWallet(data?.wallet);
+        WcController.setWcLinking(wcLinking);
+        WcController.setPressedWallet(data?.wallet);
         await Linking.openURL(redirect);
-        await ConnectionController.state.wcPromise;
-
-        UiUtil.storeConnectedWallet(wcLinking, data?.wallet);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking, data?.wallet);
 
         EventsController.sendEvent({
           type: 'track',
@@ -65,15 +65,15 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
   }, [data?.wallet, wcUri]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20}>
-      <FlexView alignItems="center" padding={['2xl', 'm', '3xl', 'm']}>
+    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
+      <FlexView alignItems="center" padding={['2xl', 'm', 'xs', 'm']}>
         <LoadingThumbnail paused={wcError}>
           <WalletImage
             size="xl"
-            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
+            imageSrc={AssetUtil.getWalletImage(data?.wallet, walletImages)}
             imageHeaders={ApiController._getApiHeaders()}
           />
-          {wcError && (
+          {wcError ? (
             <IconBox
               icon={'close'}
               border
@@ -83,7 +83,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
               iconColor="error-100"
               style={styles.errorIcon}
             />
-          )}
+          ) : null}
         </LoadingThumbnail>
         <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
         <Button
@@ -95,7 +95,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
         >
           Open
         </Button>
-        {showCopy && (
+        {showCopy ? (
           <Link
             iconLeft="copySmall"
             color="fg-200"
@@ -104,7 +104,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
           >
             Copy link
           </Link>
-        )}
+        ) : null}
       </FlexView>
     </ScrollView>
   );

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

@@ -8,13 +8,13 @@ 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';
+import { useInternalAppKit } from '../../AppKitContext';
 
 export function Header() {
-  const { close, back } = useAppKit();
+  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' });
   };
 
@@ -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-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

@@ -9,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 { AssetController, ConnectionsController } from '@reown/appkit-core-react-native';
 
 interface SelectorModalProps {
   title?: string;
@@ -26,6 +28,8 @@ interface SelectorModalProps {
   itemHeight?: number;
   showNetwork?: boolean;
   searchPlaceholder?: string;
+  emptyTitle?: string;
+  emptyDescription?: string;
 }
 
 const SEPARATOR_HEIGHT = Spacing.s;
@@ -41,12 +45,15 @@ 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 { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const renderSeparator = () => {
     return <View style={{ height: SEPARATOR_HEIGHT }} />;
@@ -55,66 +62,79 @@ 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={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"
                 />
-              )
-            ) : (
-              <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>
+                {!!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/partials/w3m-send-input-token/index.tsx

@@ -94,7 +94,7 @@ export function SendInputToken({
           chevron
         />
       </FlexView>
-      {token && (
+      {token ? (
         <FlexView
           flexDirection="row"
           alignItems="center"
@@ -111,7 +111,7 @@ export function SendInputToken({
             <Link onPress={onMaxPress}>Max</Link>
           </FlexView>
         </FlexView>
-      )}
+      ) : null}
     </FlexView>
   );
 }

package/src/partials/w3m-swap-input/index.tsx

@@ -10,10 +10,9 @@ import {
   UiUtil,
   Link
 } from '@reown/appkit-ui-react-native';
-import { type SwapTokenWithBalance } from '@reown/appkit-core-react-native';
 
 import styles from './styles';
-import { NumberUtil } from '@reown/appkit-common-react-native';
+import { NumberUtil, type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
 
 export interface SwapInputProps {
   token?: SwapTokenWithBalance;
@@ -142,7 +141,7 @@ export function SwapInput({
                   ? `~$${UiUtil.formatNumberToLocalString(marketValue, 6)}`
                   : ''}
               </Text>
-              {showMax && (
+              {showMax ? (
                 <FlexView flexDirection="row" alignItems="center" justifyContent="center">
                   <Text
                     variant="small-400"
@@ -153,7 +152,7 @@ export function SwapInput({
                   </Text>
                   <Link onPress={handleMaxPress}>Max</Link>
                 </FlexView>
-              )}
+              ) : null}
             </FlexView>
           ) : null}
         </>