tek-wallet 0.0.737 → 0.0.738

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

@@ -0,0 +1,254 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyIcon = void 0;
+exports.default = FiatDeposit;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_1 = require("react");
+var SvgPath_1 = require("../SvgPath");
+var ReceiveHistory_1 = __importDefault(require("../ReceiveHistory"));
+var xhub_keyboard_1 = require("xhub-keyboard");
+var useUniqueId_1 = require("../../../hooks/useUniqueId");
+var getDepositFiatInfoService_1 = __importDefault(require("../../../services/axios/get-deposit-fiat-info-service/getDepositFiatInfoService"));
+var useWallet_1 = __importDefault(require("../../../hooks/useWallet"));
+var image_1 = __importDefault(require("next/image"));
+var usehooks_ts_1 = require("usehooks-ts");
+var TimeText_1 = __importDefault(require("../TimeText"));
+var formatter_1 = __importDefault(require("../Formatter/functions/formatter"));
+var shareDrawer_1 = __importDefault(require("./components/shareDrawer"));
+var link_1 = __importDefault(require("next/link"));
+var DrawerComponent_1 = __importStar(require("../DrawerComponent"));
+var theme_1 = __importDefault(require("../../../theme/mui/deposit-fiat-theme/theme"));
+// Because PageHeader component don't work
+var BackArrow = function (props) {
+    return ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, props, { children: [(0, jsx_runtime_1.jsx)("mask", { id: "mask0_6061_2295", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "24", height: "24", children: (0, jsx_runtime_1.jsx)("rect", { width: "24", height: "24", fill: "#D9D9D9" }) }), (0, jsx_runtime_1.jsx)("g", { mask: "url(#mask0_6061_2295)", children: (0, jsx_runtime_1.jsx)("path", { d: "M14 17.6538L8.34619 12L14 6.34619L15.0538 7.40002L10.4538 12L15.0538 16.6L14 17.6538Z", fill: "#121212" }) })] })));
+};
+var Header = function (_a) {
+    var handleBack = _a.handleBack;
+    var historyRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Grid2, { display: "grid", py: "0.75rem", px: "1rem", container: true, sx: {
+            gridTemplateColumns: "1fr 1fr 1fr",
+            gridTemplateRows: "1fr",
+            alignItems: "center",
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Grid2, { children: (0, jsx_runtime_1.jsx)(BackArrow, { onClick: handleBack }) }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { display: "flex", children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "title01", sx: { width: "100%", textAlign: "center" }, children: "Top up" }) }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "end", gap: ".5rem", children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_HELP }), (0, jsx_runtime_1.jsx)(material_1.Divider, { flexItem: true, sx: { width: "1px" } }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: historyRef, trigger: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20, display: "block" }, children: SvgPath_1.IC_HISTORY }), direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(ReceiveHistory_1.default, { onClose: function () { var _a; return (_a = historyRef.current) === null || _a === void 0 ? void 0 : _a.close(); } }) })] }) })] }));
+};
+var CopyIcon = function () {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M11 11.5V13.75C11 14.164 10.664 14.5 10.25 14.5H3.75C3.55109 14.5 3.36032 14.421 3.21967 14.2803C3.07902 14.1397 3 13.9489 3 13.75V5.25C3 4.836 3.336 4.5 3.75 4.5H5C5.33505 4.49977 5.66954 4.52742 6 4.58267M11 11.5H13.25C13.664 11.5 14 11.164 14 10.75V7.5C14 4.52667 11.838 2.05933 9 1.58267C8.66954 1.52742 8.33505 1.49977 8 1.5H6.75C6.336 1.5 6 1.836 6 2.25V4.58267M11 11.5H6.75C6.55109 11.5 6.36032 11.421 6.21967 11.2803C6.07902 11.1397 6 10.9489 6 10.75V4.58267M14 9V7.75C14 7.15326 13.7629 6.58097 13.341 6.15901C12.919 5.73705 12.3467 5.5 11.75 5.5H10.75C10.5511 5.5 10.3603 5.42098 10.2197 5.28033C10.079 5.13968 10 4.94891 10 4.75V3.75C10 3.45453 9.9418 3.16195 9.82873 2.88896C9.71566 2.61598 9.54992 2.36794 9.34099 2.15901C9.13206 1.95008 8.88402 1.78435 8.61104 1.67127C8.33806 1.5582 8.04547 1.5 7.75 1.5H7", stroke: "#1E4841", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+};
+exports.CopyIcon = CopyIcon;
+function FiatDeposit(_a) {
+    var _b, _c, _d, _e, _f;
+    var children = _a.children;
+    var amountInputRef = (0, react_1.useRef)(null);
+    var _g = (0, useWallet_1.default)(), masterWallet = _g.masterWallet, transaction = _g.transaction, updateActivities = _g.updateActivities, receiveExternalTokens = _g.receiveExternalTokens, tokens = _g.tokens, pushNotification = _g.pushNotification;
+    var _h = (0, react_1.useState)(false), open = _h[0], setOpen = _h[1];
+    var _j = (0, react_1.useState)(false), openQR = _j[0], setOpenQR = _j[1];
+    var _k = (0, react_1.useState)(false), openShare = _k[0], setOpenShare = _k[1];
+    var keyboardId = (0, useUniqueId_1.useUniqueId)("receive-function-keyboard");
+    var _l = (0, react_1.useState)(""), inputAmount = _l[0], setInputAmount = _l[1];
+    var _m = (0, react_1.useState)(null), depositData = _m[0], setDepositData = _m[1];
+    var _o = (0, react_1.useState)(false), loading = _o[0], setLoading = _o[1];
+    var _p = (0, react_1.useState)(null), error = _p[0], setError = _p[1];
+    var _q = (0, react_1.useState)(false), copySuccess = _q[0], setCopySuccess = _q[1];
+    var _r = (0, usehooks_ts_1.useCountdown)({
+        countStart: 600,
+    }), count = _r[0], _s = _r[1], startCountdown = _s.startCountdown, resetCountdown = _s.resetCountdown;
+    var handleChangeAmount = function (value) {
+        var amountNumber = Number(value);
+        if (isNaN(amountNumber)) {
+            return;
+        }
+        setInputAmount(value);
+    };
+    var validateInput = function (input) {
+        var token = receiveExternalTokens === null || receiveExternalTokens === void 0 ? void 0 : receiveExternalTokens.find(function (item) { return item.slug.toLocaleLowerCase() === "vnd"; });
+        if (!token) {
+            setError("Token not found");
+            return false;
+        }
+        if (+input <= token.min_value) {
+            setError("Minimum deposit amount is ".concat((0, formatter_1.default)(token.min_value, false, false)));
+            return false;
+        }
+        if (+input > token.max_value) {
+            setError("Maximum deposit amount is ".concat((0, formatter_1.default)(token.max_value, false, false)));
+            return false;
+        }
+        return true;
+    };
+    var handleClick = function () {
+        if (loading)
+            return;
+        if (!validateInput(inputAmount.toString())) {
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        (0, getDepositFiatInfoService_1.default)({
+            amount: +inputAmount,
+            to_address: masterWallet !== null && masterWallet !== void 0 ? masterWallet : "",
+            currency_slug: "vnd",
+            network: "ton",
+            network_address: "vnd",
+            await_completion: false,
+            orderInfo: "test",
+            email: "test@gmail.com",
+        })
+            .then(function (res) {
+            setDepositData(res);
+            setOpenQR(true);
+            resetCountdown();
+            startCountdown();
+        })
+            .finally(function () {
+            setLoading(false);
+        });
+    };
+    (0, react_1.useEffect)(function () {
+        if (copySuccess) {
+            var timeout_1 = setTimeout(function () { return setCopySuccess(false); }, 2000);
+            return function () { return clearTimeout(timeout_1); };
+        }
+    }, [copySuccess]);
+    var handleCopyLink = function (text) {
+        if (!(depositData === null || depositData === void 0 ? void 0 : depositData.id) || copySuccess)
+            return;
+        navigator.clipboard
+            .writeText(text)
+            .then(function () {
+            setCopySuccess(true);
+        })
+            .catch(function (err) {
+            console.error("Failed to copy link:", err);
+        });
+    };
+    (0, react_1.useEffect)(function () {
+        if ((transaction === null || transaction === void 0 ? void 0 : transaction.transaction_status) === "success") {
+            updateActivities();
+            setOpen(false);
+            setOpenQR(false);
+            setOpenShare(false);
+            setInputAmount("");
+            pushNotification({
+                message: "Deposit successful!",
+                type: "success",
+                id: "deposit-fiat-success",
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [transaction]);
+    (0, react_1.useEffect)(function () {
+        if (inputAmount && !isNaN(Number(inputAmount)) && validateInput(inputAmount.toString())) {
+            setError(null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputAmount]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.ThemeProvider, { theme: theme_1.default, children: [(0, jsx_runtime_1.jsx)("span", { onClick: function (e) {
+                    e.stopPropagation();
+                    setOpen(true);
+                }, children: children }), (0, jsx_runtime_1.jsxs)(material_1.Drawer, { open: open, onClose: function () {
+                    setOpen(false);
+                    setInputAmount("");
+                }, anchor: "right", keepMounted: false, onClick: function (e) { return e.stopPropagation(); }, children: [(0, jsx_runtime_1.jsx)(Header, { handleBack: function () {
+                            setOpen(false);
+                            setInputAmount("");
+                        } }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { id: keyboardId, onChange: handleChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), keyboardId: "amount-keyboard-id", classNames: {
+                            children: "fc",
+                        }, styles: {
+                            container: {
+                                height: "100%",
+                            },
+                        }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { height: "100%", flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { height: 0, flex: 1, p: "1rem", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { flexDirection: "column", p: "1rem", sx: {
+                                            backgroundColor: theme_1.default.palette.tertiary.main,
+                                            border: "1px solid",
+                                            borderColor: theme_1.default.palette.accent3.main,
+                                            borderRadius: "1rem",
+                                            gap: "0.5rem",
+                                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "title02", color: "positive", children: "You Pay" }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { autoFocus: true, alwaysFocus: true, ref: amountInputRef, elementsAcceptIds: ["amount-keyboard-id"], value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, styles: {
+                                                        container: {
+                                                            border: "1px solid ".concat(error ? theme_1.default.palette.error.main : theme_1.default.palette.primary.main),
+                                                        },
+                                                    }, rightElement: (0, jsx_runtime_1.jsxs)(material_1.Stack, { flexDirection: "row", alignItems: "center", gap: "4px", flexShrink: 0, pl: "1rem", children: [(0, jsx_runtime_1.jsx)(image_1.default, { alt: "", width: 16, height: 16, src: (_c = (_b = tokens === null || tokens === void 0 ? void 0 : tokens.find(function (item) { return item.currency_slug.toLocaleLowerCase() === "vnd"; })) === null || _b === void 0 ? void 0 : _b.currency.link) !== null && _c !== void 0 ? _c : "/" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "content01", color: "accent2", children: "VND" })] }) }) }), error && ((0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "content02", color: "error", display: "flex", alignItems: "center", gap: "4px", children: [(0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 5.25V7.4375M12.25 7C12.25 7.68944 12.1142 8.37213 11.8504 9.00909C11.5865 9.64605 11.1998 10.2248 10.7123 10.7123C10.2248 11.1998 9.64605 11.5865 9.00909 11.8504C8.37213 12.1142 7.68944 12.25 7 12.25C6.31056 12.25 5.62787 12.1142 4.99091 11.8504C4.35395 11.5865 3.7752 11.1998 3.28769 10.7123C2.80018 10.2248 2.41347 9.64605 2.14963 9.00909C1.8858 8.37213 1.75 7.68944 1.75 7C1.75 5.60761 2.30312 4.27226 3.28769 3.28769C4.27226 2.30312 5.60761 1.75 7 1.75C8.39239 1.75 9.72774 2.30312 10.7123 3.28769C11.6969 4.27226 12.25 5.60761 12.25 7ZM7 9.1875H7.00467V9.19217H7V9.1875Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }), error] }))] }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { pt: "12px", id: "input-amount-action", children: (0, jsx_runtime_1.jsx)(material_1.Box, { px: "1rem", pb: "1.5rem", children: (0, jsx_runtime_1.jsx)(material_1.Button, { loading: loading, disabled: loading || !!error, onClick: handleClick, fullWidth: true, children: "Continue" }) }) })] }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Drawer, { open: openQR, onClose: function () { return setOpenQR(false); }, anchor: "right", keepMounted: false, onClick: function (e) { return e.stopPropagation(); }, children: [(0, jsx_runtime_1.jsx)(Header, { handleBack: function () {
+                            setOpen(false);
+                            setOpenQR(false);
+                            setInputAmount("");
+                        } }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { height: "100%", p: "1rem", pt: "26%", children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { height: 0, flex: 1, width: "100%", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", p: "1rem", sx: {
+                                        backgroundColor: theme_1.default.palette.tertiary.main,
+                                        border: "1px solid",
+                                        borderColor: theme_1.default.palette.accent3.main,
+                                        borderRadius: "1rem",
+                                        gap: "0.75rem",
+                                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", width: "45%", mt: "-25%", sx: { aspectRatio: "1 / 1" }, children: [(0, jsx_runtime_1.jsx)(image_1.default, { alt: "", fill: true, src: (_d = depositData === null || depositData === void 0 ? void 0 : depositData.qr_code) !== null && _d !== void 0 ? _d : "/", style: { filter: count === 0 ? "blur(6px)" : "none" } }), count === 0 && ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", position: "absolute", alignItems: "center", justifyContent: "center", sx: {
+                                                        background: "transparent",
+                                                        inset: 0,
+                                                    }, onClick: handleClick, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M16.0234 9.34794H21.0154L17.8344 6.16494C16.8103 5.14081 15.5346 4.40433 14.1356 4.02955C12.7366 3.65476 11.2636 3.65487 9.86464 4.02986C8.4657 4.40486 7.19014 5.14153 6.16617 6.16581C5.14221 7.19009 4.40594 8.46588 4.03138 9.86494M2.98537 19.6439V14.6519M2.98537 14.6519H7.97738M2.98537 14.6519L6.16537 17.8349C7.18949 18.8591 8.46517 19.5955 9.86416 19.9703C11.2632 20.3451 12.7362 20.345 14.1351 19.97C15.534 19.595 16.8096 18.8584 17.8336 17.8341C18.8575 16.8098 19.5938 15.534 19.9684 14.1349M21.0154 4.35594V9.34594", stroke: "#1E4841", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "title01", sx: {
+                                                fontSize: "1.5rem",
+                                                fontWeight: 600,
+                                                lineHeight: "140%",
+                                                display: "flex",
+                                                alignItems: "center",
+                                                flexDirection: "column",
+                                            }, color: "primary", children: [(0, formatter_1.default)((_e = depositData === null || depositData === void 0 ? void 0 : depositData.amount) !== null && _e !== void 0 ? _e : 0, false, false) || "--", (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "title01", sx: {
+                                                        fontSize: "0.938rem",
+                                                        fontWeight: 500,
+                                                        lineHeight: "140%",
+                                                    }, color: "accent2", children: "VND" })] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { display: "flex", alignItems: "center", gap: "0.375rem", variant: "title03", color: "accent2", children: ["Top up time left", (0, jsx_runtime_1.jsx)(TimeText_1.default, { seconds: count }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 5V7.5M13 7C13 7.78793 12.8448 8.56815 12.5433 9.2961C12.2417 10.0241 11.7998 10.6855 11.2426 11.2426C10.6855 11.7998 10.0241 12.2417 9.2961 12.5433C8.56815 12.8448 7.78793 13 7 13C6.21207 13 5.43185 12.8448 4.7039 12.5433C3.97595 12.2417 3.31451 11.7998 2.75736 11.2426C2.20021 10.6855 1.75825 10.0241 1.45672 9.2961C1.15519 8.56815 1 7.78793 1 7C1 5.4087 1.63214 3.88258 2.75736 2.75736C3.88258 1.63214 5.4087 1 7 1C8.5913 1 10.1174 1.63214 11.2426 2.75736C12.3679 3.88258 13 5.4087 13 7ZM7 9.5H7.00533V9.50533H7V9.5Z", stroke: "#1E4841", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { flexItem: true }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { display: "flex", flexDirection: "column", alignItems: "center", gap: "0.375rem", variant: "title01", children: [depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_name, (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "content02", color: "accent2", children: depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.bank_name }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "title02", display: "flex", alignItems: "center", gap: "0.25rem", children: [copySuccess ? "Copied!" : depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_number, (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "icon", onClick: function () { var _a; return handleCopyLink((_a = depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_number) !== null && _a !== void 0 ? _a : ""); }, children: (0, jsx_runtime_1.jsx)(exports.CopyIcon, {}) })] }), (0, jsx_runtime_1.jsx)(link_1.default, { href: (_f = depositData === null || depositData === void 0 ? void 0 : depositData._link.payment_link.href) !== null && _f !== void 0 ? _f : "#", target: "_blank", rel: "noopener noreferrer", style: {
+                                                        marginTop: "-0.5rem",
+                                                    }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "content02", sx: { textDecoration: "underline", fontStyle: "italic" }, children: "Transfer" }) })] })] }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { pt: "0.75rem", pb: "1rem", width: "100%", children: (0, jsx_runtime_1.jsx)(material_1.Button, { disabled: loading, loading: loading, onClick: function () {
+                                        if (count === 0) {
+                                            handleClick();
+                                        }
+                                        else {
+                                            setOpenShare(true);
+                                        }
+                                    }, fullWidth: true, children: count === 0 ? "Reload" : "Share" }) })] })] }), (0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, { keepMounted: false, anchor: "bottom", open: openShare, onOpen: function () { return setOpenShare(true); }, onClose: function () { return setOpenShare(false); }, classes: { paper: "rounded-t-2xl" }, sx: {
+                    zIndex: 1201,
+                }, onClick: function (e) { return e.stopPropagation(); }, children: (0, jsx_runtime_1.jsx)(shareDrawer_1.default, { count: count, depositData: depositData, handleRefresh: handleClick, onClose: function () { return setOpenShare(false); } }) })] }));
+}

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

@@ -45,22 +45,23 @@ var Formatter = function (_a) {
         var isSmallValue = valueInNumber > 0 && valueInNumber < 0.01;
         if (isSmallValue) {
             if (showLessThan) {
-                return ((0, jsx_runtime_1.jsxs)("span", { className: (0, clsx_1.default)(className), children: ["< ", "0", userSetting.decimalDot, "01"] }));
+                return ((0, jsx_runtime_1.jsxs)("span", { className: (0, clsx_1.default)(className), children: [start, "< ", "0", userSetting.decimalDot, "01"] }));
             }
             else {
-                return ((0, jsx_runtime_1.jsxs)("span", { className: (0, clsx_1.default)(className), children: ["0.0", (0, jsx_runtime_1.jsx)("sub", { children: lengthFromDot }), formattedNumber.slice(2 + lengthFromDot, lengthValueAllowed - 2 + lengthFromDot)] }));
+                return ((0, jsx_runtime_1.jsxs)("span", { className: (0, clsx_1.default)(className), children: [start, "0.0", (0, jsx_runtime_1.jsx)("sub", { children: lengthFromDot }), formattedNumber.slice(2 + lengthFromDot, lengthValueAllowed - 2 + lengthFromDot)] }));
             }
         }
-        return ((0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)(className), children: (0, formatter_1.default)(valueInNumber, useCompact, useCompactOnThousand, lengthValueAllowed) }));
+        return ((0, jsx_runtime_1.jsxs)("span", { className: (0, clsx_1.default)(className), children: [start, (0, formatter_1.default)(valueInNumber, useCompact, useCompactOnThousand, lengthValueAllowed)] }));
     }, [
-        allowShowZero,
-        lengthValueAllowed,
-        showLessThan,
+        valueInNumber,
+        className,
+        start,
         useCompact,
         useCompactOnThousand,
+        lengthValueAllowed,
+        allowShowZero,
+        showLessThan,
         userSetting.decimalDot,
-        valueInNumber,
-        className,
     ]);
     var trigger = valueDisplay();
     return ((0, jsx_runtime_1.jsx)(CustomTooltip_1.default, { disabled: disableTooltip, trigger: addUnit(trigger), sx: {

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

@@ -199,7 +199,6 @@ var HistorySwap = function (props) {
                         return [3 /*break*/, 5];
                     case 4:
                         setLoading(false);
-                        console.error("Error fetching swap history.");
                         return [7 /*endfinally*/];
                     case 5: return [2 /*return*/];
                 }
@@ -410,13 +409,13 @@ var HistorySwap = function (props) {
                                     timestamp: selectedItem.date_created,
                                     success: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.transaction_status,
                                     message: "",
-                                } }, "detail-".concat(currentId))) }) }, "drawer-".concat(currentId)), resultData.map(function (item) {
+                                } }, "detail-".concat(currentId))) }) }, "drawer-".concat(currentId)), resultData.map(function (item, i) {
                         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
                         return ((0, jsx_runtime_1.jsx)(material_1.Box, { onClick: function () {
                                 handleTransactionClick(item.id);
                             }, sx: {
                                 mt: theme.mixins.customMargin.m8,
-                            }, children: (0, jsx_runtime_1.jsx)(CardHistorySwap_1.default, { amount: item.amount, status: item.transaction_status, fromCurrency: (_a = item.currency_data) === null || _a === void 0 ? void 0 : _a.full_name, toCurrency: (_f = (_e = (_d = (_c = (_b = item.fee_info) === null || _b === void 0 ? void 0 : _b.fee_detail) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.currency) === null || _e === void 0 ? void 0 : _e.outputs[0]) === null || _f === void 0 ? void 0 : _f.full_name, swapAmount: (_l = (_k = (_j = (_h = (_g = item.fee_info) === null || _g === void 0 ? void 0 : _g.fee_detail) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.currency) === null || _k === void 0 ? void 0 : _k.outputs[0]) === null || _l === void 0 ? void 0 : _l.swap_amount, date: item.date_created, description: item.description }, item.id) }, item.id));
+                            }, children: (0, jsx_runtime_1.jsx)(CardHistorySwap_1.default, { amount: item.amount, status: item.transaction_status, fromCurrency: (_a = item.currency_data) === null || _a === void 0 ? void 0 : _a.full_name, toCurrency: (_f = (_e = (_d = (_c = (_b = item.fee_info) === null || _b === void 0 ? void 0 : _b.fee_detail) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.currency) === null || _e === void 0 ? void 0 : _e.outputs[0]) === null || _f === void 0 ? void 0 : _f.full_name, swapAmount: (_l = (_k = (_j = (_h = (_g = item.fee_info) === null || _g === void 0 ? void 0 : _g.fee_detail) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.currency) === null || _k === void 0 ? void 0 : _k.outputs[0]) === null || _l === void 0 ? void 0 : _l.swap_amount, date: item.date_created, description: item.description }, item.id) }, i));
                     })] })) : (resultData.length == 0 &&
                 !isLoading && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign(__assign({}, theme.mixins.center), { padding: theme.mixins.customPadding.p24 }), theme.mixins.column), { gap: theme.mixins.gaps.g4, textAlign: "center" }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("result"), width: 62, height: 62, sx: {
                             mx: "auto",

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

@@ -8,6 +8,7 @@ export interface ListItemCustomProps extends Omit<ListItemButtonProps, "title">
     disabled?: boolean;
     rightIcon?: React.ReactNode | boolean;
     hideDefaultRightIcon?: boolean;
+    recommended?: boolean;
 }
-declare function ListItemCustom({ title, description, icon, rightIcon, hideDefaultRightIcon, sx, ...rest }: ListItemCustomProps): import("react/jsx-runtime").JSX.Element;
+declare function ListItemCustom({ title, description, icon, rightIcon, hideDefaultRightIcon, sx, recommended, ...rest }: ListItemCustomProps): import("react/jsx-runtime").JSX.Element;
 export default ListItemCustom;

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

@@ -31,9 +31,16 @@ var ThemeProvider_1 = require("../../../providers/ThemeProvider");
 var Text_1 = __importDefault(require("../Text"));
 var SvgPath_1 = require("../SvgPath");
 function ListItemCustom(_a) {
-    var title = _a.title, description = _a.description, icon = _a.icon, rightIcon = _a.rightIcon, hideDefaultRightIcon = _a.hideDefaultRightIcon, sx = _a.sx, rest = __rest(_a, ["title", "description", "icon", "rightIcon", "hideDefaultRightIcon", "sx"]);
+    var title = _a.title, description = _a.description, icon = _a.icon, rightIcon = _a.rightIcon, hideDefaultRightIcon = _a.hideDefaultRightIcon, sx = _a.sx, recommended = _a.recommended, rest = __rest(_a, ["title", "description", "icon", "rightIcon", "hideDefaultRightIcon", "sx", "recommended"]);
     var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, __assign({}, rest, { sx: __assign(__assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g12, padding: theme.mixins.customPadding.p16, border: "1px solid ".concat(theme.palette.border.accent3), borderRadius: theme.mixins.customRadius.r16, backgroundColor: theme.palette.background.white }), sx), children: [icon, (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4, alignItems: "start", flex: 1 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.listTitle), children: title }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.listDescription), children: description })] }), rightIcon !== null && rightIcon !== void 0 ? rightIcon : (!hideDefaultRightIcon && (
+    return ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, __assign({}, rest, { sx: __assign(__assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g12, padding: "calc(".concat(theme.mixins.customPadding.p16, " + 6px) ").concat(theme.mixins.customPadding.p16), border: "1px solid ".concat(theme.palette.border.accent3), borderRadius: theme.mixins.customRadius.r16, backgroundColor: theme.palette.background.white, position: "relative", overflow: "hidden" }), sx), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    position: "absolute",
+                    top: "-9px",
+                    left: "-1px",
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
+                            width: "6.6rem",
+                            height: "auto",
+                        }, children: recommended ? SvgPath_1.IC_RECEIVE_TAG_RECOMMENDED : SvgPath_1.IC_RECEIVE_TAG }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), { whiteSpace: "nowrap", color: recommended ? theme.palette.text.blackContrast : theme.palette.text.white, fontSize: theme.typography.fontSize10, fontWeight: theme.typography.fontWeight600, lineHeight: "120%" }), children: recommended ? "Recommended" : "Fee upto 8%" })] }), icon, (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4, alignItems: "start", flex: 1 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.listTitle), children: title }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.listDescription), children: description })] }), rightIcon !== null && rightIcon !== void 0 ? rightIcon : (!hideDefaultRightIcon && (
             // <Icon width={10} src={getIcon("right_arrow")} sx={{ ml: "auto" }} />
             (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "12px", height: "12px" }, children: SvgPath_1.IC_CHEVRON_RIGHT })))] })));
 }

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

@@ -1,7 +1,9 @@
+import { SxProps } from "@mui/material";
 import { GeneralProps } from "../../../types/ui";
 interface LoadingLayoutProps extends GeneralProps {
     loadingMessage?: string;
     initLoading?: boolean;
+    overlaySx?: SxProps;
 }
 export interface LoadingLayoutRef {
     startLoading: () => void;

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

@@ -21,7 +21,7 @@ var Text_1 = __importDefault(require("../Text"));
 var react_1 = require("react");
 var LoadingLayout = (0, react_1.forwardRef)(function (props, ref) {
     var _a = (0, react_1.useState)(props.initLoading), loading = _a[0], setLoading = _a[1];
-    var _b = props.loadingMessage, loadingMessage = _b === void 0 ? "Processing" : _b, children = props.children, sx = props.sx;
+    var _b = props.loadingMessage, loadingMessage = _b === void 0 ? "Processing" : _b, children = props.children, sx = props.sx, overlaySx = props.overlaySx;
     var theme = (0, ThemeProvider_1.useTheme)();
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         startLoading: function () {
@@ -31,9 +31,9 @@ var LoadingLayout = (0, react_1.forwardRef)(function (props, ref) {
             setLoading(false);
         },
     }); });
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ position: "relative", width: "fit-content", height: "fit-content" }, sx), children: [children, loading && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.whiteLoadingOverlay), theme.mixins.row), { gap: theme.mixins.gaps.g8, justifyContent: "center" }), children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "secondary", size: 20 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ position: "relative", width: "fit-content", height: "fit-content" }, sx), children: [children, loading && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign(__assign({}, theme.mixins.whiteLoadingOverlay), theme.mixins.row), { gap: theme.mixins.gaps.g8, justifyContent: "center" }), overlaySx), children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { sx: { color: "black" }, size: 20 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                             fontSize: theme.typography.fontSize12,
-                            color: "text.secondary",
+                            color: "black",
                         }, children: loadingMessage })] }))] }));
 });
 LoadingLayout.displayName = "LoadingLayout";

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

@@ -10,6 +10,7 @@ interface CustomOtpInputProps extends Omit<OTPInputProps, "renderInput" | "onCha
     renderInput?: (inputProps: InputProps, index: number) => React.ReactNode;
     onChange?: (value: string) => void;
     readOnly?: boolean;
+    disabled?: boolean;
 }
 declare const CustomOtpInput: (props: CustomOtpInputProps) => import("react/jsx-runtime").JSX.Element;
 export default CustomOtpInput;

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

@@ -50,7 +50,7 @@ var OtpInputType;
     OtpInputType["CONFIRM_BY_PASSCODE"] = "confirm-by-passcode";
 })(OtpInputType || (exports.OtpInputType = OtpInputType = {}));
 var CustomOtpInput = function (props) {
-    var otpInputType = props.otpInputType, numInputs = props.numInputs, _a = props.onChange, onChange = _a === void 0 ? function () { } : _a, _b = props.readOnly, readOnly = _b === void 0 ? false : _b, rest = __rest(props, ["otpInputType", "numInputs", "onChange", "readOnly"]);
+    var otpInputType = props.otpInputType, numInputs = props.numInputs, _a = props.onChange, onChange = _a === void 0 ? function () { } : _a, _b = props.readOnly, readOnly = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, rest = __rest(props, ["otpInputType", "numInputs", "onChange", "readOnly", "disabled"]);
     var theme = (0, providers_1.useTheme)();
     var InputElement = (0, react_1.useMemo)(function () {
         var _a, _b, _c;
@@ -102,6 +102,8 @@ var CustomOtpInput = function (props) {
                         alignItems: "center",
                         justifyContent: "center",
                         width: "100%",
+                        opacity: disabled ? 0.5 : 1,
+                        pointerEvents: disabled ? "none" : "initial",
                     }, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { styles: {
                             container: {
                                 width: "100%",

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

@@ -21,6 +21,6 @@ var BackHeader_1 = __importDefault(require("../BackHeader"));
 var Text_1 = __importDefault(require("../Text"));
 var PageHeader = function (props) {
     var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(BackHeader_1.default, { overrideBack: props.overrideBack, renderBack: props.renderBack, hideBack: props.hideBack, sx: __assign({ display: "flex", alignItems: "center", justifyContent: "space-between", height: "100%", position: "relative", paddingLeft: theme.mixins.pagePadding.paddingLeft, paddingRight: theme.mixins.pagePadding.paddingRight, minHeight: "3.125rem", color: theme.palette.text.white }, props.sx), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.mixins.headerTitle), theme.mixins.center), { fontWeight: "inherit", color: "inherit" }), children: props.title }), props.children] }));
+    return ((0, jsx_runtime_1.jsxs)(BackHeader_1.default, { overrideBack: props.overrideBack, renderBack: props.renderBack, hideBack: props.hideBack, sx: __assign({ display: "flex", alignItems: "center", justifyContent: "space-between", height: "100%", position: "relative", paddingLeft: theme.mixins.pagePadding.paddingLeft, paddingRight: theme.mixins.pagePadding.paddingRight, minHeight: "3.125rem", color: theme.palette.text.blackContrast }, props.sx), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.mixins.center), theme.mixins.headerTitle), { color: "inherit" }), children: props.title }), props.children] }));
 };
 exports.default = PageHeader;

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

@@ -5,7 +5,7 @@ var qrcode_react_1 = require("qrcode.react");
 function QRCode(props) {
     var value = props.value, _a = props.size, size = _a === void 0 ? 156 : _a, logo = props.logo, title = props.title, _b = props.bgColor, bgColor = _b === void 0 ? "#ffffff" : _b;
     return ((0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeCanvas, { value: value, title: title, size: size, bgColor: bgColor, fgColor: "#1E4841", level: "L", minVersion: 8, marginSize: 4, imageSettings: {
-            src: logo || "",
+            src: logo || "/",
             x: undefined,
             y: undefined,
             height: 24,

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

@@ -11,6 +11,7 @@ var react_qr_scanner_1 = require("@yudiel/react-qr-scanner");
 var AppBackDrop_1 = __importDefault(require("../AppBackDrop"));
 var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
 var PageHeader_1 = __importDefault(require("../PageHeader"));
+var providers_1 = require("../../../providers");
 var STYLES = {
     borderWidth: "4px",
     borderColor: "#ffffff",
@@ -85,6 +86,7 @@ var QrCodeReader = (0, react_1.forwardRef)(function (props, ref) {
             styleTag.remove();
         };
     }, []);
+    var theme = (0, providers_1.useTheme)();
     return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { trigger: props.children, ref: drawerRef, onClose: onClose, onOpen: onOpen, sx: sx, className: className, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: {
                 backgroundColor: "transparent !important",
             }, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { hideBack: true, title: "Scan QR code", sx: {
@@ -95,12 +97,13 @@ var QrCodeReader = (0, react_1.forwardRef)(function (props, ref) {
                     zIndex: 1001,
                     height: "fit-content",
                     fontWeight: 700,
+                    color: theme.palette.text.white,
                 }, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
                         width: "1.5rem",
                         height: "1.5rem",
                         cursor: "pointer",
                         ml: "auto",
-                    }, onClick: close, children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 15L15 5M5 5L15 15", stroke: "white", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }) }) }) }), children: (0, jsx_runtime_1.jsx)("div", { ref: qrReaderContainer, children: isOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    }, onClick: close, children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 15L15 5M5 5L15 15", stroke: "white", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }), children: (0, jsx_runtime_1.jsx)("div", { ref: qrReaderContainer, children: isOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                 opacity: isReaderReady ? 0 : 1,
                                 transition: "opacity 0.3s ease-in-out",
                             }, children: (0, jsx_runtime_1.jsx)(AppBackDrop_1.default, { open: true, message: "Starting the camera..." }) }), (0, jsx_runtime_1.jsxs)("div", { style: { transition: "opacity 0.3s ease-in-out", opacity: isReaderReady ? 1 : 0 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {

package/dist/components/TekWallet/components/ui/ReceiveFunction/components/HelpButton.d.ts

@@ -0,0 +1,2 @@
+declare function HelpButton(): import("react/jsx-runtime").JSX.Element;
+export default HelpButton;

package/dist/components/TekWallet/components/ui/ReceiveFunction/components/HelpButton.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 DrawerComponent_1 = __importStar(require("../../DrawerComponent"));
+var HelpView_1 = __importDefault(require("./HelpView"));
+var SvgPath_1 = require("../../SvgPath");
+var react_1 = require("react");
+function HelpButton() {
+    var drawerRef = (0, react_1.useRef)(null);
+    var onClose = function () {
+        var _a;
+        (_a = drawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    };
+    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, trigger: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20, display: "block" }, children: SvgPath_1.IC_HELP }), children: (0, jsx_runtime_1.jsx)(HelpView_1.default, { onBack: onClose }) }));
+}
+exports.default = HelpButton;

package/dist/components/TekWallet/components/ui/ReceiveFunction/components/HelpView.d.ts

@@ -0,0 +1,5 @@
+export interface HelpViewProps {
+    onBack?: () => void;
+}
+declare const HelpView: ({ onBack }: HelpViewProps) => import("react/jsx-runtime").JSX.Element;
+export default HelpView;