@hot-labs/kit 1.5.4 → 1.6.1

package/build/ui/toast/index.d.ts

@@ -0,0 +1,42 @@
+export interface ToastConfig {
+    id: string;
+    message: string;
+    type: "success" | "failed" | "pending";
+    progressText?: string;
+    progress?: number;
+    duration?: number;
+}
+export interface ToastController extends ToastConfig {
+    timer: NodeJS.Timeout | null;
+    update: (config: Partial<ToastConfig>) => void;
+    dismiss: () => void;
+}
+export declare class ToastManager {
+    root: HTMLDivElement | null;
+    toasts: ToastController[];
+    constructor();
+    mount(): void;
+    unmount(): void;
+    pending(message: string): ToastController & {
+        timer: NodeJS.Timeout | null;
+        update: (config: Partial<ToastConfig>) => void;
+        dismiss: () => void;
+    };
+    success(message: string): ToastController & {
+        timer: NodeJS.Timeout | null;
+        update: (config: Partial<ToastConfig>) => void;
+        dismiss: () => void;
+    };
+    failed(message: string): ToastController & {
+        timer: NodeJS.Timeout | null;
+        update: (config: Partial<ToastConfig>) => void;
+        dismiss: () => void;
+    };
+    present(config: Omit<ToastConfig, "id">): ToastController & {
+        timer: NodeJS.Timeout | null;
+        update: (config: Partial<ToastConfig>) => void;
+        dismiss: () => void;
+    };
+    update(id: string, config: Partial<Omit<ToastConfig, "id">>): void;
+    dismiss(id: string): void;
+}

package/build/ui/toast/index.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from "mobx-react-lite";
+import { action, makeObservable, observable } from "mobx";
+import { createRoot } from "react-dom/client";
+import styled from "styled-components";
+import uuid4 from "uuid4";
+import { PSmall } from "../uikit/text";
+export class ToastManager {
+    root = null;
+    toasts = [];
+    constructor() {
+        makeObservable(this, {
+            toasts: observable,
+            present: action,
+            dismiss: action,
+            update: action,
+            mount: action,
+            unmount: action,
+            pending: action,
+            success: action,
+            failed: action,
+        });
+    }
+    mount() {
+        if (document.getElementById("toast-root"))
+            return;
+        if (this.root)
+            return;
+        const root = document.createElement("div");
+        root.id = "toast-root";
+        document.body.appendChild(root);
+        createRoot(root).render(_jsx(ToastProvider, { manager: this }));
+        this.root = root;
+    }
+    unmount() {
+        if (!this.root)
+            return;
+        this.root.remove();
+        this.root = null;
+    }
+    pending(message) {
+        return this.present({ message, type: "pending", duration: Infinity });
+    }
+    success(message) {
+        return this.present({ message, type: "success" });
+    }
+    failed(message) {
+        return this.present({ message, type: "failed" });
+    }
+    present(config) {
+        this.mount();
+        const id = uuid4();
+        let timer = null;
+        if (config.duration !== Infinity) {
+            timer = setTimeout(() => this.dismiss(id), config.duration || 3000);
+        }
+        const toast = {
+            update: (config) => this.update(id, config),
+            dismiss: () => this.dismiss(id),
+            progressText: config.progressText,
+            message: config.message,
+            type: config.type,
+            timer: timer,
+            id,
+        };
+        this.toasts.unshift(toast);
+        return toast;
+    }
+    update(id, config) {
+        const toast = this.toasts.find((toast) => toast.id === id);
+        if (!toast)
+            return;
+        toast.message = config.message || toast.message;
+        toast.duration = config.duration || toast.duration;
+        toast.progress = config.progress || toast.progress;
+        toast.progressText = config.progressText || toast.progressText;
+        toast.type = config.type || toast.type;
+        if (config.duration) {
+            if (toast.timer)
+                clearTimeout(toast.timer);
+            if (config.duration === Infinity)
+                toast.timer = null;
+            else
+                toast.timer = setTimeout(() => this.dismiss(id), config.duration);
+        }
+    }
+    dismiss(id) {
+        this.toasts = this.toasts.filter((toast) => toast.id !== id);
+    }
+}
+const ToastProvider = observer(({ manager }) => {
+    return (_jsx(Root, { children: manager.toasts.map((toast) => (_jsx(Toast, { toast: toast }, toast.id))) }));
+});
+const Toast = observer(({ toast }) => {
+    return (_jsxs(Container, { onClick: () => toast.dismiss(), "$type": toast.type, children: [_jsxs(ToastHeader, { children: [toast.type === "success" && _jsx(SuccessIcon, {}), toast.type === "failed" && _jsx(ErrorIcon, {}), toast.type === "pending" && _jsx(CircleLoader, {}), _jsx(PSmall, { style: { color: "#fff", fontWeight: "bold" }, children: toast.message })] }), toast.progressText && (_jsx(ToastContent, { children: _jsx(PSmall, { children: toast.progressText }) }))] }));
+});
+const SuccessIcon = () => (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.7434 2.00439C17.2643 1.86277 21.8544 6.22285 21.9963 11.7437C22.138 17.2647 17.7771 21.8559 12.2561 21.9976C6.73539 22.139 2.14498 17.7781 2.00317 12.2573C1.86153 6.7364 6.22251 2.1462 11.7434 2.00439ZM18.0481 8.31299C17.7633 8.01235 17.2883 7.99898 16.9875 8.28369L10.5208 14.4097L7.00024 11.2095C6.69387 10.931 6.21934 10.9531 5.94067 11.2593C5.6623 11.5657 5.68436 12.0402 5.99048 12.3188L10.0276 15.9888L10.5422 16.4565L11.0471 15.978L18.0198 9.37354C18.3204 9.08874 18.3327 8.61369 18.0481 8.31299Z", fill: "#00DE93" }) }));
+const ErrorIcon = () => (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.7424 2.00537C17.2633 1.86369 21.8534 6.22385 21.9954 11.7446C22.1368 17.2655 17.776 21.8569 12.2551 21.9985C6.73479 22.1396 2.14419 17.7787 2.0022 12.2583C1.86056 6.73754 6.22177 2.14744 11.7424 2.00537ZM12.0002 14.2505C11.586 14.2505 11.2502 14.5863 11.2502 15.0005V15.5005C11.2504 15.9146 11.5861 16.2505 12.0002 16.2505C12.4142 16.2503 12.7501 15.9145 12.7502 15.5005V15.0005C12.7502 14.5864 12.4143 14.2506 12.0002 14.2505ZM12.0002 7.25049C11.586 7.25049 11.2502 7.58627 11.2502 8.00049V13.0005C11.2504 13.4146 11.5861 13.7505 12.0002 13.7505C12.4142 13.7503 12.7501 13.4145 12.7502 13.0005V8.00049C12.7502 7.58637 12.4143 7.25065 12.0002 7.25049Z", fill: "#F34747" }) }));
+const CircleLoader = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", children: _jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#FDBF1E", strokeWidth: "3", fill: "none", strokeLinecap: "round", strokeDasharray: "40", strokeDashoffset: "0", children: _jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) }) }));
+const Root = styled.div `
+  position: fixed;
+  bottom: 48px;
+  left: 12px;
+  right: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  z-index: 1000000000;
+`;
+const ToastContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-container, #1f1f1f);
+  padding: 8px 12px;
+  gap: 4px;
+`;
+const ToastHeader = styled.div `
+  display: flex;
+  padding: 12px;
+  align-items: center;
+  padding: 12px;
+  gap: 12px;
+`;
+const Container = styled.div `
+  border-radius: var(--border-radius-16, 16px);
+  border: 1px solid var(--border-border-default, #323232);
+  background: var(--surface-container-high, #272727);
+  box-shadow: -6px 6px 16px 0 rgba(0, 0, 0, 0.6);
+  overflow: hidden;
+  position: relative;
+
+  cursor: pointer;
+  width: 320px;
+
+  &::before {
+    content: "";
+    border-radius: 292px;
+    background: ${(props) => (props.$type === "success" ? "rgba(0, 222, 147, 0.08)" : props.$type === "failed" ? "rgba(243, 71, 71, 0.08)" : "rgba(253, 191, 30, 0.08)")};
+    filter: blur(14px);
+    position: absolute;
+    right: 33px;
+    top: -15px;
+    width: 292px;
+    height: 33px;
+  }
+
+  &:hover {
+    transform: scale(1.02);
+  }
+
+  animation: fadeIn 0.3s ease-in-out;
+  transition: 0.2s transform;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+//# sourceMappingURL=index.js.map

package/build/ui/toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/toast/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAiBvC,MAAM,OAAO,YAAY;IACvB,IAAI,GAA0B,IAAI,CAAC;IACnC,MAAM,GAAsB,EAAE,CAAC;IAE/B;QACE,cAAc,CAAC,IAAI,EAAE;YACnB,MAAM,EAAE,UAAU;YAClB,OAAO,EAAE,MAAM;YACf,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;YACf,OAAO,EAAE,MAAM;YACf,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,MAAM;SACf,CAAC,CAAC;IACL,CAAC;IAED,KAAK;QACH,IAAI,QAAQ,CAAC,cAAc,CAAC,YAAY,CAAC;YAAE,OAAO;QAClD,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO;QAEtB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,EAAE,GAAG,YAAY,CAAC;QACvB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAChC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,KAAC,aAAa,IAAC,OAAO,EAAE,IAAI,GAAI,CAAC,CAAC;QAC1D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QACvB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;QACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,OAAO,CAAC,OAAe;QACrB,OAAO,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IACxE,CAAC;IAED,OAAO,CAAC,OAAe;QACrB,OAAO,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;IACpD,CAAC;IAED,MAAM,CAAC,OAAe;QACpB,OAAO,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;IACnD,CAAC;IAED,OAAO,CAAC,MAA+B;QACrC,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;QACnB,IAAI,KAAK,GAA0B,IAAI,CAAC;QAExC,IAAI,MAAM,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACjC,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC;QACtE,CAAC;QAED,MAAM,KAAK,GAA4H;YACrI,MAAM,EAAE,CAAC,MAA4B,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC;YACjE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YAC/B,YAAY,EAAE,MAAM,CAAC,YAAY;YACjC,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,KAAK,EAAE,KAAK;YACZ,EAAE;SACH,CAAC;QAEF,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC3B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,CAAC,EAAU,EAAE,MAAwC;QACzD,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QAC3D,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC;QAChD,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC;QACnD,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC;QACnD,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,IAAI,KAAK,CAAC,YAAY,CAAC;QAC/D,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC;QAEvC,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;YACpB,IAAI,KAAK,CAAC,KAAK;gBAAE,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC3C,IAAI,MAAM,CAAC,QAAQ,KAAK,QAAQ;gBAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;;gBAChD,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;QACzE,CAAC;IACH,CAAC;IAED,OAAO,CAAC,EAAU;QAChB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC/D,CAAC;CACF;AAED,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,EAAE,OAAO,EAA6B,EAAE,EAAE;IACxE,OAAO,CACL,KAAC,IAAI,cACF,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC7B,KAAC,KAAK,IAAgB,KAAK,EAAE,KAAK,IAAtB,KAAK,CAAC,EAAE,CAAkB,CACvC,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA8B,EAAE,EAAE;IAC/D,OAAO,CACL,MAAC,SAAS,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,WAAS,KAAK,CAAC,IAAI,aAC1D,MAAC,WAAW,eACT,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,KAAC,WAAW,KAAG,EAC3C,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAC,SAAS,KAAG,EACxC,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,KAAC,YAAY,KAAG,EAC7C,KAAC,MAAM,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,YAAG,KAAK,CAAC,OAAO,GAAU,IAClE,EAEb,KAAK,CAAC,YAAY,IAAI,CACrB,KAAC,YAAY,cACX,KAAC,MAAM,cAAE,KAAK,CAAC,YAAY,GAAU,GACxB,CAChB,IACS,CACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,YAC5F,eACE,CAAC,EAAC,6fAA6f,EAC/f,IAAI,EAAC,SAAS,GACd,GACE,CACP,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,cAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,YAC5F,eACE,CAAC,EAAC,ipBAAipB,EACnpB,IAAI,EAAC,SAAS,GACd,GACE,CACP,CAAC;AAEF,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CACzB,cAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,YAC7C,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,WAAW,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,EAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,IAAI,EAAC,gBAAgB,EAAC,GAAG,YACzI,2BAAkB,aAAa,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,SAAS,EAAC,EAAE,EAAC,WAAW,EAAC,GAAG,EAAC,MAAM,EAAC,WAAW,EAAC,YAAY,GAAG,GACvH,GACL,CACP,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAStB,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM9B,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM7B,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA6C;;;;;;;;;;;;;;kBAcvD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,0BAA0B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BvK,CAAC"}

package/build/ui/uikit/button.js

@@ -33,7 +33,7 @@ export const ActionButton = styled.button `
 
   &:disabled {
     background: #3e3e3e;
-    color: #828282;
+    color: #828282 !important;
     cursor: not-allowed;
   }
 

package/build/ui/uikit/checkbox.d.ts

@@ -0,0 +1,8 @@
+export declare const Checkbox: ({ value, onChange, children }: {
+    value: boolean;
+    onChange: (value: boolean) => void;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    checked: boolean;
+}>> & string;

package/build/ui/uikit/checkbox.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+export const Checkbox = ({ value, onChange, children }) => {
+    return (_jsxs(CheckboxWrap, { checked: value, children: [_jsxs("div", { children: [value && _jsx(CheckboxIcon, {}), _jsx("input", { type: "checkbox", checked: value, onChange: () => onChange(!value) })] }), children] }));
+};
+export const CheckboxWrap = styled.label `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+
+  div {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    border: ${({ checked }) => (checked ? "transparent" : "1px solid rgba(255, 255, 255, 0.17)")};
+    background: ${({ checked }) => (checked ? "#fff" : "transparent")};
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  input {
+    opacity: 0;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+`;
+const CheckboxIcon = () => {
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { width: "16", height: "16", rx: "4", fill: "#FDBF1E" }), _jsx("path", { d: "M11.4917 5.40918C11.642 5.26695 11.8796 5.27368 12.022 5.42383C12.1643 5.57419 12.1576 5.81172 12.0073 5.9541L7.25732 10.4541L7.00439 10.6934L6.74756 10.459L3.99756 7.95898C3.84459 7.81976 3.83325 7.58289 3.97217 7.42969C4.1114 7.27653 4.34821 7.26524 4.50146 7.4043L6.99365 9.66992L11.4917 5.40918Z", fill: "black", stroke: "black", "stroke-width": "1", "stroke-linecap": "round", "stroke-linejoin": "round" })] }));
+};
+//# sourceMappingURL=checkbox.js.map

package/build/ui/uikit/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/ui/uikit/checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAqF,EAAE,EAAE;IAC3I,OAAO,CACL,MAAC,YAAY,IAAC,OAAO,EAAE,KAAK,aAC1B,0BACG,KAAK,IAAI,KAAC,YAAY,KAAG,EAC1B,gBAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,GAAI,IACvE,EACL,QAAQ,IACI,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAsB;;;;;;;;;;;cAWhD,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,qCAAqC,CAAC;kBAC9E,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;CAiBpE,CAAC;AAEF,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,OAAO,CACL,eAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aAC5F,eAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAG,EACrD,eACE,CAAC,EAAC,6SAA6S,EAC/S,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,OAAO,kBACD,GAAG,oBACD,OAAO,qBACN,OAAO,GACvB,IACE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/build/ui/uikit/text.js

@@ -1,69 +1,69 @@
 import styled from "styled-components";
 export const PSmall = styled.p `
-  color: var(--text-text-secondary, #bfbfbf);
-  font-family: var(--font-family-text, "Golos Text");
-  font-size: var(--P-Small-font-size, 14px);
-  line-height: var(--P-Small-line-height, 20px); /* 142.857% */
+  color: #bfbfbf;
+  font-family: "Golos Text";
+  font-size: 14px;
+  line-height: 20px;
   letter-spacing: -0.14px;
   font-style: normal;
   font-weight: 400;
   margin: 0;
 `;
 export const PMedium = styled.p `
-  color: var(--text-text-primary, #fff);
-  font-family: var(--font-family-text, "Golos Text");
-  font-size: var(--P-Default-font-size, 16px);
-  line-height: var(--P-Default-line-height, 22px); /* 137.5% */
+  color: #fff;
+  font-family: "Golos Text";
+  font-size: 16px;
+  line-height: 22px;
   letter-spacing: -0.16px;
   font-style: normal;
   font-weight: 500;
   margin: 0;
 `;
 export const PLarge = styled.p `
-  color: var(--text-text-primary, #fff);
-  font-family: var(--font-family-text, "Golos Text");
-  font-size: var(--P-Large-font-size, 18px);
-  line-height: var(--P-Large-line-height, 24px); /* 133.333% */
+  color: #fff;
+  font-family: "Golos Text";
+  font-size: 18px;
+  line-height: 24px;
   font-style: normal;
   font-weight: 500;
   letter-spacing: -0.18px;
   margin: 0;
 `;
 export const PTiny = styled.p `
-  color: var(--text-text-primary, #fff);
-  font-family: var(--font-family-text, "Golos Text");
-  font-size: var(--P-Tiny-font-size, 12px);
-  line-height: var(--P-Tiny-line-height, 16px);
+  color: #fff;
+  font-family: "Golos Text";
+  font-size: 12px;
+  line-height: 16px;
   letter-spacing: -0.12px;
   font-style: normal;
   font-weight: 400;
   margin: 0;
 `;
 export const H5 = styled.h5 `
-  color: var(--text-text-tertiary, #fff);
-  font-family: var(--font-family-headings, "Golos Text");
-  font-size: var(--h5-font-size, 24px);
-  line-height: var(--h5-line-height, 32px);
+  color: #fff;
+  font-family: "Golos Text";
+  font-size: 24px;
+  line-height: 32px;
   font-style: normal;
-  font-weight: 500;
+  font-weight: bold;
   margin: 0;
 `;
 export const H4 = styled.h4 `
   color: var(--text-text-primary, #fff);
   font-family: var(--font-family-headings, "Golos Text");
-  font-size: var(--h4-font-size, 32px);
-  line-height: var(--h4-line-height, 44px);
+  font-size: 32px;
+  line-height: 44px;
   font-style: normal;
-  font-weight: 600;
+  font-weight: bold;
   margin: 0;
 `;
 export const H6 = styled.h6 `
   color: var(--text-text-primary, #fff);
   font-family: var(--font-family-headings, "Golos Text");
-  font-size: var(--h6-font-size, 20px);
+  font-size: 20px;
   font-style: normal;
-  font-weight: 500;
-  line-height: var(--h6-line-height, 28px);
+  font-weight: bold;
+  line-height: 28px;
   margin: 0;
 `;
 //# sourceMappingURL=text.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hot-labs/kit",
-  "version": "1.5.4",
+  "version": "1.6.1",
   "description": "HOT Labs Kit is chain agnostic connector with omni payments",
   "license": "ISC",
   "author": "",

package/src/HotBridgeWithdrawal.ts

@@ -0,0 +1,80 @@
+import { WithdrawArgsWithPending } from "@hot-labs/omni-sdk";
+import { runInAction } from "mobx";
+import { hex } from "@scure/base";
+
+import type { HotKit } from "./HotKit";
+
+import { chains, Network, OmniToken, WalletType } from "./core/chains";
+import { ActivityController } from "./core/pendings";
+import { tokens } from "./core/tokens";
+
+export class HotBridgeWithdrawal extends ActivityController {
+  actionText = "Withdraw";
+
+  constructor(readonly args: WithdrawArgsWithPending, readonly kit: HotKit) {
+    super();
+    this.preview = tokens.get(this.args.token as OmniToken, this.args.chain);
+    this.title = `${this.preview.float(this.args.amount)} ${this.preview.symbol}`;
+    this.subtitle = new Date(this.args.timestamp).toLocaleString();
+  }
+
+  async action() {
+    try {
+      if (this.status === "pending") return;
+      runInAction(() => (this.status = "pending"));
+
+      if (this.args.chain === Network.Stellar) {
+        if (!this.kit.stellar) throw new Error("Stellar wallet not connected");
+        await this.kit.exchange.bridge.stellar.withdraw({
+          sendTransaction: (tx: any) => this.kit.stellar!.sendTransaction(tx),
+          sender: this.kit.stellar.address,
+          ...this.args,
+        });
+      }
+
+      if (this.args.chain === Network.Solana) {
+        if (!this.kit.solana) throw new Error("Solana wallet not connected");
+        const solana = await this.kit.exchange.bridge.solana();
+        await solana.withdraw({
+          sendTransaction: (tx: any) => this.kit.solana!.sendTransaction(tx),
+          sender: this.kit.solana.address,
+          ...this.args,
+        });
+      }
+
+      if (this.args.chain === Network.Ton || this.args.chain === Network.OmniTon) {
+        if (!this.kit.ton) throw new Error("Ton wallet not connected");
+        await this.kit.exchange.bridge.ton.withdraw({
+          sendTransaction: (tx: any) => this.kit.ton!.sendTransaction(tx),
+          refundAddress: this.kit.ton.address,
+          ...this.args,
+        });
+      }
+
+      if (chains.get(this.args.chain).type === WalletType.EVM) {
+        if (!this.kit.evm) throw new Error("EVM wallet not connected");
+        await this.kit.exchange.bridge.evm.withdraw({
+          sendTransaction: (tx: any) => this.kit.evm!.sendTransaction(tx),
+          ...this.args,
+        });
+      }
+
+      if (this.args.chain === Network.Gonka) {
+        if (!this.kit.cosmos) throw new Error("Gonka wallet not connected");
+        const cosmos = await this.kit.exchange.bridge.cosmos();
+        await cosmos.withdraw({
+          sendTransaction: (tx: any) => this.kit.cosmos!.sendTransaction(tx),
+          senderPublicKey: hex.decode(this.kit.cosmos.publicKey!),
+          sender: this.kit.cosmos.address,
+          ...this.args,
+        });
+      }
+
+      await this.kit.exchange.bridge.clearPendingWithdrawals([this.args]).catch(() => {});
+    } finally {
+      runInAction(() => (this.status = "success"));
+      const wallet = this.kit.wallets.find((w) => w.type === chains.get(this.args.chain).type);
+      if (wallet) this.kit.activity.fetchPendingWithdrawalsByChain(this.args.chain, wallet);
+    }
+  }
+}

package/src/{HotConnector.ts → HotKit.ts}

@@ -24,16 +24,18 @@ import type StellarWallet from "./stellar/wallet";
 import type TonWallet from "./ton/wallet";
 import type TronWallet from "./tron/wallet";
 
-import { openBridge, openConnector, openProfile, openWalletPicker } from "./ui/router";
-import { ConnectorType, OmniConnector } from "./core/OmniConnector";
+import * as Router from "./ui/router";
+import { ToastManager } from "./ui/toast";
+
 import { DataStorage, LocalStorage } from "./storage";
+import { ConnectorType, OmniConnector } from "./core/OmniConnector";
 import { Activity } from "./activity";
 
-interface HotConnectorOptions {
+interface HotKitOptions {
   apiKey: string;
   storage?: DataStorage;
   chains?: Record<number, ChainConfig>;
-  connectors?: (((wibe3: HotConnector) => Promise<OmniConnector>) | null | undefined)[];
+  connectors?: (((kit: HotKit) => Promise<OmniConnector>) | null | undefined)[];
   walletConnect?: {
     projectId?: string;
     metadata?: {
@@ -45,11 +47,13 @@ interface HotConnectorOptions {
   };
 }
 
-export class HotConnector {
+export class HotKit {
   public storage: DataStorage;
   public connectors: OmniConnector[] = [];
   public telemetry: Telemetry;
   public exchange: Exchange;
+  public toast = new ToastManager();
+  public router = Router;
 
   public activity: Activity;
   public version = packageJson.version;
@@ -66,7 +70,7 @@ export class HotConnector {
     metadata?: { name: string; description: string; url: string; icons: string[] };
   } = { webWallet: "https://app.hot-labs.org" };
 
-  constructor(options?: HotConnectorOptions) {
+  constructor(options?: HotKitOptions) {
     makeObservable(this, {
       priorityWallet: computed,
       walletsTokens: computed,
@@ -89,7 +93,7 @@ export class HotConnector {
     this.storage = options?.storage ?? new LocalStorage();
     this.telemetry = new Telemetry(this);
     this.activity = new Activity(this);
-    this.exchange = new Exchange();
+    this.exchange = new Exchange(this);
 
     const connectors: OmniConnector[] = [];
     const configConnectors = options?.connectors || defaultConnectors;
@@ -325,7 +329,7 @@ export class HotConnector {
         return bBalance - aBalance;
       })[0];
 
-    return openBridge(this, {
+    return this.router.openBridge(this, {
       mobileFullscreen: true,
       recipient: recipient,
       to: originalToken,
@@ -342,7 +346,7 @@ export class HotConnector {
     const sender = this.wallets.find((t) => t.type === orig.type)!;
     const recipient = Recipient.fromWallet(this.wallets.find((w) => !!w.omniAddress));
 
-    return openBridge(this, {
+    return this.router.openBridge(this, {
       mobileFullscreen: true,
       sender: sender,
       type: "exactOut",
@@ -355,18 +359,18 @@ export class HotConnector {
   }
 
   async openBridge() {
-    await openBridge(this);
+    await this.router.openBridge(this);
   }
 
   async openProfile() {
-    openProfile(this);
+    this.router.openProfile(this);
   }
 
   async connect(type?: WalletType) {
-    if (!type) return await openConnector(this);
+    if (!type) return await this.router.openConnector(this);
     const connector = this.connectors.find((t) => t.type === ConnectorType.WALLET && t.walletTypes.includes(type));
     if (!connector) throw new Error("Connector not found");
-    return await openWalletPicker(connector);
+    return await this.router.openWalletPicker(connector);
   }
 
   async disconnect(wallet: WalletType | OmniWallet) {