tek-wallet 0.0.806 → 0.0.808

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

@@ -64,16 +64,16 @@ var formatter_1 = __importDefault(require("../Formatter/functions/formatter"));
 var shareDrawer_1 = __importDefault(require("./components/shareDrawer"));
 var link_1 = __importDefault(require("next/link"));
 var DrawerComponent_1 = __importStar(require("../DrawerComponent"));
-var theme_1 = __importDefault(require("../../../theme/mui/deposit-fiat-theme/theme"));
 var Icon_1 = __importDefault(require("../Icon"));
 var Button_1 = __importStar(require("../Button"));
 var Text_1 = __importDefault(require("../Text"));
 var style_1 = require("./style");
-var palette_1 = require("../../../theme/mui/deposit-fiat-theme/palette");
 var type_1 = require("../../../services/axios/get-activities-service/type");
 var CopyTextComponent_1 = __importDefault(require("../CopyTextComponent"));
 var Formatter_1 = __importDefault(require("../Formatter"));
 var PageHeader_1 = __importDefault(require("../PageHeader"));
+var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 // Because PageHeader component don't work
 var BackArrow = function (props) {
     return ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, props, { children: [(0, jsx_runtime_1.jsx)("mask", { id: "mask0_6061_2295", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "24", height: "24", children: (0, jsx_runtime_1.jsx)("rect", { width: "24", height: "24", fill: "#D9D9D9" }) }), (0, jsx_runtime_1.jsx)("g", { mask: "url(#mask0_6061_2295)", children: (0, jsx_runtime_1.jsx)("path", { d: "M14 17.6538L8.34619 12L14 6.34619L15.0538 7.40002L10.4538 12L15.0538 16.6L14 17.6538Z", fill: "#121212" }) })] })));
@@ -92,22 +92,22 @@ var CopyIcon = function () {
 };
 exports.CopyIcon = CopyIcon;
 function FiatDeposit(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var _b, _c, _d, _e;
     var children = _a.children;
     var amountInputRef = (0, react_1.useRef)(null);
-    var _k = (0, useWallet_1.default)(), masterWallet = _k.masterWallet, transaction = _k.transaction, receiveExternalTokens = _k.receiveExternalTokens, tokens = _k.tokens;
-    var _l = (0, react_1.useState)(false), open = _l[0], setOpen = _l[1];
-    var _m = (0, react_1.useState)(false), openQR = _m[0], setOpenQR = _m[1];
-    var _o = (0, react_1.useState)(false), openShare = _o[0], setOpenShare = _o[1];
+    var _f = (0, useWallet_1.default)(), masterWallet = _f.masterWallet, transaction = _f.transaction, receiveExternalTokens = _f.receiveExternalTokens, tokens = _f.tokens;
+    var _g = (0, react_1.useState)(false), open = _g[0], setOpen = _g[1];
+    var _h = (0, react_1.useState)(false), openQR = _h[0], setOpenQR = _h[1];
+    var _j = (0, react_1.useState)(false), openShare = _j[0], setOpenShare = _j[1];
     var keyboardId = (0, useUniqueId_1.useUniqueId)("receive-function-keyboard");
-    var _p = (0, react_1.useState)(""), inputAmount = _p[0], setInputAmount = _p[1];
-    var _q = (0, react_1.useState)(null), depositData = _q[0], setDepositData = _q[1];
-    var _r = (0, react_1.useState)(false), loading = _r[0], setLoading = _r[1];
-    var _s = (0, react_1.useState)(null), error = _s[0], setError = _s[1];
-    var _t = (0, react_1.useState)(false), copySuccess = _t[0], setCopySuccess = _t[1];
-    var _u = (0, usehooks_ts_1.useCountdown)({
+    var _k = (0, react_1.useState)(""), inputAmount = _k[0], setInputAmount = _k[1];
+    var _l = (0, react_1.useState)(null), depositData = _l[0], setDepositData = _l[1];
+    var _m = (0, react_1.useState)(false), loading = _m[0], setLoading = _m[1];
+    var _o = (0, react_1.useState)(null), error = _o[0], setError = _o[1];
+    var _p = (0, react_1.useState)(false), copySuccess = _p[0], setCopySuccess = _p[1];
+    var _q = (0, usehooks_ts_1.useCountdown)({
         countStart: 600,
-    }), count = _u[0], _v = _u[1], startCountdown = _v.startCountdown, resetCountdown = _v.resetCountdown;
+    }), count = _q[0], _r = _q[1], startCountdown = _r.startCountdown, resetCountdown = _r.resetCountdown;
     var handleChangeAmount = function (value) {
         var amountNumber = Number(value);
         if (isNaN(amountNumber)) {
@@ -185,6 +185,8 @@ function FiatDeposit(_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputAmount]);
+    var keyboardThemeMode = (0, providers_1.useKeyboardThemeMode)();
+    var theme = (0, mui_1.useTheme)();
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { onClick: function (e) {
                     e.stopPropagation();
                     setOpen(true);
@@ -196,27 +198,27 @@ function FiatDeposit(_a) {
                         }, title: "Top up", overrideBack: function () {
                             setOpen(false);
                             setInputAmount("");
-                        } }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { id: keyboardId, onChange: handleChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), keyboardId: "amount-keyboard-id", classNames: {
+                        } }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { theme: keyboardThemeMode, id: keyboardId, onChange: handleChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), keyboardId: "amount-keyboard-id", classNames: {
                             children: "fc",
                         }, styles: {
                             container: {
                                 height: "100%",
                             },
                         }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { height: "100%", flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { height: 0, flex: 1, p: "1rem", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { flexDirection: "column", p: "1rem", sx: {
-                                            backgroundColor: theme_1.default.palette.tertiary.main,
+                                            backgroundColor: "background.tertiary",
                                             border: "1px solid",
-                                            borderColor: theme_1.default.palette.accent3.main,
+                                            borderColor: "palette.divider",
                                             borderRadius: "1rem",
                                             gap: "0.5rem",
                                             opacity: loading ? 0.5 : 1,
                                             pointerEvents: loading ? "none" : "auto",
-                                        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title02), color: (_b = palette_1.palette.positive) === null || _b === void 0 ? void 0 : _b.main, children: "You Pay" }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { autoFocus: true, alwaysFocus: true, ref: amountInputRef, elementsAcceptIds: ["amount-keyboard-id"], value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, styles: {
+                                        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title02), color: "text.primary", children: "You Pay" }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { autoFocus: true, alwaysFocus: true, ref: amountInputRef, elementsAcceptIds: ["amount-keyboard-id"], value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, styles: {
                                                         container: {
-                                                            border: "1px solid ".concat(error ? theme_1.default.palette.error.main : theme_1.default.palette.primary.main),
+                                                            border: "1px solid ".concat(error ? theme.palette.error.main : theme.palette.primary.main),
                                                         },
                                                     }, rightElement: (0, jsx_runtime_1.jsxs)(material_1.Stack, { flexDirection: "row", alignItems: "center", gap: "4px", flexShrink: 0, pl: "1rem", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { alt: "", width: 16, height: 16, sx: {
                                                                     borderRadius: "999px",
-                                                                }, src: (_d = (_c = tokens === null || tokens === void 0 ? void 0 : tokens.find(function (item) { return item.currency_slug.toLocaleLowerCase() === "vnd"; })) === null || _c === void 0 ? void 0 : _c.currency.link) !== null && _d !== void 0 ? _d : "/" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title03), color: (_e = palette_1.palette.accent2) === null || _e === void 0 ? void 0 : _e.main, children: "VND" })] }) }) }), error && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, style_1.content02), display: "flex", alignItems: "center", gap: "4px", className: "text-error", children: [(0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 5.25V7.4375M12.25 7C12.25 7.68944 12.1142 8.37213 11.8504 9.00909C11.5865 9.64605 11.1998 10.2248 10.7123 10.7123C10.2248 11.1998 9.64605 11.5865 9.00909 11.8504C8.37213 12.1142 7.68944 12.25 7 12.25C6.31056 12.25 5.62787 12.1142 4.99091 11.8504C4.35395 11.5865 3.7752 11.1998 3.28769 10.7123C2.80018 10.2248 2.41347 9.64605 2.14963 9.00909C1.8858 8.37213 1.75 7.68944 1.75 7C1.75 5.60761 2.30312 4.27226 3.28769 3.28769C4.27226 2.30312 5.60761 1.75 7 1.75C8.39239 1.75 9.72774 2.30312 10.7123 3.28769C11.6969 4.27226 12.25 5.60761 12.25 7ZM7 9.1875H7.00467V9.19217H7V9.1875Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }), error] }))] }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { pt: "12px", id: "input-amount-action", children: (0, jsx_runtime_1.jsx)(material_1.Box, { px: "1rem", pb: "1.5rem", children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { status: !!error || !inputAmount
+                                                                }, src: (_c = (_b = tokens === null || tokens === void 0 ? void 0 : tokens.find(function (item) { return item.currency_slug.toLocaleLowerCase() === "vnd"; })) === null || _b === void 0 ? void 0 : _b.currency.link) !== null && _c !== void 0 ? _c : "/" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title03), color: "text.primary", children: "VND" })] }) }) }), error && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, style_1.content02), display: "flex", alignItems: "center", gap: "4px", className: "text-error", children: [(0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 5.25V7.4375M12.25 7C12.25 7.68944 12.1142 8.37213 11.8504 9.00909C11.5865 9.64605 11.1998 10.2248 10.7123 10.7123C10.2248 11.1998 9.64605 11.5865 9.00909 11.8504C8.37213 12.1142 7.68944 12.25 7 12.25C6.31056 12.25 5.62787 12.1142 4.99091 11.8504C4.35395 11.5865 3.7752 11.1998 3.28769 10.7123C2.80018 10.2248 2.41347 9.64605 2.14963 9.00909C1.8858 8.37213 1.75 7.68944 1.75 7C1.75 5.60761 2.30312 4.27226 3.28769 3.28769C4.27226 2.30312 5.60761 1.75 7 1.75C8.39239 1.75 9.72774 2.30312 10.7123 3.28769C11.6969 4.27226 12.25 5.60761 12.25 7ZM7 9.1875H7.00467V9.19217H7V9.1875Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }), error] }))] }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { pt: "12px", id: "input-amount-action", children: (0, jsx_runtime_1.jsx)(material_1.Box, { px: "1rem", pb: "1.5rem", children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { status: !!error || !inputAmount
                                                 ? Button_1.BUTTON_STATUS.DISABLED
                                                 : loading
                                                     ? Button_1.BUTTON_STATUS.LOADING
@@ -225,12 +227,12 @@ function FiatDeposit(_a) {
                             setOpenQR(false);
                             setInputAmount("");
                         } }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { height: "100%", p: "1rem", pt: "26%", children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { height: 0, flex: 1, width: "100%", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", p: "1rem", sx: {
-                                        backgroundColor: theme_1.default.palette.tertiary.main,
+                                        backgroundColor: "background.tertiary",
                                         border: "1px solid",
-                                        borderColor: theme_1.default.palette.accent3.main,
+                                        borderColor: "palette.divider",
                                         borderRadius: "1rem",
                                         gap: "0.75rem",
-                                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", width: "45%", mt: "-25%", sx: { aspectRatio: "1 / 1" }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (_f = depositData === null || depositData === void 0 ? void 0 : depositData.qr_code) !== null && _f !== void 0 ? _f : "/", sx: {
+                                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", width: "45%", mt: "-25%", sx: { aspectRatio: "1 / 1" }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (_d = depositData === null || depositData === void 0 ? void 0 : depositData.qr_code) !== null && _d !== void 0 ? _d : "/", sx: {
                                                         position: "absolute",
                                                         inset: 0,
                                                     }, style: { filter: count === 0 ? "blur(6px)" : "none" } }), count === 0 && ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", position: "absolute", alignItems: "center", justifyContent: "center", sx: {
@@ -243,16 +245,16 @@ function FiatDeposit(_a) {
                                                 display: "flex",
                                                 alignItems: "center",
                                                 flexDirection: "column",
-                                                color: theme_1.default.palette.primary.main,
+                                                color: "text.primary",
                                             }, children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { value: depositData === null || depositData === void 0 ? void 0 : depositData.amount, unit: "VND", hideUnitOutSide: true }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                         fontSize: "0.938rem",
                                                         fontWeight: 500,
                                                         lineHeight: "140%",
-                                                    }, children: "VND" })] }), (0, jsx_runtime_1.jsxs)(Text_1.default, { display: "flex", alignItems: "center", gap: "0.375rem", sx: __assign({}, style_1.title03), color: (_g = palette_1.palette.accent2) === null || _g === void 0 ? void 0 : _g.main, children: ["Top up time left", (0, jsx_runtime_1.jsx)(TimeText_1.default, { seconds: count }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 5V7.5M13 7C13 7.78793 12.8448 8.56815 12.5433 9.2961C12.2417 10.0241 11.7998 10.6855 11.2426 11.2426C10.6855 11.7998 10.0241 12.2417 9.2961 12.5433C8.56815 12.8448 7.78793 13 7 13C6.21207 13 5.43185 12.8448 4.7039 12.5433C3.97595 12.2417 3.31451 11.7998 2.75736 11.2426C2.20021 10.6855 1.75825 10.0241 1.45672 9.2961C1.15519 8.56815 1 7.78793 1 7C1 5.4087 1.63214 3.88258 2.75736 2.75736C3.88258 1.63214 5.4087 1 7 1C8.5913 1 10.1174 1.63214 11.2426 2.75736C12.3679 3.88258 13 5.4087 13 7ZM7 9.5H7.00533V9.50533H7V9.5Z", stroke: "#044C2F", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { flexItem: true }), (0, jsx_runtime_1.jsxs)(Text_1.default, { display: "flex", flexDirection: "column", alignItems: "center", gap: "0.375rem", sx: __assign({}, style_1.title01), children: [depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_name, (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.content02), color: (_h = palette_1.palette.accent2) === null || _h === void 0 ? void 0 : _h.main, children: depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.bank_name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title02), display: "flex", alignItems: "center", gap: "0.25rem", children: (0, jsx_runtime_1.jsxs)(CopyTextComponent_1.default, { sx: {
+                                                    }, children: "VND" })] }), (0, jsx_runtime_1.jsxs)(Text_1.default, { display: "flex", alignItems: "center", gap: "0.375rem", sx: __assign({}, style_1.title03), color: "text.primary", children: ["Top up time left", (0, jsx_runtime_1.jsx)(TimeText_1.default, { seconds: count }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 5V7.5M13 7C13 7.78793 12.8448 8.56815 12.5433 9.2961C12.2417 10.0241 11.7998 10.6855 11.2426 11.2426C10.6855 11.7998 10.0241 12.2417 9.2961 12.5433C8.56815 12.8448 7.78793 13 7 13C6.21207 13 5.43185 12.8448 4.7039 12.5433C3.97595 12.2417 3.31451 11.7998 2.75736 11.2426C2.20021 10.6855 1.75825 10.0241 1.45672 9.2961C1.15519 8.56815 1 7.78793 1 7C1 5.4087 1.63214 3.88258 2.75736 2.75736C3.88258 1.63214 5.4087 1 7 1C8.5913 1 10.1174 1.63214 11.2426 2.75736C12.3679 3.88258 13 5.4087 13 7ZM7 9.5H7.00533V9.50533H7V9.5Z", stroke: "#044C2F", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { flexItem: true }), (0, jsx_runtime_1.jsxs)(Text_1.default, { display: "flex", flexDirection: "column", alignItems: "center", gap: "0.375rem", sx: __assign({}, style_1.title01), children: [depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_name, (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.content02), color: "text.primary", children: depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.bank_name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title02), display: "flex", alignItems: "center", gap: "0.25rem", children: (0, jsx_runtime_1.jsxs)(CopyTextComponent_1.default, { sx: {
                                                             display: "flex",
                                                             alignItems: "center",
                                                             gap: 1,
-                                                        }, value: (depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_number) || "", children: [depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_number, " ", (0, jsx_runtime_1.jsx)(exports.CopyIcon, {})] }) }), (0, jsx_runtime_1.jsx)(link_1.default, { href: (_j = depositData === null || depositData === void 0 ? void 0 : depositData._link.payment_link.href) !== null && _j !== void 0 ? _j : "#", target: "_blank", rel: "noopener noreferrer", style: {
+                                                        }, value: (depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_number) || "", children: [depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_number, " ", (0, jsx_runtime_1.jsx)(exports.CopyIcon, {})] }) }), (0, jsx_runtime_1.jsx)(link_1.default, { href: (_e = depositData === null || depositData === void 0 ? void 0 : depositData._link.payment_link.href) !== null && _e !== void 0 ? _e : "#", target: "_blank", rel: "noopener noreferrer", style: {
                                                         marginTop: "-0.5rem",
                                                     }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, style_1.content02), { textDecoration: "underline", fontStyle: "italic" }), children: "Transfer" }) })] })] }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { pt: "0.75rem", pb: "1rem", width: "100%", children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { disabled: loading, loading: loading, onClick: function () {
                                         if (count === 0) {

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

@@ -68,6 +68,7 @@ var Formatter = function (_a) {
     ]);
     var trigger = valueDisplay();
     return ((0, jsx_runtime_1.jsx)(CustomTooltip_1.default, { disabled: disableTooltip, trigger: value ? addUnit(trigger) : trigger, sx: {
+            display: "inline-block",
             "& .MuiPaper-root": {
                 whiteSpace: "nowrap",
                 backdropFilter: "blur(10px)",
@@ -76,6 +77,8 @@ var Formatter = function (_a) {
                 fontSize: "1.05em",
                 fontWeight: 500,
                 lineHeight: "100%",
+                backgroundColor: "background.popover",
+                display: "inline-block",
             },
         }, children: (0, jsx_runtime_1.jsx)(exports.Formatter, { disableTooltip: true, start: start, value: value, lengthValueAllowed: 12, useCompact: false, unit: unit, allowShowZero: true, isNotCurrency: isNotCurrency }) }));
 };

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

@@ -16,15 +16,14 @@ 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 Icon_1 = __importDefault(require("../Icon"));
 var Text_1 = __importDefault(require("../Text"));
 var FunctionItem = function (props) {
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.column), { alignItems: "center", gap: theme.mixins.gaps.g4 }), props.sx), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: props.icon, alt: "", sx: {
-                    borderRadius: theme.mixins.customRadius.full,
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.styleMixins.column), { alignItems: "center", gap: theme.styleMixins.gaps.g4, color: theme.palette.primary.main }), props.sx), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: props.icon, alt: "", sx: {
+                    borderRadius: theme.styleMixins.customRadius.full,
                 }, width: 24 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                    color: theme.palette.text.primary,
                     fontSize: theme.typography.fontSize11,
                     lineHeight: theme.typography.leading140,
                     fontWeight: theme.typography.fontWeight600,

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

@@ -68,6 +68,6 @@ var Icon = function (props) {
     if (src) {
         return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ component: "img", src: src, alt: alt, onClick: onClick }, rest, { sx: __assign({ display: "block", width: ((_a = width !== null && width !== void 0 ? width : height) !== null && _a !== void 0 ? _a : false) ? "".concat((width || height || 0) / 16, "rem") : "auto", height: ((_b = height !== null && height !== void 0 ? height : width) !== null && _b !== void 0 ? _b : false) ? "".concat((height || width || 0) / 16, "rem") : "auto" }, sx) })));
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.SvgIcon, __assign({}, rest, { sx: __assign({ width: ((_c = width !== null && width !== void 0 ? width : height) !== null && _c !== void 0 ? _c : false) ? "".concat((width || height || 0) / 16, "rem") : "auto", height: ((_d = height !== null && height !== void 0 ? height : width) !== null && _d !== void 0 ? _d : false) ? "".concat((height || width || 0) / 16, "rem") : "auto" }, sx), children: icon })));
+    return ((0, jsx_runtime_1.jsx)(material_1.SvgIcon, __assign({}, rest, { onClick: onClick, sx: __assign({ width: ((_c = width !== null && width !== void 0 ? width : height) !== null && _c !== void 0 ? _c : false) ? "".concat((width || height || 0) / 16, "rem") : "auto", height: ((_d = height !== null && height !== void 0 ? height : width) !== null && _d !== void 0 ? _d : false) ? "".concat((height || width || 0) / 16, "rem") : "auto", display: "block" }, sx), children: icon })));
 };
 exports.default = Icon;

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

@@ -18,9 +18,9 @@ exports.default = IconText;
 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");
 function IconText(props) {
     var title = props.title, beforeIcon = props.beforeIcon, afterIcon = props.afterIcon, sx = props.sx;
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [beforeIcon && beforeIcon, (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, sx), children: title }), afterIcon && afterIcon] }));
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: [beforeIcon && beforeIcon, (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, sx), children: title }), afterIcon && afterIcon] }));
 }

package/dist/components/TekWallet/components/ui/IncomeWallet/components/AnalyticGroup.js

@@ -18,14 +18,14 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var Text_1 = __importDefault(require("../../Text"));
 var Formatter_1 = __importDefault(require("../../Formatter"));
-var providers_1 = require("../../../../providers");
 var ContentHiddenProvider_1 = require("../../../../providers/ContentHiddenProvider");
 var SvgPath_1 = require("../../SvgPath");
 var Column_1 = __importDefault(require("../../Column"));
 var Spacer_1 = __importDefault(require("../../Spacer"));
+var mui_1 = require("../../../../theme/mui");
 var AnalyticGroup = function (props) {
     var _a;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _b = (0, ContentHiddenProvider_1.useContentHidden)(), isHidden = _b.isHidden, setIsHidden = _b.setIsHidden;
     var userInfo = props.userInfo;
     var toggleHidden = function () {
@@ -34,54 +34,53 @@ var AnalyticGroup = function (props) {
     return ((0, jsx_runtime_1.jsxs)(Column_1.default, { children: [(0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
                     fontSize: theme.typography.fontSize12,
                     fontWeight: theme.typography.fontWeight500,
-                    color: theme.palette.text.accent2,
-                }, children: ["Welcome, ", userInfo === null || userInfo === void 0 ? void 0 : userInfo.accountName, "!"] }), (0, jsx_runtime_1.jsx)(Spacer_1.default, { value: "0.25rem" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g6, position: "relative", bottom: "30px" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                    color: theme.palette.text.secondary,
+                }, children: ["Welcome, ", userInfo === null || userInfo === void 0 ? void 0 : userInfo.accountName, "!"] }), (0, jsx_runtime_1.jsx)(Spacer_1.default, { value: "0.25rem" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g6, position: "relative", bottom: "30px", color: theme.palette.text.secondary }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontSize: theme.typography.fontSize15,
                                     fontWeight: theme.typography.fontWeight500,
-                                    color: theme.palette.text.accent2,
                                 }, children: "Total Amount" }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { onClick: toggleHidden, sx: { cursor: "pointer", width: 14, height: 14 }, children: SvgPath_1.IC_NO_SEE })] }), (0, jsx_runtime_1.jsxs)(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), { fontSize: theme.typography.fontSize20, gap: theme.mixins.gaps.g6 }), children: !isHidden ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: { fontWeight: theme.typography.fontWeight700 }, value: (_a = userInfo === null || userInfo === void 0 ? void 0 : userInfo.amount) !== null && _a !== void 0 ? _a : 0 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.styleMixins.row), theme.styleMixins.value), { fontSize: theme.typography.fontSize20, gap: theme.styleMixins.gaps.g6 }), children: !isHidden ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: { fontWeight: theme.typography.fontWeight700 }, value: (_a = userInfo === null || userInfo === void 0 ? void 0 : userInfo.amount) !== null && _a !== void 0 ? _a : 0 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                         fontWeight: theme.typography.fontWeight400,
                                                         fontSize: "0.8em",
                                                     }, children: "WealthS" }), (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,
-                                    }, children: "*****" })) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                        color: theme.palette.text.primary,
+                                    }, children: "*****" })) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                             fontWeight: theme.typography.fontWeight600,
                                             leading: theme.typography.leading140,
                                             fontSize: theme.typography.fontSize12,
                                             textTransform: "capitalize",
-                                            color: theme.palette.text.accent,
-                                        }, children: props.timeRange }), !isHidden ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { cursor: "pointer", width: 8, height: 8 }, children: SvgPath_1.ARROW_DROP_UP }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: theme.palette.text.alertStatus, fontSize: theme.typography.fontSize12, fontWeight: theme.typography.fontWeight600, borderBottom: "1px dashed currentColor" }), children: "5.63 (+3,22%)" })] })) : ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                            color: theme.palette.text.secondary,
+                                        }, children: props.timeRange }), !isHidden ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { cursor: "pointer", width: 8, height: 8 }, children: SvgPath_1.ARROW_DROP_UP }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { color: theme.palette.text.secondary, fontSize: theme.typography.fontSize12, fontWeight: theme.typography.fontWeight600, borderBottom: "1px dashed currentColor" }), children: "5.63 (+3,22%)" })] })) : ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                             fontSize: theme.typography.fontSize12,
                                             fontWeight: theme.typography.fontWeight600,
-                                            color: theme.palette.text.accent2,
-                                            display: theme.mixins.row,
+                                            color: theme.palette.text.secondary,
+                                            display: theme.styleMixins.row,
                                         }, children: "****" }))] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
                                     width: "110%",
-                                    borderColor: "".concat(theme.palette.border.accent),
+                                    borderColor: "".concat(theme.palette.divider),
                                     opacity: 0.2,
-                                    marginTop: theme.mixins.customMargin.m4,
-                                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    marginTop: theme.styleMixins.customMargin.m4,
+                                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                             fontWeight: theme.typography.fontWeight500,
                                             leading: theme.typography.leading140,
                                             fontSize: theme.typography.fontSize12,
                                             textTransform: "capitalize",
-                                            color: theme.palette.text.accent,
-                                        }, children: "Profit" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.mixins.row), children: !isHidden ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                            color: theme.palette.text.secondary,
+                                        }, children: "Profit" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.styleMixins.row), children: !isHidden ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                     fontSize: theme.typography.fontSize12,
                                                     fontWeight: theme.typography.fontWeight600,
-                                                    color: theme.palette.text.accent2,
+                                                    color: theme.palette.text.secondary,
                                                 }, children: "\u2248 250 WealthS" }) })) : ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                 fontSize: theme.typography.fontSize12,
                                                 fontWeight: theme.typography.fontWeight600,
-                                                color: theme.palette.text.accent2,
+                                                color: theme.palette.text.secondary,
                                             }, children: "****" })) }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { cursor: "pointer", width: 14, height: 14 }, children: SvgPath_1.IC_INFORMATION })] })] })] })] }));
 };
 exports.default = AnalyticGroup;

package/dist/components/TekWallet/components/ui/IncomeWallet/components/BalanceChart.js

@@ -53,11 +53,11 @@ var framer_motion_1 = require("framer-motion");
 var material_1 = require("@mui/material");
 var TimeFilter_1 = __importStar(require("../../TimeFilter"));
 var ContentHiddenProvider_1 = require("../../../../providers/ContentHiddenProvider");
-var providers_1 = require("../../../../providers");
 var DelayMounted_1 = __importDefault(require("../../DelayMounted"));
 var NeonLineChart_1 = __importDefault(require("../../NeonLineChart"));
 var SvgPath_1 = require("../../SvgPath");
 var AnalyticGroup_1 = __importDefault(require("./AnalyticGroup"));
+var mui_1 = require("../../../../theme/mui");
 var fakeSeries = [
     {
         name: "All",
@@ -110,14 +110,14 @@ var BalanceChart = function (props) {
     var _a = (0, react_1.useState)(false), expandAreaChart = _a[0], setExpandAreaChart = _a[1];
     var _b = (0, react_1.useState)(), timeRangeData = _b[0], setTimeRangeData = _b[1];
     var isHidden = (0, ContentHiddenProvider_1.useContentHidden)().isHidden;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var handleChangeTimeRange = function (data) {
         setTimeRangeData(data);
     };
     var toggleExpand = function () {
         setExpandAreaChart(function (prev) { return !prev; });
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, props.sx), { width: "100%" }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), children: [(0, jsx_runtime_1.jsx)(AnalyticGroup_1.default, { timeRange: timeRangeData === null || timeRangeData === void 0 ? void 0 : timeRangeData.type, userInfo: props.userInfo }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { position: "relative", marginTop: theme.mixins.customMargin.m12 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, props.sx), { width: "100%" }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.styleMixins.column), children: [(0, jsx_runtime_1.jsx)(AnalyticGroup_1.default, { timeRange: timeRangeData === null || timeRangeData === void 0 ? void 0 : timeRangeData.type, userInfo: props.userInfo }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { position: "relative", marginTop: theme.styleMixins.customMargin.m12 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                 width: "100%",
                                 position: "relative",
                                 transition: "all 500ms ease-in-out",
@@ -139,7 +139,7 @@ var BalanceChart = function (props) {
                                                 height: "fit-content",
                                                 transition: "all 500ms ease-in-out",
                                                 transform: !expandAreaChart ? "translateY(-100%)" : "none",
-                                                my: theme.mixins.customMargin.m3,
+                                                my: theme.styleMixins.customMargin.m3,
                                             } }) }) }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { style: {
                                         position: "relative",
                                         transform: "translateY(350%)",
@@ -158,7 +158,7 @@ var BalanceChart = function (props) {
                                     alignSelf: "center",
                                     transition: "all 500ms ease-in-out",
                                     cursor: "pointer",
-                                    mt: theme.mixins.customMargin.m4,
+                                    mt: theme.styleMixins.customMargin.m4,
                                     transform: !expandAreaChart
                                         ? "rotate(180deg) translateX(900%) translateY(120%)"
                                         : "translateX(-50%) translateY(100%)",

package/dist/components/TekWallet/components/ui/IncomeWallet/components/FunctionItem.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 material_1 = require("@mui/material");
-var providers_1 = require("../../../../providers");
 var Text_1 = __importDefault(require("../../Text"));
+var mui_1 = require("../../../../theme/mui");
 var FunctionItem = function (props) {
-    var theme = (0, providers_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.column), { alignItems: "center", gap: theme.mixins.gaps.g6 }), props.sx), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: props.width, height: props.height }, children: props.icon }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.styleMixins.column), { alignItems: "center", gap: theme.styleMixins.gaps.g6 }), props.sx), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: props.width, height: props.height }, children: props.icon }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                     color: "text.white",
                     fontSize: theme.typography.fontSize13,
                     lineHeight: theme.typography.leading140,

package/dist/components/TekWallet/components/ui/IncomeWallet/components/HistoryItem.js

@@ -7,8 +7,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var Row_1 = __importDefault(require("../../Row"));
 var Column_1 = __importDefault(require("../../Column"));
 var Text_1 = __importDefault(require("../../Text"));
-var providers_1 = require("../../../../providers");
 var Spacer_1 = __importDefault(require("../../Spacer"));
+var mui_1 = require("../../../../theme/mui");
 var convertIntoPrice = function (amount) {
     return amount.toLocaleString("en-US", {
         style: "currency",
@@ -19,13 +19,13 @@ var convertIntoPrice = function (amount) {
 var HistoryItem = function (_a) {
     var _b, _c;
     var tradeHistory = _a.tradeHistory;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var isIncome = ((_b = tradeHistory.inOut) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === "in";
     var sign = isIncome ? "+" : "-";
     var amount = convertIntoPrice((_c = tradeHistory.amount) !== null && _c !== void 0 ? _c : 0);
     var amountColor = isIncome ? "#008000" : "#FF0000";
     return ((0, jsx_runtime_1.jsxs)(Row_1.default, { sx: {
-            borderBottom: "1px solid ".concat(theme.palette.border.accent3),
+            borderBottom: "1px solid ".concat(theme.palette.divider),
             width: "100%",
             justifyContent: "space-between",
             padding: "0.5rem 0",

package/dist/components/TekWallet/components/ui/IncomeWallet/components/WealthDeposit.js

@@ -45,6 +45,7 @@ var deposit_1 = __importDefault(require("./deposit"));
 var xhub_keyboard_1 = require("xhub-keyboard");
 var PageHeader_1 = __importDefault(require("../../PageHeader"));
 var useUniqueId_1 = require("../../../../hooks/useUniqueId");
+var providers_1 = require("../../../../providers");
 function WealthDeposit(props) {
     var _a, _b;
     var drawerRef = (0, react_1.useRef)(null);
@@ -59,7 +60,8 @@ function WealthDeposit(props) {
     };
     var keyboardId = (0, useUniqueId_1.useUniqueId)("wealth-deposit-keyboard");
     var keyboardRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, onDismiss: props.onClose, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { ref: keyboardRef, id: keyboardId, value: props.amount, onChange: function (value) {
+    var keyboardThemeMode = (0, providers_1.useKeyboardThemeMode)();
+    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, onDismiss: props.onClose, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { theme: keyboardThemeMode, ref: keyboardRef, id: keyboardId, value: props.amount, onChange: function (value) {
                 var _a;
                 (_a = props === null || props === void 0 ? void 0 : props.setAmount) === null || _a === void 0 ? void 0 : _a.call(props, value);
             }, keyboardType: xhub_keyboard_1.KeyboardType.Double, layoutType: xhub_keyboard_1.LayoutType.Integer, viewFullHeight: true, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { onClose: close, fullScreen: true, backgroundColor: "#fff", overrideHeader: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Topup", overrideBack: handleOnClose, sx: {

package/dist/components/TekWallet/components/ui/IncomeWallet/components/WealthWithdraw.js

@@ -46,6 +46,7 @@ var xhub_keyboard_1 = require("xhub-keyboard");
 var PageHeader_1 = __importDefault(require("../../PageHeader"));
 var useUniqueId_1 = require("../../../../hooks/useUniqueId");
 var ref_extension_1 = require("../../../../utils/ref.extension");
+var providers_1 = require("../../../../providers");
 function WealthWithdraw(props) {
     var _a, _b;
     var drawerRef = (0, react_1.useRef)(null);
@@ -57,7 +58,8 @@ function WealthWithdraw(props) {
     };
     var keyboardId = (0, useUniqueId_1.useUniqueId)("wealth-withdraw-keyboard");
     var keyboardRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, onDismiss: props.onClose, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { ref: keyboardRef, id: keyboardId, value: props.amount, onChange: function (value) {
+    var keyboardThemeMode = (0, providers_1.useKeyboardThemeMode)();
+    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, onDismiss: props.onClose, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { theme: keyboardThemeMode, ref: keyboardRef, id: keyboardId, value: props.amount, onChange: function (value) {
                 var _a;
                 (_a = props === null || props === void 0 ? void 0 : props.setAmount) === null || _a === void 0 ? void 0 : _a.call(props, value);
             }, keyboardType: xhub_keyboard_1.KeyboardType.Double, layoutType: xhub_keyboard_1.LayoutType.Integer, viewFullHeight: true, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { onClose: close, fullScreen: true, backgroundColor: "#fff", overrideHeader: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Withdraw", overrideBack: handleOnClose, sx: {

package/dist/components/TekWallet/components/ui/IncomeWallet/components/history/index.js

@@ -5,15 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = TransactionHistory;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var providers_1 = require("../../../../../providers");
+var mui_1 = require("../../../../../theme/mui");
 var Column_1 = __importDefault(require("../../../Column"));
 var Text_1 = __importDefault(require("../../../Text"));
 var HistoryItem_1 = __importDefault(require("../HistoryItem"));
 function TransactionHistory(props) {
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     return ((0, jsx_runtime_1.jsx)(Column_1.default, { children: props.listItem.length > 0 ? (props.listItem.map(function (item) { return (0, jsx_runtime_1.jsx)(HistoryItem_1.default, { tradeHistory: item }, item.id); })) : ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                 fontSize: theme.typography.fontSize12,
                 fontWeight: theme.typography.fontWeight500,
-                color: theme.palette.text.accent2,
+                color: theme.palette.text.secondary,
             }, children: "No transaction found!" })) }));
 }

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

@@ -19,28 +19,28 @@ exports.IncomeWallet = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var useWalletData_1 = __importDefault(require("../../../hooks/useWalletData"));
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var Text_1 = __importDefault(require("../Text"));
 var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
 var Column_1 = __importDefault(require("../Column"));
 var Spacer_1 = __importDefault(require("../Spacer"));
 var IncomeWallet = function (props) {
     var isInitPasscode = (0, useWalletData_1.default)().isInitPasscode;
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isInitPasscode && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionDescription), children: "Please connect your wallet to get asset information" })), !!isInitPasscode && ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, __assign({}, props, { header: props.header, children: (0, jsx_runtime_1.jsxs)(Column_1.default, { sx: {
-                        paddingLeft: theme.mixins.customPadding.p16,
-                        paddingRight: theme.mixins.customPadding.p16,
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isInitPasscode && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionDescription), children: "Please connect your wallet to get asset information" })), !!isInitPasscode && ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, __assign({}, props, { header: props.header, children: (0, jsx_runtime_1.jsxs)(Column_1.default, { sx: {
+                        paddingLeft: theme.styleMixins.customPadding.p16,
+                        paddingRight: theme.styleMixins.customPadding.p16,
                     }, children: [props.balanceChart, (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                 display: "grid",
                                 gridTemplateColumns: "repeat(4, 1fr)",
-                                gap: theme.mixins.gaps.g12,
+                                gap: theme.styleMixins.gaps.g12,
                                 position: "relative",
                                 zIndex: 50,
-                                my: theme.mixins.customMargin.m20,
-                                paddingTop: theme.mixins.customPadding.p16,
-                                paddingBottom: theme.mixins.customPadding.p8,
+                                my: theme.styleMixins.customMargin.m20,
+                                paddingTop: theme.styleMixins.customPadding.p16,
+                                paddingBottom: theme.styleMixins.customPadding.p8,
                                 backgroundColor: theme.palette.background.tertiary,
-                                borderRadius: theme.mixins.customRadius.r16,
+                                borderRadius: theme.styleMixins.customRadius.r16,
                                 "& .MuiListItem-root, & .MuiListItem-root *": {
                                     color: theme.palette.text.primary,
                                     fontWeight: theme.typography.fontWeight600,

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

@@ -18,14 +18,14 @@ exports.default = InlineTitleValue;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var Text_1 = __importDefault(require("../Text"));
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 function InlineTitleValue(props) {
     var title = props.title, value = props.value, lined = props.lined, isAligned = props.isAligned, alignVertical = props.alignVertical, titleStyle = props.titleStyle, column = props.column;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
             display: "flex",
             flexDirection: column ? "column" : "row",
-            gap: theme.mixins.gaps.g8,
+            gap: theme.styleMixins.gaps.g8,
             width: "100%",
             justifyContent: isAligned ? "space-between" : "flex-start",
             alignItems: alignVertical !== null && alignVertical !== void 0 ? alignVertical : (column ? "flex-start" : "center"),

package/dist/components/TekWallet/components/ui/Input/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 Input = (0, react_1.forwardRef)(function (props, inputRef) {
     var inputRest = props.inputRest, leftPart = props.leftPart, rightPart = props.rightPart, sx = props.sx, inputSx = props.inputSx, rest = __rest(props, ["inputRest", "leftPart", "rightPart", "sx", "inputSx"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ ref: inputRef, sx: __assign(__assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g12, borderRadius: theme.mixins.customRadius.r8, paddingX: theme.mixins.customPadding.p16, border: "1px solid ".concat(theme.palette.border.primary), backgroundColor: theme.palette.background.white, color: theme.palette.text.black, backdropFilter: "blur(10px)" }), sx) }, rest, { children: [leftPart, (0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ autoComplete: "off", hiddenLabel: true, sx: __assign({ backgroundColor: "transparent", border: "none", outline: "none", flex: 1, height: "fit-content", "& .MuiInputBase-input": {
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ ref: inputRef, sx: __assign(__assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g12, borderRadius: 1, paddingX: theme.styleMixins.customPadding.p16, border: "1px solid ".concat(theme.palette.divider), backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, backdropFilter: "blur(10px)" }), sx) }, rest, { children: [leftPart, (0, jsx_runtime_1.jsx)(material_1.TextField, __assign({ autoComplete: "off", hiddenLabel: true, sx: __assign({ backgroundColor: "transparent", border: "none", outline: "none", flex: 1, height: "fit-content", "& .MuiInputBase-input": {
                         border: "none",
                         outline: "none",
-                        color: theme.palette.text.black,
+                        color: theme.palette.text.primary,
                         fontSize: theme.typography.fontSize13,
                         lineHeight: theme.typography.leading140,
                         fontWeight: theme.typography.fontWeight400,
-                        padding: "".concat(theme.mixins.customPadding.p12, " ").concat(0, "px"),
+                        padding: "".concat(theme.styleMixins.customPadding.p12, " ").concat(0, "px"),
                         // height: "fit-content",
                     }, "& fieldset": { border: "none" }, "& .MuiInputBase-input::placeholder": {
                         fontSize: theme.typography.fontSize13,

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

@@ -18,10 +18,10 @@ 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 LineValue = function (props) {
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var field = props.field, value = props.value, valueDescription = props.valueDescription;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.row), { alignItems: "center", gap: theme.mixins.gaps.g32 }), props.sx), children: [!!field && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.mixins.valueDescription), props.sxField), { whiteSpace: "nowrap" }), children: field })), (!!value || !!valueDescription) && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { flex: 1, alignItems: "end", gap: theme.mixins.gaps.g2 }), children: [!!value && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.mixins.value), { textAlign: "right" }), props.sxValue), children: value })), !!valueDescription && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.mixins.valueDescription), { textAlign: "right" }), props.sxValueDescription), children: valueDescription }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.styleMixins.row), { alignItems: "center", gap: theme.styleMixins.gaps.g32 }), props.sx), children: [!!field && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.styleMixins.valueDescription), props.sxField), { whiteSpace: "nowrap" }), children: field })), (!!value || !!valueDescription) && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { flex: 1, alignItems: "end", gap: theme.styleMixins.gaps.g2 }), children: [!!value && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.styleMixins.value), { textAlign: "right" }), props.sxValue), children: value })), !!valueDescription && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.styleMixins.valueDescription), { textAlign: "right" }), props.sxValueDescription), children: valueDescription }))] }))] }));
 };
 exports.default = LineValue;