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

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

@@ -1,34 +1,29 @@
 import { useState } from 'react';
+import { WcController, EventsController, RouterController } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import {
-  ConnectionController,
-  EventsController,
-  RouterController,
-  type WcWallet
-} from '@reown/appkit-core-react-native';
-import { FlexView, IconLink, SearchBar, Spacing, useTheme } from '@reown/appkit-ui-react-native';
-import { ConstantsUtil } from '@reown/appkit-common-react-native';
+  FlexView,
+  IconLink,
+  SearchBar,
+  useTheme,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 
 import styles from './styles';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { AllWalletsList } from '../../partials/w3m-all-wallets-list';
 import { AllWalletsSearch } from '../../partials/w3m-all-wallets-search';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { WcHelpersUtil } from '../../utils/HelpersUtil';
 
 export function AllWalletsView() {
   const Theme = useTheme();
   const [searchQuery, setSearchQuery] = useState<string>('');
-  const { maxWidth } = useCustomDimensions();
-  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 onWalletPress = (wallet: WcWallet) => {
-    const isExternal =
-      wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id ||
-      wallet.id === ConstantsUtil.SOLFLARE_CUSTOM_WALLET.id ||
-      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
+    const isExternal = WcHelpersUtil.isExternalWallet(wallet);
     if (isExternal) {
       RouterController.push('ConnectingExternal', { wallet });
     } else {
@@ -43,8 +38,8 @@ export function AllWalletsView() {
   };
 
   const onQrCodePress = () => {
-    ConnectionController.removePressedWallet();
-    ConnectionController.removeWcLinking();
+    WcController.removePressedWallet();
+    WcController.removeWcLinking();
     RouterController.push('ConnectingWalletConnect');
 
     EventsController.sendEvent({
@@ -57,12 +52,16 @@ export function AllWalletsView() {
   const headerTemplate = () => {
     return (
       <FlexView
-        padding={['s', 'l', 'xs', 'l']}
+        padding={['s', 'l', '4xs', 'l']}
         flexDirection="row"
         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
@@ -86,19 +85,10 @@ export function AllWalletsView() {
 
   const listTemplate = () => {
     if (searchQuery) {
-      return (
-        <AllWalletsSearch
-          columns={numColumns}
-          itemWidth={itemWidth}
-          searchQuery={searchQuery}
-          onItemPress={onWalletPress}
-        />
-      );
+      return <AllWalletsSearch searchQuery={searchQuery} onItemPress={onWalletPress} />;
     }
 
-    return (
-      <AllWalletsList columns={numColumns} itemWidth={itemWidth} onItemPress={onWalletPress} />
-    );
+    return <AllWalletsList onItemPress={onWalletPress} />;
   };
 
   return (

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

@@ -1,14 +1,13 @@
 import { useSnapshot } from 'valtio';
 import { ScrollView } from 'react-native';
 import { StringUtil, type SocialProvider } from '@reown/appkit-common-react-native';
+import { FlexView, ListSocial, Text, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import {
   EventsController,
   OptionsController,
   RouterController
 } from '@reown/appkit-core-react-native';
-import { FlexView, ListSocial, Text } from '@reown/appkit-ui-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
 
 export function ConnectSocialsView() {
@@ -28,7 +27,7 @@ export function ConnectSocialsView() {
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
-      <FlexView padding={['xs', 'm', '2xl', 'm']}>
+      <FlexView padding={['xs', 'm', '0', 'm']}>
         {socialProviders.map(provider => (
           <ListSocial
             key={provider}

package/src/views/w3m-connect-view/components/all-wallet-list.tsx

@@ -2,14 +2,15 @@ import { type StyleProp, type ViewStyle } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
   ApiController,
+  AssetController,
   AssetUtil,
-  ConnectionController,
-  type ConnectionControllerState,
-  type WcWallet
+  OptionsController,
+  WcController,
+  type WcControllerState
 } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
 import { ListItemLoader, ListWallet } from '@reown/appkit-ui-react-native';
 import { UiUtil } from '../../../utils/UiUtil';
-import { filterOutRecentWallets } from '../utils';
 
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
@@ -18,21 +19,23 @@ interface Props {
 
 export function AllWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed, featured, recommended, prefetchLoading } = useSnapshot(ApiController.state);
-  const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
+  const { customWallets } = useSnapshot(OptionsController.state);
+  const { recentWallets } = useSnapshot(WcController.state) as WcControllerState;
+  const { walletImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
-  const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
-  const combinedWallets = [...installed, ...featured, ...recommended];
+  const combinedWallets = [
+    ...(recentWallets?.slice(0, 1) ?? []),
+    ...installed,
+    ...featured,
+    ...recommended,
+    ...(customWallets ?? [])
+  ];
 
   // Deduplicate by wallet ID
-  const uniqueWallets = Array.from(
+  const list = Array.from(
     new Map(combinedWallets.map(wallet => [wallet.id, wallet])).values()
-  );
-
-  const list = filterOutRecentWallets(recentWallets, uniqueWallets, RECENT_COUNT).slice(
-    0,
-    UiUtil.TOTAL_VISIBLE_WALLETS - RECENT_COUNT
-  );
+  ).slice(0, UiUtil.TOTAL_VISIBLE_WALLETS);
 
   if (!list?.length) {
     return null;
@@ -44,16 +47,22 @@ export function AllWalletList({ itemStyle, onWalletPress }: Props) {
       <ListItemLoader style={itemStyle} />
     </>
   ) : (
-    list.map(wallet => (
-      <ListWallet
-        key={wallet?.id}
-        imageSrc={AssetUtil.getWalletImage(wallet)}
-        imageHeaders={imageHeaders}
-        name={wallet?.name ?? 'Unknown'}
-        onPress={() => onWalletPress(wallet)}
-        style={itemStyle}
-        installed={!!installed.find(installedWallet => installedWallet.id === wallet.id)}
-      />
-    ))
+    list.map(wallet => {
+      const isRecent = recentWallets?.some(recentWallet => recentWallet.id === wallet.id);
+
+      return (
+        <ListWallet
+          key={wallet?.id}
+          imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
+          imageHeaders={imageHeaders}
+          name={wallet?.name ?? 'Unknown'}
+          onPress={() => onWalletPress(wallet)}
+          tagLabel={isRecent ? 'Recent' : undefined}
+          tagVariant={isRecent ? 'shade' : undefined}
+          style={itemStyle}
+          installed={!!installed.find(installedWallet => installedWallet.id === wallet.id)}
+        />
+      );
+    })
   );
 }

package/src/views/w3m-connect-view/components/social-login-list.tsx

@@ -40,13 +40,13 @@ export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
 
   return (
     <FlexView padding={['xs', 's', '0', 's']}>
-      {topSocial && (
+      {topSocial ? (
         <ListSocial logo={topSocial} disabled={disabled} onPress={() => onItemPress(topSocial)}>
           <Text style={styles.topDescription} color={disabled ? 'fg-300' : 'fg-100'}>
             {`Continue with ${StringUtil.capitalize(topSocial)}`}
           </Text>
         </ListSocial>
-      )}
+      ) : null}
       <FlexView flexDirection="row" justifyContent="space-between" margin={['xs', '0', '0', '0']}>
         {bottomSocials?.map((social: SocialProvider, index) => (
           <LogoSelect
@@ -61,14 +61,14 @@ export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
             ]}
           />
         ))}
-        {showMoreButton && (
+        {showMoreButton ? (
           <LogoSelect
             logo="more"
             disabled={disabled}
             style={[styles.socialItem, styles.socialItemLast]}
             onPress={onMorePress}
           />
-        )}
+        ) : null}
       </FlexView>
     </FlexView>
   );

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

@@ -5,19 +5,23 @@ import {
   EventUtil,
   EventsController,
   OptionsController,
-  RouterController,
-  type WcWallet
+  RouterController
 } from '@reown/appkit-core-react-native';
-import { FlexView, Icon, ListItem, Separator, Text } from '@reown/appkit-ui-react-native';
-import { ConstantsUtil } from '@reown/appkit-common-react-native';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { type WcWallet } from '@reown/appkit-common-react-native';
+import {
+  FlexView,
+  Icon,
+  ListItem,
+  Separator,
+  Text,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 import { Placeholder } from '../../partials/w3m-placeholder';
-import { CustomWalletList } from './components/custom-wallet-list';
 import { AllWalletsButton } from './components/all-wallets-button';
 import { AllWalletList } from './components/all-wallet-list';
-import { RecentWalletList } from './components/recent-wallet-list';
 import { SocialLoginList } from './components/social-login-list';
 import styles from './styles';
+import { WcHelpersUtil } from '../../utils/HelpersUtil';
 
 export function ConnectView() {
   const { prefetchError } = useSnapshot(ApiController.state);
@@ -30,10 +34,7 @@ export function ConnectView() {
   const showList = !showConnectWalletsButton && !showLoadingError;
 
   const onWalletPress = (wallet: WcWallet, isInstalled?: boolean) => {
-    const isExternal =
-      wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id ||
-      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID ||
-      wallet.id === ConstantsUtil.SOLFLARE_CUSTOM_WALLET.id;
+    const isExternal = WcHelpersUtil.isExternalWallet(wallet);
     if (isExternal) {
       RouterController.push('ConnectingExternal', { wallet });
     } else {
@@ -59,23 +60,23 @@ export function ConnectView() {
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
-      <FlexView padding={['xs', '0', '2xl', '0']}>
-        {isSocialEnabled && (
+      <FlexView padding={['xs', '0', 'xs', '0']}>
+        {isSocialEnabled ? (
           <>
             <SocialLoginList options={features?.socials} />
             <Separator text="or" style={styles.socialSeparator} />
           </>
-        )}
+        ) : null}
 
-        <FlexView padding={['0', 's', 'xs', 's']}>
-          {showConnectWalletsButton && (
+        <FlexView padding={['0', 's', '0', 's']}>
+          {showConnectWalletsButton ? (
             <ListItem contentStyle={styles.connectWalletButton} onPress={onViewAllPress}>
               <Icon name="wallet" size="lg" />
               <Text variant="paragraph-500">Continue with a wallet</Text>
               <View style={styles.connectWalletEmpty} />
             </ListItem>
-          )}
-          {showLoadingError && (
+          ) : null}
+          {showLoadingError ? (
             <FlexView alignItems="center" justifyContent="center" margin={['l', '0', '0', '0']}>
               <Placeholder
                 icon="warningCircle"
@@ -88,15 +89,13 @@ export function ConnectView() {
               />
               <Separator style={styles.socialSeparator} />
             </FlexView>
-          )}
-          {showList && (
+          ) : null}
+          {showList ? (
             <>
-              <RecentWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
               <AllWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
-              <CustomWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
               <AllWalletsButton itemStyle={styles.item} onPress={onViewAllPress} />
             </>
-          )}
+          ) : null}
         </FlexView>
       </FlexView>
     </ScrollView>

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

@@ -1,35 +1,49 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
-import { ScrollView } from 'react-native';
+import { Platform, ScrollView } from 'react-native';
 import {
   RouterController,
   ApiController,
   EventsController,
-  ConnectionController,
-  AssetUtil
+  WcController,
+  AssetUtil,
+  AssetController,
+  CoreHelperUtil
 } from '@reown/appkit-core-react-native';
 import {
   Button,
   FlexView,
   IconBox,
   LoadingThumbnail,
-  WalletImage
+  WalletImage,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { ConnectingBody, getMessage, type BodyErrorType } from '../../partials/w3m-connecting-body';
 import styles from './styles';
-import { useAppKit } from '../../AppKitContext';
-import { ConstantsUtil } from '@reown/appkit-common-react-native';
-import { UiUtil } from '../../utils/UiUtil';
+import { useInternalAppKit } from '../../AppKitContext';
+import { StoreLink } from '../../partials/w3m-connecting-mobile/components/StoreLink';
+import { WcHelpersUtil } from '../../utils/HelpersUtil';
 
 export function ConnectingExternalView() {
   const { data } = useSnapshot(RouterController.state);
-  const { connect } = useAppKit();
-  const { maxWidth: width } = useCustomDimensions();
+  const { walletImages } = useSnapshot(AssetController.state);
+  const { connect } = useInternalAppKit();
+  const { padding } = useCustomDimensions();
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType });
 
+  const storeUrl = Platform.select({
+    ios: data?.wallet?.app_store,
+    android: data?.wallet?.play_store
+  });
+
+  const onStorePress = () => {
+    if (storeUrl) {
+      CoreHelperUtil.openLink(storeUrl);
+    }
+  };
+
   const onRetryPress = () => {
     setErrorType(undefined);
     onConnect();
@@ -39,18 +53,14 @@ export function ConnectingExternalView() {
     try {
       const wallet = RouterController.state.data?.wallet;
       if (wallet) {
-        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');
+        if (WcHelpersUtil.isExternalWallet(wallet)) {
+          await connect({ wallet });
         } else {
           // All other wallets are handled by WalletConnect connector
           return;
         }
-        UiUtil.storeRecentWallet(wallet);
-        ConnectionController.setPressedWallet(wallet);
+        WcController.addRecentWallet(wallet);
+        WcController.setPressedWallet(wallet);
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
@@ -82,20 +92,20 @@ 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"
-            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
+            imageSrc={AssetUtil.getWalletImage(data?.wallet, walletImages)}
             imageHeaders={ApiController._getApiHeaders()}
           />
-          {errorType && (
+          {errorType ? (
             <IconBox
               icon={'close'}
               border
@@ -105,7 +115,7 @@ export function ConnectingExternalView() {
               iconColor="error-100"
               style={styles.errorIcon}
             />
-          )}
+          ) : null}
         </LoadingThumbnail>
         <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
         {errorType !== 'not_installed' && (
@@ -121,6 +131,7 @@ export function ConnectingExternalView() {
           </Button>
         )}
       </FlexView>
+      <StoreLink visible={!!storeUrl} walletName={data?.wallet?.name} onPress={onStorePress} />
     </ScrollView>
   );
 }

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

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

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

@@ -5,34 +5,34 @@ import {
   Button,
   DoubleImageLoader,
   FlexView,
-  IconLink,
-  Text
+  Text,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
-  AssetUtil,
-  ConnectionController,
   ConnectionsController,
   EventsController,
+  ModalController,
   OptionsController,
   RouterController,
   SnackController
 } from '@reown/appkit-core-react-native';
 import { SIWEController } from '@reown/appkit-siwe-react-native';
 
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
+import { ScrollView } from 'react-native';
 
 export function ConnectingSiweView() {
-  const { disconnect } = useAppKit();
+  const { disconnect } = useInternalAppKit();
+  const { padding } = useCustomDimensions();
   const { metadata } = useSnapshot(OptionsController.state);
-  const { connectedWalletImageUrl, pressedWallet } = useSnapshot(ConnectionController.state);
-  const { activeAddress } = useSnapshot(ConnectionsController.state);
+  const { activeAddress, identity, walletInfo } = useSnapshot(ConnectionsController.state);
   const [isSigning, setIsSigning] = useState(false);
   const [isDisconnecting, setIsDisconnecting] = useState(false);
 
   const dappName = metadata?.name || 'Dapp';
   const dappIcon = metadata?.icons[0] || '';
-  const walletIcon = AssetUtil.getWalletImage(pressedWallet) || connectedWalletImageUrl;
+  const walletIcon = walletInfo?.icon;
   const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
   const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
 
@@ -52,6 +52,8 @@ export function ConnectingSiweView() {
         properties: { network, isSmartAccount }
       });
 
+      ModalController.close();
+
       return session;
     } catch (error) {
       SnackController.showError('Signature declined');
@@ -83,48 +85,44 @@ export function ConnectingSiweView() {
     });
   };
 
-  //TODO: Add profile image in Avatar
   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={undefined} 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 }}>
+      <FlexView padding={['0', 's', 's', '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

@@ -16,13 +16,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
   }