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

package/src/utils/UiUtil.ts

@@ -0,0 +1,26 @@
+import { RouterController } from '@reown/appkit-core-react-native';
+
+// Global animation instance to coordinate transitions
+let currentRouteTransition: ((direction: 'forward' | 'backward' | 'none') => Promise<void>) | null =
+  null;
+
+export const UiUtil = {
+  TOTAL_VISIBLE_WALLETS: 4,
+
+  setRouteTransition: (
+    transitionFn: (direction: 'forward' | 'backward' | 'none') => Promise<void>
+  ) => {
+    currentRouteTransition = transitionFn;
+  },
+
+  createViewTransition: async () => {
+    if (currentRouteTransition) {
+      const { navigationDirection } = RouterController.state;
+      await currentRouteTransition(navigationDirection);
+      // After the transition completes, ensure direction is reset to 'none'
+      if (RouterController.state.navigationDirection !== 'none') {
+        RouterController.state.navigationDirection = 'none';
+      }
+    }
+  }
+};

package/src/views/w3m-account-default-view/components/auth-buttons.tsx

@@ -0,0 +1,57 @@
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { UpgradeWalletButton } from './upgrade-wallet-button';
+import { ListSocial, Spacing, Text } from '@reown/appkit-ui-react-native';
+import type { SocialProvider } from '@reown/appkit-common-react-native';
+
+export interface AuthButtonsProps {
+  onUpgradePress: () => void;
+  onPress: () => void;
+  socialProvider?: SocialProvider;
+  text: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function AuthButtons({
+  onUpgradePress,
+  onPress,
+  socialProvider,
+  text,
+  style
+}: AuthButtonsProps) {
+  return (
+    <>
+      <UpgradeWalletButton onPress={onUpgradePress} style={styles.upgradeButton} />
+      {socialProvider ? (
+        <ListSocial
+          logo={socialProvider}
+          logoHeight={32}
+          logoWidth={32}
+          style={[styles.socialContainer, style]}
+          onPress={onPress}
+          chevron={socialProvider === 'email'}
+        >
+          <Text color="fg-100" numberOfLines={1} ellipsizeMode="tail" style={styles.socialText}>
+            {text}
+          </Text>
+        </ListSocial>
+      ) : null}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  actionButton: {
+    marginBottom: Spacing.xs
+  },
+  upgradeButton: {
+    marginBottom: Spacing.s
+  },
+  socialContainer: {
+    justifyContent: 'flex-start',
+    width: '100%'
+  },
+  socialText: {
+    flex: 1,
+    marginLeft: Spacing.s
+  }
+});

package/src/views/w3m-account-default-view/components/upgrade-wallet-button.tsx

@@ -0,0 +1,67 @@
+import { Animated, Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  BorderRadius,
+  FlexView,
+  Icon,
+  IconBox,
+  Spacing,
+  Text,
+  useTheme,
+  useAnimatedValue
+} from '@reown/appkit-ui-react-native';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface Props {
+  onPress: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function UpgradeWalletButton({ style, onPress }: Props) {
+  const Theme = useTheme();
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['accent-glass-010'],
+    Theme['accent-glass-020']
+  );
+
+  return (
+    <AnimatedPressable
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      style={[styles.container, { backgroundColor: animatedValue }, style]}
+    >
+      <IconBox icon="wallet" size="lg" background iconColor="accent-100" />
+      <FlexView flexGrow={1} margin={['0', 's', '0', 's']}>
+        <Text style={styles.upgradeText} color="fg-100">
+          Upgrade your wallet
+        </Text>
+        <Text variant="small-400" color="fg-150">
+          Transition to a self-custodial wallet
+        </Text>
+      </FlexView>
+      <Icon name="chevronRight" size="md" color="fg-150" style={styles.chevron} />
+    </AnimatedPressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 75,
+    borderRadius: BorderRadius.s,
+    backgroundColor: 'red',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: Spacing.s
+  },
+  textContainer: {
+    marginHorizontal: Spacing.m
+  },
+  upgradeText: {
+    marginBottom: Spacing['3xs']
+  },
+  chevron: {
+    marginRight: Spacing['2xs']
+  }
+});

package/src/views/w3m-account-default-view/index.tsx

@@ -0,0 +1,355 @@
+import { useSnapshot } from 'valtio';
+import { useState } from 'react';
+import { Linking, ScrollView } from 'react-native';
+import {
+  ApiController,
+  CoreHelperUtil,
+  EventsController,
+  ModalController,
+  OptionsController,
+  RouterController,
+  SnackController,
+  ConstantsUtil,
+  SwapController,
+  OnRampController,
+  ConnectionsController,
+  AssetController,
+  AssetUtil,
+  LogController
+} from '@reown/appkit-core-react-native';
+// import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
+import {
+  Avatar,
+  Button,
+  FlexView,
+  IconLink,
+  Text,
+  UiUtil,
+  Spacing,
+  ListItem,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+
+import { useInternalAppKit } from '../../AppKitContext';
+
+import { AuthButtons } from './components/auth-buttons';
+import styles from './styles';
+
+export function AccountDefaultView() {
+  const { switchAccountType, disconnect } = useInternalAppKit();
+  const { loading } = useSnapshot(ModalController.state);
+  const {
+    activeAddress: address,
+    activeBalance: balance,
+    activeNetwork,
+    activeNamespace,
+    connection,
+    accountType,
+    identity
+  } = useSnapshot(ConnectionsController.state);
+  const account = address?.split(':')[2];
+  const [disconnecting, setDisconnecting] = useState(false);
+  const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
+  const { history } = useSnapshot(RouterController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
+  const showCopy = OptionsController.isClipboardAvailable();
+  const isAuth = !!connection?.properties?.provider;
+  const showBalance = balance && !isAuth;
+  const showExplorer = Object.keys(activeNetwork?.blockExplorers ?? {}).length > 0 && !isAuth;
+  const showBack = history.length > 1;
+  const showSwitchAccountType = isAuth && activeNamespace === 'eip155';
+  const showActivity =
+    !isAuth &&
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
+  const showSwaps =
+    !isAuth &&
+    features?.swaps &&
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(activeNetwork.caipNetworkId);
+
+  const showSend =
+    !isAuth && activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);
+
+  const showBuy =
+    !isAuth &&
+    isOnRampEnabled &&
+    activeNamespace &&
+    ConstantsUtil.ONRAMP_SUPPORTED_NAMESPACES.includes(activeNamespace);
+
+  const { padding } = useCustomDimensions();
+
+  async function onDisconnect() {
+    setDisconnecting(true);
+    await disconnect(ConnectionsController.state.activeNamespace);
+    setDisconnecting(false);
+  }
+
+  const onSwitchAccountType = async () => {
+    try {
+      const namespace = ConnectionsController.state.activeNamespace;
+      const network = ConnectionsController.state.activeNetwork;
+      if (isAuth && namespace && network) {
+        const newType = ConnectionsController.state.accountType === 'eoa' ? 'smartAccount' : 'eoa';
+        switchAccountType(namespace, newType, network);
+      }
+    } catch (error) {
+      LogController.sendError(error, 'AccountDefaultView.tsx', 'onSwitchAccountType');
+      SnackController.showError('Error switching account type');
+    }
+  };
+
+  const onExplorerPress = () => {
+    if (showExplorer && ConnectionsController.state.activeNetwork?.blockExplorers?.default?.url) {
+      Linking.openURL(ConnectionsController.state.activeNetwork?.blockExplorers?.default?.url);
+    }
+  };
+
+  const onCopyAddress = () => {
+    if (OptionsController.isClipboardAvailable() && ConnectionsController.state.activeAddress) {
+      const _address = CoreHelperUtil.getPlainAddress(ConnectionsController.state.activeAddress);
+      if (_address) {
+        OptionsController.copyToClipboard(_address);
+        SnackController.showSuccess('Address copied');
+      }
+    }
+  };
+
+  const onSwapPress = () => {
+    SwapController.clearTokens();
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'OPEN_SWAP',
+      properties: {
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId,
+        isSmartAccount: false
+      }
+    });
+    RouterController.push('Swap');
+  };
+
+  const onBuyPress = () => {
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'SELECT_BUY_CRYPTO'
+    });
+
+    OnRampController.resetState();
+    RouterController.push('OnRamp');
+  };
+
+  const onActivityPress = () => {
+    RouterController.push('Transactions');
+  };
+
+  const onNetworkPress = () => {
+    RouterController.push('Networks');
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CLICK_NETWORKS'
+    });
+  };
+
+  const onUpgradePress = () => {
+    EventsController.sendEvent({ type: 'track', event: 'EMAIL_UPGRADE_FROM_MODAL' });
+    RouterController.push('UpgradeEmailWallet');
+  };
+
+  const onSendPress = () => {
+    const network = ConnectionsController.state.activeNetwork?.caipNetworkId;
+    const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'OPEN_SEND',
+      properties: { network, isSmartAccount }
+    });
+    RouterController.push('WalletSend');
+  };
+
+  const onEmailPress = async () => {
+    // TODO: Uncomment when email update is enabled
+    // const email = ConnectionsController.state.connection?.properties?.email;
+    // const provider = ConnectionsController.state.connection?.properties?.provider;
+    // if (provider !== 'email' || !email) return;
+    // const sessionTopic = ConnectionsController.state.connection?.properties?.sessionTopic;
+    // if (!sessionTopic) {
+    //   throw new Error('Session topic not found');
+    // }
+    // const link = `${CommonConstantsUtil.WEB_WALLET_URL}/emailUpdate/${sessionTopic}`;
+    // await CoreHelperUtil.openLink(link);
+    // Subscribe to email update event
+  };
+
+  return (
+    <>
+      {showBack ? (
+        <IconLink icon="chevronLeft" style={styles.backIcon} onPress={RouterController.goBack} />
+      ) : null}
+      <IconLink
+        icon="close"
+        style={styles.closeIcon}
+        onPress={ModalController.close}
+        testID="header-close"
+      />
+      <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+        <FlexView alignItems="center" padding={['3xl', 's', 's', 's']}>
+          <Avatar imageSrc={identity?.avatar} address={account ?? ''} />
+          <FlexView flexDirection="row" alignItems="center" margin={['s', '0', '0', '0']}>
+            <Text variant="medium-title-600">
+              {identity?.name
+                ? UiUtil.getTruncateString({
+                    string: identity?.name,
+                    charsStart: 20,
+                    charsEnd: 0,
+                    truncate: 'end'
+                  })
+                : UiUtil.getTruncateString({
+                    string: account ?? '',
+                    charsStart: 4,
+                    charsEnd: 6,
+                    truncate: 'middle'
+                  })}
+            </Text>
+            {showCopy ? (
+              <IconLink
+                icon="copy"
+                size="md"
+                iconColor="fg-275"
+                onPress={onCopyAddress}
+                style={styles.copyButton}
+              />
+            ) : null}
+          </FlexView>
+          {showBalance ? (
+            <Text variant="paragraph-400" color="fg-200">
+              {CoreHelperUtil.formatBalance(balance.amount, balance.symbol, 6)}
+            </Text>
+          ) : null}
+          {showExplorer ? (
+            <Button
+              size="sm"
+              variant="shade"
+              iconLeft="compass"
+              iconRight="externalLink"
+              onPress={onExplorerPress}
+              style={{ marginVertical: Spacing.s }}
+            >
+              Block Explorer
+            </Button>
+          ) : null}
+          <FlexView margin={['s', '0', '0', '0']}>
+            {isAuth ? (
+              <AuthButtons
+                onUpgradePress={onUpgradePress}
+                socialProvider={connection?.properties?.provider}
+                onPress={onEmailPress}
+                style={styles.actionButton}
+                text={UiUtil.getTruncateString({
+                  string: connection?.properties?.username || connection?.properties?.email || '',
+                  charsStart: 30,
+                  charsEnd: 0,
+                  truncate: 'end'
+                })}
+              />
+            ) : null}
+            <ListItem
+              chevron
+              icon="networkPlaceholder"
+              iconColor="accent-100"
+              iconBackgroundColor="accent-glass-015"
+              imageSrc={networkImage}
+              imageHeaders={ApiController._getApiHeaders()}
+              onPress={onNetworkPress}
+              testID="button-network"
+              style={styles.actionButton}
+            >
+              <Text numberOfLines={1} color="fg-100" testID="account-select-network-text">
+                {activeNetwork?.name}
+              </Text>
+            </ListItem>
+            {showBuy ? (
+              <ListItem
+                chevron
+                icon="card"
+                iconColor="accent-100"
+                iconBackgroundColor="accent-glass-015"
+                onPress={onBuyPress}
+                testID="button-onramp"
+                style={styles.actionButton}
+              >
+                <Text color="fg-100">Buy Crypto</Text>
+              </ListItem>
+            ) : null}
+            {showSend ? (
+              <ListItem
+                chevron
+                icon="paperplane"
+                iconColor="accent-100"
+                iconBackgroundColor="accent-glass-015"
+                onPress={onSendPress}
+                testID="button-send"
+                style={styles.actionButton}
+              >
+                <Text color="fg-100">Send</Text>
+              </ListItem>
+            ) : null}
+            {showSwaps ? (
+              <ListItem
+                chevron
+                icon="recycleHorizontal"
+                iconColor="accent-100"
+                iconBackgroundColor="accent-glass-015"
+                onPress={onSwapPress}
+                testID="button-swap"
+                style={styles.actionButton}
+              >
+                <Text color="fg-100">Swap</Text>
+              </ListItem>
+            ) : null}
+            {showActivity ? (
+              <ListItem
+                chevron
+                icon="clock"
+                iconColor="accent-100"
+                iconBackgroundColor="accent-glass-015"
+                onPress={onActivityPress}
+                testID="button-activity"
+                style={styles.actionButton}
+              >
+                <Text color="fg-100">Activity</Text>
+              </ListItem>
+            ) : null}
+            {showSwitchAccountType ? (
+              <ListItem
+                chevron
+                icon="swapHorizontal"
+                onPress={onSwitchAccountType}
+                testID="account-button-type"
+                iconColor="accent-100"
+                iconBackgroundColor="accent-glass-015"
+                style={styles.actionButton}
+                loading={loading}
+              >
+                <Text color="fg-100">{`Switch to your ${
+                  accountType === 'eoa' ? 'Smart Account' : 'EOA'
+                }`}</Text>
+              </ListItem>
+            ) : null}
+            <ListItem
+              icon="disconnect"
+              onPress={onDisconnect}
+              loading={disconnecting}
+              iconBackgroundColor="gray-glass-010"
+              testID="button-disconnect"
+            >
+              <Text color="fg-200">Disconnect</Text>
+            </ListItem>
+          </FlexView>
+        </FlexView>
+      </ScrollView>
+    </>
+  );
+}

package/src/views/w3m-account-default-view/styles.ts

@@ -0,0 +1,28 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  backIcon: {
+    alignSelf: 'flex-end',
+    position: 'absolute',
+    zIndex: 1,
+    top: Spacing.l,
+    left: Spacing.xl
+  },
+  closeIcon: {
+    alignSelf: 'flex-end',
+    position: 'absolute',
+    zIndex: 1,
+    top: Spacing.l,
+    right: Spacing.xl
+  },
+  copyButton: {
+    marginLeft: Spacing['4xs']
+  },
+  actionButton: {
+    marginBottom: Spacing.xs
+  },
+  upgradeButton: {
+    marginBottom: Spacing.s
+  }
+});

package/src/views/w3m-account-view/index.tsx

@@ -0,0 +1,76 @@
+import { useSnapshot } from 'valtio';
+import { useEffect } from 'react';
+import { ScrollView } from 'react-native';
+import {
+  AccountPill,
+  FlexView,
+  Icon,
+  IconLink,
+  NetworkButton,
+  useTheme,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import {
+  ApiController,
+  AssetController,
+  AssetUtil,
+  ConnectionsController,
+  CoreHelperUtil,
+  EventsController,
+  ModalController,
+  RouterController,
+  SendController
+} from '@reown/appkit-core-react-native';
+
+import { AccountWalletFeatures } from '../../partials/w3m-account-wallet-features';
+import styles from './styles';
+
+export function AccountView() {
+  const Theme = useTheme();
+  const { padding } = useCustomDimensions();
+  const { activeNetwork, activeAddress, identity } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const address = CoreHelperUtil.getPlainAddress(activeAddress);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
+
+  const onProfilePress = () => {
+    RouterController.push('AccountDefault');
+  };
+
+  const onNetworkPress = () => {
+    RouterController.push('Networks');
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CLICK_NETWORKS'
+    });
+  };
+
+  useEffect(() => {
+    SendController.resetState();
+  }, []);
+
+  return (
+    <ScrollView bounces={false} contentContainerStyle={{ paddingHorizontal: padding }}>
+      <NetworkButton
+        imageSrc={networkImage}
+        imageHeaders={ApiController._getApiHeaders()}
+        onPress={onNetworkPress}
+        style={styles.networkIcon}
+        background={false}
+      >
+        <Icon name="chevronBottom" size="sm" color="fg-200" />
+      </NetworkButton>
+      <IconLink icon="close" style={styles.closeIcon} onPress={ModalController.close} />
+      <FlexView padding={['3xl', '0', '0', '0']} style={[{ backgroundColor: Theme['bg-100'] }]}>
+        <AccountPill
+          address={address}
+          profileName={identity?.name}
+          profileImage={identity?.avatar}
+          onPress={onProfilePress}
+          style={styles.accountPill}
+        />
+        <AccountWalletFeatures />
+      </FlexView>
+    </ScrollView>
+  );
+}

package/src/views/w3m-account-view/styles.ts

@@ -0,0 +1,24 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  networkIcon: {
+    alignSelf: 'flex-start',
+    position: 'absolute',
+    zIndex: 1,
+    top: Spacing.l,
+    left: Spacing.l
+  },
+  closeIcon: {
+    alignSelf: 'flex-end',
+    position: 'absolute',
+    zIndex: 1,
+    top: Spacing.l,
+    right: Spacing.xl
+  },
+  accountPill: {
+    alignSelf: 'center',
+    marginBottom: Spacing.s,
+    marginHorizontal: Spacing.s
+  }
+});