tek-wallet 0.0.752 → 0.0.754

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

@@ -0,0 +1,173 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var providers_1 = require("../../../../providers");
+var TokenSelection_1 = __importDefault(require("../../../ui/TokenSelection"));
+var SvgPath_1 = require("../../../ui/SvgPath");
+var EmptyData_1 = __importDefault(require("../../../ui/EmptyData"));
+var WaitingData_1 = __importDefault(require("../../../ui/WaitingData"));
+var react_1 = require("react");
+var lodash_1 = require("lodash");
+var SortGroup_1 = __importStar(require("../../../ui/ReceiveFunction/components/SortGroup"));
+var SortTool_1 = require("../../../ui/ReceiveFunction/components/SortTool");
+var searchDebounce = (0, lodash_1.debounce)(function (callback) {
+    callback();
+}, 500, { leading: true, trailing: true });
+var SelectToken = function (props) {
+    var theme = (0, providers_1.useTheme)();
+    var _a = (0, react_1.useState)(""), searchValue = _a[0], setSearchValue = _a[1];
+    var _b = (0, react_1.useState)(), searchedReceiveTokens = _b[0], setSearchedReceiveTokens = _b[1];
+    var _c = (0, react_1.useState)([]), tokenRender = _c[0], setTokenRender = _c[1];
+    var tokens = props.tokens, selectedToken = props.selectedToken, onChangeToken = props.onChangeToken;
+    var isSearching = (0, react_1.useMemo)(function () {
+        return searchValue.length > 0;
+    }, [searchValue]);
+    var isLoadingDepositTokens = (0, react_1.useMemo)(function () {
+        return !tokens;
+    }, [tokens]);
+    var isEmptyDepositTokens = (0, react_1.useMemo)(function () {
+        return !isLoadingDepositTokens && (tokens === null || tokens === void 0 ? void 0 : tokens.length) === 0;
+    }, [isLoadingDepositTokens, tokens]);
+    var isEmptySearch = (0, react_1.useMemo)(function () {
+        return isSearching && (searchedReceiveTokens === null || searchedReceiveTokens === void 0 ? void 0 : searchedReceiveTokens.length) === 0;
+    }, [isSearching, searchedReceiveTokens]);
+    var handleClearSearch = function () {
+        setSearchValue("");
+    };
+    var handleSelectToken = function (token) {
+        onChangeToken === null || onChangeToken === void 0 ? void 0 : onChangeToken(token);
+    };
+    var handleSearch = function (e) {
+        var searchValue = e.target.value;
+        setSearchValue(searchValue);
+        searchDebounce(function () {
+            if (searchValue.length > 0) {
+                var filteredTokens = tokens === null || tokens === void 0 ? void 0 : tokens.filter(function (item) {
+                    return item.name.toLowerCase().includes(searchValue.toLowerCase());
+                });
+                setSearchedReceiveTokens(filteredTokens || []);
+            }
+            else {
+                setSearchedReceiveTokens(tokens);
+            }
+        });
+    };
+    var handleSort = function (sortBy, sortOrder) {
+        var sortedTokens = __spreadArray([], tokenRender, true);
+        sortedTokens.sort(function (a, b) {
+            var _a, _b;
+            if (sortBy === SortGroup_1.SortByType.Name) {
+                return sortOrder === SortTool_1.SortOrder.ASC
+                    ? ((_a = a === null || a === void 0 ? void 0 : a.name) === null || _a === void 0 ? void 0 : _a.localeCompare((b === null || b === void 0 ? void 0 : b.name) || "")) || 0
+                    : ((_b = b === null || b === void 0 ? void 0 : b.name) === null || _b === void 0 ? void 0 : _b.localeCompare((a === null || a === void 0 ? void 0 : a.name) || "")) || 0;
+            }
+            return sortOrder === SortTool_1.SortOrder.ASC
+                ? +((a === null || a === void 0 ? void 0 : a.balance) || 0) - +((b === null || b === void 0 ? void 0 : b.balance) || 0)
+                : +((b === null || b === void 0 ? void 0 : b.balance) || 0) - +((a === null || a === void 0 ? void 0 : a.balance) || 0);
+        });
+        setTokenRender(sortedTokens);
+    };
+    (0, react_1.useEffect)(function () {
+        if (isSearching) {
+            setTokenRender(searchedReceiveTokens || []);
+        }
+        else {
+            setTokenRender(tokens || []);
+        }
+    }, [isSearching, searchedReceiveTokens, tokens]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content" }), children: [!isEmptyDepositTokens && !isLoadingDepositTokens && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    position: "sticky",
+                    backgroundColor: theme.palette.background.white,
+                    zIndex: 100,
+                    top: "0px",
+                    pb: theme.mixins.customPadding.p12,
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.InputBase, { onChange: handleSearch, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_SEARCH }) }), value: searchValue, placeholder: "Search", sx: {
+                            borderRadius: theme.mixins.customRadius.r12,
+                            border: "1px solid",
+                            borderColor: theme.palette.border.accent3,
+                            background: theme.palette.background.white,
+                            color: theme.palette.text.black,
+                            py: theme.mixins.customPadding.p6,
+                            px: theme.mixins.customPadding.p12,
+                            fontSize: theme.typography.fontSize16,
+                            width: "100%",
+                            lineHeight: "100%",
+                            "input::placeholder": {
+                                fontSize: theme.typography.fontSize12,
+                                pl: theme.mixins.customPadding.p4,
+                                fontWeight: theme.typography.fontWeight500,
+                                color: theme.palette.text.black,
+                                lineHeight: "100%",
+                            },
+                        }, endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: {
+                                visibility: isSearching ? "visible" : "hidden",
+                            }, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
+                                    width: 20,
+                                    height: 20,
+                                    p: theme.mixins.customPadding.p4,
+                                    cursor: "pointer",
+                                }, onClick: handleClearSearch, children: SvgPath_1.IC_CLOSE }) }) }), (tokenRender === null || tokenRender === void 0 ? void 0 : tokenRender.length) > 0 && (0, jsx_runtime_1.jsx)(SortGroup_1.default, { onChange: handleSort })] })), isLoadingDepositTokens && (0, jsx_runtime_1.jsx)(WaitingData_1.default, { numberOfSkeleton: 8 }), isEmptyDepositTokens && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { py: "4rem" }, title: "No deposit tokens", description: "No deposit tokens" })), isSearching && isEmptySearch && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { py: "4rem" }, title: "No search results", description: "Let's try again with a different search" })), tokenRender === null || tokenRender === void 0 ? void 0 : tokenRender.map(function (item, index) {
+                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)));
+            })] }));
+};
+exports.default = SelectToken;

package/dist/components/TekWallet/components/views/SendInternalView/components/Summary.d.ts

@@ -0,0 +1,11 @@
+import { FeesDataType } from "../../../../services/axios/get-est-fee-service/type";
+import { WithdrawCurrency } from "../../../../services/axios/get-withdraw-tokens-list-service/type";
+import { ConfirmSendInternalProps, SendInternalDataType } from "../../../ui/ConfirmSendInternal";
+interface SummaryProps {
+    estimateFee?: FeesDataType;
+    selectedToken?: WithdrawCurrency;
+    payload: SendInternalDataType;
+    confirmProps?: Omit<ConfirmSendInternalProps, "payload">;
+}
+export default function Summary(props: SummaryProps): import("react/jsx-runtime").JSX.Element;
+export type { SummaryProps };

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

@@ -0,0 +1,126 @@
+"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 __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.default = Summary;
+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 ConfirmSendInternal_1 = __importDefault(require("../../../ui/ConfirmSendInternal"));
+var react_1 = require("react");
+var Button_1 = __importStar(require("../../../ui/Button"));
+var providers_1 = require("../../../../providers");
+var Formatter_1 = __importDefault(require("../../../ui/Formatter"));
+function Summary(props) {
+    var estimateFee = props.estimateFee, selectedToken = props.selectedToken, payload = props.payload, confirmProps = props.confirmProps;
+    var _a = confirmProps || {}, onSuccess = _a.onSuccess, onError = _a.onError, onStart = _a.onStart, onFinally = _a.onFinally, confirmPropsRest = __rest(_a, ["onSuccess", "onError", "onStart", "onFinally"]);
+    var theme = (0, providers_1.useTheme)();
+    var recipientAddress = (0, react_1.useMemo)(function () { return payload.to_address; }, [payload.to_address]);
+    var amount = (0, react_1.useMemo)(function () { return payload.amount; }, [payload.amount]);
+    var message = (0, react_1.useMemo)(function () { return payload.message; }, [payload.message]);
+    var _b = (0, react_1.useState)(Button_1.BUTTON_STATUS.ENABLED), confirmButtonStatus = _b[0], setContinueButtonStatus = _b[1];
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 3,
+            height: "100%",
+        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                    fontSize: 16,
+                    fontWeight: 600,
+                }, children: "Transaction summary" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 3,
+                }, children: [(0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Amount", titleStyle: {
+                            fontSize: "0.6875rem",
+                            fontWeight: 500,
+                            color: "gray.700",
+                        }, value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount, unit: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name }) }), isAligned: true }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Recipient address", 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 }), 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 })), (0, jsx_runtime_1.jsx)(Fees_1.default, { isFeePaidByAmount: true, feesData: estimateFee, amount: +(amount || 0), tokenSlug: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug) || "", feesStyle: Fees_1.FeesStyle.DEFAULT })] }), (0, jsx_runtime_1.jsx)(ConfirmSendInternal_1.default, __assign({ sx: {
+                    width: "100%",
+                    marginTop: "auto",
+                }, payload: payload }, confirmPropsRest, { onSuccess: function (res) {
+                    setContinueButtonStatus(Button_1.BUTTON_STATUS.ENABLED);
+                    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
+                }, onError: function (err) {
+                    setContinueButtonStatus(Button_1.BUTTON_STATUS.DISABLED);
+                    onError === null || onError === void 0 ? void 0 : onError(err);
+                }, onStart: function () {
+                    setContinueButtonStatus(Button_1.BUTTON_STATUS.LOADING);
+                    onStart === null || onStart === void 0 ? void 0 : onStart();
+                }, onFinally: function () {
+                    setContinueButtonStatus(Button_1.BUTTON_STATUS.ENABLED);
+                    onFinally === null || onFinally === void 0 ? void 0 : onFinally();
+                }, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { loading: confirmButtonStatus === Button_1.BUTTON_STATUS.LOADING, status: !recipientAddress || !amount ? Button_1.BUTTON_STATUS.DISABLED : confirmButtonStatus, sx: { width: "100%" }, children: "Confirm" }) }))] }));
+}

package/dist/components/TekWallet/components/views/SendInternalView/index.d.ts

@@ -0,0 +1,24 @@
+import { ReactEventHandler } from "react";
+import { GeneralProps } from "../../../types/ui";
+interface SendInternalViewProps extends GeneralProps {
+    onClose?: ReactEventHandler;
+    onOpen?: ReactEventHandler;
+    onSendSuccess?: (response: any) => void;
+}
+type SendInternalViewRef = {
+    open: () => void;
+    close: () => void;
+};
+export declare enum TransferStep {
+    SELECT_TOKEN = 0,
+    FORM = 1,
+    CONFIRM = 2,
+    RESULT = 3
+}
+export declare enum InternalAmountError {
+    INSUFFICIENT_BALANCE = "\u24D8 Insufficient balance",
+    MAX_LIMIT = "\u24D8 Enter a maximum amount of",
+    MIN_LIMIT = "\u24D8 Enter a minimum amount of"
+}
+export declare const SendInternalView: import("react").ForwardRefExoticComponent<SendInternalViewProps & import("react").RefAttributes<SendInternalViewRef>>;
+export default SendInternalView;

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

@@ -0,0 +1,155 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SendInternalView = exports.InternalAmountError = exports.TransferStep = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var SwiperControlled_1 = __importDefault(require("../../ui/SwiperControlled"));
+var useWalletData_1 = __importDefault(require("../../../hooks/useWalletData"));
+var react_2 = require("swiper/react");
+var useWithdrawData_1 = __importDefault(require("../../../hooks/useWithdrawData"));
+var SelectToken_1 = __importDefault(require("./components/SelectToken"));
+var Form_1 = __importDefault(require("./components/Form"));
+var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
+var PageHeader_1 = __importDefault(require("../../ui/PageHeader"));
+var DefaultPageLayout_1 = __importDefault(require("../../layouts/DefaultPageLayout"));
+var Summary_1 = __importDefault(require("./components/Summary"));
+var Result_1 = __importDefault(require("./components/Result"));
+var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"));
+var providers_1 = require("../../../providers");
+var TransferStep;
+(function (TransferStep) {
+    TransferStep[TransferStep["SELECT_TOKEN"] = 0] = "SELECT_TOKEN";
+    TransferStep[TransferStep["FORM"] = 1] = "FORM";
+    TransferStep[TransferStep["CONFIRM"] = 2] = "CONFIRM";
+    TransferStep[TransferStep["RESULT"] = 3] = "RESULT";
+})(TransferStep || (exports.TransferStep = TransferStep = {}));
+var WITHDRAW_STEP_NAME = (_a = {},
+    _a[TransferStep.SELECT_TOKEN] = "Select token",
+    _a[TransferStep.FORM] = "Form",
+    _a[TransferStep.CONFIRM] = "Confirm",
+    _a[TransferStep.RESULT] = "Result",
+    _a);
+var InternalAmountError;
+(function (InternalAmountError) {
+    InternalAmountError["INSUFFICIENT_BALANCE"] = "\u24D8 Insufficient balance";
+    InternalAmountError["MAX_LIMIT"] = "\u24D8 Enter a maximum amount of";
+    InternalAmountError["MIN_LIMIT"] = "\u24D8 Enter a minimum amount of";
+})(InternalAmountError || (exports.InternalAmountError = InternalAmountError = {}));
+exports.SendInternalView = (0, react_1.forwardRef)(function (props, ref) {
+    var isInitPasscode = (0, useWalletData_1.default)().isInitPasscode;
+    var _a = (0, useWithdrawData_1.default)(), updateSendInternalToken = _a.updateSendInternalToken, sendInternalTokens = _a.sendInternalTokens;
+    var theme = (0, providers_1.useTheme)();
+    var router = (0, useCustomRouter_1.default)();
+    var drawerRef = (0, react_1.useRef)(null);
+    var stepsRef = (0, react_1.useRef)(null);
+    var swiperRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(TransferStep.SELECT_TOKEN), currentStep = _b[0], setCurrentStep = _b[1];
+    var _c = (0, react_1.useState)(), selectedToken = _c[0], setSelectedToken = _c[1];
+    var _d = (0, react_1.useState)(), payload = _d[0], setPayload = _d[1];
+    var _e = (0, react_1.useState)(), estimateFee = _e[0], setEstimateFee = _e[1];
+    var _f = (0, react_1.useState)(""), clearFormKey = _f[0], setClearFormKey = _f[1];
+    var _g = (0, react_1.useState)(), response = _g[0], setResponse = _g[1];
+    var _h = (0, react_1.useState)(false), isChangeSlidePromptly = _h[0], setIsChangeSlidePromptly = _h[1];
+    var withdrawTokens = (0, react_1.useMemo)(function () {
+        return sendInternalTokens;
+    }, [sendInternalTokens]);
+    var clearValues = (0, react_1.useCallback)(function () {
+        setSelectedToken(undefined);
+        setClearFormKey(function (prev) { return prev + 1; });
+    }, []);
+    var close = function () {
+        var _a;
+        (_a = drawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    };
+    var gotoStep = (0, react_1.useCallback)(function (step) {
+        var _a, _b;
+        if (step === TransferStep.SELECT_TOKEN) {
+            clearValues();
+            (_a = stepsRef.current) === null || _a === void 0 ? void 0 : _a.close();
+        }
+        setCurrentStep(step);
+        (_b = swiperRef.current) === null || _b === void 0 ? void 0 : _b.slideTo(step);
+    }, [clearValues]);
+    var open = function () {
+        var _a;
+        (_a = drawerRef.current) === null || _a === void 0 ? void 0 : _a.open();
+    };
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        open: open,
+        close: close,
+    }); });
+    var handleBack = function () {
+        if (currentStep === TransferStep.RESULT) {
+            gotoStep(TransferStep.SELECT_TOKEN);
+            return;
+        }
+        if (currentStep === TransferStep.SELECT_TOKEN) {
+            clearValues();
+            router.back();
+            return;
+        }
+        gotoStep(currentStep - 1);
+    };
+    var handleCloseResult = (0, react_1.useCallback)(function () {
+        gotoStep(TransferStep.SELECT_TOKEN);
+        setIsChangeSlidePromptly(false);
+    }, [gotoStep]);
+    var gotoConfirmStep = function (payload, estimateFee) {
+        gotoStep(TransferStep.CONFIRM);
+        setPayload(payload);
+        setEstimateFee(estimateFee);
+    };
+    var handleSelectToken = function (token) {
+        setSelectedToken(token);
+        gotoStep(TransferStep.FORM);
+    };
+    var handleSendSuccess = (0, react_1.useCallback)(function (res) {
+        setResponse(res);
+        gotoStep(TransferStep.RESULT);
+        setIsChangeSlidePromptly(true);
+    }, [gotoStep]);
+    (0, react_1.useEffect)(function () {
+        if (isInitPasscode && !sendInternalTokens) {
+            updateSendInternalToken();
+        }
+    }, [isInitPasscode, sendInternalTokens]);
+    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: currentStep < TransferStep.RESULT && ((0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: WITHDRAW_STEP_NAME[currentStep], overrideBack: handleBack })), children: (0, jsx_runtime_1.jsxs)(SwiperControlled_1.default, { disableSwipe: true, ref: swiperRef, swiperProps: {
+                spaceBetween: 32,
+                speed: isChangeSlidePromptly ? 0 : 500,
+            }, sx: {
+                height: "100%",
+            }, swiperStyle: {
+                height: "100%",
+            }, children: [(0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: { minHeight: "100%" }, children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { children: (0, jsx_runtime_1.jsx)(SelectToken_1.default, { tokens: withdrawTokens, selectedToken: selectedToken, onChangeToken: handleSelectToken }) }) }, TransferStep.SELECT_TOKEN), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: { minHeight: "100%" }, children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: {
+                            height: "100%",
+                            paddingLeft: "0px",
+                            paddingRight: "0px",
+                            paddingTop: "0px",
+                            paddingBottom: "0px",
+                        }, children: (0, jsx_runtime_1.jsx)(Form_1.default, { sx: __assign({}, theme.mixins.pagePadding), selectedToken: selectedToken, onContinue: gotoConfirmStep }, clearFormKey) }) }, TransferStep.FORM), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: { minHeight: "100%" }, children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: {
+                            height: "100%",
+                        }, children: payload && ((0, jsx_runtime_1.jsx)(Summary_1.default, { estimateFee: estimateFee, payload: __assign(__assign({}, payload), { await_completion: true }), selectedToken: selectedToken, confirmProps: {
+                                onSuccess: handleSendSuccess,
+                            } })) }) }, TransferStep.CONFIRM), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: { minHeight: "100%" }, children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: {
+                            height: "100%",
+                        }, children: (0, jsx_runtime_1.jsx)(Result_1.default, { response: response, payload: payload, estimateFee: estimateFee, selectedToken: selectedToken, onDone: handleCloseResult }) }) }, TransferStep.RESULT)] }) }));
+});
+exports.SendInternalView.displayName = "SendInternalView";
+exports.default = exports.SendInternalView;

package/dist/components/TekWallet/components/views/SwapView/components/CardTo/index.d.ts

@@ -0,0 +1,11 @@
+import { Output, SupportedToken } from "../../../../../services/axios/get-swap-tokens-list-service/type";
+interface Props {
+    className?: string;
+    selectedFromToken?: SupportedToken;
+    selectedToToken?: Output;
+    fromAmount?: number;
+    onClick?: () => void;
+    onChangeToToken?: (token: Output) => void;
+}
+declare const CardTo: ({ selectedToToken, selectedFromToken, fromAmount, onChangeToToken }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CardTo;

package/dist/components/TekWallet/components/views/SwapView/components/CardTo/index.js

@@ -0,0 +1,111 @@
+"use strict";
+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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_1 = require("react");
+var Icon_1 = __importDefault(require("../../../../ui/Icon"));
+var providers_1 = require("../../../../../providers");
+var Text_1 = __importDefault(require("../../../../ui/Text"));
+var SvgPath_1 = require("../../../../ui/SvgPath");
+var Formatter_1 = __importDefault(require("../../../../ui/Formatter"));
+var DrawerComponent_1 = __importStar(require("../../../../ui/DrawerComponent"));
+var ChildPageLayout_1 = __importDefault(require("../../../../layouts/ChildPageLayout"));
+var DefaultPageLayout_1 = __importDefault(require("../../../../layouts/DefaultPageLayout"));
+var PageHeader_1 = __importDefault(require("../../../../ui/PageHeader"));
+var SelectToken_1 = __importDefault(require("../SelectToken"));
+var CardTo = function (_a) {
+    var selectedToToken = _a.selectedToToken, selectedFromToken = _a.selectedFromToken, fromAmount = _a.fromAmount, onChangeToToken = _a.onChangeToToken;
+    var selectTokenRef = (0, react_1.useRef)(null);
+    var receiveAmountEst = (0, react_1.useMemo)(function () {
+        try {
+            var inputAmount = +(fromAmount !== null && fromAmount !== void 0 ? fromAmount : 0);
+            if (!inputAmount) {
+                return 0;
+            }
+            var fromUSDRate = Number(selectedFromToken === null || selectedFromToken === void 0 ? void 0 : selectedFromToken.usd_rate);
+            var toUSDRate = Number(selectedToToken === null || selectedToToken === void 0 ? void 0 : selectedToToken.usd_rate);
+            return (fromUSDRate * inputAmount) / toUSDRate;
+        }
+        catch (error) {
+            console.warn("🚀 ~ CardTo ~ error:", error);
+            return 0;
+        }
+    }, [fromAmount, selectedFromToken === null || selectedFromToken === void 0 ? void 0 : selectedFromToken.usd_rate, selectedToToken === null || selectedToToken === void 0 ? void 0 : selectedToToken.usd_rate]);
+    var theme = (0, providers_1.useTheme)();
+    var outputTokens = (0, react_1.useMemo)(function () {
+        var _a;
+        return (_a = selectedFromToken === null || selectedFromToken === void 0 ? void 0 : selectedFromToken.outputs) !== null && _a !== void 0 ? _a : [];
+    }, [selectedFromToken === null || selectedFromToken === void 0 ? void 0 : selectedFromToken.slug]);
+    var closeSelectToken = function () {
+        var _a;
+        (_a = selectTokenRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    };
+    var handleSelectToken = function (token) {
+        onChangeToToken === null || onChangeToToken === void 0 ? void 0 : onChangeToToken(token);
+        closeSelectToken();
+    };
+    var selectDefaultToToken = (0, react_1.useCallback)(function () {
+        var isExist = outputTokens.some(function (token) { return token.id === (selectedToToken === null || selectedToToken === void 0 ? void 0 : selectedToToken.id); });
+        if (!isExist) {
+            onChangeToToken === null || onChangeToToken === void 0 ? void 0 : onChangeToToken(outputTokens[0]);
+        }
+    }, [outputTokens, selectedToToken === null || selectedToToken === void 0 ? void 0 : selectedToToken.id, onChangeToToken]);
+    (0, react_1.useEffect)(function () {
+        selectDefaultToToken();
+    }, [selectDefaultToToken]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            padding: theme.mixins.customPadding.p12,
+            backgroundColor: theme.palette.background.tertiary,
+            borderRadius: theme.mixins.customRadius.r12,
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { className: "flex justify-between", children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                        color: theme.palette.text.blackContrast,
+                        fontWeight: theme.typography.fontWeight600,
+                    }, children: "To" }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex justify-between mt-5 mb-4", children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: selectTokenRef, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, trigger: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-1 cursor-pointer", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: selectedToToken === null || selectedToToken === void 0 ? void 0 : selectedToToken.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                        color: theme.palette.text.blackContrast,
+                                        fontWeight: theme.typography.fontWeight600,
+                                    }, children: (selectedToToken === null || selectedToToken === void 0 ? void 0 : selectedToToken.name) || (selectedToToken === null || selectedToToken === void 0 ? void 0 : selectedToToken.full_name) }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 10, height: 10 }, children: SvgPath_1.IC_ARROW_BLACK_DROP })] }), children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Select Token", overrideBack: closeSelectToken }), children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: {
+                                    width: "100dvw",
+                                    height: "100dvh",
+                                }, children: (0, jsx_runtime_1.jsx)(SelectToken_1.default, { tokens: outputTokens, selectedToken: selectedToToken, onChangeToken: handleSelectToken }) }) }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                            color: theme.palette.text.blackContrast,
+                            fontWeight: theme.typography.fontWeight600,
+                            fontSize: theme.typography.fontSize16,
+                        }, children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: receiveAmountEst, unit: selectedToToken === null || selectedToToken === void 0 ? void 0 : selectedToToken.name }) })] })] }));
+};
+exports.default = CardTo;

package/dist/components/TekWallet/components/views/SwapView/components/FromCard/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { SupportedToken } from "../../../../../services/axios/get-swap-tokens-list-service/type";
+interface Props {
+    className?: string;
+    selectedToken?: SupportedToken;
+    amount?: number | string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChangeToken?: (token: SupportedToken) => void;
+    setFromInfoIsReady?: (isReady: boolean) => void;
+    keyboardId?: string;
+    amountWasChanged?: boolean;
+}
+declare const CardForm: ({ selectedToken, onChange, amount, onChangeToken, setFromInfoIsReady, keyboardId, amountWasChanged, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CardForm;