@reown/appkit-react-native 0.0.0-canary-20251008180350

package/src/partials/w3m-all-wallets-list/components/WalletList.tsx

@@ -0,0 +1,152 @@
+import { FlatList, StyleSheet, type StyleProp, type ViewStyle, type ViewToken } from 'react-native';
+import { WalletItem } from './WalletItem';
+import {
+  CardSelectHeight,
+  Spacing,
+  useCustomDimensions,
+  CardSelectLoader,
+  CardSelectWidth
+} from '@reown/appkit-ui-react-native';
+import { ApiController, EventsController } from '@reown/appkit-core-react-native';
+import type { WcWallet } from '@reown/appkit-common-react-native';
+import { useCallback, useRef } from 'react';
+
+const imageHeaders = ApiController._getApiHeaders();
+
+const ITEM_HEIGHT = CardSelectHeight;
+const ITEM_WIDTH = CardSelectWidth;
+const ITEM_HEIGHT_WITH_GAP = ITEM_HEIGHT + Spacing['3xs'];
+
+interface Props {
+  data: WcWallet[];
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+  isLoading?: boolean;
+  loadingItems?: number;
+  style?: StyleProp<ViewStyle>;
+  testIDKey?: string;
+  searchQuery?: string;
+}
+
+export function WalletList({
+  data,
+  onItemPress,
+  onEndReached,
+  onEndReachedThreshold,
+  isLoading = false,
+  loadingItems = 20,
+  testIDKey,
+  style,
+  searchQuery
+}: Props) {
+  const { padding, maxHeight } = useCustomDimensions();
+  const viewedWalletsRef = useRef<Set<string>>(new Set());
+
+  // Create loading data if isLoading is true
+  const displayData = isLoading
+    ? Array.from({ length: loadingItems }, (_, index) => ({ id: `loading-${index}` }) as WcWallet)
+    : data;
+
+  const keyExtractor = useCallback(
+    (item: WcWallet, index: number) => item?.id ?? `item-${index}`,
+    []
+  );
+
+  const getItemLayout = useCallback((_: any, index: number) => {
+    return {
+      length: ITEM_HEIGHT_WITH_GAP,
+      offset: ITEM_HEIGHT_WITH_GAP * index,
+      index
+    };
+  }, []);
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: WcWallet; index: number }) => {
+      if (isLoading) {
+        return <CardSelectLoader style={styles.itemContainer} />;
+      }
+
+      return (
+        <WalletItem
+          item={item}
+          imageHeaders={imageHeaders}
+          displayIndex={index}
+          onItemPress={onItemPress}
+          style={styles.itemContainer}
+          testID={testIDKey ? `${testIDKey}-${item?.id}` : undefined}
+        />
+      );
+    },
+    [isLoading, onItemPress, testIDKey]
+  );
+
+  const onViewableItemsChanged = useCallback(
+    ({ viewableItems }: { viewableItems: ViewToken[] }) => {
+      if (isLoading) return;
+
+      viewableItems.forEach(({ item }, index) => {
+        const wallet = item as WcWallet;
+        if (wallet?.id && !viewedWalletsRef.current.has(wallet.id)) {
+          viewedWalletsRef.current.add(wallet.id);
+          const isInstalled = !!ApiController.state.installed.find(w => w?.id === item?.id);
+          EventsController.trackWalletImpression({
+            wallet,
+            view: 'AllWallets',
+            displayIndex: index,
+            query: searchQuery,
+            installed: isInstalled
+          });
+        }
+      });
+    },
+    [isLoading, searchQuery]
+  );
+
+  const viewabilityConfig = useRef({
+    itemVisiblePercentThreshold: 50, // Item is considered visible when 50% is visible
+    minimumViewTime: 100 // Must be visible for at least 100ms
+  }).current;
+
+  return (
+    <FlatList
+      fadingEdgeLength={20}
+      bounces={false}
+      numColumns={4}
+      data={displayData}
+      style={[styles.list, { height: maxHeight }, style]}
+      columnWrapperStyle={styles.columnWrapperStyle}
+      renderItem={renderItem}
+      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding }]}
+      initialNumToRender={32}
+      maxToRenderPerBatch={12}
+      windowSize={10}
+      onEndReached={onEndReached}
+      onEndReachedThreshold={onEndReachedThreshold}
+      keyExtractor={keyExtractor}
+      removeClippedSubviews={true}
+      getItemLayout={getItemLayout}
+      onViewableItemsChanged={onViewableItemsChanged}
+      viewabilityConfig={viewabilityConfig}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  list: {
+    paddingTop: Spacing['3xs']
+  },
+  contentContainer: {
+    paddingBottom: Spacing['xs'],
+    paddingTop: Spacing['3xs'],
+    gap: Spacing['3xs'],
+    alignItems: 'center'
+  },
+  columnWrapperStyle: {
+    justifyContent: 'space-around'
+  },
+  itemContainer: {
+    width: '23%',
+    minWidth: ITEM_WIDTH
+  }
+});

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

@@ -0,0 +1,123 @@
+import { useEffect, useState } from 'react';
+import { useSnapshot } from 'valtio';
+import {
+  ApiController,
+  LogController,
+  OptionsController,
+  SnackController,
+  type OptionsControllerState
+} from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
+import styles from './styles';
+import { Placeholder } from '../w3m-placeholder';
+import { Loading } from './components/Loading';
+
+import { WalletList } from './components/WalletList';
+
+interface AllWalletsListProps {
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
+  headerHeight?: number;
+}
+
+export function AllWalletsList({ 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 { installed, featured, recommended, wallets } = useSnapshot(ApiController.state);
+  const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
+
+  let combinedWallets = [...installed, ...featured, ...recommended, ...wallets];
+
+  // Show custom wallets after certified wallets.
+  const certifiedIndex = combinedWallets.findLastIndex(wallet => wallet.badge_type === 'certified');
+  if (certifiedIndex > -1) {
+    const nonCertifiedWallets = combinedWallets.splice(certifiedIndex + 1);
+    combinedWallets = combinedWallets.concat(customWallets ?? [], nonCertifiedWallets);
+  } else {
+    combinedWallets = [
+      ...installed,
+      ...featured,
+      ...recommended,
+      ...(customWallets ?? []),
+      ...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 loadingItems = 4 - ((100 + uniqueWallets.length) % 4);
+
+  const walletList = [
+    ...uniqueWallets,
+    ...(pageLoading ? (Array.from({ length: loadingItems }) as WcWallet[]) : [])
+  ];
+
+  const initialFetch = async () => {
+    try {
+      setLoading(true);
+      setLoadingError(false);
+      await ApiController.fetchWallets({ page: 1 });
+      setLoading(false);
+    } catch (error) {
+      LogController.sendError(error, 'AllWalletsList.tsx', 'initialFetch');
+      SnackController.showError('Failed to load wallets');
+      setLoading(false);
+      setLoadingError(true);
+    }
+  };
+
+  const fetchNextPage = async () => {
+    try {
+      if (
+        walletList.length - (customWallets ?? []).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 <Loading loadingItems={12} style={styles.loadingContainer} />;
+  }
+
+  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 (
+    <WalletList
+      data={walletList}
+      onEndReached={fetchNextPage}
+      onEndReachedThreshold={0.5}
+      onItemPress={onItemPress}
+    />
+  );
+}

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

@@ -0,0 +1,30 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  contentContainer: {
+    paddingBottom: Spacing['4xl'],
+    paddingTop: Spacing['3xs'],
+    gap: Spacing['3xs'],
+    alignItems: 'center'
+  },
+  columnWrapperStyle: {
+    justifyContent: 'space-around'
+  },
+  itemContainer: {
+    width: '23%'
+  },
+  pageLoader: {
+    marginTop: Spacing.xl
+  },
+  errorContainer: {
+    height: '90%'
+  },
+  placeholderContainer: {
+    flex: 0,
+    height: '90%'
+  },
+  loadingContainer: {
+    height: 320
+  }
+});

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

@@ -0,0 +1,95 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  ApiController,
+  LogController,
+  OptionsController,
+  SnackController
+} from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
+import { useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { Placeholder } from '../w3m-placeholder';
+import styles from './styles';
+
+import { Loading } from '../w3m-all-wallets-list/components/Loading';
+import { WalletList } from '../w3m-all-wallets-list/components/WalletList';
+
+export interface AllWalletsSearchProps {
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
+  searchQuery?: string;
+}
+
+export function AllWalletsSearch({ searchQuery, onItemPress }: AllWalletsSearchProps) {
+  const { search } = useSnapshot(ApiController.state);
+  const { customWallets } = useSnapshot(OptionsController.state);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [loadingError, setLoadingError] = useState<boolean>(false);
+  const [prevSearchQuery, setPrevSearchQuery] = useState<string>('');
+  const { isLandscape } = useCustomDimensions();
+
+  const customWalletResults = (customWallets ?? []).filter(wallet =>
+    wallet.name.toLowerCase().includes(searchQuery?.toLowerCase() ?? '')
+  );
+
+  const results = [...search, ...customWalletResults];
+
+  const searchFetch = useCallback(async () => {
+    try {
+      setLoading(true);
+      setLoadingError(false);
+      // eslint-disable-next-line valtio/state-snapshot-rule
+      await ApiController.searchWallet({ search: searchQuery });
+      setLoading(false);
+    } catch (error) {
+      LogController.sendError(error, 'AllWalletsSearch.tsx', 'searchFetch');
+      SnackController.showError('Failed to load wallets');
+      setLoading(false);
+      setLoadingError(true);
+    }
+  }, [searchQuery]);
+
+  useEffect(() => {
+    if (prevSearchQuery !== searchQuery) {
+      setPrevSearchQuery(searchQuery || '');
+      searchFetch();
+    }
+  }, [searchQuery, prevSearchQuery, searchFetch]);
+
+  if (loading) {
+    return <Loading loadingItems={12} />;
+  }
+
+  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 (results.length === 0) {
+    return (
+      <Placeholder
+        icon="walletPlaceholder"
+        description="No results found"
+        style={[styles.emptyContainer, isLandscape && styles.emptyLandscape]}
+      />
+    );
+  }
+
+  return (
+    <WalletList
+      onItemPress={onItemPress}
+      searchQuery={searchQuery}
+      data={results}
+      testIDKey="wallet-search-item"
+    />
+  );
+}

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

@@ -0,0 +1,29 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  contentContainer: {
+    paddingBottom: Spacing['xs']
+  },
+  placeholderContainer: {
+    flex: 0,
+    height: '90%'
+  },
+  emptyContainer: {
+    flex: 0,
+    justifyContent: 'flex-start',
+    paddingTop: Spacing['4xl'],
+    height: '90%'
+  },
+  emptyLandscape: {
+    paddingTop: '10%'
+  },
+  itemContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: Spacing['4xs']
+  },
+  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>
+      ) : null}
+    </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-common-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
+  }
+});