tek-wallet 0.0.806 → 0.0.808

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

@@ -18,22 +18,23 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var Text_1 = __importDefault(require("../Text"));
 var Formatter_1 = __importDefault(require("../Formatter"));
 var material_1 = require("@mui/material");
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var SvgPath_1 = require("../SvgPath");
 var user_1 = __importDefault(require("../../../store/user"));
 var balance_1 = __importDefault(require("../../../store/balance"));
 var AnalyticGroup = function (props) {
     var sx = props.sx;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var isShowBalance = (0, user_1.default)(function (state) { return state.settings.balance.isShowBalance; });
     var toggleShowBalance = (0, user_1.default)(function (state) { return state.toggleShowBalance; });
     var totalBalanceInUSD = (0, balance_1.default)(function (state) { return state.totalBalanceInUSD; });
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.row), { justifyContent: "space-between", alignItems: "flex-start" }), sx), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g6, position: "relative" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.styleMixins.row), { justifyContent: "space-between", alignItems: "flex-start" }), sx), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g6, position: "relative" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                             fontSize: theme.typography.fontSize15,
                             fontWeight: theme.typography.fontWeight500,
-                            color: theme.palette.text.accent2,
+                            color: theme.palette.text.secondary,
                         }, children: "Total Amount" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: toggleShowBalance, sx: {
                             position: "relative",
+                            color: theme.palette.text.secondary,
                         }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { cursor: "pointer", width: "1.25rem", height: "1.25rem" }, children: SvgPath_1.IC_NO_SEE }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                     position: "absolute",
                                     left: "50%",
@@ -41,22 +42,22 @@ var AnalyticGroup = function (props) {
                                     top: "50%",
                                     height: !isShowBalance ? "90%" : "0px",
                                     transition: "height 0.2s ease-in-out",
-                                    backgroundColor: theme.palette.text.accent2,
+                                    backgroundColor: theme.palette.text.secondary,
                                     transform: "translate(-50%, -50%) rotate(45deg)",
                                     transformOrigin: "center center",
                                 } })] })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     display: "flex",
                     flexDirection: "column",
                     alignItems: "flex-end",
-                    gap: theme.mixins.gaps.g6,
+                    gap: theme.styleMixins.gaps.g6,
                     fontSize: theme.typography.fontSize12,
-                }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.mixins.row), theme.mixins.value), { alignItems: "baseline", fontSize: theme.typography.fontSize20, gap: theme.mixins.gaps.g2 }), children: isShowBalance ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: { fontWeight: theme.typography.fontWeight700 }, value: totalBalanceInUSD, unit: "USD", hideUnitOutSide: true }), !!totalBalanceInUSD && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.styleMixins.row), theme.styleMixins.value), { alignItems: "baseline", fontSize: theme.typography.fontSize20, gap: theme.styleMixins.gaps.g2 }), children: isShowBalance ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: { fontWeight: theme.typography.fontWeight700 }, value: totalBalanceInUSD, unit: "USD", hideUnitOutSide: true }), !!totalBalanceInUSD && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                             fontWeight: theme.typography.fontWeight400,
                                             fontSize: "1em",
                                         }, children: "$" }), false && ((0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { cursor: "pointer", width: 8, height: 8 }, children: SvgPath_1.ARROW_DROP_DOWN }))] }))] })) : ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                             fontSize: theme.typography.fontSize24,
                             fontWeight: theme.typography.fontWeight700,
-                            color: theme.palette.text.black,
+                            color: theme.palette.text.primary,
                         }, children: "******" })) }) })] }));
 };
 exports.default = AnalyticGroup;

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

@@ -27,19 +27,19 @@ 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 ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var material_2 = require("@mui/material");
 var react_1 = require("react");
 var Text_1 = __importDefault(require("../Text"));
 var AppBackDrop = (0, react_1.forwardRef)(function (props, ref) {
     var sx = props.sx, open = props.open, message = props.message, hideProgress = props.hideProgress, rest = __rest(props, ["sx", "open", "message", "hideProgress"]);
     var _a = (0, react_1.useState)(!!open), isOpen = _a[0], setIsOpen = _a[1];
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         open: function () { return setIsOpen(true); },
         close: function () { return setIsOpen(false); },
     }); });
-    return ((0, jsx_runtime_1.jsx)(material_2.Backdrop, __assign({ sx: __assign({ color: theme.palette.text.white, zIndex: theme.zIndex.drawer + 1, backgroundColor: "".concat(theme.palette.background.white16, " !important"), backdropFilter: "blur(6px)" }, sx) }, rest, { open: open !== null && open !== void 0 ? open : isOpen, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { width: "fit-content", alignItems: "center", color: theme.palette.text.black64, gap: theme.mixins.gaps.g12 }), children: [!hideProgress && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 28, color: "inherit", value: 50, thickness: 4 }), message && (0, jsx_runtime_1.jsx)(Text_1.default, { children: message })] }) })));
+    return ((0, jsx_runtime_1.jsx)(material_2.Backdrop, __assign({ sx: __assign({ color: theme.palette.text.primary, zIndex: theme.zIndex.drawer + 1, backgroundColor: "".concat((0, material_1.alpha)(theme.palette.background.default, 0.16), " !important"), backdropFilter: "blur(6px)" }, sx) }, rest, { open: open !== null && open !== void 0 ? open : isOpen, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { width: "fit-content", alignItems: "center", color: theme.palette.text.primary, gap: theme.styleMixins.gaps.g12 }), children: [!hideProgress && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 28, color: "inherit", value: 50, thickness: 4 }), message && (0, jsx_runtime_1.jsx)(Text_1.default, { sx: { color: "inherit" }, children: message })] }) })));
 });
 AppBackDrop.displayName = "AppBackDrop";
 exports.default = AppBackDrop;

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

@@ -25,18 +25,18 @@ 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 ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var AppDialog = (0, react_1.forwardRef)(function (props, ref) {
     var _a = (0, react_1.useState)(false), isOpen = _a[0], setIsOpen = _a[1];
     var sx = props.sx, children = props.children, overrideOpen = props.overrideOpen, rest = __rest(props, ["sx", "children", "overrideOpen"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         open: function () { return setIsOpen(true); },
         close: function () { return setIsOpen(false); },
     }); });
     return ((0, jsx_runtime_1.jsx)(material_1.Dialog, __assign({ open: overrideOpen !== null && overrideOpen !== void 0 ? overrideOpen : isOpen, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", sx: __assign({ "& .MuiPaper-root": {
                 backgroundColor: "transparent",
-                borderRadius: theme.mixins.customRadius.r12,
+                borderRadius: theme.styleMixins.customRadius.r12,
                 overflow: "hidden",
             } }, sx) }, rest, { children: children })));
 });

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

@@ -50,7 +50,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Text_1 = __importDefault(require("../Text"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var DrawerComponent_1 = __importStar(require("../DrawerComponent"));
 var useWallet_1 = __importDefault(require("../../../hooks/useWallet"));
 var compactWalletAddress_1 = __importDefault(require("../../../utils/compactWalletAddress"));
@@ -65,22 +65,23 @@ var Icon_1 = __importDefault(require("../Icon"));
 var AssetViewHeader = function () {
     var _a = (0, useWallet_1.default)(), masterWallet = _a.masterWallet, blockchainWallets = _a.blockchainWallets;
     var options = (0, TekWalletProvider_1.useWalletSetup)().options;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var modalRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "start", position: "relative", boxShadow: "0 0 1px 2px rgba(0, 0, 0, 0.03)", px: theme.mixins.customPadding.p16 }), children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: modalRef, trigger: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.row), { alignItems: "center", justifyContent: "start", textAlign: "center", gap: theme.mixins.gaps.g4, py: theme.mixins.customPadding.p8 }), theme.mixins.value), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1.25rem", height: "1.25rem" }, children: SvgPath_1.WALLET }), (0, compactWalletAddress_1.default)(masterWallet), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "0.625rem", height: "0.625rem" }, children: SvgPath_1.ARROW_DROP_DOWN })] }), direction: DrawerComponent_1.DRAWER_DIRECTION.TOP, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { justifyContent: "start", position: "relative", boxShadow: "0 0 1px 2px rgba(0, 0, 0, 0.03)", px: theme.styleMixins.customPadding.p16 }), children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: modalRef, trigger: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.styleMixins.row), { alignItems: "center", justifyContent: "start", textAlign: "center", gap: theme.styleMixins.gaps.g4, py: theme.styleMixins.customPadding.p8 }), theme.styleMixins.value), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1.25rem", height: "1.25rem" }, children: SvgPath_1.WALLET }), (0, compactWalletAddress_1.default)(masterWallet), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "0.625rem", height: "0.625rem" }, children: SvgPath_1.ARROW_DROP_DOWN })] }), direction: DrawerComponent_1.DRAWER_DIRECTION.TOP, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                         width: "100%",
                         height: "fit-content",
-                        backgroundColor: "white",
-                        padding: theme.mixins.customPadding.p16,
-                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.mixins.headerTitle), { py: theme.mixins.customPadding.p8, textAlign: "left" }), children: "Wallet address" }), (0, jsx_runtime_1.jsx)(CloseModal_1.default, { onClick: function () { var _a; return (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.close(); } })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), children: [!!masterWallet && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: masterWallet !== null && masterWallet !== void 0 ? masterWallet : "", messageSuccess: "Copied Internal address", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ py: theme.mixins.customPadding.p8 }, theme.mixins.row), { justifyContent: "space-between", alignItems: "center", gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1.75rem", height: "1.75rem", opacity: 0.7 }, children: SvgPath_1.WALLET }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.mixins.listTitle), children: "Internal wallet" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.mixins.listDescription), children: (0, compactWalletAddress_1.default)(masterWallet) })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1rem", height: "1rem" }, children: SvgPath_1.IC_COPY })] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                                                my: theme.mixins.customPadding.p8,
-                                            } })] })), blockchainWallets === null || blockchainWallets === void 0 ? void 0 : blockchainWallets.map(function (wallet, index) { return ((0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: wallet.blockchainAddress, messageSuccess: "Copied ".concat(wallet.networkName, " address"), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ py: theme.mixins.customPadding.p8 }, theme.mixins.row), { gap: theme.mixins.gaps.g8, justifyContent: "space-between", alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: wallet.networkIcon, width: 28, sx: { borderRadius: theme.mixins.customRadius.full } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.mixins.listTitle), children: wallet.networkName }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.mixins.listDescription), children: (0, compactWalletAddress_1.default)(wallet.blockchainAddress) })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1rem", height: "1rem" }, children: SvgPath_1.IC_COPY })] }) }, wallet.blockchainAddress + index)); })] })] }) }), (0, jsx_runtime_1.jsx)(link_1.default, { href: "".concat((options === null || options === void 0 ? void 0 : options.basePath) || "", "/tek-wallet/").concat(TekWalletView_1.TekWalletViewRoutes.SETTING), children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
+                        backgroundColor: "background.default",
+                        padding: theme.styleMixins.customPadding.p16,
+                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.styleMixins.headerTitle), { py: theme.styleMixins.customPadding.p8, textAlign: "left" }), children: "Wallet address" }), (0, jsx_runtime_1.jsx)(CloseModal_1.default, { onClick: function () { var _a; return (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.close(); } })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.styleMixins.column), children: [!!masterWallet && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: masterWallet !== null && masterWallet !== void 0 ? masterWallet : "", messageSuccess: "Copied Internal address", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ py: theme.styleMixins.customPadding.p8 }, theme.styleMixins.row), { justifyContent: "space-between", alignItems: "center", gap: theme.styleMixins.gaps.g8, color: "text.primary" }), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1.75rem", height: "1.75rem", opacity: 0.7 }, children: SvgPath_1.WALLET }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.styleMixins.column), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.listTitle), { color: "inherit" }), children: "Internal wallet" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.styleMixins.listDescription), children: (0, compactWalletAddress_1.default)(masterWallet) })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1rem", height: "1rem" }, children: SvgPath_1.IC_COPY })] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                                my: theme.styleMixins.customPadding.p8,
+                                            } })] })), blockchainWallets === null || blockchainWallets === void 0 ? void 0 : blockchainWallets.map(function (wallet, index) { return ((0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: wallet.blockchainAddress, messageSuccess: "Copied ".concat(wallet.networkName, " address"), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ py: theme.styleMixins.customPadding.p8 }, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, justifyContent: "space-between", alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: wallet.networkIcon, width: 28, sx: { borderRadius: theme.styleMixins.customRadius.full } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.styleMixins.column), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.styleMixins.listTitle), children: wallet.networkName }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.styleMixins.listDescription), children: (0, compactWalletAddress_1.default)(wallet.blockchainAddress) })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1rem", height: "1rem" }, children: SvgPath_1.IC_COPY })] }) }, wallet.blockchainAddress + index)); })] })] }) }), (0, jsx_runtime_1.jsx)(link_1.default, { href: "".concat((options === null || options === void 0 ? void 0 : options.basePath) || "", "/tek-wallet/").concat(TekWalletView_1.TekWalletViewRoutes.SETTING), children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
                         width: "1.5rem",
                         height: "1.5rem",
                         position: "absolute",
                         right: "16px",
                         top: "50%",
                         transform: "translateY(-50%)",
+                        color: "text.secondary",
                     }, children: SvgPath_1.IC_SETTING }) })] }));
 };
 exports.default = AssetViewHeader;

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

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

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

@@ -24,10 +24,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 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");
 function BottomActionLayout(_a) {
     var children = _a.children, sx = _a.sx, rest = __rest(_a, ["children", "sx"]);
-    var theme = (0, providers_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ sx: __assign({ width: "100%", paddingLeft: theme.mixins.pagePadding, paddingRight: theme.mixins.pagePadding, paddingBottom: theme.mixins.customPadding.p24 }, sx) }, rest, { children: children })));
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ sx: __assign({ width: "100%", paddingLeft: theme.styleMixins.pagePadding, paddingRight: theme.styleMixins.pagePadding, paddingBottom: theme.styleMixins.customPadding.p24 }, sx) }, rest, { children: children })));
 }
 exports.default = BottomActionLayout;

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

@@ -29,7 +29,7 @@ exports.BUTTON_STATUS = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react-hooks/rules-of-hooks */
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var ClickEffect_1 = __importDefault(require("../ClickEffect"));
 var BUTTON_STATUS;
 (function (BUTTON_STATUS) {
@@ -66,7 +66,7 @@ Button.Secondary = function (props) {
     // const theme = useTheme();
     return ((0, jsx_runtime_1.jsx)(Button, __assign({}, rest, { variant: "outlined", sx: __assign({ 
             // color: theme.palette.text.primary,
-            // borderRadius: theme.mixins.customRadius.r12,
+            // borderRadius: theme.styleMixins.customRadius.r12,
             // borderColor: "currentcolor",
             // textTransform: "capitalize",
             position: "relative" }, sx), disabled: status !== BUTTON_STATUS.ENABLED })));
@@ -74,8 +74,8 @@ Button.Secondary = function (props) {
 Button.Secondary.displayName = "Button.Secondary";
 Button.Text = function (props) {
     var sx = props.sx, _a = props.status, status = _a === void 0 ? BUTTON_STATUS.ENABLED : _a, rest = __rest(props, ["sx", "status"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(Button, __assign({}, rest, { variant: "text", color: "secondary", sx: __assign({ width: "fit-content", height: "fit-content", px: theme.mixins.customPadding.p16, py: theme.mixins.customPadding.p8, textTransform: "capitalize", color: theme.palette.text.primary }, sx), disabled: status !== BUTTON_STATUS.ENABLED })));
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(Button, __assign({}, rest, { variant: "text", color: "secondary", sx: __assign({ width: "fit-content", height: "fit-content", px: theme.styleMixins.customPadding.p16, py: theme.styleMixins.customPadding.p8, textTransform: "capitalize", color: theme.palette.text.primary }, sx), disabled: status !== BUTTON_STATUS.ENABLED })));
 };
 Button.Text.displayName = "Button.Text";
 exports.default = Button;

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

@@ -7,29 +7,29 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var Icon_1 = __importDefault(require("../Icon"));
 var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var Text_1 = __importDefault(require("../Text"));
 var CardToken = function (_a) {
     var icon = _a.icon, symbol = _a.symbol, balance = _a.balance, price = _a.price, rate = _a.rate, _b = _a.isActive, isActive = _b === void 0 ? false : _b;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
             border: "1px solid",
-            borderColor: "".concat(isActive ? theme.palette.primary.main : theme.palette.border.accent3),
-            backgroundColor: "".concat(isActive ? theme.palette.background.tertiary : theme.palette.background.white),
+            borderColor: "".concat(isActive ? theme.palette.primary.main : theme.palette.divider),
+            backgroundColor: "".concat(isActive ? theme.palette.background.tertiary : theme.palette.background.default),
         }, className: "p-4 rounded-16", 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-3", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: icon || (0, getIcon_1.default)("".concat(icon)), width: 20, height: 20 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex flex-col justify-start", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "p", sx: {
-                                        color: theme.palette.text.blackContrast,
+                                        color: theme.palette.text.primary,
                                         fontWeight: theme.typography.fontWeight400,
                                         fontSize: theme.typography.fontSize14,
                                     }, children: symbol }), (0, jsx_runtime_1.jsx)(Text_1.default, { component: "p", sx: {
-                                        color: theme.palette.text.accent,
+                                        color: theme.palette.text.secondary,
                                         fontWeight: theme.typography.fontWeight400,
                                         fontSize: theme.typography.fontSize12,
                                     }, children: balance })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex flex-col justify-end items-end", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "p", sx: {
-                                color: theme.palette.text.blackContrast,
+                                color: theme.palette.text.primary,
                                 fontWeight: theme.typography.fontWeight500,
                                 fontSize: theme.typography.fontSize14,
                             }, children: price }), (0, jsx_runtime_1.jsxs)(Text_1.default, { component: "p", sx: {
-                                color: theme.palette.text.accent,
+                                color: theme.palette.text.secondary,
                                 fontWeight: theme.typography.fontWeight400,
                                 fontSize: theme.typography.fontSize12,
                             }, children: ["~$", rate] })] })] }) }));

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

@@ -25,9 +25,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Column;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 function Column(props) {
     var children = props.children, onClick = props.onClick, sx = props.sx, rest = __rest(props, ["children", "onClick", "sx"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ sx: __assign(__assign({}, theme.mixins.column), sx), onClick: onClick }, rest, { children: children })));
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ sx: __assign(__assign({}, theme.styleMixins.column), sx), onClick: onClick }, rest, { children: children })));
 }

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

@@ -89,17 +89,18 @@ var OTP_1 = __importStar(require("../OTP"));
 var react_1 = require("react");
 var ModalLayout_1 = __importDefault(require("../ModalLayout"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var LoadingLayout_1 = __importDefault(require("../LoadingLayout"));
 var DrawerComponent_1 = __importDefault(require("../DrawerComponent"));
 var xhub_keyboard_1 = require("xhub-keyboard");
 var useUniqueId_1 = require("../../../hooks/useUniqueId");
 var xhub_keyboard_2 = require("xhub-keyboard");
 var useWarningWrongPasscode_1 = require("../../../hooks/useWarningWrongPasscode");
+var TekWalletProvider_1 = require("../../../providers/TekWalletProvider");
 var passcodeLength = 6;
 var ConfirmByPasscode = (0, react_1.forwardRef)(function (props, ref) {
     var onConfirmSuccess = props.onConfirmSuccess, sx = props.sx;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _a = (0, react_1.useState)(""), passcode = _a[0], setPasscode = _a[1];
     var loadingRef = (0, react_1.useRef)(null);
     var _b = (0, useWarningWrongPasscode_1.useValidatePasscode)(), handleVerifyPasscode = _b.handleVerifyPasscode, warningContent = _b.warningContent, isLocked = _b.isLocked, handleClearUnknownError = _b.handleClearUnknownError, unknownError = _b.unknownError;
@@ -187,9 +188,10 @@ var ConfirmByPasscode = (0, react_1.forwardRef)(function (props, ref) {
             }
         });
     }); }, [handleClose, handleVerifyPasscode, onConfirmSuccess, passcode]);
+    var keyboardThemeMode = (0, TekWalletProvider_1.useKeyboardThemeMode)();
     return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { style: {
                 width: "100%",
-            }, useBrowserInput: false, htmlFor: keyboardId, children: props.children }), onOpen: handleOnOpen, onDone: handleOnClose, triggerStatus: props.triggerStatus, sx: __assign({ width: "100%", maxWidth: "calc(100dvw - 2rem)", display: "flex" }, sx), children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { ref: keyboardRef, id: keyboardId, value: passcode, onChange: handlePasscodeChange, keyboardType: xhub_keyboard_1.KeyboardType.Text, layoutType: xhub_keyboard_1.LayoutType.Integer, styles: {
+            }, useBrowserInput: false, htmlFor: keyboardId, children: props.children }), onOpen: handleOnOpen, onDone: handleOnClose, triggerStatus: props.triggerStatus, sx: __assign({ width: "100%", maxWidth: "calc(100dvw - 2rem)", display: "flex" }, sx), children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { theme: keyboardThemeMode, ref: keyboardRef, id: keyboardId, value: passcode, onChange: handlePasscodeChange, keyboardType: xhub_keyboard_1.KeyboardType.Text, layoutType: xhub_keyboard_1.LayoutType.Integer, styles: {
                 keyboardContainer: {
                     display: isLocked ? "none" : "block",
                 },
@@ -201,7 +203,7 @@ var ConfirmByPasscode = (0, react_1.forwardRef)(function (props, ref) {
                     borderRadius: "1.5rem 1.5rem 0 0",
                 }, 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.styleMixins.column), { justifyContent: "center", alignItems: "center", gap: "0.75rem", width: "100%" }), children: [(0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { style: {
                                     width: "100%",
                                 }, useBrowserInput: false, htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(OTP_1.default, { disabled: isLocked, value: passcode, onChange: handlePasscodeChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.CONFIRM_BY_PASSCODE }) }), !isLocked && warningContent, unknownError] }) }) }) }) }));
 });

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

@@ -61,7 +61,7 @@ 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 ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var DrawerComponent_1 = __importStar(require("../DrawerComponent"));
 var react_1 = require("react");
 var ChildPageLayout_1 = __importDefault(require("../../../layouts/ChildPageLayout"));
@@ -69,7 +69,7 @@ var PageHeader_1 = __importDefault(require("../PageHeader"));
 var ConfirmLayout = (0, react_1.forwardRef)(function (props, ref) {
     var _a;
     var children = props.children, action = props.action, header = props.header, confirmAction = props.confirmAction, rest = __rest(props, ["children", "action", "header", "confirmAction"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var confirmByPasscodeDrawerRef = (0, react_1.useRef)(null);
     var handleOnClose = function () {
         var _a;
@@ -93,7 +93,7 @@ var ConfirmLayout = (0, react_1.forwardRef)(function (props, ref) {
             (_a = confirmByPasscodeDrawerRef.current) === null || _a === void 0 ? void 0 : _a.unlockStatus();
         },
     }); });
-    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, __assign({ direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, ref: confirmByPasscodeDrawerRef }, rest, { children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: (_a = header === null || header === void 0 ? void 0 : header.title) !== null && _a !== void 0 ? _a : action, overrideBack: handleOnClose }), footer: confirmAction, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { alignItems: "center", gap: theme.mixins.gaps.g16, padding: theme.mixins.customPadding.p16 }), children: children }) }) })));
+    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, __assign({ direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, ref: confirmByPasscodeDrawerRef }, rest, { children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: (_a = header === null || header === void 0 ? void 0 : header.title) !== null && _a !== void 0 ? _a : action, overrideBack: handleOnClose }), footer: confirmAction, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { alignItems: "center", gap: theme.styleMixins.gaps.g16, padding: theme.styleMixins.customPadding.p16 }), children: children }) }) })));
 });
 ConfirmLayout.displayName = "ConfirmLayout";
 exports.default = ConfirmLayout;

package/dist/components/TekWallet/components/ui/ConfirmSwapToken/Result.js

@@ -20,7 +20,7 @@ var material_1 = require("@mui/material");
 var Text_1 = __importDefault(require("../Text"));
 var react_1 = require("react");
 var Button_1 = __importDefault(require("../Button"));
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var Formatter_1 = __importDefault(require("../Formatter"));
 var Icon_1 = __importDefault(require("../Icon"));
 var useFormatter_1 = __importDefault(require("../../../hooks/useFormatter"));
@@ -29,7 +29,7 @@ var InlineTitleValue_1 = __importDefault(require("../InlineTitleValue"));
 var convertTokensRate_1 = __importDefault(require("../../views/SwapView/functions/convertTokensRate"));
 function Result(props) {
     var _a;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var formatDate = (0, useFormatter_1.default)().formatDate;
     var transaction = props.transaction, onDone = props.onDone;
     var status = (0, react_1.useMemo)(function () { return (transaction === null || transaction === void 0 ? void 0 : transaction.transaction_status) || "failed"; }, [transaction === null || transaction === void 0 ? void 0 : transaction.transaction_status]);
@@ -51,11 +51,11 @@ function Result(props) {
                         display: "flex",
                         flexDirection: "column",
                         alignItems: "center",
-                        gap: theme.mixins.gaps.g16,
+                        gap: theme.styleMixins.gaps.g16,
                         my: "auto",
                         backgroundColor: theme.palette.background.tertiary,
-                        borderRadius: theme.mixins.customRadius.r16,
-                        padding: theme.mixins.customPadding.p16,
+                        borderRadius: theme.styleMixins.customRadius.r16,
+                        padding: theme.styleMixins.customPadding.p16,
                         paddingTop: "0px",
                     }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: status === "success" ? "IC_CHECK_CIRCLE" : "IC_ERROR_CIRCLE", width: 100, sx: {
                                 transform: "translateY(-50%)",
@@ -65,28 +65,28 @@ function Result(props) {
                                 alignItems: "center",
                             }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                         fontSize: theme.typography.fontSize13,
-                                        color: theme.palette.text.accent2,
+                                        color: theme.palette.text.secondary,
                                     }, children: "Swap" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                         color: status === type_1.TransactionStatus.Success
-                                            ? theme.palette.text.successStatus
-                                            : theme.palette.text.errorStatus,
+                                            ? theme.palette.success.main
+                                            : theme.palette.error.main,
                                         textTransform: "capitalize",
                                         fontWeight: 600,
                                         fontSize: theme.typography.fontSize24,
-                                    }, children: status })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", borderTop: "1px ".concat(theme.palette.border.accent3, " solid") } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                    }, children: status })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", borderTop: "1px ".concat(theme.palette.divider, " solid") } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                 width: "100%",
                                 position: "relative",
                             }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                     display: "flex",
                                     alignItems: "center",
-                                    gap: theme.mixins.gaps.g4,
+                                    gap: theme.styleMixins.gaps.g4,
                                     position: "relative",
                                     zIndex: 1,
                                 }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: fromToken === null || fromToken === void 0 ? void 0 : fromToken.link, sx: {
                                             width: 20,
                                             height: 20,
                                             borderRadius: "999px",
-                                        } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "inherit" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mx: "auto" } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_SWAP", sx: {
+                                        } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { color: "inherit" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mx: "auto" } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_SWAP", sx: {
                                             width: 16,
                                             height: 16,
                                             position: "absolute",
@@ -97,19 +97,19 @@ function Result(props) {
                                             width: 20,
                                             height: 20,
                                             borderRadius: "999px",
-                                        } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "inherit" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: toAmount }) })] }) }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Price", titleStyle: {
+                                        } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { color: "inherit" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: toAmount }) })] }) }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Price", titleStyle: {
                                 fontSize: "0.875rem",
                                 fontWeight: 500,
-                                color: "gray.700",
-                            }, value: !!toTokenRate && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: ["1 ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.name, " ~ ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: toTokenRate, unit: toToken === null || toToken === void 0 ? void 0 : toToken.name })] })), isAligned: true }), !!(transaction === null || transaction === void 0 ? void 0 : transaction.date_created) && ((0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Date", titleStyle: {
+                                color: "text.secondary",
+                            }, value: !!toTokenRate && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: ["1 ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.name, " ~ ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: toTokenRate, unit: toToken === null || toToken === void 0 ? void 0 : toToken.name })] })), isAligned: true }), !!(transaction === null || transaction === void 0 ? void 0 : transaction.date_created) && ((0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Date", titleStyle: {
                                 fontSize: "0.875rem",
                                 fontWeight: 500,
-                                color: "gray.700",
-                            }, value: !!toTokenRate && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: formatDate(transaction === null || transaction === void 0 ? void 0 : transaction.date_created, true) })), isAligned: true }))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                color: "text.secondary",
+                            }, value: !!toTokenRate && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: formatDate(transaction === null || transaction === void 0 ? void 0 : transaction.date_created, true) })), isAligned: true }))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                         marginTop: "auto",
                         width: "100%",
                         display: "grid",
                         gridTemplateColumns: "1fr",
-                        gap: theme.mixins.gaps.g8,
+                        gap: theme.styleMixins.gaps.g8,
                     }, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100%" }, onClick: onDone, children: "Done" }) })] }) }));
 }

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

@@ -99,7 +99,7 @@ var validate_wallet_address_service_1 = __importDefault(require("../../../servic
 var type_2 = require("../../../services/axios/validate-wallet-address-service/type");
 var ConfirmByPasscode_1 = __importDefault(require("../ConfirmByPasscode"));
 var instructions_service_1 = __importDefault(require("../../../services/axios/instructions-service"));
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var useWallet_1 = __importDefault(require("../../../hooks/useWallet"));
 var TransferConfirmationError;
 (function (TransferConfirmationError) {
@@ -111,7 +111,7 @@ var TransferConfirmationError;
 })(TransferConfirmationError || (exports.TransferConfirmationError = TransferConfirmationError = {}));
 exports.TransferConfirmation = (0, react_1.forwardRef)(function (props, ref) {
     var _a, _b;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var transferData = props.transferData, transferContent = props.transferContent;
     var _c = (0, useWallet_1.default)(), isInitPasscode = _c.isInitPasscode, sendInternalTokens = _c.sendInternalTokens, updateSendInternalToken = _c.updateSendInternalToken;
     var confirmLayoutDrawerRef = (0, react_1.useRef)(null);
@@ -247,7 +247,7 @@ exports.TransferConfirmation = (0, react_1.forwardRef)(function (props, ref) {
                     ? DrawerComponent_1.DRAWER_TRIGGER_STATUS.DISABLED
                     : DrawerComponent_1.DRAWER_TRIGGER_STATUS.ENABLED, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { status: !!error || isValidatingAddress || errorAddress || !isEnoughBalance
                         ? Button_1.BUTTON_STATUS.DISABLED
-                        : buttonStatus, sx: { width: "100%" }, children: "Confirm" }) }), children: [transferContent, !!error && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.validationError), { mt: (_a = theme.mixins.gaps) === null || _a === void 0 ? void 0 : _a.g6 }), children: [error, " ", !!errorAmount && (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: errorAmount, unit: " ".concat(token === null || token === void 0 ? void 0 : token.name) })] })), !!errorAddress && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.validationError), { mt: (_b = theme.mixins.gaps) === null || _b === void 0 ? void 0 : _b.g6 }), children: errorAddress }))] }) }));
+                        : buttonStatus, sx: { width: "100%" }, children: "Confirm" }) }), children: [transferContent, !!error && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.validationError), { mt: (_a = theme.styleMixins.gaps) === null || _a === void 0 ? void 0 : _a.g6 }), children: [error, " ", !!errorAmount && (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: errorAmount, unit: " ".concat(token === null || token === void 0 ? void 0 : token.name) })] })), !!errorAddress && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.validationError), { mt: (_b = theme.styleMixins.gaps) === null || _b === void 0 ? void 0 : _b.g6 }), children: errorAddress }))] }) }));
 });
 exports.TransferConfirmation.displayName = "TransferConfirmation";
 exports.default = exports.TransferConfirmation;

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

@@ -53,12 +53,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var Text_1 = __importDefault(require("../Text"));
 var SvgPath_1 = require("../SvgPath");
 var CopyTextComponent = function (_a) {
     var value = _a.value, iconSuccess = _a.iconSuccess, children = _a.children, hideTextMessage = _a.hideTextMessage, sx = _a.sx, messageSuccess = _a.messageSuccess;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _b = (0, react_1.useState)(false), showSuccess = _b[0], setShowSuccess = _b[1];
     var copyText = function (e) { return __awaiter(void 0, void 0, void 0, function () {
         var err_1;
@@ -89,22 +89,22 @@ var CopyTextComponent = function (_a) {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    gap: theme.mixins.gaps.g4,
+                    gap: theme.styleMixins.gaps.g4,
                     opacity: showSuccess ? 1 : 0,
                     position: "absolute",
                     top: 0,
                     left: "50%",
                     transform: "translate(-50%, -80%) scale(".concat(showSuccess ? 1 : 0, ")"),
                     transformOrigin: "center bottom",
-                    backgroundColor: theme.palette.background.black,
+                    backgroundColor: "background.popover",
                     backdropFilter: "blur(12px)",
                     borderRadius: 9999,
-                    padding: "".concat(theme.mixins.customPadding.p8, " ").concat(theme.mixins.customPadding.p12),
+                    padding: "".concat(theme.styleMixins.customPadding.p8, " ").concat(theme.styleMixins.customPadding.p12),
                     transition: showSuccess
                         ? "opacity 0.5s linear, transform 0.17s linear"
                         : "opacity 0.15s linear, transform 0.1s linear",
                 }, children: [iconSuccess || (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1rem", height: "1rem" }, children: SvgPath_1.IC_SUCCESS }), !hideTextMessage && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                            color: theme.palette.text.successStatus,
+                            color: theme.palette.success.main,
                             fontSize: theme.typography.fontSize14,
                             lineHeight: theme.typography.leading100,
                             whiteSpace: "nowrap",

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

@@ -62,6 +62,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
 var Popover_1 = __importDefault(require("@mui/material/Popover"));
 var material_1 = require("@mui/material");
+var Text_1 = __importDefault(require("../Text"));
 var CustomTooltip = React.forwardRef(function (_a, ref) {
     var trigger = _a.trigger, children = _a.children, disabled = _a.disabled, _b = _a.anchorOrigin, anchorOrigin = _b === void 0 ? {
         vertical: "bottom",
@@ -85,12 +86,13 @@ var CustomTooltip = React.forwardRef(function (_a, ref) {
     };
     var open = Boolean(anchorEl);
     var id = open ? "simple-popover" : undefined;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: cancelPropagation, sx: { display: "inline-block" }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "div", "aria-describedby": id, onClick: handleOpen, sx: { textAlign: "left" }, children: trigger }), (0, jsx_runtime_1.jsx)(Popover_1.default, __assign({ id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: anchorOrigin, anchorPosition: anchorPosition, transformOrigin: transformOrigin, sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: cancelPropagation, sx: { display: "inline-block" }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "div", "aria-describedby": id, onClick: handleOpen, sx: { textAlign: "left", display: "inline-block" }, children: trigger }), (0, jsx_runtime_1.jsx)(Popover_1.default, __assign({ id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: anchorOrigin, anchorPosition: anchorPosition, transformOrigin: transformOrigin, sx: {
+                    display: "inline-block",
                     "& .MuiPopover-paper": {
                         backgroundColor: "transparent",
                         borderRadius: "0.75rem",
                     },
-                } }, rest, { children: children }))] }));
+                } }, rest, { children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: { color: "text.reverse", display: "inline-block" }, children: children }) }))] }));
 });
 CustomTooltip.displayName = "CustomTooltip";
 exports.default = CustomTooltip;