tek-wallet 0.0.822 → 0.0.823

package/dist/components/TekWallet/components/ui/AssetsBoard/index.js

@@ -26,6 +26,7 @@ var AssetsBoard = function () {
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(SwiperControlled_1.default, { swiperProps: {
                 slidesPerView: 1,
                 spaceBetween: 40,
+                autoHeight: true,
             }, tabParamName: "assets-tab", tabs: ASSETS_TABS === null || ASSETS_TABS === void 0 ? void 0 : ASSETS_TABS.map(function (type, index) {
                 return ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: type.name, value: index, "data-index": index, sx: {
                         padding: "".concat(theme.styleMixins.customPadding.p8, " ").concat(theme.styleMixins.customPadding.p16),

package/dist/components/TekWallet/components/ui/Input/ClearInput.d.ts

@@ -0,0 +1,5 @@
+import { SvgIconProps } from "@mui/material";
+export interface ClearInputProps extends SvgIconProps {
+}
+declare function ClearInput(props: ClearInputProps): import("react/jsx-runtime").JSX.Element;
+export default ClearInput;

package/dist/components/TekWallet/components/ui/{WithdrawFunction/components/tutorial.js → Input/ClearInput.js}

@@ -24,12 +24,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var SvgPath_1 = require("../../SvgPath");
-var Tutorial = function (props) {
-    var rest = __rest(props, []);
-    return ((0, jsx_runtime_1.jsx)(material_1.SvgIcon, __assign({ inheritViewBox: true, sx: {
-            width: 20,
-            height: 20,
-        } }, rest, { children: SvgPath_1.IC_TUTORIAL })));
-};
-exports.default = Tutorial;
+function ClearInput(props) {
+    var sx = props.sx, rest = __rest(props, ["sx"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.SvgIcon, __assign({ sx: __assign({ width: 24, height: 24 }, sx) }, rest, { children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "48px", viewBox: "0 -960 960 960", width: "48px", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M333.08-311.08 480-458l146.92 146.92 22-22L502-480l146.92-146.92-22-22L480-502 333.08-648.92l-22 22L458-480 311.08-333.08l22 22ZM480.13-120q-74.44 0-139.79-28.34t-114.48-77.42q-49.13-49.08-77.49-114.37Q120-405.42 120-479.87q0-74.67 28.34-140.41 28.34-65.73 77.42-114.36 49.08-48.63 114.37-76.99Q405.42-840 479.87-840q74.67 0 140.41 28.34 65.73 28.34 114.36 76.92 48.63 48.58 76.99 114.26Q840-554.81 840-480.13q0 74.44-28.34 139.79t-76.92 114.48q-48.58 49.13-114.26 77.49Q554.81-120 480.13-120Z" }) }) })));
+}
+exports.default = ClearInput;

package/dist/components/TekWallet/components/ui/Input/PasteInput.d.ts

@@ -0,0 +1,5 @@
+import { SvgIconProps } from "@mui/material";
+export interface PasteInputProps extends SvgIconProps {
+}
+declare function PasteInput(props: PasteInputProps): import("react/jsx-runtime").JSX.Element;
+export default PasteInput;

package/dist/components/TekWallet/components/ui/{WithdrawFunction/components/transferHistory.js → Input/PasteInput.js}

@@ -24,12 +24,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var SvgPath_1 = require("../../SvgPath");
-var TransferHistory = function (props) {
-    var rest = __rest(props, []);
-    return ((0, jsx_runtime_1.jsx)(material_1.SvgIcon, __assign({ inheritViewBox: true, sx: {
-            width: 20,
-            height: 20,
-        } }, rest, { children: SvgPath_1.IC_HISTORY })));
-};
-exports.default = TransferHistory;
+function PasteInput(props) {
+    var sx = props.sx, rest = __rest(props, ["sx"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.SvgIcon, __assign({ sx: __assign({ width: 24, height: 24 }, sx) }, rest, { children: (0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M14.625 10.6875V8.71875C14.625 8.04742 14.3583 7.40359 13.8836 6.92889C13.4089 6.45418 12.7651 6.1875 12.0938 6.1875H10.9688C10.745 6.1875 10.5304 6.09861 10.3721 5.94037C10.2139 5.78214 10.125 5.56753 10.125 5.34375V4.21875C10.125 3.54742 9.85832 2.90359 9.38361 2.42889C8.90891 1.95418 8.26508 1.6875 7.59375 1.6875H6.1875M6.1875 11.25H11.8125M6.1875 13.5H9M7.875 1.6875H4.21875C3.753 1.6875 3.375 2.0655 3.375 2.53125V15.4688C3.375 15.9345 3.753 16.3125 4.21875 16.3125H13.7812C14.247 16.3125 14.625 15.9345 14.625 15.4688V8.4375C14.625 6.64729 13.9138 4.9304 12.648 3.66453C11.3821 2.39866 9.66521 1.6875 7.875 1.6875Z", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }) })));
+}
+exports.default = PasteInput;

package/dist/components/TekWallet/components/ui/Input/QrScan.d.ts

@@ -0,0 +1,5 @@
+import { SvgIconProps } from "@mui/material";
+export interface QrScanProps extends SvgIconProps {
+}
+declare function QrScan(props: QrScanProps): import("react/jsx-runtime").JSX.Element;
+export default QrScan;

package/dist/components/TekWallet/components/ui/Input/QrScan.js

@@ -0,0 +1,31 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+function QrScan(props) {
+    var sx = props.sx, rest = __rest(props, ["sx"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.SvgIcon, __assign({ sx: __assign({ width: 24, height: 24 }, sx) }, rest, { children: (0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M5.625 2.8125H4.5C4.05245 2.8125 3.62323 2.99029 3.30676 3.30676C2.99029 3.62323 2.8125 4.05245 2.8125 4.5V5.625M12.375 2.8125H13.5C13.9476 2.8125 14.3768 2.99029 14.6932 3.30676C15.0097 3.62323 15.1875 4.05245 15.1875 4.5V5.625M15.1875 12.375V13.5C15.1875 13.9476 15.0097 14.3768 14.6932 14.6932C14.3768 15.0097 13.9476 15.1875 13.5 15.1875H12.375M5.625 15.1875H4.5C4.05245 15.1875 3.62323 15.0097 3.30676 14.6932C2.99029 14.3768 2.8125 13.9476 2.8125 13.5V12.375M11.25 9C11.25 9.59674 11.0129 10.169 10.591 10.591C10.169 11.0129 9.59674 11.25 9 11.25C8.40326 11.25 7.83097 11.0129 7.40901 10.591C6.98705 10.169 6.75 9.59674 6.75 9C6.75 8.40326 6.98705 7.83097 7.40901 7.40901C7.83097 6.98705 8.40326 6.75 9 6.75C9.59674 6.75 10.169 6.98705 10.591 7.40901C11.0129 7.83097 11.25 8.40326 11.25 9Z", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }) })));
+}
+exports.default = QrScan;

package/dist/components/TekWallet/components/ui/Input/index.d.ts

@@ -1,10 +1,12 @@
-import { TextFieldProps, BoxProps, SxProps } from "@mui/material";
-interface InputProps extends BoxProps {
-    inputRest?: TextFieldProps;
-    leftPart?: React.ReactNode;
-    rightPart?: React.ReactNode;
-    inputSx?: SxProps;
-}
-export type InputRef = HTMLInputElement;
-declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export default Input;
+import { TextFieldProps as MuiTextFieldProps } from "@mui/material";
+export type TextFieldProps = MuiTextFieldProps & {
+    className?: string;
+    canClear?: boolean;
+    canPaste?: boolean;
+    canCopy?: boolean;
+    canScan?: boolean;
+    onPaste?: () => void;
+    sanitizeScanText?: (text: string) => string;
+};
+declare function TextField(props: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export default TextField;

package/dist/components/TekWallet/components/ui/Input/index.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,6 +11,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,26 +58,90 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
+var ClearInput_1 = __importDefault(require("./ClearInput"));
 var react_1 = require("react");
-var mui_1 = require("../../../theme/mui");
-var Input = (0, react_1.forwardRef)(function (props, inputRef) {
-    var inputRest = props.inputRest, leftPart = props.leftPart, rightPart = props.rightPart, sx = props.sx, inputSx = props.inputSx, rest = __rest(props, ["inputRest", "leftPart", "rightPart", "sx", "inputSx"]);
-    var theme = (0, mui_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ ref: inputRef, sx: __assign(__assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g12, borderRadius: 1, paddingX: theme.styleMixins.customPadding.p16, border: "1px solid ".concat(theme.palette.divider), backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, backdropFilter: "blur(10px)" }), sx) }, rest, { children: [leftPart, (0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ autoComplete: "off", hiddenLabel: true, sx: __assign({ backgroundColor: "transparent", border: "none", outline: "none", flex: 1, height: "fit-content", "& .MuiInputBase-input": {
-                        border: "none",
-                        outline: "none",
-                        color: theme.palette.text.primary,
-                        fontSize: theme.typography.fontSize13,
-                        lineHeight: theme.typography.leading140,
-                        fontWeight: theme.typography.fontWeight400,
-                        padding: "".concat(theme.styleMixins.customPadding.p12, " ").concat(0, "px"),
-                        // height: "fit-content",
-                    }, "& fieldset": { border: "none" }, "& .MuiInputBase-input::placeholder": {
-                        fontSize: theme.typography.fontSize13,
-                    } }, inputSx) }, inputRest)), rightPart] })));
-});
-Input.displayName = "Input";
-exports.default = Input;
+var PasteInput_1 = __importDefault(require("./PasteInput"));
+var QrScan_1 = __importDefault(require("./QrScan"));
+// import ScanQR from "@/components/Molecules/ScanQR";
+var lodash_1 = __importDefault(require("lodash"));
+var cn_1 = require("../../../utils/cn");
+var QrCodeReader_1 = __importDefault(require("../QrCodeReader"));
+function TextField(props) {
+    var _this = this;
+    var className = props.className, value = props.value, canClear = props.canClear, canPaste = props.canPaste, canScan = props.canScan, onChange = props.onChange, slotProps = props.slotProps, sx = props.sx, sanitizeScanText = props.sanitizeScanText, rest = __rest(props, ["className", "value", "canClear", "canPaste", "canScan", "onChange", "slotProps", "sx", "sanitizeScanText"]);
+    var textFieldRef = (0, react_1.useRef)(null);
+    var input = (slotProps || {}).input;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var readOnly = (input || {}).readOnly;
+    var theme = (0, material_1.useTheme)();
+    var emitChange = (0, react_1.useCallback)(function (result) {
+        var _a, _b;
+        var input = (_a = textFieldRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("input");
+        if (input) {
+            var nativeInputValueSetter = (_b = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")) === null || _b === void 0 ? void 0 : _b.set;
+            nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : nativeInputValueSetter.call(input, result);
+            var event_1 = new Event("input", { bubbles: true });
+            input.dispatchEvent(event_1);
+        }
+    }, []);
+    var handlePaste = (0, react_1.useCallback)(function () { return __awaiter(_this, void 0, void 0, function () {
+        var input, clipboardData, nativeInputValueSetter, event_2;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    input = (_a = textFieldRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("input");
+                    if (!input) return [3 /*break*/, 2];
+                    return [4 /*yield*/, navigator.clipboard.readText()];
+                case 1:
+                    clipboardData = _c.sent();
+                    nativeInputValueSetter = (_b = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")) === null || _b === void 0 ? void 0 : _b.set;
+                    nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : nativeInputValueSetter.call(input, clipboardData);
+                    event_2 = new Event("input", { bubbles: true });
+                    input.dispatchEvent(event_2);
+                    _c.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    var handleScanResult = (0, react_1.useCallback)(function (result) {
+        if (sanitizeScanText) {
+            result = sanitizeScanText(result);
+        }
+        emitChange(result);
+    }, [sanitizeScanText, emitChange]);
+    var slotPropsMerge = (0, react_1.useMemo)(function () {
+        return lodash_1.default.merge({
+            input: {
+                endAdornment: ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "flex", alignItems: "center", gap: 0, color: "primary.main" }, children: [canClear && !!value && !readOnly && ((0, jsx_runtime_1.jsx)(ClearInput_1.default, { onClick: function () { return emitChange(""); }, sx: { width: 24, height: 24 } })), canScan && !value && !readOnly && ((0, jsx_runtime_1.jsx)(QrCodeReader_1.default, { onScan: handleScanResult, children: (0, jsx_runtime_1.jsx)(QrScan_1.default, { sx: { width: 24, height: 24 } }) })), canPaste && !value && !readOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [canScan && ((0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", flexItem: true, sx: { mx: 1.5, my: 0.5 } })), (0, jsx_runtime_1.jsx)(PasteInput_1.default, { onClick: handlePaste, sx: { width: 24, height: 24 } })] }))] })),
+                sx: {
+                    caretColor: theme.palette.primary.main,
+                    "&::selection": {
+                        backgroundColor: (0, material_1.alpha)(theme.palette.primary.main, 0.3),
+                    },
+                },
+            },
+        }, slotProps);
+    }, [
+        canClear,
+        value,
+        readOnly,
+        canScan,
+        emitChange,
+        canPaste,
+        handlePaste,
+        theme.palette.primary.main,
+        slotProps,
+        handleScanResult,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ ref: textFieldRef, className: (0, cn_1.cn)(className), value: value || "", onChange: onChange }, rest, { slotProps: slotPropsMerge, sx: __assign({ "& .MuiInputBase-input": {
+                pr: 2,
+            }, height: "fit-content" }, sx) })));
+}
+exports.default = TextField;

package/dist/components/TekWallet/components/ui/Input/index_bk.d.ts

@@ -0,0 +1,10 @@
+import { TextFieldProps, BoxProps, SxProps } from "@mui/material";
+interface InputProps extends BoxProps {
+    inputRest?: TextFieldProps;
+    leftPart?: React.ReactNode;
+    rightPart?: React.ReactNode;
+    inputSx?: SxProps;
+}
+export type InputRef = HTMLInputElement;
+declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/components/TekWallet/components/ui/Input/index_bk.js

@@ -0,0 +1,46 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_1 = require("react");
+var mui_1 = require("../../../theme/mui");
+var Input = (0, react_1.forwardRef)(function (props, inputRef) {
+    var inputRest = props.inputRest, leftPart = props.leftPart, rightPart = props.rightPart, sx = props.sx, inputSx = props.inputSx, rest = __rest(props, ["inputRest", "leftPart", "rightPart", "sx", "inputSx"]);
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ ref: inputRef, sx: __assign(__assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g12, borderRadius: 1, paddingX: theme.styleMixins.customPadding.p16, border: "1px solid ".concat(theme.palette.divider), backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, backdropFilter: "blur(10px)" }), sx) }, rest, { children: [leftPart, (0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ autoComplete: "off", hiddenLabel: true, sx: __assign({ backgroundColor: "transparent", border: "none", outline: "none", flex: 1, height: "fit-content", "& .MuiInputBase-input": {
+                        border: "none",
+                        outline: "none",
+                        color: theme.palette.text.primary,
+                        fontSize: theme.typography.fontSize13,
+                        lineHeight: theme.typography.leading140,
+                        fontWeight: theme.typography.fontWeight400,
+                        padding: "".concat(theme.styleMixins.customPadding.p12, " ").concat(0, "px"),
+                        // height: "fit-content",
+                    }, "& fieldset": { border: "none" }, "& .MuiInputBase-input::placeholder": {
+                        fontSize: theme.typography.fontSize13,
+                    } }, inputSx) }, inputRest)), rightPart] })));
+});
+Input.displayName = "Input";
+exports.default = Input;

package/dist/components/TekWallet/components/ui/QrCodeReader/index.d.ts

@@ -1,7 +1,8 @@
 import { BoxProps } from "@mui/material";
 import { IDetectedBarcode } from "@yudiel/react-qr-scanner";
 interface QrCodeReaderProps extends BoxProps {
-    onResult: (result: IDetectedBarcode[]) => void;
+    onResult?: (result: IDetectedBarcode[]) => void;
+    onScan?: (result: string) => void;
 }
 export interface QrCodeReaderRef {
     open: () => void;

package/dist/components/TekWallet/components/ui/QrCodeReader/index.js

@@ -55,7 +55,7 @@ var STYLES = {
     nodeSize: "10%",
 };
 var QrCodeReader = (0, react_1.forwardRef)(function (props, ref) {
-    var sx = props.sx, className = props.className, children = props.children, onResult = props.onResult;
+    var sx = props.sx, className = props.className, children = props.children, onResult = props.onResult, onScan = props.onScan;
     var qrReaderContainer = (0, react_1.useRef)(null);
     var drawerRef = (0, react_1.useRef)(null);
     var _a = (0, react_1.useState)(false), isOpen = _a[0], setIsOpen = _a[1];
@@ -124,6 +124,13 @@ var QrCodeReader = (0, react_1.forwardRef)(function (props, ref) {
             styleTag.remove();
         };
     }, []);
+    var handleScan = (0, react_1.useCallback)(function (result) {
+        var _a;
+        onResult === null || onResult === void 0 ? void 0 : onResult(result);
+        var text = (_a = result === null || result === void 0 ? void 0 : result[0]) === null || _a === void 0 ? void 0 : _a.rawValue;
+        onScan === null || onScan === void 0 ? void 0 : onScan(text);
+        close();
+    }, [onResult, onScan]);
     var _d = (0, providers_1.useWalletSetup)(), topOffset = _d.topOffset, overrideQRScanMethod = _d.overrideQRScanMethod;
     if (!!overrideQRScanMethod) {
         var handleOverrideQRScanMethod = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -149,7 +156,7 @@ var QrCodeReader = (0, react_1.forwardRef)(function (props, ref) {
                             },
                             cornerPoints: [],
                         };
-                        onResult([fakeIDetectedBarcode]);
+                        handleScan([fakeIDetectedBarcode]);
                         return [3 /*break*/, 3];
                     case 2:
                         error_1 = _a.sent();
@@ -254,7 +261,7 @@ var QrCodeReader = (0, react_1.forwardRef)(function (props, ref) {
                                             height: "100%",
                                             objectFit: "cover",
                                         },
-                                    }, onScan: onResult })] })] })) }) }) }));
+                                    }, onScan: handleScan })] })] })) }) }) }));
 });
 QrCodeReader.displayName = "QrCodeReader";
 exports.default = QrCodeReader;

package/dist/components/TekWallet/components/views/SendExternalView/components/Form.js

@@ -98,7 +98,6 @@ var lodash_1 = require("lodash");
 var Button_1 = __importStar(require("../../../ui/Button"));
 var expose_1 = require("../../../../services/axios/expose");
 var __1 = require("..");
-var QrCodeReader_1 = __importDefault(require("../../../ui/QrCodeReader"));
 var Icon_1 = __importDefault(require("../../../ui/Icon"));
 var get_est_fee_service_1 = __importDefault(require("../../../../services/axios/get-est-fee-service"));
 var type_1 = require("../../../../services/axios/get-activities-service/type");
@@ -131,7 +130,6 @@ function Form(props) {
     var _f = (0, react_1.useState)(undefined), comment = _f[0], setComment = _f[1];
     var _g = (0, react_1.useState)(), memoError = _g[0], setMemoError = _g[1];
     var _h = (0, react_1.useState)(false), isValidatingAddress = _h[0], setIsValidatingAddress = _h[1];
-    var scannerAddressQrCodeRef = (0, react_1.useRef)(null);
     var _j = (0, react_1.useState)(false), isEstimatingFee = _j[0], setIsLoadingEstimateFee = _j[1];
     var _k = (0, react_1.useState)(), estimateFee = _k[0], setEstimateFee = _k[1];
     var _l = (0, react_1.useState)(false), isEnoughBalanceToPayFee = _l[0], setIsEnoughBalanceToPayFee = _l[1];
@@ -273,52 +271,33 @@ function Form(props) {
         setSelectedNetwork(undefined);
         setNetworks([]);
     };
-    var handlePaste = function () { return __awaiter(_this, void 0, void 0, function () {
-        var text, address;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, navigator.clipboard.readText()];
-                case 1:
-                    text = _a.sent();
-                    address = text.trim();
-                    if (!address) {
-                        return [2 /*return*/];
-                    }
-                    handleChangeRecipientAddress({
-                        target: { value: address },
-                    });
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleClearRecipientAddress = function () {
-        handleChangeRecipientAddress({
-            target: { value: "" },
-        });
+    // const handlePaste = async () => {
+    //   const text = await navigator.clipboard.readText();
+    //   const address = text.trim();
+    //   if (!address) {
+    //     return;
+    //   }
+    //   handleChangeRecipientAddress({
+    //     target: { value: address },
+    //   } as React.ChangeEvent<HTMLInputElement>);
+    // };
+    // const handleClearRecipientAddress = () => {
+    //   handleChangeRecipientAddress({
+    //     target: { value: "" },
+    //   } as React.ChangeEvent<HTMLInputElement>);
+    // };
+    var sanitizeScanText = function (text) {
+        var address = "";
+        var isReceiveInternal = text === null || text === void 0 ? void 0 : text.includes("isTekWalletReceiveInternal");
+        if (isReceiveInternal) {
+            var data = JSON.parse(text);
+            address = data === null || data === void 0 ? void 0 : data.address;
+        }
+        else {
+            address = text;
+        }
+        return address;
     };
-    var handleScanAddressQrCode = function (result) { return __awaiter(_this, void 0, void 0, function () {
-        var text, address, isReceiveInternal, data;
-        var _a;
-        return __generator(this, function (_b) {
-            closeScannerAddressQrCode();
-            text = (_a = result === null || result === void 0 ? void 0 : result[0]) === null || _a === void 0 ? void 0 : _a.rawValue;
-            address = "";
-            isReceiveInternal = text === null || text === void 0 ? void 0 : text.includes("isTekWalletReceiveInternal");
-            if (isReceiveInternal) {
-                data = JSON.parse(text);
-                address = data === null || data === void 0 ? void 0 : data.address;
-            }
-            else {
-                address = text;
-            }
-            if (!address)
-                return [2 /*return*/];
-            handleChangeRecipientAddress({
-                target: { value: address },
-            });
-            return [2 /*return*/];
-        });
-    }); };
     var handleChangeAmount = function (e) {
         var amount = e.target.value;
         setAmount(amount);
@@ -363,14 +342,9 @@ function Form(props) {
             extraTransactions: null,
         }, estimateFee);
     };
-    var openScannerAddressQrCode = function () {
-        var _a;
-        (_a = scannerAddressQrCodeRef.current) === null || _a === void 0 ? void 0 : _a.open();
-    };
-    var closeScannerAddressQrCode = function () {
-        var _a;
-        (_a = scannerAddressQrCodeRef.current) === null || _a === void 0 ? void 0 : _a.close();
-    };
+    // const openScannerAddressQrCode = () => {
+    //   scannerAddressQrCodeRef.current?.open();
+    // };
     var handleKeyboardOpen = function () {
         setIsKeyboardOpen(true);
     };
@@ -417,28 +391,29 @@ function Form(props) {
                                         fontSize: theme.typography.fontSize14,
                                         color: theme.palette.text.primary,
                                         fontWeight: theme.typography.fontWeight700,
-                                    }, children: "Wallet address" }), (0, jsx_runtime_1.jsx)(Input_1.default, { sx: {
-                                        paddingX: theme.styleMixins.customPadding.p16,
-                                    }, inputRest: {
-                                        placeholder: "Enter recipient address",
-                                        value: recipientAddress,
-                                        onChange: handleChangeRecipientAddress,
-                                        id: "recipient-address-input-id",
-                                    }, rightPart: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: !!recipientAddress ? ((0, jsx_runtime_1.jsx)("label", { htmlFor: "recipient-address-input-id", children: (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handleClearRecipientAddress, sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, cursor: "pointer" }), children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 12, height: 12 }, children: SvgPath_1.IC_CLOSE }) }) })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, color: "primary.main" }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { onClick: openScannerAddressQrCode, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_SCAN", sx: { width: 20, height: 20 } }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "fullWidth", flexItem: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handlePaste, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_DOCUMENTS", sx: { width: 20, height: 20 } }) })] })) }) }), !!recipientAddressError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationError), children: recipientAddressError }))] }), allowSelectNetwork && ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, transition: { duration: 0.3 }, style: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8, willChange: "height, opacity" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    }, children: "Wallet address" }), (0, jsx_runtime_1.jsx)(Input_1.default, { canClear: true, canPaste: true, canScan: true, value: recipientAddress, sanitizeScanText: sanitizeScanText, slotProps: {
+                                        input: {
+                                            placeholder: "Enter recipient address",
+                                            onChange: handleChangeRecipientAddress,
+                                            id: "recipient-address-input-id",
+                                        },
+                                    } }), !!recipientAddressError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationError), children: recipientAddressError }))] }), allowSelectNetwork && ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, transition: { duration: 0.3 }, style: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8, willChange: "height, opacity" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                         fontSize: theme.typography.fontSize14,
                                         color: theme.palette.text.primary,
                                         fontWeight: theme.typography.fontWeight700,
                                     }, children: "Network" }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: selectNetworkDrawerRef, trigger: (0, jsx_runtime_1.jsx)(Input_1.default, { sx: {
-                                            paddingLeft: theme.styleMixins.customPadding.p12,
-                                            paddingRight: theme.styleMixins.customPadding.p16,
-                                        }, inputRest: {
-                                            placeholder: "Select a network",
-                                            value: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.name) || "",
-                                            onChange: handleChangeRecipientAddress,
-                                            inputProps: {
-                                                readOnly: true,
+                                            width: "100%",
+                                        }, value: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.name) || "", slotProps: {
+                                            input: {
+                                                placeholder: "Select a network",
+                                                onChange: handleChangeRecipientAddress,
+                                                inputProps: {
+                                                    readOnly: true,
+                                                },
+                                                startAdornment: ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_NETWORK", src: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.link) || undefined, sx: { width: 24, height: 24, mr: 2 } }) })),
+                                                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: "block" }, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 10, height: 18, display: "block" }, children: SvgPath_1.ARROW_DOWN }) })),
                                             },
-                                        }, leftPart: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_NETWORK", src: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.link) || undefined, sx: { width: 24, height: 24 } }) }), rightPart: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: "block" }, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 10, height: 18, display: "block" }, children: SvgPath_1.ARROW_DOWN }) }) }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "Select network", onClose: closeSelectNetwork, children: (0, jsx_runtime_1.jsx)(SelectNetwork_1.default, { networks: networks, selectedNetwork: selectedNetwork, selectedToken: selectedToken, onChangeNetwork: handleChangeNetwork }) }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, alignItems: "center", justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                        } }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "Select network", onClose: closeSelectNetwork, children: (0, jsx_runtime_1.jsx)(SelectNetwork_1.default, { networks: networks, selectedNetwork: selectedNetwork, selectedToken: selectedToken, onChangeNetwork: handleChangeNetwork }) }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, alignItems: "center", justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                 fontSize: theme.typography.fontSize14,
                                                 color: theme.palette.text.primary,
                                                 fontWeight: theme.typography.fontWeight700,
@@ -462,11 +437,13 @@ function Form(props) {
                                         fontSize: theme.typography.fontSize14,
                                         color: theme.palette.text.primary,
                                         fontWeight: theme.typography.fontWeight700,
-                                    }, children: "Memo" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Input_1.default, { inputRest: {
-                                                placeholder: "Enter memo if needed",
-                                                value: comment,
-                                                onChange: handleChangeComment,
-                                            } }), !!memoError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationError), children: memoError }))] }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationDescription), children: "Enter memo if your receiving platform requires one to avoid losing your funds." })] }), (0, jsx_runtime_1.jsx)(Fees_1.default, { isFeePaidByAmount: true, feesData: estimateFee, amount: +amount, tokenSlug: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug) || "", feesStyle: Fees_1.FeesStyle.WITH_BACKGROUND, setIsEnoughBalanceToPayFee: setIsEnoughBalanceToPayFee }), (0, jsx_runtime_1.jsx)(QrCodeReader_1.default, { ref: scannerAddressQrCodeRef, onResult: handleScanAddressQrCode }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { loading: isValidatingAddress || isEstimatingFee, onClick: handleContinue, status: !recipientAddress ||
+                                    }, children: "Memo" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Input_1.default, { slotProps: {
+                                                input: {
+                                                    placeholder: "Enter memo if needed",
+                                                    value: comment,
+                                                    onChange: handleChangeComment,
+                                                },
+                                            }, canClear: true, canPaste: true }), !!memoError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationError), children: memoError }))] }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationDescription), children: "Enter memo if your receiving platform requires one to avoid losing your funds." })] }), (0, jsx_runtime_1.jsx)(Fees_1.default, { isFeePaidByAmount: true, feesData: estimateFee, amount: +amount, tokenSlug: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug) || "", feesStyle: Fees_1.FeesStyle.WITH_BACKGROUND, setIsEnoughBalanceToPayFee: setIsEnoughBalanceToPayFee }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { loading: isValidatingAddress || isEstimatingFee, onClick: handleContinue, status: !recipientAddress ||
                                 !selectedNetwork ||
                                 !amount ||
                                 !!recipientAddressError ||