tek-wallet 0.0.752 → 0.0.753

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

@@ -0,0 +1,180 @@
+"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 useWallet_1 = __importDefault(require("../../../../../hooks/useWallet"));
+var Button_1 = __importDefault(require("../../../../ui/Button"));
+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 SelectToken_1 = __importDefault(require("../SelectToken"));
+var DefaultPageLayout_1 = __importDefault(require("../../../../layouts/DefaultPageLayout"));
+var ChildPageLayout_1 = __importDefault(require("../../../../layouts/ChildPageLayout"));
+var PageHeader_1 = __importDefault(require("../../../../ui/PageHeader"));
+var useValidateAmount_1 = __importDefault(require("../../../../../hooks/useValidateAmount"));
+var xhub_keyboard_1 = require("xhub-keyboard");
+var CardForm = function (_a) {
+    var _b, _c, _d;
+    var selectedToken = _a.selectedToken, onChange = _a.onChange, amount = _a.amount, onChangeToken = _a.onChangeToken, setFromInfoIsReady = _a.setFromInfoIsReady, keyboardId = _a.keyboardId, _e = _a.amountWasChanged, amountWasChanged = _e === void 0 ? true : _e;
+    var _f = (0, useWallet_1.default)(), updateSwapTokens = _f.updateSwapTokens, fromTokens = _f.fromTokens, isInitPasscode = _f.isInitPasscode;
+    var theme = (0, providers_1.useTheme)();
+    var selectTokenRef = (0, react_1.useRef)(null);
+    var _g = (0, useValidateAmount_1.default)({
+        validationData: {
+            amount: +(amount !== null && amount !== void 0 ? amount : 0),
+            min: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.min_value,
+            max: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.max_value,
+            balance: +((_b = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.balance) !== null && _b !== void 0 ? _b : 0),
+            tokenName: (_c = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) !== null && _c !== void 0 ? _c : "",
+        },
+    }), errorContent = _g.errorContent, placeholder = _g.placeholder;
+    var shouldShowError = (0, react_1.useMemo)(function () {
+        return amountWasChanged && !!errorContent;
+    }, [amountWasChanged, errorContent]);
+    var handleClickGetMaxValue = function () {
+        if ((selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.max_value) && onChange) {
+            var balance = Number(selectedToken.balance);
+            var maxValue = Number(selectedToken.max_value);
+            var minValue = Math.min(balance, maxValue);
+            onChange({
+                target: { value: minValue.toString() },
+            });
+        }
+    };
+    var closeSelectToken = function () {
+        var _a;
+        (_a = selectTokenRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    };
+    var handleSelectToken = function (token) {
+        onChangeToken === null || onChangeToken === void 0 ? void 0 : onChangeToken(token);
+        closeSelectToken();
+    };
+    (0, react_1.useEffect)(function () {
+        if (!fromTokens && isInitPasscode) {
+            updateSwapTokens();
+        }
+    }, [fromTokens, updateSwapTokens, isInitPasscode]);
+    (0, react_1.useEffect)(function () {
+        if (!fromTokens)
+            return;
+        var isSelectedTokenInFromTokens = fromTokens === null || fromTokens === void 0 ? void 0 : fromTokens.some(function (token) { return token.id === (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.id); });
+        if (!isSelectedTokenInFromTokens) {
+            onChangeToken === null || onChangeToken === void 0 ? void 0 : onChangeToken(fromTokens === null || fromTokens === void 0 ? void 0 : fromTokens[0]);
+        }
+    }, [fromTokens, onChangeToken, selectedToken]);
+    (0, react_1.useEffect)(function () {
+        setFromInfoIsReady === null || setFromInfoIsReady === void 0 ? void 0 : setFromInfoIsReady(!errorContent);
+    }, [errorContent, setFromInfoIsReady]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            border: "1px solid",
+            borderColor: "".concat(!!shouldShowError ? "red" : "".concat(theme.palette.primary.main)),
+            borderRadius: theme.mixins.customRadius.r16,
+            padding: theme.mixins.customPadding.p16,
+            backdropFilter: "blur(12px)",
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                            color: theme.palette.text.blackContrast,
+                            fontWeight: theme.typography.fontWeight600,
+                        }, children: "From" }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
+                            color: theme.palette.text.accent,
+                            fontSize: theme.typography.fontSize12,
+                            fontWeight: theme.typography.fontWeight400,
+                        }, children: ["Balance:", " ", (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    color: theme.palette.text.blackContrast,
+                                    fontWeight: theme.typography.fontWeight500,
+                                    fontSize: theme.typography.fontSize12,
+                                }, children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.balance, unit: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name }) })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    mt: theme.mixins.customMargin.m20,
+                    mb: theme.mixins.customMargin.m16,
+                }, 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, { sx: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: theme.mixins.gaps.g4,
+                                cursor: "pointer",
+                                width: "fit-content",
+                            }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.link, width: 20, height: 20, sx: { borderRadius: "9999px" } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                        color: theme.palette.text.blackContrast,
+                                        fontWeight: theme.typography.fontWeight600,
+                                    }, children: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) || (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.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: fromTokens, selectedToken: selectedToken, onChangeToken: handleSelectToken }) }) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                            width: "100%",
+                            display: "flex",
+                            justifyContent: "flex-end",
+                            alignItems: "flex-end",
+                            flex: 1,
+                        }, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId !== null && keyboardId !== void 0 ? keyboardId : "", children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { autoFocus: true, elementsAcceptIds: ["form-amount-keyboard-id"], value: (_d = amount === null || amount === void 0 ? void 0 : amount.toString()) !== null && _d !== void 0 ? _d : "", placeholder: placeholder, displayType: xhub_keyboard_1.DisplayType.Double, styles: {
+                                    container: {
+                                        padding: "0",
+                                        border: "none",
+                                    },
+                                    input: {
+                                        display: "flex",
+                                        justifyContent: "flex-end",
+                                        paddingRight: "2px",
+                                    },
+                                } }) }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                }, children: [!!shouldShowError && errorContent, (0, jsx_runtime_1.jsx)(Button_1.default, { sx: {
+                            textTransform: "capitalize",
+                            backgroundColor: theme.palette.background.tertiary,
+                            borderRadius: theme.mixins.customRadius.r8,
+                            color: theme.palette.text.primary,
+                            px: theme.mixins.customPadding.p16,
+                            py: theme.mixins.customPadding.p3,
+                            marginLeft: "auto",
+                        }, onClick: handleClickGetMaxValue, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                color: theme.palette.primary.main,
+                                fontWeight: theme.typography.fontWeight600,
+                                fontSize: theme.typography.fontSize12,
+                                lineHeight: theme.typography.leading100,
+                            }, children: "Max" }) })] })] }));
+};
+exports.default = CardForm;

package/dist/components/TekWallet/components/views/SwapView/components/SelectToken.d.ts

@@ -0,0 +1,9 @@
+import { Output, SupportedToken } from "../../../../services/axios/get-swap-tokens-list-service/type";
+export type OptionToken = SupportedToken | Output;
+export interface SelectTokenProps {
+    tokens?: OptionToken[];
+    selectedToken?: OptionToken;
+    onChangeToken?: (token: OptionToken) => void;
+}
+declare const SelectToken: (props: SelectTokenProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectToken;

package/dist/components/TekWallet/components/views/SwapView/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/SwapView/components/Summary.d.ts

@@ -0,0 +1,14 @@
+import { FeesDataType } from "../../../../services/axios/get-est-fee-service/type";
+import { Output, SupportedToken } from "../../../../services/axios/get-swap-tokens-list-service/type";
+import { ConfirmSwapTokenProps } from "../../../ui/ConfirmSwapToken";
+interface SummaryProps {
+    estimateFee?: FeesDataType;
+    fromToken?: SupportedToken;
+    toToken?: Output;
+    confirmProps?: Omit<ConfirmSwapTokenProps, "payload">;
+    receiveAmountEstimate?: number;
+    fromAmount?: number;
+    isActiveStep?: boolean;
+}
+export default function Summary(props: SummaryProps): import("react/jsx-runtime").JSX.Element;
+export type { SummaryProps };

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

@@ -0,0 +1,239 @@
+"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 __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 Fees_1 = __importStar(require("../../../ui/Fees"));
+var react_1 = require("react");
+var Button_1 = __importStar(require("../../../ui/Button"));
+var providers_1 = require("../../../../providers");
+var Formatter_1 = __importDefault(require("../../../ui/Formatter"));
+var Icon_1 = __importDefault(require("../../../ui/Icon"));
+var ConfirmSwapToken_1 = __importDefault(require("../../../ui/ConfirmSwapToken"));
+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 convertTokensRate_1 = __importDefault(require("../functions/convertTokensRate"));
+function Summary(props) {
+    var _this = this;
+    var fromToken = props.fromToken, toToken = props.toToken, confirmProps = props.confirmProps, receiveAmountEstimate = props.receiveAmountEstimate, fromAmount = props.fromAmount, isActiveStep = props.isActiveStep;
+    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 _b = (0, react_1.useState)(false), isEstimatingFee = _b[0], setIsLoadingEstimateFee = _b[1];
+    var _c = (0, react_1.useState)(), estimateFee = _c[0], setEstimateFee = _c[1];
+    var _d = (0, react_1.useState)(false), isEnoughBalanceToPayFee = _d[0], setIsEnoughBalanceToPayFee = _d[1];
+    var _e = (0, react_1.useState)(""), someError = _e[0], setSomeError = _e[1];
+    var toTokenRate = (0, react_1.useMemo)(function () {
+        if (!fromToken || !toToken)
+            return 0;
+        return (0, convertTokensRate_1.default)(fromToken, toToken, 1);
+    }, [fromToken, toToken]);
+    var _f = (0, react_1.useState)(Button_1.BUTTON_STATUS.ENABLED), confirmButtonStatus = _f[0], setContinueButtonStatus = _f[1];
+    var payload = (0, react_1.useMemo)(function () {
+        return {
+            amount: (fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toString()) || "",
+            currency_slug: (fromToken === null || fromToken === void 0 ? void 0 : fromToken.slug) || "",
+            to_currency_slug: (toToken === null || toToken === void 0 ? void 0 : toToken.slug) || "",
+            extraTransactions: null,
+        };
+    }, [fromToken, toToken, fromAmount]);
+    var getEstimateFee = (0, react_1.useCallback)(function (amount) { return __awaiter(_this, void 0, void 0, function () {
+        var response, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, 3, 4]);
+                    if (!fromToken || !amount) {
+                        setIsLoadingEstimateFee(false);
+                        setIsEnoughBalanceToPayFee(false);
+                        return [2 /*return*/];
+                    }
+                    setIsLoadingEstimateFee(true);
+                    return [4 /*yield*/, (0, get_est_fee_service_1.default)({
+                            amount: "".concat(amount),
+                            transaction_type: type_1.TransactionSlug.SWAP,
+                            currency: (fromToken === null || fromToken === void 0 ? void 0 : fromToken.slug) || "",
+                            to_currency_slug: (toToken === null || toToken === void 0 ? void 0 : toToken.slug) || "",
+                        })];
+                case 1:
+                    response = _a.sent();
+                    setIsLoadingEstimateFee(false);
+                    setEstimateFee(response === null || response === void 0 ? void 0 : response.data);
+                    return [3 /*break*/, 4];
+                case 2:
+                    error_1 = _a.sent();
+                    setSomeError(error_1);
+                    return [3 /*break*/, 4];
+                case 3:
+                    setIsLoadingEstimateFee(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [fromToken, toToken === null || toToken === void 0 ? void 0 : toToken.slug]);
+    var handleOnSuccessSwap = function (res) {
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
+    };
+    (0, react_1.useEffect)(function () {
+        if (!isActiveStep || !fromAmount)
+            return;
+        getEstimateFee(fromAmount);
+    }, [fromAmount, getEstimateFee, isActiveStep]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            height: "100%",
+            color: theme.palette.text.accent2,
+            gap: theme.mixins.gaps.g24,
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { alignItems: "center", gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: "You Receive" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.bigValue), { color: theme.palette.text.primary }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: receiveAmountEstimate, unit: toToken === null || toToken === void 0 ? void 0 : toToken.name }) })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    width: "100%",
+                    position: "relative",
+                }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: theme.mixins.gaps.g16,
+                        zIndex: 1,
+                        backgroundColor: theme.palette.background.primary,
+                        padding: theme.mixins.customPadding.p16,
+                        borderRadius: theme.mixins.customRadius.r16,
+                        color: theme.palette.text.white,
+                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: theme.mixins.gaps.g4,
+                                position: "relative",
+                                zIndex: 1,
+                            }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: fromToken === null || fromToken === void 0 ? void 0 : fromToken.link, sx: {
+                                        width: 20,
+                                        height: 20,
+                                        borderRadius: "999px",
+                                    } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "inherit" }), children: fromToken === null || fromToken === void 0 ? void 0 : fromToken.name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "inherit", marginLeft: "auto" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: fromAmount }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "flex", alignItems: "center", gap: theme.mixins.gaps.g4 }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_SWAP_SECONDARY", sx: {
+                                        width: 16,
+                                        height: 16,
+                                    } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                        flex: 1,
+                                        borderTop: "1px dashed ".concat(theme.palette.border.secondary),
+                                        opacity: 0.2,
+                                    } })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "flex", alignItems: "center", gap: theme.mixins.gaps.g4 }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: toToken === null || toToken === void 0 ? void 0 : toToken.link, sx: {
+                                        width: 20,
+                                        height: 20,
+                                        borderRadius: "999px",
+                                    } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "inherit" }), children: toToken === null || toToken === void 0 ? void 0 : toToken.name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "inherit", marginLeft: "auto" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: receiveAmountEstimate }) })] })] }) }), !!toTokenRate && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
+                    fontSize: theme.typography.fontSize12,
+                    fontWeight: theme.typography.fontWeight500,
+                    color: theme.palette.text.blackContrast,
+                    alignSelf: "center",
+                }, children: ["1 ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.name, " ~ ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: toTokenRate, unit: toToken === null || toToken === void 0 ? void 0 : toToken.name })] })), !!someError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: { color: theme.mixins.validationError, alignSelf: "flex-start" }, children: "Something went wrong, please try again" })), !!isActiveStep && ((0, jsx_runtime_1.jsx)(Fees_1.default, { isFeePaidByAmount: true, feesData: estimateFee, amount: +(fromAmount || 0), tokenSlug: (fromToken === null || fromToken === void 0 ? void 0 : fromToken.slug) || "", feesStyle: Fees_1.FeesStyle.DEFAULT, setIsEnoughBalanceToPayFee: setIsEnoughBalanceToPayFee })), (0, jsx_runtime_1.jsx)(ConfirmSwapToken_1.default, __assign({ sx: {
+                    width: "100%",
+                    marginTop: "auto",
+                }, payload: payload }, confirmPropsRest, { onSuccess: function (res) {
+                    setContinueButtonStatus(Button_1.BUTTON_STATUS.ENABLED);
+                    handleOnSuccessSwap(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: !fromAmount || isEstimatingFee || !isEnoughBalanceToPayFee || !!someError
+                        ? Button_1.BUTTON_STATUS.DISABLED
+                        : confirmButtonStatus, sx: { width: "100%" }, children: "Confirm" }) }))] }));
+}

package/dist/components/TekWallet/components/views/SwapView/functions/convertTokensRate.d.ts

@@ -0,0 +1,3 @@
+import { Output, SupportedToken } from "../../../../services/axios/get-swap-tokens-list-service/type";
+declare function convertTokensRate(fromToken: SupportedToken, toToken: Output, fromAmount: number): number;
+export default convertTokensRate;

package/dist/components/TekWallet/components/views/SwapView/functions/convertTokensRate.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function convertTokensRate(fromToken, toToken, fromAmount) {
+    try {
+        var fromUSDRate = Number(fromToken.usd_rate);
+        var toUSDRate = Number(toToken.usd_rate);
+        return (fromUSDRate * fromAmount) / toUSDRate;
+    }
+    catch (error) {
+        console.warn("🚀 ~ convertTokensRate ~ error:", error);
+        return 0;
+    }
+}
+exports.default = convertTokensRate;