@embarkai/ui-kit 0.4.20 → 0.4.22

package/dist/hyperbridge-OU2MDJ5Q.js

@@ -0,0 +1,932 @@
+import {
+  Badge,
+  BnbIcon,
+  Button,
+  EthereumIcon,
+  Highlight,
+  Input,
+  LumiaIcon,
+  TOKENS_ICONS,
+  cn,
+  formatPrice,
+  sendUserOperation,
+  useBridgeStore,
+  useFlowSelectorStore,
+  useSession,
+  useT
+} from "./chunk-Q7PR2UUH.js";
+import "./chunk-IKKT5JDT.js";
+import "./chunk-ISXWRCDC.js";
+import "./chunk-DBFKMKYT.js";
+
+// src/internal/components/SendMenu/hyperbridge/HyperlaneBridge.tsx
+import { useEffect as useEffect4 } from "react";
+
+// src/internal/components/SendMenu/hyperbridge/components/TokenSelector.tsx
+import { toPairs } from "lodash-es";
+import { ArrowLeftRightIcon } from "lucide-react";
+import { Fragment, useCallback } from "react";
+
+// src/internal/components/SendMenu/hyperbridge/lib/chains.ts
+import { lumiaMainnetChain as lumiaprism } from "@embarkai/core/read";
+import { bsc, mainnet as ethereum } from "wagmi/chains";
+var CHAINS_META = {
+  lumiaprism: {
+    chainID: lumiaprism.id,
+    chainLabel: lumiaprism.name,
+    chainName: "lumiaprism",
+    // exact hyperlane registry chain name
+    Icon: LumiaIcon
+  },
+  bsc: {
+    chainID: bsc.id,
+    chainLabel: bsc.name,
+    chainName: "bsc",
+    // exact hyperlane registry chain name
+    Icon: BnbIcon
+  },
+  ethereum: {
+    chainID: ethereum.id,
+    chainLabel: ethereum.name,
+    chainName: "ethereum",
+    // exact hyperlane registry chain name
+    Icon: EthereumIcon
+  }
+  // base: {
+  //   chainID: base.id,
+  //   chainLabel: base.name,
+  //   chainName: 'ethereum', // exact hyperlane registry chain name
+  //   Icon: EthereumIcon
+  // },
+};
+
+// src/internal/components/SendMenu/hyperbridge/lib/warp.ts
+import { lumiaMainnetChain as lumiaprism2 } from "@embarkai/core/read";
+import { chainMetadata, warpRouteConfigs } from "@hyperlane-xyz/registry";
+import {
+  MultiProtocolProvider,
+  WarpCore
+} from "@hyperlane-xyz/sdk";
+import { bsc as bsc2, base as ethereum2 } from "wagmi/chains";
+var WARP_ROUTES = [
+  {
+    symbol: "LUMIA",
+    icon: TOKENS_ICONS.LUMIA,
+    id: "LUMIA/arbitrum-avalanche-base-bsc-ethereum-lumiaprism-optimism-polygon",
+    // Canonical LUMIA warp route (includes BSC + Lumia Prism).
+    name: "bsc-lumiaprism",
+    chainPair: [
+      {
+        chainID: bsc2.id,
+        chainLabel: bsc2.name,
+        chainName: "bsc",
+        Icon: BnbIcon
+      },
+      {
+        chainID: lumiaprism2.id,
+        chainLabel: lumiaprism2.name,
+        chainName: "lumiaprism",
+        Icon: LumiaIcon
+      }
+    ]
+  },
+  {
+    symbol: "USDT",
+    icon: TOKENS_ICONS.USDT,
+    id: "USDT/ethereum-lumiaprism",
+    name: "ethereum-lumiaprism",
+    chainPair: [
+      {
+        chainID: ethereum2.id,
+        chainLabel: ethereum2.name,
+        chainName: "ethereum",
+        Icon: EthereumIcon
+      },
+      {
+        chainID: lumiaprism2.id,
+        chainLabel: lumiaprism2.name,
+        chainName: "lumiaprism",
+        Icon: LumiaIcon
+      }
+    ]
+  },
+  {
+    symbol: "USDC",
+    icon: TOKENS_ICONS.USDC,
+    id: "USDC/lumia",
+    name: "ethereum-lumiaprism",
+    chainPair: [
+      {
+        chainID: ethereum2.id,
+        chainLabel: ethereum2.name,
+        chainName: "ethereum",
+        Icon: EthereumIcon
+      },
+      {
+        chainID: lumiaprism2.id,
+        chainLabel: lumiaprism2.name,
+        chainName: "lumiaprism",
+        Icon: LumiaIcon
+      }
+    ]
+  }
+];
+function buildLumiaWarpConfig(warpRouteId) {
+  const config = warpRouteConfigs[warpRouteId];
+  if (!config) {
+    console.warn(`[HYPERLANE SDK] Warp route ${warpRouteId} not found in @hyperlane-xyz/registry`);
+    return null;
+  }
+  return config;
+}
+function tokenConnectionId(chainName, addressOrDenom) {
+  return `ethereum|${chainName}|${addressOrDenom}`.toLowerCase();
+}
+function filterWarpConfigForChains(config, chains) {
+  const chainSet = new Set(chains);
+  const tokens = config.tokens.filter((t) => chainSet.has(t.chainName) && t.addressOrDenom);
+  const allowedConnectionIds = new Set(tokens.map((t) => tokenConnectionId(t.chainName, t.addressOrDenom)));
+  const prunedTokens = tokens.map((token) => ({
+    ...token,
+    connections: (token.connections ?? []).filter((c) => allowedConnectionIds.has(c.token.toLowerCase()))
+  }));
+  return { ...config, tokens: prunedTokens };
+}
+function isDirectRouteAvailable(config, originChain, destinationChain) {
+  const originTokens = config.tokens.find((t) => t.chainName === originChain);
+  const destinationTokens = config.tokens.find((t) => t.chainName === destinationChain);
+  if (!originTokens || !destinationTokens) return false;
+  const destinationTokensId = `ethereum|${destinationChain}|${destinationTokens.addressOrDenom}`.toLowerCase();
+  return (originTokens.connections ?? []).some((c) => c.token.toLowerCase() === destinationTokensId);
+}
+function createMultiProtocolProvider(chainNames) {
+  const metadata = {};
+  for (const name of chainNames) {
+    const meta = chainMetadata[name];
+    if (meta) metadata[name] = meta;
+  }
+  return new MultiProtocolProvider(metadata);
+}
+function createWarpCore(config, chainNames) {
+  const multiProvider = createMultiProtocolProvider(chainNames);
+  return WarpCore.FromConfig(multiProvider, config);
+}
+
+// src/internal/components/SendMenu/hyperbridge/components/TokenSelector.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var BRIDGE_CHAINS_LIST = toPairs(CHAINS_META).map(([chainName]) => chainName);
+function RouteItem(props) {
+  const { id, icon: Icon, chainPair, symbol } = props;
+  const hyperRouteID = useBridgeStore((st) => st.hyperRoute);
+  const selectRoute = useCallback((routeId) => {
+    const {
+      //
+      setHyperRoute,
+      setBridgeStep,
+      setWarpCore,
+      setWarpCoreConfig,
+      setOriginChain,
+      setDestinationChain
+    } = useBridgeStore.getState();
+    setHyperRoute(routeId);
+    const warpConfig = buildLumiaWarpConfig(routeId);
+    if (!warpConfig) {
+      useFlowSelectorStore.getState().setError(`Warp route ${routeId} not found in @hyperlane-xyz/registry`);
+      setBridgeStep("select");
+      return;
+    }
+    console.log("[HYPERLANE SDK] Selecting route", routeId);
+    const filteredConfig = filterWarpConfigForChains(warpConfig, BRIDGE_CHAINS_LIST);
+    const warpCore = createWarpCore(filteredConfig, BRIDGE_CHAINS_LIST);
+    setWarpCore(warpCore);
+    setWarpCoreConfig(filteredConfig);
+    setOriginChain(chainPair[0].chainName);
+    setDestinationChain(chainPair[1].chainName);
+    setBridgeStep("select");
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      size: "large",
+      variant: hyperRouteID === id ? "default" : "outline",
+      className: "justify-between",
+      onClick: () => selectRoute(id),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--ui-kit-gap)]", children: [
+          /* @__PURE__ */ jsx(Icon, { className: "w-6 h-6" }),
+          /* @__PURE__ */ jsx("span", { children: symbol.toUpperCase() })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--ui-kit-gap)]", children: chainPair.map((chain, chIdx) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          chIdx > 0 && /* @__PURE__ */ jsx(ArrowLeftRightIcon, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx(chain.Icon, { className: "w-4 h-4" })
+        ] }, `${id}-icon-${chain.chainID}-${chIdx}`)) })
+      ]
+    }
+  );
+}
+function TokenSelector() {
+  return /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col gap-[var(--ui-kit-gap)]", children: WARP_ROUTES.map((hyperRoute) => /* @__PURE__ */ jsx(RouteItem, { ...hyperRoute }, hyperRoute.id)) });
+}
+
+// src/internal/components/SendMenu/hyperbridge/hooks/useBridge.ts
+import { toWei } from "@hyperlane-xyz/utils";
+import { useMutation } from "@tanstack/react-query";
+import { debounce } from "lodash-es";
+import { useCallback as useCallback2, useEffect as useEffect2 } from "react";
+
+// src/internal/components/SendMenu/hyperbridge/lib/executeWarpTxs.ts
+import { ProviderType, WarpTxCategory } from "@hyperlane-xyz/sdk";
+async function executeWarpTransactions(txs) {
+  const { publicClient, session } = useSession.getState();
+  if (!session) {
+    throw new Error("No active session");
+  }
+  if (!publicClient) {
+    throw new Error("No public client available");
+  }
+  const hashes = [];
+  for (const tx of txs) {
+    if (tx.type !== ProviderType.EthersV5) {
+      throw new Error(`Unsupported transaction provider: ${tx.type}`);
+    }
+    const populated = tx.transaction;
+    if (!populated.to) {
+      throw new Error("Transaction missing `to` address");
+    }
+    const hash = await sendUserOperation(session, {
+      to: populated.to,
+      data: populated.data ?? "0x",
+      value: (populated.value ? BigInt(populated.value.toString()) : 0n).toString(),
+      chainId: publicClient.chain.id
+    });
+    await publicClient.waitForTransactionReceipt({ hash });
+    hashes.push(hash);
+  }
+  return hashes;
+}
+
+// src/internal/components/SendMenu/hyperbridge/hooks/useWarpCore.ts
+import { Buffer } from "buffer";
+import { toPairs as toPairs2 } from "lodash-es";
+import { useEffect } from "react";
+var BRIDGE_CHAINS_LIST2 = toPairs2(CHAINS_META).map(([chainName]) => chainName);
+var DEFAULT_WARP_ROUTE_ID = "USDT/ethereum-lumiaprism";
+globalThis.Buffer = Buffer;
+function useWarpCore() {
+  useEffect(() => {
+    const existingWarpCore = useBridgeStore.getState().warpCore;
+    if (!!existingWarpCore) return;
+    const {
+      hyperRoute,
+      originChain,
+      destinationChain,
+      setWarpCore,
+      setWarpCoreConfig,
+      setBridgeStep,
+      setHyperRoute,
+      setOriginChain,
+      setDestinationChain
+    } = useBridgeStore.getState();
+    const hyperRouteID = hyperRoute || DEFAULT_WARP_ROUTE_ID;
+    console.debug("[HYPERLANE SDK] Initializing WarpCore...", hyperRouteID);
+    const fullConfig = buildLumiaWarpConfig(hyperRouteID);
+    if (!fullConfig) {
+      useFlowSelectorStore.getState().setError(`Warp route ${hyperRouteID} not found in @hyperlane-xyz/registry`);
+      setBridgeStep("select");
+      return;
+    }
+    const filteredConfig = filterWarpConfigForChains(fullConfig, BRIDGE_CHAINS_LIST2);
+    const warpCore = createWarpCore(filteredConfig, BRIDGE_CHAINS_LIST2);
+    setWarpCore(warpCore);
+    setWarpCoreConfig(filteredConfig);
+    if (hyperRoute !== hyperRouteID) setHyperRoute(hyperRouteID);
+    const chainsPair = WARP_ROUTES.find((warpRoute) => warpRoute.id === hyperRouteID)?.chainPair;
+    if (!!chainsPair) {
+      console.debug(`[HYPERLANE SDK] chain pair ${chainsPair.map((c) => c.chainName).join(" - ")}`);
+      const persistedOrigin = originChain && chainsPair.find((c) => c.chainName === originChain);
+      const persistedDestination = destinationChain && chainsPair.find((c) => c.chainName === destinationChain);
+      setOriginChain(persistedOrigin?.chainName || chainsPair[0].chainName);
+      setDestinationChain(persistedDestination?.chainName || chainsPair[1].chainName);
+    }
+    return () => {
+      setWarpCore(null);
+      setWarpCoreConfig(null);
+    };
+  }, []);
+}
+
+// src/internal/components/SendMenu/hyperbridge/hooks/useBridge.ts
+function findToken(warpCore, chain) {
+  return warpCore.tokens.find((t) => t.chainName === chain);
+}
+function findDestinationToken(warpCore, origin, destination) {
+  if (!origin.getConnectionForChain(destination)) return void 0;
+  return warpCore.tokens.find((t) => t.chainName === destination);
+}
+function useBridge() {
+  const { t } = useT();
+  useWarpCore();
+  const address = useSession((st) => st.address);
+  const currentChainId = useSession((st) => st.activeChainId);
+  const warpCore = useBridgeStore((st) => st.warpCore);
+  const amountToBridge = useBridgeStore((st) => st.amount);
+  const swapDirection = useCallback2(() => {
+    const {
+      bridgeStep,
+      originChain,
+      destinationChain,
+      amount,
+      //
+      setOriginChain,
+      setDestinationChain,
+      setAmount,
+      setQuote
+    } = useBridgeStore.getState();
+    useFlowSelectorStore.getState().setError(null);
+    useFlowSelectorStore.getState().setRenderKey(`${bridgeStep}-swaped-${Date.now()}`);
+    setOriginChain(destinationChain);
+    setDestinationChain(originChain);
+    const cacheAmount = amount;
+    setAmount("0");
+    setQuote(null);
+    setTimeout(() => setAmount(cacheAmount), 500);
+  }, []);
+  const { mutate: estimateQuote } = useMutation({
+    mutationFn: async (amountToBridge2) => {
+      useFlowSelectorStore.getState().setError(null);
+      const {
+        //
+        bridgeStep,
+        originChain,
+        destinationChain,
+        recipient,
+        // setQuote,
+        setIsQuoteEstimating
+      } = useBridgeStore.getState();
+      useFlowSelectorStore.getState().setRenderKey(`${bridgeStep}-quoted-${Date.now()}`);
+      setIsQuoteEstimating(true);
+      const originToken = findToken(warpCore, originChain);
+      const destToken = originToken ? findDestinationToken(warpCore, originToken, destinationChain) : void 0;
+      if (!originToken || !destToken) {
+        throw new Error(
+          // @ts-expect-error i18n typing
+          t("passport:bridgeMenu.errors.noConnections", { originChain, destinationChain })
+        );
+      }
+      const wei = toWei(amountToBridge2, originToken.decimals);
+      const originTokenAmount = originToken.amount(wei);
+      const { igpQuote, tokenFeeQuote } = await warpCore.getInterchainTransferFee({
+        originTokenAmount,
+        destination: destinationChain,
+        sender: address,
+        recipient: recipient || address,
+        destinationToken: destToken
+      });
+      const localQuote = await warpCore.getLocalTransferFeeAmount({
+        originToken,
+        destination: destinationChain,
+        sender: address,
+        interchainFee: igpQuote,
+        tokenFeeQuote,
+        amount: BigInt(wei.toString()),
+        destinationToken: destToken
+      });
+      return {
+        amount: amountToBridge2,
+        igpFee: String(igpQuote.getDecimalFormattedAmount()),
+        localFee: String(localQuote.getDecimalFormattedAmount()),
+        tokenFee: tokenFeeQuote ? String(tokenFeeQuote.getDecimalFormattedAmount()) : void 0,
+        igpSymbol: igpQuote.token.symbol,
+        localSymbol: localQuote.token.symbol
+      };
+    },
+    onSuccess: (quote) => {
+      const { bridgeStep, setQuote, setIsQuoteEstimating } = useBridgeStore.getState();
+      setQuote(quote);
+      setIsQuoteEstimating(false);
+      useFlowSelectorStore.getState().setRenderKey(`${bridgeStep}-quoted-${Date.now()}`);
+    },
+    onError: (error) => {
+      const { setQuote, setIsQuoteEstimating } = useBridgeStore.getState();
+      console.error("[HYPERLANE SDK] Quote estimation error", error);
+      setQuote(null);
+      setIsQuoteEstimating(false);
+      useFlowSelectorStore.getState().setError(error instanceof Error ? error.message : String(error));
+    }
+  });
+  const defferedQuoteEstimation = useCallback2(
+    debounce((amountToBridge2) => {
+      estimateQuote(amountToBridge2);
+    }, 600),
+    []
+  );
+  useEffect2(() => {
+    if (!amountToBridge || !Number(amountToBridge)) return;
+    const { originChain, destinationChain } = useBridgeStore.getState();
+    if (!originChain || !destinationChain) return;
+    const warpCoreConfig = useBridgeStore.getState().warpCoreConfig;
+    const routeReady = isDirectRouteAvailable(warpCoreConfig, originChain, destinationChain);
+    if (!routeReady) {
+      console.warn("[HYPERLANE SDK] route not ready");
+      useFlowSelectorStore.getState().setError(
+        // @ts-expect-error i18n typing
+        t("passport:bridgeMenu.errors.routeUnavailable", { originChain, destinationChain })
+      );
+      return;
+    }
+    defferedQuoteEstimation(amountToBridge);
+  }, [amountToBridge]);
+  const { mutate: bridgeAsset, isPending: isAssetBridging } = useMutation({
+    mutationFn: async () => {
+      const {
+        //
+        originChain,
+        destinationChain,
+        amount,
+        recipient,
+        setBridgeTxStatus,
+        setLastTxHashes
+      } = useBridgeStore.getState();
+      useFlowSelectorStore.getState().setError(null);
+      setBridgeTxStatus(null);
+      setLastTxHashes([]);
+      const expectedChainId = warpCore.multiProvider.getChainId(originChain);
+      console.warn("[HYPERLANE SDK] expectedChainId", expectedChainId, "currentChainId", currentChainId);
+      if (currentChainId !== expectedChainId) {
+        throw new Error(t("passport:bridgeMenu.errors.wrongNetwork"));
+      }
+      const originToken = findToken(warpCore, originChain);
+      const destToken = originToken ? findDestinationToken(warpCore, originToken, destinationChain) : void 0;
+      if (!originToken || !destToken) {
+        throw new Error(
+          // @ts-expect-error i18n typing
+          t("passport:bridgeMenu.errors.noConnections", { originChain, destinationChain })
+        );
+      }
+      setBridgeTxStatus(t("passport:bridgeMenu.statuses.txPrepare"));
+      const wei = toWei(amount, originToken.decimals);
+      const originTokenAmount = originToken.amount(wei);
+      const to = recipient || address;
+      console.log("[HYPERLANE SDK] tokens:\n", originToken, "->", destToken);
+      const { igpQuote, tokenFeeQuote } = await warpCore.getInterchainTransferFee({
+        originTokenAmount,
+        destination: destinationChain,
+        sender: address,
+        recipient: to,
+        destinationToken: destToken
+      });
+      const txs = await warpCore.getTransferRemoteTxs({
+        originTokenAmount,
+        destination: destinationChain,
+        sender: address,
+        recipient: to,
+        interchainFee: igpQuote,
+        tokenFeeQuote,
+        destinationToken: destToken
+      });
+      setBridgeTxStatus(
+        // @ts-expect-error i18n typing
+        t("passport:bridgeMenu.statuses.txSending", { txCount: txs.length })
+      );
+      return await executeWarpTransactions(txs);
+    },
+    onSuccess: (hashes) => {
+      const { setBridgeStep, setBridgeTxStatus, setLastTxHashes, destinationChain } = useBridgeStore.getState();
+      setLastTxHashes(hashes);
+      setBridgeTxStatus(
+        // @ts-expect-error i18n typing
+        t("passport:bridgeMenu.statuses.txSent", { destination: destinationChain })
+      );
+      setBridgeStep("success");
+    },
+    onError: (error) => {
+      console.error("[HYPERLANE SDK] Bridge execution error", error);
+      const { setBridgeTxStatus } = useBridgeStore.getState();
+      setBridgeTxStatus(null);
+      useFlowSelectorStore.getState().setError(error instanceof Error ? error.message : String(error));
+    }
+  });
+  return {
+    swapDirection,
+    bridgeAsset,
+    isAssetBridging
+  };
+}
+
+// src/internal/components/SendMenu/hyperbridge/hooks/useMenuTitle.ts
+import { useEffect as useEffect3 } from "react";
+function useMenuTitle() {
+  const { t } = useT();
+  const bridgeStep = useBridgeStore((st) => st.bridgeStep);
+  const hyperRouteMeta = useBridgeStore((st) => WARP_ROUTES.find((route) => route.id === st.hyperRoute));
+  useEffect3(() => {
+    const updateMenuTitle = useFlowSelectorStore.getState().setMenuTitle;
+    switch (true) {
+      case bridgeStep === "select-token":
+        updateMenuTitle(t("passport:bridgeMenu.labels.selectToken"));
+        break;
+      case bridgeStep === "confirm":
+        updateMenuTitle(t("passport:bridgeMenu.labels.confirm"));
+        break;
+      default:
+        updateMenuTitle(
+          // @ts-expect-error i18n typings
+          t("passport:bridgeMenu.labels.bridgeAsset", {
+            asset: hyperRouteMeta?.symbol || "Asset"
+          })
+        );
+        break;
+    }
+  }, [bridgeStep, hyperRouteMeta, t]);
+}
+
+// src/internal/components/SendMenu/hyperbridge/steps/SelectStep.tsx
+import { ArrowLeftRightIcon as ArrowLeftRightIcon2, ArrowRightLeftIcon, LoaderIcon, Wallet2Icon, XIcon } from "lucide-react";
+import { Fragment as Fragment2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SelectStep({ swapChains }) {
+  const { t } = useT();
+  const {
+    // warpCore,
+    originChain,
+    destinationChain,
+    hyperRoute,
+    amount,
+    isQuoteEstimating,
+    quote,
+    recipient,
+    setBridgeStep,
+    setAmount,
+    setRecipient
+  } = useBridgeStore();
+  const isError = useFlowSelectorStore((st) => !!st.error);
+  const selectedWarpRoute = WARP_ROUTES.find((route) => route.id === hyperRoute);
+  const OriginChainIcon = originChain ? CHAINS_META[originChain]?.Icon : null;
+  const DestinationChainIcon = destinationChain ? CHAINS_META[destinationChain]?.Icon : null;
+  return /* @__PURE__ */ jsxs2("div", { className: "w-full flex flex-col gap-[var(--ui-kit-gap)] items-center", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "w-full flex flex-col gap-[var(--ui-kit-gap)]", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-[var(--ui-kit-gap)] text-[10px]", children: [
+        /* @__PURE__ */ jsx2("span", { className: "text-[var(--ui-kit-fg-muted)]", children: t("passport:bridgeMenu.labels.selectToken") }),
+        /* @__PURE__ */ jsx2("span", { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-[var(--ui-kit-gap)]", children: [
+          /* @__PURE__ */ jsxs2("span", { className: "text-[var(--ui-kit-fg-muted)]", children: [
+            t("passport:common.balance"),
+            ": "
+          ] }),
+          /* @__PURE__ */ jsx2("span", { children: "xx.xxx" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2(
+        Button,
+        {
+          disabled: isQuoteEstimating,
+          variant: "outline",
+          className: "w-full justify-between",
+          onClick: () => {
+            useFlowSelectorStore.getState().setError(null);
+            setBridgeStep("select-token");
+          },
+          children: [
+            selectedWarpRoute && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-[var(--ui-kit-gap)]", children: [
+              /* @__PURE__ */ jsx2(selectedWarpRoute.icon, { className: "w-6 h-6" }),
+              /* @__PURE__ */ jsx2("span", { children: selectedWarpRoute.symbol })
+            ] }),
+            /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-[var(--ui-kit-gap)]", children: selectedWarpRoute?.chainPair?.map((chain, chIdx) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
+              chIdx > 0 && /* @__PURE__ */ jsx2(ArrowLeftRightIcon2, { className: "w-4 h-4 opacity-50" }),
+              /* @__PURE__ */ jsx2(chain.Icon, { className: "w-4 h-4 opacity-50" })
+            ] }, `${selectedWarpRoute.id}-icon-${chain.chainID}-${chIdx}`)) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-between gap-[var(--ui-kit-gap)]",
+            "text-[10px] text-[var(--ui-kit-fg-muted)]"
+          ),
+          children: [
+            /* @__PURE__ */ jsx2("span", { className: "block text-[10px] text-[var(--ui-kit-fg-muted)]", children: t("passport:bridgeMenu.labels.fromChain") }),
+            /* @__PURE__ */ jsx2("span", { className: "block text-[10px] text-[var(--ui-kit-fg-muted)]", children: t("passport:bridgeMenu.labels.toChain") })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { className: "w-full flex items-center justify-center", children: [
+        /* @__PURE__ */ jsxs2(
+          Badge,
+          {
+            variant: "outline",
+            size: "large",
+            className: "block flex-1 flex gap-[var(--ui-kit-gap)] justify-center",
+            children: [
+              OriginChainIcon && /* @__PURE__ */ jsx2(OriginChainIcon, { className: "w-6 h-6" }),
+              originChain && /* @__PURE__ */ jsx2("span", { className: "block max-w-[100px] truncate", children: CHAINS_META[originChain]?.chainLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(Button, { size: "icon", variant: "ghost", onClick: swapChains, children: /* @__PURE__ */ jsx2(ArrowRightLeftIcon, { className: "w-4 h-4 " }) }),
+        /* @__PURE__ */ jsxs2(
+          Badge,
+          {
+            variant: "outline",
+            size: "large",
+            className: "block flex-1 flex gap-[var(--ui-kit-gap)] justify-center",
+            children: [
+              DestinationChainIcon && /* @__PURE__ */ jsx2(DestinationChainIcon, { className: "w-6 h-6" }),
+              destinationChain && /* @__PURE__ */ jsx2("span", { className: "block max-w-[100px] truncate", children: CHAINS_META[destinationChain]?.chainLabel })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: cn(
+            //
+            "w-full flex flex-col",
+            "text-[10px]",
+            "gap-[var(--ui-kit-gap)]"
+          ),
+          children: [
+            /* @__PURE__ */ jsx2("span", { className: "text-[var(--ui-kit-fg-muted)]", children: t("passport:common.amount") }),
+            /* @__PURE__ */ jsx2(
+              Input,
+              {
+                type: "text",
+                disabled: isQuoteEstimating || !originChain || !destinationChain || !hyperRoute,
+                placeholder: t("passport:common.amount"),
+                onChange: (e) => {
+                  useFlowSelectorStore.getState().setError(null);
+                  let { value } = e.target;
+                  const regex = /^(0|[1-9]\d*)(\.\d{0,5})?$/;
+                  if (value.length > 1 && value.startsWith("0") && !value.startsWith("0.")) {
+                    value = value.slice(1);
+                  }
+                  if (regex.test(value) || value === "") {
+                    if (value === "") {
+                      setAmount("0");
+                    } else {
+                      setAmount(value);
+                    }
+                  }
+                },
+                value: amount
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: cn(
+            //
+            "w-full flex flex-col",
+            "text-[10px]",
+            "gap-[var(--ui-kit-gap)] pb-[var(--ui-kit-pd)]"
+          ),
+          children: [
+            /* @__PURE__ */ jsx2("span", { className: "text-[var(--ui-kit-fg-muted)]", children: t("passport:bridgeMenu.labels.recipient") + " (optional)" }),
+            /* @__PURE__ */ jsx2(
+              Input,
+              {
+                type: "text",
+                disabled: isQuoteEstimating || !originChain || !destinationChain || !hyperRoute,
+                placeholder: t("passport:bridgeMenu.labels.recipient") + " (ex: 0x...)",
+                value: recipient || "",
+                Icon: Wallet2Icon,
+                onChange: (e) => {
+                  useFlowSelectorStore.getState().setError(null);
+                  setRecipient(e.target.value);
+                },
+                element: /* @__PURE__ */ jsx2(
+                  Button,
+                  {
+                    size: "icon",
+                    variant: "ghost",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setRecipient(null);
+                    },
+                    children: /* @__PURE__ */ jsx2(XIcon, { className: "w-4 h-4" })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    quote && /* @__PURE__ */ jsxs2(Highlight, { type: "info", className: "flex flex-col gap-[var(--ui-kit-gap)] w-full", children: [
+      /* @__PURE__ */ jsxs2("p", { className: "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]", children: [
+        /* @__PURE__ */ jsx2("span", { children: t("passport:bridgeMenu.quote.amount") }),
+        /* @__PURE__ */ jsx2("strong", { children: formatPrice(Number(quote.amount)) })
+      ] }),
+      /* @__PURE__ */ jsxs2("p", { className: "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]", children: [
+        /* @__PURE__ */ jsx2("span", { children: t("passport:bridgeMenu.quote.igpFee") }),
+        /* @__PURE__ */ jsxs2("strong", { children: [
+          /* @__PURE__ */ jsx2("span", { children: formatPrice(Number(quote.igpFee)) }),
+          /* @__PURE__ */ jsxs2("span", { children: [
+            " ",
+            quote.igpSymbol
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("p", { className: "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]", children: [
+        /* @__PURE__ */ jsx2("span", { children: t("passport:bridgeMenu.quote.localFee") }),
+        /* @__PURE__ */ jsxs2("strong", { children: [
+          /* @__PURE__ */ jsx2("span", { children: formatPrice(Number(quote.localFee)) }),
+          /* @__PURE__ */ jsxs2("span", { children: [
+            " ",
+            quote.localSymbol
+          ] })
+        ] })
+      ] }),
+      quote.tokenFee && /* @__PURE__ */ jsxs2("p", { className: "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]", children: [
+        /* @__PURE__ */ jsx2("span", { children: t("passport:bridgeMenu.quote.tokenFee") }),
+        /* @__PURE__ */ jsx2("strong", { children: formatPrice(Number(quote.tokenFee)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2(
+      Button,
+      {
+        size: "large",
+        variant: "default",
+        className: "w-full",
+        disabled: isQuoteEstimating || isError || !quote,
+        onClick: () => useBridgeStore.getState().setBridgeStep("confirm"),
+        children: [
+          isQuoteEstimating && /* @__PURE__ */ jsx2(LoaderIcon, { className: "h-4 w-4 animate-spin" }),
+          /* @__PURE__ */ jsx2("span", { children: t(
+            (() => {
+              switch (true) {
+                // case isWalletChainConnecting:
+                //   return 'passport:bridgeMenu.statuses.switchingWalletChain'
+                case isQuoteEstimating:
+                  return "passport:bridgeMenu.statuses.qouteEstimating";
+                default:
+                  return "passport:bridgeMenu.actions.confirmBridge";
+              }
+            })()
+          ).toUpperCase() })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/internal/components/SendMenu/hyperbridge/steps/ConfirmStep.tsx
+import { LoaderIcon as LoaderIcon2 } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var P_CN = "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]";
+function ConfirmStep(props) {
+  const { isAssetBridging, bridgeAsset } = props;
+  const { t } = useT();
+  const address = useSession((st) => st.address);
+  const isError = useFlowSelectorStore((st) => !!st.error);
+  const quote = useBridgeStore((st) => st.quote);
+  const originChain = useBridgeStore((st) => st.originChain);
+  const destinationChain = useBridgeStore((st) => st.destinationChain);
+  const recipient = useBridgeStore((st) => st.recipient);
+  const bridgeTxStatus = useBridgeStore((st) => st.bridgeTxStatus);
+  const recipientAddress = (recipient || address).slice(0, 6) + "..." + (recipient || address).slice(-4);
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsxs3(Highlight, { type: "info", className: "flex flex-col gap-[var(--ui-kit-gap)] w-full", children: [
+      /* @__PURE__ */ jsxs3("p", { className: P_CN, children: [
+        /* @__PURE__ */ jsx3("span", { children: t("passport:bridgeMenu.quote.recipient") }),
+        /* @__PURE__ */ jsx3("strong", { children: recipientAddress })
+      ] }),
+      /* @__PURE__ */ jsxs3("p", { className: P_CN, children: [
+        /* @__PURE__ */ jsx3("span", { children: t("passport:bridgeMenu.labels.fromChain") }),
+        /* @__PURE__ */ jsx3("strong", { children: CHAINS_META[originChain].chainLabel })
+      ] }),
+      /* @__PURE__ */ jsxs3("p", { className: P_CN, children: [
+        /* @__PURE__ */ jsx3("span", { children: t("passport:bridgeMenu.labels.toChain") }),
+        /* @__PURE__ */ jsx3("strong", { children: CHAINS_META[destinationChain].chainLabel })
+      ] }),
+      /* @__PURE__ */ jsxs3("p", { className: P_CN, children: [
+        /* @__PURE__ */ jsx3("span", { children: t("passport:bridgeMenu.quote.amount") }),
+        /* @__PURE__ */ jsx3("strong", { children: formatPrice(Number(quote.amount)) })
+      ] }),
+      /* @__PURE__ */ jsxs3("p", { className: "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]", children: [
+        /* @__PURE__ */ jsx3("span", { children: t("passport:bridgeMenu.quote.igpFee") }),
+        /* @__PURE__ */ jsxs3("strong", { children: [
+          /* @__PURE__ */ jsx3("span", { children: formatPrice(Number(quote.igpFee)) }),
+          /* @__PURE__ */ jsxs3("span", { children: [
+            " ",
+            quote.igpSymbol
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3("p", { className: "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]", children: [
+        /* @__PURE__ */ jsx3("span", { children: t("passport:bridgeMenu.quote.localFee") }),
+        /* @__PURE__ */ jsxs3("strong", { children: [
+          /* @__PURE__ */ jsx3("span", { children: formatPrice(Number(quote.localFee)) }),
+          /* @__PURE__ */ jsxs3("span", { children: [
+            " ",
+            quote.localSymbol
+          ] })
+        ] })
+      ] }),
+      quote.tokenFee && /* @__PURE__ */ jsxs3("p", { className: P_CN, children: [
+        /* @__PURE__ */ jsx3("span", { children: t("passport:bridgeMenu.quote.tokenFee") }),
+        /* @__PURE__ */ jsx3("strong", { children: formatPrice(Number(quote.tokenFee)) })
+      ] })
+    ] }),
+    !isError && /* @__PURE__ */ jsxs3(
+      Button,
+      {
+        size: "large",
+        variant: "default",
+        disabled: isAssetBridging,
+        onClick: () => bridgeAsset(),
+        className: "w-full",
+        children: [
+          isAssetBridging && /* @__PURE__ */ jsx3(LoaderIcon2, { className: "h-4 w-4 animate-spin" }),
+          /* @__PURE__ */ jsx3("span", { children: (bridgeTxStatus || t("passport:common.continue")).toUpperCase() })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/internal/components/SendMenu/hyperbridge/steps/SuccessStep.tsx
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var P_CN2 = "flex-1 flex items-center justify-between gap-[var(--ui-kit-gap)]";
+function SuccessStep() {
+  const { t } = useT();
+  const address = useSession((st) => st.address);
+  const amount = useBridgeStore((st) => st.amount);
+  const originChain = useBridgeStore((st) => st.originChain);
+  const destinationChain = useBridgeStore((st) => st.destinationChain);
+  const recipient = useBridgeStore((st) => st.recipient);
+  const lastTxHashes = useBridgeStore((st) => st.lastTxHashes);
+  const bridgeTxStatus = useBridgeStore((st) => st.bridgeTxStatus);
+  const recipientAddress = (recipient || address).slice(0, 6) + "..." + (recipient || address).slice(-4);
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsxs4(Highlight, { type: "info", className: "flex flex-col gap-[var(--ui-kit-gap)] w-full", children: [
+      /* @__PURE__ */ jsxs4("p", { className: P_CN2, children: [
+        /* @__PURE__ */ jsx4("span", { children: t("passport:bridgeMenu.quote.status") }),
+        /* @__PURE__ */ jsx4("strong", { children: bridgeTxStatus })
+      ] }),
+      /* @__PURE__ */ jsxs4("p", { className: P_CN2, children: [
+        /* @__PURE__ */ jsx4("span", { children: t("passport:bridgeMenu.quote.recipient") }),
+        /* @__PURE__ */ jsx4("strong", { children: recipientAddress })
+      ] }),
+      /* @__PURE__ */ jsxs4("p", { className: P_CN2, children: [
+        /* @__PURE__ */ jsx4("span", { children: t("passport:bridgeMenu.labels.fromChain") }),
+        /* @__PURE__ */ jsx4("strong", { children: CHAINS_META[originChain].chainLabel })
+      ] }),
+      /* @__PURE__ */ jsxs4("p", { className: P_CN2, children: [
+        /* @__PURE__ */ jsx4("span", { children: t("passport:bridgeMenu.labels.toChain") }),
+        /* @__PURE__ */ jsx4("strong", { children: CHAINS_META[destinationChain].chainLabel })
+      ] }),
+      /* @__PURE__ */ jsxs4("p", { className: P_CN2, children: [
+        /* @__PURE__ */ jsx4("span", { children: t("passport:bridgeMenu.quote.amount") }),
+        /* @__PURE__ */ jsx4("strong", { children: formatPrice(Number(amount)) })
+      ] }),
+      lastTxHashes.map((hash) => /* @__PURE__ */ jsxs4("p", { className: P_CN2, children: [
+        /* @__PURE__ */ jsx4("span", { children: "TX" }),
+        /* @__PURE__ */ jsx4("strong", { children: hash })
+      ] }))
+    ] }),
+    /* @__PURE__ */ jsx4(
+      Button,
+      {
+        size: "large",
+        variant: "default",
+        className: "w-full",
+        onClick: () => {
+          useFlowSelectorStore.getState().setError(null);
+          useBridgeStore.getState().setBridgeTxStatus(null);
+          useBridgeStore.getState().setLastTxHashes([]);
+          useBridgeStore.getState().setBridgeStep("select");
+        },
+        children: /* @__PURE__ */ jsx4("span", { children: `${t("passport:common.continue")}`.toUpperCase() })
+      }
+    )
+  ] });
+}
+
+// src/internal/components/SendMenu/hyperbridge/HyperlaneBridge.tsx
+import { Fragment as Fragment5, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function HyperlaneBridge() {
+  const { swapDirection, bridgeAsset, isAssetBridging } = useBridge();
+  useMenuTitle();
+  const bridgeStep = useBridgeStore((st) => st.bridgeStep);
+  useEffect4(() => () => useBridgeStore.getState().resetSelections(), []);
+  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
+    bridgeStep === "select-token" && /* @__PURE__ */ jsx5(TokenSelector, {}),
+    bridgeStep === "select" && /* @__PURE__ */ jsx5(SelectStep, { swapChains: swapDirection }),
+    bridgeStep === "confirm" && /* @__PURE__ */ jsx5(ConfirmStep, { isAssetBridging, bridgeAsset }),
+    bridgeStep === "success" && /* @__PURE__ */ jsx5(SuccessStep, {})
+  ] });
+}
+
+// src/internal/components/SendMenu/hyperbridge/index.ts
+var hyperbridge_default = HyperlaneBridge;
+export {
+  hyperbridge_default as default,
+  useBridgeStore
+};
+//# sourceMappingURL=hyperbridge-OU2MDJ5Q.js.map