chore: prep for v1.3.1

.changeset/ready-books-march.md

@@ -0,0 +1,19 @@
+---
+'@reown/appkit-scaffold-react-native': patch
+'@reown/appkit-ethers5-react-native': patch
+'@reown/appkit-ethers-react-native': patch
+'@reown/appkit-wagmi-react-native': patch
+'@reown/appkit-core-react-native': patch
+'@reown/appkit-auth-ethers-react-native': patch
+'@reown/appkit-auth-wagmi-react-native': patch
+'@reown/appkit-react-native-cli': patch
+'@reown/appkit-coinbase-ethers-react-native': patch
+'@reown/appkit-coinbase-wagmi-react-native': patch
+'@reown/appkit-common-react-native': patch
+'@reown/appkit-scaffold-utils-react-native': patch
+'@reown/appkit-siwe-react-native': patch
+'@reown/appkit-ui-react-native': patch
+'@reown/appkit-wallet-react-native': patch
+---
+
+fix: correctly set approved networks and support all networks flag

.changeset/six-dots-punch.md

@@ -0,0 +1,18 @@
+---
+'@reown/appkit-scaffold-react-native': patch
+'@reown/appkit-core-react-native': patch
+'@reown/appkit-ui-react-native': patch
+'@reown/appkit-auth-ethers-react-native': patch
+'@reown/appkit-auth-wagmi-react-native': patch
+'@reown/appkit-coinbase-ethers-react-native': patch
+'@reown/appkit-coinbase-wagmi-react-native': patch
+'@reown/appkit-common-react-native': patch
+'@reown/appkit-ethers-react-native': patch
+'@reown/appkit-ethers5-react-native': patch
+'@reown/appkit-scaffold-utils-react-native': patch
+'@reown/appkit-siwe-react-native': patch
+'@reown/appkit-wagmi-react-native': patch
+'@reown/appkit-wallet-react-native': patch
+---
+
+fix: show network images correctly

package.json

@@ -92,6 +92,8 @@
     "esbuild": "0.25.0",
     "postcss": "8.4.31",
     "cookie": "0.7.0",
-    "ip": "^2.0.1"
+    "ip": "^2.0.1",
+    "form-data": "3.0.4",
+    "sha.js": "2.4.12"
   }
 }

packages/core/src/controllers/ConnectorController.ts

@@ -42,17 +42,17 @@ export const ConnectorController = {
     return state.connectors.find(c => c.type === 'AUTH');
   },
 
-  setConnectedConnector(
+  async setConnectedConnector(
     connectorType: ConnectorControllerState['connectedConnector'],
     saveStorage = true
   ) {
     state.connectedConnector = connectorType;
 
     if (saveStorage) {
       if (connectorType) {
-        StorageUtil.setConnectedConnector(connectorType);
+        await StorageUtil.setConnectedConnector(connectorType);
       } else {
-        StorageUtil.removeConnectedConnector();
+        await StorageUtil.removeConnectedConnector();
       }
     }
   },

packages/core/src/controllers/NetworkController.ts

@@ -1,13 +1,13 @@
 import { proxy, ref } from 'valtio';
 import type { CaipNetwork, CaipNetworkId } from '../utils/TypeUtil';
 import { PublicStateController } from './PublicStateController';
-import { NetworkUtil } from '@reown/appkit-common-react-native';
+import { NetworkUtil, type ConnectorType } from '@reown/appkit-common-react-native';
 import { ConstantsUtil } from '../utils/ConstantsUtil';
 
 // -- Types --------------------------------------------- //
 export interface NetworkControllerClient {
   switchCaipNetwork: (network: NetworkControllerState['caipNetwork']) => Promise<void>;
-  getApprovedCaipNetworksData: () => Promise<{
+  getApprovedCaipNetworksData: (connectorType?: ConnectorType) => Promise<{
     approvedCaipNetworkIds: NetworkControllerState['approvedCaipNetworkIds'];
     supportsAllNetworks: NetworkControllerState['supportsAllNetworks'];
   }>;
@@ -77,8 +77,8 @@ export const NetworkController = {
     return Boolean(state.smartAccountEnabledNetworks?.includes(Number(networkId)));
   },
 
-  async getApprovedCaipNetworksData() {
-    const data = await this._getClient().getApprovedCaipNetworksData();
+  async getApprovedCaipNetworksData(connectorType?: ConnectorType) {
+    const data = await this._getClient().getApprovedCaipNetworksData(connectorType);
     state.supportsAllNetworks = data.supportsAllNetworks;
     state.approvedCaipNetworkIds = data.approvedCaipNetworkIds;
   },

packages/core/src/utils/AssetUtil.ts

@@ -14,13 +14,17 @@ export const AssetUtil = {
     return undefined;
   },
 
-  getNetworkImage(network?: CaipNetwork) {
-    if (network?.imageUrl) {
-      return network?.imageUrl;
+  getNetworkImage(network?: CaipNetwork, networkImages?: Record<string, string>) {
+    if (!network) {
+      return undefined;
     }
 
-    if (network?.imageId) {
-      return AssetController.state.networkImages[network.imageId];
+    if (network.imageUrl) {
+      return network.imageUrl;
+    }
+
+    if (network.imageId) {
+      return networkImages?.[network.imageId];
     }
 
     return undefined;

packages/ethers/src/client.ts

@@ -139,17 +139,18 @@ export class AppKit extends AppKitScaffold {
 
       getApprovedCaipNetworksData: async () =>
         new Promise(async resolve => {
-          const walletChoice = await StorageUtil.getConnectedConnector();
+          const walletId = (await StorageUtil.getItem(EthersConstantsUtil.WALLET_ID)) as string;
+          const walletChoice = PresetsUtil.ConnectorTypesMap[walletId ?? ''];
           const walletConnectType =
             PresetsUtil.ConnectorTypesMap[ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID]!;
 
           const authType = PresetsUtil.ConnectorTypesMap[ConstantsUtil.AUTH_CONNECTOR_ID]!;
-          if (walletChoice?.includes(walletConnectType)) {
+          if (walletChoice === walletConnectType) {
             const provider = await this.getWalletConnectProvider();
             const result = getWalletConnectCaipNetworks(provider);
 
             resolve(result);
-          } else if (walletChoice?.includes(authType)) {
+          } else if (walletChoice === authType) {
             const result = getAuthCaipNetworks();
             resolve(result);
           } else {

packages/ethers5/src/client.ts

@@ -126,17 +126,18 @@ export class AppKit extends AppKitScaffold {
 
       getApprovedCaipNetworksData: async () =>
         new Promise(async resolve => {
-          const walletChoice = await StorageUtil.getConnectedConnector();
+          const walletId = (await StorageUtil.getItem(EthersConstantsUtil.WALLET_ID)) as string;
+          const walletChoice = PresetsUtil.ConnectorTypesMap[walletId ?? ''];
           const walletConnectType =
             PresetsUtil.ConnectorTypesMap[ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID]!;
 
           const authType = PresetsUtil.ConnectorTypesMap[ConstantsUtil.AUTH_CONNECTOR_ID]!;
-          if (walletChoice?.includes(walletConnectType)) {
+          if (walletChoice === walletConnectType) {
             const provider = await this.getWalletConnectProvider();
             const result = getWalletConnectCaipNetworks(provider);
 
             resolve(result);
-          } else if (walletChoice?.includes(authType)) {
+          } else if (walletChoice === authType) {
             const result = getAuthCaipNetworks();
             resolve(result);
           } else {

packages/scaffold/src/client.ts

@@ -33,6 +33,7 @@ import { SIWEController, type SIWEControllerClient } from '@reown/appkit-siwe-re
 import {
   ConstantsUtil,
   ErrorUtil,
+  type ConnectorType,
   type ThemeMode,
   type ThemeVariables
 } from '@reown/appkit-common-react-native';
@@ -197,7 +198,7 @@ export class AppKitScaffold {
     };
 
   protected getApprovedCaipNetworksData: (typeof NetworkController)['getApprovedCaipNetworksData'] =
-    () => NetworkController.getApprovedCaipNetworksData();
+    (connectorType?: ConnectorType) => NetworkController.getApprovedCaipNetworksData(connectorType);
 
   protected resetNetwork: (typeof NetworkController)['resetNetwork'] = () => {
     NetworkController.resetNetwork();

packages/scaffold/src/modal/w3m-account-button/index.tsx

@@ -7,7 +7,8 @@ import {
   ModalController,
   AssetUtil,
   ThemeController,
-  ApiController
+  ApiController,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import { AccountButton as AccountButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
 
@@ -27,9 +28,10 @@ export function AccountButton({ balance, disabled, style, testID }: AccountButto
     profileName
   } = useSnapshot(AccountController.state);
   const { caipNetwork } = useSnapshot(NetworkController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
 
-  const networkImage = AssetUtil.getNetworkImage(caipNetwork);
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages);
   const showBalance = balance === 'show';
 
   return (

packages/scaffold/src/modal/w3m-network-button/index.tsx

@@ -3,6 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import {
   AccountController,
   ApiController,
+  AssetController,
   AssetUtil,
   EventsController,
   ModalController,
@@ -18,6 +19,7 @@ export interface NetworkButtonProps {
 
 export function NetworkButton({ disabled, style }: NetworkButtonProps) {
   const { isConnected } = useSnapshot(AccountController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const { caipNetwork } = useSnapshot(NetworkController.state);
   const { loading } = useSnapshot(ModalController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
@@ -33,7 +35,7 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
   return (
     <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
       <NetworkButtonUI
-        imageSrc={AssetUtil.getNetworkImage(caipNetwork)}
+        imageSrc={AssetUtil.getNetworkImage(caipNetwork, networkImages)}
         imageHeaders={ApiController._getApiHeaders()}
         disabled={disabled || loading}
         style={style}

packages/scaffold/src/partials/w3m-account-activity/index.tsx

@@ -13,6 +13,7 @@ import {
 import { type Transaction, type TransactionImage } from '@reown/appkit-common-react-native';
 import {
   AccountController,
+  AssetController,
   AssetUtil,
   EventsController,
   NetworkController,
@@ -33,7 +34,8 @@ export function AccountActivity({ style }: Props) {
   const [initialLoad, setInitialLoad] = useState(true);
   const { loading, transactions, next } = useSnapshot(TransactionsController.state);
   const { caipNetwork } = useSnapshot(NetworkController.state);
-  const networkImage = AssetUtil.getNetworkImage(caipNetwork);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages);
 
   const handleLoadMore = () => {
     TransactionsController.fetchTransactions(AccountController.state.address);

packages/scaffold/src/partials/w3m-account-tokens/index.tsx

@@ -9,6 +9,7 @@ import {
 import { useSnapshot } from 'valtio';
 import {
   AccountController,
+  AssetController,
   AssetUtil,
   NetworkController,
   RouterController
@@ -31,7 +32,8 @@ export function AccountTokens({ style }: Props) {
   const [refreshing, setRefreshing] = useState(false);
   const { tokenBalance } = useSnapshot(AccountController.state);
   const { caipNetwork } = useSnapshot(NetworkController.state);
-  const networkImage = AssetUtil.getNetworkImage(caipNetwork);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages);
 
   const onRefresh = useCallback(async () => {
     setRefreshing(true);

packages/scaffold/src/partials/w3m-selector-modal/index.tsx

@@ -13,7 +13,7 @@ import {
   useTheme
 } from '@reown/appkit-ui-react-native';
 import styles from './styles';
-import { AssetUtil, NetworkController } from '@reown/appkit-core-react-native';
+import { AssetController, AssetUtil, NetworkController } from '@reown/appkit-core-react-native';
 
 interface SelectorModalProps {
   title?: string;
@@ -46,7 +46,8 @@ export function SelectorModal({
 }: SelectorModalProps) {
   const Theme = useTheme();
   const { caipNetwork } = useSnapshot(NetworkController.state);
-  const networkImage = AssetUtil.getNetworkImage(caipNetwork);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages);
 
   const renderSeparator = () => {
     return <View style={{ height: SEPARATOR_HEIGHT }} />;

packages/scaffold/src/views/w3m-account-default-view/index.tsx

@@ -18,7 +18,8 @@ import {
   type AppKitFrameProvider,
   ConstantsUtil,
   SwapController,
-  OnRampController
+  OnRampController,
+  AssetController
 } from '@reown/appkit-core-react-native';
 import {
   Avatar,
@@ -52,7 +53,8 @@ export function AccountDefaultView() {
   const { connectedSocialProvider } = useSnapshot(ConnectionController.state);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { history } = useSnapshot(RouterController.state);
-  const networkImage = AssetUtil.getNetworkImage(caipNetwork);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = AssetUtil.getNetworkImage(caipNetwork, networkImages);
   const showCopy = OptionsController.isClipboardAvailable();
   const isAuth = connectedConnector === 'AUTH';
   const showBalance = balance && !isAuth;

packages/scaffold/src/views/w3m-account-view/index.tsx

@@ -13,6 +13,7 @@ import {
 import {
   AccountController,
   ApiController,
+  AssetController,
   AssetUtil,
   ModalController,
   NetworkController,
@@ -28,6 +29,7 @@ export function AccountView() {
   const Theme = useTheme();
   const { padding } = useCustomDimensions();
   const { caipNetwork } = useSnapshot(NetworkController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const { address, profileName, profileImage, preferredAccountType } = useSnapshot(
     AccountController.state
   );
@@ -74,7 +76,7 @@ export function AccountView() {
       ]}
     >
       <NetworkButton
-        imageSrc={AssetUtil.getNetworkImage(caipNetwork)}
+        imageSrc={AssetUtil.getNetworkImage(caipNetwork, networkImages)}
         imageHeaders={ApiController._getApiHeaders()}
         onPress={onNetworkPress}
         style={styles.networkIcon}

packages/scaffold/src/views/w3m-connecting-view/index.tsx

@@ -50,7 +50,7 @@ export function ConnectingView() {
         ConnectionController.setWcError(false);
         ConnectionController.connectWalletConnect(routeData?.wallet?.link_mode ?? undefined);
         await ConnectionController.state.wcPromise;
-        ConnectorController.setConnectedConnector('WALLET_CONNECT');
+        await ConnectorController.setConnectedConnector('WALLET_CONNECT');
         AccountController.setIsConnected(true);
 
         if (OptionsController.state.isSiweEnabled) {

packages/scaffold/src/views/w3m-network-switch-view/index.tsx

@@ -3,6 +3,7 @@ import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
 import {
   ApiController,
+  AssetController,
   AssetUtil,
   ConnectionController,
   ConnectorController,
@@ -21,10 +22,13 @@ import {
 } from '@reown/appkit-ui-react-native';
 import styles from './styles';
 
+const imageHeaders = ApiController._getApiHeaders();
+
 export function NetworkSwitchView() {
   const { data } = useSnapshot(RouterController.state);
   const { recentWallets } = useSnapshot(ConnectionController.state);
   const { caipNetwork } = useSnapshot(NetworkController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const isAuthConnected = ConnectorController.state.connectedConnector === 'AUTH';
   const [error, setError] = useState<boolean>(false);
   const [showRetry, setShowRetry] = useState<boolean>(false);
@@ -115,8 +119,8 @@ export function NetworkSwitchView() {
     <FlexView alignItems="center" padding={['2xl', 's', '4xl', 's']}>
       <LoadingHexagon paused={error}>
         <NetworkImage
-          imageSrc={AssetUtil.getNetworkImage(network)}
-          imageHeaders={ApiController._getApiHeaders()}
+          imageSrc={AssetUtil.getNetworkImage(network, networkImages)}
+          imageHeaders={imageHeaders}
           size="lg"
         />
         {error && (