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

package/src/partials/w3m-connecting-body/index.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+import { FlexView, Spacing, Text } from '@reown/appkit-ui-react-native';
+
+export * from './utils';
+
+export interface ConnectingBodyProps {
+  title: string;
+  description?: string;
+}
+
+export function ConnectingBody({ title, description }: ConnectingBodyProps) {
+  return (
+    <FlexView padding={['3xs', '2xl', '0', '2xl']} alignItems="center" style={styles.textContainer}>
+      <Text variant="paragraph-500">{title}</Text>
+      {description && (
+        <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
+          {description}
+        </Text>
+      )}
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  textContainer: {
+    marginVertical: Spacing.xs
+  },
+  descriptionText: {
+    marginTop: Spacing.xs,
+    marginHorizontal: Spacing['3xl']
+  }
+});

package/src/partials/w3m-connecting-body/utils.ts

@@ -0,0 +1,34 @@
+export type BodyErrorType = 'not_installed' | 'default' | 'declined' | undefined;
+
+interface Props {
+  walletName?: string;
+  declined?: boolean;
+  errorType?: BodyErrorType;
+  isWeb?: boolean;
+}
+
+export const getMessage = ({ walletName, declined, errorType, isWeb }: Props) => {
+  if (declined || errorType === 'declined') {
+    return {
+      title: 'Connection declined',
+      description: 'Connection can be declined if a previous request is still active'
+    };
+  }
+
+  switch (errorType) {
+    case 'not_installed':
+      return { title: 'App not installed' };
+    case 'default':
+      return {
+        title: 'Connection error',
+        description: 'There was an unexpected connection error.'
+      };
+    default:
+      return {
+        title: `Continue in ${walletName ?? 'Wallet'}`,
+        description: isWeb
+          ? 'Open and continue in a browser tab'
+          : 'Accept connection request in the wallet'
+      };
+  }
+};

package/src/partials/w3m-connecting-header/index.tsx

@@ -0,0 +1,53 @@
+import type { Platform } from '@reown/appkit-core-react-native';
+import { FlexView, Tabs, type IconType } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export interface ConnectingHeaderProps {
+  platforms: Platform[];
+  onSelectPlatform: (platform: Platform) => void;
+}
+
+interface Tab {
+  label: string;
+  icon: IconType;
+  platform: Platform;
+}
+
+export function ConnectingHeader({ platforms, onSelectPlatform }: ConnectingHeaderProps) {
+  const generateTabs = () => {
+    const tabs = platforms
+      .map(platform => {
+        if (platform === 'mobile') {
+          return { label: 'Mobile', icon: 'mobile', platform: 'mobile' } as const;
+        } else if (platform === 'web') {
+          return { label: 'Web', icon: 'browser', platform: 'web' } as const;
+        } else {
+          return undefined;
+        }
+      })
+      .filter(Boolean) as Tab[];
+
+    return tabs;
+  };
+
+  const onTabChange = (index: number) => {
+    const platform = platforms[index];
+    if (platform) {
+      onSelectPlatform(platform);
+    }
+  };
+
+  const tabs = generateTabs();
+
+  return (
+    <FlexView alignItems="center" padding={['xs', '0', '0', '0']}>
+      <Tabs tabs={tabs} onTabChange={onTabChange} style={styles.tab} />
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  tab: {
+    maxWidth: '50%'
+  }
+});

package/src/partials/w3m-connecting-mobile/components/StoreLink.tsx

@@ -0,0 +1,38 @@
+import { ActionEntry, Button, Spacing, Text } from '@reown/appkit-ui-react-native';
+import { StyleSheet } from 'react-native';
+
+export interface StoreLinkProps {
+  visible: boolean;
+  walletName?: string;
+  onPress: () => void;
+}
+
+export function StoreLink({ visible, walletName = 'Wallet', onPress }: StoreLinkProps) {
+  if (!visible) return null;
+
+  return (
+    <ActionEntry style={styles.storeButton}>
+      <Text numberOfLines={1} variant="paragraph-500" color="fg-200">
+        {`Don't have ${walletName}?`}
+      </Text>
+      <Button
+        variant="accent"
+        iconRight="chevronRightSmall"
+        onPress={onPress}
+        size="sm"
+        hitSlop={20}
+      >
+        Get
+      </Button>
+    </ActionEntry>
+  );
+}
+
+const styles = StyleSheet.create({
+  storeButton: {
+    justifyContent: 'space-between',
+    paddingHorizontal: Spacing.l,
+    marginHorizontal: Spacing.xl,
+    marginTop: Spacing.l
+  }
+});

package/src/partials/w3m-connecting-mobile/index.tsx

@@ -0,0 +1,158 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect, useState } from 'react';
+import { Platform, ScrollView } from 'react-native';
+import {
+  RouterController,
+  ApiController,
+  AssetUtil,
+  ConnectionController,
+  CoreHelperUtil,
+  OptionsController,
+  EventsController,
+  ConstantsUtil
+} from '@reown/appkit-core-react-native';
+import {
+  Button,
+  FlexView,
+  LoadingThumbnail,
+  WalletImage,
+  Link,
+  IconBox
+} from '@reown/appkit-ui-react-native';
+
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import { UiUtil } from '../../utils/UiUtil';
+import { StoreLink } from './components/StoreLink';
+import { ConnectingBody, getMessage, type BodyErrorType } from '../w3m-connecting-body';
+import styles from './styles';
+
+interface Props {
+  onRetry: () => void;
+  onCopyUri: (uri?: string) => void;
+  isInstalled?: boolean;
+}
+
+export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
+  const { data } = RouterController.state;
+  const { maxWidth: width } = useCustomDimensions();
+  const { wcUri, wcError } = useSnapshot(ConnectionController.state);
+  const [errorType, setErrorType] = useState<BodyErrorType>();
+  const showCopy =
+    OptionsController.isClipboardAvailable() &&
+    errorType !== 'not_installed' &&
+    !CoreHelperUtil.isLinkModeURL(wcUri);
+
+  const showRetry = errorType !== 'not_installed';
+  const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType, declined: wcError });
+
+  const storeUrl = Platform.select({
+    ios: data?.wallet?.app_store,
+    android: data?.wallet?.play_store
+  });
+
+  const onRetryPress = () => {
+    setErrorType(undefined);
+    ConnectionController.setWcError(false);
+    onRetry?.();
+  };
+
+  const onStorePress = () => {
+    if (storeUrl) {
+      CoreHelperUtil.openLink(storeUrl);
+    }
+  };
+
+  const onConnect = useCallback(async () => {
+    try {
+      const { name, mobile_link } = data?.wallet ?? {};
+      if (name && mobile_link && wcUri) {
+        const { redirect, href } = CoreHelperUtil.formatNativeUrl(mobile_link, wcUri);
+        const wcLinking = { name, href };
+        ConnectionController.setWcLinking(wcLinking);
+        ConnectionController.setPressedWallet(data?.wallet);
+        await CoreHelperUtil.openLink(redirect);
+        await ConnectionController.state.wcPromise;
+        UiUtil.storeConnectedWallet(wcLinking, data?.wallet);
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'CONNECT_SUCCESS',
+          properties: {
+            method: 'mobile',
+            name: data?.wallet?.name ?? 'Unknown',
+            explorer_id: data?.wallet?.id
+          }
+        });
+      }
+    } catch (error: any) {
+      if (error.message.includes(ConstantsUtil.LINKING_ERROR)) {
+        setErrorType('not_installed');
+      } else {
+        setErrorType('default');
+      }
+    }
+  }, [wcUri, data]);
+
+  useEffect(() => {
+    if (wcUri) {
+      onConnect();
+    }
+  }, [wcUri, 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 || wcError}>
+          <WalletImage
+            size="xl"
+            imageSrc={AssetUtil.getWalletImage(RouterController.state.data?.wallet)}
+            imageHeaders={ApiController._getApiHeaders()}
+          />
+          {wcError && (
+            <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} />
+        {showRetry && (
+          <Button
+            size="sm"
+            variant="accent"
+            iconLeft="refresh"
+            style={styles.retryButton}
+            iconStyle={styles.retryIcon}
+            onPress={onRetryPress}
+          >
+            Try again
+          </Button>
+        )}
+      </FlexView>
+      {showCopy && (
+        <Link
+          iconLeft="copySmall"
+          color="fg-200"
+          style={styles.copyButton}
+          onPress={() => onCopyUri(wcUri)}
+        >
+          Copy link
+        </Link>
+      )}
+      <StoreLink
+        visible={!isInstalled && !!storeUrl}
+        walletName={data?.wallet?.name}
+        onPress={onStorePress}
+      />
+    </ScrollView>
+  );
+}

package/src/partials/w3m-connecting-mobile/styles.ts

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

package/src/partials/w3m-connecting-qrcode/index.tsx

@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+import { useSnapshot } from 'valtio';
+import {
+  AssetUtil,
+  ConnectionController,
+  EventsController,
+  OptionsController,
+  SnackController
+} from '@reown/appkit-core-react-native';
+import { FlexView, Link, QrCode, Text, Spacing } from '@reown/appkit-ui-react-native';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import styles from './styles';
+
+export function ConnectingQrCode() {
+  const { wcUri } = useSnapshot(ConnectionController.state);
+  const showCopy = OptionsController.isClipboardAvailable();
+  const { maxWidth: windowSize, isPortrait } = useCustomDimensions();
+  const qrSize = (windowSize - Spacing.xl * 2) / (isPortrait ? 1 : 1.5);
+
+  const onCopyAddress = () => {
+    if (ConnectionController.state.wcUri) {
+      OptionsController.copyToClipboard(ConnectionController.state.wcUri);
+      SnackController.showSuccess('Link copied');
+    }
+  };
+
+  const onConnect = async () => {
+    await ConnectionController.state.wcPromise;
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CONNECT_SUCCESS',
+      properties: {
+        method: 'qrcode',
+        name: 'WalletConnect'
+      }
+    });
+
+    //TODO: check this
+    const url = AssetUtil.getConnectorImage(ConstantsUtil.WALLET_CONNECT_IMAGE_ID);
+    ConnectionController.setConnectedWalletImageUrl(url);
+  };
+
+  useEffect(() => {
+    if (wcUri) {
+      onConnect();
+    }
+  }, [wcUri]);
+
+  return (
+    <FlexView
+      alignItems="center"
+      justifyContent="center"
+      flexDirection={isPortrait ? 'column' : 'row'}
+      padding={['xl', 'xl', '2xl', 'xl']}
+    >
+      <QrCode size={qrSize} uri={wcUri} testID="qr-code" />
+      <FlexView alignItems="center" margin="m">
+        <Text variant="paragraph-500">Scan this QR code with your phone</Text>
+        {showCopy && (
+          <Link
+            iconLeft="copySmall"
+            color="fg-200"
+            style={styles.copyButton}
+            onPress={onCopyAddress}
+            testID="copy-link"
+          >
+            Copy link
+          </Link>
+        )}
+      </FlexView>
+    </FlexView>
+  );
+}

package/src/partials/w3m-connecting-qrcode/styles.ts

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

package/src/partials/w3m-connecting-web/index.tsx

@@ -0,0 +1,111 @@
+import { useSnapshot } from 'valtio';
+import { useCallback } from 'react';
+import { Linking, ScrollView } from 'react-native';
+import {
+  RouterController,
+  ApiController,
+  AssetUtil,
+  ConnectionController,
+  CoreHelperUtil,
+  OptionsController,
+  EventsController
+} from '@reown/appkit-core-react-native';
+import {
+  Button,
+  FlexView,
+  LoadingThumbnail,
+  WalletImage,
+  Link,
+  IconBox
+} from '@reown/appkit-ui-react-native';
+
+import { UiUtil } from '../../utils/UiUtil';
+import { ConnectingBody, getMessage } from '../w3m-connecting-body';
+import styles from './styles';
+
+interface ConnectingWebProps {
+  onCopyUri: (uri?: string) => void;
+}
+
+export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
+  const { data } = RouterController.state;
+  const { wcUri, wcError } = useSnapshot(ConnectionController.state);
+  const showCopy = OptionsController.isClipboardAvailable();
+  const bodyMessage = getMessage({
+    walletName: data?.wallet?.name,
+    declined: wcError,
+    isWeb: true
+  });
+
+  const onConnect = useCallback(async () => {
+    try {
+      const { name, webapp_link } = data?.wallet ?? {};
+      if (name && webapp_link && wcUri) {
+        ConnectionController.setWcError(false);
+        const { redirect, href } = CoreHelperUtil.formatUniversalUrl(webapp_link, wcUri);
+        const wcLinking = { name, href };
+        ConnectionController.setWcLinking(wcLinking);
+        ConnectionController.setPressedWallet(data?.wallet);
+        await Linking.openURL(redirect);
+        await ConnectionController.state.wcPromise;
+
+        UiUtil.storeConnectedWallet(wcLinking, data?.wallet);
+
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'CONNECT_SUCCESS',
+          properties: {
+            method: 'web',
+            name: data?.wallet?.name ?? 'Unknown',
+            explorer_id: data?.wallet?.id
+          }
+        });
+      }
+    } catch {}
+  }, [data?.wallet, wcUri]);
+
+  return (
+    <ScrollView bounces={false} fadingEdgeLength={20}>
+      <FlexView alignItems="center" padding={['2xl', 'm', '3xl', 'm']}>
+        <LoadingThumbnail paused={wcError}>
+          <WalletImage
+            size="xl"
+            imageSrc={AssetUtil.getWalletImage(data?.wallet)}
+            imageHeaders={ApiController._getApiHeaders()}
+          />
+          {wcError && (
+            <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} />
+        <Button
+          size="sm"
+          variant="accent"
+          iconRight="externalLink"
+          style={styles.openButton}
+          onPress={onConnect}
+        >
+          Open
+        </Button>
+        {showCopy && (
+          <Link
+            iconLeft="copySmall"
+            color="fg-200"
+            style={styles.copyButton}
+            onPress={() => onCopyUri(wcUri)}
+          >
+            Copy link
+          </Link>
+        )}
+      </FlexView>
+    </ScrollView>
+  );
+}

package/src/partials/w3m-connecting-web/styles.ts

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

package/src/partials/w3m-header/index.tsx

@@ -0,0 +1,121 @@
+import { useSnapshot } from 'valtio';
+import {
+  RouterController,
+  ModalController,
+  EventsController,
+  type RouterControllerState
+} from '@reown/appkit-core-react-native';
+import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
+import { StringUtil } from '@reown/appkit-common-react-native';
+
+import styles from './styles';
+
+export function Header() {
+  const { data, view } = useSnapshot(RouterController.state);
+  const onHelpPress = () => {
+    RouterController.push('WhatIsAWallet');
+    EventsController.sendEvent({ type: 'track', event: 'CLICK_WALLET_HELP' });
+  };
+
+  const headings = (_data: RouterControllerState['data'], _view: RouterControllerState['view']) => {
+    const walletName = _data?.wallet?.name;
+    const networkName = _data?.network?.name;
+    const socialName = _data?.socialProvider
+      ? StringUtil.capitalize(_data?.socialProvider)
+      : undefined;
+
+    return {
+      Account: undefined,
+      AccountDefault: undefined,
+      AllWallets: 'All wallets',
+      Connect: 'Connect wallet',
+      ConnectSocials: 'All socials',
+      ConnectingExternal: walletName ?? 'Connect wallet',
+      ConnectingSiwe: undefined,
+      ConnectingSocial: socialName ?? 'Connecting Social',
+      ConnectingWalletConnect: walletName ?? 'WalletConnect',
+      GetWallet: 'Get a wallet',
+      Networks: 'Select network',
+      OnRamp: undefined,
+      OnRampCheckout: 'Checkout',
+      OnRampSettings: 'Preferences',
+      OnRampLoading: undefined,
+      OnRampTransaction: ' ',
+      SwitchNetwork: networkName ?? 'Switch network',
+      Swap: 'Swap',
+      SwapPreview: 'Review swap',
+      Transactions: 'Activity',
+      UnsupportedChain: 'Switch network',
+      UpgradeEmailWallet: 'Upgrade wallet',
+      WalletCompatibleNetworks: 'Compatible networks',
+      WalletReceive: 'Receive',
+      WalletSend: 'Send',
+      WalletSendPreview: 'Review send',
+      WalletSendSelectToken: 'Select token',
+      WhatIsANetwork: 'What is a network?',
+      WhatIsAWallet: 'What is a wallet?'
+    }[_view];
+  };
+
+  const noCloseViews = ['OnRampSettings'];
+  const showClose = !noCloseViews.includes(view);
+  const header = headings(data, view);
+
+  const checkSocial = () => {
+    if (RouterController.state.view === 'ConnectingSocial') {
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SOCIAL_LOGIN_CANCELED',
+        properties: { provider: RouterController.state.data?.socialProvider! }
+      });
+    }
+  };
+
+  const handleGoBack = () => {
+    checkSocial();
+    RouterController.goBack();
+  };
+
+  const handleClose = () => {
+    checkSocial();
+    ModalController.close();
+  };
+
+  const dynamicButtonTemplate = () => {
+    const showBack = RouterController.state.history.length > 1;
+    const showHelp = RouterController.state.view === 'Connect';
+
+    if (showHelp) {
+      return <IconLink icon="helpCircle" size="md" onPress={onHelpPress} testID="help-button" />;
+    }
+
+    if (showBack) {
+      return <IconLink icon="chevronLeft" size="md" onPress={handleGoBack} testID="button-back" />;
+    }
+
+    return <FlexView style={styles.iconPlaceholder} />;
+  };
+
+  if (!header) return null;
+
+  const bottomPadding = header === ' ' ? '0' : '4xs';
+
+  return (
+    <FlexView
+      justifyContent="space-between"
+      flexDirection="row"
+      alignItems="center"
+      padding={['l', 'xl', bottomPadding, 'xl']}
+    >
+      {dynamicButtonTemplate()}
+      <Text variant="paragraph-600" numberOfLines={1} testID="header-text">
+        {header}
+      </Text>
+      {showClose ? (
+        <IconLink icon="close" size="md" onPress={handleClose} testID="header-close" />
+      ) : (
+        <FlexView style={styles.iconPlaceholder} />
+      )}
+    </FlexView>
+  );
+}

package/src/partials/w3m-header/styles.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  iconPlaceholder: {
+    height: 32,
+    width: 32
+  }
+});