tek-wallet 0.0.637 → 0.0.638

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

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

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

@@ -0,0 +1,90 @@
+"use strict";
+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("../Icon"));
+var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
+var providers_1 = require("../../../providers");
+var useWallet_1 = __importDefault(require("../../../hooks/useWallet"));
+var useBoolean_1 = require("../../../hooks/useBoolean");
+var Button_1 = __importDefault(require("../Button"));
+var Text_1 = __importDefault(require("../Text"));
+var getStandardNumber_1 = __importDefault(require("../../../utils/getStandardNumber"));
+var CardForm = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var selectedToken = _a.selectedToken, onChange = _a.onChange, number = _a.number;
+    var selectTokenForm = (0, useBoolean_1.useBoolean)("selectTokenForm");
+    var _h = (0, useWallet_1.default)(), updateSwapTokens = _h.updateSwapTokens, fromTokens = _h.fromTokens;
+    var theme = (0, providers_1.useTheme)();
+    (0, react_1.useEffect)(function () {
+        if (!fromTokens) {
+            updateSwapTokens();
+        }
+    }, [fromTokens, updateSwapTokens]);
+    var displayToken = (0, react_1.useMemo)(function () {
+        return selectedToken;
+    }, [selectedToken]);
+    var handleClickGetMaxValue = function () {
+        if ((displayToken === null || displayToken === void 0 ? void 0 : displayToken.max_value) && onChange) {
+            var balance = Number(displayToken.balance);
+            var maxValue = Number(displayToken.max_value);
+            var minValue = Math.min(balance, maxValue);
+            onChange({
+                target: { value: minValue.toString() },
+            });
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: "p-4 rounded-16 backdrop-blur-[12px]", sx: {
+            border: "1px solid",
+            borderColor: "".concat((number && number < ((_b = displayToken === null || displayToken === void 0 ? void 0 : displayToken.min_value) !== null && _b !== void 0 ? _b : 0)) || (number && number > ((_c = displayToken === null || displayToken === void 0 ? void 0 : displayToken.max_value) !== null && _c !== void 0 ? _c : 0)) || (number && number > ((_d = Number(displayToken === null || displayToken === void 0 ? void 0 : displayToken.balance)) !== null && _d !== void 0 ? _d : 0)) ? "red" : "".concat(theme.palette.primary.main)),
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex justify-between", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "p", sx: {
+                            color: theme.palette.text.blackContrast,
+                            fontWeight: theme.typography.fontWeight600,
+                        }, children: "From" }), (0, jsx_runtime_1.jsxs)(Text_1.default, { component: "p", sx: {
+                            color: theme.palette.text.accent,
+                            fontSize: theme.typography.fontSize12,
+                            fontWeight: theme.typography.fontWeight400,
+                        }, children: ["Balance:", " ", (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
+                                    color: theme.palette.text.blackContrast,
+                                    fontWeight: theme.typography.fontWeight500,
+                                    fontSize: theme.typography.fontSize12,
+                                }, children: [(0, getStandardNumber_1.default)(Number(displayToken === null || displayToken === void 0 ? void 0 : displayToken.balance)), " ", displayToken === null || displayToken === void 0 ? void 0 : displayToken.full_name] })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex justify-between mt-5 mb-4", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-1 cursor-pointer", onClick: function () { return selectTokenForm.setTrue(); }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: displayToken === null || displayToken === void 0 ? void 0 : displayToken.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { component: "p", sx: {
+                                    color: theme.palette.text.blackContrast,
+                                    fontWeight: theme.typography.fontWeight600,
+                                }, children: (displayToken === null || displayToken === void 0 ? void 0 : displayToken.name) || (displayToken === null || displayToken === void 0 ? void 0 : displayToken.full_name) }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_black_drop") })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: "w-full flex justify-end items-end", children: (0, jsx_runtime_1.jsx)(material_1.InputBase, { type: "number", value: number === undefined || number === null ? "" : (0, getStandardNumber_1.default)(number), onChange: onChange, classes: {
+                                input: "text-end text-contrast max-w-fit bg-transparent border-none outline-none text-16 leading-140 font-bold placeholder:text-accent-1",
+                            }, sx: {
+                                "input::placeholder": {
+                                    fontSize: "13px",
+                                },
+                            }, placeholder: "Min ".concat(displayToken === null || displayToken === void 0 ? void 0 : displayToken.min_value, " - Max ").concat(displayToken === null || displayToken === void 0 ? void 0 : displayToken.max_value, " ").concat(displayToken === null || displayToken === void 0 ? void 0 : displayToken.full_name) }) })] }), (number && number > ((_e = displayToken === null || displayToken === void 0 ? void 0 : displayToken.max_value) !== null && _e !== void 0 ? _e : 0)) ||
+                (number && number < ((_f = displayToken === null || displayToken === void 0 ? void 0 : displayToken.min_value) !== null && _f !== void 0 ? _f : 0)) ||
+                (number && number > ((_g = Number(displayToken === null || displayToken === void 0 ? void 0 : displayToken.balance)) !== null && _g !== void 0 ? _g : 0)) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("alert"), width: 14, height: 14 }), (0, jsx_runtime_1.jsx)(Text_1.default, { className: "text-red-500 font-normal text-12", children: "Insufficient balance" })] }), (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,
+                            height: theme.typography.fontSize24,
+                            padding: theme.mixins.customPadding.p12,
+                        }, 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,
+                            }, children: "Max" }) })] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "flex justify-end", children: (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,
+                        height: theme.typography.fontSize24,
+                        padding: theme.mixins.customPadding.p12,
+                    }, 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,
+                        }, children: "Max" }) }) }))] }));
+};
+exports.default = CardForm;

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

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

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

@@ -0,0 +1,39 @@
+"use strict";
+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 Icon_1 = __importDefault(require("../Icon"));
+var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
+var providers_1 = require("../../../providers");
+var useBoolean_1 = require("../../../hooks/useBoolean");
+var Text_1 = __importDefault(require("../Text"));
+var roundToTwoSignificantDecimals_1 = __importDefault(require("../../../utils/roundToTwoSignificantDecimals"));
+var CardTo = function (_a) {
+    var selectedOutputToken = _a.selectedOutputToken, token = _a.token, value = _a.value;
+    var selectTokenTo = (0, useBoolean_1.useBoolean)("selectTokenTo");
+    var cardFromUSDRate = Number(token === null || token === void 0 ? void 0 : token.usd_rate);
+    var cardToUSDRate = Number(selectedOutputToken === null || selectedOutputToken === void 0 ? void 0 : selectedOutputToken.usd_rate);
+    var totalAmount = (cardFromUSDRate * (value !== undefined ? value : 0)) / cardToUSDRate;
+    var theme = (0, providers_1.useTheme)();
+    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, { component: "p", 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.jsxs)(material_1.Box, { className: "flex items-center gap-1 cursor-pointer", onClick: function () { return selectTokenTo.setTrue(); }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: selectedOutputToken === null || selectedOutputToken === void 0 ? void 0 : selectedOutputToken.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { component: "p", sx: {
+                                    color: theme.palette.text.blackContrast,
+                                    fontWeight: theme.typography.fontWeight600,
+                                }, children: (selectedOutputToken === null || selectedOutputToken === void 0 ? void 0 : selectedOutputToken.name) || (selectedOutputToken === null || selectedOutputToken === void 0 ? void 0 : selectedOutputToken.full_name) }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_black_drop") })] }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                            color: theme.palette.text.blackContrast,
+                            fontWeight: theme.typography.fontWeight600,
+                            fontSize: theme.typography.fontSize16,
+                        }, children: (0, roundToTwoSignificantDecimals_1.default)(totalAmount) || ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                color: theme.palette.text.accent,
+                            }, children: "--" })) })] })] }));
+};
+exports.default = CardTo;

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

@@ -0,0 +1,11 @@
+interface Props {
+    className?: string;
+    icon?: string;
+    symbol?: string;
+    balance?: string;
+    price?: string;
+    rate?: string;
+    isActive?: boolean;
+}
+declare const CardToken: ({ icon, symbol, balance, price, rate, isActive }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CardToken;

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

@@ -0,0 +1,37 @@
+"use strict";
+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 Icon_1 = __importDefault(require("../Icon"));
+var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
+var providers_1 = require("../../../providers");
+var Text_1 = __importDefault(require("../Text"));
+var CardToken = function (_a) {
+    var icon = _a.icon, symbol = _a.symbol, balance = _a.balance, price = _a.price, rate = _a.rate, _b = _a.isActive, isActive = _b === void 0 ? false : _b;
+    var theme = (0, providers_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+            border: "1px solid",
+            borderColor: "".concat(isActive ? theme.palette.primary.main : theme.palette.border.accent3),
+            backgroundColor: "".concat(isActive ? theme.palette.background.tertiary : theme.palette.background.white),
+        }, className: "p-4 rounded-16", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: icon || (0, getIcon_1.default)("".concat(icon)), width: 20, height: 20 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex flex-col justify-start", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "p", sx: {
+                                        color: theme.palette.text.blackContrast,
+                                        fontWeight: theme.typography.fontWeight400,
+                                        fontSize: theme.typography.fontSize14,
+                                    }, children: symbol }), (0, jsx_runtime_1.jsx)(Text_1.default, { component: "p", sx: {
+                                        color: theme.palette.text.accent,
+                                        fontWeight: theme.typography.fontWeight400,
+                                        fontSize: theme.typography.fontSize12,
+                                    }, children: balance })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex flex-col justify-end items-end", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "p", sx: {
+                                color: theme.palette.text.blackContrast,
+                                fontWeight: theme.typography.fontWeight500,
+                                fontSize: theme.typography.fontSize14,
+                            }, children: price }), (0, jsx_runtime_1.jsxs)(Text_1.default, { component: "p", sx: {
+                                color: theme.palette.text.accent,
+                                fontWeight: theme.typography.fontWeight400,
+                                fontSize: theme.typography.fontSize12,
+                            }, children: ["~$", rate] })] })] }) }));
+};
+exports.default = CardToken;

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

@@ -0,0 +1,7 @@
+import { Output, SupportedToken } from "../../../services/axios/get-swap-tokens-list-service/type";
+interface DetailSwapProps {
+    selectedToken?: SupportedToken;
+    selectOutputToken?: Output;
+}
+declare const DetailSwap: (props: DetailSwapProps) => import("react/jsx-runtime").JSX.Element;
+export default DetailSwap;

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

@@ -0,0 +1,51 @@
+"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 __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 getIcon_1 = __importDefault(require("../../../utils/getIcon"));
+var Icon_1 = __importDefault(require("../Icon"));
+var LineValue_1 = __importDefault(require("../LineValue"));
+var Text_1 = __importDefault(require("../Text"));
+var DetailSwap = function (props) {
+    var _a, _b;
+    var theme = (0, providers_1.useTheme)();
+    var getOutputID = props.selectOutputToken &&
+        ((_a = props.selectedToken) === null || _a === void 0 ? void 0 : _a.outputs.find(function (output) { var _a; return output.id === Number((_a = props.selectOutputToken) === null || _a === void 0 ? void 0 : _a.id); }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), className: "gap-3 mt-2", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(Text_1.default, { className: "capitalize opacity-90", sx: {
+                        color: theme.palette.text.accent2,
+                        fontSize: theme.typography.fontSize13,
+                        fontWeight: theme.typography.fontWeight400,
+                    }, children: "Transaction summary:" }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                        color: theme.palette.text.accent,
+                        fontSize: theme.typography.fontSize12,
+                        fontWeight: theme.typography.fontWeight400,
+                    }, children: "Best Price" }), value: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("ellipse"), width: 12, height: 12 }), (0, jsx_runtime_1.jsxs)(Text_1.default, { className: "truncate", sx: {
+                                color: theme.palette.text.blackContrast,
+                                fontSize: theme.typography.fontSize12,
+                                fontWeight: theme.typography.fontWeight500,
+                            }, children: ["1 ", (_b = props.selectedToken) === null || _b === void 0 ? void 0 : _b.full_name, " ~ ", getOutputID === null || getOutputID === void 0 ? void 0 : getOutputID.swap_amount, " ", getOutputID && getOutputID.full_name] })] }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                        color: theme.palette.text.accent,
+                        fontSize: theme.typography.fontSize12,
+                        fontWeight: theme.typography.fontWeight400,
+                    }, className: "capitalize", children: "Powered by" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { className: "truncate", sx: {
+                        color: theme.palette.text.blackContrast,
+                        fontSize: theme.typography.fontSize12,
+                        fontWeight: theme.typography.fontWeight500,
+                    }, children: "Liquidity Protocol" }) })] }));
+};
+exports.default = DetailSwap;

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { SwapResponse } from "../../../services/axios/swap-service/type";
+interface DetailSwapResultProps {
+    onClose?: () => void;
+    swapData?: SwapResponse;
+}
+declare const DetailSwapResult: React.FC<DetailSwapResultProps>;
+export default DetailSwapResult;

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

@@ -0,0 +1,122 @@
+"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 __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 react_1 = require("react");
+var useWallet_1 = __importDefault(require("../../../hooks/useWallet"));
+var providers_1 = require("../../../providers");
+var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
+var Button_1 = __importDefault(require("../Button"));
+var Text_1 = __importDefault(require("../Text"));
+var material_1 = require("@mui/material");
+var Icon_1 = __importDefault(require("../Icon"));
+var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
+var LineValue_1 = __importDefault(require("../LineValue"));
+var formatDate_1 = __importDefault(require("../../../utils/formatDate"));
+var roundToTwoSignificantDecimals_1 = __importDefault(require("../../../utils/roundToTwoSignificantDecimals"));
+var DetailSwapResult = function (_a) {
+    var _b, _c;
+    var onClose = _a.onClose, swapData = _a.swapData;
+    var transaction = (0, useWallet_1.default)().transaction;
+    var theme = (0, providers_1.useTheme)();
+    var resultData = transaction || (swapData === null || swapData === void 0 ? void 0 : swapData.data);
+    var feeInfo = (0, react_1.useMemo)(function () {
+        var _a;
+        return (_a = resultData === null || resultData === void 0 ? void 0 : resultData.fee_info) === null || _a === void 0 ? void 0 : _a.fee_detail.map(function (item) { return item === null || item === void 0 ? void 0 : item.currency; });
+    }, [resultData]);
+    var getOutputs = feeInfo === null || feeInfo === void 0 ? void 0 : feeInfo.map(function (item) { return item === null || item === void 0 ? void 0 : item.outputs; });
+    var getDetailOutputs = getOutputs === null || getOutputs === void 0 ? void 0 : getOutputs[0].map(function (item) { return item; });
+    var getInfoDetailOutputs = (0, react_1.useMemo)(function () {
+        return getDetailOutputs === null || getDetailOutputs === void 0 ? void 0 : getDetailOutputs[0];
+    }, [getDetailOutputs]);
+    (0, react_1.useEffect)(function () { }, [resultData, resultData === null || resultData === void 0 ? void 0 : resultData.id]);
+    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: __assign({ color: theme.palette.text.black }, theme.mixins.pagePadding), footer: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                px: theme.mixins.customPadding.p12,
+                position: "relative",
+                bottom: theme.typography.fontSize24,
+            }, children: (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "processing" || (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "failed" ? ((0, jsx_runtime_1.jsx)(Button_1.default.Primary, { onClick: onClose, sx: __assign(__assign({ gap: theme.mixins.gaps.g4 }, theme.mixins.row), { color: theme.palette.text.secondary, borderRadius: theme.mixins.customRadius.r12, height: "40px" }), fullWidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                        fontSize: theme.typography.fontSize12,
+                        fontWeight: theme.typography.fontWeight600,
+                        leading: theme.typography.leading160,
+                        textTransform: "none",
+                        color: theme.palette.secondary.main,
+                    }, children: "Close" }) })) : ((resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "success" && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, justifyContent: "center" }), children: [(0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { onClick: onClose, sx: __assign(__assign({ gap: theme.mixins.gaps.g4 }, theme.mixins.row), { borderRadius: theme.mixins.customRadius.r12, borderColor: theme.palette.primary.main, backgroundColor: "transparent", maxWidth: "168px", height: "40px" }), fullWidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                fontSize: theme.typography.fontSize13,
+                                fontWeight: theme.typography.fontWeight600,
+                                color: theme.palette.primary.main,
+                                leading: theme.typography.leading160,
+                                textTransform: "none",
+                            }, children: "Close" }) }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { onClick: onClose, sx: __assign(__assign({ gap: theme.mixins.gaps.g4 }, theme.mixins.row), { color: theme.palette.text.secondary, borderRadius: theme.mixins.customRadius.r12, maxWidth: "168px", height: "40px" }), fullWidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                fontSize: theme.typography.fontSize13,
+                                fontWeight: theme.typography.fontWeight600,
+                                leading: theme.typography.leading160,
+                                textTransform: "none",
+                                color: theme.palette.secondary.main,
+                            }, children: "View asset" }) })] }))) }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.mixins.column), { top: 0, transform: "translateY(30%)", gap: theme.mixins.gaps.g12, backgroundColor: theme.palette.background.tertiary, borderRadius: theme.mixins.customRadius.r16, padding: theme.mixins.customPadding.p16, paddingTop: "80px", alignItems: "flex-start", position: "relative", marginTop: "75px" }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), { top: 0, width: "fit-content", height: "fit-content", borderRadius: theme.mixins.customRadius.r12, padding: theme.mixins.customPadding.p8 }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: 100, height: 100, src: (0, getIcon_1.default)((resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "success"
+                            ? "success"
+                            : (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "failed"
+                                ? "failed"
+                                : (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "processing"
+                                    ? "processing"
+                                    : "") }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { mt: theme.mixins.customMargin.m8, textAlign: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                color: theme.palette.text.accent2,
+                                fontSize: theme.typography.fontSize14,
+                                fontWeight: theme.typography.fontWeight400,
+                            }, children: "Swapping Token" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                color: (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "processing"
+                                    ? theme.palette.text.warningStatus
+                                    : (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "failed"
+                                        ? theme.palette.text.errorStatus
+                                        : (resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status) == "success"
+                                            ? theme.palette.text.alertStatus
+                                            : theme.palette.text.warningStatus,
+                                fontSize: theme.typography.fontSize24,
+                                fontWeight: theme.typography.fontWeight600,
+                                textTransform: "capitalize",
+                            }, children: resultData === null || resultData === void 0 ? void 0 : resultData.transaction_status }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                width: "100%",
+                                color: theme.palette.text.accent,
+                                mt: theme.mixins.customMargin.m12,
+                            } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between", mt: theme.mixins.customMargin.m16 }), children: [(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)(Icon_1.default, { src: (_b = resultData === null || resultData === void 0 ? void 0 : resultData.currency_data) === null || _b === void 0 ? void 0 : _b.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                                fontSize: theme.typography.fontSize14,
+                                                fontWeight: theme.typography.fontWeight700,
+                                            }, children: resultData === null || resultData === void 0 ? void 0 : resultData.amount })] }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("swap_horizontal"), width: 20, height: 20 }), (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)(Icon_1.default, { src: getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                                fontSize: theme.typography.fontSize14,
+                                                fontWeight: theme.typography.fontWeight700,
+                                            }, children: (0, roundToTwoSignificantDecimals_1.default)((resultData === null || resultData === void 0 ? void 0 : resultData.amount) * (getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.swap_amount)) })] })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                width: "100%",
+                                color: theme.palette.text.accent,
+                                mt: theme.mixins.customMargin.m12,
+                            } }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { sx: {
+                                mt: theme.mixins.customMargin.m16,
+                                mb: theme.mixins.customMargin.m16,
+                            }, field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    fontSize: theme.typography.fontSize12,
+                                    color: theme.palette.text.blackContrast,
+                                }, children: "Price" }), value: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
+                                    fontSize: theme.typography.fontSize14,
+                                    fontWeight: theme.typography.fontWeight700,
+                                    ml: theme.mixins.customMargin.m8,
+                                }, children: ["1 ", (_c = resultData === null || resultData === void 0 ? void 0 : resultData.currency_data) === null || _c === void 0 ? void 0 : _c.full_name, " ~ ", getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.swap_amount, " ", getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.full_name] }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    fontSize: theme.typography.fontSize12,
+                                    color: theme.palette.text.blackContrast,
+                                }, children: "Date time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    fontSize: theme.typography.fontSize14,
+                                    fontWeight: theme.typography.fontWeight700,
+                                    ml: theme.mixins.customMargin.m8,
+                                }, children: (0, formatDate_1.default)(resultData === null || resultData === void 0 ? void 0 : resultData.date_created) }) })] })] }) }));
+};
+exports.default = DetailSwapResult;

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

@@ -0,0 +1,21 @@
+import { SxProps } from "@mui/material";
+import React from "react";
+export declare enum DRAWER_DIRECTION {
+    TOP = "top",
+    BOTTOM = "bottom",
+    LEFT = "left",
+    RIGHT = "right"
+}
+interface Props {
+    anchor?: DRAWER_DIRECTION;
+    open: boolean;
+    onClose: () => void;
+    onOpen: () => void;
+    className?: string;
+    content: React.ReactNode;
+    title?: React.ReactNode;
+    footer?: React.ReactNode;
+    sx?: SxProps;
+}
+declare const DrawerDrag: ({ anchor, open, onClose, onOpen, content, title, footer, sx }: Props) => import("react/jsx-runtime").JSX.Element;
+export default DrawerDrag;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DRAWER_DIRECTION = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var providers_1 = require("../../../providers");
+var DRAWER_DIRECTION;
+(function (DRAWER_DIRECTION) {
+    DRAWER_DIRECTION["TOP"] = "top";
+    DRAWER_DIRECTION["BOTTOM"] = "bottom";
+    DRAWER_DIRECTION["LEFT"] = "left";
+    DRAWER_DIRECTION["RIGHT"] = "right";
+})(DRAWER_DIRECTION || (exports.DRAWER_DIRECTION = DRAWER_DIRECTION = {}));
+var DrawerDrag = function (_a) {
+    var anchor = _a.anchor, open = _a.open, onClose = _a.onClose, onOpen = _a.onOpen, content = _a.content, title = _a.title, footer = _a.footer, sx = _a.sx;
+    var theme = (0, providers_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, { anchor: anchor || DRAWER_DIRECTION.BOTTOM, open: open, onClose: onClose || (function () { }), onOpen: onOpen, sx: sx
+            ? sx
+            : {
+                "& .MuiDrawer-paper": {
+                    backgroundColor: "transparent",
+                },
+            }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "\n          \"w-full border-t border-".concat(theme.palette.border.accent3, " bg-").concat(theme.palette.background.tertiary, " blur-[50px]\",\n          className,\n          ").concat(anchor === DRAWER_DIRECTION.BOTTOM && "min-h-[33dvh]", "\n        "), children: [title, content, footer] }) }));
+};
+exports.default = DrawerDrag;

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

@@ -127,12 +127,12 @@ exports.default = Fees;
 var FeeDetails = function (_a) {
     var feeName = _a.feeName, fee_in_currency = _a.fee_in_currency, fee_in_usd = _a.fee_in_usd, currencyName = _a.currencyName;
     var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4, justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                     fontSize: theme.typography.fontSize11,
                     fontWeight: theme.typography.fontWeight500,
                     lineHeight: theme.typography.leading160,
                     color: theme.palette.text.accent,
                     pl: theme.mixins.gaps.g12,
                     whiteSpace: "nowrap",
-                }, children: feeName }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: __assign({}, theme.mixins.value), value: fee_in_currency, unit: " ".concat(currencyName) }), (0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: __assign({}, theme.mixins.valueDescription), value: fee_in_usd, start: "~ $" })] })] }));
+                }, children: feeName }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { alignItems: "end", gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: __assign({}, theme.mixins.value), value: fee_in_currency, unit: " ".concat(currencyName) }), (0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: __assign({}, theme.mixins.valueDescription), value: fee_in_usd, start: "~ $" })] })] }));
 };

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

@@ -0,0 +1,9 @@
+import { Output, SupportedToken } from "../../../services/axios/get-swap-tokens-list-service/type";
+interface ModalSelectTokenProps {
+    setSwapToken?: (token: SupportedToken) => void;
+    token?: SupportedToken;
+    outputToken?: Output;
+    setOutputToken?: (output: Output) => void;
+}
+declare const ModalSelectToken: (props: ModalSelectTokenProps) => import("react/jsx-runtime").JSX.Element;
+export default ModalSelectToken;

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

@@ -0,0 +1,127 @@
+"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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_1 = require("react");
+var useBoolean_1 = require("../../../hooks/useBoolean");
+var CardToken_1 = __importDefault(require("../CardToken"));
+var useWallet_1 = __importDefault(require("../../../hooks/useWallet"));
+var PageHeader_1 = __importDefault(require("../PageHeader"));
+var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"));
+var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
+var DrawerDrag_1 = __importStar(require("../DrawerDrag"));
+var Icon_1 = __importDefault(require("../Icon"));
+var Text_1 = __importDefault(require("../Text"));
+var providers_1 = require("../../../providers");
+var ModalSelectToken = function (props) {
+    var setSwapToken = props.setSwapToken;
+    var selectTokenForm = (0, useBoolean_1.useBoolean)("selectTokenForm");
+    var selectTokenTo = (0, useBoolean_1.useBoolean)("selectTokenTo");
+    var open = selectTokenForm.value ? selectTokenForm.value : selectTokenTo.value;
+    var onOpen = selectTokenForm.value ? selectTokenForm.setTrue : selectTokenTo.setTrue;
+    var onClose = selectTokenForm.value ? selectTokenForm.setFalse : selectTokenTo.setFalse;
+    var _a = (0, useWallet_1.default)(), fromTokens = _a.fromTokens, updateSwapTokens = _a.updateSwapTokens;
+    var theme = (0, providers_1.useTheme)();
+    var router = (0, useCustomRouter_1.default)();
+    (0, react_1.useEffect)(function () {
+        if (fromTokens && fromTokens.length > 0 && !props.token && setSwapToken) {
+            setSwapToken(fromTokens[0]);
+        }
+    }, [fromTokens, props.token, setSwapToken, updateSwapTokens]);
+    var handleSelectToken = function (token) {
+        if (setSwapToken) {
+            setSwapToken(token);
+        }
+        onClose();
+    };
+    var handleOutputToken = function (output) {
+        if (props.setOutputToken) {
+            props.setOutputToken(output);
+        }
+        onClose();
+    };
+    return ((0, jsx_runtime_1.jsx)(DrawerDrag_1.default, { sx: {
+            "& .MuiDrawer-paper": {
+                width: "100%",
+            },
+        }, className: "!bg-white !rounded-none !size-full", anchor: DrawerDrag_1.DRAWER_DIRECTION.RIGHT, open: open, onClose: onClose, onOpen: onOpen, title: (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { overrideBack: onClose, onClick: onClose, title: selectTokenForm.value === true ? "Select from token" : "Select to token", rightAdornment: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex gap-1 items-center ml-auto", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { onClick: function () { return router.push("/help"); }, src: (0, getIcon_1.default)("help") }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", sx: {
+                                height: "15px",
+                                width: "1px",
+                                backgroundColor: theme.palette.border.accent3,
+                                marginLeft: theme.mixins.customMargin.m4,
+                                marginRight: theme.mixins.customMargin.m4,
+                            } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { onClick: function () { return router.push("/history"); }, src: (0, getIcon_1.default)("history") })] }) }) }), content: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.pagePadding), children: [(0, jsx_runtime_1.jsx)(material_1.InputBase, { startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { className: "size-5 text-black", position: "start", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "size-5", src: (0, getIcon_1.default)("search") }) }), placeholder: "Search", sx: {
+                        "input::placeholder": {
+                            fontSize: theme.typography.fontSize12,
+                            color: theme.palette.text.black,
+                            fontWeight: theme.typography.fontWeight500,
+                            pl: theme.mixins.customPadding.p4,
+                        },
+                    }, className: "w-full flex items-center py-1 px-2 rounded-12 border border-".concat(theme.palette.border.accent3, " bg-white text-black") }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "py-4 mt-3 h-[50dvh] space-y-3", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                                color: theme.palette.text.accent,
+                                                fontSize: theme.typography.fontSize12,
+                                                fontWeight: theme.typography.fontWeight600,
+                                            }, children: "Token" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), className: "items-center gap-0.5", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_up") }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_down") })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                                color: theme.palette.text.accent,
+                                                fontSize: theme.typography.fontSize12,
+                                                fontWeight: theme.typography.fontWeight600,
+                                            }, children: "Balance" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-0.5 flex-col", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_up") }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_down") })] })] })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: "space-y-3", children: selectTokenForm.value
+                                ? fromTokens === null || fromTokens === void 0 ? void 0 : fromTokens.map(function (token) {
+                                    var _a;
+                                    return ((0, jsx_runtime_1.jsx)(material_1.Box, { onClick: function () { return handleSelectToken(token); }, children: (0, jsx_runtime_1.jsx)(CardToken_1.default, { icon: token.link, symbol: token.full_name, price: "".concat(Number(token.balance).toFixed(2)), balance: token.name, rate: String(Number(token.usd_rate)), isActive: token.id === ((_a = props.token) === null || _a === void 0 ? void 0 : _a.id) }, token.id) }, token.id));
+                                })
+                                : selectTokenTo.value &&
+                                    props.token &&
+                                    props.token.outputs.map(function (output) {
+                                        var _a;
+                                        return ((0, jsx_runtime_1.jsx)(material_1.Box, { onClick: function () { return handleOutputToken(output); }, children: (0, jsx_runtime_1.jsx)(CardToken_1.default, { icon: output.link, symbol: output.full_name, price: "".concat(Number(output.balance).toFixed(2)), balance: output.name, rate: String(Number(output.usd_rate)), isActive: output.id === ((_a = props.outputToken) === null || _a === void 0 ? void 0 : _a.id) }, output.id) }, output.id));
+                                    }) })] })] }) }));
+};
+exports.default = ModalSelectToken;

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

@@ -0,0 +1,11 @@
+import { GeneralProps, UnknownFunction } from "../../../types/ui";
+interface SwapFunctionProps extends GeneralProps {
+    onClose?: UnknownFunction;
+    onOpen?: UnknownFunction;
+}
+export type SwapFunctionRef = {
+    open: () => void;
+    close: () => void;
+};
+export declare const SwapFunction: import("react").ForwardRefExoticComponent<SwapFunctionProps & import("react").RefAttributes<SwapFunctionRef>>;
+export default SwapFunction;

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

@@ -0,0 +1,195 @@
+"use strict";
+"use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 };
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapFunction = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var DrawerComponent_1 = __importStar(require("../DrawerComponent"));
+var SwiperControlled_1 = __importDefault(require("../SwiperControlled"));
+var react_2 = require("swiper/react");
+var BackHeader_1 = __importDefault(require("../BackHeader"));
+var Text_1 = __importDefault(require("../Text"));
+var material_1 = require("@mui/material");
+var Button_1 = __importDefault(require("../Button"));
+var Icon_1 = __importDefault(require("../Icon"));
+var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
+var RequireConnect_1 = __importDefault(require("../RequireConnect"));
+var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
+var CardFrom_1 = __importDefault(require("../CardFrom"));
+var CardTo_1 = __importDefault(require("../CardTo"));
+var DetailSwap_1 = __importDefault(require("../DetailSwap"));
+var ModalSelectToken_1 = __importDefault(require("../ModalSelectToken"));
+var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"));
+var SwapToken_1 = __importDefault(require("../SwapToken"));
+var SwapStep;
+(function (SwapStep) {
+    SwapStep[SwapStep["SELECT_SWAP"] = 0] = "SELECT_SWAP";
+})(SwapStep || (SwapStep = {}));
+var SWAP_STEP_NAME = (_a = {},
+    _a[SwapStep.SELECT_SWAP] = "Swap",
+    _a);
+exports.SwapFunction = (0, react_1.forwardRef)(function (props, ref) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var drawerRef = (0, react_1.useRef)(null);
+    var swiperRef = (0, react_1.useRef)(null);
+    var theme = (0, ThemeProvider_1.useTheme)();
+    var _h = (0, react_1.useState)(SwapStep.SELECT_SWAP), currentStep = _h[0], setCurrentStep = _h[1];
+    var _j = (0, react_1.useState)(null), selectedToken = _j[0], setSelectedToken = _j[1];
+    var _k = (0, react_1.useState)(null), selectedOutputToken = _k[0], setSelectedOutputToken = _k[1];
+    var _l = (0, react_1.useState)(null), number = _l[0], setNumber = _l[1];
+    var router = (0, useCustomRouter_1.default)();
+    var onChange = (0, react_1.useCallback)(function (e) {
+        var value = e.target.value;
+        setNumber(value === "" ? null : Number(value));
+    }, []);
+    var handleBack = function () {
+        var _a;
+        gotoStep(currentStep - 1);
+        if (currentStep === SwapStep.SELECT_SWAP) {
+            (_a = drawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
+            setNumber(null);
+        }
+    };
+    var gotoStep = function (step) {
+        var _a;
+        if (step === SwapStep.SELECT_SWAP) {
+        }
+        setCurrentStep(step);
+        (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.slideTo(step);
+    };
+    var handleSelectToken = function (token) {
+        if (!selectedToken || selectedToken.id !== token.id) {
+            setSelectedToken(token);
+        }
+    };
+    var handleSelectOutputToken = function (output) {
+        if (!selectedOutputToken || selectedOutputToken.id !== output.id) {
+            setSelectedOutputToken(output);
+        }
+    };
+    var handleOnClose = function () {
+        var _a;
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+        gotoStep(SwapStep.SELECT_SWAP);
+    };
+    var resetNumber = (0, react_1.useCallback)(function () {
+        setNumber(null);
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (selectedToken) {
+            var outputs = selectedToken.outputs;
+            if (outputs.length > 0) {
+                if (!selectedOutputToken || !outputs.some(function (t) { return t.id === selectedOutputToken.id; })) {
+                    setSelectedOutputToken(outputs[0]);
+                }
+            }
+            else {
+                setSelectedOutputToken(null);
+            }
+        }
+        else {
+            setSelectedOutputToken(null);
+        }
+    }, [selectedToken, selectedOutputToken]);
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        open: open,
+        close: close,
+    }); });
+    return ((0, jsx_runtime_1.jsx)(RequireConnect_1.default, { children: (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, onOpen: props.onOpen, onClose: handleOnClose, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: {
+                    padding: theme.mixins.pagePadding,
+                    position: "relative",
+                }, header: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        mr: theme.mixins.customMargin.m12,
+                        ml: theme.mixins.customMargin.m12,
+                        mt: theme.mixins.customMargin.m10,
+                    }, children: (0, jsx_runtime_1.jsx)(BackHeader_1.default, { sx: {
+                            width: "100%",
+                            display: "flex",
+                            alignItems: "center",
+                            minHeight: "2rem",
+                            mb: theme.mixins.customMargin.m20,
+                        }, overrideBack: handleBack, center: SWAP_STEP_NAME[currentStep], children: currentStep === SwapStep.SELECT_SWAP && ((0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("help"), width: 18, height: 18, sx: { marginLeft: "auto", mr: theme.mixins.customMargin.m12 }, onClick: function () { return router.push("/help"); } })) }) }), footer: currentStep === SwapStep.SELECT_SWAP && ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "px-4 w-full relative bottom-6", children: (0, jsx_runtime_1.jsx)(SwapToken_1.default, { onResetNumber: resetNumber, sx: {
+                            width: "100%",
+                        }, sendData: {
+                            amount: number !== null ? number.toString() : "",
+                            currency_slug: (_a = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug) !== null && _a !== void 0 ? _a : "",
+                            to_currency_slug: (_b = selectedOutputToken === null || selectedOutputToken === void 0 ? void 0 : selectedOutputToken.slug) !== null && _b !== void 0 ? _b : "",
+                            network: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.network_data[0],
+                        }, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { disabled: !number ||
+                                number < ((_c = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.min_value) !== null && _c !== void 0 ? _c : 0) ||
+                                number > ((_d = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.max_value) !== null && _d !== void 0 ? _d : 0) ||
+                                number > Number(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.balance), sx: __assign(__assign({ gap: theme.mixins.gaps.g4 }, theme.mixins.row), { color: theme.palette.text.secondary, borderRadius: theme.mixins.customRadius.r12, height: "40px" }), fullWidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    fontSize: theme.typography.fontSize12,
+                                    fontWeight: theme.typography.fontWeight600,
+                                    leading: theme.typography.leading160,
+                                    textTransform: "none",
+                                    color: "".concat((number && number < ((_e = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.min_value) !== null && _e !== void 0 ? _e : 0)) ||
+                                        (number && number > ((_f = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.max_value) !== null && _f !== void 0 ? _f : 0)) ||
+                                        (number && number > ((_g = Number(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.balance)) !== null && _g !== void 0 ? _g : 0)) ||
+                                        !number
+                                        ? theme.palette.text.accent
+                                        : theme.palette.secondary.main),
+                                }, children: "Preview swap" }) }) }, "".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.slug, "-").concat(selectedOutputToken === null || selectedOutputToken === void 0 ? void 0 : selectedOutputToken.slug)) })), children: (0, jsx_runtime_1.jsx)(SwiperControlled_1.default, { ref: swiperRef, swiperProps: {
+                        autoHeight: true,
+                        spaceBetween: 32,
+                    }, disableSwipe: true, initialActiveTab: currentStep, children: (0, jsx_runtime_1.jsxs)(react_2.SwiperSlide, { children: [(0, jsx_runtime_1.jsx)(CardFrom_1.default, { onChange: onChange, selectedToken: selectedToken !== null && selectedToken !== void 0 ? selectedToken : undefined, number: number !== null && number !== void 0 ? number : undefined }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 1, sx: {
+                                    mt: "1rem",
+                                    mb: "1rem",
+                                }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("swap_icon"), width: 18, height: 18 }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                            width: "90%",
+                                            borderStyle: "dashed",
+                                            borderColor: "#A3A3A3",
+                                            opacity: 0.3,
+                                        } })] }), (0, jsx_runtime_1.jsx)(CardTo_1.default, { selectedOutputToken: selectedOutputToken !== null && selectedOutputToken !== void 0 ? selectedOutputToken : undefined, token: selectedToken !== null && selectedToken !== void 0 ? selectedToken : undefined, value: number !== null && number !== void 0 ? number : undefined }), (0, jsx_runtime_1.jsx)(DetailSwap_1.default, { selectedToken: selectedToken !== null && selectedToken !== void 0 ? selectedToken : undefined, selectOutputToken: selectedOutputToken !== null && selectedOutputToken !== void 0 ? selectedOutputToken : undefined }), (0, jsx_runtime_1.jsx)(ModalSelectToken_1.default, { setSwapToken: handleSelectToken, token: selectedToken !== null && selectedToken !== void 0 ? selectedToken : undefined, outputToken: selectedOutputToken !== null && selectedOutputToken !== void 0 ? selectedOutputToken : undefined, setOutputToken: handleSelectOutputToken })] }, SwapStep.SELECT_SWAP) }, selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.id) }) }) }));
+});
+exports.SwapFunction.displayName = "SwapFunction";
+exports.default = exports.SwapFunction;

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

@@ -12,6 +12,7 @@ interface SwapTokenProps extends Omit<ConfirmLayoutProps, "action"> {
     initFeeData?: FeesDataType;
     onStart?: () => void;
     sx?: SxProps;
+    onResetNumber?: () => void;
 }
 export interface SwapTokenRef {
     open: () => void;

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

@@ -89,6 +89,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var ThemeProvider_1 = require("../../../providers/ThemeProvider");
 var Button_1 = __importStar(require("../Button"));
+var DrawerComponent_1 = require("../DrawerComponent");
+var DrawerComponent_2 = __importDefault(require("../DrawerComponent"));
 var ConfirmLayout_1 = __importDefault(require("../ConfirmLayout"));
 var LineValue_1 = __importDefault(require("../LineValue"));
 var Formatter_1 = __importDefault(require("../Formatter"));
@@ -106,6 +108,8 @@ var Icon_1 = __importDefault(require("../Icon"));
 var roundToTwoSignificantDecimals_1 = __importDefault(require("../../../utils/roundToTwoSignificantDecimals"));
 var getImage_1 = __importDefault(require("../../../utils/getImage"));
 var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
+var DetailSwapResult_1 = __importDefault(require("../DetailSwapResult"));
+var useWallet_1 = __importDefault(require("../../../hooks/useWallet"));
 var SwapTokenError;
 (function (SwapTokenError) {
     SwapTokenError["TOKEN_NOT_FOUND"] = "Token not found";
@@ -121,12 +125,15 @@ exports.SwapToken = (0, react_1.forwardRef)(function (props, ref) {
     var _b = (0, useSwapData_1.default)(), fromTokens = _b.fromTokens, updateSwapTokens = _b.updateSwapTokens;
     var isInitPasscode = (0, useWalletData_1.default)().isInitPasscode;
     var confirmLayoutDrawerRef = (0, react_1.useRef)(null);
+    var detailResultDrawerRef = (0, react_1.useRef)(null);
     var _c = (0, react_1.useState)(undefined), error = _c[0], setError = _c[1];
     var _d = (0, react_1.useState)(undefined), errorAmount = _d[0], setErrorAmount = _d[1];
     var _e = (0, react_1.useState)(Button_1.BUTTON_STATUS.ENABLED), buttonStatus = _e[0], setButtonStatus = _e[1];
     var _f = (0, react_1.useState)(props.initFeeData), estimateFee = _f[0], setEstimateFee = _f[1];
     var _g = (0, react_1.useState)(false), isLoadingEstimateFee = _g[0], setIsLoadingEstimateFee = _g[1];
     var activitiesRef = (0, react_1.useRef)(null);
+    var _h = (0, react_1.useState)(undefined), swapResult = _h[0], setSwapResult = _h[1];
+    var transaction = (0, useWallet_1.default)().transaction;
     var amount = props.sendData.amount;
     var network = props.sendData.network;
     var fromTokenSlug = props.sendData.currency_slug;
@@ -167,7 +174,7 @@ exports.SwapToken = (0, react_1.forwardRef)(function (props, ref) {
                     return [2 /*return*/, true];
             }
         });
-    }); }, [amount, fromTokenSlug]);
+    }); }, [amount, fromTokenSlug, toTokenSlug]);
     var token = (0, react_1.useMemo)(function () {
         return fromTokens === null || fromTokens === void 0 ? void 0 : fromTokens.find(function (token) { return token.slug === fromTokenSlug; });
     }, [fromTokenSlug, fromTokens]);
@@ -217,13 +224,18 @@ exports.SwapToken = (0, react_1.forwardRef)(function (props, ref) {
                 case 1:
                     response = _c.sent();
                     if (response.success) {
+                        setSwapResult(response);
                         (_a = confirmLayoutDrawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
                         setButtonStatus(Button_1.BUTTON_STATUS.ENABLED);
+                        setTimeout(function () {
+                            var _a;
+                            (_a = detailResultDrawerRef.current) === null || _a === void 0 ? void 0 : _a.open();
+                        }, 300);
                         (_b = props.onSuccess) === null || _b === void 0 ? void 0 : _b.call(props, response);
                         setTimeout(function () {
                             var _a;
                             (_a = activitiesRef.current) === null || _a === void 0 ? void 0 : _a.openTab(0);
-                        }, 200);
+                        }, 1000);
                     }
                     else {
                         throw new Error("Swap internal failed");
@@ -254,6 +266,12 @@ exports.SwapToken = (0, react_1.forwardRef)(function (props, ref) {
             throw new Error("Please connect your wallet");
         (_a = confirmLayoutDrawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
     };
+    var handleDetailSwapClose = function () {
+        var _a, _b;
+        (_a = detailResultDrawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
+        (_b = props === null || props === void 0 ? void 0 : props.onResetNumber) === null || _b === void 0 ? void 0 : _b.call(props);
+        setSwapResult(undefined);
+    };
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         open: handleOpen,
         close: handleClose,
@@ -268,11 +286,13 @@ exports.SwapToken = (0, react_1.forwardRef)(function (props, ref) {
             updateSwapTokens();
         }
     }, [isInitPasscode, fromTokens]);
-    return ((0, jsx_runtime_1.jsx)(RequireConnect_1.default, { children: (0, jsx_runtime_1.jsxs)(ConfirmLayout_1.default, { onOpen: validateAll, ref: confirmLayoutDrawerRef, action: transactionSlug, trigger: props.children, sx: sx, title: "You receive", 
-            // amount={estimateReceive}
-            // link={toToken?.link}
-            // currency={toToken?.full_name}
-            confirmAction: (0, jsx_runtime_1.jsx)(ConfirmByPasscode_1.default, { action: transactionSlug, onConfirmSuccess: handleSwapToken, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { status: !!error || isLoadingEstimateFee ? Button_1.BUTTON_STATUS.DISABLED : buttonStatus, sx: { width: "100%" }, children: "Swap" }) }), children: [!!fromToken && !!toToken && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.paper), { backgroundColor: "transparent" }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { alignItems: "start", gap: theme.mixins.gaps.g12, backgroundColor: theme.palette.background.primary, backgroundImage: "url(".concat((0, getImage_1.default)("logo_transfer", "png"), ")"), backgroundPosition: "right", backgroundRepeat: "no-repeat", padding: theme.mixins.customPadding.p16, borderRadius: theme.mixins.customRadius.r16 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g16, width: "100%" }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g6 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: fromToken === null || fromToken === void 0 ? void 0 : fromToken.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontWeight: theme.typography.fontWeight600, color: theme.palette.text.white }), children: fromToken === null || fromToken === void 0 ? void 0 : fromToken.name })] }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.bigValue), { ml: "auto", color: theme.palette.text.white }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: theme.mixins.gaps.g2, sx: {
+    return ((0, jsx_runtime_1.jsxs)(RequireConnect_1.default, { children: [(0, jsx_runtime_1.jsxs)(ConfirmLayout_1.default, { onOpen: validateAll, ref: confirmLayoutDrawerRef, action: transactionSlug, trigger: props.children, sx: sx, title: "You receive", 
+                // amount={estimateReceive}
+                // link={toToken?.link}
+                // currency={toToken?.full_name}
+                confirmAction: (0, jsx_runtime_1.jsx)(ConfirmByPasscode_1.default, { action: transactionSlug, onConfirmSuccess: handleSwapToken, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { status: !!error || isLoadingEstimateFee || (estimateReceive && estimateReceive < 0)
+                            ? Button_1.BUTTON_STATUS.DISABLED
+                            : buttonStatus, sx: { width: "100%" }, children: "Swap" }) }), children: [!!fromToken && !!toToken && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { alignItems: "start", gap: theme.mixins.gaps.g12, backgroundColor: theme.palette.background.primary, backgroundImage: "url(".concat((0, getImage_1.default)("logo_transfer", "png"), ")"), backgroundPosition: "right", backgroundRepeat: "no-repeat", padding: theme.mixins.customPadding.p16, borderRadius: theme.mixins.customRadius.r16 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g16, width: "100%" }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g6 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: fromToken === null || fromToken === void 0 ? void 0 : fromToken.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontWeight: theme.typography.fontWeight600, color: theme.palette.text.white }), children: fromToken === null || fromToken === void 0 ? void 0 : fromToken.name })] }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.bigValue), { ml: "auto", color: theme.palette.text.white }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: theme.mixins.gaps.g2, sx: {
                                             width: "100%",
                                             mt: theme.mixins.customMargin.m4,
                                             mb: theme.mixins.customMargin.m4,
@@ -284,14 +304,14 @@ exports.SwapToken = (0, react_1.forwardRef)(function (props, ref) {
                                         fontSize: theme.typography.fontSize18,
                                         fontWeight: theme.typography.fontWeight700,
                                         color: theme.palette.text.black,
-                                    }, children: "Transfer Summary" }) }), ((_a = estimateFee === null || estimateFee === void 0 ? void 0 : estimateFee.fee_detail) === null || _a === void 0 ? void 0 : _a.length) && !!amount && ((0, jsx_runtime_1.jsx)(Fees_1.default, { isFeePaidByAmount: true, feesData: JSON.stringify(estimateFee), amount: +amount, tokenSlug: fromTokenSlug })), !estimateFee && !!amount && isLoadingEstimateFee && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, width: "100%" }), children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 16, sx: { color: theme.palette.text.white } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: { color: "text.white" }, children: "Calculating fee" })] })), !!estimateReceive && !error && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { value: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.row), theme.mixins.valueDescription), { width: "100%", justifyContent: "center", color: theme.palette.text.black, fontWeight: theme.typography.fontWeight500, gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("ellipse"), width: 12, height: 12 }), "1 ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.name, " =", (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { value: 1 / +(toToken === null || toToken === void 0 ? void 0 : toToken.usd_rate) }), "  ", toToken === null || toToken === void 0 ? void 0 : toToken.name] })] }), field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    }, children: "Transfer Summary" }) }), ((_a = estimateFee === null || estimateFee === void 0 ? void 0 : estimateFee.fee_detail) === null || _a === void 0 ? void 0 : _a.length) && !!amount && ((0, jsx_runtime_1.jsx)(Fees_1.default, { isFeePaidByAmount: true, feesData: JSON.stringify(estimateFee), amount: +amount, tokenSlug: fromTokenSlug })), !estimateFee && !!amount && isLoadingEstimateFee && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, width: "100%" }), children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 16, sx: { color: theme.palette.text.white } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: { color: "text.white" }, children: "Calculating fee" })] })), !!estimateReceive && !error && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { value: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.row), theme.mixins.valueDescription), { width: "100%", justifyContent: "center", color: theme.palette.text.black, fontWeight: theme.typography.fontWeight500, gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("ellipse"), width: 12, height: 12 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g2, alignContent: "center" }), children: ["1 ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.name, " =", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: 1 / +(toToken === null || toToken === void 0 ? void 0 : toToken.usd_rate) }), "  ", toToken === null || toToken === void 0 ? void 0 : toToken.name] })] }), field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                         color: theme.palette.text.black,
                                         fontWeight: theme.typography.fontWeight600,
                                     }, children: "Best Price" }) })), !!estimateReceive && !error && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { width: "100%", gap: theme.mixins.gaps.g8, mt: theme.mixins.customMargin.m8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("warning"), width: 18, height: 18 }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
                                             color: theme.palette.text.primary,
                                             fontWeight: theme.typography.fontWeight600,
                                             fontSize: theme.typography.fontSize13,
-                                        }, children: ["You will receive at least ", "".concat(estimateReceive, " ").concat(toToken === null || toToken === void 0 ? void 0 : toToken.name), " ", "(~".concat((0, roundToTwoSignificantDecimals_1.default)(estimateReceive), ")"), " or the transaction will refunded"] })] })), !!error && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.validationError), { mt: theme.mixins.customMargin.m6 }), children: [error, " ", !!errorAmount && (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: errorAmount, unit: " ".concat(token === null || token === void 0 ? void 0 : token.name) })] }))] }) })), (!fromToken || !toToken) && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.paper), { alignItems: "center", justifyContent: "center" }), children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.validationError), { fontSize: theme.typography.fontSize16 }), children: SwapTokenError.TOKEN_NOT_FOUND }) }))] }) }));
+                                        }, children: ["You will receive at least ", "".concat(estimateReceive, " ").concat(toToken === null || toToken === void 0 ? void 0 : toToken.name), " ", "(~".concat((0, roundToTwoSignificantDecimals_1.default)(estimateReceive), ")"), " or the transaction will refunded"] })] })), !!error && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.validationError), { mt: theme.mixins.customMargin.m6 }), children: [error, " ", !!errorAmount && (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: errorAmount, unit: " ".concat(token === null || token === void 0 ? void 0 : token.name) })] }))] })), (!fromToken || !toToken) && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.paper), { alignItems: "center", justifyContent: "center" }), children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.validationError), { fontSize: theme.typography.fontSize16 }), children: SwapTokenError.TOKEN_NOT_FOUND }) }))] }), swapResult && ((0, jsx_runtime_1.jsx)(DrawerComponent_2.default, { ref: detailResultDrawerRef, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: swapResult && transaction && (transaction === null || transaction === void 0 ? void 0 : transaction.id) && ((0, jsx_runtime_1.jsx)(DetailSwapResult_1.default, { swapData: swapResult, onClose: handleDetailSwapClose })) }))] }));
 });
 exports.SwapToken.displayName = "SwapToken";
 exports.default = exports.SwapToken;

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

@@ -28,6 +28,7 @@ var useWalletData_1 = __importDefault(require("../../../hooks/useWalletData"));
 var Text_1 = __importDefault(require("../../ui/Text"));
 var ThemeProvider_1 = require("../../../providers/ThemeProvider");
 var AmountGroupAndChart_1 = __importDefault(require("../../ui/AmountGroupAndChart"));
+var SwapFunction_1 = __importDefault(require("../../ui/SwapFunction"));
 var AssetView = function (props) {
     var isInitPasscode = (0, useWalletData_1.default)().isInitPasscode;
     var theme = (0, ThemeProvider_1.useTheme)();
@@ -56,11 +57,13 @@ var AssetView = function (props) {
                                         borderRight: "1px solid ".concat(theme.palette.border.accent3),
                                         placeContent: "center",
                                         columnSpan: 1,
-                                    }, children: (0, jsx_runtime_1.jsx)(FunctionItem_1.default, { icon: (0, getIcon_1.default)("withdraw"), label: "Withdraw", sx: { width: "100%" } }) }) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { sx: {
-                                    borderRight: "1px solid ".concat(theme.palette.border.accent3),
-                                    placeContent: "center",
-                                    columnSpan: 1,
-                                }, children: (0, jsx_runtime_1.jsx)(FunctionItem_1.default, { icon: (0, getIcon_1.default)("fortune", "gif"), label: "Fortune", sx: { width: "100%" } }) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(FunctionItem_1.default, { icon: (0, getIcon_1.default)("p2p", "gif"), label: "P2P", sx: { width: "100%" } }) })] }), (0, jsx_runtime_1.jsx)(TokensBoard_1.default, {})] })))] }));
+                                    }, children: (0, jsx_runtime_1.jsx)(FunctionItem_1.default, { icon: (0, getIcon_1.default)("withdraw"), label: "Withdraw", sx: { width: "100%" } }) }) }), (0, jsx_runtime_1.jsx)(SwapFunction_1.default, { children: (0, jsx_runtime_1.jsx)(material_1.ListItem, { sx: {
+                                        borderRight: "1px solid ".concat(theme.palette.border.accent3),
+                                        placeContent: "center",
+                                        columnSpan: 1,
+                                    }, children: (0, jsx_runtime_1.jsx)(FunctionItem_1.default, { icon: (0, getIcon_1.default)("swap"), label: "Swap", sx: {
+                                            width: "100%",
+                                        } }) }) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(FunctionItem_1.default, { icon: (0, getIcon_1.default)("p2p", "gif"), label: "P2P", sx: { width: "100%" } }) })] }), (0, jsx_runtime_1.jsx)(TokensBoard_1.default, {})] })))] }));
 };
 exports.AssetView = AssetView;
 exports.default = exports.AssetView;

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

@@ -0,0 +1,2 @@
+declare const HelpView: () => import("react/jsx-runtime").JSX.Element;
+export default HelpView;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var HelpView = function () {
+    return (0, jsx_runtime_1.jsx)("div", { children: "HelpView" });
+};
+exports.default = HelpView;

package/dist/components/TekWallet/hooks/useBoolean.d.ts

@@ -0,0 +1,9 @@
+type BooleanState = {
+    value: boolean;
+    setValue: React.Dispatch<React.SetStateAction<boolean>>;
+    setTrue: () => void;
+    setFalse: () => void;
+    toggle: () => void;
+};
+export declare const useBoolean: (key: string) => BooleanState;
+export {};

package/dist/components/TekWallet/hooks/useBoolean.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBoolean = void 0;
+var react_1 = require("react");
+var sharedState = {};
+var listeners = {};
+var useBoolean = function (key) {
+    var _a;
+    var _b = (0, react_1.useState)((_a = sharedState[key]) !== null && _a !== void 0 ? _a : false), value = _b[0], setValue = _b[1];
+    if (!listeners[key]) {
+        listeners[key] = new Set();
+    }
+    listeners[key].add(setValue);
+    var notifyAll = function (newVal) {
+        sharedState[key] = newVal;
+        listeners[key].forEach(function (listener) { return listener(newVal); });
+    };
+    var setTrue = (0, react_1.useCallback)(function () { return notifyAll(true); }, [key]);
+    var setFalse = (0, react_1.useCallback)(function () { return notifyAll(false); }, [key]);
+    var toggle = (0, react_1.useCallback)(function () { return notifyAll(!sharedState[key]); }, [key]);
+    return {
+        value: value,
+        setValue: function (val) {
+            var _a;
+            var newValue = typeof val === "function" ? val((_a = sharedState[key]) !== null && _a !== void 0 ? _a : false) : val;
+            notifyAll(newValue);
+        },
+        setTrue: setTrue,
+        setFalse: setFalse,
+        toggle: toggle,
+    };
+};
+exports.useBoolean = useBoolean;

package/dist/components/TekWallet/services/axios/get-swap-tokens-list-service/type.d.ts

@@ -48,4 +48,5 @@ export interface Output {
     icon_svg: string;
     network_data: NetworkData[];
     balance: string;
+    swap_amount: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tek-wallet",
-  "version": "0.0.637",
+  "version": "0.0.638",
   "description": "A custom React provider with TypeScript support",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",