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

package/src/partials/w3m-all-wallets-list/index.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useState } from 'react';
+import { useSnapshot } from 'valtio';
+import { FlatList, View } from 'react-native';
+import {
+  ApiController,
+  AssetUtil,
+  OptionsController,
+  SnackController,
+  type OptionsControllerState,
+  type WcWallet
+} from '@reown/appkit-core-react-native';
+import {
+  CardSelect,
+  CardSelectLoader,
+  CardSelectHeight,
+  FlexView,
+  Spacing
+} from '@reown/appkit-ui-react-native';
+import styles from './styles';
+import { UiUtil } from '../../utils/UiUtil';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { Placeholder } from '../w3m-placeholder';
+
+interface AllWalletsListProps {
+  columns: number;
+  onItemPress: (wallet: WcWallet) => void;
+  itemWidth?: number;
+}
+
+export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsListProps) {
+  const [loading, setLoading] = useState<boolean>(ApiController.state.wallets.length === 0);
+  const [loadingError, setLoadingError] = useState<boolean>(false);
+  const [pageLoading, setPageLoading] = useState<boolean>(false);
+  const { maxWidth, padding } = useCustomDimensions();
+  const { installed, featured, recommended, wallets } = useSnapshot(ApiController.state);
+  const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
+  const imageHeaders = ApiController._getApiHeaders();
+  const preloadedWallets = installed.length + featured.length + recommended.length;
+  const loadingItems = columns - ((100 + preloadedWallets) % columns);
+
+  const combinedWallets = [
+    ...(customWallets ?? []),
+    ...installed,
+    ...featured,
+    ...recommended,
+    ...wallets
+  ];
+
+  // Deduplicate by wallet ID
+  const uniqueWallets = Array.from(
+    new Map(combinedWallets.map(wallet => [wallet?.id, wallet])).values()
+  ).filter(wallet => wallet?.id); // Filter out any undefined wallets
+
+  const walletList = [
+    ...uniqueWallets,
+    ...(pageLoading ? (Array.from({ length: loadingItems }) as WcWallet[]) : [])
+  ];
+
+  const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
+
+  const loadingTemplate = (items: number) => {
+    return (
+      <FlexView
+        flexDirection="row"
+        flexWrap="wrap"
+        alignSelf="center"
+        padding={['0', '0', 's', 'xs']}
+        style={[styles.container, { maxWidth }]}
+      >
+        {Array.from({ length: items }).map((_, index) => (
+          <View key={index} style={[styles.itemContainer, { width: itemWidth }]}>
+            <CardSelectLoader />
+          </View>
+        ))}
+      </FlexView>
+    );
+  };
+
+  const walletTemplate = ({ item }: { item: WcWallet; index: number }) => {
+    const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
+    if (!item?.id) {
+      return (
+        <View style={[styles.itemContainer, { width: itemWidth }]}>
+          <CardSelectLoader />
+        </View>
+      );
+    }
+
+    return (
+      <View style={[styles.itemContainer, { width: itemWidth }]}>
+        <CardSelect
+          imageSrc={AssetUtil.getWalletImage(item)}
+          imageHeaders={imageHeaders}
+          name={item?.name ?? 'Unknown'}
+          onPress={() => onItemPress(item)}
+          installed={!!isInstalled}
+        />
+      </View>
+    );
+  };
+
+  const initialFetch = async () => {
+    try {
+      setLoading(true);
+      setLoadingError(false);
+      await ApiController.fetchWallets({ page: 1 });
+      UiUtil.createViewTransition();
+      setLoading(false);
+    } catch (error) {
+      SnackController.showError('Failed to load wallets');
+      setLoading(false);
+      setLoadingError(true);
+    }
+  };
+
+  const fetchNextPage = async () => {
+    try {
+      if (
+        walletList.length < ApiController.state.count &&
+        !pageLoading &&
+        !loading &&
+        ApiController.state.page > 0
+      ) {
+        setPageLoading(true);
+        await ApiController.fetchWallets({ page: ApiController.state.page + 1 });
+        setPageLoading(false);
+      }
+    } catch (error) {
+      SnackController.showError('Failed to load more wallets');
+      setPageLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!ApiController.state.wallets.length) {
+      initialFetch();
+    }
+  }, []);
+
+  if (loading) {
+    return loadingTemplate(20);
+  }
+
+  if (loadingError) {
+    return (
+      <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={initialFetch}
+        actionTitle="Retry"
+        style={styles.placeholderContainer}
+      />
+    );
+  }
+
+  return (
+    <FlatList
+      key={columns}
+      fadingEdgeLength={20}
+      bounces={false}
+      numColumns={columns}
+      data={walletList}
+      renderItem={walletTemplate}
+      style={styles.container}
+      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
+      onEndReached={fetchNextPage}
+      onEndReachedThreshold={2}
+      keyExtractor={(item, index) => item?.id ?? index}
+      getItemLayout={(_, index) => ({
+        length: ITEM_HEIGHT,
+        offset: ITEM_HEIGHT * index,
+        index
+      })}
+    />
+  );
+}

package/src/partials/w3m-all-wallets-list/styles.ts

@@ -0,0 +1,26 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    height: '100%'
+  },
+  contentContainer: {
+    paddingBottom: Spacing['2xl']
+  },
+  itemContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: Spacing.xs
+  },
+  pageLoader: {
+    marginTop: Spacing.xl
+  },
+  errorContainer: {
+    height: '90%'
+  },
+  placeholderContainer: {
+    flex: 0,
+    height: '90%'
+  }
+});

package/src/partials/w3m-all-wallets-search/index.tsx

@@ -0,0 +1,147 @@
+import { useCallback, useEffect, useState } from 'react';
+import { FlatList, View } from 'react-native';
+import {
+  ApiController,
+  AssetUtil,
+  SnackController,
+  type WcWallet
+} from '@reown/appkit-core-react-native';
+import {
+  CardSelect,
+  CardSelectHeight,
+  CardSelectLoader,
+  FlexView,
+  Spacing
+} from '@reown/appkit-ui-react-native';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { Placeholder } from '../w3m-placeholder';
+import styles from './styles';
+
+export interface AllWalletsSearchProps {
+  columns: number;
+  onItemPress: (wallet: WcWallet) => void;
+  itemWidth?: number;
+  searchQuery?: string;
+}
+
+export function AllWalletsSearch({
+  searchQuery,
+  columns,
+  itemWidth,
+  onItemPress
+}: AllWalletsSearchProps) {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [loadingError, setLoadingError] = useState<boolean>(false);
+  const [prevSearchQuery, setPrevSearchQuery] = useState<string>('');
+  const imageHeaders = ApiController._getApiHeaders();
+  const { maxWidth, padding, isLandscape } = useCustomDimensions();
+
+  const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
+
+  const walletTemplate = ({ item }: { item: WcWallet }) => {
+    const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
+
+    return (
+      <View key={item?.id} style={[styles.itemContainer, { width: itemWidth }]}>
+        <CardSelect
+          imageSrc={AssetUtil.getWalletImage(item)}
+          imageHeaders={imageHeaders}
+          name={item?.name ?? 'Unknown'}
+          onPress={() => onItemPress(item)}
+          installed={!!isInstalled}
+          testID={`wallet-search-item-${item?.id}`}
+        />
+      </View>
+    );
+  };
+
+  const loadingTemplate = (items: number) => {
+    return (
+      <FlexView
+        flexDirection="row"
+        flexWrap="wrap"
+        alignSelf="center"
+        padding={['0', '0', 's', 'xs']}
+        style={[styles.container, { maxWidth }]}
+      >
+        {Array.from({ length: items }).map((_, index) => (
+          <View key={index} style={[styles.itemContainer, { width: itemWidth }]}>
+            <CardSelectLoader />
+          </View>
+        ))}
+      </FlexView>
+    );
+  };
+
+  const emptyTemplate = () => {
+    return (
+      <Placeholder
+        icon="walletPlaceholder"
+        description="No results found"
+        style={[styles.emptyContainer, isLandscape && styles.emptyLandscape]}
+      />
+    );
+  };
+
+  const searchFetch = useCallback(async () => {
+    try {
+      setLoading(true);
+      setLoadingError(false);
+      await ApiController.searchWallet({ search: searchQuery });
+      setLoading(false);
+    } catch (error) {
+      SnackController.showError('Failed to load wallets');
+      setLoading(false);
+      setLoadingError(true);
+    }
+  }, [searchQuery]);
+
+  useEffect(() => {
+    if (prevSearchQuery !== searchQuery) {
+      setPrevSearchQuery(searchQuery || '');
+      searchFetch();
+    }
+  }, [searchQuery, prevSearchQuery, searchFetch]);
+
+  if (loading) {
+    return loadingTemplate(20);
+  }
+
+  if (loadingError) {
+    return (
+      <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={searchFetch}
+        style={styles.placeholderContainer}
+        actionTitle="Retry"
+      />
+    );
+  }
+
+  if (ApiController.state.search.length === 0) {
+    return emptyTemplate();
+  }
+
+  return (
+    <FlatList
+      key={columns}
+      fadingEdgeLength={20}
+      bounces={false}
+      numColumns={columns}
+      data={ApiController.state.search}
+      renderItem={walletTemplate}
+      style={styles.container}
+      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
+      keyExtractor={item => item.id}
+      getItemLayout={(_, index) => ({
+        length: ITEM_HEIGHT,
+        offset: ITEM_HEIGHT * index,
+        index
+      })}
+    />
+  );
+}

package/src/partials/w3m-all-wallets-search/styles.ts

@@ -0,0 +1,30 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    height: '100%'
+  },
+  contentContainer: {
+    paddingBottom: Spacing['2xl']
+  },
+  placeholderContainer: {
+    flex: 0,
+    height: '90%'
+  },
+  emptyContainer: {
+    flex: 0,
+    height: '90%'
+  },
+  emptyLandscape: {
+    paddingTop: '10%'
+  },
+  itemContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: Spacing.xs
+  },
+  text: {
+    marginTop: Spacing.xs
+  }
+});

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

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+import { FlexView, Spacing, Text } from '@reown/appkit-ui-react-native';
+
+export * from './utils';
+
+export interface ConnectingBodyProps {
+  title: string;
+  description?: string;
+}
+
+export function ConnectingBody({ title, description }: ConnectingBodyProps) {
+  return (
+    <FlexView padding={['3xs', '2xl', '0', '2xl']} alignItems="center" style={styles.textContainer}>
+      <Text variant="paragraph-500">{title}</Text>
+      {description && (
+        <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
+          {description}
+        </Text>
+      )}
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  textContainer: {
+    marginVertical: Spacing.xs
+  },
+  descriptionText: {
+    marginTop: Spacing.xs,
+    marginHorizontal: Spacing['3xl']
+  }
+});

package/src/partials/w3m-connecting-body/utils.ts

@@ -0,0 +1,34 @@
+export type BodyErrorType = 'not_installed' | 'default' | 'declined' | undefined;
+
+interface Props {
+  walletName?: string;
+  declined?: boolean;
+  errorType?: BodyErrorType;
+  isWeb?: boolean;
+}
+
+export const getMessage = ({ walletName, declined, errorType, isWeb }: Props) => {
+  if (declined || errorType === 'declined') {
+    return {
+      title: 'Connection declined',
+      description: 'Connection can be declined if a previous request is still active'
+    };
+  }
+
+  switch (errorType) {
+    case 'not_installed':
+      return { title: 'App not installed' };
+    case 'default':
+      return {
+        title: 'Connection error',
+        description: 'There was an unexpected connection error.'
+      };
+    default:
+      return {
+        title: `Continue in ${walletName ?? 'Wallet'}`,
+        description: isWeb
+          ? 'Open and continue in a browser tab'
+          : 'Accept connection request in the wallet'
+      };
+  }
+};

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

@@ -0,0 +1,53 @@
+import type { Platform } from '@reown/appkit-core-react-native';
+import { FlexView, Tabs, type IconType } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export interface ConnectingHeaderProps {
+  platforms: Platform[];
+  onSelectPlatform: (platform: Platform) => void;
+}
+
+interface Tab {
+  label: string;
+  icon: IconType;
+  platform: Platform;
+}
+
+export function ConnectingHeader({ platforms, onSelectPlatform }: ConnectingHeaderProps) {
+  const generateTabs = () => {
+    const tabs = platforms
+      .map(platform => {
+        if (platform === 'mobile') {
+          return { label: 'Mobile', icon: 'mobile', platform: 'mobile' } as const;
+        } else if (platform === 'web') {
+          return { label: 'Web', icon: 'browser', platform: 'web' } as const;
+        } else {
+          return undefined;
+        }
+      })
+      .filter(Boolean) as Tab[];
+
+    return tabs;
+  };
+
+  const onTabChange = (index: number) => {
+    const platform = platforms[index];
+    if (platform) {
+      onSelectPlatform(platform);
+    }
+  };
+
+  const tabs = generateTabs();
+
+  return (
+    <FlexView alignItems="center" padding={['xs', '0', '0', '0']}>
+      <Tabs tabs={tabs} onTabChange={onTabChange} style={styles.tab} />
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  tab: {
+    maxWidth: '50%'
+  }
+});

package/src/partials/w3m-connecting-mobile/components/StoreLink.tsx

@@ -0,0 +1,38 @@
+import { ActionEntry, Button, Spacing, Text } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export interface StoreLinkProps {
+  visible: boolean;
+  walletName?: string;
+  onPress: () => void;
+}
+
+export function StoreLink({ visible, walletName = 'Wallet', onPress }: StoreLinkProps) {
+  if (!visible) return null;
+
+  return (
+    <ActionEntry style={styles.storeButton}>
+      <Text numberOfLines={1} variant="paragraph-500" color="fg-200">
+        {`Don't have ${walletName}?`}
+      </Text>
+      <Button
+        variant="accent"
+        iconRight="chevronRightSmall"
+        onPress={onPress}
+        size="sm"
+        hitSlop={20}
+      >
+        Get
+      </Button>
+    </ActionEntry>
+  );
+}
+
+const styles = StyleSheet.create({
+  storeButton: {
+    justifyContent: 'space-between',
+    paddingHorizontal: Spacing.l,
+    marginHorizontal: Spacing.xl,
+    marginTop: Spacing.l
+  }
+});

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

@@ -0,0 +1,158 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect, useState } from 'react';
+import { Platform, ScrollView } from 'react-native';
+import {
+  RouterController,
+  ApiController,
+  AssetUtil,
+  ConnectionController,
+  CoreHelperUtil,
+  OptionsController,
+  EventsController,
+  ConstantsUtil
+} from '@reown/appkit-core-react-native';
+import {
+  Button,
+  FlexView,
+  LoadingThumbnail,
+  WalletImage,
+  Link,
+  IconBox
+} from '@reown/appkit-ui-react-native';
+
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { UiUtil } from '../../utils/UiUtil';
+import { StoreLink } from './components/StoreLink';
+import { ConnectingBody, getMessage, type BodyErrorType } from '../w3m-connecting-body';
+import styles from './styles';
+
+interface Props {
+  onRetry: () => void;
+  onCopyUri: (uri?: string) => void;
+  isInstalled?: boolean;
+}
+
+export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
+  const { data } = RouterController.state;
+  const { maxWidth: width } = useCustomDimensions();
+  const { wcUri, wcError } = useSnapshot(ConnectionController.state);
+  const [errorType, setErrorType] = useState<BodyErrorType>();
+  const showCopy =
+    OptionsController.isClipboardAvailable() &&
+    errorType !== 'not_installed' &&
+    !CoreHelperUtil.isLinkModeURL(wcUri);
+
+  const showRetry = errorType !== 'not_installed';
+  const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType, declined: wcError });
+
+  const storeUrl = Platform.select({
+    ios: data?.wallet?.app_store,
+    android: data?.wallet?.play_store
+  });
+
+  const onRetryPress = () => {
+    setErrorType(undefined);
+    ConnectionController.setWcError(false);
+    onRetry?.();
+  };
+
+  const onStorePress = () => {
+    if (storeUrl) {
+      CoreHelperUtil.openLink(storeUrl);
+    }
+  };
+
+  const onConnect = useCallback(async () => {
+    try {
+      const { name, mobile_link } = data?.wallet ?? {};
+      if (name && mobile_link && wcUri) {
+        const { redirect, href } = CoreHelperUtil.formatNativeUrl(mobile_link, wcUri);
+        const wcLinking = { name, href };
+        ConnectionController.setWcLinking(wcLinking);
+        ConnectionController.setPressedWallet(data?.wallet);
+        await CoreHelperUtil.openLink(redirect);
+        await ConnectionController.state.wcPromise;
+        UiUtil.storeConnectedWallet(wcLinking, data?.wallet);
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'CONNECT_SUCCESS',
+          properties: {
+            method: 'mobile',
+            name: data?.wallet?.name ?? 'Unknown',
+            explorer_id: data?.wallet?.id
+          }
+        });
+      }
+    } catch (error: any) {
+      if (error.message.includes(ConstantsUtil.LINKING_ERROR)) {
+        setErrorType('not_installed');
+      } else {
+        setErrorType('default');
+      }
+    }
+  }, [wcUri, data]);
+
+  useEffect(() => {
+    if (wcUri) {
+      onConnect();
+    }
+  }, [wcUri, onConnect]);
+
+  return (
+    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
+      <FlexView
+        alignItems="center"
+        alignSelf="center"
+        padding={['2xl', 'l', '0', 'l']}
+        style={{ width }}
+      >
+        <LoadingThumbnail paused={!!errorType || wcError}>
+          <WalletImage
+            size="xl"
+            imageSrc={AssetUtil.getWalletImage(RouterController.state.data?.wallet)}
+            imageHeaders={ApiController._getApiHeaders()}
+          />
+          {wcError && (
+            <IconBox
+              icon={'close'}
+              border
+              background
+              backgroundColor="icon-box-bg-error-100"
+              size="sm"
+              iconColor="error-100"
+              style={styles.errorIcon}
+            />
+          )}
+        </LoadingThumbnail>
+        <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
+        {showRetry && (
+          <Button
+            size="sm"
+            variant="accent"
+            iconLeft="refresh"
+            style={styles.retryButton}
+            iconStyle={styles.retryIcon}
+            onPress={onRetryPress}
+          >
+            Try again
+          </Button>
+        )}
+      </FlexView>
+      {showCopy && (
+        <Link
+          iconLeft="copySmall"
+          color="fg-200"
+          style={styles.copyButton}
+          onPress={() => onCopyUri(wcUri)}
+        >
+          Copy link
+        </Link>
+      )}
+      <StoreLink
+        visible={!isInstalled && !!storeUrl}
+        walletName={data?.wallet?.name}
+        onPress={onStorePress}
+      />
+    </ScrollView>
+  );
+}