@openzeppelin/ui-builder-adapter-evm 1.2.0 → 1.4.0

package/src/wallet/rainbowkit/componentFactory.ts

@@ -1,16 +1,18 @@
-import type { EcosystemWalletComponents } from '@openzeppelin/ui-types';
+/**
+ * EVM Adapter RainbowKit Component Factory
+ *
+ * Factory function for creating RainbowKit components.
+ * Separated from components.tsx to support React Fast Refresh.
+ */
+import { createRainbowKitComponents as coreCreateRainbowKitComponents } from '@openzeppelin/ui-builder-adapter-evm-core';
 
 import { RainbowKitConnectButton } from './components';
 
 /**
- * Creates the complete set of RainbowKit wallet components.
+ * Creates the complete set of RainbowKit wallet components for the EVM adapter.
  *
  * @returns An object containing all RainbowKit wallet components
  */
-export function createRainbowKitComponents(): EcosystemWalletComponents {
-  return {
-    ConnectButton: RainbowKitConnectButton,
-    // RainbowKit's ConnectButton is comprehensive and typically includes account display
-    // So we don't provide separate AccountDisplay or NetworkSwitcher components
-  };
+export function createRainbowKitComponents() {
+  return coreCreateRainbowKitComponents(RainbowKitConnectButton);
 }

package/src/wallet/rainbowkit/components.tsx

@@ -1,140 +1,23 @@
-import { Loader2 } from 'lucide-react';
-import React, { useContext, useEffect, useRef, useState } from 'react';
-
-import { Button } from '@openzeppelin/ui-components';
+/**
+ * EVM Adapter RainbowKit Components
+ *
+ * This file exports only React components to support Fast Refresh.
+ * Factory functions are in componentFactory.ts.
+ */
+import { createRainbowKitConnectButton } from '@openzeppelin/ui-builder-adapter-evm-core';
 import type { BaseComponentProps } from '@openzeppelin/ui-types';
-import { cn, logger } from '@openzeppelin/ui-utils';
 
-import { CustomConnectButton } from '../components';
-import { WagmiProviderInitializedContext } from '../context/wagmi-context';
 import { evmUiKitManager } from '../evmUiKitManager';
-import { extractRainbowKitCustomizations } from './types';
-
-const MIN_COMPONENT_LOADING_DISPLAY_MS = 1000; // 1 second artificial delay
 
 /**
- * Creates a lazy-loaded RainbowKit ConnectButton component.
- *
- * @returns A React component that dynamically imports the RainbowKit ConnectButton
+ * Props for the RainbowKitConnectButton component.
  */
-export const RainbowKitConnectButton: React.FC<BaseComponentProps> = (props) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [Component, setComponent] = useState<React.ComponentType<any> | null>(null);
-  const [error, setError] = useState<Error | null>(null);
-  const [isLoadingComponent, setIsLoadingComponent] = useState(true);
-  const [showComponentLoadingOverride, setShowComponentLoadingOverride] = useState(false);
-  const componentLoadingTimerRef = useRef<NodeJS.Timeout | null>(null);
-  const [managerState, setManagerState] = useState(evmUiKitManager.getState());
-
-  const isWagmiProviderReady = useContext(WagmiProviderInitializedContext);
-
-  // Subscribe to UI kit manager state changes
-  useEffect(() => {
-    const unsubscribe = evmUiKitManager.subscribe(() => {
-      setManagerState(evmUiKitManager.getState());
-    });
-    return unsubscribe;
-  }, []);
-
-  useEffect(() => {
-    let isMounted = true;
-    setIsLoadingComponent(true);
-    setShowComponentLoadingOverride(true); // Start showing override immediately
-
-    if (componentLoadingTimerRef.current) {
-      clearTimeout(componentLoadingTimerRef.current);
-    }
-    componentLoadingTimerRef.current = setTimeout(() => {
-      if (isMounted) {
-        setShowComponentLoadingOverride(false);
-      }
-      componentLoadingTimerRef.current = null;
-    }, MIN_COMPONENT_LOADING_DISPLAY_MS);
-
-    const loadComponent = async () => {
-      try {
-        const rainbowKit = await import('@rainbow-me/rainbowkit');
-        if (isMounted) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          setComponent(() => rainbowKit.ConnectButton as React.ComponentType<any>);
-          // Actual component loading is done, but override might still be active
-          setIsLoadingComponent(false);
-        }
-      } catch (err) {
-        if (isMounted) {
-          setError(err instanceof Error ? err : new Error(String(err)));
-          setIsLoadingComponent(false); // Finished loading (with an error)
-          logger.error('RainbowKitConnectButton', 'Failed to load RainbowKit ConnectButton:', err);
-        }
-      }
-    };
-
-    loadComponent();
+export type RainbowKitConnectButtonProps = BaseComponentProps;
 
-    return () => {
-      isMounted = false;
-      if (componentLoadingTimerRef.current) {
-        clearTimeout(componentLoadingTimerRef.current);
-      }
-    };
-  }, []); // Effect for dynamic import runs once
-
-  const renderLoadingPlaceholder = (message: string) => (
-    <Button
-      disabled={true}
-      variant="outline"
-      size="sm"
-      className={cn('h-8 px-2 text-xs', props.className)}
-    >
-      <Loader2 className="h-3.5 w-3.5 animate-spin mr-1.5" />
-      {message}
-    </Button>
-  );
-
-  if (error) {
-    logger.warn(
-      'RainbowKitConnectButton',
-      'Error loading RainbowKit ConnectButton. Displaying fallback CustomConnectButton.'
-    );
-    return <CustomConnectButton {...props} />;
-  }
-
-  // Show "Loading Wallet..." if component is still factually loading OR if the override is active
-  if (isLoadingComponent || showComponentLoadingOverride) {
-    return renderLoadingPlaceholder('Loading Wallet...');
-  }
-  // At this point, component import has finished (successfully or not handled by error state)
-  // AND the minimum display time for "Loading Wallet..." has passed.
-
-  // Now check if the provider context is ready
-  if (!isWagmiProviderReady) {
-    // No separate delay for this message; it appears if context isn't ready after component load delay.
-    return renderLoadingPlaceholder('Initializing Provider...');
-  }
-
-  // Component should be non-null here if no error and not isLoadingComponent
-  if (!Component) {
-    // This case should ideally not be hit if logic is correct, but as a safeguard:
-    logger.warn('RainbowKitConnectButton', 'Component is null after loading phase, falling back.');
-    return <CustomConnectButton {...props} />;
-  }
-
-  // Extract custom configuration from the manager state
-  const kitConfig = managerState.currentFullUiKitConfig?.kitConfig;
-  const customizations = extractRainbowKitCustomizations(kitConfig);
-  const connectButtonConfig = customizations?.connectButton;
-
-  // Merge props: base props + custom configuration + any overrides from props
-  // This allows the config to set defaults while still allowing prop overrides
-  const finalProps = {
-    ...connectButtonConfig, // Apply custom configuration from config
-    ...props, // Allow props to override configuration
-  };
-
-  logger.debug('RainbowKitConnectButton', 'Rendering with configuration:', {
-    configFromFile: connectButtonConfig,
-    finalProps: finalProps,
-  });
-
-  return <Component {...finalProps} />;
-};
+/**
+ * RainbowKitConnectButton component configured with the EVM UI kit manager.
+ * This component lazily loads the RainbowKit ConnectButton and manages
+ * its state through the evmUiKitManager.
+ */
+export const RainbowKitConnectButton: React.FC<RainbowKitConnectButtonProps> =
+  createRainbowKitConnectButton(evmUiKitManager);

package/src/wallet/rainbowkit/index.ts

@@ -1,5 +1,27 @@
-export * from './components';
-export * from './utils';
-export * from './componentFactory';
-export * from './types';
-export { createRainbowKitWagmiConfig, getWagmiConfigForRainbowKit } from './config-service';
+// Re-export types from core
+export type {
+  AppInfo,
+  RainbowKitConnectButtonProps,
+  RainbowKitProviderProps,
+  RainbowKitKitConfig,
+  RainbowKitCustomizations,
+} from '@openzeppelin/ui-builder-adapter-evm-core';
+
+export {
+  isRainbowKitCustomizations,
+  extractRainbowKitCustomizations,
+  validateRainbowKitConfig,
+  getRawUserNativeConfig,
+} from '@openzeppelin/ui-builder-adapter-evm-core';
+
+// EVM-specific components
+export { RainbowKitConnectButton } from './components';
+
+// EVM-specific factory functions
+export { createRainbowKitComponents } from './componentFactory';
+
+// Re-export config service from core for convenience
+export {
+  createRainbowKitWagmiConfig,
+  getWagmiConfigForRainbowKit,
+} from '@openzeppelin/ui-builder-adapter-evm-core';

package/src/wallet/utils/__tests__/uiKitService.test.ts

@@ -1,9 +1,13 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import {
+  CustomAccountDisplay,
+  CustomConnectButton,
+  CustomNetworkSwitcher,
+} from '@openzeppelin/ui-builder-adapter-evm-core';
 import type { ComponentExclusionConfig, UiKitConfiguration } from '@openzeppelin/ui-types';
 import { logger } from '@openzeppelin/ui-utils';
 
-import { CustomAccountDisplay, CustomConnectButton, CustomNetworkSwitcher } from '../../components';
 import { getResolvedWalletComponents } from '../uiKitService';
 
 // Mock the logger

package/src/wallet/utils/connection.ts

@@ -1,5 +1,10 @@
 import type { GetAccountReturnType } from '@wagmi/core';
 
+import {
+  connectAndEnsureCorrectNetworkCore,
+  DEFAULT_DISCONNECTED_STATUS,
+  type EvmWalletConnectionResult,
+} from '@openzeppelin/ui-builder-adapter-evm-core';
 import type { Connector } from '@openzeppelin/ui-types';
 import { logger } from '@openzeppelin/ui-utils';
 
@@ -41,52 +46,14 @@ export async function getEvmAvailableConnectors(): Promise<Connector[]> {
 export async function connectAndEnsureCorrectNetwork(
   connectorId: string,
   targetChainId: number
-): Promise<{ connected: boolean; address?: string; chainId?: number; error?: string }> {
+): Promise<EvmWalletConnectionResult> {
   const impl = await getEvmWalletImplementation();
   if (!impl) {
     logger.error(LOG_SYSTEM, 'connectAndEnsureCorrectNetwork: Wallet implementation not ready.');
     return { connected: false, error: 'Wallet system not initialized.' };
   }
 
-  const connectionResult = await impl.connect(connectorId);
-  if (!connectionResult.connected || !connectionResult.address || !connectionResult.chainId) {
-    return { connected: false, error: connectionResult.error || 'Connection failed' };
-  }
-
-  if (connectionResult.chainId !== targetChainId) {
-    logger.info(
-      LOG_SYSTEM,
-      `Connected to chain ${connectionResult.chainId}, but target is ${targetChainId}. Attempting switch.`
-    );
-    try {
-      await impl.switchNetwork(targetChainId);
-      const postSwitchStatus = impl.getWalletConnectionStatus();
-      if (postSwitchStatus.chainId !== targetChainId) {
-        const switchError = `Failed to switch to target network ${targetChainId}. Current: ${postSwitchStatus.chainId}`;
-        logger.error(LOG_SYSTEM, switchError);
-        // Attempt to disconnect to leave a clean state if switch fails
-        try {
-          await impl.disconnect();
-        } catch (e) {
-          logger.warn(LOG_SYSTEM, 'Failed to disconnect after network switch failure.', e);
-        }
-        return { connected: false, error: switchError };
-      }
-      logger.info(LOG_SYSTEM, `Successfully switched to target chain ${targetChainId}.`);
-      return { ...connectionResult, chainId: postSwitchStatus.chainId }; // Return updated chainId
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      logger.error(LOG_SYSTEM, 'Network switch failed:', errorMessage);
-      // Attempt to disconnect to leave a clean state if switch fails
-      try {
-        await impl.disconnect();
-      } catch (e) {
-        logger.warn(LOG_SYSTEM, 'Failed to disconnect after network switch failure.', e);
-      }
-      return { connected: false, error: `Network switch failed: ${errorMessage}` };
-    }
-  }
-  return connectionResult;
+  return connectAndEnsureCorrectNetworkCore(impl, connectorId, targetChainId, LOG_SYSTEM);
 }
 
 /**
@@ -117,18 +84,7 @@ export function getEvmWalletConnectionStatus(): GetAccountReturnType {
       LOG_SYSTEM,
       'getEvmWalletConnectionStatus: Wallet implementation not ready. Returning default disconnected state.'
     );
-    return {
-      isConnected: false,
-      isConnecting: false,
-      isDisconnected: true,
-      isReconnecting: false,
-      status: 'disconnected',
-      address: undefined,
-      addresses: undefined,
-      chainId: undefined,
-      chain: undefined,
-      connector: undefined,
-    };
+    return DEFAULT_DISCONNECTED_STATUS;
   }
   return impl.getWalletConnectionStatus();
 }

package/src/wallet/utils/index.ts

@@ -1,6 +1,4 @@
 export * from './connection';
 export * from './walletImplementationManager';
-export * from './filterWalletComponents';
-export * from './SafeWagmiComponent';
 export * from './uiKitService';
 export * from './wallet-status';

package/src/wallet/utils/uiKitService.ts

@@ -1,10 +1,14 @@
+import {
+  CustomAccountDisplay,
+  CustomConnectButton,
+  CustomNetworkSwitcher,
+  filterWalletComponents,
+  getComponentExclusionsFromConfig,
+} from '@openzeppelin/ui-builder-adapter-evm-core';
 import type { EcosystemWalletComponents, UiKitConfiguration } from '@openzeppelin/ui-types';
 import { logger } from '@openzeppelin/ui-utils';
 
-import { CustomAccountDisplay, CustomConnectButton, CustomNetworkSwitcher } from '../components';
 import { createRainbowKitComponents, validateRainbowKitConfig } from '../rainbowkit';
-// Assuming this is the default custom provider
-import { filterWalletComponents, getComponentExclusionsFromConfig } from './filterWalletComponents';
 
 /** Service for resolving UI kit specific components and providers for the EVM adapter. */
 

package/src/wallet/utils/walletImplementationManager.ts

@@ -1,7 +1,8 @@
+import type { WagmiWalletImplementation } from '@openzeppelin/ui-builder-adapter-evm-core';
 import type { UiKitConfiguration } from '@openzeppelin/ui-types';
 import { appConfigService, logger } from '@openzeppelin/ui-utils';
 
-import { WagmiWalletImplementation } from '../implementation/wagmi-implementation';
+import { createEvmWalletImplementation } from '../implementation/wagmi-implementation';
 
 let walletImplementationInstance: WagmiWalletImplementation | undefined;
 let walletImplementationPromise: Promise<WagmiWalletImplementation> | undefined;
@@ -37,14 +38,14 @@ export async function getEvmWalletImplementation(): Promise<WagmiWalletImplement
         | string
         | undefined;
 
-      // Pass initialUiKitConfig to the constructor
-      const instance = new WagmiWalletImplementation(wcProjectId, initialUiKitConfig);
+      // Use factory function for proper EVM configuration
+      const instance = createEvmWalletImplementation(wcProjectId, initialUiKitConfig);
       logger.info(LOG_SYSTEM, 'WagmiWalletImplementation singleton created (async).');
       walletImplementationInstance = instance;
       return instance;
     } catch (error) {
       logger.error(LOG_SYSTEM, 'Failed to initialize WagmiWalletImplementation (async):', error);
-      const fallbackInstance = new WagmiWalletImplementation();
+      const fallbackInstance = createEvmWalletImplementation();
       walletImplementationInstance = fallbackInstance;
       return fallbackInstance;
     }

package/src/wallet/utils.ts

@@ -1,9 +1,4 @@
-import type {
-  EcosystemWalletComponents,
-  NativeConfigLoader,
-  UiKitConfiguration,
-} from '@openzeppelin/ui-types';
-import { logger } from '@openzeppelin/ui-utils';
+import type { EcosystemWalletComponents, UiKitConfiguration } from '@openzeppelin/ui-types';
 
 // Import the actual service functions instead of using placeholders
 import { getResolvedWalletComponents as getWalletComponentsFromService } from './utils/uiKitService';
@@ -14,62 +9,3 @@ export function getResolvedWalletComponents(
 ): EcosystemWalletComponents | undefined {
   return getWalletComponentsFromService(uiKitConfig);
 }
-
-/**
- * Resolves and initializes the kit-specific configuration.
- * This function acts as a manager to call the appropriate kit's configuration initializer.
- *
- * @param kitName The name of the UI kit (e.g., 'rainbowkit').
- * @param programmaticKitConfig Optional base/programmatic config passed to the kit initializer.
- * @param loadConfigModule Optional generic callback to load configuration modules by path.
- * @returns A Promise resolving to the final kitConfig (Record<string, unknown>) for the specified kit, or null.
- */
-export async function resolveAndInitializeKitConfig(
-  kitName?: string, // kitName is used to construct the path to the conventional config file
-  programmaticKitConfig?: Record<string, unknown>,
-  loadConfigModule?: NativeConfigLoader
-): Promise<Record<string, unknown> | null> {
-  logger.debug(
-    'resolveAndInitializeKitConfig',
-    `Resolving native config for kit: ${kitName || 'none'}`,
-    {
-      hasProgrammaticKitConfig: !!programmaticKitConfig,
-      hasLoadConfigModule: !!loadConfigModule,
-    }
-  );
-
-  let userNativeConfig: Record<string, unknown> | null = null;
-
-  // Only attempt to load a native config if a kitName is provided and a loader function exists.
-  // And the kitName is not 'custom' or 'none' as those typically don't have dedicated native config files.
-  if (kitName && kitName !== 'custom' && kitName !== 'none' && loadConfigModule) {
-    const conventionalConfigPath = `./config/wallet/${kitName}.config.ts`;
-
-    try {
-      userNativeConfig = await loadConfigModule(conventionalConfigPath);
-    } catch (error) {
-      logger.warn(
-        'resolveAndInitializeKitConfig',
-        `Call to load native config for ${kitName} from ${conventionalConfigPath} failed. Error:`,
-        error
-      );
-    }
-  }
-
-  // Merge the loaded user native config with the programmatically passed kitConfig.
-  // Programmatic config can override or augment the native file's settings.
-  if (userNativeConfig && programmaticKitConfig) {
-    const mergedConfig = { ...userNativeConfig, ...programmaticKitConfig };
-    return mergedConfig;
-  } else if (userNativeConfig) {
-    return userNativeConfig;
-  } else if (programmaticKitConfig) {
-    return programmaticKitConfig;
-  }
-
-  logger.debug(
-    'resolveAndInitializeKitConfig',
-    `No native or programmatic kitConfig provided for ${kitName || 'none'}. Returning null.`
-  );
-  return null;
-}

package/src/abi/__tests__/etherscan-v2.test.ts

@@ -1,117 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { TypedEvmNetworkConfig } from '../../types';
-import { shouldUseV2Api, testEtherscanV2Connection } from '../etherscan-v2';
-
-// Mock the dependencies
-vi.mock('../../configuration/explorer', () => ({
-  resolveExplorerConfig: vi.fn(),
-}));
-
-vi.mock('@openzeppelin/ui-utils', () => ({
-  logger: {
-    info: vi.fn(),
-    error: vi.fn(),
-    warn: vi.fn(),
-  },
-}));
-
-// Mock global fetch
-global.fetch = vi.fn();
-
-describe('Etherscan V2 API', () => {
-  const mockNetworkConfig: TypedEvmNetworkConfig = {
-    id: 'ethereum-mainnet',
-    name: 'Ethereum Mainnet',
-    ecosystem: 'evm',
-    network: 'ethereum',
-    type: 'mainnet',
-    isTestnet: false,
-    chainId: 1,
-    rpcUrl: 'https://mainnet.infura.io/v3/test',
-    explorerUrl: 'https://etherscan.io',
-    supportsEtherscanV2: true,
-    exportConstName: 'ethereumMainnet',
-    nativeCurrency: {
-      name: 'Ether',
-      symbol: 'ETH',
-      decimals: 18,
-    },
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('shouldUseV2Api', () => {
-    it('should return true if network supports V2 and no user config', () => {
-      expect(shouldUseV2Api(mockNetworkConfig)).toBe(true);
-    });
-
-    it('should return true for networks that support V2 API', () => {
-      expect(shouldUseV2Api(mockNetworkConfig)).toBe(true);
-    });
-
-    it('should return false for networks without V2 support even with user preference', () => {
-      const networkWithoutV2 = { ...mockNetworkConfig, supportsEtherscanV2: false };
-      expect(shouldUseV2Api(networkWithoutV2)).toBe(false);
-    });
-  });
-
-  describe('testEtherscanV2Connection', () => {
-    it('should allow testing connection without API key when network does not require it', async () => {
-      const networkWithoutKeyRequired: TypedEvmNetworkConfig = {
-        ...mockNetworkConfig,
-        requiresExplorerApiKey: false,
-      };
-
-      const mockResponse = {
-        status: '1',
-        result: '0x1234567',
-      };
-
-      vi.mocked(global.fetch).mockResolvedValueOnce({
-        ok: true,
-        json: vi.fn().mockResolvedValueOnce(mockResponse),
-      } as unknown as Response);
-
-      const result = await testEtherscanV2Connection(networkWithoutKeyRequired);
-
-      expect(result.success).toBe(true);
-      expect(result.latency).toBeDefined();
-      expect(result.error).toBeUndefined();
-
-      // Verify API call was made without API key
-      const fetchCall = vi.mocked(global.fetch).mock.calls[0][0] as string;
-      expect(fetchCall).not.toContain('apikey=');
-    });
-
-    it('should require API key for testing when network requires it', async () => {
-      const result = await testEtherscanV2Connection(mockNetworkConfig);
-
-      expect(result.success).toBe(false);
-      expect(result.error).toBe('API key is required for testing connection to this explorer');
-    });
-
-    it('should test with API key when provided', async () => {
-      const mockResponse = {
-        status: '1',
-        result: '0x1234567',
-      };
-
-      vi.mocked(global.fetch).mockResolvedValueOnce({
-        ok: true,
-        json: vi.fn().mockResolvedValueOnce(mockResponse),
-      } as unknown as Response);
-
-      const result = await testEtherscanV2Connection(mockNetworkConfig, 'test-api-key');
-
-      expect(result.success).toBe(true);
-      expect(result.latency).toBeDefined();
-
-      // Verify API call was made with API key
-      const fetchCall = vi.mocked(global.fetch).mock.calls[0][0] as string;
-      expect(fetchCall).toContain('apikey=test-api-key');
-    });
-  });
-});