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

package/src/wallet/components/connect/ConnectorDialog.tsx

@@ -1,140 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@openzeppelin/ui-components';
-import { useDerivedAccountStatus, useDerivedConnectStatus } from '@openzeppelin/ui-react';
-import type { Connector } from '@openzeppelin/ui-types';
-
-import { isConfigEnabled, useUiKitConfig } from '../../hooks/useUiKitConfig';
-import { SafeWagmiComponent } from '../../utils/SafeWagmiComponent';
-
-/**
- * Dialog component for selecting a wallet connector
- */
-interface ConnectorDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export const ConnectorDialog: React.FC<ConnectorDialogProps> = ({ open, onOpenChange }) => {
-  // Prepare fallback dialog content
-  const unavailableContent = (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Wallet Connection Unavailable</DialogTitle>
-          <DialogDescription>
-            The wallet connection system is not properly initialized.
-          </DialogDescription>
-        </DialogHeader>
-      </DialogContent>
-    </Dialog>
-  );
-
-  // Only render wagmi-dependent part when provider is initialized
-  return (
-    <SafeWagmiComponent fallback={unavailableContent}>
-      <ConnectorDialogContent open={open} onOpenChange={onOpenChange} />
-    </SafeWagmiComponent>
-  );
-};
-
-// Inner content that uses wagmi hooks
-const ConnectorDialogContent: React.FC<ConnectorDialogProps> = ({ open, onOpenChange }) => {
-  const {
-    connect,
-    connectors,
-    error: connectError,
-    isConnecting,
-    pendingConnector,
-  } = useDerivedConnectStatus();
-  const { isConnected } = useDerivedAccountStatus();
-  const [connectingId, setConnectingId] = useState<string | null>(null);
-
-  // Get the complete config to log it
-  const fullConfig = useUiKitConfig();
-  const showInjectedConnector = isConfigEnabled('showInjectedConnector');
-
-  // Log the configuration to debug
-  useEffect(() => {}, [fullConfig, showInjectedConnector, isConnecting, pendingConnector]);
-
-  // Track connection attempts for dialog closure
-  useEffect(() => {
-    // If we're connected and there was a connection attempt, close the dialog
-    if (isConnected && connectingId) {
-      onOpenChange(false);
-      setConnectingId(null);
-    }
-  }, [isConnected, connectingId, onOpenChange]);
-
-  // If connect function itself is not available (e.g., adapter doesn't provide useConnect facade hook)
-  if (!connect) {
-    return (
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>Error</DialogTitle>
-          </DialogHeader>
-          <p>Wallet connection function is not available.</p>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  const handleConnectorSelect = (selectedConnector: Connector) => {
-    setConnectingId(selectedConnector.id);
-    connect({ connector: selectedConnector });
-  };
-
-  // Filter out the injected connector if showInjectedConnector is false
-  const filteredConnectors = connectors.filter((connector: Connector) => {
-    const isInjected = connector.id === 'injected';
-    return !(isInjected && !showInjectedConnector);
-  });
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Connect Wallet</DialogTitle>
-          <DialogDescription>
-            Select a wallet provider to connect with this application.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="grid gap-4 py-4">
-          {filteredConnectors.length === 0 ? (
-            <p className="text-center text-muted-foreground">No wallet connectors available.</p>
-          ) : (
-            filteredConnectors.map((connector: Connector) => (
-              <Button
-                key={connector.id}
-                onClick={() => handleConnectorSelect(connector)}
-                disabled={isConnecting && connectingId === connector.id}
-                variant="outline"
-                className="flex justify-between items-center w-full py-6"
-              >
-                <span>{connector.name}</span>
-                {isConnecting && connectingId === connector.id && (
-                  <span className="ml-2 text-xs">Connecting...</span>
-                )}
-              </Button>
-            ))
-          )}
-        </div>
-
-        {connectError && (
-          <p className="text-sm text-red-500 mt-1">
-            {connectError.message || 'Error connecting wallet'}
-          </p>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-};

package/src/wallet/components/index.ts

@@ -1,4 +0,0 @@
-// Export all wallet UI components
-export { CustomConnectButton } from './connect/ConnectButton';
-export { CustomAccountDisplay } from './account/AccountDisplay';
-export { CustomNetworkSwitcher } from './network/NetworkSwitcher';

package/src/wallet/components/network/NetworkSwitcher.tsx

@@ -1,90 +0,0 @@
-import { Loader2 } from 'lucide-react';
-import type { Chain } from 'viem';
-import React from 'react';
-
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@openzeppelin/ui-components';
-import {
-  useDerivedAccountStatus,
-  useDerivedChainInfo,
-  useDerivedSwitchChainStatus,
-} from '@openzeppelin/ui-react';
-import type { BaseComponentProps } from '@openzeppelin/ui-types';
-import { cn } from '@openzeppelin/ui-utils';
-
-import { SafeWagmiComponent } from '../../utils/SafeWagmiComponent';
-
-/**
- * A component that displays the current network and allows switching to other networks.
- * Uses the chainId and switchChain hooks from wagmi.
- */
-export const CustomNetworkSwitcher: React.FC<BaseComponentProps> = ({ className }) => {
-  // Use the SafeWagmiComponent with null fallback
-  return (
-    <SafeWagmiComponent fallback={null}>
-      <NetworkSwitcherContent className={className} />
-    </SafeWagmiComponent>
-  );
-};
-
-// Inner component that uses wagmi hooks
-const NetworkSwitcherContent: React.FC<{ className?: string }> = ({ className }) => {
-  const { isConnected } = useDerivedAccountStatus();
-  const { currentChainId, availableChains: unknownChains } = useDerivedChainInfo();
-  const { switchChain, isSwitching: isPending, error } = useDerivedSwitchChainStatus();
-
-  // Cast to Chain[] for use within this EVM-specific component
-  const typedAvailableChains = unknownChains as Chain[];
-
-  if (!isConnected || !switchChain || typedAvailableChains.length === 0) {
-    return null;
-  }
-
-  const handleNetworkChange = (chainId: number) => {
-    if (chainId !== currentChainId) {
-      switchChain({ chainId });
-    }
-  };
-
-  const currentChain = typedAvailableChains.find((chain) => chain.id === currentChainId);
-  const currentChainName = currentChain?.name || 'Network';
-
-  return (
-    <div className={cn('flex items-center', className)}>
-      <Select
-        value={currentChainId?.toString() ?? ''}
-        onValueChange={(value: string) => handleNetworkChange(Number(value))}
-        disabled={isPending || typedAvailableChains.length === 0}
-      >
-        <SelectTrigger className="h-8 text-xs px-2 min-w-[90px] max-w-[120px]">
-          <SelectValue placeholder="Network">{currentChainName}</SelectValue>
-        </SelectTrigger>
-        <SelectContent
-          position="popper"
-          sideOffset={5}
-          align="start"
-          className="w-auto min-w-[160px] max-h-[300px]"
-        >
-          {typedAvailableChains.map((chain) => (
-            <SelectItem key={chain.id} value={chain.id.toString()} className="text-xs py-1.5">
-              {chain.name}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-
-      {isPending && (
-        <span className="text-xs text-muted-foreground ml-2">
-          <Loader2 className="h-3 w-3 animate-spin" />
-        </span>
-      )}
-
-      {error && <span className="text-xs text-red-500 ml-2">!</span>}
-    </div>
-  );
-};

package/src/wallet/context/index.ts

@@ -1 +0,0 @@
-export * from './wagmi-context';

package/src/wallet/context/wagmi-context.tsx

@@ -1,7 +0,0 @@
-import { createContext } from 'react';
-
-/**
- * Context to track Wagmi provider initialization status
- * Used by components to safely render when the provider is ready
- */
-export const WagmiProviderInitializedContext = createContext<boolean>(false);

package/src/wallet/hooks/useIsWagmiProviderInitialized.ts

@@ -1,11 +0,0 @@
-import { useContext } from 'react';
-
-import { WagmiProviderInitializedContext } from '../context/wagmi-context';
-
-/**
- * Hook to check if WagmiProvider is ready
- * @returns boolean indicating if the provider is initialized
- */
-export const useIsWagmiProviderInitialized = (): boolean => {
-  return useContext(WagmiProviderInitializedContext);
-};

package/src/wallet/rainbowkit/config-generator.ts

@@ -1,56 +0,0 @@
-import { UiKitConfiguration } from '@openzeppelin/ui-types';
-
-/**
- * Generates the content for a `rainbowkit.config.ts` file for an exported project.
- * It merges the user-provided configuration with the necessary boilerplate to ensure
- * the config is valid for RainbowKit's `getDefaultConfig`.
- *
- * @param userConfig - The user-provided configuration from the builder app.
- * @returns A string containing the formatted TypeScript code for the config file.
- */
-export function generateRainbowKitConfigFile(userConfig: UiKitConfiguration['kitConfig']): string {
-  const config = (userConfig || {}) as Record<string, unknown>;
-  const appName = (config.appName as string) || 'My RainbowKit App';
-  const learnMoreUrl = (config.learnMoreUrl as string) || 'https://openzeppelin.com';
-  // We provide a default projectId as it's required by RainbowKit for WalletConnect.
-  const projectId = (config.projectId as string) || 'YOUR_PROJECT_ID';
-
-  // Build the appInfo part conditionally
-  const appInfoLines = [`appName: '${appName}'`];
-  if (learnMoreUrl) {
-    appInfoLines.push(`learnMoreUrl: '${learnMoreUrl}'`);
-  }
-  const appInfoContent = appInfoLines.join(',\n      ');
-
-  const fileContent = `// RainbowKit configuration for your exported application
-// This file is used ONLY in the exported app, not in the builder app preview
-
-// Uncomment imports as needed:
-// import { darkTheme, lightTheme } from '@rainbow-me/rainbowkit';
-
-const rainbowKitAppConfig = {
-  wagmiParams: {
-    appName: '${appName}',
-    projectId: '${projectId}', // Get yours at https://cloud.walletconnect.com
-    
-    // Additional options:
-    // ssr: true,
-    // wallets: [...],
-  },
-  providerProps: {
-    appInfo: {
-      ${appInfoContent}
-    },
-    
-    // UI customization - all features work in exported apps:
-    // theme: darkTheme(),
-    // modalSize: 'compact',
-    // showRecentTransactions: true,
-    // coolMode: true,
-  },
-};
-
-export default rainbowKitAppConfig;`;
-
-  return fileContent;
-}

package/src/wallet/rainbowkit/config-service.ts

@@ -1,169 +0,0 @@
-import { Config, http } from '@wagmi/core';
-import { type Chain } from 'viem';
-
-import type { UiKitConfiguration } from '@openzeppelin/ui-types';
-import { logger } from '@openzeppelin/ui-utils';
-
-import { type WagmiConfigChains } from '../types';
-
-/**
- * Creates a Wagmi configuration for RainbowKit using getDefaultConfig
- *
- * @param userFullNativeConfig The full native configuration object. This object IS the result of merging
- *                             AppConfigService settings, user's native rainbowkit.config.ts, and programmatic overrides.
- *                             It is expected to contain a `wagmiParams` object for RainbowKit's getDefaultConfig
- *                             and potentially a `providerProps` object for RainbowKitProvider.
- * @param chains Array of viem Chain objects - will be safely cast to wagmi's expected chain type
- * @param chainIdToNetworkIdMap Mapping of chain IDs to network IDs for RPC override lookups
- * @param getRpcEndpointOverride Function to get RPC endpoint overrides
- * @returns Wagmi configuration for RainbowKit or null if creation fails
- */
-export async function createRainbowKitWagmiConfig(
-  userFullNativeConfig: Record<string, unknown> | undefined | null, // This is the fully resolved kitConfig
-  chains: readonly Chain[],
-  chainIdToNetworkIdMap: Record<number, string>,
-  getRpcEndpointOverride: (networkId: string) => string | { http?: string; ws?: string } | undefined
-): Promise<Config | null> {
-  try {
-    const { getDefaultConfig } = await import('@rainbow-me/rainbowkit');
-    if (!getDefaultConfig) {
-      logger.error(
-        'rainbowkit/config-service',
-        'Failed to import getDefaultConfig from RainbowKit'
-      );
-      return null;
-    }
-
-    // userFullNativeConfig *is* the kitConfig here. Its wagmiParams are what we need.
-    const wagmiParams = userFullNativeConfig?.wagmiParams as Record<string, unknown> | undefined;
-
-    if (!wagmiParams) {
-      logger.warn(
-        'rainbowkit/config-service',
-        'Resolved kitConfig does not contain a `wagmiParams` object. Cannot create RainbowKit Wagmi config.'
-      );
-      return null;
-    }
-
-    // Ensure essential appName and projectId are present in user's wagmiParams
-    if (typeof wagmiParams.appName !== 'string' || !wagmiParams.appName) {
-      logger.warn(
-        'rainbowkit/config-service',
-        'kitConfig.wagmiParams is missing or has invalid `appName`.'
-      );
-      return null;
-    }
-    if (typeof wagmiParams.projectId !== 'string' || !wagmiParams.projectId) {
-      logger.warn(
-        'rainbowkit/config-service',
-        'kitConfig.wagmiParams is missing or has invalid `projectId`.'
-      );
-      return null;
-    }
-
-    // Build transport configuration with RPC overrides as needed.
-    // This iterates over the adapter-determined chains and creates a transport
-    // for each, applying any RPC overrides specified via AppConfigService.
-    const transportsConfig = chains.reduce(
-      (acc, chainDefinition) => {
-        let rpcUrlToUse: string | undefined = chainDefinition.rpcUrls.default?.http?.[0];
-        const appNetworkIdString = chainIdToNetworkIdMap[chainDefinition.id];
-
-        if (appNetworkIdString) {
-          const rpcOverrideSetting = getRpcEndpointOverride(appNetworkIdString);
-          let httpRpcOverride: string | undefined;
-
-          // Extract HTTP RPC URL from override setting
-          if (typeof rpcOverrideSetting === 'string') {
-            httpRpcOverride = rpcOverrideSetting;
-          } else if (typeof rpcOverrideSetting === 'object' && rpcOverrideSetting) {
-            // Handle both RpcEndpointConfig and UserRpcProviderConfig
-            if ('http' in rpcOverrideSetting && rpcOverrideSetting.http) {
-              httpRpcOverride = rpcOverrideSetting.http;
-            } else if ('url' in rpcOverrideSetting && rpcOverrideSetting.url) {
-              // Handle UserRpcProviderConfig
-              httpRpcOverride = rpcOverrideSetting.url as string;
-            }
-          }
-
-          if (httpRpcOverride) {
-            logger.info(
-              'rainbowkit/config-service',
-              `Using overridden RPC for chain ${chainDefinition.name}: ${httpRpcOverride}`
-            );
-            rpcUrlToUse = httpRpcOverride;
-          }
-        }
-
-        acc[chainDefinition.id] = http(rpcUrlToUse);
-        return acc;
-      },
-      {} as Record<number, ReturnType<typeof http>>
-    );
-
-    // Spread all user-provided wagmiParams, then override chains and transports
-    const finalConfigOptions = {
-      ...wagmiParams, // User's native params (appName, projectId, wallets, ssr, etc.)
-      chains: chains as WagmiConfigChains, // Adapter controls this
-      transports: transportsConfig, // Adapter controls this
-    };
-
-    // The `wallets` property from user config is of type `unknown` on our side if accessed directly from wagmiParams.
-    // RainbowKit's `getDefaultConfig` expects a specific `WalletList` type for `wallets`.
-    // By spreading `wagmiParams`, we pass whatever structure the user provided.
-    // We use `eslint-disable-next-line @typescript-eslint/no-explicit-any` here to pass through
-    // the user-provided structure directly, relying on RainbowKit to perform its own validation or type checking internally.
-    // This aligns with our principle of not mimicking complex third-party types for pass-through configuration.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const config = getDefaultConfig(finalConfigOptions as any);
-
-    logger.info(
-      'rainbowkit/config-service',
-      'Successfully created RainbowKit Wagmi config object.',
-      config
-    );
-    return config;
-  } catch (error) {
-    logger.error('rainbowkit/config-service', 'Error creating RainbowKit Wagmi config:', error);
-    return null;
-  }
-}
-
-/**
- * Gets the Wagmi configuration for RainbowKit based on the global UI kit settings.
- * This function is intended to be called by WagmiWalletImplementation.
- *
- * @param uiKitConfiguration The UI kit configuration object from EvmUiKitManager (contains the resolved kitConfig).
- * @param chains Array of viem Chain objects to use with RainbowKit
- * @param chainIdToNetworkIdMap Mapping of chain IDs to network IDs for RPC override lookups
- * @param getRpcEndpointOverride Function to get RPC endpoint overrides
- * @returns The wagmi Config object or null if invalid or not RainbowKit
- */
-export async function getWagmiConfigForRainbowKit(
-  uiKitConfiguration: UiKitConfiguration | undefined,
-  chains: readonly Chain[],
-  chainIdToNetworkIdMap: Record<number, string>,
-  getRpcEndpointOverride: (networkId: string) => string | { http?: string; ws?: string } | undefined
-): Promise<Config | null> {
-  if (
-    !uiKitConfiguration ||
-    uiKitConfiguration.kitName !== 'rainbowkit' ||
-    !uiKitConfiguration.kitConfig // kitConfig is the fully resolved config here
-  ) {
-    logger.debug(
-      'rainbowkit/config-service',
-      'Not configured for RainbowKit or kitConfig (resolved native + programmatic) is missing.'
-    );
-    return null;
-  }
-
-  // userFullNativeConfig for createRainbowKitWagmiConfig IS uiKitConfiguration.kitConfig
-  const resolvedKitConfig = uiKitConfiguration.kitConfig as Record<string, unknown>;
-
-  return createRainbowKitWagmiConfig(
-    resolvedKitConfig, // Pass the resolved kitConfig
-    chains,
-    chainIdToNetworkIdMap,
-    getRpcEndpointOverride
-  );
-}

package/src/wallet/rainbowkit/export-service.ts

@@ -1,18 +0,0 @@
-import type { UiKitConfiguration } from '@openzeppelin/ui-types';
-
-import { generateRainbowKitConfigFile } from './config-generator';
-
-/**
- * Generates the specific configuration file for RainbowKit during project export.
- *
- * @param uiKitConfig The full UI kit configuration object from the builder.
- * @returns A record containing the file path and its generated content.
- */
-export function generateRainbowKitExportables(
-  uiKitConfig: UiKitConfiguration
-): Record<string, string> {
-  const filePath = 'src/config/wallet/rainbowkit.config.ts';
-  const content = uiKitConfig.customCode || generateRainbowKitConfigFile(uiKitConfig.kitConfig);
-
-  return { [filePath]: content };
-}

package/src/wallet/rainbowkit/rainbowkitAssetManager.ts

@@ -1,74 +0,0 @@
-import type React from 'react';
-
-import { logger } from '@openzeppelin/ui-utils';
-
-export interface RainbowKitAssets {
-  ProviderComponent: React.ComponentType<React.PropsWithChildren<unknown>> | null;
-  cssLoaded: boolean;
-}
-
-let loadedAssets: RainbowKitAssets | null = null;
-
-// Promises to ensure assets are loaded only once
-let providerPromise: Promise<React.ComponentType<React.PropsWithChildren<unknown>> | null> | null =
-  null;
-let cssPromise: Promise<boolean> | null = null;
-
-/**
- * Ensures RainbowKit provider component and CSS are loaded.
- * Loads them dynamically only once and caches the result.
- * @returns A promise resolving to an object containing the ProviderComponent and cssLoaded status.
- */
-export async function ensureRainbowKitAssetsLoaded(): Promise<RainbowKitAssets> {
-  if (loadedAssets) {
-    logger.debug('RainbowKitAssetManager', 'Assets already loaded, returning cached.');
-    return loadedAssets;
-  }
-
-  if (!providerPromise) {
-    providerPromise = import('@rainbow-me/rainbowkit')
-      .then((module) => {
-        const component = module.RainbowKitProvider as React.ComponentType<
-          React.PropsWithChildren<unknown>
-        >;
-        logger.info('RainbowKitAssetManager', 'RainbowKitProvider module loaded.');
-        return component;
-      })
-      .catch((err) => {
-        logger.error('RainbowKitAssetManager', 'Failed to load RainbowKitProvider module:', err);
-        return null; // Resolve with null on error to allow Promise.all to complete
-      });
-  }
-
-  if (!cssPromise) {
-    cssPromise = import('@rainbow-me/rainbowkit/styles.css')
-      .then(() => {
-        logger.info('RainbowKitAssetManager', 'RainbowKit CSS loaded successfully.');
-        return true;
-      })
-      .catch((err) => {
-        logger.error('RainbowKitAssetManager', 'Failed to load RainbowKit CSS:', err);
-        return false; // Resolve with false on error
-      });
-  }
-
-  try {
-    const [ProviderComponent, cssLoadedSuccess] = await Promise.all([providerPromise, cssPromise]);
-
-    loadedAssets = { ProviderComponent, cssLoaded: cssLoadedSuccess };
-    if (!ProviderComponent || !cssLoadedSuccess) {
-      logger.warn(
-        'RainbowKitAssetManager',
-        'One or more RainbowKit assets failed to load.',
-        loadedAssets
-      );
-      // Potentially throw here if assets are critical, or let caller decide based on null/false
-    }
-    return loadedAssets;
-  } catch (error) {
-    // This catch is for Promise.all failing, though individual catches should handle module errors.
-    logger.error('RainbowKitAssetManager', 'Error in Promise.all for asset loading:', error);
-    loadedAssets = { ProviderComponent: null, cssLoaded: false }; // Ensure loadedAssets is set
-    return loadedAssets;
-  }
-}

package/src/wallet/rainbowkit/types.ts

@@ -1,74 +0,0 @@
-/**
- * Custom RainbowKit configuration types for enhanced UI control
- */
-/**
- * Re-export RainbowKit's native types for ConnectButton props
- * This ensures we use the exact same types that RainbowKit expects,
- * reducing maintenance burden and letting RainbowKit handle type validation
- */
-// Import RainbowKit's native ConnectButton types
-import type { ConnectButton, RainbowKitProvider } from '@rainbow-me/rainbowkit';
-
-/**
- * Extract the `AppInfo` type from the RainbowKitProvider's props.
- * This is the canonical way to get the type for the `appInfo` object.
- */
-export type AppInfo = React.ComponentProps<typeof RainbowKitProvider>['appInfo'];
-
-/**
- * Extract the props type from RainbowKit's ConnectButton component
- * This gives us the exact same types that RainbowKit uses internally
- */
-export type RainbowKitConnectButtonProps = React.ComponentProps<typeof ConnectButton>;
-
-/**
- * Represents the props expected by the RainbowKitProvider component.
- * It uses a nested `appInfo` object.
- */
-export interface RainbowKitProviderProps {
-  appInfo?: AppInfo;
-  [key: string]: unknown;
-}
-
-/**
- * Represents the shape of the `kitConfig` object we use internally when the
- * selected kit is RainbowKit. It has a flat structure for `appName` and `learnMoreUrl`
- * for easier handling in our builder app, and can also contain pre-existing providerProps.
- */
-export type RainbowKitKitConfig = Partial<AppInfo> & {
-  providerProps?: RainbowKitProviderProps;
-  [key: string]: unknown;
-};
-
-/**
- * Custom UI configuration that uses RainbowKit's native types
- * This extends our configuration system while leveraging RainbowKit's own type definitions
- */
-export interface RainbowKitCustomizations {
-  /**
-   * Configuration for the RainbowKit ConnectButton component
-   * Uses RainbowKit's native prop types for type safety and compatibility
-   */
-  connectButton?: Partial<RainbowKitConnectButtonProps>;
-}
-
-/**
- * Type guard to check if an object contains RainbowKit customizations
- */
-export function isRainbowKitCustomizations(obj: unknown): obj is RainbowKitCustomizations {
-  return typeof obj === 'object' && obj !== null && 'connectButton' in obj;
-}
-
-/**
- * Utility to extract RainbowKit customizations from a kit config
- */
-export function extractRainbowKitCustomizations(
-  kitConfig: Record<string, unknown> | undefined
-): RainbowKitCustomizations | undefined {
-  if (!kitConfig || !kitConfig.customizations) {
-    return undefined;
-  }
-
-  const customizations = kitConfig.customizations;
-  return isRainbowKitCustomizations(customizations) ? customizations : undefined;
-}