@reown/appkit-react-native 0.0.1 → 2.0.0-alpha.1

package/src/connectors/WalletConnectConnector.ts

@@ -1,21 +1,48 @@
-import { type Metadata, ConnectionController } from '@reown/appkit-core-react-native';
+import { ConnectionController } from '@reown/appkit-core-react-native';
 import { UniversalProvider, type IUniversalProvider } from '@walletconnect/universal-provider';
 import {
   WalletConnector,
   type AppKitNetwork,
   type Namespaces,
-  type ProposalNamespaces,
   type Provider,
   type WalletInfo,
   type ChainNamespace,
-  type CaipNetworkId
+  type CaipNetworkId,
+  type ConnectOptions,
+  type ConnectorInitOptions,
+  type Metadata
 } from '@reown/appkit-common-react-native';
 
+interface WalletConnectConnectorConfig {
+  projectId: string;
+}
+
 export class WalletConnectConnector extends WalletConnector {
-  private static universalProviderInstance: IUniversalProvider | null = null;
+  private readonly config: WalletConnectConnectorConfig;
+
+  constructor(config: WalletConnectConnectorConfig) {
+    super({ type: 'walletconnect' });
+    this.config = config;
+  }
+
+  override async init(ops: ConnectorInitOptions) {
+    super.init(ops);
+
+    const provider = await this.getUniversalProvider({
+      projectId: this.config.projectId,
+      metadata: ops.metadata
+    });
 
-  private constructor(provider: IUniversalProvider) {
-    super({ type: 'walletconnect', provider: provider as Provider });
+    this.provider = provider as Provider;
+
+    await this.restoreSession();
+  }
+
+  private async restoreSession(): Promise<boolean> {
+    const provider = this.getProvider() as IUniversalProvider;
+    if (!provider) {
+      return false;
+    }
 
     if (provider.session?.namespaces) {
       this.namespaces = provider.session.namespaces as Namespaces;
@@ -31,50 +58,41 @@ export class WalletConnectConnector extends WalletConnector {
         };
       }
     }
+
+    return true;
   }
 
-  private static async getUniversalProvider({
+  private async getUniversalProvider({
     projectId,
     metadata
   }: {
     projectId: string;
     metadata: Metadata;
   }): Promise<IUniversalProvider> {
-    if (!WalletConnectConnector.universalProviderInstance) {
-      WalletConnectConnector.universalProviderInstance = await UniversalProvider.init({
+    if (!this.provider) {
+      this.provider = (await UniversalProvider.init({
         projectId,
-        metadata
-      });
+        metadata,
+        storage: this.storage
+      })) as Provider;
     }
 
-    return WalletConnectConnector.universalProviderInstance;
-  }
-
-  public static async create({
-    projectId,
-    metadata
-  }: {
-    projectId: string;
-    metadata: Metadata;
-  }): Promise<WalletConnectConnector> {
-    const provider = await WalletConnectConnector.getUniversalProvider({
-      projectId,
-      metadata
-    });
-
-    return new WalletConnectConnector(provider);
+    return this.provider as IUniversalProvider;
   }
 
   override disconnect(): Promise<void> {
-    return this.provider.disconnect();
+    return this.getProvider().disconnect();
   }
 
-  override async connect(opts: { namespaces: ProposalNamespaces; defaultChain?: CaipNetworkId }) {
+  override async connect(opts: ConnectOptions) {
     function onUri(uri: string) {
       ConnectionController.setWcUri(uri);
     }
 
-    this.provider.on('display_uri', onUri);
+    const provider = this.getProvider() as IUniversalProvider;
+
+    // @ts-ignore
+    provider.on('display_uri', onUri);
 
     const session = await (this.provider as IUniversalProvider).connect({
       namespaces: {},
@@ -87,12 +105,16 @@ export class WalletConnectConnector extends WalletConnector {
 
     this.namespaces = session?.namespaces as Namespaces;
 
-    this.provider.off('display_uri', onUri);
+    provider.off('display_uri', onUri);
 
     return this.namespaces;
   }
 
   override getProvider(): Provider {
+    if (!this.provider) {
+      throw new Error('WalletConnectConnector: Provider not initialized. Call init() first.');
+    }
+
     return this.provider;
   }
 
@@ -101,8 +123,11 @@ export class WalletConnectConnector extends WalletConnector {
   }
 
   override switchNetwork(network: AppKitNetwork): Promise<void> {
-    if (!network.caipNetworkId) throw new Error('No network provided');
-    (this.provider as IUniversalProvider).setDefaultChain(network.caipNetworkId);
+    if (!network) throw new Error('No network provided');
+
+    let caipNetworkId = network.caipNetworkId ?? `eip155:${network.id}`;
+
+    (this.provider as IUniversalProvider).setDefaultChain(caipNetworkId);
 
     return Promise.resolve();
   }

package/src/hooks/useAccount.ts

@@ -1,18 +1,21 @@
 import { useSnapshot } from 'valtio';
 import { ConnectionsController } from '@reown/appkit-core-react-native';
+import { useAppKit } from './useAppKit';
 
 export function useAccount() {
+  useAppKit(); // Use the hook for checks
+
   const {
     activeAddress: address,
     activeNamespace,
     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/useAppKit.ts

@@ -1,4 +1,7 @@
 import { useContext } from 'react';
+import { useSnapshot } from 'valtio';
+import { ModalController } from '@reown/appkit-core-react-native';
+
 import type { AppKit } from '../AppKit';
 import { AppKitContext } from '../AppKitContext';
 
@@ -7,10 +10,12 @@ interface UseAppKitReturn {
   close: AppKit['close'];
   disconnect: (namespace?: string) => void;
   switchNetwork: AppKit['switchNetwork'];
+  isOpen: boolean;
 }
 
 export const useAppKit = (): UseAppKitReturn => {
   const context = useContext(AppKitContext);
+  const { open } = useSnapshot(ModalController.state);
 
   if (context === undefined) {
     throw new Error('useAppKit must be used within an AppKitProvider');
@@ -24,6 +29,7 @@ export const useAppKit = (): UseAppKitReturn => {
     open: context.appKit.open.bind(context.appKit),
     close: context.appKit.close.bind(context.appKit),
     disconnect: (namespace?: string) => context.appKit?.disconnect.bind(context.appKit)(namespace),
-    switchNetwork: context.appKit.switchNetwork.bind(context.appKit)
+    switchNetwork: context.appKit.switchNetwork.bind(context.appKit),
+    isOpen: open
   };
 };

package/src/hooks/useAppKitEvents.ts

@@ -2,19 +2,15 @@ import { useEffect } from 'react';
 import { useSnapshot } from 'valtio';
 import {
   EventsController,
-  OptionsController,
   type EventName,
   type EventsControllerState
 } from '@reown/appkit-core-react-native';
+import { useAppKit } from './useAppKit';
 
 export function useAppKitEvents(callback?: (newEvent: EventsControllerState) => void) {
-  const { projectId } = useSnapshot(OptionsController.state);
+  useAppKit(); // Use the hook for checks
   const { data, timestamp } = useSnapshot(EventsController.state);
 
-  if (!projectId) {
-    throw new Error('Please call "createAppKit" before using "useAppKitEvents" hook');
-  }
-
   useEffect(() => {
     const unsubscribe = EventsController.subscribe(newEvent => {
       callback?.(newEvent);
@@ -32,10 +28,7 @@ export function useAppKitEventSubscription(
   event: EventName,
   callback: (newEvent: EventsControllerState) => void
 ) {
-  const { projectId } = useSnapshot(OptionsController.state);
-  if (!projectId) {
-    throw new Error('Please call "createAppKit" before using "useAppKitEventSubscription" hook');
-  }
+  useAppKit(); // Use the hook for checks
 
   useEffect(() => {
     const unsubscribe = EventsController?.subscribeEvent(event, callback);

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/hooks/useWalletInfo.ts

@@ -1,13 +1,10 @@
 import { useSnapshot } from 'valtio';
-import { ConnectionsController, OptionsController } from '@reown/appkit-core-react-native';
+import { ConnectionsController } from '@reown/appkit-core-react-native';
+import { useAppKit } from './useAppKit';
 
 export function useWalletInfo() {
-  const { projectId } = useSnapshot(OptionsController.state);
+  useAppKit(); // Use the hook for checks
   const { walletInfo } = useSnapshot(ConnectionsController.state);
 
-  if (!projectId) {
-    throw new Error('Please call "createAppKit" before using "useWalletInfo" hook');
-  }
-
   return { walletInfo };
 }

package/src/index.ts

@@ -21,8 +21,10 @@ export type * from '@reown/appkit-core-react-native';
 export { CoreHelperUtil } from '@reown/appkit-core-react-native';
 
 export * from './AppKit';
-export * from './networks';
 export { AppKitProvider } from './AppKitContext';
+
+export type { AppKitNetwork, Storage } from '@reown/appkit-common-react-native';
+
 export { WalletConnectConnector } from './connectors/WalletConnectConnector';
 
 /****** Hooks *******/
@@ -31,3 +33,7 @@ export { useProvider } from './hooks/useProvider';
 export { useAccount } from './hooks/useAccount';
 export { useWalletInfo } from './hooks/useWalletInfo';
 export { useAppKitEvents, useAppKitEventSubscription } from './hooks/useAppKitEvents';
+
+/********** Networks **********/
+export { solana, solanaDevnet, solanaTestnet } from '@reown/appkit-common-react-native';
+export { bitcoin, bitcoinTestnet } from '@reown/appkit-common-react-native';

package/src/modal/w3m-modal/index.tsx

@@ -33,6 +33,7 @@ export function AppKit() {
   const { caipAddress, isConnected } = useSnapshot(AccountController.state);
   const { frameViewVisible, webviewVisible } = useSnapshot(WebviewController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+  const { projectId } = useSnapshot(OptionsController.state);
   const { height } = useWindowDimensions();
   const { isLandscape } = useCustomDimensions();
   const portraitHeight = height - 80;
@@ -50,10 +51,10 @@ export function AppKit() {
     return handleClose();
   };
 
-  const prefetch = async () => {
+  const prefetch = useCallback(async () => {
     await ApiController.prefetch();
     EventsController.sendEvent({ type: 'track', event: 'MODAL_LOADED' });
-  };
+  }, []);
 
   const handleClose = async () => {
     if (OptionsController.state.isSiweEnabled) {
@@ -117,8 +118,10 @@ export function AppKit() {
   };
 
   useEffect(() => {
-    prefetch();
-  }, []);
+    if (projectId) {
+      prefetch();
+    }
+  }, [projectId, prefetch]);
 
   useEffect(() => {
     onNewAddress(caipAddress);

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

@@ -15,6 +15,7 @@ import {
   AccountController,
   AssetUtil,
   ConnectionsController,
+  ConstantsUtil,
   EventsController,
   OptionsController,
   TransactionsController
@@ -34,6 +35,9 @@ export function AccountActivity({ style }: Props) {
   const { loading, transactions, next } = useSnapshot(TransactionsController.state);
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const isSupported =
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
 
   const handleLoadMore = () => {
     const address = ConnectionsController.state.activeAddress?.split(':')[2];
@@ -81,6 +85,17 @@ export function AccountActivity({ style }: Props) {
     );
   }
 
+  if (!isSupported) {
+    return (
+      <Placeholder
+        icon="infoCircle"
+        title="Unsupported network"
+        description="Activity list is not available for this network"
+        style={[styles.placeholder, style]}
+      />
+    );
+  }
+
   // Only show placeholder when we're not in initial load or loading state
   if (!Object.keys(transactionsByYear).length && !loading && !initialLoad) {
     return (

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/HelpersUtil.ts

@@ -1,14 +1,10 @@
 import type { Namespace, NamespaceConfig } from '@walletconnect/universal-provider';
-
 import type {
   AppKitNetwork,
   CaipNetworkId,
   ChainNamespace
 } from '@reown/appkit-common-react-native';
-import { solana, solanaDevnet } from '../networks/solana';
-// import { EnsController, type OptionsControllerState } from '@reown/appkit-controllers'
-
-// import { solana, solanaDevnet } from '../networks/index.js'
+import { solana, solanaDevnet } from '@reown/appkit-common-react-native';
 
 export const DEFAULT_METHODS = {
   solana: [

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 (