tek-wallet 0.0.752 → 0.0.754

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

@@ -0,0 +1,450 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Form;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var Input_1 = __importDefault(require("../../../ui/Input"));
+var Formatter_1 = __importDefault(require("../../../ui/Formatter"));
+var SvgPath_1 = require("../../../ui/SvgPath");
+var Text_1 = __importDefault(require("../../../ui/Text"));
+var providers_1 = require("../../../../providers");
+var react_1 = require("react");
+var validate_wallet_address_service_1 = __importDefault(require("../../../../services/axios/validate-wallet-address-service"));
+var lodash_1 = require("lodash");
+var Button_1 = __importStar(require("../../../ui/Button"));
+var expose_1 = require("../../../../services/axios/expose");
+var __1 = require("..");
+var QrCodeReader_1 = __importDefault(require("../../../ui/QrCodeReader"));
+var Icon_1 = __importDefault(require("../../../ui/Icon"));
+var get_est_fee_service_1 = __importDefault(require("../../../../services/axios/get-est-fee-service"));
+var type_1 = require("../../../../services/axios/get-activities-service/type");
+var Fees_1 = __importStar(require("../../../ui/Fees"));
+var xhub_keyboard_1 = require("xhub-keyboard");
+var useUniqueId_1 = require("../../../../hooks/useUniqueId");
+var DrawerComponent_1 = __importDefault(require("../../../ui/DrawerComponent"));
+var ModalLayout_1 = __importDefault(require("../../../ui/ModalLayout"));
+var SelectNetwork_1 = __importDefault(require("./SelectNetwork"));
+var validateAddressDebounce = (0, lodash_1.debounce)(function (callback) {
+    callback();
+}, 500, { leading: true, trailing: true });
+var getEstimateFeeDebounce = (0, lodash_1.debounce)(function (callback) {
+    callback();
+}, 500, { leading: true, trailing: true });
+function Form(props) {
+    var _this = this;
+    var theme = (0, providers_1.useTheme)();
+    var selectedToken = props.selectedToken, onContinue = props.onContinue, sx = props.sx;
+    var _a = (0, react_1.useState)(""), recipientAddress = _a[0], setRecipientAddress = _a[1];
+    var _b = (0, react_1.useState)(), recipientAddressError = _b[0], setRecipientAddressError = _b[1];
+    var _c = (0, react_1.useState)(""), amount = _c[0], setAmount = _c[1];
+    var _d = (0, react_1.useState)(), amountErrorMessage = _d[0], setAmountErrorMessage = _d[1];
+    var _e = (0, react_1.useState)(), amountError = _e[0], setAmountError = _e[1];
+    var _f = (0, react_1.useState)(undefined), comment = _f[0], setComment = _f[1];
+    var _g = (0, react_1.useState)(false), isValidatingAddress = _g[0], setIsValidatingAddress = _g[1];
+    var scannerAddressQrCodeRef = (0, react_1.useRef)(null);
+    var _h = (0, react_1.useState)(false), isEstimatingFee = _h[0], setIsLoadingEstimateFee = _h[1];
+    var _j = (0, react_1.useState)(), estimateFee = _j[0], setEstimateFee = _j[1];
+    var _k = (0, react_1.useState)(false), isEnoughBalanceToPayFee = _k[0], setIsEnoughBalanceToPayFee = _k[1];
+    var _l = (0, react_1.useState)(false), isKeyboardOpen = _l[0], setIsKeyboardOpen = _l[1];
+    var _m = (0, react_1.useState)(), selectedNetwork = _m[0], setSelectedNetwork = _m[1];
+    var _o = (0, react_1.useState)([]), networks = _o[0], setNetworks = _o[1];
+    var selectNetworkDrawerRef = (0, react_1.useRef)(null);
+    var minValue = (0, react_1.useMemo)(function () { return +((selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.min_value) || 0); }, [selectedNetwork]);
+    var maxValue = (0, react_1.useMemo)(function () { return +((selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.max_value) || Infinity); }, [selectedNetwork]);
+    var balance = (0, react_1.useMemo)(function () { return +((selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.balance) || 0); }, [selectedToken]);
+    var keyboardId = (0, useUniqueId_1.useUniqueId)("form-keyboard");
+    var allowSelectNetwork = (0, react_1.useMemo)(function () {
+        return (networks === null || networks === void 0 ? void 0 : networks.length) >= 1 && !!recipientAddress && !recipientAddressError && !!selectedToken;
+    }, [networks, recipientAddress, recipientAddressError, selectedToken]);
+    var placeholder = (0, react_1.useMemo)(function () {
+        if (!!minValue && !!maxValue) {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { value: minValue }), " -", " ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: maxValue, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) })] }));
+        }
+        if (!!minValue && maxValue === Infinity) {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Min ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: minValue, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) })] }));
+        }
+        if (!!maxValue && maxValue !== Infinity && !minValue) {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Max ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: maxValue, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) })] }));
+        }
+        return "Enter amount";
+    }, [selectedToken, minValue, maxValue]);
+    var getEstimateFee = (0, react_1.useCallback)(function (amount) { return __awaiter(_this, void 0, void 0, function () {
+        var _this = this;
+        return __generator(this, function (_a) {
+            if (!selectedToken || !selectedNetwork) {
+                setIsLoadingEstimateFee(false);
+                setIsEnoughBalanceToPayFee(false);
+                return [2 /*return*/];
+            }
+            setIsLoadingEstimateFee(true);
+            getEstimateFeeDebounce(function () { return __awaiter(_this, void 0, void 0, function () {
+                var response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, (0, get_est_fee_service_1.default)({
+                                amount: "".concat(amount),
+                                transaction_type: type_1.TransactionSlug.WITHDRAWN,
+                                currency: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug) || "",
+                                network_slug: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.slug) || "",
+                            })];
+                        case 1:
+                            response = _a.sent();
+                            setIsLoadingEstimateFee(false);
+                            setEstimateFee(response === null || response === void 0 ? void 0 : response.data);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            return [2 /*return*/];
+        });
+    }); }, [selectedToken, selectedNetwork]);
+    var validateAmount = (0, react_1.useCallback)(function (amount) {
+        var isAmountGreaterThanMaxValue = +amount > maxValue;
+        var isAmountLessThanMinValue = +amount < minValue;
+        var isAmountGreaterThanBalance = +amount > balance;
+        if (isAmountLessThanMinValue) {
+            setAmountErrorMessage(__1.WithdrawAmountError.MIN_LIMIT);
+            setAmountError(minValue);
+            return false;
+        }
+        if (isAmountGreaterThanMaxValue) {
+            setAmountErrorMessage(__1.WithdrawAmountError.MAX_LIMIT);
+            setAmountError(maxValue);
+            return false;
+        }
+        if (isAmountGreaterThanBalance) {
+            setAmountErrorMessage(__1.WithdrawAmountError.INSUFFICIENT_BALANCE);
+            setAmountError(undefined);
+            return false;
+        }
+        setAmountError(undefined);
+        setAmountErrorMessage(undefined);
+        getEstimateFee(amount);
+        return true;
+    }, [minValue, maxValue, balance, getEstimateFee]);
+    var validateAddress = function (address) {
+        if (!address) {
+            setRecipientAddressError("The address is required");
+            return;
+        }
+        validateAddressDebounce(function () { return __awaiter(_this, void 0, void 0, function () {
+            var validateResult, message, networks_1;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        setIsValidatingAddress(true);
+                        return [4 /*yield*/, (0, validate_wallet_address_service_1.default)({
+                                address: address,
+                            })];
+                    case 1:
+                        validateResult = _b.sent();
+                        console.warn("🚀 ~ validateAddress ~ validateResult:", validateResult);
+                        setIsValidatingAddress(false);
+                        message = validateResult.message;
+                        if (message === expose_1.ValidateWalletAddressResultMessage.ERROR) {
+                            setRecipientAddressError("Something went wrong, please try again");
+                            return [2 /*return*/];
+                        }
+                        if (message === expose_1.ValidateWalletAddressResultMessage.IN_VALID) {
+                            setRecipientAddressError("The address is invalid");
+                            return [2 /*return*/];
+                        }
+                        if (message === expose_1.ValidateWalletAddressResultMessage.EXTERNAL_WALLET ||
+                            message === expose_1.ValidateWalletAddressResultMessage.EXTERNAL_WALLET_BUT_ALSO_INTERNAL_WALLET) {
+                            networks_1 = (_a = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.network_data) === null || _a === void 0 ? void 0 : _a.filter(function (item) {
+                                var _a, _b, _c, _d;
+                                return (_d = (_c = (_b = (_a = validateResult === null || validateResult === void 0 ? void 0 : validateResult.data) === null || _a === void 0 ? void 0 : _a.networks) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.call(_b, function (nw) { return nw.id; })) === null || _d === void 0 ? void 0 : _d.includes(item.id);
+                            });
+                            console.warn("🚀 ~ validateAddress ~ networks:", networks_1);
+                            if (!(networks_1 === null || networks_1 === void 0 ? void 0 : networks_1.length) || (networks_1 === null || networks_1 === void 0 ? void 0 : networks_1.length) < 1) {
+                                setRecipientAddressError("Does not have available networks support for this address and selected token");
+                                return [2 /*return*/];
+                            }
+                            setNetworks(networks_1 || []);
+                            setSelectedNetwork(undefined);
+                            setRecipientAddressError(undefined);
+                        }
+                        if (message === expose_1.ValidateWalletAddressResultMessage.IS_CURRENT_WALLET) {
+                            setRecipientAddressError("You can not send to yourself wallet");
+                            return [2 /*return*/];
+                        }
+                        if (message === expose_1.ValidateWalletAddressResultMessage.INTERNAL_WALLET) {
+                            setRecipientAddressError("The address is not an on-chain wallet");
+                            return [2 /*return*/];
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    };
+    var handleChangeRecipientAddress = function (e) {
+        var address = e.target.value.trim();
+        setRecipientAddress(address);
+        validateAddress(address);
+        setSelectedNetwork(undefined);
+        setNetworks([]);
+    };
+    var handlePaste = function () { return __awaiter(_this, void 0, void 0, function () {
+        var text, address;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, navigator.clipboard.readText()];
+                case 1:
+                    text = _a.sent();
+                    address = text.trim();
+                    if (!address) {
+                        return [2 /*return*/];
+                    }
+                    handleChangeRecipientAddress({
+                        target: { value: address },
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleClearRecipientAddress = function () {
+        handleChangeRecipientAddress({
+            target: { value: "" },
+        });
+    };
+    var handleScanAddressQrCode = function (result) { return __awaiter(_this, void 0, void 0, function () {
+        var text, address, isReceiveInternal, data;
+        var _a;
+        return __generator(this, function (_b) {
+            closeScannerAddressQrCode();
+            text = (_a = result === null || result === void 0 ? void 0 : result[0]) === null || _a === void 0 ? void 0 : _a.rawValue;
+            address = "";
+            isReceiveInternal = text === null || text === void 0 ? void 0 : text.includes("isTekWalletReceiveInternal");
+            if (isReceiveInternal) {
+                data = JSON.parse(text);
+                address = data === null || data === void 0 ? void 0 : data.address;
+            }
+            else {
+                address = text;
+            }
+            if (!address)
+                return [2 /*return*/];
+            handleChangeRecipientAddress({
+                target: { value: address },
+            });
+            return [2 /*return*/];
+        });
+    }); };
+    var handleChangeAmount = function (e) {
+        var amount = e.target.value;
+        setAmount(amount);
+    };
+    var handleKeyboardChangeAmount = function (amount) {
+        handleChangeAmount({
+            target: { value: amount },
+        });
+    };
+    var handleClickMaxAmount = function () {
+        var amount = Math.min(balance, maxValue);
+        handleChangeAmount({
+            target: { value: amount || "" },
+        });
+    };
+    var handleChangeComment = function (e) {
+        setComment(e.target.value);
+    };
+    var handleContinue = function () {
+        var _a;
+        if (!selectedNetwork)
+            return;
+        onContinue === null || onContinue === void 0 ? void 0 : onContinue({
+            amount: ((_a = amount === null || amount === void 0 ? void 0 : amount.toString) === null || _a === void 0 ? void 0 : _a.call(amount)) || "",
+            to_address: recipientAddress,
+            currency_slug: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug) || "",
+            network: selectedNetwork,
+            memo: comment || "",
+            network_address: recipientAddress,
+            extraTransactions: null,
+        }, estimateFee);
+    };
+    var openScannerAddressQrCode = function () {
+        var _a;
+        (_a = scannerAddressQrCodeRef.current) === null || _a === void 0 ? void 0 : _a.open();
+    };
+    var closeScannerAddressQrCode = function () {
+        var _a;
+        (_a = scannerAddressQrCodeRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    };
+    var handleKeyboardOpen = function () {
+        setIsKeyboardOpen(true);
+    };
+    var handleKeyboardClose = function () {
+        setIsKeyboardOpen(false);
+    };
+    var closeSelectNetwork = function () {
+        var _a;
+        (_a = selectNetworkDrawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    };
+    var handleChangeNetwork = function (network) {
+        setSelectedNetwork(network);
+        closeSelectNetwork();
+    };
+    (0, react_1.useEffect)(function () {
+        validateAmount((amount === null || amount === void 0 ? void 0 : amount.toString()) || "");
+    }, [amount, validateAmount]);
+    return ((0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { styles: {
+            container: {
+                height: "100%",
+            },
+        }, id: keyboardId, onChange: handleKeyboardChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: amount === null || amount === void 0 ? void 0 : amount.toString(), keyboardId: "form-amount-keyboard-id", onOpen: handleKeyboardOpen, onClose: handleKeyboardClose, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g16, minHeight: "100%", transition: "padding-bottom 0.3s ease-in-out" }), sx), (isKeyboardOpen
+                ? {
+                    paddingBottom: theme.mixins.customPadding.p8,
+                }
+                : {})), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                fontSize: theme.typography.fontSize14,
+                                color: theme.palette.text.black,
+                                fontWeight: theme.typography.fontWeight700,
+                            }, children: "Wallet address" }), (0, jsx_runtime_1.jsx)(Input_1.default, { sx: {
+                                paddingX: theme.mixins.customPadding.p16,
+                            }, inputRest: {
+                                placeholder: "Enter recipient address",
+                                value: recipientAddress,
+                                onChange: handleChangeRecipientAddress,
+                                id: "recipient-address-input-id",
+                            }, rightPart: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: !!recipientAddress ? ((0, jsx_runtime_1.jsx)("label", { htmlFor: "recipient-address-input-id", children: (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handleClearRecipientAddress, sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, cursor: "pointer" }), children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 12, height: 12 }, children: SvgPath_1.IC_CLOSE }) }) })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { onClick: openScannerAddressQrCode, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_SCAN", sx: { width: 18, height: 18 } }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "fullWidth", flexItem: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handlePaste, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 18, height: 18 }, children: SvgPath_1.IC_DOCUMENTS }) })] })) }) }), !!recipientAddressError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: recipientAddressError }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8, opacity: allowSelectNetwork ? 1 : 0.5, pointerEvents: allowSelectNetwork ? "auto" : "none" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                fontSize: theme.typography.fontSize14,
+                                color: theme.palette.text.black,
+                                fontWeight: theme.typography.fontWeight700,
+                            }, children: "Network" }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: selectNetworkDrawerRef, trigger: (0, jsx_runtime_1.jsx)(Input_1.default, { sx: {
+                                    paddingLeft: theme.mixins.customPadding.p12,
+                                    paddingRight: theme.mixins.customPadding.p16,
+                                }, inputRest: {
+                                    placeholder: "Select a network",
+                                    value: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.name) || "",
+                                    onChange: handleChangeRecipientAddress,
+                                    inputProps: {
+                                        readOnly: true,
+                                    },
+                                }, leftPart: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_NETWORK", src: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.link) || undefined, sx: { width: 24, height: 24 } }) }), rightPart: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: "block" }, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 10, height: 18, display: "block" }, children: SvgPath_1.ARROW_DOWN }) }) }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "Select network", onClose: closeSelectNetwork, children: (0, jsx_runtime_1.jsx)(SelectNetwork_1.default, { networks: networks, selectedNetwork: selectedNetwork, selectedToken: selectedToken, onChangeNetwork: handleChangeNetwork }) }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, alignItems: "center", justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                        fontSize: theme.typography.fontSize14,
+                                        color: theme.palette.text.black,
+                                        fontWeight: theme.typography.fontWeight700,
+                                    }, children: "Withdrawal amount" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize11, color: theme.palette.text.accent }), children: "Your balance " }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize12, color: theme.palette.text.black, fontWeight: theme.typography.fontWeight700 }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: balance, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }) })] })] }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { elementsAcceptIds: ["form-amount-keyboard-id"], value: amount === null || amount === void 0 ? void 0 : amount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, placeholder: ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", sx: { pointerEvents: "none" }, children: placeholder })), styles: {
+                                    container: {
+                                        paddingRight: theme.mixins.customPadding.p4,
+                                        paddingLeft: theme.mixins.customPadding.p16,
+                                        paddingTop: theme.mixins.customPadding.p4,
+                                        paddingBottom: theme.mixins.customPadding.p4,
+                                        border: "1px ".concat(theme.palette.border.primary, " solid"),
+                                        borderRadius: theme.mixins.customRadius.r8,
+                                    },
+                                }, rightElement: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: (0, jsx_runtime_1.jsx)(material_1.Box, { onClick: handleClickMaxAmount, sx: {
+                                            background: theme.palette.background.tertiary,
+                                            color: theme.palette.text.black,
+                                            fontSize: theme.typography.fontSize11,
+                                            fontWeight: theme.typography.fontWeight700,
+                                            borderRadius: theme.mixins.customRadius.r4,
+                                            paddingX: theme.mixins.customPadding.p16,
+                                            paddingY: theme.mixins.customPadding.p8,
+                                            border: "0px solid",
+                                            cursor: "pointer",
+                                        }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                                fontSize: theme.typography.fontSize12,
+                                                color: theme.palette.text.primary,
+                                                fontWeight: theme.typography.fontWeight500,
+                                            }, children: "Max" }) }) }) }) }), !!amountErrorMessage && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: [amountErrorMessage, " ", !!amountError && (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amountError, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) })] }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                fontSize: theme.typography.fontSize14,
+                                color: theme.palette.text.black,
+                                fontWeight: theme.typography.fontWeight700,
+                            }, children: "Comment" }), (0, jsx_runtime_1.jsx)(Input_1.default, { inputRest: {
+                                placeholder: "Enter comment if needed",
+                                value: comment,
+                                onChange: handleChangeComment,
+                            } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationDescription), children: "Enter comment if your receiving platform requires one to avoid losing your funds." })] }), (0, jsx_runtime_1.jsx)(Fees_1.default, { isFeePaidByAmount: true, feesData: estimateFee, amount: +amount, tokenSlug: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug) || "", feesStyle: Fees_1.FeesStyle.WITH_BACKGROUND, setIsEnoughBalanceToPayFee: setIsEnoughBalanceToPayFee }), (0, jsx_runtime_1.jsx)(QrCodeReader_1.default, { ref: scannerAddressQrCodeRef, onResult: handleScanAddressQrCode }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { loading: isValidatingAddress || isEstimatingFee, onClick: handleContinue, status: !recipientAddress ||
+                        !selectedNetwork ||
+                        !amount ||
+                        !!recipientAddressError ||
+                        !!amountError ||
+                        !isEnoughBalanceToPayFee
+                        ? Button_1.BUTTON_STATUS.DISABLED
+                        : Button_1.BUTTON_STATUS.ENABLED, sx: { width: "100%", marginTop: "auto" }, children: "Continue" })] }) }));
+}

package/dist/components/TekWallet/components/views/SendExternalView/components/Result.d.ts

@@ -0,0 +1,14 @@
+import { ReactEventHandler } from "react";
+import { WithdrawCurrency } from "../../../../services/axios/get-withdraw-tokens-list-service/type";
+import { FeesDataType } from "../../../../services/axios/get-est-fee-service/type";
+import { SendExternalResponse } from "../../../../services/axios/send-external-service/type";
+import { SendExternalDataType } from "../../../ui/ConfirmSendExternal";
+interface ResultProps {
+    transaction?: SendExternalResponse["data"];
+    onDone?: ReactEventHandler;
+    payload?: SendExternalDataType;
+    estimateFee?: FeesDataType;
+    selectedToken?: WithdrawCurrency;
+}
+export default function Result(props: ResultProps): import("react/jsx-runtime").JSX.Element;
+export type { ResultProps };

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

@@ -0,0 +1,140 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Result;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var Text_1 = __importDefault(require("../../../ui/Text"));
+var InlineTitleValue_1 = __importDefault(require("../../../ui/InlineTitleValue"));
+var CopyTextComponent_1 = __importDefault(require("../../../ui/CopyTextComponent"));
+var SvgPath_1 = require("../../../ui/SvgPath");
+var Fees_1 = __importStar(require("../../../ui/Fees"));
+var safeText_1 = require("../../../../utils/safeText");
+var react_1 = require("react");
+var Button_1 = __importDefault(require("../../../ui/Button"));
+var providers_1 = require("../../../../providers");
+var Formatter_1 = __importDefault(require("../../../ui/Formatter"));
+var Icon_1 = __importDefault(require("../../../ui/Icon"));
+var useFormatter_1 = __importDefault(require("../../../../hooks/useFormatter"));
+var getIconKey = function (status) {
+    if (status === "success")
+        return "IC_CHECK_CIRCLE";
+    if (status === "failed")
+        return "IC_ERROR_CIRCLE";
+    return "IC_PROCESSING_CIRCLE";
+};
+function Result(props) {
+    var _a;
+    var theme = (0, providers_1.useTheme)();
+    var formatDate = (0, useFormatter_1.default)().formatDate;
+    var response = props.transaction, onDone = props.onDone, payload = props.payload, selectedToken = props.selectedToken;
+    var status = (0, react_1.useMemo)(function () { return (response === null || response === void 0 ? void 0 : response.transaction_status) || "failed"; }, [response === null || response === void 0 ? void 0 : response.transaction_status]);
+    var recipientAddress = (0, react_1.useMemo)(function () { return (response === null || response === void 0 ? void 0 : response.to_address) || (payload === null || payload === void 0 ? void 0 : payload.to_address); }, [response === null || response === void 0 ? void 0 : response.to_address, payload === null || payload === void 0 ? void 0 : payload.to_address]);
+    var amount = (0, react_1.useMemo)(function () { return (response === null || response === void 0 ? void 0 : response.amount) || (payload === null || payload === void 0 ? void 0 : payload.amount); }, [response === null || response === void 0 ? void 0 : response.amount, payload === null || payload === void 0 ? void 0 : payload.amount]);
+    var message = (0, react_1.useMemo)(function () { return (response === null || response === void 0 ? void 0 : response.description) || (payload === null || payload === void 0 ? void 0 : payload.memo); }, [response === null || response === void 0 ? void 0 : response.description, payload === null || payload === void 0 ? void 0 : payload.memo]);
+    var feeInfo = (0, react_1.useMemo)(function () { return response === null || response === void 0 ? void 0 : response.fee_info; }, [response === null || response === void 0 ? void 0 : response.fee_info]);
+    var dateCreated = (0, react_1.useMemo)(function () { return response === null || response === void 0 ? void 0 : response.date_created; }, [response === null || response === void 0 ? void 0 : response.date_created]);
+    var tokenName = (0, react_1.useMemo)(function () { var _a; return ((_a = response === null || response === void 0 ? void 0 : response.currency_data) === null || _a === void 0 ? void 0 : _a.name) || (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name); }, [(_a = response === null || response === void 0 ? void 0 : response.currency_data) === null || _a === void 0 ? void 0 : _a.name, selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name]);
+    var networkInfo = (0, react_1.useMemo)(function () { return (response === null || response === void 0 ? void 0 : response.network_data) || (payload === null || payload === void 0 ? void 0 : payload.network); }, [response === null || response === void 0 ? void 0 : response.network_data, payload === null || payload === void 0 ? void 0 : payload.network]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 3,
+            height: "100%",
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: theme.mixins.gaps.g16,
+                    my: "auto",
+                    backgroundColor: theme.palette.background.tertiary,
+                    borderRadius: theme.mixins.customRadius.r16,
+                    padding: theme.mixins.customPadding.p16,
+                    paddingTop: "0px",
+                }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: getIconKey(status), width: 100, sx: {
+                            transform: "translateY(-50%)",
+                        } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    fontSize: theme.typography.fontSize13,
+                                    color: theme.palette.text.accent2,
+                                }, children: "Withdraw" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    color: theme.palette.text.primary,
+                                    textTransform: "capitalize",
+                                    fontWeight: 600,
+                                    fontSize: theme.typography.fontSize24,
+                                }, children: status })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", borderTop: "1px ".concat(theme.palette.border.accent3, " solid") } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.bigValue), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { start: "- ", value: amount, unit: tokenName }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", borderTop: "1px ".concat(theme.palette.border.accent3, " solid") } }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Recipient address", titleStyle: {
+                            fontSize: "0.6875rem",
+                            fontWeight: 500,
+                            color: "gray.700",
+                        }, value: (0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: recipientAddress || "", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex flex-row gap-2 items-center", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: (0, safeText_1.safeText)(recipientAddress || "", { isShort: true }) }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
+                                            width: 16,
+                                            height: 16,
+                                        }, children: SvgPath_1.IC_COPY })] }) }), isAligned: true }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Network", titleStyle: {
+                            fontSize: "0.6875rem",
+                            fontWeight: 500,
+                            color: "gray.700",
+                        }, value: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex gap-2 items-center", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: networkInfo === null || networkInfo === void 0 ? void 0 : networkInfo.link, width: 20 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: networkInfo === null || networkInfo === void 0 ? void 0 : networkInfo.name })] }), isAligned: true }), message && ((0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Message", titleStyle: {
+                            fontSize: "0.6875rem",
+                            fontWeight: 500,
+                            color: "gray.700",
+                        }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: message }), isAligned: true })), dateCreated && ((0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Date time", titleStyle: {
+                            fontSize: "0.6875rem",
+                            fontWeight: 500,
+                            color: "gray.700",
+                        }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: formatDate(dateCreated, true) }), isAligned: true })), !!feeInfo && ((0, jsx_runtime_1.jsx)(Fees_1.default, { isFeePaidByAmount: true, feesData: feeInfo, amount: +(amount || 0), tokenSlug: (response === null || response === void 0 ? void 0 : response.currency_slug) || "", feesStyle: Fees_1.FeesStyle.DEFAULT }))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    marginTop: "auto",
+                    width: "100%",
+                    display: "grid",
+                    gridTemplateColumns: "1fr",
+                    gap: theme.mixins.gaps.g8,
+                }, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100%" }, onClick: onDone, children: "Done" }) })] }));
+}

package/dist/components/TekWallet/components/views/SendExternalView/components/SelectNetwork.d.ts

@@ -0,0 +1,10 @@
+import { NetworkData } from "../../../../services/axios/type";
+import { WithdrawCurrency } from "../../../../services/axios/get-withdraw-tokens-list-service/type";
+export interface SelectNetworkProps {
+    networks?: NetworkData[];
+    selectedNetwork?: NetworkData;
+    selectedToken?: WithdrawCurrency;
+    onChangeNetwork?: (network?: NetworkData) => void;
+}
+declare function SelectNetwork(props: SelectNetworkProps): import("react/jsx-runtime").JSX.Element;
+export default SelectNetwork;