tek-wallet 0.0.815 → 0.0.823

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/NftDetail/index.d.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from "@mui/material";
+interface NftDetailProps extends BoxProps {
+    id?: string;
+}
+declare function NftDetail(props: NftDetailProps): import("react/jsx-runtime").JSX.Element;
+export default NftDetail;

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

@@ -0,0 +1,47 @@
+"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;
+};
+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 Text_1 = __importDefault(require("../Text"));
+var formatDate_1 = __importDefault(require("../../../utils/formatDate"));
+var mui_1 = require("../../../theme/mui");
+var useNft_1 = __importDefault(require("../../../hooks/data/useNfts/useNft"));
+var Button_1 = __importDefault(require("../Button"));
+function NftDetail(props) {
+    var theme = (0, mui_1.useTheme)();
+    var id = props.id, sx = props.sx, rest = __rest(props, ["id", "sx"]);
+    var _a = (0, useNft_1.default)(id), voucher = _a.metadataAttributes, isMinting = _a.isMinting, voucherUnit = _a.voucherUnit, voucherValue = _a.voucherValue, handleClickButton = _a.handleClickButton, buttonLabel = _a.buttonLabel;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: __assign(__assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g16, alignItems: "center" }), sx) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8, alignItems: "center" }), children: [(0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.bigValue), { textTransform: "none", fontSize: "2.25rem", color: theme.palette.tertiary.main }), children: [voucherValue, voucherUnit] }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.activityTitle), { textTransform: "none", fontSize: theme.typography.fontSize24 }), children: voucher === null || voucher === void 0 ? void 0 : voucher.title }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.activityDescription), { textTransform: "none", fontSize: theme.typography.fontSize14 }), children: voucher === null || voucher === void 0 ? void 0 : voucher.description }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                            display: "flex",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            mt: "auto",
+                            gap: theme.styleMixins.gaps.g4,
+                        }, children: (voucher === null || voucher === void 0 ? void 0 : voucher.expire) && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.activityDescription), { textTransform: "none", py: 1, px: 2, borderRadius: Infinity, color: theme.palette.tertiary.main, backgroundColor: "color-mix(in srgb, currentcolor 10%, transparent)", fontSize: theme.typography.fontSize13 }), children: ["Exp ", (0, formatDate_1.default)(voucher === null || voucher === void 0 ? void 0 : voucher.expire)] })) })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { sx: { mt: "auto" }, onClick: handleClickButton, loading: isMinting, fullWidth: true, children: buttonLabel })] })));
+}
+exports.default = NftDetail;

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

@@ -0,0 +1,8 @@
+import { BoxProps } from "@mui/material";
+interface NftItemProps extends BoxProps {
+    id?: string;
+    noAction?: boolean;
+    useSnapshot?: boolean;
+}
+declare function NftItem(props: NftItemProps): import("react/jsx-runtime").JSX.Element;
+export default NftItem;

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

@@ -0,0 +1,74 @@
+"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;
+};
+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 mui_1 = require("../../../theme/mui");
+var Text_1 = __importDefault(require("../Text"));
+var useNft_1 = __importDefault(require("../../../hooks/data/useNfts/useNft"));
+var Button_1 = __importDefault(require("../Button"));
+var useFormatter_1 = __importDefault(require("../../../hooks/useFormatter"));
+var react_1 = require("react");
+var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"));
+function NftItem(props) {
+    var sx = props.sx, id = props.id, _a = props.noAction, noAction = _a === void 0 ? false : _a, _b = props.useSnapshot, useSnapshot = _b === void 0 ? false : _b, rest = __rest(props, ["sx", "id", "noAction", "useSnapshot"]);
+    var theme = (0, mui_1.useTheme)();
+    var formatDate = (0, useFormatter_1.default)().formatDate;
+    var _c = (0, useNft_1.default)(id, useSnapshot), voucher = _c.metadataAttributes, isMinting = _c.isMinting, voucherUnit = _c.voucherUnit, voucherValue = _c.voucherValue, handleClickButton = _c.handleClickButton, buttonLabel = _c.buttonLabel; // in this phase we use nft metadata for voucher data
+    var router = (0, useCustomRouter_1.default)();
+    (0, react_1.useEffect)(function () {
+        if (!id)
+            return;
+        router.prefetch("?detail=".concat(id));
+    }, [id, router]);
+    var handleClick = (0, react_1.useCallback)(function () {
+        router.push("?detail=".concat(id));
+    }, [id, router]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ onClick: noAction ? undefined : handleClick, sx: __assign(__assign(__assign({}, theme.styleMixins.row), { backgroundColor: theme.palette.background.tertiary, borderRadius: theme.styleMixins.customRadius.r16, backdropFilter: "blur(12px)", cursor: noAction ? "not-allowed" : "pointer", display: "grid", pointerEvents: noAction ? "none" : "auto", gridTemplateColumns: "0.3346303502fr 1px 1fr" }), sx) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    width: "100%",
+                    aspectRatio: "1/1",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    alignItems: "center",
+                }, children: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.bigValue), { textTransform: "none", color: "text.primary" }), children: [voucherValue, voucherUnit] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", flexItem: true, sx: { borderStyle: "dashed" } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    width: "100%",
+                    display: "flex",
+                    flexDirection: "column",
+                    height: "100%",
+                    pr: 3,
+                    pl: theme.spacing(4),
+                    py: 2,
+                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.activityTitle), { textTransform: "none" }), children: voucher === null || voucher === void 0 ? void 0 : voucher.title }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.activityDescription), { textTransform: "none" }), children: voucher === null || voucher === void 0 ? void 0 : voucher.description }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                            display: "flex",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            mt: "auto",
+                            gap: theme.styleMixins.gaps.g4,
+                        }, children: [(voucher === null || voucher === void 0 ? void 0 : voucher.expire) && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.activityDescription), { textTransform: "none" }), children: ["Exp ", formatDate(voucher === null || voucher === void 0 ? void 0 : voucher.expire)] })), !noAction && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "small", sx: { ml: "auto" }, onClick: handleClickButton, loading: isMinting, children: buttonLabel }))] })] })] })));
+}
+exports.default = NftItem;

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

@@ -0,0 +1,2 @@
+export declare const NftsBoard: () => import("react/jsx-runtime").JSX.Element;
+export default NftsBoard;

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

@@ -0,0 +1,118 @@
+"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++) {
+            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.NftsBoard = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var mui_1 = require("../../../theme/mui");
+var NftItem_1 = __importDefault(require("../NftItem"));
+var SmartList_1 = __importDefault(require("../SmartList"));
+var WaitingData_1 = __importDefault(require("../WaitingData"));
+var EmptyData_1 = __importDefault(require("../EmptyData"));
+var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
+var useNfts_1 = __importDefault(require("../../../hooks/data/useNfts"));
+var navigation_1 = require("next/navigation");
+var react_1 = require("react");
+var DrawerComponent_1 = __importStar(require("../DrawerComponent"));
+var NftDetailView_1 = __importDefault(require("../../views/NftDetailView"));
+var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"));
+var NftsBoard = function () {
+    var searchParams = (0, navigation_1.useSearchParams)();
+    var pathname = (0, navigation_1.usePathname)();
+    var detailNftId = searchParams.get("detail") || undefined;
+    var drawerNftDetailRef = (0, react_1.useRef)(null);
+    var theme = (0, mui_1.useTheme)();
+    var router = (0, useCustomRouter_1.default)();
+    var _a = (0, useNfts_1.default)(), nfts = _a.nfts, isLoadingNfts = _a.isLoading, hasNextPageNfts = _a.hasNextPage, fetchNextPageNfts = _a.fetchNextPage, refetchNfts = _a.refetch;
+    var isEmpty = nfts && nfts.length === 0;
+    var openDetailNft = (0, react_1.useCallback)(function () {
+        var _a;
+        (_a = drawerNftDetailRef.current) === null || _a === void 0 ? void 0 : _a.open();
+    }, []);
+    var closeDetailNft = (0, react_1.useCallback)(function () {
+        var _a;
+        (_a = drawerNftDetailRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    }, []);
+    var onCloseDetailNft = (0, react_1.useCallback)(function () {
+        router.push(pathname);
+    }, [pathname, router]);
+    var detailNft = (0, react_1.useMemo)(function () {
+        if (!detailNftId)
+            return undefined;
+        var nft = nfts === null || nfts === void 0 ? void 0 : nfts.find(function (item) { return (item === null || item === void 0 ? void 0 : item.id) === detailNftId; });
+        return nft;
+    }, [detailNftId, nfts]);
+    (0, react_1.useEffect)(function () {
+        if (!!detailNft) {
+            openDetailNft();
+        }
+        else {
+            closeDetailNft();
+        }
+    }, [detailNft, openDetailNft, closeDetailNft]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12, mt: theme.styleMixins.customMargin.m8, pt: theme.styleMixins.customPadding.p8, minHeight: !nfts ? "20rem" : "unset" }), children: [!nfts && isLoadingNfts && (0, jsx_runtime_1.jsx)(WaitingData_1.default, { sx: { margin: "auto" } }), isEmpty && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { margin: "auto", mt: 4 }, icon: (0, getIcon_1.default)("activities_empty_all"), description: "You haven't any NFT yet" })), !!nfts && !isEmpty && ((0, jsx_runtime_1.jsx)(SmartList_1.default, { loadMoreData: fetchNextPageNfts, hasMore: !!hasNextPageNfts && !isLoadingNfts, loadingComponent: (0, jsx_runtime_1.jsx)(WaitingData_1.default, { numberOfSkeleton: 2, sx: {
+                        marginTop: theme.styleMixins.customMargin.m12,
+                    } }), pullToRefreshProps: {
+                    isPullable: true,
+                    onRefresh: refetchNfts,
+                }, sx: {
+                    px: 0,
+                }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: "grid",
+                        gridTemplateColumns: "1fr",
+                        gap: theme.styleMixins.gaps.g12,
+                    }, children: nfts.map(function (item) {
+                        if (!item)
+                            return null;
+                        return (0, jsx_runtime_1.jsx)(NftItem_1.default, { id: item.id }, item.id);
+                    }) }) })), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerNftDetailRef, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, onClose: onCloseDetailNft, children: (0, jsx_runtime_1.jsx)(NftDetailView_1.default, { id: detailNftId }) })] }));
+};
+exports.NftsBoard = NftsBoard;
+exports.default = exports.NftsBoard;

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();
@@ -161,7 +168,7 @@ var QrCodeReader = (0, react_1.forwardRef)(function (props, ref) {
         }); };
         return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: sx, className: className, onClick: handleOverrideQRScanMethod, ref: boxRef, children: children }));
     }
-    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { trigger: children, ref: drawerRef, onDone: onClose, onOpen: onOpen, sx: sx, className: className, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: {
+    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { trigger: 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: {
                     position: "absolute",
@@ -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/ui/ReceiveDirectly/index.js

@@ -318,7 +318,7 @@ exports.ReceiveDirectly = (0, react_1.forwardRef)(function (_a, ref) {
                                         mt: theme.styleMixins.customMargin.m12,
                                     } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.valueDescription), children: warningMessage })] }))] }) }) }));
     };
-    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, sx: props.sx, onDone: handleClose, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "Receive ".concat((selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) || "Token"), onClose: close, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { footer: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, sx: props.sx, onClose: handleClose, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "Receive ".concat((selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) || "Token"), onClose: close, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { footer: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                         maxHeight: currentStep === ReceiveDirectlyStep.SHOW_QR_CODE ? "120px" : 0,
                         overflow: "hidden",
                         transition: currentStep === ReceiveDirectlyStep.SHOW_QR_CODE

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

@@ -438,7 +438,7 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (_a, ref) {
     var handleClearSearch = function () {
         setSearchValue("");
     };
-    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, onOpen: props.onOpen, onDone: handleOnClose, sx: props.sx, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: RECEIVE_STEP_NAME[ReceiveStep.SELECT_METHOD], onClose: close, children: (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: stepDrawerRef, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, sx: {
+    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, onOpen: props.onOpen, onClose: handleOnClose, sx: props.sx, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: RECEIVE_STEP_NAME[ReceiveStep.SELECT_METHOD], onClose: close, children: (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: stepDrawerRef, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, sx: {
                     width: "100%",
                 }, trigger: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12, height: "fit-content", width: "100%" }), children: [functionsList.includes(ReceiveMethods.RECEIVE_INTERNAL) && ((0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Top up via internal transfer", description: "Receive crypto from other Ting users", icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_RECEIVE_INTERNAL", width: 24 }), onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_INTERNAL); }, recommended: true })), functionsList.includes(ReceiveMethods.RECEIVE_EXTERNAL) && ((0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Top up via blockchain", description: "Deposit using a Web3 or an Exchange wallet", icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_RECEIVE_EXTERNAL", width: 24 }), onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_EXTERNAL); }, recommended: true })), functionsList.includes(ReceiveMethods.RECEIVE_FIAT) && ((0, jsx_runtime_1.jsx)(FiatDeposit_1.default, { children: (0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Fiat-Gateway", description: "Experimental deposit via bank transfer", icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_RECEIVE_EXTERNAL", width: 24 }), recommended: false, onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_FIAT); } }) }))] }), children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: {
                         position: "relative",
@@ -530,7 +530,7 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (_a, ref) {
                                                         width: "100%",
                                                         display: "flex",
                                                         justifyContent: "center",
-                                                    }, onOpen: handleAmountModalOpen, onDone: onCloseAmountModal, trigger: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsxs)(Button_1.default.Text, { sx: {
+                                                    }, onOpen: handleAmountModalOpen, onClose: onCloseAmountModal, trigger: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsxs)(Button_1.default.Text, { sx: {
                                                                 fontSize: theme.typography.fontSize14,
                                                                 textTransform: "none",
                                                                 fontWeight: theme.typography.fontWeight500,

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

@@ -411,7 +411,7 @@ var ReceiveHistory = function (props) {
                             drawerRefs.current.detail = ref !== null && ref !== void 0 ? ref : undefined;
                         }, sx: {
                             width: "100%",
-                        }, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, onDone: handleOnClose, children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: {
+                        }, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, onClose: handleOnClose, children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: {
                                 padding: 0,
                                 width: "100dvw",
                             }, children: selectedItem && ((0, jsx_runtime_1.jsx)(ReceiveHistoryDetails_1.default, { onClose: handleCloseDetailDrawer, receiveData: {