tek-wallet 0.0.202 → 0.0.204

package/dist/components/ui/AmountGroupAndChart/index.d.ts

@@ -0,0 +1,5 @@
+import { GeneralProps } from "../../../types/ui";
+interface AmountGroupAndChartProps extends GeneralProps {
+}
+declare const AmountGroupAndChart: (props: AmountGroupAndChartProps) => import("react/jsx-runtime").JSX.Element;
+export default AmountGroupAndChart;

package/dist/components/ui/AmountGroupAndChart/index.js

@@ -0,0 +1,129 @@
+"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 framer_motion_1 = require("framer-motion");
+var AnalyticGroup_1 = __importDefault(require("../AnalyticGroup"));
+var TimeFilter_1 = __importDefault(require("../TimeFilter"));
+var TimeFilter_2 = require("../TimeFilter");
+var DelayMounted_1 = __importDefault(require("../DelayMounted"));
+var material_1 = require("@mui/material");
+var NeonLineChart_1 = __importDefault(require("../NeonLineChart"));
+var Icon_1 = __importDefault(require("../Icon"));
+var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
+var fakeSeries = [
+    {
+        name: "All",
+        data: [
+            1003785.6864951615, 1003795.988344575, 1003827.997662396,
+            1003899.7426850981, 1003891.7710159089, 1003810.6439517767,
+            1003780.7195320514, 1003797.9506016063, 1003781.455378438,
+            1003782.0072632281, 1003715.167883104, 1003724.9791682598,
+            1003716.6018329085, 1003711.3282671372, 1003686.1868489254,
+            1003625.4795220237, 1003584.3334449014, 1003498.9139435134,
+            1003310.7825506503, 1003339.72584186, 1003334.3069939599,
+            1003364.3540547496, 1003394.4011155394, 1003398.386950134,
+            1003233.005474726, 1003185.2981006557, 1003165.7981714085,
+        ],
+    },
+];
+var labels = [
+    "2025-03-04T08:10:17.311Z",
+    "2025-03-04T12:10:18.859Z",
+    "2025-03-04T16:10:19.118Z",
+    "2025-03-04T20:10:18.246Z",
+    "2025-03-05T00:10:18.371Z",
+    "2025-03-05T10:12:40.882Z",
+    "2025-03-05T14:12:42.832Z",
+    "2025-03-05T18:12:41.114Z",
+    "2025-03-05T22:12:40.544Z",
+    "2025-03-06T02:12:40.718Z",
+    "2025-03-08T10:35:52.596Z",
+    "2025-03-08T14:35:52.979Z",
+    "2025-03-08T16:01:31.209Z",
+    "2025-03-08T18:35:52.824Z",
+    "2025-03-08T22:35:52.901Z",
+    "2025-03-09T06:35:53.327Z",
+    "2025-03-09T10:35:52.682Z",
+    "2025-03-09T14:35:53.001Z",
+    "2025-03-09T18:35:52.886Z",
+    "2025-03-09T22:35:52.880Z",
+    "2025-03-10T03:43:34.153Z",
+    "2025-03-10T06:35:52.944Z",
+    "2025-03-10T10:35:52.253Z",
+    "2025-03-10T14:35:52.727Z",
+    "2025-03-10T18:35:52.865Z",
+    "2025-03-10T22:35:53.563Z",
+    "2025-03-11T04:16:45.409Z",
+];
+var defaultTimeRange = TimeFilter_2.TimeFilterType.SEVEN_DAYS;
+var variants = {
+    hidden: { opacity: 0, left: "-70%" },
+    visible: { opacity: 1, left: "0%" },
+};
+var AmountGroupAndChart = function (props) {
+    var _a = (0, react_1.useState)(false), expandAreaChart = _a[0], setExpandAreaChart = _a[1];
+    var _b = (0, react_1.useState)(), timeRangeData = _b[0], setTimeRangeData = _b[1];
+    var theme = (0, material_1.useTheme)();
+    var handleChangeTimeRange = function (data) {
+        setTimeRangeData(data);
+    };
+    var toggleExpand = function () {
+        setExpandAreaChart(!expandAreaChart);
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, props.sx), { width: "100%" }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { position: "relative" }), children: [(0, jsx_runtime_1.jsx)(AnalyticGroup_1.default, { timeRange: timeRangeData === null || timeRangeData === void 0 ? void 0 : timeRangeData.type }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        width: "100%",
+                        position: "relative",
+                        duration: "500ms",
+                        aspectRatio: "1.47317073171",
+                        zIndex: 10,
+                        maxHeight: expandAreaChart ? "28rem" : "0",
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                position: "absolute",
+                                right: 0,
+                                left: 0,
+                                bottom: 0,
+                                duration: "500ms",
+                                transform: !expandAreaChart
+                                    ? "translateY(0) translateX(25%) scale(0.5)"
+                                    : "none",
+                            }, children: (0, jsx_runtime_1.jsx)(DelayMounted_1.default, { delay: 800, children: (0, jsx_runtime_1.jsx)(NeonLineChart_1.default, { showMinMaxValues: expandAreaChart, series: fakeSeries, categories: labels, sx: {
+                                        width: "100%",
+                                        height: "fit-content",
+                                        duration: "500ms",
+                                        transform: !expandAreaChart ? "-translate-y-[100%]" : "none",
+                                        my: theme.mixins.customMargin.m3,
+                                    } }) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { position: "absolute", bottom: 0 }, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: "hidden", animate: expandAreaChart ? "visible" : "hidden", variants: variants, transition: {
+                                    opacity: {
+                                        duration: expandAreaChart ? 0.5 : 0.25,
+                                        ease: "linear",
+                                        delay: expandAreaChart ? 0.5 : 0,
+                                    },
+                                    left: {
+                                        duration: expandAreaChart ? 0.5 : 0.25,
+                                        ease: "linear",
+                                        delay: expandAreaChart ? 0.3 : 0,
+                                    },
+                                }, children: (0, jsx_runtime_1.jsx)(TimeFilter_1.default, { hideAll: true, initialValue: defaultTimeRange, onChange: handleChangeTimeRange }) }) })] }), (0, jsx_runtime_1.jsx)(Icon_1.default, { sx: {
+                        alignSelf: "center",
+                        transition: "all 0.5s ease-in-out",
+                        cursor: "pointer",
+                        mt: theme.mixins.customMargin.m4,
+                        transform: !expandAreaChart ? "rotate(180deg)" : "none",
+                    }, width: 16, src: (0, getIcon_1.default)("bottom_arrow"), onClick: toggleExpand })] }) }));
+};
+exports.default = AmountGroupAndChart;

package/dist/components/ui/AnalyticGroup/index.d.ts

@@ -0,0 +1,6 @@
+import { GeneralProps } from "../../../types/ui";
+interface AnalyticGroupProps extends GeneralProps {
+    timeRange?: string;
+}
+declare const AnalyticGroup: (props: AnalyticGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default AnalyticGroup;

package/dist/components/ui/AnalyticGroup/index.js

@@ -0,0 +1,33 @@
+"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 Text_1 = __importDefault(require("../Text"));
+var Formatter_1 = __importDefault(require("../Formatter"));
+var Icon_1 = __importDefault(require("../Icon"));
+var material_1 = require("@mui/material");
+var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
+var AnalyticGroup = function (props) {
+    var theme = (0, material_1.useTheme)();
+    var sx = props.sx;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, sx), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.fieldTitle), children: "Total Amount" }), (0, jsx_runtime_1.jsxs)(Text_1.default, { className: "flex items-baseline gap-1 text-24 font-semibold text-ui-text-white", sx: __assign(__assign({}, theme.mixins.row), theme.mixins.value), children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { value: 1000000 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: { fontWeight: "typography.fontWeight400", fontSize: "0.8em" }, children: "USD" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("bottom_arrow"), width: 8 })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4, fontSize: theme.typography.fontSize12 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                            fontWeight: "typography.fontWeight500",
+                            leading: "typography.lineHeight140",
+                            fontSize: "typography.fontSize14",
+                            textTransform: "capitalize",
+                        }, children: props.timeRange }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_increase"), width: 12 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({ color: theme.palette.text.increase }, theme.mixins.value), { borderBottom: "1px dashed ".concat(theme.palette.text.increase) }), children: "5.63 (+3,22%)" })] })] }));
+};
+exports.default = AnalyticGroup;

package/dist/components/ui/DelayMounted/index.d.ts

@@ -0,0 +1,6 @@
+import { GeneralProps } from "../../../types/ui";
+interface DelayMountedPropsType extends GeneralProps {
+    delay?: number;
+}
+declare function DelayMounted({ children, delay }: DelayMountedPropsType): import("react/jsx-runtime").JSX.Element;
+export default DelayMounted;

package/dist/components/ui/DelayMounted/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+function DelayMounted(_a) {
+    var children = _a.children, _b = _a.delay, delay = _b === void 0 ? 1000 : _b;
+    var _c = (0, react_1.useState)(false), allowMount = _c[0], setAllowMount = _c[1];
+    (0, react_1.useEffect)(function () {
+        var timeout = setTimeout(function () {
+            setAllowMount(true);
+        }, delay);
+        return function () {
+            clearTimeout(timeout);
+        };
+    }, []);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: allowMount && children });
+}
+exports.default = DelayMounted;

package/dist/components/ui/DepositFunction/index.js

@@ -126,7 +126,7 @@ var DepositFunction = (0, react_1.forwardRef)(function (props, ref) {
                         display: "flex",
                         alignItems: "center",
                         minHeight: "2rem",
-                        mb: theme.mixins.customMargin.p20,
+                        mb: theme.mixins.customMargin.m20,
                     }, overrideBack: handleBack, hideBack: currentStep === DepositStep.SELECT_TOKEN, center: DEPOSIT_STEP_NAME[currentStep], children: (0, jsx_runtime_1.jsx)(CloseModal_1.default, { sx: { marginLeft: "auto" }, onClick: close }) }), children: (0, jsx_runtime_1.jsxs)(SwiperControlled_1.default, { ref: swiperRef, swiperProps: {
                         autoHeight: true,
                         spaceBetween: 32,

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

@@ -8,12 +8,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var getStandardNumber_1 = __importDefault(require("../../../utils/getStandardNumber"));
 var lengthFromDotToFirstNonZero_1 = __importDefault(require("../../../utils/lengthFromDotToFirstNonZero"));
 var CustomTooltip_1 = __importDefault(require("../CustomTooltip"));
-var cn_1 = __importDefault(require("../../../utils/cn"));
 var material_1 = require("@mui/material");
 var formatter_1 = __importDefault(require("../../../utils/formatter"));
 var Formatter = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var value = _a.value, _o = _a.start, start = _o === void 0 ? "" : _o, _p = _a.unit, unit = _p === void 0 ? "" : _p, _q = _a.lengthValueAllowed, lengthValueAllowed = _q === void 0 ? 2 : _q, _r = _a.noUnitSpacing, noUnitSpacing = _r === void 0 ? false : _r, _s = _a.allowShowZero, allowShowZero = _s === void 0 ? false : _s, _t = _a.useCompact, useCompact = _t === void 0 ? true : _t, disableTooltip = _a.disableTooltip, isUnitStyle = _a.isUnitStyle, unitCustomStyle = _a.unitCustomStyle, disableAdjustUnitColor = _a.disableAdjustUnitColor, isLessThan = _a.isLessThan, overrideLessThanClass = _a.overrideLessThanClass, unitStyle = _a.unitStyle, _u = _a.useCompactOnThousand, useCompactOnThousand = _u === void 0 ? false : _u, startStyle = _a.startStyle, hideStart = _a.hideStart, hideUnit = _a.hideUnit, onClickUnit = _a.onClickUnit;
+    var value = _a.value, _o = _a.start, start = _o === void 0 ? "" : _o, _p = _a.unit, unit = _p === void 0 ? "" : _p, _q = _a.lengthValueAllowed, lengthValueAllowed = _q === void 0 ? 2 : _q, _r = _a.noUnitSpacing, noUnitSpacing = _r === void 0 ? false : _r, _s = _a.allowShowZero, allowShowZero = _s === void 0 ? false : _s, _t = _a.useCompact, useCompact = _t === void 0 ? true : _t, disableTooltip = _a.disableTooltip, isLessThan = _a.isLessThan, unitStyle = _a.unitStyle, _u = _a.useCompactOnThousand, useCompactOnThousand = _u === void 0 ? false : _u, startStyle = _a.startStyle, hideStart = _a.hideStart, hideUnit = _a.hideUnit, onClickUnit = _a.onClickUnit;
     var tokensRateState = {}.tokensRateState;
     var userInfo = {}.userInfo;
     //   const { tokensRateState } = useRealtimeData();
@@ -39,16 +38,17 @@ var Formatter = function (_a) {
     var lessThan = numberDisplay > 0 && numberDisplay < 0.01 && isLessThan;
     return ((0, jsx_runtime_1.jsx)(CustomTooltip_1.default, { disabled: disableTooltip, trigger: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                 whiteSpace: "nowrap",
-            }, children: numberDisplay === 0 && !allowShowZero ? ("--") : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [lessThan && ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.default)("relative -top-0.5 font-primary mr-0.5", overrideLessThanClass), children: "< " })), !(numberDisplay === 0) && !hideStart && ((0, jsx_runtime_1.jsx)("span", { className: "font-primary", style: startStyle, children: startDisplay })), !lessThan && numberDisplay > 0 && numberDisplay < 0.000001 ? ((0, jsx_runtime_1.jsxs)("span", { className: "font-primary", children: ["0.0", (0, jsx_runtime_1.jsx)("sub", { children: lengthFromDot }), formattedNumber.slice(2 + lengthFromDot, lengthValueAllowed - 2 + lengthFromDot)] })) : ((0, jsx_runtime_1.jsx)("span", { className: "font-primary", children: lessThan
+            }, children: numberDisplay === 0 && !allowShowZero ? ("--") : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [lessThan && ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", sx: {
+                            position: "relative",
+                            top: "-0.125rem",
+                            mr: "0.125rem",
+                        }, children: "< " })), !(numberDisplay === 0) && !hideStart && ((0, jsx_runtime_1.jsx)("span", { className: "font-primary", style: startStyle, children: startDisplay })), !lessThan && numberDisplay > 0 && numberDisplay < 0.000001 ? ((0, jsx_runtime_1.jsxs)("span", { className: "font-primary", children: ["0.0", (0, jsx_runtime_1.jsx)("sub", { children: lengthFromDot }), formattedNumber.slice(2 + lengthFromDot, lengthValueAllowed - 2 + lengthFromDot)] })) : ((0, jsx_runtime_1.jsx)("span", { className: "font-primary", children: lessThan
                             ? "0.01"
                             : (0, formatter_1.default)(isLessThan
                                 ? Number(numberDisplay).toFixed(2)
                                 : numberDisplay, useCompact, useCompactOnThousand, lengthValueAllowed) })), !hideUnit &&
                         !!unitDisplay &&
                         !noUnitSpacing &&
-                        !(numberDisplay === 0) && ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.default)("font-primary", unitCustomStyle, {
-                            "text-secondary": isUnitStyle,
-                            not_apply_adjust_color_tbk: disableAdjustUnitColor,
-                        }), style: unitStyle, onClick: onClickUnit, children: unitDisplay }))] })) }), children: (0, jsx_runtime_1.jsx)(Formatter, { disableTooltip: true, start: start, value: value, lengthValueAllowed: 12, useCompact: false, unit: unit, allowShowZero: true, disableAdjustUnitColor: true, hideStart: hideStart, hideUnit: hideUnit }) }));
+                        !(numberDisplay === 0) && ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", style: unitStyle, onClick: onClickUnit, children: unitDisplay }))] })) }), children: (0, jsx_runtime_1.jsx)(Formatter, { disableTooltip: true, start: start, value: value, lengthValueAllowed: 12, useCompact: false, unit: unit, allowShowZero: true, disableAdjustUnitColor: true, hideStart: hideStart, hideUnit: hideUnit }) }));
 };
 exports.default = Formatter;

package/dist/components/ui/NeonLineChart/index.d.ts

@@ -0,0 +1,12 @@
+import { GeneralProps } from "../../../types/ui";
+export interface NeonLineChartPropsTypes extends GeneralProps {
+    categories?: string[];
+    series?: Array<{
+        name: string;
+        data: any[];
+    }>;
+    showMinMaxValues?: boolean;
+}
+declare function NeonLineChart({ series, categories, showMinMaxValues, sx, }: NeonLineChartPropsTypes): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof NeonLineChart>;
+export default _default;

package/dist/components/ui/NeonLineChart/index.js

@@ -0,0 +1,179 @@
+"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 highcharts_1 = __importDefault(require("highcharts"));
+var highcharts_react_official_1 = __importDefault(require("highcharts-react-official"));
+var Formatter_1 = __importDefault(require("../Formatter"));
+var Text_1 = __importDefault(require("../Text"));
+var framer_motion_1 = require("framer-motion");
+var useFormatter_1 = __importDefault(require("../../../hooks/useFormatter"));
+var material_1 = require("@mui/material");
+var formatDate_1 = __importDefault(require("../../../utils/formatDate"));
+function NeonLineChart(_a) {
+    var _b, _c, _d, _e;
+    var series = _a.series, categories = _a.categories, _f = _a.showMinMaxValues, showMinMaxValues = _f === void 0 ? false : _f, sx = _a.sx;
+    var chartComponentRef = (0, react_1.useRef)(null);
+    var formatValue = (0, useFormatter_1.default)().formatValue;
+    var theme = (0, material_1.useTheme)();
+    var options = {
+        title: {
+            text: "",
+        },
+        chart: {
+            backgroundColor: "transparent",
+            height: "".concat(180, "px"),
+            animation: true,
+        },
+        colors: ["#60D591"],
+        series: [
+            {
+                type: "line",
+                name: "",
+                data: (_c = (_b = series === null || series === void 0 ? void 0 : series[0]) === null || _b === void 0 ? void 0 : _b.data) !== null && _c !== void 0 ? _c : [],
+                lineWidth: 2, // Line width
+                shadow: {
+                    color: "#60D591", // Neon red glow
+                    offsetX: 0,
+                    offsetY: 0,
+                    opacity: 1,
+                    width: 15, // Glow width
+                },
+            },
+        ],
+        plotOptions: {
+            series: {
+                marker: {
+                    enabled: false,
+                },
+            },
+        },
+        yAxis: {
+            visible: false,
+        },
+        xAxis: {
+            visible: false,
+            categories: categories,
+        },
+        legend: {
+            enabled: false,
+        },
+        tooltip: {
+            backgroundColor: "#00000055",
+            style: {
+                color: "#fff",
+            },
+            padding: 6,
+            formatter: function () {
+                var _a;
+                try {
+                    if ((this === null || this === void 0 ? void 0 : this.y) === "") {
+                        return null;
+                    }
+                    return "<div>\n                   <div style=\"font-size: 0.8em; \">".concat((0, formatDate_1.default)(this === null || this === void 0 ? void 0 : this.x), "</div> <br/>\n                   <div style=\"font-weight: 600; color: #60D591; font-size: 1.1em;\">").concat(formatValue(+((_a = this === null || this === void 0 ? void 0 : this.y) !== null && _a !== void 0 ? _a : 0)), "</div>\n                   </div>");
+                }
+                catch (err) {
+                    console.error("🚀 ~ NeonLineChart ~ err:", err);
+                    return null;
+                }
+            },
+        },
+    };
+    var data = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        return (_b = (_a = series === null || series === void 0 ? void 0 : series[0]) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : [];
+    }, [((_d = series === null || series === void 0 ? void 0 : series[0]) === null || _d === void 0 ? void 0 : _d.data) && JSON.stringify((_e = series === null || series === void 0 ? void 0 : series[0]) === null || _e === void 0 ? void 0 : _e.data)]);
+    var chartLength = (0, react_1.useMemo)(function () {
+        try {
+            var length_1 = data === null || data === void 0 ? void 0 : data.length;
+            return length_1 !== null && length_1 !== void 0 ? length_1 : 0;
+        }
+        catch (_a) {
+            return -1;
+        }
+    }, [data]);
+    var maxValue = (0, react_1.useMemo)(function () {
+        try {
+            var max = Math.max.apply(Math, (data !== null && data !== void 0 ? data : []));
+            return max !== null && max !== void 0 ? max : -1;
+        }
+        catch (_a) {
+            return -1;
+        }
+    }, [data]);
+    var maxIndex = (0, react_1.useMemo)(function () {
+        try {
+            var index = data === null || data === void 0 ? void 0 : data.findLastIndex(function (e) { return e === maxValue; });
+            return index !== null && index !== void 0 ? index : -1;
+        }
+        catch (_a) {
+            return -1;
+        }
+    }, [maxValue]);
+    var minValue = (0, react_1.useMemo)(function () {
+        try {
+            var min = Math.min.apply(Math, (data !== null && data !== void 0 ? data : []));
+            return min !== null && min !== void 0 ? min : -1;
+        }
+        catch (_a) {
+            return -1;
+        }
+    }, [data]);
+    var minIndex = (0, react_1.useMemo)(function () {
+        try {
+            var index = data === null || data === void 0 ? void 0 : data.findLastIndex(function (e) { return e === minValue; });
+            return index !== null && index !== void 0 ? index : -1;
+        }
+        catch (_a) {
+            return -1;
+        }
+    }, [minValue]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ position: "relative" }, sx), children: [showMinMaxValues && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "absolute top-0 w-fit z-50", style: {
+                            left: "".concat((maxIndex / chartLength) * 100, "%"),
+                        }, initial: {
+                            scale: 0,
+                            translateX: "-50%",
+                            opacity: 0,
+                            origin: "50% center",
+                        }, animate: {
+                            scale: 1,
+                            translateX: "-50%",
+                            opacity: 1,
+                            origin: "50% center",
+                        }, transition: {
+                            duration: 0.4,
+                            ease: "easeInOut",
+                            delay: 0.4,
+                        }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { className: "text-ui-text-white text-12 leading-140", children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: maxValue }) }) }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "absolute bottom-0 w-fit z-50", style: {
+                            left: "".concat((minIndex / chartLength) * 100, "%"),
+                        }, initial: {
+                            scale: 0,
+                            translateX: "-50%",
+                            opacity: 0,
+                            origin: "50% center",
+                        }, animate: {
+                            scale: 1,
+                            translateX: "-50%",
+                            opacity: 1,
+                            origin: "50% center",
+                        }, transition: {
+                            duration: 0.4,
+                            ease: "easeInOut",
+                            delay: 0.4,
+                        }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: minValue }) }) })] })), (0, jsx_runtime_1.jsx)(highcharts_react_official_1.default, { highcharts: highcharts_1.default, options: options, ref: chartComponentRef })] }));
+}
+exports.default = (0, react_1.memo)(NeonLineChart);

package/dist/components/ui/TimeFilter/functions/getThePreviousWeekByDate.d.ts

@@ -0,0 +1 @@
+export declare const getThePreviousWeekByDate: (date: Date) => Date;

package/dist/components/ui/TimeFilter/functions/getThePreviousWeekByDate.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThePreviousWeekByDate = void 0;
+var date_fns_1 = require("date-fns");
+var getThePreviousWeekByDate = function (date) {
+    return (0, date_fns_1.sub)(date, {
+        days: 6,
+    });
+};
+exports.getThePreviousWeekByDate = getThePreviousWeekByDate;

package/dist/components/ui/TimeFilter/functions/getThisDateFromLastMonthDatePicker.d.ts

@@ -0,0 +1 @@
+export declare const getThisDateFromLastMonthDatePicker: (date: Date) => Date;

package/dist/components/ui/TimeFilter/functions/getThisDateFromLastMonthDatePicker.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThisDateFromLastMonthDatePicker = void 0;
+var date_fns_1 = require("date-fns");
+var getThisDateFromLastMonthDatePicker = function (date) {
+    return (0, date_fns_1.sub)(date, {
+        days: 29,
+    });
+};
+exports.getThisDateFromLastMonthDatePicker = getThisDateFromLastMonthDatePicker;

package/dist/components/ui/TimeFilter/index.d.ts

@@ -0,0 +1,19 @@
+import { GeneralProps } from "../../../types/ui";
+export declare enum TimeFilterType {
+    ALL = "all",
+    TODAY = "today",
+    SEVEN_DAYS = "7 days",
+    THIRTY_DAYS = "30 days"
+}
+export interface TimeFilterProps extends GeneralProps {
+    initialValue?: TimeFilterType;
+    onChange?: (value: TimeFilterData, event?: React.MouseEvent<HTMLElement>) => any;
+    hideAll?: boolean;
+}
+export interface TimeFilterData {
+    type: TimeFilterType;
+    startDate?: string;
+    endDate?: string;
+}
+declare const TimeFilter: ({ initialValue, onChange, hideAll, }: TimeFilterProps) => import("react/jsx-runtime").JSX.Element;
+export default TimeFilter;

package/dist/components/ui/TimeFilter/index.js

@@ -0,0 +1,122 @@
+"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 });
+exports.TimeFilterType = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_1 = require("react");
+var Text_1 = __importDefault(require("../Text"));
+var date_fns_1 = require("date-fns");
+var getMaxTime_1 = __importDefault(require("../../../utils/getMaxTime"));
+var formatDate_1 = __importDefault(require("../../../utils/formatDate"));
+var TimeFilterType;
+(function (TimeFilterType) {
+    TimeFilterType["ALL"] = "all";
+    TimeFilterType["TODAY"] = "today";
+    TimeFilterType["SEVEN_DAYS"] = "7 days";
+    TimeFilterType["THIRTY_DAYS"] = "30 days";
+})(TimeFilterType || (exports.TimeFilterType = TimeFilterType = {}));
+var TimeFilter = function (_a) {
+    var _b = _a.initialValue, initialValue = _b === void 0 ? TimeFilterType.ALL : _b, onChange = _a.onChange, hideAll = _a.hideAll;
+    var theme = (0, material_1.useTheme)();
+    var _c = (0, react_1.useState)({
+        type: initialValue,
+    }), value = _c[0], setValue = _c[1];
+    var getTimeFilterData = function (type) {
+        var _a, _b, _c;
+        var newData = {
+            type: type,
+        };
+        switch (type) {
+            case TimeFilterType.TODAY:
+                var _d = (_a = (0, getMaxTime_1.default)(new Date().toISOString(), new Date().toISOString())) !== null && _a !== void 0 ? _a : {}, startDate = _d.startDate, endDate = _d.endDate;
+                newData.startDate = startDate;
+                newData.endDate = endDate;
+                break;
+            case TimeFilterType.SEVEN_DAYS: {
+                var today = new Date();
+                var sevenPreDay = (0, date_fns_1.subDays)(today, 7);
+                var _e = (_b = (0, getMaxTime_1.default)(sevenPreDay.toISOString(), today.toISOString())) !== null && _b !== void 0 ? _b : {}, startDate_1 = _e.startDate, endDate_1 = _e.endDate;
+                newData.startDate = startDate_1;
+                newData.endDate = endDate_1;
+                break;
+            }
+            case TimeFilterType.THIRTY_DAYS: {
+                var today = new Date();
+                var oneMonthPreDay = (0, date_fns_1.subDays)(today, 30);
+                var _f = (_c = (0, getMaxTime_1.default)(oneMonthPreDay.toISOString(), today.toISOString())) !== null && _c !== void 0 ? _c : {}, startDate_2 = _f.startDate, endDate_2 = _f.endDate;
+                newData.startDate = startDate_2;
+                newData.endDate = endDate_2;
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+        return newData;
+    };
+    var handleChange = function (event, newValueArray) {
+        try {
+            var newValue = newValueArray === null || newValueArray === void 0 ? void 0 : newValueArray[0];
+            if (newValue === (value === null || value === void 0 ? void 0 : value.type))
+                return;
+            var newData = getTimeFilterData(newValue);
+            setValue(newData);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newData, event);
+        }
+        catch (err) {
+            console.error("🚀 ~ err:", err);
+        }
+    };
+    var getTimeFilterLabel = function (dateData) {
+        try {
+            switch (dateData === null || dateData === void 0 ? void 0 : dateData.type) {
+                case TimeFilterType.TODAY:
+                    return "".concat((0, formatDate_1.default)((dateData === null || dateData === void 0 ? void 0 : dateData.startDate) || ""));
+                case TimeFilterType.SEVEN_DAYS:
+                case TimeFilterType.THIRTY_DAYS:
+                    return "".concat((0, formatDate_1.default)((dateData === null || dateData === void 0 ? void 0 : dateData.startDate) || ""), " - ").concat((0, formatDate_1.default)((dateData === null || dateData === void 0 ? void 0 : dateData.endDate) || ""));
+                default:
+                    return null;
+            }
+        }
+        catch (err) {
+            console.error("🚀 ~ err:", err);
+            return null;
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        if (!initialValue)
+            return;
+        var newData = getTimeFilterData(initialValue);
+        setValue(newData);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newData);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g6 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionDescription), children: getTimeFilterLabel(value) }), (0, jsx_runtime_1.jsx)(material_1.ToggleButtonGroup, { defaultValue: initialValue, onChange: handleChange, sx: { gap: theme.mixins.gaps.g8 }, children: Object.values(TimeFilterType).map(function (type) {
+                    if (hideAll && type === TimeFilterType.ALL)
+                        return null;
+                    return ((0, jsx_runtime_1.jsx)(material_1.ToggleButton, { "aria-label": type, value: type, sx: {
+                            p: 0,
+                            border: "none",
+                        }, children: (0, jsx_runtime_1.jsx)(material_1.Chip, { label: type, variant: "outlined", sx: {
+                                textTransform: "capitalize",
+                                leading: "typography.lineHeight100",
+                                borderColor: "currentColor",
+                                color: (value === null || value === void 0 ? void 0 : value.type) === type ? "text.white" : "text.white64",
+                            }, onClick: function () { } }) }, type));
+                }) })] }));
+};
+exports.default = TimeFilter;

package/dist/components/ui/WithdrawFunction/index.js

@@ -126,7 +126,7 @@ var WithdrawFunction = (0, react_1.forwardRef)(function (props, ref) {
                         display: "flex",
                         alignItems: "center",
                         minHeight: "2rem",
-                        mb: theme.mixins.customMargin.p20,
+                        mb: theme.mixins.customMargin.m20,
                     }, overrideBack: handleBack, hideBack: currentStep === DepositStep.SELECT_TOKEN, center: DEPOSIT_STEP_NAME[currentStep], children: (0, jsx_runtime_1.jsx)(CloseModal_1.default, { sx: { marginLeft: "auto" }, onClick: close }) }), children: (0, jsx_runtime_1.jsxs)(SwiperControlled_1.default, { ref: swiperRef, swiperProps: {
                         autoHeight: true,
                         spaceBetween: 32,

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import RequireConnect from "./components/ui/RequireConnect";
 import GetWalletSeedPhrase from "./components/ui/GetWalletSeedPhrase";
 import DepositFunction from "./components/ui/DepositFunction";
 import LockToken from "./components/ui/LockToken";
+import AssetView from "./components/views/AssetView";
 import useWallet from "./hooks/useWallet";
 export * from "./types/expose-type";
-export { TekWalletProvider, tekWalletHandler, RequireConnect, GetWalletSeedPhrase, DepositFunction, useWallet, LockToken, };
+export { TekWalletProvider, tekWalletHandler, RequireConnect, GetWalletSeedPhrase, DepositFunction, useWallet, LockToken, AssetView, };

package/dist/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LockToken = exports.useWallet = exports.DepositFunction = exports.GetWalletSeedPhrase = exports.RequireConnect = exports.tekWalletHandler = exports.TekWalletProvider = void 0;
+exports.AssetView = exports.LockToken = exports.useWallet = exports.DepositFunction = exports.GetWalletSeedPhrase = exports.RequireConnect = exports.tekWalletHandler = exports.TekWalletProvider = void 0;
 var TekWalletProvider_1 = __importDefault(require("./providers/TekWalletProvider"));
 exports.TekWalletProvider = TekWalletProvider_1.default;
 var handlers_1 = __importDefault(require("./handlers"));
@@ -30,6 +30,8 @@ var DepositFunction_1 = __importDefault(require("./components/ui/DepositFunction
 exports.DepositFunction = DepositFunction_1.default;
 var LockToken_1 = __importDefault(require("./components/ui/LockToken"));
 exports.LockToken = LockToken_1.default;
+var AssetView_1 = __importDefault(require("./components/views/AssetView"));
+exports.AssetView = AssetView_1.default;
 var useWallet_1 = __importDefault(require("./hooks/useWallet"));
 exports.useWallet = useWallet_1.default;
 __exportStar(require("./types/expose-type"), exports);

package/dist/theme/mui/theme.js

@@ -61,6 +61,8 @@ var text = {
     successStatus: "#01FF00",
     errorStatus: "#FE6565",
     loadingStatus: "#01FFFF",
+    increase: "#01FF00",
+    decrease: "#FE6565",
 };
 var gaps = {
     g2: "0.125rem",
@@ -95,17 +97,17 @@ var customPadding = {
     p48: "3rem",
 };
 var customMargin = {
-    p4: "0.25rem",
-    p6: "0.375rem",
-    p8: "0.5rem",
-    p10: "0.625rem",
-    p12: "0.75rem",
-    p16: "1rem",
-    p20: "1.25rem",
-    p24: "1.5rem",
-    p32: "2rem",
-    p40: "2.5rem",
-    p48: "3rem",
+    m4: "0.25rem",
+    m6: "0.375rem",
+    m8: "0.5rem",
+    m10: "0.625rem",
+    m12: "0.75rem",
+    m16: "1rem",
+    m20: "1.25rem",
+    m24: "1.5rem",
+    m32: "2rem",
+    m40: "2.5rem",
+    m48: "3rem",
 };
 var theBorderRadius = {
     full: "999px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tek-wallet",
-  "version": "0.0.202",
+  "version": "0.0.204",
   "description": "A custom React provider with TypeScript support",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -34,6 +34,9 @@
     "axios": "^1.8.4",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "framer-motion": "^12.7.4",
+    "highcharts": "^12.2.0",
+    "highcharts-react-official": "^3.2.1",
     "html-to-image": "^1.11.13",
     "jsonwebtoken": "^9.0.2",
     "next": "^15.2.4",

package/dist/utils/cn.d.ts

@@ -1,2 +0,0 @@
-declare const cn: (...inputs: any[]) => string;
-export default cn;

package/dist/utils/cn.js

@@ -1,15 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var clsx_1 = __importDefault(require("clsx"));
-// import { twMerge } from "tailwind-merge";
-var cn = function () {
-    var inputs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        inputs[_i] = arguments[_i];
-    }
-    return (0, clsx_1.default)(inputs);
-};
-exports.default = cn;