@reown/appkit-react-native 0.0.0-feat-multichain-20250519172433 → 0.0.0-feat-multichain-20250604171123

package/src/hooks/useAccount.ts

@@ -11,11 +11,11 @@ export function useAccount() {
     connections
   } = useSnapshot(ConnectionsController.state);
 
-  const connection = connections[activeNamespace ?? ''];
+  const connection = activeNamespace ? connections.get(activeNamespace) : undefined;
 
   return {
     address: address?.split(':')[2],
     isConnected: !!address,
-    chainId: connection?.activeChain
+    chainId: connection?.caipNetwork
   };
 }

package/src/hooks/useProvider.ts

@@ -1,15 +1,25 @@
 import { useSnapshot } from 'valtio';
 import { ConnectionsController } from '@reown/appkit-core-react-native';
-import type { Provider } from '@reown/appkit-common-react-native';
+import type { Provider, ChainNamespace } from '@reown/appkit-common-react-native';
 
-export function useProvider(namespace?: string): Provider | undefined {
+interface ProviderResult {
+  provider?: Provider;
+  providerType?: ChainNamespace;
+}
+
+export function useProvider(namespace?: ChainNamespace): ProviderResult {
   const { connections, activeNamespace } = useSnapshot(ConnectionsController.state);
 
-  if (!namespace || !activeNamespace) return undefined;
+  const targetNamespace = namespace ?? activeNamespace;
+
+  if (!targetNamespace) return { provider: undefined, providerType: undefined };
 
-  const connection = connections[namespace ?? activeNamespace];
+  const connection = connections.get(targetNamespace);
 
-  if (!connection) return undefined;
+  if (!connection) return { provider: undefined, providerType: undefined };
 
-  return connection.adapter.connector?.getProvider();
+  return {
+    provider: connection.adapter.connector?.getProvider(),
+    providerType: connection.adapter.getSupportedNamespace()
+  };
 }

package/src/networks/solana.ts

@@ -30,7 +30,7 @@ export const solanaDevnet: AppKitNetwork = {
   testnet: true
 };
 
-export const solanaTestnet = {
+export const solanaTestnet: AppKitNetwork = {
   id: '4uhcVJyU9pJkvQyS88uRDiswHXSCkY3z',
   name: 'Solana Testnet',
   nativeCurrency: { name: 'Solana', symbol: 'SOL', decimals: 9 },

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

@@ -15,6 +15,7 @@ import {
   AccountController,
   AssetUtil,
   ConnectionsController,
+  ConstantsUtil,
   EventsController,
   OptionsController,
   TransactionsController
@@ -32,9 +33,11 @@ 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 { activeNetwork } = useSnapshot(ConnectionsController.state);
   const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
-  const isSupported = activeNamespace && ['eip155', 'solana'].includes(activeNamespace);
+  const isSupported =
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
 
   const handleLoadMore = () => {
     const address = ConnectionsController.state.activeAddress?.split(':')[2];

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

@@ -3,10 +3,10 @@ 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,
@@ -25,8 +25,12 @@ export function AccountWalletFeatures() {
   const [activeTab, setActiveTab] = useState(0);
   const { tokenBalance } = useSnapshot(AccountController.state);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const balance = CoreHelperUtil.calculateAndFormatBalance(tokenBalance as BalanceType[]);
-  const isSwapsEnabled = features?.swaps;
+  const isSwapsEnabled =
+    features?.swaps &&
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(activeNetwork.caipNetworkId);
 
   const onTabChange = (index: number) => {
     setActiveTab(index);
@@ -46,23 +50,16 @@ export function AccountWalletFeatures() {
   };
 
   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: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+      }
+    });
+    RouterController.push('Swap');
   };
 
   const onSendPress = () => {
@@ -70,7 +67,7 @@ export function AccountWalletFeatures() {
       type: 'track',
       event: 'OPEN_SEND',
       properties: {
-        network: NetworkController.state.caipNetwork?.id || '',
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
         isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
       }
     });

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

@@ -43,7 +43,7 @@ export function SendInputToken({
       const isNetworkToken =
         token.address === undefined ||
         Object.values(ConstantsUtil.NATIVE_TOKEN_ADDRESS).some(
-          nativeAddress => token?.address === nativeAddress
+          nativeAddress => token?.address?.split(':')[2] === nativeAddress
         );
 
       const numericGas = NumberUtil.bigNumber(gasPrice).shiftedBy(-token.quantity.decimals);

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
       })
     );
   };

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

@@ -128,7 +128,7 @@ export function SwapInput({
             >
               <Text variant="small-400" color="fg-200" numberOfLines={1}>
                 {isMarketValueGreaterThanZero
-                  ? `~$${UiUtil.formatNumberToLocalString(marketValue, 2)}`
+                  ? `~$${UiUtil.formatNumberToLocalString(marketValue, 6)}`
                   : ''}
               </Text>
               {showMax && (

package/src/utils/NetworkUtil.ts

@@ -1,32 +1,32 @@
 import { ConstantsUtil } from '@reown/appkit-common-react-native';
-import type { AppKitNetwork, CaipNetworkId } from '@reown/appkit-common-react-native';
+import type { AppKitNetwork, CaipNetworkId, Network } from '@reown/appkit-common-react-native';
 
 export const NetworkUtil = {
-  //TODO: check this function
-  formatNetworks(networks: AppKitNetwork[], projectId: string): AppKitNetwork[] {
-    return networks.map(network => {
-      const formattedNetwork = {
-        ...network,
-        rpcUrls: { ...network.rpcUrls }
-      };
-
-      Object.keys(formattedNetwork.rpcUrls).forEach(key => {
-        const rpcConfig = formattedNetwork.rpcUrls[key];
-        if (rpcConfig?.http?.some(url => url.includes(ConstantsUtil.BLOCKCHAIN_API_RPC_URL))) {
-          formattedNetwork.rpcUrls[key] = {
-            ...rpcConfig,
-            http: [
-              this.getBlockchainApiRpcUrl(
-                network.caipNetworkId ?? `${network.chainNamespace ?? 'eip155'}:${network.id}`,
-                projectId
-              )
-            ]
-          };
-        }
-      });
-
-      return formattedNetwork;
+  formatNetwork(network: Network, projectId: string): AppKitNetwork {
+    const formattedNetwork = {
+      ...network,
+      rpcUrls: { ...network.rpcUrls },
+      chainNamespace: network.chainNamespace ?? 'eip155',
+      caipNetworkId: network.caipNetworkId ?? `${network.chainNamespace ?? 'eip155'}:${network.id}`
+    };
+
+    Object.keys(formattedNetwork.rpcUrls).forEach(key => {
+      const rpcConfig = formattedNetwork.rpcUrls[key];
+      if (rpcConfig?.http?.some(url => url.includes(ConstantsUtil.BLOCKCHAIN_API_RPC_URL))) {
+        formattedNetwork.rpcUrls[key] = {
+          ...rpcConfig,
+          http: [this.getBlockchainApiRpcUrl(formattedNetwork.caipNetworkId, projectId)]
+        };
+      }
     });
+
+    return formattedNetwork;
+  },
+
+  formatNetworks(networks: Network[], projectId: string): AppKitNetwork[] {
+    const formattedNetworks = networks.map(network => this.formatNetwork(network, projectId));
+
+    return formattedNetworks;
   },
 
   getBlockchainApiRpcUrl(caipNetworkId: CaipNetworkId, projectId: string) {

package/src/utils/UiUtil.ts

@@ -4,24 +4,18 @@ import {
   StorageUtil,
   type WcWallet
 } from '@reown/appkit-core-react-native';
-import {
-  LayoutAnimation,
-  type LayoutAnimationProperty,
-  type LayoutAnimationType
-} from 'react-native';
 
 export const UiUtil = {
   TOTAL_VISIBLE_WALLETS: 4,
 
   createViewTransition: () => {
-    LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'));
+    //TODO: replace this with reanimated
+    // LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'));
   },
 
-  animateChange: (
-    type: LayoutAnimationType = 'linear',
-    creationProp: LayoutAnimationProperty = 'scaleX'
-  ) => {
-    LayoutAnimation.configureNext(LayoutAnimation.create(150, type, creationProp));
+  animateChange: () => {
+    //TODO: replace this with reanimated
+    // LayoutAnimation.configureNext(LayoutAnimation.create(150, type, creationProp));
   },
 
   storeConnectedWallet: async (

package/src/views/w3m-account-default-view/index.tsx

@@ -59,7 +59,16 @@ export function AccountDefaultView() {
   const showExplorer = Object.keys(activeNetwork?.blockExplorers ?? {}).length > 0 && !isAuth;
   const showBack = history.length > 1;
   const showSwitchAccountType = isAuth && NetworkController.checkIfSmartAccountEnabled();
-  const showActivity = !isAuth && activeNamespace && ['eip155', 'solana'].includes(activeNamespace);
+  const showActivity =
+    !isAuth &&
+    activeNamespace &&
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
+  const showSwaps =
+    !isAuth &&
+    features?.swaps &&
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(activeNetwork.caipNetworkId);
   const { padding } = useCustomDimensions();
   const { disconnect } = useAppKit();
 
@@ -82,7 +91,7 @@ export function AccountDefaultView() {
           event: 'SET_PREFERRED_ACCOUNT_TYPE',
           properties: {
             accountType,
-            network: NetworkController.state.caipNetwork?.id || ''
+            network: ConnectionsController.state.activeNetwork?.caipNetworkId || ''
           }
         });
       }
@@ -124,23 +133,16 @@ export function AccountDefaultView() {
   };
 
   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: false
-        }
-      });
-      RouterController.push('Swap');
-    }
+    SwapController.resetState();
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'OPEN_SWAP',
+      properties: {
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+        isSmartAccount: false
+      }
+    });
+    RouterController.push('Swap');
   };
 
   const onBuyPress = () => {
@@ -276,7 +278,7 @@ export function AccountDefaultView() {
                 <Text color="fg-100">Buy crypto</Text>
               </ListItem>
             )}
-            {!isAuth && features?.swaps && (
+            {showSwaps && (
               <ListItem
                 chevron
                 icon="recycleHorizontal"

package/src/views/w3m-connect-view/index.tsx

@@ -31,6 +31,7 @@ export function ConnectView() {
   const { padding } = useCustomDimensions();
   const { keyboardShown, keyboardHeight } = useKeyboard();
 
+  //TODO: check this
   // const isWalletConnectEnabled = connectors.some(c => c.type === 'WALLET_CONNECT');
   const isWalletConnectEnabled = true;
   const isAuthEnabled = connectors.some(c => c.type === 'AUTH');

package/src/views/w3m-swap-preview-view/index.tsx

@@ -86,11 +86,14 @@ export function SwapPreviewView() {
               Send
             </Text>
             <Text variant="paragraph-400" color="fg-100">
-              ${UiUtil.formatNumberToLocalString(sourceTokenMarketValue, 2)}
+              ${UiUtil.formatNumberToLocalString(sourceTokenMarketValue, 6)}
             </Text>
           </FlexView>
           <TokenButton
-            text={` ${sourceTokenAmount} ${sourceToken?.symbol}`}
+            text={` ${UiUtil.formatNumberToLocalString(
+              sourceTokenAmount,
+              8
+            )} ${sourceToken?.symbol}`}
             imageUrl={sourceToken?.logoUri}
             inverse
             disabled
@@ -103,7 +106,7 @@ export function SwapPreviewView() {
               Receive
             </Text>
             <Text variant="paragraph-400" color="fg-100">
-              ${UiUtil.formatNumberToLocalString(toTokenMarketValue, 2)}
+              ${UiUtil.formatNumberToLocalString(toTokenMarketValue, 6)}
             </Text>
           </FlexView>
           <TokenButton

package/src/views/w3m-swap-view/index.tsx

@@ -3,8 +3,9 @@ import { useCallback, useEffect } from 'react';
 import { Platform, ScrollView } from 'react-native';
 import {
   AccountController,
+  ConnectionsController,
+  ConstantsUtil,
   EventsController,
-  NetworkController,
   RouterController,
   SwapController
 } from '@reown/appkit-core-react-native';
@@ -91,7 +92,7 @@ export function SwapView() {
       type: 'track',
       event: 'INITIATE_SWAP',
       properties: {
-        network: NetworkController.state.caipNetwork?.id || '',
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
         swapFromToken: SwapController.state.sourceToken?.symbol || '',
         swapToToken: SwapController.state.toToken?.symbol || '',
         swapFromAmount: SwapController.state.sourceTokenAmount || '',
@@ -103,9 +104,12 @@ export function SwapView() {
   };
 
   const onSourceMaxPress = () => {
-    const isNetworkToken =
-      SwapController.state.sourceToken?.address ===
-      NetworkController.getActiveNetworkTokenAddress();
+    const { activeNamespace, activeCaipNetworkId } = ConnectionsController.state;
+    const networkTokenAddress = activeNamespace
+      ? `${activeCaipNetworkId}:${ConstantsUtil.NATIVE_TOKEN_ADDRESS[activeNamespace]}`
+      : undefined;
+
+    const isNetworkToken = SwapController.state.sourceToken?.address === networkTokenAddress;
 
     const _gasPriceInUSD = SwapController.state.gasPriceInUSD;
     const _sourceTokenPriceInUSD = SwapController.state.sourceTokenPriceInUSD;