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

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

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  container: {
+    paddingBottom: Spacing['3xl']
+  },
+  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/index.tsx

@@ -0,0 +1,76 @@
+import { useEffect } from 'react';
+import { useSnapshot } from 'valtio';
+import {
+  AssetUtil,
+  ConnectionController,
+  ConnectorController,
+  EventsController,
+  OptionsController,
+  SnackController
+} from '@reown/appkit-core-react-native';
+import { FlexView, Link, QrCode, Text, Spacing } from '@reown/appkit-ui-react-native';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import styles from './styles';
+
+export function ConnectingQrCode() {
+  const { wcUri } = useSnapshot(ConnectionController.state);
+  const showCopy = OptionsController.isClipboardAvailable();
+  const { maxWidth: windowSize, isPortrait } = useCustomDimensions();
+  const qrSize = (windowSize - Spacing.xl * 2) / (isPortrait ? 1 : 1.5);
+
+  const onCopyAddress = () => {
+    if (ConnectionController.state.wcUri) {
+      OptionsController.copyToClipboard(ConnectionController.state.wcUri);
+      SnackController.showSuccess('Link copied');
+    }
+  };
+
+  const onConnect = async () => {
+    await ConnectionController.state.wcPromise;
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CONNECT_SUCCESS',
+      properties: {
+        method: 'qrcode',
+        name: 'WalletConnect'
+      }
+    });
+
+    const connectors = ConnectorController.state.connectors;
+    const connector = connectors.find(c => c.type === 'WALLET_CONNECT');
+    const url = AssetUtil.getConnectorImage(connector);
+    ConnectionController.setConnectedWalletImageUrl(url);
+  };
+
+  useEffect(() => {
+    if (wcUri) {
+      onConnect();
+    }
+  }, [wcUri]);
+
+  return (
+    <FlexView
+      alignItems="center"
+      justifyContent="center"
+      flexDirection={isPortrait ? 'column' : 'row'}
+      padding={['xl', 'xl', '2xl', '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>
+        )}
+      </FlexView>
+    </FlexView>
+  );
+}

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

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

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

@@ -0,0 +1,111 @@
+import { useSnapshot } from 'valtio';
+import { useCallback } from 'react';
+import { Linking, ScrollView } from 'react-native';
+import {
+  RouterController,
+  ApiController,
+  AssetUtil,
+  ConnectionController,
+  CoreHelperUtil,
+  OptionsController,
+  EventsController
+} from '@reown/appkit-core-react-native';
+import {
+  Button,
+  FlexView,
+  LoadingThumbnail,
+  WalletImage,
+  Link,
+  IconBox
+} from '@reown/appkit-ui-react-native';
+
+import { UiUtil } from '../../utils/UiUtil';
+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(ConnectionController.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) {
+        ConnectionController.setWcError(false);
+        const { redirect, href } = CoreHelperUtil.formatUniversalUrl(webapp_link, wcUri);
+        const wcLinking = { name, href };
+        ConnectionController.setWcLinking(wcLinking);
+        ConnectionController.setPressedWallet(data?.wallet);
+        await Linking.openURL(redirect);
+        await ConnectionController.state.wcPromise;
+
+        UiUtil.storeConnectedWallet(wcLinking, data?.wallet);
+
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'CONNECT_SUCCESS',
+          properties: {
+            method: 'web',
+            name: data?.wallet?.name ?? 'Unknown',
+            explorer_id: data?.wallet?.id
+          }
+        });
+      }
+    } catch {}
+  }, [data?.wallet, wcUri]);
+
+  return (
+    <ScrollView bounces={false} fadingEdgeLength={20}>
+      <FlexView alignItems="center" padding={['2xl', 'm', '3xl', 'm']}>
+        <LoadingThumbnail paused={wcError}>
+          <WalletImage
+            size="xl"
+            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
+            imageHeaders={ApiController._getApiHeaders()}
+          />
+          {wcError && (
+            <IconBox
+              icon={'close'}
+              border
+              background
+              backgroundColor="icon-box-bg-error-100"
+              size="sm"
+              iconColor="error-100"
+              style={styles.errorIcon}
+            />
+          )}
+        </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>
+        )}
+      </FlexView>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,20 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  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,146 @@
+import { useSnapshot } from 'valtio';
+import {
+  RouterController,
+  ModalController,
+  EventsController,
+  type RouterControllerState,
+  ConnectionController,
+  ConnectorController,
+  type AppKitFrameProvider
+} 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';
+
+export function Header() {
+  const { data, view } = useSnapshot(RouterController.state);
+  const onHelpPress = () => {
+    RouterController.push('WhatIsAWallet');
+    EventsController.sendEvent({ type: 'track', event: 'CLICK_WALLET_HELP' });
+  };
+
+  const headings = (_data: RouterControllerState['data'], _view: RouterControllerState['view']) => {
+    const connectorName = _data?.connector?.name;
+    const walletName = _data?.wallet?.name;
+    const networkName = _data?.network?.name;
+    const socialName = ConnectionController.state.selectedSocialProvider
+      ? StringUtil.capitalize(ConnectionController.state.selectedSocialProvider)
+      : undefined;
+
+    return {
+      Account: undefined,
+      AccountDefault: undefined,
+      AllWallets: 'All wallets',
+      Connect: 'Connect wallet',
+      ConnectSocials: 'All socials',
+      ConnectingExternal: connectorName ?? 'Connect wallet',
+      ConnectingSiwe: undefined,
+      ConnectingFarcaster: socialName ?? 'Connecting Social',
+      ConnectingSocial: socialName ?? 'Connecting Social',
+      ConnectingWalletConnect: walletName ?? 'WalletConnect',
+      Create: 'Create wallet',
+      EmailVerifyDevice: ' ',
+      EmailVerifyOtp: 'Confirm email',
+      GetWallet: 'Get a wallet',
+      Networks: 'Select network',
+      OnRamp: undefined,
+      OnRampCheckout: 'Checkout',
+      OnRampSettings: 'Preferences',
+      OnRampLoading: undefined,
+      OnRampTransaction: ' ',
+      SwitchNetwork: networkName ?? 'Switch network',
+      Swap: 'Swap',
+      SwapSelectToken: 'Select token',
+      SwapPreview: 'Review swap',
+      Transactions: 'Activity',
+      UnsupportedChain: 'Switch network',
+      UpdateEmailPrimaryOtp: 'Confirm current email',
+      UpdateEmailSecondaryOtp: 'Confirm new email',
+      UpdateEmailWallet: 'Edit email',
+      UpgradeEmailWallet: 'Upgrade wallet',
+      UpgradeToSmartAccount: undefined,
+      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'];
+  const showClose = !noCloseViews.includes(view);
+  const header = headings(data, view);
+
+  const checkSocial = () => {
+    if (
+      RouterController.state.view === 'ConnectingFarcaster' ||
+      RouterController.state.view === 'ConnectingSocial'
+    ) {
+      const socialProvider = ConnectionController.state.selectedSocialProvider;
+      const authProvider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
+
+      if (authProvider && socialProvider === 'farcaster') {
+        // TODO: remove this once Farcaster session refresh is implemented
+        // @ts-expect-error
+        authProvider.webviewRef?.current?.reload();
+      }
+
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SOCIAL_LOGIN_CANCELED',
+        properties: { provider: ConnectionController.state.selectedSocialProvider! }
+      });
+    }
+  };
+
+  const handleGoBack = () => {
+    checkSocial();
+    RouterController.goBack();
+  };
+
+  const handleClose = () => {
+    checkSocial();
+    ModalController.close();
+  };
+
+  const dynamicButtonTemplate = () => {
+    const showBack = RouterController.state.history.length > 1;
+    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,65 @@
+import Modal from 'react-native-modal';
+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
+      isVisible={visible}
+      useNativeDriver
+      useNativeDriverForBackdrop
+      onBackdropPress={onClose}
+      onDismiss={onClose}
+      style={styles.modal}
+    >
+      <FlexView
+        style={[
+          styles.content,
+          {
+            backgroundColor: Theme['bg-200']
+          }
+        ]}
+        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>
+    </Modal>
+  );
+}

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

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

package/src/partials/w3m-otp-code/index.tsx

@@ -0,0 +1,81 @@
+import { Platform } from 'react-native';
+import { FlexView, Link, LoadingSpinner, Otp, Spacing, Text } from '@reown/appkit-ui-react-native';
+
+import { useKeyboard } from '../../hooks/useKeyboard';
+import styles from './styles';
+
+interface Props {
+  onCodeChange?: (code: string) => void;
+  onSubmit: (code: string) => void;
+  onRetry: () => void;
+  loading?: boolean;
+  error?: string;
+  email?: string;
+  timeLeft?: number;
+  codeExpiry?: number;
+  retryLabel?: string;
+  retryDisabledButtonLabel?: string;
+  retryButtonLabel?: string;
+}
+
+export function OtpCodeView({
+  onCodeChange,
+  onSubmit,
+  onRetry,
+  error,
+  loading,
+  email,
+  timeLeft = 0,
+  codeExpiry = 20,
+  retryLabel = "Didn't receive it?",
+  retryDisabledButtonLabel = 'Resend',
+  retryButtonLabel = 'Resend code'
+}: Props) {
+  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const paddingBottom = Platform.select({
+    android: keyboardShown ? keyboardHeight + Spacing.l : Spacing.l,
+    default: Spacing.l
+  });
+
+  const handleCodeChange = (code: string) => {
+    onCodeChange?.(code);
+
+    if (code.length === 6) {
+      onSubmit?.(code);
+    }
+  };
+
+  return (
+    <FlexView padding={['l', 'l', '3xl', 'l']} alignItems="center" style={{ paddingBottom }}>
+      <Text center variant="paragraph-400">
+        Enter the code we sent to{' '}
+      </Text>
+      <Text variant="paragraph-500">{email ?? 'your email'}</Text>
+      <Text style={styles.expiryText} variant="small-400" color="fg-200">
+        {`The code expires in ${codeExpiry} minutes`}
+      </Text>
+      <FlexView justifyContent="center" style={styles.otpContainer}>
+        {loading ? (
+          <LoadingSpinner size="xl" />
+        ) : (
+          <Otp length={6} onChangeText={handleCodeChange} autoFocus />
+        )}
+      </FlexView>
+      {error && (
+        <Text variant="small-400" color="error-100" style={styles.errorText}>
+          {error}
+        </Text>
+      )}
+      {!loading && (
+        <FlexView alignItems="center" flexDirection="row" margin={['s', '0', '0', '0']}>
+          <Text variant="small-400" color="fg-200">
+            {retryLabel}
+          </Text>
+          <Link onPress={onRetry} disabled={timeLeft > 0 || loading}>
+            {timeLeft > 0 ? `${retryDisabledButtonLabel} in ${timeLeft}s` : retryButtonLabel}
+          </Link>
+        </FlexView>
+      )}
+    </FlexView>
+  );
+}

package/src/partials/w3m-otp-code/styles.ts

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  expiryText: {
+    marginTop: Spacing.s,
+    marginBottom: Spacing.l
+  },
+  otpContainer: {
+    height: 60
+  },
+  errorText: {
+    marginTop: Spacing['2xs']
+  }
+});

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

@@ -0,0 +1,77 @@
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  IconBox,
+  Text,
+  FlexView,
+  Spacing,
+  type IconType,
+  Button,
+  type ColorType
+} from '@reown/appkit-ui-react-native';
+
+interface Props {
+  icon?: IconType;
+  iconColor?: ColorType;
+  title?: string;
+  description?: string;
+  style?: StyleProp<ViewStyle>;
+  actionIcon?: IconType;
+  actionPress?: () => void;
+  actionTitle?: string;
+}
+
+export function Placeholder({
+  icon,
+  iconColor = 'fg-175',
+  title,
+  description,
+  style,
+  actionPress,
+  actionTitle,
+  actionIcon
+}: Props) {
+  return (
+    <FlexView alignItems="center" justifyContent="center" style={[styles.container, style]}>
+      {icon && (
+        <IconBox icon={icon} size="xl" iconColor={iconColor} background style={styles.icon} />
+      )}
+      {title && (
+        <Text variant="paragraph-500" style={styles.title}>
+          {title}
+        </Text>
+      )}
+      {description && (
+        <Text variant="small-400" color="fg-200" center>
+          {description}
+        </Text>
+      )}
+      {actionPress && (
+        <Button
+          style={styles.button}
+          iconLeft={actionIcon}
+          size="sm"
+          variant="accent"
+          onPress={actionPress}
+        >
+          {actionTitle ?? ''}
+        </Button>
+      )}
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    minHeight: 200
+  },
+  icon: {
+    marginBottom: Spacing.l
+  },
+  title: {
+    marginBottom: Spacing['2xs']
+  },
+  button: {
+    marginTop: Spacing.m
+  }
+});