@reown/appkit-react-native 2.0.0 → 2.0.1

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

@@ -1,44 +0,0 @@
-import { useSnapshot } from 'valtio';
-import {
-  ApiController,
-  AssetUtil,
-  type WcWallet,
-  ConnectionController
-} from '@reown/appkit-core-react-native';
-import { ListWallet } from '@reown/appkit-ui-react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-
-interface Props {
-  itemStyle: StyleProp<ViewStyle>;
-  onWalletPress: (wallet: WcWallet, installed: boolean) => void;
-  isWalletConnectEnabled: boolean;
-}
-
-export function RecentWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled }: Props) {
-  const installed = ApiController.state.installed;
-  const { recentWallets } = useSnapshot(ConnectionController.state);
-  const imageHeaders = ApiController._getApiHeaders();
-  const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
-
-  if (!isWalletConnectEnabled || !recentWallets?.length) {
-    return null;
-  }
-
-  return recentWallets.slice(0, RECENT_COUNT).map(wallet => {
-    const isInstalled = !!installed.find(installedWallet => installedWallet.id === wallet.id);
-
-    return (
-      <ListWallet
-        key={wallet?.id}
-        imageSrc={AssetUtil.getWalletImage(wallet)}
-        imageHeaders={imageHeaders}
-        name={wallet?.name ?? 'Unknown'}
-        onPress={() => onWalletPress(wallet, isInstalled)}
-        tagLabel="Recent"
-        tagVariant="shade"
-        style={itemStyle}
-        installed={isInstalled}
-      />
-    );
-  });
-}

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-connect-view/utils.ts

@@ -1,14 +0,0 @@
-import type { WcWallet } from '@reown/appkit-core-react-native';
-
-export const filterOutRecentWallets = (
-  recentWallets?: WcWallet[],
-  wallets?: WcWallet[],
-  resentCount?: number
-) => {
-  const recentIds = recentWallets?.slice(0, resentCount ?? 1).map(wallet => wallet.id);
-  if (!recentIds?.length) return wallets ?? [];
-
-  const filtered = wallets?.filter(wallet => !recentIds.includes(wallet.id)) || [];
-
-  return filtered;
-};

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-swap-select-token-view/index.tsx

@@ -1,137 +0,0 @@
-import { useState } from 'react';
-import { useSnapshot } from 'valtio';
-import { ScrollView, SectionList, type SectionListData } from 'react-native';
-import {
-  FlexView,
-  InputText,
-  ListToken,
-  ListTokenTotalHeight,
-  Separator,
-  Text,
-  TokenButton,
-  useTheme
-} from '@reown/appkit-ui-react-native';
-
-import {
-  AssetUtil,
-  ConnectionsController,
-  RouterController,
-  SwapController,
-  type SwapTokenWithBalance
-} from '@reown/appkit-core-react-native';
-
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { Placeholder } from '../../partials/w3m-placeholder';
-import styles from './styles';
-import { createSections } from './utils';
-
-export function SwapSelectTokenView() {
-  const { padding } = useCustomDimensions();
-  const Theme = useTheme();
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const { sourceToken, suggestedTokens } = useSnapshot(SwapController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
-  const [tokenSearch, setTokenSearch] = useState<string>('');
-  const isSourceToken = RouterController.state.data?.swapTarget === 'sourceToken';
-
-  const [filteredTokens, setFilteredTokens] = useState(createSections(isSourceToken, tokenSearch));
-  const suggestedList = suggestedTokens
-    ?.filter(token => token.address !== SwapController.state.sourceToken?.address)
-    .slice(0, 8);
-
-  const onSearchChange = (value: string) => {
-    setTokenSearch(value);
-    setFilteredTokens(createSections(isSourceToken, value));
-  };
-
-  const onTokenPress = (token: SwapTokenWithBalance) => {
-    if (isSourceToken) {
-      SwapController.setSourceToken(token);
-    } else {
-      SwapController.setToToken(token);
-      if (SwapController.state.sourceToken && SwapController.state.sourceTokenAmount) {
-        SwapController.swapTokens();
-      }
-    }
-    RouterController.goBack();
-  };
-
-  return (
-    <FlexView
-      margin={['l', '0', '2xl', '0']}
-      style={[styles.container, { paddingHorizontal: padding }]}
-    >
-      <FlexView>
-        <InputText
-          value={tokenSearch}
-          icon="search"
-          placeholder="Search token"
-          onChangeText={onSearchChange}
-          clearButtonMode="while-editing"
-          style={styles.input}
-        />
-        {!isSourceToken && (
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            bounces={false}
-            fadingEdgeLength={20}
-            style={styles.suggestedList}
-            contentContainerStyle={styles.suggestedListContent}
-          >
-            {suggestedList?.map((token, index) => (
-              <TokenButton
-                key={token.name}
-                text={token.symbol}
-                imageUrl={token.logoUri}
-                onPress={() => onTokenPress(token)}
-                style={index !== suggestedList.length - 1 ? styles.suggestedToken : undefined}
-              />
-            ))}
-          </ScrollView>
-        )}
-      </FlexView>
-      <Separator style={styles.suggestedSeparator} color="gray-glass-020" />
-      <SectionList
-        sections={filteredTokens as SectionListData<SwapTokenWithBalance>[]}
-        bounces={false}
-        fadingEdgeLength={20}
-        contentContainerStyle={styles.tokenList}
-        renderSectionHeader={({ section: { title } }) => (
-          <Text
-            variant="paragraph-500"
-            color="fg-200"
-            style={[{ backgroundColor: Theme['bg-100'] }, styles.title]}
-          >
-            {title}
-          </Text>
-        )}
-        ListEmptyComponent={
-          <Placeholder
-            icon="coinPlaceholder"
-            title="No tokens found"
-            description="Your tokens will appear here"
-          />
-        }
-        getItemLayout={(_, index) => ({
-          length: ListTokenTotalHeight,
-          offset: ListTokenTotalHeight * index,
-          index
-        })}
-        renderItem={({ item }) => (
-          <ListToken
-            key={item.name}
-            name={item.name}
-            imageSrc={item.logoUri}
-            networkSrc={networkImage}
-            value={item.value}
-            amount={item.quantity.numeric}
-            currency={item.symbol}
-            onPress={() => onTokenPress(item)}
-            disabled={item.address === sourceToken?.address}
-          />
-        )}
-      />
-    </FlexView>
-  );
-}

package/src/views/w3m-swap-select-token-view/utils.ts

@@ -1,33 +0,0 @@
-import { SwapController, type SwapTokenWithBalance } from '@reown/appkit-core-react-native';
-
-export function filterTokens(tokens: SwapTokenWithBalance[], searchValue?: string) {
-  if (!searchValue) {
-    return tokens;
-  }
-
-  return tokens.filter(
-    token =>
-      token.name.toLowerCase().includes(searchValue.toLowerCase()) ||
-      token.symbol.toLowerCase().includes(searchValue.toLowerCase())
-  );
-}
-
-export function createSections(isSourceToken: boolean, searchValue: string) {
-  const myTokensFiltered = filterTokens(
-    SwapController.state.myTokensWithBalance ?? [],
-    searchValue
-  );
-  const popularFiltered = isSourceToken
-    ? []
-    : filterTokens(SwapController.getFilteredPopularTokens() ?? [], searchValue);
-
-  const sections = [];
-  if (myTokensFiltered.length > 0) {
-    sections.push({ title: 'Your tokens', data: myTokensFiltered });
-  }
-  if (popularFiltered.length > 0) {
-    sections.push({ title: 'Popular tokens', data: popularFiltered });
-  }
-
-  return sections;
-}