tek-wallet 0.0.660 → 0.0.662

package/dist/components/TekWallet/components/layouts/ChildPageLayout/index.d.ts

@@ -1,7 +1,9 @@
 import { GeneralProps } from "../../../types/ui";
+import { StatusDisplayType } from "../../ui/StatusDisplay";
 interface ChildPageLayoutProps extends GeneralProps {
     header?: React.ReactNode;
     footer?: React.ReactNode;
+    statusMessage?: Partial<Record<StatusDisplayType, string>>;
     classNames?: {
         footer?: string;
         header?: string;

package/dist/components/TekWallet/components/layouts/ChildPageLayout/index.js

@@ -21,7 +21,7 @@ var StatusDisplay_2 = __importDefault(require("../../ui/StatusDisplay"));
 var material_1 = require("@mui/material");
 var ThemeProvider_1 = require("../../../providers/ThemeProvider");
 var ChildPageLayout = (0, react_1.forwardRef)(function (props, ref) {
-    var header = props.header, footer = props.footer, children = props.children, sx = props.sx, className = props.className, classNames = props.classNames;
+    var header = props.header, footer = props.footer, children = props.children, sx = props.sx, className = props.className, classNames = props.classNames, statusMessage = props.statusMessage;
     var _a = (0, react_1.useState)(StatusDisplay_1.StatusDisplayType.Normal), status = _a[0], setStatus = _a[1];
     var theme = (0, ThemeProvider_1.useTheme)();
     (0, react_1.useImperativeHandle)(ref, function () {
@@ -40,7 +40,7 @@ var ChildPageLayout = (0, react_1.forwardRef)(function (props, ref) {
             },
         };
     });
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ref: ref, sx: __assign({ height: "100dvh", width: "100vw", display: "grid", gridTemplateRows: "auto 1fr auto", position: "relative", backgroundColor: theme.palette.background.white }, sx), className: className, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%" }, className: classNames === null || classNames === void 0 ? void 0 : classNames.header, children: header }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { height: "100%", width: "100%", overflowX: "hidden", overflowY: "auto" }, className: classNames === null || classNames === void 0 ? void 0 : classNames.body, children: children }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%" }, className: classNames === null || classNames === void 0 ? void 0 : classNames.footer, children: footer }), status !== StatusDisplay_1.StatusDisplayType.Normal && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ref: ref, sx: __assign({ height: "100%", width: "100%", display: "grid", gridTemplateRows: "auto 1fr auto", position: "relative", backgroundColor: theme.palette.background.white }, sx), className: className, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%" }, className: classNames === null || classNames === void 0 ? void 0 : classNames.header, children: header }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { height: "100%", width: "100%", overflowX: "hidden", overflowY: "auto" }, className: classNames === null || classNames === void 0 ? void 0 : classNames.body, children: children }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%" }, className: classNames === null || classNames === void 0 ? void 0 : classNames.footer, children: footer }), status !== StatusDisplay_1.StatusDisplayType.Normal && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     position: "absolute",
                     inset: 0,
                     display: "flex",
@@ -49,68 +49,7 @@ var ChildPageLayout = (0, react_1.forwardRef)(function (props, ref) {
                     backgroundColor: "blackBackground.16",
                     backdropFilter: "blur(4px)",
                     zIndex: 50,
-                }, children: (0, jsx_runtime_1.jsx)(StatusDisplay_2.default, { status: status }) }))] })
-    // <Box
-    //   sx={{
-    //     position: "relative",
-    //     backgroundColor: theme.palette.background.white,
-    //     height: "100dvh",
-    //     width: "100vw",
-    //     ...sx,
-    //   }}
-    // >
-    //   <Box
-    //     sx={{
-    //       minHeight: "3.125rem",
-    //       width: "100%",
-    //       position: "absolute",
-    //       top: 0,
-    //       left: 0,
-    //       zIndex: 50,
-    //     }}
-    //   >
-    //     {header}
-    //   </Box>
-    //   <Box
-    //     sx={{
-    //       height: "100%",
-    //       width: "100%",
-    //       overflowX: "hidden",
-    //       overflowY: "auto",
-    //       paddingTop: header && !fullScreen ? "3.125rem" : 0,
-    //     }}
-    //   >
-    //     {children}
-    //   </Box>
-    //   <Box
-    //     sx={{
-    //       width: "100%",
-    //       position: "absolute",
-    //       bottom: 0,
-    //       left: 0,
-    //       zIndex: 50,
-    //     }}
-    //   >
-    //     {footer}
-    //   </Box>
-    //   {status !== StatusDisplayType.Normal && (
-    //     <Box
-    //       sx={{
-    //         position: "absolute",
-    //         inset: 0,
-    //         display: "flex",
-    //         alignItems: "center",
-    //         justifyContent: "center",
-    //         backgroundColor: "blackBackground.16",
-    //         backdropFilter: "blur(4px)",
-    //         zIndex: 50,
-    //       }}
-    //     >
-    //       <StatusDisplay status={status} />
-    //     </Box>
-    //   )}
-    // </Box>
-    );
+                }, children: (0, jsx_runtime_1.jsx)(StatusDisplay_2.default, { status: status, statusMessage: statusMessage === null || statusMessage === void 0 ? void 0 : statusMessage[status] }) }))] }));
 });
 ChildPageLayout.displayName = "ChildPageLayout";
 exports.default = ChildPageLayout;

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

@@ -4,6 +4,7 @@ interface BackHeaderProps extends GeneralProps {
     center?: React.ReactNode;
     right?: React.ReactNode;
     hideBack?: boolean;
+    renderBack?: (Back: React.ReactNode) => React.ReactNode;
 }
 declare const BackHeader: (props: BackHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default BackHeader;

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

@@ -18,13 +18,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var BackArrow_1 = __importDefault(require("../BackArrow"));
 var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"));
-var Text_1 = __importDefault(require("../Text"));
 var material_1 = require("@mui/material");
 var ThemeProvider_1 = require("../../../providers/ThemeProvider");
 var BackHeader = function (props) {
     var router = (0, useCustomRouter_1.default)();
     var theme = (0, ThemeProvider_1.useTheme)();
-    var center = props.center, children = props.children, hideBack = props.hideBack, right = props.right;
+    var center = props.center, children = props.children, hideBack = props.hideBack, right = props.right, _a = props.renderBack, renderBack = _a === void 0 ? function (Back) { return Back; } : _a;
     var back = function (e) {
         if (props.overrideBack) {
             props.overrideBack(e);
@@ -32,18 +31,16 @@ var BackHeader = function (props) {
         }
         router.back();
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g16, position: "relative", height: "100%" }), props.sx), children: [!hideBack && ((0, jsx_runtime_1.jsxs)(material_1.Box, { component: "button", sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: theme.mixins.gaps.g4,
-                    cursor: "pointer",
-                    "&:active": {
-                        transform: "translateX(-0.25rem)",
-                        transition: "transform 0.2s ease-in-out",
-                    },
-                }, onClick: back, children: [(0, jsx_runtime_1.jsx)(BackArrow_1.default, {}), " ", (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                            color: theme.palette.text.white,
-                            fontSize: theme.typography.fontSize12,
-                        }, children: "Back" })] })), !!center && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), theme.mixins.headerTitle), children: center })), children, right && (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { marginLeft: "auto" }, children: right })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g16, position: "relative", height: "100%" }), props.sx), children: [!hideBack &&
+                renderBack((0, jsx_runtime_1.jsxs)(material_1.Box, { component: "button", sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: theme.mixins.gaps.g4,
+                        cursor: "pointer",
+                        "&:active": {
+                            transform: "translateX(-0.25rem)",
+                            transition: "transform 0.2s ease-in-out",
+                        },
+                    }, onClick: back, children: [(0, jsx_runtime_1.jsx)(BackArrow_1.default, {}), " "] })), !!center && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), theme.mixins.headerTitle), children: center })), children, right && (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { marginLeft: "auto" }, children: right })] }));
 };
 exports.default = BackHeader;

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

@@ -66,6 +66,7 @@ var react_1 = require("react");
 var RequireConnect_1 = __importDefault(require("../RequireConnect"));
 var material_1 = require("@mui/material");
 var ChangePasscodeView_1 = __importDefault(require("../../views/ChangePasscodeView"));
+var xhub_keyboard_1 = require("xhub-keyboard");
 function ChangePasscode(_a) {
     var children = _a.children, isInitPasscode = _a.isInitPasscode, rest = __rest(_a, ["children", "isInitPasscode"]);
     var getSeedPhraseViewRef = (0, react_1.useRef)(null);
@@ -79,6 +80,6 @@ function ChangePasscode(_a) {
             setResetTrigger(function (prev) { return prev + "1"; });
         }, 400);
     };
-    return ((0, jsx_runtime_1.jsx)(RequireConnect_1.default, { children: (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { onClose: onClose, ref: getSeedPhraseViewRef, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, trigger: (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({}, rest, { sx: { position: "relative" }, children: [children, (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { position: "absolute", inset: 0, zIndex: 10 } })] })), children: (0, jsx_runtime_1.jsx)(ChangePasscodeView_1.default, { onBack: backAuthView, isInitPasscode: isInitPasscode }, resetTrigger) }) }));
+    return ((0, jsx_runtime_1.jsx)(RequireConnect_1.default, { children: (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { onClose: onClose, ref: getSeedPhraseViewRef, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, trigger: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { autoFocus: true, useBrowserInput: false, htmlFor: "change-passcode-keyboard", children: (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({}, rest, { sx: { position: "relative" }, children: [children, (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { position: "absolute", inset: 0, zIndex: 10 } })] })) }), children: (0, jsx_runtime_1.jsx)(ChangePasscodeView_1.default, { onBack: backAuthView, isInitPasscode: isInitPasscode }, resetTrigger) }) }));
 }
 exports.default = ChangePasscode;

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

@@ -21,15 +21,12 @@ 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 getIcon_1 = __importDefault(require("../../../utils/getIcon"));
-var Icon_1 = __importDefault(require("../Icon"));
+var material_1 = require("@mui/material");
+var SvgPath_1 = require("../SvgPath");
 var CloseModal = function (props) {
     var rest = __rest(props, []);
-    return (0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ src: (0, getIcon_1.default)("close_modal"), sx: __assign({ width: "1.5rem", height: "1.5rem" }, props.sx) }, rest));
+    return ((0, jsx_runtime_1.jsx)(material_1.SvgIcon, __assign({ sx: { width: 20, height: 20 } }, rest, { children: SvgPath_1.IC_CLOSE })));
 };
 exports.default = CloseModal;

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

@@ -94,6 +94,7 @@ var ThemeProvider_1 = require("../../../providers/ThemeProvider");
 var LoadingLayout_1 = __importDefault(require("../LoadingLayout"));
 var DrawerComponent_1 = __importDefault(require("../DrawerComponent"));
 var authentication_by_passcode_service_1 = __importDefault(require("../../../services/axios/authentication-by-passcode-service"));
+var xhub_keyboard_1 = require("xhub-keyboard");
 var handleVerifyPasscode = function (data) { return __awaiter(void 0, void 0, void 0, function () {
     var response, err_1;
     return __generator(this, function (_a) {
@@ -114,7 +115,7 @@ var handleVerifyPasscode = function (data) { return __awaiter(void 0, void 0, vo
 }); };
 var passcodeLength = 6;
 var ConfirmByPasscode = (0, react_1.forwardRef)(function (props, ref) {
-    var onConfirmSuccess = props.onConfirmSuccess, backgroundColor = props.backgroundColor;
+    var onConfirmSuccess = props.onConfirmSuccess;
     var theme = (0, ThemeProvider_1.useTheme)();
     var _a = (0, react_1.useState)(""), otp = _a[0], setOtp = _a[1];
     var loadingRef = (0, react_1.useRef)(null);
@@ -122,6 +123,7 @@ var ConfirmByPasscode = (0, react_1.forwardRef)(function (props, ref) {
     var drawerRef = (0, react_1.useRef)(null);
     var handleCleardata = function () {
         setOtp("");
+        setAuthError("");
     };
     var handleClose = function () {
         var _a, _b;
@@ -190,20 +192,20 @@ var ConfirmByPasscode = (0, react_1.forwardRef)(function (props, ref) {
             }
         });
     }); };
-    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, onOpen: handleOnOpen, onClose: handleOnClose, sx: {
+    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { style: {
+                width: "100%",
+            }, useBrowserInput: false, htmlFor: "confirm-passcode-keyboard", children: props.children }), onOpen: handleOnOpen, onClose: handleOnClose, sx: {
             width: "100%",
             maxWidth: "calc(100dvw - 2rem)",
             display: "flex",
-        }, children: (0, jsx_runtime_1.jsx)(LoadingLayout_1.default, { initLoading: false, ref: loadingRef, sx: {
-                backgroundColor: "transparent",
-                width: "100%",
-            }, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "Enter Passcode", onClose: handleClose, backgroundColor: backgroundColor, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { justifyContent: "center", alignItems: "center", gap: "0.75rem", width: "100%" }), children: [(0, jsx_runtime_1.jsx)(OTP_1.default, { value: otp, onChange: handleOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD, inputStyle: {
-                                backgroundColor: "white",
-                            } }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                    fontSize: theme.typography.fontSize12,
-                                    fontWeight: theme.typography.fontWeight500,
-                                    color: theme.palette.text.accent2,
-                                }, children: "Forgot password?" }) }), !!authError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.validationError), { alignSelf: "flex-start" }), children: authError }))] }) }) }) }));
+        }, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { id: "confirm-passcode-keyboard", keyboardType: xhub_keyboard_1.KeyboardType.Integer, value: otp, onChange: handleOtpChange, children: (0, jsx_runtime_1.jsx)(LoadingLayout_1.default, { initLoading: false, ref: loadingRef, sx: {
+                    backgroundColor: "transparent",
+                    width: "100%",
+                }, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "Enter Passcode", onClose: handleClose, sx: {
+                        backgroundColor: theme.palette.background.tertiary,
+                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { justifyContent: "center", alignItems: "center", gap: "0.75rem", width: "100%" }), children: [(0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { style: {
+                                    width: "100%",
+                                }, useBrowserInput: false, htmlFor: "confirm-passcode-keyboard", children: (0, jsx_runtime_1.jsx)(OTP_1.default, { value: otp, onChange: handleOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.CONFIRM_BY_PASSCODE }) }), !!authError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.validationError), { alignSelf: "flex-start" }), children: authError }))] }) }) }) }) }));
 });
 ConfirmByPasscode.displayName = "ConfirmByPasscode";
 exports.default = ConfirmByPasscode;

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

@@ -1,3 +1,4 @@
+import { DrawerComponentRef } from "../DrawerComponent";
 interface HistorySwapProps {
     onClose?: () => void;
     open?: boolean;
@@ -5,5 +6,11 @@ interface HistorySwapProps {
 export interface HistorySwapRef {
     resetStatus: () => void;
 }
+export type DrawerRefs = {
+    token: DrawerComponentRef;
+    status: DrawerComponentRef;
+    detail: DrawerComponentRef;
+    date: DrawerComponentRef;
+};
 declare const HistorySwap: (props: HistorySwapProps) => import("react/jsx-runtime").JSX.Element;
 export default HistorySwap;

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

@@ -93,6 +93,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable react-hooks/exhaustive-deps */
 var react_1 = require("react");
 var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
 var providers_1 = require("../../../providers");
@@ -141,8 +142,12 @@ var HistorySwap = function (props) {
     var _f = (0, react_1.useState)(undefined), getActivities = _f[0], setGetActivities = _f[1];
     var _g = (0, react_1.useState)(false), isLoading = _g[0], setLoading = _g[1];
     var drawerRefs = (0, react_1.useRef)({});
-    var _h = (0, react_1.useState)(null), valueStartDate = _h[0], setValueStartDate = _h[1];
-    var _j = (0, react_1.useState)(null), valueEndDate = _j[0], setValueEndDate = _j[1];
+    // const [valueStartDate, setValueStartDate] = useState<Dayjs | null>(null);
+    // const [valueEndDate, setValueEndDate] = useState<Dayjs | null>(null);
+    var _h = (0, react_1.useState)({
+        startDate: null,
+        endDate: null,
+    }), dateFilter = _h[0], setDateFilter = _h[1];
     var router = (0, useCustomRouter_1.default)();
     var getTransactionStatuses = function (statuses) {
         if (statuses.includes("all")) {
@@ -161,7 +166,7 @@ var HistorySwap = function (props) {
         for (var _i = 0; _i < arguments.length; _i++) {
             args_1[_i] = arguments[_i];
         }
-        return __awaiter(void 0, __spreadArray([], args_1, true), void 0, function (statuses) {
+        return __awaiter(void 0, __spreadArray([], args_1, true), void 0, function (statuses, fromDate, toDate) {
             var transactionStatus, response, error_1;
             var _a;
             if (statuses === void 0) { statuses = ["all"]; }
@@ -176,6 +181,8 @@ var HistorySwap = function (props) {
                         return [4 /*yield*/, (0, get_activities_service_1.default)({
                                 transaction_types: type_1.TransactionSlug.Swap,
                                 transaction_status: transactionStatus,
+                                from_date: fromDate,
+                                to_date: toDate,
                                 page: 1,
                                 take: 10,
                             })];
@@ -202,6 +209,12 @@ var HistorySwap = function (props) {
     (0, react_1.useEffect)(function () {
         fetchSwapHistory(selectedStatuses);
     }, [selectedStatuses]);
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        if (!!dateFilter.startDate && !!dateFilter.endDate) {
+            fetchSwapHistory(selectedStatuses, (_a = dateFilter.startDate) === null || _a === void 0 ? void 0 : _a.toISOString(), (_b = dateFilter.endDate) === null || _b === void 0 ? void 0 : _b.toISOString());
+        }
+    }, [dateFilter.startDate, dateFilter.endDate]);
     var resultData = (0, react_1.useMemo)(function () {
         var data = getActivities || (transactionDetail === null || transactionDetail === void 0 ? void 0 : transactionDetail.data);
         if (Array.isArray(data)) {
@@ -372,7 +385,9 @@ var HistorySwap = function (props) {
                                                 height: "15px",
                                             }, onClick: handleCloseDrawer })] }), sx: {
                                     backgroundColor: theme.palette.background.tertiary,
-                                }, children: (0, jsx_runtime_1.jsx)(ModalDateFilter_1.default, { valueStartDate: valueStartDate, valueEndDate: valueEndDate, setValueStartDate: setValueStartDate, setValueEndDate: setValueEndDate }) }) })] }) }), resultData && resultData.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                }, children: (0, jsx_runtime_1.jsx)(ModalDateFilter_1.default, { drawerRefs: drawerRefs.current.date, handleConfirm: function (startDate, endDate) {
+                                        setDateFilter({ startDate: startDate || null, endDate: endDate || null });
+                                    } }) }) })] }) }), resultData && resultData.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
                     width: "100%",
                     opacity: 0.6,
                     backgroundColor: theme.palette.border.accent3,

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

@@ -1,9 +1,8 @@
 import { Dayjs } from "dayjs";
+import { DrawerComponentRef } from "../DrawerComponent";
 interface ModalDateFilterProps {
-    valueStartDate: Dayjs | null;
-    valueEndDate: Dayjs | null;
-    setValueStartDate: (date: Dayjs | null) => void;
-    setValueEndDate: (date: Dayjs | null) => void;
+    handleConfirm: (startDate?: Dayjs | null, endDate?: Dayjs | null) => void;
+    drawerRefs?: DrawerComponentRef;
 }
 declare const ModalDateFilter: (props: ModalDateFilterProps) => import("react/jsx-runtime").JSX.Element;
 export default ModalDateFilter;

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

@@ -44,25 +44,28 @@ var Text_1 = __importDefault(require("../Text"));
 var DatePicker_1 = __importDefault(require("../DatePicker"));
 var Row_1 = __importDefault(require("../Row"));
 var Column_1 = __importDefault(require("../Column"));
+var dayjs_1 = __importDefault(require("dayjs"));
 var SvgPath_1 = require("../SvgPath");
 var Button_1 = __importStar(require("../Button"));
 var ModalDateFilter = function (props) {
-    var valueStartDate = props.valueStartDate, valueEndDate = props.valueEndDate, setValueStartDate = props.setValueStartDate, setValueEndDate = props.setValueEndDate;
+    var drawerRefs = props.drawerRefs, handleConfirm = props.handleConfirm;
+    var _a = (0, react_1.useState)(null), valueStartDate = _a[0], setValueStartDate = _a[1];
+    var _b = (0, react_1.useState)(null), valueEndDate = _b[0], setValueEndDate = _b[1];
     var theme = (0, providers_1.useTheme)();
-    var _a = (0, react_1.useState)(null), errorEndDate = _a[0], setErrorEndDate = _a[1];
+    var _c = (0, react_1.useState)(null), errorEndDate = _c[0], setErrorEndDate = _c[1];
     return ((0, jsx_runtime_1.jsxs)(Column_1.default, { sx: {
             paddingTop: theme.mixins.customPadding.p2,
             paddingBottom: theme.mixins.customPadding.p2,
         }, children: [(0, jsx_runtime_1.jsxs)(Row_1.default, { sx: {
                     gap: theme.mixins.gaps.g8,
                 }, children: [(0, jsx_runtime_1.jsx)(DatePicker_1.default, { onSelect: function (date) {
-                            setValueStartDate(date);
+                            setValueStartDate((0, dayjs_1.default)(date).startOf("day"));
                         }, value: valueStartDate, disableFuture: true }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                             color: theme.palette.primary.main,
                             fontWeight: theme.typography.fontWeight600,
                             fontSize: theme.typography.fontSize12,
                         }, children: "to" }), (0, jsx_runtime_1.jsx)(DatePicker_1.default, { onSelect: function (date) {
-                            setValueEndDate(date);
+                            setValueEndDate((0, dayjs_1.default)(date).endOf("day"));
                         }, value: valueEndDate, disablePastFrom: valueStartDate, onError: function (error) {
                             setErrorEndDate(error);
                         }, disableFuture: true })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
@@ -83,111 +86,12 @@ var ModalDateFilter = function (props) {
                             alignItems: "center",
                             justifyContent: "center",
                         }, onClick: function () {
-                            // setQueryTransferHistory({
-                            //   startDate: null,
-                            //   endDate: null,
-                            // });
                             setValueStartDate(null);
                             setValueEndDate(null);
-                            // modalBottomSheetRef.current?.close();
+                            drawerRefs === null || drawerRefs === void 0 ? void 0 : drawerRefs.close();
                         }, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_TRASH }) }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { className: "w-full", status: !!valueStartDate && !!valueEndDate && !errorEndDate ? Button_1.BUTTON_STATUS.ENABLED : Button_1.BUTTON_STATUS.DISABLED, onClick: function () {
-                            // setQueryTransferHistory({
-                            //   startDate: valueStartDate?.toISOString(),
-                            //   endDate: valueEndDate?.toISOString(),
-                            // });
-                            // modalBottomSheetRef.current?.close();
-                            // setValueStartDate(valueStartDate);
-                            // setValueEndDate(valueEndDate);
-                        }, children: "Confirm" })] })] })
-    // <Box>
-    //   <Divider
-    //     sx={{
-    //       backgroundColor: theme.palette.border.accent3,
-    //       width: "100%",
-    //       mt: theme.mixins.customMargin.m12,
-    //       mb: theme.mixins.customMargin.m6,
-    //     }}
-    //   />
-    //   <Text
-    //     sx={{
-    //       color: theme.palette.text.black,
-    //       fontWeight: theme.typography.fontWeight500,
-    //       fontSize: theme.typography.fontSize12,
-    //     }}
-    //   >
-    //     Date Picker
-    //   </Text>
-    //   <Box
-    //     sx={{
-    //       ...theme.mixins.row,
-    //       gap: theme.mixins.gaps.g8,
-    //       mt: theme.mixins.customMargin.m12,
-    //     }}
-    //   >
-    //     <InputBase
-    //       sx={{
-    //         borderRadius: theme.mixins.customRadius.r8,
-    //         border: theme.palette.primary.main,
-    //         padding: theme.mixins.customPadding.p12,
-    //         textAlign: "center",
-    //         backgroundColor: theme.palette.background.white,
-    //         color: theme.palette.primary.main,
-    //       }}
-    //     />
-    //     <Text
-    //       sx={{
-    //         fontWeight: theme.typography.fontWeight600,
-    //         color: theme.palette.text.accent,
-    //         fontSize: theme.typography.fontSize12,
-    //       }}
-    //     >
-    //       to
-    //     </Text>
-    //     <InputBase
-    //       sx={{
-    //         borderRadius: theme.mixins.customRadius.r8,
-    //         border: theme.palette.primary.main,
-    //         padding: theme.mixins.customPadding.p12,
-    //         textAlign: "center",
-    //         backgroundColor: theme.palette.background.white,
-    //         color: theme.palette.primary.main,
-    //       }}
-    //     />
-    //   </Box>
-    //   <Divider
-    //     sx={{
-    //       backgroundColor: theme.palette.border.accent3,
-    //       width: "100%",
-    //       mt: theme.mixins.customMargin.m12,
-    //       mb: theme.mixins.customMargin.m6,
-    //     }}
-    //   />
-    //   {/* <Box
-    //     sx={{
-    //       ...theme.mixins.row,
-    //       gap: theme.mixins.gaps.g8,
-    //       mt: theme.mixins.customMargin.m12,
-    //     }}
-    //   >
-    //     <Button>
-    //       <Icon src={getIcon("")} />
-    //     </Button>
-    //     <Text
-    //       sx={{
-    //         fontWeight: theme.typography.fontWeight600,
-    //         color: theme.palette.text.accent,
-    //         fontSize: theme.typography.fontSize12,
-    //       }}
-    //     >
-    //       to
-    //     </Text>
-    //     <Button sx={{
-    //         backgroundColor:
-    //     }}>
-    //       <Icon src={getIcon("")} />
-    //     </Button>
-    //   </Box> */}
-    // </Box>
-    );
+                            handleConfirm(valueStartDate, valueEndDate);
+                            drawerRefs === null || drawerRefs === void 0 ? void 0 : drawerRefs.close();
+                        }, children: "Confirm" })] })] }));
 };
 exports.default = ModalDateFilter;

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

@@ -0,0 +1,12 @@
+import { InputProps, OTPInputProps } from "react-otp-input";
+export declare enum OtpInputType {
+    TEXT = "text",
+    PASSWORD = "password",
+    OTP = "otp"
+}
+interface CustomOtpInputProps extends Omit<OTPInputProps, "renderInput"> {
+    otpInputType?: OtpInputType;
+    renderInput?: (inputProps: InputProps, index: number) => React.ReactNode;
+}
+declare const CustomOtpInput: (props: CustomOtpInputProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomOtpInput;

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

@@ -0,0 +1,83 @@
+"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 });
+exports.OtpInputType = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_otp_input_1 = __importDefault(require("react-otp-input"));
+var SvgPath_1 = require("../SvgPath");
+var OtpInputType;
+(function (OtpInputType) {
+    OtpInputType["TEXT"] = "text";
+    OtpInputType["PASSWORD"] = "password";
+    OtpInputType["OTP"] = "otp";
+})(OtpInputType || (exports.OtpInputType = OtpInputType = {}));
+var CustomOtpInput = function (props) {
+    var otpInputType = props.otpInputType, rest = __rest(props, ["otpInputType"]);
+    switch (otpInputType) {
+        case OtpInputType.PASSWORD:
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: (0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { inputType: "password", inputStyle: {
+                        border: "1px solid #00000058",
+                        borderRadius: "0.75rem",
+                        width: "2.8rem",
+                        aspectRatio: "1/1.1",
+                        margin: "0 0.25rem",
+                        outline: "none",
+                        color: "#000",
+                        backgroundColor: "white",
+                    }, renderInput: function (props) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "decimal" })), (0, jsx_runtime_1.jsx)("style", { children: "input::selection {\n            background-color: white; \n            color: #000; \n          }" })] })); } })) }));
+        case OtpInputType.OTP:
+            return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    border: "1px solid #00000058",
+                    borderRadius: "0.5rem",
+                    padding: "0.75rem 1rem",
+                    width: "100%",
+                    backgroundColor: "#ffffff",
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
+                            width: 20,
+                            height: 20,
+                        }, children: SvgPath_1.IC_PASSCODE }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "fullWidth", flexItem: true, sx: {
+                            margin: "0 0.75rem",
+                        } }), (0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { inputType: "password", inputStyle: {
+                            borderBottom: "1px solid #000000",
+                            width: "0.625rem",
+                            margin: "0 0.25rem",
+                            outline: "none",
+                            color: "#000",
+                            backgroundColor: "#00000000",
+                        }, renderInput: function (props) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "decimal" })), (0, jsx_runtime_1.jsx)("style", { children: "input::selection {\n          background-color: transparent;\n          color: #000;\n        }" })] })); } }))] }));
+        default:
+            return (0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { renderInput: function (props) { return (0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "text", type: "text" })); } }));
+    }
+};
+exports.default = CustomOtpInput;

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

@@ -2,11 +2,14 @@ import { InputProps, OTPInputProps } from "react-otp-input";
 export declare enum OtpInputType {
     TEXT = "text",
     PASSWORD = "password",
-    OTP = "otp"
+    OTP = "otp",
+    CONFIRM_BY_PASSCODE = "confirm-by-passcode"
 }
-interface CustomOtpInputProps extends Omit<OTPInputProps, "renderInput"> {
+interface CustomOtpInputProps extends Omit<OTPInputProps, "renderInput" | "onChange"> {
     otpInputType?: OtpInputType;
     renderInput?: (inputProps: InputProps, index: number) => React.ReactNode;
+    onChange?: (value: string) => void;
+    readOnly?: boolean;
 }
 declare const CustomOtpInput: (props: CustomOtpInputProps) => import("react/jsx-runtime").JSX.Element;
 export default CustomOtpInput;