@orderly.network/onramper-plugin 0.0.2-alpha.0

package/dist/index.mjs

@@ -0,0 +1,1851 @@
+import { __glob } from './chunk-XNMUIY72.mjs';
+import { createContext, useRef, useMemo, useState, useCallback, useSyncExternalStore, useEffect, useContext } from 'react';
+import { preloadDefaultResource, useTranslation, i18n, ExternalLocaleProvider } from '@orderly.network/i18n';
+import { Box, Flex, Text, cn, WalletIcon, Spinner, Button, DialogPortal, textVariants, DropdownMenuRoot, DropdownMenuTrigger, CaretDownIcon, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, ScrollArea, Input, inputFormatter, ChainIcon, Badge, TokenIcon, toast } from '@orderly.network/ui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { computeHmac } from 'ethers';
+import { useSWR, useConfig, useLocalStorage, useWalletConnector, useChains, useAccount } from '@orderly.network/hooks';
+import { ABSTRACT_CHAIN_ID_MAP } from '@orderly.network/types';
+import { praseChainIdToNumber, int2hex } from '@orderly.network/utils';
+import { createInterceptor } from '@orderly.network/plugin-core';
+
+// src/constants.ts
+var FIAT_CURRENCIES = [
+  "USD",
+  "EUR",
+  "CNY",
+  "HKD",
+  "TWD",
+  "KRW",
+  "JPY"
+];
+var PRESET_AMOUNTS = {
+  USD: [100, 500, 1e3, 5e3],
+  EUR: [100, 500, 1e3, 5e3],
+  CNY: [1e3, 5e3, 1e4, 5e4],
+  HKD: [1e3, 5e3, 1e4, 5e4],
+  TWD: [5e3, 2e4, 5e4, 2e5],
+  KRW: [2e5, 5e5, 1e6, 5e6],
+  JPY: [2e4, 5e4, 1e5, 5e5]
+};
+var ONRAMPER_WIDGET_BASE = "https://buy.onramper.com";
+function formatCompact(n) {
+  const suffixes = [
+    [1e9, "B"],
+    [1e6, "M"],
+    [1e3, "K"]
+  ];
+  for (const [threshold, suffix] of suffixes) {
+    if (n >= threshold) {
+      const val = n / threshold;
+      return (val % 1 === 0 ? val.toString() : val.toFixed(1)) + suffix;
+    }
+  }
+  return n.toLocaleString();
+}
+var ExchangeIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M10.997 8.004a.5.5 0 0 0-.14-.36l-1.86-1.843-.703.703.984 1h-7.28a.5.5 0 0 0 0 1h7.28l-.984 1 .703.703 1.86-1.844a.5.5 0 0 0 .14-.36m-.5-4a.5.5 0 0 0-.5-.5H2.716l.984-1-.703-.703-1.859 1.843a.515.515 0 0 0 0 .719l1.86 1.844.702-.703-.984-1h7.281a.5.5 0 0 0 .5-.5" })
+  }
+);
+var ArrowDownIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "20",
+    height: "21",
+    viewBox: "0 0 20 21",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M9.994 5.51a.83.83 0 0 0-.832.833v6.295l-2.498-2.471-1.17 1.17 3.902 3.929a.84.84 0 0 0 .599.244.84.84 0 0 0 .597-.244l3.903-3.928-1.171-1.171-2.498 2.471V6.343a.83.83 0 0 0-.832-.833" })
+  }
+);
+var BuyCryptoIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "11",
+    height: "11",
+    viewBox: "0 0 11 11",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M0 2.33333C0 1.04475 1.04475 0 2.33333 0H8.16667C9.45525 0 10.5 1.04475 10.5 2.33333V8.16667C10.5 9.45525 9.45525 10.5 8.16667 10.5H2.33333C1.04475 10.5 0 9.45525 0 8.16667V2.33333ZM7 5.83333H5.83333V7C5.83333 7.322 5.572 7.58333 5.25 7.58333C4.928 7.58333 4.66667 7.322 4.66667 7V5.83333H3.5C3.178 5.83333 2.91667 5.572 2.91667 5.25C2.91667 4.928 3.178 4.66667 3.5 4.66667H4.66667V3.5C4.66667 3.178 4.928 2.91667 5.25 2.91667C5.572 2.91667 5.83333 3.178 5.83333 3.5V4.66667H7C7.322 4.66667 7.58333 4.928 7.58333 5.25C7.58333 5.572 7.322 5.83333 7 5.83333Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var ChainSelect = (props) => {
+  const { chains, value, wrongNetwork, loading, disabled } = props;
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation();
+  const selectable = wrongNetwork || chains?.length > 1;
+  const chainIcon = wrongNetwork ? /* @__PURE__ */ jsx(
+    Flex,
+    {
+      width: 18,
+      height: 18,
+      intensity: 100,
+      r: "full",
+      justify: "center",
+      itemAlign: "center",
+      children: /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 80, children: "U" })
+    }
+  ) : /* @__PURE__ */ jsx(ChainIcon, { className: "oui-size-[18px]", chainId: value?.id });
+  const chainName = wrongNetwork ? t("onramp.unknownNetwork") : value?.info?.network_infos?.name;
+  const currentChain = chains.find((chain) => chain.chain_id === value?.id);
+  const extendedCurrentChain = currentChain;
+  const isCurrentChainSupported = !currentChain || extendedCurrentChain?.isSupported !== false;
+  const renderRightIcon = () => {
+    if (loading) {
+      return /* @__PURE__ */ jsx(Spinner, { size: "sm" });
+    }
+    if (selectable) {
+      return /* @__PURE__ */ jsx(ExchangeIcon, { className: "oui-text-base-contrast-54" });
+    }
+  };
+  const trigger = /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      intensity: 500,
+      className: cn(
+        "oui-rounded-b-sm oui-rounded-t-xl oui-border oui-border-line",
+        disabled ? "oui-cursor-not-allowed" : selectable ? "oui-cursor-pointer" : "oui-cursor-auto",
+        props.className
+      ),
+      height: 54,
+      px: 3,
+      justify: "between",
+      itemAlign: "center",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            direction: "column",
+            itemAlign: "start",
+            justify: "center",
+            className: "oui-gap-0",
+            children: [
+              /* @__PURE__ */ jsx(Flex, { className: "oui-h-[16px] oui-items-center", children: /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: t("transfer.network") }) }),
+              /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", className: "oui-mt-0.5 oui-h-[20px]", children: [
+                chainIcon,
+                /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 80, className: "oui-leading-none", children: chainName }),
+                !isCurrentChainSupported && /* @__PURE__ */ jsx(Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
+              ] })
+            ]
+          }
+        ),
+        renderRightIcon()
+      ]
+    }
+  );
+  const content = chains.map((chain, index) => {
+    const extendedChain = chain;
+    const isActive = chain.chain_id === value?.id;
+    const isSupported = extendedChain.isSupported !== false;
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        px: 2,
+        r: "base",
+        justify: "between",
+        itemAlign: "center",
+        className: cn(
+          "oui-deposit-network-select-item",
+          "oui-h-[30px]",
+          isSupported ? "oui-cursor-pointer hover:oui-bg-base-5" : "oui-cursor-not-allowed",
+          isActive && "oui-bg-base-5",
+          index !== 0 && "oui-mt-[2px]"
+        ),
+        onClick: async () => {
+          if (!isSupported) return;
+          setOpen(false);
+          await props.onValueChange(chain);
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
+            /* @__PURE__ */ jsx(
+              ChainIcon,
+              {
+                className: cn("oui-size-[18px]", !isSupported && "oui-opacity-50"),
+                chainId: chain.chain_id
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: isSupported ? 54 : 36, children: chain.name }),
+            !isSupported && /* @__PURE__ */ jsx(Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
+          ] }),
+          isActive && /* @__PURE__ */ jsx(
+            Box,
+            {
+              width: 4,
+              height: 4,
+              r: "full",
+              className: "oui-deposit-network-select-active-dot oui-bg-[linear-gradient(270deg,#59B0FE_0%,#26FEFE_100%)]"
+            }
+          )
+        ]
+      },
+      chain.chain_id
+    );
+  });
+  return /* @__PURE__ */ jsxs(DropdownMenuRoot, { open: selectable ? open : false, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { disabled, asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        align: "start",
+        sideOffset: 2,
+        className: cn(
+          "oui-deposit-token-select-dropdown-menu-content",
+          "oui-bg-base-8 oui-p-1",
+          "oui-w-[var(--radix-dropdown-menu-trigger-width)]",
+          "oui-select-none oui-rounded-md"
+        ),
+        children: /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx("div", { className: "oui-max-h-[110px]", children: content }) })
+      }
+    ) })
+  ] });
+};
+var ExchangeDivider = ({ icon }) => {
+  return /* @__PURE__ */ jsxs(Flex, { height: 40, gapX: 3, className: "oui-w-full", children: [
+    /* @__PURE__ */ jsx(Flex, { height: 1, className: "oui-flex-1 oui-bg-base-contrast-12" }),
+    icon || /* @__PURE__ */ jsx(ArrowDownIcon, { className: "oui-text-primary-light" }),
+    /* @__PURE__ */ jsx(Flex, { height: 1, className: "oui-flex-1 oui-bg-base-contrast-12" })
+  ] });
+};
+var HistoryDropdown = ({
+  transactions,
+  pendingTransactions,
+  containerRef
+}) => {
+  const { t } = useTranslation();
+  if (transactions.length === 0) {
+    return /* @__PURE__ */ jsx(Flex, { justify: "between", itemAlign: "center", className: "oui-w-full", children: /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 98, weight: "semibold", children: t("onramp.youSpend") }) });
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenuRoot, { children: [
+    /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", className: "oui-w-full", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 98, children: t("onramp.youSpend") }),
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          gap: 1,
+          itemAlign: "center",
+          className: "oui-group oui-cursor-pointer",
+          children: [
+            pendingTransactions.length > 0 ? /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", className: "oui-gap-1.5", children: [
+              /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "oui-text-primaryLight" }),
+              /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: pendingTransactions.length === 1 ? t("onramp.pendingPurchase", {
+                count: pendingTransactions.length
+              }) : t("onramp.pendingPurchases", {
+                count: pendingTransactions.length
+              }) })
+            ] }) : /* @__PURE__ */ jsx(Text, { size: "xs", intensity: 54, children: t("onramp.history") }),
+            /* @__PURE__ */ jsx(
+              CaretDownIcon,
+              {
+                size: 10,
+                className: "oui-text-base-contrast-54 oui-transition-transform group-data-[state=open]:oui-rotate-180",
+                opacity: 1
+              }
+            )
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        align: "end",
+        className: "oui-text-semibold oui-custom-scrollbar oui-z-50 oui-max-h-[105px] oui-overflow-y-auto oui-rounded-lg oui-border oui-border-line-12 oui-bg-base-8 oui-p-1 oui-shadow-lg",
+        style: containerRef?.current ? { width: containerRef.current.offsetWidth } : void 0,
+        children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 1, children: transactions.map((tx) => /* @__PURE__ */ jsx(
+          DropdownMenuItem,
+          {
+            className: "oui-flex oui-w-full oui-cursor-default oui-items-start oui-justify-between oui-rounded-md oui-px-2 oui-py-0.5 oui-outline-none focus:oui-bg-base-6 data-[disabled]:oui-pointer-events-none data-[disabled]:oui-opacity-50",
+            children: /* @__PURE__ */ jsxs("div", { className: "oui-grid oui-w-full oui-grid-cols-[0.5fr_1fr_1fr_1.2fr_minmax(auto,max-content)] oui-items-center oui-gap-1", children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: "xs",
+                  weight: "semibold",
+                  className: "oui-truncate oui-whitespace-nowrap oui-uppercase oui-text-base-contrast-80",
+                  children: tx.sourceCurrency
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: "xs",
+                  weight: "semibold",
+                  className: "oui-truncate oui-whitespace-nowrap",
+                  children: tx.inAmount
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: "xs",
+                  intensity: 54,
+                  className: "oui-truncate oui-whitespace-nowrap oui-capitalize",
+                  children: tx.onramp
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: "xs",
+                  weight: "semibold",
+                  className: cn(
+                    "oui-truncate oui-whitespace-nowrap oui-capitalize",
+                    tx.status === "failed" || tx.status === "canceled" ? "oui-text-danger" : tx.status === "pending" || tx.status === "new" ? "oui-text-warning" : "oui-text-success"
+                  ),
+                  children: tx.status === "paid" ? t("onramp.statusCompleted") : tx.status
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: "xs",
+                  intensity: 36,
+                  className: "oui-whitespace-nowrap oui-text-right",
+                  children: new Date(tx.statusDate).toLocaleString("en-US", {
+                    month: "short",
+                    day: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit"
+                  })
+                }
+              )
+            ] })
+          },
+          tx.transactionId
+        )) })
+      }
+    ) })
+  ] });
+};
+var PartnerSelect = ({
+  partners,
+  value,
+  onValueChange,
+  containerRef
+}) => {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const selectable = partners.length > 1;
+  const triggerRef = useRef(null);
+  const getAlignOffset = () => {
+    if (!containerRef?.current || !triggerRef.current) return 0;
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    return triggerRect.right - containerRect.right;
+  };
+  return /* @__PURE__ */ jsxs(DropdownMenuRoot, { open: selectable ? open : false, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { children: /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        ref: triggerRef,
+        itemAlign: "center",
+        gap: 1,
+        className: "oui-cursor-pointer oui-select-none",
+        children: [
+          /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, weight: "semibold", children: t("onramp.by") }),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              alt: value.name,
+              src: `https://cdn.onramper.com/icons/onramps/${value.id.toLowerCase()}-colored.svg`,
+              className: "oui-size-4 oui-rounded-full oui-object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, weight: "semibold", children: value.name }),
+          selectable && /* @__PURE__ */ jsx(
+            CaretDownIcon,
+            {
+              size: 10,
+              className: "oui-text-base-contrast-54",
+              opacity: 1
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        align: "end",
+        sideOffset: 10,
+        alignOffset: getAlignOffset(),
+        className: cn(
+          "oui-z-50 oui-bg-base-8 oui-p-1",
+          "oui-min-w-[270px] oui-select-none oui-rounded-[6px]",
+          "oui-border oui-border-line-6"
+        ),
+        style: containerRef?.current ? { width: containerRef.current.offsetWidth } : void 0,
+        children: /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx("div", { className: "oui-flex oui-max-h-[220px] oui-flex-col oui-gap-1", children: partners.map((partner) => {
+          const isActive = partner.id === value.id;
+          const diffPercentage = value.payout === 0 ? 0 : (partner.payout - value.payout) / value.payout * 100;
+          return /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              p: 2,
+              justify: "between",
+              itemAlign: "center",
+              className: cn(
+                "oui-min-h-[56px] oui-cursor-pointer oui-rounded-[4px] oui-transition-colors hover:oui-bg-base-6",
+                isActive ? "oui-bg-base-5" : "oui-bg-transparent"
+              ),
+              onClick: () => {
+                onValueChange(partner);
+                setOpen(false);
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Flex,
+                  {
+                    direction: "column",
+                    itemAlign: "start",
+                    justify: "center",
+                    gap: 1,
+                    className: "oui-flex-[3]",
+                    children: [
+                      /* @__PURE__ */ jsxs(Flex, { gap: 1, itemAlign: "center", children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            alt: partner.name,
+                            src: `https://cdn.onramper.com/icons/onramps/${partner.id.toLowerCase()}-colored.svg`,
+                            className: "oui-size-4 oui-rounded-full oui-object-cover",
+                            onError: (e) => {
+                              e.target.src = "https://cdn.onramper.com/icons/tokens/usdc.svg";
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            size: "sm",
+                            intensity: 54,
+                            weight: "semibold",
+                            className: "oui-leading-5 oui-tracking-[0.42px]",
+                            children: partner.name
+                          }
+                        )
+                      ] }),
+                      partner.recommendations && partner.recommendations.length > 0 && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Flex, { className: "oui-flex-wrap oui-gap-1", children: partner.recommendations.map((rec, i) => /* @__PURE__ */ jsx(
+                        Flex,
+                        {
+                          px: 1,
+                          py: 1,
+                          className: cn(
+                            "oui-rounded-[4px] oui-bg-gradient-to-r",
+                            "oui-from-[rgb(var(--oui-gradient-brand-start)_/_0.12)]",
+                            "oui-to-[rgb(var(--oui-gradient-brand-end)_/_0.12)]"
+                          ),
+                          children: /* @__PURE__ */ jsx(
+                            Text.gradient,
+                            {
+                              size: "3xs",
+                              weight: "semibold",
+                              color: "brand",
+                              className: "oui-leading-[10px] oui-tracking-[0.3px]",
+                              children: rec
+                            }
+                          )
+                        },
+                        i
+                      )) }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Flex,
+                  {
+                    direction: "column",
+                    itemAlign: "end",
+                    justify: "center",
+                    gap: 1,
+                    className: "oui-flex-[2] oui-text-xs oui-font-semibold oui-tracking-[0.36px]",
+                    children: isActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          intensity: 36,
+                          className: "oui-text-right oui-leading-[15px]",
+                          children: t("onramp.youReceive")
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(Text, { intensity: 98, className: "oui-leading-[15px]", children: [
+                        partner.payout.toFixed(2),
+                        " USDC"
+                      ] })
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs(Text, { intensity: 54, className: "oui-leading-[15px]", children: [
+                        partner.payout.toFixed(2),
+                        " USDC"
+                      ] }),
+                      /* @__PURE__ */ jsxs(
+                        Text,
+                        {
+                          className: cn(
+                            "oui-text-right oui-leading-[15px]",
+                            diffPercentage < 0 ? "oui-text-danger" : diffPercentage > 0 ? "oui-text-success" : "oui-text-base-contrast-54"
+                          ),
+                          children: [
+                            diffPercentage > 0 ? "+" : "",
+                            diffPercentage.toFixed(2),
+                            "%"
+                          ]
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ]
+            },
+            partner.id
+          );
+        }) }) })
+      }
+    ) })
+  ] });
+};
+var PaymentMethodSelect = (props) => {
+  const { t } = useTranslation();
+  const { methods, value, disabled, loading } = props;
+  const [open, setOpen] = useState(false);
+  const selectable = methods.length > 1;
+  const renderRightIcon = () => {
+    if (selectable) {
+      return /* @__PURE__ */ jsx(ExchangeIcon, { className: "oui-text-base-contrast-54" });
+    }
+  };
+  const trigger = /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      intensity: 500,
+      className: cn(
+        "oui-rounded-[4px] oui-rounded-t-xl oui-border oui-border-line",
+        disabled ? "oui-cursor-not-allowed" : selectable ? "oui-cursor-pointer" : "oui-cursor-auto",
+        props.className
+      ),
+      height: 54,
+      px: 3,
+      justify: "between",
+      itemAlign: "center",
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: t("onramp.payWith") }) }),
+          /* @__PURE__ */ jsx(Flex, { gapX: 1, itemAlign: "center", children: loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            value.icon && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: value.icon,
+                alt: value.name,
+                width: 16,
+                height: 16,
+                className: "oui-rounded-lg oui-bg-secondary oui-object-contain oui-p-px"
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 80, children: value.name })
+          ] }) })
+        ] }),
+        renderRightIcon()
+      ]
+    }
+  );
+  const content = methods.map((method, index) => {
+    const isActive = method.id === value.id;
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        px: 2,
+        r: "base",
+        justify: "between",
+        itemAlign: "center",
+        className: cn(
+          "oui-h-[30px] oui-cursor-pointer hover:oui-bg-base-5",
+          isActive && "oui-bg-base-5",
+          index !== 0 && "oui-mt-[2px]"
+        ),
+        onClick: () => {
+          setOpen(false);
+          props.onValueChange(method);
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
+            method.icon && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: method.icon,
+                alt: method.name,
+                width: 14,
+                height: 14,
+                className: "oui-rounded-lg oui-bg-secondary oui-object-contain oui-p-px"
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: isActive ? 80 : 54, children: method.name })
+          ] }),
+          isActive && /* @__PURE__ */ jsx(
+            Box,
+            {
+              width: 4,
+              height: 4,
+              r: "full",
+              className: "oui-bg-[linear-gradient(270deg,#59B0FE_0%,#26FEFE_100%)]"
+            }
+          )
+        ]
+      },
+      method.id
+    );
+  });
+  return /* @__PURE__ */ jsxs(DropdownMenuRoot, { open: selectable ? open : false, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { disabled, asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        align: "start",
+        sideOffset: 2,
+        className: cn(
+          "oui-z-50 oui-bg-base-8 oui-p-1",
+          "oui-w-[var(--radix-dropdown-menu-trigger-width)]",
+          "oui-select-none oui-rounded-md"
+        ),
+        children: /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx("div", { className: "oui-max-h-[145px]", children: content }) })
+      }
+    ) })
+  ] });
+};
+var QuantityInput = (props) => {
+  const { t } = useTranslation();
+  const {
+    classNames,
+    label,
+    value,
+    onValueChange,
+    loading,
+    placeholder,
+    suffix,
+    error,
+    ...rest
+  } = props;
+  const inputRef = useRef(null);
+  const hasError = !!error;
+  const prefix = /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Box, { className: "oui-absolute oui-top-1.5", children: /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: label || t("onramp.quantity") }) }),
+    loading && /* @__PURE__ */ jsx(Box, { className: "oui-absolute oui-bottom-1", children: /* @__PURE__ */ jsx(Spinner, { size: "sm" }) })
+  ] });
+  const _placeholder = placeholder ?? (loading ? "" : "0");
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref: inputRef,
+        autoComplete: "off",
+        placeholder: _placeholder,
+        color: hasError ? "danger" : "default",
+        prefix,
+        suffix,
+        value,
+        onValueChange: (value2) => {
+          onValueChange?.(value2);
+        },
+        formatters: [
+          inputFormatter.numberFormatter,
+          inputFormatter.dpFormatter(2),
+          inputFormatter.currencyFormatter
+        ],
+        ...rest,
+        classNames: {
+          ...classNames,
+          root: cn(
+            "oui-relative oui-h-[54px] oui-px-3",
+            "oui-rounded-lg oui-border oui-border-line",
+            props.readOnly ? "oui-border-none oui-bg-base-6 focus-within:oui-outline-0" : "oui-bg-base-5",
+            classNames?.root
+          ),
+          input: cn(
+            "oui-absolute oui-top-[25px] oui-h-[20px]",
+            classNames?.input
+          )
+        }
+      }
+    ),
+    hasError && /* @__PURE__ */ jsx(Text, { size: "2xs", className: "oui-mt-1 oui-px-1 oui-text-danger", children: error })
+  ] });
+};
+var CurrencySuffix = ({
+  currencies,
+  selected,
+  onSelect
+}) => {
+  const [open, setOpen] = useState(false);
+  const selectable = currencies.length > 1;
+  const trigger = /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      itemAlign: "center",
+      gap: 1,
+      className: cn(selectable && "oui-cursor-pointer"),
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: `https://cdn.onramper.com/icons/tokens/${selected.toLowerCase()}.svg`,
+            alt: selected,
+            className: "oui-size-4 oui-rounded-full"
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 80, weight: "semibold", children: selected }),
+        selectable && /* @__PURE__ */ jsx(
+          CaretDownIcon,
+          {
+            size: 10,
+            className: "oui-text-base-contrast-54",
+            opacity: 1
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-right-3 oui-flex oui-h-[20px] oui-items-center", children: selectable ? /* @__PURE__ */ jsxs(DropdownMenuRoot, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        align: "end",
+        sideOffset: 2,
+        className: cn(
+          "oui-z-50 oui-bg-base-8 oui-p-1",
+          "oui-min-w-[80px]",
+          "oui-select-none oui-rounded-md"
+        ),
+        children: /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx("div", { className: "oui-max-h-[110px]", children: currencies.map((currency) => {
+          const isActive = currency === selected;
+          return /* @__PURE__ */ jsx(
+            Flex,
+            {
+              px: 2,
+              r: "base",
+              justify: "between",
+              itemAlign: "center",
+              className: cn(
+                "oui-h-[30px] oui-cursor-pointer hover:oui-bg-base-5",
+                isActive && "oui-bg-base-5",
+                "oui-mt-[2px]"
+              ),
+              onClick: () => {
+                setOpen(false);
+                onSelect(currency);
+              },
+              children: /* @__PURE__ */ jsxs(Flex, { gap: 2, itemAlign: "center", children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: `https://cdn.onramper.com/icons/tokens/${currency.toLowerCase()}.svg`,
+                    alt: currency,
+                    className: "oui-size-4 oui-rounded-full"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: isActive ? 80 : 54, children: currency })
+              ] })
+            },
+            currency
+          );
+        }) }) })
+      }
+    ) })
+  ] }) : trigger });
+};
+var TokenSuffix = ({ symbol }) => {
+  return /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-right-3 oui-flex oui-h-[20px] oui-items-center", children: /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gap: 1, children: [
+    /* @__PURE__ */ jsx(TokenIcon, { name: symbol, size: "xs" }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 80, weight: "semibold", children: symbol })
+  ] }) });
+};
+var RADIUS = 6;
+var TRACK_STROKE = 1.5;
+var ARC_STROKE = 2;
+var SIZE = (RADIUS + ARC_STROKE) * 2;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+function createTickStore(duration) {
+  let elapsed = 0;
+  const listeners = /* @__PURE__ */ new Set();
+  let timer = null;
+  function start() {
+    stop();
+    elapsed = 0;
+    timer = setInterval(() => {
+      elapsed += 1;
+      if (elapsed >= duration) stop();
+      listeners.forEach((l) => l());
+    }, 1e3);
+  }
+  function stop() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+  return {
+    getSnapshot: () => elapsed,
+    subscribe: (cb) => {
+      listeners.add(cb);
+      if (listeners.size === 1) start();
+      return () => {
+        listeners.delete(cb);
+        if (listeners.size === 0) stop();
+      };
+    },
+    reset: () => start()
+  };
+}
+var store = createTickStore(30);
+var QuoteCountdown = ({
+  duration = 30,
+  isValidating = false
+}) => {
+  const prevValidatingRef = useRef(isValidating);
+  if (prevValidatingRef.current && !isValidating) {
+    store.reset();
+  }
+  prevValidatingRef.current = isValidating;
+  const subscribe = useCallback((cb) => store.subscribe(cb), []);
+  const getSnapshot = useCallback(() => store.getSnapshot(), []);
+  const elapsed = useSyncExternalStore(subscribe, getSnapshot);
+  const prevElapsedRef = useRef(elapsed);
+  const isResetting = elapsed < prevElapsedRef.current;
+  prevElapsedRef.current = elapsed;
+  const finished = elapsed >= duration;
+  const progress = finished ? 1 : elapsed / duration;
+  const dashOffset = CIRCUMFERENCE * (1 - progress);
+  const transitionDuration = isResetting ? "0.6s" : "0.2s";
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: SIZE,
+      height: SIZE,
+      viewBox: `0 0 ${SIZE} ${SIZE}`,
+      className: "oui-shrink-0",
+      style: { transform: "rotate(-90deg)" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: SIZE / 2,
+            cy: SIZE / 2,
+            r: RADIUS,
+            fill: "none",
+            stroke: "rgba(255,255,255,0.1)",
+            strokeWidth: TRACK_STROKE
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: SIZE / 2,
+            cy: SIZE / 2,
+            r: RADIUS,
+            fill: "none",
+            stroke: "rgb(var(--oui-color-primary-light))",
+            strokeWidth: ARC_STROKE,
+            strokeLinecap: "round",
+            strokeDasharray: CIRCUMFERENCE,
+            strokeDashoffset: dashOffset,
+            style: {
+              transition: `stroke-dashoffset ${transitionDuration} ease-in-out`
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var OnrampFormUI = (props) => {
+  const { t } = useTranslation();
+  const {
+    paymentMethods,
+    selectedPaymentMethod,
+    onPaymentMethodChange,
+    fiatCurrencies,
+    selectedCurrency,
+    onCurrencyChange,
+    spendAmount,
+    onSpendAmountChange,
+    presetAmounts,
+    chains,
+    selectedChain,
+    onChainChange,
+    wallet,
+    address,
+    receiveQuantity,
+    receiveQuantityPlaceholder,
+    partners,
+    selectedPartner,
+    onPartnerChange,
+    exchangeRateText,
+    isQuoteLoading,
+    onContinue,
+    isContinueDisabled,
+    iframeDialogOpen,
+    onramperIframeUrl,
+    quoteIsValidating,
+    spendAmountError,
+    transactions,
+    pendingTransactions
+  } = props;
+  const formRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Box, { id: "oui-onramp-form", className: textVariants({ weight: "semibold" }), children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        ref: formRef,
+        direction: "column",
+        className: "oui-w-full oui-tracking-[0.03em]",
+        children: [
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              direction: "column",
+              itemAlign: "start",
+              className: "oui-w-full",
+              gap: 3,
+              children: [
+                /* @__PURE__ */ jsx(
+                  HistoryDropdown,
+                  {
+                    transactions,
+                    pendingTransactions,
+                    containerRef: formRef
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Flex, { direction: "column", className: "oui-w-full", gap: 2, children: [
+                  /* @__PURE__ */ jsxs(Box, { className: "oui-w-full", children: [
+                    /* @__PURE__ */ jsx(
+                      PaymentMethodSelect,
+                      {
+                        methods: selectedPaymentMethod ? paymentMethods : [],
+                        value: selectedPaymentMethod ?? {
+                          id: "_",
+                          name: t("onramp.noPaymentMethod")
+                        },
+                        onValueChange: onPaymentMethodChange,
+                        disabled: !selectedPaymentMethod,
+                        loading: isQuoteLoading && !selectedPaymentMethod
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      QuantityInput,
+                      {
+                        value: spendAmount,
+                        onValueChange: onSpendAmountChange,
+                        placeholder: presetAmounts[0].toString(),
+                        error: spendAmountError,
+                        suffix: /* @__PURE__ */ jsx(
+                          CurrencySuffix,
+                          {
+                            currencies: fiatCurrencies,
+                            selected: selectedCurrency,
+                            onSelect: (c) => onCurrencyChange(c)
+                          }
+                        ),
+                        classNames: {
+                          root: "oui-mt-1 oui-rounded-t-[4px] oui-rounded-b-xl"
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(Flex, { gap: 3, className: "oui-w-full", children: presetAmounts.map((amount) => /* @__PURE__ */ jsx(
+                    Flex,
+                    {
+                      justify: "center",
+                      itemAlign: "center",
+                      className: cn(
+                        "oui-h-6 oui-flex-1 oui-cursor-pointer oui-rounded",
+                        "oui-bg-base-6 oui-transition-colors hover:oui-bg-base-5"
+                      ),
+                      onClick: () => onSpendAmountChange(amount.toString()),
+                      children: /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, weight: "semibold", children: formatCompact(amount) })
+                    },
+                    amount
+                  )) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(ExchangeDivider, {}),
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              direction: "column",
+              itemAlign: "start",
+              className: "oui-w-full",
+              gap: 3,
+              children: [
+                /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-w-full", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 98, weight: "semibold", children: t("onramp.youReceive") }),
+                  /* @__PURE__ */ jsxs(Flex, { gapX: 1, children: [
+                    /* @__PURE__ */ jsx(WalletIcon, { size: "2xs", name: wallet?.label ?? "" }),
+                    /* @__PURE__ */ jsx(Text.formatted, { size: "sm", intensity: 54, rule: "address", children: address })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(Flex, { direction: "column", className: "oui-w-full", gap: 1, children: [
+                  /* @__PURE__ */ jsxs(Flex, { className: "oui-w-full", gap: 1, children: [
+                    /* @__PURE__ */ jsx(Box, { className: "oui-min-w-0 oui-flex-1", children: /* @__PURE__ */ jsx(
+                      ChainSelect,
+                      {
+                        chains,
+                        value: selectedChain,
+                        onValueChange: onChainChange,
+                        wrongNetwork: !selectedChain,
+                        className: "oui-w-full oui-rounded-[4px] oui-rounded-tl-xl"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Box, { className: "oui-min-w-0 oui-flex-1", children: /* @__PURE__ */ jsx(
+                      QuantityInput,
+                      {
+                        readOnly: true,
+                        loading: isQuoteLoading,
+                        value: isQuoteLoading ? "" : receiveQuantity,
+                        placeholder: isQuoteLoading ? "" : receiveQuantityPlaceholder,
+                        suffix: /* @__PURE__ */ jsx(TokenSuffix, { symbol: "USDC" }),
+                        classNames: {
+                          root: cn(
+                            "oui-rounded-[4px] oui-rounded-b-sm oui-rounded-tr-xl",
+                            "oui-border-none oui-bg-base-6 focus-within:oui-outline-0"
+                          )
+                        }
+                      }
+                    ) })
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    Flex,
+                    {
+                      justify: "between",
+                      itemAlign: "center",
+                      className: cn(
+                        "oui-w-full oui-rounded-b-xl oui-rounded-t-[4px]",
+                        "oui-bg-base-6 oui-px-3 oui-py-2"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gap: 1, children: [
+                          exchangeRateText && /* @__PURE__ */ jsx(
+                            QuoteCountdown,
+                            {
+                              duration: 30,
+                              isValidating: quoteIsValidating
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, weight: "semibold", children: exchangeRateText || "\u2014" })
+                        ] }),
+                        selectedPartner ? /* @__PURE__ */ jsx(
+                          PartnerSelect,
+                          {
+                            partners,
+                            value: selectedPartner,
+                            onValueChange: onPartnerChange,
+                            containerRef: formRef
+                          }
+                        ) : isQuoteLoading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: t("onramp.noPartner") })
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Flex, { justify: "center", className: "oui-w-full oui-pt-7", children: /* @__PURE__ */ jsx(Box, { className: "oui-w-full lg:oui-w-auto lg:oui-min-w-[184px]", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              fullWidth: true,
+              size: { initial: "md", lg: "lg" },
+              onClick: onContinue,
+              disabled: isContinueDisabled,
+              children: t("onramp.continue")
+            }
+          ) }) })
+        ]
+      }
+    ),
+    iframeDialogOpen && /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsx("div", { className: "oui-fixed oui-inset-0 oui-z-50 oui-flex oui-flex-col oui-bg-black/80", children: /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src: onramperIframeUrl,
+        title: t("onramp.iframeTitle"),
+        allow: "accelerometer; autoplay; camera; gyroscope; payment; microphone",
+        className: "oui-w-full oui-flex-1 oui-border-none"
+      }
+    ) }) })
+  ] });
+};
+var OnrampConfigContext = createContext(null);
+function OnrampConfigProvider({
+  config,
+  children
+}) {
+  return /* @__PURE__ */ jsx(OnrampConfigContext.Provider, { value: config, children });
+}
+function useOnrampConfig() {
+  const config = useContext(OnrampConfigContext);
+  if (!config) {
+    throw new Error("useOnrampConfig must be used within OnrampConfigProvider");
+  }
+  return config;
+}
+function arrangeStringAlphabetically(inputString) {
+  const inputObject = {};
+  inputString.split("&").forEach((pair) => {
+    const [key, value] = pair.split("=");
+    const nestedPairs = value.split(",");
+    inputObject[key] = {};
+    nestedPairs.forEach((nestedPair) => {
+      const [nestedKey, nestedValue] = nestedPair.split(":");
+      inputObject[key][nestedKey] = nestedValue;
+    });
+  });
+  for (const key in inputObject) {
+    inputObject[key] = Object.fromEntries(
+      Object.entries(inputObject[key]).sort()
+    );
+  }
+  const sortedKeys = Object.keys(inputObject).sort();
+  const parts = [];
+  for (const key of sortedKeys) {
+    const nested = Object.entries(inputObject[key]).map(([k, v]) => `${k}:${v}`).join(",");
+    parts.push(`${key}=${nested}`);
+  }
+  return parts.join("&");
+}
+function generateOnramperSignature(secretKey, data) {
+  const encoder = new TextEncoder();
+  const sig = computeHmac(
+    "sha256",
+    encoder.encode(secretKey),
+    encoder.encode(data)
+  );
+  return sig.startsWith("0x") ? sig.slice(2) : sig;
+}
+
+// src/utils/buildOnramperUrl.ts
+function buildOnramperIframeUrl({
+  spendAmount,
+  selectedCurrency,
+  onramperToken,
+  selectedPaymentMethod,
+  selectedPartner,
+  address,
+  apiKey,
+  secretKey
+}) {
+  const params = new URLSearchParams();
+  params.set("themeName", "dark");
+  params.set("apiKey", apiKey);
+  params.set("mode", "buy");
+  params.set("skipTransactionScreen", "true");
+  params.set("txnRedirect", "true");
+  if (spendAmount) params.set("txnAmount", spendAmount);
+  if (selectedCurrency) params.set("txnFiat", selectedCurrency.toLowerCase());
+  if (onramperToken) params.set("txnCrypto", onramperToken);
+  if (selectedPaymentMethod)
+    params.set("txnPaymentMethod", selectedPaymentMethod.id);
+  if (selectedPartner) params.set("txnOnramp", selectedPartner.id);
+  if (address && onramperToken) {
+    const walletsValue = `${onramperToken}:${address}`.toLowerCase();
+    params.set("wallets", walletsValue);
+    if (secretKey) {
+      const signContent = arrangeStringAlphabetically(
+        `wallets=${walletsValue}`
+      );
+      const signature = generateOnramperSignature(secretKey, signContent);
+      params.set("signature", signature);
+    }
+  }
+  return `${ONRAMPER_WIDGET_BASE}?${params.toString()}`;
+}
+
+// src/hooks/useOnrampCheckout.ts
+function useOnrampCheckout({
+  spendAmount,
+  selectedCurrency,
+  spendAmountError,
+  onramperToken,
+  selectedPartner,
+  selectedPaymentMethod,
+  address,
+  isLoading
+}) {
+  const { t } = useTranslation();
+  const { apiKey, secretKey } = useOnrampConfig();
+  const [iframeDialogOpen, setIframeDialogOpen] = useState(false);
+  const onramperIframeUrl = useMemo(
+    () => buildOnramperIframeUrl({
+      spendAmount,
+      selectedCurrency,
+      onramperToken,
+      selectedPaymentMethod,
+      selectedPartner,
+      address,
+      apiKey,
+      secretKey
+    }),
+    [
+      spendAmount,
+      selectedCurrency,
+      onramperToken,
+      selectedPaymentMethod,
+      selectedPartner,
+      address,
+      apiKey,
+      secretKey
+    ]
+  );
+  const isContinueDisabled = useMemo(
+    () => !spendAmount || isNaN(parseFloat(spendAmount)) || parseFloat(spendAmount) <= 0 || !selectedCurrency || !onramperToken || !selectedPartner || !selectedPaymentMethod || !address || isLoading || !!spendAmountError,
+    [
+      spendAmount,
+      selectedCurrency,
+      spendAmountError,
+      onramperToken,
+      selectedPartner,
+      selectedPaymentMethod,
+      address,
+      isLoading
+    ]
+  );
+  const onContinue = useCallback(() => {
+    const missing = [];
+    const num = parseFloat(spendAmount);
+    if (!spendAmount || isNaN(num) || num <= 0)
+      missing.push(t("onramp.missing.spendAmount"));
+    if (!selectedCurrency)
+      missing.push(t("onramp.missing.currency"));
+    if (!onramperToken)
+      missing.push(t("onramp.missing.network"));
+    if (!selectedPartner)
+      missing.push(t("onramp.missing.partner"));
+    if (!selectedPaymentMethod)
+      missing.push(t("onramp.missing.paymentMethod"));
+    if (!address)
+      missing.push(t("onramp.missing.address"));
+    if (missing.length > 0) {
+      const msg = t("onramp.missingRequiredInfo", {
+        list: missing.join(", ")
+      });
+      toast.error(msg);
+      return;
+    }
+    setIframeDialogOpen(true);
+  }, [
+    spendAmount,
+    selectedCurrency,
+    onramperToken,
+    selectedPartner,
+    selectedPaymentMethod,
+    address,
+    t
+  ]);
+  return {
+    onramperIframeUrl,
+    iframeDialogOpen,
+    setIframeDialogOpen,
+    isContinueDisabled,
+    onContinue
+  };
+}
+var ONRAMPER_BASE = "https://api.onramper.com/quotes";
+var CHAIN_TO_ONRAMPER_TOKEN = {
+  1: "usdc_ethereum",
+  // Ethereum
+  10: "usdc_optimism",
+  // Optimism
+  56: "usdc_bsc",
+  // BNB Smart Chain
+  100: "usdc_gnosis",
+  // Gnosis
+  137: "usdc_polygon",
+  // Polygon
+  143: "usdc_monad",
+  // Monad Mainnet
+  324: "usdc_zksync",
+  // zkSync Era
+  2020: "usdc_ronin",
+  // Ronin
+  8453: "usdc_base",
+  // Base
+  42161: "usdc_arbitrum",
+  // Arbitrum One
+  42220: "usdc_celo",
+  // Celo
+  43114: "usdc_avaxc",
+  // Avalanche C-Chain
+  57073: "usdc_ink",
+  // Ink
+  59144: "usdc_linea",
+  // Linea
+  900900900: "usdc_solana"
+  // Solana Mainnet
+};
+var ONRAMP_SUPPORTED_CHAIN_IDS = new Set(
+  Object.keys(CHAIN_TO_ONRAMPER_TOKEN).map(Number)
+);
+function getOnramperToken(chainId) {
+  return CHAIN_TO_ONRAMPER_TOKEN[chainId];
+}
+var onrampFetcher = async (url, apiKey) => {
+  const res = await fetch(url, {
+    headers: {
+      accept: "application/json",
+      Authorization: apiKey
+    }
+  });
+  if (!res.ok) {
+    throw new Error(`Onramper API error: ${res.status}`);
+  }
+  return res.json();
+};
+var buildQuoteUrl = (currency, amount, onramperToken) => `${ONRAMPER_BASE}/${currency.toLowerCase()}/${onramperToken}?amount=${amount}`;
+function filterValidRamps(items) {
+  return items.filter((item) => !item.errors);
+}
+function toPartners(items) {
+  return items.map((item) => ({
+    id: item.ramp,
+    name: item.ramp.charAt(0).toUpperCase() + item.ramp.slice(1),
+    rate: item.rate ?? 0,
+    payout: item.payout ?? 0,
+    recommendations: item.recommendations ?? []
+  }));
+}
+function toPaymentMethods(items) {
+  const seen = /* @__PURE__ */ new Set();
+  const methods = [];
+  for (const item of items) {
+    if (!item.availablePaymentMethods) continue;
+    for (const pm of item.availablePaymentMethods) {
+      if (!seen.has(pm.paymentTypeId)) {
+        seen.add(pm.paymentTypeId);
+        methods.push({
+          id: pm.paymentTypeId,
+          name: pm.name,
+          icon: pm.icon
+        });
+      }
+    }
+  }
+  return methods;
+}
+function getPaymentMethodsForPartner(items, partnerId) {
+  const item = items.find((i) => i.ramp === partnerId);
+  if (!item?.availablePaymentMethods) return [];
+  return item.availablePaymentMethods.map((pm) => ({
+    id: pm.paymentTypeId,
+    name: pm.name,
+    icon: pm.icon
+  }));
+}
+function extractAllLimits(items) {
+  const result = {};
+  for (const item of items) {
+    if (!item.availablePaymentMethods) continue;
+    for (const pm of item.availablePaymentMethods) {
+      const agg = pm.details?.limits?.aggregatedLimit;
+      if (agg && !result[pm.paymentTypeId]) {
+        result[pm.paymentTypeId] = agg;
+      }
+    }
+  }
+  return result;
+}
+var DEFAULT_AMOUNT = 100;
+function useOnrampQuotes(currency, amount, onramperToken) {
+  const { apiKey } = useOnrampConfig();
+  const token = onramperToken || "";
+  const num = amount ? parseFloat(amount) : NaN;
+  const effectiveAmount = !isNaN(num) && num > 0 ? num : DEFAULT_AMOUNT;
+  const url = buildQuoteUrl(currency, effectiveAmount, token);
+  const { data, error, isLoading, isValidating } = useSWR(
+    `onramp-quote-${currency.toLowerCase()}-${effectiveAmount}-${token}`,
+    () => onrampFetcher(url, apiKey),
+    {
+      refreshInterval: 3e4,
+      revalidateOnFocus: false,
+      dedupingInterval: 1e3,
+      keepPreviousData: true
+    }
+  );
+  const validRamps = useMemo(
+    () => data ? filterValidRamps(data) : [],
+    [data]
+  );
+  const isAvailable = validRamps.length > 0 && !error;
+  const partners = useMemo(() => toPartners(validRamps), [validRamps]);
+  const paymentMethods = useMemo(
+    () => toPaymentMethods(validRamps),
+    [validRamps]
+  );
+  const latestLimits = useMemo(
+    () => extractAllLimits(validRamps),
+    [validRamps]
+  );
+  const [accumulatedLimits, setAccumulatedLimits] = useState({});
+  useEffect(() => {
+    if (Object.keys(latestLimits).length > 0) {
+      setAccumulatedLimits((prev) => ({ ...prev, ...latestLimits }));
+    }
+  }, [latestLimits]);
+  return {
+    isAvailable,
+    partners,
+    paymentMethods,
+    paymentMethodLimits: accumulatedLimits,
+    isLoading,
+    error,
+    validRamps,
+    isValidating,
+    getPaymentMethodsForPartner: (partnerId) => getPaymentMethodsForPartner(validRamps, partnerId)
+  };
+}
+function useOnrampAvailability(currency) {
+  return useOnrampQuotes(currency);
+}
+var PENDING_STATUSES = /* @__PURE__ */ new Set(["pending", "new"]);
+function useOnrampTransactionStatus(walletAddress) {
+  const { workerUrl } = useOnrampConfig();
+  const { data, error } = useSWR(
+    walletAddress && workerUrl ? `${workerUrl}?walletAddress=${walletAddress}` : null,
+    async (url) => {
+      const res = await fetch(url);
+      if (!res.ok) {
+        if (res.status === 404) return [];
+        throw new Error("Failed to fetch transaction status");
+      }
+      return res.json();
+    },
+    {
+      refreshInterval: (latestData) => {
+        if (!walletAddress) return 0;
+        if (latestData && latestData.some((tx) => PENDING_STATUSES.has(tx.status))) {
+          return 1e4;
+        }
+        return 3e4;
+      },
+      revalidateOnFocus: true
+    }
+  );
+  const transactions = useMemo(() => data || [], [data]);
+  const pendingTransactions = useMemo(
+    () => transactions.filter((tx) => PENDING_STATUSES.has(tx.status)),
+    [transactions]
+  );
+  const historyTransactions = useMemo(
+    () => transactions.filter((tx) => !PENDING_STATUSES.has(tx.status)),
+    [transactions]
+  );
+  return {
+    transactions,
+    pendingTransactions,
+    historyTransactions,
+    error,
+    isLoading: !data && !error && !!walletAddress
+  };
+}
+function usePartnerPaymentSelection(partners, getPaymentMethodsForPartner2) {
+  const [selectedPartnerId, setSelectedPartnerId] = useState(
+    null
+  );
+  const [selectedPaymentMethodId, setSelectedPaymentMethodId] = useState(null);
+  const selectedPartner = useMemo(() => {
+    if (partners.length === 0) return null;
+    if (selectedPartnerId) {
+      const found = partners.find((p) => p.id === selectedPartnerId);
+      if (found) return found;
+    }
+    return partners[0];
+  }, [partners, selectedPartnerId]);
+  const onPartnerChange = useCallback((partner) => {
+    setSelectedPartnerId(partner.id);
+    setSelectedPaymentMethodId(null);
+  }, []);
+  const paymentMethods = useMemo(() => {
+    if (!selectedPartner) return [];
+    return getPaymentMethodsForPartner2(selectedPartner.id);
+  }, [selectedPartner, getPaymentMethodsForPartner2]);
+  const selectedPaymentMethod = useMemo(() => {
+    if (paymentMethods.length === 0) return null;
+    if (selectedPaymentMethodId) {
+      const found = paymentMethods.find(
+        (m) => m.id === selectedPaymentMethodId
+      );
+      if (found) return found;
+    }
+    return paymentMethods[0];
+  }, [paymentMethods, selectedPaymentMethodId]);
+  const onPaymentMethodChange = useCallback((method) => {
+    setSelectedPaymentMethodId(method.id);
+  }, []);
+  return {
+    selectedPartner,
+    onPartnerChange,
+    paymentMethods,
+    selectedPaymentMethod,
+    onPaymentMethodChange
+  };
+}
+function useReceiveDisplay({
+  spendAmount,
+  spendAmountError,
+  selectedPartner,
+  selectedCurrency,
+  effectiveSpendAmountForQuote
+}) {
+  const receiveQuantity = useMemo(() => {
+    if (spendAmountError) return "";
+    const num = parseFloat(spendAmount);
+    if (isNaN(num) || num <= 0 || !selectedPartner) return "";
+    if (selectedPartner.payout > 0) return selectedPartner.payout.toFixed(2);
+    return "0";
+  }, [spendAmount, spendAmountError, selectedPartner]);
+  const receiveQuantityPlaceholder = useMemo(() => {
+    if (!selectedPartner) return "";
+    if (selectedPartner.payout > 0) return selectedPartner.payout.toFixed(2);
+    if (!selectedPartner.rate) return "";
+    const num = parseFloat(effectiveSpendAmountForQuote);
+    if (!isNaN(num) && num > 0) return (num / selectedPartner.rate).toFixed(2);
+    return "";
+  }, [selectedPartner, effectiveSpendAmountForQuote]);
+  const exchangeRateText = useMemo(() => {
+    if (!selectedPartner?.rate) return "";
+    return `1 USDC \u2248 ${selectedPartner.rate.toFixed(4)} ${selectedCurrency}`;
+  }, [selectedPartner, selectedCurrency]);
+  return { receiveQuantity, receiveQuantityPlaceholder, exchangeRateText };
+}
+function useSpendAmount() {
+  const [selectedCurrency, setSelectedCurrency] = useState("USD");
+  const [spendAmount, setSpendAmount] = useState("");
+  const [debouncedSpendAmount, setDebouncedSpendAmount] = useState(
+    PRESET_AMOUNTS["USD"][0].toString()
+  );
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSpendAmount(spendAmount);
+    }, 500);
+    return () => clearTimeout(handler);
+  }, [spendAmount]);
+  const effectiveSpendAmountForQuote = useMemo(() => {
+    const num = parseFloat(debouncedSpendAmount);
+    if (!isNaN(num) && num > 0) return debouncedSpendAmount;
+    return PRESET_AMOUNTS[selectedCurrency][0].toString();
+  }, [debouncedSpendAmount, selectedCurrency]);
+  const onCurrencyChange = (currency) => {
+    setSelectedCurrency(currency);
+    setSpendAmount("");
+    setDebouncedSpendAmount(PRESET_AMOUNTS[currency][0].toString());
+  };
+  return {
+    fiatCurrencies: FIAT_CURRENCIES,
+    selectedCurrency,
+    onCurrencyChange,
+    spendAmount,
+    onSpendAmountChange: setSpendAmount,
+    presetAmounts: PRESET_AMOUNTS[selectedCurrency],
+    effectiveSpendAmountForQuote
+  };
+}
+function useWalletAddress() {
+  const { wallet, connectedChain } = useWalletConnector();
+  const { state: accountState, account } = useAccount();
+  const address = useMemo(() => {
+    let addr = accountState.address;
+    if (connectedChain?.id && ABSTRACT_CHAIN_ID_MAP.has(parseInt(connectedChain.id))) {
+      addr = account.getAdditionalInfo()?.AGWAddress;
+    }
+    return addr;
+  }, [accountState, account, connectedChain]);
+  return { wallet, address };
+}
+function useChainSelect() {
+  const { t } = useTranslation();
+  const networkId = useConfig("networkId");
+  const [linkDeviceStorage] = useLocalStorage("orderly_link_device", {});
+  const { connectedChain, settingChain, setChain } = useWalletConnector();
+  const [allChains, { findByChainId }] = useChains(networkId, {
+    pick: "network_infos",
+    filter: (chain) => chain.network_infos?.bridge_enable || chain.network_infos?.bridgeless
+  });
+  const chains = useMemo(
+    () => allChains.filter((c) => ONRAMP_SUPPORTED_CHAIN_IDS.has(c.chain_id)),
+    [allChains]
+  );
+  const currentChain = useMemo(() => {
+    const chainId = connectedChain ? praseChainIdToNumber(connectedChain.id) : parseInt(linkDeviceStorage?.chainId);
+    if (!chainId) return null;
+    const chain = findByChainId(chainId);
+    return {
+      ...connectedChain,
+      id: chainId,
+      info: chain
+    };
+  }, [findByChainId, connectedChain, linkDeviceStorage]);
+  const onChainChange = useCallback(
+    async (chain) => {
+      const chainInfo = findByChainId(chain.chain_id);
+      if (!connectedChain) {
+        return;
+      }
+      const currentChainId = praseChainIdToNumber(connectedChain.id);
+      if (!chainInfo || chainInfo.network_infos?.chain_id === currentChainId) {
+        return Promise.resolve();
+      }
+      return setChain({
+        chainId: int2hex(Number(chainInfo.network_infos?.chain_id))
+      }).then((switched) => {
+        if (switched) {
+          toast.success(t("connector.networkSwitched"));
+        } else {
+          toast.error(t("connector.switchChain.failed"));
+        }
+      }).catch((error) => {
+        if (error && error.message) {
+          toast.error(
+            `${t("connector.switchChain.failed")}: ${error.message}`
+          );
+        }
+      });
+    },
+    [connectedChain, setChain, findByChainId, t]
+  );
+  return {
+    chains,
+    currentChain,
+    settingChain,
+    onChainChange
+  };
+}
+
+// src/components/onrampForm/onrampForm.script.tsx
+var useOnrampFormScript = () => {
+  const { t } = useTranslation();
+  const spend = useSpendAmount();
+  const { chains, currentChain, onChainChange } = useChainSelect();
+  const onramperToken = useMemo(
+    () => currentChain ? getOnramperToken(currentChain.id) : void 0,
+    [currentChain]
+  );
+  const {
+    isAvailable,
+    partners,
+    isLoading,
+    getPaymentMethodsForPartner: getPaymentMethodsForPartner2,
+    paymentMethodLimits,
+    isValidating
+  } = useOnrampQuotes(
+    spend.selectedCurrency,
+    spend.effectiveSpendAmountForQuote,
+    onramperToken
+  );
+  const selection = usePartnerPaymentSelection(
+    partners,
+    getPaymentMethodsForPartner2
+  );
+  const spendAmountError = useMemo(() => {
+    if (!spend.spendAmount || !selection.selectedPaymentMethod) return "";
+    const num = parseFloat(spend.spendAmount);
+    if (isNaN(num) || num <= 0) return "";
+    const limits = paymentMethodLimits[selection.selectedPaymentMethod.id];
+    if (!limits) return "";
+    if (num < limits.min || num > limits.max) {
+      return t("onramp.amountBetween", {
+        currency: spend.selectedCurrency,
+        min: limits.min,
+        max: limits.max
+      });
+    }
+    return "";
+  }, [
+    spend.spendAmount,
+    spend.selectedCurrency,
+    selection.selectedPaymentMethod,
+    paymentMethodLimits,
+    t
+  ]);
+  const { wallet, address } = useWalletAddress();
+  const {
+    transactions,
+    pendingTransactions,
+    historyTransactions,
+    isLoading: isStatusLoading
+  } = useOnrampTransactionStatus(address ?? null);
+  const { receiveQuantity, receiveQuantityPlaceholder, exchangeRateText } = useReceiveDisplay({
+    spendAmount: spend.spendAmount,
+    spendAmountError,
+    selectedPartner: selection.selectedPartner,
+    selectedCurrency: spend.selectedCurrency,
+    effectiveSpendAmountForQuote: spend.effectiveSpendAmountForQuote
+  });
+  const checkout = useOnrampCheckout({
+    spendAmount: spend.spendAmount,
+    selectedCurrency: spend.selectedCurrency,
+    spendAmountError,
+    onramperToken,
+    selectedPartner: selection.selectedPartner,
+    selectedPaymentMethod: selection.selectedPaymentMethod,
+    address,
+    isLoading
+  });
+  return {
+    paymentMethods: selection.paymentMethods,
+    selectedPaymentMethod: selection.selectedPaymentMethod,
+    onPaymentMethodChange: selection.onPaymentMethodChange,
+    fiatCurrencies: spend.fiatCurrencies,
+    selectedCurrency: spend.selectedCurrency,
+    onCurrencyChange: spend.onCurrencyChange,
+    spendAmount: spend.spendAmount,
+    onSpendAmountChange: spend.onSpendAmountChange,
+    presetAmounts: spend.presetAmounts,
+    chains,
+    selectedChain: currentChain,
+    onChainChange,
+    wallet,
+    address,
+    receiveQuantity,
+    receiveQuantityPlaceholder,
+    partners,
+    selectedPartner: selection.selectedPartner,
+    onPartnerChange: selection.onPartnerChange,
+    exchangeRateText,
+    quoteIsValidating: isValidating,
+    isAvailable,
+    isQuoteLoading: isLoading,
+    spendAmountError,
+    ...checkout,
+    statusData: pendingTransactions.length > 0 ? pendingTransactions[0] : historyTransactions.length > 0 ? historyTransactions[0] : null,
+    transactions,
+    pendingTransactions,
+    historyTransactions,
+    isStatusLoading
+  };
+};
+var OnrampForm = (props) => {
+  const state = useOnrampFormScript();
+  return /* @__PURE__ */ jsx(OnrampFormUI, { ...state, ...props });
+};
+
+// src/i18n/module.ts
+var OnrampLocales = {
+  "onramp.pluginName": "Buy Crypto (Onramper)",
+  "onramp.tabTitle": "Buy Crypto",
+  "onramp.noPaymentMethod": "No available payment method",
+  "onramp.youReceive": "You receive",
+  "onramp.youSpend": "You spend",
+  "onramp.noPartner": "No available partner",
+  "onramp.continue": "Continue",
+  "onramp.iframeTitle": "Onramper Widget",
+  "onramp.amountBetween": "Amount should be in between {{currency}} {{min}} and {{currency}} {{max}}",
+  "onramp.by": "by",
+  "onramp.payWith": "Pay with",
+  "onramp.history": "History",
+  "onramp.pendingPurchase": "{{count}} pending purchase",
+  "onramp.pendingPurchases": "{{count}} pending purchases",
+  "onramp.statusCompleted": "completed",
+  "onramp.quantity": "Quantity",
+  "onramp.unknownNetwork": "Unknown",
+  "onramp.missingRequiredInfo": "Missing required info: {{list}}",
+  "onramp.missing.spendAmount": "spend amount",
+  "onramp.missing.currency": "fiat currency",
+  "onramp.missing.network": "network (chain)",
+  "onramp.missing.partner": "partner",
+  "onramp.missing.paymentMethod": "payment method",
+  "onramp.missing.address": "wallet address"
+};
+
+// import("./locales/**/*.json") in src/i18n/provider.tsx
+var globImport_locales_json = __glob({
+  "./locales/de.json": () => import('./de-XNITMI2B.mjs'),
+  "./locales/en.json": () => import('./en-UCLS4WAV.mjs'),
+  "./locales/es.json": () => import('./es-76I5JYOI.mjs'),
+  "./locales/fr.json": () => import('./fr-YBDFJ5YI.mjs'),
+  "./locales/id.json": () => import('./id-TWEEXYGV.mjs'),
+  "./locales/it.json": () => import('./it-ESHQ6ZEW.mjs'),
+  "./locales/ja.json": () => import('./ja-TTBR7X25.mjs'),
+  "./locales/ko.json": () => import('./ko-PUJOVSVE.mjs'),
+  "./locales/nl.json": () => import('./nl-SENDBWKK.mjs'),
+  "./locales/pl.json": () => import('./pl-GGYFSVAJ.mjs'),
+  "./locales/pt.json": () => import('./pt-S4FOVI3A.mjs'),
+  "./locales/ru.json": () => import('./ru-ZF4FQ3S2.mjs'),
+  "./locales/tc.json": () => import('./tc-TQ4TWJLG.mjs'),
+  "./locales/tr.json": () => import('./tr-RM566BKR.mjs'),
+  "./locales/uk.json": () => import('./uk-K25BMMM3.mjs'),
+  "./locales/vi.json": () => import('./vi-MTEYJND7.mjs'),
+  "./locales/zh.json": () => import('./zh-JDOWM3XW.mjs')
+});
+
+// src/i18n/provider.tsx
+preloadDefaultResource(OnrampLocales);
+var resources = (lang) => {
+  return globImport_locales_json(`./locales/${lang}.json`).then(
+    (res) => res.default
+  );
+};
+var OnrampLocaleProvider = (props) => {
+  return /* @__PURE__ */ jsx(ExternalLocaleProvider, { resources, children: props.children });
+};
+var defaultIcon = /* @__PURE__ */ jsx("div", { className: "oui-flex oui-items-center oui-justify-center", children: /* @__PURE__ */ jsx(BuyCryptoIcon, { width: 11, height: 11, className: "oui-mt-0.5 oui-ml-0.5" }) });
+function registerOnrampPlugin(options) {
+  return (SDK) => {
+    SDK.registerPlugin({
+      id: "orderly-onramp",
+      name: i18n.t("onramp.pluginName"),
+      version: "1.0.0",
+      interceptors: [
+        createInterceptor("Transfer.DepositAndWithdraw", (Original, props) => {
+          if (!options.apiKey || !options.secretKey) {
+            return /* @__PURE__ */ jsx(Original, { ...props });
+          }
+          const onrampTab = {
+            id: "onramp",
+            title: options.title ?? i18n.t("onramp.tabTitle"),
+            icon: options.icon ?? defaultIcon,
+            component: (props2) => /* @__PURE__ */ jsx(
+              OnrampConfigProvider,
+              {
+                config: {
+                  apiKey: options.apiKey,
+                  secretKey: options.secretKey,
+                  workerUrl: options.workerUrl
+                },
+                children: /* @__PURE__ */ jsx(OnrampForm, { ...props2 })
+              }
+            ),
+            order: 30
+          };
+          const extraTabs = [
+            ...Array.isArray(props.extraTabs) ? props.extraTabs : [],
+            onrampTab
+          ];
+          return /* @__PURE__ */ jsx(OnrampLocaleProvider, { children: /* @__PURE__ */ jsx(Original, { ...props, extraTabs }) });
+        })
+      ]
+    });
+  };
+}
+
+export { ArrowDownIcon, BuyCryptoIcon, ExchangeIcon, FIAT_CURRENCIES, OnrampForm, OnrampFormUI, PRESET_AMOUNTS, formatCompact, registerOnrampPlugin, useOnrampAvailability, useOnrampFormScript };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map