tek-wallet 0.0.763 → 0.0.765

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

@@ -87,7 +87,6 @@ var Share_1 = __importDefault(require("../Share"));
 var NetworkSelection_1 = __importDefault(require("../NetworkSelection"));
 var TokenSelection_1 = __importDefault(require("../TokenSelection"));
 var useReceiveData_1 = __importDefault(require("../../../hooks/useReceiveData"));
-var RequireConnect_1 = __importDefault(require("../RequireConnect"));
 var WaitingData_1 = __importDefault(require("../WaitingData"));
 var EmptyData_1 = __importDefault(require("../EmptyData"));
 var Formatter_1 = __importDefault(require("../Formatter"));
@@ -107,6 +106,7 @@ var lodash_1 = require("lodash");
 var HelpButton_1 = __importDefault(require("./components/HelpButton"));
 var SortGroup_1 = __importStar(require("./components/SortGroup"));
 var SortTool_1 = require("./components/SortTool");
+var DefaultPageLayout_1 = __importDefault(require("../../layouts/DefaultPageLayout"));
 var ReceiveMethods;
 (function (ReceiveMethods) {
     ReceiveMethods["RECEIVE_INTERNAL"] = "Receive internally";
@@ -429,113 +429,132 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (_a, ref) {
     var handleClearSearch = function () {
         setSearchValue("");
     };
-    return ((0, jsx_runtime_1.jsx)(RequireConnect_1.default, { sx: props.sx, children: (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, onOpen: props.onOpen, onClose: handleOnClose, sx: props.sx, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: RECEIVE_STEP_NAME[ReceiveStep.SELECT_METHOD], onClose: close, children: (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: stepDrawerRef, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, sx: {
-                        width: "100%",
-                    }, trigger: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content", width: "100%" }), children: [functionsList.includes(ReceiveMethods.RECEIVE_INTERNAL) && ((0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Top up via internal transfer", description: "Receive crypto from other Ting users", icon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 24, height: 24 }, children: SvgPath_1.IC_RECEIVE_INTERNAL }), onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_INTERNAL); }, recommended: true })), functionsList.includes(ReceiveMethods.RECEIVE_EXTERNAL) && ((0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Top up via blockchain", description: "Deposit using a Web3 or an Exchange wallet", icon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 24, height: 24 }, children: SvgPath_1.IC_RECEIVE_EXTERNAL }), onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_EXTERNAL); }, recommended: true })), functionsList.includes(ReceiveMethods.RECEIVE_FIAT) && ((0, jsx_runtime_1.jsx)(FiatDeposit_1.default, { children: (0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Fiat-Gateway", description: "Experimental deposit via bank transfer", icon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 24, height: 24 }, children: SvgPath_1.IC_RECEIVE_EXTERNAL }), recommended: false, onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_FIAT); } }) }))] }), children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: {
-                            position: "relative",
-                            sx: "100dvh",
-                        }, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: RECEIVE_STEP_NAME[Math.max(currentStep, ReceiveStep.SELECT_TOKEN)], overrideBack: handleBack, children: false && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, marginLeft: "auto" }), children: [(0, jsx_runtime_1.jsx)(HelpButton_1.default, {}), !!handleGotoHistory && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", sx: {
-                                                    height: "1rem",
-                                                    width: "1px",
-                                                    backgroundColor: theme.palette.border.accent3,
-                                                } }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20, display: "block" }, onClick: handleGotoHistory, children: SvgPath_1.IC_HISTORY })] }))] })) }), footer: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                                maxHeight: currentStep === ReceiveStep.SHOW_QR_CODE ? "120px" : 0,
-                                overflow: "hidden",
-                                transition: currentStep === ReceiveStep.SHOW_QR_CODE
-                                    ? "max-height 0.3s linear 0.3s"
-                                    : "max-height 0s linear",
-                            }, children: (0, jsx_runtime_1.jsx)(Share_1.default, { elementId: "share-receive-info", onProgress: handleShareProgress, onFinish: handleShareFinish, imageName: sharedImageName, children: (0, jsx_runtime_1.jsx)(BottomActionLayout_1.default, { children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { fullWidth: true, status: isSharing ? Button_1.BUTTON_STATUS.LOADING : undefined, children: "Share" }) }) }) }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { padding: theme.mixins.pagePadding }, children: [currentStep === ReceiveStep.SELECT_TOKEN && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                                        position: "sticky",
-                                        backgroundColor: theme.palette.background.white,
-                                        zIndex: 100,
-                                        top: "0px",
-                                        pb: theme.mixins.customPadding.p12,
-                                    }, children: [!isEmptyDepositTokens && ((0, jsx_runtime_1.jsx)(material_1.InputBase, { onChange: handleSearch, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_SEARCH }) }), value: searchValue, placeholder: "Search", sx: {
-                                                borderRadius: theme.mixins.customRadius.r12,
-                                                border: "1px solid",
-                                                borderColor: theme.palette.border.accent3,
-                                                background: theme.palette.background.white,
-                                                color: theme.palette.text.black,
-                                                py: theme.mixins.customPadding.p6,
-                                                px: theme.mixins.customPadding.p12,
-                                                fontSize: theme.typography.fontSize16,
-                                                width: "100%",
-                                                lineHeight: "100%",
-                                                "input::placeholder": {
-                                                    fontSize: theme.typography.fontSize12,
-                                                    pl: theme.mixins.customPadding.p4,
-                                                    fontWeight: theme.typography.fontWeight500,
-                                                    color: theme.palette.text.black,
-                                                    lineHeight: "100%",
-                                                },
-                                            }, endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: {
-                                                    visibility: isSearching ? "visible" : "hidden",
-                                                }, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
-                                                        width: 20,
-                                                        height: 20,
-                                                        p: theme.mixins.customPadding.p4,
-                                                        cursor: "pointer",
-                                                    }, onClick: handleClearSearch, children: SvgPath_1.IC_CLOSE }) }) })), (tokenRender === null || tokenRender === void 0 ? void 0 : tokenRender.length) > 0 && (0, jsx_runtime_1.jsx)(SortGroup_1.default, { onChange: handleSort })] })), (0, jsx_runtime_1.jsxs)(SwiperControlled_1.default, { ref: stepSwiperRef, swiperProps: {
-                                        spaceBetween: 32,
-                                    }, disableSwipe: true, initialActiveTab: currentStep - 1, children: [(0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content" }), children: [isLoadingDepositTokens && (0, jsx_runtime_1.jsx)(WaitingData_1.default, {}), isEmptyDepositTokens && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { py: "4rem" }, title: "No deposit tokens", description: "No deposit tokens" })), isSearching && isEmptySearch && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { py: "4rem" }, title: "No search results", description: "Let's try again with a different search" })), tokenRender === null || tokenRender === void 0 ? void 0 : tokenRender.map(function (item, index) {
-                                                        var stringifiedTokenData = JSON.stringify(item);
-                                                        if (!item)
-                                                            return null;
-                                                        return ((0, jsx_runtime_1.jsx)(TokenSelection_1.default, { onClick: handleSelectToken, tokenData: stringifiedTokenData, active: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.id) === item.id }, "token_".concat(item.id, "_").concat(index)));
-                                                    })] }) }, "slide_step_".concat(ReceiveStep.SELECT_TOKEN)), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, display: isExternal ? "flex" : "none" }), children: [(networks === null || networks === void 0 ? void 0 : networks.length) > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.paper), { borderRadius: theme.mixins.customRadius.r16, background: theme.palette.background.accent3, gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.fieldTitle), { fontWeight: theme.typography.fontWeight700, color: theme.palette.text.darkContrast }), children: "Choosing a network? Let us help!" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.activityDescription), { color: theme.palette.text.accent, fontWeight: theme.typography.fontWeight500 }), children: "Select the network used by your sending platform." }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: 0.125, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: chooseNetworkSupportDrawerRef, sx: {
-                                                                            mt: 0.25,
-                                                                        }, trigger: (0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: {
-                                                                                color: theme.palette.primary.main,
-                                                                                fontWeight: theme.typography.fontWeight600,
-                                                                                fontSize: theme.typography.fontSize10,
-                                                                                lineHeight: "100%",
-                                                                            }, children: "Learn more" }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "How to choose my top up network", onClose: closeChooseNetworkSupport, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.mixins.listDescription), { color: theme.palette.text.blackContrast }), children: "Lorem ipsum dolor sit amet consectetur. Vitae faucibus ornare lectus arcu sit sed et. Eu integer pharetra posuere lobortis varius dapibus risus. Pellentesque quis id diam ante lectus ornare tristique." }), (0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.mixins.listDescription), { color: theme.palette.text.blackContrast }), children: "Eget viverra quis facilisis velit mattis. Risus sed egestas vitae ridiculus odio sit eu adipiscing. Scelerisque nunc nec nisl mauris venenatis viverra est dictumst adipiscing." }), (0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.mixins.listDescription), { color: theme.palette.text.blackContrast }), children: "Id pulvinar aliquam quam ut sed ut pharetra turpis ipsum. Condimentum eget a interdum neque sagittis lobortis proin nisi. Magna id massa risus elit at." })] }) }) }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 6, height: 6, mt: "4px" }, children: (0, jsx_runtime_1.jsx)("svg", { width: "4", height: "6", viewBox: "0 0 4 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.7 3L0.7 6L0 5.3L2.3 3L0 0.7L0.7 0L3.7 3Z", fill: "#044C2F" }) }) })] })] })), networks === null || networks === void 0 ? void 0 : networks.map(function (item, index) {
-                                                        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)));
-                                                    })] }) }, "slide_step_".concat(ReceiveStep.SELECT_NETWORK)), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                                                    display: "flex",
-                                                    flexDirection: "column",
-                                                    gap: theme.mixins.gaps.g16,
-                                                }, children: [(0, jsx_runtime_1.jsx)("div", { id: "share-receive-info", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.mixins.column), { gap: theme.mixins.gaps.g12, backgroundColor: theme.palette.background.tertiary, borderRadius: theme.mixins.customRadius.r16, padding: theme.mixins.customPadding.p16, paddingTop: "5rem", alignItems: "flex-start", position: "relative", marginTop: "4.6875rem" }), children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                                                                        color: theme.palette.border.accent,
-                                                                        width: "100%",
-                                                                    } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), { top: 0, width: "fit-content", height: "fit-content", borderRadius: theme.mixins.customRadius.r12, padding: theme.mixins.customPadding.p8 }), children: [(0, jsx_runtime_1.jsx)(QRCode_1.default, { value: qrCodeValue, logo: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.link, bgColor: "transparent", size: 150 }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), { padding: theme.mixins.customPadding.p4, borderRadius: 9999, backgroundColor: theme.palette.background.white }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { crossOrigin: "anonymous", width: 24, height: 24, src: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.link, sx: {
-                                                                                    borderRadius: 9999,
-                                                                                } }) })] }), isExternal && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: "Network" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.row), onClick: handleBack, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { component: "button", sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4, cursor: "pointer", transition: "transform 0.3s ease-in-out", "&:active": {
-                                                                                            transform: "translateX(0.5rem)",
-                                                                                        } }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { width: 24, height: 24, sx: {
-                                                                                                borderRadius: "9999px",
-                                                                                            }, src: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.link }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.name })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
-                                                                                        width: 12,
-                                                                                        height: 12,
-                                                                                        ml: "auto",
-                                                                                        transform: "rotate(90deg)",
-                                                                                    }, children: SvgPath_1.IC_CHEVRON_RIGHT })] })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: isInternal ? "Internal address" : "Address" }), isInternal && ((0, jsx_runtime_1.jsx)(CustomTooltip_1.default, { trigger: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 16, height: 16, mb: "3px" }, children: SvgPath_1.IC_TOOLTIP }), children: (0, jsx_runtime_1.jsx)(DialogContentLayout_1.default, { content: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.warning), children: ["This address is used to receive token by internal transfer. You can not use it for blockchain transaction. If you want to receive token by blockchain, please select the ", (0, jsx_runtime_1.jsx)("strong", { children: "Receive External" }), " method instead."] }) }) }))] }), (0, jsx_runtime_1.jsxs)(CopyTextComponent_1.default, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between" }), value: receiveAddress || "", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { wordBreak: "break-all", maxWidth: "85%" }), children: receiveAddress }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_COPY })] })] }), (!!userInfo || !!amount || isExternal || !!warningMessage) && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                                                                        color: theme.palette.border.accent,
-                                                                        width: "100%",
-                                                                    } })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [!!userInfo && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { sx: {
-                                                                                alignItems: "start",
-                                                                            }, field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Received user" }), value: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { width: 16, height: 16, src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, sx: {
-                                                                                            borderRadius: "9999px",
-                                                                                        } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g2 }), children: (0, jsx_runtime_1.jsxs)(Text_1.default, { children: [userInfo === null || userInfo === void 0 ? void 0 : userInfo.nickname, " "] }) })] }), valueDescription: (0, jsx_runtime_1.jsx)(Text_1.default, { children: userInfo === null || userInfo === void 0 ? void 0 : userInfo.username }) })), !!amount && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Amount" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize13 }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }) }) })), isExternal && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Top Up Arrival Time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize13 }), children: "~ 7 Minutes" }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Withdrawal Arrival Time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize13 }), children: "~ 20 Minutes" }) })] }))] }), !!warningMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                                                                                color: theme.palette.border.accent,
-                                                                                width: "100%",
-                                                                                mt: theme.mixins.customMargin.m12,
-                                                                            } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: warningMessage })] }))] }) }), isInternal && ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: amountDrawerRef, sx: {
-                                                            width: "100%",
-                                                            display: "flex",
-                                                            justifyContent: "center",
-                                                        }, onOpen: handleAmountModalOpen, onClose: onCloseAmountModal, trigger: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsxs)(Button_1.default.Text, { sx: {
-                                                                    fontSize: theme.typography.fontSize14,
-                                                                    textTransform: "none",
+    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, onOpen: props.onOpen, onClose: handleOnClose, sx: props.sx, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: RECEIVE_STEP_NAME[ReceiveStep.SELECT_METHOD], onClose: close, children: (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: stepDrawerRef, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, sx: {
+                    width: "100%",
+                }, trigger: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content", width: "100%" }), children: [functionsList.includes(ReceiveMethods.RECEIVE_INTERNAL) && ((0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Top up via internal transfer", description: "Receive crypto from other Ting users", icon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 24, height: 24 }, children: SvgPath_1.IC_RECEIVE_INTERNAL }), onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_INTERNAL); }, recommended: true })), functionsList.includes(ReceiveMethods.RECEIVE_EXTERNAL) && ((0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Top up via blockchain", description: "Deposit using a Web3 or an Exchange wallet", icon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 24, height: 24 }, children: SvgPath_1.IC_RECEIVE_EXTERNAL }), onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_EXTERNAL); }, recommended: true })), functionsList.includes(ReceiveMethods.RECEIVE_FIAT) && ((0, jsx_runtime_1.jsx)(FiatDeposit_1.default, { children: (0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Fiat-Gateway", description: "Experimental deposit via bank transfer", icon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 24, height: 24 }, children: SvgPath_1.IC_RECEIVE_EXTERNAL }), recommended: false, onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_FIAT); } }) }))] }), children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: {
+                        position: "relative",
+                        sx: "100dvh",
+                    }, sxs: {
+                        body: {
+                            height: "100%",
+                            overflowY: "hidden",
+                        },
+                    }, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: RECEIVE_STEP_NAME[Math.max(currentStep, ReceiveStep.SELECT_TOKEN)], overrideBack: handleBack, children: false && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, marginLeft: "auto" }), children: [(0, jsx_runtime_1.jsx)(HelpButton_1.default, {}), !!handleGotoHistory && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", sx: {
+                                                height: "1rem",
+                                                width: "1px",
+                                                backgroundColor: theme.palette.border.accent3,
+                                            } }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20, display: "block" }, onClick: handleGotoHistory, children: SvgPath_1.IC_HISTORY })] }))] })) }), footer: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                            maxHeight: currentStep === ReceiveStep.SHOW_QR_CODE ? "120px" : 0,
+                            overflow: "hidden",
+                            transition: currentStep === ReceiveStep.SHOW_QR_CODE
+                                ? "max-height 0.3s linear 0.3s"
+                                : "max-height 0s linear",
+                        }, children: (0, jsx_runtime_1.jsx)(Share_1.default, { elementId: "share-receive-info", onProgress: handleShareProgress, onFinish: handleShareFinish, imageName: sharedImageName, children: (0, jsx_runtime_1.jsx)(BottomActionLayout_1.default, { children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { fullWidth: true, status: isSharing ? Button_1.BUTTON_STATUS.LOADING : undefined, children: "Share" }) }) }) }), children: (0, jsx_runtime_1.jsxs)(SwiperControlled_1.default, { ref: stepSwiperRef, swiperProps: {
+                            spaceBetween: 32,
+                        }, disableSwipe: true, initialActiveTab: currentStep - 1, sx: {
+                            height: "100%",
+                        }, swiperStyle: {
+                            height: "100%",
+                            overflowY: "hidden",
+                        }, children: [(0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: {
+                                    height: "100%",
+                                    overflow: "hidden",
+                                }, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content" }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                                        position: "sticky",
+                                                        backgroundColor: theme.palette.background.white,
+                                                        zIndex: 100,
+                                                        top: "0px",
+                                                        pb: theme.mixins.customPadding.p12,
+                                                    }, children: [!isEmptyDepositTokens && ((0, jsx_runtime_1.jsx)(material_1.InputBase, { onChange: handleSearch, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_SEARCH }) }), value: searchValue, placeholder: "Search", sx: {
+                                                                borderRadius: theme.mixins.customRadius.r12,
+                                                                border: "1px solid",
+                                                                borderColor: theme.palette.border.accent3,
+                                                                background: theme.palette.background.white,
+                                                                color: theme.palette.text.black,
+                                                                py: theme.mixins.customPadding.p6,
+                                                                px: theme.mixins.customPadding.p12,
+                                                                fontSize: theme.typography.fontSize16,
+                                                                width: "100%",
+                                                                lineHeight: "100%",
+                                                                "input::placeholder": {
+                                                                    fontSize: theme.typography.fontSize12,
+                                                                    pl: theme.mixins.customPadding.p4,
                                                                     fontWeight: theme.typography.fontWeight500,
-                                                                    display: "flex",
-                                                                    alignItems: "center",
-                                                                    gap: theme.mixins.gaps.g4,
-                                                                }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: amount ? SvgPath_1.IC_EDIT : SvgPath_1.IC_SET }), amount ? "Edit" : "Set", " amount"] }) }), children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { id: keyboardId, onChange: handleChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), keyboardId: "amount-keyboard-id", children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { onClose: closeAmountModal, title: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.fieldTitle), children: [amount ? "Edit" : "Set", " ", selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name, " amount"] }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { ref: amountInputRef, elementsAcceptIds: ["amount-keyboard-id"], value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, rightElement: (0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { onClick: handleClickMaxAmount, sx: __assign({}, theme.mixins.smallButton), children: "Max" }) }) }), amountError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: amountError })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { width: "100%", mt: theme.mixins.customMargin.m8, gap: theme.mixins.gaps.g12 }), children: [!!amount && ((0, jsx_runtime_1.jsx)(Button_1.default.Text, { onClick: handleUnset, children: "Unset" })), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { flex: 1 }, onClick: handleContinue, status: !!amountError || !inputAmount
-                                                                                        ? Button_1.BUTTON_STATUS.DISABLED
-                                                                                        : Button_1.BUTTON_STATUS.ENABLED, children: "Continue" })] })] }) }) }) }))] }) }, "slide_step_".concat(ReceiveStep.SHOW_QR_CODE))] })] }) }) }) }) }) }));
+                                                                    color: theme.palette.text.black,
+                                                                    lineHeight: "100%",
+                                                                },
+                                                            }, endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: {
+                                                                    visibility: isSearching ? "visible" : "hidden",
+                                                                }, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
+                                                                        width: 20,
+                                                                        height: 20,
+                                                                        p: theme.mixins.customPadding.p4,
+                                                                        cursor: "pointer",
+                                                                    }, onClick: handleClearSearch, children: SvgPath_1.IC_CLOSE }) }) })), (tokenRender === null || tokenRender === void 0 ? void 0 : tokenRender.length) > 0 && (0, jsx_runtime_1.jsx)(SortGroup_1.default, { onChange: handleSort })] }), isLoadingDepositTokens && (0, jsx_runtime_1.jsx)(WaitingData_1.default, {}), isEmptyDepositTokens && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { py: "4rem" }, title: "No deposit tokens", description: "No deposit tokens" })), isSearching && isEmptySearch && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { py: "4rem" }, title: "No search results", description: "Let's try again with a different search" })), tokenRender === null || tokenRender === void 0 ? void 0 : tokenRender.map(function (item, index) {
+                                                    var stringifiedTokenData = JSON.stringify(item);
+                                                    if (!item)
+                                                        return null;
+                                                    return ((0, jsx_runtime_1.jsx)(TokenSelection_1.default, { onClick: handleSelectToken, tokenData: stringifiedTokenData, active: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.id) === item.id }, "token_".concat(item.id, "_").concat(index)));
+                                                })] }) }) }) }, "slide_step_".concat(ReceiveStep.SELECT_TOKEN)), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: {
+                                    height: "100%",
+                                    overflow: "hidden",
+                                }, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, display: isExternal ? "flex" : "none" }), children: [(networks === null || networks === void 0 ? void 0 : networks.length) > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.paper), { borderRadius: theme.mixins.customRadius.r16, background: theme.palette.background.accent3, gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.fieldTitle), { fontWeight: theme.typography.fontWeight700, color: theme.palette.text.darkContrast }), children: "Choosing a network? Let us help!" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.activityDescription), { color: theme.palette.text.accent, fontWeight: theme.typography.fontWeight500 }), children: "Select the network used by your sending platform." }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: 0.125, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: chooseNetworkSupportDrawerRef, sx: {
+                                                                        mt: 0.25,
+                                                                    }, trigger: (0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: {
+                                                                            color: theme.palette.primary.main,
+                                                                            fontWeight: theme.typography.fontWeight600,
+                                                                            fontSize: theme.typography.fontSize10,
+                                                                            lineHeight: "100%",
+                                                                        }, children: "Learn more" }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "How to choose my top up network", onClose: closeChooseNetworkSupport, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.mixins.listDescription), { color: theme.palette.text.blackContrast }), children: "Lorem ipsum dolor sit amet consectetur. Vitae faucibus ornare lectus arcu sit sed et. Eu integer pharetra posuere lobortis varius dapibus risus. Pellentesque quis id diam ante lectus ornare tristique." }), (0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.mixins.listDescription), { color: theme.palette.text.blackContrast }), children: "Eget viverra quis facilisis velit mattis. Risus sed egestas vitae ridiculus odio sit eu adipiscing. Scelerisque nunc nec nisl mauris venenatis viverra est dictumst adipiscing." }), (0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.mixins.listDescription), { color: theme.palette.text.blackContrast }), children: "Id pulvinar aliquam quam ut sed ut pharetra turpis ipsum. Condimentum eget a interdum neque sagittis lobortis proin nisi. Magna id massa risus elit at." })] }) }) }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 6, height: 6, mt: "4px" }, children: (0, jsx_runtime_1.jsx)("svg", { width: "4", height: "6", viewBox: "0 0 4 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.7 3L0.7 6L0 5.3L2.3 3L0 0.7L0.7 0L3.7 3Z", fill: "#044C2F" }) }) })] })] })), networks === null || networks === void 0 ? void 0 : networks.map(function (item, index) {
+                                                    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)));
+                                                })] }) }) }) }, "slide_step_".concat(ReceiveStep.SELECT_NETWORK)), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: {
+                                    height: "100%",
+                                    overflow: "hidden",
+                                }, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                gap: theme.mixins.gaps.g16,
+                                            }, children: [(0, jsx_runtime_1.jsx)("div", { id: "share-receive-info", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.mixins.column), { gap: theme.mixins.gaps.g12, backgroundColor: theme.palette.background.tertiary, borderRadius: theme.mixins.customRadius.r16, padding: theme.mixins.customPadding.p16, paddingTop: "5rem", alignItems: "flex-start", position: "relative", marginTop: "4.6875rem" }), children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                                                    color: theme.palette.border.accent,
+                                                                    width: "100%",
+                                                                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), { top: 0, width: "fit-content", height: "fit-content", borderRadius: theme.mixins.customRadius.r12, padding: theme.mixins.customPadding.p8 }), children: [(0, jsx_runtime_1.jsx)(QRCode_1.default, { value: qrCodeValue, logo: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.link, bgColor: "transparent", size: 150 }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), { padding: theme.mixins.customPadding.p4, borderRadius: 9999, backgroundColor: theme.palette.background.white }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { crossOrigin: "anonymous", width: 24, height: 24, src: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.link, sx: {
+                                                                                borderRadius: 9999,
+                                                                            } }) })] }), isExternal && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: "Network" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.row), onClick: handleBack, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { component: "button", sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4, cursor: "pointer", transition: "transform 0.3s ease-in-out", "&:active": {
+                                                                                        transform: "translateX(0.5rem)",
+                                                                                    } }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { width: 24, height: 24, sx: {
+                                                                                            borderRadius: "9999px",
+                                                                                        }, src: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.link }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.name })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
+                                                                                    width: 12,
+                                                                                    height: 12,
+                                                                                    ml: "auto",
+                                                                                    transform: "rotate(90deg)",
+                                                                                }, children: SvgPath_1.IC_CHEVRON_RIGHT })] })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: isInternal ? "Internal address" : "Address" }), isInternal && ((0, jsx_runtime_1.jsx)(CustomTooltip_1.default, { trigger: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 16, height: 16, mb: "3px" }, children: SvgPath_1.IC_TOOLTIP }), children: (0, jsx_runtime_1.jsx)(DialogContentLayout_1.default, { content: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.warning), children: ["This address is used to receive token by internal transfer. You can not use it for blockchain transaction. If you want to receive token by blockchain, please select the ", (0, jsx_runtime_1.jsx)("strong", { children: "Receive External" }), " method instead."] }) }) }))] }), (0, jsx_runtime_1.jsxs)(CopyTextComponent_1.default, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between" }), value: receiveAddress || "", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { wordBreak: "break-all", maxWidth: "85%" }), children: receiveAddress }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_COPY })] })] }), (!!userInfo || !!amount || isExternal || !!warningMessage) && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                                                    color: theme.palette.border.accent,
+                                                                    width: "100%",
+                                                                } })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [!!userInfo && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { sx: {
+                                                                            alignItems: "start",
+                                                                        }, field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Received user" }), value: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { width: 16, height: 16, src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, sx: {
+                                                                                        borderRadius: "9999px",
+                                                                                    } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g2 }), children: (0, jsx_runtime_1.jsxs)(Text_1.default, { children: [userInfo === null || userInfo === void 0 ? void 0 : userInfo.nickname, " "] }) })] }), valueDescription: (0, jsx_runtime_1.jsx)(Text_1.default, { children: userInfo === null || userInfo === void 0 ? void 0 : userInfo.username }) })), !!amount && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Amount" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize13 }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }) }) })), isExternal && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Top Up Arrival Time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize13 }), children: "~ 7 Minutes" }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Withdrawal Arrival Time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize13 }), children: "~ 20 Minutes" }) })] }))] }), !!warningMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                                                            color: theme.palette.border.accent,
+                                                                            width: "100%",
+                                                                            mt: theme.mixins.customMargin.m12,
+                                                                        } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: warningMessage })] }))] }) }), isInternal && ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: amountDrawerRef, sx: {
+                                                        width: "100%",
+                                                        display: "flex",
+                                                        justifyContent: "center",
+                                                    }, onOpen: handleAmountModalOpen, onClose: onCloseAmountModal, trigger: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsxs)(Button_1.default.Text, { sx: {
+                                                                fontSize: theme.typography.fontSize14,
+                                                                textTransform: "none",
+                                                                fontWeight: theme.typography.fontWeight500,
+                                                                display: "flex",
+                                                                alignItems: "center",
+                                                                gap: theme.mixins.gaps.g4,
+                                                            }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: amount ? SvgPath_1.IC_EDIT : SvgPath_1.IC_SET }), amount ? "Edit" : "Set", " amount"] }) }), children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { id: keyboardId, onChange: handleChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), keyboardId: "amount-keyboard-id", children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { onClose: closeAmountModal, title: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.fieldTitle), children: [amount ? "Edit" : "Set", " ", selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name, " amount"] }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { ref: amountInputRef, elementsAcceptIds: ["amount-keyboard-id"], value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, rightElement: (0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { onClick: handleClickMaxAmount, sx: __assign({}, theme.mixins.smallButton), children: "Max" }) }) }), amountError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: amountError })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { width: "100%", mt: theme.mixins.customMargin.m8, gap: theme.mixins.gaps.g12 }), children: [!!amount && ((0, jsx_runtime_1.jsx)(Button_1.default.Text, { onClick: handleUnset, children: "Unset" })), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { flex: 1 }, onClick: handleContinue, status: !!amountError || !inputAmount
+                                                                                    ? Button_1.BUTTON_STATUS.DISABLED
+                                                                                    : Button_1.BUTTON_STATUS.ENABLED, children: "Continue" })] })] }) }) }) }))] }) }) }) }, "slide_step_".concat(ReceiveStep.SHOW_QR_CODE))] }) }) }) }) }));
 });
 exports.ReceiveFunction.displayName = "ReceiveFunction";
 exports.default = exports.ReceiveFunction;

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

@@ -66,10 +66,15 @@ var AppDialog_1 = __importDefault(require("../AppDialog"));
 var type_1 = require("../../../services/axios/validate-wallet-address-service/type");
 var navigation_1 = require("next/navigation");
 var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var providers_1 = require("../../../providers");
+var TekWalletView_1 = require("../../views/TekWalletView");
 exports.ScanQRToSend = (0, react_1.forwardRef)(function (props, ref) {
     var children = props.children, transferInternalPath = props.transferInternalPath, transferExternalPath = props.transferExternalPath, gotoTransferInternalOverride = props.gotoTransferInternalOverride, gotoTransferExternalOverride = props.gotoTransferExternalOverride, sx = props.sx, className = props.className;
-    var internalPath = transferInternalPath || "/transfer-internal";
-    var externalPath = transferExternalPath || "/transfer-external";
+    var options = (0, providers_1.useWalletConfig)().options;
+    var internalPath = transferInternalPath ||
+        "".concat((options === null || options === void 0 ? void 0 : options.basePath) || "", "/tek-wallet/").concat(TekWalletView_1.TekWalletViewRoutes.SEND_INTERNAL);
+    var externalPath = transferExternalPath ||
+        "".concat((options === null || options === void 0 ? void 0 : options.basePath) || "", "/tek-wallet/").concat(TekWalletView_1.TekWalletViewRoutes.SEND_EXTERNAL);
     var drawerRef = (0, react_1.useRef)(null);
     var theme = (0, ThemeProvider_1.useTheme)();
     var router = (0, navigation_1.useRouter)();

package/dist/components/TekWallet/components/ui/SmartList/index.d.ts

@@ -1,10 +1,11 @@
 import { BoxProps } from "@mui/material";
-interface SmartListProps extends BoxProps {
+export interface SmartListProps extends BoxProps {
     children: React.ReactNode;
     loadMoreData: () => void;
     hasMore: boolean;
     loadingComponent?: React.ReactNode;
     loadingComponentProps?: BoxProps;
+    bodySx?: BoxProps;
 }
 declare const SmartList: (props: SmartListProps) => import("react/jsx-runtime").JSX.Element;
 export default SmartList;

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

@@ -17,7 +17,7 @@ var material_1 = require("@mui/material");
 var ThemeProvider_1 = require("../../../providers/ThemeProvider");
 var react_1 = require("react");
 var SmartList = function (props) {
-    var children = props.children, loadMoreData = props.loadMoreData, hasMore = props.hasMore, loadingComponent = props.loadingComponent, loadingComponentProps = props.loadingComponentProps;
+    var children = props.children, loadMoreData = props.loadMoreData, hasMore = props.hasMore, loadingComponent = props.loadingComponent, loadingComponentProps = props.loadingComponentProps, bodySx = props.bodySx;
     var theme = (0, ThemeProvider_1.useTheme)();
     var containerRef = (0, react_1.useRef)(null);
     var loadingRef = (0, react_1.useRef)(null);
@@ -46,6 +46,6 @@ var SmartList = function (props) {
             observer.disconnect();
         };
     }, [loadMoreData, hasMore]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ overflowY: "auto", width: "100%", height: "100%" }, props.sx), ref: containerRef, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { height: "fit-content", my: "auto", gap: 0 }), children: [children, (0, jsx_runtime_1.jsx)("div", { ref: loadingRef }), hasMore && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ width: "100%" }, loadingComponentProps), children: loadingComponent }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ overflowY: "auto", width: "100%", height: "100%" }, props.sx), ref: containerRef, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.column), { height: "fit-content", my: "auto", gap: 0 }), bodySx), children: [children, (0, jsx_runtime_1.jsx)("div", { ref: loadingRef }), hasMore && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ width: "100%" }, loadingComponentProps), children: loadingComponent }))] }) }));
 };
 exports.default = SmartList;

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

@@ -57,11 +57,10 @@ var SwiperControlled_1 = __importDefault(require("../SwiperControlled"));
 var react_2 = require("swiper/react");
 var material_1 = require("@mui/material");
 var Button_1 = __importDefault(require("../Button"));
-var RequireConnect_1 = __importDefault(require("../RequireConnect"));
 var ThemeProvider_1 = require("../../../providers/ThemeProvider");
 var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
 var FromCard_1 = __importDefault(require("../../views/SwapView/components/FromCard"));
-var CardTo_1 = __importDefault(require("../../views/SwapView/components/CardTo"));
+var ToCard_1 = __importDefault(require("../../views/SwapView/components/ToCard"));
 var DetailSwap_1 = __importDefault(require("../DetailSwap"));
 var ModalSelectToken_1 = __importDefault(require("../ModalSelectToken"));
 var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"));
@@ -111,13 +110,13 @@ exports.SwapFunction = (0, react_1.forwardRef)(function (props, ref) {
             setNumber(null);
         }
     };
-    var gotoStep = function (step) {
+    var gotoStep = (0, react_1.useCallback)(function (step) {
         var _a;
         if (step === SwapStep.SELECT_SWAP) {
         }
         setCurrentStep(step);
         (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.slideTo(step);
-    };
+    }, []);
     var handleSelectToken = function (token) {
         if (!selectedToken || selectedToken.id !== token.id) {
             setSelectedToken(token);
@@ -232,41 +231,41 @@ exports.SwapFunction = (0, react_1.forwardRef)(function (props, ref) {
             openHistory();
         }
     }, [isSwapPage, isHistoryPage, isHistoryDetailPage]);
-    return ((0, jsx_runtime_1.jsx)(RequireConnect_1.default, { children: (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { className: className, sx: sx, ref: drawerRef, trigger: props.children, onOpen: handleOnOpenSwap, onClose: handleOnCloseSwap, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: SWAP_STEP_NAME[currentStep], overrideBack: handleBack, children: currentStep === SwapStep.SELECT_SWAP && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 18, height: 18 }, children: SvgPath_1.IC_HELP }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", sx: {
-                                        height: "1rem",
-                                        width: "1px",
-                                        backgroundColor: theme.palette.border.accent3,
-                                        marginLeft: theme.mixins.customMargin.m4,
-                                        marginRight: theme.mixins.customMargin.m4,
-                                    } }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: historyRef, trigger: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 18, height: 18 }, children: SvgPath_1.IC_HISTORY }), direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, onOpen: handleOnOpenHistory, onClose: handleOnCloseHistory, children: (0, jsx_runtime_1.jsx)(HistorySwap_1.default, { onClose: closeHistory }) })] })) }) }), footer: currentStep === SwapStep.SELECT_SWAP && ((0, jsx_runtime_1.jsx)(BottomActionLayout_1.default, { children: (0, jsx_runtime_1.jsx)(SwapToken_1.default
+    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { className: className, sx: sx, ref: drawerRef, trigger: props.children, onOpen: handleOnOpenSwap, onClose: handleOnCloseSwap, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: SWAP_STEP_NAME[currentStep], overrideBack: handleBack, children: currentStep === SwapStep.SELECT_SWAP && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 18, height: 18 }, children: SvgPath_1.IC_HELP }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", sx: {
+                                    height: "1rem",
+                                    width: "1px",
+                                    backgroundColor: theme.palette.border.accent3,
+                                    marginLeft: theme.mixins.customMargin.m4,
+                                    marginRight: theme.mixins.customMargin.m4,
+                                } }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: historyRef, trigger: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 18, height: 18 }, children: SvgPath_1.IC_HISTORY }), direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, onOpen: handleOnOpenHistory, onClose: handleOnCloseHistory, children: (0, jsx_runtime_1.jsx)(HistorySwap_1.default, { onClose: closeHistory }) })] })) }) }), footer: currentStep === SwapStep.SELECT_SWAP && ((0, jsx_runtime_1.jsx)(BottomActionLayout_1.default, { children: (0, jsx_runtime_1.jsx)(SwapToken_1.default
+                // onResetNumber={resetNumber}
+                , { 
                     // onResetNumber={resetNumber}
-                    , { 
-                        // onResetNumber={resetNumber}
-                        sx: {
-                            width: "100%",
-                        }, sendData: {
-                            amount: number !== null ? number.toString() : "",
-                            currency_slug: (_a = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug) !== null && _a !== void 0 ? _a : "",
-                            to_currency_slug: (_b = selectedOutputToken === null || selectedOutputToken === void 0 ? void 0 : selectedOutputToken.slug) !== null && _b !== void 0 ? _b : "",
-                            extraTransactions: null,
-                        }, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { disabled: !number ||
-                                number < ((_c = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.min_value) !== null && _c !== void 0 ? _c : 0) ||
-                                number > ((_d = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.max_value) !== null && _d !== void 0 ? _d : 0) ||
-                                number > Number(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.balance), fullWidth: true, children: "Preview swap" }) }, "".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug, "-").concat(selectedOutputToken === null || selectedOutputToken === void 0 ? void 0 : selectedOutputToken.slug)) })), children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                        padding: theme.mixins.pagePadding,
-                        position: "relative",
-                    }, children: (0, jsx_runtime_1.jsx)(SwiperControlled_1.default, { ref: swiperRef, swiperProps: {
-                            autoHeight: true,
-                            spaceBetween: 32,
-                        }, disableSwipe: true, initialActiveTab: currentStep, children: (0, jsx_runtime_1.jsxs)(react_2.SwiperSlide, { children: [(0, jsx_runtime_1.jsx)(FromCard_1.default, { onChange: onChange, selectedToken: selectedToken !== null && selectedToken !== void 0 ? selectedToken : undefined, amount: number !== null && number !== void 0 ? number : undefined }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 1, sx: {
-                                        mt: "1rem",
-                                        mb: "1rem",
-                                    }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 18, height: 18 }, children: SvgPath_1.IC_SWAP }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                                                width: "90%",
-                                                borderStyle: "dashed",
-                                                borderColor: "#A3A3A3",
-                                                opacity: 0.3,
-                                            } })] }), (0, jsx_runtime_1.jsx)(CardTo_1.default, { selectedToToken: selectedOutputToken !== null && selectedOutputToken !== void 0 ? selectedOutputToken : undefined, selectedFromToken: selectedToken !== null && selectedToken !== void 0 ? selectedToken : undefined, fromAmount: number !== null && number !== void 0 ? number : undefined }), (0, jsx_runtime_1.jsx)(DetailSwap_1.default, { selectedToken: selectedToken !== null && selectedToken !== void 0 ? selectedToken : undefined, selectOutputToken: selectedOutputToken !== null && selectedOutputToken !== void 0 ? selectedOutputToken : undefined }), (0, jsx_runtime_1.jsx)(ModalSelectToken_1.default, { setSwapToken: handleSelectToken, token: selectedToken !== null && selectedToken !== void 0 ? selectedToken : undefined, outputToken: selectedOutputToken !== null && selectedOutputToken !== void 0 ? selectedOutputToken : undefined, setOutputToken: handleSelectOutputToken })] }, SwapStep.SELECT_SWAP) }, selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.id) }) }) }) }));
+                    sx: {
+                        width: "100%",
+                    }, sendData: {
+                        amount: number !== null ? number.toString() : "",
+                        currency_slug: (_a = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug) !== null && _a !== void 0 ? _a : "",
+                        to_currency_slug: (_b = selectedOutputToken === null || selectedOutputToken === void 0 ? void 0 : selectedOutputToken.slug) !== null && _b !== void 0 ? _b : "",
+                        extraTransactions: null,
+                    }, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { disabled: !number ||
+                            number < ((_c = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.min_value) !== null && _c !== void 0 ? _c : 0) ||
+                            number > ((_d = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.max_value) !== null && _d !== void 0 ? _d : 0) ||
+                            number > Number(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.balance), fullWidth: true, children: "Preview swap" }) }, "".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug, "-").concat(selectedOutputToken === null || selectedOutputToken === void 0 ? void 0 : selectedOutputToken.slug)) })), children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    padding: theme.mixins.pagePadding,
+                    position: "relative",
+                }, children: (0, jsx_runtime_1.jsx)(SwiperControlled_1.default, { ref: swiperRef, swiperProps: {
+                        autoHeight: true,
+                        spaceBetween: 32,
+                    }, disableSwipe: true, initialActiveTab: currentStep, children: (0, jsx_runtime_1.jsxs)(react_2.SwiperSlide, { children: [(0, jsx_runtime_1.jsx)(FromCard_1.default, { onChange: onChange, selectedToken: selectedToken !== null && selectedToken !== void 0 ? selectedToken : undefined, amount: number !== null && number !== void 0 ? number : undefined }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 1, sx: {
+                                    mt: "1rem",
+                                    mb: "1rem",
+                                }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 18, height: 18 }, children: SvgPath_1.IC_SWAP }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                            width: "90%",
+                                            borderStyle: "dashed",
+                                            borderColor: "#A3A3A3",
+                                            opacity: 0.3,
+                                        } })] }), (0, jsx_runtime_1.jsx)(ToCard_1.default, { selectedToToken: selectedOutputToken !== null && selectedOutputToken !== void 0 ? selectedOutputToken : undefined, selectedFromToken: selectedToken !== null && selectedToken !== void 0 ? selectedToken : undefined, fromAmount: number !== null && number !== void 0 ? number : undefined }), (0, jsx_runtime_1.jsx)(DetailSwap_1.default, { selectedToken: selectedToken !== null && selectedToken !== void 0 ? selectedToken : undefined, selectOutputToken: selectedOutputToken !== null && selectedOutputToken !== void 0 ? selectedOutputToken : undefined }), (0, jsx_runtime_1.jsx)(ModalSelectToken_1.default, { setSwapToken: handleSelectToken, token: selectedToken !== null && selectedToken !== void 0 ? selectedToken : undefined, outputToken: selectedOutputToken !== null && selectedOutputToken !== void 0 ? selectedOutputToken : undefined, setOutputToken: handleSelectOutputToken })] }, SwapStep.SELECT_SWAP) }, selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.id) }) }) }));
 });
 exports.SwapFunction.displayName = "SwapFunction";
 exports.default = exports.SwapFunction;

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

@@ -47,7 +47,7 @@ var TokenSelection = function (props) {
     }, [balance, tokenData]);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(tokenData); }, sx: __assign({ backgroundColor: active
                 ? "".concat(theme.palette.background.tertiary)
-                : "".concat(theme.palette.background.white), border: "1px solid", borderColor: active ? "".concat(theme.palette.primary.main) : "".concat(theme.palette.border.accent3), borderRadius: theme.mixins.customRadius.r16, padding: theme.mixins.customPadding.p16, display: "flex", alignItems: "center", cursor: "pointer" }, sx) }, rest, { 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)(Icon_1.default, { width: 20, src: tokenData === null || tokenData === void 0 ? void 0 : tokenData.link, sx: {
+                : "".concat(theme.palette.background.white16), border: "1px solid", backdropFilter: "blur(12px)", borderColor: active ? "".concat(theme.palette.primary.main) : "".concat(theme.palette.border.accent3), borderRadius: theme.mixins.customRadius.r16, padding: theme.mixins.customPadding.p16, display: "flex", alignItems: "center", cursor: "pointer" }, sx) }, rest, { 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)(Icon_1.default, { width: 20, src: tokenData === null || tokenData === void 0 ? void 0 : tokenData.link, sx: {
                             borderRadius: theme.mixins.customRadius.full,
                         } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: theme.mixins.value, children: tokenData === null || tokenData === void 0 ? void 0 : tokenData.name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: theme.mixins.valueDescription, children: tokenData === null || tokenData === void 0 ? void 0 : tokenData.full_name })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { marginLeft: "auto", alignItems: "end" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: theme.mixins.value, children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: balance }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: balanceInUSD, start: "~ $" }) })] })] })));
 };

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

@@ -18,8 +18,9 @@ var WaitingData = function (props) {
     var theme = (0, providers_1.useTheme)();
     var sx = props.sx, _a = props.numberOfSkeleton, numberOfSkeleton = _a === void 0 ? 5 : _a;
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: theme.mixins.gaps.g12, width: "100%", height: "fit-content" }, sx), children: Array.from({ length: numberOfSkeleton }).map(function (_, index) { return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                backgroundColor: theme.palette.background.white,
-                borderRadius: theme.mixins.customRadius.r12,
+                backgroundColor: theme.palette.background.white16,
+                backdropFilter: "blur(12px)",
+                borderRadius: theme.mixins.customRadius.r16,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -32,20 +33,20 @@ var WaitingData = function (props) {
                         height: "auto",
                         width: "2.5rem",
                         borderRadius: "999px",
-                        opacity: 0.8,
+                        opacity: 0.7,
                     }, animation: "wave" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g6, flex: 1 }), children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "70%", sx: {
                                 height: "1.4rem",
-                                opacity: 0.8,
+                                opacity: 0.7,
                                 borderRadius: theme.mixins.customRadius.r12,
                             }, animation: "wave" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "80%", sx: {
                                 height: "1.2rem",
-                                opacity: 0.8,
+                                opacity: 0.7,
                                 borderRadius: theme.mixins.customRadius.r12,
                             }, animation: "wave" })] }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", sx: {
                         height: "1.7rem",
                         width: "4rem",
                         borderRadius: theme.mixins.customRadius.r12,
-                        opacity: 0.8,
+                        opacity: 0.7,
                     }, animation: "wave" })] }, index)); }) }));
 };
 exports.default = WaitingData;