tek-wallet 0.0.805 → 0.0.807

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

@@ -93,7 +93,7 @@ var Formatter_1 = __importDefault(require("../Formatter"));
 var ListItemCustom_1 = __importDefault(require("../ListItemCustom"));
 var CustomTooltip_1 = __importDefault(require("../CustomTooltip"));
 var DialogContentLayout_1 = __importDefault(require("../DialogContentLayout"));
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
 var LineValue_1 = __importDefault(require("../LineValue"));
 var SvgPath_1 = require("../SvgPath");
@@ -107,6 +107,8 @@ var HelpButton_1 = __importDefault(require("./components/HelpButton"));
 var SortGroup_1 = __importStar(require("./components/SortGroup"));
 var SortTool_1 = require("./components/SortTool");
 var DefaultPageLayout_1 = __importDefault(require("../../layouts/DefaultPageLayout"));
+var SearchBar_1 = __importDefault(require("../SearchBar"));
+var providers_1 = require("../../../providers");
 var ReceiveMethods;
 (function (ReceiveMethods) {
     ReceiveMethods["RECEIVE_INTERNAL"] = "Receive internally";
@@ -138,7 +140,7 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (_a, ref) {
     var stepSwiperRef = (0, react_1.useRef)(null);
     var amountInputRef = (0, react_1.useRef)(null);
     var _d = (0, react_1.useState)(false), isSharing = _d[0], setIsSharing = _d[1];
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _e = (0, react_1.useState)(ReceiveStep.SELECT_METHOD), currentStep = _e[0], setCurrentStep = _e[1];
     var _f = (0, react_1.useState)(), selectedToken = _f[0], setSelectedToken = _f[1];
     var _g = (0, react_1.useState)(), selectedNetwork = _g[0], setSelectedNetwork = _g[1];
@@ -366,7 +368,14 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (_a, ref) {
         if (isInitPasscode && !receiveInternalTokens) {
             updateReceiveInternalToken();
         }
-    }, [isInitPasscode, receiveExternalTokens, receiveInternalTokens]);
+    }, [
+        isInitPasscode,
+        receiveExternalTokens,
+        receiveInternalTokens,
+        updateReceiveExternalToken,
+        updateReceiveInternalToken,
+    ]);
+    var keyboardThemeMode = (0, providers_1.useKeyboardThemeMode)();
     var sharedImageName = (0, react_1.useMemo)(function () {
         var _a;
         if (isInternal) {
@@ -431,7 +440,7 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (_a, ref) {
     };
     return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, onOpen: props.onOpen, onDone: handleOnClose, sx: props.sx, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: RECEIVE_STEP_NAME[ReceiveStep.SELECT_METHOD], onClose: close, children: (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: stepDrawerRef, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, sx: {
                     width: "100%",
-                }, trigger: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content", width: "100%" }), children: [functionsList.includes(ReceiveMethods.RECEIVE_INTERNAL) && ((0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Top up via internal transfer", description: "Receive crypto from other Ting users", icon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 24, height: 24 }, children: SvgPath_1.IC_RECEIVE_INTERNAL }), onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_INTERNAL); }, recommended: true })), functionsList.includes(ReceiveMethods.RECEIVE_EXTERNAL) && ((0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Top up via blockchain", description: "Deposit using a Web3 or an Exchange wallet", icon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 24, height: 24 }, children: SvgPath_1.IC_RECEIVE_EXTERNAL }), onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_EXTERNAL); }, recommended: true })), functionsList.includes(ReceiveMethods.RECEIVE_FIAT) && ((0, jsx_runtime_1.jsx)(FiatDeposit_1.default, { children: (0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Fiat-Gateway", description: "Experimental deposit via bank transfer", icon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 24, height: 24 }, children: SvgPath_1.IC_RECEIVE_EXTERNAL }), recommended: false, onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_FIAT); } }) }))] }), children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: {
+                }, trigger: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12, height: "fit-content", width: "100%" }), children: [functionsList.includes(ReceiveMethods.RECEIVE_INTERNAL) && ((0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Top up via internal transfer", description: "Receive crypto from other Ting users", icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_RECEIVE_INTERNAL", width: 24 }), onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_INTERNAL); }, recommended: true })), functionsList.includes(ReceiveMethods.RECEIVE_EXTERNAL) && ((0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Top up via blockchain", description: "Deposit using a Web3 or an Exchange wallet", icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_RECEIVE_EXTERNAL", width: 24 }), onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_EXTERNAL); }, recommended: true })), functionsList.includes(ReceiveMethods.RECEIVE_FIAT) && ((0, jsx_runtime_1.jsx)(FiatDeposit_1.default, { children: (0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Fiat-Gateway", description: "Experimental deposit via bank transfer", icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_RECEIVE_EXTERNAL", width: 24 }), recommended: false, onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_FIAT); } }) }))] }), children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: {
                         position: "relative",
                         sx: "100dvh",
                     }, sxs: {
@@ -439,10 +448,10 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (_a, ref) {
                             height: "100%",
                             overflowY: "hidden",
                         },
-                    }, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: RECEIVE_STEP_NAME[Math.max(currentStep, ReceiveStep.SELECT_TOKEN)], overrideBack: handleBack, children: false && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, marginLeft: "auto" }), children: [(0, jsx_runtime_1.jsx)(HelpButton_1.default, {}), !!handleGotoHistory && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", sx: {
+                    }, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: RECEIVE_STEP_NAME[Math.max(currentStep, ReceiveStep.SELECT_TOKEN)], overrideBack: handleBack, children: false && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, marginLeft: "auto" }), children: [(0, jsx_runtime_1.jsx)(HelpButton_1.default, {}), !!handleGotoHistory && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", sx: {
                                                 height: "1rem",
                                                 width: "1px",
-                                                backgroundColor: theme.palette.border.accent3,
+                                                backgroundColor: theme.palette.divider,
                                             } }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20, display: "block" }, onClick: handleGotoHistory, children: SvgPath_1.IC_HISTORY })] }))] })) }), footer: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                             maxHeight: currentStep === ReceiveStep.SHOW_QR_CODE ? "120px" : 0,
                             overflow: "hidden",
@@ -459,38 +468,13 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (_a, ref) {
                         }, children: [(0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: {
                                     height: "100%",
                                     overflow: "hidden",
-                                }, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content" }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                }, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12, height: "fit-content" }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                                         position: "sticky",
-                                                        backgroundColor: theme.palette.background.white,
+                                                        backgroundColor: theme.palette.background.default,
                                                         zIndex: 100,
                                                         top: "0px",
-                                                        pb: theme.mixins.customPadding.p12,
-                                                    }, children: [!isEmptyDepositTokens && ((0, jsx_runtime_1.jsx)(material_1.InputBase, { onChange: handleSearch, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_SEARCH }) }), value: searchValue, placeholder: "Search", sx: {
-                                                                borderRadius: theme.mixins.customRadius.r12,
-                                                                border: "1px solid",
-                                                                borderColor: theme.palette.border.accent3,
-                                                                background: theme.palette.background.white,
-                                                                color: theme.palette.text.black,
-                                                                py: theme.mixins.customPadding.p6,
-                                                                px: theme.mixins.customPadding.p12,
-                                                                fontSize: theme.typography.fontSize16,
-                                                                width: "100%",
-                                                                lineHeight: "100%",
-                                                                "input::placeholder": {
-                                                                    fontSize: theme.typography.fontSize12,
-                                                                    pl: theme.mixins.customPadding.p4,
-                                                                    fontWeight: theme.typography.fontWeight500,
-                                                                    color: theme.palette.text.black,
-                                                                    lineHeight: "100%",
-                                                                },
-                                                            }, endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: {
-                                                                    visibility: isSearching ? "visible" : "hidden",
-                                                                }, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
-                                                                        width: 20,
-                                                                        height: 20,
-                                                                        p: theme.mixins.customPadding.p4,
-                                                                        cursor: "pointer",
-                                                                    }, onClick: handleClearSearch, children: SvgPath_1.IC_CLOSE }) }) })), (tokenRender === null || tokenRender === void 0 ? void 0 : tokenRender.length) > 0 && (0, jsx_runtime_1.jsx)(SortGroup_1.default, { onChange: handleSort })] }), isLoadingDepositTokens && (0, jsx_runtime_1.jsx)(WaitingData_1.default, {}), isEmptyDepositTokens && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { py: "4rem" }, title: "No deposit tokens", description: "No deposit tokens" })), isSearching && isEmptySearch && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { py: "4rem" }, title: "No search results", description: "Let's try again with a different search" })), tokenRender === null || tokenRender === void 0 ? void 0 : tokenRender.map(function (item, index) {
+                                                        pb: theme.styleMixins.customPadding.p12,
+                                                    }, children: [!isEmptyDepositTokens && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(SearchBar_1.default, { onChange: handleSearch, value: searchValue, placeholder: "Search...", onClearSearch: handleClearSearch }) })), (tokenRender === null || tokenRender === void 0 ? void 0 : tokenRender.length) > 0 && (0, jsx_runtime_1.jsx)(SortGroup_1.default, { onChange: handleSort })] }), isLoadingDepositTokens && (0, jsx_runtime_1.jsx)(WaitingData_1.default, {}), isEmptyDepositTokens && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { py: "4rem" }, title: "No deposit tokens", description: "No deposit tokens" })), isSearching && isEmptySearch && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { py: "4rem" }, title: "No search results", description: "Let's try again with a different search" })), tokenRender === null || tokenRender === void 0 ? void 0 : tokenRender.map(function (item, index) {
                                                     var stringifiedTokenData = JSON.stringify(item);
                                                     if (!item)
                                                         return null;
@@ -498,14 +482,13 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (_a, ref) {
                                                 })] }) }) }) }, "slide_step_".concat(ReceiveStep.SELECT_TOKEN)), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: {
                                     height: "100%",
                                     overflow: "hidden",
-                                }, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, display: isExternal ? "flex" : "none" }), children: [(networks === null || networks === void 0 ? void 0 : networks.length) > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.paper), { borderRadius: theme.mixins.customRadius.r16, background: theme.palette.background.accent3, gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.fieldTitle), { fontWeight: theme.typography.fontWeight700, color: theme.palette.text.darkContrast }), children: "Choosing a network? Let us help!" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.activityDescription), { color: theme.palette.text.accent, fontWeight: theme.typography.fontWeight500 }), children: "Select the network used by your sending platform." }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: 0.125, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: chooseNetworkSupportDrawerRef, sx: {
-                                                                        mt: 0.25,
-                                                                    }, trigger: (0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: {
-                                                                            color: theme.palette.primary.main,
+                                }, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12, display: isExternal ? "flex" : "none" }), children: [(networks === null || networks === void 0 ? void 0 : networks.length) > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.paper), { borderRadius: theme.styleMixins.customRadius.r16, background: theme.palette.background.secondary, gap: theme.styleMixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.fieldTitle), { fontWeight: theme.typography.fontWeight700, color: theme.palette.text.darkContrast }), children: "Choosing a network? Let us help!" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.activityDescription), { color: theme.palette.text.secondary, fontWeight: theme.typography.fontWeight500 }), children: "Select the network used by your sending platform." }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: chooseNetworkSupportDrawerRef, sx: {
+                                                                mt: 0.25,
+                                                            }, trigger: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: 0.125, alignItems: "center", sx: { color: theme.palette.primary.main }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: {
                                                                             fontWeight: theme.typography.fontWeight600,
                                                                             fontSize: theme.typography.fontSize10,
                                                                             lineHeight: "100%",
-                                                                        }, children: "Learn more" }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "How to choose my top up network?", onClose: closeChooseNetworkSupport, 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)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.mixins.listDescription), { color: theme.palette.text.blackContrast }), children: "When top up, choose the same network as the one used on the sending platform. For example, if transferring funds using BSC network, select BSC for top up. Otherwise, you may risk losing your assets." }), (0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.mixins.listDescription), { color: theme.palette.text.blackContrast }), children: "If unsure, test with a small amount and confirm it arrives safely before top up the rest." })] }) }) }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 6, height: 6, mt: "4px" }, children: (0, jsx_runtime_1.jsx)("svg", { width: "4", height: "6", viewBox: "0 0 4 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.7 3L0.7 6L0 5.3L2.3 3L0 0.7L0.7 0L3.7 3Z", fill: "#044C2F" }) }) })] })] })), networks === null || networks === void 0 ? void 0 : networks.map(function (item, index) {
+                                                                        }, children: "Learn more" }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 6, height: 6, mt: "4px" }, children: (0, jsx_runtime_1.jsx)("svg", { width: "4", height: "6", viewBox: "0 0 4 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.7 3L0.7 6L0 5.3L2.3 3L0 0.7L0.7 0L3.7 3Z", fill: "currentColor" }) }) })] }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "How to choose my top up network?", onClose: closeChooseNetworkSupport, 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)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.styleMixins.listDescription), { color: theme.palette.text.primary }), children: "When top up, choose the same network as the one used on the sending platform. For example, if transferring funds using BSC network, select BSC for top up. Otherwise, you may risk losing your assets." }), (0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.styleMixins.listDescription), { color: theme.palette.text.primary }), children: "If unsure, test with a small amount and confirm it arrives safely before top up the rest." })] }) }) })] })), networks === null || networks === void 0 ? void 0 : networks.map(function (item, index) {
                                                     if (!item)
                                                         return null;
                                                     return ((0, jsx_runtime_1.jsx)(NetworkSelection_1.default, { onClick: handleSelectNetwork, networkData: JSON.stringify(item), active: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.id) === item.id, token: selectedToken }, "network_".concat(item.id, "_").concat(index)));
@@ -515,35 +498,35 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (_a, ref) {
                                 }, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                                 display: "flex",
                                                 flexDirection: "column",
-                                                gap: theme.mixins.gaps.g16,
-                                            }, children: [(0, jsx_runtime_1.jsx)("div", { id: "share-receive-info", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.mixins.column), { gap: theme.mixins.gaps.g12, backgroundColor: theme.palette.background.tertiary, borderRadius: theme.mixins.customRadius.r16, padding: theme.mixins.customPadding.p16, paddingTop: "5rem", alignItems: "flex-start", position: "relative", marginTop: "4.6875rem" }), children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                                                                    color: theme.palette.border.accent,
+                                                gap: theme.styleMixins.gaps.g16,
+                                            }, children: [(0, jsx_runtime_1.jsx)("div", { id: "share-receive-info", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12, backgroundColor: theme.palette.background.tertiary, borderRadius: theme.styleMixins.customRadius.r16, padding: theme.styleMixins.customPadding.p16, paddingTop: "5rem", alignItems: "flex-start", position: "relative", marginTop: "4.6875rem" }), children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                                                    color: theme.palette.divider,
                                                                     width: "100%",
-                                                                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), { top: 0, width: "fit-content", height: "fit-content", borderRadius: theme.mixins.customRadius.r12, padding: theme.mixins.customPadding.p8 }), children: [(0, jsx_runtime_1.jsx)(QRCode_1.default, { value: qrCodeValue, logo: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.link, bgColor: "transparent", size: 150 }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), { padding: theme.mixins.customPadding.p4, borderRadius: 9999, backgroundColor: theme.palette.background.white }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { crossOrigin: "anonymous", src: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.link, sx: {
+                                                                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.center), { top: 0, width: "fit-content", height: "fit-content", borderRadius: theme.styleMixins.customRadius.r12, padding: theme.styleMixins.customPadding.p8 }), children: [(0, jsx_runtime_1.jsx)(QRCode_1.default, { value: qrCodeValue, logo: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.link, bgColor: "transparent", size: 150 }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.center), { padding: theme.styleMixins.customPadding.p4, borderRadius: 9999, backgroundColor: theme.palette.background.default }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { crossOrigin: "anonymous", src: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.link, sx: {
                                                                                 borderRadius: 9999,
                                                                                 width: 24,
                                                                                 height: 24,
-                                                                            } }) })] }), isExternal && ((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)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: "Network" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.row), onClick: handleBack, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { component: "button", sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4, cursor: "pointer", transition: "transform 0.3s ease-in-out", "&:active": {
+                                                                            } }) })] }), isExternal && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.valueDescription), children: "Network" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.styleMixins.row), onClick: handleBack, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { component: "button", sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4, cursor: "pointer", transition: "transform 0.3s ease-in-out", "&:active": {
                                                                                         transform: "translateX(0.5rem)",
                                                                                     } }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { width: 24, height: 24, sx: {
                                                                                             borderRadius: "9999px",
-                                                                                        }, src: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.link }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.name })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
+                                                                                        }, src: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.link }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.name })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
                                                                                     width: 12,
                                                                                     height: 12,
                                                                                     ml: "auto",
                                                                                     transform: "rotate(90deg)",
-                                                                                }, children: SvgPath_1.IC_CHEVRON_RIGHT })] })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4 }), 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: __assign({}, theme.mixins.valueDescription), children: isInternal ? "Internal address" : "Address" }), isInternal && ((0, jsx_runtime_1.jsx)(CustomTooltip_1.default, { trigger: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 16, height: 16, mb: "3px" }, children: SvgPath_1.IC_TOOLTIP }), children: (0, jsx_runtime_1.jsx)(DialogContentLayout_1.default, { content: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.warning), children: ["This address is used to receive token by internal transfer. You can not use it for blockchain transaction. If you want to receive token by blockchain, please select the ", (0, jsx_runtime_1.jsx)("strong", { children: "Receive External" }), " method instead."] }) }) }))] }), (0, jsx_runtime_1.jsxs)(CopyTextComponent_1.default, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between" }), value: receiveAddress || "", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { wordBreak: "break-all", maxWidth: "85%" }), children: receiveAddress }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_COPY })] })] }), (!!userInfo || !!amount || isExternal || !!warningMessage) && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                                                                    color: theme.palette.border.accent,
+                                                                                }, children: SvgPath_1.IC_CHEVRON_RIGHT })] })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4, color: "text.secondary" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.valueDescription), { color: "inherit" }), children: isInternal ? "Internal address" : "Address" }), isInternal && ((0, jsx_runtime_1.jsx)(CustomTooltip_1.default, { trigger: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 16, height: 16, mb: "3px" }, children: SvgPath_1.IC_TOOLTIP }), children: (0, jsx_runtime_1.jsx)(DialogContentLayout_1.default, { content: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.styleMixins.warning), children: ["This address is used to receive token by internal transfer. You can not use it for blockchain transaction. If you want to receive token by blockchain, please select the ", (0, jsx_runtime_1.jsx)("strong", { children: "Receive External" }), " method instead."] }) }) }))] }), (0, jsx_runtime_1.jsxs)(CopyTextComponent_1.default, { sx: __assign(__assign({}, theme.styleMixins.row), { justifyContent: "space-between" }), value: receiveAddress || "", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { wordBreak: "break-all", maxWidth: "85%" }), children: receiveAddress }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_COPY })] })] }), (!!userInfo || !!amount || isExternal || !!warningMessage) && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                                                    color: theme.palette.divider,
                                                                     width: "100%",
-                                                                } })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [!!userInfo && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { sx: {
+                                                                } })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12 }), children: [!!userInfo && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { sx: {
                                                                             alignItems: "start",
-                                                                        }, field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Received user" }), value: (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)(Icon_1.default, { width: 16, height: 16, src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, sx: {
+                                                                        }, field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.valueDescription), { color: theme.palette.text.secondary, fontSize: theme.typography.fontSize13 }), children: "Received user" }), value: (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)(Icon_1.default, { width: 16, height: 16, src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, sx: {
                                                                                         borderRadius: "9999px",
-                                                                                    } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g2 }), children: (0, jsx_runtime_1.jsxs)(Text_1.default, { children: [userInfo === null || userInfo === void 0 ? void 0 : userInfo.nickname, " "] }) })] }), valueDescription: (0, jsx_runtime_1.jsx)(Text_1.default, { children: userInfo === null || userInfo === void 0 ? void 0 : userInfo.username }) })), !!amount && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Amount" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize13 }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }) }) })), isExternal && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Top Up Arrival Time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize13 }), children: "~ 2 Minutes" }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Withdrawal Arrival Time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize13 }), children: "~ 4 Minutes" }) })] }))] }), !!warningMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                                                                            color: theme.palette.border.accent,
+                                                                                    } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g2 }), children: (0, jsx_runtime_1.jsxs)(Text_1.default, { children: [userInfo === null || userInfo === void 0 ? void 0 : userInfo.nickname, " "] }) })] }), valueDescription: (0, jsx_runtime_1.jsx)(Text_1.default, { children: userInfo === null || userInfo === void 0 ? void 0 : userInfo.username }) })), !!amount && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.valueDescription), { color: theme.palette.text.secondary, fontSize: theme.typography.fontSize13 }), children: "Amount" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { fontSize: theme.typography.fontSize13 }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }) }) })), isExternal && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.valueDescription), { color: theme.palette.text.secondary, fontSize: theme.typography.fontSize13 }), children: "Top Up Arrival Time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { fontSize: theme.typography.fontSize13 }), children: "~ 2 Minutes" }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.valueDescription), { color: theme.palette.text.secondary, fontSize: theme.typography.fontSize13 }), children: "Withdrawal Arrival Time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { fontSize: theme.typography.fontSize13 }), children: "~ 4 Minutes" }) })] }))] }), !!warningMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                                                            color: theme.palette.divider,
                                                                             width: "100%",
-                                                                            mt: theme.mixins.customMargin.m12,
-                                                                        } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: warningMessage })] }))] }) }), isInternal && false && ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: amountDrawerRef, sx: {
+                                                                            mt: theme.styleMixins.customMargin.m12,
+                                                                        } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.valueDescription), children: warningMessage })] }))] }) }), isInternal && false && ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: amountDrawerRef, sx: {
                                                         width: "100%",
                                                         display: "flex",
                                                         justifyContent: "center",
@@ -553,8 +536,8 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (_a, ref) {
                                                                 fontWeight: theme.typography.fontWeight500,
                                                                 display: "flex",
                                                                 alignItems: "center",
-                                                                gap: theme.mixins.gaps.g4,
-                                                            }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: amount ? SvgPath_1.IC_EDIT : SvgPath_1.IC_SET }), amount ? "Edit" : "Set", " amount"] }) }), children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { id: keyboardId, onChange: handleChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), keyboardId: "amount-keyboard-id", children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { onClose: closeAmountModal, title: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.fieldTitle), children: [amount ? "Edit" : "Set", " ", selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name, " amount"] }), 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)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { ref: amountInputRef, elementsAcceptIds: ["amount-keyboard-id"], value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, rightElement: (0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { onClick: handleClickMaxAmount, sx: __assign({}, theme.mixins.smallButton), children: "Max" }) }) }), amountError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: amountError })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { width: "100%", mt: theme.mixins.customMargin.m8, gap: theme.mixins.gaps.g12 }), children: [!!amount && ((0, jsx_runtime_1.jsx)(Button_1.default.Text, { onClick: handleUnset, children: "Unset" })), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { flex: 1 }, onClick: handleContinue, status: !!amountError || !inputAmount
+                                                                gap: theme.styleMixins.gaps.g4,
+                                                            }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: amount ? SvgPath_1.IC_EDIT : SvgPath_1.IC_SET }), amount ? "Edit" : "Set", " amount"] }) }), children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { theme: keyboardThemeMode, id: keyboardId, onChange: handleChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), keyboardId: "amount-keyboard-id", children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { onClose: closeAmountModal, title: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.styleMixins.fieldTitle), children: [amount ? "Edit" : "Set", " ", selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name, " amount"] }), 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)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { ref: amountInputRef, elementsAcceptIds: ["amount-keyboard-id"], value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, rightElement: (0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { onClick: handleClickMaxAmount, sx: __assign({}, theme.styleMixins.smallButton), children: "Max" }) }) }), amountError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationError), children: amountError })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { width: "100%", mt: theme.styleMixins.customMargin.m8, gap: theme.styleMixins.gaps.g12 }), children: [!!amount && ((0, jsx_runtime_1.jsx)(Button_1.default.Text, { onClick: handleUnset, children: "Unset" })), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { flex: 1 }, onClick: handleContinue, status: !!amountError || !inputAmount
                                                                                     ? Button_1.BUTTON_STATUS.DISABLED
                                                                                     : Button_1.BUTTON_STATUS.ENABLED, children: "Continue" })] })] }) }) }) }))] }) }) }) }, "slide_step_".concat(ReceiveStep.SHOW_QR_CODE))] }) }) }) }) }));
 });

package/dist/components/TekWallet/components/ui/ReceiveHistory/ReceiveCardHistory.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var Text_1 = __importDefault(require("../Text"));
 var Column_1 = __importDefault(require("../Column"));
 var Row_1 = __importDefault(require("../Row"));
@@ -17,7 +17,7 @@ var SvgPath_1 = require("../SvgPath");
 var formatDate_1 = require("../../../utils/formatDate");
 var ReceiveCardHistory = function (_a) {
     var toAddress = _a.toAddress, date = _a.date, amount = _a.amount, currencySlug = _a.currencySlug, network = _a.network, status = _a.status;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var getStatusColor = function (status) {
         switch (status) {
             case "success":
@@ -27,30 +27,30 @@ var ReceiveCardHistory = function (_a) {
             case "processing":
                 return theme.palette.warning.main;
             default:
-                return theme.palette.text.accent2;
+                return theme.palette.text.secondary;
         }
     };
     return ((0, jsx_runtime_1.jsxs)(Column_1.default, { sx: {
-            gap: theme.mixins.gaps.g2,
-        }, children: [(0, jsx_runtime_1.jsx)(Row_1.default, { sx: { justifyContent: "space-between" }, children: (0, jsx_runtime_1.jsxs)(Column_1.default, { sx: { gap: theme.mixins.gaps.g1 }, children: [(0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
+            gap: theme.styleMixins.gaps.g2,
+        }, children: [(0, jsx_runtime_1.jsx)(Row_1.default, { sx: { justifyContent: "space-between" }, children: (0, jsx_runtime_1.jsxs)(Column_1.default, { sx: { gap: theme.styleMixins.gaps.g1 }, children: [(0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
                                 fontWeight: 700,
                                 fontSize: "1rem",
                             }, children: [(0, number_extension_1.formatCurrencyNumber)(Number(amount !== null && amount !== void 0 ? amount : 0)), " ", currencySlug === null || currencySlug === void 0 ? void 0 : currencySlug.toUpperCase()] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                 backgroundColor: getStatusColor(status !== null && status !== void 0 ? status : ""),
-                                borderRadius: theme.mixins.customRadius.r8,
-                                padding: theme.mixins.customPadding.p4,
+                                borderRadius: theme.styleMixins.customRadius.r8,
+                                padding: theme.styleMixins.customPadding.p4,
                                 width: "fit-content",
                                 display: "flex",
                                 alignItems: "center",
                                 justifyContent: "center",
-                            }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: { color: theme.palette.text.white, fontWeight: 500, fontSize: "0.625rem" }, children: (0, safeText_1.firstLetterToUpperCase)(status !== null && status !== void 0 ? status : "unknown") }) })] }) }), (0, jsx_runtime_1.jsxs)(Column_1.default, { sx: { gap: theme.mixins.gaps.g2, paddingTop: theme.mixins.customPadding.p4 }, children: [(0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "To address:", titleStyle: {
+                            }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: { fontWeight: 500, fontSize: "0.625rem" }, children: (0, safeText_1.firstLetterToUpperCase)(status !== null && status !== void 0 ? status : "unknown") }) })] }) }), (0, jsx_runtime_1.jsxs)(Column_1.default, { sx: { gap: theme.styleMixins.gaps.g2, paddingTop: theme.styleMixins.customPadding.p4 }, children: [(0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "To address:", titleStyle: {
                             fontWeight: 500,
                             fontSize: "0.813rem",
-                            color: theme.palette.text.accent2,
+                            color: theme.palette.text.secondary,
                         }, value: (0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: (0, safeText_1.safeText)(toAddress !== null && toAddress !== void 0 ? toAddress : "", {
                                 isShort: true,
                             }), children: (0, jsx_runtime_1.jsxs)(Row_1.default, { sx: {
-                                    gap: theme.mixins.gaps.g1,
+                                    gap: theme.styleMixins.gaps.g1,
                                     justifyContent: "space-between",
                                     width: "100%",
                                 }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
@@ -60,16 +60,16 @@ var ReceiveCardHistory = function (_a) {
                                         }, children: (0, safeText_1.safeText)(toAddress !== null && toAddress !== void 0 ? toAddress : "", {
                                             isShort: true,
                                         }) }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 16, height: 16 }, children: SvgPath_1.IC_COPY })] }) }) }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Network:", titleStyle: {
-                            color: theme.palette.text.accent2,
+                            color: theme.palette.text.secondary,
                             fontWeight: 500,
                             fontSize: "0.813rem",
                         }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                color: theme.palette.text.accent2,
+                                color: theme.palette.text.secondary,
                                 whiteSpace: "nowrap",
                                 fontWeight: 500,
                                 fontSize: "0.813rem",
                             }, children: network === null || network === void 0 ? void 0 : network.toUpperCase() }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                            color: theme.palette.text.accent2,
+                            color: theme.palette.text.secondary,
                             fontWeight: 500,
                             fontSize: "0.813rem",
                         }, children: (0, formatDate_1.customFormatDate)(date !== null && date !== void 0 ? date : "", { format: formatDate_1.DateFormat.MMM_DD_YYYY_HH_MM_SS }) })] })] }));

package/dist/components/TekWallet/components/ui/ReceiveHistory/ReceiveHistoryDetails.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var useWallet_1 = __importDefault(require("../../../hooks/useWallet"));
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
 var Button_1 = __importDefault(require("../Button"));
 var Text_1 = __importDefault(require("../Text"));
@@ -31,7 +31,7 @@ var ReceiveHistoryDetails = function (_a) {
     var _b, _c, _d;
     var onClose = _a.onClose, swapData = _a.receiveData;
     var transaction = (0, useWallet_1.default)().transaction;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var resultData = transaction || (swapData === null || swapData === void 0 ? void 0 : swapData.data);
     var feeInfo = (0, react_1.useMemo)(function () {
         var _a, _b;
@@ -42,81 +42,74 @@ var ReceiveHistoryDetails = function (_a) {
     var getInfoDetailOutputs = (0, react_1.useMemo)(function () {
         return (getDetailOutputs === null || getDetailOutputs === void 0 ? void 0 : getDetailOutputs[0]) || {};
     }, [getDetailOutputs]);
-    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: __assign({ color: theme.palette.text.black, width: "100%" }, theme.mixins.pagePadding), footer: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                px: theme.mixins.customPadding.p12,
+    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: __assign({ color: theme.palette.text.primary, width: "100%" }, theme.styleMixins.pagePadding), footer: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                px: theme.styleMixins.customPadding.p12,
                 position: "relative",
                 bottom: theme.typography.fontSize24,
             }, children: (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "processing" ||
-                (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "failed" ? ((0, jsx_runtime_1.jsx)(Button_1.default.Primary, { onClick: onClose, sx: __assign(__assign({ gap: theme.mixins.gaps.g4 }, theme.mixins.row), { color: theme.palette.text.secondary, borderRadius: theme.mixins.customRadius.r12, height: "40px" }), fullWidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "failed" ? ((0, jsx_runtime_1.jsx)(Button_1.default.Primary, { onClick: onClose, sx: __assign(__assign({ gap: theme.styleMixins.gaps.g4 }, theme.styleMixins.row), { color: theme.palette.text.secondary, borderRadius: theme.styleMixins.customRadius.r12, height: "40px" }), fullWidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                         fontSize: theme.typography.fontSize12,
                         fontWeight: theme.typography.fontWeight600,
                         leading: theme.typography.leading160,
                         textTransform: "none",
                         color: theme.palette.secondary.main,
-                    }, children: "Close" }) })) : ((resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "success" && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, justifyContent: "center" }), children: [(0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { onClick: onClose, sx: __assign(__assign({ gap: theme.mixins.gaps.g4 }, theme.mixins.row), { borderRadius: theme.mixins.customRadius.r12, borderColor: theme.palette.primary.main, backgroundColor: "transparent", maxWidth: "100%", height: "40px" }), fullWidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                    }, children: "Close" }) })) : ((resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "success" && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, justifyContent: "center" }), children: [(0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { onClick: onClose, sx: __assign(__assign({ gap: theme.styleMixins.gaps.g4 }, theme.styleMixins.row), { borderRadius: theme.styleMixins.customRadius.r12, borderColor: theme.palette.primary.main, backgroundColor: "transparent", maxWidth: "100%", height: "40px" }), fullWidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                 fontSize: theme.typography.fontSize13,
                                 fontWeight: theme.typography.fontWeight600,
                                 color: theme.palette.primary.main,
                                 leading: theme.typography.leading160,
                                 textTransform: "none",
-                            }, children: "Close" }) }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { onClick: onClose, sx: __assign(__assign({ gap: theme.mixins.gaps.g4 }, theme.mixins.row), { color: theme.palette.text.secondary, borderRadius: theme.mixins.customRadius.r12, maxWidth: "100%", height: "40px" }), fullWidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                            }, children: "Close" }) }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { onClick: onClose, sx: __assign(__assign({ gap: theme.styleMixins.gaps.g4 }, theme.styleMixins.row), { color: theme.palette.text.secondary, borderRadius: theme.styleMixins.customRadius.r12, maxWidth: "100%", height: "40px" }), fullWidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                 fontSize: theme.typography.fontSize13,
                                 fontWeight: theme.typography.fontWeight600,
                                 leading: theme.typography.leading160,
                                 textTransform: "none",
                                 color: theme.palette.secondary.main,
-                            }, children: "View asset" }) })] }))) }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.mixins.column), { top: 0, transform: "translateY(30%)", gap: theme.mixins.gaps.g12, backgroundColor: theme.palette.background.tertiary, borderRadius: theme.mixins.customRadius.r16, padding: theme.mixins.customPadding.p16, paddingTop: "80px", alignItems: "flex-start", position: "relative", marginTop: "75px" }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), { top: 0, width: "fit-content", height: "fit-content", borderRadius: theme.mixins.customRadius.r12, padding: theme.mixins.customPadding.p8 }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: 100, height: 100, src: (0, getIcon_1.default)((resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "success"
+                            }, children: "View asset" }) })] }))) }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.styleMixins.column), { top: 0, transform: "translateY(30%)", gap: theme.styleMixins.gaps.g12, backgroundColor: theme.palette.background.tertiary, borderRadius: theme.styleMixins.customRadius.r16, padding: theme.styleMixins.customPadding.p16, paddingTop: "80px", alignItems: "flex-start", position: "relative", marginTop: "75px" }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.center), { top: 0, width: "fit-content", height: "fit-content", borderRadius: theme.styleMixins.customRadius.r12, padding: theme.styleMixins.customPadding.p8 }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: 100, height: 100, src: (0, getIcon_1.default)((resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "success"
                             ? "success"
                             : (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "failed"
                                 ? "failed"
                                 : (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "processing"
                                     ? "processing"
-                                    : "") }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { mt: theme.mixins.customMargin.m8, textAlign: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                color: theme.palette.text.accent2,
+                                    : "") }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { mt: theme.styleMixins.customMargin.m8, textAlign: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                color: theme.palette.text.secondary,
                                 fontSize: theme.typography.fontSize14,
                                 fontWeight: theme.typography.fontWeight400,
                             }, children: "Swapping Token" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                color: (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "processing"
-                                    ? theme.palette.text.warningStatus
-                                    : (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "failed"
-                                        ? theme.palette.text.errorStatus
-                                        : (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "success"
-                                            ? theme.palette.text.alertStatus
-                                            : theme.palette.text.warningStatus,
                                 fontSize: theme.typography.fontSize24,
                                 fontWeight: theme.typography.fontWeight600,
                                 textTransform: "capitalize",
                             }, children: resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
                                 width: "100%",
-                                color: theme.palette.text.accent,
-                                mt: theme.mixins.customMargin.m12,
-                            } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between", mt: theme.mixins.customMargin.m16 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (_c = resultData === null || resultData === void 0 ? void 0 : resultData.currency_data) === null || _c === void 0 ? void 0 : _c.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                color: theme.palette.text.secondary,
+                                mt: theme.styleMixins.customMargin.m12,
+                            } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { justifyContent: "space-between", mt: theme.styleMixins.customMargin.m16 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (_c = resultData === null || resultData === void 0 ? void 0 : resultData.currency_data) === null || _c === void 0 ? void 0 : _c.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                 fontSize: theme.typography.fontSize14,
                                                 fontWeight: theme.typography.fontWeight700,
-                                            }, children: resultData === null || resultData === void 0 ? void 0 : resultData.amount })] }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("swap_horizontal"), width: 20, height: 20 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                            }, children: resultData === null || resultData === void 0 ? void 0 : resultData.amount })] }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("swap_horizontal"), width: 20, height: 20 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                 fontSize: theme.typography.fontSize14,
                                                 fontWeight: theme.typography.fontWeight700,
                                             }, children: (0, roundToTwoSignificantDecimals_1.default)((resultData === null || resultData === void 0 ? void 0 : resultData.amount) * (getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.swap_amount)) })] })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
                                 width: "100%",
-                                color: theme.palette.text.accent,
-                                mt: theme.mixins.customMargin.m12,
+                                color: theme.palette.text.secondary,
+                                mt: theme.styleMixins.customMargin.m12,
                             } }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { sx: {
-                                mt: theme.mixins.customMargin.m16,
-                                mb: theme.mixins.customMargin.m16,
+                                mt: theme.styleMixins.customMargin.m16,
+                                mb: theme.styleMixins.customMargin.m16,
                             }, field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontSize: theme.typography.fontSize12,
-                                    color: theme.palette.text.blackContrast,
+                                    color: theme.palette.text.primary,
                                 }, children: "Price" }), value: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
                                     fontSize: theme.typography.fontSize14,
                                     fontWeight: theme.typography.fontWeight700,
-                                    ml: theme.mixins.customMargin.m8,
+                                    ml: theme.styleMixins.customMargin.m8,
                                 }, children: ["1 ", (_d = resultData === null || resultData === void 0 ? void 0 : resultData.currency_data) === null || _d === void 0 ? void 0 : _d.full_name, " ~ ", getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.swap_amount, " ", getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.full_name] }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontSize: theme.typography.fontSize12,
-                                    color: theme.palette.text.blackContrast,
+                                    color: theme.palette.text.primary,
                                 }, children: "Date time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontSize: theme.typography.fontSize14,
                                     fontWeight: theme.typography.fontWeight700,
-                                    ml: theme.mixins.customMargin.m8,
+                                    ml: theme.styleMixins.customMargin.m8,
                                 }, children: (0, formatDate_1.default)(resultData === null || resultData === void 0 ? void 0 : resultData.date_created) }) })] })] }) }));
 };
 exports.default = ReceiveHistoryDetails;

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

@@ -96,7 +96,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react-hooks/exhaustive-deps */
 var react_1 = require("react");
 var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var BackHeader_1 = __importDefault(require("../BackHeader"));
 var material_1 = require("@mui/material");
 var Icon_1 = __importDefault(require("../Icon"));
@@ -135,7 +135,7 @@ var historyHistoryStatus = [
 ];
 var ReceiveHistory = function (props) {
     var _a;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _b = (0, react_1.useState)(["all"]), selectedStatuses = _b[0], setSelectedStatuses = _b[1];
     var _c = (0, react_1.useState)(["all"]), tempSelectedStatuses = _c[0], setTempSelectedStatuses = _c[1];
     var _d = (0, react_1.useState)(undefined), transactionDetail = _d[0], setTransactionDetail = _d[1];
@@ -364,11 +364,11 @@ var ReceiveHistory = function (props) {
     }, [currentId, hasOpenedDetail, selectedItem, transactionDetail, drawerRefs.current.detail]);
     return ((0, jsx_runtime_1.jsxs)(ChildPageLayout_1.default, { sx: {
             width: "100dvw",
-        }, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Top Up History", overrideBack: props.onClose }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { px: theme.mixins.customPadding.p16, 
-                    // pt: theme.mixins.customPadding.p16,
-                    gap: theme.mixins.gaps.g8, ml: theme.mixins.customMargin.m4 }), children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 4, children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: function (ref) {
+        }, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Top Up History", overrideBack: props.onClose }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { px: theme.styleMixins.customPadding.p16, 
+                    // pt: theme.styleMixins.customPadding.p16,
+                    gap: theme.styleMixins.gaps.g8, ml: theme.styleMixins.customMargin.m4 }), children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 4, children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: function (ref) {
                                 drawerRefs.current.status = ref !== null && ref !== void 0 ? ref : undefined;
-                            }, direction: DrawerComponent_1.DRAWER_DIRECTION.BOTTOM, trigger: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4, mb: theme.mixins.customMargin.m4 }), children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 0.8, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                            }, direction: DrawerComponent_1.DRAWER_DIRECTION.BOTTOM, trigger: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4, mb: theme.styleMixins.customMargin.m4 }), children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 0.8, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                 fontSize: theme.typography.fontSize12,
                                                 fontWeight: theme.typography.fontWeight500,
                                             }, children: selectedStatuses.includes("all")
@@ -376,7 +376,7 @@ var ReceiveHistory = function (props) {
                                                 : selectedStatuses.length === 1
                                                     ? ((_a = historyHistoryStatus.find(function (s) { return s.name === selectedStatuses[0]; })) === null || _a === void 0 ? void 0 : _a.title) ||
                                                         selectedStatuses[0]
-                                                    : "".concat(selectedStatuses.length, " Status") }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_down"), width: 7, height: 7 })] }) }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { overrideHeader: (0, jsx_runtime_1.jsxs)(BackHeader_1.default, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between" }), hideBack: true, overrideBack: props.onClose, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                                    : "".concat(selectedStatuses.length, " Status") }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_down"), width: 7, height: 7 })] }) }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { overrideHeader: (0, jsx_runtime_1.jsxs)(BackHeader_1.default, { sx: __assign(__assign({}, theme.styleMixins.row), { justifyContent: "space-between" }), hideBack: true, overrideBack: props.onClose, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                 fontWeight: theme.typography.fontWeight500,
                                                 fontSize: theme.typography.fontSize15,
                                             }, children: "Status" }), (0, jsx_runtime_1.jsx)(CloseModal_1.default, { sx: {
@@ -386,10 +386,10 @@ var ReceiveHistory = function (props) {
                                     backgroundColor: theme.palette.background.tertiary,
                                 }, children: (0, jsx_runtime_1.jsx)(ModalStatusFilter_1.default, { statusList: historyHistoryStatus, handleStatusSelect: handleStatusSelect, selectedStatuses: tempSelectedStatuses, onApply: handleApplyStatuses, onReset: handleResetStatuses }) }) }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: function (ref) {
                                 drawerRefs.current.date = ref !== null && ref !== void 0 ? ref : undefined;
-                            }, direction: DrawerComponent_1.DRAWER_DIRECTION.BOTTOM, trigger: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4, mb: theme.mixins.customMargin.m4 }), children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 0.8, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                            }, direction: DrawerComponent_1.DRAWER_DIRECTION.BOTTOM, trigger: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4, mb: theme.styleMixins.customMargin.m4 }), children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 0.8, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                 fontSize: theme.typography.fontSize12,
                                                 fontWeight: theme.typography.fontWeight500,
-                                            }, children: "Date" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_down"), width: 7, height: 7 })] }) }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { overrideHeader: (0, jsx_runtime_1.jsxs)(BackHeader_1.default, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between" }), hideBack: true, overrideBack: props.onClose, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                            }, children: "Date" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_down"), width: 7, height: 7 })] }) }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { overrideHeader: (0, jsx_runtime_1.jsxs)(BackHeader_1.default, { sx: __assign(__assign({}, theme.styleMixins.row), { justifyContent: "space-between" }), hideBack: true, overrideBack: props.onClose, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                 fontWeight: theme.typography.fontWeight500,
                                                 fontSize: theme.typography.fontSize15,
                                             }, children: "Filter" }), (0, jsx_runtime_1.jsx)(CloseModal_1.default, { sx: {
@@ -405,9 +405,9 @@ var ReceiveHistory = function (props) {
                                     }, drawerRefs: drawerRefs.current.date }) }) })] }) }), resultData && resultData.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
                     width: "100%",
                     opacity: 0.6,
-                    backgroundColor: theme.palette.border.accent3,
-                    mb: theme.mixins.customMargin.m16,
-                } })), isLoading && ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "px-4 py-2 space-y-3", children: resultData.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(ItemHistorySkeleton_1.ItemHistorySkeletonShimmer, {}, index)); }) })), !isLoading && resultData && resultData.length > 0 ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { overflow: "hidden" }), children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: function (ref) {
+                    backgroundColor: theme.palette.divider,
+                    mb: theme.styleMixins.customMargin.m16,
+                } })), isLoading && ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "px-4 py-2 space-y-3", children: resultData.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(ItemHistorySkeleton_1.ItemHistorySkeletonShimmer, {}, index)); }) })), !isLoading && resultData && resultData.length > 0 ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { overflow: "hidden" }), children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: function (ref) {
                             drawerRefs.current.detail = ref !== null && ref !== void 0 ? ref : undefined;
                         }, sx: {
                             width: "100%",
@@ -422,24 +422,24 @@ var ReceiveHistory = function (props) {
                                 } }, "detail-".concat(currentId))) }) }, "drawer-".concat(currentId)), resultData.map(function (item, i) { return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: function () {
                             // handleTransactionClick(item.id);
                         }, sx: {
-                            px: theme.mixins.customPadding.p16,
+                            px: theme.styleMixins.customPadding.p16,
                         }, children: [(0, jsx_runtime_1.jsx)(ReceiveCardHistory_1.default, { toAddress: item.to_address, date: item.date_created, amount: item.amount, currencySlug: item.currency_slug, network: item.network, status: item.transaction_status }, item.id), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
                                     width: "100%",
                                     opacity: 0.6,
-                                    backgroundColor: theme.palette.border.accent3,
-                                    my: theme.mixins.customMargin.m16,
+                                    backgroundColor: theme.palette.divider,
+                                    my: theme.styleMixins.customMargin.m16,
                                 } })] }, i)); })] })) : (resultData.length == 0 &&
-                !isLoading && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign(__assign({}, theme.mixins.center), { padding: theme.mixins.customPadding.p24 }), theme.mixins.column), { gap: theme.mixins.gaps.g4, textAlign: "center" }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("result"), width: 62, height: 62, sx: {
+                !isLoading && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign(__assign({}, theme.styleMixins.center), { padding: theme.styleMixins.customPadding.p24 }), theme.styleMixins.column), { gap: theme.styleMixins.gaps.g4, textAlign: "center" }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("result"), width: 62, height: 62, sx: {
                             mx: "auto",
-                            mb: theme.mixins.customMargin.m12,
+                            mb: theme.styleMixins.customMargin.m12,
                         } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                             fontSize: theme.typography.fontSize14,
                             fontWeight: theme.typography.fontWeight700,
-                            color: theme.palette.text.blackContrast,
+                            color: theme.palette.text.primary,
                         }, children: "No Results Found" }), (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: resultData.length === 0
                             ? "No transaction history available."
                             : "Switch your filter to display your latest transaction history." })] })))] }));