@reown/appkit-react-native 0.0.0-accounts-canary.1-20251023174733

package/src/partials/w3m-connecting-mobile/index.tsx

@@ -0,0 +1,181 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect, useState } from 'react';
+import { Platform, ScrollView } from 'react-native';
+import {
+  RouterController,
+  ApiController,
+  AssetUtil,
+  WcController,
+  CoreHelperUtil,
+  OptionsController,
+  EventsController,
+  ConstantsUtil,
+  AssetController,
+  LogController,
+  ConnectionsController
+} from '@reown/appkit-core-react-native';
+import {
+  Button,
+  FlexView,
+  LoadingThumbnail,
+  WalletImage,
+  Link,
+  IconBox,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+
+import { StoreLink } from './components/StoreLink';
+import { ConnectingBody, getMessage, type BodyErrorType } from '../w3m-connecting-body';
+import styles from './styles';
+
+interface Props {
+  onRetry: () => void;
+  onCopyUri: (uri?: string) => void;
+  isInstalled?: boolean;
+}
+
+export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
+  const { data } = RouterController.state;
+  const { padding } = useCustomDimensions();
+  const { wcUri, wcError } = useSnapshot(WcController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
+  const [errorType, setErrorType] = useState<BodyErrorType>();
+  const showCopy =
+    OptionsController.isClipboardAvailable() &&
+    errorType !== 'not_installed' &&
+    !CoreHelperUtil.isLinkModeURL(wcUri);
+
+  const showRetry = errorType !== 'not_installed';
+  const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType, declined: wcError });
+
+  const storeUrl = Platform.select({
+    ios: data?.wallet?.app_store,
+    android: data?.wallet?.play_store
+  });
+
+  const onRetryPress = () => {
+    setErrorType(undefined);
+    WcController.setWcError(false);
+    onRetry?.();
+  };
+
+  const onStorePress = () => {
+    if (storeUrl) {
+      CoreHelperUtil.openLink(storeUrl);
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'GET_WALLET',
+        properties: {
+          name: data?.wallet?.name ?? 'Unknown',
+          link: storeUrl,
+          linkType: Platform.select({
+            ios: 'appstore',
+            android: 'playstore',
+            default: undefined
+          }),
+          explorerId: data?.wallet?.id,
+          walletRank: data?.wallet?.order
+        }
+      });
+    }
+  };
+
+  const onConnect = useCallback(async () => {
+    try {
+      const { name, mobile_link } = data?.wallet ?? {};
+      if (name && mobile_link && wcUri) {
+        const { redirect, href } = CoreHelperUtil.formatNativeUrl(mobile_link, wcUri);
+        const wcLinking = { name, href };
+        WcController.setWcLinking(wcLinking);
+        WcController.setPressedWallet(data?.wallet);
+        await CoreHelperUtil.openLink(redirect);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking, data?.wallet);
+        const address = ConnectionsController.state.activeAddress;
+        const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'CONNECT_SUCCESS',
+          address: CoreHelperUtil.getPlainAddress(address),
+          properties: {
+            method: 'mobile',
+            name: data?.wallet?.name ?? 'Unknown',
+            explorerId: data?.wallet?.id,
+            caipNetworkId
+          }
+        });
+      }
+    } catch (error: any) {
+      LogController.sendError(error, 'ConnectingMobile.tsx', 'onConnect');
+      if (error.message.includes(ConstantsUtil.LINKING_ERROR)) {
+        setErrorType('not_installed');
+      } else {
+        setErrorType('default');
+      }
+    }
+  }, [wcUri, data]);
+
+  useEffect(() => {
+    if (wcUri) {
+      onConnect();
+    }
+  }, [wcUri, onConnect]);
+
+  return (
+    <ScrollView
+      bounces={false}
+      fadingEdgeLength={20}
+      style={{ paddingHorizontal: padding }}
+      contentContainerStyle={styles.container}
+    >
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '0', 'l']}>
+        <LoadingThumbnail paused={!!errorType || wcError}>
+          <WalletImage
+            size="xl"
+            imageSrc={AssetUtil.getWalletImage(RouterController.state.data?.wallet, walletImages)}
+            imageHeaders={ApiController._getApiHeaders()}
+          />
+          {wcError ? (
+            <IconBox
+              icon={'close'}
+              border
+              background
+              backgroundColor="icon-box-bg-error-100"
+              size="sm"
+              iconColor="error-100"
+              style={styles.errorIcon}
+            />
+          ) : null}
+        </LoadingThumbnail>
+        <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
+        {showRetry ? (
+          <Button
+            size="sm"
+            variant="accent"
+            iconLeft="refresh"
+            style={styles.retryButton}
+            iconStyle={styles.retryIcon}
+            onPress={onRetryPress}
+          >
+            Try again
+          </Button>
+        ) : null}
+      </FlexView>
+      {showCopy ? (
+        <Link
+          iconLeft="copySmall"
+          color="fg-200"
+          style={styles.copyButton}
+          onPress={() => onCopyUri(wcUri)}
+        >
+          Copy link
+        </Link>
+      ) : null}
+      <StoreLink
+        visible={!isInstalled && !!storeUrl}
+        walletName={data?.wallet?.name}
+        onPress={onStorePress}
+      />
+    </ScrollView>
+  );
+}

package/src/partials/w3m-connecting-mobile/styles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  container: {
+    paddingBottom: Spacing['xs'],
+    minHeight: '30%'
+  },
+  retryButton: {
+    marginTop: Spacing.m
+  },
+  retryIcon: {
+    transform: [{ rotateY: '180deg' }]
+  },
+  copyButton: {
+    alignSelf: 'center',
+    marginTop: Spacing.m
+  },
+  errorIcon: {
+    position: 'absolute',
+    bottom: 5,
+    right: 5,
+    zIndex: 2
+  }
+});

package/src/partials/w3m-connecting-qrcode/components/ReownButton.tsx

@@ -0,0 +1,20 @@
+import { Linking, type StyleProp, type ViewStyle } from 'react-native';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { FlexView, Icon, Pressable, Text } from '@reown/appkit-ui-react-native';
+
+interface Props {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ReownButton({ style }: Props) {
+  return (
+    <Pressable transparent onPress={() => Linking.openURL(ConstantsUtil.REOWN_URL)} style={style}>
+      <FlexView alignItems="center" justifyContent="center" flexDirection="row" columnGap="2xs">
+        <Text variant="small-500" color="fg-100">
+          UX by
+        </Text>
+        <Icon name="reown" color="fg-150" width={100} height={30} />
+      </FlexView>
+    </Pressable>
+  );
+}

package/src/partials/w3m-connecting-qrcode/index.tsx

@@ -0,0 +1,86 @@
+import { useEffect } from 'react';
+import { useSnapshot } from 'valtio';
+import {
+  WcController,
+  EventsController,
+  OptionsController,
+  SnackController,
+  ConnectionsController,
+  CoreHelperUtil
+} from '@reown/appkit-core-react-native';
+import {
+  FlexView,
+  Link,
+  QrCode,
+  Text,
+  Spacing,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import styles from './styles';
+import { ReownButton } from './components/ReownButton';
+import { useWindowDimensions } from 'react-native';
+
+export function ConnectingQrCode() {
+  const { height, width } = useWindowDimensions();
+  const windowSize = Math.min(height, width);
+  const { wcUri } = useSnapshot(WcController.state);
+  const showCopy = OptionsController.isClipboardAvailable();
+  const { isPortrait } = useCustomDimensions();
+  const qrSize = (windowSize - Spacing.xl * 2) / (isPortrait ? 1 : 1.5);
+
+  const onCopyAddress = () => {
+    if (WcController.state.wcUri) {
+      OptionsController.copyToClipboard(WcController.state.wcUri);
+      SnackController.showSuccess('Link copied');
+    }
+  };
+
+  const onConnect = async () => {
+    await WcController.state.wcPromise;
+    const address = ConnectionsController.state.activeAddress;
+    const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CONNECT_SUCCESS',
+      address: CoreHelperUtil.getPlainAddress(address),
+      properties: {
+        method: 'qrcode',
+        name: 'WalletConnect',
+        caipNetworkId
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (wcUri) {
+      onConnect();
+    }
+  }, [wcUri]);
+
+  return (
+    <FlexView
+      alignItems="center"
+      justifyContent="center"
+      flexDirection={isPortrait ? 'column' : 'row'}
+      padding={['xl', 'xl', 'xs', 'xl']}
+    >
+      <QrCode size={qrSize} uri={wcUri} testID="qr-code" />
+      <FlexView alignItems="center" margin="m">
+        <Text variant="paragraph-500">Scan this QR code with your phone</Text>
+        {showCopy ? (
+          <Link
+            iconLeft="copySmall"
+            color="fg-200"
+            style={styles.copyButton}
+            onPress={onCopyAddress}
+            testID="copy-link"
+          >
+            Copy link
+          </Link>
+        ) : null}
+        <ReownButton style={styles.reownButton} />
+      </FlexView>
+    </FlexView>
+  );
+}

package/src/partials/w3m-connecting-qrcode/styles.ts

@@ -0,0 +1,11 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  copyButton: {
+    marginTop: Spacing.m
+  },
+  reownButton: {
+    marginTop: Spacing['2xl']
+  }
+});

package/src/partials/w3m-connecting-web/index.tsx

@@ -0,0 +1,119 @@
+import { useSnapshot } from 'valtio';
+import { useCallback } from 'react';
+import { Linking, ScrollView } from 'react-native';
+import {
+  RouterController,
+  ApiController,
+  AssetUtil,
+  WcController,
+  CoreHelperUtil,
+  OptionsController,
+  EventsController,
+  AssetController,
+  LogController,
+  ConnectionsController
+} from '@reown/appkit-core-react-native';
+import {
+  Button,
+  FlexView,
+  LoadingThumbnail,
+  WalletImage,
+  Link,
+  IconBox
+} from '@reown/appkit-ui-react-native';
+
+import { ConnectingBody, getMessage } from '../w3m-connecting-body';
+import styles from './styles';
+
+interface ConnectingWebProps {
+  onCopyUri: (uri?: string) => void;
+}
+
+export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
+  const { data } = RouterController.state;
+  const { wcUri, wcError } = useSnapshot(WcController.state);
+  const { walletImages } = useSnapshot(AssetController.state);
+  const showCopy = OptionsController.isClipboardAvailable();
+  const bodyMessage = getMessage({
+    walletName: data?.wallet?.name,
+    declined: wcError,
+    isWeb: true
+  });
+
+  const onConnect = useCallback(async () => {
+    try {
+      const { name, webapp_link } = data?.wallet ?? {};
+      if (name && webapp_link && wcUri) {
+        WcController.setWcError(false);
+        const { redirect, href } = CoreHelperUtil.formatUniversalUrl(webapp_link, wcUri);
+        const wcLinking = { name, href };
+        WcController.setWcLinking(wcLinking);
+        WcController.setPressedWallet(data?.wallet);
+        await Linking.openURL(redirect);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking, data?.wallet);
+        const address = ConnectionsController.state.activeAddress;
+        const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
+
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'CONNECT_SUCCESS',
+          address: CoreHelperUtil.getPlainAddress(address),
+          properties: {
+            method: 'web',
+            name: data?.wallet?.name ?? 'Unknown',
+            explorerId: data?.wallet?.id,
+            caipNetworkId
+          }
+        });
+      }
+    } catch (error) {
+      LogController.sendError(error, 'ConnectingWeb.tsx', 'onConnect');
+    }
+  }, [data?.wallet, wcUri]);
+
+  return (
+    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
+      <FlexView alignItems="center" padding={['2xl', 'm', 'xs', 'm']}>
+        <LoadingThumbnail paused={wcError}>
+          <WalletImage
+            size="xl"
+            imageSrc={AssetUtil.getWalletImage(data?.wallet, walletImages)}
+            imageHeaders={ApiController._getApiHeaders()}
+          />
+          {wcError ? (
+            <IconBox
+              icon={'close'}
+              border
+              background
+              backgroundColor="icon-box-bg-error-100"
+              size="sm"
+              iconColor="error-100"
+              style={styles.errorIcon}
+            />
+          ) : null}
+        </LoadingThumbnail>
+        <ConnectingBody title={bodyMessage.title} description={bodyMessage.description} />
+        <Button
+          size="sm"
+          variant="accent"
+          iconRight="externalLink"
+          style={styles.openButton}
+          onPress={onConnect}
+        >
+          Open
+        </Button>
+        {showCopy ? (
+          <Link
+            iconLeft="copySmall"
+            color="fg-200"
+            style={styles.copyButton}
+            onPress={() => onCopyUri(wcUri)}
+          >
+            Copy link
+          </Link>
+        ) : null}
+      </FlexView>
+    </ScrollView>
+  );
+}

package/src/partials/w3m-connecting-web/styles.ts

@@ -0,0 +1,23 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    minHeight: '30%'
+  },
+  openButton: {
+    marginTop: Spacing.m
+  },
+  copyButton: {
+    marginTop: Spacing.m
+  },
+  errorIcon: {
+    position: 'absolute',
+    bottom: 5,
+    right: 5,
+    zIndex: 2
+  },
+  marginBottom: {
+    marginBottom: Spacing.xs
+  }
+});

package/src/partials/w3m-header/index.tsx

@@ -0,0 +1,113 @@
+import { useSnapshot } from 'valtio';
+import {
+  RouterController,
+  EventsController,
+  type RouterControllerState
+} from '@reown/appkit-core-react-native';
+import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
+import { StringUtil } from '@reown/appkit-common-react-native';
+
+import styles from './styles';
+import { useInternalAppKit } from '../../AppKitContext';
+
+export function Header() {
+  const { close, back } = useInternalAppKit();
+  const { data, view } = useSnapshot(RouterController.state);
+  const onHelpPress = () => {
+    RouterController.push('WhatIsAWallet', undefined, 'backward');
+    EventsController.sendEvent({ type: 'track', event: 'CLICK_WALLET_HELP' });
+  };
+
+  const headings = (_data: RouterControllerState['data'], _view: RouterControllerState['view']) => {
+    const walletName = _data?.wallet?.name;
+    const networkName = _data?.network?.name;
+    const socialName = _data?.socialProvider
+      ? StringUtil.capitalize(_data?.socialProvider)
+      : undefined;
+
+    return {
+      Account: undefined,
+      AccountDefault: undefined,
+      AllWallets: 'All wallets',
+      Connect: 'Connect wallet',
+      ConnectSocials: 'All socials',
+      ConnectingExternal: walletName ?? 'Connect wallet',
+      SIWXSignMessage: 'Sign in',
+      ConnectingSocial: socialName ?? 'Connecting Social',
+      WalletConnect: walletName ?? 'WalletConnect',
+      GetWallet: 'Get a wallet',
+      Networks: 'Select network',
+      OnRamp: undefined,
+      OnRampCheckout: 'Checkout',
+      OnRampSettings: 'Preferences',
+      OnRampLoading: undefined,
+      OnRampTransaction: ' ',
+      SwitchNetwork: networkName ?? 'Switch network',
+      Swap: 'Swap',
+      SwapPreview: 'Review swap',
+      Transactions: 'Activity',
+      UnsupportedChain: 'Switch network',
+      UpgradeEmailWallet: 'Upgrade wallet',
+      WalletCompatibleNetworks: 'Compatible networks',
+      WalletReceive: 'Receive',
+      WalletSend: 'Send',
+      WalletSendPreview: 'Review send',
+      WalletSendSelectToken: 'Select token',
+      WhatIsANetwork: 'What is a network?',
+      WhatIsAWallet: 'What is a wallet?'
+    }[_view];
+  };
+
+  const noCloseViews = ['OnRampSettings', 'SIWXSignMessage'];
+  const noBackViews = ['UnsupportedChain', 'SIWXSignMessage'];
+  const showClose = !noCloseViews.includes(view);
+  const header = headings(data, view);
+
+  const handleGoBack = () => {
+    back();
+  };
+
+  const handleClose = () => {
+    close();
+  };
+
+  const dynamicButtonTemplate = () => {
+    const showBack =
+      RouterController.state.history.length > 1 &&
+      !noBackViews.includes(RouterController.state.view);
+    const showHelp = RouterController.state.view === 'Connect';
+
+    if (showHelp) {
+      return <IconLink icon="helpCircle" size="md" onPress={onHelpPress} testID="help-button" />;
+    }
+
+    if (showBack) {
+      return <IconLink icon="chevronLeft" size="md" onPress={handleGoBack} testID="button-back" />;
+    }
+
+    return <FlexView style={styles.iconPlaceholder} />;
+  };
+
+  if (!header) return null;
+
+  const bottomPadding = header === ' ' ? '0' : '4xs';
+
+  return (
+    <FlexView
+      justifyContent="space-between"
+      flexDirection="row"
+      alignItems="center"
+      padding={['l', 'xl', bottomPadding, 'xl']}
+    >
+      {dynamicButtonTemplate()}
+      <Text variant="paragraph-600" numberOfLines={1} testID="header-text">
+        {header}
+      </Text>
+      {showClose ? (
+        <IconLink icon="close" size="md" onPress={handleClose} testID="header-close" />
+      ) : (
+        <FlexView style={styles.iconPlaceholder} />
+      )}
+    </FlexView>
+  );
+}

package/src/partials/w3m-header/styles.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  iconPlaceholder: {
+    height: 32,
+    width: 32
+  }
+});

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

@@ -0,0 +1,61 @@
+import { Modal } from 'react-native';
+import {
+  FlexView,
+  Text,
+  type IconType,
+  IconBox,
+  useTheme,
+  Button
+} from '@reown/appkit-ui-react-native';
+import styles from './styles';
+
+interface InformationModalProps {
+  iconName: IconType;
+  title?: string;
+  description?: string;
+  visible: boolean;
+  onClose: () => void;
+}
+
+export function InformationModal({
+  iconName,
+  title,
+  description,
+  visible,
+  onClose
+}: InformationModalProps) {
+  const Theme = useTheme();
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <FlexView style={styles.modal}>
+        <FlexView
+          style={[
+            styles.content,
+            {
+              backgroundColor: Theme['bg-100'],
+              borderColor: Theme['gray-glass-015']
+            }
+          ]}
+          padding="2xl"
+        >
+          <IconBox icon={iconName} size="lg" background />
+          {!!title && (
+            <Text variant="paragraph-500" style={styles.title}>
+              {title}
+            </Text>
+          )}
+
+          {!!description && (
+            <Text variant="small-400" color="fg-150" center>
+              {description}
+            </Text>
+          )}
+          <Button onPress={onClose} variant="fill" style={styles.button}>
+            Got it
+          </Button>
+        </FlexView>
+      </FlexView>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,24 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  modal: {
+    margin: 0,
+    justifyContent: 'flex-end',
+    flex: 1
+  },
+  content: {
+    borderTopLeftRadius: BorderRadius.l,
+    borderTopRightRadius: BorderRadius.l,
+    alignItems: 'center',
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  title: {
+    marginTop: Spacing.s,
+    marginBottom: Spacing.xs
+  },
+  button: {
+    marginTop: Spacing.xl,
+    width: '100%'
+  }
+});