@tonconnect/ui-react 0.0.4 → 0.0.6

package/lib/index.umd.js

@@ -4221,7 +4221,8 @@ var __objRest = (source, exclude) => {
     });
   };
   class InjectedProvider {
-    constructor(injectedWalletKey) {
+    constructor(storage, injectedWalletKey) {
+      this.injectedWalletKey = injectedWalletKey;
       this.type = "injected";
       this.unsubscribeCallback = null;
       this.listenSubscriptions = false;
@@ -4230,13 +4231,14 @@ var __objRest = (source, exclude) => {
       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) {
@@ -4251,23 +4253,8 @@ var __objRest = (source, exclude) => {
     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* () {
@@ -4275,10 +4262,12 @@ var __objRest = (source, exclude) => {
           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);
         }
       });
@@ -4292,7 +4281,7 @@ var __objRest = (source, exclude) => {
     disconnect() {
       this.closeAllListeners();
       this.injectedWallet.disconnect();
-      return Promise.resolve();
+      return this.connectionStorage.removeConnection();
     }
     closeAllListeners() {
       var _a;
@@ -4309,7 +4298,30 @@ var __objRest = (source, exclude) => {
         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));
@@ -4319,6 +4331,12 @@ var __objRest = (source, exclude) => {
         }
       });
     }
+    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) {
@@ -4403,9 +4421,12 @@ var __objRest = (source, exclude) => {
     });
   };
   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* () {
@@ -4419,11 +4440,11 @@ var __objRest = (source, exclude) => {
     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() {
@@ -4546,6 +4567,7 @@ var __objRest = (source, exclude) => {
         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");
       }
@@ -4640,7 +4662,7 @@ var __objRest = (source, exclude) => {
     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);
       }
@@ -4723,6 +4745,8 @@ var __objRest = (source, exclude) => {
     }
   }
   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;
@@ -4831,7 +4855,7 @@ var __objRest = (source, exclude) => {
   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,
@@ -4927,8 +4951,8 @@ var __objRest = (source, exclude) => {
       runUpdates(() => {
         if (!err)
           setValue(() => v);
-        setError(err);
         setState(err ? "errored" : "ready");
+        setError(err);
         for (const c2 of contexts.keys())
           c2.decrement();
         contexts.clear();
@@ -4967,7 +4991,7 @@ var __objRest = (source, exclude) => {
         refetching
       }));
       if (typeof p2 !== "object" || !(p2 && "then" in p2)) {
-        loadEnd(pr, p2);
+        loadEnd(pr, p2, void 0, lookup2);
         return p2;
       }
       pr = p2;
@@ -4977,7 +5001,7 @@ var __objRest = (source, exclude) => {
         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: {
@@ -5016,11 +5040,13 @@ var __objRest = (source, exclude) => {
     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);
@@ -5058,7 +5084,7 @@ var __objRest = (source, exclude) => {
   function getListener() {
     return Listener;
   }
-  function createContext(defaultValue) {
+  function createContext(defaultValue, options) {
     const id = Symbol("context");
     return {
       id,
@@ -5072,12 +5098,12 @@ var __objRest = (source, exclude) => {
   }
   function children(fn) {
     const children2 = createMemo(fn);
-    const memo2 = createMemo(() => resolveChildren(children2()));
-    memo2.toArray = () => {
-      const c2 = memo2();
+    const memo = createMemo(() => resolveChildren(children2()));
+    memo.toArray = () => {
+      const c2 = memo();
       return Array.isArray(c2) ? c2 : c2 != null ? [c2] : [];
     };
-    return memo2;
+    return memo;
   }
   let SuspenseContext;
   function readSignal() {
@@ -5356,7 +5382,7 @@ var __objRest = (source, exclude) => {
     }
     return children2;
   }
-  function createProvider(id) {
+  function createProvider(id, options) {
     return function provider(props) {
       let res;
       createRenderEffect(() => res = untrack(() => {
@@ -5364,7 +5390,7 @@ var __objRest = (source, exclude) => {
           [id]: props.value
         };
         return children(() => props.children);
-      }));
+      }), void 0);
       return res;
     };
   }
@@ -5476,6 +5502,8 @@ var __objRest = (source, exclude) => {
       return _.get(property);
     },
     has(_, property) {
+      if (property === $PROXY)
+        return true;
       return _.has(property);
     },
     set: trueFn,
@@ -5496,68 +5524,116 @@ var __objRest = (source, exclude) => {
     }
   };
   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;
@@ -5574,11 +5650,12 @@ var __objRest = (source, exclude) => {
         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))
@@ -5592,7 +5669,7 @@ var __objRest = (source, exclude) => {
       }
       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();
@@ -5602,7 +5679,7 @@ var __objRest = (source, exclude) => {
       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;
@@ -5610,18 +5687,18 @@ var __objRest = (source, exclude) => {
   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",
@@ -5705,11 +5782,6 @@ var __objRest = (source, exclude) => {
     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) {
@@ -5767,12 +5839,12 @@ var __objRest = (source, exclude) => {
     }
   }
   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 = "";
@@ -5869,11 +5941,14 @@ var __objRest = (source, exclude) => {
     }
     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));
@@ -5931,9 +6006,8 @@ var __objRest = (source, exclude) => {
     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);
@@ -5988,7 +6062,7 @@ var __objRest = (source, exclude) => {
       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`];
@@ -5996,17 +6070,8 @@ var __objRest = (source, exclude) => {
         if (e2.cancelBubble)
           return;
       }
-      node = node.host && node.host !== node && node.host instanceof Node ? node.host : node.parentNode;
-    }
-  }
-  function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
-    props || (props = {});
-    if (!skipChildren) {
-      createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
+      node = node._$host || node.parentNode || node.host;
     }
-    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)
@@ -6121,7 +6186,7 @@ var __objRest = (source, exclude) => {
     }
     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);
   }
@@ -6180,10 +6245,11 @@ var __objRest = (source, exclude) => {
       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);
@@ -6486,9 +6552,9 @@ var __objRest = (source, exclude) => {
         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)
             });
           }
         }
@@ -6544,7 +6610,7 @@ var __objRest = (source, exclude) => {
   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;
@@ -6596,8 +6662,7 @@ var __objRest = (source, exclude) => {
     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() {
@@ -6607,16 +6672,15 @@ var __objRest = (source, exclude) => {
       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))
@@ -6712,59 +6776,235 @@ var __objRest = (source, exclude) => {
     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",
+      tertiary: "#C1CAD2",
+      success: "#29CC6A"
+    },
+    background: {
+      primary: "#FFFFFF",
+      secondary: "#F1F3F5"
+    },
+    text: {
       primary: "#0F0F0F",
       secondary: "#7A8999",
-      third: "#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"));
@@ -6796,28 +7036,47 @@ var __objRest = (source, exclude) => {
     li {
         list-style: none;
     }
-    button {
-        outline: none;
+    button {
+        outline: none;
+    }
+`;
+    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 createComponent(Styles, {});
+    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 {
@@ -6829,13 +7088,12 @@ var __objRest = (source, exclude) => {
     }
 `;
   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$) {
@@ -7243,7 +7501,7 @@ var __objRest = (source, exclude) => {
   };
   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);
@@ -7268,7 +7526,7 @@ var __objRest = (source, exclude) => {
   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()));
@@ -7283,7 +7541,7 @@ var __objRest = (source, exclude) => {
     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;
 
@@ -7368,14 +7626,12 @@ var __objRest = (source, exclude) => {
   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)`
@@ -7386,6 +7642,11 @@ var __objRest = (source, exclude) => {
   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, {
@@ -7446,9 +7707,23 @@ var __objRest = (source, exclude) => {
                   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$;
               }
             });
@@ -7493,7 +7768,7 @@ var __objRest = (source, exclude) => {
     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;
@@ -7506,7 +7781,7 @@ var __objRest = (source, exclude) => {
       },
       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;
       }
     });
   };
@@ -7519,7 +7794,7 @@ var __objRest = (source, exclude) => {
     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;
@@ -7532,7 +7807,7 @@ var __objRest = (source, exclude) => {
       },
       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;
       }
     });
   };
@@ -7544,17 +7819,17 @@ var __objRest = (source, exclude) => {
 
     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;
       }
     });
   };
@@ -7570,7 +7845,7 @@ var __objRest = (source, exclude) => {
   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",
@@ -7598,14 +7873,14 @@ var __objRest = (source, exclude) => {
       },
       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()));
@@ -7614,7 +7889,8 @@ var __objRest = (source, exclude) => {
   };
   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$) => {
@@ -7632,7 +7908,7 @@ var __objRest = (source, exclude) => {
   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$) => {
@@ -7650,7 +7926,7 @@ var __objRest = (source, exclude) => {
   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);
@@ -7680,7 +7956,7 @@ var __objRest = (source, exclude) => {
   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()));
@@ -7690,7 +7966,7 @@ var __objRest = (source, exclude) => {
   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$) => {
@@ -7727,17 +8003,27 @@ var __objRest = (source, exclude) => {
       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`
@@ -7747,15 +8033,15 @@ var __objRest = (source, exclude) => {
     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 {
@@ -7796,6 +8082,9 @@ var __objRest = (source, exclude) => {
       get ["class"]() {
         return props.class;
       },
+      get id() {
+        return props.id;
+      },
       get children() {
         return createComponent(UlStyled$1, {
           get children() {
@@ -7846,19 +8135,24 @@ var __objRest = (source, exclude) => {
       }
     });
   };
+  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) => {
@@ -7896,7 +8190,7 @@ var __objRest = (source, exclude) => {
             }
           }), null);
           return _el$;
-        })(), memo(() => props.icon)];
+        })(), createMemo(() => props.icon)];
       }
     });
   };
@@ -7956,7 +8250,7 @@ var __objRest = (source, exclude) => {
         return createComponent(SuccessIconStyled$1, {});
       },
       get ["class"]() {
-        return props.class;
+        return cn(props.class, "tc-notification");
       },
       children: "Transaction sent"
     });
@@ -8047,24 +8341,39 @@ var __objRest = (source, exclude) => {
           });
         }
       }));
-      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;
@@ -8156,7 +8465,7 @@ var __objRest = (source, exclude) => {
     } = 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(" "));
       }
@@ -8213,7 +8522,7 @@ var __objRest = (source, exclude) => {
       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(" "));
         }
@@ -8825,8 +9134,9 @@ var __objRest = (source, exclude) => {
       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);
@@ -8876,14 +9186,21 @@ var __objRest = (source, exclude) => {
       },
       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"
             })];
           }
@@ -8896,10 +9213,10 @@ var __objRest = (source, exclude) => {
       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",
@@ -8955,13 +9272,16 @@ var __objRest = (source, exclude) => {
                           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`;
@@ -8999,14 +9319,14 @@ var __objRest = (source, exclude) => {
     }
 
     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;
@@ -10699,6 +11019,11 @@ var __objRest = (source, exclude) => {
     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;
 `;
@@ -10709,8 +11034,8 @@ var __objRest = (source, exclude) => {
 `;
   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;
@@ -10727,6 +11052,7 @@ var __objRest = (source, exclude) => {
     line-height: 20px;
     letter-spacing: -0.32px;
     width: 100%;
+    border-radius: ${(props) => borders[props.theme.borderRadius]};
 `;
   const GetWalletStyled = styled.div`
     display: flex;
@@ -10734,7 +11060,7 @@ var __objRest = (source, exclude) => {
     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") {
@@ -10761,6 +11087,9 @@ var __objRest = (source, exclude) => {
       bridgeUrl: props.wallet.bridgeUrl
     });
     return createComponent(QrCodeModalStyled, {
+      get id() {
+        return props.id;
+      },
       get children() {
         return [createComponent(StyledIconButton, {
           icon: "arrow",
@@ -10773,7 +11102,7 @@ var __objRest = (source, exclude) => {
             };
           },
           get children() {
-            return ["Connect with ", memo(() => props.wallet.name)];
+            return ["Connect with ", createMemo(() => props.wallet.name)];
           }
         }), createComponent(H2, {
           translationKey: "walletModal.qrCodeModal.scan",
@@ -10783,7 +11112,7 @@ var __objRest = (source, exclude) => {
             };
           },
           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() {
@@ -10797,7 +11126,6 @@ var __objRest = (source, exclude) => {
         }), createComponent(ButtonsContainerStyled, {
           get children() {
             return [createComponent(ActionButtonStyled, {
-              appearance: "secondary",
               onClick: () => openLink(universalLink),
               get children() {
                 return createComponent(Translation, {
@@ -10808,7 +11136,7 @@ var __objRest = (source, exclude) => {
                     };
                   },
                   get children() {
-                    return ["Open ", memo(() => props.wallet.name)];
+                    return ["Open ", createMemo(() => props.wallet.name)];
                   }
                 });
               }
@@ -10818,7 +11146,6 @@ var __objRest = (source, exclude) => {
               },
               get children() {
                 return createComponent(ActionButtonStyled, {
-                  appearance: "secondary",
                   onClick: () => connector.connect({
                     jsBridgeKey: props.wallet.jsBridgeKey
                   }),
@@ -10842,10 +11169,9 @@ var __objRest = (source, exclude) => {
                 };
               },
               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, {
@@ -10963,6 +11289,9 @@ var __objRest = (source, exclude) => {
   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",
@@ -10992,7 +11321,6 @@ var __objRest = (source, exclude) => {
             });
           }
         }), createComponent(ButtonStyled$1, {
-          appearance: "secondary",
           onClick: () => openLinkBlank(learnMoreUrl),
           get children() {
             return createComponent(Translation, {
@@ -11004,12 +11332,6 @@ var __objRest = (source, exclude) => {
       }
     });
   };
-  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;
@@ -11042,8 +11364,52 @@ var __objRest = (source, exclude) => {
 `;
   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
@@ -11051,8 +11417,14 @@ var __objRest = (source, exclude) => {
     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);
@@ -11065,7 +11437,11 @@ var __objRest = (source, exclude) => {
       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({
@@ -11085,66 +11461,63 @@ var __objRest = (source, exclude) => {
       }
     });
     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"
+                });
               }
             })];
           }
-        });
+        })];
       }
     });
   };
@@ -11165,15 +11538,18 @@ var __objRest = (source, exclude) => {
     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;
           }
@@ -11187,7 +11563,6 @@ var __objRest = (source, exclude) => {
           },
           get children() {
             return createComponent(ButtonStyled, {
-              appearance: "secondary",
               onClick: () => props.onClose(),
               get children() {
                 return createComponent(Translation, {
@@ -11210,12 +11585,13 @@ var __objRest = (source, exclude) => {
       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)`
@@ -11229,7 +11605,10 @@ var __objRest = (source, exclude) => {
       get icon() {
         return createComponent(ErrorIconStyled, {});
       },
-      onClose: () => props.onClose()
+      onClose: () => props.onClose(),
+      get id() {
+        return props.id;
+      }
     });
   };
   const SuccessIconStyled = styled(SuccessIcon)`
@@ -11243,16 +11622,20 @@ var __objRest = (source, exclude) => {
       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() {
@@ -11262,7 +11645,8 @@ var __objRest = (source, exclude) => {
               },
               get children() {
                 return createComponent(TransactionSentModal, {
-                  onClose: () => setAction(null)
+                  onClose: () => setAction(null),
+                  id: "tc-transaction-sent-modal"
                 });
               }
             }), createComponent(Match, {
@@ -11271,7 +11655,8 @@ var __objRest = (source, exclude) => {
               },
               get children() {
                 return createComponent(TransactionCanceledModal, {
-                  onClose: () => setAction(null)
+                  onClose: () => setAction(null),
+                  id: "tc-transaction-canceled-modal"
                 });
               }
             }), createComponent(Match, {
@@ -11280,7 +11665,8 @@ var __objRest = (source, exclude) => {
               },
               get children() {
                 return createComponent(ConfirmTransactionModal, {
-                  onClose: () => setAction(null)
+                  onClose: () => setAction(null),
+                  id: "tc-confirm-modal"
                 });
               }
             })];
@@ -11372,146 +11758,20 @@ var __objRest = (source, exclude) => {
       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."
@@ -11521,9 +11781,13 @@ var __objRest = (source, exclude) => {
       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);
     }
@@ -11543,28 +11807,30 @@ var __objRest = (source, exclude) => {
       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) {
@@ -11625,25 +11891,24 @@ var __objRest = (source, exclude) => {
         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) {
@@ -11652,8 +11917,6 @@ var __objRest = (source, exclude) => {
             console.error(e2);
             throw new TonConnectUIError("Unhandled error:" + e2);
           }
-        } finally {
-          widgetController.clearAction();
         }
       });
     }
@@ -11692,6 +11955,44 @@ var __objRest = (source, exclude) => {
         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 = require$$0$2.createContext(null);
   let tonConnectUI = null;