@rash2x/bridge-widget 0.1.12 → 0.1.13

package/README.md

@@ -99,10 +99,11 @@ function App() {
 }
 ```
 
-### 2. With Event Handlers
+### 2. With Event Handlers and Language
 
 ```tsx
 <EvaaBridge
+  defaultLanguage="ru" // Set default language (en, ru)
   onSwapSuccess={(data) => {
     console.log('Swap completed:', data);
   }}
@@ -128,7 +129,9 @@ function App() {
 | Prop | Type | Description |
 |------|------|-------------|
 | `className` | `string` | Optional CSS class for custom styling |
-| `theme` | `'light' \| 'dark'` | Theme mode |
+| `defaultLanguage` | `string` | Language for the widget UI (default: `'en'`). Supported: `'en'`, `'ru'` |
+| `tonClient` | `TonClient` | Optional TON client instance |
+| `tonApiKey` | `string` | Optional TON API key |
 | `onInitialized` | `() => void` | Callback when bridge is initialized |
 | `onSwapStart` | `(data: SwapStartData) => void` | Callback when swap starts |
 | `onSwapSuccess` | `(data: SwapSuccessData) => void` | Callback when swap succeeds |

package/dist/evaa-bridge.cjs

@@ -25,8 +25,9 @@ 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 button = require("@/components/ui/button");
 const dialog = require("@/components/ui/dialog");
@@ -45,12 +46,76 @@ const _switch = require("@/components/ui/switch");
 const lucideReact = require("lucide-react");
 const framerMotion = require("framer-motion");
 const accordion = require("@/components/ui/accordion");
-const i18next = require("i18next");
 const sonner = require("sonner");
 const ethers = require("ethers");
 const viem = require("viem");
 const ton = require("@ton/ton");
 const tronwalletAdapters = require("@tronweb3/tronwallet-adapters");
+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
+  }
+};
+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 norm = (s) => (s ?? "").toUpperCase().replace(/₮/g, "T").replace(/[^A-Z0-9]/g, "");
 const POPULAR_ORDER = [
   "USDT",
@@ -831,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 {
@@ -1458,7 +1523,7 @@ const TokenSelectModal = ({
   items,
   onChangeAsset
 }) => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const {
     query,
     setQuery,
@@ -1692,7 +1757,7 @@ const SelectTokenButton = ({
   onClick,
   token
 }) => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const label = require$$0.useMemo(() => {
     return token?.symbol ?? t("bridge.selectToken");
   }, [token, t]);
@@ -1722,7 +1787,7 @@ const SelectTokenButton = ({
   );
 };
 const FormHeaderComponent = () => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const { isOpen, onClose, onOpen } = useModal();
   const {
     isOpen: isOpenSettings,
@@ -2227,7 +2292,7 @@ const SelectNetworkButton = ({
   onClick,
   network
 }) => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const label = require$$0.useMemo(() => {
     return network?.name ?? t("bridge.selectNetwork");
   }, [network, t]);
@@ -2324,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();
@@ -2469,7 +2534,7 @@ const WalletButton = ({
   wallet,
   addressType
 }) => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const { onOpen } = useWalletSelectModal();
   const { chainRegistry } = useChainStrategies();
   const walletType = mapWalletToType(wallet);
@@ -2656,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();
@@ -2882,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();
@@ -3528,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();
@@ -3623,13 +3688,22 @@ const SubmitButton = () => {
     }
   };
   const disabled = isBusy || amountNum <= 0 || status === "loading" || isBalanceLoading || hasInsufficientBalance || hasAmountTooLarge || !gas.hasEnoughGas || noRoute || !isValidForTransfer;
-  return /* @__PURE__ */ jsxRuntime.jsx(button.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();
@@ -3866,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" }) })
   ] }) });
 };
@@ -4123,10 +4197,10 @@ const FailedStep = () => {
       /* @__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(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: 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) => {
@@ -5488,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 = () => {
@@ -5707,7 +5781,7 @@ const useCountdown = (initialSeconds) => {
   };
 };
 const ConfirmStep = () => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   const { formatTime } = useCountdown(90);
   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, {}),
@@ -6682,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",
@@ -7506,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: {
@@ -7531,7 +7605,7 @@ const EvaaBridgeWithProviders = (props) => {
       tonApiKey: props.tonApiKey,
       children: /* @__PURE__ */ jsxRuntime.jsx(EvaaBridgeContent, { ...props })
     }
-  );
+  ) });
 };
 const EvaaBridgeContent = ({
   className,
@@ -7539,7 +7613,7 @@ const EvaaBridgeContent = ({
   onAmountChange,
   onChainChange
 } = {}) => {
-  const { t } = reactI18next.useTranslation();
+  const { t } = useBridgeTranslation();
   useTokensRequest();
   useChainsRequest();
   const [sendToAnother, setSendToAnother] = require$$0.useState(false);