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

package/src/modal/w3m-button/index.tsx

@@ -0,0 +1,45 @@
+import { useSnapshot } from 'valtio';
+import { AccountButton, type AccountButtonProps } from '../w3m-account-button';
+import { ConnectButton, type ConnectButtonProps } from '../w3m-connect-button';
+import { ConnectionsController, ModalController } from '@reown/appkit-core-react-native';
+
+export interface AppKitButtonProps {
+  balance?: AccountButtonProps['balance'];
+  disabled?: AccountButtonProps['disabled'];
+  size?: ConnectButtonProps['size'];
+  label?: ConnectButtonProps['label'];
+  loadingLabel?: ConnectButtonProps['loadingLabel'];
+  accountStyle?: AccountButtonProps['style'];
+  connectStyle?: ConnectButtonProps['style'];
+}
+
+export function AppKitButton({
+  balance,
+  disabled,
+  size,
+  label = 'Connect',
+  loadingLabel = 'Connecting',
+  accountStyle,
+  connectStyle
+}: AppKitButtonProps) {
+  const { isConnected } = useSnapshot(ConnectionsController.state);
+  const { loading } = useSnapshot(ModalController.state);
+
+  return !loading && isConnected ? (
+    <AccountButton
+      style={accountStyle}
+      balance={balance}
+      disabled={disabled}
+      testID="account-button"
+    />
+  ) : (
+    <ConnectButton
+      style={connectStyle}
+      size={size}
+      label={label}
+      loadingLabel={loadingLabel}
+      disabled={disabled}
+      testID="connect-button"
+    />
+  );
+}

package/src/modal/w3m-connect-button/index.tsx

@@ -0,0 +1,43 @@
+import { useSnapshot } from 'valtio';
+import { ModalController, ThemeController } from '@reown/appkit-core-react-native';
+import {
+  ConnectButton as ConnectButtonUI,
+  ThemeProvider,
+  type ConnectButtonProps as ConnectButtonUIProps
+} from '@reown/appkit-ui-react-native';
+
+export interface ConnectButtonProps {
+  label: string;
+  loadingLabel: string;
+  size?: ConnectButtonUIProps['size'];
+  style?: ConnectButtonUIProps['style'];
+  disabled?: ConnectButtonUIProps['disabled'];
+  testID?: string;
+}
+
+export function ConnectButton({
+  label,
+  loadingLabel,
+  size = 'md',
+  style,
+  disabled,
+  testID
+}: ConnectButtonProps) {
+  const { open, loading } = useSnapshot(ModalController.state);
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+
+  return (
+    <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+      <ConnectButtonUI
+        onPress={() => ModalController.open()}
+        size={size}
+        loading={loading || open}
+        style={style}
+        testID={testID}
+        disabled={disabled}
+      >
+        {loading || open ? loadingLabel : label}
+      </ConnectButtonUI>
+    </ThemeProvider>
+  );
+}

package/src/modal/w3m-modal/index.tsx

@@ -0,0 +1,101 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect } from 'react';
+import { useWindowDimensions, StatusBar } from 'react-native';
+import Modal from 'react-native-modal';
+import { Card, ThemeProvider } from '@reown/appkit-ui-react-native';
+import {
+  ApiController,
+  EventsController,
+  ModalController,
+  OptionsController,
+  RouterController,
+  ThemeController,
+  ConnectionsController
+} from '@reown/appkit-core-react-native';
+import { SIWEController } from '@reown/appkit-siwe-react-native';
+
+import { AppKitRouter } from '../w3m-router';
+import { Header } from '../../partials/w3m-header';
+import { Snackbar } from '../../partials/w3m-snackbar';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import styles from './styles';
+import { useAppKit } from '../../AppKitContext';
+
+export function AppKit() {
+  const { disconnect } = useAppKit();
+  const { open } = useSnapshot(ModalController.state);
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+  const { projectId } = useSnapshot(OptionsController.state);
+  const { height } = useWindowDimensions();
+  const { isLandscape } = useCustomDimensions();
+  const portraitHeight = height - 80;
+  const landScapeHeight = height * 0.95 - (StatusBar.currentHeight ?? 0);
+
+  const onBackButtonPress = () => {
+    if (RouterController.state.history.length > 1) {
+      return RouterController.goBack();
+    }
+
+    return handleClose();
+  };
+
+  const prefetch = useCallback(async () => {
+    await ApiController.prefetch();
+    EventsController.sendEvent({ type: 'track', event: 'MODAL_LOADED' });
+  }, []);
+
+  const handleClose = async () => {
+    if (OptionsController.state.isSiweEnabled) {
+      const session = await SIWEController.getSession();
+      if (
+        !session &&
+        SIWEController.state.status !== 'success' &&
+        ConnectionsController.state.activeNamespace === 'eip155' &&
+        !!ConnectionsController.state.activeAddress
+      ) {
+        await disconnect();
+      }
+    }
+
+    if (
+      RouterController.state.view === 'OnRampLoading' &&
+      EventsController.state.data.event === 'BUY_SUBMITTED'
+    ) {
+      // Send event only if the onramp url was already created
+      EventsController.sendEvent({ type: 'track', event: 'BUY_CANCEL' });
+    }
+  };
+  useEffect(() => {
+    if (projectId) {
+      prefetch();
+    }
+  }, [projectId, prefetch]);
+
+  return (
+    <>
+      <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+        <Modal
+          style={styles.modal}
+          isVisible={open}
+          useNativeDriver
+          useNativeDriverForBackdrop
+          statusBarTranslucent
+          hideModalContentWhileAnimating
+          propagateSwipe
+          onModalHide={handleClose}
+          onBackdropPress={ModalController.close}
+          onBackButtonPress={onBackButtonPress}
+          testID="w3m-modal"
+        >
+          <Card
+            style={[styles.card, { maxHeight: isLandscape ? landScapeHeight : portraitHeight }]}
+          >
+            <Header />
+            <AppKitRouter />
+            <Snackbar />
+          </Card>
+        </Modal>
+      </ThemeProvider>
+    </>
+  );
+}

package/src/modal/w3m-modal/styles.ts

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  modal: {
+    margin: 0,
+    justifyContent: 'flex-end'
+  },
+  card: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    maxHeight: '80%'
+  }
+});

package/src/modal/w3m-network-button/index.tsx

@@ -0,0 +1,52 @@
+import { useSnapshot } from 'valtio';
+import type { StyleProp, ViewStyle } from 'react-native';
+import {
+  ApiController,
+  AssetController,
+  ConnectionsController,
+  EventsController,
+  ModalController,
+  OptionsController,
+  ThemeController
+} from '@reown/appkit-core-react-native';
+import { NetworkButton as NetworkButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
+
+export interface NetworkButtonProps {
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function NetworkButton({ disabled, style }: NetworkButtonProps) {
+  const { activeNetwork, isConnected } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const { defaultNetwork } = useSnapshot(OptionsController.state);
+  const { loading } = useSnapshot(ModalController.state);
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+
+  const network = isConnected ? activeNetwork : defaultNetwork;
+  const networkImage = network ? networkImages[network.id] : undefined;
+
+  const onNetworkPress = () => {
+    ModalController.open({ view: 'Networks' });
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CLICK_NETWORKS'
+    });
+  };
+
+  return (
+    <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+      <NetworkButtonUI
+        imageSrc={networkImage}
+        imageHeaders={ApiController._getApiHeaders()}
+        disabled={disabled || loading}
+        style={style}
+        onPress={onNetworkPress}
+        loading={loading}
+        testID="network-button"
+      >
+        {network?.name ?? (isConnected ? 'Unknown Network' : 'Select Network')}
+      </NetworkButtonUI>
+    </ThemeProvider>
+  );
+}

package/src/modal/w3m-router/index.tsx

@@ -0,0 +1,109 @@
+import { useSnapshot } from 'valtio';
+import { useLayoutEffect, useMemo } from 'react';
+import { RouterController } from '@reown/appkit-core-react-native';
+
+import { AccountDefaultView } from '../../views/w3m-account-default-view';
+import { AccountView } from '../../views/w3m-account-view';
+import { AllWalletsView } from '../../views/w3m-all-wallets-view';
+import { ConnectView } from '../../views/w3m-connect-view';
+import { ConnectSocialsView } from '../../views/w3m-connect-socials-view';
+import { ConnectingView } from '../../views/w3m-connecting-view';
+import { ConnectingExternalView } from '../../views/w3m-connecting-external-view';
+import { ConnectingSocialView } from '../../views/w3m-connecting-social-view';
+import { ConnectingSiweView } from '../../views/w3m-connecting-siwe-view';
+import { GetWalletView } from '../../views/w3m-get-wallet-view';
+import { NetworksView } from '../../views/w3m-networks-view';
+import { NetworkSwitchView } from '../../views/w3m-network-switch-view';
+import { OnRampLoadingView } from '../../views/w3m-onramp-loading-view';
+import { OnRampView } from '../../views/w3m-onramp-view';
+import { OnRampCheckoutView } from '../../views/w3m-onramp-checkout-view';
+import { OnRampSettingsView } from '../../views/w3m-onramp-settings-view';
+import { OnRampTransactionView } from '../../views/w3m-onramp-transaction-view';
+import { SwapView } from '../../views/w3m-swap-view';
+import { SwapPreviewView } from '../../views/w3m-swap-preview-view';
+import { TransactionsView } from '../../views/w3m-transactions-view';
+import { UnsupportedChainView } from '../../views/w3m-unsupported-chain-view';
+import { UpgradeEmailWalletView } from '../../views/w3m-upgrade-email-wallet-view';
+import { WalletCompatibleNetworks } from '../../views/w3m-wallet-compatible-networks-view';
+import { WalletReceiveView } from '../../views/w3m-wallet-receive-view';
+import { WalletSendView } from '../../views/w3m-wallet-send-view';
+import { WalletSendPreviewView } from '../../views/w3m-wallet-send-preview-view';
+import { WalletSendSelectTokenView } from '../../views/w3m-wallet-send-select-token-view';
+import { WhatIsANetworkView } from '../../views/w3m-what-is-a-network-view';
+import { WhatIsAWalletView } from '../../views/w3m-what-is-a-wallet-view';
+import { UiUtil } from '../../utils/UiUtil';
+
+export function AppKitRouter() {
+  const { view } = useSnapshot(RouterController.state);
+
+  useLayoutEffect(() => {
+    UiUtil.createViewTransition();
+  }, [view]);
+
+  const ViewComponent = useMemo(() => {
+    switch (view) {
+      case 'Account':
+        return AccountView;
+      case 'AccountDefault':
+        return AccountDefaultView;
+      case 'AllWallets':
+        return AllWalletsView;
+      case 'Connect':
+        return ConnectView;
+      case 'ConnectSocials':
+        return ConnectSocialsView;
+      case 'ConnectingExternal':
+        return ConnectingExternalView;
+      case 'ConnectingSiwe':
+        return ConnectingSiweView;
+      case 'ConnectingSocial':
+        return ConnectingSocialView;
+      case 'ConnectingWalletConnect':
+        return ConnectingView;
+      case 'GetWallet':
+        return GetWalletView;
+      case 'Networks':
+        return NetworksView;
+      case 'OnRamp':
+        return OnRampView;
+      case 'OnRampCheckout':
+        return OnRampCheckoutView;
+      case 'OnRampSettings':
+        return OnRampSettingsView;
+      case 'OnRampLoading':
+        return OnRampLoadingView;
+      case 'SwitchNetwork':
+        return NetworkSwitchView;
+      case 'OnRampTransaction':
+        return OnRampTransactionView;
+      case 'Swap':
+        return SwapView;
+      case 'SwapPreview':
+        return SwapPreviewView;
+      case 'Transactions':
+        return TransactionsView;
+      case 'UnsupportedChain':
+        return UnsupportedChainView;
+      case 'UpgradeEmailWallet':
+        return UpgradeEmailWalletView;
+      case 'WalletCompatibleNetworks':
+        return WalletCompatibleNetworks;
+      case 'WalletReceive':
+        return WalletReceiveView;
+      case 'WalletSend':
+        return WalletSendView;
+      case 'WalletSendPreview':
+        return WalletSendPreviewView;
+      case 'WalletSendSelectToken':
+        return WalletSendSelectTokenView;
+      case 'WhatIsANetwork':
+        return WhatIsANetworkView;
+      case 'WhatIsAWallet':
+        return WhatIsAWalletView;
+      default:
+        return ConnectView;
+    }
+  }, [view]);
+
+  return <ViewComponent />;
+}

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

@@ -0,0 +1,200 @@
+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 {
+  AssetController,
+  ConnectionsController,
+  ConstantsUtil,
+  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 { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const isSupported =
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
+
+  const handleLoadMore = () => {
+    const address = ConnectionsController.state.activeAddress;
+
+    if (!address) {
+      return;
+    }
+
+    TransactionsController.fetchTransactions(address);
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'LOAD_MORE_TRANSACTIONS',
+      properties: {
+        address,
+        projectId: OptionsController.state.projectId,
+        cursor: TransactionsController.state.next,
+        isSmartAccount: ConnectionsController.state.accountType === 'smartAccount'
+      }
+    });
+  };
+
+  const onRefresh = useCallback(async () => {
+    const address = ConnectionsController.state.activeAddress;
+
+    if (!address) {
+      return;
+    }
+
+    setRefreshing(true);
+    await TransactionsController.fetchTransactions(address, true);
+    setRefreshing(false);
+  }, []);
+
+  const transactionsByYear = useMemo(() => {
+    return TransactionsController.getTransactionsByYearAndMonth(transactions as Transaction[]);
+  }, [transactions]);
+
+  useEffect(() => {
+    const address = ConnectionsController.state.activeAddress;
+    if (!TransactionsController.state.transactions.length && address) {
+      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>
+    );
+  }
+
+  if (!isSupported) {
+    return (
+      <Placeholder
+        icon="infoCircle"
+        title="Unsupported network"
+        description="Activity list is not available for this network"
+        style={[styles.placeholder, style]}
+      />
+    );
+  }
+
+  // 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
+  };
+}