tek-wallet 0.0.805 → 0.0.807

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;

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

@@ -27,21 +27,23 @@ 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 Text_1 = __importDefault(require("../Text"));
 var SvgPath_1 = require("../SvgPath");
 function ListItemCustom(_a) {
     var title = _a.title, description = _a.description, icon = _a.icon, rightIcon = _a.rightIcon, hideDefaultRightIcon = _a.hideDefaultRightIcon, sx = _a.sx, recommended = _a.recommended, hideTag = _a.hideTag, rest = __rest(_a, ["title", "description", "icon", "rightIcon", "hideDefaultRightIcon", "sx", "recommended", "hideTag"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, __assign({}, rest, { sx: __assign(__assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g12, padding: "calc(".concat(theme.mixins.customPadding.p16, " + 6px) ").concat(theme.mixins.customPadding.p16), border: "1px solid ".concat(theme.palette.border.accent3), borderRadius: theme.mixins.customRadius.r16, backgroundColor: theme.palette.background.white, backdropFilter: "blur(12px)", position: "relative", overflow: "hidden" }), sx), children: [!hideTag && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, __assign({}, rest, { sx: __assign(__assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g12, padding: "calc(".concat(theme.styleMixins.customPadding.p16, " + 6px) ").concat(theme.styleMixins.customPadding.p16), border: "1px solid ".concat(theme.palette.divider), borderRadius: theme.styleMixins.customRadius.r16, backgroundColor: theme.palette.background.default, backdropFilter: "blur(12px)", position: "relative", overflow: "hidden" }), sx), children: [!hideTag && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     position: "absolute",
-                    top: "-9px",
+                    top: "-10px",
                     left: "-1px",
                 }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
                             width: "6.6rem",
                             height: "auto",
-                        }, children: recommended ? SvgPath_1.IC_RECEIVE_TAG_RECOMMENDED : SvgPath_1.IC_RECEIVE_TAG }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), { whiteSpace: "nowrap", color: recommended ? theme.palette.text.blackContrast : theme.palette.text.white, fontSize: theme.typography.fontSize10, fontWeight: theme.typography.fontWeight600, lineHeight: "120%" }), children: recommended ? "Recommended" : "Fee upto 8%" })] })), icon, (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4, alignItems: "start", flex: 1 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.listTitle), children: title }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.listDescription), children: description })] }), rightIcon !== null && rightIcon !== void 0 ? rightIcon : (!hideDefaultRightIcon && (
+                            display: "block",
+                            color: recommended ? theme.palette.success.main : theme.palette.error.main,
+                        }, children: recommended ? SvgPath_1.IC_RECEIVE_TAG_RECOMMENDED : SvgPath_1.IC_RECEIVE_TAG }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.center), { whiteSpace: "nowrap", color: theme.palette.text.reverse, fontSize: theme.typography.fontSize10, fontWeight: theme.typography.fontWeight600, lineHeight: "120%" }), children: recommended ? "Recommended" : "Fee upto 8%" })] })), icon, (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g6, alignItems: "start", flex: 1 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.listTitle), children: title }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.listDescription), children: description })] }), rightIcon !== null && rightIcon !== void 0 ? rightIcon : (!hideDefaultRightIcon && (
             // <Icon width={10} src={getIcon("right_arrow")} sx={{ ml: "auto" }} />
-            (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "12px", height: "12px" }, children: SvgPath_1.IC_CHEVRON_RIGHT })))] })));
+            (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "0.75rem", height: "0.75rem", color: "text.secondary" }, children: SvgPath_1.IC_CHEVRON_RIGHT })))] })));
 }
 exports.default = ListItemCustom;

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

@@ -16,13 +16,13 @@ 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 Text_1 = __importDefault(require("../Text"));
 var react_1 = require("react");
 var LoadingLayout = (0, react_1.forwardRef)(function (props, ref) {
     var _a = (0, react_1.useState)(props.initLoading), loading = _a[0], setLoading = _a[1];
     var _b = props.loadingMessage, loadingMessage = _b === void 0 ? "Processing" : _b, children = props.children, sx = props.sx, overlaySx = props.overlaySx;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         startLoading: function () {
             setLoading(true);
@@ -31,7 +31,7 @@ var LoadingLayout = (0, react_1.forwardRef)(function (props, ref) {
             setLoading(false);
         },
     }); });
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ position: "relative", width: "fit-content", height: "fit-content" }, sx), children: [children, loading && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign(__assign({}, theme.mixins.whiteLoadingOverlay), theme.mixins.row), { gap: theme.mixins.gaps.g8, justifyContent: "center" }), overlaySx), children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { sx: { color: "black" }, size: 20 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ position: "relative", width: "fit-content", height: "fit-content" }, sx), children: [children, loading && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, justifyContent: "center" }), overlaySx), children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { sx: { color: "black" }, size: 20 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                             fontSize: theme.typography.fontSize12,
                             color: "black",
                         }, children: loadingMessage })] }))] }));

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

@@ -87,7 +87,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LockToken = exports.LockTokenError = void 0;
 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 Button_1 = __importStar(require("../Button"));
 var ConfirmLayout_1 = __importDefault(require("../ConfirmLayout"));
 var LineValue_1 = __importDefault(require("../LineValue"));
@@ -110,7 +110,7 @@ var LockTokenError;
 })(LockTokenError || (exports.LockTokenError = LockTokenError = {}));
 exports.LockToken = (0, react_1.forwardRef)(function (props, ref) {
     var _a, _b;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var lockTokens = (0, useLockTokenData_1.default)().lockTokens;
     var isInitPasscode = (0, useWalletData_1.default)().isInitPasscode;
     var confirmLayoutDrawerRef = (0, react_1.useRef)(null);
@@ -192,10 +192,10 @@ exports.LockToken = (0, react_1.forwardRef)(function (props, ref) {
     (0, react_1.useEffect)(function () {
         validateAmount(props.lockData);
     }, [validateAmount]);
-    return ((0, jsx_runtime_1.jsx)(RequireConnect_1.default, { children: (0, jsx_runtime_1.jsx)(ConfirmLayout_1.default, { ref: confirmLayoutDrawerRef, action: type_1.TransactionSlug.LOCKED_BALANCE, trigger: props.children, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.mixins.paper), children: (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: "Amount", value: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: props.lockData.amount, unit: " ".concat(token === null || token === void 0 ? void 0 : token.name) }) }) }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: ["Your balance is", " ", (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+    return ((0, jsx_runtime_1.jsx)(RequireConnect_1.default, { children: (0, jsx_runtime_1.jsx)(ConfirmLayout_1.default, { ref: confirmLayoutDrawerRef, action: type_1.TransactionSlug.LOCKED_BALANCE, trigger: props.children, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.styleMixins.paper), children: (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: "Amount", value: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: props.lockData.amount, unit: " ".concat(token === null || token === void 0 ? void 0 : token.name) }) }) }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: ["Your balance is", " ", (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontWeight: theme.typography.fontWeight600,
                                     color: theme.palette.text.secondary,
-                                }, children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: token === null || token === void 0 ? void 0 : token.balance, unit: " ".concat(token === null || token === void 0 ? void 0 : token.name) }) })] }), !!error && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.validationError), { mt: theme.mixins.gaps.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) })] })), (0, jsx_runtime_1.jsx)(ConfirmByPasscode_1.default, { action: type_1.TransactionSlug.LOCKED_BALANCE, onConfirmSuccess: handleLockToken, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { status: !!error ? Button_1.BUTTON_STATUS.DISABLED : buttonStatus, sx: { width: "100%" }, children: "Confirm" }) })] }) }) }));
+                                }, children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: token === null || token === void 0 ? void 0 : token.balance, unit: " ".concat(token === null || token === void 0 ? void 0 : token.name) }) })] }), !!error && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.validationError), { mt: theme.styleMixins.gaps.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) })] })), (0, jsx_runtime_1.jsx)(ConfirmByPasscode_1.default, { action: type_1.TransactionSlug.LOCKED_BALANCE, onConfirmSuccess: handleLockToken, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { status: !!error ? Button_1.BUTTON_STATUS.DISABLED : buttonStatus, sx: { width: "100%" }, children: "Confirm" }) })] }) }) }));
 });
 exports.LockToken.displayName = "LockToken";
 exports.default = exports.LockToken;

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

@@ -17,65 +17,65 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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");
 var Icon_1 = __importDefault(require("../Icon"));
 var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
 var CheckBoxComponent_1 = __importDefault(require("../CheckBoxComponent"));
 var Button_1 = __importDefault(require("../Button"));
 var ModalCheckboxToken = function (_a) {
     var tokenLists = _a.tokenLists, handleTokenSelect = _a.handleTokenSelect, _b = _a.selectedTokens, selectedTokens = _b === void 0 ? [] : _b, onApply = _a.onApply, onReset = _a.onReset;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                    backgroundColor: theme.palette.border.accent3,
+                    backgroundColor: theme.palette.divider,
                     width: "100%",
-                    mt: theme.mixins.customMargin.m12,
-                    mb: theme.mixins.customMargin.m12,
+                    mt: theme.styleMixins.customMargin.m12,
+                    mb: theme.styleMixins.customMargin.m12,
                 } }), (0, jsx_runtime_1.jsx)(material_1.InputBase, { startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { className: "size-5 text-black", position: "start", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "size-5", src: (0, getIcon_1.default)("search") }) }), placeholder: "Search", sx: {
                     "input::placeholder": {
                         fontSize: theme.typography.fontSize12,
-                        color: theme.palette.text.black,
+                        color: theme.palette.text.primary,
                         fontWeight: theme.typography.fontWeight500,
-                        pl: theme.mixins.customPadding.p4,
+                        pl: theme.styleMixins.customPadding.p4,
                     },
-                }, className: "w-full flex items-center py-1 px-2 rounded-12 border border-".concat(theme.palette.border.accent3, " bg-white text-black") }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                    backgroundColor: theme.palette.border.accent3,
+                }, className: "w-full flex items-center py-1 px-2 rounded-12 border border-".concat(theme.palette.divider, " bg-white text-black") }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                    backgroundColor: theme.palette.divider,
                     width: "100%",
-                    mt: theme.mixins.customMargin.m12,
-                    mb: theme.mixins.customMargin.m12,
-                } }), tokenLists === null || tokenLists === void 0 ? void 0 : tokenLists.map(function (token) { return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: function () { return handleTokenSelect(token === null || token === void 0 ? void 0 : token.name); }, sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between", alignItems: "center", px: theme.mixins.customPadding.p8, py: theme.mixins.customPadding.p4, borderRadius: theme.mixins.customRadius.r12, cursor: "pointer", border: "1px solid", borderColor: selectedTokens.includes(token === null || token === void 0 ? void 0 : token.name)
+                    mt: theme.styleMixins.customMargin.m12,
+                    mb: theme.styleMixins.customMargin.m12,
+                } }), tokenLists === null || tokenLists === void 0 ? void 0 : tokenLists.map(function (token) { return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: function () { return handleTokenSelect(token === null || token === void 0 ? void 0 : token.name); }, sx: __assign(__assign({}, theme.styleMixins.row), { justifyContent: "space-between", alignItems: "center", px: theme.styleMixins.customPadding.p8, py: theme.styleMixins.customPadding.p4, borderRadius: theme.styleMixins.customRadius.r12, cursor: "pointer", border: "1px solid", borderColor: selectedTokens.includes(token === null || token === void 0 ? void 0 : token.name)
                         ? theme.palette.primary.main
-                        : "transparent", backgroundColor: theme.palette.background.white, mt: theme.mixins.customMargin.m12 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [(token === null || token === void 0 ? void 0 : token.name) !== "All Token" && ((0, jsx_runtime_1.jsx)(Icon_1.default, { src: token === null || token === void 0 ? void 0 : token.link, width: 16, height: 16, alt: "token", className: "rounded-full" })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { mt: theme.mixins.customMargin.m4, mb: theme.mixins.customMargin.m4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                        : "transparent", backgroundColor: theme.palette.background.default, mt: theme.styleMixins.customMargin.m12 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: [(token === null || token === void 0 ? void 0 : token.name) !== "All Token" && ((0, jsx_runtime_1.jsx)(Icon_1.default, { src: token === null || token === void 0 ? void 0 : token.link, width: 16, height: 16, alt: "token", className: "rounded-full" })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { mt: theme.styleMixins.customMargin.m4, mb: theme.styleMixins.customMargin.m4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                             fontSize: theme.typography.fontSize14,
                                             fontWeight: theme.typography.fontWeight500,
-                                            color: theme.palette.text.blackContrast,
+                                            color: theme.palette.text.primary,
                                         }, children: token === null || token === void 0 ? void 0 : token.name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                             fontSize: theme.typography.fontSize13,
                                             fontWeight: theme.typography.fontWeight400,
-                                            color: theme.palette.text.accent,
+                                            color: theme.palette.text.secondary,
                                         }, children: token === null || token === void 0 ? void 0 : token.full_name })] })] }), (0, jsx_runtime_1.jsx)(CheckBoxComponent_1.default, { checked: selectedTokens.includes(token === null || token === void 0 ? void 0 : token.name), sx: {
                             "& .MuiSvgIcon-root": {
                                 color: selectedTokens.includes(token === null || token === void 0 ? void 0 : token.name)
                                     ? theme.palette.primary.main
-                                    : theme.palette.text.accent,
+                                    : theme.palette.text.secondary,
                             },
-                        } })] }, token === null || token === void 0 ? void 0 : token.id)); }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g10, justifyContent: "center", mt: theme.mixins.customMargin.m16, width: "100%" }), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onReset, sx: {
-                            backgroundColor: theme.palette.background.white,
+                        } })] }, token === null || token === void 0 ? void 0 : token.id)); }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g10, justifyContent: "center", mt: theme.styleMixins.customMargin.m16, width: "100%" }), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onReset, sx: {
+                            backgroundColor: theme.palette.background.default,
                             borderColor: theme.palette.primary.main,
-                            borderRadius: theme.mixins.customRadius.r12,
+                            borderRadius: theme.styleMixins.customRadius.r12,
                             color: theme.palette.primary.main,
                             fontSize: theme.typography.fontSize12,
                             fontWeight: theme.typography.fontWeight600,
                             textTransform: "none",
-                            padding: theme.mixins.customPadding.p12,
+                            padding: theme.styleMixins.customPadding.p12,
                         }, fullWidth: true, children: "Reset" }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onApply, sx: {
                             backgroundColor: theme.palette.primary.main,
                             borderColor: theme.palette.secondary.main,
-                            borderRadius: theme.mixins.customRadius.r12,
+                            borderRadius: theme.styleMixins.customRadius.r12,
                             color: theme.palette.secondary.main,
                             fontSize: theme.typography.fontSize12,
                             fontWeight: theme.typography.fontWeight600,
                             textTransform: "none",
-                            padding: theme.mixins.customPadding.p12,
+                            padding: theme.styleMixins.customPadding.p12,
                         }, fullWidth: true, children: "Apply" })] })] }));
 };
 exports.default = ModalCheckboxToken;