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

package/src/networks/bitcoin.ts

@@ -0,0 +1,32 @@
+import type { AppKitNetwork } from '@reown/appkit-common-react-native';
+
+export const bitcoin: AppKitNetwork = {
+  id: '000000000019d6689c085ae165831e93',
+  caipNetworkId: 'bip122:000000000019d6689c085ae165831e93',
+  chainNamespace: 'bip122',
+  name: 'Bitcoin',
+  nativeCurrency: {
+    name: 'Bitcoin',
+    symbol: 'BTC',
+    decimals: 8
+  },
+  rpcUrls: {
+    default: { http: ['https://rpc.walletconnect.org/v1'] }
+  }
+};
+
+export const bitcoinTestnet: AppKitNetwork = {
+  id: '000000000933ea01ad0ee984209779ba',
+  caipNetworkId: 'bip122:000000000933ea01ad0ee984209779ba',
+  chainNamespace: 'bip122',
+  name: 'Bitcoin Testnet',
+  nativeCurrency: {
+    name: 'Bitcoin',
+    symbol: 'BTC',
+    decimals: 8
+  },
+  rpcUrls: {
+    default: { http: ['https://rpc.walletconnect.org/v1'] }
+  },
+  testnet: true
+};

package/src/networks/index.ts

@@ -0,0 +1,6 @@
+// -- Networks ---------------------------------------------------------------
+export * from './solana';
+export * from './bitcoin';
+
+// -- Types ---------------------------------------------------------------
+export type { AppKitNetwork } from '@reown/appkit-common-react-native';

package/src/networks/solana.ts

@@ -0,0 +1,44 @@
+import type { AppKitNetwork } from '@reown/appkit-common-react-native';
+
+export const solana: AppKitNetwork = {
+  id: '5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+  name: 'Solana',
+  nativeCurrency: { name: 'Solana', symbol: 'SOL', decimals: 9 },
+  rpcUrls: {
+    default: {
+      http: ['https://rpc.walletconnect.org/v1']
+    }
+  },
+  blockExplorers: { default: { name: 'Solscan', url: 'https://solscan.io' } },
+  chainNamespace: 'solana',
+  caipNetworkId: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+  deprecatedCaipNetworkId: 'solana:4sGjMW1sUnHzSxGspuhpqLDx6wiyjNtZ',
+  testnet: false
+};
+
+export const solanaDevnet: AppKitNetwork = {
+  id: 'EtWTRABZaYq6iMfeYKouRu166VU2xqa1',
+  name: 'Solana Devnet',
+  nativeCurrency: { name: 'Solana', symbol: 'SOL', decimals: 9 },
+  rpcUrls: {
+    default: { http: ['https://rpc.walletconnect.org/v1'] }
+  },
+  blockExplorers: { default: { name: 'Solscan', url: 'https://solscan.io' } },
+  chainNamespace: 'solana',
+  caipNetworkId: 'solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1',
+  deprecatedCaipNetworkId: 'solana:8E9rvCKLFQia2Y35HXjjpWzj8weVo44K',
+  testnet: true
+};
+
+export const solanaTestnet = {
+  id: '4uhcVJyU9pJkvQyS88uRDiswHXSCkY3z',
+  name: 'Solana Testnet',
+  nativeCurrency: { name: 'Solana', symbol: 'SOL', decimals: 9 },
+  rpcUrls: {
+    default: { http: ['https://rpc.walletconnect.org/v1'] }
+  },
+  blockExplorers: { default: { name: 'Solscan', url: 'https://solscan.io' } },
+  chainNamespace: 'solana',
+  caipNetworkId: 'solana:4uhcVJyU9pJkvQyS88uRDiswHXSCkY3z',
+  testnet: true
+};

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

@@ -0,0 +1,175 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ScrollView, View, type StyleProp, type ViewStyle, RefreshControl } from 'react-native';
+import {
+  FlexView,
+  Link,
+  ListTransaction,
+  LoadingSpinner,
+  Text,
+  TransactionUtil,
+  useTheme
+} from '@reown/appkit-ui-react-native';
+import { type Transaction, type TransactionImage } from '@reown/appkit-common-react-native';
+import {
+  AccountController,
+  AssetUtil,
+  ConnectionsController,
+  EventsController,
+  OptionsController,
+  TransactionsController
+} from '@reown/appkit-core-react-native';
+import { Placeholder } from '../w3m-placeholder';
+import { getTransactionListItemProps } from './utils';
+import styles from './styles';
+
+interface Props {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AccountActivity({ style }: Props) {
+  const Theme = useTheme();
+  const [refreshing, setRefreshing] = useState(false);
+  const [initialLoad, setInitialLoad] = useState(true);
+  const { loading, transactions, next } = useSnapshot(TransactionsController.state);
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+
+  const handleLoadMore = () => {
+    const address = ConnectionsController.state.activeAddress?.split(':')[2];
+    TransactionsController.fetchTransactions(address);
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'LOAD_MORE_TRANSACTIONS',
+      properties: {
+        address,
+        projectId: OptionsController.state.projectId,
+        cursor: TransactionsController.state.next,
+        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+      }
+    });
+  };
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    const address = ConnectionsController.state.activeAddress?.split(':')[2];
+    await TransactionsController.fetchTransactions(address, true);
+    setRefreshing(false);
+  }, []);
+
+  const transactionsByYear = useMemo(() => {
+    return TransactionsController.getTransactionsByYearAndMonth(transactions as Transaction[]);
+  }, [transactions]);
+
+  useEffect(() => {
+    if (!TransactionsController.state.transactions.length) {
+      const address = ConnectionsController.state.activeAddress?.split(':')[2];
+      TransactionsController.fetchTransactions(address, true);
+    }
+    // Set initial load to false after first fetch
+    const timer = setTimeout(() => setInitialLoad(false), 100);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Show loading spinner during initial load or when loading with no transactions
+  if ((initialLoad || loading) && !transactions.length) {
+    return (
+      <FlexView style={[styles.placeholder, style]} alignItems="center" justifyContent="center">
+        <LoadingSpinner />
+      </FlexView>
+    );
+  }
+
+  // Only show placeholder when we're not in initial load or loading state
+  if (!Object.keys(transactionsByYear).length && !loading && !initialLoad) {
+    return (
+      <Placeholder
+        icon="swapHorizontal"
+        title="No activity yet"
+        description="Your next transactions will appear here"
+        style={[styles.placeholder, style]}
+      />
+    );
+  }
+
+  return (
+    <ScrollView
+      style={[styles.container, style]}
+      fadingEdgeLength={20}
+      contentContainerStyle={[styles.contentContainer]}
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          tintColor={Theme['accent-100']}
+          colors={[Theme['accent-100']]}
+        />
+      }
+    >
+      {Object.keys(transactionsByYear)
+        .reverse()
+        .map(year => (
+          <View key={year}>
+            {Object.keys(transactionsByYear[year] || {})
+              .reverse()
+              .map(month => (
+                <View key={month}>
+                  <Text variant="paragraph-400" color="fg-200" style={styles.separatorText}>
+                    {TransactionUtil.getTransactionGroupTitle(year, month)}
+                  </Text>
+                  {transactionsByYear[year]?.[month]?.map((transaction: Transaction) => {
+                    const { date, type, descriptions, status, images, isAllNFT, transfers } =
+                      getTransactionListItemProps(transaction);
+                    const hasMultipleTransfers = transfers?.length > 2;
+
+                    // Show only the first transfer
+                    if (hasMultipleTransfers) {
+                      const description = TransactionUtil.getTransferDescription(transfers[0]);
+
+                      return (
+                        <ListTransaction
+                          key={`${transaction.id}@${description}`}
+                          date={date}
+                          type={type}
+                          descriptions={[description]}
+                          status={status}
+                          images={[images[0]] as TransactionImage[]}
+                          networkSrc={networkImage}
+                          style={styles.transactionItem}
+                          isAllNFT={isAllNFT}
+                        />
+                      );
+                    }
+
+                    return (
+                      <ListTransaction
+                        key={transaction.id}
+                        date={date}
+                        type={type}
+                        descriptions={descriptions}
+                        status={status}
+                        images={images}
+                        networkSrc={networkImage}
+                        style={styles.transactionItem}
+                        isAllNFT={isAllNFT}
+                      />
+                    );
+                  })}
+                </View>
+              ))}
+          </View>
+        ))}
+      {(next || loading) && !refreshing && (
+        <FlexView style={styles.footer} alignItems="center" justifyContent="center">
+          {next && !loading && (
+            <Link size="md" style={styles.loadMoreButton} onPress={handleLoadMore}>
+              Load more
+            </Link>
+          )}
+          {loading && <LoadingSpinner color="accent-100" />}
+        </FlexView>
+      )}
+    </ScrollView>
+  );
+}

package/src/partials/w3m-account-activity/styles.ts

@@ -0,0 +1,29 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    paddingHorizontal: Spacing.xs
+  },
+  contentContainer: {
+    paddingBottom: Spacing.m
+  },
+  separatorText: {
+    marginVertical: Spacing.xs
+  },
+  transactionItem: {
+    marginVertical: Spacing.xs
+  },
+  footer: {
+    height: 40
+  },
+  placeholder: {
+    minHeight: 200,
+    flex: 0
+  },
+  loadMoreButton: {
+    alignSelf: 'center',
+    width: 100,
+    marginVertical: Spacing.xs
+  }
+});

package/src/partials/w3m-account-activity/utils.ts

@@ -0,0 +1,24 @@
+import { DateUtil, type Transaction } from '@reown/appkit-common-react-native';
+import { TransactionUtil, type TransactionType } from '@reown/appkit-ui-react-native';
+
+export function getTransactionListItemProps(transaction: Transaction) {
+  const date = DateUtil.formatDate(transaction?.metadata?.minedAt);
+  const descriptions = TransactionUtil.getTransactionDescriptions(transaction);
+
+  const transfers = transaction?.transfers;
+  const transfer = transaction?.transfers?.[0];
+  const isAllNFT =
+    Boolean(transfer) && transaction?.transfers?.every(item => Boolean(item.nft_info));
+  const images = TransactionUtil.getTransactionImages(transfers);
+
+  return {
+    date,
+    direction: transfer?.direction,
+    descriptions,
+    isAllNFT,
+    images,
+    status: transaction.metadata?.status,
+    transfers,
+    type: transaction.metadata?.operationType as TransactionType
+  };
+}

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

@@ -0,0 +1,100 @@
+import { useCallback, useState } from 'react';
+import {
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import { useSnapshot } from 'valtio';
+import {
+  AccountController,
+  AssetUtil,
+  ConnectionsController,
+  RouterController
+} from '@reown/appkit-core-react-native';
+import {
+  FlexView,
+  ListItem,
+  Text,
+  ListToken,
+  useTheme,
+  Spacing
+} from '@reown/appkit-ui-react-native';
+
+interface Props {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AccountTokens({ style }: Props) {
+  const Theme = useTheme();
+  const [refreshing, setRefreshing] = useState(false);
+  const { tokenBalance } = useSnapshot(AccountController.state);
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    AccountController.fetchTokenBalance();
+    setRefreshing(false);
+  }, []);
+
+  const onReceivePress = () => {
+    RouterController.push('WalletReceive');
+  };
+
+  if (!tokenBalance?.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>
+    );
+  }
+
+  return (
+    <ScrollView
+      fadingEdgeLength={20}
+      style={style}
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          tintColor={Theme['accent-100']}
+          colors={[Theme['accent-100']]}
+        />
+      }
+    >
+      {tokenBalance.map(token => (
+        <ListToken
+          key={token.name}
+          name={token.name}
+          imageSrc={token.iconUrl}
+          networkSrc={networkImage}
+          value={token.value}
+          amount={token.quantity.numeric}
+          currency={token.symbol}
+          pressable={false}
+        />
+      ))}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  receiveButton: {
+    width: 'auto',
+    marginHorizontal: Spacing.s
+  }
+});

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

@@ -0,0 +1,156 @@
+import { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import { Balance, FlexView, IconLink, Tabs } from '@reown/appkit-ui-react-native';
+import {
+  AccountController,
+  ConstantsUtil,
+  CoreHelperUtil,
+  EventsController,
+  NetworkController,
+  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 {
+  value: string;
+}
+
+export function AccountWalletFeatures() {
+  const [activeTab, setActiveTab] = useState(0);
+  const { tokenBalance } = useSnapshot(AccountController.state);
+  const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
+  const balance = CoreHelperUtil.calculateAndFormatBalance(tokenBalance as BalanceType[]);
+  const isSwapsEnabled = features?.swaps;
+
+  const onTabChange = (index: number) => {
+    setActiveTab(index);
+    if (index === 2) {
+      onTransactionsPress();
+    }
+  };
+
+  const onTransactionsPress = () => {
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CLICK_TRANSACTIONS',
+      properties: {
+        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+      }
+    });
+  };
+
+  const onSwapPress = () => {
+    if (
+      NetworkController.state.caipNetwork?.id &&
+      !ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(`${NetworkController.state.caipNetwork.id}`)
+    ) {
+      RouterController.push('UnsupportedChain');
+    } else {
+      SwapController.resetState();
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'OPEN_SWAP',
+        properties: {
+          network: NetworkController.state.caipNetwork?.id || '',
+          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+        }
+      });
+      RouterController.push('Swap');
+    }
+  };
+
+  const onSendPress = () => {
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'OPEN_SEND',
+      properties: {
+        network: NetworkController.state.caipNetwork?.id || '',
+        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+      }
+    });
+    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}
+        />
+        <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} />}
+        {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
+  }
+});