tek-wallet 0.0.805 → 0.0.807

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

@@ -39,7 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var react_1 = require("react");
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var Text_1 = __importDefault(require("../Text"));
 var DatePicker_1 = __importDefault(require("../DatePicker"));
 var Row_1 = __importDefault(require("../Row"));
@@ -51,13 +51,13 @@ var ModalDateFilter = function (props) {
     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 theme = (0, mui_1.useTheme)();
     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,
+            paddingTop: theme.styleMixins.customPadding.p2,
+            paddingBottom: theme.styleMixins.customPadding.p2,
         }, children: [(0, jsx_runtime_1.jsxs)(Row_1.default, { sx: {
-                    gap: theme.mixins.gaps.g8,
+                    gap: theme.styleMixins.gaps.g8,
                 }, children: [(0, jsx_runtime_1.jsx)(DatePicker_1.default, { onSelect: function (date) {
                             setValueStartDate((0, dayjs_1.default)(date).startOf("day"));
                         }, value: valueStartDate, disableFuture: true }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
@@ -69,17 +69,17 @@ var ModalDateFilter = function (props) {
                         }, value: valueEndDate, disablePastFrom: valueStartDate, onError: function (error) {
                             setErrorEndDate(error);
                         }, disableFuture: true })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                    backgroundColor: theme.palette.border.accent3,
+                    backgroundColor: theme.palette.divider,
                     width: "100%",
-                    mt: theme.mixins.customMargin.m12,
-                    mb: theme.mixins.customMargin.m6,
+                    mt: theme.styleMixins.customMargin.m12,
+                    mb: theme.styleMixins.customMargin.m6,
                 } }), (0, jsx_runtime_1.jsxs)(Row_1.default, { sx: {
-                    gap: theme.mixins.gaps.g8,
+                    gap: theme.styleMixins.gaps.g8,
                 }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                             cursor: "pointer",
                             border: "1px solid ".concat(theme.palette.primary.main),
-                            borderRadius: theme.mixins.customRadius.r10,
-                            padding: theme.mixins.customPadding.p1,
+                            borderRadius: theme.styleMixins.customRadius.r10,
+                            padding: theme.styleMixins.customPadding.p1,
                             minWidth: "32px",
                             minHeight: "32px",
                             display: "flex",

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

@@ -18,10 +18,10 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var ModalTitle_1 = __importDefault(require("../ModalTitle"));
 var CloseModal_1 = __importDefault(require("../CloseModal"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var ModalLayout = function (props) {
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ borderRadius: props.fullScreen ? "0" : "1.5rem 1.5rem 0 0", maxHeight: "100dvh", backgroundColor: props.backgroundColor || theme.palette.background.tertiary, display: "flex", flexDirection: "column", height: props.fullScreen ? "100dvh" : "fit-content" }, theme.mixins.pagePadding), props.sx), children: [!props.hideHeader && !props.overrideHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ borderRadius: props.fullScreen ? "0" : "1.5rem 1.5rem 0 0", maxHeight: "100dvh", backgroundColor: props.backgroundColor || "background.default", display: "flex", flexDirection: "column", height: props.fullScreen ? "100dvh" : "fit-content" }, theme.styleMixins.pagePadding), props.sx), children: [!props.hideHeader && !props.overrideHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                             width: "100%",
                             position: "relative",
                         }, children: [(0, jsx_runtime_1.jsx)(ModalTitle_1.default, { children: props.title }), (0, jsx_runtime_1.jsx)(CloseModal_1.default, { sx: {

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

@@ -59,7 +59,7 @@ var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
 var DrawerDrag_1 = __importStar(require("../DrawerDrag"));
 var Icon_1 = __importDefault(require("../Icon"));
 var Text_1 = __importDefault(require("../Text"));
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var ModalSelectToken = function (props) {
     var setSwapToken = props.setSwapToken;
     var selectTokenForm = (0, useBoolean_1.useBoolean)("selectTokenForm");
@@ -68,7 +68,7 @@ var ModalSelectToken = function (props) {
     var onOpen = selectTokenForm.value ? selectTokenForm.setTrue : selectTokenTo.setTrue;
     var onClose = selectTokenForm.value ? selectTokenForm.setFalse : selectTokenTo.setFalse;
     var _a = (0, useWallet_1.default)(), fromTokens = _a.fromTokens, updateSwapTokens = _a.updateSwapTokens;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var router = (0, useCustomRouter_1.default)();
     (0, react_1.useEffect)(function () {
         if (fromTokens && fromTokens.length > 0 && !props.token && setSwapToken) {
@@ -94,22 +94,22 @@ var ModalSelectToken = function (props) {
         }, className: "!bg-white !rounded-none !size-full", anchor: DrawerDrag_1.DRAWER_DIRECTION.RIGHT, open: open, onClose: onClose, onOpen: onOpen, title: (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { overrideBack: onClose, onClick: onClose, title: selectTokenForm.value === true ? "Select from token" : "Select to token", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex gap-1 items-center ml-auto", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { onClick: function () { return router.push("/help"); }, src: (0, getIcon_1.default)("help") }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", sx: {
                                 height: "15px",
                                 width: "1px",
-                                backgroundColor: theme.palette.border.accent3,
-                                marginLeft: theme.mixins.customMargin.m4,
-                                marginRight: theme.mixins.customMargin.m4,
-                            } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { onClick: function () { return router.push("/history"); }, src: (0, getIcon_1.default)("history") })] }) }) }), content: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.pagePadding), children: [(0, jsx_runtime_1.jsx)(material_1.InputBase, { startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { className: "size-5 text-black", position: "start", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "size-5", src: (0, getIcon_1.default)("search") }) }), placeholder: "Search", sx: {
+                                backgroundColor: theme.palette.divider,
+                                marginLeft: theme.styleMixins.customMargin.m4,
+                                marginRight: theme.styleMixins.customMargin.m4,
+                            } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { onClick: function () { return router.push("/history"); }, src: (0, getIcon_1.default)("history") })] }) }) }), content: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.styleMixins.pagePadding), children: [(0, jsx_runtime_1.jsx)(material_1.InputBase, { startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { className: "size-5 text-black", position: "start", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "size-5", src: (0, getIcon_1.default)("search") }) }), placeholder: "Search", sx: {
                         "input::placeholder": {
                             fontSize: theme.typography.fontSize12,
-                            color: theme.palette.text.black,
+                            color: theme.palette.text.primary,
                             fontWeight: theme.typography.fontWeight500,
-                            pl: theme.mixins.customPadding.p4,
+                            pl: theme.styleMixins.customPadding.p4,
                         },
-                    }, className: "w-full flex items-center py-1 px-2 rounded-12 border border-".concat(theme.palette.border.accent3, " bg-white text-black") }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "py-4 mt-3 h-[50dvh] space-y-3", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                                color: theme.palette.text.accent,
+                    }, className: "w-full flex items-center py-1 px-2 rounded-12 border border-".concat(theme.palette.divider, " bg-white text-black") }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "py-4 mt-3 h-[50dvh] space-y-3", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                                color: theme.palette.text.secondary,
                                                 fontSize: theme.typography.fontSize12,
                                                 fontWeight: theme.typography.fontWeight600,
-                                            }, children: "Token" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), className: "items-center gap-0.5", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_up") }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_down") })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                                color: theme.palette.text.accent,
+                                            }, children: "Token" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.styleMixins.column), className: "items-center gap-0.5", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_up") }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_down") })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                                color: theme.palette.text.secondary,
                                                 fontSize: theme.typography.fontSize12,
                                                 fontWeight: theme.typography.fontWeight600,
                                             }, children: "Balance" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-0.5 flex-col", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_up") }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_down") })] })] })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: "space-y-3", children: selectTokenForm.value

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

@@ -16,48 +16,48 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var Text_1 = __importDefault(require("../Text"));
 var CheckBoxComponent_1 = __importDefault(require("../CheckBoxComponent"));
 var Button_1 = __importDefault(require("../Button"));
 var ModalStatusFilter = function (_a) {
     var statusList = _a.statusList, handleStatusSelect = _a.handleStatusSelect, _b = _a.selectedStatuses, selectedStatuses = _b === void 0 ? [] : _b, onApply = _a.onApply, onReset = _a.onReset;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                    backgroundColor: theme.palette.border.accent3,
+                    backgroundColor: theme.palette.divider,
                     width: "100%",
-                    mt: theme.mixins.customMargin.m12,
-                    mb: theme.mixins.customMargin.m12,
-                } }), statusList === null || statusList === void 0 ? void 0 : statusList.map(function (item) { return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: function () { return handleStatusSelect(item.name); }, sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between", alignItems: "center", px: theme.mixins.customPadding.p8, py: theme.mixins.customPadding.p4, borderRadius: theme.mixins.customRadius.r16, padding: theme.mixins.customPadding.p12, color: theme.palette.text.blackContrast, border: "1px solid", borderColor: selectedStatuses.includes(item.name)
+                    mt: theme.styleMixins.customMargin.m12,
+                    mb: theme.styleMixins.customMargin.m12,
+                } }), statusList === null || statusList === void 0 ? void 0 : statusList.map(function (item) { return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: function () { return handleStatusSelect(item.name); }, sx: __assign(__assign({}, theme.styleMixins.row), { justifyContent: "space-between", alignItems: "center", px: theme.styleMixins.customPadding.p8, py: theme.styleMixins.customPadding.p4, borderRadius: theme.styleMixins.customRadius.r16, padding: theme.styleMixins.customPadding.p12, color: theme.palette.text.primary, border: "1px solid", borderColor: selectedStatuses.includes(item.name)
                         ? theme.palette.primary.main
-                        : theme.palette.border.accent3, backgroundColor: selectedStatuses.includes(item.name)
-                        ? theme.palette.background.white
-                        : "transparent", mt: theme.mixins.customMargin.m12, cursor: "pointer" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                        : theme.palette.divider, backgroundColor: selectedStatuses.includes(item.name)
+                        ? theme.palette.background.default
+                        : "transparent", mt: theme.styleMixins.customMargin.m12, cursor: "pointer" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                             fontSize: theme.typography.fontSize12,
                             fontWeight: theme.typography.fontWeight500,
                         }, children: item === null || item === void 0 ? void 0 : item.title }), (0, jsx_runtime_1.jsx)(CheckBoxComponent_1.default, { checked: selectedStatuses.includes(item === null || item === void 0 ? void 0 : item.name), sx: {
                             "& .MuiSvgIcon-root": {
                                 color: selectedStatuses.includes(item === null || item === void 0 ? void 0 : item.name)
                                     ? theme.palette.primary.main
-                                    : theme.palette.text.accent,
+                                    : theme.palette.text.secondary,
                             },
-                        } })] }, item.name)); }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g10, justifyContent: "center", mt: theme.mixins.customMargin.m16, width: "100%" }), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onReset, sx: {
-                            backgroundColor: theme.palette.background.white,
+                        } })] }, item.name)); }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g10, justifyContent: "center", mt: theme.styleMixins.customMargin.m16, width: "100%" }), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onReset, sx: {
+                            backgroundColor: theme.palette.background.default,
                             borderColor: theme.palette.primary.main,
-                            borderRadius: theme.mixins.customRadius.r12,
+                            borderRadius: theme.styleMixins.customRadius.r12,
                             color: theme.palette.primary.main,
                             fontSize: theme.typography.fontSize12,
                             fontWeight: theme.typography.fontWeight600,
-                            padding: theme.mixins.customPadding.p12,
+                            padding: theme.styleMixins.customPadding.p12,
                             textTransform: "none",
                         }, fullWidth: true, children: "Reset" }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onApply, sx: {
                             backgroundColor: theme.palette.primary.main,
                             borderColor: theme.palette.secondary.main,
-                            borderRadius: theme.mixins.customRadius.r12,
+                            borderRadius: theme.styleMixins.customRadius.r12,
                             color: theme.palette.secondary.main,
                             fontSize: theme.typography.fontSize12,
                             fontWeight: theme.typography.fontWeight600,
-                            padding: theme.mixins.customPadding.p12,
+                            padding: theme.styleMixins.customPadding.p12,
                             textTransform: "none",
                         }, fullWidth: true, children: "Apply" })] })] }));
 };

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

@@ -26,11 +26,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var Text_1 = __importDefault(require("../Text"));
 var ModalTitle = function (props) {
     var children = props.children, sx = props.sx, rest = __rest(props, ["children", "sx"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, rest, { sx: __assign(__assign({}, theme.mixins.sessionTitle), sx), children: children })));
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, rest, { sx: __assign(__assign({}, theme.styleMixins.sessionTitle), sx), children: children })));
 };
 exports.default = ModalTitle;

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

@@ -23,14 +23,14 @@ 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 ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var formatDate_1 = __importDefault(require("../../../utils/formatDate"));
 function NeonLineChart(_a) {
     var _b, _c, _d;
     var series = _a.series, categories = _a.categories, _e = _a.showMinMaxValues, showMinMaxValues = _e === void 0 ? false : _e, children = _a.children, sx = _a.sx;
     var chartComponentRef = (0, react_1.useRef)(null);
     var formatValue = (0, useFormatter_1.default)().formatValue;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var options = {
         title: {
             text: "",
@@ -159,7 +159,7 @@ function NeonLineChart(_a) {
                             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: maxValue }) }) }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "absolute bottom-0 w-fit z-[9999]", style: {
+                        }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), 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-[9999]", style: {
                             left: "".concat(Math.min((minIndex / chartLength) * 100, 90), "%"),
                         }, initial: {
                             scale: 0,
@@ -175,6 +175,6 @@ function NeonLineChart(_a) {
                             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 }), children] }));
+                        }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.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 }), children] }));
 }
 exports.default = (0, react_1.memo)(NeonLineChart);

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

@@ -31,17 +31,17 @@ var Icon_1 = __importDefault(require("../Icon"));
 var Text_1 = __importDefault(require("../Text"));
 var parsePropsData_1 = __importDefault(require("../../../utils/parsePropsData"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var SvgPath_1 = require("../SvgPath");
 var Formatter_1 = __importDefault(require("../Formatter"));
 var NetworkSelection = function (props) {
     var networkDataString = props.networkData, onClick = props.onClick, active = props.active, token = props.token, rest = __rest(props, ["networkData", "onClick", "active", "token"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var networkData = (0, react_1.useMemo)(function () { return (0, parsePropsData_1.default)(networkDataString); }, [networkDataString]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({}, rest, { sx: __assign(__assign({}, theme.mixins.row), { backgroundColor: active
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({}, rest, { sx: __assign(__assign({}, theme.styleMixins.row), { backgroundColor: active
                 ? "".concat(theme.palette.background.tertiary)
-                : "".concat(theme.palette.background.white), backdropFilter: "blur(12px)", padding: theme.mixins.customPadding.p16, borderRadius: theme.mixins.customRadius.r16, border: "1px solid", borderColor: active ? "".concat(theme.palette.primary.main) : "".concat(theme.palette.border.accent3), gap: theme.mixins.gaps.g8, justifyContent: "space-between" }), onClick: function () {
+                : "".concat(theme.palette.background.default), backdropFilter: "blur(12px)", padding: theme.styleMixins.customPadding.p16, borderRadius: theme.styleMixins.customRadius.r16, border: "1px solid", borderColor: active ? "".concat(theme.palette.primary.main) : "".concat(theme.palette.divider), gap: theme.styleMixins.gaps.g8, justifyContent: "space-between" }), onClick: function () {
             onClick === null || onClick === void 0 ? void 0 : onClick(networkData);
-        }, 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: networkData === null || networkData === void 0 ? void 0 : networkData.link, sx: { borderRadius: theme.mixins.customRadius.full }, width: 24 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "text.white", whiteSpace: "nowrap", textTransform: "capitalize" }), children: networkData === null || networkData === void 0 ? void 0 : networkData.name }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.activityDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13, fontWeight: theme.typography.fontWeight400 }), children: ["Minimum transaction amount:", " ", (0, jsx_runtime_1.jsx)("strong", { children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: networkData === null || networkData === void 0 ? void 0 : networkData.min_value, unit: token === null || token === void 0 ? void 0 : token.name }) })] })] })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: active ? SvgPath_1.IC_CHECK : SvgPath_1.IC_UNCHECK })] })));
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: networkData === null || networkData === void 0 ? void 0 : networkData.link, sx: { borderRadius: theme.styleMixins.customRadius.full }, width: 24 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { color: "text.white", whiteSpace: "nowrap", textTransform: "capitalize" }), children: networkData === null || networkData === void 0 ? void 0 : networkData.name }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.activityDescription), { color: theme.palette.text.secondary, fontSize: theme.typography.fontSize13, fontWeight: theme.typography.fontWeight400 }), children: ["Minimum transaction amount:", " ", (0, jsx_runtime_1.jsx)("strong", { children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: networkData === null || networkData === void 0 ? void 0 : networkData.min_value, unit: token === null || token === void 0 ? void 0 : token.name }) })] })] })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20, color: theme.palette.text.primary }, children: active ? SvgPath_1.IC_CHECK : SvgPath_1.IC_UNCHECK })] })));
 };
 exports.default = NetworkSelection;

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

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -41,7 +42,7 @@ var react_otp_input_1 = __importDefault(require("react-otp-input"));
 var SvgPath_1 = require("../SvgPath");
 var xhub_keyboard_1 = require("xhub-keyboard");
 var react_1 = require("react");
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var OtpInputType;
 (function (OtpInputType) {
     OtpInputType["TEXT"] = "text";
@@ -51,7 +52,7 @@ var OtpInputType;
 })(OtpInputType || (exports.OtpInputType = OtpInputType = {}));
 var CustomOtpInput = function (props) {
     var otpInputType = props.otpInputType, numInputs = props.numInputs, _a = props.onChange, onChange = _a === void 0 ? function () { } : _a, _b = props.readOnly, readOnly = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, rest = __rest(props, ["otpInputType", "numInputs", "onChange", "readOnly", "disabled"]);
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var InputElement = (0, react_1.useMemo)(function () {
         var _a, _b, _c;
         switch (otpInputType) {
@@ -61,37 +62,38 @@ var CustomOtpInput = function (props) {
                         alignItems: "center",
                         justifyContent: "center",
                     }, children: (0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { onChange: onChange, numInputs: numInputs, inputType: "password", inputStyle: {
-                            border: "1px solid #00000058",
-                            borderRadius: "0.75rem",
+                            border: "1px solid ".concat(theme.palette.text.secondary),
+                            borderRadius: theme.styleMixins.customRadius.r12,
                             width: "2.8rem",
                             aspectRatio: "1/1.1",
                             margin: "0 0.25rem",
                             outline: "none",
-                            color: "#000",
-                            backgroundColor: "white",
-                        }, renderInput: function (props) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "decimal", readOnly: readOnly })), (0, jsx_runtime_1.jsx)("style", { children: "input::selection {\n            background-color: white; \n            color: #000; \n          }" })] })); } })) }));
+                            color: theme.palette.text.primary,
+                            backgroundColor: theme.palette.background.default,
+                        }, renderInput: function (props) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "decimal", readOnly: readOnly })), (0, jsx_runtime_1.jsx)("style", { children: "input::selection {\n            background-color: ".concat(theme.palette.background.default, "; \n            color: ").concat(theme.palette.text.primary, "; \n          }") })] })); } })) }));
             case OtpInputType.OTP:
                 return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                         display: "flex",
                         alignItems: "center",
-                        border: "1px solid #00000058",
-                        borderRadius: "0.5rem",
-                        padding: "0.75rem 1rem",
+                        border: "1px solid",
+                        borderColor: theme.palette.divider,
+                        borderRadius: theme.styleMixins.customRadius.r12,
+                        padding: "".concat(theme.styleMixins.customPadding.p16, " ").concat(theme.styleMixins.customPadding.p24),
                         width: "100%",
-                        backgroundColor: "#ffffff",
+                        backgroundColor: theme.palette.background.default,
                     }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
                                 width: 20,
                                 height: 20,
                             }, children: SvgPath_1.IC_PASSCODE }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "fullWidth", flexItem: true, sx: {
                                 margin: "0 0.75rem",
                             } }), (0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { onChange: onChange, numInputs: numInputs, inputType: "password", inputStyle: {
-                                borderBottom: "1px solid #000000",
+                                borderBottom: "1px solid ${theme.palette.text.secondary}",
                                 width: "0.625rem",
                                 margin: "0 0.25rem",
                                 outline: "none",
-                                color: "#000",
-                                backgroundColor: "#00000000",
-                            }, renderInput: function (props) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "decimal", readOnly: readOnly })), (0, jsx_runtime_1.jsx)("style", { children: "input::selection {\n          background-color: transparent;\n          color: #000;\n        }" })] })); } }))] }));
+                                color: theme.palette.text.primary,
+                                backgroundColor: "currentColor",
+                            }, renderInput: function (props) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "decimal", readOnly: readOnly })), (0, jsx_runtime_1.jsx)("style", { children: "input::selection {\n          background-color: transparent;\n          color: ".concat(theme.palette.text.primary, ";\n        }") })] })); } }))] }));
             case OtpInputType.CONFIRM_BY_PASSCODE:
                 var length_1 = numInputs || 6;
                 var value = ((_a = rest.value) === null || _a === void 0 ? void 0 : _a.split("")) || [];
@@ -107,16 +109,20 @@ var CustomOtpInput = function (props) {
                     }, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { styles: {
                             container: {
                                 width: "100%",
-                                borderColor: theme.palette.border.accent3,
+                                borderColor: theme.palette.divider,
                             },
                             input: {
                                 width: "100%",
                             },
-                        }, leftElement: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center" }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_PASSCODE }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "fullWidth", flexItem: true, sx: { margin: "0 0.75rem" } })] }), displayType: xhub_keyboard_1.DisplayType.Text, isUseFormatNumber: false, value: valueRendered, renderValue: function (value, index) { return ((0, jsx_runtime_1.jsx)("span", { style: { margin: "0.1rem", display: "inline-block" }, children: value != "_" ? "●" : "_" }, index)); } }) }));
+                        }, leftElement: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center" }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_PASSCODE }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "fullWidth", flexItem: true, sx: { margin: "0 0.75rem" } })] }), displayType: xhub_keyboard_1.DisplayType.Text, isUseFormatNumber: false, value: valueRendered, renderValue: function (value, index) { return ((0, jsx_runtime_1.jsx)("span", { style: {
+                                margin: "0.1rem",
+                                display: "inline-block",
+                                color: theme.palette.text.primary,
+                            }, children: value != "_" ? "●" : "_" }, index)); } }) }));
             default:
                 return ((0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { onChange: onChange, numInputs: numInputs, renderInput: function (props) { return ((0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "text", type: "text", readOnly: readOnly }))); } })));
         }
-    }, [otpInputType, rest, onChange, numInputs, theme.palette.border.accent3, readOnly]);
+    }, [otpInputType, rest, onChange, numInputs, theme.palette.divider, readOnly]);
     return InputElement;
 };
 exports.default = CustomOtpInput;

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

@@ -16,11 +16,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var BackHeader_1 = __importDefault(require("../BackHeader"));
 var Text_1 = __importDefault(require("../Text"));
 var PageHeader = function (props) {
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(BackHeader_1.default, { overrideBack: props.overrideBack, renderBack: props.renderBack, hideBack: props.hideBack, sx: __assign({ display: "flex", alignItems: "center", justifyContent: "space-between", height: "100%", position: "relative", paddingLeft: theme.mixins.pagePadding.paddingLeft, paddingRight: theme.mixins.pagePadding.paddingRight, minHeight: "3.125rem", color: theme.palette.text.blackContrast }, props.sx), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.mixins.center), theme.mixins.headerTitle), { textTransform: "capitalize", color: "inherit" }), children: props.title }), props.children] }));
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(BackHeader_1.default, { overrideBack: props.overrideBack, renderBack: props.renderBack, hideBack: props.hideBack, sx: __assign({ display: "flex", alignItems: "center", justifyContent: "space-between", height: "100%", position: "relative", paddingLeft: theme.styleMixins.pagePadding.paddingLeft, paddingRight: theme.styleMixins.pagePadding.paddingRight, minHeight: "3.125rem", color: "text.primary" }, props.sx), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.styleMixins.center), theme.styleMixins.headerTitle), { textTransform: "capitalize", color: "inherit" }), children: props.title }), props.children] }));
 };
 exports.default = PageHeader;

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

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var qrcode_react_1 = require("qrcode.react");
+var mui_1 = require("../../../theme/mui");
 function QRCode(props) {
     var value = props.value, _a = props.size, size = _a === void 0 ? 156 : _a, logo = props.logo, title = props.title, _b = props.bgColor, bgColor = _b === void 0 ? "#ffffff" : _b;
-    return ((0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeCanvas, { value: value, title: title, size: size, bgColor: bgColor, fgColor: "#044C2F", level: "L", minVersion: 8, marginSize: 3, imageSettings: {
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeCanvas, { value: value, title: title, size: size, bgColor: bgColor, fgColor: theme.palette.primary.main, level: "L", minVersion: 8, marginSize: 3, imageSettings: {
             src: logo || "/",
             x: undefined,
             y: undefined,

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

@@ -124,7 +124,6 @@ var QrCodeReader = (0, react_1.forwardRef)(function (props, ref) {
             styleTag.remove();
         };
     }, []);
-    var theme = (0, providers_1.useTheme)();
     var _d = (0, providers_1.useWalletSetup)(), topOffset = _d.topOffset, overrideQRScanMethod = _d.overrideQRScanMethod;
     if (!!overrideQRScanMethod) {
         var handleOverrideQRScanMethod = function (event) { return __awaiter(void 0, void 0, void 0, function () {
@@ -176,13 +175,13 @@ var QrCodeReader = (0, react_1.forwardRef)(function (props, ref) {
                     zIndex: 1001,
                     height: "fit-content",
                     fontWeight: 700,
-                    color: theme.palette.text.white,
+                    color: "#eeeeee",
                 }, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
                         width: "1.5rem",
                         height: "1.5rem",
                         cursor: "pointer",
                         ml: "auto",
-                    }, onClick: close, children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 15L15 5M5 5L15 15", stroke: "white", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }), children: (0, jsx_runtime_1.jsx)("div", { ref: qrReaderContainer, children: isOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    }, onClick: close, children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 15L15 5M5 5L15 15", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }), children: (0, jsx_runtime_1.jsx)("div", { ref: qrReaderContainer, children: isOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                 opacity: isReaderReady ? 0 : 1,
                                 transition: "opacity 0.3s ease-in-out",
                             }, children: (0, jsx_runtime_1.jsx)(AppBackDrop_1.default, { open: true, message: "Starting the camera..." }) }), (0, jsx_runtime_1.jsxs)("div", { style: { transition: "opacity 0.3s ease-in-out", opacity: isReaderReady ? 1 : 0 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {

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

@@ -0,0 +1,26 @@
+import { GeneralProps } from "../../../types/ui";
+import { TonTransferUrlParams } from "../../../utils/parseTonTransferUrl";
+export interface ReceiveDirectlyInternalParams extends TonTransferUrlParams {
+    isTekWalletReceiveInternal: true;
+}
+export declare enum ReceiveDirectlyMethod {
+    RECEIVE_INTERNAL = "Internal Transfer",
+    RECEIVE_EXTERNAL = "Blockchain Deposit"
+}
+export interface ReceiveDirectlyProps extends GeneralProps {
+    tokenSlug: string;
+    method: ReceiveDirectlyMethod;
+    networkSlug?: string;
+    amount?: string | number;
+    userInfo?: {
+        nickname?: string;
+        username?: string;
+        avatar?: string;
+    };
+}
+export type ReceiveDirectlyRef = {
+    open: () => void;
+    close: () => void;
+};
+export declare const ReceiveDirectly: import("react").ForwardRefExoticComponent<ReceiveDirectlyProps & import("react").RefAttributes<ReceiveDirectlyRef>>;
+export default ReceiveDirectly;