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

package/src/views/w3m-connecting-external-view/index.tsx

@@ -0,0 +1,131 @@
+import { useCallback, useEffect, useState } from 'react';
+import { ScrollView } from 'react-native';
+import {
+  RouterController,
+  ApiController,
+  AssetUtil,
+  ConnectionController,
+  ModalController,
+  EventsController,
+  StorageUtil,
+  type WcWallet
+} from '@reown/appkit-core-react-native';
+import {
+  Button,
+  FlexView,
+  IconBox,
+  LoadingThumbnail,
+  WalletImage
+} from '@reown/appkit-ui-react-native';
+
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { ConnectingBody, getMessage, type BodyErrorType } from '../../partials/w3m-connecting-body';
+import styles from './styles';
+
+export function ConnectingExternalView() {
+  const { data } = RouterController.state;
+  const connector = data?.connector;
+  const { maxWidth: width } = useCustomDimensions();
+  const [errorType, setErrorType] = useState<BodyErrorType>();
+  const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType });
+
+  const onRetryPress = () => {
+    setErrorType(undefined);
+    onConnect();
+  };
+
+  const storeConnectedWallet = useCallback(
+    async (wallet?: WcWallet) => {
+      if (wallet) {
+        const recentWallets = await StorageUtil.addRecentWallet(wallet);
+        if (recentWallets) {
+          ConnectionController.setRecentWallets(recentWallets);
+        }
+      }
+      if (connector) {
+        const url = AssetUtil.getConnectorImage(connector);
+        ConnectionController.setConnectedWalletImageUrl(url);
+      }
+    },
+    [connector]
+  );
+
+  const onConnect = useCallback(async () => {
+    try {
+      if (connector) {
+        await ConnectionController.connectExternal(connector);
+        storeConnectedWallet(data?.wallet);
+        ModalController.close();
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'CONNECT_SUCCESS',
+          properties: {
+            name: data.wallet?.name ?? 'Unknown',
+            method: 'mobile',
+            explorer_id: data.wallet?.id
+          }
+        });
+      }
+    } catch (error) {
+      if (/(Wallet not found)/i.test((error as Error).message)) {
+        setErrorType('not_installed');
+      } else if (/(rejected)/i.test((error as Error).message)) {
+        setErrorType('declined');
+      } else {
+        setErrorType('default');
+      }
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'CONNECT_ERROR',
+        properties: { message: (error as Error)?.message ?? 'Unknown' }
+      });
+    }
+  }, [connector, storeConnectedWallet, data?.wallet]);
+
+  useEffect(() => {
+    onConnect();
+  }, [onConnect]);
+
+  return (
+    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
+      <FlexView
+        alignItems="center"
+        alignSelf="center"
+        padding={['2xl', 'l', '0', 'l']}
+        style={{ width }}
+      >
+        <LoadingThumbnail paused={!!errorType}>
+          <WalletImage
+            size="xl"
+            imageSrc={AssetUtil.getConnectorImage(connector)}
+            imageHeaders={ApiController._getApiHeaders()}
+          />
+          {errorType && (
+            <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} />
+        {errorType !== 'not_installed' && (
+          <Button
+            size="sm"
+            variant="accent"
+            iconLeft="refresh"
+            style={styles.retryButton}
+            iconStyle={styles.retryIcon}
+            onPress={onRetryPress}
+          >
+            Try again
+          </Button>
+        )}
+      </FlexView>
+    </ScrollView>
+  );
+}

package/src/views/w3m-connecting-external-view/styles.ts

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

package/src/views/w3m-connecting-farcaster-view/index.tsx

@@ -0,0 +1,140 @@
+import { Linking } from 'react-native';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  ConnectionController,
+  ConnectorController,
+  EventsController,
+  ModalController,
+  OptionsController,
+  SnackController,
+  type AppKitFrameProvider
+} from '@reown/appkit-core-react-native';
+import {
+  FlexView,
+  LoadingThumbnail,
+  IconBox,
+  Logo,
+  Text,
+  Link
+} from '@reown/appkit-ui-react-native';
+
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import styles from './styles';
+
+export function ConnectingFarcasterView() {
+  const { maxWidth: width } = useCustomDimensions();
+  const authConnector = ConnectorController.getAuthConnector();
+  const [error, setError] = useState(false);
+  const [processing, setProcessing] = useState(false);
+  const [url, setUrl] = useState<string | undefined>();
+  const showCopy = OptionsController.isClipboardAvailable();
+  const provider = authConnector?.provider as AppKitFrameProvider;
+
+  const onConnect = useCallback(async () => {
+    try {
+      if (provider && authConnector) {
+        setError(false);
+        const { url: farcasterUrl } = await provider.getFarcasterUri();
+        setUrl(farcasterUrl);
+        Linking.openURL(farcasterUrl);
+
+        await provider.connectFarcaster();
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'SOCIAL_LOGIN_REQUEST_USER_DATA',
+          properties: { provider: 'farcaster' }
+        });
+        setProcessing(true);
+        await ConnectionController.connectExternal(authConnector);
+        ConnectionController.setConnectedSocialProvider('farcaster');
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'SOCIAL_LOGIN_SUCCESS',
+          properties: { provider: 'farcaster' }
+        });
+
+        setProcessing(false);
+        ModalController.close();
+      }
+    } catch (e) {
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SOCIAL_LOGIN_ERROR',
+        properties: { provider: 'farcaster' }
+      });
+      // TODO: remove this once Farcaster session refresh is implemented
+      // @ts-expect-error
+      provider?.webviewRef?.current?.reload();
+      SnackController.showError('Something went wrong');
+      setError(true);
+      setProcessing(false);
+    }
+  }, [provider, authConnector]);
+
+  const onCopyUrl = () => {
+    if (url) {
+      OptionsController.copyToClipboard(url);
+      SnackController.showSuccess('Link copied');
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      // TODO: remove this once Farcaster session refresh is implemented
+      if (!ModalController.state.open) {
+        // @ts-expect-error
+        provider.webviewRef?.current?.reload();
+      }
+    };
+    // @ts-expect-error
+  }, [provider.webviewRef]);
+
+  useEffect(() => {
+    onConnect();
+  }, [onConnect]);
+
+  return (
+    <FlexView
+      alignItems="center"
+      alignSelf="center"
+      padding={['2xl', 'l', '3xl', 'l']}
+      style={{ width }}
+    >
+      <>
+        <LoadingThumbnail paused={!!error}>
+          <Logo logo="farcasterSquare" height={72} width={72} />
+          {error && (
+            <IconBox
+              icon={'close'}
+              border
+              background
+              backgroundColor="icon-box-bg-error-100"
+              size="sm"
+              iconColor="error-100"
+              style={styles.errorIcon}
+            />
+          )}
+        </LoadingThumbnail>
+        <Text style={styles.continueText} variant="paragraph-500">
+          {processing ? 'Loading user data' : 'Continue in Farcaster'}
+        </Text>
+        <Text variant="small-400" color="fg-200">
+          {processing
+            ? 'Please wait a moment while we load your data'
+            : 'Connect in the Farcaster app'}
+        </Text>
+        {showCopy && (
+          <Link
+            iconLeft="copySmall"
+            color="fg-200"
+            style={styles.copyButton}
+            onPress={onCopyUrl}
+            testID="copy-link"
+          >
+            Copy link
+          </Link>
+        )}
+      </>
+    </FlexView>
+  );
+}

package/src/views/w3m-connecting-farcaster-view/styles.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  errorIcon: {
+    position: 'absolute',
+    bottom: 8,
+    right: 8,
+    zIndex: 2
+  },
+  continueText: {
+    marginTop: Spacing.m,
+    marginBottom: Spacing.xs
+  },
+  copyButton: {
+    marginTop: Spacing.m
+  }
+});

package/src/views/w3m-connecting-social-view/index.tsx

@@ -0,0 +1,153 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect, useState } from 'react';
+import { Platform } from 'react-native';
+import {
+  ConnectionController,
+  ConnectorController,
+  EventsController,
+  ModalController,
+  RouterController,
+  SnackController,
+  WebviewController,
+  type AppKitFrameProvider
+} from '@reown/appkit-core-react-native';
+import { FlexView, LoadingThumbnail, IconBox, Logo, Text } from '@reown/appkit-ui-react-native';
+import { StringUtil } from '@reown/appkit-common-react-native';
+
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import styles from './styles';
+
+export function ConnectingSocialView() {
+  const { maxWidth: width } = useCustomDimensions();
+  const { processingAuth } = useSnapshot(WebviewController.state);
+  const { selectedSocialProvider } = useSnapshot(ConnectionController.state);
+  const authConnector = ConnectorController.getAuthConnector();
+  const [error, setError] = useState(false);
+  const provider = authConnector?.provider as AppKitFrameProvider;
+
+  const onConnect = useCallback(async () => {
+    try {
+      if (
+        !WebviewController.state.connecting &&
+        provider &&
+        ConnectionController.state.selectedSocialProvider
+      ) {
+        const { uri } = await provider.getSocialRedirectUri({
+          provider: ConnectionController.state.selectedSocialProvider
+        });
+        WebviewController.setWebviewUrl(uri);
+
+        const isNativeApple =
+          ConnectionController.state.selectedSocialProvider === 'apple' && Platform.OS === 'ios';
+
+        WebviewController.setWebviewVisible(!isNativeApple);
+        WebviewController.setConnecting(true);
+        WebviewController.setConnectingProvider(ConnectionController.state.selectedSocialProvider);
+      }
+    } catch (e) {
+      WebviewController.setWebviewVisible(false);
+      WebviewController.setWebviewUrl(undefined);
+      WebviewController.setConnecting(false);
+      WebviewController.setConnectingProvider(undefined);
+      SnackController.showError('Something went wrong');
+      setError(true);
+    }
+  }, [provider]);
+
+  const socialMessageHandler = useCallback(
+    async (url: string) => {
+      try {
+        if (
+          url.includes('/sdk/oauth') &&
+          ConnectionController.state.selectedSocialProvider &&
+          authConnector &&
+          !WebviewController.state.processingAuth
+        ) {
+          WebviewController.setProcessingAuth(true);
+          WebviewController.setWebviewVisible(false);
+          const parsedUrl = new URL(url);
+
+          EventsController.sendEvent({
+            type: 'track',
+            event: 'SOCIAL_LOGIN_REQUEST_USER_DATA',
+            properties: { provider: ConnectionController.state.selectedSocialProvider }
+          });
+
+          await provider?.connectSocial(parsedUrl.search);
+          await ConnectionController.connectExternal(authConnector);
+          ConnectionController.setConnectedSocialProvider(
+            ConnectionController.state.selectedSocialProvider
+          );
+          WebviewController.setConnecting(false);
+
+          EventsController.sendEvent({
+            type: 'track',
+            event: 'SOCIAL_LOGIN_SUCCESS',
+            properties: { provider: ConnectionController.state.selectedSocialProvider }
+          });
+
+          ModalController.close();
+          WebviewController.reset();
+        }
+      } catch (e) {
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'SOCIAL_LOGIN_ERROR',
+          properties: { provider: ConnectionController.state.selectedSocialProvider! }
+        });
+        WebviewController.reset();
+        RouterController.goBack();
+        SnackController.showError('Something went wrong');
+      }
+    },
+    [authConnector, provider]
+  );
+
+  useEffect(() => {
+    onConnect();
+  }, [onConnect]);
+
+  useEffect(() => {
+    if (!provider) return;
+
+    const unsubscribe = provider?.getEventEmitter().addListener('social', socialMessageHandler);
+
+    return () => {
+      unsubscribe.removeListener('social', socialMessageHandler);
+    };
+  }, [socialMessageHandler, provider]);
+
+  return (
+    <FlexView
+      alignItems="center"
+      alignSelf="center"
+      padding={['2xl', 'l', '3xl', 'l']}
+      style={{ width }}
+    >
+      <LoadingThumbnail paused={!!error}>
+        <Logo logo={selectedSocialProvider ?? 'more'} height={72} width={72} />
+        {error && (
+          <IconBox
+            icon={'close'}
+            border
+            background
+            backgroundColor="icon-box-bg-error-100"
+            size="sm"
+            iconColor="error-100"
+            style={styles.errorIcon}
+          />
+        )}
+      </LoadingThumbnail>
+      <Text style={styles.continueText} variant="paragraph-500">
+        {processingAuth
+          ? 'Loading user data'
+          : `Continue with ${StringUtil.capitalize(selectedSocialProvider)}`}
+      </Text>
+      <Text variant="small-400" color="fg-200">
+        {processingAuth
+          ? 'Please wait a moment while we load your data'
+          : 'Connect in the provider window'}
+      </Text>
+    </FlexView>
+  );
+}

package/src/views/w3m-connecting-social-view/styles.ts

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '@reown/appkit-ui-react-native';
+
+export default StyleSheet.create({
+  errorIcon: {
+    position: 'absolute',
+    bottom: 8,
+    right: 8,
+    zIndex: 2
+  },
+  continueText: {
+    marginTop: Spacing.m,
+    marginBottom: Spacing.xs
+  }
+});

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

@@ -0,0 +1,160 @@
+import { useSnapshot } from 'valtio';
+import { useEffect, useState } from 'react';
+import {
+  AccountController,
+  ConnectionController,
+  ConstantsUtil,
+  CoreHelperUtil,
+  ModalController,
+  RouterController,
+  SnackController,
+  type Platform,
+  OptionsController,
+  ApiController,
+  EventsController
+} from '@reown/appkit-core-react-native';
+import { SIWEController } from '@reown/appkit-siwe-react-native';
+import { useAppKit } from '../../AppKitContext';
+import { ConnectingQrCode } from '../../partials/w3m-connecting-qrcode';
+import { ConnectingMobile } from '../../partials/w3m-connecting-mobile';
+import { ConnectingWeb } from '../../partials/w3m-connecting-web';
+import { ConnectingHeader } from '../../partials/w3m-connecting-header';
+import { UiUtil } from '../../utils/UiUtil';
+
+export function ConnectingView() {
+  const { connect } = useAppKit();
+  const { installed } = useSnapshot(ApiController.state);
+  const { data } = RouterController.state;
+  const [lastRetry, setLastRetry] = useState(Date.now());
+  const isQr = !data?.wallet;
+  const isInstalled = !!installed?.find(wallet => wallet.id === data?.wallet?.id);
+
+  const [platform, setPlatform] = useState<Platform>();
+  const [platforms, setPlatforms] = useState<Platform[]>([]);
+
+  const onRetry = () => {
+    if (CoreHelperUtil.isAllowedRetry(lastRetry)) {
+      setLastRetry(Date.now());
+      ConnectionController.clearUri();
+      initializeConnection(true);
+    } else {
+      SnackController.showError('Please wait a second before retrying');
+    }
+  };
+
+  const initializeConnection = async (retry = false) => {
+    try {
+      const { wcPairingExpiry } = ConnectionController.state;
+      // const { data: routeData } = RouterController.state;
+      if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
+        ConnectionController.setWcError(false);
+        // ConnectionController.connectWalletConnect(routeData?.wallet?.link_mode ?? undefined);
+
+        //TODO: check linkmode
+        const wcPromise = connect('walletconnect');
+        ConnectionController.setWcPromise(wcPromise);
+        await wcPromise;
+        // await ConnectionController.state.wcPromise;
+        // ConnectorController.setConnectedConnector('WALLET_CONNECT');
+        AccountController.setIsConnected(true);
+
+        if (OptionsController.state.isSiweEnabled) {
+          if (SIWEController.state.status === 'success') {
+            ModalController.close();
+          } else {
+            RouterController.push('ConnectingSiwe');
+          }
+        } else {
+          ModalController.close();
+        }
+      }
+    } catch (error) {
+      ConnectionController.setWcError(true);
+      ConnectionController.clearUri();
+      SnackController.showError('Declined');
+      if (isQr && CoreHelperUtil.isAllowedRetry(lastRetry)) {
+        setLastRetry(Date.now());
+        initializeConnection(true);
+      }
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'CONNECT_ERROR',
+        properties: {
+          message: (error as Error)?.message ?? 'Unknown'
+        }
+      });
+    }
+  };
+
+  const onCopyUri = (uri?: string) => {
+    if (OptionsController.isClipboardAvailable() && uri) {
+      OptionsController.copyToClipboard(uri);
+      SnackController.showSuccess('Link copied');
+    }
+  };
+
+  const onSelectPlatform = (tab: Platform) => {
+    UiUtil.createViewTransition();
+    setPlatform(tab);
+  };
+
+  const headerTemplate = () => {
+    if (isQr) return null;
+
+    if (platforms.length > 1) {
+      return <ConnectingHeader platforms={platforms} onSelectPlatform={onSelectPlatform} />;
+    }
+
+    return null;
+  };
+
+  const platformTemplate = () => {
+    if (isQr) {
+      return <ConnectingQrCode />;
+    }
+
+    switch (platform) {
+      case 'mobile':
+        return (
+          <ConnectingMobile onRetry={onRetry} onCopyUri={onCopyUri} isInstalled={isInstalled} />
+        );
+      case 'web':
+        return <ConnectingWeb onCopyUri={onCopyUri} />;
+      default:
+        return undefined;
+    }
+  };
+
+  useEffect(() => {
+    const _platforms: Platform[] = [];
+    if (data?.wallet?.mobile_link) {
+      _platforms.push('mobile');
+    }
+    if (data?.wallet?.webapp_link && !isInstalled) {
+      _platforms.push('web');
+    }
+
+    setPlatforms(_platforms);
+    setPlatform(_platforms[0]);
+  }, [data, isInstalled]);
+
+  useEffect(() => {
+    initializeConnection();
+    let _interval: NodeJS.Timeout;
+
+    // Check if the pairing expired every 10 seconds. If expired, it will create a new uri.
+    if (isQr) {
+      _interval = setInterval(initializeConnection, ConstantsUtil.TEN_SEC_MS);
+    }
+
+    return () => clearInterval(_interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isQr]);
+
+  return (
+    <>
+      {headerTemplate()}
+      {platformTemplate()}
+    </>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { Platform, ScrollView } from 'react-native';
+import { useSnapshot } from 'valtio';
+import { FlexView, Spacing } from '@reown/appkit-ui-react-native';
+import { ConnectEmailInput } from '../w3m-connect-view/components/connect-email-input';
+import { SocialLoginList } from '../w3m-connect-view/components/social-login-list';
+import { WalletGuide } from '../w3m-connect-view/components/wallet-guide';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { ConnectorController, OptionsController } from '@reown/appkit-core-react-native';
+import { useKeyboard } from '../../hooks/useKeyboard';
+
+export function CreateView() {
+  const connectors = ConnectorController.state.connectors;
+  const { authLoading } = useSnapshot(ConnectorController.state);
+  const { features } = useSnapshot(OptionsController.state);
+  const { padding } = useCustomDimensions();
+  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const isAuthEnabled = connectors.some(c => c.type === 'AUTH');
+  const isEmailEnabled = isAuthEnabled && features?.email;
+  const isSocialEnabled = isAuthEnabled && features?.socials && features?.socials.length > 0;
+
+  const paddingBottom = Platform.select({
+    android: keyboardShown ? keyboardHeight + Spacing.xl : Spacing.xl,
+    default: Spacing.xl
+  });
+
+  return (
+    <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
+      <FlexView padding={['xs', '0', '0', '0']} style={{ paddingBottom }}>
+        {isEmailEnabled && <ConnectEmailInput loading={authLoading} />}
+        {isSocialEnabled && <SocialLoginList options={features?.socials} disabled={authLoading} />}
+        {isAuthEnabled && <WalletGuide guide="explore" />}
+      </FlexView>
+    </ScrollView>
+  );
+}