tek-wallet 0.0.806 → 0.0.807

package/dist/components/TekWallet/components/views/SendExternalView/components/Form.js

@@ -90,6 +90,7 @@ var Input_1 = __importDefault(require("../../../ui/Input"));
 var Formatter_1 = __importDefault(require("../../../ui/Formatter"));
 var SvgPath_1 = require("../../../ui/SvgPath");
 var Text_1 = __importDefault(require("../../../ui/Text"));
+var mui_1 = require("../../../../theme/mui");
 var providers_1 = require("../../../../providers");
 var react_1 = require("react");
 var validate_wallet_address_service_1 = __importDefault(require("../../../../services/axios/validate-wallet-address-service"));
@@ -118,7 +119,7 @@ var getEstimateFeeDebounce = (0, lodash_1.debounce)(function (callback) {
 }, 500, { leading: true, trailing: true });
 function Form(props) {
     var _this = this;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var searchParams = (0, navigation_1.useSearchParams)();
     var address = searchParams.get("address") || "";
     var selectedToken = props.selectedToken, onContinue = props.onContinue, sx = props.sx;
@@ -405,32 +406,33 @@ function Form(props) {
     (0, react_1.useEffect)(function () {
         validateAmount((amount === null || amount === void 0 ? void 0 : amount.toString()) || "");
     }, [amount, validateAmount]);
+    var keyboardThemeMode = (0, providers_1.useKeyboardThemeMode)();
     return ((0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { styles: {
             container: {
                 height: "100%",
             },
-        }, id: keyboardId, onChange: handleKeyboardChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: amount === null || amount === void 0 ? void 0 : amount.toString(), keyboardId: "form-amount-keyboard-id", onOpen: handleKeyboardOpen, onClose: handleKeyboardClose, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { children: (0, jsx_runtime_1.jsx)(react_2.AnimatePresence, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g16, minHeight: "100%", transition: "padding-bottom 0.3s ease-in-out" }), sx), (isKeyboardOpen
+        }, id: keyboardId, onChange: handleKeyboardChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: amount === null || amount === void 0 ? void 0 : amount.toString(), keyboardId: "form-amount-keyboard-id", onOpen: handleKeyboardOpen, onClose: handleKeyboardClose, theme: keyboardThemeMode, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { children: (0, jsx_runtime_1.jsx)(react_2.AnimatePresence, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g16, minHeight: "100%", transition: "padding-bottom 0.3s ease-in-out" }), sx), (isKeyboardOpen
                         ? {
-                            paddingBottom: theme.mixins.customPadding.p8,
+                            paddingBottom: theme.styleMixins.customPadding.p8,
                         }
-                        : {})), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                        : {})), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                         fontSize: theme.typography.fontSize14,
-                                        color: theme.palette.text.black,
+                                        color: theme.palette.text.primary,
                                         fontWeight: theme.typography.fontWeight700,
                                     }, children: "Wallet address" }), (0, jsx_runtime_1.jsx)(Input_1.default, { sx: {
-                                        paddingX: theme.mixins.customPadding.p16,
+                                        paddingX: theme.styleMixins.customPadding.p16,
                                     }, inputRest: {
                                         placeholder: "Enter recipient address",
                                         value: recipientAddress,
                                         onChange: handleChangeRecipientAddress,
                                         id: "recipient-address-input-id",
-                                    }, rightPart: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: !!recipientAddress ? ((0, jsx_runtime_1.jsx)("label", { htmlFor: "recipient-address-input-id", children: (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handleClearRecipientAddress, sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, cursor: "pointer" }), children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 12, height: 12 }, children: SvgPath_1.IC_CLOSE }) }) })) : ((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)(material_1.Box, { onClick: openScannerAddressQrCode, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_SCAN", sx: { width: 18, height: 18 } }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "fullWidth", flexItem: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handlePaste, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 18, height: 18 }, children: SvgPath_1.IC_DOCUMENTS }) })] })) }) }), !!recipientAddressError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: recipientAddressError }))] }), allowSelectNetwork && ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, transition: { duration: 0.3 }, style: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8, willChange: "height, opacity" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    }, rightPart: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: !!recipientAddress ? ((0, jsx_runtime_1.jsx)("label", { htmlFor: "recipient-address-input-id", children: (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handleClearRecipientAddress, sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, cursor: "pointer" }), children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 12, height: 12 }, children: SvgPath_1.IC_CLOSE }) }) })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, color: "primary.main" }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { onClick: openScannerAddressQrCode, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_SCAN", sx: { width: 20, height: 20 } }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "fullWidth", flexItem: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handlePaste, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_DOCUMENTS", sx: { width: 20, height: 20 } }) })] })) }) }), !!recipientAddressError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationError), children: recipientAddressError }))] }), allowSelectNetwork && ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, transition: { duration: 0.3 }, style: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8, willChange: "height, opacity" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                         fontSize: theme.typography.fontSize14,
-                                        color: theme.palette.text.black,
+                                        color: theme.palette.text.primary,
                                         fontWeight: theme.typography.fontWeight700,
                                     }, children: "Network" }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: selectNetworkDrawerRef, trigger: (0, jsx_runtime_1.jsx)(Input_1.default, { sx: {
-                                            paddingLeft: theme.mixins.customPadding.p12,
-                                            paddingRight: theme.mixins.customPadding.p16,
+                                            paddingLeft: theme.styleMixins.customPadding.p12,
+                                            paddingRight: theme.styleMixins.customPadding.p16,
                                         }, inputRest: {
                                             placeholder: "Select a network",
                                             value: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.name) || "",
@@ -438,42 +440,35 @@ function Form(props) {
                                             inputProps: {
                                                 readOnly: true,
                                             },
-                                        }, leftPart: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_NETWORK", src: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.link) || undefined, sx: { width: 24, height: 24 } }) }), rightPart: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: "block" }, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 10, height: 18, display: "block" }, children: SvgPath_1.ARROW_DOWN }) }) }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "Select network", onClose: closeSelectNetwork, children: (0, jsx_runtime_1.jsx)(SelectNetwork_1.default, { networks: networks, selectedNetwork: selectedNetwork, selectedToken: selectedToken, onChangeNetwork: handleChangeNetwork }) }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, alignItems: "center", justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                        }, leftPart: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_NETWORK", src: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.link) || undefined, sx: { width: 24, height: 24 } }) }), rightPart: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: "block" }, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 10, height: 18, display: "block" }, children: SvgPath_1.ARROW_DOWN }) }) }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "Select network", onClose: closeSelectNetwork, children: (0, jsx_runtime_1.jsx)(SelectNetwork_1.default, { networks: networks, selectedNetwork: selectedNetwork, selectedToken: selectedToken, onChangeNetwork: handleChangeNetwork }) }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, alignItems: "center", justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                 fontSize: theme.typography.fontSize14,
-                                                color: theme.palette.text.black,
+                                                color: theme.palette.text.primary,
                                                 fontWeight: theme.typography.fontWeight700,
-                                            }, children: "Withdrawal amount" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize11, color: theme.palette.text.accent }), children: "Your balance " }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize12, color: theme.palette.text.black, fontWeight: theme.typography.fontWeight700 }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: balance, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }) })] })] }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { elementsAcceptIds: ["form-amount-keyboard-id"], value: amount === null || amount === void 0 ? void 0 : amount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, placeholder: ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", sx: { pointerEvents: "none" }, children: placeholder })), styles: {
+                                            }, children: "Withdrawal amount" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { fontSize: theme.typography.fontSize11, color: theme.palette.text.secondary }), children: "Your balance " }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { fontSize: theme.typography.fontSize12, color: theme.palette.text.primary, fontWeight: theme.typography.fontWeight700 }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: balance, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }) })] })] }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { elementsAcceptIds: ["form-amount-keyboard-id"], value: amount === null || amount === void 0 ? void 0 : amount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, placeholder: ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", sx: { pointerEvents: "none" }, children: placeholder })), styles: {
                                             container: {
-                                                paddingRight: theme.mixins.customPadding.p4,
-                                                paddingLeft: theme.mixins.customPadding.p16,
-                                                paddingTop: theme.mixins.customPadding.p4,
-                                                paddingBottom: theme.mixins.customPadding.p4,
-                                                border: "1px ".concat(theme.palette.border.primary, " solid"),
-                                                borderRadius: theme.mixins.customRadius.r8,
+                                                paddingRight: theme.styleMixins.customPadding.p10,
+                                                paddingLeft: theme.styleMixins.customPadding.p16,
+                                                paddingTop: theme.styleMixins.customPadding.p10,
+                                                paddingBottom: theme.styleMixins.customPadding.p10,
+                                                border: "1px ".concat(theme.palette.divider, " solid"),
+                                                borderRadius: theme.shape.borderRadius,
+                                                backgroundColor: "transparent",
+                                                color: theme.palette.text.primary,
                                             },
-                                        }, rightElement: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handleClickMaxAmount, sx: {
-                                                    background: theme.palette.background.tertiary,
-                                                    color: theme.palette.text.black,
-                                                    fontSize: theme.typography.fontSize11,
-                                                    fontWeight: theme.typography.fontWeight700,
-                                                    borderRadius: theme.mixins.customRadius.r4,
-                                                    paddingX: theme.mixins.customPadding.p16,
-                                                    paddingY: theme.mixins.customPadding.p8,
-                                                    border: "0px solid",
-                                                    cursor: "pointer",
-                                                }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                                        fontSize: theme.typography.fontSize12,
-                                                        color: theme.palette.text.primary,
-                                                        fontWeight: theme.typography.fontWeight500,
-                                                    }, children: "Max" }) }) }) }) }), !!amountErrorMessage && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: [amountErrorMessage, " ", !!amountError && ((0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amountError, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }))] }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                            placeholder: {
+                                                color: theme.palette.text.primary,
+                                                fontSize: theme.typography.fontSize13,
+                                                opacity: 0.5,
+                                            },
+                                        }, rightElement: (0, jsx_runtime_1.jsx)(Button_1.default, { size: "small", color: "secondary", onClick: handleClickMaxAmount, children: "Max" }) }) }), !!amountErrorMessage && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationError), children: [amountErrorMessage, " ", !!amountError && ((0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amountError, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }))] }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                         fontSize: theme.typography.fontSize14,
-                                        color: theme.palette.text.black,
+                                        color: theme.palette.text.primary,
                                         fontWeight: theme.typography.fontWeight700,
-                                    }, children: "Memo" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Input_1.default, { inputRest: {
+                                    }, children: "Memo" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Input_1.default, { inputRest: {
                                                 placeholder: "Enter memo if needed",
                                                 value: comment,
                                                 onChange: handleChangeComment,
-                                            } }), !!memoError && (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: memoError })] }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationDescription), children: "Enter memo if your receiving platform requires one to avoid losing your funds." })] }), (0, jsx_runtime_1.jsx)(Fees_1.default, { isFeePaidByAmount: true, feesData: estimateFee, amount: +amount, tokenSlug: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug) || "", feesStyle: Fees_1.FeesStyle.WITH_BACKGROUND, setIsEnoughBalanceToPayFee: setIsEnoughBalanceToPayFee }), (0, jsx_runtime_1.jsx)(QrCodeReader_1.default, { ref: scannerAddressQrCodeRef, onResult: handleScanAddressQrCode }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { loading: isValidatingAddress || isEstimatingFee, onClick: handleContinue, status: !recipientAddress ||
+                                            } }), !!memoError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationError), children: memoError }))] }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationDescription), children: "Enter memo if your receiving platform requires one to avoid losing your funds." })] }), (0, jsx_runtime_1.jsx)(Fees_1.default, { isFeePaidByAmount: true, feesData: estimateFee, amount: +amount, tokenSlug: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug) || "", feesStyle: Fees_1.FeesStyle.WITH_BACKGROUND, setIsEnoughBalanceToPayFee: setIsEnoughBalanceToPayFee }), (0, jsx_runtime_1.jsx)(QrCodeReader_1.default, { ref: scannerAddressQrCodeRef, onResult: handleScanAddressQrCode }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { loading: isValidatingAddress || isEstimatingFee, onClick: handleContinue, status: !recipientAddress ||
                                 !selectedNetwork ||
                                 !amount ||
                                 !!recipientAddressError ||

package/dist/components/TekWallet/components/views/SendExternalView/components/Result.js

@@ -58,7 +58,7 @@ var Fees_1 = __importStar(require("../../../ui/Fees"));
 var safeText_1 = require("../../../../utils/safeText");
 var react_1 = require("react");
 var Button_1 = __importDefault(require("../../../ui/Button"));
-var providers_1 = require("../../../../providers");
+var mui_1 = require("../../../../theme/mui");
 var Formatter_1 = __importDefault(require("../../../ui/Formatter"));
 var Icon_1 = __importDefault(require("../../../ui/Icon"));
 var useFormatter_1 = __importDefault(require("../../../../hooks/useFormatter"));
@@ -71,7 +71,7 @@ var getIconKey = function (status) {
 };
 function Result(props) {
     var _a;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var formatDate = (0, useFormatter_1.default)().formatDate;
     var response = props.transaction, onDone = props.onDone, payload = props.payload, selectedToken = props.selectedToken;
     var status = (0, react_1.useMemo)(function () { return (response === null || response === void 0 ? void 0 : response.transaction_status) || "failed"; }, [response === null || response === void 0 ? void 0 : response.transaction_status]);
@@ -91,11 +91,11 @@ function Result(props) {
                     display: "flex",
                     flexDirection: "column",
                     alignItems: "center",
-                    gap: theme.mixins.gaps.g16,
+                    gap: theme.styleMixins.gaps.g16,
                     my: "auto",
                     backgroundColor: theme.palette.background.tertiary,
-                    borderRadius: theme.mixins.customRadius.r16,
-                    padding: theme.mixins.customPadding.p16,
+                    borderRadius: theme.styleMixins.customRadius.r16,
+                    padding: theme.styleMixins.customPadding.p16,
                     paddingTop: "0px",
                 }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: getIconKey(status), width: 100, sx: {
                             transform: "translateY(-50%)",
@@ -105,37 +105,37 @@ function Result(props) {
                             alignItems: "center",
                         }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontSize: theme.typography.fontSize13,
-                                    color: theme.palette.text.accent2,
+                                    color: theme.palette.text.secondary,
                                 }, children: "Withdraw" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     color: theme.palette.text.primary,
                                     textTransform: "capitalize",
                                     fontWeight: 600,
                                     fontSize: theme.typography.fontSize24,
-                                }, children: status })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", borderTop: "1px ".concat(theme.palette.border.accent3, " solid") } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.bigValue), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { start: "- ", value: amount, unit: tokenName }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", borderTop: "1px ".concat(theme.palette.border.accent3, " solid") } }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Recipient address", titleStyle: {
+                                }, children: status })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", borderTop: "1px ".concat(theme.palette.divider, " solid") } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.bigValue), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { start: "- ", value: amount, unit: tokenName }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", borderTop: "1px ".concat(theme.palette.divider, " solid") } }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Recipient address", titleStyle: {
                             fontSize: "0.875rem",
                             fontWeight: 500,
-                            color: "gray.700",
-                        }, 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: __assign({}, theme.mixins.value), children: (0, safeText_1.safeText)(recipientAddress || "", { isShort: true }) }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
+                            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: __assign({}, theme.styleMixins.value), children: (0, safeText_1.safeText)(recipientAddress || "", { isShort: true }) }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
                                             width: 16,
                                             height: 16,
                                             ml: "auto",
                                         }, children: SvgPath_1.IC_COPY })] }) }), isAligned: true }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Network", titleStyle: {
                             fontSize: "0.875rem",
                             fontWeight: 500,
-                            color: "gray.700",
-                        }, value: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex gap-2 items-center", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: networkInfo === null || networkInfo === void 0 ? void 0 : networkInfo.link, width: 20 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: networkInfo === null || networkInfo === void 0 ? void 0 : networkInfo.name })] }), isAligned: true }), memo && ((0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Memo", titleStyle: {
+                            color: "text.secondary",
+                        }, value: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex gap-2 items-center", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: networkInfo === null || networkInfo === void 0 ? void 0 : networkInfo.link, width: 20 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: networkInfo === null || networkInfo === void 0 ? void 0 : networkInfo.name })] }), isAligned: true }), memo && ((0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Memo", titleStyle: {
                             fontSize: "0.875rem",
                             fontWeight: 500,
-                            color: "gray.700",
-                        }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: memo }), isAligned: true })), dateCreated && ((0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Date time", titleStyle: {
+                            color: "text.secondary",
+                        }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: memo }), isAligned: true })), dateCreated && ((0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Date time", titleStyle: {
                             fontSize: "0.875rem",
                             fontWeight: 500,
-                            color: "gray.700",
-                        }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: formatDate(dateCreated, true) }), isAligned: true })), !!feeInfo && ((0, jsx_runtime_1.jsx)(Fees_1.default, { isFeePaidByAmount: true, feesData: feeInfo, amount: +(amount || 0), tokenSlug: (response === null || response === void 0 ? void 0 : response.currency_slug) || "", feesStyle: Fees_1.FeesStyle.DEFAULT }))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                            color: "text.secondary",
+                        }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: formatDate(dateCreated, true) }), isAligned: true })), !!feeInfo && ((0, jsx_runtime_1.jsx)(Fees_1.default, { isFeePaidByAmount: true, feesData: feeInfo, amount: +(amount || 0), tokenSlug: (response === null || response === void 0 ? void 0 : response.currency_slug) || "", feesStyle: Fees_1.FeesStyle.DEFAULT }))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     marginTop: "auto",
                     width: "100%",
                     display: "grid",
                     gridTemplateColumns: "1fr",
-                    gap: theme.mixins.gaps.g8,
+                    gap: theme.styleMixins.gaps.g8,
                 }, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100%" }, onClick: onDone, children: "Done" }) })] }));
 }

package/dist/components/TekWallet/components/views/SendExternalView/components/SelectNetwork.js

@@ -17,15 +17,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var material_1 = require("@mui/material");
-var providers_1 = require("../../../../providers");
+var mui_1 = require("../../../../theme/mui");
 var NetworkSelection_1 = __importDefault(require("../../../ui/NetworkSelection"));
 function SelectNetwork(props) {
     var networks = props.networks, selectedNetwork = props.selectedNetwork, onChangeNetwork = props.onChangeNetwork, selectedToken = props.selectedToken;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var handleSelectNetwork = (0, react_1.useCallback)(function (network) {
         onChangeNetwork === null || onChangeNetwork === void 0 ? void 0 : onChangeNetwork(network);
     }, [onChangeNetwork]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8 }), children: networks === null || networks === void 0 ? void 0 : networks.map(function (item, index) {
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8 }), children: 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)));

package/dist/components/TekWallet/components/views/SendExternalView/components/SelectToken.js

@@ -58,20 +58,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var providers_1 = require("../../../../providers");
 var TokenSelection_1 = __importDefault(require("../../../ui/TokenSelection"));
-var SvgPath_1 = require("../../../ui/SvgPath");
 var EmptyData_1 = __importDefault(require("../../../ui/EmptyData"));
 var WaitingData_1 = __importDefault(require("../../../ui/WaitingData"));
 var react_1 = require("react");
 var lodash_1 = require("lodash");
 var SortGroup_1 = __importStar(require("../../../ui/ReceiveFunction/components/SortGroup"));
 var SortTool_1 = require("../../../ui/ReceiveFunction/components/SortTool");
+var SearchBar_1 = __importDefault(require("../../../ui/SearchBar"));
+var mui_1 = require("../../../../theme/mui");
 var searchDebounce = (0, lodash_1.debounce)(function (callback) {
     callback();
 }, 500, { leading: true, trailing: true });
 var SelectToken = function (props) {
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _a = (0, react_1.useState)(""), searchValue = _a[0], setSearchValue = _a[1];
     var _b = (0, react_1.useState)(), searchedReceiveTokens = _b[0], setSearchedReceiveTokens = _b[1];
     var _c = (0, react_1.useState)([]), tokenRender = _c[0], setTokenRender = _c[1];
@@ -132,38 +132,13 @@ var SelectToken = function (props) {
             setTokenRender(tokens || []);
         }
     }, [isSearching, searchedReceiveTokens, tokens]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content" }), children: [!isEmptyDepositTokens && !isLoadingDepositTokens && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12, height: "fit-content" }), children: [!isEmptyDepositTokens && !isLoadingDepositTokens && ((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: [(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, { numberOfSkeleton: 8 }), 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: [(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, { numberOfSkeleton: 8 }), 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;

package/dist/components/TekWallet/components/views/SendExternalView/components/Summary.js

@@ -68,14 +68,14 @@ var SvgPath_1 = require("../../../ui/SvgPath");
 var Fees_1 = __importStar(require("../../../ui/Fees"));
 var react_1 = require("react");
 var Button_1 = __importStar(require("../../../ui/Button"));
-var providers_1 = require("../../../../providers");
+var mui_1 = require("../../../../theme/mui");
 var Formatter_1 = __importDefault(require("../../../ui/Formatter"));
 var ConfirmSendExternal_1 = __importDefault(require("../../../ui/ConfirmSendExternal"));
 var Icon_1 = __importDefault(require("../../../ui/Icon"));
 function Summary(props) {
     var estimateFee = props.estimateFee, selectedToken = props.selectedToken, payload = props.payload, confirmProps = props.confirmProps;
     var _a = confirmProps || {}, onSuccess = _a.onSuccess, onError = _a.onError, onStart = _a.onStart, onFinally = _a.onFinally, confirmPropsRest = __rest(_a, ["onSuccess", "onError", "onStart", "onFinally"]);
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var recipientAddress = (0, react_1.useMemo)(function () { return payload.to_address; }, [payload.to_address]);
     var amount = (0, react_1.useMemo)(function () { return payload.amount; }, [payload.amount]);
     var memo = (0, react_1.useMemo)(function () { return payload.memo; }, [payload.memo]);
@@ -85,31 +85,31 @@ function Summary(props) {
             flexDirection: "column",
             gap: 3,
             height: "100%",
-        }, 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: theme.mixins.gaps.g16,
+                    gap: theme.styleMixins.gaps.g16,
                 }, children: [(0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Amount", titleStyle: {
                             fontSize: "0.875rem",
                             fontWeight: 500,
-                            color: "gray.700",
-                        }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount, unit: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name }) }), isAligned: true }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Recipient address", column: true, titleStyle: {
+                            color: "text.secondary",
+                        }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount, unit: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name }) }), isAligned: true }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Recipient address", column: true, titleStyle: {
                             fontSize: "0.875rem",
                             fontWeight: 500,
-                            color: "gray.700",
-                        }, value: (0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: recipientAddress || "", sx: { width: "100%" }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { wordBreak: "break-all", textAlign: "left" }), children: recipientAddress }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
+                            color: "text.secondary",
+                        }, value: (0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: recipientAddress || "", sx: { width: "100%" }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { wordBreak: "break-all", textAlign: "left" }), children: recipientAddress }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
                                             width: 16,
                                             height: 16,
                                             ml: "auto",
                                         }, children: SvgPath_1.IC_COPY })] }) }), isAligned: true }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Network", titleStyle: {
                             fontSize: "0.875rem",
                             fontWeight: 500,
-                            color: "gray.700",
-                        }, value: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex gap-2 items-center", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: payload.network.link, width: 20 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: payload.network.name })] }), isAligned: true }), memo && ((0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Memo", titleStyle: {
+                            color: "text.secondary",
+                        }, value: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex gap-2 items-center", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: payload.network.link, width: 20 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: payload.network.name })] }), isAligned: true }), memo && ((0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Memo", titleStyle: {
                             fontSize: "0.875rem",
                             fontWeight: 500,
-                            color: "gray.700",
-                        }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: memo }), isAligned: true })), (0, jsx_runtime_1.jsx)(Fees_1.default, { isFeePaidByAmount: true, feesData: estimateFee, amount: +(amount || 0), tokenSlug: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug) || "", feesStyle: Fees_1.FeesStyle.DEFAULT })] }), (0, jsx_runtime_1.jsx)(ConfirmSendExternal_1.default, __assign({ sx: {
+                            color: "text.secondary",
+                        }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: memo }), isAligned: true })), (0, jsx_runtime_1.jsx)(Fees_1.default, { isFeePaidByAmount: true, feesData: estimateFee, amount: +(amount || 0), tokenSlug: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug) || "", feesStyle: Fees_1.FeesStyle.DEFAULT })] }), (0, jsx_runtime_1.jsx)(ConfirmSendExternal_1.default, __assign({ sx: {
                     width: "100%",
                     marginTop: "auto",
                 }, payload: payload }, confirmPropsRest, { onSuccess: function (res) {

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

@@ -31,7 +31,7 @@ var PageHeader_1 = __importDefault(require("../../ui/PageHeader"));
 var DefaultPageLayout_1 = __importDefault(require("../../layouts/DefaultPageLayout"));
 var Summary_1 = __importDefault(require("./components/Summary"));
 var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"));
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var SendExternalStep;
 (function (SendExternalStep) {
     SendExternalStep[SendExternalStep["SELECT_TOKEN"] = 0] = "SELECT_TOKEN";
@@ -52,7 +52,7 @@ var WithdrawAmountError;
 exports.SendExternalView = (0, react_1.forwardRef)(function (props, ref) {
     var isInitPasscode = (0, useWalletData_1.default)().isInitPasscode;
     var _a = (0, useWithdrawData_1.default)(), updateWithdrawToken = _a.updateWithdrawToken, withdrawTokens = _a.withdrawTokens;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var router = (0, useCustomRouter_1.default)();
     var drawerRef = (0, react_1.useRef)(null);
     var stepsRef = (0, react_1.useRef)(null);
@@ -127,7 +127,7 @@ exports.SendExternalView = (0, react_1.forwardRef)(function (props, ref) {
                 height: "100%",
             }, swiperStyle: {
                 height: "100%",
-            }, 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.jsx)(SelectToken_1.default, { tokens: withdrawTokens, selectedToken: selectedToken, onChangeToken: handleSelectToken }) }) }) }, SendExternalStep.SELECT_TOKEN), "price", (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: { minHeight: "100%" }, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: !!selectedToken && ((0, jsx_runtime_1.jsx)(Form_1.default, { sx: __assign({}, theme.mixins.pagePadding), selectedToken: selectedToken, onContinue: gotoConfirmStep }, clearFormKey)) }) }, SendExternalStep.ADDRESS_FORM), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: { minHeight: "100%" }, children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: {
+            }, 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.jsx)(SelectToken_1.default, { tokens: withdrawTokens, selectedToken: selectedToken, onChangeToken: handleSelectToken }) }) }) }, SendExternalStep.SELECT_TOKEN), "price", (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: { minHeight: "100%" }, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: !!selectedToken && ((0, jsx_runtime_1.jsx)(Form_1.default, { sx: __assign({}, theme.styleMixins.pagePadding), selectedToken: selectedToken, onContinue: gotoConfirmStep }, clearFormKey)) }) }, SendExternalStep.ADDRESS_FORM), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: { minHeight: "100%" }, children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: {
                             height: "100%",
                         }, children: payload && ((0, jsx_runtime_1.jsx)(Summary_1.default, { estimateFee: estimateFee, payload: __assign(__assign({}, payload), { await_completion: true }), selectedToken: selectedToken, confirmProps: {
                                 onSuccess: handleSendSuccess,

package/dist/components/TekWallet/components/views/SendInternalView/components/AmountForm.js

@@ -90,7 +90,6 @@ var Input_1 = __importDefault(require("../../../ui/Input"));
 var Formatter_1 = __importDefault(require("../../../ui/Formatter"));
 var SvgPath_1 = require("../../../ui/SvgPath");
 var Text_1 = __importDefault(require("../../../ui/Text"));
-var providers_1 = require("../../../../providers");
 var react_1 = require("react");
 var validate_wallet_address_service_1 = __importDefault(require("../../../../services/axios/validate-wallet-address-service"));
 var lodash_1 = require("lodash");
@@ -104,6 +103,8 @@ var type_1 = require("../../../../services/axios/get-activities-service/type");
 var Fees_1 = __importStar(require("../../../ui/Fees"));
 var xhub_keyboard_1 = require("xhub-keyboard");
 var useUniqueId_1 = require("../../../../hooks/useUniqueId");
+var mui_1 = require("../../../../theme/mui");
+var providers_1 = require("../../../../providers");
 var validateAddressDebounce = (0, lodash_1.debounce)(function (callback) {
     callback();
 }, 500, { leading: true, trailing: true });
@@ -112,7 +113,7 @@ var getEstimateFeeDebounce = (0, lodash_1.debounce)(function (callback) {
 }, 500, { leading: true, trailing: true });
 function Form(props) {
     var _this = this;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var selectedToken = props.selectedToken, onContinue = props.onContinue, sx = props.sx;
     var _a = (0, react_1.useState)(""), recipientAddress = _a[0], setRecipientAddress = _a[1];
     var _b = (0, react_1.useState)(), recipientAddressError = _b[0], setRecipientAddressError = _b[1];
@@ -312,59 +313,60 @@ function Form(props) {
     var handleKeyboardClose = function () {
         setIsKeyboardOpen(false);
     };
+    var keyboardThemeMode = (0, providers_1.useKeyboardThemeMode)();
     return ((0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { styles: {
             container: {
                 height: "100%",
             },
-        }, id: keyboardId, onChange: handleKeyboardChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: amount === null || amount === void 0 ? void 0 : amount.toString(), keyboardId: "form-amount-keyboard-id", onOpen: handleKeyboardOpen, onClose: handleKeyboardClose, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g16, minHeight: "100%", transition: "padding-bottom 0.3s ease-in-out" }), sx), (isKeyboardOpen
+        }, id: keyboardId, onChange: handleKeyboardChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: amount === null || amount === void 0 ? void 0 : amount.toString(), keyboardId: "form-amount-keyboard-id", onOpen: handleKeyboardOpen, onClose: handleKeyboardClose, theme: keyboardThemeMode, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g16, minHeight: "100%", transition: "padding-bottom 0.3s ease-in-out" }), sx), (isKeyboardOpen
                 ? {
-                    paddingBottom: theme.mixins.customPadding.p8,
+                    paddingBottom: theme.styleMixins.customPadding.p8,
                 }
-                : {})), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                : {})), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                 fontSize: theme.typography.fontSize14,
-                                color: theme.palette.text.black,
+                                color: theme.palette.text.primary,
                                 fontWeight: theme.typography.fontWeight700,
                             }, children: "Wallet address" }), (0, jsx_runtime_1.jsx)(Input_1.default, { sx: {
-                                paddingX: theme.mixins.customPadding.p16,
+                                paddingX: theme.styleMixins.customPadding.p16,
                             }, inputRest: {
                                 placeholder: "Enter recipient address",
                                 value: recipientAddress,
                                 onChange: handleChangeRecipientAddress,
-                            }, rightPart: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: !!recipientAddress ? ((0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handleClearRecipientAddress, sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, cursor: "pointer" }), children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 12, height: 12 }, children: SvgPath_1.IC_CLOSE }) })) : ((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)(material_1.Box, { onClick: openScannerAddressQrCode, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_SCAN", sx: { width: 18, height: 18 } }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "fullWidth", flexItem: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handlePaste, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 18, height: 18 }, children: SvgPath_1.IC_DOCUMENTS }) })] })) }) }), !!recipientAddressError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: recipientAddressError }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, alignItems: "center", justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                            }, rightPart: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: !!recipientAddress ? ((0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handleClearRecipientAddress, sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, cursor: "pointer" }), children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 12, height: 12 }, children: SvgPath_1.IC_CLOSE }) })) : ((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)(material_1.Box, { onClick: openScannerAddressQrCode, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_SCAN", sx: { width: 18, height: 18 } }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "fullWidth", flexItem: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handlePaste, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 18, height: 18 }, children: SvgPath_1.IC_DOCUMENTS }) })] })) }) }), !!recipientAddressError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationError), children: recipientAddressError }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, alignItems: "center", justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                         fontSize: theme.typography.fontSize14,
-                                        color: theme.palette.text.black,
+                                        color: theme.palette.text.primary,
                                         fontWeight: theme.typography.fontWeight700,
-                                    }, children: "Withdrawal amount" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize11, color: theme.palette.text.accent }), children: "Your balance " }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize12, color: theme.palette.text.black, fontWeight: theme.typography.fontWeight700 }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.balance, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }) })] })] }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { elementsAcceptIds: ["form-amount-keyboard-id"], value: amount === null || amount === void 0 ? void 0 : amount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, placeholder: ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                    }, children: "Withdrawal amount" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { fontSize: theme.typography.fontSize11, color: theme.palette.text.secondary }), children: "Your balance " }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { fontSize: theme.typography.fontSize12, color: theme.palette.text.primary, fontWeight: theme.typography.fontWeight700 }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.balance, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }) })] })] }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { elementsAcceptIds: ["form-amount-keyboard-id"], value: amount === null || amount === void 0 ? void 0 : amount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, placeholder: ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                         display: "inline-flex",
                                         alignItems: "center",
-                                        gap: theme.mixins.gaps.g4,
+                                        gap: theme.styleMixins.gaps.g4,
                                         pointerEvents: "none",
                                     }, children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { value: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.min_value }), " -", " ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.max_value, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) })] })), styles: {
                                     container: {
-                                        paddingRight: theme.mixins.customPadding.p4,
-                                        paddingLeft: theme.mixins.customPadding.p16,
-                                        paddingTop: theme.mixins.customPadding.p4,
-                                        paddingBottom: theme.mixins.customPadding.p4,
-                                        border: "1px ".concat(theme.palette.border.primary, " solid"),
-                                        borderRadius: theme.mixins.customRadius.r8,
+                                        paddingRight: theme.styleMixins.customPadding.p4,
+                                        paddingLeft: theme.styleMixins.customPadding.p16,
+                                        paddingTop: theme.styleMixins.customPadding.p4,
+                                        paddingBottom: theme.styleMixins.customPadding.p4,
+                                        border: "1px ".concat(theme.palette.divider, " solid"),
+                                        borderRadius: theme.styleMixins.customRadius.r8,
                                     },
-                                }, rightElement: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handleClickMaxAmount, sx: {
+                                }, rightElement: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handleClickMaxAmount, sx: {
                                             background: theme.palette.background.tertiary,
-                                            color: theme.palette.text.black,
+                                            color: theme.palette.text.primary,
                                             fontSize: theme.typography.fontSize11,
                                             fontWeight: theme.typography.fontWeight700,
-                                            borderRadius: theme.mixins.customRadius.r4,
-                                            paddingX: theme.mixins.customPadding.p16,
-                                            paddingY: theme.mixins.customPadding.p8,
+                                            borderRadius: theme.styleMixins.customRadius.r4,
+                                            paddingX: theme.styleMixins.customPadding.p16,
+                                            paddingY: theme.styleMixins.customPadding.p8,
                                             border: "0px solid",
                                             cursor: "pointer",
                                         }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                 fontSize: theme.typography.fontSize12,
                                                 color: theme.palette.text.primary,
                                                 fontWeight: theme.typography.fontWeight500,
-                                            }, children: "Max" }) }) }) }) }), !!amountErrorMessage && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: [amountErrorMessage, " ", !!amountError && (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amountError, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) })] }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                            }, children: "Max" }) }) }) }) }), !!amountErrorMessage && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationError), children: [amountErrorMessage, " ", !!amountError && (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amountError, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) })] }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                 fontSize: theme.typography.fontSize14,
-                                color: theme.palette.text.black,
+                                color: theme.palette.text.primary,
                                 fontWeight: theme.typography.fontWeight700,
                             }, children: "Message" }), (0, jsx_runtime_1.jsx)(Input_1.default, { inputRest: {
                                 placeholder: "Enter comment if needed",