tek-wallet 0.0.763 → 0.0.765

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

@@ -15,16 +15,19 @@ var material_1 = require("@mui/material");
 var ThemeProvider_1 = require("../../../providers/ThemeProvider");
 var react_2 = require("swiper/react");
 var ActivitiesTypeSlice_1 = __importDefault(require("../../ui/ActivitiesTypeSlice"));
+var TekWalletProvider_1 = require("../../../providers/TekWalletProvider");
 var ActivityView = function (props) {
     var sx = props.sx;
     var theme = (0, ThemeProvider_1.useTheme)();
+    var options = (0, TekWalletProvider_1.useWalletConfig)().options;
+    var hideBackButtons = (options || {}).hideBackButtons;
     var swiperRef = (0, react_1.useRef)(null);
     var activityTypes = (0, useActivities_1.default)().activityTypes;
     var _a = (0, react_1.useState)(0), activeTab = _a[0], setActiveTab = _a[1];
     var handleSlideChange = function (index) {
         setActiveTab(index);
     };
-    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Activities" }), sx: sx, children: (0, jsx_runtime_1.jsx)(SwiperControlled_1.default, { ref: swiperRef, 
+    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Activities", hideBack: !!(hideBackButtons === null || hideBackButtons === void 0 ? void 0 : hideBackButtons.activity) }), sx: sx, children: (0, jsx_runtime_1.jsx)(SwiperControlled_1.default, { ref: swiperRef, 
             // tabParamName="activity-tab"
             swiperProps: {
                 slidesPerView: 1,
@@ -56,7 +59,7 @@ var ActivityView = function (props) {
             }, children: activityTypes === null || activityTypes === void 0 ? void 0 : activityTypes.map(function (type, index) {
                 return ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: {
                         position: "relative",
-                    }, children: (0, jsx_runtime_1.jsx)(ActivitiesTypeSlice_1.default, { type: type, isActive: activeTab === index }) }, index));
+                    }, children: (index === activeTab || index === activeTab - 1 || index === activeTab + 1) && ((0, jsx_runtime_1.jsx)(ActivitiesTypeSlice_1.default, { type: type, isActive: activeTab === index })) }, index));
             }) }) }));
 };
 exports.ActivityView = ActivityView;

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

@@ -82,6 +82,7 @@ var xhub_keyboard_1 = require("xhub-keyboard");
 var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"));
 var BasicAmountGroup_1 = __importDefault(require("../../ui/BasicAmountGroup"));
 var AssetViewHeader_1 = __importDefault(require("../../ui/AssetViewHeader"));
+var ScanQRToSend_1 = __importDefault(require("../../ui/ScanQRToSend"));
 var AssetView = function (props) {
     var sx = props.sx, rest = __rest(props, ["sx"]);
     var _a = (0, useWalletData_1.default)(), isInitPasscode = _a.isInitPasscode, masterWallet = _a.masterWallet;
@@ -127,12 +128,21 @@ var AssetView = function (props) {
                                                     fontWeight: theme.typography.fontWeight400,
                                                     color: theme.palette.text.black,
                                                     cursor: "pointer",
-                                                }, children: "View all" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_ARROW_RIGHT", width: 18, height: 18 })] })] }), (0, jsx_runtime_1.jsx)(ActivitiesTypeSlice_1.default, { type: const_1.ACTIVITIES_TYPE_ALL, limitItems: 4, isActive: true, sx: {
-                                    paddingBottom: 0,
-                                    paddingTop: 0,
-                                    paddingLeft: 0,
-                                    paddingRight: 0,
-                                } })] })), (0, jsx_runtime_1.jsx)(TokensBoard_1.default, {})] })))] }));
+                                                }, children: "View all" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_ARROW_RIGHT", width: 18, height: 18 })] })] }), (0, jsx_runtime_1.jsx)(ScanQRToSend_1.default, { children: "Scan QR Code" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                    position: "relative",
+                                    left: "-".concat(theme.mixins.customPadding.p16),
+                                    width: "calc(100% + ".concat(theme.mixins.customPadding.p16, " * 2)"),
+                                }, children: (0, jsx_runtime_1.jsx)(ActivitiesTypeSlice_1.default, { type: const_1.ACTIVITIES_TYPE_ALL, limitItems: 4, isActive: true, sx: {
+                                        paddingBottom: 0,
+                                        paddingTop: 0,
+                                        paddingLeft: 0,
+                                        paddingRight: 0,
+                                    }, smartListProps: {
+                                        bodySx: {
+                                            pt: 0,
+                                            pb: 0,
+                                        },
+                                    } }) })] })), (0, jsx_runtime_1.jsx)(TokensBoard_1.default, {})] })))] }));
 };
 exports.AssetView = AssetView;
 exports.default = exports.AssetView;

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

@@ -1,7 +1,37 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var Button_1 = __importDefault(require("../../ui/Button"));
 function NotFoundView() {
-    return (0, jsx_runtime_1.jsx)("div", { className: "text-red-500", children: "Not Found" });
+    var handleGoBack = function () {
+        window.history.back();
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+            minHeight: "100dvh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "grey.50",
+            p: 3,
+        }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                textAlign: "center",
+                maxWidth: 400,
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h1", sx: {
+                        fontSize: "6rem",
+                        fontWeight: "bold",
+                        color: "grey.400",
+                        mb: 2,
+                    }, children: "404" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", sx: {
+                        fontWeight: "semibold",
+                        color: "grey.700",
+                        mb: 1,
+                    }, children: "Page Not Found" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", sx: {
+                        color: "grey.600",
+                        mb: 3,
+                    }, children: "Sorry, the page you are looking for does not exist." }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { fullWidth: true, onClick: handleGoBack, children: "Go Back" })] }) }));
 }
 exports.default = NotFoundView;

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

@@ -107,6 +107,8 @@ var useUniqueId_1 = require("../../../../hooks/useUniqueId");
 var DrawerComponent_1 = __importDefault(require("../../../ui/DrawerComponent"));
 var ModalLayout_1 = __importDefault(require("../../../ui/ModalLayout"));
 var SelectNetwork_1 = __importDefault(require("./SelectNetwork"));
+var ChildPageLayout_1 = __importDefault(require("../../../layouts/ChildPageLayout"));
+var navigation_1 = require("next/navigation");
 var validateAddressDebounce = (0, lodash_1.debounce)(function (callback) {
     callback();
 }, 500, { leading: true, trailing: true });
@@ -116,6 +118,8 @@ var getEstimateFeeDebounce = (0, lodash_1.debounce)(function (callback) {
 function Form(props) {
     var _this = this;
     var theme = (0, providers_1.useTheme)();
+    var searchParams = (0, navigation_1.useSearchParams)();
+    var address = searchParams.get("address") || "";
     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];
@@ -123,14 +127,15 @@ function Form(props) {
     var _d = (0, react_1.useState)(), amountErrorMessage = _d[0], setAmountErrorMessage = _d[1];
     var _e = (0, react_1.useState)(), amountError = _e[0], setAmountError = _e[1];
     var _f = (0, react_1.useState)(undefined), comment = _f[0], setComment = _f[1];
-    var _g = (0, react_1.useState)(false), isValidatingAddress = _g[0], setIsValidatingAddress = _g[1];
+    var _g = (0, react_1.useState)(), memoError = _g[0], setMemoError = _g[1];
+    var _h = (0, react_1.useState)(false), isValidatingAddress = _h[0], setIsValidatingAddress = _h[1];
     var scannerAddressQrCodeRef = (0, react_1.useRef)(null);
-    var _h = (0, react_1.useState)(false), isEstimatingFee = _h[0], setIsLoadingEstimateFee = _h[1];
-    var _j = (0, react_1.useState)(), estimateFee = _j[0], setEstimateFee = _j[1];
-    var _k = (0, react_1.useState)(false), isEnoughBalanceToPayFee = _k[0], setIsEnoughBalanceToPayFee = _k[1];
-    var _l = (0, react_1.useState)(false), isKeyboardOpen = _l[0], setIsKeyboardOpen = _l[1];
-    var _m = (0, react_1.useState)(), selectedNetwork = _m[0], setSelectedNetwork = _m[1];
-    var _o = (0, react_1.useState)([]), networks = _o[0], setNetworks = _o[1];
+    var _j = (0, react_1.useState)(false), isEstimatingFee = _j[0], setIsLoadingEstimateFee = _j[1];
+    var _k = (0, react_1.useState)(), estimateFee = _k[0], setEstimateFee = _k[1];
+    var _l = (0, react_1.useState)(false), isEnoughBalanceToPayFee = _l[0], setIsEnoughBalanceToPayFee = _l[1];
+    var _m = (0, react_1.useState)(false), isKeyboardOpen = _m[0], setIsKeyboardOpen = _m[1];
+    var _o = (0, react_1.useState)(), selectedNetwork = _o[0], setSelectedNetwork = _o[1];
+    var _p = (0, react_1.useState)([]), networks = _p[0], setNetworks = _p[1];
     var selectNetworkDrawerRef = (0, react_1.useRef)(null);
     var minValue = (0, react_1.useMemo)(function () { return +((selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.min_value) || 0); }, [selectedNetwork]);
     var maxValue = (0, react_1.useMemo)(function () { return +((selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.max_value) || Infinity); }, [selectedNetwork]);
@@ -329,9 +334,21 @@ function Form(props) {
             target: { value: amount || "" },
         });
     };
-    var handleChangeComment = function (e) {
+    var handleChangeComment = (0, react_1.useCallback)(function (e) {
         setComment(e.target.value);
-    };
+        var networkPattern = selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.memo_regex;
+        if (!networkPattern) {
+            setMemoError(undefined);
+            return;
+        }
+        var pattern = new RegExp(networkPattern);
+        if (!pattern.test(e.target.value)) {
+            setMemoError("Invalid memo");
+        }
+        else {
+            setMemoError(undefined);
+        }
+    }, [selectedNetwork]);
     var handleContinue = function () {
         var _a;
         if (!selectedNetwork)
@@ -368,6 +385,13 @@ function Form(props) {
         setSelectedNetwork(network);
         closeSelectNetwork();
     };
+    (0, react_1.useEffect)(function () {
+        if (address) {
+            handleChangeRecipientAddress({
+                target: { value: address },
+            });
+        }
+    }, [address]);
     (0, react_1.useEffect)(function () {
         validateAmount((amount === null || amount === void 0 ? void 0 : amount.toString()) || "");
     }, [amount, validateAmount]);
@@ -375,76 +399,77 @@ function Form(props) {
             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
-                ? {
-                    paddingBottom: theme.mixins.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: {
-                                fontSize: theme.typography.fontSize14,
-                                color: theme.palette.text.black,
-                                fontWeight: theme.typography.fontWeight700,
-                            }, children: "Wallet address" }), (0, jsx_runtime_1.jsx)(Input_1.default, { sx: {
-                                paddingX: theme.mixins.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 }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8, opacity: allowSelectNetwork ? 1 : 0.5, pointerEvents: allowSelectNetwork ? "auto" : "none" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                fontSize: theme.typography.fontSize14,
-                                color: theme.palette.text.black,
-                                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,
+        }, 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.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
+                    ? {
+                        paddingBottom: theme.mixins.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: {
+                                    fontSize: theme.typography.fontSize14,
+                                    color: theme.palette.text.black,
+                                    fontWeight: theme.typography.fontWeight700,
+                                }, children: "Wallet address" }), (0, jsx_runtime_1.jsx)(Input_1.default, { sx: {
+                                    paddingX: theme.mixins.customPadding.p16,
                                 }, inputRest: {
-                                    placeholder: "Select a network",
-                                    value: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.name) || "",
+                                    placeholder: "Enter recipient address",
+                                    value: recipientAddress,
                                     onChange: handleChangeRecipientAddress,
-                                    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: {
-                                        fontSize: theme.typography.fontSize14,
-                                        color: theme.palette.text.black,
-                                        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: {
-                                    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,
-                                    },
-                                }, 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,
+                                    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 }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8, opacity: allowSelectNetwork ? 1 : 0.5, pointerEvents: allowSelectNetwork ? "auto" : "none" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    fontSize: theme.typography.fontSize14,
+                                    color: theme.palette.text.black,
+                                    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,
+                                    }, inputRest: {
+                                        placeholder: "Select a network",
+                                        value: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.name) || "",
+                                        onChange: handleChangeRecipientAddress,
+                                        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: {
+                                            fontSize: theme.typography.fontSize14,
                                             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: {
-                                fontSize: theme.typography.fontSize14,
-                                color: theme.palette.text.black,
-                                fontWeight: theme.typography.fontWeight700,
-                            }, children: "Comment" }), (0, jsx_runtime_1.jsx)(Input_1.default, { inputRest: {
-                                placeholder: "Enter comment if needed",
-                                value: comment,
-                                onChange: handleChangeComment,
-                            } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationDescription), children: "Enter comment 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 ||
-                        !!amountError ||
-                        !isEnoughBalanceToPayFee
-                        ? Button_1.BUTTON_STATUS.DISABLED
-                        : Button_1.BUTTON_STATUS.ENABLED, sx: { width: "100%", marginTop: "auto" }, children: "Continue" })] }) }));
+                                        }, 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: {
+                                        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,
+                                        },
+                                    }, 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: {
+                                    fontSize: theme.typography.fontSize14,
+                                    color: theme.palette.text.black,
+                                    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: {
+                                            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 ||
+                            !selectedNetwork ||
+                            !amount ||
+                            !!recipientAddressError ||
+                            !!amountError ||
+                            !!memoError ||
+                            !isEnoughBalanceToPayFee
+                            ? Button_1.BUTTON_STATUS.DISABLED
+                            : Button_1.BUTTON_STATUS.ENABLED, sx: { width: "100%", marginTop: "auto" }, children: "Continue" })] }) }) }));
 }

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

@@ -126,13 +126,7 @@ var SendExternalView = (0, react_1.forwardRef)(function (props, ref) {
                 height: "100%",
             }, swiperStyle: {
                 height: "100%",
-            }, children: [(0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: { minHeight: "100%" }, 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), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: { minHeight: "100%" }, children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: {
-                            height: "100%",
-                            paddingLeft: "0px",
-                            paddingRight: "0px",
-                            paddingTop: "0px",
-                            paddingBottom: "0px",
-                        }, children: (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.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: {
                             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/Form.js

@@ -104,6 +104,7 @@ 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 ChildPageLayout_1 = __importDefault(require("../../../layouts/ChildPageLayout"));
 var validateAddressDebounce = (0, lodash_1.debounce)(function (callback) {
     callback();
 }, 500, { leading: true, trailing: true });
@@ -317,65 +318,65 @@ function Form(props) {
             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
-                ? {
-                    paddingBottom: theme.mixins.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: {
-                                fontSize: theme.typography.fontSize14,
-                                color: theme.palette.text.black,
-                                fontWeight: theme.typography.fontWeight700,
-                            }, children: "Wallet address" }), (0, jsx_runtime_1.jsx)(Input_1.default, { sx: {
-                                paddingX: theme.mixins.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: {
-                                        fontSize: theme.typography.fontSize14,
-                                        color: theme.palette.text.black,
-                                        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: {
-                                        display: "inline-flex",
-                                        alignItems: "center",
-                                        gap: theme.mixins.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,
-                                    },
-                                }, 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,
+        }, 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.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
+                    ? {
+                        paddingBottom: theme.mixins.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: {
+                                    fontSize: theme.typography.fontSize14,
+                                    color: theme.palette.text.black,
+                                    fontWeight: theme.typography.fontWeight700,
+                                }, children: "Wallet address" }), (0, jsx_runtime_1.jsx)(Input_1.default, { sx: {
+                                    paddingX: theme.mixins.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: {
+                                            fontSize: theme.typography.fontSize14,
                                             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: {
-                                fontSize: theme.typography.fontSize14,
-                                color: theme.palette.text.black,
-                                fontWeight: theme.typography.fontWeight700,
-                            }, children: "Message" }), (0, jsx_runtime_1.jsx)(Input_1.default, { inputRest: {
-                                placeholder: "Enter comment if needed",
-                                value: comment,
-                                onChange: handleChangeComment,
-                            } })] }), (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 ||
-                        !amount ||
-                        !!recipientAddressError ||
-                        !!amountError ||
-                        !isEnoughBalanceToPayFee
-                        ? Button_1.BUTTON_STATUS.DISABLED
-                        : Button_1.BUTTON_STATUS.ENABLED, sx: { width: "100%", marginTop: "auto" }, children: "Continue" })] }) }));
+                                        }, 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: {
+                                            display: "inline-flex",
+                                            alignItems: "center",
+                                            gap: theme.mixins.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,
+                                        },
+                                    }, 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: {
+                                    fontSize: theme.typography.fontSize14,
+                                    color: theme.palette.text.black,
+                                    fontWeight: theme.typography.fontWeight700,
+                                }, children: "Message" }), (0, jsx_runtime_1.jsx)(Input_1.default, { inputRest: {
+                                    placeholder: "Enter comment if needed",
+                                    value: comment,
+                                    onChange: handleChangeComment,
+                                } })] }), (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 ||
+                            !amount ||
+                            !!recipientAddressError ||
+                            !!amountError ||
+                            !isEnoughBalanceToPayFee
+                            ? Button_1.BUTTON_STATUS.DISABLED
+                            : Button_1.BUTTON_STATUS.ENABLED, sx: { width: "100%", marginTop: "auto" }, children: "Continue" })] }) }) }));
 }

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

@@ -137,13 +137,13 @@ exports.SendInternalView = (0, react_1.forwardRef)(function (props, ref) {
                 height: "100%",
             }, swiperStyle: {
                 height: "100%",
-            }, children: [(0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: { minHeight: "100%" }, children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { children: (0, jsx_runtime_1.jsx)(SelectToken_1.default, { tokens: withdrawTokens, selectedToken: selectedToken, onChangeToken: handleSelectToken }) }) }, TransferStep.SELECT_TOKEN), (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 }) }) }) }, TransferStep.SELECT_TOKEN), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: { minHeight: "100%" }, children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: {
                             height: "100%",
                             paddingLeft: "0px",
                             paddingRight: "0px",
                             paddingTop: "0px",
                             paddingBottom: "0px",
-                        }, children: (0, jsx_runtime_1.jsx)(Form_1.default, { sx: __assign({}, theme.mixins.pagePadding), selectedToken: selectedToken, onContinue: gotoConfirmStep }, clearFormKey) }) }, TransferStep.FORM), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: { minHeight: "100%" }, children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: {
+                        }, children: selectedToken && ((0, jsx_runtime_1.jsx)(Form_1.default, { sx: __assign({}, theme.mixins.pagePadding), selectedToken: selectedToken, onContinue: gotoConfirmStep }, clearFormKey)) }) }, TransferStep.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,