@openzeppelin/ui-builder-adapter-evm 0.11.1 → 0.12.0

package/dist/index.cjs

@@ -470,7 +470,7 @@ var import_react_query = require("@tanstack/react-query");
 var import_core3 = require("@wagmi/core");
 var import_chains3 = require("viem/chains");
 var import_wagmi = require("wagmi");
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_ui_builder_utils14 = require("@openzeppelin/ui-builder-utils");
 
 // src/wallet/context/wagmi-context.tsx
@@ -490,6 +490,7 @@ var import_viem = require("viem");
 var import_ui_builder_utils10 = require("@openzeppelin/ui-builder-utils");
 
 // src/networks/mainnet.ts
+var import_react2 = require("@web3icons/react");
 var import_chains = require("viem/chains");
 var ethereumMainnet = {
   id: "ethereum-mainnet",
@@ -505,7 +506,7 @@ var ethereumMainnet = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "ethereum",
+  iconComponent: import_react2.NetworkEthereum,
   nativeCurrency: {
     name: "Ether",
     symbol: "ETH",
@@ -527,7 +528,7 @@ var arbitrumMainnet = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "arbitrum",
+  iconComponent: import_react2.NetworkArbitrumOne,
   nativeCurrency: {
     name: "Ether",
     symbol: "ETH",
@@ -549,7 +550,7 @@ var polygonMainnet = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "polygon",
+  iconComponent: import_react2.NetworkPolygon,
   nativeCurrency: {
     name: "MATIC",
     symbol: "MATIC",
@@ -571,7 +572,7 @@ var polygonZkEvmMainnet = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "polygon",
+  iconComponent: import_react2.NetworkPolygon,
   nativeCurrency: {
     name: "Ether",
     symbol: "ETH",
@@ -593,7 +594,7 @@ var baseMainnet = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "base",
+  iconComponent: import_react2.NetworkBase,
   nativeCurrency: {
     name: "Ether",
     symbol: "ETH",
@@ -615,7 +616,7 @@ var bscMainnet = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "bsc",
+  iconComponent: import_react2.NetworkBinanceSmartChain,
   nativeCurrency: {
     name: "BNB",
     symbol: "BNB",
@@ -637,7 +638,7 @@ var optimismMainnet = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "optimism",
+  iconComponent: import_react2.NetworkOptimism,
   nativeCurrency: {
     name: "Ether",
     symbol: "ETH",
@@ -659,7 +660,7 @@ var avalancheMainnet = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "avalanche",
+  iconComponent: import_react2.NetworkAvalanche,
   nativeCurrency: {
     name: "Avalanche",
     symbol: "AVAX",
@@ -681,7 +682,7 @@ var zkSyncEraMainnet = {
   apiUrl: "https://block-explorer-api.mainnet.zksync.io/api",
   primaryExplorerApiIdentifier: "zksync-era-mainnet",
   supportsEtherscanV2: false,
-  icon: "zksync",
+  iconComponent: import_react2.NetworkZksync,
   nativeCurrency: {
     name: "Ether",
     symbol: "ETH",
@@ -703,7 +704,7 @@ var scrollMainnet = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "scroll",
+  iconComponent: import_react2.NetworkScroll,
   nativeCurrency: {
     name: "Ether",
     symbol: "ETH",
@@ -725,7 +726,7 @@ var lineaMainnet = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "linea",
+  iconComponent: import_react2.NetworkLinea,
   nativeCurrency: {
     name: "Ether",
     symbol: "ETH",
@@ -735,6 +736,7 @@ var lineaMainnet = {
 };
 
 // src/networks/testnet.ts
+var import_react3 = require("@web3icons/react");
 var import_chains2 = require("viem/chains");
 var ethereumSepolia = {
   id: "ethereum-sepolia",
@@ -750,7 +752,7 @@ var ethereumSepolia = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "ethereum",
+  iconComponent: import_react3.NetworkEthereum,
   nativeCurrency: {
     name: "Sepolia Ether",
     symbol: "ETH",
@@ -772,7 +774,7 @@ var arbitrumSepolia = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "arbitrum",
+  iconComponent: import_react3.NetworkArbitrumOne,
   nativeCurrency: {
     name: "Arbitrum Sepolia Ether",
     symbol: "ETH",
@@ -794,7 +796,7 @@ var polygonAmoy = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "polygon",
+  iconComponent: import_react3.NetworkPolygon,
   nativeCurrency: {
     name: "MATIC",
     symbol: "MATIC",
@@ -816,7 +818,7 @@ var polygonZkEvmCardona = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "polygon",
+  iconComponent: import_react3.NetworkPolygon,
   nativeCurrency: {
     name: "Ether",
     symbol: "ETH",
@@ -838,7 +840,7 @@ var baseSepolia = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "base",
+  iconComponent: import_react3.NetworkBase,
   nativeCurrency: {
     name: "Sepolia Ether",
     symbol: "ETH",
@@ -860,7 +862,7 @@ var bscTestnet = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "bsc",
+  iconComponent: import_react3.NetworkBinanceSmartChain,
   nativeCurrency: {
     name: "BNB",
     symbol: "BNB",
@@ -882,7 +884,7 @@ var optimismSepolia = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "optimism",
+  iconComponent: import_react3.NetworkOptimism,
   nativeCurrency: {
     name: "Sepolia Ether",
     symbol: "ETH",
@@ -907,7 +909,7 @@ var avalancheFuji = {
   // Unified identifier for V2 API
   supportsEtherscanV2: true,
   requiresExplorerApiKey: true,
-  icon: "avalanche",
+  iconComponent: import_react3.NetworkAvalanche,
   nativeCurrency: {
     name: "Avalanche",
     symbol: "AVAX",
@@ -929,7 +931,7 @@ var zksyncSepoliaTestnet = {
   apiUrl: "https://block-explorer-api.sepolia.zksync.dev/api",
   primaryExplorerApiIdentifier: "zksync-era-sepolia",
   supportsEtherscanV2: false,
-  icon: "zksync",
+  iconComponent: import_react3.NetworkZksync,
   nativeCurrency: {
     name: "Ether",
     symbol: "ETH",
@@ -951,7 +953,7 @@ var scrollSepolia = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "scroll",
+  iconComponent: import_react3.NetworkScroll,
   nativeCurrency: {
     name: "Ether",
     symbol: "ETH",
@@ -973,7 +975,7 @@ var lineaSepolia = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "linea",
+  iconComponent: import_react3.NetworkLinea,
   nativeCurrency: {
     name: "Linea Ether",
     symbol: "ETH",
@@ -995,7 +997,7 @@ var monadTestnet = {
   apiUrl: "https://api.etherscan.io/v2/api",
   primaryExplorerApiIdentifier: "etherscan-v2",
   supportsEtherscanV2: true,
-  icon: "monad",
+  iconComponent: import_react3.NetworkMonad,
   nativeCurrency: {
     name: "Monad",
     symbol: "MON",
@@ -1038,25 +1040,25 @@ var evmNetworks = [...evmMainnetNetworks, ...evmTestnetNetworks];
 
 // src/wallet/rainbowkit/components.tsx
 var import_lucide_react4 = require("lucide-react");
-var import_react6 = require("react");
+var import_react8 = require("react");
 var import_ui_builder_ui5 = require("@openzeppelin/ui-builder-ui");
 var import_ui_builder_utils7 = require("@openzeppelin/ui-builder-utils");
 
 // src/wallet/components/connect/ConnectButton.tsx
 var import_lucide_react = require("lucide-react");
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_ui_builder_react_core2 = require("@openzeppelin/ui-builder-react-core");
 var import_ui_builder_ui2 = require("@openzeppelin/ui-builder-ui");
 var import_ui_builder_utils4 = require("@openzeppelin/ui-builder-utils");
 
 // src/wallet/utils/SafeWagmiComponent.tsx
-var import_react3 = require("react");
+var import_react5 = require("react");
 var import_ui_builder_utils2 = require("@openzeppelin/ui-builder-utils");
 
 // src/wallet/hooks/useIsWagmiProviderInitialized.ts
-var import_react2 = require("react");
+var import_react4 = require("react");
 var useIsWagmiProviderInitialized = () => {
-  return (0, import_react2.useContext)(WagmiProviderInitializedContext);
+  return (0, import_react4.useContext)(WagmiProviderInitializedContext);
 };
 
 // src/wallet/utils/SafeWagmiComponent.tsx
@@ -1066,13 +1068,13 @@ var SafeWagmiComponent = ({
   fallback = null
 }) => {
   const isProviderInitialized = useIsWagmiProviderInitialized();
-  const [hasError, setHasError] = (0, import_react3.useState)(false);
-  (0, import_react3.useEffect)(() => {
+  const [hasError, setHasError] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
     if (isProviderInitialized) {
       setHasError(false);
     }
   }, [isProviderInitialized]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const handleError = (event) => {
       if (event.error?.message?.includes("useConfig") || event.error?.message?.includes("WagmiProvider")) {
         import_ui_builder_utils2.logger.debug(
@@ -1105,7 +1107,7 @@ var SafeWagmiComponent = ({
 };
 
 // src/wallet/components/connect/ConnectorDialog.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 var import_ui_builder_react_core = require("@openzeppelin/ui-builder-react-core");
 var import_ui_builder_ui = require("@openzeppelin/ui-builder-ui");
 
@@ -1165,12 +1167,12 @@ var ConnectorDialogContent = ({ open, onOpenChange }) => {
     pendingConnector
   } = (0, import_ui_builder_react_core.useDerivedConnectStatus)();
   const { isConnected } = (0, import_ui_builder_react_core.useDerivedAccountStatus)();
-  const [connectingId, setConnectingId] = (0, import_react4.useState)(null);
+  const [connectingId, setConnectingId] = (0, import_react6.useState)(null);
   const fullConfig = useUiKitConfig();
   const showInjectedConnector = isConfigEnabled("showInjectedConnector");
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
   }, [fullConfig, showInjectedConnector, isConnecting, pendingConnector]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (isConnected && connectingId) {
       onOpenChange(false);
       setConnectingId(null);
@@ -1219,7 +1221,7 @@ var CustomConnectButton = ({
   className,
   hideWhenConnected = true
 }) => {
-  const [dialogOpen, setDialogOpen] = (0, import_react5.useState)(false);
+  const [dialogOpen, setDialogOpen] = (0, import_react7.useState)(false);
   const unavailableButton = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_ui_builder_utils4.cn)("flex items-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui_builder_ui2.Button, { disabled: true, variant: "outline", size: "sm", className: "h-8 px-2 text-xs", children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Wallet, { className: "size-3.5 mr-1" }),
     "Wallet Unavailable"
@@ -1237,19 +1239,19 @@ var CustomConnectButton = ({
 var ConnectButtonContent = ({ className, dialogOpen, setDialogOpen, hideWhenConnected }) => {
   const { isConnected } = (0, import_ui_builder_react_core2.useDerivedAccountStatus)();
   const { isConnecting: isHookConnecting, error: connectError } = (0, import_ui_builder_react_core2.useDerivedConnectStatus)();
-  const [isManuallyInitiated, setIsManuallyInitiated] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const [isManuallyInitiated, setIsManuallyInitiated] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     if (isConnected && hideWhenConnected) {
       setDialogOpen(false);
       setIsManuallyInitiated(false);
     }
   }, [isConnected, hideWhenConnected, setDialogOpen]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!dialogOpen) {
       setIsManuallyInitiated(false);
     }
   }, [dialogOpen]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (isHookConnecting) {
       setIsManuallyInitiated(false);
     }
@@ -1396,20 +1398,20 @@ function extractRainbowKitCustomizations(kitConfig) {
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var MIN_COMPONENT_LOADING_DISPLAY_MS = 1e3;
 var RainbowKitConnectButton = (props) => {
-  const [Component, setComponent] = (0, import_react6.useState)(null);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const [isLoadingComponent, setIsLoadingComponent] = (0, import_react6.useState)(true);
-  const [showComponentLoadingOverride, setShowComponentLoadingOverride] = (0, import_react6.useState)(false);
-  const componentLoadingTimerRef = (0, import_react6.useRef)(null);
-  const [managerState, setManagerState] = (0, import_react6.useState)(evmUiKitManager.getState());
-  const isWagmiProviderReady = (0, import_react6.useContext)(WagmiProviderInitializedContext);
-  (0, import_react6.useEffect)(() => {
+  const [Component, setComponent] = (0, import_react8.useState)(null);
+  const [error, setError] = (0, import_react8.useState)(null);
+  const [isLoadingComponent, setIsLoadingComponent] = (0, import_react8.useState)(true);
+  const [showComponentLoadingOverride, setShowComponentLoadingOverride] = (0, import_react8.useState)(false);
+  const componentLoadingTimerRef = (0, import_react8.useRef)(null);
+  const [managerState, setManagerState] = (0, import_react8.useState)(evmUiKitManager.getState());
+  const isWagmiProviderReady = (0, import_react8.useContext)(WagmiProviderInitializedContext);
+  (0, import_react8.useEffect)(() => {
     const unsubscribe = evmUiKitManager.subscribe(() => {
       setManagerState(evmUiKitManager.getState());
     });
     return unsubscribe;
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     let isMounted = true;
     setIsLoadingComponent(true);
     setShowComponentLoadingOverride(true);
@@ -2288,10 +2290,10 @@ var minimalDefaultWagmiConfig = (0, import_core3.createConfig)({
   }
 });
 var EvmWalletUiRoot = ({ children }) => {
-  const [managerState, setManagerState] = (0, import_react7.useState)(
+  const [managerState, setManagerState] = (0, import_react9.useState)(
     evmUiKitManager.getState()
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const handleStateChange = () => {
       setManagerState(evmUiKitManager.getState());
     };
@@ -2299,7 +2301,7 @@ var EvmWalletUiRoot = ({ children }) => {
     handleStateChange();
     return unsubscribe;
   }, []);
-  const queryClient = (0, import_react7.useMemo)(() => stableQueryClient, []);
+  const queryClient = (0, import_react9.useMemo)(() => stableQueryClient, []);
   const {
     wagmiConfig,
     kitProviderComponent,
@@ -4827,7 +4829,7 @@ var EoaExecutionStrategy = class {
 };
 
 // src/transaction/components/EvmRelayerOptions.tsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var import_ui_builder_ui9 = require("@openzeppelin/ui-builder-ui");
 
 // src/transaction/components/AdvancedInfo.tsx
@@ -5080,11 +5082,11 @@ var SpeedSelection = ({ selectedSpeed, onSpeedChange }) => {
 };
 
 // src/transaction/components/useEvmRelayerOptions.ts
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_react_hook_form = require("react-hook-form");
 var import_relayer_sdk3 = require("@openzeppelin/relayer-sdk");
 var useEvmRelayerOptions = ({ options, onChange }) => {
-  const onChangeRef = (0, import_react8.useRef)(onChange);
+  const onChangeRef = (0, import_react10.useRef)(onChange);
   onChangeRef.current = onChange;
   const initialOptions = {
     speed: (() => {
@@ -5105,14 +5107,14 @@ var useEvmRelayerOptions = ({ options, onChange }) => {
     }
   });
   const formValues = watch("transactionOptions");
-  const isInitialMount = (0, import_react8.useRef)(true);
+  const isInitialMount = (0, import_react10.useRef)(true);
   const hasCustomSettings = Boolean(
     formValues.gasPrice || formValues.maxFeePerGas || formValues.maxPriorityFeePerGas
   );
   const configMode = hasCustomSettings ? "custom" : "speed";
   const isEip1559 = Boolean(formValues.maxFeePerGas || formValues.maxPriorityFeePerGas);
   const gasType = isEip1559 ? "eip1559" : "legacy";
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
       if (initialOptions.speed && !options.speed) {
@@ -5124,7 +5126,7 @@ var useEvmRelayerOptions = ({ options, onChange }) => {
       return;
     }
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (isInitialMount.current) {
       return;
     }
@@ -5205,7 +5207,7 @@ var useEvmRelayerOptions = ({ options, onChange }) => {
 // src/transaction/components/EvmRelayerOptions.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var EvmRelayerOptions = ({ options, onChange }) => {
-  const [showAdvancedInfo, setShowAdvancedInfo] = import_react9.default.useState(false);
+  const [showAdvancedInfo, setShowAdvancedInfo] = import_react11.default.useState(false);
   const {
     control,
     formValues,