tek-wallet 0.0.805 → 0.0.807

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

@@ -0,0 +1,365 @@
+"use strict";
+"use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReceiveDirectly = exports.ReceiveDirectlyMethod = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var DrawerComponent_1 = __importDefault(require("../DrawerComponent"));
+var SwiperControlled_1 = __importDefault(require("../SwiperControlled"));
+var react_2 = require("swiper/react");
+var useWalletData_1 = __importDefault(require("../../../hooks/useWalletData"));
+var ModalLayout_1 = __importDefault(require("../ModalLayout"));
+var QRCode_1 = __importDefault(require("../QRCode"));
+var Text_1 = __importDefault(require("../Text"));
+var material_1 = require("@mui/material");
+var CopyTextComponent_1 = __importDefault(require("../CopyTextComponent"));
+var Button_1 = __importDefault(require("../Button"));
+var Icon_1 = __importDefault(require("../Icon"));
+var NetworkSelection_1 = __importDefault(require("../NetworkSelection"));
+var WaitingData_1 = __importDefault(require("../WaitingData"));
+var EmptyData_1 = __importDefault(require("../EmptyData"));
+var Formatter_1 = __importDefault(require("../Formatter"));
+var CustomTooltip_1 = __importDefault(require("../CustomTooltip"));
+var DialogContentLayout_1 = __importDefault(require("../DialogContentLayout"));
+var mui_1 = require("../../../theme/mui");
+var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
+var LineValue_1 = __importDefault(require("../LineValue"));
+var SvgPath_1 = require("../SvgPath");
+var useReceiveData_1 = __importDefault(require("../../../hooks/useReceiveData"));
+var ReceiveDirectlyMethod;
+(function (ReceiveDirectlyMethod) {
+    ReceiveDirectlyMethod["RECEIVE_INTERNAL"] = "Internal Transfer";
+    ReceiveDirectlyMethod["RECEIVE_EXTERNAL"] = "Blockchain Deposit";
+})(ReceiveDirectlyMethod || (exports.ReceiveDirectlyMethod = ReceiveDirectlyMethod = {}));
+var ReceiveDirectlyStep;
+(function (ReceiveDirectlyStep) {
+    ReceiveDirectlyStep[ReceiveDirectlyStep["SELECT_NETWORK"] = 0] = "SELECT_NETWORK";
+    ReceiveDirectlyStep[ReceiveDirectlyStep["SHOW_QR_CODE"] = 1] = "SHOW_QR_CODE";
+})(ReceiveDirectlyStep || (ReceiveDirectlyStep = {}));
+exports.ReceiveDirectly = (0, react_1.forwardRef)(function (_a, ref) {
+    var tokenSlug = _a.tokenSlug, method = _a.method, networkSlug = _a.networkSlug, amount = _a.amount, userInfo = _a.userInfo, props = __rest(_a, ["tokenSlug", "method", "networkSlug", "amount", "userInfo"]);
+    var drawerRef = (0, react_1.useRef)(null);
+    var isInitPasscode = (0, useWalletData_1.default)().isInitPasscode;
+    var _b = (0, useReceiveData_1.default)(), receiveExternalTokens = _b.receiveExternalTokens, updateReceiveExternalToken = _b.updateReceiveExternalToken, receiveInternalTokens = _b.receiveInternalTokens, updateReceiveInternalToken = _b.updateReceiveInternalToken;
+    var swiperRef = (0, react_1.useRef)(null);
+    var learnMoreDrawerRef = (0, react_1.useRef)(null);
+    var theme = (0, mui_1.useTheme)();
+    var _c = (0, react_1.useState)(), selectedToken = _c[0], setSelectedToken = _c[1];
+    var _d = (0, react_1.useState)(), selectedNetwork = _d[0], setSelectedNetwork = _d[1];
+    var _e = (0, react_1.useState)(false), hasTokenError = _e[0], setHasTokenError = _e[1];
+    var _f = (0, react_1.useState)(false), hasNetworkError = _f[0], setHasNetworkError = _f[1];
+    var _g = (0, react_1.useState)(true), isLoading = _g[0], setIsLoading = _g[1];
+    var _h = (0, react_1.useState)(ReceiveDirectlyStep.SELECT_NETWORK), currentStep = _h[0], setCurrentStep = _h[1];
+    var _j = (0, react_1.useState)(true), shouldReinitialize = _j[0], setShouldReinitialize = _j[1];
+    var _k = (0, useWalletData_1.default)(), blockchainWallets = _k.blockchainWallets, masterWallet = _k.masterWallet;
+    var isInternal = (0, react_1.useMemo)(function () {
+        return method === ReceiveDirectlyMethod.RECEIVE_INTERNAL;
+    }, [method]);
+    var isExternal = (0, react_1.useMemo)(function () {
+        return method === ReceiveDirectlyMethod.RECEIVE_EXTERNAL;
+    }, [method]);
+    var receiveTokens = (0, react_1.useMemo)(function () {
+        if (isInternal) {
+            return receiveInternalTokens;
+        }
+        return receiveExternalTokens;
+    }, [isInternal, receiveExternalTokens, receiveInternalTokens]);
+    var networks = (0, react_1.useMemo)(function () {
+        if (!selectedToken) {
+            return [];
+        }
+        return selectedToken.network_data || [];
+    }, [selectedToken]);
+    var receiveAddress = (0, react_1.useMemo)(function () {
+        var _a;
+        if (!selectedToken) {
+            return undefined;
+        }
+        if (isInternal) {
+            return masterWallet;
+        }
+        return (_a = blockchainWallets === null || blockchainWallets === void 0 ? void 0 : blockchainWallets.find(function (item) { return item.networkSlug === (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.slug); })) === null || _a === void 0 ? void 0 : _a.blockchainAddress;
+    }, [selectedToken, isInternal, blockchainWallets, masterWallet, selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.slug]);
+    var qrCodeValue = (0, react_1.useMemo)(function () {
+        var _a, _b, _c;
+        if (!receiveAddress || !selectedToken) {
+            return "";
+        }
+        if (isInternal) {
+            var tonTransferParamInternal = {
+                address: receiveAddress,
+                amount: +(amount || 0) * Math.pow(10, ((_a = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.decimal) !== null && _a !== void 0 ? _a : 0)),
+                jetton: (_c = (_b = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.network_data) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.address,
+                isTekWalletReceiveInternal: true,
+                text: "",
+                bin: "",
+                init: "",
+                isDeepLinkFormat: false,
+            };
+            return JSON.stringify(tonTransferParamInternal);
+        }
+        return "".concat(receiveAddress);
+    }, [receiveAddress, selectedToken, isInternal, amount]);
+    var warningMessage = (0, react_1.useMemo)(function () {
+        if (isExternal && !amount) {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full inline-block", children: ["Please send an amount between", " ", (0, jsx_runtime_1.jsxs)("strong", { style: { color: theme.palette.primary.main }, children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { value: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.min_value }), " and", " ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.max_value, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }), " "] }), " ", "and ensure you", " ", (0, jsx_runtime_1.jsx)("strong", { style: { color: theme.palette.primary.main }, children: "select the correct network" }), ", or your assets may be lost."] }));
+        }
+        if (isExternal && !!amount) {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Please ensure you", " ", (0, jsx_runtime_1.jsx)("strong", { style: { color: theme.palette.primary.main }, children: "select the correct network" }), ", or your assets may be lost."] }));
+        }
+        return null;
+    }, [
+        isExternal,
+        amount,
+        theme.palette.primary.main,
+        selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.min_value,
+        selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.max_value,
+        selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name,
+    ]);
+    var resetState = (0, react_1.useCallback)(function () {
+        setSelectedToken(undefined);
+        setSelectedNetwork(undefined);
+        setHasTokenError(false);
+        setHasNetworkError(false);
+        setIsLoading(true);
+        setCurrentStep(ReceiveDirectlyStep.SELECT_NETWORK);
+        setShouldReinitialize(true);
+    }, []);
+    var open = (0, react_1.useCallback)(function () {
+        var _a;
+        setShouldReinitialize(true);
+        (_a = drawerRef.current) === null || _a === void 0 ? void 0 : _a.open();
+    }, []);
+    var close = (0, react_1.useCallback)(function () {
+        var _a;
+        (_a = drawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    }, []);
+    var handleClose = (0, react_1.useCallback)(function () {
+        resetState();
+    }, [resetState]);
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        open: open,
+        close: close,
+    }); });
+    (0, react_1.useEffect)(function () {
+        if (isInitPasscode && !receiveExternalTokens) {
+            updateReceiveExternalToken();
+        }
+        if (isInitPasscode && !receiveInternalTokens) {
+            updateReceiveInternalToken();
+        }
+    }, [
+        isInitPasscode,
+        receiveExternalTokens,
+        receiveInternalTokens,
+        updateReceiveExternalToken,
+        updateReceiveInternalToken,
+    ]);
+    var gotoStep = (0, react_1.useCallback)(function (step) {
+        var _a;
+        setCurrentStep(step);
+        (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.slideTo(step);
+    }, []);
+    var handleSelectNetwork = (0, react_1.useCallback)(function (network) {
+        setSelectedNetwork(network);
+        gotoStep(ReceiveDirectlyStep.SHOW_QR_CODE);
+    }, [gotoStep]);
+    // Validate and load token when component mounts or data changes
+    (0, react_1.useEffect)(function () {
+        // Only run when shouldReinitialize is true
+        if (!shouldReinitialize) {
+            return;
+        }
+        if (!receiveTokens) {
+            setIsLoading(true);
+            // Don't reset shouldReinitialize here, wait for data to come
+            return;
+        }
+        setIsLoading(false);
+        // Find token by slug
+        var foundToken = receiveTokens === null || receiveTokens === void 0 ? void 0 : receiveTokens.find(function (item) { return item.slug === tokenSlug; });
+        if (!foundToken) {
+            // Token not found - show error
+            setHasTokenError(true);
+            setHasNetworkError(false);
+            setSelectedToken(undefined);
+            setShouldReinitialize(false);
+            return;
+        }
+        // Token found - set it
+        setSelectedToken(foundToken);
+        setHasTokenError(false);
+        // For internal method, no need to check network
+        if (isInternal) {
+            setHasNetworkError(false);
+            gotoStep(ReceiveDirectlyStep.SHOW_QR_CODE);
+            setShouldReinitialize(false);
+            return;
+        }
+        // For external method, check networks
+        var tokenNetworks = foundToken.network_data;
+        if (!tokenNetworks || tokenNetworks.length === 0) {
+            // No networks available - show error
+            setHasNetworkError(true);
+            gotoStep(ReceiveDirectlyStep.SHOW_QR_CODE);
+            setShouldReinitialize(false);
+            return;
+        }
+        // Find network by slug or use first available
+        if (networkSlug) {
+            var foundNetwork = tokenNetworks.find(function (item) { return item.slug === networkSlug; });
+            if (foundNetwork) {
+                setSelectedNetwork(foundNetwork);
+                setHasNetworkError(false);
+                gotoStep(ReceiveDirectlyStep.SHOW_QR_CODE);
+            }
+            else {
+                // Network slug provided but not found
+                setHasNetworkError(true);
+                gotoStep(ReceiveDirectlyStep.SHOW_QR_CODE);
+            }
+        }
+        else {
+            // No network slug provided - show network selection first
+            setHasNetworkError(false);
+            setSelectedNetwork(undefined);
+            gotoStep(ReceiveDirectlyStep.SELECT_NETWORK);
+        }
+        setShouldReinitialize(false);
+    }, [tokenSlug, networkSlug, isInternal, receiveTokens, gotoStep, shouldReinitialize]);
+    var renderContent = function () {
+        // Loading state
+        if (isLoading) {
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    minHeight: "400px",
+                }, children: (0, jsx_runtime_1.jsx)(WaitingData_1.default, {}) }));
+        }
+        // Error states
+        if (hasTokenError) {
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    minHeight: "400px",
+                    gap: theme.styleMixins.gaps.g16,
+                }, children: (0, jsx_runtime_1.jsx)(EmptyData_1.default, { title: "Invalid Token", description: "Token \"".concat(tokenSlug, "\" does not exist or is not supported for ").concat(isInternal ? "internal transfer" : "blockchain deposit", " method.") }) }));
+        }
+        if (hasNetworkError) {
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    minHeight: "400px",
+                    gap: theme.styleMixins.gaps.g16,
+                }, children: (0, jsx_runtime_1.jsx)(EmptyData_1.default, { title: "Network Unavailable", description: "Token \"".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name, "\" has no available networks").concat(networkSlug ? " or network \"".concat(networkSlug, "\" is not supported") : "", ".") }) }));
+        }
+        // Success - Show QR code
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                display: "flex",
+                flexDirection: "column",
+                gap: theme.styleMixins.gaps.g16,
+            }, children: (0, jsx_runtime_1.jsx)("div", { id: "share-receive-info", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12, backgroundColor: theme.palette.background.tertiary, borderRadius: theme.styleMixins.customRadius.r16, padding: theme.styleMixins.customPadding.p16, paddingTop: "5rem", alignItems: "flex-start", position: "relative", marginTop: "4.6875rem" }), children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                color: theme.palette.divider,
+                                width: "100%",
+                            } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.center), { top: 0, width: "fit-content", height: "fit-content", borderRadius: theme.styleMixins.customRadius.r12, padding: theme.styleMixins.customPadding.p8 }), children: [(0, jsx_runtime_1.jsx)(QRCode_1.default, { value: qrCodeValue, logo: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.link, bgColor: "transparent", size: 150 }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.center), { padding: theme.styleMixins.customPadding.p4, borderRadius: 9999, backgroundColor: theme.palette.background.default }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { crossOrigin: "anonymous", src: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.link, sx: {
+                                            borderRadius: 9999,
+                                            width: 24,
+                                            height: 24,
+                                        } }) })] }), isExternal && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.valueDescription), children: "Network" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.styleMixins.row), onClick: function () { return gotoStep(ReceiveDirectlyStep.SELECT_NETWORK); }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { component: "button", sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4, cursor: "pointer", transition: "transform 0.3s ease-in-out", "&:active": {
+                                                    transform: "translateX(0.5rem)",
+                                                } }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { width: 24, height: 24, sx: {
+                                                        borderRadius: "9999px",
+                                                    }, src: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.link }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.name })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
+                                                width: 12,
+                                                height: 12,
+                                                ml: "auto",
+                                                transform: "rotate(90deg)",
+                                            }, children: SvgPath_1.IC_CHEVRON_RIGHT })] })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4, color: theme.palette.text.secondary }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.valueDescription), { color: "inherit" }), children: isInternal ? "Internal Address" : "Address" }), isInternal && ((0, jsx_runtime_1.jsx)(CustomTooltip_1.default, { trigger: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 16, height: 16, mb: "3px" }, children: SvgPath_1.IC_TOOLTIP }), children: (0, jsx_runtime_1.jsx)(DialogContentLayout_1.default, { content: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.styleMixins.warning), children: ["This address is used to receive tokens via internal transfer. You cannot use it for blockchain transactions. If you want to receive tokens via blockchain, please select the ", (0, jsx_runtime_1.jsx)("strong", { children: "Blockchain Deposit" }), " method instead."] }) }) }))] }), (0, jsx_runtime_1.jsxs)(CopyTextComponent_1.default, { sx: __assign(__assign({}, theme.styleMixins.row), { justifyContent: "space-between" }), value: receiveAddress || "", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { wordBreak: "break-all", maxWidth: "85%" }), children: receiveAddress }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_COPY })] })] }), (!!userInfo || !!amount || isExternal || !!warningMessage) && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                color: theme.palette.divider,
+                                width: "100%",
+                            } })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12 }), children: [!!userInfo && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { sx: {
+                                        alignItems: "start",
+                                    }, field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.valueDescription), { color: theme.palette.text.secondary, fontSize: theme.typography.fontSize13 }), children: "Recipient" }), value: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { width: 16, height: 16, src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, sx: {
+                                                    borderRadius: "9999px",
+                                                } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g2 }), children: (0, jsx_runtime_1.jsxs)(Text_1.default, { children: [userInfo === null || userInfo === void 0 ? void 0 : userInfo.nickname, " "] }) })] }), valueDescription: (0, jsx_runtime_1.jsx)(Text_1.default, { children: userInfo === null || userInfo === void 0 ? void 0 : userInfo.username }) })), !!amount && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.valueDescription), { color: theme.palette.text.secondary, fontSize: theme.typography.fontSize13 }), children: "Amount" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { fontSize: theme.typography.fontSize13 }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }) }) })), isExternal && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.valueDescription), { color: theme.palette.text.secondary, fontSize: theme.typography.fontSize13 }), children: "Deposit Time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { fontSize: theme.typography.fontSize13 }), children: "~ 2 Minutes" }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.valueDescription), { color: theme.palette.text.secondary, fontSize: theme.typography.fontSize13 }), children: "Withdrawal Time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { fontSize: theme.typography.fontSize13 }), children: "~ 4 Minutes" }) })] }))] }), !!warningMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                        color: theme.palette.divider,
+                                        width: "100%",
+                                        mt: theme.styleMixins.customMargin.m12,
+                                    } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.valueDescription), children: warningMessage })] }))] }) }) }));
+    };
+    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, sx: props.sx, onDone: handleClose, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "Receive ".concat((selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) || "Token"), onClose: close, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { footer: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        maxHeight: currentStep === ReceiveDirectlyStep.SHOW_QR_CODE ? "120px" : 0,
+                        overflow: "hidden",
+                        transition: currentStep === ReceiveDirectlyStep.SHOW_QR_CODE
+                            ? "max-height 0.3s linear 0.3s"
+                            : "max-height 0s linear",
+                    }, children: !hasTokenError && !hasNetworkError && selectedNetwork && ((0, jsx_runtime_1.jsx)(Button_1.default.Primary, { onClick: close, fullWidth: true, sx: { mt: theme.styleMixins.customMargin.m16 }, children: "Done" })) }), children: (0, jsx_runtime_1.jsxs)(SwiperControlled_1.default, { ref: swiperRef, swiperProps: {
+                        spaceBetween: 32,
+                    }, disableSwipe: true, initialActiveTab: currentStep, 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.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12 }), children: [(isLoading || !selectedToken) && ((0, jsx_runtime_1.jsx)(WaitingData_1.default, { numberOfSkeleton: 3, sx: {
+                                                py: theme.styleMixins.customPadding.p16,
+                                            } })), !isLoading && selectedToken && (networks === null || networks === void 0 ? void 0 : networks.length) > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.paper), { borderRadius: theme.styleMixins.customRadius.r16, background: theme.palette.background.secondary, gap: theme.styleMixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.fieldTitle), { fontWeight: theme.typography.fontWeight700, color: theme.palette.text.primary }), children: "Choosing a network? Let us help!" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.activityDescription), { color: theme.palette.text.secondary, fontWeight: theme.typography.fontWeight500 }), children: "Select the network used by your sending platform." }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: learnMoreDrawerRef, sx: {
+                                                        mt: 0.25,
+                                                    }, trigger: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: 0.125, alignItems: "center", sx: { color: theme.palette.primary.main, width: "fit-content" }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: {
+                                                                    fontWeight: theme.typography.fontWeight600,
+                                                                    fontSize: theme.typography.fontSize10,
+                                                                    lineHeight: "100%",
+                                                                }, children: "Learn more" }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 6, height: 6, mt: "4px" }, children: (0, jsx_runtime_1.jsx)("svg", { width: "4", height: "6", viewBox: "0 0 4 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.7 3L0.7 6L0 5.3L2.3 3L0 0.7L0.7 0L3.7 3Z", fill: "currentColor" }) }) })] }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "How to choose my deposit network?", onClose: function () { var _a; return (_a = learnMoreDrawerRef.current) === null || _a === void 0 ? void 0 : _a.close(); }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.styleMixins.listDescription), { color: theme.palette.text.primary }), children: "When depositing, choose the same network as the one used on the sending platform. For example, if transferring funds using BSC network, select BSC for deposit. Otherwise, you may risk losing your assets." }), (0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.styleMixins.listDescription), { color: theme.palette.text.primary }), children: "If unsure, test with a small amount and confirm it arrives safely before depositing the rest." })] }) }) })] })), !isLoading &&
+                                            selectedToken &&
+                                            (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(ReceiveDirectlyStep.SELECT_NETWORK)), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: {
+                                height: "100%",
+                                overflow: "hidden",
+                            }, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default
+                            // header={
+                            //   isExternal &&
+                            //   !networkSlug &&
+                            //   currentStep === ReceiveDirectlyStep.SHOW_QR_CODE && (
+                            //     <PageHeader title="" overrideBack={handleBack} />
+                            //   )
+                            // }
+                            , { children: renderContent() }) }, "slide_step_".concat(ReceiveDirectlyStep.SHOW_QR_CODE))] }) }) }) }));
+});
+exports.ReceiveDirectly.displayName = "ReceiveDirectly";
+exports.default = exports.ReceiveDirectly;

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

@@ -25,7 +25,7 @@ var Text_1 = __importDefault(require("../../Text"));
 var ChildPageLayout_1 = __importDefault(require("../../../layouts/ChildPageLayout"));
 var PageHeader_1 = __importDefault(require("../../PageHeader"));
 var DefaultPageLayout_1 = __importDefault(require("../../../layouts/DefaultPageLayout"));
-var ThemeProvider_1 = require("../../../../providers/ThemeProvider");
+var mui_1 = require("../../../../theme/mui");
 var accordionData = [
     {
         id: "panel1",
@@ -50,7 +50,7 @@ var HelpView = function (_a) {
         onBack === null || onBack === void 0 ? void 0 : onBack();
         handleChange("panel1");
     };
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Help", overrideBack: handleBack }), children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: { paddingTop: "0px" }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: accordionData.map(function (_a, index) {
                     var id = _a.id, title = _a.title;
                     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [index !== 0 && (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "divider-".concat(id)), (0, jsx_runtime_1.jsxs)(Accordion_1.default, { expanded: expanded === id, onChange: handleChange(id), sx: {
@@ -66,7 +66,7 @@ var HelpView = function (_a) {
                                     },
                                 }, children: [(0, jsx_runtime_1.jsx)(AccordionSummary_1.default, { sx: {
                                             padding: "0px",
-                                            py: theme.mixins.customPadding.p16,
+                                            py: theme.styleMixins.customPadding.p16,
                                             minHeight: "0 !important",
                                             "&.Mui-expanded": {
                                                 minHeight: "0 !important",
@@ -74,7 +74,7 @@ var HelpView = function (_a) {
                                             "& .MuiAccordionSummary-content": {
                                                 my: "0 !important",
                                             },
-                                        }, expandIcon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 10, height: "auto" }, children: (0, jsx_runtime_1.jsx)("svg", { width: "6", height: "4", viewBox: "0 0 6 4", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 3.85039L0 0.850391L0.7 0.150391L3 2.45039L5.3 0.150391L6 0.850391L3 3.85039Z", fill: "#121212" }) }) }), children: (0, jsx_runtime_1.jsx)(Text_1.default, { component: "p", color: "contrast", children: title }) }), (0, jsx_runtime_1.jsx)(AccordionDetails_1.default, { sx: { padding: "0px", my: "0px" }, children: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.listDescription), children: [(0, jsx_runtime_1.jsx)("p", { children: "Lorem ipsum dolor sit amet consectetur. Vitae faucibus ornare lectus arcu sit sed et. Eu integer pharetra posuere lobortis varius dapibus risus. Eget viverra quis facilisis velit mattis. Risus sed egestas vitae ridiculus odio sit eu adipiscing." }), (0, jsx_runtime_1.jsx)("p", { children: "Id pulvinar aliquam quam ut sed ut pharetra turpis ipsum. Condimentum eget a interdum neque sagittis lobortis proin nisi." })] }) })] }, id)] }));
+                                        }, expandIcon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 10, height: "auto" }, children: (0, jsx_runtime_1.jsx)("svg", { width: "6", height: "4", viewBox: "0 0 6 4", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 3.85039L0 0.850391L0.7 0.150391L3 2.45039L5.3 0.150391L6 0.850391L3 3.85039Z", fill: "#121212" }) }) }), children: (0, jsx_runtime_1.jsx)(Text_1.default, { component: "p", color: "contrast", children: title }) }), (0, jsx_runtime_1.jsx)(AccordionDetails_1.default, { sx: { padding: "0px", my: "0px" }, children: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.styleMixins.listDescription), children: [(0, jsx_runtime_1.jsx)("p", { children: "Lorem ipsum dolor sit amet consectetur. Vitae faucibus ornare lectus arcu sit sed et. Eu integer pharetra posuere lobortis varius dapibus risus. Eget viverra quis facilisis velit mattis. Risus sed egestas vitae ridiculus odio sit eu adipiscing." }), (0, jsx_runtime_1.jsx)("p", { children: "Id pulvinar aliquam quam ut sed ut pharetra turpis ipsum. Condimentum eget a interdum neque sagittis lobortis proin nisi." })] }) })] }, id)] }));
                 }) }) }) }));
 };
 exports.default = HelpView;

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

@@ -37,8 +37,8 @@ exports.SortByType = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var SortTool_1 = __importStar(require("./SortTool"));
-var providers_1 = require("../../../../providers");
 var react_1 = require("react");
+var mui_1 = require("../../../../theme/mui");
 var SortByType;
 (function (SortByType) {
     SortByType["Name"] = "Name";
@@ -46,7 +46,7 @@ var SortByType;
 })(SortByType || (exports.SortByType = SortByType = {}));
 function SortGroup(props) {
     var onChange = props.onChange;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _a = (0, react_1.useState)(SortByType.Name), sortBy = _a[0], setSortBy = _a[1];
     var _b = (0, react_1.useState)(SortTool_1.SortOrder.ASC), sortOrder = _b[0], setSortOrder = _b[1];
     var handleChangeSortBy = function (sortBy, sortOrder) {
@@ -56,9 +56,9 @@ function SortGroup(props) {
         onChange === null || onChange === void 0 ? void 0 : onChange(sortByValue, sortOrder);
     };
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-            display: theme.mixins.row,
+            display: theme.styleMixins.row,
             justifyContent: "space-between",
-            mt: theme.mixins.customMargin.m16,
+            mt: theme.styleMixins.customMargin.m16,
         }, children: Object.values(SortByType).map(function (type) { return ((0, jsx_runtime_1.jsx)(SortTool_1.default, { name: type, onChange: handleChangeSortBy, value: sortBy === type ? sortOrder : undefined }, type)); }) }));
 }
 exports.default = SortGroup;

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

@@ -19,8 +19,8 @@ exports.default = SortTool;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var Text_1 = __importDefault(require("../../Text"));
-var SvgPath_1 = require("../../SvgPath");
-var ThemeProvider_1 = require("../../../../providers/ThemeProvider");
+var mui_1 = require("../../../../theme/mui");
+var Icon_1 = __importDefault(require("../../Icon"));
 var SortOrder;
 (function (SortOrder) {
     SortOrder["ASC"] = "asc";
@@ -28,7 +28,7 @@ var SortOrder;
 })(SortOrder || (exports.SortOrder = SortOrder = {}));
 function SortTool(props) {
     var value = props.value, onChange = props.onChange, name = props.name;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var handleChangeSortOrder = function () {
         if (value === SortOrder.ASC) {
             onChange === null || onChange === void 0 ? void 0 : onChange(name, SortOrder.DESC);
@@ -37,15 +37,10 @@ function SortTool(props) {
             onChange === null || onChange === void 0 ? void 0 : onChange(name, SortOrder.ASC);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 0.5, onClick: handleChangeSortOrder, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontWeight: theme.typography.fontWeight600 }), children: name }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex flex-col gap-[0.8px]", children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { inheritViewBox: true, sx: {
-                            width: 8,
-                            height: 5,
-                            transition: "opacity 0.2s ease-in-out",
+    var isUsed = value === SortOrder.ASC || value === SortOrder.DESC;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 0.5, onClick: handleChangeSortOrder, sx: { color: isUsed ? theme.palette.action.active : theme.palette.action.disabled }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.valueDescription), { color: "inherit", fontWeight: theme.typography.fontWeight600 }), children: name }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex flex-col gap-[0.8px] text-inherit", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { width: 8, height: 5, iconKey: "ARROW_DROP_UP", sx: {
                             opacity: value === SortOrder.ASC ? 0.8 : 0.5,
-                        }, children: SvgPath_1.ARROW_DROP_UP }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { inheritViewBox: true, sx: {
-                            width: 8,
-                            height: 5,
-                            transition: "opacity 0.2s ease-in-out",
+                        } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { width: 8, height: 5, iconKey: "ARROW_DROP_DOWN", sx: {
                             opacity: value === SortOrder.DESC ? 0.8 : 0.5,
-                        }, children: SvgPath_1.ARROW_DROP_DOWN })] })] }));
+                        } })] })] }));
 }