@reown/appkit-react-native 2.0.0-alpha.0 → 2.0.0-alpha.2

package/src/partials/w3m-account-activity/index.tsx

@@ -12,9 +12,9 @@ import {
 } from '@reown/appkit-ui-react-native';
 import { type Transaction, type TransactionImage } from '@reown/appkit-common-react-native';
 import {
-  AccountController,
-  AssetUtil,
+  AssetController,
   ConnectionsController,
+  ConstantsUtil,
   EventsController,
   OptionsController,
   TransactionsController
@@ -32,12 +32,20 @@ export function AccountActivity({ style }: Props) {
   const [refreshing, setRefreshing] = useState(false);
   const [initialLoad, setInitialLoad] = useState(true);
   const { loading, transactions, next } = useSnapshot(TransactionsController.state);
-  const { activeNetwork, activeNamespace } = useSnapshot(ConnectionsController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
-  const isSupported = activeNamespace && ['eip155', 'solana'].includes(activeNamespace);
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const isSupported =
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
 
   const handleLoadMore = () => {
-    const address = ConnectionsController.state.activeAddress?.split(':')[2];
+    const address = ConnectionsController.state.activeAddress;
+
+    if (!address) {
+      return;
+    }
+
     TransactionsController.fetchTransactions(address);
     EventsController.sendEvent({
       type: 'track',
@@ -46,14 +54,19 @@ export function AccountActivity({ style }: Props) {
         address,
         projectId: OptionsController.state.projectId,
         cursor: TransactionsController.state.next,
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+        isSmartAccount: ConnectionsController.state.accountType === 'smartAccount'
       }
     });
   };
 
   const onRefresh = useCallback(async () => {
+    const address = ConnectionsController.state.activeAddress;
+
+    if (!address) {
+      return;
+    }
+
     setRefreshing(true);
-    const address = ConnectionsController.state.activeAddress?.split(':')[2];
     await TransactionsController.fetchTransactions(address, true);
     setRefreshing(false);
   }, []);
@@ -63,8 +76,8 @@ export function AccountActivity({ style }: Props) {
   }, [transactions]);
 
   useEffect(() => {
-    if (!TransactionsController.state.transactions.length) {
-      const address = ConnectionsController.state.activeAddress?.split(':')[2];
+    const address = ConnectionsController.state.activeAddress;
+    if (!TransactionsController.state.transactions.length && address) {
       TransactionsController.fetchTransactions(address, true);
     }
     // Set initial load to false after first fetch

package/src/partials/w3m-account-tokens/index.tsx

@@ -8,8 +8,7 @@ import {
 } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
-  AccountController,
-  AssetUtil,
+  AssetController,
   ConnectionsController,
   RouterController
 } from '@reown/appkit-core-react-native';
@@ -19,23 +18,25 @@ import {
   Text,
   ListToken,
   useTheme,
-  Spacing
+  Spacing,
+  LoadingSpinner
 } from '@reown/appkit-ui-react-native';
 
 interface Props {
   style?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
 }
 
-export function AccountTokens({ style }: Props) {
+export function AccountTokens({ style, isLoading }: Props) {
   const Theme = useTheme();
   const [refreshing, setRefreshing] = useState(false);
-  const { tokenBalance } = useSnapshot(AccountController.state);
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
 
-  const onRefresh = useCallback(async () => {
+  const getBalance = useCallback(async () => {
     setRefreshing(true);
-    AccountController.fetchTokenBalance();
+    await ConnectionsController.fetchBalance();
     setRefreshing(false);
   }, []);
 
@@ -43,23 +44,26 @@ export function AccountTokens({ style }: Props) {
     RouterController.push('WalletReceive');
   };
 
-  if (!tokenBalance?.length) {
+  if (!balances?.length) {
     return (
-      <ListItem
-        icon="arrowBottomCircle"
-        iconColor="magenta-100"
-        onPress={onReceivePress}
-        style={styles.receiveButton}
-      >
-        <FlexView flexDirection="column" alignItems="flex-start">
-          <Text variant="paragraph-500" color="fg-100">
-            Receive funds
-          </Text>
-          <Text variant="small-400" color="fg-200">
-            Transfer tokens on your wallet
-          </Text>
-        </FlexView>
-      </ListItem>
+      <>
+        <ListItem
+          icon="arrowBottomCircle"
+          iconColor="magenta-100"
+          onPress={onReceivePress}
+          style={styles.receiveButton}
+        >
+          <FlexView flexDirection="column" alignItems="flex-start">
+            <Text variant="paragraph-500" color="fg-100">
+              Receive funds
+            </Text>
+            <Text variant="small-400" color="fg-200">
+              Transfer tokens on your wallet
+            </Text>
+          </FlexView>
+        </ListItem>
+        {isLoading && <LoadingSpinner size="sm" style={styles.loadingSpinner} />}
+      </>
     );
   }
 
@@ -70,24 +74,25 @@ export function AccountTokens({ style }: Props) {
       refreshControl={
         <RefreshControl
           refreshing={refreshing}
-          onRefresh={onRefresh}
+          onRefresh={getBalance}
           tintColor={Theme['accent-100']}
           colors={[Theme['accent-100']]}
         />
       }
     >
-      {tokenBalance.map(token => (
+      {balances.map(token => (
         <ListToken
-          key={token.name}
-          name={token.name}
+          key={token.symbol}
+          name={token.name || 'Unknown'}
           imageSrc={token.iconUrl}
           networkSrc={networkImage}
           value={token.value}
-          amount={token.quantity.numeric}
+          amount={token.quantity?.numeric}
           currency={token.symbol}
           pressable={false}
         />
       ))}
+      {isLoading && <LoadingSpinner size="sm" style={styles.loadingSpinner} />}
     </ScrollView>
   );
 }
@@ -96,5 +101,8 @@ const styles = StyleSheet.create({
   receiveButton: {
     width: 'auto',
     marginHorizontal: Spacing.s
+  },
+  loadingSpinner: {
+    marginTop: Spacing.m
   }
 });

package/src/partials/w3m-account-wallet-features/index.tsx

@@ -2,11 +2,10 @@ import { useState } from 'react';
 import { useSnapshot } from 'valtio';
 import { Balance, FlexView, IconLink, Tabs } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
+  ConnectionsController,
   ConstantsUtil,
   CoreHelperUtil,
   EventsController,
-  NetworkController,
   OnRampController,
   OptionsController,
   RouterController,
@@ -18,15 +17,22 @@ import { AccountTokens } from '../w3m-account-tokens';
 import styles from './styles';
 
 export interface AccountWalletFeaturesProps {
-  value: string;
+  isBalanceLoading: boolean;
 }
 
-export function AccountWalletFeatures() {
+export function AccountWalletFeatures({ isBalanceLoading }: AccountWalletFeaturesProps) {
   const [activeTab, setActiveTab] = useState(0);
-  const { tokenBalance } = useSnapshot(AccountController.state);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
-  const balance = CoreHelperUtil.calculateAndFormatBalance(tokenBalance as BalanceType[]);
-  const isSwapsEnabled = features?.swaps;
+  const { activeNetwork, balances, activeNamespace } = useSnapshot(ConnectionsController.state);
+  const balance = CoreHelperUtil.calculateAndFormatBalance(balances as BalanceType[]);
+  const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
+  const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
+  const showSend =
+    activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);
+  const isSwapsEnabled =
+    features?.swaps &&
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(activeNetwork.caipNetworkId);
 
   const onTabChange = (index: number) => {
     setActiveTab(index);
@@ -39,40 +45,25 @@ export function AccountWalletFeatures() {
     EventsController.sendEvent({
       type: 'track',
       event: 'CLICK_TRANSACTIONS',
-      properties: {
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
-      }
+      properties: { isSmartAccount }
     });
   };
 
   const onSwapPress = () => {
-    if (
-      NetworkController.state.caipNetwork?.id &&
-      !ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(`${NetworkController.state.caipNetwork.id}`)
-    ) {
-      RouterController.push('UnsupportedChain');
-    } else {
-      SwapController.resetState();
-      EventsController.sendEvent({
-        type: 'track',
-        event: 'OPEN_SWAP',
-        properties: {
-          network: NetworkController.state.caipNetwork?.id || '',
-          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
-        }
-      });
-      RouterController.push('Swap');
-    }
+    SwapController.resetState();
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'OPEN_SWAP',
+      properties: { network, isSmartAccount }
+    });
+    RouterController.push('Swap');
   };
 
   const onSendPress = () => {
     EventsController.sendEvent({
       type: 'track',
       event: 'OPEN_SEND',
-      properties: {
-        network: NetworkController.state.caipNetwork?.id || '',
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
-      }
+      properties: { network, isSmartAccount }
     });
     RouterController.push('WalletSend');
   };
@@ -133,22 +124,26 @@ export function AccountWalletFeatures() {
           style={[styles.action, isSwapsEnabled ? styles.actionCenter : styles.actionLeft]}
           onPress={onReceivePress}
         />
-        <IconLink
-          icon="paperplane"
-          size="lg"
-          iconColor="accent-100"
-          background
-          backgroundColor="accent-glass-010"
-          pressedColor="accent-glass-020"
-          style={[styles.action, styles.actionRight]}
-          onPress={onSendPress}
-        />
+        {showSend && (
+          <IconLink
+            icon="paperplane"
+            size="lg"
+            iconColor="accent-100"
+            background
+            backgroundColor="accent-glass-010"
+            pressedColor="accent-glass-020"
+            style={[styles.action, styles.actionRight]}
+            onPress={onSendPress}
+          />
+        )}
       </FlexView>
       <FlexView style={styles.tab}>
         <Tabs tabs={['Tokens', 'Activity']} onTabChange={onTabChange} />
       </FlexView>
       <FlexView padding={['m', '0', '0', '0']} style={styles.tabContainer}>
-        {activeTab === 0 && <AccountTokens style={styles.tabContent} />}
+        {activeTab === 0 && (
+          <AccountTokens style={styles.tabContent} isLoading={isBalanceLoading} />
+        )}
         {activeTab === 1 && <AccountActivity style={styles.tabContent} />}
       </FlexView>
     </FlexView>

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

@@ -3,12 +3,12 @@ import { useSnapshot } from 'valtio';
 import {
   AssetUtil,
   ConnectionController,
-  ConnectorController,
   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';
 
@@ -37,9 +37,8 @@ export function ConnectingQrCode() {
       }
     });
 
-    const connectors = ConnectorController.state.connectors;
-    const connector = connectors.find(c => c.type === 'WALLET_CONNECT');
-    const url = AssetUtil.getConnectorImage(connector);
+    //TODO: check this
+    const url = AssetUtil.getConnectorImage(ConstantsUtil.WALLET_CONNECT_IMAGE_ID);
     ConnectionController.setConnectedWalletImageUrl(url);
   };
 

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

@@ -3,10 +3,7 @@ import {
   RouterController,
   ModalController,
   EventsController,
-  type RouterControllerState,
-  ConnectionController,
-  ConnectorController,
-  type AppKitFrameProvider
+  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';
@@ -21,11 +18,10 @@ export function Header() {
   };
 
   const headings = (_data: RouterControllerState['data'], _view: RouterControllerState['view']) => {
-    const connectorName = _data?.connector?.name;
     const walletName = _data?.wallet?.name;
     const networkName = _data?.network?.name;
-    const socialName = ConnectionController.state.selectedSocialProvider
-      ? StringUtil.capitalize(ConnectionController.state.selectedSocialProvider)
+    const socialName = _data?.socialProvider
+      ? StringUtil.capitalize(_data?.socialProvider)
       : undefined;
 
     return {
@@ -34,14 +30,10 @@ export function Header() {
       AllWallets: 'All wallets',
       Connect: 'Connect wallet',
       ConnectSocials: 'All socials',
-      ConnectingExternal: connectorName ?? 'Connect wallet',
+      ConnectingExternal: walletName ?? 'Connect wallet',
       ConnectingSiwe: undefined,
-      ConnectingFarcaster: socialName ?? 'Connecting Social',
       ConnectingSocial: socialName ?? 'Connecting Social',
       ConnectingWalletConnect: walletName ?? 'WalletConnect',
-      Create: 'Create wallet',
-      EmailVerifyDevice: ' ',
-      EmailVerifyOtp: 'Confirm email',
       GetWallet: 'Get a wallet',
       Networks: 'Select network',
       OnRamp: undefined,
@@ -51,15 +43,10 @@ export function Header() {
       OnRampTransaction: ' ',
       SwitchNetwork: networkName ?? 'Switch network',
       Swap: 'Swap',
-      SwapSelectToken: 'Select token',
       SwapPreview: 'Review swap',
       Transactions: 'Activity',
       UnsupportedChain: 'Switch network',
-      UpdateEmailPrimaryOtp: 'Confirm current email',
-      UpdateEmailSecondaryOtp: 'Confirm new email',
-      UpdateEmailWallet: 'Edit email',
       UpgradeEmailWallet: 'Upgrade wallet',
-      UpgradeToSmartAccount: undefined,
       WalletCompatibleNetworks: 'Compatible networks',
       WalletReceive: 'Receive',
       WalletSend: 'Send',
@@ -75,23 +62,11 @@ export function Header() {
   const header = headings(data, view);
 
   const checkSocial = () => {
-    if (
-      RouterController.state.view === 'ConnectingFarcaster' ||
-      RouterController.state.view === 'ConnectingSocial'
-    ) {
-      const socialProvider = ConnectionController.state.selectedSocialProvider;
-      const authProvider = ConnectorController.getAuthConnector()?.provider as AppKitFrameProvider;
-
-      if (authProvider && socialProvider === 'farcaster') {
-        // TODO: remove this once Farcaster session refresh is implemented
-        // @ts-expect-error
-        authProvider.webviewRef?.current?.reload();
-      }
-
+    if (RouterController.state.view === 'ConnectingSocial') {
       EventsController.sendEvent({
         type: 'track',
         event: 'SOCIAL_LOGIN_CANCELED',
-        properties: { provider: ConnectionController.state.selectedSocialProvider! }
+        properties: { provider: RouterController.state.data?.socialProvider! }
       });
     }
   };

package/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, ConnectionsController } from '@reown/appkit-core-react-native';
+import { AssetController, ConnectionsController } from '@reown/appkit-core-react-native';
 
 interface SelectorModalProps {
   title?: string;
@@ -46,7 +46,8 @@ export function SelectorModal({
 }: SelectorModalProps) {
   const Theme = useTheme();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
 
   const renderSeparator = () => {
     return <View style={{ height: SEPARATOR_HEIGHT }} />;

package/src/partials/w3m-send-input-address/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { TextInput } from 'react-native';
 import { FlexView, useTheme } from '@reown/appkit-ui-react-native';
-import { ConnectionController, SendController } from '@reown/appkit-core-react-native';
+import { SendController } from '@reown/appkit-core-react-native';
 
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import styles from './styles';
@@ -15,20 +15,9 @@ export function SendInputAddress({ value }: SendInputAddressProps) {
   const [inputValue, setInputValue] = useState<string | undefined>(value);
 
   const onSearch = async (search: string) => {
-    SendController.setLoading(true);
-    const address = await ConnectionController.getEnsAddress(search);
-    SendController.setLoading(false);
-
-    if (address) {
-      SendController.setReceiverProfileName(search);
-      SendController.setReceiverAddress(address);
-      const avatar = await ConnectionController.getEnsAvatar(search);
-      SendController.setReceiverProfileImageUrl(avatar || undefined);
-    } else {
-      SendController.setReceiverAddress(search);
-      SendController.setReceiverProfileName(undefined);
-      SendController.setReceiverProfileImageUrl(undefined);
-    }
+    SendController.setReceiverAddress(search);
+    SendController.setReceiverProfileName(undefined);
+    SendController.setReceiverProfileImageUrl(undefined);
   };
 
   const { debouncedCallback: onDebounceSearch } = useDebounceCallback({

package/src/partials/w3m-send-input-token/index.tsx

@@ -1,8 +1,15 @@
 import { useRef, useState } from 'react';
 import { TextInput, type StyleProp, type ViewStyle } from 'react-native';
-import { FlexView, Link, Text, useTheme, TokenButton } from '@reown/appkit-ui-react-native';
+import {
+  FlexView,
+  Link,
+  Text,
+  useTheme,
+  TokenButton,
+  Shimmer
+} from '@reown/appkit-ui-react-native';
 import { NumberUtil, type Balance } from '@reown/appkit-common-react-native';
-import { ConstantsUtil, SendController } from '@reown/appkit-core-react-native';
+import { SendController } from '@reown/appkit-core-react-native';
 
 import { getMaxAmount, getSendValue } from './utils';
 import styles from './styles';
@@ -10,24 +17,24 @@ import styles from './styles';
 export interface SendInputTokenProps {
   token?: Balance;
   sendTokenAmount?: number;
-  gasPrice?: number;
   style?: StyleProp<ViewStyle>;
   onTokenPress?: () => void;
+  loading?: boolean;
 }
 
 export function SendInputToken({
   token,
   sendTokenAmount,
-  gasPrice,
   style,
-  onTokenPress
+  onTokenPress,
+  loading
 }: SendInputTokenProps) {
   const Theme = useTheme();
   const valueInputRef = useRef<TextInput | null>(null);
   const [inputValue, setInputValue] = useState<string | undefined>(sendTokenAmount?.toString());
   const sendValue = getSendValue(token, sendTokenAmount);
   const maxAmount = getMaxAmount(token);
-  const maxError = token && sendTokenAmount && sendTokenAmount > Number(token.quantity.numeric);
+  const maxError = token && sendTokenAmount && sendTokenAmount > Number(token?.quantity?.numeric);
 
   const onInputChange = (value: string) => {
     const formattedValue = value.replace(/,/g, '.');
@@ -39,26 +46,17 @@ export function SendInputToken({
   };
 
   const onMaxPress = () => {
-    if (token && gasPrice) {
-      const isNetworkToken =
-        token.address === undefined ||
-        Object.values(ConstantsUtil.NATIVE_TOKEN_ADDRESS).some(
-          nativeAddress => token?.address === nativeAddress
-        );
-
-      const numericGas = NumberUtil.bigNumber(gasPrice).shiftedBy(-token.quantity.decimals);
-
-      const maxValue = isNetworkToken
-        ? NumberUtil.bigNumber(token.quantity.numeric).minus(numericGas)
-        : NumberUtil.bigNumber(token.quantity.numeric);
-
+    if (token?.quantity?.numeric) {
+      const maxValue = NumberUtil.bigNumber(token.quantity.numeric);
       SendController.setTokenAmount(Number(maxValue.toFixed(20)));
       setInputValue(maxValue.toFixed(20));
       valueInputRef.current?.blur();
     }
   };
 
-  return (
+  return loading ? (
+    <Shimmer width="100%" height={100} borderRadius={16} style={styles.inputLoading} />
+  ) : (
     <FlexView
       style={[
         styles.container,

package/src/partials/w3m-send-input-token/styles.ts

@@ -16,5 +16,8 @@ export default StyleSheet.create({
   sendValue: {
     flex: 1,
     marginRight: Spacing.xs
+  },
+  inputLoading: {
+    marginBottom: Spacing.xs
   }
 });

package/src/partials/w3m-send-input-token/utils.ts

@@ -2,7 +2,7 @@ import { type Balance, NumberUtil } from '@reown/appkit-common-react-native';
 import { UiUtil } from '@reown/appkit-ui-react-native';
 
 export function getSendValue(token?: Balance, sendTokenAmount?: number) {
-  if (token && sendTokenAmount) {
+  if (token?.price && sendTokenAmount) {
     const price = token.price;
     const totalValue = price * sendTokenAmount;
 
@@ -13,7 +13,7 @@ export function getSendValue(token?: Balance, sendTokenAmount?: number) {
 }
 
 export function getMaxAmount(token?: Balance) {
-  if (token) {
+  if (token?.quantity?.numeric) {
     return NumberUtil.roundNumber(Number(token.quantity.numeric), 6, 5);
   }
 

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

@@ -13,7 +13,7 @@ const getIcon = (variant: SnackControllerState['variant']) => {
 };
 
 export function Snackbar() {
-  const { open, message, variant, long } = useSnapshot(SnackController.state);
+  const { open, message, variant } = useSnapshot(SnackController.state);
   const componentOpacity = useMemo(() => new Animated.Value(0), []);
 
   useEffect(() => {
@@ -23,20 +23,14 @@ export function Snackbar() {
         duration: 150,
         useNativeDriver: true
       }).start();
-      setTimeout(
-        () => {
-          Animated.timing(componentOpacity, {
-            toValue: 0,
-            duration: 300,
-            useNativeDriver: true
-          }).start(() => {
-            SnackController.hide();
-          });
-        },
-        long ? 15000 : 2200
-      );
+    } else {
+      Animated.timing(componentOpacity, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true
+      }).start();
     }
-  }, [open, long, componentOpacity]);
+  }, [open, componentOpacity]);
 
   return (
     <SnackbarComponent

package/src/partials/w3m-swap-details/index.tsx

@@ -1,6 +1,10 @@
 import { useSnapshot } from 'valtio';
 import { useState } from 'react';
-import { ConstantsUtil, NetworkController, SwapController } from '@reown/appkit-core-react-native';
+import {
+  ConnectionsController,
+  ConstantsUtil,
+  SwapController
+} from '@reown/appkit-core-react-native';
 import {
   FlexView,
   Text,
@@ -80,7 +84,7 @@ export function SwapDetails({ initialOpen, canClose }: SwapDetailsProps) {
     setModalData(
       getModalData('networkCost', {
         networkSymbol: SwapController.state.networkTokenSymbol,
-        networkName: NetworkController.state.caipNetwork?.name
+        networkName: ConnectionsController.state.activeNetwork?.name
       })
     );
   };