tek-wallet 0.0.754 → 0.0.756

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

@@ -0,0 +1,293 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapToken = exports.SwapTokenError = void 0;
+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 ConfirmLayout_1 = __importDefault(require("../ConfirmLayout"));
+var LineValue_1 = __importDefault(require("../LineValue"));
+var Formatter_1 = __importDefault(require("../Formatter"));
+var ConfirmByPasscode_1 = __importDefault(require("../ConfirmByPasscode"));
+var react_1 = require("react");
+var Text_1 = __importDefault(require("../Text"));
+var RequireConnect_1 = __importDefault(require("../RequireConnect"));
+var useWalletData_1 = __importDefault(require("../../../hooks/useWalletData"));
+var Fees_1 = __importDefault(require("../Fees"));
+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 useSwapData_1 = __importDefault(require("../../../hooks/useSwapData"));
+var swap_service_1 = __importDefault(require("../../../services/axios/swap-service"));
+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 SwapTokenError;
+(function (SwapTokenError) {
+    SwapTokenError["TOKEN_NOT_FOUND"] = "Token not found";
+    SwapTokenError["NOT_ENOUGH_BALANCE"] = "Not enough balance";
+    SwapTokenError["MAX_AMOUNT"] = "Max amount";
+    SwapTokenError["MIN_AMOUNT"] = "Min amount";
+    SwapTokenError["FAILED"] = "Failed";
+})(SwapTokenError || (exports.SwapTokenError = SwapTokenError = {}));
+var transactionSlug = type_1.TransactionSlug.SWAP;
+exports.SwapToken = (0, react_1.forwardRef)(function (props, ref) {
+    var _a;
+    var theme = (0, ThemeProvider_1.useTheme)();
+    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 _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 amount = props.sendData.amount;
+    var fromTokenSlug = props.sendData.currency_slug;
+    var toTokenSlug = props.sendData.to_currency_slug;
+    var sx = props.sx, children = props.children, btnConfirm = props.btnConfirm, trigger = props.trigger, overrideHeader = props.overrideHeader;
+    var fromToken = (0, react_1.useMemo)(function () {
+        return fromTokens === null || fromTokens === void 0 ? void 0 : fromTokens.find(function (token) { return token.slug === fromTokenSlug; });
+    }, [fromTokenSlug, fromTokens]);
+    var toToken = (0, react_1.useMemo)(function () {
+        var _a;
+        if (!fromToken)
+            return undefined;
+        return (_a = fromToken.outputs) === null || _a === void 0 ? void 0 : _a.find(function (token) { return token.slug === toTokenSlug; });
+    }, [toTokenSlug, fromToken]);
+    var toAmount = (0, react_1.useMemo)(function () {
+        if (!toToken)
+            return undefined;
+        return +amount / +toToken.usd_rate;
+    }, [toToken, amount]);
+    var getEstimateFee = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!fromTokenSlug)
+                        return [2 /*return*/];
+                    setIsLoadingEstimateFee(true);
+                    return [4 /*yield*/, (0, get_est_fee_service_1.default)({
+                            amount: "".concat(amount),
+                            transaction_type: transactionSlug,
+                            currency: fromTokenSlug || "",
+                            to_currency_slug: toTokenSlug || "",
+                        })];
+                case 1:
+                    response = _a.sent();
+                    setIsLoadingEstimateFee(false);
+                    setEstimateFee(response === null || response === void 0 ? void 0 : response.data);
+                    return [2 /*return*/, true];
+            }
+        });
+    }); }, [amount, fromTokenSlug]);
+    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]);
+    var validateAmount = (0, react_1.useCallback)(function () {
+        if (!token) {
+            setError(SwapTokenError.TOKEN_NOT_FOUND);
+            return false;
+        }
+        if (+amount > token.max_value) {
+            setError(SwapTokenError.MAX_AMOUNT);
+            setErrorAmount(token.max_value);
+            return false;
+        }
+        if (+amount < token.min_value) {
+            setError(SwapTokenError.MIN_AMOUNT);
+            setErrorAmount(token.min_value);
+            return false;
+        }
+        if (+amount > +token.balance) {
+            setError(SwapTokenError.NOT_ENOUGH_BALANCE);
+            setErrorAmount(token.balance);
+            return false;
+        }
+        setError(undefined);
+        setErrorAmount(undefined);
+        return true;
+    }, [amount, token]);
+    var validateAll = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var isAmountValid;
+        return __generator(this, function (_a) {
+            isAmountValid = validateAmount();
+            if (!isAmountValid)
+                return [2 /*return*/, false];
+            getEstimateFee();
+            return [2 /*return*/];
+        });
+    }); }, [validateAmount, getEstimateFee]);
+    var handleSwapToken = function (passcode) { return __awaiter(void 0, void 0, void 0, function () {
+        var response, err_1;
+        var _a, _b, _c, _d, _e;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
+                case 0:
+                    _f.trys.push([0, 2, 3, 4]);
+                    (_a = props.onStart) === null || _a === void 0 ? void 0 : _a.call(props);
+                    setButtonStatus(Button_1.BUTTON_STATUS.LOADING);
+                    return [4 /*yield*/, (0, swap_service_1.default)(__assign(__assign({}, props.sendData), { passcode: passcode }))];
+                case 1:
+                    response = _f.sent();
+                    if (response.success) {
+                        (_b = confirmLayoutDrawerRef.current) === null || _b === void 0 ? void 0 : _b.close();
+                        setButtonStatus(Button_1.BUTTON_STATUS.ENABLED);
+                        (_c = props.onSuccess) === null || _c === void 0 ? void 0 : _c.call(props, response);
+                    }
+                    else {
+                        throw new Error("Swap internal failed");
+                    }
+                    return [3 /*break*/, 4];
+                case 2:
+                    err_1 = _f.sent();
+                    (_d = props.onError) === null || _d === void 0 ? void 0 : _d.call(props, err_1);
+                    setButtonStatus(Button_1.BUTTON_STATUS.ERROR);
+                    setTimeout(function () {
+                        setButtonStatus(Button_1.BUTTON_STATUS.ENABLED);
+                    }, 1200);
+                    return [3 /*break*/, 4];
+                case 3:
+                    (_e = props.onFinish) === null || _e === void 0 ? void 0 : _e.call(props);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleOpen = function () {
+        var _a;
+        if (!isInitPasscode)
+            throw new Error("Please connect your wallet");
+        (_a = confirmLayoutDrawerRef.current) === null || _a === void 0 ? void 0 : _a.open();
+        validateAll();
+    };
+    var handleClose = function () {
+        var _a;
+        if (!isInitPasscode)
+            throw new Error("Please connect your wallet");
+        (_a = confirmLayoutDrawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    };
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        open: handleOpen,
+        close: handleClose,
+    }); });
+    var estimateReceive = (0, react_1.useMemo)(function () {
+        if (!estimateFee || !amount || !(toToken === null || toToken === void 0 ? void 0 : toToken.usd_rate))
+            return undefined;
+        return (+amount - +(estimateFee === null || estimateFee === void 0 ? void 0 : estimateFee.fee_in_currency)) / +(toToken === null || toToken === void 0 ? void 0 : toToken.usd_rate);
+    }, [estimateFee, toToken, amount]);
+    (0, react_1.useEffect)(function () {
+        if (isInitPasscode && !fromTokens) {
+            updateSwapTokens();
+        }
+    }, [isInitPasscode, fromTokens]);
+    return ((0, jsx_runtime_1.jsx)(RequireConnect_1.default, { children: (0, jsx_runtime_1.jsx)(ConfirmLayout_1.default, { onOpen: validateAll, trigger: trigger, ref: confirmLayoutDrawerRef, action: transactionSlug, header: {
+                title: overrideHeader,
+            }, sx: sx, confirmAction: (0, jsx_runtime_1.jsx)(ConfirmByPasscode_1.default, { action: transactionSlug, onConfirmSuccess: handleSwapToken, children: btnConfirm !== null && btnConfirm !== void 0 ? btnConfirm : ((0, jsx_runtime_1.jsx)(Button_1.default.Primary, { status: !!error || isLoadingEstimateFee ? Button_1.BUTTON_STATUS.DISABLED : buttonStatus, sx: { width: "100%" }, children: "Swap" })) }), children: children !== null && children !== void 0 ? children : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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: { display: "flex", gap: theme.mixins.gaps.g12, flexDirection: "column" }, 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,
+                                            }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("swap_up"), width: 18, height: 18, color: theme.palette.text.primary }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                                        width: "95%",
+                                                        borderStyle: "dashed",
+                                                        borderColor: theme.palette.border.white16,
+                                                    } })] }), (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: toToken === null || toToken === void 0 ? void 0 : toToken.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: toToken === null || toToken === void 0 ? void 0 : toToken.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: toAmount }) })] })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { mt: theme.mixins.customMargin.m12 }), children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                            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: 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: {
+                                            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 }) }))] })) }) }));
+});
+exports.SwapToken.displayName = "SwapToken";
+exports.default = exports.SwapToken;

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

@@ -31,9 +31,11 @@ var navigation_1 = require("next/navigation");
 var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"));
 var navigation_2 = require("next/navigation");
 var createDebounce_1 = __importDefault(require("../../../utils/createDebounce"));
+var providers_1 = require("../../../providers");
 var rememberTabDeBounce = (0, createDebounce_1.default)(1000);
 var SwiperControlled = (0, react_2.forwardRef)(function (props, ref) {
     var swiperRef = (0, react_2.useRef)(null);
+    var theme = (0, providers_1.useTheme)();
     var router = (0, useCustomRouter_1.default)();
     var pathname = (0, navigation_2.usePathname)();
     var searchParams = (0, navigation_1.useSearchParams)();
@@ -90,7 +92,9 @@ var SwiperControlled = (0, react_2.forwardRef)(function (props, ref) {
     };
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ width: "100%", display: "flex", flexDirection: "column" }, props.sx), children: [props.tabs && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     maxWidth: "100%",
-                }, children: (0, jsx_runtime_1.jsxs)(material_1.Tabs, { value: activeTab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", sx: __assign({ minHeight: "unset" }, props.tabsSx), children: __spreadArray([], props.tabs, true) }) })), (0, jsx_runtime_1.jsx)(react_1.Swiper, __assign({ speed: 500 }, props.swiperProps, { onSlideChange: handleSlideChange, ref: swiperRef, initialSlide: activeTab, style: __assign({ width: "100%" }, props.swiperStyle), allowTouchMove: !props.disableSwipe, children: props.children }))] }));
+                }, children: (0, jsx_runtime_1.jsxs)(material_1.Tabs, { value: activeTab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", sx: __assign({ "& .MuiTabs-indicator": {
+                            backgroundColor: theme.palette.background.primary,
+                        }, minHeight: "unset" }, props.tabsSx), children: __spreadArray([], props.tabs, true) }) })), (0, jsx_runtime_1.jsx)(react_1.Swiper, __assign({ speed: 500 }, props.swiperProps, { onSlideChange: handleSlideChange, ref: swiperRef, initialSlide: activeTab, style: __assign({ width: "100%" }, props.swiperStyle), allowTouchMove: !props.disableSwipe, children: props.children }))] }));
 });
 SwiperControlled.displayName = "SwiperControlled";
 exports.default = SwiperControlled;

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

@@ -2,9 +2,10 @@ import { GeneralProps } from "../../../types/ui";
 export declare enum TimeFilterType {
     ALL = "all",
     TODAY = "today",
-    SEVEN_DAYS = "7 days",
-    THIRTY_DAYS = "30 days"
+    SEVEN_DAYS = "7",
+    THIRTY_DAYS = "30"
 }
+export declare const TIME_FILTER_LABEL: Record<TimeFilterType, string>;
 export interface TimeFilterProps extends GeneralProps {
     initialValue?: TimeFilterType;
     onChange?: (value: TimeFilterData, event?: React.MouseEvent<HTMLElement>) => any;
@@ -15,5 +16,5 @@ export interface TimeFilterData {
     startDate?: string;
     endDate?: string;
 }
-declare const TimeFilter: ({ initialValue, onChange, hideAll }: TimeFilterProps) => import("react/jsx-runtime").JSX.Element;
+declare const TimeFilter: ({ initialValue, onChange, hideAll, sx, }: TimeFilterProps) => import("react/jsx-runtime").JSX.Element;
 export default TimeFilter;

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

@@ -13,8 +13,9 @@ var __assign = (this && this.__assign) || function () {
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimeFilterType = void 0;
+exports.TIME_FILTER_LABEL = exports.TimeFilterType = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var ThemeProvider_1 = require("../../../providers/ThemeProvider");
@@ -23,17 +24,21 @@ var Text_1 = __importDefault(require("../Text"));
 var date_fns_1 = require("date-fns");
 var getMaxTime_1 = __importDefault(require("../../../utils/getMaxTime"));
 var formatDate_1 = __importDefault(require("../../../utils/formatDate"));
-var Icon_1 = __importDefault(require("../Icon"));
-var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
 var TimeFilterType;
 (function (TimeFilterType) {
     TimeFilterType["ALL"] = "all";
     TimeFilterType["TODAY"] = "today";
-    TimeFilterType["SEVEN_DAYS"] = "7 days";
-    TimeFilterType["THIRTY_DAYS"] = "30 days";
+    TimeFilterType["SEVEN_DAYS"] = "7";
+    TimeFilterType["THIRTY_DAYS"] = "30";
 })(TimeFilterType || (exports.TimeFilterType = TimeFilterType = {}));
+exports.TIME_FILTER_LABEL = (_a = {},
+    _a[TimeFilterType.ALL] = "All",
+    _a[TimeFilterType.TODAY] = "Today",
+    _a[TimeFilterType.SEVEN_DAYS] = "7 days",
+    _a[TimeFilterType.THIRTY_DAYS] = "30 days",
+    _a);
 var TimeFilter = function (_a) {
-    var _b = _a.initialValue, initialValue = _b === void 0 ? TimeFilterType.ALL : _b, onChange = _a.onChange, hideAll = _a.hideAll;
+    var _b = _a.initialValue, initialValue = _b === void 0 ? TimeFilterType.ALL : _b, onChange = _a.onChange, hideAll = _a.hideAll, sx = _a.sx;
     var theme = (0, ThemeProvider_1.useTheme)();
     var _c = (0, react_1.useState)({
         type: initialValue,
@@ -108,38 +113,30 @@ var TimeFilter = function (_a) {
         setValue(newData);
         onChange === null || onChange === void 0 ? void 0 : onChange(newData);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g6, alignItems: "flex-start" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g6, alignItems: "flex-start" }), sx), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                     color: theme.palette.text.accent2,
                     fontWeight: theme.typography.fontWeight500,
                     fontSize: theme.typography.fontSize11,
                 }, children: getTimeFilterLabel(value) }), (0, jsx_runtime_1.jsx)(material_1.ToggleButtonGroup, { defaultValue: initialValue, onChange: handleChange, sx: { gap: theme.mixins.gaps.g8 }, children: Object.values(TimeFilterType).map(function (type) {
                     if (hideAll && type === TimeFilterType.ALL)
                         return null;
-                    return ((0, jsx_runtime_1.jsxs)(material_1.ToggleButton, { "aria-label": type, value: type, sx: {
+                    var isActive = (value === null || value === void 0 ? void 0 : value.type) === type;
+                    return ((0, jsx_runtime_1.jsx)(material_1.ToggleButton, { "aria-label": type, value: type, sx: {
                             p: 0,
                             border: "none",
-                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Chip, { label: type, variant: "outlined", sx: {
-                                    position: "relative",
-                                    textTransform: "capitalize",
-                                    fontSize: theme.typography.fontSize11,
-                                    borderRadius: theme.mixins.customRadius.r10,
-                                    borderWidth: 1,
-                                    borderColor: (value === null || value === void 0 ? void 0 : value.type) === type
-                                        ? theme.palette.primary.main
-                                        : theme.palette.border.accent3,
-                                    backgroundColor: (value === null || value === void 0 ? void 0 : value.type) === type ? theme.palette.secondary.main : "transparent",
-                                    color: (value === null || value === void 0 ? void 0 : value.type) === type ? theme.palette.primary.main : theme.palette.text.accent,
-                                    fontWeight: (value === null || value === void 0 ? void 0 : value.type) === type
-                                        ? theme.typography.fontWeight600
-                                        : theme.typography.fontWeight500,
-                                    transition: "background 0.2s, color 0.2s, border-color 0.2s",
-                                    overflow: "hidden",
-                                } }), (value === null || value === void 0 ? void 0 : value.type) === type && ((0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("rectangle"), width: 22, height: 22, sx: {
-                                    position: "absolute",
-                                    right: 0,
-                                    borderTopRightRadius: theme.mixins.customRadius.r10,
-                                    top: 0,
-                                } }))] }, type));
+                        }, children: (0, jsx_runtime_1.jsx)(material_1.Chip, { label: "".concat(exports.TIME_FILTER_LABEL[type]), variant: "outlined", sx: {
+                                position: "relative",
+                                textTransform: "capitalize",
+                                fontSize: theme.typography.fontSize11,
+                                borderRadius: theme.mixins.customRadius.r10,
+                                borderWidth: 1,
+                                borderColor: isActive ? theme.palette.primary.main : theme.palette.border.accent3,
+                                backgroundColor: isActive ? theme.palette.secondary.main : "transparent",
+                                color: isActive ? theme.palette.primary.main : theme.palette.text.accent,
+                                fontWeight: theme.typography.fontWeight600,
+                                transition: "background 0.2s, color 0.2s, border-color 0.2s",
+                                overflow: "hidden",
+                            } }) }, type));
                 }) })] }));
 };
 exports.default = TimeFilter;

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

@@ -22,13 +22,18 @@ var Text_1 = __importDefault(require("../Text"));
 var Formatter_1 = __importDefault(require("../Formatter"));
 var material_1 = require("@mui/material");
 var ThemeProvider_1 = require("../../../providers/ThemeProvider");
-var ContentHiddenProvider_1 = require("../../../providers/ContentHiddenProvider");
+var user_1 = __importDefault(require("../../../store/user"));
 var TokenItem = function (props) {
     var theme = (0, ThemeProvider_1.useTheme)();
     var tokenData = (0, react_1.useMemo)(function () { return JSON.parse(props.tokenData); }, [props.tokenData]);
     var currency = (0, react_1.useMemo)(function () { return tokenData.currency; }, [tokenData]);
-    var isHidden = (0, ContentHiddenProvider_1.useContentHidden)().isHidden;
-    // const pnlValue = useMemo(() => Number(tokenData.pnl || 0), [tokenData.pnl]);
+    var isShowBalance = (0, user_1.default)(function (state) { return state.settings.balance.isShowBalance; });
+    var balance = (0, react_1.useMemo)(function () {
+        return +tokenData.current_value;
+    }, [tokenData.current_value]);
+    var balanceInUSD = (0, react_1.useMemo)(function () {
+        return tokenData.assets;
+    }, [tokenData.assets]);
     var shouldHideSmallAsset = props.showSmallAssets && currency.name === "USD";
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
             display: !shouldHideSmallAsset ? "grid" : "none",
@@ -37,15 +42,15 @@ var TokenItem = function (props) {
             py: theme.mixins.customPadding.p8,
         }, 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, { width: 20, sx: {
                             borderRadius: theme.mixins.customRadius.full,
-                        }, src: currency.link }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { flex: 1 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: currency.name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: currency.full_name })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g1, justifyContent: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontWeight: theme.typography.fontWeight700 }), children: !isHidden ? (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: tokenData.current_value }) : "***" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: !isHidden ? (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: 100 }) : "***" })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g1, textAlign: "right" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: theme.palette.text.alertStatus, fontWeight: theme.typography.fontWeight700 }), children: !isHidden ? ((0, jsx_runtime_1.jsx)(Formatter_1.default, { value: 70000 })) : ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                        }, src: currency.link }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { flex: 1 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: currency.name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: currency.full_name })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g1, justifyContent: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontWeight: theme.typography.fontWeight700 }), children: isShowBalance ? (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: balance }) : "****" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: isShowBalance ? (0, jsx_runtime_1.jsx)(Formatter_1.default, { start: "$", value: balanceInUSD }) : "****" })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g1, textAlign: "right" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: theme.palette.text.alertStatus, fontWeight: theme.typography.fontWeight700 }), children: isShowBalance ? ((0, jsx_runtime_1.jsx)(Formatter_1.default, { value: 70000 })) : ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                 fontSize: theme.typography.fontSize14,
                                 fontWeight: theme.typography.fontWeight600,
                                 color: theme.palette.text.black,
-                            }, children: "***" })) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.alertStatus }), children: !isHidden ? ((0, jsx_runtime_1.jsx)(Formatter_1.default, { value: 3.72 })) : ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                            }, children: "****" })) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.alertStatus }), children: isShowBalance ? ((0, jsx_runtime_1.jsx)(Formatter_1.default, { value: 3.72 })) : ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                 fontSize: theme.typography.fontSize12,
                                 fontWeight: theme.typography.fontWeight600,
                                 color: theme.palette.text.accent2,
-                            }, children: "***" })) })] })] }));
+                            }, children: "****" })) })] })] }));
 };
 exports.TokenItem = TokenItem;
 exports.default = exports.TokenItem;

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

@@ -76,8 +76,6 @@ var TokensBoard = function () {
                                 }, children: "PnL" })] })), tokens === null || tokens === void 0 ? void 0 : tokens.map(function (item) {
                         var stringifiedTokenData = JSON.stringify(__assign({}, item));
                         return ((0, jsx_runtime_1.jsx)(TokenItem_1.default, { showSmallAssets: showSmallAssets, tokenData: stringifiedTokenData }, item.id));
-                    }), !tokens && (0, jsx_runtime_1.jsx)(WaitingData_1.default, { sx: { margin: "auto" } })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                    borderColor: theme.palette.border.accent,
-                } })] }));
+                    }), !tokens && (0, jsx_runtime_1.jsx)(WaitingData_1.default, { sx: { margin: "auto" } })] })] }));
 };
 exports.default = TokensBoard;

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

@@ -0,0 +1,10 @@
+import { GeneralProps } from "../../../types/ui";
+import { SxProps } from "@mui/material";
+interface ActivityViewProps extends GeneralProps {
+    sx?: SxProps;
+}
+export declare const ActivityView: {
+    (props: ActivityViewProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ActivityView;

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

@@ -0,0 +1,64 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActivityView = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
+var PageHeader_1 = __importDefault(require("../../ui/PageHeader"));
+var SwiperControlled_1 = __importDefault(require("../../ui/SwiperControlled"));
+var useActivities_1 = __importDefault(require("../../../hooks/useActivities"));
+var material_1 = require("@mui/material");
+var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var react_2 = require("swiper/react");
+var ActivitiesTypeSlice_1 = __importDefault(require("../../ui/ActivitiesTypeSlice"));
+var ActivityView = function (props) {
+    var sx = props.sx;
+    var theme = (0, ThemeProvider_1.useTheme)();
+    var swiperRef = (0, react_1.useRef)(null);
+    var activityTypes = (0, useActivities_1.default)().activityTypes;
+    var _a = (0, react_1.useState)(0), activeTab = _a[0], setActiveTab = _a[1];
+    var handleSlideChange = function (index) {
+        setActiveTab(index);
+    };
+    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Activities" }), sx: sx, children: (0, jsx_runtime_1.jsx)(SwiperControlled_1.default, { ref: swiperRef, 
+            // tabParamName="activity-tab"
+            swiperProps: {
+                slidesPerView: 1,
+                spaceBetween: 40,
+            }, onTabChange: handleSlideChange, tabs: activityTypes === null || activityTypes === void 0 ? void 0 : activityTypes.map(function (type, index) {
+                return ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: type.name, value: index, "data-index": index, sx: {
+                        padding: "".concat(theme.mixins.customPadding.p8, " ").concat(theme.mixins.customPadding.p16),
+                        minHeight: "unset",
+                        minWidth: "unset",
+                        textTransform: "capitalize",
+                        color: theme.palette.text.accent2,
+                        transition: "all 0.3s linear",
+                        fontSize: theme.typography.fontSize12,
+                        borderColor: "currentcolor",
+                        "&.Mui-selected": {
+                            color: theme.palette.text.primary,
+                        },
+                        "&.Mui-selected::after": {
+                            content: "''",
+                            position: "absolute",
+                            bottom: 0,
+                            left: 0,
+                        },
+                    } }, index));
+            }), sx: {
+                height: "100%",
+            }, swiperStyle: {
+                flex: 1,
+            }, children: activityTypes === null || activityTypes === void 0 ? void 0 : activityTypes.map(function (type, index) {
+                return ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: {
+                        position: "relative",
+                    }, children: (0, jsx_runtime_1.jsx)(ActivitiesTypeSlice_1.default, { type: type, isActive: activeTab === index }) }, index));
+            }) }) }));
+};
+exports.ActivityView = ActivityView;
+exports.ActivityView.displayName = "Activities";
+exports.default = exports.ActivityView;