@reown/appkit-react-native 0.0.0-accounts-canary.1-20251023174733

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

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import { WcController, EventsController, RouterController } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
+import {
+  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 { WcHelpersUtil } from '../../utils/HelpersUtil';
+
+export function AllWalletsView() {
+  const Theme = useTheme();
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const { padding } = useCustomDimensions();
+
+  const { debouncedCallback: onInputChange } = useDebounceCallback({ callback: setSearchQuery });
+
+  const onWalletPress = (wallet: WcWallet, displayIndex: number) => {
+    const isExternal = WcHelpersUtil.isExternalWallet(wallet);
+    if (isExternal) {
+      RouterController.push('ConnectingExternal', { wallet });
+    } else {
+      RouterController.push('WalletConnect', { wallet });
+    }
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'SELECT_WALLET',
+      properties: {
+        name: wallet.name ?? 'Unknown',
+        platform: 'mobile',
+        explorerId: wallet.id,
+        walletRank: wallet.order,
+        displayIndex,
+        view: 'AllWallets'
+      }
+    });
+  };
+
+  const onQrCodePress = () => {
+    WcController.removePressedWallet();
+    WcController.removeWcLinking();
+    RouterController.push('WalletConnect');
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'SELECT_WALLET',
+      properties: { name: 'WalletConnect', platform: 'qrcode' }
+    });
+  };
+
+  const headerTemplate = () => {
+    return (
+      <FlexView
+        padding={['s', 'l', '4xs', 'l']}
+        flexDirection="row"
+        alignItems="center"
+        style={[
+          styles.header,
+          {
+            backgroundColor: Theme['bg-100'],
+            shadowColor: Theme['bg-100'],
+            marginHorizontal: padding
+          }
+        ]}
+      >
+        <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 searchQuery={searchQuery} onItemPress={onWalletPress} />;
+    }
+
+    return <AllWalletsList 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,46 @@
+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 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', '0', '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,99 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { useSnapshot } from 'valtio';
+import {
+  ApiController,
+  AssetController,
+  AssetUtil,
+  EventsController,
+  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 { useEffect, useMemo, useRef } from 'react';
+
+interface Props {
+  itemStyle: StyleProp<ViewStyle>;
+  onWalletPress: (wallet: WcWallet, displayIndex: number, isInstalled?: boolean) => void;
+}
+
+export function AllWalletList({ itemStyle, onWalletPress }: Props) {
+  const { installed, featured, recommended, prefetchLoading } = useSnapshot(ApiController.state);
+  const { customWallets } = useSnapshot(OptionsController.state);
+  const { recentWallets } = useSnapshot(WcController.state) as WcControllerState;
+  const { walletImages } = useSnapshot(AssetController.state);
+  const imageHeaders = ApiController._getApiHeaders();
+
+  // Track which wallets have been tracked to prevent duplicates
+  const trackedWalletsRef = useRef<Set<string>>(new Set());
+
+  const list = useMemo(() => {
+    const combinedWallets = [
+      ...(recentWallets?.slice(0, 1) ?? []),
+      ...installed,
+      ...featured,
+      ...recommended,
+      ...(customWallets ?? [])
+    ];
+
+    // Deduplicate by wallet ID
+    return Array.from(new Map(combinedWallets.map(wallet => [wallet.id, wallet])).values()).slice(
+      0,
+      UiUtil.TOTAL_VISIBLE_WALLETS
+    );
+  }, [recentWallets, installed, featured, recommended, customWallets]);
+
+  // Track impressions once when the list stabilizes
+  useEffect(() => {
+    if (!prefetchLoading && list.length > 0) {
+      list.forEach((wallet, index) => {
+        if (!trackedWalletsRef.current.has(wallet.id)) {
+          trackedWalletsRef.current.add(wallet.id);
+          const isInstalled = !!ApiController.state.installed.find(
+            installedWallet => installedWallet.id === wallet.id
+          );
+          EventsController.trackWalletImpression({
+            wallet,
+            view: 'Connect',
+            displayIndex: index,
+            // eslint-disable-next-line valtio/state-snapshot-rule
+            installed: isInstalled
+          });
+        }
+      });
+    }
+  }, [prefetchLoading, list]);
+
+  if (!list?.length) {
+    return null;
+  }
+
+  return prefetchLoading ? (
+    <>
+      <ListItemLoader style={itemStyle} />
+      <ListItemLoader style={itemStyle} />
+    </>
+  ) : (
+    list.map((wallet, index) => {
+      const isRecent = recentWallets?.some(recentWallet => recentWallet.id === wallet.id);
+      //eslint-disable-next-line valtio/state-snapshot-rule
+      const isInstalled = !!installed.find(installedWallet => installedWallet.id === wallet.id);
+
+      return (
+        <ListWallet
+          key={wallet?.id}
+          imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
+          imageHeaders={imageHeaders}
+          name={wallet?.name ?? 'Unknown'}
+          onPress={() => onWalletPress(wallet, index, isInstalled)}
+          tagLabel={isRecent ? 'Recent' : undefined}
+          tagVariant={isRecent ? 'shade' : undefined}
+          style={itemStyle}
+          installed={isInstalled}
+        />
+      );
+    })
+  );
+}

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/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>
+      ) : null}
+      <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}
+          />
+        ) : null}
+      </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,106 @@
+import { useSnapshot } from 'valtio';
+import { ScrollView, View } from 'react-native';
+import {
+  ApiController,
+  EventUtil,
+  EventsController,
+  OptionsController,
+  RouterController
+} from '@reown/appkit-core-react-native';
+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 { AllWalletsButton } from './components/all-wallets-button';
+import { AllWalletList } from './components/all-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);
+  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, displayIndex: number, isInstalled?: boolean) => {
+    const isExternal = WcHelpersUtil.isExternalWallet(wallet);
+    if (isExternal) {
+      RouterController.push('ConnectingExternal', { wallet });
+    } else {
+      RouterController.push('WalletConnect', { wallet });
+    }
+
+    const platform = EventUtil.getWalletPlatform(wallet, isInstalled);
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'SELECT_WALLET',
+      properties: {
+        name: wallet.name ?? 'Unknown',
+        platform,
+        explorerId: wallet.id,
+        walletRank: wallet.order,
+        displayIndex,
+        view: 'Connect'
+      }
+    });
+  };
+
+  const onViewAllPress = () => {
+    RouterController.push('AllWallets');
+    EventsController.sendEvent({ type: 'track', event: 'CLICK_ALL_WALLETS' });
+  };
+
+  return (
+    <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
+      <FlexView padding={['xs', '0', 'xs', '0']}>
+        {isSocialEnabled ? (
+          <>
+            <SocialLoginList options={features?.socials} />
+            <Separator text="or" style={styles.socialSeparator} />
+          </>
+        ) : null}
+
+        <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>
+          ) : null}
+          {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>
+          ) : null}
+          {showList ? (
+            <>
+              <AllWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
+              <AllWalletsButton itemStyle={styles.item} onPress={onViewAllPress} />
+            </>
+          ) : null}
+        </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-connecting-external-view/index.tsx

@@ -0,0 +1,159 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect, useState } from 'react';
+import { Platform, ScrollView } from 'react-native';
+import {
+  RouterController,
+  ApiController,
+  EventsController,
+  WcController,
+  AssetUtil,
+  AssetController,
+  CoreHelperUtil,
+  LogController,
+  ConnectionsController
+} from '@reown/appkit-core-react-native';
+import {
+  Button,
+  FlexView,
+  IconBox,
+  LoadingThumbnail,
+  WalletImage,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+
+import { ConnectingBody, getMessage, type BodyErrorType } from '../../partials/w3m-connecting-body';
+import styles from './styles';
+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 { 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);
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'GET_WALLET',
+        properties: {
+          name: RouterController.state.data?.wallet?.name ?? 'Unknown',
+          link: storeUrl,
+          linkType: Platform.select({
+            ios: 'appstore',
+            android: 'playstore',
+            default: undefined
+          }),
+          explorerId: RouterController.state.data?.wallet?.id,
+          walletRank: RouterController.state.data?.wallet?.order
+        }
+      });
+    }
+  };
+
+  const onRetryPress = () => {
+    setErrorType(undefined);
+    onConnect();
+  };
+
+  const onConnect = useCallback(async () => {
+    try {
+      const wallet = RouterController.state.data?.wallet;
+      if (wallet) {
+        if (WcHelpersUtil.isExternalWallet(wallet)) {
+          await connect({ wallet });
+        } else {
+          // All other wallets are handled by WalletConnect connector
+          return;
+        }
+        WcController.addRecentWallet(wallet);
+        WcController.setPressedWallet(wallet);
+        const address = ConnectionsController.state.activeAddress;
+        const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'CONNECT_SUCCESS',
+          address: CoreHelperUtil.getPlainAddress(address),
+          properties: {
+            name: wallet?.name ?? 'Unknown',
+            method: 'mobile',
+            caipNetworkId,
+            explorerId: wallet?.id
+          }
+        });
+      }
+    } catch (error) {
+      LogController.sendError(error, 'ConnectingExternalView.tsx', 'onConnect');
+      if (/(Wallet not found)/i.test((error as Error).message)) {
+        setErrorType('not_installed');
+      } else if (/(rejected)/i.test((error as Error).message)) {
+        setErrorType('declined');
+      } else {
+        setErrorType('default');
+      }
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'CONNECT_ERROR',
+        properties: { message: (error as Error)?.message ?? 'Unknown' }
+      });
+    }
+  }, [connect]);
+
+  useEffect(() => {
+    onConnect();
+  }, [onConnect]);
+
+  return (
+    <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, walletImages)}
+            imageHeaders={ApiController._getApiHeaders()}
+          />
+          {errorType ? (
+            <IconBox
+              icon={'close'}
+              border
+              background
+              backgroundColor="icon-box-bg-error-100"
+              size="sm"
+              iconColor="error-100"
+              style={styles.errorIcon}
+            />
+          ) : null}
+        </LoadingThumbnail>
+        <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
+        {errorType !== 'not_installed' && (
+          <Button
+            size="sm"
+            variant="accent"
+            iconLeft="refresh"
+            style={styles.retryButton}
+            iconStyle={styles.retryIcon}
+            onPress={onRetryPress}
+          >
+            Try again
+          </Button>
+        )}
+      </FlexView>
+      <StoreLink visible={!!storeUrl} walletName={data?.wallet?.name} onPress={onStorePress} />
+    </ScrollView>
+  );
+}