@openzeppelin/ui-renderer 1.0.0

package/dist/index.d.cts

@@ -0,0 +1,344 @@
+import { ContractAdapter, ContractFunction, ContractSchema, ExecutionConfig, FieldTransforms, FieldType, FormFieldType, FormValues, FullContractAdapter, NetworkConfig, TransactionFormProps } from "@openzeppelin/ui-types";
+import React$1, { JSX } from "react";
+import { Control } from "react-hook-form";
+import { ButtonProps } from "@openzeppelin/ui-components";
+
+//#region src/types/RendererConfig.d.ts
+
+/**
+ * Types related to renderer configuration
+ */
+/**
+ * Configuration for the renderer package
+ * This interface defines dependencies and settings for the renderer
+ * that will be used when exporting form projects.
+ */
+interface RendererConfig {
+  /**
+   * Core dependencies required for all renderer projects
+   */
+  coreDependencies: Record<string, string>;
+  /**
+   * Field-specific dependencies required for different field types
+   */
+  fieldDependencies: Record<string, {
+    /**
+     * Runtime dependencies needed for the field type
+     */
+    runtimeDependencies: Record<string, string>;
+    /**
+     * Development dependencies needed for the field type
+     */
+    devDependencies?: Record<string, string>;
+  }>;
+}
+/**
+ * Dependencies for a specific field type
+ */
+//#endregion
+//#region src/components/TransactionForm.d.ts
+/**
+ * Transaction Form Component
+ *
+ * This is the main entry point for the app rendering system. It represents the top level of
+ * the app rendering architecture:
+ *
+ * 1. TransactionForm receives a schema and adapter from the transaction builder app
+ * 2. It sets up React Hook Form for state management and validation
+ * 3. It renders fields dynamically using the DynamicFormField component
+ * 4. Provides wallet connection UI (demo implementation)
+ * 5. On submission, it processes data through the adapter before passing to handlers
+ *
+ * Note: The previewMode prop is currently used only for demo purposes and does not affect
+ * the visibility of wallet connection or transaction execution UI. In the future, it will be used
+ * to enable/disable actual blockchain interactions without changing the UI structure.
+ *
+ * @returns The rendered form component
+ */
+declare function TransactionForm({
+  schema,
+  contractSchema,
+  adapter,
+  isWalletConnected,
+  executionConfig
+}: TransactionFormProps): React.ReactElement;
+//# sourceMappingURL=TransactionForm.d.ts.map
+//#endregion
+//#region src/utils/formUtils.d.ts
+/**
+ * Parameter constraints for validation and default value generation
+ */
+interface ParameterConstraints {
+  required?: boolean;
+  min?: number;
+  max?: number;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+}
+/**
+ * Validate a field value against validation rules
+ */
+declare function validateField(value: unknown, validation?: {
+  required?: boolean;
+  min?: number;
+  max?: number;
+  pattern?: string;
+}): string | null;
+/**
+ * Creates a transform for address fields
+ *
+ * @param adapter The blockchain adapter to use for validation
+ * @returns Transform functions for address fields
+ */
+declare function createAddressTransform(adapter: ContractAdapter): FieldTransforms<string>;
+/**
+ * Creates a transform for number fields
+ *
+ * @returns Transform functions for number fields
+ */
+declare function createNumberTransform(): FieldTransforms<number>;
+/**
+ * Creates a transform for bigint fields (large integers beyond JS Number precision)
+ *
+ * @returns Transform functions for bigint fields
+ */
+declare function createBigIntTransform(): FieldTransforms<string>;
+/**
+ * Creates a transform for boolean fields
+ *
+ * @returns Transform functions for boolean fields
+ */
+declare function createBooleanTransform(): FieldTransforms<boolean>;
+/**
+ * Creates a transform for complex type fields (arrays, objects, etc.)
+ *
+ * @returns Transform functions for complex fields
+ */
+declare function createComplexTypeTransform(): FieldTransforms<unknown>;
+/**
+ * Creates a transform for text fields
+ *
+ * @returns Transform functions for text-based fields
+ */
+declare function createTextTransform(): FieldTransforms<string>;
+/**
+ * Creates a transform function based on field type
+ *
+ * @param fieldType The type of field to create transforms for
+ * @param adapter Optional adapter for address validation
+ * @returns Transform functions for the field type
+ */
+declare function createTransformForFieldType(fieldType: FieldType, adapter?: ContractAdapter): FieldTransforms<unknown>;
+/**
+ * Generate a default value for a given field type based on parameter constraints
+ */
+declare function generateDefaultValue(parameterType: string, constraints?: Partial<ParameterConstraints>): unknown;
+/**
+ * Returns the appropriate default value based on field type
+ */
+declare function getDefaultValueByFieldType(fieldType: FieldType): string | boolean | number;
+/**
+ * Creates a complete default values object for form initialization
+ * Ensures all fields have appropriate default values to avoid React controlled/uncontrolled input warnings
+ *
+ * @param fields The form field definitions
+ * @param existingDefaults Any existing default values to preserve
+ * @returns A complete form values object with no undefined values
+ */
+declare function createDefaultFormValues(fields: FormFieldType[] | undefined, existingDefaults?: Record<string, unknown>): FormValues;
+/**
+ * Creates a transform for array fields
+ *
+ * @returns Transform functions for array fields
+ */
+declare function createArrayTransform(): FieldTransforms<unknown[]>;
+/**
+ * Creates a transform for object fields
+ *
+ * @returns Transform functions for object fields
+ */
+declare function createObjectTransform(): FieldTransforms<Record<string, unknown>>;
+/**
+ * Creates a transform for array-object fields
+ *
+ * @returns Transform functions for array-object fields
+ */
+declare function createArrayObjectTransform(): FieldTransforms<Record<string, unknown>[]>;
+//# sourceMappingURL=formUtils.d.ts.map
+//#endregion
+//#region src/components/DynamicFormField.d.ts
+/**
+ * Props for the DynamicFormField component
+ */
+interface DynamicFormFieldProps {
+  /**
+   * The field configuration to render
+   */
+  field: FormFieldType;
+  /**
+   * The React Hook Form control
+   */
+  control: Control<FormValues>;
+  /**
+   * The adapter for chain-specific validation and formatting
+   */
+  adapter: ContractAdapter;
+  /**
+   * Optional contract schema for nested metadata lookups
+   */
+  contractSchema?: ContractSchema;
+  /**
+   * The field error message, if any (Kept for potential direct use, though RHF handles it)
+   */
+  error?: string;
+}
+/**
+ * Dynamic Form Field Component
+ *
+ * Renders the appropriate field component based on the field type defined in the form schema.
+ * This component is part of the app rendering system architecture where:
+ * 1. Form schemas are generated from contract functions using adapters
+ * 2. The schemas are rendered using the TransactionForm component
+ * 3. TransactionForm uses DynamicFormField to render appropriate field components based on the schema
+ *
+ * The field components (TextField, NumberField, AddressField, etc.) are specifically designed
+ * for React Hook Form integration and should not be used as standalone components.
+ *
+ * @returns The rendered form field component or null if the field should not be visible
+ */
+declare function DynamicFormField({
+  field,
+  control,
+  adapter,
+  contractSchema
+}: DynamicFormFieldProps): React$1.ReactElement | null;
+//#endregion
+//#region src/components/transaction/TransactionExecuteButton.d.ts
+interface TransactionExecuteButtonProps {
+  /**
+   * Whether the wallet is connected
+   */
+  isWalletConnected: boolean;
+  /**
+   * Whether a transaction is currently being submitted
+   */
+  isSubmitting: boolean;
+  /**
+   * Whether the form is valid
+   */
+  isFormValid: boolean;
+  /**
+   * Button variant
+   */
+  variant?: ButtonProps['variant'];
+  /**
+   * Optional function details to determine if local execution is possible
+   * Functions with stateMutability === 'pure' can execute locally without wallet
+   */
+  functionDetails?: ContractFunction;
+  /**
+   * Whether this function can execute locally without wallet connection
+   * If true, the wallet connection check is bypassed
+   */
+  canExecuteLocally?: boolean;
+}
+/**
+ * TransactionExecuteButton Component
+ *
+ * Displays a button for executing a transaction, which is disabled if the wallet is not connected,
+ * the form is invalid, or a transaction is currently being submitted.
+ *
+ * @param props The component props
+ * @returns A React component
+ */
+declare function TransactionExecuteButton({
+  isWalletConnected,
+  isSubmitting,
+  isFormValid,
+  variant,
+  functionDetails,
+  canExecuteLocally
+}: TransactionExecuteButtonProps): React.ReactElement;
+//# sourceMappingURL=TransactionExecuteButton.d.ts.map
+//#endregion
+//#region src/components/ContractStateWidget/ContractStateWidget.d.ts
+interface ContractStateWidgetProps {
+  contractSchema: ContractSchema | null;
+  contractAddress: string | null;
+  adapter: FullContractAdapter;
+  isVisible?: boolean;
+  onToggle?: () => void;
+  className?: string;
+  error?: Error | null;
+}
+/**
+ * ContractStateWidget - Compact widget for displaying contract state
+ * Shows contract state by allowing users to query simple view functions (no parameters)
+ */
+declare function ContractStateWidget({
+  contractSchema,
+  contractAddress,
+  adapter,
+  isVisible,
+  onToggle,
+  className,
+  error
+}: ContractStateWidgetProps): JSX.Element | null;
+//#endregion
+//#region src/components/ContractActionBar/ContractActionBar.d.ts
+interface ContractActionBarProps {
+  networkConfig: NetworkConfig | null;
+  contractAddress?: string | null;
+  onToggleContractState?: () => void;
+  isWidgetExpanded?: boolean;
+  children?: React$1.ReactNode;
+  className?: string;
+}
+/**
+ * ContractActionBar - A composable action bar for contract forms
+ * Displays network information and contract state toggle button
+ * Can be extended with additional actions via children
+ */
+declare function ContractActionBar({
+  networkConfig,
+  contractAddress,
+  onToggleContractState,
+  isWidgetExpanded,
+  children,
+  className
+}: ContractActionBarProps): React$1.ReactElement | null;
+//#endregion
+//#region src/components/ExecutionConfigDisplay/ExecutionConfigDisplay.d.ts
+interface ExecutionConfigDisplayProps {
+  executionConfig: ExecutionConfig;
+  adapter?: ContractAdapter;
+  error?: string | null;
+  connectedWalletAddress?: string;
+  onRuntimeApiKeyChange?: (apiKey: string) => void;
+}
+declare const ExecutionConfigDisplay: React$1.FC<ExecutionConfigDisplayProps>;
+//#endregion
+//#region src/components/network/NetworkSettingsDialog.d.ts
+interface Props {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  networkConfig: {
+    id: string;
+    name: string;
+  } | null;
+  adapter: ContractAdapter | null;
+}
+declare const NetworkSettingsDialog: React$1.FC<Props>;
+//#endregion
+//#region src/components/WalletConnectionWithSettings.d.ts
+/**
+ * Enhanced wallet connection header with network settings menu.
+ * Used in exported apps to provide access to RPC and Explorer configuration.
+ */
+declare const WalletConnectionWithSettings: React$1.FC;
+//# sourceMappingURL=WalletConnectionWithSettings.d.ts.map
+
+//#endregion
+export { ContractActionBar, ContractStateWidget, DynamicFormField, ExecutionConfigDisplay, NetworkSettingsDialog, ParameterConstraints, type RendererConfig, TransactionExecuteButton, TransactionForm, WalletConnectionWithSettings, createAddressTransform, createArrayObjectTransform, createArrayTransform, createBigIntTransform, createBooleanTransform, createComplexTypeTransform, createDefaultFormValues, createNumberTransform, createObjectTransform, createTextTransform, createTransformForFieldType, generateDefaultValue, getDefaultValueByFieldType, validateField };
+//# sourceMappingURL=index-DMBaQjZf.d.cts.map

package/dist/index.d.ts

@@ -0,0 +1,344 @@
+import React$1, { JSX } from "react";
+import { Control } from "react-hook-form";
+import { ButtonProps } from "@openzeppelin/ui-components";
+import { ContractAdapter, ContractFunction, ContractSchema, ExecutionConfig, FieldTransforms, FieldType, FormFieldType, FormValues, FullContractAdapter, NetworkConfig, TransactionFormProps } from "@openzeppelin/ui-types";
+
+//#region src/types/RendererConfig.d.ts
+
+/**
+ * Types related to renderer configuration
+ */
+/**
+ * Configuration for the renderer package
+ * This interface defines dependencies and settings for the renderer
+ * that will be used when exporting form projects.
+ */
+interface RendererConfig {
+  /**
+   * Core dependencies required for all renderer projects
+   */
+  coreDependencies: Record<string, string>;
+  /**
+   * Field-specific dependencies required for different field types
+   */
+  fieldDependencies: Record<string, {
+    /**
+     * Runtime dependencies needed for the field type
+     */
+    runtimeDependencies: Record<string, string>;
+    /**
+     * Development dependencies needed for the field type
+     */
+    devDependencies?: Record<string, string>;
+  }>;
+}
+/**
+ * Dependencies for a specific field type
+ */
+//#endregion
+//#region src/components/TransactionForm.d.ts
+/**
+ * Transaction Form Component
+ *
+ * This is the main entry point for the app rendering system. It represents the top level of
+ * the app rendering architecture:
+ *
+ * 1. TransactionForm receives a schema and adapter from the transaction builder app
+ * 2. It sets up React Hook Form for state management and validation
+ * 3. It renders fields dynamically using the DynamicFormField component
+ * 4. Provides wallet connection UI (demo implementation)
+ * 5. On submission, it processes data through the adapter before passing to handlers
+ *
+ * Note: The previewMode prop is currently used only for demo purposes and does not affect
+ * the visibility of wallet connection or transaction execution UI. In the future, it will be used
+ * to enable/disable actual blockchain interactions without changing the UI structure.
+ *
+ * @returns The rendered form component
+ */
+declare function TransactionForm({
+  schema,
+  contractSchema,
+  adapter,
+  isWalletConnected,
+  executionConfig
+}: TransactionFormProps): React.ReactElement;
+//# sourceMappingURL=TransactionForm.d.ts.map
+//#endregion
+//#region src/utils/formUtils.d.ts
+/**
+ * Parameter constraints for validation and default value generation
+ */
+interface ParameterConstraints {
+  required?: boolean;
+  min?: number;
+  max?: number;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+}
+/**
+ * Validate a field value against validation rules
+ */
+declare function validateField(value: unknown, validation?: {
+  required?: boolean;
+  min?: number;
+  max?: number;
+  pattern?: string;
+}): string | null;
+/**
+ * Creates a transform for address fields
+ *
+ * @param adapter The blockchain adapter to use for validation
+ * @returns Transform functions for address fields
+ */
+declare function createAddressTransform(adapter: ContractAdapter): FieldTransforms<string>;
+/**
+ * Creates a transform for number fields
+ *
+ * @returns Transform functions for number fields
+ */
+declare function createNumberTransform(): FieldTransforms<number>;
+/**
+ * Creates a transform for bigint fields (large integers beyond JS Number precision)
+ *
+ * @returns Transform functions for bigint fields
+ */
+declare function createBigIntTransform(): FieldTransforms<string>;
+/**
+ * Creates a transform for boolean fields
+ *
+ * @returns Transform functions for boolean fields
+ */
+declare function createBooleanTransform(): FieldTransforms<boolean>;
+/**
+ * Creates a transform for complex type fields (arrays, objects, etc.)
+ *
+ * @returns Transform functions for complex fields
+ */
+declare function createComplexTypeTransform(): FieldTransforms<unknown>;
+/**
+ * Creates a transform for text fields
+ *
+ * @returns Transform functions for text-based fields
+ */
+declare function createTextTransform(): FieldTransforms<string>;
+/**
+ * Creates a transform function based on field type
+ *
+ * @param fieldType The type of field to create transforms for
+ * @param adapter Optional adapter for address validation
+ * @returns Transform functions for the field type
+ */
+declare function createTransformForFieldType(fieldType: FieldType, adapter?: ContractAdapter): FieldTransforms<unknown>;
+/**
+ * Generate a default value for a given field type based on parameter constraints
+ */
+declare function generateDefaultValue(parameterType: string, constraints?: Partial<ParameterConstraints>): unknown;
+/**
+ * Returns the appropriate default value based on field type
+ */
+declare function getDefaultValueByFieldType(fieldType: FieldType): string | boolean | number;
+/**
+ * Creates a complete default values object for form initialization
+ * Ensures all fields have appropriate default values to avoid React controlled/uncontrolled input warnings
+ *
+ * @param fields The form field definitions
+ * @param existingDefaults Any existing default values to preserve
+ * @returns A complete form values object with no undefined values
+ */
+declare function createDefaultFormValues(fields: FormFieldType[] | undefined, existingDefaults?: Record<string, unknown>): FormValues;
+/**
+ * Creates a transform for array fields
+ *
+ * @returns Transform functions for array fields
+ */
+declare function createArrayTransform(): FieldTransforms<unknown[]>;
+/**
+ * Creates a transform for object fields
+ *
+ * @returns Transform functions for object fields
+ */
+declare function createObjectTransform(): FieldTransforms<Record<string, unknown>>;
+/**
+ * Creates a transform for array-object fields
+ *
+ * @returns Transform functions for array-object fields
+ */
+declare function createArrayObjectTransform(): FieldTransforms<Record<string, unknown>[]>;
+//# sourceMappingURL=formUtils.d.ts.map
+//#endregion
+//#region src/components/DynamicFormField.d.ts
+/**
+ * Props for the DynamicFormField component
+ */
+interface DynamicFormFieldProps {
+  /**
+   * The field configuration to render
+   */
+  field: FormFieldType;
+  /**
+   * The React Hook Form control
+   */
+  control: Control<FormValues>;
+  /**
+   * The adapter for chain-specific validation and formatting
+   */
+  adapter: ContractAdapter;
+  /**
+   * Optional contract schema for nested metadata lookups
+   */
+  contractSchema?: ContractSchema;
+  /**
+   * The field error message, if any (Kept for potential direct use, though RHF handles it)
+   */
+  error?: string;
+}
+/**
+ * Dynamic Form Field Component
+ *
+ * Renders the appropriate field component based on the field type defined in the form schema.
+ * This component is part of the app rendering system architecture where:
+ * 1. Form schemas are generated from contract functions using adapters
+ * 2. The schemas are rendered using the TransactionForm component
+ * 3. TransactionForm uses DynamicFormField to render appropriate field components based on the schema
+ *
+ * The field components (TextField, NumberField, AddressField, etc.) are specifically designed
+ * for React Hook Form integration and should not be used as standalone components.
+ *
+ * @returns The rendered form field component or null if the field should not be visible
+ */
+declare function DynamicFormField({
+  field,
+  control,
+  adapter,
+  contractSchema
+}: DynamicFormFieldProps): React$1.ReactElement | null;
+//#endregion
+//#region src/components/transaction/TransactionExecuteButton.d.ts
+interface TransactionExecuteButtonProps {
+  /**
+   * Whether the wallet is connected
+   */
+  isWalletConnected: boolean;
+  /**
+   * Whether a transaction is currently being submitted
+   */
+  isSubmitting: boolean;
+  /**
+   * Whether the form is valid
+   */
+  isFormValid: boolean;
+  /**
+   * Button variant
+   */
+  variant?: ButtonProps['variant'];
+  /**
+   * Optional function details to determine if local execution is possible
+   * Functions with stateMutability === 'pure' can execute locally without wallet
+   */
+  functionDetails?: ContractFunction;
+  /**
+   * Whether this function can execute locally without wallet connection
+   * If true, the wallet connection check is bypassed
+   */
+  canExecuteLocally?: boolean;
+}
+/**
+ * TransactionExecuteButton Component
+ *
+ * Displays a button for executing a transaction, which is disabled if the wallet is not connected,
+ * the form is invalid, or a transaction is currently being submitted.
+ *
+ * @param props The component props
+ * @returns A React component
+ */
+declare function TransactionExecuteButton({
+  isWalletConnected,
+  isSubmitting,
+  isFormValid,
+  variant,
+  functionDetails,
+  canExecuteLocally
+}: TransactionExecuteButtonProps): React.ReactElement;
+//# sourceMappingURL=TransactionExecuteButton.d.ts.map
+//#endregion
+//#region src/components/ContractStateWidget/ContractStateWidget.d.ts
+interface ContractStateWidgetProps {
+  contractSchema: ContractSchema | null;
+  contractAddress: string | null;
+  adapter: FullContractAdapter;
+  isVisible?: boolean;
+  onToggle?: () => void;
+  className?: string;
+  error?: Error | null;
+}
+/**
+ * ContractStateWidget - Compact widget for displaying contract state
+ * Shows contract state by allowing users to query simple view functions (no parameters)
+ */
+declare function ContractStateWidget({
+  contractSchema,
+  contractAddress,
+  adapter,
+  isVisible,
+  onToggle,
+  className,
+  error
+}: ContractStateWidgetProps): JSX.Element | null;
+//#endregion
+//#region src/components/ContractActionBar/ContractActionBar.d.ts
+interface ContractActionBarProps {
+  networkConfig: NetworkConfig | null;
+  contractAddress?: string | null;
+  onToggleContractState?: () => void;
+  isWidgetExpanded?: boolean;
+  children?: React$1.ReactNode;
+  className?: string;
+}
+/**
+ * ContractActionBar - A composable action bar for contract forms
+ * Displays network information and contract state toggle button
+ * Can be extended with additional actions via children
+ */
+declare function ContractActionBar({
+  networkConfig,
+  contractAddress,
+  onToggleContractState,
+  isWidgetExpanded,
+  children,
+  className
+}: ContractActionBarProps): React$1.ReactElement | null;
+//#endregion
+//#region src/components/ExecutionConfigDisplay/ExecutionConfigDisplay.d.ts
+interface ExecutionConfigDisplayProps {
+  executionConfig: ExecutionConfig;
+  adapter?: ContractAdapter;
+  error?: string | null;
+  connectedWalletAddress?: string;
+  onRuntimeApiKeyChange?: (apiKey: string) => void;
+}
+declare const ExecutionConfigDisplay: React$1.FC<ExecutionConfigDisplayProps>;
+//#endregion
+//#region src/components/network/NetworkSettingsDialog.d.ts
+interface Props {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  networkConfig: {
+    id: string;
+    name: string;
+  } | null;
+  adapter: ContractAdapter | null;
+}
+declare const NetworkSettingsDialog: React$1.FC<Props>;
+//#endregion
+//#region src/components/WalletConnectionWithSettings.d.ts
+/**
+ * Enhanced wallet connection header with network settings menu.
+ * Used in exported apps to provide access to RPC and Explorer configuration.
+ */
+declare const WalletConnectionWithSettings: React$1.FC;
+//# sourceMappingURL=WalletConnectionWithSettings.d.ts.map
+
+//#endregion
+export { ContractActionBar, ContractStateWidget, DynamicFormField, ExecutionConfigDisplay, NetworkSettingsDialog, ParameterConstraints, type RendererConfig, TransactionExecuteButton, TransactionForm, WalletConnectionWithSettings, createAddressTransform, createArrayObjectTransform, createArrayTransform, createBigIntTransform, createBooleanTransform, createComplexTypeTransform, createDefaultFormValues, createNumberTransform, createObjectTransform, createTextTransform, createTransformForFieldType, generateDefaultValue, getDefaultValueByFieldType, validateField };
+//# sourceMappingURL=index-CrGita0t.d.ts.map