tek-wallet 0.0.754 → 0.0.756

package/README.md

@@ -1,6 +1,17 @@
 # TekWallet Documentation
 
-## Cấu hình
+## 📋 Mục lục
+
+- [Cấu hình](#cấu-hình)
+- [Components](#components)
+- [States](#states)
+- [Methods](#methods)
+- [Hướng dẫn sử dụng](#hướng-dẫn-sử-dụng)
+- [Lưu ý](#lưu-ý)
+
+---
+
+## ⚙️ Cấu hình
 
 ### 1. Provider Setup
 
@@ -17,10 +28,6 @@ import { TekWalletProvider } from "tek-wallet";
 >
   <YourApp />
 </TekWalletProvider>;
-
-<TekWalletProvider isSSO accessToken={accessToken}>
-  <YourApp />
-</TekWalletProvider>;
 ```
 
 ### 2. Environment Variables
@@ -36,7 +43,9 @@ NEXT_PUBLIC_TEK_WALLET_SERVER_URL=your_server_url
 NEXT_PUBLIC_TEK_WALLET_ABLY_API_KEY=your_ably_api_key
 ```
 
-## Components
+---
+
+## 🧩 Components
 
 ### RequiredConnect
 
@@ -52,39 +61,73 @@ const { tokens } = useWallet();
 </RequiredConnect>;
 ```
 
-### LockToken
+### Các Components Chính
 
-Component cho phép người dùng khóa token trong ví.
+| Component             | Mô tả                                     |
+| --------------------- | ----------------------------------------- |
+| **LockToken**         | Cho phép người dùng khóa token trong ví   |
+| **SwapToken**         | Hỗ trợ chức năng hoán đổi token           |
+| **UpdateLockedToken** | Cho phép cập nhật thông tin token đã khóa |
+| **ReceiveFunction**   | Xử lý chức năng nhận token                |
+| **AssetView**         | Hiển thị tài sản trong ví                 |
+| **WithdrawFunction**  | Xử lý chức năng rút token                 |
 
-### SwapToken
+### Components Xác nhận (Confirm)
 
-Component hỗ trợ chức năng hoán đổi token.
+| Component               | Mô tả                                                            |
+| ----------------------- | ---------------------------------------------------------------- |
+| **ConfirmSwapToken**    | Xử lý chức năng swap token bản đơn giản (khả năng custom cao)    |
+| **ConfirmSendExternal** | Xử lý chức năng rút token bản đơn giản (khả năng custom cao)     |
+| **ConfirmSendInternal** | Xử lý chức năng chuyển nội bộ bản đơn giản (khả năng custom cao) |
 
-### UpdateLockedToken
+### Components View Đầy đủ
 
-Component cho phép cập nhật thông tin token đã khóa.
+| Component            | Mô tả                                                                  |
+| -------------------- | ---------------------------------------------------------------------- |
+| **SwapView**         | Xử lý chức năng swap token bản đầy đủ, có validate, input amount...    |
+| **SendExternalView** | Xử lý chức năng rút token bản đầy đủ, có validate, input amount...     |
+| **SendInternalView** | Xử lý chức năng chuyển nội bộ bản đầy đủ, có validate, input amount... |
+| **AssetView**        | Quản lí asset người dùng                                               |
 
-### ReceiveFunction
+### TekWalletView
 
-Component xử lý chức năng nhận token.
+Component như một app wallet mini (có router nội bộ)
 
-### AssetView
+**Sử dụng cơ bản:**
 
-Component hiển thị tài sản trong ví.
+```jsx
+// page: "tek-wallet/[[...pathname]]/page.tsx"
+"use client";
 
-### WithdrawFunction
+import { TekWalletView } from "tek-wallet";
 
-Component xử lý chức năng rút token.
+function WalletPage() {
+  return <TekWalletView />;
+}
 
-### ConfirmSendExternal
+export default WalletPage;
+```
 
-Component xử lý chức năng rút token bản đơn giản (khả năng custom cao).
+**Với basePath:**
 
-### ConfirmSendInternal
+Nếu phía trước có path: `<path>/tek-wallet/[[...pathname]]/page.tsx` thì thêm basePath vào options:
 
-Component xử lý chức năng chuyển nội bộ bản đơn giản (khả năng custom cao).
+```jsx
+<TekWalletProvider
+  isSSO
+  accessToken={accessToken}
+  options={{
+    useDefaultToastMessage: true,
+    basePath: <path>
+  }}
+>
+  {props.children}
+</TekWalletProvider>
+```
+
+---
 
-## States
+## 📊 States
 
 ### Wallet States
 
@@ -116,7 +159,9 @@ Component xử lý chức năng chuyển nội bộ bản đơn giản (khả n
 | `fromTokens`   | `Token[]`       | Danh sách tokens có thể swap                                |
 | `transaction`  | `Transaction`   | Dữ liệu event realtime mới nhất (swap token, send token...) |
 
-## Methods
+---
+
+## 🔧 Methods
 
 ### Wallet Management
 
@@ -148,18 +193,24 @@ Component xử lý chức năng chuyển nội bộ bản đơn giản (khả n
 | -------------------- | ---------------------- |
 | `pushNotification()` | Hiển thị toast message |
 
-## Hướng dẫn sử dụng
+---
+
+## 🚀 Hướng dẫn sử dụng
 
 Để bắt đầu sử dụng TekWallet, hãy đảm bảo:
 
-1. Đã cài đặt đầy đủ các dependencies cần thiết
-2. Đã cấu hình đúng các biến môi trường
-3. Đã wrap ứng dụng trong TekWalletProvider
-4. Đã import các components cần thiết từ package
+1. ✅ Đã cài đặt đầy đủ các dependencies cần thiết
+2. ✅ Đã cấu hình đúng các biến môi trường
+3. ✅ Đã wrap ứng dụng trong TekWalletProvider
+4. ✅ Đã import các components cần thiết từ package
+
+---
+
+## ⚠️ Lưu ý
 
-## Lưu ý
+- 🔒 Đảm bảo luôn sử dụng `RequiredConnect` cho các hành động yêu cầu ví phải được kết nối
+- 🔧 Các biến môi trường phải được cấu hình đúng để đảm bảo ứng dụng hoạt động chính xác
 
-- Đảm bảo luôn sử dụng RequiredConnect cho các hành động yêu cầu ví phải được kết nối
-- Các biến môi trường phải được cấu hình đúng để đảm bảo ứng dụng hoạt động chính xác
+---
 
 # tek-wallet

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

@@ -1,7 +1,10 @@
+import { SxProps } from "@mui/material";
 import { TransactionType } from "../../../services/axios/get-activities-service/type";
 export interface ActivitiesTypeSlicePropsType {
     type: TransactionType;
     isActive?: boolean;
+    limitItems?: number;
+    sx?: SxProps;
 }
 export declare enum Status {
     Loading = "loading",

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

@@ -28,7 +28,6 @@ var DrawerComponent_1 = __importDefault(require("../DrawerComponent"));
 var ModalLayout_1 = __importDefault(require("../ModalLayout"));
 var ActivityDetail_1 = __importDefault(require("../ActivityDetail"));
 var SmartList_1 = __importDefault(require("../SmartList"));
-var type_1 = require("../../../providers/ActivitiesProvider/type");
 var Status;
 (function (Status) {
     Status["Loading"] = "loading";
@@ -37,11 +36,11 @@ var Status;
 })(Status || (exports.Status = Status = {}));
 var prefix = "activities_";
 function ActivitiesTypeSlice(props) {
-    var _a, _b;
+    var _a, _b, _c;
     var theme = (0, ThemeProvider_1.useTheme)();
-    var _c = (0, useActivities_1.default)(), activities = _c.activities, loadActivities = _c.loadActivities, pages = _c.pages;
-    var type = props.type, isActive = props.isActive;
-    var _d = (0, react_1.useState)(undefined), detailActivity = _d[0], setDetailActivity = _d[1];
+    var _d = (0, useActivities_1.default)(), activities = _d.activities, loadActivities = _d.loadActivities, loadOutActivityType = _d.loadOutActivityType;
+    var type = props.type, isActive = props.isActive, limitItems = props.limitItems, sx = props.sx;
+    var _e = (0, react_1.useState)(undefined), detailActivity = _e[0], setDetailActivity = _e[1];
     var detailDrawerRef = (0, react_1.useRef)(null);
     var activitiesByType = (0, react_1.useMemo)(function () {
         if (!(type === null || type === void 0 ? void 0 : type.slug))
@@ -73,11 +72,12 @@ function ActivitiesTypeSlice(props) {
     var loadMore = (0, react_1.useCallback)(function () {
         loadActivities(type.slug);
     }, [loadActivities, type.slug]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: "100%", height: "100%", display: "flex" }, children: [status === Status.Loading && (0, jsx_runtime_1.jsx)(WaitingData_1.default, { sx: { margin: "auto" } }), status === Status.Empty && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { margin: "auto" }, icon: (0, getIcon_1.default)(prefix + "empty_" + type.slug), description: "No ".concat((_a = type.name) === null || _a === void 0 ? void 0 : _a.toLowerCase(), " activity") })), status === Status.Filled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SmartList_1.default, { items: activitiesByType || [], loadMoreData: loadMore, hasMore: pages[type.slug] !== type_1.MAX_PAGE, loadingComponent: (0, jsx_runtime_1.jsx)(WaitingData_1.default, { sx: { margin: "auto" } }), children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, paddingTop: theme.mixins.customPadding.p16, paddingBottom: theme.mixins.customPadding.p32, px: theme.mixins.customPadding.p16 }), children: activitiesByType === null || activitiesByType === void 0 ? void 0 : activitiesByType.map(function (activity, index) {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ width: "100%", height: "100%", display: "flex", paddingTop: theme.mixins.customPadding.p8, px: theme.mixins.customPadding.p16 }, sx), children: [status === Status.Loading && (0, jsx_runtime_1.jsx)(WaitingData_1.default, { sx: { marginBottom: "auto" } }), status === Status.Empty && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { marginBottom: "auto", marginTop: "4rem" }, icon: (0, getIcon_1.default)(prefix + "empty_" + type.slug), description: "No ".concat((_a = type.name) === null || _a === void 0 ? void 0 : _a.toLowerCase(), " activity") })), status === Status.Filled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SmartList_1.default, { loadMoreData: loadMore, hasMore: !loadOutActivityType[type.slug] &&
+                            ((activitiesByType === null || activitiesByType === void 0 ? void 0 : activitiesByType.length) || 0) < (limitItems || Infinity), loadingComponent: (0, jsx_runtime_1.jsx)(WaitingData_1.default, { numberOfSkeleton: 3, sx: { marginTop: theme.mixins.customMargin.m12 } }), sx: {}, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: (_b = activitiesByType === null || activitiesByType === void 0 ? void 0 : activitiesByType.slice(0, limitItems)) === null || _b === void 0 ? void 0 : _b.map(function (activity, index) {
                                 if (!activity)
                                     return null;
                                 var dataAsJson = JSON.stringify(activity);
                                 return ((0, jsx_runtime_1.jsx)(ActivityItem_1.default, { onClick: function () { return openDetail(activity); }, data: dataAsJson }, index));
-                            }) }) }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: detailDrawerRef, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { onClose: closeDetail, title: (_b = detailActivity === null || detailActivity === void 0 ? void 0 : detailActivity.transaction_type) === null || _b === void 0 ? void 0 : _b.name, children: (0, jsx_runtime_1.jsx)(ActivityDetail_1.default, { activityData: detailActivity }) }) })] }))] }));
+                            }) }) }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: detailDrawerRef, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { onClose: closeDetail, title: (_c = detailActivity === null || detailActivity === void 0 ? void 0 : detailActivity.transaction_type) === null || _c === void 0 ? void 0 : _c.name, children: (0, jsx_runtime_1.jsx)(ActivityDetail_1.default, { activityData: detailActivity }) }) })] }))] }));
 }
 exports.default = ActivitiesTypeSlice;

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

@@ -72,19 +72,19 @@ function ActivityDetail(props) {
     var getAmountColor = (0, react_1.useCallback)(function () {
         if (isIncrease)
             return theme.palette.text.successStatus;
-        return theme.palette.text.white;
+        return theme.palette.text.black;
     }, [isIncrease, theme]);
     if (!activityData)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g16, alignItems: "center" }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { mr: "0.5rem" }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: currency === null || currency === void 0 ? void 0 : currency.link, width: 64, sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g16, alignItems: "center" }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.row), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: currency === null || currency === void 0 ? void 0 : currency.link, width: 64, sx: {
                             borderRadius: theme.mixins.customRadius.full,
                             border: isSwap ? "0.25rem white solid" : "none",
-                            ml: "-0.5rem",
+                            // ml: "-0.5rem",
                         } }), (swapToCurrency === null || swapToCurrency === void 0 ? void 0 : swapToCurrency.link) && ((0, jsx_runtime_1.jsx)(Icon_1.default, { src: swapToCurrency === null || swapToCurrency === void 0 ? void 0 : swapToCurrency.link, width: 64, sx: {
                             borderRadius: theme.mixins.customRadius.full,
                             border: isSwap ? "0.25rem white solid" : "none",
-                            ml: "-0.5rem",
-                        } }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { width: "fit-content", gap: theme.mixins.gaps.g4, alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontWeight: theme.typography.fontWeightBold, fontSize: theme.typography.fontSize24, color: getAmountColor(), opacity: isSwap ? 0.5 : 1 }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { start: isIncrease ? "+" : "-", value: activityData.amount, unit: " ".concat(currency === null || currency === void 0 ? void 0 : currency.name) }) }), isSwap && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontWeight: theme.typography.fontWeightBold, fontSize: theme.typography.fontSize24, color: theme.palette.text.successStatus }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { start: "+", value: swapToCurrency === null || swapToCurrency === void 0 ? void 0 : swapToCurrency.swap_total_amount, unit: " ".concat(swapToCurrency === null || swapToCurrency === void 0 ? void 0 : swapToCurrency.name) }) })), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: (0, formatDate_1.default)(activityData.date_created) }), status !== type_1.TransactionStatus.Success && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [status === type_1.TransactionStatus.Processing && ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "secondary", size: 16 })), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                            ml: "-1rem",
+                        } }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { width: "fit-content", gap: theme.mixins.gaps.g4, alignItems: "center" }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontWeight: theme.typography.fontWeight700, fontSize: theme.typography.fontSize24, color: getAmountColor() }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { start: isIncrease ? "+" : "-", value: activityData.amount, unit: " ".concat(currency === null || currency === void 0 ? void 0 : currency.name) }) }), isSwap && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontWeight: theme.typography.fontWeight700, fontSize: theme.typography.fontSize24, color: theme.palette.text.successStatus }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { start: "+", value: swapToCurrency === null || swapToCurrency === void 0 ? void 0 : swapToCurrency.swap_total_amount, unit: " ".concat(swapToCurrency === null || swapToCurrency === void 0 ? void 0 : swapToCurrency.name) }) }))] }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: (0, formatDate_1.default)(activityData.date_created) }), status !== type_1.TransactionStatus.Success && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [status === type_1.TransactionStatus.Processing && ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "secondary", size: 16 })), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontSize: theme.typography.fontSize12,
                                     textTransform: "capitalize",
                                     color: getStatusColor(),

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

@@ -88,17 +88,22 @@ function ActivityItem(props) {
     var getAmountColor = (0, react_1.useCallback)(function () {
         if (isIncrease)
             return theme.palette.text.successStatus;
-        return theme.palette.text.white;
+        return theme.palette.text.black;
     }, [isIncrease, theme]);
     if (!activityData)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, __assign({ sx: __assign(__assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, backgroundColor: theme.palette.background.white16, borderRadius: theme.mixins.customRadius.r16, p: theme.mixins.customPadding.p12, flexGrow: "unset", boxShadow: theme.shadows[1] }), sx) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, __assign({ sx: __assign(__assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, backgroundColor: theme.palette.background.tertiary, borderRadius: theme.mixins.customRadius.r16, p: theme.mixins.customPadding.p12, flexGrow: "unset", boxShadow: theme.shadows[1] }), sx) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     width: "fit-content",
                     height: "fit-content",
-                }, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { src: type === null || type === void 0 ? void 0 : type.link, width: 24 }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { width: "fit-content", gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: theme.mixins.activityTitle, children: type === null || type === void 0 ? void 0 : type.name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: theme.mixins.activityDescription, children: descriptionElement }), status !== type_1.TransactionStatus.Success && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [status === type_1.TransactionStatus.Processing && ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "secondary", size: 12 })), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                }, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { src: type === null || type === void 0 ? void 0 : type.link, width: 24, sx: { borderRadius: theme.mixins.customRadius.full } }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { width: "fit-content", gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: theme.mixins.activityTitle, children: type === null || type === void 0 ? void 0 : type.name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: theme.mixins.activityDescription, children: descriptionElement }), status !== type_1.TransactionStatus.Success && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [status === type_1.TransactionStatus.Processing && ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "secondary", size: 12 })), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontSize: theme.typography.fontSize12,
                                     textTransform: "capitalize",
                                     color: getStatusColor(),
-                                }, children: status })] }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g2, width: "fit-content", alignItems: "flex-end", ml: "auto" }), children: [slug === type_1.TransactionSlug.SWAP && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontWeight: theme.typography.fontWeightBold, color: theme.palette.text.successStatus, textAlign: "right" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { start: "+", value: swapToCurrency === null || swapToCurrency === void 0 ? void 0 : swapToCurrency.swap_total_amount, unit: " ".concat(swapToCurrency === null || swapToCurrency === void 0 ? void 0 : swapToCurrency.name) }) })), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontWeight: theme.typography.fontWeightBold, color: getAmountColor(), textAlign: "right" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { start: isIncrease ? "+" : "-", value: activityData.amount, unit: " ".concat(currency === null || currency === void 0 ? void 0 : currency.name) }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { textAlign: "right" }), children: (0, formatDate_1.default)(activityData.date_created) })] })] })));
+                                }, children: status })] }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g2, width: "fit-content", alignItems: "flex-end", ml: "auto" }), children: [slug === type_1.TransactionSlug.SWAP && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontWeight: theme.typography.fontWeight700, fontSize: theme.typography.fontSize13, color: theme.palette.text.successStatus, textAlign: "right" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { start: "+", value: swapToCurrency === null || swapToCurrency === void 0 ? void 0 : swapToCurrency.swap_total_amount, unit: " ".concat(swapToCurrency === null || swapToCurrency === void 0 ? void 0 : swapToCurrency.name) }) })), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                            fontSize: theme.typography.fontSize13,
+                            fontWeight: theme.typography.fontWeight700,
+                            color: getAmountColor(),
+                            textAlign: "right",
+                        }, children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { start: isIncrease ? "+" : "-", value: activityData.amount, unit: " ".concat(currency === null || currency === void 0 ? void 0 : currency.name) }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { textAlign: "right" }), children: (0, formatDate_1.default)(activityData.date_created) })] })] })));
 }
 exports.default = ActivityItem;

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

@@ -16,123 +16,125 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var framer_motion_1 = require("framer-motion");
 var AnalyticGroup_1 = __importDefault(require("../AnalyticGroup"));
 var TimeFilter_1 = __importDefault(require("../TimeFilter"));
-var TimeFilter_2 = require("../TimeFilter");
 var DelayMounted_1 = __importDefault(require("../DelayMounted"));
 var material_1 = require("@mui/material");
 var ThemeProvider_1 = require("../../../providers/ThemeProvider");
 var NeonLineChart_1 = __importDefault(require("../NeonLineChart"));
-var ContentHiddenProvider_1 = require("../../../providers/ContentHiddenProvider");
 var SvgPath_1 = require("../SvgPath");
-var fakeSeries = [
-    {
-        name: "All",
-        data: [
-            1003785.6864951615, 1003795.988344575, 1003827.99766239, 1003899.7426850981,
-            1003891.7710159089, 1003810.6439517767, 1003780.7195320514, 1003797.9506016063,
-            1003781.455378438, 1003782.0072632281, 1003715.167883104, 1003724.9791682598,
-            1003716.6018329085, 1003711.3282671372, 1003686.1868489254, 1003625.4795220237,
-            1003584.3334449014, 1003498.9139435134, 1003310.7825506503, 1003339.72584186,
-            1003334.3069939599, 1003364.3540547496, 1003394.4011155394, 1003398.386950134,
-            1003233.005474726, 1003185.2981006557, 1003165.7981714085,
-        ],
-    },
-];
-var labels = [
-    "2025-03-04T08:10:17.311Z",
-    "2025-03-04T12:10:18.859Z",
-    "2025-03-04T16:10:19.118Z",
-    "2025-03-04T20:10:18.246Z",
-    "2025-03-05T00:10:18.371Z",
-    "2025-03-05T10:12:40.882Z",
-    "2025-03-05T14:12:42.832Z",
-    "2025-03-05T18:12:41.114Z",
-    "2025-03-05T22:12:40.544Z",
-    "2025-03-06T02:12:40.718Z",
-    "2025-03-08T10:35:52.596Z",
-    "2025-03-08T14:35:52.979Z",
-    "2025-03-08T16:01:31.209Z",
-    "2025-03-08T18:35:52.824Z",
-    "2025-03-08T22:35:52.901Z",
-    "2025-03-09T06:35:53.327Z",
-    "2025-03-09T10:35:52.682Z",
-    "2025-03-09T14:35:53.001Z",
-    "2025-03-09T18:35:52.886Z",
-    "2025-03-09T22:35:52.880Z",
-    "2025-03-10T03:43:34.153Z",
-    "2025-03-10T06:35:52.944Z",
-    "2025-03-10T10:35:52.253Z",
-    "2025-03-10T14:35:52.727Z",
-    "2025-03-10T18:35:52.865Z",
-    "2025-03-10T22:35:53.563Z",
-    "2025-03-11T04:16:45.409Z",
-];
-var defaultTimeRange = TimeFilter_2.TimeFilterType.SEVEN_DAYS;
-var variants = {
-    hidden: { opacity: 0, display: "none" },
-    visible: { opacity: 1, display: "block" },
-};
+var user_1 = __importDefault(require("../../../store/user"));
+var balance_1 = __importDefault(require("../../../store/balance"));
+var useWallet_1 = __importDefault(require("../../../hooks/useWallet"));
+// const fakeSeries = [
+//   {
+//     name: "All",
+//     data: [
+//       1003785.6864951615, 1003795.988344575, 1003827.99766239, 1003899.7426850981,
+//       1003891.7710159089, 1003810.6439517767, 1003780.7195320514, 1003797.9506016063,
+//       1003781.455378438, 1003782.0072632281, 1003715.167883104, 1003724.9791682598,
+//       1003716.6018329085, 1003711.3282671372, 1003686.1868489254, 1003625.4795220237,
+//       1003584.3334449014, 1003498.9139435134, 1003310.7825506503, 1003339.72584186,
+//       1003334.3069939599, 1003364.3540547496, 1003394.4011155394, 1003398.386950134,
+//       1003233.005474726, 1003185.2981006557, 1003165.7981714085,
+//     ],
+//   },
+// ];
+// const labels = [
+//   "2025-03-04T08:10:17.311Z",
+//   "2025-03-04T12:10:18.859Z",
+//   "2025-03-04T16:10:19.118Z",
+//   "2025-03-04T20:10:18.246Z",
+//   "2025-03-05T00:10:18.371Z",
+//   "2025-03-05T10:12:40.882Z",
+//   "2025-03-05T14:12:42.832Z",
+//   "2025-03-05T18:12:41.114Z",
+//   "2025-03-05T22:12:40.544Z",
+//   "2025-03-06T02:12:40.718Z",
+//   "2025-03-08T10:35:52.596Z",
+//   "2025-03-08T14:35:52.979Z",
+//   "2025-03-08T16:01:31.209Z",
+//   "2025-03-08T18:35:52.824Z",
+//   "2025-03-08T22:35:52.901Z",
+//   "2025-03-09T06:35:53.327Z",
+//   "2025-03-09T10:35:52.682Z",
+//   "2025-03-09T14:35:53.001Z",
+//   "2025-03-09T18:35:52.886Z",
+//   "2025-03-09T22:35:52.880Z",
+//   "2025-03-10T03:43:34.153Z",
+//   "2025-03-10T06:35:52.944Z",
+//   "2025-03-10T10:35:52.253Z",
+//   "2025-03-10T14:35:52.727Z",
+//   "2025-03-10T18:35:52.865Z",
+//   "2025-03-10T22:35:53.563Z",
+//   "2025-03-11T04:16:45.409Z",
+// ];
 var AmountGroupAndChart = function (props) {
+    var defaultTimeRange = (0, user_1.default)(function (state) { return state.settings.balance.timeRangeTracking; });
     var _a = (0, react_1.useState)(false), expandAreaChart = _a[0], setExpandAreaChart = _a[1];
     var _b = (0, react_1.useState)(), timeRangeData = _b[0], setTimeRangeData = _b[1];
-    var isHidden = (0, ContentHiddenProvider_1.useContentHidden)().isHidden;
     var theme = (0, ThemeProvider_1.useTheme)();
+    var isShowBalance = (0, user_1.default)(function (state) { return state.settings.balance.isShowBalance; });
+    var analytic = (0, balance_1.default)(function (state) { return state.analytic; });
+    var setTimeRangeTracking = (0, user_1.default)(function (state) { return state.setTimeRangeTracking; });
+    var updateBalanceAnalytic = (0, useWallet_1.default)().updateBalanceAnalytic;
+    var series = (0, react_1.useMemo)(function () {
+        var _a;
+        return (_a = analytic === null || analytic === void 0 ? void 0 : analytic.data) === null || _a === void 0 ? void 0 : _a.map(function (item) { return ({
+            name: item.name,
+            data: item.values,
+        }); });
+    }, [analytic]);
     var handleChangeTimeRange = function (data) {
         setTimeRangeData(data);
+        setTimeRangeTracking(data.type);
+        updateBalanceAnalytic(data.type);
     };
     var toggleExpand = function () {
         setExpandAreaChart(function (prev) { return !prev; });
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, props.sx), { width: "100%" }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), children: [(0, jsx_runtime_1.jsx)(AnalyticGroup_1.default, { timeRange: timeRangeData === null || timeRangeData === void 0 ? void 0 : timeRangeData.type }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { position: "relative", marginTop: theme.mixins.customMargin.m12 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                                width: "100%",
-                                position: "relative",
-                                transition: "all 500ms ease-in-out",
-                                // aspectRatio: expandAreaChart ? "1.47317073171" : 999999,
-                                zIndex: 10,
-                                minHeight: expandAreaChart ? "16rem" : "0",
-                                maxHeight: expandAreaChart ? "28rem" : "0",
-                            }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                                        position: "absolute",
-                                        top: 0,
-                                        right: 0,
-                                        left: 0,
-                                        bottom: 0,
-                                        transition: "all 500ms ease-in-out",
-                                        transform: !expandAreaChart ? "translateX(-25%) scale(0.5)" : "none",
-                                        display: isHidden && !expandAreaChart ? "none" : "block",
-                                    }, children: (0, jsx_runtime_1.jsx)(DelayMounted_1.default, { delay: 800, children: (0, jsx_runtime_1.jsx)(NeonLineChart_1.default, { showMinMaxValues: expandAreaChart, series: fakeSeries, categories: labels, sx: {
-                                                width: "100%",
-                                                height: "fit-content",
-                                                transition: "all 500ms ease-in-out",
-                                                transform: !expandAreaChart ? "translateY(-100%)" : "none",
-                                                my: theme.mixins.customMargin.m3,
-                                            } }) }) }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { style: {
-                                        position: "relative",
-                                        transform: "translateY(350%)",
-                                    }, initial: "hidden", animate: expandAreaChart ? "visible" : "hidden", variants: variants, transition: {
-                                        opacity: {
-                                            duration: expandAreaChart ? 0.5 : 0.25,
-                                            ease: "linear",
-                                            delay: expandAreaChart ? 0.5 : 0,
-                                        },
-                                        display: {
-                                            duration: 0,
-                                            ease: "linear",
-                                            delay: expandAreaChart ? 0.5 : 0.25,
-                                        },
-                                    }, children: (0, jsx_runtime_1.jsx)(DelayMounted_1.default, { delay: 100, children: (0, jsx_runtime_1.jsx)(TimeFilter_1.default, { hideAll: true, initialValue: defaultTimeRange, onChange: handleChangeTimeRange }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { onClick: toggleExpand, sx: {
-                                alignSelf: "center",
-                                transition: "all 500ms ease-in-out",
-                                cursor: "pointer",
-                                mt: theme.mixins.customMargin.m4,
-                                transform: !expandAreaChart
-                                    ? "rotate(180deg) translateX(900%) translateY(120%)"
-                                    : "translateX(-50%) translateY(100%)",
-                                zIndex: 20,
-                                width: 20,
-                                height: 20,
-                            }, children: SvgPath_1.IC_EXPANDER_ARROW })] })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ width: "100%", height: "fit-content", position: "relative" }, props.sx), children: [(0, jsx_runtime_1.jsx)(AnalyticGroup_1.default, { sx: { position: "relative" }, timeRange: timeRangeData === null || timeRangeData === void 0 ? void 0 : timeRangeData.type }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    width: "100%",
+                    position: "relative",
+                    transition: "all 500ms ease-in-out",
+                    top: expandAreaChart ? "0px" : "-30px",
+                    aspectRatio: expandAreaChart ? "1.6" : 6.2,
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                            position: "absolute",
+                            top: 0,
+                            right: 0,
+                            left: 0,
+                            bottom: 0,
+                            transition: "all 500ms ease-in-out",
+                            transform: !expandAreaChart ? "scale(0.5)" : "scale(1)",
+                            transformOrigin: "top left",
+                        }, children: (0, jsx_runtime_1.jsx)(DelayMounted_1.default, { delay: 800, children: (0, jsx_runtime_1.jsx)(NeonLineChart_1.default, { showMinMaxValues: expandAreaChart && isShowBalance, series: series, categories: analytic === null || analytic === void 0 ? void 0 : analytic.labels, sx: {
+                                    width: "100%",
+                                    height: "fit-content",
+                                    transition: "all 500ms ease-in-out",
+                                    my: theme.mixins.customMargin.m3,
+                                }, children: (0, jsx_runtime_1.jsx)(DelayMounted_1.default, { delay: 800, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { onClick: toggleExpand, sx: {
+                                            position: "absolute",
+                                            right: 0,
+                                            bottom: 0,
+                                            width: 20,
+                                            height: 20,
+                                            cursor: "pointer",
+                                            zIndex: 9999,
+                                            transition: "all 500ms ease-in-out",
+                                            transform: !expandAreaChart
+                                                ? "scale(2) translate(50%, -50%)"
+                                                : "scale(1) translate(50%, -50%)",
+                                        }, children: SvgPath_1.IC_EXPANDER_ARROW }) }) }) }) }), (0, jsx_runtime_1.jsx)(TimeFilter_1.default, { hideAll: true, initialValue: defaultTimeRange, onChange: handleChangeTimeRange, sx: {
+                            position: "absolute",
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                            opacity: expandAreaChart ? 1 : 0,
+                            transform: expandAreaChart ? "scale(1)" : "scale(0)",
+                            transition: expandAreaChart
+                                ? "opacity 300ms ease-in-out 500ms, transform 0ms ease-in-out 0ms"
+                                : "opacity 200ms ease-in-out 0ms, transform 0ms ease-in-out 200ms",
+                        } })] })] }));
 };
 exports.default = AmountGroupAndChart;

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

@@ -1,6 +1,7 @@
 import { GeneralProps } from "../../../types/ui";
+import { TimeFilterType } from "../TimeFilter";
 interface AnalyticGroupProps extends GeneralProps {
-    timeRange?: string;
+    timeRange?: TimeFilterType;
 }
 declare const AnalyticGroup: (props: AnalyticGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default AnalyticGroup;