@reown/appkit-react-native 0.0.0-accounts-canary.1-20251023174733

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['s']
+  },
+  retryButton: {
+    marginTop: Spacing.m
+  },
+  retryIcon: {
+    transform: [{ rotateY: '180deg' }]
+  },
+  errorIcon: {
+    position: 'absolute',
+    bottom: 5,
+    right: 5,
+    zIndex: 2
+  }
+});

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

@@ -0,0 +1,105 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  WcController,
+  CoreHelperUtil,
+  EventsController,
+  RouterController,
+  SnackController,
+  LogController
+} from '@reown/appkit-core-react-native';
+import {
+  FlexView,
+  LoadingThumbnail,
+  IconBox,
+  Logo,
+  Text,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import { ConstantsUtil, StringUtil } from '@reown/appkit-common-react-native';
+
+import { useInternalAppKit } from '../../AppKitContext';
+import styles from './styles';
+import { ScrollView } from 'react-native';
+
+export function ConnectingSocialView() {
+  const { padding } = useCustomDimensions();
+  const { connect } = useInternalAppKit();
+  const { data } = useSnapshot(RouterController.state);
+  const { wcUri } = useSnapshot(WcController.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 };
+        WcController.setWcLinking(wcLinking);
+        await CoreHelperUtil.openLink(redirect);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking);
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'SOCIAL_LOGIN_SUCCESS',
+          properties: { provider: RouterController.state.data?.socialProvider! }
+        });
+      }
+    } catch (e) {
+      LogController.sendError(e, 'ConnectingSocialView.tsx', 'onConnect');
+      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();
+    WcController.setWcPromise(connectPromise);
+  }, [connect]);
+
+  useEffect(() => {
+    initializeConnection();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (wcUri) {
+      onConnect();
+    }
+  }, [wcUri, onConnect]);
+
+  return (
+    <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', 'xl', 'l']}>
+        <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}
+            />
+          ) : null}
+        </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>
+    </ScrollView>
+  );
+}

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,124 @@
+import { useSnapshot } from 'valtio';
+import { useEffect, useLayoutEffect, useState } from 'react';
+import { type Platform } from '@reown/appkit-common-react-native';
+import {
+  WcController,
+  ConstantsUtil,
+  CoreHelperUtil,
+  RouterController,
+  SnackController,
+  OptionsController,
+  ApiController,
+  EventsController,
+  LogController
+} from '@reown/appkit-core-react-native';
+import { useInternalAppKit } 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';
+
+export function ConnectingView() {
+  const { connect } = useInternalAppKit();
+  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());
+      WcController.clearUri();
+      initializeConnection(true);
+    } else {
+      SnackController.showError('Please wait a second before retrying');
+    }
+  };
+
+  const initializeConnection = async (retry = false) => {
+    try {
+      const { wcPairingExpiry } = WcController.state;
+      const { data: routeData } = RouterController.state;
+      if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
+        WcController.setWcError(false);
+
+        const connectPromise = connect({
+          wallet: routeData?.wallet
+        });
+        WcController.setWcPromise(connectPromise);
+      }
+    } catch (error) {
+      LogController.sendError(error, 'ConnectingView.tsx', 'initializeConnection');
+      WcController.setWcError(true);
+      WcController.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) => {
+    setPlatform(tab);
+  };
+
+  useLayoutEffect(() => {
+    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 (
+    <>
+      {platforms.length > 1 ? (
+        <ConnectingHeader platforms={platforms} onSelectPlatform={onSelectPlatform} />
+      ) : null}
+      {isQr ? (
+        <ConnectingQrCode />
+      ) : platform === 'mobile' ? (
+        <ConnectingMobile onRetry={onRetry} onCopyUri={onCopyUri} isInstalled={isInstalled} />
+      ) : platform === 'web' ? (
+        <ConnectingWeb onCopyUri={onCopyUri} />
+      ) : null}
+    </>
+  );
+}

package/src/views/w3m-get-wallet-view/index.tsx

@@ -0,0 +1,52 @@
+import { Linking, Platform, ScrollView } from 'react-native';
+import { FlexView, ListWallet, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { ApiController, AssetController, AssetUtil } from '@reown/appkit-core-react-native';
+import { type WcWallet } from '@reown/appkit-common-react-native';
+import styles from './styles';
+import { useSnapshot } from 'valtio';
+
+export function GetWalletView() {
+  const { walletImages } = useSnapshot(AssetController.state);
+  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, walletImages)}
+        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">
+        {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,106 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  ApiController,
+  AssetController,
+  AssetUtil,
+  LogController,
+  RouterController
+} from '@reown/appkit-core-react-native';
+import {
+  Button,
+  FlexView,
+  IconBox,
+  LoadingHexagon,
+  NetworkImage,
+  Text,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import { useInternalAppKit } from '../../AppKitContext';
+import styles from './styles';
+import { ScrollView } from 'react-native';
+
+export function NetworkSwitchView() {
+  const { switchNetwork, back } = useInternalAppKit();
+  const { padding } = useCustomDimensions();
+  const { data } = useSnapshot(RouterController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const [showRetry, setShowRetry] = useState<boolean>(false);
+  const [isError, setIsError] = useState<boolean>(false);
+  const networkImage = AssetUtil.getNetworkImage(data?.network, networkImages);
+
+  const onSwitchNetwork = useCallback(async () => {
+    try {
+      if (!RouterController.state.data?.network) return;
+      setIsError(false);
+      await switchNetwork(RouterController.state.data.network);
+      back();
+    } catch (error) {
+      LogController.sendError(error, 'NetworkSwitchView.tsx', 'onSwitchNetwork');
+      setIsError(true);
+      setShowRetry(true);
+    }
+  }, [switchNetwork, back]);
+
+  useEffect(() => {
+    onSwitchNetwork();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+      <FlexView alignItems="center" padding={['xl', 's', 's', 's']}>
+        <LoadingHexagon paused={isError}>
+          <NetworkImage
+            imageSrc={networkImage}
+            imageHeaders={ApiController._getApiHeaders()}
+            size="lg"
+          />
+          {isError ? (
+            <IconBox
+              icon="close"
+              border
+              background
+              backgroundColor="icon-box-bg-error-100"
+              size="sm"
+              iconColor="error-100"
+              style={styles.errorIcon}
+            />
+          ) : null}
+        </LoadingHexagon>
+        {isError ? (
+          <>
+            <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>
+          </>
+        ) : (
+          <>
+            <Text variant="paragraph-500" style={styles.text}>
+              Approve in your wallet
+            </Text>
+            <Text center variant="small-400" color="fg-200" style={styles.descriptionText}>
+              Accept the switch request in your wallet
+            </Text>
+          </>
+        )}
+        {showRetry ? (
+          <Button
+            size="sm"
+            variant="accent"
+            iconLeft="refresh"
+            style={styles.retryButton}
+            iconStyle={styles.retryIcon}
+            onPress={onSwitchNetwork}
+          >
+            Try again
+          </Button>
+        ) : null}
+      </FlexView>
+    </ScrollView>
+  );
+}

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,121 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { ScrollView, useWindowDimensions, View } from 'react-native';
+import {
+  CardSelect,
+  CardSelectWidth,
+  FlexView,
+  Link,
+  Separator,
+  Spacing,
+  Text,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
+import {
+  ApiController,
+  RouterController,
+  EventsController,
+  ConnectionsController,
+  OptionsController,
+  AssetController,
+  AssetUtil
+} from '@reown/appkit-core-react-native';
+import type { AppKitNetwork } from '@reown/appkit-common-react-native';
+import styles from './styles';
+import { useInternalAppKit } from '../../AppKitContext';
+import { useSnapshot } from 'valtio';
+
+export function NetworksView() {
+  const { height, width } = useWindowDimensions();
+  const windowSize = Math.min(height, width);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const { activeNetwork, isConnected } = useSnapshot(ConnectionsController.state);
+  const imageHeaders = ApiController._getApiHeaders();
+  const { padding } = useCustomDimensions();
+  const numColumns = 4;
+  const usableWidth = windowSize - 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, back } = useInternalAppKit();
+
+  const networkList = ConnectionsController.getAvailableNetworks();
+  const connectedNetworks = ConnectionsController.getConnectedNetworks();
+
+  const onHelpPress = () => {
+    RouterController.push('WhatIsANetwork');
+    EventsController.sendEvent({ type: 'track', event: 'CLICK_NETWORK_HELP' });
+  };
+
+  const networksTemplate = () => {
+    const onNetworkPress = async (network: AppKitNetwork) => {
+      if (
+        !isConnected ||
+        connectedNetworks.some(
+          connectedNetwork => connectedNetwork.caipNetworkId === network.caipNetworkId
+        )
+      ) {
+        await switchNetwork(network);
+        back();
+      } else {
+        RouterController.push('SwitchNetwork', { network });
+      }
+    };
+
+    return networkList.map(network => {
+      const isSelected = isConnected
+        ? activeNetwork?.caipNetworkId === network.caipNetworkId
+        : OptionsController.state.defaultNetwork?.caipNetworkId === network.caipNetworkId;
+
+      const networkImage = AssetUtil.getNetworkImage(network, networkImages);
+
+      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={networkImage}
+            imageHeaders={imageHeaders}
+            selected={isSelected}
+            onPress={() => onNetworkPress(network)}
+          />
+        </View>
+      );
+    });
+  };
+
+  return (
+    <>
+      <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+        <FlexView flexDirection="row" flexWrap="wrap" padding="xs">
+          {networksTemplate()}
+        </FlexView>
+      </ScrollView>
+      <Separator />
+      <FlexView padding="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
+  }
+});