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

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

@@ -0,0 +1,333 @@
+import { useSnapshot } from 'valtio';
+import { useState } from 'react';
+import { Linking, ScrollView } from 'react-native';
+import {
+  AccountController,
+  ApiController,
+  AssetUtil,
+  ConnectionController,
+  ConnectorController,
+  CoreHelperUtil,
+  EventsController,
+  ModalController,
+  NetworkController,
+  OptionsController,
+  RouterController,
+  SnackController,
+  type AppKitFrameProvider,
+  ConstantsUtil,
+  SwapController,
+  OnRampController,
+  ConnectionsController
+} from '@reown/appkit-core-react-native';
+import {
+  Avatar,
+  Button,
+  FlexView,
+  IconLink,
+  Text,
+  UiUtil,
+  Spacing,
+  ListItem
+} from '@reown/appkit-ui-react-native';
+
+import { useAppKit } from '../../AppKitContext';
+
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { AuthButtons } from './components/auth-buttons';
+import styles from './styles';
+
+export function AccountDefaultView() {
+  const { profileName, profileImage, preferredAccountType } = useSnapshot(AccountController.state);
+  const { loading } = useSnapshot(ModalController.state);
+  const {
+    activeAddress: address,
+    activeBalance: balance,
+    activeNetwork
+  } = useSnapshot(ConnectionsController.state);
+  const account = address?.split(':')[2];
+  const [disconnecting, setDisconnecting] = useState(false);
+  const { connectedConnector } = useSnapshot(ConnectorController.state);
+  const { connectedSocialProvider } = useSnapshot(ConnectionController.state);
+  const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
+  const { history } = useSnapshot(RouterController.state);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const showCopy = OptionsController.isClipboardAvailable();
+  const isAuth = connectedConnector === 'AUTH';
+  const showBalance = balance && !isAuth;
+  const showExplorer = Object.keys(activeNetwork?.blockExplorers ?? {}).length > 0 && !isAuth;
+  const showBack = history.length > 1;
+  const showSwitchAccountType = isAuth && NetworkController.checkIfSmartAccountEnabled();
+  const { padding } = useCustomDimensions();
+  const { disconnect } = useAppKit();
+
+  async function onDisconnect() {
+    setDisconnecting(true);
+    await disconnect(ConnectionsController.state.activeNamespace);
+    setDisconnecting(false);
+  }
+
+  const onSwitchAccountType = async () => {
+    try {
+      if (isAuth) {
+        ModalController.setLoading(true);
+        const accountType =
+          AccountController.state.preferredAccountType === 'eoa' ? 'smartAccount' : 'eoa';
+        const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
+        await provider?.setPreferredAccount(accountType);
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'SET_PREFERRED_ACCOUNT_TYPE',
+          properties: {
+            accountType,
+            network: NetworkController.state.caipNetwork?.id || ''
+          }
+        });
+      }
+    } catch (error) {
+      ModalController.setLoading(false);
+      SnackController.showError('Error switching account type');
+    }
+  };
+
+  const getUserEmail = () => {
+    const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
+    if (!provider) return '';
+
+    return provider.getEmail();
+  };
+
+  const getUsername = () => {
+    const provider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
+    if (!provider) return '';
+
+    return provider.getUsername();
+  };
+
+  const onExplorerPress = () => {
+    if (showExplorer && ConnectionsController.state.activeNetwork?.blockExplorers?.default?.url) {
+      Linking.openURL(ConnectionsController.state.activeNetwork?.blockExplorers?.default?.url);
+    }
+  };
+
+  const onCopyAddress = () => {
+    //TODO: Check ENS name
+    if (OptionsController.isClipboardAvailable() && ConnectionsController.state.activeAddress) {
+      const _address = ConnectionsController.state.activeAddress.split(':')[2];
+      if (_address) {
+        OptionsController.copyToClipboard(_address);
+        SnackController.showSuccess('Address copied');
+      }
+    }
+  };
+
+  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: 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 onEmailPress = () => {
+    if (ConnectionController.state.connectedSocialProvider) return;
+    RouterController.push('UpdateEmailWallet', { email: getUserEmail() });
+  };
+
+  return (
+    <>
+      {showBack && (
+        <IconLink icon="chevronLeft" style={styles.backIcon} onPress={RouterController.goBack} />
+      )}
+      <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', '3xl', 's']}>
+          <Avatar imageSrc={profileImage} address={account ?? ''} />
+          <FlexView flexDirection="row" alignItems="center" margin={['s', '0', '0', '0']}>
+            <Text variant="medium-title-600">
+              {profileName
+                ? UiUtil.getTruncateString({
+                    string: profileName,
+                    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}
+              />
+            )}
+          </FlexView>
+          {showBalance && (
+            <Text variant="paragraph-400" color="fg-200">
+              {CoreHelperUtil.formatBalance(balance.amount, balance.symbol, 6)}
+            </Text>
+          )}
+          {showExplorer && (
+            <Button
+              size="sm"
+              variant="shade"
+              iconLeft="compass"
+              iconRight="externalLink"
+              onPress={onExplorerPress}
+              style={{ marginVertical: Spacing.s }}
+            >
+              Block Explorer
+            </Button>
+          )}
+          <FlexView margin={['s', '0', '0', '0']}>
+            {isAuth && (
+              <AuthButtons
+                onUpgradePress={onUpgradePress}
+                socialProvider={connectedSocialProvider}
+                onPress={onEmailPress}
+                style={styles.actionButton}
+                text={UiUtil.getTruncateString({
+                  string: getUsername() || getUserEmail() || '',
+                  charsStart: 30,
+                  charsEnd: 0,
+                  truncate: 'end'
+                })}
+              />
+            )}
+            <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>
+            {!isAuth && isOnRampEnabled && (
+              <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>
+            )}
+            {!isAuth && features?.swaps && (
+              <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>
+            )}
+            {!isAuth && (
+              <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>
+            )}
+            {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 ${
+                  preferredAccountType === 'eoa' ? 'smart account' : 'EOA'
+                }`}</Text>
+              </ListItem>
+            )}
+            <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,106 @@
+import { useSnapshot } from 'valtio';
+import { useEffect } from 'react';
+import { ScrollView } from 'react-native';
+import {
+  AccountPill,
+  FlexView,
+  Icon,
+  IconLink,
+  NetworkButton,
+  useTheme,
+  Promo
+} from '@reown/appkit-ui-react-native';
+import {
+  AccountController,
+  ApiController,
+  AssetUtil,
+  ConnectionsController,
+  ModalController,
+  NetworkController,
+  RouterController,
+  SendController
+} from '@reown/appkit-core-react-native';
+
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { AccountWalletFeatures } from '../../partials/w3m-account-wallet-features';
+import styles from './styles';
+
+export function AccountView() {
+  const Theme = useTheme();
+  const { padding } = useCustomDimensions();
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { address, profileName, profileImage, preferredAccountType } = useSnapshot(
+    AccountController.state
+  );
+  const showActivate =
+    preferredAccountType === 'eoa' && NetworkController.checkIfSmartAccountEnabled();
+
+  const onProfilePress = () => {
+    RouterController.push('AccountDefault');
+  };
+
+  const onNetworkPress = () => {
+    RouterController.push('Networks');
+  };
+
+  const onActivatePress = () => {
+    RouterController.push('UpgradeToSmartAccount');
+  };
+
+  useEffect(() => {
+    AccountController.fetchTokenBalance();
+    SendController.resetSend();
+  }, []);
+
+  useEffect(() => {
+    AccountController.fetchTokenBalance();
+
+    const balanceInterval = setInterval(() => {
+      AccountController.fetchTokenBalance();
+    }, 10000);
+
+    return () => {
+      clearInterval(balanceInterval);
+    };
+  }, []);
+
+  return (
+    <ScrollView
+      bounces={false}
+      contentContainerStyle={[
+        styles.contentContainer,
+        {
+          paddingHorizontal: padding
+        }
+      ]}
+    >
+      <NetworkButton
+        imageSrc={AssetUtil.getNetworkImage(activeNetwork?.id)}
+        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'] }]}>
+        {showActivate && (
+          <Promo
+            style={styles.promoPill}
+            text="Switch to your smart account"
+            onPress={onActivatePress}
+          />
+        )}
+        <AccountPill
+          address={address}
+          profileName={profileName}
+          profileImage={profileImage}
+          onPress={onProfilePress}
+          style={styles.accountPill}
+        />
+        <AccountWalletFeatures />
+      </FlexView>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,32 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { Platform, StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  contentContainer: {
+    paddingBottom: Platform.select({ ios: Spacing.s })
+  },
+  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
+  },
+  promoPill: {
+    marginTop: Spacing.xs,
+    marginBottom: Spacing['2xl'],
+    alignSelf: 'center'
+  }
+});

package/src/views/w3m-all-wallets-view/index.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import {
+  ConnectionController,
+  ConnectorController,
+  EventsController,
+  RouterController,
+  type WcWallet
+} from '@reown/appkit-core-react-native';
+import { FlexView, IconLink, SearchBar, Spacing, useTheme } from '@reown/appkit-ui-react-native';
+
+import styles from './styles';
+import { useDebounceCallback } from '../../hooks/useDebounceCallback';
+import { AllWalletsList } from '../../partials/w3m-all-wallets-list';
+import { AllWalletsSearch } from '../../partials/w3m-all-wallets-search';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+
+export function AllWalletsView() {
+  const Theme = useTheme();
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const { maxWidth } = useCustomDimensions();
+  const numColumns = 4;
+  const usableWidth = maxWidth - Spacing.xs * 2;
+  const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns));
+
+  const { debouncedCallback: onInputChange } = useDebounceCallback({ callback: setSearchQuery });
+
+  const onWalletPress = (wallet: WcWallet) => {
+    const connector = ConnectorController.state.connectors.find(c => c.explorerId === wallet.id);
+    if (connector) {
+      RouterController.push('ConnectingExternal', { connector, wallet });
+    } else {
+      RouterController.push('ConnectingWalletConnect', { wallet });
+    }
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'SELECT_WALLET',
+      properties: { name: wallet.name ?? 'Unknown', platform: 'mobile', explorer_id: wallet.id }
+    });
+  };
+
+  const onQrCodePress = () => {
+    ConnectionController.removePressedWallet();
+    ConnectionController.removeWcLinking();
+    RouterController.push('ConnectingWalletConnect');
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'SELECT_WALLET',
+      properties: { name: 'WalletConnect', platform: 'qrcode' }
+    });
+  };
+
+  const headerTemplate = () => {
+    return (
+      <FlexView
+        padding={['s', 'l', 'xs', 'l']}
+        flexDirection="row"
+        alignItems="center"
+        style={[
+          styles.header,
+          { backgroundColor: Theme['bg-100'], shadowColor: Theme['bg-100'], width: maxWidth }
+        ]}
+      >
+        <SearchBar
+          onChangeText={onInputChange}
+          placeholder="Search wallet"
+          style={styles.searchBar}
+        />
+        <IconLink
+          icon="qrCode"
+          iconColor="accent-100"
+          pressedColor="accent-glass-020"
+          backgroundColor="accent-glass-010"
+          size="lg"
+          onPress={onQrCodePress}
+          style={[styles.icon, { borderColor: Theme['accent-glass-010'] }]}
+          testID="button-qr-code"
+        />
+      </FlexView>
+    );
+  };
+
+  const listTemplate = () => {
+    if (searchQuery) {
+      return (
+        <AllWalletsSearch
+          columns={numColumns}
+          itemWidth={itemWidth}
+          searchQuery={searchQuery}
+          onItemPress={onWalletPress}
+        />
+      );
+    }
+
+    return (
+      <AllWalletsList columns={numColumns} itemWidth={itemWidth} onItemPress={onWalletPress} />
+    );
+  };
+
+  return (
+    <>
+      {headerTemplate()}
+      {listTemplate()}
+    </>
+  );
+}

package/src/views/w3m-all-wallets-view/styles.ts

@@ -0,0 +1,21 @@
+import { Platform, StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  header: {
+    zIndex: 1,
+    alignSelf: 'center',
+    ...Platform.select({
+      ios: {
+        shadowOpacity: 1,
+        shadowOffset: { width: 0, height: 6 }
+      }
+    })
+  },
+  icon: {
+    marginLeft: 8,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  searchBar: {
+    flex: 1
+  }
+});

package/src/views/w3m-connect-socials-view/index.tsx

@@ -0,0 +1,58 @@
+import { useEffect } from 'react';
+import { useSnapshot } from 'valtio';
+import { ScrollView } from 'react-native';
+import { StringUtil, type SocialProvider } from '@reown/appkit-common-react-native';
+import {
+  ConnectionController,
+  EventsController,
+  OptionsController,
+  RouterController,
+  WebviewController
+} from '@reown/appkit-core-react-native';
+import { FlexView, ListSocial, Text } from '@reown/appkit-ui-react-native';
+
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import styles from './styles';
+
+export function ConnectSocialsView() {
+  const { features } = useSnapshot(OptionsController.state);
+  const { padding } = useCustomDimensions();
+  const socialProviders = (features?.socials ?? []) as SocialProvider[];
+
+  const onItemPress = (provider: SocialProvider) => {
+    ConnectionController.setSelectedSocialProvider(provider);
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'SOCIAL_LOGIN_STARTED',
+      properties: { provider }
+    });
+    if (provider === 'farcaster') {
+      RouterController.push('ConnectingFarcaster');
+    } else {
+      RouterController.push('ConnectingSocial');
+    }
+  };
+
+  useEffect(() => {
+    WebviewController.setConnecting(false);
+  }, []);
+
+  return (
+    <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
+      <FlexView padding={['xs', 'm', '2xl', 'm']}>
+        {socialProviders.map(provider => (
+          <ListSocial
+            key={provider}
+            logo={provider}
+            onPress={() => onItemPress(provider)}
+            style={styles.item}
+          >
+            <Text style={styles.text} color={'fg-100'}>
+              {StringUtil.capitalize(provider)}
+            </Text>
+          </ListSocial>
+        ))}
+      </FlexView>
+    </ScrollView>
+  );
+}

package/src/views/w3m-connect-socials-view/styles.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  item: {
+    marginVertical: Spacing['3xs'],
+    justifyContent: 'flex-start'
+  },
+  text: {
+    marginLeft: Spacing.s
+  }
+});