@reown/appkit-react-native 0.0.0-chore-bump-builder-20250728194329

package/src/views/w3m-account-view/styles.ts

@@ -0,0 +1,27 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { Platform, StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  contentContainer: {
+    paddingBottom: Platform.select({ ios: Spacing.s })
+  },
+  networkIcon: {
+    alignSelf: 'flex-start',
+    position: 'absolute',
+    zIndex: 1,
+    top: Spacing.l,
+    left: Spacing.l
+  },
+  closeIcon: {
+    alignSelf: 'flex-end',
+    position: 'absolute',
+    zIndex: 1,
+    top: Spacing.l,
+    right: Spacing.xl
+  },
+  accountPill: {
+    alignSelf: 'center',
+    marginBottom: Spacing.s,
+    marginHorizontal: Spacing.s
+  }
+});

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

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+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';
+
+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';
+
+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 { debouncedCallback: onInputChange } = useDebounceCallback({ callback: setSearchQuery });
+
+  const onWalletPress = (wallet: WcWallet) => {
+    const isExternal =
+      wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID ||
+      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
+    if (isExternal) {
+      RouterController.push('ConnectingExternal', { wallet });
+    } else {
+      RouterController.push('ConnectingWalletConnect', { wallet });
+    }
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'SELECT_WALLET',
+      properties: { name: wallet.name ?? 'Unknown', platform: 'mobile', explorer_id: wallet.id }
+    });
+  };
+
+  const onQrCodePress = () => {
+    ConnectionController.removePressedWallet();
+    ConnectionController.removeWcLinking();
+    RouterController.push('ConnectingWalletConnect');
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'SELECT_WALLET',
+      properties: { name: 'WalletConnect', platform: 'qrcode' }
+    });
+  };
+
+  const headerTemplate = () => {
+    return (
+      <FlexView
+        padding={['s', 'l', 'xs', 'l']}
+        flexDirection="row"
+        alignItems="center"
+        style={[
+          styles.header,
+          { backgroundColor: Theme['bg-100'], shadowColor: Theme['bg-100'], width: maxWidth }
+        ]}
+      >
+        <SearchBar
+          onChangeText={onInputChange}
+          placeholder="Search wallet"
+          style={styles.searchBar}
+        />
+        <IconLink
+          icon="qrCode"
+          iconColor="accent-100"
+          pressedColor="accent-glass-020"
+          backgroundColor="accent-glass-010"
+          size="lg"
+          onPress={onQrCodePress}
+          style={[styles.icon, { borderColor: Theme['accent-glass-010'] }]}
+          testID="button-qr-code"
+        />
+      </FlexView>
+    );
+  };
+
+  const listTemplate = () => {
+    if (searchQuery) {
+      return (
+        <AllWalletsSearch
+          columns={numColumns}
+          itemWidth={itemWidth}
+          searchQuery={searchQuery}
+          onItemPress={onWalletPress}
+        />
+      );
+    }
+
+    return (
+      <AllWalletsList columns={numColumns} itemWidth={itemWidth} onItemPress={onWalletPress} />
+    );
+  };
+
+  return (
+    <>
+      {headerTemplate()}
+      {listTemplate()}
+    </>
+  );
+}

package/src/views/w3m-all-wallets-view/styles.ts

@@ -0,0 +1,21 @@
+import { Platform, StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  header: {
+    zIndex: 1,
+    alignSelf: 'center',
+    ...Platform.select({
+      ios: {
+        shadowOpacity: 1,
+        shadowOffset: { width: 0, height: 6 }
+      }
+    })
+  },
+  icon: {
+    marginLeft: 8,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  searchBar: {
+    flex: 1
+  }
+});

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

@@ -0,0 +1,47 @@
+import { useSnapshot } from 'valtio';
+import { ScrollView } from 'react-native';
+import { StringUtil, type SocialProvider } from '@reown/appkit-common-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() {
+  const { features } = useSnapshot(OptionsController.state);
+  const { padding } = useCustomDimensions();
+  const socialProviders = (features?.socials ?? []) as SocialProvider[];
+
+  const onItemPress = (provider: SocialProvider) => {
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'SOCIAL_LOGIN_STARTED',
+      properties: { provider }
+    });
+
+    RouterController.push('ConnectingSocial', { socialProvider: provider });
+  };
+
+  return (
+    <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
+      <FlexView padding={['xs', 'm', '2xl', 'm']}>
+        {socialProviders.map(provider => (
+          <ListSocial
+            key={provider}
+            logo={provider}
+            onPress={() => onItemPress(provider)}
+            style={styles.item}
+          >
+            <Text style={styles.text} color={'fg-100'}>
+              {StringUtil.capitalize(provider)}
+            </Text>
+          </ListSocial>
+        ))}
+      </FlexView>
+    </ScrollView>
+  );
+}

package/src/views/w3m-connect-socials-view/styles.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  item: {
+    marginVertical: Spacing['3xs'],
+    justifyContent: 'flex-start'
+  },
+  text: {
+    marginLeft: Spacing.s
+  }
+});

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

@@ -0,0 +1,59 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { useSnapshot } from 'valtio';
+import {
+  ApiController,
+  AssetUtil,
+  ConnectionController,
+  type ConnectionControllerState,
+  type WcWallet
+} from '@reown/appkit-core-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>;
+  onWalletPress: (wallet: WcWallet) => void;
+}
+
+export function AllWalletList({ itemStyle, onWalletPress }: Props) {
+  const { installed, featured, recommended, prefetchLoading } = useSnapshot(ApiController.state);
+  const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
+  const imageHeaders = ApiController._getApiHeaders();
+  const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
+
+  const combinedWallets = [...installed, ...featured, ...recommended];
+
+  // Deduplicate by wallet ID
+  const uniqueWallets = 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
+  );
+
+  if (!list?.length) {
+    return null;
+  }
+
+  return prefetchLoading ? (
+    <>
+      <ListItemLoader style={itemStyle} />
+      <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)}
+      />
+    ))
+  );
+}

package/src/views/w3m-connect-view/components/all-wallets-button.tsx

@@ -0,0 +1,28 @@
+import { useSnapshot } from 'valtio';
+import { ApiController } from '@reown/appkit-core-react-native';
+import { ListWallet } from '@reown/appkit-ui-react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+interface Props {
+  itemStyle: StyleProp<ViewStyle>;
+  onPress: () => void;
+}
+
+export function AllWalletsButton({ itemStyle, onPress }: Props) {
+  const { installed, count } = useSnapshot(ApiController.state);
+
+  const total = installed.length + count;
+  const label = total > 10 ? `${Math.floor(total / 10) * 10}+` : total;
+
+  return (
+    <ListWallet
+      name="All wallets"
+      showAllWallets
+      tagLabel={String(label)}
+      tagVariant="shade"
+      onPress={onPress}
+      style={itemStyle}
+      testID="all-wallets"
+    />
+  );
+}

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

@@ -0,0 +1,43 @@
+import { useSnapshot } from 'valtio';
+import type { StyleProp, ViewStyle } from 'react-native';
+import {
+  OptionsController,
+  type CustomWallet,
+  type OptionsControllerState,
+  ApiController,
+  ConnectionController,
+  type ConnectionControllerState,
+  AssetUtil
+} from '@reown/appkit-core-react-native';
+import { ListWallet } from '@reown/appkit-ui-react-native';
+import { filterOutRecentWallets } from '../utils';
+
+interface Props {
+  itemStyle: StyleProp<ViewStyle>;
+  onWalletPress: (wallet: CustomWallet) => void;
+}
+
+export function CustomWalletList({ itemStyle, onWalletPress }: Props) {
+  const { installed } = useSnapshot(ApiController.state);
+  const imageHeaders = ApiController._getApiHeaders();
+  const { recentWallets } = useSnapshot(ConnectionController.state) as ConnectionControllerState;
+  const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
+  const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
+
+  if (!customWallets?.length) {
+    return null;
+  }
+
+  const list = filterOutRecentWallets(recentWallets, customWallets, RECENT_COUNT);
+
+  return list.map(wallet => (
+    <ListWallet
+      key={wallet.id}
+      imageSrc={AssetUtil.getWalletImage(wallet)}
+      imageHeaders={imageHeaders}
+      name={wallet.name}
+      onPress={() => onWalletPress(wallet)}
+      style={itemStyle}
+    />
+  ));
+}

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

@@ -0,0 +1,43 @@
+import { useSnapshot } from 'valtio';
+import {
+  ApiController,
+  AssetUtil,
+  type WcWallet,
+  ConnectionController
+} from '@reown/appkit-core-react-native';
+import { ListWallet } from '@reown/appkit-ui-react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+interface Props {
+  itemStyle: StyleProp<ViewStyle>;
+  onWalletPress: (wallet: WcWallet, installed: boolean) => void;
+}
+
+export function RecentWalletList({ itemStyle, onWalletPress }: Props) {
+  const installed = ApiController.state.installed;
+  const { recentWallets } = useSnapshot(ConnectionController.state);
+  const imageHeaders = ApiController._getApiHeaders();
+  const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
+
+  if (!recentWallets?.length) {
+    return null;
+  }
+
+  return recentWallets.slice(0, RECENT_COUNT).map(wallet => {
+    const isInstalled = !!installed.find(installedWallet => installedWallet.id === wallet.id);
+
+    return (
+      <ListWallet
+        key={wallet?.id}
+        imageSrc={AssetUtil.getWalletImage(wallet)}
+        imageHeaders={imageHeaders}
+        name={wallet?.name ?? 'Unknown'}
+        onPress={() => onWalletPress(wallet, isInstalled)}
+        tagLabel="Recent"
+        tagVariant="shade"
+        style={itemStyle}
+        installed={isInstalled}
+      />
+    );
+  });
+}

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

@@ -0,0 +1,91 @@
+import { StyleSheet } from 'react-native';
+import { FlexView, ListSocial, LogoSelect, Spacing, Text } from '@reown/appkit-ui-react-native';
+import { type SocialProvider, StringUtil } from '@reown/appkit-common-react-native';
+import { EventsController, RouterController } from '@reown/appkit-core-react-native';
+
+export interface SocialLoginListProps {
+  options: readonly SocialProvider[];
+  disabled?: boolean;
+}
+
+const MAX_OPTIONS = 6;
+
+export function SocialLoginList({ options, disabled }: SocialLoginListProps) {
+  const showBigSocial = options?.length > 2 || options?.length === 1;
+  const showMoreButton = options?.length > MAX_OPTIONS;
+  const topSocial = showBigSocial ? options[0] : null;
+  let bottomSocials = showBigSocial ? options.slice(1) : options;
+  bottomSocials = showMoreButton ? bottomSocials.slice(0, MAX_OPTIONS - 2) : bottomSocials;
+
+  const onItemPress = (provider: SocialProvider) => {
+    if (provider === 'email') {
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'EMAIL_LOGIN_SELECTED'
+      });
+    } else {
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SOCIAL_LOGIN_STARTED',
+        properties: { provider }
+      });
+    }
+
+    RouterController.push('ConnectingSocial', { socialProvider: provider });
+  };
+
+  const onMorePress = () => {
+    RouterController.push('ConnectSocials');
+  };
+
+  return (
+    <FlexView padding={['xs', 's', '0', 's']}>
+      {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>
+      )}
+      <FlexView flexDirection="row" justifyContent="space-between" margin={['xs', '0', '0', '0']}>
+        {bottomSocials?.map((social: SocialProvider, index) => (
+          <LogoSelect
+            key={social}
+            disabled={disabled}
+            logo={social}
+            onPress={() => onItemPress(social)}
+            style={[
+              styles.socialItem,
+              index === 0 && styles.socialItemFirst,
+              !showMoreButton && index === bottomSocials.length - 1 && styles.socialItemLast
+            ]}
+          />
+        ))}
+        {showMoreButton && (
+          <LogoSelect
+            logo="more"
+            disabled={disabled}
+            style={[styles.socialItem, styles.socialItemLast]}
+            onPress={onMorePress}
+          />
+        )}
+      </FlexView>
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  topDescription: {
+    textAlign: 'center'
+  },
+  socialItem: {
+    flex: 1,
+    marginHorizontal: Spacing['2xs']
+  },
+  socialItemFirst: {
+    marginLeft: 0
+  },
+  socialItemLast: {
+    marginRight: 0
+  }
+});

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

@@ -0,0 +1,103 @@
+import { useSnapshot } from 'valtio';
+import { ScrollView, View } from 'react-native';
+import {
+  ApiController,
+  EventUtil,
+  EventsController,
+  OptionsController,
+  RouterController,
+  type WcWallet
+} 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 { 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';
+
+export function ConnectView() {
+  const { prefetchError } = useSnapshot(ApiController.state);
+  const { features } = useSnapshot(OptionsController.state);
+  const { padding } = useCustomDimensions();
+
+  const isSocialEnabled = features?.socials && features?.socials.length > 0;
+  const showConnectWalletsButton = isSocialEnabled && !features?.showWallets;
+  const showLoadingError = !showConnectWalletsButton && prefetchError;
+  const showList = !showConnectWalletsButton && !showLoadingError;
+
+  const onWalletPress = (wallet: WcWallet, isInstalled?: boolean) => {
+    const isExternal =
+      wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID ||
+      wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID;
+    if (isExternal) {
+      RouterController.push('ConnectingExternal', { wallet });
+    } else {
+      RouterController.push('ConnectingWalletConnect', { wallet });
+    }
+
+    const platform = EventUtil.getWalletPlatform(wallet, isInstalled);
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'SELECT_WALLET',
+      properties: {
+        name: wallet.name ?? 'Unknown',
+        platform,
+        explorer_id: wallet.id
+      }
+    });
+  };
+
+  const onViewAllPress = () => {
+    RouterController.push('AllWallets');
+    EventsController.sendEvent({ type: 'track', event: 'CLICK_ALL_WALLETS' });
+  };
+
+  return (
+    <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
+      <FlexView padding={['xs', '0', '2xl', '0']}>
+        {isSocialEnabled && (
+          <>
+            <SocialLoginList options={features?.socials} />
+            <Separator text="or" style={styles.socialSeparator} />
+          </>
+        )}
+
+        <FlexView padding={['0', 's', 'xs', '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 && (
+            <FlexView alignItems="center" justifyContent="center" margin={['l', '0', '0', '0']}>
+              <Placeholder
+                icon="warningCircle"
+                iconColor="error-100"
+                title="Oops, we couldn’t load the wallets at the moment"
+                description={`This might be due to a temporary network issue.\nPlease try reloading to see if that helps.`}
+                actionIcon="refresh"
+                actionPress={ApiController.prefetch}
+                actionTitle="Retry"
+              />
+              <Separator style={styles.socialSeparator} />
+            </FlexView>
+          )}
+          {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} />
+            </>
+          )}
+        </FlexView>
+      </FlexView>
+    </ScrollView>
+  );
+}

package/src/views/w3m-connect-view/styles.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  item: {
+    marginVertical: Spacing['3xs']
+  },
+  socialSeparator: {
+    marginVertical: Spacing.xs
+  },
+  connectWalletButton: {
+    justifyContent: 'space-between'
+  },
+  connectWalletEmpty: {
+    height: 20,
+    width: 20
+  }
+});

package/src/views/w3m-connect-view/utils.ts

@@ -0,0 +1,14 @@
+import type { WcWallet } from '@reown/appkit-core-react-native';
+
+export const filterOutRecentWallets = (
+  recentWallets?: WcWallet[],
+  wallets?: WcWallet[],
+  resentCount?: number
+) => {
+  const recentIds = recentWallets?.slice(0, resentCount ?? 1).map(wallet => wallet.id);
+  if (!recentIds?.length) return wallets ?? [];
+
+  const filtered = wallets?.filter(wallet => !recentIds.includes(wallet.id)) || [];
+
+  return filtered;
+};