@reown/appkit-react-native 0.0.0-feat-multichain-20250513175016

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

@@ -0,0 +1,60 @@
+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;
+  isWalletConnectEnabled: boolean;
+}
+
+export function AllWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: 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 (!isWalletConnectEnabled || !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,33 @@
+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;
+  isWalletConnectEnabled: boolean;
+}
+
+export function AllWalletsButton({ itemStyle, onPress, isWalletConnectEnabled }: Props) {
+  const { installed, count } = useSnapshot(ApiController.state);
+
+  if (!isWalletConnectEnabled) {
+    return null;
+  }
+
+  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/connect-email-input.tsx

@@ -0,0 +1,69 @@
+import { useSnapshot } from 'valtio';
+import { useState } from 'react';
+import { EmailInput, FlexView } from '@reown/appkit-ui-react-native';
+import {
+  ConnectorController,
+  CoreHelperUtil,
+  EventsController,
+  RouterController,
+  SnackController,
+  type AppKitFrameProvider
+} from '@reown/appkit-core-react-native';
+
+interface Props {
+  loading?: boolean;
+}
+
+export function ConnectEmailInput({ loading }: Props) {
+  const { connectors } = useSnapshot(ConnectorController.state);
+  const [inputLoading, setInputLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [isValidEmail, setIsValidEmail] = useState(false);
+  const authProvider = connectors.find(c => c.type === 'AUTH')?.provider as AppKitFrameProvider;
+
+  const onChangeText = (value: string) => {
+    setIsValidEmail(CoreHelperUtil.isValidEmail(value));
+    setError('');
+  };
+
+  const onEmailFocus = () => {
+    EventsController.sendEvent({ type: 'track', event: 'EMAIL_LOGIN_SELECTED' });
+  };
+
+  const onEmailSubmit = async (email: string) => {
+    try {
+      if (email.length === 0) return;
+
+      setInputLoading(true);
+      const response = await authProvider.connectEmail({ email });
+      EventsController.sendEvent({ type: 'track', event: 'EMAIL_SUBMITTED' });
+      if (response.action === 'VERIFY_DEVICE') {
+        RouterController.push('EmailVerifyDevice', { email });
+      } else if (response.action === 'VERIFY_OTP') {
+        RouterController.push('EmailVerifyOtp', { email });
+      }
+    } catch (e: any) {
+      const parsedError = CoreHelperUtil.parseError(e);
+      if (parsedError?.includes('valid email')) {
+        setError('Invalid email. Try again.');
+      } else {
+        SnackController.showError(parsedError);
+      }
+    } finally {
+      setInputLoading(false);
+    }
+  };
+
+  return (
+    <FlexView padding={['0', 's', '0', 's']}>
+      <EmailInput
+        onSubmit={onEmailSubmit}
+        onFocus={onEmailFocus}
+        loading={inputLoading || loading}
+        errorMessage={error}
+        onChangeText={onChangeText}
+        submitEnabled={isValidEmail}
+      />
+    </FlexView>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { useSnapshot } from 'valtio';
+import type { StyleProp, ViewStyle } from 'react-native';
+import {
+  ConnectorController,
+  AssetUtil,
+  RouterController,
+  ApiController
+} from '@reown/appkit-core-react-native';
+
+import { ListWallet } from '@reown/appkit-ui-react-native';
+import type { ConnectorType } from '@reown/appkit-common-react-native';
+
+interface Props {
+  itemStyle: StyleProp<ViewStyle>;
+  isWalletConnectEnabled: boolean;
+}
+
+export function ConnectorList({ itemStyle, isWalletConnectEnabled }: Props) {
+  const { connectors } = useSnapshot(ConnectorController.state);
+  const excludeConnectors: ConnectorType[] = ['WALLET_CONNECT', 'AUTH'];
+  const imageHeaders = ApiController._getApiHeaders();
+
+  if (isWalletConnectEnabled) {
+    // use wallet from api list
+    excludeConnectors.push('COINBASE');
+  }
+
+  return connectors.map(connector => {
+    if (excludeConnectors.includes(connector.type)) {
+      return null;
+    }
+
+    return (
+      <ListWallet
+        key={connector.type}
+        imageSrc={AssetUtil.getConnectorImage(connector)}
+        imageHeaders={imageHeaders}
+        name={connector.name || 'Unknown'}
+        onPress={() => RouterController.push('ConnectingExternal', { connector })}
+        style={itemStyle}
+        installed={connector.installed}
+      />
+    );
+  });
+}

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

@@ -0,0 +1,41 @@
+import { useSnapshot } from 'valtio';
+import type { StyleProp, ViewStyle } from 'react-native';
+import {
+  OptionsController,
+  type CustomWallet,
+  type OptionsControllerState,
+  ApiController,
+  ConnectionController,
+  type ConnectionControllerState
+} 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;
+  isWalletConnectEnabled: boolean;
+}
+
+export function CustomWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: Props) {
+  const { installed } = useSnapshot(ApiController.state);
+  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 (!isWalletConnectEnabled || !customWallets?.length) {
+    return null;
+  }
+
+  const list = filterOutRecentWallets(recentWallets, customWallets, RECENT_COUNT);
+
+  return list.map(wallet => (
+    <ListWallet
+      key={wallet.id}
+      imageSrc={wallet.image_url}
+      name={wallet.name}
+      onPress={() => onWalletPress(wallet)}
+      style={itemStyle}
+    />
+  ));
+}

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

@@ -0,0 +1,44 @@
+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;
+  isWalletConnectEnabled: boolean;
+}
+
+export function RecentWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: 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 (!isWalletConnectEnabled || !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,95 @@
+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 {
+  ConnectionController,
+  EventsController,
+  RouterController,
+  WebviewController
+} 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) => {
+    ConnectionController.setSelectedSocialProvider(provider);
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'SOCIAL_LOGIN_STARTED',
+      properties: { provider }
+    });
+    WebviewController.setConnecting(false);
+
+    if (provider === 'farcaster') {
+      RouterController.push('ConnectingFarcaster');
+    } else {
+      RouterController.push('ConnectingSocial');
+    }
+  };
+
+  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/components/wallet-guide.tsx

@@ -0,0 +1,50 @@
+import { RouterController } from '@reown/appkit-core-react-native';
+import { Chip, FlexView, Link, Separator, Spacing, Text } from '@reown/appkit-ui-react-native';
+import { Linking, StyleSheet } from 'react-native';
+
+export interface WalletGuideProps {
+  guide: 'explore' | 'get-started';
+}
+
+export function WalletGuide({ guide }: WalletGuideProps) {
+  const onExplorerPress = () => {
+    Linking.openURL('https://explorer.walletconnect.com');
+  };
+
+  const onGetStartedPress = () => {
+    RouterController.push('Create');
+  };
+
+  return guide === 'explore' ? (
+    <FlexView alignItems="center" justifyContent="center">
+      <Separator text="or" style={styles.socialSeparator} />
+      <Text variant="small-400" style={styles.text}>
+        Looking for a self-custody wallet?
+      </Text>
+      <Chip
+        label="Visit our explorer"
+        variant="transparent"
+        rightIcon="externalLink"
+        leftIcon="walletConnectLightBrown"
+        size="sm"
+        onPress={onExplorerPress}
+      />
+    </FlexView>
+  ) : (
+    <FlexView alignItems="center" justifyContent="center" margin="m" flexDirection="row">
+      <Text variant="small-400">Haven't got a wallet?</Text>
+      <Link onPress={onGetStartedPress} size="sm">
+        Get started
+      </Link>
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    marginBottom: Spacing.xs
+  },
+  socialSeparator: {
+    marginVertical: Spacing.l
+  }
+});

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

@@ -0,0 +1,141 @@
+import { useSnapshot } from 'valtio';
+import { Platform, ScrollView, View } from 'react-native';
+import {
+  ApiController,
+  ConnectorController,
+  EventUtil,
+  EventsController,
+  OptionsController,
+  RouterController,
+  type WcWallet
+} from '@reown/appkit-core-react-native';
+import { FlexView, Icon, ListItem, Separator, Spacing, Text } from '@reown/appkit-ui-react-native';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { ConnectEmailInput } from './components/connect-email-input';
+import { useKeyboard } from '../../hooks/useKeyboard';
+import { Placeholder } from '../../partials/w3m-placeholder';
+import { ConnectorList } from './components/connectors-list';
+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 { WalletGuide } from './components/wallet-guide';
+import styles from './styles';
+
+export function ConnectView() {
+  const connectors = ConnectorController.state.connectors;
+  const { authLoading } = useSnapshot(ConnectorController.state);
+  const { prefetchError } = useSnapshot(ApiController.state);
+  const { features } = useSnapshot(OptionsController.state);
+  const { padding } = useCustomDimensions();
+  const { keyboardShown, keyboardHeight } = useKeyboard();
+
+  // const isWalletConnectEnabled = connectors.some(c => c.type === 'WALLET_CONNECT');
+  const isWalletConnectEnabled = true;
+  const isAuthEnabled = connectors.some(c => c.type === 'AUTH');
+  const isCoinbaseEnabled = connectors.some(c => c.type === 'COINBASE');
+  const isEmailEnabled = isAuthEnabled && features?.email;
+  const isSocialEnabled = isAuthEnabled && features?.socials && features?.socials.length > 0;
+  const showConnectWalletsButton =
+    isWalletConnectEnabled && isAuthEnabled && !features?.emailShowWallets;
+  const showSeparator =
+    isAuthEnabled &&
+    (isEmailEnabled || isSocialEnabled) &&
+    (isWalletConnectEnabled || isCoinbaseEnabled);
+  const showLoadingError = !showConnectWalletsButton && prefetchError;
+  const showList = !showConnectWalletsButton && !showLoadingError;
+
+  const paddingBottom = Platform.select({
+    android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
+    default: Spacing['2xl']
+  });
+
+  const onWalletPress = (wallet: WcWallet, isInstalled?: boolean) => {
+    const connector = connectors.find(c => c.explorerId === wallet.id);
+    if (connector) {
+      RouterController.push('ConnectingExternal', { connector, wallet });
+    } else {
+      RouterController.push('ConnectingWalletConnect', { wallet });
+    }
+
+    const platform = EventUtil.getWalletPlatform(wallet, isInstalled);
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'SELECT_WALLET',
+      properties: {
+        name: wallet.name ?? connector?.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', '0', '0']} style={{ paddingBottom }}>
+        {isEmailEnabled && <ConnectEmailInput loading={authLoading} />}
+        {isSocialEnabled && <SocialLoginList options={features?.socials} disabled={authLoading} />}
+        {showSeparator && <Separator text="or" style={styles.socialSeparator} />}
+
+        <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 && (
+            <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}
+                isWalletConnectEnabled={isWalletConnectEnabled}
+              />
+              <AllWalletList
+                itemStyle={styles.item}
+                onWalletPress={onWalletPress}
+                isWalletConnectEnabled={isWalletConnectEnabled}
+              />
+              <CustomWalletList
+                itemStyle={styles.item}
+                onWalletPress={onWalletPress}
+                isWalletConnectEnabled={isWalletConnectEnabled}
+              />
+              <ConnectorList
+                itemStyle={styles.item}
+                isWalletConnectEnabled={isWalletConnectEnabled}
+              />
+              <AllWalletsButton
+                itemStyle={styles.item}
+                onPress={onViewAllPress}
+                isWalletConnectEnabled={isWalletConnectEnabled}
+              />
+            </>
+          )}
+          {isAuthEnabled && <WalletGuide guide="get-started" />}
+        </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;
+};