@reown/appkit-react-native 0.0.0-chore-bump-builder-20250728194329

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

@@ -0,0 +1,124 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect, useState } from 'react';
+import { ScrollView } from 'react-native';
+import {
+  RouterController,
+  ApiController,
+  EventsController,
+  ConnectionController,
+  AssetUtil
+} 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';
+import { useAppKit } from '../../AppKitContext';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { UiUtil } from '../../utils/UiUtil';
+
+export function ConnectingExternalView() {
+  const { data } = useSnapshot(RouterController.state);
+  const { connect } = useAppKit();
+  const { maxWidth: width } = useCustomDimensions();
+  const [errorType, setErrorType] = useState<BodyErrorType>();
+  const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType });
+
+  const onRetryPress = () => {
+    setErrorType(undefined);
+    onConnect();
+  };
+
+  const onConnect = useCallback(async () => {
+    try {
+      const wallet = RouterController.state.data?.wallet;
+      if (wallet) {
+        if (wallet.id === ConstantsUtil.PHANTOM_EXPLORER_ID) {
+          await connect('phantom');
+        } else if (wallet.id === ConstantsUtil.COINBASE_EXPLORER_ID) {
+          await connect('coinbase');
+        } else {
+          // All other wallets are handled by WalletConnect connector
+          return;
+        }
+        UiUtil.storeRecentWallet(wallet);
+        ConnectionController.setPressedWallet(wallet);
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'CONNECT_SUCCESS',
+          properties: {
+            name: wallet?.name ?? 'Unknown',
+            method: 'mobile',
+            explorer_id: 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' }
+      });
+    }
+  }, [connect]);
+
+  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.getWalletImage(data?.wallet)}
+            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-siwe-view/index.tsx

@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import {
+  Avatar,
+  Button,
+  DoubleImageLoader,
+  FlexView,
+  IconLink,
+  Text
+} from '@reown/appkit-ui-react-native';
+import {
+  AssetUtil,
+  ConnectionController,
+  ConnectionsController,
+  EventsController,
+  ModalController,
+  OptionsController,
+  RouterController,
+  SnackController
+} from '@reown/appkit-core-react-native';
+import { SIWEController } from '@reown/appkit-siwe-react-native';
+
+import { useAppKit } from '../../AppKitContext';
+import styles from './styles';
+
+export function ConnectingSiweView() {
+  const { disconnect } = useAppKit();
+  const { metadata } = useSnapshot(OptionsController.state);
+  const { connectedWalletImageUrl, pressedWallet } = useSnapshot(ConnectionController.state);
+  const { activeAddress } = useSnapshot(ConnectionsController.state);
+  const [isSigning, setIsSigning] = useState(false);
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
+
+  const dappName = metadata?.name || 'Dapp';
+  const dappIcon = metadata?.icons[0] || '';
+  const walletIcon = AssetUtil.getWalletImage(pressedWallet) || connectedWalletImageUrl;
+  const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
+  const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
+
+  const onSign = async () => {
+    setIsSigning(true);
+    EventsController.sendEvent({
+      event: 'CLICK_SIGN_SIWE_MESSAGE',
+      type: 'track',
+      properties: { network, isSmartAccount }
+    });
+    try {
+      const session = await SIWEController.signIn();
+
+      EventsController.sendEvent({
+        event: 'SIWE_AUTH_SUCCESS',
+        type: 'track',
+        properties: { network, isSmartAccount }
+      });
+
+      return session;
+    } catch (error) {
+      SnackController.showError('Signature declined');
+
+      SIWEController.setStatus('error');
+
+      return EventsController.sendEvent({
+        event: 'SIWE_AUTH_ERROR',
+        type: 'track',
+        properties: { network, isSmartAccount }
+      });
+    } finally {
+      setIsSigning(false);
+    }
+  };
+
+  const onCancel = async () => {
+    if (ConnectionsController.state.activeAddress) {
+      setIsDisconnecting(true);
+      await disconnect();
+      ModalController.close();
+      setIsDisconnecting(false);
+    } else {
+      RouterController.push('Connect');
+    }
+    EventsController.sendEvent({
+      event: 'CLICK_CANCEL_SIWE',
+      type: 'track',
+      properties: { network, isSmartAccount }
+    });
+  };
+
+  //TODO: Add profile image in Avatar
+  return (
+    <FlexView padding={['2xl', 's', '3xl', 's']}>
+      <IconLink
+        icon="close"
+        size="md"
+        onPress={onCancel}
+        testID="header-close"
+        style={styles.closeButton}
+      />
+      <Text variant="paragraph-600" numberOfLines={1} center>
+        Sign in
+      </Text>
+      <DoubleImageLoader
+        style={styles.logoContainer}
+        leftImage={dappIcon}
+        rightImage={walletIcon}
+        renderRightPlaceholder={() => (
+          <Avatar imageSrc={undefined} address={activeAddress} size={60} borderWidth={0} />
+        )}
+        rightItemStyle={!walletIcon && styles.walletAvatar}
+      />
+      <Text center variant="medium-600" color="fg-100" style={styles.title}>
+        {dappName} needs to connect to your wallet
+      </Text>
+      <Text center variant="small-400" color="fg-200" style={styles.subtitle}>
+        Sign this message to prove you own this wallet and proceed. Cancelling will disconnect you
+      </Text>
+      <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
+        <Button variant="shade" onPress={onCancel} style={styles.button} loading={isDisconnecting}>
+          Cancel
+        </Button>
+        <Button
+          variant="fill"
+          loading={isSigning}
+          disabled={isDisconnecting}
+          onPress={onSign}
+          style={styles.button}
+        >
+          Sign
+        </Button>
+      </FlexView>
+    </FlexView>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { BorderRadius, Spacing } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  logoContainer: {
+    marginTop: Spacing.xl,
+    marginBottom: Spacing.m
+  },
+  button: {
+    width: '48%'
+  },
+  title: {
+    marginHorizontal: '15%'
+  },
+  subtitle: {
+    marginHorizontal: '10%',
+    marginVertical: Spacing.l
+  },
+  closeButton: {
+    alignSelf: 'flex-end',
+    right: Spacing.xl,
+    top: Spacing.l,
+    position: 'absolute',
+    zIndex: 2
+  },
+  walletAvatar: {
+    borderRadius: BorderRadius.full
+  }
+});

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

@@ -0,0 +1,101 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  ConnectionController,
+  CoreHelperUtil,
+  EventsController,
+  RouterController,
+  SnackController
+} from '@reown/appkit-core-react-native';
+import { FlexView, LoadingThumbnail, IconBox, Logo, Text } from '@reown/appkit-ui-react-native';
+import { ConstantsUtil, StringUtil } from '@reown/appkit-common-react-native';
+
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { useAppKit } from '../../AppKitContext';
+import { UiUtil } from '../../utils/UiUtil';
+import styles from './styles';
+
+export function ConnectingSocialView() {
+  const { maxWidth: width } = useCustomDimensions();
+  const { connect } = useAppKit();
+  const { data } = useSnapshot(RouterController.state);
+  const { wcUri } = useSnapshot(ConnectionController.state);
+  const [error, setError] = useState(false);
+
+  const onConnect = useCallback(async () => {
+    try {
+      if (wcUri) {
+        const { redirect, href } = CoreHelperUtil.formatUniversalUrl(
+          ConstantsUtil.WEB_WALLET_URL,
+          wcUri,
+          RouterController.state.data?.socialProvider
+        );
+        const wcLinking = { name: 'Reown Wallet', href };
+        ConnectionController.setWcLinking(wcLinking);
+        await CoreHelperUtil.openLink(redirect);
+        await ConnectionController.state.wcPromise;
+        //todo: rename this. its not just UI
+        UiUtil.storeConnectedWallet(wcLinking);
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'SOCIAL_LOGIN_SUCCESS',
+          properties: { provider: RouterController.state.data?.socialProvider! }
+        });
+      }
+    } catch (e) {
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SOCIAL_LOGIN_ERROR',
+        properties: { provider: RouterController.state.data?.socialProvider! }
+      });
+      SnackController.showError('Something went wrong');
+      setError(true);
+    }
+  }, [wcUri]);
+
+  const initializeConnection = useCallback(async () => {
+    const connectPromise = connect('walletconnect');
+    ConnectionController.setWcPromise(connectPromise);
+  }, [connect]);
+
+  useEffect(() => {
+    initializeConnection();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (wcUri) {
+      onConnect();
+    }
+  }, [wcUri, onConnect]);
+
+  return (
+    <FlexView
+      alignItems="center"
+      alignSelf="center"
+      padding={['2xl', 'l', '3xl', 'l']}
+      style={{ width }}
+    >
+      <LoadingThumbnail paused={!!error}>
+        <Logo logo={data?.socialProvider ?? '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">
+        Continue with {StringUtil.capitalize(data?.socialProvider ?? 'Login')}
+      </Text>
+      <Text variant="small-400" color="fg-200">
+        Continue in your browser
+      </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,143 @@
+import { useSnapshot } from 'valtio';
+import { useEffect, useState } from 'react';
+import {
+  ConnectionController,
+  ConstantsUtil,
+  CoreHelperUtil,
+  RouterController,
+  SnackController,
+  type Platform,
+  OptionsController,
+  ApiController,
+  EventsController
+} from '@reown/appkit-core-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);
+
+        const connectPromise = connect('walletconnect', {
+          universalLink: routeData?.wallet?.link_mode ?? undefined
+        });
+        ConnectionController.setWcPromise(connectPromise);
+      }
+    } 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-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
+  }
+});