@reown/appkit-react-native 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/views/w3m-connect-view/components/connectors-list.tsx

@@ -1,45 +0,0 @@
-import { useSnapshot } from 'valtio';
-import type { StyleProp, ViewStyle } from 'react-native';
-import {
-  ConnectorController,
-  AssetUtil,
-  RouterController,
-  ApiController
-} from '@reown/appkit-core-react-native';
-
-import { ListWallet } from '@reown/appkit-ui-react-native';
-import type { ConnectorType } from '@reown/appkit-common-react-native';
-
-interface Props {
-  itemStyle: StyleProp<ViewStyle>;
-  isWalletConnectEnabled: boolean;
-}
-
-export function ConnectorList({ itemStyle, isWalletConnectEnabled }: Props) {
-  const { connectors } = useSnapshot(ConnectorController.state);
-  const excludeConnectors: ConnectorType[] = ['WALLET_CONNECT', 'AUTH'];
-  const imageHeaders = ApiController._getApiHeaders();
-
-  if (isWalletConnectEnabled) {
-    // use wallet from api list
-    excludeConnectors.push('COINBASE');
-  }
-
-  return connectors.map(connector => {
-    if (excludeConnectors.includes(connector.type)) {
-      return null;
-    }
-
-    return (
-      <ListWallet
-        key={connector.type}
-        imageSrc={AssetUtil.getConnectorImage(connector)}
-        imageHeaders={imageHeaders}
-        name={connector.name || 'Unknown'}
-        onPress={() => RouterController.push('ConnectingExternal', { connector })}
-        style={itemStyle}
-        installed={connector.installed}
-      />
-    );
-  });
-}

package/src/views/w3m-connect-view/components/wallet-guide.tsx

@@ -1,50 +0,0 @@
-import { RouterController } from '@reown/appkit-core-react-native';
-import { Chip, FlexView, Link, Separator, Spacing, Text } from '@reown/appkit-ui-react-native';
-import { Linking, StyleSheet } from 'react-native';
-
-export interface WalletGuideProps {
-  guide: 'explore' | 'get-started';
-}
-
-export function WalletGuide({ guide }: WalletGuideProps) {
-  const onExplorerPress = () => {
-    Linking.openURL('https://explorer.walletconnect.com');
-  };
-
-  const onGetStartedPress = () => {
-    RouterController.push('Create');
-  };
-
-  return guide === 'explore' ? (
-    <FlexView alignItems="center" justifyContent="center">
-      <Separator text="or" style={styles.socialSeparator} />
-      <Text variant="small-400" style={styles.text}>
-        Looking for a self-custody wallet?
-      </Text>
-      <Chip
-        label="Visit our explorer"
-        variant="transparent"
-        rightIcon="externalLink"
-        leftIcon="walletConnectLightBrown"
-        size="sm"
-        onPress={onExplorerPress}
-      />
-    </FlexView>
-  ) : (
-    <FlexView alignItems="center" justifyContent="center" margin="m" flexDirection="row">
-      <Text variant="small-400">Haven't got a wallet?</Text>
-      <Link onPress={onGetStartedPress} size="sm">
-        Get started
-      </Link>
-    </FlexView>
-  );
-}
-
-const styles = StyleSheet.create({
-  text: {
-    marginBottom: Spacing.xs
-  },
-  socialSeparator: {
-    marginVertical: Spacing.l
-  }
-});

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

@@ -1,140 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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-create-view/index.tsx

@@ -1,35 +0,0 @@
-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>
-  );
-}

package/src/views/w3m-email-verify-device-view/index.tsx

@@ -1,80 +0,0 @@
-import { useSnapshot } from 'valtio';
-import { View } from 'react-native';
-import { useEffect, useState } from 'react';
-import { FlexView, Icon, Link, Text, useTheme } from '@reown/appkit-ui-react-native';
-import {
-  ConnectorController,
-  CoreHelperUtil,
-  EventsController,
-  RouterController,
-  SnackController,
-  type AppKitFrameProvider
-} from '@reown/appkit-core-react-native';
-import useTimeout from '../../hooks/useTimeout';
-import styles from './styles';
-
-export function EmailVerifyDeviceView() {
-  const Theme = useTheme();
-  const { connectors } = useSnapshot(ConnectorController.state);
-  const { data } = RouterController.state;
-  const { timeLeft, startTimer } = useTimeout(0);
-  const [loading, setLoading] = useState(false);
-  const authProvider = connectors.find(c => c.type === 'AUTH')?.provider as AppKitFrameProvider;
-
-  const listenForDeviceApproval = async () => {
-    if (authProvider && data?.email) {
-      try {
-        await authProvider.connectDevice();
-        EventsController.sendEvent({ type: 'track', event: 'DEVICE_REGISTERED_FOR_EMAIL' });
-        EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_SENT' });
-        RouterController.replace('EmailVerifyOtp', { email: data.email });
-      } catch (error: any) {
-        RouterController.goBack();
-      }
-    }
-  };
-
-  const onResendEmail = async () => {
-    try {
-      if (!data?.email || !authProvider) return;
-      setLoading(true);
-      authProvider?.connectEmail({ email: data.email });
-      listenForDeviceApproval();
-      SnackController.showSuccess('Link resent');
-      startTimer(30);
-      setLoading(false);
-    } catch (e) {
-      const parsedError = CoreHelperUtil.parseError(e);
-      SnackController.showError(parsedError);
-    }
-  };
-
-  useEffect(() => {
-    listenForDeviceApproval();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <FlexView alignItems="center" padding={['0', '4xl', '3xl', '4xl']}>
-      <View style={[styles.iconContainer, { backgroundColor: Theme['accent-glass-010'] }]}>
-        <Icon name="verify" size="lg" height={28} width={28} color="accent-100" />
-      </View>
-      <Text center variant="medium-600" style={styles.headingText}>
-        Register this device to continue
-      </Text>
-      <Text center variant="paragraph-400">
-        Check the instructions sent to{' '}
-      </Text>
-      <Text variant="paragraph-500">{data?.email ?? 'your email'}</Text>
-      <Text variant="small-400" color="fg-200" style={styles.expiryText}>
-        The link expires in 20 minutes
-      </Text>
-      <FlexView alignItems="center" justifyContent="center" flexDirection="row">
-        <Text variant="small-400">Didn't receive it?</Text>
-        <Link onPress={onResendEmail} disabled={timeLeft > 0 || loading}>
-          {timeLeft > 0 ? `Resend in ${timeLeft}s` : 'Resend link'}
-        </Link>
-      </FlexView>
-    </FlexView>
-  );
-}

package/src/views/w3m-email-verify-device-view/styles.ts

@@ -1,19 +0,0 @@
-import { Spacing } from '@reown/appkit-ui-react-native';
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  iconContainer: {
-    height: 64,
-    width: 64,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: Spacing.xl,
-    marginBottom: Spacing['2xl']
-  },
-  headingText: {
-    marginBottom: Spacing.s
-  },
-  expiryText: {
-    marginVertical: Spacing.l
-  }
-});

package/src/views/w3m-email-verify-otp-view/index.tsx

@@ -1,75 +0,0 @@
-import { useState } from 'react';
-import {
-  ConnectionController,
-  ConnectorController,
-  CoreHelperUtil,
-  EventsController,
-  ModalController,
-  RouterController,
-  SnackController,
-  type AppKitFrameProvider
-} from '@reown/appkit-core-react-native';
-import useTimeout from '../../hooks/useTimeout';
-import { OtpCodeView } from '../../partials/w3m-otp-code';
-
-export function EmailVerifyOtpView() {
-  const { timeLeft, startTimer } = useTimeout(0);
-  const { data } = RouterController.state;
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-  const authConnector = ConnectorController.getAuthConnector();
-
-  const onOtpResend = async () => {
-    try {
-      if (!data?.email || !authConnector) return;
-      setLoading(true);
-      const provider = authConnector?.provider as AppKitFrameProvider;
-      await provider.connectEmail({ email: data.email });
-      SnackController.showSuccess('Code resent');
-      startTimer(30);
-      setLoading(false);
-    } catch (e) {
-      const parsedError = CoreHelperUtil.parseError(e);
-      SnackController.showError(parsedError);
-      setLoading(false);
-    }
-  };
-
-  const onOtpSubmit = async (otp: string) => {
-    if (!authConnector) return;
-    setLoading(true);
-    setError('');
-    try {
-      const provider = authConnector?.provider as AppKitFrameProvider;
-      await provider.connectOtp({ otp });
-      EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_PASS' });
-      await ConnectionController.connectExternal(authConnector);
-      ModalController.close();
-      EventsController.sendEvent({
-        type: 'track',
-        event: 'CONNECT_SUCCESS',
-        properties: { method: 'email', name: authConnector.name || 'Unknown' }
-      });
-    } catch (e) {
-      EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_FAIL' });
-      const parsedError = CoreHelperUtil.parseError(e);
-      if (parsedError?.includes('Invalid code')) {
-        setError('Invalid code. Try again.');
-      } else {
-        SnackController.showError(parsedError);
-      }
-    }
-    setLoading(false);
-  };
-
-  return (
-    <OtpCodeView
-      loading={loading}
-      error={error}
-      timeLeft={timeLeft}
-      email={data?.email}
-      onRetry={onOtpResend}
-      onSubmit={onOtpSubmit}
-    />
-  );
-}

package/src/views/w3m-update-email-primary-otp-view/index.tsx

@@ -1,55 +0,0 @@
-import { useState } from 'react';
-
-import {
-  ConnectorController,
-  CoreHelperUtil,
-  EventsController,
-  RouterController,
-  SnackController,
-  type AppKitFrameProvider
-} from '@reown/appkit-core-react-native';
-
-import { OtpCodeView } from '../../partials/w3m-otp-code';
-
-export function UpdateEmailPrimaryOtpView() {
-  const { data } = RouterController.state;
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-  const authProvider = ConnectorController.getAuthConnector()?.provider as
-    | AppKitFrameProvider
-    | undefined;
-
-  const onOtpSubmit = async (value: string) => {
-    if (!authProvider || loading) return;
-    setLoading(true);
-    setError('');
-    try {
-      await authProvider.updateEmailPrimaryOtp({ otp: value });
-      EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_PASS' });
-      RouterController.replace('UpdateEmailSecondaryOtp', data);
-    } catch (e) {
-      EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_FAIL' });
-      const parsedError = CoreHelperUtil.parseError(e);
-      if (parsedError?.includes('Invalid Otp')) {
-        setError('Invalid code. Try again.');
-      } else {
-        SnackController.showError(parsedError);
-      }
-    }
-    setLoading(false);
-  };
-
-  return (
-    <OtpCodeView
-      loading={loading}
-      error={error}
-      email={data?.email}
-      onSubmit={onOtpSubmit}
-      onRetry={RouterController.goBack}
-      codeExpiry={10}
-      retryLabel="Something wrong?"
-      retryDisabledButtonLabel="Try again"
-      retryButtonLabel="Try again"
-    />
-  );
-}

package/src/views/w3m-update-email-secondary-otp-view/index.tsx

@@ -1,56 +0,0 @@
-import { useSnapshot } from 'valtio';
-import { useState } from 'react';
-
-import {
-  ConnectorController,
-  CoreHelperUtil,
-  RouterController,
-  SnackController,
-  EventsController,
-  type AppKitFrameProvider
-} from '@reown/appkit-core-react-native';
-
-import { OtpCodeView } from '../../partials/w3m-otp-code';
-
-export function UpdateEmailSecondaryOtpView() {
-  const { data } = useSnapshot(RouterController.state);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-  const authConnector = ConnectorController.getAuthConnector();
-
-  const onOtpSubmit = async (value: string) => {
-    if (!authConnector) return;
-    setLoading(true);
-    setError('');
-    try {
-      const provider = authConnector?.provider as AppKitFrameProvider;
-      await provider.updateEmailSecondaryOtp({ otp: value });
-      EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_PASS' });
-      EventsController.sendEvent({ type: 'track', event: 'EMAIL_EDIT_COMPLETE' });
-      RouterController.reset('Account');
-    } catch (e) {
-      EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_FAIL' });
-      const parsedError = CoreHelperUtil.parseError(e);
-      if (parsedError?.includes('Invalid Otp')) {
-        setError('Invalid code. Try again.');
-      } else {
-        SnackController.showError(parsedError);
-      }
-    }
-    setLoading(false);
-  };
-
-  return (
-    <OtpCodeView
-      loading={loading}
-      error={error}
-      email={data?.newEmail}
-      onSubmit={onOtpSubmit}
-      onRetry={RouterController.goBack}
-      codeExpiry={10}
-      retryLabel="Something wrong?"
-      retryDisabledButtonLabel="Try again"
-      retryButtonLabel="Try again"
-    />
-  );
-}

package/src/views/w3m-update-email-wallet-view/index.tsx

@@ -1,96 +0,0 @@
-import { useState } from 'react';
-import { Platform } from 'react-native';
-import {
-  ConnectorController,
-  CoreHelperUtil,
-  RouterController,
-  SnackController,
-  EventsController,
-  type AppKitFrameProvider
-} from '@reown/appkit-core-react-native';
-import { Button, EmailInput, FlexView, Spacing, Text } from '@reown/appkit-ui-react-native';
-import { useKeyboard } from '../../hooks/useKeyboard';
-
-import styles from './styles';
-
-export function UpdateEmailWalletView() {
-  const { data } = RouterController.state;
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-  const [email, setEmail] = useState(data?.email || '');
-  const [isValidNewEmail, setIsValidNewEmail] = useState(false);
-  const authConnector = ConnectorController.getAuthConnector();
-  const { keyboardShown, keyboardHeight } = useKeyboard();
-  const paddingBottom = Platform.select({
-    android: keyboardShown ? keyboardHeight + Spacing.l : Spacing.l,
-    default: Spacing.l
-  });
-
-  const onChangeText = (value: string) => {
-    setIsValidNewEmail(data?.email !== value && CoreHelperUtil.isValidEmail(value));
-    setEmail(value);
-    setError('');
-  };
-
-  const onEmailSubmit = async (value: string) => {
-    if (!authConnector) return;
-
-    const provider = authConnector.provider as AppKitFrameProvider;
-    setLoading(true);
-    setError('');
-
-    try {
-      const response = await provider.updateEmail({ email: value });
-      EventsController.sendEvent({ type: 'track', event: 'EMAIL_EDIT' });
-      if (response.action === 'VERIFY_SECONDARY_OTP') {
-        RouterController.push('UpdateEmailSecondaryOtp', { email: data?.email, newEmail: value });
-      } else {
-        RouterController.push('UpdateEmailPrimaryOtp', { email: data?.email, newEmail: value });
-      }
-    } catch (e) {
-      const parsedError = CoreHelperUtil.parseError(e);
-      if (parsedError?.includes('Invalid email')) {
-        setError('Invalid email. Try again.');
-      } else {
-        SnackController.showError(parsedError);
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <FlexView padding={['l', 's', '0', 's']} style={{ paddingBottom }}>
-      <EmailInput
-        initialValue={data?.email}
-        onSubmit={onEmailSubmit}
-        submitEnabled={isValidNewEmail}
-        onChangeText={onChangeText}
-        loading={loading}
-        errorMessage={error}
-        style={styles.emailInput}
-        autoFocus
-      />
-      <FlexView
-        flexDirection="row"
-        justifyContent="center"
-        alignItems="center"
-        margin={['0', 'xs', '0', 'xs']}
-      >
-        <Button onPress={RouterController.goBack} variant="shade" style={styles.cancelButton}>
-          <Text variant="paragraph-600" color="fg-100">
-            Cancel
-          </Text>
-        </Button>
-        <Button
-          onPress={() => onEmailSubmit(email)}
-          variant="fill"
-          style={styles.saveButton}
-          disabled={loading || !isValidNewEmail}
-        >
-          Save
-        </Button>
-      </FlexView>
-    </FlexView>
-  );
-}