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

package/src/partials/w3m-account-tokens/index.tsx

@@ -0,0 +1,108 @@
+import { useCallback, useState } from 'react';
+import {
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import { useSnapshot } from 'valtio';
+import {
+  AssetController,
+  ConnectionsController,
+  RouterController
+} from '@reown/appkit-core-react-native';
+import {
+  FlexView,
+  ListItem,
+  Text,
+  ListToken,
+  useTheme,
+  Spacing,
+  LoadingSpinner
+} from '@reown/appkit-ui-react-native';
+
+interface Props {
+  style?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
+}
+
+export function AccountTokens({ style, isLoading }: Props) {
+  const Theme = useTheme();
+  const [refreshing, setRefreshing] = useState(false);
+  const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+
+  const getBalance = useCallback(async () => {
+    setRefreshing(true);
+    await ConnectionsController.fetchBalance();
+    setRefreshing(false);
+  }, []);
+
+  const onReceivePress = () => {
+    RouterController.push('WalletReceive');
+  };
+
+  if (!balances?.length) {
+    return (
+      <>
+        <ListItem
+          icon="arrowBottomCircle"
+          iconColor="magenta-100"
+          onPress={onReceivePress}
+          style={styles.receiveButton}
+        >
+          <FlexView flexDirection="column" alignItems="flex-start">
+            <Text variant="paragraph-500" color="fg-100">
+              Receive funds
+            </Text>
+            <Text variant="small-400" color="fg-200">
+              Transfer tokens on your wallet
+            </Text>
+          </FlexView>
+        </ListItem>
+        {isLoading && <LoadingSpinner size="sm" style={styles.loadingSpinner} />}
+      </>
+    );
+  }
+
+  return (
+    <ScrollView
+      fadingEdgeLength={20}
+      style={style}
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={getBalance}
+          tintColor={Theme['accent-100']}
+          colors={[Theme['accent-100']]}
+        />
+      }
+    >
+      {balances.map(token => (
+        <ListToken
+          key={token.symbol}
+          name={token.name || 'Unknown'}
+          imageSrc={token.iconUrl}
+          networkSrc={networkImage}
+          value={token.value}
+          amount={token.quantity?.numeric}
+          currency={token.symbol}
+          pressable={false}
+        />
+      ))}
+      {isLoading && <LoadingSpinner size="sm" style={styles.loadingSpinner} />}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  receiveButton: {
+    width: 'auto',
+    marginHorizontal: Spacing.s
+  },
+  loadingSpinner: {
+    marginTop: Spacing.m
+  }
+});

package/src/partials/w3m-account-wallet-features/index.tsx

@@ -0,0 +1,151 @@
+import { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import { Balance, FlexView, IconLink, Tabs } from '@reown/appkit-ui-react-native';
+import {
+  ConnectionsController,
+  ConstantsUtil,
+  CoreHelperUtil,
+  EventsController,
+  OnRampController,
+  OptionsController,
+  RouterController,
+  SwapController
+} from '@reown/appkit-core-react-native';
+import type { Balance as BalanceType } from '@reown/appkit-common-react-native';
+import { AccountActivity } from '../w3m-account-activity';
+import { AccountTokens } from '../w3m-account-tokens';
+import styles from './styles';
+
+export interface AccountWalletFeaturesProps {
+  isBalanceLoading: boolean;
+}
+
+export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeaturesProps) {
+  const [activeTab, setActiveTab] = useState(0);
+  const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
+  const { activeNetwork, balances, activeNamespace } = useSnapshot(ConnectionsController.state);
+  const balance = CoreHelperUtil.calculateAndFormatBalance(balances as BalanceType[]);
+  const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
+  const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
+  const showSend =
+    activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);
+  const isSwapsEnabled =
+    features?.swaps &&
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(activeNetwork.caipNetworkId);
+
+  const onTabChange = (index: number) => {
+    setActiveTab(index);
+    if (index === 2) {
+      onTransactionsPress();
+    }
+  };
+
+  const onTransactionsPress = () => {
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CLICK_TRANSACTIONS',
+      properties: { isSmartAccount }
+    });
+  };
+
+  const onSwapPress = () => {
+    SwapController.resetState();
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'OPEN_SWAP',
+      properties: { network, isSmartAccount }
+    });
+    RouterController.push('Swap');
+  };
+
+  const onSendPress = () => {
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'OPEN_SEND',
+      properties: { network, isSmartAccount }
+    });
+    RouterController.push('WalletSend');
+  };
+
+  const onReceivePress = () => {
+    RouterController.push('WalletReceive');
+  };
+
+  const onBuyPress = () => {
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'SELECT_BUY_CRYPTO'
+    });
+    OnRampController.resetState();
+    RouterController.push('OnRamp');
+  };
+
+  return (
+    <FlexView style={styles.container} alignItems="center">
+      <Balance integer={balance.dollars} decimal={balance.pennies} />
+      <FlexView
+        style={styles.actionsContainer}
+        flexDirection="row"
+        justifyContent="space-around"
+        padding={['0', 's', '0', 's']}
+      >
+        {isOnRampEnabled && (
+          <IconLink
+            icon="card"
+            size="lg"
+            iconColor="accent-100"
+            background
+            backgroundColor="accent-glass-010"
+            pressedColor="accent-glass-020"
+            style={[styles.action, isSwapsEnabled ? styles.actionCenter : styles.actionLeft]}
+            onPress={onBuyPress}
+          />
+        )}
+        {isSwapsEnabled && (
+          <IconLink
+            icon="recycleHorizontal"
+            size="lg"
+            iconColor="accent-100"
+            background
+            backgroundColor="accent-glass-010"
+            pressedColor="accent-glass-020"
+            style={[styles.action, styles.actionLeft]}
+            onPress={onSwapPress}
+          />
+        )}
+        <IconLink
+          icon="arrowBottomCircle"
+          size="lg"
+          iconColor="accent-100"
+          background
+          backgroundColor="accent-glass-010"
+          pressedColor="accent-glass-020"
+          style={[styles.action, isSwapsEnabled ? styles.actionCenter : styles.actionLeft]}
+          onPress={onReceivePress}
+        />
+        {showSend && (
+          <IconLink
+            icon="paperplane"
+            size="lg"
+            iconColor="accent-100"
+            background
+            backgroundColor="accent-glass-010"
+            pressedColor="accent-glass-020"
+            style={[styles.action, styles.actionRight]}
+            onPress={onSendPress}
+          />
+        )}
+      </FlexView>
+      <FlexView style={styles.tab}>
+        <Tabs tabs={['Tokens', 'Activity']} onTabChange={onTabChange} />
+      </FlexView>
+      <FlexView padding={['m', '0', '0', '0']} style={styles.tabContainer}>
+        {activeTab === 0 && (
+          <AccountTokens style={styles.tabContent} isLoading={isBalanceLoading} />
+        )}
+        {activeTab === 1 && <AccountActivity style={styles.tabContent} />}
+      </FlexView>
+    </FlexView>
+  );
+}

package/src/partials/w3m-account-wallet-features/styles.ts

@@ -0,0 +1,41 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    height: 400
+  },
+  balanceText: {
+    fontSize: 40,
+    fontWeight: '500'
+  },
+  actionsContainer: {
+    width: '100%',
+    marginTop: Spacing.s,
+    marginBottom: Spacing.l
+  },
+  action: {
+    flex: 1,
+    height: 52
+  },
+  actionLeft: {
+    marginRight: 8
+  },
+  actionRight: {
+    marginLeft: 8
+  },
+  actionCenter: {
+    marginHorizontal: 8
+  },
+  tab: {
+    width: '100%',
+    paddingHorizontal: Spacing.s
+  },
+  tabContainer: {
+    flex: 1,
+    width: '100%'
+  },
+  tabContent: {
+    paddingHorizontal: Spacing.m
+  }
+});

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
+  }
+});