@reown/appkit-react-native 0.0.0-chore-solflare-20250730210452 → 0.0.0-chore-spring-effect-20250909214820

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

@@ -1,25 +1,31 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
 import {
-  ConnectionController,
+  WcController,
   CoreHelperUtil,
   EventsController,
   RouterController,
   SnackController
 } from '@reown/appkit-core-react-native';
-import { FlexView, LoadingThumbnail, IconBox, Logo, Text } from '@reown/appkit-ui-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 { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { useAppKit } from '../../AppKitContext';
-import { UiUtil } from '../../utils/UiUtil';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
+import { ScrollView } from 'react-native';
 
 export function ConnectingSocialView() {
-  const { maxWidth: width } = useCustomDimensions();
-  const { connect } = useAppKit();
+  const { padding } = useCustomDimensions();
+  const { connect } = useInternalAppKit();
   const { data } = useSnapshot(RouterController.state);
-  const { wcUri } = useSnapshot(ConnectionController.state);
+  const { wcUri } = useSnapshot(WcController.state);
   const [error, setError] = useState(false);
 
   const onConnect = useCallback(async () => {
@@ -31,11 +37,10 @@ export function ConnectingSocialView() {
           RouterController.state.data?.socialProvider
         );
         const wcLinking = { name: 'Reown Wallet', href };
-        ConnectionController.setWcLinking(wcLinking);
+        WcController.setWcLinking(wcLinking);
         await CoreHelperUtil.openLink(redirect);
-        await ConnectionController.state.wcPromise;
-        //todo: rename this. its not just UI
-        UiUtil.storeConnectedWallet(wcLinking);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking);
         EventsController.sendEvent({
           type: 'track',
           event: 'SOCIAL_LOGIN_SUCCESS',
@@ -54,8 +59,8 @@ export function ConnectingSocialView() {
   }, [wcUri]);
 
   const initializeConnection = useCallback(async () => {
-    const connectPromise = connect('walletconnect');
-    ConnectionController.setWcPromise(connectPromise);
+    const connectPromise = connect();
+    WcController.setWcPromise(connectPromise);
   }, [connect]);
 
   useEffect(() => {
@@ -70,32 +75,29 @@ export function ConnectingSocialView() {
   }, [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>
+    <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-view/index.tsx

@@ -1,25 +1,24 @@
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
 import {
-  ConnectionController,
+  WcController,
   ConstantsUtil,
   CoreHelperUtil,
   RouterController,
   SnackController,
-  type Platform,
   OptionsController,
   ApiController,
   EventsController
 } from '@reown/appkit-core-react-native';
-import { useAppKit } from '../../AppKitContext';
+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';
-import { UiUtil } from '../../utils/UiUtil';
+import { type Platform } from '@reown/appkit-common-react-native';
 
 export function ConnectingView() {
-  const { connect } = useAppKit();
+  const { connect } = useInternalAppKit();
   const { installed } = useSnapshot(ApiController.state);
   const { data } = RouterController.state;
   const [lastRetry, setLastRetry] = useState(Date.now());
@@ -32,7 +31,7 @@ export function ConnectingView() {
   const onRetry = () => {
     if (CoreHelperUtil.isAllowedRetry(lastRetry)) {
       setLastRetry(Date.now());
-      ConnectionController.clearUri();
+      WcController.clearUri();
       initializeConnection(true);
     } else {
       SnackController.showError('Please wait a second before retrying');
@@ -41,19 +40,19 @@ export function ConnectingView() {
 
   const initializeConnection = async (retry = false) => {
     try {
-      const { wcPairingExpiry } = ConnectionController.state;
+      const { wcPairingExpiry } = WcController.state;
       const { data: routeData } = RouterController.state;
       if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
-        ConnectionController.setWcError(false);
+        WcController.setWcError(false);
 
-        const connectPromise = connect('walletconnect', {
-          universalLink: routeData?.wallet?.link_mode ?? undefined
+        const connectPromise = connect({
+          wallet: routeData?.wallet
         });
-        ConnectionController.setWcPromise(connectPromise);
+        WcController.setWcPromise(connectPromise);
       }
     } catch (error) {
-      ConnectionController.setWcError(true);
-      ConnectionController.clearUri();
+      WcController.setWcError(true);
+      WcController.clearUri();
       SnackController.showError('Declined');
       if (isQr && CoreHelperUtil.isAllowedRetry(lastRetry)) {
         setLastRetry(Date.now());
@@ -77,7 +76,6 @@ export function ConnectingView() {
   };
 
   const onSelectPlatform = (tab: Platform) => {
-    UiUtil.createViewTransition();
     setPlatform(tab);
   };
 

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

@@ -1,10 +1,12 @@
 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 { 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();
 
@@ -21,7 +23,7 @@ export function GetWalletView() {
       <ListWallet
         key={wallet.id}
         name={wallet.name}
-        imageSrc={AssetUtil.getWalletImage(wallet)}
+        imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
         imageHeaders={imageHeaders}
         onPress={() => onWalletPress(wallet)}
         style={styles.item}
@@ -36,7 +38,7 @@ export function GetWalletView() {
       fadingEdgeLength={20}
       testID="get-a-wallet-view"
     >
-      <FlexView padding={['s', 's', '3xl', 's']}>
+      <FlexView padding="s">
         {listTemplate()}
         <ListWallet
           name="Explore all"

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

@@ -1,12 +1,10 @@
 import { useSnapshot } from 'valtio';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
   ApiController,
   AssetController,
-  ConnectionController,
-  ConnectionsController,
-  RouterController,
-  RouterUtil
+  AssetUtil,
+  RouterController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -14,117 +12,93 @@ import {
   IconBox,
   LoadingHexagon,
   NetworkImage,
-  Text
+  Text,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
+import { ScrollView } from 'react-native';
 
 export function NetworkSwitchView() {
-  const { switchNetwork } = useAppKit();
+  const { switchNetwork, back } = useInternalAppKit();
+  const { padding } = useCustomDimensions();
   const { data } = useSnapshot(RouterController.state);
-  const { recentWallets } = useSnapshot(ConnectionController.state);
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const [error, setError] = useState<boolean>(false);
   const [showRetry, setShowRetry] = useState<boolean>(false);
-  const network = data?.network;
-  const wallet = recentWallets?.[0];
-  const networkImage = network ? networkImages[network.id] : undefined;
+  const [isError, setIsError] = useState<boolean>(false);
+  const networkImage = AssetUtil.getNetworkImage(data?.network, networkImages);
 
-  const onSwitchNetwork = async () => {
+  const onSwitchNetwork = useCallback(async () => {
     try {
-      if (network) {
-        setError(false);
-        const _network = ConnectionsController.state.networks.find(n => n.id === network.id);
-        if (!_network) return;
-        await switchNetwork(_network);
-      }
-    } catch {
-      setError(true);
+      if (!RouterController.state.data?.network) return;
+      setIsError(false);
+      await switchNetwork(RouterController.state.data.network);
+      back();
+    } catch (error) {
+      setIsError(true);
       setShowRetry(true);
     }
-  };
+  }, [switchNetwork, back]);
 
   useEffect(() => {
     onSwitchNetwork();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    // Go back if network is already switched
-    // eslint-disable-next-line valtio/state-snapshot-rule
-    if (activeNetwork?.id === network?.id) {
-      RouterUtil.navigateAfterNetworkSwitch();
-    }
-
-    // eslint-disable-next-line valtio/state-snapshot-rule
-  }, [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>
-        </>
-      );
-    }
-
-    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={networkImage}
-          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}
+    <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>
+          </>
         )}
-      </LoadingHexagon>
-      {textTemplate()}
-      {retryTemplate()}
-    </FlexView>
+        {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-networks-view/index.tsx

@@ -1,4 +1,5 @@
-import { ScrollView, View } from 'react-native';
+/* eslint-disable valtio/state-snapshot-rule */
+import { ScrollView, useWindowDimensions, View } from 'react-native';
 import {
   CardSelect,
   CardSelectWidth,
@@ -6,7 +7,8 @@ import {
   Link,
   Separator,
   Spacing,
-  Text
+  Text,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
@@ -14,28 +16,31 @@ import {
   EventsController,
   ConnectionsController,
   OptionsController,
-  AssetController
+  AssetController,
+  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';
+import { useInternalAppKit } from '../../AppKitContext';
 import { useSnapshot } from 'valtio';
 
 export function NetworksView() {
-  const { networks, isConnected } = useSnapshot(ConnectionsController.state);
+  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 { maxWidth: width, padding } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const numColumns = 4;
-  const usableWidth = width - Spacing.xs * 2 - Spacing['4xs'];
+  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 } = useAppKit();
+  const { switchNetwork, back } = useInternalAppKit();
 
-  const networkList = isConnected ? ConnectionsController.getConnectedNetworks() : networks;
+  const networkList = ConnectionsController.getAvailableNetworks();
+  const connectedNetworks = ConnectionsController.getConnectedNetworks();
 
   const onHelpPress = () => {
     RouterController.push('WhatIsANetwork');
@@ -44,16 +49,25 @@ export function NetworksView() {
 
   const networksTemplate = () => {
     const onNetworkPress = async (network: AppKitNetwork) => {
-      await switchNetwork(network);
-      back();
+      if (
+        !isConnected ||
+        connectedNetworks.some(
+          connectedNetwork => connectedNetwork.caipNetworkId === network.caipNetworkId
+        )
+      ) {
+        await switchNetwork(network);
+        back();
+      } else {
+        RouterController.push('SwitchNetwork', { network });
+      }
     };
 
     return networkList.map(network => {
-      const isSelected = ConnectionsController.state.isConnected
-        ? ConnectionsController.state.activeCaipNetworkId === network.caipNetworkId
+      const isSelected = isConnected
+        ? activeNetwork?.caipNetworkId === network.caipNetworkId
         : OptionsController.state.defaultNetwork?.caipNetworkId === network.caipNetworkId;
-      // eslint-disable-next-line valtio/state-snapshot-rule
-      const networkImage = network ? networkImages[network.id] : undefined;
+
+      const networkImage = AssetUtil.getNetworkImage(network, networkImages);
 
       return (
         <View
@@ -83,17 +97,12 @@ export function NetworksView() {
   return (
     <>
       <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
-        <FlexView flexDirection="row" flexWrap="wrap" padding={['xs', 'xs', 's', 'xs']}>
+        <FlexView flexDirection="row" flexWrap="wrap" padding="xs">
           {networksTemplate()}
         </FlexView>
       </ScrollView>
       <Separator />
-      <FlexView
-        padding={['s', 's', '3xl', 's']}
-        alignItems="center"
-        alignSelf="center"
-        style={{ width }}
-      >
+      <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>