@tonconnect/ui-react 0.0.4 → 0.0.6

package/lib/index.js

@@ -26,7 +26,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import require$$0$2, { createContext as createContext$1, memo as memo$1, useContext as useContext$1, useEffect, useState } from "react";
+import require$$0$2, { createContext as createContext$1, memo, useContext as useContext$1, useEffect, useState } from "react";
 var commonjsGlobal$1 = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getAugmentedNamespace$1(n2) {
   var f = n2.default;
@@ -4218,7 +4218,8 @@ var __awaiter$3 = globalThis && globalThis.__awaiter || function(thisArg, _argum
   });
 };
 class InjectedProvider {
-  constructor(injectedWalletKey) {
+  constructor(storage, injectedWalletKey) {
+    this.injectedWalletKey = injectedWalletKey;
     this.type = "injected";
     this.unsubscribeCallback = null;
     this.listenSubscriptions = false;
@@ -4227,13 +4228,14 @@ class InjectedProvider {
     if (!InjectedProvider.isWindowContainsWallet(window2, injectedWalletKey)) {
       throw new WalletNotInjectedError();
     }
+    this.connectionStorage = new BridgeConnectionStorage(storage);
     this.injectedWallet = window2[injectedWalletKey].tonconnect;
   }
   static fromStorage(storage) {
     return __awaiter$3(this, void 0, void 0, function* () {
       const bridgeConnectionStorage = new BridgeConnectionStorage(storage);
       const connection = yield bridgeConnectionStorage.getInjectedConnection();
-      return new InjectedProvider(connection.jsBridgeKey);
+      return new InjectedProvider(storage, connection.jsBridgeKey);
     });
   }
   static isWalletInjected(injectedWalletKey) {
@@ -4248,23 +4250,8 @@ class InjectedProvider {
   static isWindowContainsWallet(window2, injectedWalletKey) {
     return !!window2 && injectedWalletKey in window2 && typeof window2[injectedWalletKey] === "object" && "tonconnect" in window2[injectedWalletKey];
   }
-  connect(message, auto = false) {
-    this.injectedWallet.connect(PROTOCOL_VERSION, message, auto).then((connectEvent) => {
-      if (connectEvent.event === "connect") {
-        this.makeSubscriptions();
-        this.listenSubscriptions = true;
-      }
-      this.listeners.forEach((listener) => listener(connectEvent));
-    }).catch((e2) => {
-      const connectEventError = {
-        event: "connect_error",
-        payload: {
-          code: 0,
-          message: e2 === null || e2 === void 0 ? void 0 : e2.toString()
-        }
-      };
-      this.listeners.forEach((listener) => listener(connectEventError));
-    });
+  connect(message) {
+    this._connect(PROTOCOL_VERSION, message);
   }
   restoreConnection() {
     return __awaiter$3(this, void 0, void 0, function* () {
@@ -4272,10 +4259,12 @@ class InjectedProvider {
         const connectEvent = yield this.injectedWallet.restoreConnection();
         if (connectEvent.event === "connect") {
           this.makeSubscriptions();
-          this.listenSubscriptions = true;
           this.listeners.forEach((listener) => listener(connectEvent));
+        } else {
+          yield this.connectionStorage.removeConnection();
         }
       } catch (e2) {
+        yield this.connectionStorage.removeConnection();
         console.error(e2);
       }
     });
@@ -4289,7 +4278,7 @@ class InjectedProvider {
   disconnect() {
     this.closeAllListeners();
     this.injectedWallet.disconnect();
-    return Promise.resolve();
+    return this.connectionStorage.removeConnection();
   }
   closeAllListeners() {
     var _a;
@@ -4306,7 +4295,30 @@ class InjectedProvider {
       return this.injectedWallet.send(Object.assign(Object.assign({}, request), { id: "0" }));
     });
   }
+  _connect(protocolVersion, message) {
+    return __awaiter$3(this, void 0, void 0, function* () {
+      try {
+        const connectEvent = yield this.injectedWallet.connect(protocolVersion, message);
+        if (connectEvent.event === "connect") {
+          yield this.updateSession();
+          this.makeSubscriptions();
+        }
+        this.listeners.forEach((listener) => listener(connectEvent));
+      } catch (e2) {
+        console.debug(e2);
+        const connectEventError = {
+          event: "connect_error",
+          payload: {
+            code: 0,
+            message: e2 === null || e2 === void 0 ? void 0 : e2.toString()
+          }
+        };
+        this.listeners.forEach((listener) => listener(connectEventError));
+      }
+    });
+  }
   makeSubscriptions() {
+    this.listenSubscriptions = true;
     this.unsubscribeCallback = this.injectedWallet.listen((e2) => {
       if (this.listenSubscriptions) {
         this.listeners.forEach((listener) => listener(e2));
@@ -4316,6 +4328,12 @@ class InjectedProvider {
       }
     });
   }
+  updateSession() {
+    return this.connectionStorage.storeConnection({
+      type: "injected",
+      jsBridgeKey: this.injectedWalletKey
+    });
+  }
 }
 InjectedProvider.window = getWindow$1();
 var __awaiter$2 = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P2, generator) {
@@ -4400,9 +4418,12 @@ var __awaiter$1 = globalThis && globalThis.__awaiter || function(thisArg, _argum
   });
 };
 class WalletsListManager {
-  constructor() {
+  constructor(walletsListSource) {
     this.walletsListCache = null;
     this.walletsListSource = "https://raw.githubusercontent.com/ton-connect/wallets-list/main/wallets.json";
+    if (walletsListSource) {
+      this.walletsListSource = walletsListSource;
+    }
   }
   getWallets() {
     return __awaiter$1(this, void 0, void 0, function* () {
@@ -4416,11 +4437,11 @@ class WalletsListManager {
   getEmbeddedWallet() {
     return __awaiter$1(this, void 0, void 0, function* () {
       const walletsList = yield this.getWallets();
-      const injectedWallets = walletsList.filter(isWalletInfoInjected);
-      if (injectedWallets.length !== 1) {
+      const embeddedWallets = walletsList.filter((item) => isWalletInfoInjected(item) && item.embedded);
+      if (embeddedWallets.length !== 1) {
         return null;
       }
-      return injectedWallets[0].embedded ? injectedWallets[0] : null;
+      return embeddedWallets[0];
     });
   }
   fetchWalletsList() {
@@ -4543,6 +4564,7 @@ class TonConnect {
       manifestUrl: (options === null || options === void 0 ? void 0 : options.manifestUrl) || getWebPageManifest(),
       storage: (options === null || options === void 0 ? void 0 : options.storage) || new DefaultStorage()
     };
+    this.walletsList = new WalletsListManager(options === null || options === void 0 ? void 0 : options.walletsListSource);
     if (!this.dappSettings.manifestUrl) {
       throw new DappMetadataError("Dapp tonconnect-manifest.json must be specified if window.location.origin is undefined. See more https://github.com/ton-connect/docs/blob/main/requests-responses.md#app-manifest");
     }
@@ -4637,7 +4659,7 @@ class TonConnect {
   createProvider(wallet) {
     let provider;
     if (isWalletConnectionSourceJS(wallet)) {
-      provider = new InjectedProvider(wallet.jsBridgeKey);
+      provider = new InjectedProvider(this.dappSettings.storage, wallet.jsBridgeKey);
     } else {
       provider = new BridgeProvider(this.dappSettings.storage, wallet);
     }
@@ -4720,6 +4742,8 @@ class TonConnect {
   }
 }
 TonConnect.walletsList = new WalletsListManager();
+TonConnect.isWalletInjected = (walletJSKey) => InjectedProvider.isWalletInjected(walletJSKey);
+TonConnect.isInsideWalletBrowser = (walletJSKey) => InjectedProvider.isInsideWalletBrowser(walletJSKey);
 function toUserFriendlyAddress$1(hexAddress) {
   const { wc, hex } = parseHexAddress$1(hexAddress);
   const bounceableTag = 17;
@@ -4828,7 +4852,7 @@ let Updates = null;
 let Effects = null;
 let ExecCount = 0;
 function createRoot(fn, detachedOwner) {
-  const listener = Listener, owner = Owner, unowned = fn.length === 0, root = unowned && true ? UNOWNED : {
+  const listener = Listener, owner = Owner, unowned = fn.length === 0, root = unowned ? UNOWNED : {
     owned: null,
     cleanups: null,
     context: null,
@@ -4924,8 +4948,8 @@ function createResource(pSource, pFetcher, pOptions) {
     runUpdates(() => {
       if (!err)
         setValue(() => v);
-      setError(err);
       setState(err ? "errored" : "ready");
+      setError(err);
       for (const c2 of contexts.keys())
         c2.decrement();
       contexts.clear();
@@ -4964,7 +4988,7 @@ function createResource(pSource, pFetcher, pOptions) {
       refetching
     }));
     if (typeof p2 !== "object" || !(p2 && "then" in p2)) {
-      loadEnd(pr, p2);
+      loadEnd(pr, p2, void 0, lookup2);
       return p2;
     }
     pr = p2;
@@ -4974,7 +4998,7 @@ function createResource(pSource, pFetcher, pOptions) {
       setState(resolved ? "refreshing" : "pending");
       trigger();
     }, false);
-    return p2.then((v) => loadEnd(p2, v, void 0, lookup2), (e2) => loadEnd(p2, void 0, castError(e2)));
+    return p2.then((v) => loadEnd(p2, v, void 0, lookup2), (e2) => loadEnd(p2, void 0, castError(e2), lookup2));
   }
   Object.defineProperties(read, {
     state: {
@@ -5013,11 +5037,13 @@ function batch(fn) {
   return runUpdates(fn, false);
 }
 function untrack(fn) {
-  let result, listener = Listener;
+  const listener = Listener;
   Listener = null;
-  result = fn();
-  Listener = listener;
-  return result;
+  try {
+    return fn();
+  } finally {
+    Listener = listener;
+  }
 }
 function on(deps, fn, options) {
   const isArray = Array.isArray(deps);
@@ -5055,7 +5081,7 @@ function onCleanup(fn) {
 function getListener() {
   return Listener;
 }
-function createContext(defaultValue) {
+function createContext(defaultValue, options) {
   const id = Symbol("context");
   return {
     id,
@@ -5353,7 +5379,7 @@ function resolveChildren(children2) {
   }
   return children2;
 }
-function createProvider(id) {
+function createProvider(id, options) {
   return function provider(props) {
     let res;
     createRenderEffect(() => res = untrack(() => {
@@ -5361,7 +5387,7 @@ function createProvider(id) {
         [id]: props.value
       };
       return children(() => props.children);
-    }));
+    }), void 0);
     return res;
   };
 }
@@ -5473,6 +5499,8 @@ const propTraps = {
     return _.get(property);
   },
   has(_, property) {
+    if (property === $PROXY)
+      return true;
     return _.has(property);
   },
   set: trueFn,
@@ -5493,68 +5521,116 @@ const propTraps = {
   }
 };
 function resolveSource(s2) {
-  return (s2 = typeof s2 === "function" ? s2() : s2) == null ? {} : s2;
+  return !(s2 = typeof s2 === "function" ? s2() : s2) ? {} : s2;
 }
 function mergeProps(...sources) {
-  return new Proxy({
-    get(property) {
-      for (let i2 = sources.length - 1; i2 >= 0; i2--) {
-        const v = resolveSource(sources[i2])[property];
-        if (v !== void 0)
-          return v;
-      }
-    },
-    has(property) {
-      for (let i2 = sources.length - 1; i2 >= 0; i2--) {
-        if (property in resolveSource(sources[i2]))
-          return true;
+  let proxy = false;
+  for (let i2 = 0; i2 < sources.length; i2++) {
+    const s2 = sources[i2];
+    proxy = proxy || !!s2 && $PROXY in s2;
+    sources[i2] = typeof s2 === "function" ? (proxy = true, createMemo(s2)) : s2;
+  }
+  if (proxy) {
+    return new Proxy({
+      get(property) {
+        for (let i2 = sources.length - 1; i2 >= 0; i2--) {
+          const v = resolveSource(sources[i2])[property];
+          if (v !== void 0)
+            return v;
+        }
+      },
+      has(property) {
+        for (let i2 = sources.length - 1; i2 >= 0; i2--) {
+          if (property in resolveSource(sources[i2]))
+            return true;
+        }
+        return false;
+      },
+      keys() {
+        const keys = [];
+        for (let i2 = 0; i2 < sources.length; i2++)
+          keys.push(...Object.keys(resolveSource(sources[i2])));
+        return [...new Set(keys)];
+      }
+    }, propTraps);
+  }
+  const target = {};
+  for (let i2 = sources.length - 1; i2 >= 0; i2--) {
+    if (sources[i2]) {
+      const descriptors = Object.getOwnPropertyDescriptors(sources[i2]);
+      for (const key in descriptors) {
+        if (key in target)
+          continue;
+        Object.defineProperty(target, key, {
+          enumerable: true,
+          get() {
+            for (let i3 = sources.length - 1; i3 >= 0; i3--) {
+              const v = (sources[i3] || {})[key];
+              if (v !== void 0)
+                return v;
+            }
+          }
+        });
       }
-      return false;
-    },
-    keys() {
-      const keys = [];
-      for (let i2 = 0; i2 < sources.length; i2++)
-        keys.push(...Object.keys(resolveSource(sources[i2])));
-      return [...new Set(keys)];
     }
-  }, propTraps);
+  }
+  return target;
 }
 function splitProps(props, ...keys) {
   const blocked = new Set(keys.flat());
+  if ($PROXY in props) {
+    const res = keys.map((k) => {
+      return new Proxy({
+        get(property) {
+          return k.includes(property) ? props[property] : void 0;
+        },
+        has(property) {
+          return k.includes(property) && property in props;
+        },
+        keys() {
+          return k.filter((property) => property in props);
+        }
+      }, propTraps);
+    });
+    res.push(new Proxy({
+      get(property) {
+        return blocked.has(property) ? void 0 : props[property];
+      },
+      has(property) {
+        return blocked.has(property) ? false : property in props;
+      },
+      keys() {
+        return Object.keys(props).filter((k) => !blocked.has(k));
+      }
+    }, propTraps));
+    return res;
+  }
   const descriptors = Object.getOwnPropertyDescriptors(props);
-  const res = keys.map((k) => {
+  keys.push(Object.keys(descriptors).filter((k) => !blocked.has(k)));
+  return keys.map((k) => {
     const clone = {};
     for (let i2 = 0; i2 < k.length; i2++) {
       const key = k[i2];
+      if (!(key in props))
+        continue;
       Object.defineProperty(clone, key, descriptors[key] ? descriptors[key] : {
         get() {
           return props[key];
         },
         set() {
           return true;
-        }
+        },
+        enumerable: true
       });
     }
     return clone;
   });
-  res.push(new Proxy({
-    get(property) {
-      return blocked.has(property) ? void 0 : props[property];
-    },
-    has(property) {
-      return blocked.has(property) ? false : property in props;
-    },
-    keys() {
-      return Object.keys(props).filter((k) => !blocked.has(k));
-    }
-  }, propTraps));
-  return res;
 }
 function For(props) {
   const fallback = "fallback" in props && {
     fallback: () => props.fallback
   };
-  return createMemo(mapArray(() => props.each, props.children, fallback ? fallback : void 0));
+  return createMemo(mapArray(() => props.each, props.children, fallback || void 0));
 }
 function Show(props) {
   let strictEqual = false;
@@ -5571,11 +5647,12 @@ function Show(props) {
       return fn ? untrack(() => child(c2)) : child;
     }
     return props.fallback;
-  });
+  }, void 0, void 0);
 }
 function Switch(props) {
   let strictEqual = false;
   let keyed = false;
+  const equals = (a2, b) => a2[0] === b[0] && (strictEqual ? a2[1] === b[1] : !a2[1] === !b[1]) && a2[2] === b[2];
   const conditions = children(() => props.children), evalConditions = createMemo(() => {
     let conds = conditions();
     if (!Array.isArray(conds))
@@ -5589,7 +5666,7 @@ function Switch(props) {
     }
     return [-1];
   }, void 0, {
-    equals: (a2, b) => a2[0] === b[0] && (strictEqual ? a2[1] === b[1] : !a2[1] === !b[1]) && a2[2] === b[2]
+    equals
   });
   return createMemo(() => {
     const [index, when, cond] = evalConditions();
@@ -5599,7 +5676,7 @@ function Switch(props) {
     const fn = typeof c2 === "function" && c2.length > 0;
     strictEqual = keyed || fn;
     return fn ? untrack(() => c2(when)) : c2;
-  });
+  }, void 0, void 0);
 }
 function Match(props) {
   return props;
@@ -5607,18 +5684,18 @@ function Match(props) {
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
 const Properties = /* @__PURE__ */ new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
 const ChildProperties = /* @__PURE__ */ new Set(["innerHTML", "textContent", "innerText", "children"]);
-const Aliases = {
+const Aliases = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
   className: "class",
   htmlFor: "for"
-};
-const PropAliases = {
+});
+const PropAliases = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
   class: "className",
   formnovalidate: "formNoValidate",
   ismap: "isMap",
   nomodule: "noModule",
   playsinline: "playsInline",
   readonly: "readOnly"
-};
+});
 const DelegatedEvents = /* @__PURE__ */ new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /* @__PURE__ */ new Set([
   "altGlyph",
@@ -5702,11 +5779,6 @@ const SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
-function memo(fn, equals) {
-  return createMemo(fn, void 0, !equals ? {
-    equals
-  } : void 0);
-}
 function reconcileArrays(parentNode, a2, b) {
   let bLength = b.length, aEnd = a2.length, bEnd = bLength, aStart = 0, bStart = 0, after = a2[aEnd - 1].nextSibling, map = null;
   while (aStart < aEnd || bStart < bEnd) {
@@ -5764,12 +5836,12 @@ function reconcileArrays(parentNode, a2, b) {
   }
 }
 const $$EVENTS = "_$DX_DELEGATE";
-function render(code, element, init) {
+function render(code, element, init, options = {}) {
   let disposer;
   createRoot((dispose2) => {
     disposer = dispose2;
     element === document ? code() : insert(element, code(), element.firstChild ? null : void 0, init);
-  });
+  }, options.owner);
   return () => {
     disposer();
     element.textContent = "";
@@ -5866,11 +5938,14 @@ function style(node, value, prev) {
   }
   return prev;
 }
-function spread(node, accessor, isSVG, skipChildren) {
-  if (typeof accessor === "function") {
-    createRenderEffect((current) => spreadExpression(node, accessor(), current, isSVG, skipChildren));
-  } else
-    spreadExpression(node, accessor, void 0, isSVG, skipChildren);
+function spread(node, props = {}, isSVG, skipChildren) {
+  const prevProps = {};
+  if (!skipChildren) {
+    createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
+  }
+  createRenderEffect(() => props.ref && props.ref(node));
+  createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
+  return prevProps;
 }
 function use(fn, element, arg) {
   return untrack(() => fn(element, arg));
@@ -5928,9 +6003,8 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
   if (value === prev)
     return prev;
   if (prop === "ref") {
-    if (!skipRef) {
+    if (!skipRef)
       value(node);
-    }
   } else if (prop.slice(0, 3) === "on:") {
     const e2 = prop.slice(3);
     prev && node.removeEventListener(e2, prev);
@@ -5985,7 +6059,7 @@ function eventHandler(e2) {
     sharedConfig.done = true;
     document.querySelectorAll("[id^=pl-]").forEach((elem) => elem.remove());
   }
-  while (node !== null) {
+  while (node) {
     const handler = node[key];
     if (handler && !node.disabled) {
       const data = node[`${key}Data`];
@@ -5993,18 +6067,9 @@ function eventHandler(e2) {
       if (e2.cancelBubble)
         return;
     }
-    node = node.host && node.host !== node && node.host instanceof Node ? node.host : node.parentNode;
+    node = node._$host || node.parentNode || node.host;
   }
 }
-function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
-  props || (props = {});
-  if (!skipChildren) {
-    createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
-  }
-  createRenderEffect(() => props.ref && props.ref(node));
-  createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
-  return prevProps;
-}
 function insertExpression(parent, value, current, marker, unwrapArray) {
   if (sharedConfig.context && !current)
     current = [...parent.childNodes];
@@ -6118,7 +6183,7 @@ function normalizeIncomingArray(normalized, array, current, unwrap2) {
   }
   return dynamic;
 }
-function appendNodes(parent, array, marker) {
+function appendNodes(parent, array, marker = null) {
   for (let i2 = 0, len = array.length; i2 < len; i2++)
     parent.insertBefore(array[i2], marker);
 }
@@ -6177,10 +6242,11 @@ function Portal(props) {
     const container = createElement(props.isSVG ? "g" : "div", props.isSVG), renderRoot = useShadow && container.attachShadow ? container.attachShadow({
       mode: "open"
     }) : container;
-    Object.defineProperty(container, "host", {
+    Object.defineProperty(container, "_$host", {
       get() {
         return marker.parentNode;
-      }
+      },
+      configurable: true
     });
     insert(renderRoot, renderPortal());
     mount.appendChild(container);
@@ -6483,9 +6549,9 @@ function wrap$1(value, name) {
       for (let i2 = 0, l2 = keys.length; i2 < l2; i2++) {
         const prop = keys[i2];
         if (desc[prop].get) {
-          const get = desc[prop].get.bind(p2);
           Object.defineProperty(value, prop, {
-            get
+            enumerable: desc[prop].enumerable,
+            get: desc[prop].get.bind(p2)
           });
         }
       }
@@ -6541,7 +6607,7 @@ function getDataNodes(target) {
 function getDataNode(nodes, property, value) {
   return nodes[property] || (nodes[property] = createDataNode(value));
 }
-function proxyDescriptor(target, property) {
+function proxyDescriptor$1(target, property) {
   const desc = Reflect.getOwnPropertyDescriptor(target, property);
   if (!desc || desc.get || !desc.configurable || property === $PROXY || property === $NODE || property === $NAME)
     return desc;
@@ -6593,8 +6659,7 @@ const proxyTraps$1 = {
   has(target, property) {
     if (property === $RAW || property === $PROXY || property === $TRACK || property === $NODE || property === "__proto__")
       return true;
-    const tracked = getDataNodes(target)[property];
-    tracked && tracked();
+    this.get(target, property, target);
     return property in target;
   },
   set() {
@@ -6604,16 +6669,15 @@ const proxyTraps$1 = {
     return true;
   },
   ownKeys,
-  getOwnPropertyDescriptor: proxyDescriptor
+  getOwnPropertyDescriptor: proxyDescriptor$1
 };
 function setProperty(state, property, value, deleting = false) {
   if (!deleting && state[property] === value)
     return;
-  const prev = state[property];
-  const len = state.length;
-  if (value === void 0) {
+  const prev = state[property], len = state.length;
+  if (value === void 0)
     delete state[property];
-  } else
+  else
     state[property] = value;
   let nodes = getDataNodes(state), node;
   if (node = getDataNode(nodes, property, prev))
@@ -6709,59 +6773,235 @@ var THEME = /* @__PURE__ */ ((THEME2) => {
   THEME2["LIGHT"] = "LIGHT";
   return THEME2;
 })(THEME || {});
-function hexToRgb(hex) {
-  if (hex[0] === "#") {
-    hex = hex.slice(1);
-  }
-  const bigint = parseInt(hex, 16);
-  const r = bigint >> 16 & 255;
-  const g = bigint >> 8 & 255;
-  const b = bigint & 255;
-  return [r, g, b].join(",");
-}
-const generateLightColors = (accentColor) => ({
-  primary: accentColor,
-  secondary: `rgba(${hexToRgb(accentColor)}, 0.16)`,
-  backgroundPrimary: "#FFFFFF",
-  backgroundSecondary: "#EFF1F3",
-  font: {
-    accent: accentColor,
+const defaultLightColorsSet = {
+  constant: {
+    black: "#000000",
+    white: "#FFFFFF"
+  },
+  connectButton: {
+    background: "#31A6F5",
+    foreground: "#FFFFFF"
+  },
+  accent: "#31A6F5",
+  icon: {
     primary: "#0F0F0F",
     secondary: "#7A8999",
-    third: "#7A8999"
+    tertiary: "#C1CAD2",
+    success: "#29CC6A"
+  },
+  background: {
+    primary: "#FFFFFF",
+    secondary: "#F1F3F5"
+  },
+  text: {
+    primary: "#0F0F0F",
+    secondary: "#7A8999",
+    subhead: "#6A7785"
   }
-});
-const generateDarkColors = (accentColor) => ({
-  primary: accentColor,
-  secondary: accentColor,
-  backgroundPrimary: "#121214",
-  backgroundSecondary: "#18181A",
-  font: {
-    accent: "#E5E5EA",
+};
+const defaultDarkColorsSet = {
+  constant: {
+    black: "#000000",
+    white: "#FFFFFF"
+  },
+  connectButton: {
+    background: "#31A6F5",
+    foreground: "#FFFFFF"
+  },
+  accent: "#E5E5EA",
+  icon: {
+    primary: "#E5E5EA",
+    secondary: "#909099",
+    tertiary: "#434347",
+    success: "#29CC6A"
+  },
+  background: {
+    primary: "#121214",
+    secondary: "#18181A"
+  },
+  text: {
     primary: "#E5E5EA",
     secondary: "#7D7D85",
-    third: "#909099"
+    subhead: "#8C8C93"
   }
-});
-const defaultLightColors = generateLightColors("#31A6F5");
-const defaultDarkColors = generateDarkColors("#262629");
+};
+var isMergeableObject = function isMergeableObject2(value) {
+  return isNonNullObject(value) && !isSpecial(value);
+};
+function isNonNullObject(value) {
+  return !!value && typeof value === "object";
+}
+function isSpecial(value) {
+  var stringValue = Object.prototype.toString.call(value);
+  return stringValue === "[object RegExp]" || stringValue === "[object Date]" || isReactElement(value);
+}
+var canUseSymbol = typeof Symbol === "function" && Symbol.for;
+var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for("react.element") : 60103;
+function isReactElement(value) {
+  return value.$$typeof === REACT_ELEMENT_TYPE;
+}
+function emptyTarget(val) {
+  return Array.isArray(val) ? [] : {};
+}
+function cloneUnlessOtherwiseSpecified(value, options) {
+  return options.clone !== false && options.isMergeableObject(value) ? deepmerge(emptyTarget(value), value, options) : value;
+}
+function defaultArrayMerge(target, source, options) {
+  return target.concat(source).map(function(element) {
+    return cloneUnlessOtherwiseSpecified(element, options);
+  });
+}
+function getMergeFunction(key, options) {
+  if (!options.customMerge) {
+    return deepmerge;
+  }
+  var customMerge = options.customMerge(key);
+  return typeof customMerge === "function" ? customMerge : deepmerge;
+}
+function getEnumerableOwnPropertySymbols(target) {
+  return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(target).filter(function(symbol) {
+    return target.propertyIsEnumerable(symbol);
+  }) : [];
+}
+function getKeys(target) {
+  return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target));
+}
+function propertyIsOnObject(object, property) {
+  try {
+    return property in object;
+  } catch (_) {
+    return false;
+  }
+}
+function propertyIsUnsafe(target, key) {
+  return propertyIsOnObject(target, key) && !(Object.hasOwnProperty.call(target, key) && Object.propertyIsEnumerable.call(target, key));
+}
+function mergeObject(target, source, options) {
+  var destination = {};
+  if (options.isMergeableObject(target)) {
+    getKeys(target).forEach(function(key) {
+      destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
+    });
+  }
+  getKeys(source).forEach(function(key) {
+    if (propertyIsUnsafe(target, key)) {
+      return;
+    }
+    if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
+      destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
+    } else {
+      destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
+    }
+  });
+  return destination;
+}
+function deepmerge(target, source, options) {
+  options = options || {};
+  options.arrayMerge = options.arrayMerge || defaultArrayMerge;
+  options.isMergeableObject = options.isMergeableObject || isMergeableObject;
+  options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
+  var sourceIsArray = Array.isArray(source);
+  var targetIsArray = Array.isArray(target);
+  var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
+  if (!sourceAndTargetTypesMatch) {
+    return cloneUnlessOtherwiseSpecified(source, options);
+  } else if (sourceIsArray) {
+    return options.arrayMerge(target, source, options);
+  } else {
+    return mergeObject(target, source, options);
+  }
+}
+deepmerge.all = function deepmergeAll(array, options) {
+  if (!Array.isArray(array)) {
+    throw new Error("first argument should be an array");
+  }
+  return array.reduce(function(prev, next) {
+    return deepmerge(prev, next, options);
+  }, {});
+};
+var deepmerge_1 = deepmerge;
+var cjs = deepmerge_1;
+/*!
+ * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+function isObject(o2) {
+  return Object.prototype.toString.call(o2) === "[object Object]";
+}
+function isPlainObject(o2) {
+  var ctor, prot;
+  if (isObject(o2) === false)
+    return false;
+  ctor = o2.constructor;
+  if (ctor === void 0)
+    return true;
+  prot = ctor.prototype;
+  if (isObject(prot) === false)
+    return false;
+  if (prot.hasOwnProperty("isPrototypeOf") === false) {
+    return false;
+  }
+  return true;
+}
+function mergeOptions(options, defaultOptions) {
+  if (!options) {
+    return defaultOptions;
+  }
+  const overwriteMerge = (_, sourceArray, __) => sourceArray;
+  return cjs(defaultOptions, options, {
+    arrayMerge: overwriteMerge,
+    isMergeableObject: isPlainObject
+  });
+}
 const [themeState, setThemeState] = createStore({
   theme: THEME.LIGHT,
-  accentColor: defaultLightColors.primary,
-  colors: defaultLightColors
+  colors: defaultLightColorsSet,
+  borderRadius: "m"
 });
-function setTheme(theme) {
-  if (theme === THEME.LIGHT) {
-    setThemeState({
-      theme,
-      colors: defaultLightColors
-    });
-  } else {
-    setThemeState({
-      theme,
-      colors: defaultDarkColors
-    });
+const themeColorsMappingDefault = {
+  [THEME.LIGHT]: defaultLightColorsSet,
+  [THEME.DARK]: defaultDarkColorsSet
+};
+const themeCustomColors = {
+  [THEME.LIGHT]: void 0,
+  [THEME.DARK]: void 0
+};
+function setTheme(theme, colorsSet) {
+  if (colorsSet) {
+    themeCustomColors[THEME.DARK] = mergeOptions(
+      colorsSet[THEME.DARK],
+      themeCustomColors[THEME.DARK]
+    );
+    themeCustomColors[THEME.LIGHT] = mergeOptions(
+      colorsSet[THEME.LIGHT],
+      themeCustomColors[THEME.LIGHT]
+    );
   }
+  setThemeState({
+    theme,
+    colors: mergeOptions(themeCustomColors[theme], themeColorsMappingDefault[theme])
+  });
+}
+function setBorderRadius(borderRadius) {
+  setThemeState({ borderRadius });
+}
+function setColors(colorsSet) {
+  themeCustomColors[THEME.DARK] = mergeOptions(
+    colorsSet[THEME.DARK],
+    themeCustomColors[THEME.DARK]
+  );
+  themeCustomColors[THEME.LIGHT] = mergeOptions(
+    colorsSet[THEME.LIGHT],
+    themeCustomColors[THEME.LIGHT]
+  );
+  setThemeState((state) => ({
+    colors: mergeOptions(
+      themeCustomColors[state.theme],
+      themeColorsMappingDefault[state.theme]
+    )
+  }));
 }
 const GlobalStyles = () => {
   document.body.addEventListener("mousedown", () => document.body.classList.add("using-mouse"));
@@ -6799,22 +7039,41 @@ const GlobalStyles = () => {
 `;
   return createComponent(Styles, {});
 };
+function hexToRgb(hex) {
+  if (hex[0] === "#") {
+    hex = hex.slice(1);
+  }
+  const bigint = parseInt(hex, 16);
+  const r = bigint >> 16 & 255;
+  const g = bigint >> 8 & 255;
+  const b = bigint & 255;
+  return [r, g, b].join(",");
+}
+function rgba(color, opacity) {
+  if (color[0] === "#") {
+    color = hexToRgb(color);
+  }
+  return `rgba(${color}, ${opacity})`;
+}
+const borders$3 = {
+  m: "16px",
+  s: "8px",
+  none: "0"
+};
 const ButtonStyled$2 = styled.button`
-    background-color: ${(props) => props.appearance === "flat" ? props.theme.colors.backgroundPrimary : props.theme.colors[props.appearance]};
-    color: ${(props) => props.appearance === "primary" ? "white" : props.appearance === "flat" ? props.theme.colors.font.primary : props.theme.colors.font.accent};
+    background-color: ${(props) => rgba(props.theme.colors.accent, 0.12)};
+    color: ${(props) => props.theme.colors.accent};
 
-    box-shadow: ${(props) => props.appearance === "flat" ? "0 4px 24px rgba(0, 0, 0, 0.16);" : "unset;"}
-  
     padding: 9px 16px;
     border: none;
-    border-radius: 16px;
+    border-radius: ${(props) => borders$3[props.theme.borderRadius]};
     cursor: pointer;
 
     font-size: 14px;
     font-weight: 590;
     line-height: 18px;
     letter-spacing: -0.154px;
-  
+
     transition: transform 0.1s ease-in-out;
 
     &:hover {
@@ -6826,13 +7085,12 @@ const ButtonStyled$2 = styled.button`
     }
 `;
 const Button = (props) => {
-  const appearance = () => props.appearance || "primary";
   return createComponent(ButtonStyled$2, {
     get ["class"]() {
       return props.class;
     },
-    get appearance() {
-      return appearance();
+    get id() {
+      return props.id;
     },
     onClick: () => props.onClick(),
     ref(r$) {
@@ -7240,7 +7498,7 @@ const rotationDegrees = {
 };
 const ArrowIcon = (props) => {
   const theme = useTheme();
-  const fill = () => props.fill || theme.colors.font.third;
+  const fill = () => props.fill || theme.colors.icon.secondary;
   const direction = () => props.direction || "left";
   const Svg = styled("svg")`
         transform: rotate(${(props2) => rotationDegrees[props2.svgDirection]}deg);
@@ -7265,7 +7523,7 @@ const ArrowIcon = (props) => {
 const _tmpl$$e = /* @__PURE__ */ template$1(`<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.900031 0.900397L5.00002 5.00039M5.00002 5.00039L9.10003 9.1004M5.00002 5.00039L9.10003 0.900391M5.00002 5.00039L0.900024 9.1004" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></svg>`);
 const CloseIcon = (props) => {
   const theme = useTheme();
-  const fill = () => props.fill || theme.colors.font.third;
+  const fill = () => props.fill || theme.colors.icon.secondary;
   return (() => {
     const _el$ = _tmpl$$e.cloneNode(true), _el$2 = _el$.firstChild;
     createRenderEffect(() => setAttribute(_el$2, "stroke", fill()));
@@ -7280,7 +7538,7 @@ const IconButtonStyled = styled.button`
     width: 32px;
     height: 32px;
     border-radius: 50%;
-    background-color: ${(props) => props.theme.colors.backgroundSecondary};
+    background-color: ${(props) => props.theme.colors.background.secondary};
     border: none;
     cursor: pointer;
 
@@ -7365,14 +7623,12 @@ const ModalBackgroundStyled = styled.div`
 const ModalWrapperClass = u`
     position: relative;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 16px 64px rgba(0, 0, 0, 0.16);
-    border-radius: 24px;
     min-height: 100px;
     width: 440px;
     padding: 44px 56px 24px;
 
     ${media("mobile")} {
         width: 100%;
-        border-radius: 24px 24px 0 0;
     }
 `;
 const CloseButtonStyled = styled(IconButton)`
@@ -7383,6 +7639,11 @@ const CloseButtonStyled = styled(IconButton)`
 const _tmpl$$d = /* @__PURE__ */ template$1(`<div></div>`);
 const clickOutside = clickOutside$1;
 const keyPressed = escPressed;
+const borders$2 = {
+  m: "24px",
+  s: "16px",
+  none: "0"
+};
 const Modal = (props) => {
   const theme = useTheme();
   return createComponent(Transition, {
@@ -7443,9 +7704,23 @@ const Modal = (props) => {
                 onClick: () => props.onClose()
               }), null);
               insert(_el$, () => props.children, null);
-              createRenderEffect(() => className(_el$, cn(ModalWrapperClass, props.class, u`
-                                background-color: ${theme.colors.backgroundPrimary};
-                            `)));
+              createRenderEffect((_p$) => {
+                const _v$ = props.id, _v$2 = cn(ModalWrapperClass, props.class, u`
+                                background-color: ${theme.colors.background.primary};
+                                border-radius: ${borders$2[theme.borderRadius]};
+
+                                ${media("mobile")} {
+                                    border-radius: ${borders$2[theme.borderRadius]}
+                                        ${borders$2[theme.borderRadius]} 0 0;
+                                }
+                            `);
+                _v$ !== _p$._v$ && setAttribute(_el$, "id", _p$._v$ = _v$);
+                _v$2 !== _p$._v$2 && className(_el$, _p$._v$2 = _v$2);
+                return _p$;
+              }, {
+                _v$: void 0,
+                _v$2: void 0
+              });
               return _el$;
             }
           });
@@ -7490,7 +7765,7 @@ const H1Styled$2 = styled.h1`
     text-align: center;
     letter-spacing: 0.072px;
 
-    color: ${(props) => props.theme.colors.font.primary};
+    color: ${(props) => props.theme.colors.text.primary};
 
     margin-top: 0;
     margin-bottom: 6px;
@@ -7503,7 +7778,7 @@ const H1 = (props) => {
     },
     get children() {
       var _a;
-      return memo(() => !!props.translationKey, true)() ? t2(props.translationKey, props.translationValues, (_a = props.children) == null ? void 0 : _a.toString()) : props.children;
+      return createMemo(() => !!props.translationKey)() ? t2(props.translationKey, props.translationValues, (_a = props.children) == null ? void 0 : _a.toString()) : props.children;
     }
   });
 };
@@ -7516,7 +7791,7 @@ const H2Styled$1 = styled.h2`
     text-align: center;
     letter-spacing: -0.32px;
 
-    color: ${(props) => props.theme.colors.font.secondary};
+    color: ${(props) => props.theme.colors.text.secondary};
 
     margin-top: 0;
     margin-bottom: 32px;
@@ -7529,7 +7804,7 @@ const H2 = (props) => {
     },
     get children() {
       var _a;
-      return memo(() => !!props.translationKey, true)() ? t2(props.translationKey, props.translationValues, (_a = props.children) == null ? void 0 : _a.toString()) : props.children;
+      return createMemo(() => !!props.translationKey)() ? t2(props.translationKey, props.translationValues, (_a = props.children) == null ? void 0 : _a.toString()) : props.children;
     }
   });
 };
@@ -7541,17 +7816,17 @@ const H3Styled = styled.h3`
 
     letter-spacing: -0.24px;
 
-    color: ${(props) => props.theme.colors.font.primary};
+    color: ${(props) => props.theme.colors.text.primary};
 
     margin-top: 0;
-    margin-bottom: 0px;
+    margin-bottom: 0;
 `;
 const H3 = (props) => {
   const [t2] = useI18n();
   return createComponent(H3Styled, {
     get children() {
       var _a;
-      return memo(() => !!props.translationKey, true)() ? t2(props.translationKey, props.translationValues, (_a = props.children) == null ? void 0 : _a.toString()) : props.children;
+      return createMemo(() => !!props.translationKey)() ? t2(props.translationKey, props.translationValues, (_a = props.children) == null ? void 0 : _a.toString()) : props.children;
     }
   });
 };
@@ -7567,7 +7842,7 @@ const TextStyled$3 = styled.div`
 const Text = (inputs) => {
   const theme = useTheme();
   const [t2] = useI18n();
-  const color = () => inputs.color || theme.colors.font.primary;
+  const color = () => inputs.color || theme.colors.text.primary;
   const props = mergeProps({
     fontSize: "14px",
     fontWeight: "510",
@@ -7595,14 +7870,14 @@ const Text = (inputs) => {
     },
     get children() {
       var _a;
-      return memo(() => !!props.translationKey, true)() ? t2(props.translationKey, props.translationValues, (_a = props.children) == null ? void 0 : _a.toString()) : props.children;
+      return createMemo(() => !!props.translationKey)() ? t2(props.translationKey, props.translationValues, (_a = props.children) == null ? void 0 : _a.toString()) : props.children;
     }
   });
 };
 const _tmpl$$c = /* @__PURE__ */ template$1(`<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.1839 12.7069C9.6405 13.6507 9.36881 14.1226 9.05907 14.348C8.42775 14.8074 7.57228 14.8074 6.94096 14.348C6.63122 14.1226 6.35952 13.6507 5.81613 12.7069L1.52066 5.24638C0.768635 3.94024 0.392625 3.28717 0.337617 2.75894C0.225505 1.68236 0.818944 0.655911 1.80788 0.215893C2.29309 0 3.04667 0 4.55383 0H11.4462C12.9534 0 13.7069 0 14.1922 0.215893C15.1811 0.655911 15.7745 1.68236 15.6624 2.75894C15.6074 3.28717 15.2314 3.94024 14.4794 5.24638L10.1839 12.7069ZM7.10002 11.3412L2.56139 3.48002C2.31995 3.06185 2.19924 2.85276 2.18146 2.68365C2.14523 2.33896 2.33507 2.01015 2.65169 1.86919C2.80703 1.80002 3.04847 1.80002 3.53133 1.80002H3.53134L7.10002 1.80002V11.3412ZM8.90001 11.3412L13.4387 3.48002C13.6801 3.06185 13.8008 2.85276 13.8186 2.68365C13.8548 2.33896 13.665 2.01015 13.3484 1.86919C13.193 1.80002 12.9516 1.80002 12.4687 1.80002L8.90001 1.80002V11.3412Z"></path></svg>`);
 const TonIcon = (props) => {
   const theme = useTheme();
-  const fill = () => props.fill || theme.colors.font.primary;
+  const fill = () => props.fill || theme.colors.icon.primary;
   return (() => {
     const _el$ = _tmpl$$c.cloneNode(true), _el$2 = _el$.firstChild;
     createRenderEffect(() => setAttribute(_el$2, "fill", fill()));
@@ -7611,7 +7886,8 @@ const TonIcon = (props) => {
 };
 const _tmpl$$b = /* @__PURE__ */ template$1(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="11"></circle><path d="M7.5 13L10 15.5L16.5 9" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></svg>`);
 const SuccessIcon = (props) => {
-  const fill = () => props.fill || "#29CC6A";
+  const theme = useTheme();
+  const fill = () => props.fill || theme.colors.icon.success;
   return (() => {
     const _el$ = _tmpl$$b.cloneNode(true), _el$2 = _el$.firstChild;
     createRenderEffect((_p$) => {
@@ -7629,7 +7905,7 @@ const SuccessIcon = (props) => {
 const _tmpl$$a = /* @__PURE__ */ template$1(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="11"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M7.86358 9.13637C7.51211 8.7849 7.51211 8.21505 7.86358 7.86358C8.21505 7.51211 8.7849 7.51211 9.13637 7.86358L12 10.7272L14.8636 7.86358C15.2151 7.51211 15.7849 7.51211 16.1364 7.86358C16.4878 8.21505 16.4878 8.7849 16.1364 9.13637L13.2728 12L16.1364 14.8636C16.4878 15.2151 16.4878 15.7849 16.1364 16.1364C15.7849 16.4878 15.2151 16.4878 14.8636 16.1364L12 13.2728L9.13637 16.1364C8.7849 16.4878 8.21505 16.4878 7.86358 16.1364C7.51211 15.7849 7.51211 15.2151 7.86358 14.8636L10.7272 12L7.86358 9.13637Z" fill="white"></path></svg>`);
 const ErrorIcon = (props) => {
   const theme = useTheme();
-  const fill = () => props.fill || theme.colors.font.third;
+  const fill = () => props.fill || theme.colors.icon.secondary;
   return (() => {
     const _el$ = _tmpl$$a.cloneNode(true), _el$2 = _el$.firstChild;
     createRenderEffect((_p$) => {
@@ -7647,7 +7923,7 @@ const ErrorIcon = (props) => {
 const _tmpl$$9 = /* @__PURE__ */ template$1(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00002 18.9282C11.8264 21.1373 16.7191 19.8263 18.9282 16C21.1374 12.1736 19.8264 7.28092 16 5.07178C12.1737 2.86264 7.28096 4.17364 5.07182 7.99998" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></svg>`);
 const LoaderIcon = (props) => {
   const theme = useTheme();
-  const fill = () => props.fill || theme.colors.font.third;
+  const fill = () => props.fill || theme.colors.icon.tertiary;
   const rotateAnimation = h`
         0% {
           transform: rotate(0deg);
@@ -7677,7 +7953,7 @@ const TonConnectUiContext = createContext();
 const _tmpl$$8 = /* @__PURE__ */ template$1(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.76228 2.09998H7.79998H10.2001H10.2378H10.2378H10.2378C11.0459 2.09997 11.7067 2.09996 12.2438 2.14384C12.7997 2.18926 13.3017 2.28614 13.7706 2.52505C14.5045 2.89896 15.1011 3.49558 15.475 4.22941C15.7139 4.6983 15.8108 5.20038 15.8562 5.75629C15.9001 6.29337 15.9001 6.95422 15.9001 7.76227V7.79998V8.1H16.2H16.2377C17.0457 8.09999 17.7066 8.09998 18.2437 8.14386C18.7996 8.18928 19.3017 8.28616 19.7705 8.52507C20.5044 8.89898 21.101 9.4956 21.4749 10.2294C21.7138 10.6983 21.8107 11.2004 21.8561 11.7563C21.9 12.2934 21.9 12.9542 21.9 13.7623V13.8V16.2V16.2377C21.9 17.0458 21.9 17.7066 21.8561 18.2437C21.8107 18.7996 21.7138 19.3017 21.4749 19.7706C21.101 20.5044 20.5044 21.101 19.7705 21.4749C19.3017 21.7138 18.7996 21.8107 18.2437 21.8561C17.7066 21.9 17.0458 21.9 16.2378 21.9H16.2377H16.2H13.8H13.7623H13.7622C12.9542 21.9 12.2934 21.9 11.7563 21.8561C11.2004 21.8107 10.6983 21.7138 10.2294 21.4749C9.49561 21.101 8.89898 20.5044 8.52507 19.7706C8.28616 19.3017 8.18928 18.7996 8.14386 18.2437C8.09998 17.7066 8.09999 17.0458 8.1 16.2377V16.2V15.9H7.79998H7.76227H7.76218C6.95417 15.9 6.29335 15.9 5.75629 15.8561C5.20038 15.8107 4.6983 15.7138 4.22941 15.4749C3.49558 15.101 2.89896 14.5044 2.52505 13.7705C2.28614 13.3017 2.18926 12.7996 2.14384 12.2437C2.09996 11.7066 2.09997 11.0458 2.09998 10.2377V10.2377V10.2377V10.2V7.79998V7.76228V7.76225V7.76224C2.09997 6.9542 2.09996 6.29336 2.14384 5.75629C2.18926 5.20038 2.28614 4.6983 2.52505 4.22941C2.89896 3.49558 3.49558 2.89896 4.22941 2.52505C4.6983 2.28614 5.20038 2.18926 5.75629 2.14384C6.29336 2.09996 6.95419 2.09997 7.76222 2.09998H7.76224H7.76228ZM8.1 14.1V13.8V13.7623C8.09999 12.9542 8.09998 12.2934 8.14386 11.7563C8.18928 11.2004 8.28616 10.6983 8.52507 10.2294C8.89898 9.4956 9.49561 8.89898 10.2294 8.52507C10.6983 8.28616 11.2004 8.18928 11.7563 8.14386C12.2934 8.09998 12.9542 8.09999 13.7623 8.1H13.8H14.1001V7.79998C14.1001 6.94505 14.0994 6.35798 14.0622 5.90287C14.0259 5.45827 13.9593 5.21944 13.8712 5.0466C13.6699 4.65146 13.3486 4.3302 12.9535 4.12886C12.7806 4.04079 12.5418 3.97419 12.0972 3.93786C11.6421 3.90068 11.055 3.89998 10.2001 3.89998H7.79998C6.94505 3.89998 6.35798 3.90068 5.90287 3.93786C5.45827 3.97419 5.21944 4.04079 5.0466 4.12886C4.65146 4.3302 4.3302 4.65146 4.12886 5.0466C4.04079 5.21944 3.97419 5.45827 3.93786 5.90287C3.90068 6.35798 3.89998 6.94505 3.89998 7.79998V10.2C3.89998 11.0549 3.90068 11.642 3.93786 12.0971C3.97419 12.5417 4.04079 12.7805 4.12886 12.9534C4.3302 13.3485 4.65146 13.6698 5.0466 13.8711C5.21944 13.9592 5.45827 14.0258 5.90287 14.0621C6.35798 14.0993 6.94505 14.1 7.79998 14.1H8.1ZM11.0466 10.1289C11.2195 10.0408 11.4583 9.97421 11.9029 9.93788C12.358 9.9007 12.9451 9.9 13.8 9.9H16.2C17.0549 9.9 17.642 9.9007 18.0971 9.93788C18.5417 9.97421 18.7805 10.0408 18.9534 10.1289C19.3485 10.3302 19.6698 10.6515 19.8711 11.0466C19.9592 11.2195 20.0258 11.4583 20.0621 11.9029C20.0993 12.358 20.1 12.9451 20.1 13.8V16.2C20.1 17.0549 20.0993 17.642 20.0621 18.0971C20.0258 18.5417 19.9592 18.7805 19.8711 18.9534C19.6698 19.3485 19.3485 19.6698 18.9534 19.8711C18.7805 19.9592 18.5417 20.0258 18.0971 20.0621C17.642 20.0993 17.0549 20.1 16.2 20.1H13.8C12.9451 20.1 12.358 20.0993 11.9029 20.0621C11.4583 20.0258 11.2195 19.9592 11.0466 19.8711C10.6515 19.6698 10.3302 19.3485 10.1289 18.9534C10.0408 18.7805 9.97421 18.5417 9.93788 18.0971C9.9007 17.642 9.9 17.0549 9.9 16.2V13.8C9.9 12.9451 9.9007 12.358 9.93788 11.9029C9.97421 11.4583 10.0408 11.2195 10.1289 11.0466C10.3302 10.6515 10.6515 10.3302 11.0466 10.1289Z"></path></svg>`);
 const CopyIcon = (props) => {
   const theme = useTheme();
-  const fill = () => props.fill || theme.colors.font.primary;
+  const fill = () => props.fill || theme.colors.icon.primary;
   return (() => {
     const _el$ = _tmpl$$8.cloneNode(true), _el$2 = _el$.firstChild;
     createRenderEffect(() => setAttribute(_el$2, "fill", fill()));
@@ -7687,7 +7963,7 @@ const CopyIcon = (props) => {
 const _tmpl$$7 = /* @__PURE__ */ template$1(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0001 4.00003H8.80012C7.11996 4.00003 6.27989 4.00003 5.63815 4.32701C5.07366 4.61463 4.61472 5.07357 4.3271 5.63806C4.00012 6.27979 4.00012 7.11987 4.00012 8.80003V15.2C4.00012 16.8802 4.00012 17.7203 4.3271 18.362C4.61472 18.9265 5.07366 19.3854 5.63815 19.6731C6.27989 20 7.11996 20 8.80012 20H12.0001" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 12H21M21 12L17 8M21 12L17 16" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></svg>`);
 const DisconnectIcon = (props) => {
   const theme = useTheme();
-  const fill = () => props.fill || theme.colors.font.primary;
+  const fill = () => props.fill || theme.colors.icon.primary;
   return (() => {
     const _el$ = _tmpl$$7.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     createRenderEffect((_p$) => {
@@ -7724,17 +8000,27 @@ function fallbackCopyTextToClipboard(text) {
     document.body.removeChild(textArea);
   }
 }
+const hoverBorders = {
+  m: "8px",
+  s: "4px",
+  none: "0"
+};
+const dropdownBorders = {
+  m: "16px",
+  s: "8px",
+  none: "0"
+};
 const AccountButtonDropdownStyled = styled.div`
     width: 256px;
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16);
-    border-radius: 16px;
+    border-radius: ${(props) => dropdownBorders[props.theme.borderRadius]};
 
-    background-color: ${(props) => props.theme.colors.backgroundPrimary}
+    background-color: ${(props) => props.theme.colors.background.primary}
            
-    color: ${(props) => props.theme.colors.font.primary}
+    color: ${(props) => props.theme.colors.text.primary}
 `;
 const UlStyled$1 = styled.ul`
-    background-color: ${(props) => props.theme.colors.backgroundPrimary};
+    background-color: ${(props) => props.theme.colors.background.primary};
     padding: 8px;
 `;
 const MenuButtonStyled = styled.button`
@@ -7744,15 +8030,15 @@ const MenuButtonStyled = styled.button`
     padding: 12px;
     width: 100%;
 
-    background-color: ${(props) => props.theme.colors.backgroundPrimary};
+    background-color: ${(props) => props.theme.colors.background.primary};
     border: none;
-    border-radius: 8px;
+    border-radius: ${(props) => hoverBorders[props.theme.borderRadius]};
     cursor: pointer;
 
     transition: background-color, transform 0.1s ease-in-out;
 
     &:hover {
-        background-color: ${(props) => props.theme.colors.backgroundSecondary};
+        background-color: ${(props) => props.theme.colors.background.secondary};
     }
 
     &:active {
@@ -7793,6 +8079,9 @@ const AccountButtonDropdown = (props) => {
     get ["class"]() {
       return props.class;
     },
+    get id() {
+      return props.id;
+    },
     get children() {
       return createComponent(UlStyled$1, {
         get children() {
@@ -7843,19 +8132,24 @@ const AccountButtonDropdown = (props) => {
     }
   });
 };
+const borders$1 = {
+  m: "16px",
+  s: "8px",
+  none: "0"
+};
 const NotificationStyled = styled.div`
     width: 256px;
     padding: 12px 16px;
     display: flex;
     gap: 9px;
 
-    background-color: ${(props) => props.theme.colors.backgroundPrimary};
+    background-color: ${(props) => props.theme.colors.background.primary};
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16);
-    border-radius: 16px;
+    border-radius: ${(props) => borders$1[props.theme.borderRadius]};
 `;
 const TextStyled$2 = styled(Text)`
     margin-top: 4px;
-    color: ${(props) => props.theme.colors.font.secondary};
+    color: ${(props) => props.theme.colors.text.secondary};
 `;
 const _tmpl$$5 = /* @__PURE__ */ template$1(`<div></div>`);
 const Notification = (props) => {
@@ -7893,7 +8187,7 @@ const Notification = (props) => {
           }
         }), null);
         return _el$;
-      })(), memo(() => props.icon)];
+      })(), createMemo(() => props.icon)];
     }
   });
 };
@@ -7953,7 +8247,7 @@ const SuccessTransactionNotification = (props) => {
       return createComponent(SuccessIconStyled$1, {});
     },
     get ["class"]() {
-      return props.class;
+      return cn(props.class, "tc-notification");
     },
     children: "Transaction sent"
   });
@@ -8044,25 +8338,40 @@ const Notifications = (props) => {
         });
       }
     }));
-    createRenderEffect(() => className(_el$, props.class));
+    createRenderEffect((_p$) => {
+      const _v$ = props.class, _v$2 = props.id;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && setAttribute(_el$, "id", _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0
+    });
     return _el$;
   })();
 };
 const AccountButtonStyled = styled(Button)`
+    background-color: ${(props) => props.theme.colors.connectButton.background};
+    color: ${(props) => props.theme.colors.connectButton.foreground};
+    box-shadow: ${(props) => `0 4px 24px ${rgba(props.theme.colors.constant.black, 0.16)}`};
+
     display: flex;
     align-items: center;
     gap: 9px;
 
-    transition: background-color 0.1s ease-in-out;
+    transition: all 0.1s ease-in-out;
 
     &:hover:not(:active) {
         transform: scale(1);
     }
 
     &:hover {
-        background-color: ${(props) => props.theme.colors.backgroundSecondary};
+        filter: ${(props) => `brightness(${props.theme.theme === THEME.DARK ? 1.07 : 0.95})`};
     }
 `;
+const DropdownButtonStyled = styled(AccountButtonStyled)`
+    background-color: ${(props) => props.theme.colors.background.primary};
+`;
 const DropdownContainerStyled = styled.div`
     display: flex;
     flex-direction: column;
@@ -8153,7 +8462,7 @@ const computePosition$1 = (reference, floating, config) => __async(void 0, null,
   } = config;
   const validMiddleware = middleware.filter(Boolean);
   const rtl = yield platform2.isRTL == null ? void 0 : platform2.isRTL(floating);
-  if (process.env.NODE_ENV !== "production") {
+  if ({}.NODE_ENV !== "production") {
     if (platform2 == null) {
       console.error(["Floating UI: `platform` property was not passed to config. If you", "want to use Floating UI on the web, install @floating-ui/dom", "instead of the /core package. Otherwise, you can create your own", "`platform`: https://floating-ui.com/docs/platform"].join(" "));
     }
@@ -8210,7 +8519,7 @@ const computePosition$1 = (reference, floating, config) => __async(void 0, null,
     middlewareData = __spreadProps(__spreadValues({}, middlewareData), {
       [name]: __spreadValues(__spreadValues({}, middlewareData[name]), data)
     });
-    if (process.env.NODE_ENV !== "production") {
+    if ({}.NODE_ENV !== "production") {
       if (resetCount > 50) {
         console.warn(["Floating UI: The middleware lifecycle appears to be running in an", "infinite loop. This is usually caused by a `reset` continually", "being returned without a break condition."].join(" "));
       }
@@ -8822,8 +9131,9 @@ function P(l2, u2, e2) {
     return n2().middlewareData;
   }, update: i2 };
 }
-const _tmpl$$3 = /* @__PURE__ */ template$1(`<div></div>`);
+const _tmpl$$3 = /* @__PURE__ */ template$1(`<div id="tc-dropdown-container"></div>`);
 const AccountButton = () => {
+  const theme = useTheme();
   const connector = useContext(ConnectorContext);
   const tonConnectUI2 = useContext(TonConnectUiContext);
   const [isOpened, setIsOpened] = createSignal(false);
@@ -8873,14 +9183,21 @@ const AccountButton = () => {
     },
     get children() {
       return createComponent(AccountButtonStyled, {
-        appearance: "flat",
         onClick: () => tonConnectUI2.connectWallet(),
+        id: "tc-connect-button",
         get children() {
-          return [createComponent(TonIcon, {}), createComponent(Text, {
+          return [createComponent(TonIcon, {
+            get fill() {
+              return theme.colors.connectButton.foreground;
+            }
+          }), createComponent(Text, {
             translationKey: "button.connectWallet",
             fontSize: "15px",
             letterSpacing: "-0.24px",
             fontWeight: "590",
+            get color() {
+              return theme.colors.connectButton.foreground;
+            },
             children: "Connect wallet"
           })];
         }
@@ -8893,10 +9210,10 @@ const AccountButton = () => {
     get children() {
       return createComponent(DropdownContainerStyled, {
         get children() {
-          return [createComponent(AccountButtonStyled, {
-            appearance: "flat",
+          return [createComponent(DropdownButtonStyled, {
             onClick: () => setIsOpened((v) => !v),
             ref: setAnchor,
+            id: "tc-dropdown-button",
             get children() {
               return [createComponent(Text, {
                 fontSize: "15px",
@@ -8952,13 +9269,16 @@ const AccountButton = () => {
                         ref(r$) {
                           const _ref$ = dropDownRef;
                           typeof _ref$ === "function" ? _ref$(r$) : dropDownRef = r$;
-                        }
+                        },
+                        id: "tc-dropdown"
                       });
                     }
                   });
                 }
               }), null);
-              insert(_el$, createComponent(NotificationsStyled, {}), null);
+              insert(_el$, createComponent(NotificationsStyled, {
+                id: "tc-notifications"
+              }), null);
               createRenderEffect((_p$) => {
                 var _a, _b;
                 const _v$ = position.strategy, _v$2 = `${(_a = position.y) != null ? _a : 0}px`, _v$3 = `${(_b = position.x) != null ? _b : 0}px`;
@@ -8996,14 +9316,14 @@ const QrCodeStyled = styled.div`
     }
 
     path {
-        fill: ${(props) => props.theme.colors.font.primary};
+        fill: ${(props) => props.theme.colors.text.primary};
     }
 `;
 const ImageBackground = styled.div`
     position: absolute;
     width: 52px;
     height: 52px;
-    background: ${(props) => props.theme.colors.backgroundSecondary};
+    background: ${(props) => props.theme.colors.background.secondary};
     padding: 7px;
     top: 112px;
     left: 112px;
@@ -10696,6 +11016,11 @@ const Translation = (props) => {
   const [t2] = useI18n();
   return t2(props.translationKey, props.translationValues, (_a = props.children) == null ? void 0 : _a.toString());
 };
+const borders = {
+  m: "16px",
+  s: "8px",
+  none: "0"
+};
 const QrCodeModalStyled = styled.div`
     padding: 0 24px;
 `;
@@ -10706,8 +11031,8 @@ const StyledIconButton = styled(IconButton)`
 `;
 const QRBackgroundStyled = styled.div`
     margin-bottom: 16px;
-    background-color: ${(props) => props.theme.colors.backgroundSecondary};
-    border-radius: 16px;
+    background-color: ${(props) => props.theme.colors.background.secondary};
+    border-radius: ${(props) => borders[props.theme.borderRadius]};
     display: flex;
     align-items: center;
     justify-content: center;
@@ -10724,6 +11049,7 @@ const ActionButtonStyled = styled(Button)`
     line-height: 20px;
     letter-spacing: -0.32px;
     width: 100%;
+    border-radius: ${(props) => borders[props.theme.borderRadius]};
 `;
 const GetWalletStyled = styled.div`
     display: flex;
@@ -10731,7 +11057,7 @@ const GetWalletStyled = styled.div`
     align-items: center;
 `;
 const TextStyled$1 = styled(Text)`
-    color: ${(props) => props.theme.colors.font.secondary};
+    color: ${(props) => props.theme.colors.text.secondary};
     font-size: 16px;
 `;
 function openLink(href, target = "_self") {
@@ -10758,6 +11084,9 @@ const QrCodeModal = (props) => {
     bridgeUrl: props.wallet.bridgeUrl
   });
   return createComponent(QrCodeModalStyled, {
+    get id() {
+      return props.id;
+    },
     get children() {
       return [createComponent(StyledIconButton, {
         icon: "arrow",
@@ -10770,7 +11099,7 @@ const QrCodeModal = (props) => {
           };
         },
         get children() {
-          return ["Connect with ", memo(() => props.wallet.name)];
+          return ["Connect with ", createMemo(() => props.wallet.name)];
         }
       }), createComponent(H2, {
         translationKey: "walletModal.qrCodeModal.scan",
@@ -10780,7 +11109,7 @@ const QrCodeModal = (props) => {
           };
         },
         get children() {
-          return ["Scan QR code with your phone’s or ", memo(() => props.wallet.name), "’s camera."];
+          return ["Scan QR code with your phone’s or ", createMemo(() => props.wallet.name), "’s camera."];
         }
       }), createComponent(QRBackgroundStyled, {
         get children() {
@@ -10794,7 +11123,6 @@ const QrCodeModal = (props) => {
       }), createComponent(ButtonsContainerStyled, {
         get children() {
           return [createComponent(ActionButtonStyled, {
-            appearance: "secondary",
             onClick: () => openLink(universalLink),
             get children() {
               return createComponent(Translation, {
@@ -10805,7 +11133,7 @@ const QrCodeModal = (props) => {
                   };
                 },
                 get children() {
-                  return ["Open ", memo(() => props.wallet.name)];
+                  return ["Open ", createMemo(() => props.wallet.name)];
                 }
               });
             }
@@ -10815,7 +11143,6 @@ const QrCodeModal = (props) => {
             },
             get children() {
               return createComponent(ActionButtonStyled, {
-                appearance: "secondary",
                 onClick: () => connector.connect({
                   jsBridgeKey: props.wallet.jsBridgeKey
                 }),
@@ -10839,10 +11166,9 @@ const QrCodeModal = (props) => {
               };
             },
             get children() {
-              return ["Don't have ", memo(() => props.wallet.name), "?"];
+              return ["Don't have ", createMemo(() => props.wallet.name), "?"];
             }
           }), createComponent(Button, {
-            appearance: "secondary",
             onClick: () => openLinkBlank(props.wallet.aboutUrl),
             get children() {
               return createComponent(Translation, {
@@ -10960,6 +11286,9 @@ const _tmpl$ = /* @__PURE__ */ template$1(`<li></li>`);
 const SelectWalletModal = (props) => {
   const learnMoreUrl = "https://ton.org/wallets";
   return createComponent(SelectWalletModalStyled, {
+    get id() {
+      return props.id;
+    },
     get children() {
       return [createComponent(H1, {
         translationKey: "walletModal.selectWalletModal.connectWallet",
@@ -10989,7 +11318,6 @@ const SelectWalletModal = (props) => {
           });
         }
       }), createComponent(ButtonStyled$1, {
-        appearance: "secondary",
         onClick: () => openLinkBlank(learnMoreUrl),
         get children() {
           return createComponent(Translation, {
@@ -11001,12 +11329,6 @@ const SelectWalletModal = (props) => {
     }
   });
 };
-const ModalWrapper = styled.div`
-    color: ${(props) => {
-  var _a;
-  return ((_a = props.theme) == null ? void 0 : _a.accentColor) || "blue";
-}};
-`;
 const StyledModal = styled(Modal)`
     padding-left: 0;
     padding-right: 0;
@@ -11039,8 +11361,52 @@ const LoaderContainerStyled = styled.div`
 `;
 const [appState, setAppState] = createStore({
   buttonRootId: null,
-  language: "en"
+  language: "en",
+  walletsList: {}
 });
+function uiWalletToWalletInfo(uiWallet) {
+  if ("jsBridgeKey" in uiWallet) {
+    return __spreadProps(__spreadValues({}, uiWallet), {
+      injected: TonConnect.isWalletInjected(uiWallet.jsBridgeKey),
+      embedded: TonConnect.isInsideWalletBrowser(uiWallet.jsBridgeKey)
+    });
+  }
+  return uiWallet;
+}
+function applyWalletsListConfiguration(walletsList, configuration) {
+  var _a;
+  if (!configuration) {
+    return walletsList;
+  }
+  if ("wallets" in configuration) {
+    return configuration.wallets.map((wallet) => {
+      if (typeof wallet === "string") {
+        const walletInfo = walletsList.find((item) => item.name === wallet);
+        if (!walletInfo) {
+          console.error(
+            `Wallet with name === '${wallet}' wasn't found in the wallets list. Check '${wallet}' correctness. Available wallets names: ${walletsList.map((i2) => "'" + i2.name + "'").join(", ")}`
+          );
+          return null;
+        }
+        return walletInfo;
+      }
+      return uiWalletToWalletInfo(wallet);
+    }).filter((i2) => !!i2);
+  }
+  const filteredWalletsList = ((_a = configuration.excludeWallets) == null ? void 0 : _a.length) ? walletsList.filter(
+    (wallet) => {
+      var _a2;
+      return (_a2 = configuration.excludeWallets) == null ? void 0 : _a2.every((item) => item !== wallet.name);
+    }
+  ) : walletsList;
+  if (!configuration.includeWallets) {
+    return filteredWalletsList;
+  }
+  if (configuration.includeWalletsOrder === "start") {
+    return configuration.includeWallets.map(uiWalletToWalletInfo).concat(walletsList);
+  }
+  return walletsList.concat(configuration.includeWallets.map(uiWalletToWalletInfo));
+}
 const WalletsModal = () => {
   const {
     locale
@@ -11048,8 +11414,14 @@ const WalletsModal = () => {
   createEffect(() => locale(appState.language));
   const connector = useContext(ConnectorContext);
   const tonConnectUI2 = useContext(TonConnectUiContext);
-  const [walletsList] = createResource(() => tonConnectUI2.getWallets());
+  const [fetchedWalletsList] = createResource(() => tonConnectUI2.getWallets());
   const [selectedWalletInfo, setSelectedWalletInfo] = createSignal(null);
+  const walletsList = createMemo(() => {
+    if (fetchedWalletsList.state !== "ready") {
+      return null;
+    }
+    return applyWalletsListConfiguration(fetchedWalletsList(), appState.walletsList);
+  });
   const onClose = () => {
     setWalletsModalOpen(false);
     setSelectedWalletInfo(null);
@@ -11062,7 +11434,11 @@ const WalletsModal = () => {
     if (isWalletInfoInjected(walletInfo) && walletInfo.injected) {
       return onSelectIfInjected(walletInfo);
     }
-    setSelectedWalletInfo(walletInfo);
+    if ("bridgeUrl" in walletInfo) {
+      setSelectedWalletInfo(walletInfo);
+      return;
+    }
+    openLink(walletInfo.aboutUrl, "_blank");
   };
   const onSelectIfMobile = (walletInfo) => {
     const universalLink = connector.connect({
@@ -11082,66 +11458,63 @@ const WalletsModal = () => {
     }
   });
   onCleanup(unsubscribe);
-  return createComponent(ModalWrapper, {
+  return createComponent(StyledModal, {
+    get opened() {
+      return walletsModalOpen();
+    },
+    onClose,
+    id: "tc-wallets-modal-container",
     get children() {
-      return createComponent(StyledModal, {
-        get opened() {
-          return walletsModalOpen();
+      return [createComponent(Show, {
+        get when() {
+          return !walletsList();
+        },
+        get children() {
+          return [createComponent(H1Styled$1, {
+            translationKey: "walletModal.loading",
+            children: "Wallets list is loading"
+          }), createComponent(LoaderContainerStyled, {
+            get children() {
+              return createComponent(LoaderIconStyled$1, {});
+            }
+          })];
+        }
+      }), createComponent(Show, {
+        get when() {
+          return walletsList();
         },
-        onClose,
         get children() {
           return [createComponent(Show, {
             get when() {
-              return walletsList.state !== "ready";
+              return !selectedWalletInfo();
             },
+            keyed: false,
             get children() {
-              return [createComponent(H1Styled$1, {
-                translationKey: "walletModal.loading",
-                children: "Wallets list is loading"
-              }), createComponent(LoaderContainerStyled, {
-                get children() {
-                  return createComponent(LoaderIconStyled$1, {
-                    fill: "#7A899970"
-                  });
-                }
-              })];
+              return createComponent(SelectWalletModal, {
+                get walletsList() {
+                  return walletsList();
+                },
+                onSelect,
+                id: "tc-wallets-modal"
+              });
             }
           }), createComponent(Show, {
             get when() {
-              return walletsList.state === "ready";
+              return selectedWalletInfo();
             },
+            keyed: false,
             get children() {
-              return [createComponent(Show, {
-                get when() {
-                  return !selectedWalletInfo();
-                },
-                keyed: false,
-                get children() {
-                  return createComponent(SelectWalletModal, {
-                    get walletsList() {
-                      return walletsList();
-                    },
-                    onSelect
-                  });
-                }
-              }), createComponent(Show, {
-                get when() {
+              return createComponent(QrCodeModal, {
+                get wallet() {
                   return selectedWalletInfo();
                 },
-                keyed: false,
-                get children() {
-                  return createComponent(QrCodeModal, {
-                    get wallet() {
-                      return selectedWalletInfo();
-                    },
-                    onBackClick: () => setSelectedWalletInfo(null)
-                  });
-                }
-              })];
+                onBackClick: () => setSelectedWalletInfo(null),
+                id: "tc-qr-modal"
+              });
             }
           })];
         }
-      });
+      })];
     }
   });
 };
@@ -11162,15 +11535,18 @@ const TextStyled = styled(Text)`
     text-align: center;
     max-width: 250px;
 
-    color: ${(props) => props.theme.colors.font.secondary};
+    color: ${(props) => props.theme.colors.text.secondary};
 `;
 const ButtonStyled = styled(Button)`
     margin-top: 32px;
 `;
 const ActionModal = (props) => {
   return createComponent(ActionModalStyled, {
+    get id() {
+      return props.id;
+    },
     get children() {
-      return [memo(() => props.icon), createComponent(H1Styled, {
+      return [createMemo(() => props.icon), createComponent(H1Styled, {
         get translationKey() {
           return props.headerTranslationKey;
         }
@@ -11184,7 +11560,6 @@ const ActionModal = (props) => {
         },
         get children() {
           return createComponent(ButtonStyled, {
-            appearance: "secondary",
             onClick: () => props.onClose(),
             get children() {
               return createComponent(Translation, {
@@ -11207,12 +11582,13 @@ const ConfirmTransactionModal = (props) => {
     headerTranslationKey: "actionModal.confirmTransaction.header",
     textTranslationKey: "actionModal.confirmTransaction.text",
     get icon() {
-      return createComponent(LoaderIconStyled, {
-        fill: "#7A899970"
-      });
+      return createComponent(LoaderIconStyled, {});
     },
     onClose: () => props.onClose(),
-    showButton: false
+    showButton: false,
+    get id() {
+      return props.id;
+    }
   });
 };
 const ErrorIconStyled = styled(ErrorIcon)`
@@ -11226,7 +11602,10 @@ const TransactionCanceledModal = (props) => {
     get icon() {
       return createComponent(ErrorIconStyled, {});
     },
-    onClose: () => props.onClose()
+    onClose: () => props.onClose(),
+    get id() {
+      return props.id;
+    }
   });
 };
 const SuccessIconStyled = styled(SuccessIcon)`
@@ -11240,16 +11619,20 @@ const TransactionSentModal = (props) => {
     get icon() {
       return createComponent(SuccessIconStyled, {});
     },
-    onClose: () => props.onClose()
+    onClose: () => props.onClose(),
+    get id() {
+      return props.id;
+    }
   });
 };
 const ActionsModal = () => {
   return createComponent(Modal, {
     get opened() {
       var _a;
-      return memo(() => action() !== null, true)() && ((_a = action()) == null ? void 0 : _a.openModal) === true;
+      return createMemo(() => action() !== null)() && ((_a = action()) == null ? void 0 : _a.openModal) === true;
     },
     onClose: () => setAction(null),
+    id: "tc-actions-modal-container",
     get children() {
       return createComponent(Switch, {
         get children() {
@@ -11259,7 +11642,8 @@ const ActionsModal = () => {
             },
             get children() {
               return createComponent(TransactionSentModal, {
-                onClose: () => setAction(null)
+                onClose: () => setAction(null),
+                id: "tc-transaction-sent-modal"
               });
             }
           }), createComponent(Match, {
@@ -11268,7 +11652,8 @@ const ActionsModal = () => {
             },
             get children() {
               return createComponent(TransactionCanceledModal, {
-                onClose: () => setAction(null)
+                onClose: () => setAction(null),
+                id: "tc-transaction-canceled-modal"
               });
             }
           }), createComponent(Match, {
@@ -11277,7 +11662,8 @@ const ActionsModal = () => {
             },
             get children() {
               return createComponent(ConfirmTransactionModal, {
-                onClose: () => setAction(null)
+                onClose: () => setAction(null),
+                id: "tc-confirm-modal"
               });
             }
           })];
@@ -11369,146 +11755,20 @@ class WalletInfoStorage {
     this.localStorage.removeItem(this.storageKey);
   }
 }
-var isMergeableObject = function isMergeableObject2(value) {
-  return isNonNullObject(value) && !isSpecial(value);
-};
-function isNonNullObject(value) {
-  return !!value && typeof value === "object";
-}
-function isSpecial(value) {
-  var stringValue = Object.prototype.toString.call(value);
-  return stringValue === "[object RegExp]" || stringValue === "[object Date]" || isReactElement(value);
-}
-var canUseSymbol = typeof Symbol === "function" && Symbol.for;
-var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for("react.element") : 60103;
-function isReactElement(value) {
-  return value.$$typeof === REACT_ELEMENT_TYPE;
-}
-function emptyTarget(val) {
-  return Array.isArray(val) ? [] : {};
-}
-function cloneUnlessOtherwiseSpecified(value, options) {
-  return options.clone !== false && options.isMergeableObject(value) ? deepmerge(emptyTarget(value), value, options) : value;
-}
-function defaultArrayMerge(target, source, options) {
-  return target.concat(source).map(function(element) {
-    return cloneUnlessOtherwiseSpecified(element, options);
-  });
-}
-function getMergeFunction(key, options) {
-  if (!options.customMerge) {
-    return deepmerge;
-  }
-  var customMerge = options.customMerge(key);
-  return typeof customMerge === "function" ? customMerge : deepmerge;
-}
-function getEnumerableOwnPropertySymbols(target) {
-  return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(target).filter(function(symbol) {
-    return target.propertyIsEnumerable(symbol);
-  }) : [];
-}
-function getKeys(target) {
-  return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target));
-}
-function propertyIsOnObject(object, property) {
-  try {
-    return property in object;
-  } catch (_) {
-    return false;
-  }
-}
-function propertyIsUnsafe(target, key) {
-  return propertyIsOnObject(target, key) && !(Object.hasOwnProperty.call(target, key) && Object.propertyIsEnumerable.call(target, key));
-}
-function mergeObject(target, source, options) {
-  var destination = {};
-  if (options.isMergeableObject(target)) {
-    getKeys(target).forEach(function(key) {
-      destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
-    });
-  }
-  getKeys(source).forEach(function(key) {
-    if (propertyIsUnsafe(target, key)) {
-      return;
-    }
-    if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
-      destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
-    } else {
-      destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
-    }
-  });
-  return destination;
-}
-function deepmerge(target, source, options) {
-  options = options || {};
-  options.arrayMerge = options.arrayMerge || defaultArrayMerge;
-  options.isMergeableObject = options.isMergeableObject || isMergeableObject;
-  options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
-  var sourceIsArray = Array.isArray(source);
-  var targetIsArray = Array.isArray(target);
-  var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
-  if (!sourceAndTargetTypesMatch) {
-    return cloneUnlessOtherwiseSpecified(source, options);
-  } else if (sourceIsArray) {
-    return options.arrayMerge(target, source, options);
-  } else {
-    return mergeObject(target, source, options);
-  }
-}
-deepmerge.all = function deepmergeAll(array, options) {
-  if (!Array.isArray(array)) {
-    throw new Error("first argument should be an array");
-  }
-  return array.reduce(function(prev, next) {
-    return deepmerge(prev, next, options);
-  }, {});
-};
-var deepmerge_1 = deepmerge;
-var cjs = deepmerge_1;
-/*!
- * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-function isObject(o2) {
-  return Object.prototype.toString.call(o2) === "[object Object]";
-}
-function isPlainObject(o2) {
-  var ctor, prot;
-  if (isObject(o2) === false)
-    return false;
-  ctor = o2.constructor;
-  if (ctor === void 0)
-    return true;
-  prot = ctor.prototype;
-  if (isObject(prot) === false)
-    return false;
-  if (prot.hasOwnProperty("isPrototypeOf") === false) {
-    return false;
-  }
-  return true;
-}
-function mergeOptions(options, defaultOptions) {
-  if (!options) {
-    return defaultOptions;
-  }
-  const overwriteMerge = (_, sourceArray, __) => sourceArray;
-  return cjs(defaultOptions, options, {
-    arrayMerge: overwriteMerge,
-    isMergeableObject: isPlainObject
-  });
-}
 class TonConnectUI {
   constructor(options) {
     __publicField(this, "walletInfoStorage", new WalletInfoStorage());
     __publicField(this, "connector");
     __publicField(this, "_walletInfo", null);
     __publicField(this, "systemThemeChangeUnsubscribe", null);
+    __publicField(this, "actionsConfiguration");
     if (options && "connector" in options && options.connector) {
       this.connector = options.connector;
     } else if (options && "manifestUrl" in options && options.manifestUrl) {
-      this.connector = new TonConnect({ manifestUrl: options.manifestUrl });
+      this.connector = new TonConnect({
+        manifestUrl: options.manifestUrl,
+        walletsListSource: options.walletsListSource
+      });
     } else {
       throw new TonConnectUIError(
         "You have to specify a `manifestUrl` or a `connector` in the options."
@@ -11518,9 +11778,13 @@ class TonConnectUI {
     const rootId = this.normalizeWidgetRoot(options == null ? void 0 : options.widgetRootId);
     this.subscribeToWalletChange();
     if ((options == null ? void 0 : options.restoreConnection) !== false) {
-      this.connector.restoreConnection();
+      this.connector.restoreConnection().then(() => {
+        if (!this.connector.connected) {
+          this.walletInfoStorage.removeWalletInfo();
+        }
+      });
     }
-    this.uiOptions = options || {};
+    this.uiOptions = mergeOptions(options, { uiPreferences: { theme: "SYSTEM" } });
     setAppState({ connector: this.connector });
     widgetController.renderApp(rootId, this);
   }
@@ -11540,28 +11804,30 @@ class TonConnectUI {
     return this._walletInfo;
   }
   set uiOptions(options) {
-    var _a;
+    var _a, _b, _c, _d, _e;
     this.checkButtonRootExist(options.buttonRootId);
-    if (options.theme === "SYSTEM") {
-      setTheme(getSystemTheme());
-      if (!this.systemThemeChangeUnsubscribe) {
-        this.systemThemeChangeUnsubscribe = subscribeToThemeChange(
-          (theme) => setTheme(theme)
-        );
+    this.actionsConfiguration = options.actionsConfiguration;
+    if ((_a = options.uiPreferences) == null ? void 0 : _a.theme) {
+      if (((_b = options.uiPreferences) == null ? void 0 : _b.theme) !== "SYSTEM") {
+        (_c = this.systemThemeChangeUnsubscribe) == null ? void 0 : _c.call(this);
+        setTheme(options.uiPreferences.theme, options.uiPreferences.colorsSet);
+      } else {
+        setTheme(getSystemTheme(), options.uiPreferences.colorsSet);
+        if (!this.systemThemeChangeUnsubscribe) {
+          this.systemThemeChangeUnsubscribe = subscribeToThemeChange(setTheme);
+        }
       }
     } else {
-      if (options.theme) {
-        (_a = this.systemThemeChangeUnsubscribe) == null ? void 0 : _a.call(this);
-        setTheme(options.theme);
+      if ((_d = options.uiPreferences) == null ? void 0 : _d.colorsSet) {
+        setColors(options.uiPreferences.colorsSet);
       }
     }
+    if ((_e = options.uiPreferences) == null ? void 0 : _e.borderRadius) {
+      setBorderRadius(options.uiPreferences.borderRadius);
+    }
     setAppState((state) => {
       const merged = mergeOptions(
-        {
-          language: options.language,
-          buttonConfiguration: options.buttonConfiguration,
-          widgetConfiguration: options.widgetConfiguration
-        },
+        __spreadValues(__spreadValues({}, options.language && { language: options.language }), !!options.walletsList && { walletsList: options.walletsList }),
         unwrap(state)
       );
       if (options.buttonRootId !== void 0) {
@@ -11622,25 +11888,24 @@ class TonConnectUI {
       if (!isDevice("desktop") && "universalLink" in this.walletInfo) {
         openLink(this.walletInfo.universalLink);
       }
-      const notification = (options == null ? void 0 : options.notifications) || ["before", "success", "error"];
-      const modals = (options == null ? void 0 : options.modals) || ["before"];
+      const { notifications: notifications2, modals } = this.getModalsAndNotificationsConfiguration(options);
       widgetController.setAction({
         name: "confirm-transaction",
-        showNotification: notification.includes("before"),
+        showNotification: notifications2.includes("before"),
         openModal: modals.includes("before")
       });
       try {
         const result = yield this.connector.sendTransaction(tx);
         widgetController.setAction({
           name: "transaction-sent",
-          showNotification: notification.includes("success"),
+          showNotification: notifications2.includes("success"),
           openModal: modals.includes("success")
         });
         return result;
       } catch (e2) {
         widgetController.setAction({
           name: "transaction-canceled",
-          showNotification: notification.includes("error"),
+          showNotification: notifications2.includes("error"),
           openModal: modals.includes("error")
         });
         if (e2 instanceof TonConnectError$1) {
@@ -11649,8 +11914,6 @@ class TonConnectUI {
           console.error(e2);
           throw new TonConnectUIError("Unhandled error:" + e2);
         }
-      } finally {
-        widgetController.clearAction();
       }
     });
   }
@@ -11689,6 +11952,44 @@ class TonConnectUI {
       throw new TonConnectUIError(`${buttonRootId2} element not found in the document.`);
     }
   }
+  getModalsAndNotificationsConfiguration(options) {
+    var _a, _b, _c;
+    const allActions = [
+      "before",
+      "success",
+      "error"
+    ];
+    let notifications2 = allActions;
+    if (((_a = this.actionsConfiguration) == null ? void 0 : _a.notifications) && ((_b = this.actionsConfiguration) == null ? void 0 : _b.notifications) !== "all") {
+      notifications2 = this.actionsConfiguration.notifications;
+    }
+    if (options == null ? void 0 : options.notifications) {
+      if (options.notifications === "all") {
+        notifications2 = allActions;
+      } else {
+        notifications2 = options.notifications;
+      }
+    }
+    let modals = ["before"];
+    if ((_c = this.actionsConfiguration) == null ? void 0 : _c.modals) {
+      if (this.actionsConfiguration.modals === "all") {
+        modals = allActions;
+      } else {
+        modals = this.actionsConfiguration.modals;
+      }
+    }
+    if (options == null ? void 0 : options.modals) {
+      if (options.modals === "all") {
+        modals = allActions;
+      } else {
+        modals = options.modals;
+      }
+    }
+    return {
+      notifications: notifications2,
+      modals
+    };
+  }
 }
 const TonConnectUIContext = createContext$1(null);
 let tonConnectUI = null;
@@ -11703,7 +12004,7 @@ const TonConnectUIProvider = (_a) => {
   }
   return /* @__PURE__ */ jsx(TonConnectUIContext.Provider, { value: tonConnectUI, children: children2 });
 };
-const TonConnectUIProvider$1 = memo$1(TonConnectUIProvider);
+const TonConnectUIProvider$1 = memo(TonConnectUIProvider);
 class TonConnectUIReactError extends TonConnectUIError {
   constructor(...args) {
     super(...args);
@@ -11738,7 +12039,7 @@ const TonConnectButton = ({ className: className2, style: style2 }) => {
   }, []);
   return /* @__PURE__ */ jsx("div", { id: buttonRootId, className: className2, style: style2 });
 };
-const TonConnectButton$1 = memo$1(TonConnectButton);
+const TonConnectButton$1 = memo(TonConnectButton);
 function useTonWallet() {
   const [tonConnectUI2] = useTonConnectUI();
   const [wallet, setWallet] = useState(