@rash2x/bridge-widget 0.1.11 → 0.1.13

package/dist/evaa-bridge.cjs

@@ -25,52 +25,97 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const reactI18next = require("react-i18next");
 const require$$0 = require("react");
+const reactI18next = require("react-i18next");
+const i18n = require("i18next");
 const zustand = require("zustand");
-const reactSlot = require("@radix-ui/react-slot");
-const classVarianceAuthority = require("class-variance-authority");
-const clsx = require("clsx");
-const tailwindMerge = require("tailwind-merge");
-const DialogPrimitive = require("@radix-ui/react-dialog");
-const lucideReact = require("lucide-react");
-const TooltipPrimitive = require("@radix-ui/react-tooltip");
+const button = require("@/components/ui/button");
+const dialog = require("@/components/ui/dialog");
+const tooltip = require("@/components/ui/tooltip");
+const utils = require("@/lib/utils");
+const input = require("@/components/ui/input");
 const wagmi = require("wagmi");
 const tronwalletAdapterReactHooks = require("@tronweb3/tronwallet-adapter-react-hooks");
 const uiReact = require("@tonconnect/ui-react");
 const reactQuery = require("@tanstack/react-query");
 const core = require("@ton/core");
 const reactWindow = require("react-window");
-const SwitchPrimitive = require("@radix-ui/react-switch");
+const skeleton = require("@/components/ui/skeleton");
+const card = require("@/components/ui/card");
+const _switch = require("@/components/ui/switch");
+const lucideReact = require("lucide-react");
 const framerMotion = require("framer-motion");
-const AccordionPrimitive = require("@radix-ui/react-accordion");
-const i18next = require("i18next");
+const accordion = require("@/components/ui/accordion");
 const sonner = require("sonner");
 const ethers = require("ethers");
 const viem = require("viem");
 const ton = require("@ton/ton");
 const tronwalletAdapters = require("@tronweb3/tronwallet-adapters");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
+const common$1 = { "connecting": "Connecting…", "initializing": "Initializing...", "loading": "Loading...", "paste": "paste", "close": "Close", "zeroPlaceholder": "0", "nativeToken": "Native Token" };
+const wallets$1 = { "addTonWallet": "Add TON wallet", "addEvmWallet": "Add EVM wallet", "connectTonWallet": "Connect TON wallet", "connectEvmWallet": "Connect EVM wallet", "initializingMetamask": "Initializing MetaMask SDK...", "initializingTronlink": "Initializing TronLink...", "failedToConnectTon": "Failed to connect to TON wallet", "failedToDisconnect": "Failed to disconnect", "metamaskConnectionError": "MetaMask connection error", "failedToConnectMetamask": "Failed to connect to MetaMask", "failedToDisconnectMetamask": "Failed to disconnect from MetaMask", "selectWallet": "Select Wallet", "tonWallets": "TON", "evmWallets": "EVM", "tronWallets": "TRON", "tonKeeper": "TonKeeper", "metaMask": "WalletConnect", "tronLink": "TronLink", "addTronWallet": "Add Tron wallet", "comingSoon": "Coming Soon", "connected": "CONNECTED", "disconnect": "Disconnect", "chooseWallet": "Choose wallet", "oneWalletPerEnv": "You can only connect one wallet per environment.", "connect": "Connect", "connectTronWallet": "Connect Tron wallet", "connectWallet": "Connect wallet" };
+const bridge$1 = { "sourceNetwork": "Source network", "destinationNetwork": "Destination network", "selectToken": "Select token", "selectNetwork": "Select network", "searchToken": "Search token", "searchDestinationChain": "Search destination chain", "myTokens": "My tokens", "allTokens": "All tokens", "willChangeSourceChain": "Will Change Source Chain", "noBalancesFound": "No balances found.", "noResults": "No results", "sendToAnotherAddress": "Send to another address", "youWillReceive": "You will receive", "tonAddressPlaceholder": "TON address", "evmAddressPlaceholder": "0x… EVM address", "addressDoesntMatch": "Address doesn't match the {{network}} network", "checkBeforeTransfer": "Check correctness before transfer" };
+const transaction$1 = { "enterAmount": "Enter amount", "transfer": "Transfer", "getQuote": "Get quote", "failed": "Transaction Failed", "confirm": "Confirm transaction", "signTransaction": "Sign in transaction in wallet", "quoting": "Quoting...", "inProgress": "Processing...", "checkingBalance": "Checking balance...", "insufficientBalance": "Insufficient balance", "amountTooSmall": "Min {{min}}", "amountTooLarge": "Max {{max}}", "successTitle": "Success", "bridged": "Bridged", "transferTitle": "Transfer", "hash": "Hash", "route": "Route", "estTime": "Est. Time", "slippage": "Slippage", "minimumReceived": "Minimum received", "totalFee": "Total Fee", "noRouteFound": "No route found", "notEnoughGas": "Not enough gas", "noRouteFoundForSettings": "No route found for current settings.", "tryAdjustSettings": "Try disabling Gas on Destination, or adjust amount/networks.", "quoteError": "Quote error" };
+const app$1 = { "stargateWidgetName": "Stargate Bridge Widget", "liveWidget": "Live Widget", "getStarted": "Get Started" };
+const settings$1 = { "title": "Settings", "gasOnDestination": "Gas on destination", "slippageTolerance": "Slippage tolerance", "routePriority": "Route Priority", "highSlippageWarning": "High slippage warning", "gasPresets": { "auto": "Auto", "none": "None", "medium": "Medium", "max": "Max" }, "routePresets": { "fastest": "Fastest", "cheapest": "Cheapest", "recommended": "Recommended" } };
+const en = {
+  common: common$1,
+  wallets: wallets$1,
+  bridge: bridge$1,
+  transaction: transaction$1,
+  app: app$1,
+  settings: settings$1
+};
+const common = { "connecting": "Подключение…", "initializing": "Инициализация...", "loading": "Загрузка...", "paste": "вставить", "close": "Закрыть", "zeroPlaceholder": "0", "nativeToken": "Нативный токен" };
+const wallets = { "addTonWallet": "Добавить TON кошелёк", "addEvmWallet": "Добавить EVM кошелёк", "connectTonWallet": "Подключить TON кошелёк", "connectEvmWallet": "Подключить EVM кошелёк", "initializingMetamask": "Инициализация MetaMask SDK...", "initializingTronlink": "Инициализация TronLink...", "failedToConnectTon": "Не удалось подключиться к TON кошельку", "failedToDisconnect": "Не удалось отключиться", "metamaskConnectionError": "Ошибка подключения MetaMask", "failedToConnectMetamask": "Не удалось подключиться к MetaMask", "failedToDisconnectMetamask": "Не удалось отключиться от MetaMask", "selectWallet": "Выберите кошелёк", "tonWallets": "TON", "evmWallets": "EVM", "tronWallets": "TRON", "tonKeeper": "TonKeeper", "metaMask": "WalletConnect", "tronLink": "TronLink", "addTronWallet": "Добавить Tron кошелёк", "comingSoon": "Скоро", "connected": "ПОДКЛЮЧЕНО", "disconnect": "Отключить", "chooseWallet": "Выберите кошелёк", "oneWalletPerEnv": "Можно подключить только один кошелёк на окружение.", "connect": "Подключить", "connectTronWallet": "Подключить Tron кошелёк", "connectWallet": "Подключить кошелёк" };
+const bridge = { "sourceNetwork": "Исходная сеть", "destinationNetwork": "Целевая сеть", "selectToken": "Выбрать токен", "selectNetwork": "Выбрать сеть", "searchToken": "Поиск токена", "searchDestinationChain": "Поиск целевой сети", "myTokens": "Мои токены", "allTokens": "Все токены", "willChangeSourceChain": "Сменит исходную сеть", "noBalancesFound": "Балансы не найдены.", "noResults": "Нет результатов", "sendToAnotherAddress": "Отправить на другой адрес", "youWillReceive": "Вы получите", "tonAddressPlaceholder": "TON адрес", "evmAddressPlaceholder": "0x… EVM адрес", "addressDoesntMatch": "Адрес не соответствует сети {{network}}", "checkBeforeTransfer": "Проверьте корректность перед переводом" };
+const transaction = { "enterAmount": "Введите сумму", "transfer": "Перевести", "getQuote": "Получить котировку", "quoting": "Расчет котировки...", "failed": "Ошибка транзакции", "confirm": "Подтвердите транзакцию", "signTransaction": "Подпишите транзакцию в кошельке", "inProgress": "Выполнение...", "checkingBalance": "Проверка баланса...", "insufficientBalance": "Недостаточно средств", "amountTooSmall": "Минимум {{min}}", "amountTooLarge": "Максимум {{max}}", "successTitle": "Успех", "bridged": "Переведено", "transferTitle": "Перевод", "hash": "Хэш", "route": "Маршрут", "estTime": "Время", "slippage": "Проскальзывание", "minimumReceived": "Минимум к получению", "totalFee": "Общая комиссия", "noRouteFound": "Маршрут не найден", "notEnoughGas": "Недостаточно газа", "noRouteFoundForSettings": "Маршрут не найден для текущих настроек.", "tryAdjustSettings": "Попробуйте отключить Gas on Destination или измените сумму/сети.", "quoteError": "Ошибка котировки" };
+const app = { "stargateWidgetName": "Виджет Stargate Bridge", "liveWidget": "Живой виджет", "getStarted": "Начало работы" };
+const settings = { "title": "Настройки", "gasOnDestination": "Газ на назначении", "slippageTolerance": "Толерантность к проскальзыванию", "routePriority": "Приоритет маршрута", "highSlippageWarning": "Высокое проскальзывание", "gasPresets": { "auto": "Авто", "none": "Нет", "medium": "Средний", "max": "Макс" }, "routePresets": { "fastest": "Быстрейший", "cheapest": "Дешевейший", "recommended": "Рекомендуемый" } };
+const ru = {
+  common,
+  wallets,
+  bridge,
+  transaction,
+  app,
+  settings
+};
+const bridgeI18n = i18n.createInstance();
+const resources = {
+  en: {
+    "evaa-bridge": en
+  },
+  ru: {
+    "evaa-bridge": ru
   }
-  n.default = e;
-  return Object.freeze(n);
+};
+bridgeI18n.use(reactI18next.initReactI18next).init({
+  resources,
+  lng: "en",
+  // Will be overridden by defaultLanguage prop
+  fallbackLng: "en",
+  debug: false,
+  // Use a dedicated namespace to avoid conflicts
+  defaultNS: "evaa-bridge",
+  ns: ["evaa-bridge"],
+  interpolation: {
+    escapeValue: false
+    // react already does escaping
+  }
+});
+function BridgeI18nProvider({
+  children,
+  defaultLanguage = "en"
+}) {
+  require$$0.useEffect(() => {
+    if (bridgeI18n.language !== defaultLanguage) {
+      bridgeI18n.changeLanguage(defaultLanguage);
+    }
+  }, [defaultLanguage]);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactI18next.I18nextProvider, { i18n: bridgeI18n, children });
+}
+function useBridgeTranslation() {
+  return reactI18next.useTranslation("evaa-bridge", { i18n: bridgeI18n });
 }
-const require$$0__namespace = /* @__PURE__ */ _interopNamespaceDefault(require$$0);
-const DialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DialogPrimitive);
-const TooltipPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TooltipPrimitive);
-const SwitchPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SwitchPrimitive);
-const AccordionPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AccordionPrimitive);
 const norm = (s) => (s ?? "").toUpperCase().replace(/₮/g, "T").replace(/[^A-Z0-9]/g, "");
 const POPULAR_ORDER = [
   "USDT",
@@ -523,147 +568,6 @@ const ExitIcon = (props) => {
     }
   );
 };
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-const buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center rounded-full text-lg justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-13 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-9 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-15 font-semibold rounded-full text-lg px-6 has-[>svg]:px-4",
-        icon: "size-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-const Button = require$$0__namespace.forwardRef(
-  ({ className, variant, size, asChild = false, type, ...props }, ref) => {
-    const Comp = asChild ? reactSlot.Slot : "button";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Comp,
-      {
-        ref,
-        "data-slot": "button",
-        ...!asChild ? { type: type ?? "button" } : null,
-        className: cn(buttonVariants({ variant, size }), className),
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-function Dialog({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
-}
-function DialogPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Overlay,
-    {
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      DialogPrimitive__namespace.Content,
-      {
-        "data-slot": "dialog-content",
-        className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
-            DialogPrimitive__namespace.Close,
-            {
-              "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "dialog-header",
-      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
-      ...props
-    }
-  );
-}
-function DialogTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn("text-lg leading-none font-semibold", className),
-      ...props
-    }
-  );
-}
-function DialogDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Description,
-    {
-      "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
-      ...props
-    }
-  );
-}
 const TipIcon = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -720,57 +624,11 @@ const TipIcon = (props) => {
     }
   );
 };
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TooltipPrimitive__namespace.Provider,
-    {
-      "data-slot": "tooltip-provider",
-      delayDuration,
-      ...props
-    }
-  );
-}
-function Tooltip({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Root, { "data-slot": "tooltip", ...props }) });
-}
-function TooltipTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { "data-slot": "tooltip-trigger", ...props });
-}
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    TooltipPrimitive__namespace.Content,
-    {
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn(
-        "bg-primary text-primary-foreground text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
-      ]
-    }
-  ) });
-}
 const Tip = (props) => {
   const { children, text } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: text }) })
+  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { children }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: text }) })
   ] });
 };
 async function getChains() {
@@ -1038,7 +896,7 @@ const routePresets = [
   RoutePriority.RECOMMENDED
 ];
 const SettingModal = ({ isOpen, onClose }) => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const { toChain } = useChainsStore();
   const { tokens } = useTokensStore();
   const {
@@ -1070,8 +928,8 @@ const SettingModal = ({ isOpen, onClose }) => {
   );
   const activeBtn = "bg-settings-active hover:bg-settings-active/80 text-settings-active-foreground";
   const notActiveBtn = "bg-settings-button hover:bg-settings-button/80 text-settings-button-foreground";
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: t("settings.title", { defaultValue: "Settings" }) }) }),
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: t("settings.title", { defaultValue: "Settings" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
@@ -1096,11 +954,11 @@ const SettingModal = ({ isOpen, onClose }) => {
             ) }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5", children: gasPresets.map((g) => /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
+            button.Button,
             {
               type: "button",
               onClick: () => setGasPreset(g),
-              className: cn(
+              className: utils.cn(
                 `cursor-pointer rounded-6 px-2 py-2.5 h-7 text-xs font-semibold leading-2 transition`,
                 gasPreset === g ? activeBtn : notActiveBtn
               ),
@@ -1124,14 +982,14 @@ const SettingModal = ({ isOpen, onClose }) => {
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-6", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg text-foreground leading-4.5 font-semibold h-4.5", children: slippagePercent }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: slippagePresets.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
+            button.Button,
             {
               type: "button",
               onClick: () => {
                 const bps = parseFloat(p.replace("%", "")) * 100;
                 setSlippageBps(bps);
               },
-              className: cn(
+              className: utils.cn(
                 `cursor-pointer rounded-6 px-2 py-2.5 h-7 text-xs font-semibold leading-2 transition`,
                 activeSlippagePreset === p ? activeBtn : notActiveBtn
               ),
@@ -1148,11 +1006,11 @@ const SettingModal = ({ isOpen, onClose }) => {
           /* @__PURE__ */ jsxRuntime.jsx(Tip, { text: t("settings.routePriority"), children: /* @__PURE__ */ jsxRuntime.jsx(TipIcon, { className: "size-4 text-muted-foreground" }) })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-2", children: routePresets.map((r) => /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
+          button.Button,
           {
             type: "button",
             onClick: () => setRoutePriority(r),
-            className: cn(
+            className: utils.cn(
               `cursor-pointer rounded-6 px-2 py-2.5 h-7 text-xs font-semibold leading-2 transition`,
               routePriority === r ? activeBtn : notActiveBtn
             ),
@@ -1164,21 +1022,6 @@ const SettingModal = ({ isOpen, onClose }) => {
     ] })
   ] }) });
 };
-function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      type,
-      "data-slot": "input",
-      className: cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      ),
-      ...props
-    }
-  );
-}
 function useAddresses() {
   const { fromChain, toChain } = useChainsStore();
   const { address: evmAddress } = wagmi.useAccount();
@@ -1570,9 +1413,6 @@ function useTokenSelectData(items) {
     hasAnyWallet
   };
 }
-function Skeleton({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse rounded-md bg-[#999]", className) });
-}
 const TokenRow = ({
   symbol,
   name,
@@ -1584,7 +1424,7 @@ const TokenRow = ({
   onPick
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Button,
+    button.Button,
     {
       onClick: onPick,
       className: `w-full h-12.5 rounded-md cursor-pointer bg-transparent flex shadow-none items-center justify-between gap-2.5 px-5 py-2.5 hover:bg-modal-item-hover transition-[300] ${isSelected ? "border border-ring" : ""}`,
@@ -1604,8 +1444,8 @@ const TokenRow = ({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right space-y-1", children: isBalanceLoading && hasAnyWallet ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-5 w-16 rounded-md" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-3 w-12 rounded-md" })
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-16 rounded-md" }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-12 rounded-md" })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-extrabold text-foreground text-lg leading-4 truncate", children: hasAnyWallet ? formatBalance(balance) : "—" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs leading-3 text-muted-foreground", children: hasAnyWallet && balance > 0 && usdValue > 0 ? formatUsd(usdValue) : "—" })
@@ -1683,7 +1523,7 @@ const TokenSelectModal = ({
   items,
   onChangeAsset
 }) => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const {
     query,
     setQuery,
@@ -1761,8 +1601,8 @@ const TokenSelectModal = ({
     }
     return out;
   }, [effectiveTab, myTokens, groupedTokens, t]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "!max-h-[80dvh] overflow-auto", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: t("bridge.selectToken") }) }),
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "!max-h-[80dvh] overflow-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: t("bridge.selectToken") }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -1770,7 +1610,7 @@ const TokenSelectModal = ({
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "size-6 text-input-icon" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
+            input.Input,
             {
               placeholder: t("bridge.searchToken"),
               className: "w-full outline-none leading-0 p-0 h-6 text-base text-input-text placeholder:text-input-placeholder bg-none dark:bg-transparent",
@@ -1785,7 +1625,7 @@ const TokenSelectModal = ({
     ),
     hasAnyWallet() && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
+        button.Button,
         {
           variant: tab === "my" ? "default" : "outline",
           onClick: () => setTab("my"),
@@ -1794,7 +1634,7 @@ const TokenSelectModal = ({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
+        button.Button,
         {
           variant: tab === "all" ? "default" : "outline",
           onClick: () => setTab("all"),
@@ -1895,7 +1735,7 @@ const RefreshButton = () => {
     refresh();
   }, [refresh]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Button,
+    button.Button,
     {
       onClick: handleRefresh,
       disabled: spinning,
@@ -1917,12 +1757,12 @@ const SelectTokenButton = ({
   onClick,
   token
 }) => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const label = require$$0.useMemo(() => {
     return token?.symbol ?? t("bridge.selectToken");
   }, [token, t]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Button,
+    button.Button,
     {
       onClick,
       size: "sm",
@@ -1946,77 +1786,8 @@ const SelectTokenButton = ({
     }
   );
 };
-function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card",
-      className: cn(
-        "bg-card text-card-foreground flex flex-col gap-4 rounded-lg border py-4 shadow-sm",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-header",
-      className: cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-4",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-title",
-      className: cn("leading-none font-semibold", className),
-      ...props
-    }
-  );
-}
-function CardAction({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-action",
-      className: cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn("px-4", className),
-      ...props
-    }
-  );
-}
-function CardFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-footer",
-      className: cn("flex items-center px-4 [.border-t]:pt-4", className),
-      ...props
-    }
-  );
-}
 const FormHeaderComponent = () => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const { isOpen, onClose, onOpen } = useModal();
   const {
     isOpen: isOpenSettings,
@@ -2031,14 +1802,14 @@ const FormHeaderComponent = () => {
     const sum = selectedAssetSymbol.toUpperCase();
     return assets.find((a) => a.symbol.toUpperCase() === sum) ?? assets[0];
   }, [assets, selectedAssetSymbol]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-y-0 flex justify-between items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "flex items-center gap-2.5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(card.CardHeader, { className: "gap-y-0 flex justify-between items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(card.CardTitle, { className: "flex items-center gap-2.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-normal leading-3.5 text-muted-foreground", children: t("bridge.selectToken") }),
       /* @__PURE__ */ jsxRuntime.jsx(SelectTokenButton, { token: current, onClick: onOpen })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(CardAction, { className: "flex items-center gap-2.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(card.CardAction, { className: "flex items-center gap-2.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx(RefreshButton, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onOpenSettings, size: "sm", variant: "secondary", children: /* @__PURE__ */ jsxRuntime.jsx(BoltIcon, { stroke: "currentColor" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: onOpenSettings, size: "sm", variant: "secondary", children: /* @__PURE__ */ jsxRuntime.jsx(BoltIcon, { stroke: "currentColor" }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       TokenSelectModal,
@@ -2134,7 +1905,7 @@ function useBridgeQuote() {
     setNoRoute,
     resetWithIdle
   } = useBridgeQuoteStore();
-  const input = inputAmount;
+  const input2 = inputAmount;
   const srcTokenOnFrom = require$$0.useMemo(
     () => resolveTokenOnChainFromMatrix$2(
       assetMatrix,
@@ -2153,11 +1924,11 @@ function useBridgeQuote() {
   );
   const [loading, setLoading] = require$$0.useState(false);
   require$$0.useEffect(() => {
-    if (!input || input === "") {
+    if (!input2 || input2 === "") {
       setLoading(false);
       resetWithIdle();
     }
-  }, [input, resetWithIdle]);
+  }, [input2, resetWithIdle]);
   require$$0.useEffect(() => {
     const resetUi = (withError) => {
       setLoading(false);
@@ -2165,7 +1936,7 @@ function useBridgeQuote() {
         resetWithIdle();
       }
     };
-    if (!input || Number(input) <= 0 || !fromChain?.chainKey || !toChain?.chainKey || !srcTokenOnFrom || !dstTokenOnTo || !srcAddress || !dstAddress) {
+    if (!input2 || Number(input2) <= 0 || !fromChain?.chainKey || !toChain?.chainKey || !srcTokenOnFrom || !dstTokenOnTo || !srcAddress || !dstAddress) {
       resetUi();
       return;
     }
@@ -2191,7 +1962,7 @@ function useBridgeQuote() {
             return;
           }
         }
-        const srcAmountLD = toLD(input, srcTokenOnFrom.decimals);
+        const srcAmountLD = toLD(input2, srcTokenOnFrom.decimals);
         const srcAddrApi = addrForApi(fromChain.chainKey, srcAddress);
         const dstAddrApi = addrForApi(toChain.chainKey, dstAddress);
         const dstNativeAmount = getDstNativeAmount(toChain.chainKey);
@@ -2236,7 +2007,7 @@ function useBridgeQuote() {
       cancelled = true;
     };
   }, [
-    input,
+    input2,
     fromChain?.chainKey,
     toChain?.chainKey,
     srcTokenOnFrom,
@@ -2472,13 +2243,13 @@ const SwapButton = () => {
     }, 300);
   }, [canSwap, isSwapping, swapModel.actions]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
-    Button,
+    button.Button,
     {
       onClick: handleSwap,
       disabled: !canSwap || isSwapping,
       variant: "secondary",
       size: "sm",
-      className: cn(
+      className: utils.cn(
         "absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2",
         !canSwap || isSwapping ? "opacity-50 cursor-not-allowed" : "hover:scale-110"
       ),
@@ -2499,7 +2270,7 @@ const WalletBalance = (props) => {
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 items-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(WalletIcon, { className: "text-muted-foreground" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-16 rounded-md" })
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-16 rounded-md" })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 items-center", children: [
@@ -2521,12 +2292,12 @@ const SelectNetworkButton = ({
   onClick,
   network
 }) => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const label = require$$0.useMemo(() => {
     return network?.name ?? t("bridge.selectNetwork");
   }, [network, t]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Button,
+    button.Button,
     {
       onClick,
       size: "sm",
@@ -2587,10 +2358,10 @@ const CurrencyInput = require$$0.forwardRef(
       [max, onAmountChange]
     );
     if (showSkeleton && readOnly) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: cn("h-8 w-1/3 rounded-md", className) });
+      return /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: utils.cn("h-8 w-1/3 rounded-md", className) });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      Input,
+      input.Input,
       {
         ref,
         value: inputVal,
@@ -2600,7 +2371,7 @@ const CurrencyInput = require$$0.forwardRef(
         inputMode: "decimal",
         pattern: "[0-9]*[.,]?[0-9]*",
         readOnly,
-        className: cn(
+        className: utils.cn(
           "text-[32px] h-8.5 font-medium leading-8.5 rounded-none text-end bg-transparent dark:bg-transparent text-foreground shadow-none border-none outline-none ring-0 focus:outline-none",
           className
         ),
@@ -2618,7 +2389,7 @@ const ChainSelectModal = ({
   allowedItems,
   onChangeChain
 }) => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const [query, setQuery] = require$$0.useState("");
   const [isFocused, setIsFocused] = require$$0.useState(false);
   const { setFromChain, chains, fromChain, toChain } = useChainsStore();
@@ -2682,7 +2453,7 @@ const ChainSelectModal = ({
   const renderChainItem = (chain, willChangeSrc) => {
     const isSelected = fromChain?.chainKey === chain.chainKey || toChain?.chainKey === chain.chainKey;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
+      button.Button,
       {
         onClick: () => onChainPick(chain, willChangeSrc),
         className: `w-full cursor-pointer flex shadow-none items-center justify-between gap-2.5 px-5 py-3.5 h-12.5 font-extrabold capitalize hover:bg-muted bg-transparent rounded-12 transition-[300] ${isSelected ? "border border-ring" : ""}`,
@@ -2701,8 +2472,8 @@ const ChainSelectModal = ({
       chain.chainKey
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "!max-h-[80dvh] overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: t("bridge.selectNetwork") }) }),
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "!max-h-[80dvh] overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: t("bridge.selectNetwork") }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -2710,7 +2481,7 @@ const ChainSelectModal = ({
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "size-6 text-muted-foreground" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
+            input.Input,
             {
               placeholder: t("bridge.searchDestinationChain"),
               className: "w-full outline-none leading-0 p-0 h-6 text-base text-foreground placeholder:text-muted-foreground bg-none dark:bg-transparent",
@@ -2763,7 +2534,7 @@ const WalletButton = ({
   wallet,
   addressType
 }) => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const { onOpen } = useWalletSelectModal();
   const { chainRegistry } = useChainStrategies();
   const walletType = mapWalletToType(wallet);
@@ -2788,7 +2559,7 @@ const WalletButton = ({
   const isButtonDisabled = (wallet === "metamask" || wallet === "tronlink") && !isInitialized || isConnecting;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex flex-col items-start gap-1", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
+      button.Button,
       {
         type: "button",
         onClick: handleClick,
@@ -2865,7 +2636,7 @@ const SwapSection = ({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn(
+        className: utils.cn(
           "p-4 flex flex-col gap-4 transition-colors bg-muted",
           isSource && isFocused ? "bg-accent" : "",
           className
@@ -2913,7 +2684,7 @@ const SwapSection = ({
                 addressType: isSource ? "src" : "dst"
               }
             ),
-            isUsdLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-12 rounded-md" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "leading-4.5 text-sm font-medium text-muted-foreground", children: computedFiat })
+            isUsdLoading ? /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-12 rounded-md" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "leading-4.5 text-sm font-medium text-muted-foreground", children: computedFiat })
           ] })
         ]
       }
@@ -2930,31 +2701,6 @@ const SwapSection = ({
     )
   ] });
 };
-function Switch({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SwitchPrimitive__namespace.Root,
-    {
-      "data-slot": "switch",
-      className: cn(
-        "peer data-[state=checked]:bg-[#0095F9] data-[state=unchecked]:bg-[#CACFD3] focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        SwitchPrimitive__namespace.Thumb,
-        {
-          "data-slot": "switch-thumb",
-          className: cn(
-            "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-          )
-        }
-      )
-    }
-  );
-}
 const useCustomAddressStore = zustand.create((set) => ({
   customDstAddress: void 0,
   setCustomDstAddress: (address) => set({ customDstAddress: address }),
@@ -2975,7 +2721,7 @@ const tonNormalize = (addr) => {
   }
 };
 const ToggleRow = ({ enabled, onToggle }) => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const { toChain } = useChainsStore();
   const { dstAddress } = useAddresses();
   const { setCustomDstAddress, clearCustomDstAddress } = useCustomAddressStore();
@@ -3035,7 +2781,7 @@ const ToggleRow = ({ enabled, onToggle }) => {
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-4.5 font-medium text-muted-foreground", children: t("bridge.sendToAnotherAddress") }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Switch,
+        _switch.Switch,
         {
           className: "data-[state=unchecked]:bg-switch-inactive data-[state=checked]:bg-switch-active",
           "aria-pressed": enabled,
@@ -3059,7 +2805,7 @@ const ToggleRow = ({ enabled, onToggle }) => {
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  Input,
+                  input.Input,
                   {
                     className: "p-0 h-auto text-base leading-5 font-semibold w-full bg-transparent dark:bg-transparent placeholder:text-input-placeholder text-input-text border-none",
                     placeholder: toChain?.chainKey === "ton" ? t("bridge.tonAddressPlaceholder") : t("bridge.evmAddressPlaceholder"),
@@ -3075,7 +2821,7 @@ const ToggleRow = ({ enabled, onToggle }) => {
                 }) }) })
               ] }),
               !value ? /* @__PURE__ */ jsxRuntime.jsx(
-                Button,
+                button.Button,
                 {
                   variant: "default",
                   className: "self-center py-2 h-8.5 px-3 hover:bg-input-button bg-input-button text-input-button-foreground text-sm leading-4.5 font-semibold uppercase !rounded-40",
@@ -3083,7 +2829,7 @@ const ToggleRow = ({ enabled, onToggle }) => {
                   children: t("common.paste")
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx(
-                Button,
+                button.Button,
                 {
                   variant: "ghost",
                   className: "h-5 w-5 self-start\n                    bg-input-x-bg hover:bg-input-x-bg \n                    p-0.5 m-0 rounded-full\n                    border-0 shadow-none\n                    focus:outline-none focus:ring-0 has-[>svg]:px-0",
@@ -3099,60 +2845,6 @@ const ToggleRow = ({ enabled, onToggle }) => {
     ) })
   ] });
 };
-function Accordion({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { "data-slot": "accordion", ...props });
-}
-function AccordionItem({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AccordionPrimitive__namespace.Item,
-    {
-      "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
-      ...props
-    }
-  );
-}
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
-    AccordionPrimitive__namespace.Trigger,
-    {
-      "data-slot": "accordion-trigger",
-      className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0 transition-transform duration-200" })
-      ]
-    }
-  ) });
-}
-function AccordionContent({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AccordionPrimitive__namespace.Content,
-    {
-      "data-slot": "accordion-content",
-      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-0 pb-4", className), children })
-    }
-  );
-}
 function getQuoteAmounts(quote, srcToken, dstToken) {
   if (!quote || !srcToken || !dstToken) {
     return {
@@ -3255,7 +2947,7 @@ function getRouteDisplayName(route) {
   return route.split(/[/\-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
 }
 const Details = () => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const { selectedAssetSymbol, assetMatrix, tokens } = useTokensStore();
   const { toChain, fromChain, chains } = useChainsStore();
   const { quote, status } = useBridgeQuoteStore();
@@ -3299,19 +2991,19 @@ const Details = () => {
   })();
   const currentSlippageText = formatPercentage(slippageBps);
   const routeText = quote?.route ? getRouteDisplayName(quote.route) : t(`settings.routePresets.${routePriority}`);
-  return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: "item-1", className: "bg-muted rounded-lg", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "w-full gap-1 items-center py-6 px-5 rounded-b-lg data-[state=open]:pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(accordion.Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(accordion.AccordionItem, { value: "item-1", className: "bg-muted rounded-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(accordion.AccordionTrigger, { className: "w-full gap-1 items-center py-6 px-5 rounded-b-lg data-[state=open]:pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-normal text-priority leading-3.5", children: t("bridge.youWillReceive", { defaultValue: "You will receive" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-transparent hover:bg-transparent shadow-none h-4 p-0 px-0 py-0 flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(TokenSymbol, { symbol, className: "w-4 h-4", alt: "token" }),
-        isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-24 rounded-md" }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold leading-3.5 text-foreground", children: [
+        isLoading ? /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24 rounded-md" }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold leading-3.5 text-foreground", children: [
           receiveText,
           " ",
           symbol
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(AccordionContent, { className: "px-5 flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(accordion.AccordionContent, { className: "px-5 flex flex-col gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         DetailsRow,
         {
@@ -3360,7 +3052,7 @@ const DetailsRow = ({
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-priority font-normal", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(Tip, { text: label, children: /* @__PURE__ */ jsxRuntime.jsx(TipIcon, { className: "size-4 text-receive-icon" }) })
   ] }),
-  isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-16 rounded-md" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground text-sm", children: value ?? "—" })
+  isLoading ? /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-16 rounded-md" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground text-sm", children: value ?? "—" })
 ] });
 const useTransactionStore = zustand.create((set, get) => ({
   current: void 0,
@@ -3901,7 +3593,7 @@ function useSilentValidations(amountString) {
   return validationResult;
 }
 const SubmitButton = () => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const { chainRegistry } = useChainStrategies();
   const { srcAddress, dstAddress } = useAddresses();
   const { quote, status, inputAmount, noRoute } = useBridgeQuoteStore();
@@ -3996,13 +3688,22 @@ const SubmitButton = () => {
     }
   };
   const disabled = isBusy || amountNum <= 0 || status === "loading" || isBalanceLoading || hasInsufficientBalance || hasAmountTooLarge || !gas.hasEnoughGas || noRoute || !isValidForTransfer;
-  return /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleClick, disabled, className: "w-full mt-4", children: label });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    button.Button,
+    {
+      onClick: handleClick,
+      disabled,
+      size: "lg",
+      className: "w-full mt-4",
+      children: label
+    }
+  );
 };
 function short(addr) {
   return addr.slice(0, 4) + "…" + addr.slice(-4);
 }
 const WalletSelectModal = () => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const { isOpen, onClose } = useWalletSelectModal();
   const { connect, connectors, isPending } = wagmi.useConnect();
   const { chainRegistry } = useChainStrategies();
@@ -4101,17 +3802,17 @@ const WalletSelectModal = () => {
       console.error("Failed to connect wallet:", error);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: t("wallets.chooseWallet") }),
-      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: t("wallets.oneWalletPerEnv") })
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: t("wallets.chooseWallet") }),
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: t("wallets.oneWalletPerEnv") })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
       connectedWallets.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 font-semibold text-muted-foreground uppercase", children: t("wallets.connected") }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: connectedWallets.map((wallet) => {
           const IconComponent = wallet.icon;
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-5", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { className: "w-full cursor-pointer bg-transparent flex shadow-none items-center justify-between gap-2.5 px-5 py-2.5 hover:bg-muted h-auto rounded-12 transition-[300]", children: [
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-5", children: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { className: "w-full cursor-pointer bg-transparent flex shadow-none items-center justify-between gap-2.5 px-5 py-2.5 hover:bg-muted h-auto rounded-12 transition-[300]", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7.5 h-7.5 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "size-7.5" }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start min-w-0", children: [
@@ -4140,7 +3841,7 @@ const WalletSelectModal = () => {
           const isEvmConnector = category.title === t("wallets.evmWallets");
           const connector = isEvmConnector ? connectors.find((c) => c.id === wallet.id) : null;
           return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
+            button.Button,
             {
               type: "button",
               onClick: () => {
@@ -4227,7 +3928,7 @@ const TransactionProgressVector = (props) => {
   ] });
 };
 const ProgressStep = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "flex flex-col border-none h-full overflow-hidden bg-background rounded-none md:rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex relative flex-col gap-4 py-10 px-8 flex-1 items-center justify-start text-center noise bg-background", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(card.Card, { className: "flex flex-col border-none h-full overflow-hidden bg-background rounded-none md:rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs(card.CardContent, { className: "flex relative flex-col gap-4 py-10 px-8 flex-1 items-center justify-start text-center noise bg-background", children: [
     /* @__PURE__ */ jsxRuntime.jsx(TransactionProgressVector, { className: "progress-rocket" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "on-circle on-circle-progress-small under-noise" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "on-circle on-circle-progress-big under-noise" }),
@@ -4239,7 +3940,7 @@ const ProgressStep = () => {
       /* @__PURE__ */ jsxRuntime.jsx("span", {}),
       /* @__PURE__ */ jsxRuntime.jsx("span", {})
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-display font-black relative z-10", children: i18next.t("transaction.inProgress") }),
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-display font-black relative z-10", children: i18n.t("transaction.inProgress") }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mt-5 z-10", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute dot-vertical h-full left-5 top-0 bottom-0 z-0" }) })
   ] }) });
 };
@@ -4491,15 +4192,15 @@ const TransactionFailedVector = (props) => {
 };
 const FailedStep = () => {
   const { current, reset } = useTransactionStore();
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "flex flex-col h-full border-none overflow-hidden bg-background rounded-none md:rounded-lg", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex flex-col relative gap-4 pt-10 px-8 flex-1 items-center justify-start text-center noise noise", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(card.Card, { className: "flex flex-col h-full border-none overflow-hidden bg-background rounded-none md:rounded-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(card.CardContent, { className: "flex flex-col relative gap-4 pt-10 px-8 flex-1 items-center justify-start text-center noise noise", children: [
       /* @__PURE__ */ jsxRuntime.jsx(TransactionFailedVector, {}),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "on-circle on-circle-failed-small under-noise" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "on-circle on-circle-failed-big under-noise" }),
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-display font-black relative z-10", children: i18next.t("transaction.failed") }),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-display font-black relative z-10", children: i18n.t("transaction.failed") }),
       current?.error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full space-y-2 mt-6 relative z-10", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: current.error }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { className: "flex-col gap-3 pb-10 px-8", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "w-full", onClick: reset, children: i18next.t("common.close") }) })
+    /* @__PURE__ */ jsxRuntime.jsx(card.CardFooter, { className: "flex-col gap-3 pb-10 px-8", children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", className: "w-full", onClick: reset, children: i18n.t("common.close") }) })
   ] });
 };
 const TransactionSuccessVector = (props) => {
@@ -5861,7 +5562,7 @@ var fireworksExports = requireFireworks();
 const Fireworks = /* @__PURE__ */ getDefaultExportFromCjs(fireworksExports);
 const SuccessStep = () => {
   const { current, reset } = useTransactionStore();
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const metadata = current?.metadata;
   const srcTxHash = current?.srcTxHash;
   const handleCopyHash = () => {
@@ -5870,8 +5571,8 @@ const SuccessStep = () => {
       sonner.toast.success("Hash copied to clipboard");
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "flex flex-col h-full border-none relative overflow-hidden bg-background rounded-none md:rounded-lg min-h-[540px]", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex flex-col gap-4 pt-10 px-8 flex-1 justify-start items-center text-center noise bg-background", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(card.Card, { className: "flex flex-col h-full border-none relative overflow-hidden bg-background rounded-none md:rounded-lg min-h-[540px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(card.CardContent, { className: "flex flex-col gap-4 pt-10 px-8 flex-1 justify-start items-center text-center noise bg-background", children: [
       /* @__PURE__ */ jsxRuntime.jsx(TransactionSuccessVector, {}),
       /* @__PURE__ */ jsxRuntime.jsx(
         Fireworks,
@@ -5935,7 +5636,7 @@ const SuccessStep = () => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { className: "pb-10 px-8", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: reset, className: "w-full", children: t("done") }) })
+    /* @__PURE__ */ jsxRuntime.jsx(card.CardFooter, { className: "pb-10 px-8", children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: reset, className: "w-full", children: t("done") }) })
   ] });
 };
 const TransactionConfirmVector = (props) => {
@@ -6080,9 +5781,9 @@ const useCountdown = (initialSeconds) => {
   };
 };
 const ConfirmStep = () => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const { formatTime } = useCountdown(90);
-  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "flex flex-col border-none h-full bg-background overflow-hidden rounded-none md:rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex flex-col relative gap-4 py-10 px-8 flex-1 items-center justify-start text-center noise", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(card.Card, { className: "flex flex-col border-none h-full bg-background overflow-hidden rounded-none md:rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs(card.CardContent, { className: "flex flex-col relative gap-4 py-10 px-8 flex-1 items-center justify-start text-center noise", children: [
     /* @__PURE__ */ jsxRuntime.jsx(TransactionConfirmVector, {}),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "on-circle on-circle-confirm-small under-noise" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "on-circle on-circle-confirm-big under-noise" }),
@@ -6108,8 +5809,8 @@ const TransactionManager = () => {
   if (status === "completed") {
     step = /* @__PURE__ */ jsxRuntime.jsx(SuccessStep, {});
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: true, onOpenChange: () => {
-  }, children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { showCloseButton: false, className: "p-0 gap-0 border-none max-w-[calc(100%-2rem)] sm:max-w-md", children: step }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: true, onOpenChange: () => {
+  }, children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogContent, { showCloseButton: false, className: "p-0 gap-0 border-none max-w-[calc(100%-2rem)] sm:max-w-md", children: step }) });
 };
 const useTokensRequest = () => {
   const { setTokens, setSelectedToken, setSelectedAssetSymbol } = useTokensStore();
@@ -7055,12 +6756,12 @@ class TonChainStrategy {
           payload: msg.payload
         })
       );
-      const transaction = {
+      const transaction2 = {
         validUntil: Math.floor(Date.now() / 1e3) + TON_CONFIG.validUntil,
         messages: tonMessages
       };
       const result = await this.config.tonConnectUI.sendTransaction(
-        transaction
+        transaction2
       );
       return {
         chainKey: "ton",
@@ -7649,8 +7350,8 @@ class TronChainStrategy {
         shift += 7;
       }
       const dataBytes = bytes.slice(i, i + len);
-      const input = "0x" + Array.from(dataBytes).map((b) => b.toString(16).padStart(2, "0")).join("");
-      return { contractAddress, input, callValue };
+      const input2 = "0x" + Array.from(dataBytes).map((b) => b.toString(16).padStart(2, "0")).join("");
+      return { contractAddress, input: input2, callValue };
     } catch {
       return null;
     }
@@ -7879,7 +7580,7 @@ const EvaaBridgeWithProviders = (props) => {
   require$$0.useEffect(() => {
     setTronConnected(!!tronConnected);
   }, [tronConnected, setTronConnected]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(BridgeI18nProvider, { defaultLanguage: props.defaultLanguage, children: /* @__PURE__ */ jsxRuntime.jsx(
     ChainStrategyProvider,
     {
       evmWallet: {
@@ -7904,7 +7605,7 @@ const EvaaBridgeWithProviders = (props) => {
       tonApiKey: props.tonApiKey,
       children: /* @__PURE__ */ jsxRuntime.jsx(EvaaBridgeContent, { ...props })
     }
-  );
+  ) });
 };
 const EvaaBridgeContent = ({
   className,
@@ -7912,7 +7613,7 @@ const EvaaBridgeContent = ({
   onAmountChange,
   onChainChange
 } = {}) => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   useTokensRequest();
   useChainsRequest();
   const [sendToAnother, setSendToAnother] = require$$0.useState(false);
@@ -8005,15 +7706,15 @@ const EvaaBridgeContent = ({
   }, [chains, assetMatrix, allowedFromChains]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
-      Card,
+      card.Card,
       {
-        className: cn(
+        className: utils.cn(
           "max-w-md w-full mx-auto flex flex-col relative",
           className
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(FormHeader, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-[1px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(card.CardContent, { className: "space-y-[1px]", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               SwapSection,
               {
@@ -8052,7 +7753,7 @@ const EvaaBridgeContent = ({
             ),
             /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, {})
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(Details, {}) })
+          /* @__PURE__ */ jsxRuntime.jsx(card.CardFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(Details, {}) })
         ]
       }
     ),