tek-wallet 0.0.661 → 0.0.663

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,7 +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 expose_1 = require("../../../../../Boilerplate/XHubKeyboard/expose");
 var handleVerifyPasscode = function (data) { return __awaiter(void 0, void 0, void 0, function () {
     var response, err_1;
     return __generator(this, function (_a) {
@@ -192,18 +192,18 @@ var ConfirmByPasscode = (0, react_1.forwardRef)(function (props, ref) {
             }
         });
     }); };
-    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { style: {
+    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: (0, jsx_runtime_1.jsx)(expose_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)(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: {
+        }, children: (0, jsx_runtime_1.jsx)(expose_1.Keyboard, { id: "confirm-passcode-keyboard", keyboardType: expose_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: {
+                    }, 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)(expose_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 }))] }) }) }) }) }));
 });

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/ReceiveFunction/index.js

@@ -318,7 +318,7 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (props, ref) {
                                 return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index !== 0 && (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: item, description: item, icon: (0, getIcon_1.default)(item + "_icon"), onClick: function () { return handleSelectMethod(item); }, sx: {
                                                 my: theme.mixins.customMargin.m12,
                                             } })] }, item));
-                            }) }) }, ReceiveStep.SELECT_METHOD) }, receiveTokens === null || receiveTokens === void 0 ? void 0 : receiveTokens.length) })) : ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: {
+                            }) }) }, ReceiveStep.SELECT_METHOD) }, receiveTokens === null || receiveTokens === void 0 ? void 0 : receiveTokens.length) })) : ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { className: "h-[100dvh]", sx: {
                     padding: theme.mixins.pagePadding,
                     position: "relative",
                 }, header: (0, jsx_runtime_1.jsx)(BackHeader_1.default, { sx: {

package/dist/components/TekWallet/components/ui/ReceiveHistory/DetailsReceiveHistory.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { SwapResponse } from "../../../services/axios/swap-service/type";
+interface DetailsReceiveHistoryProps {
+    onClose?: () => void;
+    receiveData?: SwapResponse;
+}
+declare const DetailsReceiveHistory: React.FC<DetailsReceiveHistoryProps>;
+export default DetailsReceiveHistory;

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

@@ -0,0 +1,121 @@
+"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 __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 react_1 = require("react");
+var useWallet_1 = __importDefault(require("../../../hooks/useWallet"));
+var providers_1 = require("../../../providers");
+var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
+var Button_1 = __importDefault(require("../Button"));
+var Text_1 = __importDefault(require("../Text"));
+var material_1 = require("@mui/material");
+var Icon_1 = __importDefault(require("../Icon"));
+var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
+var LineValue_1 = __importDefault(require("../LineValue"));
+var formatDate_1 = __importDefault(require("../../../utils/formatDate"));
+var roundToTwoSignificantDecimals_1 = __importDefault(require("../../../utils/roundToTwoSignificantDecimals"));
+var DetailsReceiveHistory = function (_a) {
+    var _b, _c, _d;
+    var onClose = _a.onClose, swapData = _a.receiveData;
+    var transaction = (0, useWallet_1.default)().transaction;
+    var theme = (0, providers_1.useTheme)();
+    var resultData = transaction || (swapData === null || swapData === void 0 ? void 0 : swapData.data);
+    var feeInfo = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        return ((_b = (_a = resultData === null || resultData === void 0 ? void 0 : resultData.fee_info) === null || _a === void 0 ? void 0 : _a.fee_detail) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item === null || item === void 0 ? void 0 : item.currency; })) || [];
+    }, [resultData]);
+    var getOutputs = feeInfo === null || feeInfo === void 0 ? void 0 : feeInfo.map(function (item) { return item === null || item === void 0 ? void 0 : item.outputs; });
+    var getDetailOutputs = ((_b = getOutputs === null || getOutputs === void 0 ? void 0 : getOutputs[0]) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item; })) || [];
+    var getInfoDetailOutputs = (0, react_1.useMemo)(function () {
+        return (getDetailOutputs === null || getDetailOutputs === void 0 ? void 0 : getDetailOutputs[0]) || {};
+    }, [getDetailOutputs]);
+    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: __assign({ color: theme.palette.text.black }, theme.mixins.pagePadding), footer: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                px: theme.mixins.customPadding.p12,
+                position: "relative",
+                bottom: theme.typography.fontSize24,
+            }, children: (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "processing" || (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "failed" ? ((0, jsx_runtime_1.jsx)(Button_1.default.Primary, { onClick: onClose, sx: __assign(__assign({ gap: theme.mixins.gaps.g4 }, theme.mixins.row), { color: theme.palette.text.secondary, borderRadius: theme.mixins.customRadius.r12, height: "40px" }), fullWidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                        fontSize: theme.typography.fontSize12,
+                        fontWeight: theme.typography.fontWeight600,
+                        leading: theme.typography.leading160,
+                        textTransform: "none",
+                        color: theme.palette.secondary.main,
+                    }, children: "Close" }) })) : ((resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "success" && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, justifyContent: "center" }), children: [(0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { onClick: onClose, sx: __assign(__assign({ gap: theme.mixins.gaps.g4 }, theme.mixins.row), { borderRadius: theme.mixins.customRadius.r12, borderColor: theme.palette.primary.main, backgroundColor: "transparent", maxWidth: "100%", height: "40px" }), fullWidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                fontSize: theme.typography.fontSize13,
+                                fontWeight: theme.typography.fontWeight600,
+                                color: theme.palette.primary.main,
+                                leading: theme.typography.leading160,
+                                textTransform: "none",
+                            }, children: "Close" }) }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { onClick: onClose, sx: __assign(__assign({ gap: theme.mixins.gaps.g4 }, theme.mixins.row), { color: theme.palette.text.secondary, borderRadius: theme.mixins.customRadius.r12, maxWidth: "100%", height: "40px" }), fullWidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                fontSize: theme.typography.fontSize13,
+                                fontWeight: theme.typography.fontWeight600,
+                                leading: theme.typography.leading160,
+                                textTransform: "none",
+                                color: theme.palette.secondary.main,
+                            }, children: "View asset" }) })] }))) }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.mixins.column), { top: 0, transform: "translateY(30%)", gap: theme.mixins.gaps.g12, backgroundColor: theme.palette.background.tertiary, borderRadius: theme.mixins.customRadius.r16, padding: theme.mixins.customPadding.p16, paddingTop: "80px", alignItems: "flex-start", position: "relative", marginTop: "75px" }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), { top: 0, width: "fit-content", height: "fit-content", borderRadius: theme.mixins.customRadius.r12, padding: theme.mixins.customPadding.p8 }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: 100, height: 100, src: (0, getIcon_1.default)((resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "success"
+                            ? "success"
+                            : (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "failed"
+                                ? "failed"
+                                : (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "processing"
+                                    ? "processing"
+                                    : "") }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { mt: theme.mixins.customMargin.m8, textAlign: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                color: theme.palette.text.accent2,
+                                fontSize: theme.typography.fontSize14,
+                                fontWeight: theme.typography.fontWeight400,
+                            }, children: "Swapping Token" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                color: (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "processing"
+                                    ? theme.palette.text.warningStatus
+                                    : (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "failed"
+                                        ? theme.palette.text.errorStatus
+                                        : (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "success"
+                                            ? theme.palette.text.alertStatus
+                                            : theme.palette.text.warningStatus,
+                                fontSize: theme.typography.fontSize24,
+                                fontWeight: theme.typography.fontWeight600,
+                                textTransform: "capitalize",
+                            }, children: resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                width: "100%",
+                                color: theme.palette.text.accent,
+                                mt: theme.mixins.customMargin.m12,
+                            } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between", mt: theme.mixins.customMargin.m16 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (_c = resultData === null || resultData === void 0 ? void 0 : resultData.currency_data) === null || _c === void 0 ? void 0 : _c.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                                fontSize: theme.typography.fontSize14,
+                                                fontWeight: theme.typography.fontWeight700,
+                                            }, children: resultData === null || resultData === void 0 ? void 0 : resultData.amount })] }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("swap_horizontal"), width: 20, height: 20 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                                fontSize: theme.typography.fontSize14,
+                                                fontWeight: theme.typography.fontWeight700,
+                                            }, children: (0, roundToTwoSignificantDecimals_1.default)((resultData === null || resultData === void 0 ? void 0 : resultData.amount) * (getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.swap_amount)) })] })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                width: "100%",
+                                color: theme.palette.text.accent,
+                                mt: theme.mixins.customMargin.m12,
+                            } }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { sx: {
+                                mt: theme.mixins.customMargin.m16,
+                                mb: theme.mixins.customMargin.m16,
+                            }, field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    fontSize: theme.typography.fontSize12,
+                                    color: theme.palette.text.blackContrast,
+                                }, children: "Price" }), value: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
+                                    fontSize: theme.typography.fontSize14,
+                                    fontWeight: theme.typography.fontWeight700,
+                                    ml: theme.mixins.customMargin.m8,
+                                }, children: ["1 ", (_d = resultData === null || resultData === void 0 ? void 0 : resultData.currency_data) === null || _d === void 0 ? void 0 : _d.full_name, " ~ ", getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.swap_amount, " ", getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.full_name] }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    fontSize: theme.typography.fontSize12,
+                                    color: theme.palette.text.blackContrast,
+                                }, children: "Date time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    fontSize: theme.typography.fontSize14,
+                                    fontWeight: theme.typography.fontWeight700,
+                                    ml: theme.mixins.customMargin.m8,
+                                }, children: (0, formatDate_1.default)(resultData === null || resultData === void 0 ? void 0 : resultData.date_created) }) })] })] }) }));
+};
+exports.default = DetailsReceiveHistory;

package/dist/components/TekWallet/components/ui/ReceiveHistory/ReceiveCardHistory.d.ts

@@ -0,0 +1,11 @@
+interface ReceiveCardHistory {
+    className?: string;
+    amount?: number;
+    toAddress?: string;
+    date?: string;
+    status?: string;
+    currencySlug?: string;
+    network?: string;
+}
+declare const ReceiveCardHistory: ({ toAddress, date, amount, currencySlug, network, status }: ReceiveCardHistory) => import("react/jsx-runtime").JSX.Element;
+export default ReceiveCardHistory;

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

@@ -0,0 +1,77 @@
+"use strict";
+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 providers_1 = require("../../../providers");
+var Text_1 = __importDefault(require("../Text"));
+var Column_1 = __importDefault(require("../Column"));
+var Row_1 = __importDefault(require("../Row"));
+var InlineTitleValue_1 = __importDefault(require("../InlineTitleValue"));
+var CopyTextComponent_1 = __importDefault(require("../CopyTextComponent"));
+var safeText_1 = require("../../../utils/safeText");
+var number_extension_1 = require("../../../utils/number.extension");
+var material_1 = require("@mui/material");
+var SvgPath_1 = require("../SvgPath");
+var formatDate_1 = require("../../../utils/formatDate");
+var ReceiveCardHistory = function (_a) {
+    var toAddress = _a.toAddress, date = _a.date, amount = _a.amount, currencySlug = _a.currencySlug, network = _a.network, status = _a.status;
+    var theme = (0, providers_1.useTheme)();
+    var getStatusColor = function (status) {
+        switch (status) {
+            case "success":
+                return theme.palette.success.main;
+            case "failed":
+                return theme.palette.error.main;
+            case "processing":
+                return theme.palette.warning.main;
+            default:
+                return theme.palette.text.accent2;
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Column_1.default, { sx: {
+            gap: theme.mixins.gaps.g2,
+        }, children: [(0, jsx_runtime_1.jsx)(Row_1.default, { sx: { justifyContent: "space-between" }, children: (0, jsx_runtime_1.jsxs)(Column_1.default, { sx: { gap: theme.mixins.gaps.g1 }, children: [(0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
+                                fontWeight: 700,
+                                fontSize: "1rem",
+                            }, children: [(0, number_extension_1.formatCurrencyNumber)(Number(amount !== null && amount !== void 0 ? amount : 0)), " ", currencySlug === null || currencySlug === void 0 ? void 0 : currencySlug.toUpperCase()] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                backgroundColor: getStatusColor(status !== null && status !== void 0 ? status : ""),
+                                borderRadius: theme.mixins.customRadius.r8,
+                                padding: theme.mixins.customPadding.p4,
+                                width: "fit-content",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                            }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: { color: theme.palette.text.white, fontWeight: 500, fontSize: "0.625rem" }, children: (0, safeText_1.firstLetterToUpperCase)(status !== null && status !== void 0 ? status : "unknown") }) })] }) }), (0, jsx_runtime_1.jsxs)(Column_1.default, { sx: { gap: theme.mixins.gaps.g2, paddingTop: theme.mixins.customPadding.p4 }, children: [(0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "To address:", titleStyle: {
+                            fontWeight: 500,
+                            fontSize: "0.813rem",
+                            color: theme.palette.text.accent2,
+                        }, value: (0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: (0, safeText_1.safeText)(toAddress !== null && toAddress !== void 0 ? toAddress : "", {
+                                isShort: true,
+                            }), children: (0, jsx_runtime_1.jsxs)(Row_1.default, { sx: {
+                                    gap: theme.mixins.gaps.g1,
+                                    justifyContent: "space-between",
+                                    width: "100%",
+                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                            whiteSpace: "nowrap",
+                                            fontWeight: 500,
+                                            fontSize: "0.813rem",
+                                        }, children: (0, safeText_1.safeText)(toAddress !== null && toAddress !== void 0 ? toAddress : "", {
+                                            isShort: true,
+                                        }) }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 16, height: 16 }, children: SvgPath_1.IC_COPY })] }) }) }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Network:", titleStyle: {
+                            color: theme.palette.text.accent2,
+                            fontWeight: 500,
+                            fontSize: "0.813rem",
+                        }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                color: theme.palette.text.accent2,
+                                whiteSpace: "nowrap",
+                                fontWeight: 500,
+                                fontSize: "0.813rem",
+                            }, children: network === null || network === void 0 ? void 0 : network.toUpperCase() }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                            color: theme.palette.text.accent2,
+                            fontWeight: 500,
+                            fontSize: "0.813rem",
+                        }, children: (0, formatDate_1.customFormatDate)(date !== null && date !== void 0 ? date : "", { format: formatDate_1.DateFormat.MMM_DD_YYYY_HH_MM_SS }) })] })] }));
+};
+exports.default = ReceiveCardHistory;

package/dist/components/TekWallet/components/ui/ReceiveHistory/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");
@@ -104,8 +105,6 @@ var DrawerComponent_1 = __importStar(require("../DrawerComponent"));
 var Text_1 = __importDefault(require("../Text"));
 var ModalLayout_1 = __importDefault(require("../ModalLayout"));
 var CloseModal_1 = __importDefault(require("../CloseModal"));
-var CardHistorySwap_1 = __importDefault(require("../CardHistorySwap"));
-var DetailSwapResult_1 = __importDefault(require("../DetailSwapResult"));
 var ModalStatusFilter_1 = __importDefault(require("../ModalStatusFilter"));
 var ModalDateFilter_1 = __importDefault(require("../ModalDateFilter"));
 var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"));
@@ -115,6 +114,10 @@ var navigation_1 = require("next/navigation");
 var get_activities_service_1 = __importDefault(require("../../../services/axios/get-activities-service"));
 var type_1 = require("../../../services/axios/get-activities-service/type");
 var ItemHistorySkeleton_1 = require("../ItemHistorySkeleton");
+var dayjs_1 = __importDefault(require("dayjs"));
+var ReceiveCardHistory_1 = __importDefault(require("./ReceiveCardHistory"));
+var DetailsReceiveHistory_1 = __importDefault(require("./DetailsReceiveHistory"));
+var utc_1 = __importDefault(require("dayjs/plugin/utc"));
 var historyHistoryStatus = [
     {
         title: "Success",
@@ -138,12 +141,15 @@ var HistoryReceive = function (props) {
     var searchParams = (0, navigation_1.useSearchParams)();
     var currentId = searchParams.get("current_id");
     var _e = (0, react_1.useState)(false), hasOpenedDetail = _e[0], setHasOpenedDetail = _e[1];
-    var _f = (0, react_1.useState)(null), valueStartDate = _f[0], setValueStartDate = _f[1];
-    var _g = (0, react_1.useState)(null), valueEndDate = _g[0], setValueEndDate = _g[1];
-    var _h = (0, react_1.useState)(undefined), getActivities = _h[0], setGetActivities = _h[1];
-    var _j = (0, react_1.useState)(false), isLoading = _j[0], setLoading = _j[1];
+    var _f = (0, react_1.useState)({
+        startDate: null,
+        endDate: null,
+    }), dateFilter = _f[0], setDateFilter = _f[1];
+    var _g = (0, react_1.useState)(undefined), getActivities = _g[0], setGetActivities = _g[1];
+    var _h = (0, react_1.useState)(false), isLoading = _h[0], setLoading = _h[1];
     var drawerRefs = (0, react_1.useRef)({});
     var router = (0, useCustomRouter_1.default)();
+    dayjs_1.default.extend(utc_1.default);
     var getTransactionStatuses = function (statuses) {
         if (statuses.includes("all")) {
             return undefined;
@@ -161,7 +167,7 @@ var HistoryReceive = 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,8 +182,8 @@ var HistoryReceive = function (props) {
                         return [4 /*yield*/, (0, get_activities_service_1.default)({
                                 transaction_types: type_1.TransactionSlug.Receive,
                                 transaction_status: transactionStatus,
-                                from_date: valueStartDate === null || valueStartDate === void 0 ? void 0 : valueStartDate.toISOString(),
-                                to_date: valueEndDate === null || valueEndDate === void 0 ? void 0 : valueEndDate.toISOString(),
+                                from_date: fromDate,
+                                to_date: toDate,
                                 page: 1,
                                 take: 10,
                             })];
@@ -204,9 +210,23 @@ var HistoryReceive = function (props) {
     (0, react_1.useEffect)(function () {
         fetchReceiveHistory(selectedStatuses);
     }, [selectedStatuses]);
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        if (!!dateFilter.startDate && !!dateFilter.endDate) {
+            fetchReceiveHistory(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)) {
+            data.push({
+                id: "1",
+                to_address: "0x1234567890",
+                date_created: "2021-01-01",
+                amount: 100,
+                currency_slug: "ETH",
+                transaction_status: "success",
+            });
             return data;
         }
         if (data && typeof data === "object") {
@@ -340,7 +360,9 @@ var HistoryReceive = function (props) {
             (_a = drawerRefs.current.detail) === null || _a === void 0 ? void 0 : _a.close();
         }
     }, [currentId, hasOpenedDetail, selectedItem, transactionDetail, drawerRefs.current.detail]);
-    return ((0, jsx_runtime_1.jsxs)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(ChildPageLayout_1.default, { sx: {
+            width: "100dvw",
+        }, header: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                 padding: theme.mixins.customPadding.p10,
             }, children: (0, jsx_runtime_1.jsx)(BackHeader_1.default, { overrideBack: props.onClose, center: "Top up history" }) }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { px: theme.mixins.customPadding.p16, 
                     // pt: theme.mixins.customPadding.p16,
@@ -374,29 +396,37 @@ var HistoryReceive = 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, { handleConfirm: function (startDate, endDate) {
+                                        setDateFilter({
+                                            startDate: dayjs_1.default.utc(startDate).startOf("day"),
+                                            endDate: dayjs_1.default.utc(endDate).endOf("day"),
+                                        });
+                                    }, drawerRefs: drawerRefs.current.date }) }) })] }) }), resultData && resultData.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
                     width: "100%",
                     opacity: 0.6,
                     backgroundColor: theme.palette.border.accent3,
+                    mb: theme.mixins.customMargin.m16,
                 } })), isLoading && ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "px-4 py-2 space-y-3", children: resultData.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(ItemHistorySkeleton_1.ItemHistorySkeletonShimmer, {}, index)); }) })), !isLoading && resultData && resultData.length > 0 ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { overflow: "hidden" }), children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: function (ref) {
                             drawerRefs.current.detail = ref !== null && ref !== void 0 ? ref : undefined;
                         }, sx: {
                             width: "100%",
                         }, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, onClose: handleOnClose, children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: {
                                 padding: 0,
-                            }, children: selectedItem && ((0, jsx_runtime_1.jsx)(DetailSwapResult_1.default, { onClose: handleCloseDetailDrawer, swapData: {
+                            }, children: selectedItem && ((0, jsx_runtime_1.jsx)(DetailsReceiveHistory_1.default, { onClose: handleCloseDetailDrawer, receiveData: {
                                     data: selectedItem,
                                     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) {
-                        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));
-                    })] })) : (resultData.length == 0 &&
+                                } }, "detail-".concat(currentId))) }) }, "drawer-".concat(currentId)), resultData.map(function (item) { return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: function () {
+                            handleTransactionClick(item.id);
+                        }, sx: {
+                            px: theme.mixins.customPadding.p16,
+                        }, children: [(0, jsx_runtime_1.jsx)(ReceiveCardHistory_1.default, { toAddress: item.to_address, date: item.date_created, amount: item.amount, currencySlug: item.currency_slug, network: item.network, status: item.transaction_status }, item.id), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                    width: "100%",
+                                    opacity: 0.6,
+                                    backgroundColor: theme.palette.border.accent3,
+                                    my: theme.mixins.customMargin.m16,
+                                } })] }, item.id)); })] })) : (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",
                             mb: theme.mixins.customMargin.m12,

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

@@ -192,6 +192,9 @@ exports.UpdateLockToken = (0, react_1.forwardRef)(function (props, ref) {
             throw new Error("Please connect your wallet");
         (_a = confirmLayoutDrawerRef.current) === null || _a === void 0 ? void 0 : _a.open();
     };
+    (0, react_1.useEffect)(function () {
+        validateAmount(props.lockData);
+    }, [props.lockData, validateAmount]);
     var handleClose = function () {
         var _a;
         if (!isInitPasscode)
@@ -204,7 +207,7 @@ exports.UpdateLockToken = (0, react_1.forwardRef)(function (props, ref) {
     }); });
     (0, react_1.useEffect)(function () {
         validateAmount(props.lockData);
-    }, [props.lockData, validateAmount]);
+    }, [validateAmount]);
     (0, react_1.useEffect)(function () {
         if (!!lockedTokens || !isInitPasscode)
             return;

package/dist/components/TekWallet/services/axios/receive_service/type.d.ts

@@ -0,0 +1,36 @@
+import { FeesDataType } from "../get-est-fee-service/type";
+export interface ReceiveBody {
+    amount?: string;
+    currency_slug?: string;
+    to_currency_slug?: string;
+    passcode?: string;
+    network?: string;
+}
+export interface ReceiveResponse {
+    success?: boolean;
+    message?: string;
+    data?: ReceiveDataTransaction;
+    timestamp?: string;
+}
+export interface ReceiveDataTransaction {
+    id?: number;
+    transaction_type?: string;
+    from_address?: string;
+    to_address?: null;
+    network?: string;
+    currency_slug?: string;
+    fee?: string;
+    amount?: string;
+    transaction_status?: string;
+    user_created?: string;
+    user_updated?: string;
+    date_created?: string;
+    date_updated?: null;
+    description?: null;
+    from_locked_balance?: null;
+    to_locked_balance?: null;
+    from_app_slug?: string;
+    feeInfo?: FeesDataType;
+    fee_info?: FeesDataType;
+    to_currency_slug?: string;
+}

package/dist/components/TekWallet/services/axios/receive_service/type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/TekWallet/theme/mui/theme.d.ts

@@ -8,6 +8,22 @@ declare const theme: {
             main: string;
             contrastText: string;
         };
+        success: {
+            main: string;
+            contrastText: string;
+        };
+        error: {
+            main: string;
+            contrastText: string;
+        };
+        warning: {
+            main: string;
+            contrastText: string;
+        };
+        info: {
+            main: string;
+            contrastText: string;
+        };
         background: {
             white: string;
             white80: string;
@@ -45,6 +61,10 @@ declare const theme: {
             accent: string;
             accent3: string;
             tertiary: string;
+            success: string;
+            error: string;
+            info: string;
+            warning: string;
         };
         text: {
             white: string;
@@ -198,6 +218,71 @@ declare const theme: {
             g32: string;
             g40: string;
         };
+        background: {
+            white: string;
+            white80: string;
+            white64: string;
+            white24: string;
+            white16: string;
+            black: string;
+            black64: string;
+            black24: string;
+            black16: string;
+            primary: string;
+            primary16: string;
+            secondary: string;
+            secondary16: string;
+            error: string;
+            error16: string;
+            tertiary: string;
+            accent3: string;
+            successStatus: string;
+            infoStatus: string;
+            errorStatus: string;
+        };
+        border: {
+            primary: string;
+            white: string;
+            white64: string;
+            white24: string;
+            white16: string;
+            black: string;
+            black64: string;
+            black24: string;
+            black16: string;
+            secondary: string;
+            secondary16: string;
+            accent: string;
+            accent3: string;
+            tertiary: string;
+            success: string;
+            error: string;
+            info: string;
+            warning: string;
+        };
+        text: {
+            white: string;
+            white80: string;
+            white64: string;
+            white24: string;
+            black: string;
+            black80: string;
+            black64: string;
+            black24: string;
+            blackContrast: string;
+            primary: string;
+            secondary: string;
+            accent: string;
+            accent2: string;
+            successStatus: string;
+            errorStatus: string;
+            loadingStatus: string;
+            increase: string;
+            decrease: string;
+            warningStatus: string;
+            alertStatus: string;
+            tertiary: string;
+        };
         row: {
             display: string;
             alignItems: string;

package/dist/components/TekWallet/theme/mui/theme.js

@@ -64,6 +64,10 @@ var border = {
     accent: "#A3A3A3",
     accent3: "#E5E6E6",
     tertiary: "#ECF4E9",
+    success: "#1EA031",
+    error: "#FF434E",
+    info: "#29C8F0",
+    warning: "#FFA500",
 };
 var text = {
     white: "#ffffff",
@@ -188,6 +192,22 @@ var theme = {
             main: "#C5E99F",
             contrastText: "#000000",
         },
+        success: {
+            main: "#1EA031",
+            contrastText: "#000000",
+        },
+        error: {
+            main: "#FF434E",
+            contrastText: "#000000",
+        },
+        warning: {
+            main: "#FFA500",
+            contrastText: "#000000",
+        },
+        info: {
+            main: "#29C8F0",
+            contrastText: "#000000",
+        },
         background: background,
         border: border,
         text: text,
@@ -235,6 +255,9 @@ var theme = {
         customMargin: customMargin,
         customRadius: customRadius,
         gaps: gaps,
+        background: background,
+        border: border,
+        text: text,
         row: {
             display: "flex",
             alignItems: "center",

package/dist/components/TekWallet/utils/number.extension.d.ts

@@ -0,0 +1,2 @@
+declare function formatCurrencyNumber(value: number): string;
+export { formatCurrencyNumber };

package/dist/components/TekWallet/utils/number.extension.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatCurrencyNumber = formatCurrencyNumber;
+function formatCurrencyNumber(value) {
+    return value.toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    });
+}

package/dist/components/TekWallet/utils/safeText.d.ts

@@ -3,4 +3,5 @@ declare const safeText: (text: string | undefined, options?: {
     defaultValue?: string | undefined;
 }) => string;
 declare const safeDateTimeText: (text: string | undefined, defaultValue?: string | undefined) => string;
-export { safeText, safeDateTimeText };
+declare const firstLetterToUpperCase: (text: string | undefined) => string;
+export { safeText, safeDateTimeText, firstLetterToUpperCase };

package/dist/components/TekWallet/utils/safeText.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.safeDateTimeText = exports.safeText = void 0;
+exports.firstLetterToUpperCase = exports.safeDateTimeText = exports.safeText = void 0;
 var safeText = function (text, options) {
     var _a = options !== null && options !== void 0 ? options : {}, isShort = _a.isShort, defaultValue = _a.defaultValue;
     if (!text)
@@ -20,3 +20,9 @@ var safeDateTimeText = function (text, defaultValue) {
     return new Date(text).toLocaleString();
 };
 exports.safeDateTimeText = safeDateTimeText;
+var firstLetterToUpperCase = function (text) {
+    if (!text)
+        return "-";
+    return text.charAt(0).toUpperCase() + text.slice(1);
+};
+exports.firstLetterToUpperCase = firstLetterToUpperCase;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tek-wallet",
-  "version": "0.0.661",
+  "version": "0.0.663",
   "description": "A custom React provider with TypeScript support",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",