@hyperlane-xyz/widgets 5.4.0 → 5.5.0

package/dist/chains/ChainAddMenu.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ChainMap, ChainMetadata } from '@hyperlane-xyz/sdk';
+export interface ChainAddMenuProps {
+    chainMetadata: ChainMap<ChainMetadata>;
+    overrideChainMetadata?: ChainMap<Partial<ChainMetadata> | undefined>;
+    onChangeOverrideMetadata: (overrides?: ChainMap<Partial<ChainMetadata> | undefined>) => void;
+    onClickBack?: () => void;
+}
+export declare function ChainAddMenu(props: ChainAddMenuProps): React.JSX.Element;
+//# sourceMappingURL=ChainAddMenu.d.ts.map

package/dist/chains/ChainAddMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainAddMenu.d.ts","sourceRoot":"","sources":["../../src/chains/ChainAddMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EACL,QAAQ,EACR,aAAa,EAGd,MAAM,oBAAoB,CAAC;AAe5B,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IACvC,qBAAqB,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,SAAS,CAAC,CAAC;IACrE,wBAAwB,EAAE,CACxB,SAAS,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,SAAS,CAAC,KACrD,IAAI,CAAC;IACV,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAOpD"}

package/dist/chains/ChainAddMenu.js

@@ -0,0 +1,102 @@
+import clsx from 'clsx';
+import React, { useState } from 'react';
+import { DEFAULT_GITHUB_REGISTRY } from '@hyperlane-xyz/registry';
+import { ChainMetadataSchema, MultiProtocolProvider, } from '@hyperlane-xyz/sdk';
+import { failure, success, tryParseJsonOrYaml, } from '@hyperlane-xyz/utils';
+import { ColorPalette } from '../color.js';
+import { Button } from '../components/Button.js';
+import { CopyButton } from '../components/CopyButton.js';
+import { LinkButton } from '../components/LinkButton.js';
+import { ChevronIcon } from '../icons/Chevron.js';
+import { PlusIcon } from '../icons/Plus.js';
+export function ChainAddMenu(props) {
+    return (React.createElement("div", { className: "htw-space-y-4" },
+        React.createElement(Header, { ...props }),
+        React.createElement(Form, { ...props })));
+}
+function Header({ onClickBack }) {
+    return (React.createElement("div", null,
+        !!onClickBack && (React.createElement(LinkButton, { onClick: onClickBack, className: "htw-py-1 htw-mb-1.5" },
+            React.createElement("div", { className: "htw-flex htw-items-center htw-gap-1.5" },
+                React.createElement(ChevronIcon, { width: 12, height: 12, direction: "w", className: "htw-opacity-70" }),
+                React.createElement("span", { className: "htw-text-xs htw-text-gray-600" }, "Back")))),
+        React.createElement("h2", { className: "htw-text-lg htw-font-medium" }, "Add chain metadata"),
+        React.createElement("p", { className: "htw-mt-1 htw-text-sm htw-text-gray-500" },
+            "Add metadata for chains not yet included in the",
+            ' ',
+            React.createElement("a", { href: DEFAULT_GITHUB_REGISTRY, target: "_blank", rel: "noopener noreferrer", className: "htw-underline htw-underline-offset-2" }, "Hyperlane Canonical Registry"),
+            ". Note, this data will only be used locally in your own browser. It does not affect the registry.")));
+}
+function Form({ chainMetadata, overrideChainMetadata, onChangeOverrideMetadata, onClickBack, }) {
+    const [textInput, setTextInput] = useState('');
+    const [error, setError] = useState(null);
+    const onChangeInput = (e) => {
+        setTextInput(e.target.value);
+        setError(null);
+    };
+    const onClickAdd = () => {
+        const result = tryParseMetadataInput(textInput, chainMetadata);
+        if (result.success) {
+            onChangeOverrideMetadata({
+                ...overrideChainMetadata,
+                [result.data.name]: result.data,
+            });
+            setTextInput('');
+            onClickBack?.();
+        }
+        else {
+            setError(`Invalid config: ${result.error}`);
+        }
+    };
+    return (React.createElement("div", { className: "htw-space-y-1.5" },
+        React.createElement("div", { className: "htw-relative" },
+            React.createElement("textarea", { className: clsx('htw-text-xs htw-resize htw-border htw-border-gray-200 focus:htw-border-gray-400 htw-rounded-sm htw-p-2 htw-w-full htw-min-h-72 htw-outline-none', error && 'htw-border-red-500'), placeholder: placeholderText, value: textInput, onChange: onChangeInput }),
+            error && React.createElement("div", { className: "htw-text-red-600 htw-text-sm" }, error),
+            React.createElement(CopyButton, { copyValue: textInput || placeholderText, width: 14, height: 14, className: "htw-absolute htw-right-6 htw-top-3" })),
+        React.createElement(Button, { onClick: onClickAdd, className: "htw-bg-gray-600 htw-px-3 htw-py-1.5 htw-gap-1 htw-text-white htw-text-sm" },
+            React.createElement(PlusIcon, { width: 20, height: 20, color: ColorPalette.White }),
+            React.createElement("span", null, "Add chain"))));
+}
+function tryParseMetadataInput(input, existingChainMetadata) {
+    const parsed = tryParseJsonOrYaml(input);
+    if (!parsed.success)
+        return parsed;
+    const result = ChainMetadataSchema.safeParse(parsed.data);
+    if (!result.success) {
+        console.error('Error validating chain config', result.error);
+        const firstIssue = result.error.issues[0];
+        return failure(`${firstIssue.path} => ${firstIssue.message}`);
+    }
+    const newMetadata = result.data;
+    const multiProvider = new MultiProtocolProvider(existingChainMetadata);
+    if (multiProvider.tryGetChainMetadata(newMetadata.name)) {
+        return failure('name is already in use by another chain');
+    }
+    if (multiProvider.tryGetChainMetadata(newMetadata.chainId)) {
+        return failure('chainId is already in use by another chain');
+    }
+    if (newMetadata.domainId &&
+        multiProvider.tryGetChainMetadata(newMetadata.domainId)) {
+        return failure('domainId is already in use by another chain');
+    }
+    return success(newMetadata);
+}
+const placeholderText = `# YAML data
+---
+chainId: 11155111
+name: sepolia
+displayName: Sepolia
+protocol: ethereum
+rpcUrls:
+  - http: https://foobar.com
+blockExplorers:
+  - name: Sepolia Etherscan
+    family: etherscan
+    url: https://sepolia.etherscan.io
+    apiUrl: https://api-sepolia.etherscan.io/api
+    apiKey: '12345'
+blocks:
+  confirmations: 1
+  estimateBlockTime: 13
+`;
+//# sourceMappingURL=ChainAddMenu.js.map

package/dist/chains/ChainAddMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainAddMenu.js","sourceRoot":"","sources":["../../src/chains/ChainAddMenu.tsx"],"names":[],"mappings":"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"}

package/dist/chains/ChainDetailsMenu.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ChainMetadata } from '@hyperlane-xyz/sdk';
+export interface ChainDetailsMenuProps {
+    chainMetadata: ChainMetadata;
+    overrideChainMetadata?: Partial<ChainMetadata>;
+    onChangeOverrideMetadata: (overrides?: Partial<ChainMetadata>) => void;
+    onClickBack?: () => void;
+    onRemoveChain?: () => void;
+}
+export declare function ChainDetailsMenu(props: ChainDetailsMenuProps): React.JSX.Element;
+//# sourceMappingURL=ChainDetailsMenu.d.ts.map

package/dist/chains/ChainDetailsMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainDetailsMenu.d.ts","sourceRoot":"","sources":["../../src/chains/ChainDetailsMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAI/E,OAAO,EACL,aAAa,EAGd,MAAM,oBAAoB,CAAC;AA8B5B,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,aAAa,CAAC;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAC/C,wBAAwB,EAAE,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACvE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAoB5D"}

package/dist/chains/ChainDetailsMenu.js

@@ -0,0 +1,224 @@
+import clsx from 'clsx';
+import React, { useEffect, useMemo, useState } from 'react';
+import { stringify as yamlStringify } from 'yaml';
+import { DEFAULT_GITHUB_REGISTRY } from '@hyperlane-xyz/registry';
+import { isValidChainMetadata, mergeChainMetadata, } from '@hyperlane-xyz/sdk';
+import { failure, isNullish, isUrl, objMerge, objOmit, success, tryParseJsonOrYaml, } from '@hyperlane-xyz/utils';
+import { ColorPalette } from '../color.js';
+import { CopyButton } from '../components/CopyButton.js';
+import { IconButton } from '../components/IconButton.js';
+import { LinkButton } from '../components/LinkButton.js';
+import { TextInput } from '../components/TextInput.js';
+import { Tooltip } from '../components/Tooltip.js';
+import { BoxArrowIcon } from '../icons/BoxArrow.js';
+import { CheckmarkIcon } from '../icons/Checkmark.js';
+import { ChevronIcon } from '../icons/Chevron.js';
+import { Circle } from '../icons/Circle.js';
+import { PlusCircleIcon } from '../icons/PlusCircle.js';
+import { Spinner } from '../icons/Spinner.js';
+import { XIcon } from '../icons/X.js';
+import { useConnectionHealthTest } from '../utils/useChainConnectionTest.js';
+import { ChainLogo } from './ChainLogo.js';
+import { ChainConnectionType } from './types.js';
+export function ChainDetailsMenu(props) {
+    const mergedMetadata = useMemo(() => mergeChainMetadata(props.chainMetadata || {}, props.overrideChainMetadata || {}), [props]);
+    return (React.createElement("div", { className: "htw-space-y-4" },
+        React.createElement(ChainHeader, { ...props, chainMetadata: mergedMetadata }),
+        React.createElement(ButtonRow, { ...props, chainMetadata: mergedMetadata }),
+        React.createElement(ChainRpcs, { ...props, chainMetadata: mergedMetadata }),
+        React.createElement(ChainExplorers, { ...props, chainMetadata: mergedMetadata }),
+        React.createElement(ChainInfo, { ...props, chainMetadata: mergedMetadata }),
+        React.createElement(MetadataOverride, { ...props, chainMetadata: mergedMetadata })));
+}
+function ChainHeader({ chainMetadata, onClickBack, }) {
+    return (React.createElement("div", null,
+        !!onClickBack && (React.createElement(LinkButton, { onClick: onClickBack, className: "htw-py-1 htw-mb-1.5" },
+            React.createElement("div", { className: "htw-flex htw-items-center htw-gap-1.5" },
+                React.createElement(ChevronIcon, { width: 12, height: 12, direction: "w", className: "htw-opacity-70" }),
+                React.createElement("span", { className: "htw-text-xs htw-text-gray-600" }, "Back")))),
+        React.createElement("div", { className: "htw-flex htw-items-center htw-gap-3" },
+            React.createElement(ChainLogo, { chainName: chainMetadata.name, logoUri: chainMetadata.logoURI, size: 30 }),
+            React.createElement("h2", { className: "htw-text-lg htw-font-medium" }, `${chainMetadata.displayName} Metadata`))));
+}
+function ButtonRow({ chainMetadata, onRemoveChain }) {
+    const { name } = chainMetadata;
+    const copyValue = useMemo(() => yamlStringify(chainMetadata), [chainMetadata]);
+    return (React.createElement("div", { className: "htw-pl-0.5 htw-flex htw-items-center htw-gap-10" },
+        React.createElement("div", { className: "htw-flex htw-items-center htw-gap-1.5" },
+            React.createElement(BoxArrowIcon, { width: 13, height: 13 }),
+            React.createElement("a", { 
+                // TODO support alternative registries here
+                href: `${DEFAULT_GITHUB_REGISTRY}/tree/main/chains/${name}`, target: "_blank", rel: "noopener noreferrer", className: "htw-text-sm hover:htw-underline htw-underline-offset-2 active:htw-opacity-70 htw-transition-all" }, "View in registry")),
+        React.createElement("div", { className: "htw-flex htw-items-center htw-gap-1" },
+            React.createElement(CopyButton, { width: 12, height: 12, copyValue: copyValue, className: "htw-text-sm hover:htw-underline htw-underline-offset-2 active:htw-opacity-70" }, "Copy Metadata")),
+        onRemoveChain && (React.createElement(LinkButton, { onClick: onRemoveChain, className: "htw-text-sm htw-text-red-500 htw-gap-1.5" },
+            React.createElement(XIcon, { width: 10, height: 10, color: ColorPalette.Red }),
+            React.createElement("span", null, "Delete Chain")))));
+}
+function ChainRpcs(props) {
+    return (React.createElement(ConnectionsSection, { ...props, header: "Connections", type: ChainConnectionType.RPC, tooltip: "Hyperlane tools require chain metadata<br/>with at least one healthy RPC connection." }));
+}
+function ChainExplorers(props) {
+    return (React.createElement(ConnectionsSection, { ...props, header: "Block Explorers", type: ChainConnectionType.Explorer, tooltip: "Explorers are used to provide transaction links and to query data." }));
+}
+function ConnectionsSection({ chainMetadata, overrideChainMetadata, onChangeOverrideMetadata, header, type, tooltip, }) {
+    const values = getConnectionValues(chainMetadata, type);
+    return (React.createElement("div", { className: "htw-space-y-1.5" },
+        React.createElement(SectionHeader, { tooltip: tooltip }, header),
+        values.map((_, i) => (React.createElement(ConnectionRow, { key: i, chainMetadata: chainMetadata, overrideChainMetadata: overrideChainMetadata, onChangeOverrideMetadata: onChangeOverrideMetadata, index: i, type: type }))),
+        React.createElement(AddConnectionButton, { chainMetadata: chainMetadata, overrideChainMetadata: overrideChainMetadata, onChangeOverrideMetadata: onChangeOverrideMetadata, type: type })));
+}
+function AddConnectionButton({ chainMetadata, overrideChainMetadata, onChangeOverrideMetadata, type, }) {
+    const [isAdding, setIsAdding] = useState(false);
+    const [isInvalid, setIsInvalid] = useState(false);
+    const [url, setUrl] = useState('');
+    const onClickDismiss = () => {
+        setIsAdding(false);
+        setIsInvalid(false);
+        setUrl('');
+    };
+    const onClickAdd = (e) => {
+        e?.preventDefault();
+        const currentValues = getConnectionValues(chainMetadata, type);
+        const newValue = url?.trim();
+        if (!newValue || !isUrl(newValue) || currentValues.includes(newValue)) {
+            setIsInvalid(true);
+            return;
+        }
+        let newOverrides = {};
+        if (type === ChainConnectionType.RPC) {
+            newOverrides = {
+                rpcUrls: [{ http: newValue }],
+            };
+        }
+        else if (type === ChainConnectionType.Explorer) {
+            const hostName = new URL(newValue).hostname;
+            newOverrides = {
+                blockExplorers: [{ url: newValue, apiUrl: newValue, name: hostName }],
+            };
+        }
+        onChangeOverrideMetadata(objMerge(overrideChainMetadata || {}, newOverrides, 10, true));
+        onClickDismiss();
+    };
+    if (!isAdding) {
+        return (React.createElement(LinkButton, { className: "htw-gap-3", onClick: () => setIsAdding(true) },
+            React.createElement(PlusCircleIcon, { width: 15, height: 15, color: ColorPalette.LightGray }),
+            React.createElement("div", { className: "htw-text-sm" }, `Add new ${type}`)));
+    }
+    return (React.createElement("form", { className: "htw-flex htw-items-center htw-gap-2", onSubmit: (e) => onClickAdd(e) },
+        React.createElement(PlusCircleIcon, { width: 15, height: 15, color: ColorPalette.LightGray }),
+        React.createElement("div", { className: "htw-flex htw-items-stretch htw-gap-1" },
+            React.createElement(TextInput, { className: `htw-w-64 htw-text-sm htw-px-1 htw-rounded-sm ${isInvalid && 'htw-text-red-500'}`, placeholder: `Enter ${type} URL`, value: url, onChange: setUrl }),
+            React.createElement(IconButton, { onClick: () => onClickAdd(), className: "htw-bg-gray-600 htw-rounded-sm htw-px-1" },
+                React.createElement(CheckmarkIcon, { width: 20, height: 20, color: ColorPalette.White })),
+            React.createElement(IconButton, { onClick: onClickDismiss, className: "htw-bg-gray-600 htw-rounded-sm htw-px-1" },
+                React.createElement(XIcon, { width: 9, height: 9, color: ColorPalette.White })))));
+}
+function ChainInfo({ chainMetadata }) {
+    const { chainId, domainId, deployer, isTestnet } = chainMetadata;
+    return (React.createElement("div", { className: "htw-space-y-1.5" },
+        React.createElement(SectionHeader, null, "Chain Information"),
+        React.createElement("div", { className: "htw-grid htw-grid-cols-2 htw-gap-1.5" },
+            React.createElement("div", null,
+                React.createElement(SectionHeader, { className: "htw-text-xs" }, "Chain Id"),
+                React.createElement("span", { className: "htw-text-sm" }, chainId)),
+            React.createElement("div", null,
+                React.createElement(SectionHeader, { className: "htw-text-xs" }, "Domain Id"),
+                React.createElement("span", { className: "htw-text-sm" }, domainId)),
+            React.createElement("div", null,
+                React.createElement(SectionHeader, { className: "htw-text-xs" }, "Contract Deployer"),
+                React.createElement("a", { href: deployer?.url, target: "_blank", rel: "noopener noreferrer", className: "htw-text-sm hover:htw-underline htw-underline-offset-2" }, deployer?.name || 'Unknown')),
+            React.createElement("div", null,
+                React.createElement(SectionHeader, { className: "htw-text-xs" }, "Chain Type"),
+                React.createElement("span", { className: "htw-text-sm" }, isTestnet ? 'Testnet' : 'Mainnet')))));
+}
+function MetadataOverride({ chainMetadata, overrideChainMetadata, onChangeOverrideMetadata, }) {
+    const stringified = overrideChainMetadata
+        ? yamlStringify(overrideChainMetadata)
+        : '';
+    const [overrideInput, setOverrideInput] = useState(stringified);
+    const showButton = overrideInput !== stringified;
+    const [isInvalid, setIsInvalid] = useState(false);
+    // Keep input in sync with external changes
+    useEffect(() => {
+        setOverrideInput(stringified);
+    }, [stringified]);
+    const onChangeInput = (e) => {
+        setOverrideInput(e.target.value);
+        setIsInvalid(false);
+    };
+    const onClickSetOverride = () => {
+        const trimmed = overrideInput?.trim();
+        if (!trimmed) {
+            onChangeOverrideMetadata(undefined);
+            return;
+        }
+        const result = tryParseInput(trimmed, chainMetadata);
+        if (result.success) {
+            onChangeOverrideMetadata(result.data);
+            setOverrideInput(trimmed);
+            setIsInvalid(false);
+        }
+        else {
+            setIsInvalid(true);
+        }
+    };
+    return (React.createElement("div", { className: "htw-space-y-1.5" },
+        React.createElement(SectionHeader, { tooltip: "You can set data here to locally override the metadata from the registry." }, "Metadata Overrides"),
+        React.createElement("div", { className: "htw-relative" },
+            React.createElement("textarea", { className: clsx('htw-text-xs htw-resize htw-border htw-border-gray-200 focus:htw-border-gray-400 htw-rounded-sm htw-p-1.5 htw-w-full htw-h-12 htw-outline-none', isInvalid && 'htw-border-red-500'), placeholder: `blocks:\n  confirmations: 10`, value: overrideInput, onChange: onChangeInput }),
+            React.createElement(IconButton, { onClick: onClickSetOverride, className: clsx('htw-right-3.5 htw-top-2 htw-bg-gray-600 htw-rounded-sm htw-px-1', showButton ? 'htw-absolute' : 'htw-hidden') },
+                React.createElement(CheckmarkIcon, { width: 20, height: 20, color: ColorPalette.White })))));
+}
+function SectionHeader({ children, className, tooltip, }) {
+    return (React.createElement("div", { className: "htw-flex htw-items-center htw-gap-3" },
+        React.createElement("h3", { className: `htw-text-sm htw-text-gray-500 ${className}` }, children),
+        tooltip && React.createElement(Tooltip, { id: "metadata-help", content: tooltip })));
+}
+function ConnectionRow({ chainMetadata, overrideChainMetadata = {}, onChangeOverrideMetadata, index, type, }) {
+    const isHealthy = useConnectionHealthTest(chainMetadata, index, type);
+    const value = getConnectionValues(chainMetadata, type)[index];
+    const isRemovable = isOverrideConnection(overrideChainMetadata, type, value);
+    const onClickRemove = () => {
+        let toOmit = {};
+        if (type === ChainConnectionType.RPC) {
+            toOmit = {
+                rpcUrls: [
+                    overrideChainMetadata.rpcUrls.find((r) => r.http === value),
+                ],
+            };
+        }
+        else if (type === ChainConnectionType.Explorer) {
+            toOmit = {
+                blockExplorers: [
+                    overrideChainMetadata.blockExplorers.find((r) => r.url === value),
+                ],
+            };
+        }
+        onChangeOverrideMetadata(objOmit(overrideChainMetadata, toOmit, 10, true));
+    };
+    return (React.createElement("div", { className: "htw-flex htw-items-center htw-gap-3" },
+        isNullish(isHealthy) && type == ChainConnectionType.RPC && (React.createElement(Spinner, { width: 14, height: 14 })),
+        isNullish(isHealthy) && type == ChainConnectionType.Explorer && (React.createElement(Circle, { size: 14, className: "htw-bg-gray-400" })),
+        !isNullish(isHealthy) && (React.createElement(Circle, { size: 14, className: isHealthy ? 'htw-bg-green-500' : 'htw-bg-red-500' })),
+        React.createElement("div", { className: "htw-text-sm htw-truncate" }, value),
+        isRemovable && (React.createElement(IconButton, { className: "htw-bg-gray-600 htw-rounded-sm htw-p-1 htw-mt-0.5", onClick: onClickRemove },
+            React.createElement(XIcon, { width: 8, height: 8, color: ColorPalette.White })))));
+}
+function getConnectionValues(chainMetadata, type) {
+    return ((type === ChainConnectionType.RPC
+        ? chainMetadata.rpcUrls?.map((r) => r.http)
+        : chainMetadata.blockExplorers?.map((b) => b.url)) || []);
+}
+function isOverrideConnection(overrides, type, value) {
+    return getConnectionValues(overrides || {}, type).includes(value);
+}
+function tryParseInput(input, existingChainMetadata) {
+    const parsed = tryParseJsonOrYaml(input);
+    if (!parsed.success)
+        return parsed;
+    const merged = mergeChainMetadata(existingChainMetadata, parsed.data);
+    const isValid = isValidChainMetadata(merged);
+    return isValid ? success(parsed.data) : failure('Invalid metadata overrides');
+}
+//# sourceMappingURL=ChainDetailsMenu.js.map

package/dist/chains/ChainDetailsMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainDetailsMenu.js","sourceRoot":"","sources":["../../src/chains/ChainDetailsMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAqB,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,MAAM,CAAC;AAElD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAEL,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAEL,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,kBAAkB,GACnB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAE7E,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAUjD,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CACH,kBAAkB,CAChB,KAAK,CAAC,aAAa,IAAI,EAAE,EACzB,KAAK,CAAC,qBAAqB,IAAI,EAAE,CAClC,EACH,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,eAAe;QAC5B,oBAAC,WAAW,OAAK,KAAK,EAAE,aAAa,EAAE,cAAc,GAAI;QACzD,oBAAC,SAAS,OAAK,KAAK,EAAE,aAAa,EAAE,cAAc,GAAI;QACvD,oBAAC,SAAS,OAAK,KAAK,EAAE,aAAa,EAAE,cAAc,GAAI;QACvD,oBAAC,cAAc,OAAK,KAAK,EAAE,aAAa,EAAE,cAAc,GAAI;QAC5D,oBAAC,SAAS,OAAK,KAAK,EAAE,aAAa,EAAE,cAAc,GAAI;QACvD,oBAAC,gBAAgB,OAAK,KAAK,EAAE,aAAa,EAAE,cAAc,GAAI,CAC1D,CACP,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,aAAa,EACb,WAAW,GACkD;IAC7D,OAAO,CACL;QACG,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,UAAU,IAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAC,qBAAqB;YAC/D,6BAAK,SAAS,EAAC,uCAAuC;gBACpD,oBAAC,WAAW,IACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,SAAS,EAAC,GAAG,EACb,SAAS,EAAC,gBAAgB,GAC1B;gBACF,8BAAM,SAAS,EAAC,+BAA+B,WAAY,CACvD,CACK,CACd;QACD,6BAAK,SAAS,EAAC,qCAAqC;YAClD,oBAAC,SAAS,IACR,SAAS,EAAE,aAAa,CAAC,IAAI,EAC7B,OAAO,EAAE,aAAa,CAAC,OAAO,EAC9B,IAAI,EAAE,EAAE,GACR;YACF,4BAAI,SAAS,EAAC,6BAA6B,IAAE,GAAG,aAAa,CAAC,WAAW,WAAW,CAAM,CACtF,CACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,aAAa,EAAE,aAAa,EAAyB;IACxE,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,CAAC;IAE/B,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,EAClC,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,iDAAiD;QAC9D,6BAAK,SAAS,EAAC,uCAAuC;YACpD,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI;YACvC;gBACE,2CAA2C;gBAC3C,IAAI,EAAE,GAAG,uBAAuB,qBAAqB,IAAI,EAAE,EAC3D,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAC,iGAAiG,uBAGzG,CACA;QACN,6BAAK,SAAS,EAAC,qCAAqC;YAClD,oBAAC,UAAU,IACT,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,SAAS,EAAE,SAAS,EACpB,SAAS,EAAC,8EAA8E,oBAG7E,CACT;QACL,aAAa,IAAI,CAChB,oBAAC,UAAU,IACT,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,0CAA0C;YAEpD,oBAAC,KAAK,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,GAAG,GAAI;YACzD,iDAAyB,CACd,CACd,CACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAA4B;IAC7C,OAAO,CACL,oBAAC,kBAAkB,OACb,KAAK,EACT,MAAM,EAAC,aAAa,EACpB,IAAI,EAAE,mBAAmB,CAAC,GAAG,EAC7B,OAAO,EAAC,sFAAsF,GAC9F,CACH,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,KAA4B;IAClD,OAAO,CACL,oBAAC,kBAAkB,OACb,KAAK,EACT,MAAM,EAAC,iBAAiB,EACxB,IAAI,EAAE,mBAAmB,CAAC,QAAQ,EAClC,OAAO,EAAC,oEAAoE,GAC5E,CACH,CAAC;AACJ,CAAC;AAED,SAAS,kBAAkB,CAAC,EAC1B,aAAa,EACb,qBAAqB,EACrB,wBAAwB,EACxB,MAAM,EACN,IAAI,EACJ,OAAO,GAKR;IACC,MAAM,MAAM,GAAG,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;IAExD,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,oBAAC,aAAa,IAAC,OAAO,EAAE,OAAO,IAAG,MAAM,CAAiB;QACxD,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACpB,oBAAC,aAAa,IACZ,GAAG,EAAE,CAAC,EACN,aAAa,EAAE,aAAa,EAC5B,qBAAqB,EAAE,qBAAqB,EAC5C,wBAAwB,EAAE,wBAAwB,EAClD,KAAK,EAAE,CAAC,EACR,IAAI,EAAE,IAAI,GACV,CACH,CAAC;QACF,oBAAC,mBAAmB,IAClB,aAAa,EAAE,aAAa,EAC5B,qBAAqB,EAAE,qBAAqB,EAC5C,wBAAwB,EAAE,wBAAwB,EAClD,IAAI,EAAE,IAAI,GACV,CACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB,CAAC,EAC3B,aAAa,EACb,qBAAqB,EACrB,wBAAwB,EACxB,IAAI,GAGL;IACC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnC,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,MAAM,CAAC,EAAE,CAAC,CAAC;IACb,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,CAAoC,EAAE,EAAE;QAC1D,CAAC,EAAE,cAAc,EAAE,CAAC;QAEpB,MAAM,aAAa,GAAG,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;QAC/D,MAAM,QAAQ,GAAG,GAAG,EAAE,IAAI,EAAE,CAAC;QAC7B,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACtE,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,OAAO;QACT,CAAC;QACD,IAAI,YAAY,GAA2B,EAAE,CAAC;QAC9C,IAAI,IAAI,KAAK,mBAAmB,CAAC,GAAG,EAAE,CAAC;YACrC,YAAY,GAAG;gBACb,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;aAC9B,CAAC;QACJ,CAAC;aAAM,IAAI,IAAI,KAAK,mBAAmB,CAAC,QAAQ,EAAE,CAAC;YACjD,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC;YAC5C,YAAY,GAAG;gBACb,cAAc,EAAE,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;aACtE,CAAC;QACJ,CAAC;QACD,wBAAwB,CACtB,QAAQ,CACN,qBAAqB,IAAI,EAAE,EAC3B,YAAY,EACZ,EAAE,EACF,IAAI,CACL,CACF,CAAC;QACF,cAAc,EAAE,CAAC;IACnB,CAAC,CAAC;IAEF,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,CACL,oBAAC,UAAU,IAAC,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC;YAChE,oBAAC,cAAc,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,SAAS,GAAI;YACxE,6BAAK,SAAS,EAAC,aAAa,IAAE,WAAW,IAAI,EAAE,CAAO,CAC3C,CACd,CAAC;IACJ,CAAC;IAED,OAAO,CACL,8BACE,SAAS,EAAC,qCAAqC,EAC/C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;QAE9B,oBAAC,cAAc,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,SAAS,GAAI;QACxE,6BAAK,SAAS,EAAC,sCAAsC;YACnD,oBAAC,SAAS,IACR,SAAS,EAAE,gDACT,SAAS,IAAI,kBACf,EAAE,EACF,WAAW,EAAE,SAAS,IAAI,MAAM,EAChC,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,MAAM,GAChB;YACF,oBAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,EAC3B,SAAS,EAAC,yCAAyC;gBAEnD,oBAAC,aAAa,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,KAAK,GAAI,CACxD;YACb,oBAAC,UAAU,IACT,OAAO,EAAE,cAAc,EACvB,SAAS,EAAC,yCAAyC;gBAEnD,oBAAC,KAAK,IAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,KAAK,GAAI,CAC9C,CACT,CACD,CACR,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,EAAE,aAAa,EAAoC;IACpE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC;IAEjE,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,oBAAC,aAAa,4BAAkC;QAChD,6BAAK,SAAS,EAAC,sCAAsC;YACnD;gBACE,oBAAC,aAAa,IAAC,SAAS,EAAC,aAAa,eAAyB;gBAC/D,8BAAM,SAAS,EAAC,aAAa,IAAE,OAAO,CAAQ,CAC1C;YACN;gBACE,oBAAC,aAAa,IAAC,SAAS,EAAC,aAAa,gBAA0B;gBAChE,8BAAM,SAAS,EAAC,aAAa,IAAE,QAAQ,CAAQ,CAC3C;YACN;gBACE,oBAAC,aAAa,IAAC,SAAS,EAAC,aAAa,wBAEtB;gBAChB,2BACE,IAAI,EAAE,QAAQ,EAAE,GAAG,EACnB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAC,wDAAwD,IAEjE,QAAQ,EAAE,IAAI,IAAI,SAAS,CAC1B,CACA;YACN;gBACE,oBAAC,aAAa,IAAC,SAAS,EAAC,aAAa,iBAA2B;gBACjE,8BAAM,SAAS,EAAC,aAAa,IAC1B,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAC7B,CACH,CACF,CACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,EACxB,aAAa,EACb,qBAAqB,EACrB,wBAAwB,GACF;IACtB,MAAM,WAAW,GAAG,qBAAqB;QACvC,CAAC,CAAC,aAAa,CAAC,qBAAqB,CAAC;QACtC,CAAC,CAAC,EAAE,CAAC;IACP,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,aAAa,KAAK,WAAW,CAAC;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,2CAA2C;IAC3C,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,aAAa,GAAG,CAAC,CAAyC,EAAE,EAAE;QAClE,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,MAAM,OAAO,GAAG,aAAa,EAAE,IAAI,EAAE,CAAC;QACtC,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,wBAAwB,CAAC,SAAS,CAAC,CAAC;YACpC,OAAO;QACT,CAAC;QACD,MAAM,MAAM,GAAG,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;QACrD,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,wBAAwB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YACtC,gBAAgB,CAAC,OAAO,CAAC,CAAC;YAC1B,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,oBAAC,aAAa,IAAC,OAAO,EAAC,2EAA2E,yBAElF;QAChB,6BAAK,SAAS,EAAC,cAAc;YAC3B,kCACE,SAAS,EAAE,IAAI,CACb,+IAA+I,EAC/I,SAAS,IAAI,oBAAoB,CAClC,EACD,WAAW,EAAE,8BAA8B,EAC3C,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,aAAa,GACb;YACZ,oBAAC,UAAU,IACT,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAE,IAAI,CACb,iEAAiE,EACjE,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAC3C;gBAED,oBAAC,aAAa,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,KAAK,GAAI,CACxD,CACT,CACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,OAAO,GACqD;IAC5D,OAAO,CACL,6BAAK,SAAS,EAAC,qCAAqC;QAClD,4BAAI,SAAS,EAAE,iCAAiC,SAAS,EAAE,IACxD,QAAQ,CACN;QACJ,OAAO,IAAI,oBAAC,OAAO,IAAC,EAAE,EAAC,eAAe,EAAC,OAAO,EAAE,OAAO,GAAI,CACxD,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,aAAa,EACb,qBAAqB,GAAG,EAAE,EAC1B,wBAAwB,EACxB,KAAK,EACL,IAAI,GAIL;IACC,MAAM,SAAS,GAAG,uBAAuB,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;IACtE,MAAM,KAAK,GAAG,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,WAAW,GAAG,oBAAoB,CAAC,qBAAqB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IAE7E,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,MAAM,GAA2B,EAAE,CAAC;QACxC,IAAI,IAAI,KAAK,mBAAmB,CAAC,GAAG,EAAE,CAAC;YACrC,MAAM,GAAG;gBACP,OAAO,EAAE;oBACP,qBAAqB,CAAC,OAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,KAAK,CAAE;iBAC9D;aACF,CAAC;QACJ,CAAC;aAAM,IAAI,IAAI,KAAK,mBAAmB,CAAC,QAAQ,EAAE,CAAC;YACjD,MAAM,GAAG;gBACP,cAAc,EAAE;oBACd,qBAAqB,CAAC,cAAe,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,CAAE;iBACpE;aACF,CAAC;QACJ,CAAC;QACD,wBAAwB,CACtB,OAAO,CAAyB,qBAAqB,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,CACzE,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,qCAAqC;QACjD,SAAS,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,mBAAmB,CAAC,GAAG,IAAI,CAC1D,oBAAC,OAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CACnC;QACA,SAAS,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,mBAAmB,CAAC,QAAQ,IAAI,CAC/D,oBAAC,MAAM,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,iBAAiB,GAAG,CACjD;QACA,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CACxB,oBAAC,MAAM,IACL,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,GAC5D,CACH;QACD,6BAAK,SAAS,EAAC,0BAA0B,IAAE,KAAK,CAAO;QACtD,WAAW,IAAI,CACd,oBAAC,UAAU,IACT,SAAS,EAAC,mDAAmD,EAC7D,OAAO,EAAE,aAAa;YAEtB,oBAAC,KAAK,IAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,KAAK,GAAI,CAC9C,CACd,CACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB,CAC1B,aAAqC,EACrC,IAAyB;IAEzB,OAAO,CACL,CAAC,IAAI,KAAK,mBAAmB,CAAC,GAAG;QAC/B,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAC3C,CAAC,CAAC,aAAa,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAC3D,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAC3B,SAA6C,EAC7C,IAAyB,EACzB,KAAa;IAEb,OAAO,mBAAmB,CAAC,SAAS,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACpE,CAAC;AAED,SAAS,aAAa,CACpB,KAAa,EACb,qBAAoC;IAEpC,MAAM,MAAM,GAAG,kBAAkB,CAAyB,KAAK,CAAC,CAAC;IACjE,IAAI,CAAC,MAAM,CAAC,OAAO;QAAE,OAAO,MAAM,CAAC;IACnC,MAAM,MAAM,GAAG,kBAAkB,CAAC,qBAAqB,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IACtE,MAAM,OAAO,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC7C,OAAO,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAChF,CAAC"}

package/dist/{icons → chains}/ChainLogo.d.ts

@@ -7,11 +7,12 @@ type SvgIcon = (props: {
 }) => ReactElement;
 export interface ChainLogoProps {
     chainName: string;
-    registry: IRegistry;
+    logoUri?: string;
+    registry?: IRegistry;
     size?: number;
     background?: boolean;
     Icon?: SvgIcon;
 }
-export declare function ChainLogo({ chainName, registry, size, background, Icon, }: ChainLogoProps): React.JSX.Element;
+export declare function ChainLogo({ chainName, logoUri, registry, size, background, Icon, }: ChainLogoProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=ChainLogo.d.ts.map

package/dist/chains/ChainLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainLogo.d.ts","sourceRoot":"","sources":["../../src/chains/ChainLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAKzD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,KAAK,YAAY,CAAC;AAEnB,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,IAAS,EACT,UAAkB,EAClB,IAAI,GACL,EAAE,cAAc,qBA8ChB"}

package/dist/{icons → chains}/ChainLogo.js

@@ -1,28 +1,28 @@
 import React, { useEffect, useState } from 'react';
-import { Circle } from './Circle.js';
-import { QuestionMarkIcon } from './QuestionMark.js';
-export function ChainLogo({ chainName, registry, size = 32, background = false, Icon, }) {
+import { Circle } from '../icons/Circle.js';
+import { QuestionMarkIcon } from '../icons/QuestionMark.js';
+export function ChainLogo({ chainName, logoUri, registry, size = 32, background = false, Icon, }) {
     const title = chainName || 'Unknown';
     const bgColorSeed = title.charCodeAt(0);
     const iconSize = Math.floor(size / 1.9);
     const [svgLogos, setSvgLogos] = useState({});
-    const logoUri = svgLogos[chainName];
+    const uri = logoUri || svgLogos[chainName];
     useEffect(() => {
-        if (!chainName || svgLogos[chainName] || Icon)
+        if (!chainName || svgLogos[chainName] || logoUri || Icon || !registry)
             return;
         registry
             .getChainLogoUri(chainName)
             .then((uri) => uri && setSvgLogos({ ...svgLogos, [chainName]: uri }))
             .catch((err) => console.error(err));
     }, [chainName, registry, svgLogos, Icon]);
-    if (!logoUri && !Icon) {
+    if (!uri && !Icon) {
         return (React.createElement(Circle, { size: size, title: title, bgColorSeed: bgColorSeed }, chainName ? (React.createElement("div", { style: { fontSize: iconSize } }, chainName[0].toUpperCase())) : (React.createElement(QuestionMarkIcon, { width: iconSize, height: iconSize }))));
     }
     if (background) {
-        return (React.createElement(Circle, { size: size, title: title, classes: "htw-bg-gray-100" }, Icon ? (React.createElement(Icon, { width: iconSize, height: iconSize, title: title })) : (React.createElement("img", { src: logoUri, alt: title, width: iconSize, height: iconSize }))));
+        return (React.createElement(Circle, { size: size, title: title, className: "htw-bg-gray-100" }, Icon ? (React.createElement(Icon, { width: iconSize, height: iconSize, title: title })) : (React.createElement("img", { src: uri, alt: title, width: iconSize, height: iconSize }))));
     }
     else {
-        return Icon ? (React.createElement(Icon, { width: size, height: size, title: title })) : (React.createElement("img", { src: logoUri, alt: title, width: size, height: size }));
+        return Icon ? (React.createElement(Icon, { width: size, height: size, title: title })) : (React.createElement("img", { src: uri, alt: title, width: size, height: size }));
     }
 }
 //# sourceMappingURL=ChainLogo.js.map

package/dist/chains/ChainLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainLogo.js","sourceRoot":"","sources":["../../src/chains/ChainLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAiB5D,MAAM,UAAU,SAAS,CAAC,EACxB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,IAAI,GAAG,EAAE,EACT,UAAU,GAAG,KAAK,EAClB,IAAI,GACW;IACf,MAAM,KAAK,GAAG,SAAS,IAAI,SAAS,CAAC;IACrC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC;IAExC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,GAAG,GAAG,OAAO,IAAI,QAAQ,CAAC,SAAS,CAAC,CAAC;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC,SAAS,CAAC,IAAI,OAAO,IAAI,IAAI,IAAI,CAAC,QAAQ;YACnE,OAAO;QACT,QAAQ;aACL,eAAe,CAAC,SAAS,CAAC;aAC1B,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,IAAI,WAAW,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;aACpE,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1C,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,IACvD,SAAS,CAAC,CAAC,CAAC,CACX,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAG,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAO,CACvE,CAAC,CAAC,CAAC,CACF,oBAAC,gBAAgB,IAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,GAAI,CACxD,CACM,CACV,CAAC;IACJ,CAAC;IAED,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,iBAAiB,IAC1D,IAAI,CAAC,CAAC,CAAC,CACN,oBAAC,IAAI,IAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CAC1D,CAAC,CAAC,CAAC,CACF,6BAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,GAAI,CACjE,CACM,CACV,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,oBAAC,IAAI,IAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CAClD,CAAC,CAAC,CAAC,CACF,6BAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,GAAI,CACzD,CAAC;IACJ,CAAC;AACH,CAAC"}

package/dist/chains/ChainSearchMenu.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ChainMap, ChainMetadata, ChainName } from '@hyperlane-xyz/sdk';
+interface CustomListItemField {
+    header: string;
+    data: ChainMap<{
+        display: string;
+        sortValue: number;
+    }>;
+}
+export interface ChainSearchMenuProps {
+    chainMetadata: ChainMap<ChainMetadata>;
+    overrideChainMetadata?: ChainMap<Partial<ChainMetadata> | undefined>;
+    onChangeOverrideMetadata: (overrides?: ChainMap<Partial<ChainMetadata> | undefined>) => void;
+    onClickChain: (chain: ChainMetadata) => void;
+    customListItemField?: CustomListItemField;
+    showChainDetails?: ChainName;
+    showAddChainMenu?: boolean;
+    showAddChainButton?: boolean;
+}
+export declare function ChainSearchMenu({ chainMetadata, onChangeOverrideMetadata, overrideChainMetadata, onClickChain, customListItemField, showChainDetails, showAddChainButton, showAddChainMenu, }: ChainSearchMenuProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ChainSearchMenu.d.ts.map

package/dist/chains/ChainSearchMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainSearchMenu.d.ts","sourceRoot":"","sources":["../../src/chains/ChainSearchMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,EACL,QAAQ,EACR,aAAa,EACb,SAAS,EAEV,MAAM,oBAAoB,CAAC;AAmC5B,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACxD;AAED,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IACvC,qBAAqB,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,SAAS,CAAC,CAAC;IACrE,wBAAwB,EAAE,CACxB,SAAS,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,SAAS,CAAC,KACrD,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAE7C,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAE1C,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAE7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,eAAe,CAAC,EAC9B,aAAa,EACb,wBAAwB,EACxB,qBAAqB,EACrB,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,GACjB,EAAE,oBAAoB,qBAwEtB"}

package/dist/chains/ChainSearchMenu.js

@@ -0,0 +1,141 @@
+import React, { useCallback, useMemo } from 'react';
+import { mergeChainMetadataMap, } from '@hyperlane-xyz/sdk';
+import { ProtocolType } from '@hyperlane-xyz/utils';
+import { SearchMenu, SortOrderOption, } from '../components/SearchMenu.js';
+import { SegmentedControl } from '../components/SegmentedControl.js';
+import { ChainAddMenu } from './ChainAddMenu.js';
+import { ChainDetailsMenu } from './ChainDetailsMenu.js';
+import { ChainLogo } from './ChainLogo.js';
+var ChainSortByOption;
+(function (ChainSortByOption) {
+    ChainSortByOption["Name"] = "name";
+    ChainSortByOption["ChainId"] = "chain id";
+    ChainSortByOption["Protocol"] = "protocol";
+})(ChainSortByOption || (ChainSortByOption = {}));
+var FilterTestnetOption;
+(function (FilterTestnetOption) {
+    FilterTestnetOption["Testnet"] = "testnet";
+    FilterTestnetOption["Mainnet"] = "mainnet";
+})(FilterTestnetOption || (FilterTestnetOption = {}));
+const defaultFilterState = {
+    type: undefined,
+    protocol: undefined,
+};
+export function ChainSearchMenu({ chainMetadata, onChangeOverrideMetadata, overrideChainMetadata, onClickChain, customListItemField, showChainDetails, showAddChainButton, showAddChainMenu, }) {
+    const [drilldownChain, setDrilldownChain] = React.useState(showChainDetails);
+    const [addChain, setAddChain] = React.useState(showAddChainMenu || false);
+    const { listData, mergedMetadata } = useMemo(() => {
+        const mergedMetadata = mergeChainMetadataMap(chainMetadata, overrideChainMetadata);
+        return { mergedMetadata, listData: Object.values(mergedMetadata) };
+    }, [chainMetadata]);
+    const { ListComponent, searchFn, sortOptions, defaultSortState } = useCustomizedListItems(customListItemField);
+    if (drilldownChain && mergedMetadata[drilldownChain]) {
+        const isLocalOverrideChain = !chainMetadata[drilldownChain];
+        const onRemoveChain = () => {
+            const newOverrides = { ...overrideChainMetadata };
+            delete newOverrides[drilldownChain];
+            onChangeOverrideMetadata(newOverrides);
+        };
+        return (React.createElement(ChainDetailsMenu, { chainMetadata: chainMetadata[drilldownChain], overrideChainMetadata: overrideChainMetadata?.[drilldownChain], onChangeOverrideMetadata: (o) => onChangeOverrideMetadata({
+                ...overrideChainMetadata,
+                [drilldownChain]: o,
+            }), onClickBack: () => setDrilldownChain(undefined), onRemoveChain: isLocalOverrideChain ? onRemoveChain : undefined }));
+    }
+    if (addChain) {
+        return (React.createElement(ChainAddMenu, { chainMetadata: chainMetadata, overrideChainMetadata: overrideChainMetadata, onChangeOverrideMetadata: onChangeOverrideMetadata, onClickBack: () => setAddChain(false) }));
+    }
+    return (React.createElement(SearchMenu, { data: listData, ListComponent: ListComponent, searchFn: searchFn, onClickItem: onClickChain, onClickEditItem: (chain) => setDrilldownChain(chain.name), sortOptions: sortOptions, defaultSortState: defaultSortState, FilterComponent: ChainFilters, defaultFilterState: defaultFilterState, placeholder: "Chain Name or ID", onClickAddItem: showAddChainButton ? () => setAddChain(true) : undefined }));
+}
+function ChainListItem({ data: chain, customField, }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "htw-flex htw-items-center" },
+            React.createElement("div", { className: "htw-shrink-0" },
+                React.createElement(ChainLogo, { chainName: chain.name, logoUri: chain.logoURI, size: 32 })),
+            React.createElement("div", { className: "htw-ml-3 htw-text-left htw-overflow-hidden" },
+                React.createElement("div", { className: "htw-text-sm htw-font-medium truncate" }, chain.displayName),
+                React.createElement("div", { className: "htw-text-[0.7rem] htw-text-gray-500" }, chain.isTestnet ? 'Testnet' : 'Mainnet'))),
+        React.createElement("div", { className: "htw-text-left htw-overflow-hidden" },
+            React.createElement("div", { className: "htw-text-sm truncate" }, customField
+                ? customField.data[chain.name].display || 'Unknown'
+                : chain.deployer?.name || 'Unknown deployer'),
+            React.createElement("div", { className: "htw-text-[0.7rem] htw-text-gray-500" }, customField ? customField.header : 'Deployer'))));
+}
+function ChainFilters({ value, onChange, }) {
+    return (React.createElement("div", { className: "htw-py-3 htw-px-2.5 htw-space-y-4" },
+        React.createElement("div", { className: "htw-flex htw-flex-col htw-items-start htw-gap-2" },
+            React.createElement("label", { className: "htw-text-sm htw-text-gray-600 htw-pl-px" }, "Type"),
+            React.createElement(SegmentedControl, { options: Object.values(FilterTestnetOption), onChange: (selected) => onChange({ ...value, type: selected }), allowEmpty: true })),
+        React.createElement("div", { className: "htw-flex htw-flex-col htw-items-start htw-gap-2" },
+            React.createElement("label", { className: "htw-text-sm htw-text-gray-600 htw-pl-px" }, "Protocol"),
+            React.createElement(SegmentedControl, { options: Object.values(ProtocolType), onChange: (selected) => onChange({ ...value, protocol: selected }), allowEmpty: true }))));
+}
+function chainSearch({ data, query, sort, filter, customListItemField, }) {
+    const queryFormatted = query.trim().toLowerCase();
+    return (data
+        // Query search
+        .filter((chain) => chain.name.includes(queryFormatted) ||
+        chain.displayName?.toLowerCase().includes(queryFormatted) ||
+        chain.chainId.toString().includes(queryFormatted) ||
+        chain.domainId?.toString().includes(queryFormatted))
+        // Filter options
+        .filter((chain) => {
+        let included = true;
+        if (filter.type) {
+            included &&=
+                !!chain.isTestnet === (filter.type === FilterTestnetOption.Testnet);
+        }
+        if (filter.protocol) {
+            included &&= chain.protocol === filter.protocol;
+        }
+        return included;
+    })
+        // Sort options
+        .sort((c1, c2) => {
+        // Special case handling for if the chains are being sorted by the
+        // custom field provided to ChainSearchMenu
+        if (customListItemField && sort.sortBy === customListItemField.header) {
+            const result = customListItemField.data[c1.name].sortValue -
+                customListItemField.data[c2.name].sortValue;
+            return sort.sortOrder === SortOrderOption.Asc ? result : -result;
+        }
+        // Otherwise sort by the default options
+        let sortValue1 = c1.name;
+        let sortValue2 = c2.name;
+        if (sort.sortBy === ChainSortByOption.ChainId) {
+            sortValue1 = c1.chainId.toString();
+            sortValue2 = c2.chainId.toString();
+        }
+        else if (sort.sortBy === ChainSortByOption.Protocol) {
+            sortValue1 = c1.protocol;
+            sortValue2 = c2.protocol;
+        }
+        return sort.sortOrder === SortOrderOption.Asc
+            ? sortValue1.localeCompare(sortValue2)
+            : sortValue2.localeCompare(sortValue1);
+    }));
+}
+/**
+ * This hook creates closures around the provided customListItemField data
+ * This is useful because SearchMenu will do handle the list item rendering and
+ * management but the custom data is more or a chain-search-specific concern
+ */
+function useCustomizedListItems(customListItemField) {
+    // Create closure of ChainListItem but with customField pre-bound
+    const ListComponent = useCallback(({ data }) => (React.createElement(ChainListItem, { data: data, customField: customListItemField })), [ChainListItem, customListItemField]);
+    // Bind the custom field to the search function
+    const searchFn = useCallback((args) => chainSearch({ ...args, customListItemField }), [customListItemField]);
+    // Merge the custom field into the sort options if a custom field exists
+    const sortOptions = useMemo(() => [
+        ...(customListItemField ? [customListItemField.header] : []),
+        ...Object.values(ChainSortByOption),
+    ], [customListItemField]);
+    // Sort by the custom field by default, if one is provided
+    const defaultSortState = useMemo(() => customListItemField
+        ? {
+            sortBy: customListItemField.header,
+            sortOrder: SortOrderOption.Desc,
+        }
+        : undefined, [customListItemField]);
+    return { ListComponent, searchFn, sortOptions, defaultSortState };
+}
+//# sourceMappingURL=ChainSearchMenu.js.map