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

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

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

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

@@ -0,0 +1,75 @@
+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-get-wallet-view/index.tsx

@@ -0,0 +1,50 @@
+import { Linking, Platform, ScrollView } from 'react-native';
+import { FlexView, ListWallet } from '@reown/appkit-ui-react-native';
+import { ApiController, AssetUtil, type WcWallet } from '@reown/appkit-core-react-native';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import styles from './styles';
+
+export function GetWalletView() {
+  const { padding } = useCustomDimensions();
+  const imageHeaders = ApiController._getApiHeaders();
+
+  const onWalletPress = (wallet: WcWallet) => {
+    const storeUrl =
+      Platform.select({ ios: wallet.app_store, android: wallet.play_store }) || wallet.homepage;
+    if (storeUrl) {
+      Linking.openURL(storeUrl);
+    }
+  };
+
+  const listTemplate = () => {
+    return ApiController.state.recommended.map(wallet => (
+      <ListWallet
+        key={wallet.id}
+        name={wallet.name}
+        imageSrc={AssetUtil.getWalletImage(wallet)}
+        imageHeaders={imageHeaders}
+        onPress={() => onWalletPress(wallet)}
+        style={styles.item}
+      />
+    ));
+  };
+
+  return (
+    <ScrollView
+      bounces={false}
+      style={{ paddingHorizontal: padding }}
+      fadingEdgeLength={20}
+      testID="get-a-wallet-view"
+    >
+      <FlexView padding={['s', 's', '3xl', 's']}>
+        {listTemplate()}
+        <ListWallet
+          name="Explore all"
+          showAllWallets
+          icon="externalLink"
+          onPress={() => Linking.openURL('https://walletconnect.com/explorer?type=wallet')}
+        />
+      </FlexView>
+    </ScrollView>
+  );
+}

package/src/views/w3m-get-wallet-view/styles.ts

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

package/src/views/w3m-network-switch-view/index.tsx

@@ -0,0 +1,140 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useSnapshot } from 'valtio';
+import { useEffect, useState } from 'react';
+import {
+  ApiController,
+  AssetUtil,
+  ConnectionController,
+  ConnectionsController,
+  ConnectorController,
+  EventsController,
+  NetworkController,
+  RouterController,
+  RouterUtil
+} from '@reown/appkit-core-react-native';
+import {
+  Button,
+  FlexView,
+  IconBox,
+  LoadingHexagon,
+  NetworkImage,
+  Text
+} from '@reown/appkit-ui-react-native';
+import styles from './styles';
+
+export function NetworkSwitchView() {
+  const { data } = useSnapshot(RouterController.state);
+  const { recentWallets } = useSnapshot(ConnectionController.state);
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const isAuthConnected = ConnectorController.state.connectedConnector === 'AUTH';
+  const [error, setError] = useState<boolean>(false);
+  const [showRetry, setShowRetry] = useState<boolean>(false);
+  const network = data?.network!;
+  const wallet = recentWallets?.[0];
+
+  const onSwitchNetwork = async () => {
+    try {
+      setError(false);
+      //TODO: change to appkit switchNetwork
+      await NetworkController.switchActiveNetwork(network);
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SWITCH_NETWORK',
+        properties: {
+          network: network.id
+        }
+      });
+    } catch {
+      setError(true);
+      setShowRetry(true);
+    }
+  };
+
+  useEffect(() => {
+    onSwitchNetwork();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    // Go back if network is already switched
+    if (activeNetwork?.id === network?.id) {
+      RouterUtil.navigateAfterNetworkSwitch();
+    }
+  }, [activeNetwork?.id, network?.id]);
+
+  const retryTemplate = () => {
+    if (!showRetry) return null;
+
+    return (
+      <Button
+        size="sm"
+        variant="accent"
+        iconLeft="refresh"
+        style={styles.retryButton}
+        iconStyle={styles.retryIcon}
+        onPress={onSwitchNetwork}
+      >
+        Try again
+      </Button>
+    );
+  };
+
+  const textTemplate = () => {
+    const walletName = wallet?.name ?? 'wallet';
+    if (error) {
+      return (
+        <>
+          <Text variant="paragraph-500" style={styles.text}>
+            Switch declined
+          </Text>
+          <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
+            Switch can be declined if chain is not supported by a wallet or previous request is
+            still active
+          </Text>
+        </>
+      );
+    }
+
+    if (isAuthConnected) {
+      return (
+        <Text variant="paragraph-500" style={styles.text}>
+          Switching to {network.name} network
+        </Text>
+      );
+    }
+
+    return (
+      <>
+        <Text variant="paragraph-500" style={styles.text}>{`Approve in ${walletName}`}</Text>
+        <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
+          Accept switch request in your wallet
+        </Text>
+      </>
+    );
+  };
+
+  return (
+    <FlexView alignItems="center" padding={['2xl', 's', '4xl', 's']}>
+      <LoadingHexagon paused={error}>
+        <NetworkImage
+          imageSrc={AssetUtil.getNetworkImage(network?.id)}
+          imageHeaders={ApiController._getApiHeaders()}
+          size="lg"
+        />
+        {error && (
+          <IconBox
+            icon="close"
+            border
+            background
+            backgroundColor="icon-box-bg-error-100"
+            size="sm"
+            iconColor="error-100"
+            style={styles.errorIcon}
+          />
+        )}
+      </LoadingHexagon>
+      {textTemplate()}
+      {retryTemplate()}
+    </FlexView>
+  );
+}

package/src/views/w3m-network-switch-view/styles.ts

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

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

@@ -0,0 +1,107 @@
+import { ScrollView, View } from 'react-native';
+import {
+  CardSelect,
+  CardSelectWidth,
+  FlexView,
+  Link,
+  Separator,
+  Spacing,
+  Text
+} from '@reown/appkit-ui-react-native';
+import {
+  ApiController,
+  NetworkController,
+  RouterController,
+  EventsController,
+  ConnectionsController,
+  AssetUtil
+} from '@reown/appkit-core-react-native';
+import type { AppKitNetwork } from '@reown/appkit-common-react-native';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import styles from './styles';
+import { useAppKit } from '../../AppKitContext';
+
+export function NetworksView() {
+  const { caipNetwork } = NetworkController.state;
+  const imageHeaders = ApiController._getApiHeaders();
+  const { maxWidth: width, padding } = useCustomDimensions();
+  const numColumns = 4;
+  const usableWidth = width - Spacing.xs * 2 - Spacing['4xs'];
+  const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns));
+  const itemGap = Math.abs(
+    Math.trunc((usableWidth - numColumns * CardSelectWidth) / numColumns) / 2
+  );
+  const { switchNetwork } = useAppKit();
+
+  const onHelpPress = () => {
+    RouterController.push('WhatIsANetwork');
+    EventsController.sendEvent({ type: 'track', event: 'CLICK_NETWORK_HELP' });
+  };
+
+  const networksTemplate = () => {
+    //TODO: should show requested networks disabled
+    // const networks = CoreHelperUtil.sortNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
+    const networks = ConnectionsController.getConnectedNetworks();
+
+    const onNetworkPress = async (network: AppKitNetwork) => {
+      await switchNetwork(network);
+      RouterController.goBack();
+    };
+
+    return networks.map(network => {
+      return (
+        <View
+          key={network.id}
+          style={[
+            styles.itemContainer,
+            {
+              width: itemWidth,
+              marginVertical: itemGap
+            }
+          ]}
+        >
+          <CardSelect
+            testID={`w3m-network-switch-${network.name ?? network.id}`}
+            name={network.name ?? 'Unknown'}
+            type="network"
+            imageSrc={AssetUtil.getNetworkImage(network.id)}
+            imageHeaders={imageHeaders}
+            // disabled={!supportsAllNetworks && !approvedCaipNetworkIds?.includes(network.caipNetworkId)}
+            selected={caipNetwork?.id === network.id}
+            onPress={() => onNetworkPress(network)}
+          />
+        </View>
+      );
+    });
+  };
+
+  return (
+    <>
+      <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+        <FlexView flexDirection="row" flexWrap="wrap" padding={['xs', 'xs', 's', 'xs']}>
+          {networksTemplate()}
+        </FlexView>
+      </ScrollView>
+      <Separator />
+      <FlexView
+        padding={['s', 's', '3xl', 's']}
+        alignItems="center"
+        alignSelf="center"
+        style={{ width }}
+      >
+        <Text variant="small-400" color="fg-300" center>
+          Your connected wallet may not support some of the networks available for this dApp
+        </Text>
+        <Link
+          size="sm"
+          iconLeft="helpCircle"
+          onPress={onHelpPress}
+          style={styles.helpButton}
+          testID="what-is-a-network-button"
+        >
+          What is a network?
+        </Link>
+      </FlexView>
+    </>
+  );
+}

package/src/views/w3m-networks-view/styles.ts

@@ -0,0 +1,12 @@
+import { Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  itemContainer: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  helpButton: {
+    marginTop: Spacing.s
+  }
+});