tek-wallet 0.0.805 → 0.0.807

package/dist/components/TekWallet/components/ui/WithdrawFunction/components/sortByToken.js

@@ -19,11 +19,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var Text_1 = __importDefault(require("../../Text"));
 var SvgPath_1 = require("../../SvgPath");
-var ThemeProvider_1 = require("../../../../providers/ThemeProvider");
+var mui_1 = require("../../../../theme/mui");
 var __1 = require("..");
 function SortByToken(props) {
     var sortToken = props.sortToken, setSortToken = props.setSortToken;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 0.5, onClick: function () {
             if (sortToken === __1.SortToken.ASC) {
                 setSortToken(__1.SortToken.DESC);
@@ -31,7 +31,7 @@ function SortByToken(props) {
             else {
                 setSortToken(__1.SortToken.ASC);
             }
-        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontWeight: theme.typography.fontWeight600 }), children: "Token" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex flex-col gap-[0.8px]", children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { inheritViewBox: true, sx: {
+        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.valueDescription), { color: theme.palette.text.secondary, fontWeight: theme.typography.fontWeight600 }), children: "Token" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex flex-col gap-[0.8px]", children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { inheritViewBox: true, sx: {
                             width: 8,
                             height: 5,
                             transition: "opacity 0.2s ease-in-out",

package/dist/components/TekWallet/components/ui/WithdrawFunction/components/summary/infoSummary.js

@@ -57,29 +57,29 @@ var SvgPath_1 = require("../../../SvgPath");
 var Fees_1 = __importStar(require("../../../Fees"));
 var safeText_1 = require("../../../../../utils/safeText");
 var formatDate_1 = require("../../../../../utils/formatDate");
-var providers_1 = require("../../../../../providers");
+var mui_1 = require("../../../../../theme/mui");
 function TransferInfo(props) {
     var type = props.type, message = props.message, datetime = props.datetime, recipientAddress = props.recipientAddress, amount = props.amount, estimateFee = props.estimateFee, estimateReceive = props.estimateReceive, selectedToken = props.selectedToken;
-    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",
             gap: 3,
-        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.headerTitle), { textAlign: "start", mr: "auto" }), children: "Transaction summary" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.headerTitle), { textAlign: "start", mr: "auto" }), children: "Transaction summary" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     display: "flex",
                     flexDirection: "column",
                     gap: 3,
                 }, children: [(0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Amount", titleStyle: {
                             fontSize: "0.875rem",
                             fontWeight: 500,
-                            color: "gray.700",
+                            color: "text.secondary",
                         }, value: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
                                 fontSize: "0.875rem",
                                 fontWeight: 500,
                             }, children: [amount, " ", selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug.toUpperCase()] }), isAligned: true }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Address", titleStyle: {
                             fontSize: "0.875rem",
                             fontWeight: 500,
-                            color: "gray.700",
+                            color: "text.secondary",
                         }, value: (0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: recipientAddress || "", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex flex-row gap-2 items-center", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                             fontSize: "0.875rem",
                                             fontWeight: 500,
@@ -89,21 +89,21 @@ function TransferInfo(props) {
                                         }, children: SvgPath_1.IC_COPY })] }) }), isAligned: true }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Type", titleStyle: {
                             fontSize: "0.875rem",
                             fontWeight: 500,
-                            color: "gray.700",
+                            color: "text.secondary",
                         }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                 fontSize: "0.875rem",
                                 fontWeight: 500,
                             }, children: type }), isAligned: true }), message && ((0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Message", titleStyle: {
                             fontSize: "0.875rem",
                             fontWeight: 500,
-                            color: "gray.700",
+                            color: "text.secondary",
                         }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                 fontSize: "0.875rem",
                                 fontWeight: 500,
                             }, children: message }), isAligned: true })), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Datetime", titleStyle: {
                             fontSize: "0.875rem",
                             fontWeight: 500,
-                            color: "gray.700",
+                            color: "text.secondary",
                         }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                 fontSize: "0.875rem",
                                 fontWeight: 500,

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

@@ -110,7 +110,7 @@ var get_est_fee_service_1 = __importDefault(require("../../../services/axios/get
 var type_1 = require("../../../services/axios/get-activities-service/type");
 var createDebounce_1 = __importDefault(require("../../../utils/createDebounce"));
 var type_2 = require("../../../services/axios/validate-wallet-address-service/type");
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var selectToken_1 = __importDefault(require("./components/selectToken"));
 var sendForm_1 = __importDefault(require("./components/sendForm"));
 var sort_utils_1 = require("../../../utils/sort.utils");
@@ -158,7 +158,7 @@ var WAmountError;
 var getEstimateFeeDebounce = (0, createDebounce_1.default)(500);
 // const validateAddressDebounce = createDebounce(500);
 var WithdrawFunction = (0, react_1.forwardRef)(function (props, ref) {
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var isInitPasscode = (0, useWalletData_1.default)().isInitPasscode;
     var _a = (0, useWithdrawData_1.default)(), withdrawTokens = _a.withdrawTokens, updateWithdrawToken = _a.updateWithdrawToken, updateSendInternalToken = _a.updateSendInternalToken, sendInternalTokens = _a.sendInternalTokens;
     var drawerRef = (0, react_1.useRef)(null);
@@ -541,10 +541,10 @@ var WithdrawFunction = (0, react_1.forwardRef)(function (props, ref) {
                         alignItems: "center",
                         minHeight: "2rem",
                         height: "fit-content",
-                        mb: theme.mixins.customMargin.m20,
+                        mb: theme.styleMixins.customMargin.m20,
                     }, overrideBack: handleBack, hideBack: currentStep === WithdrawStep.SELECT_METHOD, center: currentStep === WithdrawStep.FORM
                         ? "Send ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name, " ").concat(selectedMethod === SendMethods.TRANSFER_EXTERNAL ? "externally" : "internally")
-                        : WITHDRAW_STEP_NAME[currentStep] }), children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: stepsRef, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, trigger: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content" }), children: Object.values(SendMethods).map(function (item) {
+                        : WITHDRAW_STEP_NAME[currentStep] }), children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: stepsRef, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, trigger: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12, height: "fit-content" }), children: Object.values(SendMethods).map(function (item) {
                                 return ((0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { hideTag: true, title: item, description: item, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: 24, height: 24, iconKey: "IC_SCAN_QR_CODE" }), onClick: function (e) {
                                         return handleSelectMethod(e, item);
                                     } }, item));
@@ -554,15 +554,15 @@ var WithdrawFunction = (0, react_1.forwardRef)(function (props, ref) {
                                     textAlign: "center",
                                     display: "inline-block",
                                     width: "100%",
-                                }, children: infoDialogContent }), actions: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.dialogActionsOk), { width: "100%", display: "inline-block" }), onClick: handleClearInfoDialogContent, children: "Ok" }) }) }), (0, jsx_runtime_1.jsx)(AppDialog_1.default, { ref: suggestUseTransferInternalDialogRef, children: (0, jsx_runtime_1.jsx)(DialogContentLayout_1.default, { content: "This wallet is supported send internally, use it for faster transaction?", actions: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                }, children: infoDialogContent }), actions: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.dialogActionsOk), { width: "100%", display: "inline-block" }), onClick: handleClearInfoDialogContent, children: "Ok" }) }) }), (0, jsx_runtime_1.jsx)(AppDialog_1.default, { ref: suggestUseTransferInternalDialogRef, children: (0, jsx_runtime_1.jsx)(DialogContentLayout_1.default, { content: "This wallet is supported send internally, use it for faster transaction?", actions: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                     display: "grid",
                                     gridTemplateColumns: "1fr auto 1fr",
-                                    gap: theme.mixins.gaps.g8,
-                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.dialogActionsCancel), { width: "100%" }), onClick: function () { return handleSelectContinueTransferExternal(); }, children: "Keep continue" }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "middle", flexItem: true }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.dialogActionsOk), { width: "100%" }), onClick: function () { return handleSelectTransferInternal(); }, children: "Ok" })] }) }) }), (0, jsx_runtime_1.jsx)(AppDialog_1.default, { ref: suggestUseTransferExternalDialogRef, children: (0, jsx_runtime_1.jsx)(DialogContentLayout_1.default, { content: "This wallet only support send externally, move to this method?", actions: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                    gap: theme.styleMixins.gaps.g8,
+                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.dialogActionsCancel), { width: "100%" }), onClick: function () { return handleSelectContinueTransferExternal(); }, children: "Keep continue" }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "middle", flexItem: true }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.dialogActionsOk), { width: "100%" }), onClick: function () { return handleSelectTransferInternal(); }, children: "Ok" })] }) }) }), (0, jsx_runtime_1.jsx)(AppDialog_1.default, { ref: suggestUseTransferExternalDialogRef, children: (0, jsx_runtime_1.jsx)(DialogContentLayout_1.default, { content: "This wallet only support send externally, move to this method?", actions: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                     display: "grid",
                                     gridTemplateColumns: "1fr auto 1fr",
-                                    gap: theme.mixins.gaps.g8,
-                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.dialogActionsCancel), { width: "100%" }), onClick: function () { var _a; return (_a = suggestUseTransferExternalDialogRef.current) === null || _a === void 0 ? void 0 : _a.close(); }, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "middle", flexItem: true }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.dialogActionsOk), { width: "100%" }), onClick: function () {
+                                    gap: theme.styleMixins.gaps.g8,
+                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.dialogActionsCancel), { width: "100%" }), onClick: function () { var _a; return (_a = suggestUseTransferExternalDialogRef.current) === null || _a === void 0 ? void 0 : _a.close(); }, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "middle", flexItem: true }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.dialogActionsOk), { width: "100%" }), onClick: function () {
                                             var _a;
                                             handleSelectContinueTransferExternal();
                                             (_a = suggestUseTransferExternalDialogRef.current) === null || _a === void 0 ? void 0 : _a.close();

package/dist/components/TekWallet/components/views/ActivityView/index.js

@@ -12,14 +12,14 @@ var PageHeader_1 = __importDefault(require("../../ui/PageHeader"));
 var SwiperControlled_1 = __importDefault(require("../../ui/SwiperControlled"));
 var useActivities_1 = __importDefault(require("../../../hooks/useActivities"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var react_2 = require("swiper/react");
 var ActivitiesTypeSlice_1 = __importDefault(require("../../ui/ActivitiesTypeSlice"));
 var TekWalletProvider_1 = require("../../../providers/TekWalletProvider");
 var ActivityView = function (props) {
     var _a;
     var sx = props.sx;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var options = (0, TekWalletProvider_1.useWalletSetup)().options;
     var hideBackButtons = (options || {}).hideBackButtons;
     var _b = (0, useActivities_1.default)(), activityTypes = _b.activityTypes, activities = _b.activities;
@@ -42,11 +42,11 @@ var ActivityView = function (props) {
                 display: activitiesLength ? "flex" : "none",
             }, onTabChange: handleSlideChange, tabs: activityTypes === null || activityTypes === void 0 ? void 0 : activityTypes.map(function (type, index) {
                 return ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: type.name, value: index, "data-index": index, sx: {
-                        padding: "".concat(theme.mixins.customPadding.p8, " ").concat(theme.mixins.customPadding.p16),
+                        padding: "".concat(theme.styleMixins.customPadding.p8, " ").concat(theme.styleMixins.customPadding.p16),
                         minHeight: "unset",
                         minWidth: "unset",
                         textTransform: "capitalize",
-                        color: theme.palette.text.accent2,
+                        color: theme.palette.text.secondary,
                         transition: "all 0.3s linear",
                         fontSize: theme.typography.fontSize12,
                         borderColor: "currentcolor",

package/dist/components/TekWallet/components/views/AssetView/Menu.js

@@ -13,13 +13,13 @@ var __assign = (this && this.__assign) || function () {
 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 ItemsContainer = function (props) {
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ width: "100%", position: "relative" }, props.sx), children: props.children }));
 };
 function Menu(props) {
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var items = props.items;
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ display: "grid", paddingTop: theme.mixins.customPadding.p8, paddingBottom: theme.mixins.customPadding.p8, backgroundColor: theme.palette.background.tertiary, borderRadius: theme.mixins.customRadius.r16, border: "1px solid ".concat(theme.palette.border.accent3) }, props.sx), children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(ItemsContainer, { children: item }, index)); }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ display: "grid", paddingTop: theme.styleMixins.customPadding.p8, paddingBottom: theme.styleMixins.customPadding.p8, backgroundColor: theme.palette.background.tertiary, borderRadius: theme.styleMixins.customRadius.r16, border: "1px solid ".concat(theme.palette.divider) }, props.sx), children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(ItemsContainer, { children: item }, index)); }) }));
 }
 exports.default = Menu;

package/dist/components/TekWallet/components/views/AssetView/index.js

@@ -70,7 +70,6 @@ var FunctionItem_1 = __importDefault(require("../../ui/FunctionItem"));
 var TokensBoard_1 = __importDefault(require("../../ui/TokensBoard"));
 var useWalletData_1 = __importDefault(require("../../../hooks/useWalletData"));
 var Text_1 = __importDefault(require("../../ui/Text"));
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
 var AmountGroupAndChart_1 = __importDefault(require("../../ui/AmountGroupAndChart"));
 var link_1 = __importDefault(require("next/link"));
 var TekWalletProvider_1 = require("../../../providers/TekWalletProvider");
@@ -86,10 +85,11 @@ var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"
 var BasicAmountGroup_1 = __importDefault(require("../../ui/BasicAmountGroup"));
 var AssetViewHeader_1 = __importDefault(require("../../ui/AssetViewHeader"));
 var ClickEffect_1 = __importDefault(require("../../ui/ClickEffect"));
+var mui_1 = require("../../../theme/mui");
 var AssetView = function (props) {
     var sx = props.sx, rest = __rest(props, ["sx"]);
     var _a = (0, useWalletData_1.default)(), isInitPasscode = _a.isInitPasscode, masterWallet = _a.masterWallet, updateWalletDetail = _a.updateWalletDetail;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var options = (0, TekWalletProvider_1.useWalletSetup)().options;
     var _b = options || {}, hideActivitySectionInAssetView = _b.hideActivitySectionInAssetView, useBasicAmountGroupInAssetView = _b.useBasicAmountGroupInAssetView, basePath = _b.basePath;
     var router = (0, useCustomRouter_1.default)();
@@ -105,7 +105,7 @@ var AssetView = function (props) {
     return ((0, jsx_runtime_1.jsxs)(ChildPageLayout_1.default, { header: !!isInitPasscode && (0, jsx_runtime_1.jsx)(AssetViewHeader_1.default, {}), pullToRefreshProps: {
             isPullable: !!isInitPasscode,
             onRefresh: handleRefresh,
-        }, children: [!isInitPasscode && !!masterWallet && ((0, jsx_runtime_1.jsx)(ChangePasscodeView_1.default, { isInitPasscode: true, onBack: handleBackInitPasscodeView, idPrefix: idPrefix })), !!isInitPasscode && ((0, jsx_runtime_1.jsxs)(DefaultPageLayout_1.default, __assign({}, rest, { sx: __assign({ display: "flex", flexDirection: "column", gap: theme.mixins.gaps.g16 }, sx), children: [useBasicAmountGroupInAssetView ? (0, jsx_runtime_1.jsx)(BasicAmountGroup_1.default, {}) : (0, jsx_runtime_1.jsx)(AmountGroupAndChart_1.default, {}), (0, jsx_runtime_1.jsx)(Menu_1.default, { sx: {
+        }, children: [!isInitPasscode && !!masterWallet && ((0, jsx_runtime_1.jsx)(ChangePasscodeView_1.default, { isInitPasscode: true, onBack: handleBackInitPasscodeView, idPrefix: idPrefix })), !!isInitPasscode && ((0, jsx_runtime_1.jsxs)(DefaultPageLayout_1.default, __assign({}, rest, { sx: __assign({ display: "flex", flexDirection: "column", gap: theme.styleMixins.gaps.g16 }, sx), children: [useBasicAmountGroupInAssetView ? (0, jsx_runtime_1.jsx)(BasicAmountGroup_1.default, {}) : (0, jsx_runtime_1.jsx)(AmountGroupAndChart_1.default, {}), (0, jsx_runtime_1.jsx)(Menu_1.default, { sx: {
                             gridTemplateColumns: "1fr 1px 1fr 1px 1fr",
                         }, items: [
                             (0, jsx_runtime_1.jsx)(ReceiveFunction_1.default, { children: (0, jsx_runtime_1.jsx)(material_1.ListItem, { component: ClickEffect_1.default, sx: {
@@ -117,7 +117,7 @@ var AssetView = function (props) {
                             (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                     width: "100%",
                                     height: "100%",
-                                    backgroundColor: theme.palette.border.accent3,
+                                    backgroundColor: theme.palette.divider,
                                 } }, "divider-1"),
                             (0, jsx_runtime_1.jsx)(link_1.default, { href: "".concat(basePath || "", "/tek-wallet/send/external"), children: (0, jsx_runtime_1.jsx)(material_1.ListItem, { component: ClickEffect_1.default, sx: {
                                         placeContent: "center",
@@ -126,7 +126,7 @@ var AssetView = function (props) {
                             (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                     width: "100%",
                                     height: "100%",
-                                    backgroundColor: theme.palette.border.accent3,
+                                    backgroundColor: theme.palette.divider,
                                 } }, "divider-2"),
                             (0, jsx_runtime_1.jsx)(link_1.default, { href: "".concat(basePath || "", "/tek-wallet/send/internal"), children: (0, jsx_runtime_1.jsx)(material_1.ListItem, { component: ClickEffect_1.default, sx: {
                                         placeContent: "center",
@@ -143,22 +143,22 @@ var AssetView = function (props) {
                             //     <FunctionItem icon={"IC_SWAP_FC"} label="Swap" sx={{ width: "100%" }} />
                             //   </ListItem>
                             // </Link>,
-                        ] }), !hideActivitySectionInAssetView && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        ] }), !hideActivitySectionInAssetView && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                     display: "flex",
-                                    gap: theme.mixins.gaps.g20,
-                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionTitle), children: "Activity" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: link_1.default, href: "".concat(basePath || "", "/tek-wallet/activity"), sx: {
+                                    gap: theme.styleMixins.gaps.g20,
+                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionTitle), children: "Activity" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: link_1.default, href: "".concat(basePath || "", "/tek-wallet/activity"), sx: {
                                             marginLeft: "auto",
                                             display: "flex",
                                             alignItems: "center",
+                                            color: theme.palette.text.primary,
                                         }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                     fontSize: theme.typography.fontSize13,
                                                     fontWeight: theme.typography.fontWeight400,
-                                                    color: theme.palette.text.black,
                                                     cursor: "pointer",
-                                                }, children: "View all" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_ARROW_RIGHT", width: 18, height: 18 })] })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                                }, children: "View all" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_ARROW_RIGHT", width: 16, height: 18 })] })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                     position: "relative",
-                                    left: "-".concat(theme.mixins.customPadding.p16),
-                                    width: "calc(100% + ".concat(theme.mixins.customPadding.p16, " * 2)"),
+                                    left: "-".concat(theme.styleMixins.customPadding.p16),
+                                    width: "calc(100% + ".concat(theme.styleMixins.customPadding.p16, " * 2)"),
                                 }, children: (0, jsx_runtime_1.jsx)(ActivitiesTypeSlice_1.default, { type: const_1.ACTIVITIES_TYPE_ALL, limitItems: 4, isActive: true, sx: {
                                         paddingBottom: 0,
                                         paddingTop: 0,

package/dist/components/TekWallet/components/views/AuthView/index.js

@@ -59,12 +59,12 @@ var react_1 = require("react");
 var ImportWalletView_1 = __importDefault(require("../ImportWalletView"));
 var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var PageHeader_1 = __importDefault(require("../../ui/PageHeader"));
 var getImage_1 = __importDefault(require("../../../utils/getImage"));
 var Icon_1 = __importDefault(require("../../ui/Icon"));
 var AuthView = function (props) {
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var createWalletDrawerRef = (0, react_1.useRef)(null);
     var importWalletDrawerRef = (0, react_1.useRef)(null);
     var onBackCreateWallet = function () {
@@ -75,14 +75,14 @@ var AuthView = function (props) {
         var _a;
         (_a = importWalletDrawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
     };
-    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Connect Wallet", overrideBack: props.onBack }), children: (0, jsx_runtime_1.jsxs)(DefaultPageLayout_1.default, { sx: __assign({ display: "flex", flexDirection: "column", gap: "1rem" }, props.sx), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getImage_1.default)("logo", "jpg"), sx: __assign(__assign({ width: "80%", aspectRatio: "1" }, theme.mixins.center), { position: "fixed" }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Connect Wallet", overrideBack: props.onBack }), children: (0, jsx_runtime_1.jsxs)(DefaultPageLayout_1.default, { sx: __assign({ display: "flex", flexDirection: "column", gap: "1rem" }, props.sx), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getImage_1.default)("logo", "jpg"), sx: __assign(__assign({ width: "80%", aspectRatio: "1" }, theme.styleMixins.center), { position: "fixed" }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                         display: "flex",
                         flexDirection: "column",
                         gap: "1rem",
                         marginTop: "auto",
                     }, children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { sx: {
                                 width: "100%",
-                            }, ref: createWalletDrawerRef, trigger: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100%" }, children: "Create a new wallet" }), direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(CreateWalletView_1.default, { onBack: onBackCreateWallet }) }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: importWalletDrawerRef, trigger: (0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { sx: { width: "100%" }, children: "I have a wallet" }), direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(ImportWalletView_1.default, { onBack: onBackImportWallet }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionDescription), children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, eos odio. Accusamus ea praesentium unde deserunt delectus, nihil corporis, mollitia ipsum impedit cupiditate eveniet vero esse facilis, incidunt in sequi?" })] })] }) }));
+                            }, ref: createWalletDrawerRef, trigger: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100%" }, children: "Create a new wallet" }), direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(CreateWalletView_1.default, { onBack: onBackCreateWallet }) }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: importWalletDrawerRef, trigger: (0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { sx: { width: "100%" }, children: "I have a wallet" }), direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(ImportWalletView_1.default, { onBack: onBackImportWallet }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionDescription), children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, eos odio. Accusamus ea praesentium unde deserunt delectus, nihil corporis, mollitia ipsum impedit cupiditate eveniet vero esse facilis, incidunt in sequi?" })] })] }) }));
 };
 exports.AuthView = AuthView;
 exports.default = exports.AuthView;

package/dist/components/TekWallet/components/views/AuthViewSignIn/index.js

@@ -22,19 +22,19 @@ var Button_1 = __importDefault(require("../../ui/Button"));
 var Text_1 = __importDefault(require("../../ui/Text"));
 var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var PageHeader_1 = __importDefault(require("../../ui/PageHeader"));
 var getImage_1 = __importDefault(require("../../../utils/getImage"));
 var Icon_1 = __importDefault(require("../../ui/Icon"));
 var AuthViewSignIn = function (props) {
     var onSignIn = props.onSignIn;
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Connect Wallet", overrideBack: props.onBack }), children: (0, jsx_runtime_1.jsxs)(DefaultPageLayout_1.default, { sx: __assign({ display: "flex", flexDirection: "column", gap: "1rem" }, props.sx), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getImage_1.default)("logo", "jpg"), sx: __assign(__assign({ width: "80%", aspectRatio: "1" }, theme.mixins.center), { position: "fixed" }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Connect Wallet", overrideBack: props.onBack }), children: (0, jsx_runtime_1.jsxs)(DefaultPageLayout_1.default, { sx: __assign({ display: "flex", flexDirection: "column", gap: "1rem" }, props.sx), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getImage_1.default)("logo", "jpg"), sx: __assign(__assign({ width: "80%", aspectRatio: "1" }, theme.styleMixins.center), { position: "fixed" }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                         display: "flex",
                         flexDirection: "column",
                         gap: "1rem",
                         marginTop: "auto",
-                    }, children: [(0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100%" }, onClick: onSignIn, children: "Sign in" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionDescription), children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, eos odio. Accusamus ea praesentium unde deserunt delectus, nihil corporis, mollitia ipsum impedit cupiditate eveniet vero esse facilis, incidunt in sequi?" })] })] }) }));
+                    }, children: [(0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100%" }, onClick: onSignIn, children: "Sign in" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionDescription), children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, eos odio. Accusamus ea praesentium unde deserunt delectus, nihil corporis, mollitia ipsum impedit cupiditate eveniet vero esse facilis, incidunt in sequi?" })] })] }) }));
 };
 exports.AuthViewSignIn = AuthViewSignIn;
 exports.default = exports.AuthViewSignIn;

package/dist/components/TekWallet/components/views/ChangePasscodeView/index.js

@@ -94,7 +94,7 @@ var OTP_1 = __importStar(require("../../ui/OTP"));
 var react_2 = require("react");
 var Text_1 = __importDefault(require("../../ui/Text"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var update_passcode_service_1 = __importDefault(require("../../../services/axios/update-passcode-service"));
 var const_1 = require("./const");
 var const_2 = require("./const");
@@ -103,6 +103,7 @@ var init_passcode_service_1 = __importDefault(require("../../../services/axios/i
 var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
 var xhub_keyboard_1 = require("xhub-keyboard");
 var useWarningWrongPasscode_1 = require("../../../hooks/useWarningWrongPasscode");
+var providers_1 = require("../../../providers");
 var passcodeLength = 6;
 var ChangePasscodeView = function (props) {
     var _a = props.isInitPasscode, isInitPasscode = _a === void 0 ? false : _a, _b = props.idPrefix, idPrefix = _b === void 0 ? "" : _b;
@@ -113,7 +114,7 @@ var ChangePasscodeView = function (props) {
     var stepsContent = isInitPasscode
         ? const_2.STEPS_CONTENT_FOR_INIT_PASSCODE
         : const_1.STEPS_CONTENT_FOR_CHANGE_PASSCODE;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _c = (0, react_2.useState)(""), oldPasscode = _c[0], setOldPasscode = _c[1];
     var _d = (0, react_2.useState)(""), newPasscode = _d[0], setNewPasscode = _d[1];
     var _e = (0, react_2.useState)(""), confirmPasscode = _e[0], setConfirmPasscode = _e[1];
@@ -319,7 +320,8 @@ var ChangePasscodeView = function (props) {
     };
     var _j = getValueAndHandlerByStep(currentStep), value = _j.value, onChange = _j.onChange;
     var keyboardId = (0, react_2.useMemo)(function () { return "".concat(idPrefix, "-").concat(isInitPasscode ? "init" : "change", "-passcode-keyboard"); }, [isInitPasscode, idPrefix]);
-    return ((0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { id: keyboardId, keyboardType: xhub_keyboard_1.KeyboardType.Text, layoutType: xhub_keyboard_1.LayoutType.Integer, value: value, onChange: onChange, viewFullHeight: true, styles: {
+    var keyboardThemeMode = (0, providers_1.useKeyboardThemeMode)();
+    return ((0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { theme: keyboardThemeMode, id: keyboardId, keyboardType: xhub_keyboard_1.KeyboardType.Text, layoutType: xhub_keyboard_1.LayoutType.Integer, value: value, onChange: onChange, viewFullHeight: true, styles: {
             container: {
                 height: "100%",
             },
@@ -335,21 +337,21 @@ var ChangePasscodeView = function (props) {
                                     alignItems: "center",
                                     gap: "1rem",
                                     height: "100%",
-                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionTitle), children: stepsContent[type_1.ChangePasscodeViewStep.ENTER_OLD_PASSCODE].title }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { useBrowserInput: false, htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(OTP_1.default, { value: oldPasscode, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD, readOnly: true }) }), unknownError, warningContent, !!error && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.validationError), { alignSelf: "left" }), children: error })), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionDescription), children: stepsContent[type_1.ChangePasscodeViewStep.ENTER_OLD_PASSCODE].description })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionTitle), children: stepsContent[type_1.ChangePasscodeViewStep.ENTER_OLD_PASSCODE].title }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { useBrowserInput: false, htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(OTP_1.default, { value: oldPasscode, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD, readOnly: true }) }), unknownError, warningContent, !!error && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.validationError), { alignSelf: "left" }), children: error })), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionDescription), children: stepsContent[type_1.ChangePasscodeViewStep.ENTER_OLD_PASSCODE].description })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                     display: "flex",
                                     flexDirection: "column",
                                     justifyContent: "center",
                                     alignItems: "center",
                                     height: "100%",
                                     gap: "1rem",
-                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionTitle), children: stepsContent[type_1.ChangePasscodeViewStep.ENTER_NEW_PASSCODE].title }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { useBrowserInput: false, htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(OTP_1.default, { value: newPasscode, onChange: handleNewPasscodeChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD, readOnly: true }) }), !!error && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.validationError), { alignSelf: "left" }), children: type_1.ChangePasscodeError.PASSCODE_SAME_AS_OLD })), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionDescription), children: stepsContent[type_1.ChangePasscodeViewStep.ENTER_NEW_PASSCODE].description })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionTitle), children: stepsContent[type_1.ChangePasscodeViewStep.ENTER_NEW_PASSCODE].title }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { useBrowserInput: false, htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(OTP_1.default, { value: newPasscode, onChange: handleNewPasscodeChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD, readOnly: true }) }), !!error && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.validationError), { alignSelf: "left" }), children: type_1.ChangePasscodeError.PASSCODE_SAME_AS_OLD })), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionDescription), children: stepsContent[type_1.ChangePasscodeViewStep.ENTER_NEW_PASSCODE].description })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                     display: "flex",
                                     flexDirection: "column",
                                     alignItems: "center",
                                     justifyContent: "center",
                                     height: "100%",
                                     gap: "1rem",
-                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionTitle), children: stepsContent[type_1.ChangePasscodeViewStep.CONFIRM_NEW_PASSCODE].title }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { useBrowserInput: false, htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(OTP_1.default, { value: confirmPasscode, onChange: handleConfirmPasscodeChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD, readOnly: true }) }), !!error && (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: error }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionDescription), children: stepsContent[type_1.ChangePasscodeViewStep.CONFIRM_NEW_PASSCODE].description })] }) })] }) }) }) }));
+                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionTitle), children: stepsContent[type_1.ChangePasscodeViewStep.CONFIRM_NEW_PASSCODE].title }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { useBrowserInput: false, htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(OTP_1.default, { value: confirmPasscode, onChange: handleConfirmPasscodeChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD, readOnly: true }) }), !!error && (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationError), children: error }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionDescription), children: stepsContent[type_1.ChangePasscodeViewStep.CONFIRM_NEW_PASSCODE].description })] }) })] }) }) }) }));
 };
 exports.ChangePasscodeView = ChangePasscodeView;
 exports.default = exports.ChangePasscodeView;

package/dist/components/TekWallet/components/views/CreateWalletView/index.js

@@ -60,7 +60,7 @@ var react_2 = require("react");
 var Text_1 = __importDefault(require("../../ui/Text"));
 var useWalletData_1 = __importDefault(require("../../../hooks/useWalletData"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var CreateWalletViewStep;
 (function (CreateWalletViewStep) {
     CreateWalletViewStep[CreateWalletViewStep["CREATE_PASSCODE"] = 0] = "CREATE_PASSCODE";
@@ -68,7 +68,7 @@ var CreateWalletViewStep;
 })(CreateWalletViewStep || (exports.CreateWalletViewStep = CreateWalletViewStep = {}));
 var passcodeLength = 6;
 var CreateWalletView = function (props) {
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _a = (0, react_2.useState)(""), otp = _a[0], setOtp = _a[1];
     var _b = (0, react_2.useState)(""), confirmOtp = _b[0], setConfirmOtp = _b[1];
     var swiperControlledRef = (0, react_2.useRef)(null);
@@ -143,14 +143,14 @@ var CreateWalletView = function (props) {
                                 alignItems: "center",
                                 height: "100%",
                                 gap: "1rem",
-                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionTitle), children: "Create Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: otp, onChange: handleOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionDescription), children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus, eos! Dolore quae vero in ducimus doloribus" })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionTitle), children: "Create Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: otp, onChange: handleOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionDescription), children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus, eos! Dolore quae vero in ducimus doloribus" })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                 display: "flex",
                                 flexDirection: "column",
                                 alignItems: "center",
                                 justifyContent: "center",
                                 height: "100%",
                                 gap: "1rem",
-                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionTitle), children: "Confirm Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: confirmOtp, onChange: handleConfirmOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionDescription), children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus, eos! Dolore quae vero in ducimus doloribus" })] }) })] }) }) }));
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionTitle), children: "Confirm Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: confirmOtp, onChange: handleConfirmOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionDescription), children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus, eos! Dolore quae vero in ducimus doloribus" })] }) })] }) }) }));
 };
 exports.CreateWalletView = CreateWalletView;
 exports.default = exports.CreateWalletView;

package/dist/components/TekWallet/components/views/DetailActivityView/LoadingView.js

@@ -13,14 +13,14 @@ var __assign = (this && this.__assign) || function () {
 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");
 function LoadingView() {
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", gap: 2, flexDirection: "column", alignItems: "center", sx: { width: "100%" }, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 64, height: 64 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4, alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", sx: {
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", gap: 2, flexDirection: "column", alignItems: "center", sx: { width: "100%" }, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 64, height: 64 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g4, alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", sx: {
                             transform: "scale(1)",
                         }, width: "40%", height: 42 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", sx: {
                             transform: "scale(1)",
-                        }, width: "60%", height: 18 })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", sx: {
+                        }, width: "60%", height: 18 })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", sx: {
                             transform: "scale(1)",
                         }, width: "40%", height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", sx: {
                             transform: "scale(1)",

package/dist/components/TekWallet/components/views/GetSeedPhraseWalletView/index.js

@@ -60,7 +60,7 @@ var react_2 = require("react");
 var Text_1 = __importDefault(require("../../ui/Text"));
 var useWalletData_1 = __importDefault(require("../../../hooks/useWalletData"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var Button_1 = __importDefault(require("../../ui/Button"));
 var Icon_1 = __importDefault(require("../../ui/Icon"));
 var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
@@ -71,7 +71,7 @@ var GetSeedPhraseWalletViewStep;
 })(GetSeedPhraseWalletViewStep || (exports.GetSeedPhraseWalletViewStep = GetSeedPhraseWalletViewStep = {}));
 var passcodeLength = 6;
 var GetSeedPhraseWalletView = function (props) {
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _a = (0, react_2.useState)(""), otp = _a[0], setOtp = _a[1];
     var _b = (0, react_2.useState)(false), isShowSeedPhrase = _b[0], setIsShowSeedPhrase = _b[1];
     var _c = (0, react_2.useState)(undefined), seedPhrase = _c[0], setSeedPhrase = _c[1];
@@ -152,7 +152,7 @@ var GetSeedPhraseWalletView = function (props) {
                                 alignItems: "center",
                                 gap: "1rem",
                                 height: "100%",
-                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionTitle), children: "Enter Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: otp, onChange: handleOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionDescription), children: "Enter your passcode to get your wallet seed phrase" })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionTitle), children: "Enter Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: otp, onChange: handleOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionDescription), children: "Enter your passcode to get your wallet seed phrase" })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                 minHeight: "100%",
                                 display: "flex",
                                 flexDirection: "column",
@@ -163,17 +163,17 @@ var GetSeedPhraseWalletView = function (props) {
                                         gap: "1rem",
                                         height: "fit-content",
                                     }, children: seedPhrase === null || seedPhrase === void 0 ? void 0 : seedPhrase.split(" ").map(function (word, index) { return ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
-                                            color: theme.palette.text.white80,
+                                            color: theme.palette.text.primary,
                                             padding: "0.5rem 0.75rem",
-                                            backgroundColor: theme.palette.background.black16,
+                                            backgroundColor: theme.palette.background.reverse,
                                             borderRadius: "0.75rem",
                                             fontSize: theme.typography.fontSize14,
                                             fontWeight: theme.typography.fontWeight400,
                                             textAlign: "center",
                                             width: "100%",
-                                            border: "1px solid ".concat(theme.palette.background.white24),
+                                            border: "1px solid currentColor",
                                             lineHeight: theme.typography.leading100,
-                                        }, children: [index + 1, ". ", (0, jsx_runtime_1.jsx)("span", { children: " " }), " ", isShowSeedPhrase ? word : "********"] }, index)); }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({ marginTop: "auto" }, theme.mixins.noteContent), children: "Please do not store your seed phrase digitally (e.g., text files on your computer, email...). Write it down and keep it in a secure, confidential location that is resistant to adverse conditions like moisture, fire, or other hazards for safe storage." }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                        }, children: [index + 1, ". ", (0, jsx_runtime_1.jsx)("span", { children: " " }), " ", isShowSeedPhrase ? word : "********"] }, index)); }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({ marginTop: "auto" }, theme.styleMixins.noteContent), children: "Please do not store your seed phrase digitally (e.g., text files on your computer, email...). Write it down and keep it in a secure, confidential location that is resistant to adverse conditions like moisture, fire, or other hazards for safe storage." }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                         display: "flex",
                                         alignItems: "stretch",
                                         gap: "1rem",

package/dist/components/TekWallet/components/views/ImportWalletView/index.js

@@ -62,7 +62,7 @@ var react_2 = require("react");
 var Text_1 = __importDefault(require("../../ui/Text"));
 var Button_1 = __importDefault(require("../../ui/Button"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var useWalletData_1 = __importDefault(require("../../../hooks/useWalletData"));
 var ImportWalletViewStep;
 (function (ImportWalletViewStep) {
@@ -70,7 +70,7 @@ var ImportWalletViewStep;
     ImportWalletViewStep[ImportWalletViewStep["CONFIRM_PASSCODE"] = 1] = "CONFIRM_PASSCODE";
 })(ImportWalletViewStep || (exports.ImportWalletViewStep = ImportWalletViewStep = {}));
 var ImportWalletView = function (props) {
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _a = (0, react_2.useState)(""), seedPhrase = _a[0], setSeedPhrase = _a[1];
     var swiperControlledRef = (0, react_2.useRef)(null);
     var childPageLayoutRef = (0, react_2.useRef)(null);
@@ -116,19 +116,16 @@ var ImportWalletView = function (props) {
                             alignItems: "center",
                             height: "100%",
                             gap: "1rem",
-                        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionTitle), children: "Your seed phrase" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionTitle), children: "Your seed phrase" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                     width: "100%",
                                     height: "fit-content",
                                 }, children: (0, jsx_runtime_1.jsx)(material_1.TextareaAutosize, { value: seedPhrase, onChange: handleChangeSeedPhrase, minRows: 8, maxRows: 8, placeholder: "Enter your seed phrase", style: {
                                         width: "100%",
-                                        backgroundColor: theme.palette.background.black16,
                                         borderRadius: "0.75rem",
                                         padding: "1rem",
-                                        color: theme.palette.text.white,
                                         fontSize: theme.typography.fontSize16,
                                         fontWeight: theme.typography.fontWeight400,
-                                        border: "1px solid ".concat(theme.palette.background.white24),
-                                    } }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionDescription), children: "Your seed phrase is a list of words that are used to create your wallet. It is important to keep it safe and private." }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100% !important", marginTop: "auto" }, onClick: handleImportWallet, children: "Import" })] }) }) }) }) }));
+                                    } }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionDescription), children: "Your seed phrase is a list of words that are used to create your wallet. It is important to keep it safe and private." }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100% !important", marginTop: "auto" }, onClick: handleImportWallet, children: "Import" })] }) }) }) }) }));
 };
 exports.ImportWalletView = ImportWalletView;
 exports.default = exports.ImportWalletView;