tek-wallet 0.0.806 → 0.0.808

package/README.md

@@ -63,14 +63,15 @@ const { tokens } = useWallet();
 
 ### Các Components Chính
 
-| 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                 |
+| 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                 |
+| **ReceiveDirectly**   | Component nhận token trực tiếp qua QR code |
+| **AssetView**         | Hiển thị tài sản trong ví                  |
+| **WithdrawFunction**  | Xử lý chức năng rút token                  |
 
 ### Components Xác nhận (Confirm)
 
@@ -125,6 +126,115 @@ Nếu phía trước có path: `<path>/tek-wallet/[[...pathname]]/page.tsx` thì
 </TekWalletProvider>
 ```
 
+### ReceiveDirectly
+
+Component cho phép hiển thị QR code và địa chỉ nhận token trực tiếp, hỗ trợ cả nhận nội bộ và nhận từ blockchain.
+
+**Props:**
+
+| Prop          | Type                    | Required | Mô tả                                                        |
+| ------------- | ----------------------- | -------- | ------------------------------------------------------------ |
+| `tokenSlug`   | `string`                | ✅       | Slug của token muốn nhận                                     |
+| `method`      | `ReceiveDirectlyMethod` | ✅       | Phương thức nhận: `RECEIVE_INTERNAL` hoặc `RECEIVE_EXTERNAL` |
+| `networkSlug` | `string`                | ❌       | Slug của network (bỏ qua nếu muốn cho user chọn network)     |
+| `amount`      | `string \| number`      | ❌       | Số lượng token muốn nhận (hiển thị trong QR code)            |
+| `userInfo`    | `object`                | ❌       | Thông tin người nhận để hiển thị                             |
+
+**Ref Methods:**
+
+| Method  | Mô tả      |
+| ------- | ---------- |
+| `open`  | Mở modal   |
+| `close` | Đóng modal |
+
+**Enum ReceiveDirectlyMethod:**
+
+```typescript
+enum ReceiveDirectlyMethod {
+  RECEIVE_INTERNAL = "Internal Transfer", // Nhận token nội bộ
+  RECEIVE_EXTERNAL = "Blockchain Deposit", // Nhận token từ blockchain
+}
+```
+
+**Ví dụ 1: Nhận token nội bộ (Internal Transfer)**
+
+```jsx
+import { ReceiveDirectly, ReceiveDirectlyMethod } from "tek-wallet";
+import { useRef } from "react";
+
+function MyComponent() {
+  const receiveRef = useRef(null);
+
+  return (
+    <>
+      <Button onClick={() => receiveRef.current?.open()}>Nhận USDT nội bộ</Button>
+
+      <ReceiveDirectly
+        ref={receiveRef}
+        tokenSlug="usdt"
+        method={ReceiveDirectlyMethod.RECEIVE_INTERNAL}
+        amount={100}
+        userInfo={{
+          nickname: "John Doe",
+          username: "@johndoe",
+          avatar: "https://example.com/avatar.jpg",
+        }}
+      />
+    </>
+  );
+}
+```
+
+**Ví dụ 2: Nhận token từ blockchain (Blockchain Deposit)**
+
+```jsx
+import { ReceiveDirectly, ReceiveDirectlyMethod } from "tek-wallet";
+import { useRef } from "react";
+
+function MyComponent() {
+  const receiveRef = useRef(null);
+
+  return (
+    <>
+      <Button onClick={() => receiveRef.current?.open()}>Nhận USDT từ blockchain</Button>
+
+      {/* Cách 1: Chỉ định network cụ thể */}
+      <ReceiveDirectly
+        ref={receiveRef}
+        tokenSlug="usdt"
+        method={ReceiveDirectlyMethod.RECEIVE_EXTERNAL}
+        networkSlug="trc20"
+      />
+
+      {/* Cách 2: Cho phép user chọn network */}
+      <ReceiveDirectly
+        ref={receiveRef}
+        tokenSlug="usdt"
+        method={ReceiveDirectlyMethod.RECEIVE_EXTERNAL}
+        // Không truyền networkSlug - user sẽ chọn network
+      />
+    </>
+  );
+}
+```
+
+**Ví dụ 3: Sử dụng với trigger children**
+
+```jsx
+<ReceiveDirectly tokenSlug="usdt" method={ReceiveDirectlyMethod.RECEIVE_INTERNAL}>
+  <Button>Click để nhận USDT</Button>
+</ReceiveDirectly>
+```
+
+**Lưu ý:**
+
+- 🔸 Khi sử dụng `RECEIVE_INTERNAL`, không cần truyền `networkSlug`
+- 🔸 Khi sử dụng `RECEIVE_EXTERNAL` mà không truyền `networkSlug`, user sẽ được yêu cầu chọn network
+- 🔸 Component tự động validate token và network, hiển thị lỗi nếu không hợp lệ
+- 🔸 QR code được tạo tự động dựa trên method và các thông tin được truyền vào
+- 🔸 Với Internal Transfer, QR code chứa thông tin JSON để xử lý chuyển khoản nội bộ
+- 🔸 Với Blockchain Deposit, QR code chứa địa chỉ blockchain wallet
+
 ---
 
 ## 📊 States

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

@@ -7,7 +7,6 @@ export * from "./views/GetSeedPhraseWalletView";
 export * from "./views/ImportWalletView";
 export * from "./ui/Fees";
 export * from "./ui/ConfirmTransaction";
-export * from "./ui/SwapFunction";
 export * from "./ui/IncomeWallet";
 export * from "./ui/TransferConfirmation";
 export * from "./ui/Formatter";
@@ -24,3 +23,5 @@ export * from "./views/SwapView";
 export * from "./views/ActivityView";
 export * from "./views/DetailActivityView";
 export * from "./views/SettingView";
+export * from "./ui/ReceiveFunction";
+export * from "./ui/ReceiveDirectly";

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

@@ -23,7 +23,6 @@ __exportStar(require("./views/GetSeedPhraseWalletView"), exports);
 __exportStar(require("./views/ImportWalletView"), exports);
 __exportStar(require("./ui/Fees"), exports);
 __exportStar(require("./ui/ConfirmTransaction"), exports);
-__exportStar(require("./ui/SwapFunction"), exports);
 __exportStar(require("./ui/IncomeWallet"), exports);
 __exportStar(require("./ui/TransferConfirmation"), exports);
 __exportStar(require("./ui/Formatter"), exports);
@@ -40,3 +39,5 @@ __exportStar(require("./views/SwapView"), exports);
 __exportStar(require("./views/ActivityView"), exports);
 __exportStar(require("./views/DetailActivityView"), exports);
 __exportStar(require("./views/SettingView"), exports);
+__exportStar(require("./ui/ReceiveFunction"), exports);
+__exportStar(require("./ui/ReceiveDirectly"), exports);

package/dist/components/TekWallet/components/layouts/ChildPageLayout/index.js

@@ -66,14 +66,14 @@ var react_1 = require("react");
 var StatusDisplay_1 = require("../../ui/StatusDisplay");
 var StatusDisplay_2 = __importDefault(require("../../ui/StatusDisplay"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var AppBackDrop_1 = __importDefault(require("../../ui/AppBackDrop"));
 var react_simple_pull_to_refresh_1 = __importDefault(require("react-simple-pull-to-refresh"));
 var Refresh_1 = __importDefault(require("../../ui/Atoms/Refresh"));
 var ChildPageLayout = (0, react_1.forwardRef)(function (props, ref) {
     var header = props.header, footer = props.footer, children = props.children, sx = props.sx, className = props.className, classNames = props.classNames, statusMessage = props.statusMessage, sxs = props.sxs, pullToRefreshProps = props.pullToRefreshProps, rest = __rest(props, ["header", "footer", "children", "sx", "className", "classNames", "statusMessage", "sxs", "pullToRefreshProps"]);
     var _a = (0, react_1.useState)(StatusDisplay_1.StatusDisplayType.Normal), status = _a[0], setStatus = _a[1];
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _b = pullToRefreshProps || {}, onRefresh = _b.onRefresh, isPullable = _b.isPullable, restPullToRefreshProps = __rest(_b, ["onRefresh", "isPullable"]);
     (0, react_1.useImperativeHandle)(ref, function () {
         return {
@@ -96,7 +96,7 @@ var ChildPageLayout = (0, react_1.forwardRef)(function (props, ref) {
             return [2 /*return*/, Promise.all([new Promise(function (resolve) { return setTimeout(resolve, 1000); }), onRefresh === null || onRefresh === void 0 ? void 0 : onRefresh()])]; // for user feel data is loading
         });
     }); };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ ref: ref, sx: __assign({ height: "100%", width: "100%", display: "grid", gridTemplateRows: "auto 1fr auto", position: "relative", overflow: "hidden", backgroundColor: theme.palette.background.white }, sx), className: className }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ width: "100%" }, sxs === null || sxs === void 0 ? void 0 : sxs.header), className: classNames === null || classNames === void 0 ? void 0 : classNames.header, children: header }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ height: "100%", width: "100%", overflowX: "hidden", overflowY: "auto" }, sxs === null || sxs === void 0 ? void 0 : sxs.body), className: classNames === null || classNames === void 0 ? void 0 : classNames.body, children: [!!isPullable && ((0, jsx_runtime_1.jsx)(react_simple_pull_to_refresh_1.default, __assign({ pullingContent: null, refreshingContent: ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", pt: 3 }, children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) })) }, restPullToRefreshProps, { onRefresh: handleRefresh, children: children }))), !isPullable && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ width: "100%" }, sxs === null || sxs === void 0 ? void 0 : sxs.footer), className: classNames === null || classNames === void 0 ? void 0 : classNames.footer, children: footer }), status !== StatusDisplay_1.StatusDisplayType.Normal && ((0, jsx_runtime_1.jsx)(AppBackDrop_1.default, { open: true, hideProgress: true, message: (0, jsx_runtime_1.jsx)(StatusDisplay_2.default, { status: status, statusMessage: statusMessage === null || statusMessage === void 0 ? void 0 : statusMessage[status] }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ ref: ref, sx: __assign({ height: "100%", width: "100%", display: "grid", gridTemplateRows: "auto 1fr auto", position: "relative", overflow: "hidden", backgroundColor: theme.palette.background.default }, sx), className: className }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ width: "100%" }, sxs === null || sxs === void 0 ? void 0 : sxs.header), className: classNames === null || classNames === void 0 ? void 0 : classNames.header, children: header }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ height: "100%", width: "100%", overflowX: "hidden", overflowY: "auto" }, sxs === null || sxs === void 0 ? void 0 : sxs.body), className: classNames === null || classNames === void 0 ? void 0 : classNames.body, children: [!!isPullable && ((0, jsx_runtime_1.jsx)(react_simple_pull_to_refresh_1.default, __assign({ pullingContent: null, refreshingContent: ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", pt: 3 }, children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) })) }, restPullToRefreshProps, { onRefresh: handleRefresh, children: children }))), !isPullable && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ width: "100%" }, sxs === null || sxs === void 0 ? void 0 : sxs.footer), className: classNames === null || classNames === void 0 ? void 0 : classNames.footer, children: footer }), status !== StatusDisplay_1.StatusDisplayType.Normal && ((0, jsx_runtime_1.jsx)(AppBackDrop_1.default, { open: true, hideProgress: true, message: (0, jsx_runtime_1.jsx)(StatusDisplay_2.default, { status: status, statusMessage: statusMessage === null || statusMessage === void 0 ? void 0 : statusMessage[status] }) }))] })));
 });
 ChildPageLayout.displayName = "ChildPageLayout";
 exports.default = ChildPageLayout;

package/dist/components/TekWallet/components/layouts/DefaultPageLayout/index.js

@@ -14,9 +14,9 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var DefaultPageLayout = function (props) {
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.pagePadding), { minHeight: "100%", width: "100%" }), props.sx), children: props.children }));
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.styleMixins.pagePadding), { minHeight: "100%", width: "100%" }), props.sx), children: props.children }));
 };
 exports.default = DefaultPageLayout;

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

@@ -54,7 +54,7 @@ exports.Status = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var link_1 = __importDefault(require("next/link"));
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
 var EmptyData_1 = __importDefault(require("../EmptyData"));
 var ActivityItem_1 = __importDefault(require("../ActivityItem"));
@@ -76,7 +76,7 @@ var prefix = "activities_";
 function ActivitiesTypeSlice(props) {
     var _this = this;
     var _a, _b;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var router = (0, useCustomRouter_1.default)();
     var _c = (0, useActivities_1.default)(), activities = _c.activities, loadActivities = _c.loadActivities, loadOutActivityType = _c.loadOutActivityType, refreshActivities = _c.refreshActivities;
     var type = props.type, isActive = props.isActive, limitItems = props.limitItems, sx = props.sx, smartListProps = props.smartListProps, useAction = props.useAction;
@@ -110,20 +110,24 @@ function ActivitiesTypeSlice(props) {
     };
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ width: "100%", height: "100%" }, sx), children: [status === Status.Loading && ((0, jsx_runtime_1.jsx)(WaitingData_1.default, { sx: {
                     marginBottom: "auto",
-                    p: theme.mixins.customPadding.p16,
-                }, numberOfSkeleton: 8 })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(SmartList_1.default, { loadMoreData: loadMore, sx: __assign({ px: theme.mixins.customPadding.p16 }, smartListProps === null || smartListProps === void 0 ? void 0 : smartListProps.sx), hasMore: !loadOutActivityType[type.slug] &&
+                    p: theme.styleMixins.customPadding.p16,
+                }, numberOfSkeleton: 8 })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(SmartList_1.default, { loadMoreData: loadMore, sx: __assign({ px: theme.styleMixins.customPadding.p16 }, smartListProps === null || smartListProps === void 0 ? void 0 : smartListProps.sx), hasMore: !loadOutActivityType[type.slug] &&
                         ((activitiesByType === null || activitiesByType === void 0 ? void 0 : activitiesByType.length) || 0) < (limitItems || Infinity), loadingComponent: status === Status.Filled && ((0, jsx_runtime_1.jsx)(WaitingData_1.default, { numberOfSkeleton: 4, sx: {
-                            marginTop: theme.mixins.customMargin.m12,
-                        } })), bodySx: __assign({ pb: theme.mixins.customPadding.p32, pt: theme.mixins.customPadding.p16 }, smartListProps === null || smartListProps === void 0 ? void 0 : smartListProps.bodySx), pullToRefreshProps: {
+                            marginTop: theme.styleMixins.customMargin.m12,
+                        } })), bodySx: __assign({ pb: theme.styleMixins.customPadding.p32, pt: theme.styleMixins.customPadding.p16 }, smartListProps === null || smartListProps === void 0 ? void 0 : smartListProps.bodySx), pullToRefreshProps: {
                         isPullable: true,
                         onRefresh: function () { return __awaiter(_this, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 return [2 /*return*/, refreshActivities(type.slug)];
                             });
                         }); },
-                    }, children: [status === Status.Empty && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { action: useAction && type.slug === const_1.ACTIVITIES_TYPE_ALL.slug ? gotoHome : undefined, actionText: "Start your journey", sx: { marginBottom: "auto", marginTop: "6rem", px: theme.mixins.customPadding.p16 }, icon: (0, getIcon_1.default)(prefix + "empty_" + type.slug), description: type.slug === const_1.ACTIVITIES_TYPE_ALL.slug
+                    }, children: [status === Status.Empty && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { action: useAction && type.slug === const_1.ACTIVITIES_TYPE_ALL.slug ? gotoHome : undefined, actionText: "Start your journey", sx: {
+                                marginBottom: "auto",
+                                marginTop: "6rem",
+                                px: theme.styleMixins.customPadding.p16,
+                            }, icon: (0, getIcon_1.default)(prefix + "empty_" + type.slug), description: type.slug === const_1.ACTIVITIES_TYPE_ALL.slug
                                 ? "You haven't any activity yet"
-                                : "No ".concat((_a = type.name) === null || _a === void 0 ? void 0 : _a.toLowerCase(), " activity") })), status === Status.Filled && ((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) {
+                                : "No ".concat((_a = type.name) === null || _a === void 0 ? void 0 : _a.toLowerCase(), " activity") })), status === Status.Filled && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.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);

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

@@ -16,7 +16,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
 var type_1 = require("../../../services/axios/get-activities-service/type");
 var Icon_1 = __importDefault(require("../Icon"));
 var react_1 = require("react");
@@ -27,8 +26,9 @@ var formatDate_1 = __importDefault(require("../../../utils/formatDate"));
 var CopyTextComponent_1 = __importDefault(require("../CopyTextComponent"));
 var useWalletData_1 = __importDefault(require("../../../hooks/useWalletData"));
 var SvgPath_1 = require("../SvgPath");
+var mui_1 = require("../../../theme/mui");
 function ActivityDetail(props) {
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var activityData = props.activityData;
     var masterWallet = (0, useWalletData_1.default)().masterWallet;
     var status = activityData === null || activityData === void 0 ? void 0 : activityData.transaction_status;
@@ -64,37 +64,35 @@ function ActivityDetail(props) {
     var getStatusColor = (0, react_1.useCallback)(function () {
         switch (status) {
             case type_1.TransactionStatus.Processing:
-                return theme.palette.text.loadingStatus;
+                return theme.palette.text.primary;
             case type_1.TransactionStatus.Success:
-                return theme.palette.text.successStatus;
+                return theme.palette.success.main;
             case type_1.TransactionStatus.Failed:
-                return theme.palette.text.warningStatus;
+                return theme.palette.error.main;
             default:
                 return theme.palette.text.primary;
         }
     }, [status, theme]);
     var getAmountColor = (0, react_1.useCallback)(function () {
         if (isIncrease)
-            return theme.palette.text.successStatus;
-        return theme.palette.text.black;
+            return theme.palette.success.main;
+        return theme.palette.text.primary;
     }, [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), { filter: "drop-shadow(0 0 0.5rem #00000016)" }), 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",
-                            // boxShadow: "0 0 20px 2px #00000029",
-                            // ml: "-0.5rem",
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g16, alignItems: "center" }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { filter: "drop-shadow(0 0 0.5rem ".concat((0, material_1.alpha)(theme.palette.background.reverse, 0.5)) }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: currency === null || currency === void 0 ? void 0 : currency.link, width: 64, sx: {
+                            borderRadius: theme.styleMixins.customRadius.full,
+                            border: isSwap ? "0.25rem ".concat(theme.palette.background.default, " solid") : "none",
                         } }), (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",
+                            borderRadius: theme.styleMixins.customRadius.full,
+                            border: isSwap ? "0.25rem ".concat(theme.palette.background.default, " solid") : "none",
                             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(__assign({}, theme.mixins.column), { width: "fit-content" }), 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, true) }), 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, { sx: {
-                                    color: theme.palette.text.loadingStatus,
-                                }, size: 16 })), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                        } }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { width: "fit-content", gap: theme.styleMixins.gaps.g4, alignItems: "center" }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { width: "fit-content" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.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.styleMixins.value), { fontWeight: theme.typography.fontWeight700, fontSize: theme.typography.fontSize24, color: theme.palette.success.main }), 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.styleMixins.valueDescription), children: (0, formatDate_1.default)(activityData.date_created, true) }), status !== type_1.TransactionStatus.Success && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4, color: getStatusColor() }), children: [status === type_1.TransactionStatus.Processing && ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { sx: {
+                                    color: "inherit",
+                                }, size: "1rem" })), (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.paper), { p: 0, width: "100%" }), children: [isReceive && ((0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: activityData === null || activityData === void 0 ? void 0 : activityData.from_address, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: "From" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g24, alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { wordBreak: "break-all", textAlign: "left" }), children: activityData === null || activityData === void 0 ? void 0 : activityData.from_address }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 16, height: 16, ml: "auto" }, children: SvgPath_1.IC_COPY })] })] }) })), !!toAddress && ((0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: toAddress, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: "Recipient address" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g24, alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { wordBreak: "break-all", textAlign: "left" }), children: toAddress }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 16, height: 16, ml: "auto" }, children: SvgPath_1.IC_COPY })] })] }) })), !!message && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: "Message" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g24, alignItems: "center" }), children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { textAlign: "left" }), children: message }) })] }))] })] }));
+                                    color: "inherit",
+                                }, children: status })] }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.paper), { p: 0, bgcolor: "transparent", width: "100%" }), children: [isReceive && ((0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: activityData === null || activityData === void 0 ? void 0 : activityData.from_address, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.valueDescription), children: "From" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g24, alignItems: "center", color: "text.primary" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { wordBreak: "break-all", textAlign: "left" }), children: activityData === null || activityData === void 0 ? void 0 : activityData.from_address }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1rem", height: "1rem", ml: "auto" }, children: SvgPath_1.IC_COPY })] })] }) })), !!toAddress && ((0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: toAddress, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.valueDescription), children: "Recipient address" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g24, alignItems: "center", color: "text.primary" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { wordBreak: "break-all", textAlign: "left" }), children: toAddress }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1rem", height: "1rem", ml: "auto" }, children: SvgPath_1.IC_COPY })] })] }) })), !!message && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.valueDescription), children: "Message" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g24, alignItems: "center" }), children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { textAlign: "left" }), children: message }) })] }))] })] }));
 }
 exports.default = ActivityDetail;

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

@@ -35,10 +35,10 @@ var Text_1 = __importDefault(require("../Text"));
 var Formatter_1 = __importDefault(require("../Formatter"));
 var formatDate_1 = __importDefault(require("../../../utils/formatDate"));
 var compactWalletAddress_1 = __importDefault(require("../../../utils/compactWalletAddress"));
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 function ActivityItem(props) {
     var sx = props.sx, data = props.data, rest = __rest(props, ["sx", "data"]);
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var activityData = (0, react_1.useMemo)(function () {
         if (!data)
             return undefined;
@@ -76,36 +76,36 @@ function ActivityItem(props) {
     var getStatusColor = (0, react_1.useCallback)(function () {
         switch (status) {
             case type_1.TransactionStatus.Processing:
-                return theme.palette.text.loadingStatus;
+                return theme.palette.text.primary;
             case type_1.TransactionStatus.Success:
-                return theme.palette.text.successStatus;
+                return theme.palette.success.main;
             case type_1.TransactionStatus.Failed:
-                return theme.palette.text.warningStatus;
+                return theme.palette.error.main;
             default:
                 return theme.palette.text.primary;
         }
     }, [status, theme]);
     var getAmountColor = (0, react_1.useCallback)(function () {
         if (isIncrease)
-            return theme.palette.text.successStatus;
-        return theme.palette.text.black;
+            return theme.palette.success.main;
+        return theme.palette.text.primary;
     }, [isIncrease, theme]);
     if (!activityData)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: __assign(__assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, backgroundColor: theme.palette.background.tertiary, borderRadius: theme.mixins.customRadius.r16, backdropFilter: "blur(12px)", p: theme.mixins.customPadding.p16, flexGrow: "unset" }), sx) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: __assign(__assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, backgroundColor: theme.palette.background.tertiary, borderRadius: theme.styleMixins.customRadius.r16, backdropFilter: "blur(12px)", p: theme.styleMixins.customPadding.p16, flexGrow: "unset" }), 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: 28, 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.g4 }), 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, { size: 12, sx: {
-                                    color: theme.palette.text.loadingStatus,
+                }, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { src: type === null || type === void 0 ? void 0 : type.link, width: 28, sx: { borderRadius: theme.styleMixins.customRadius.full } }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { width: "fit-content", gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: theme.styleMixins.activityTitle, children: type === null || type === void 0 ? void 0 : type.name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: theme.styleMixins.activityDescription, children: descriptionElement }), status !== type_1.TransactionStatus.Success && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4, color: getStatusColor() }), children: [status === type_1.TransactionStatus.Processing && ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 12, sx: {
+                                    color: "inherit",
                                 } })), (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", pointerEvents: "none", 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: {
+                                    color: "inherit",
+                                }, children: status })] }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g2, width: "fit-content", alignItems: "flex-end", pointerEvents: "none", ml: "auto" }), children: [slug === type_1.TransactionSlug.SWAP && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { fontWeight: theme.typography.fontWeight700, fontSize: theme.typography.fontSize13, color: theme.palette.success.main, 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) })] })] })));
+                        }, 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.styleMixins.valueDescription), { textAlign: "right" }), children: (0, formatDate_1.default)(activityData.date_created) })] })] })));
 }
 exports.default = ActivityItem;

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

@@ -20,7 +20,7 @@ var AnalyticGroup_1 = __importDefault(require("../AnalyticGroup"));
 var TimeFilter_1 = __importDefault(require("../TimeFilter"));
 var DelayMounted_1 = __importDefault(require("../DelayMounted"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var NeonLineChart_1 = __importDefault(require("../NeonLineChart"));
 var SvgPath_1 = require("../SvgPath");
 var user_1 = __importDefault(require("../../../store/user"));
@@ -73,7 +73,7 @@ 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 theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_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; });
@@ -112,7 +112,7 @@ var AmountGroupAndChart = function (props) {
                                     width: "100%",
                                     height: "fit-content",
                                     transition: "all 500ms ease-in-out",
-                                    my: theme.mixins.customMargin.m3,
+                                    my: theme.styleMixins.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,

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

@@ -18,24 +18,25 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var Text_1 = __importDefault(require("../Text"));
 var Formatter_1 = __importDefault(require("../Formatter"));
 var material_1 = require("@mui/material");
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var SvgPath_1 = require("../SvgPath");
 var TimeFilter_1 = require("../TimeFilter");
 var user_1 = __importDefault(require("../../../store/user"));
 var balance_1 = __importDefault(require("../../../store/balance"));
 var AnalyticGroup = function (props) {
     var sx = props.sx, timeRange = props.timeRange;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var isShowBalance = (0, user_1.default)(function (state) { return state.settings.balance.isShowBalance; });
     var toggleShowBalance = (0, user_1.default)(function (state) { return state.toggleShowBalance; });
     var totalBalanceInUSD = (0, balance_1.default)(function (state) { return state.totalBalanceInUSD; });
     var analytic = (0, balance_1.default)(function (state) { return state.analytic; });
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.row), { justifyContent: "space-between", alignItems: "flex-start" }), sx), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g6, position: "relative" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.styleMixins.row), { justifyContent: "space-between", alignItems: "flex-start" }), sx), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g6, position: "relative" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                             fontSize: theme.typography.fontSize15,
                             fontWeight: theme.typography.fontWeight500,
-                            color: theme.palette.text.accent2,
+                            color: theme.palette.text.secondary,
                         }, children: "Total Amount" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: toggleShowBalance, sx: {
                             position: "relative",
+                            color: theme.palette.text.secondary,
                         }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { cursor: "pointer", width: 20, height: 20 }, children: SvgPath_1.IC_NO_SEE }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                     position: "absolute",
                                     left: "50%",
@@ -43,52 +44,51 @@ var AnalyticGroup = function (props) {
                                     top: "50%",
                                     height: !isShowBalance ? "80%" : "0px",
                                     transition: "height 0.2s ease-in-out",
-                                    backgroundColor: theme.palette.text.accent2,
+                                    backgroundColor: "currentColor",
                                     transform: "translate(calc(-50% + 1px), calc(-50% + 1px)) rotate(45deg)",
                                     transformOrigin: "center center",
                                 } })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     display: "flex",
                     flexDirection: "column",
                     alignItems: "flex-end",
-                    gap: theme.mixins.gaps.g6,
+                    gap: theme.styleMixins.gaps.g6,
                     fontSize: theme.typography.fontSize12,
-                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.mixins.row), theme.mixins.value), { alignItems: "baseline", fontSize: theme.typography.fontSize20, gap: theme.mixins.gaps.g2 }), children: isShowBalance ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: { fontWeight: theme.typography.fontWeight700 }, value: totalBalanceInUSD, unit: "USD", hideUnitOutSide: true }), !!totalBalanceInUSD && ((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)(Text_1.default, { sx: {
+                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign(__assign({}, theme.styleMixins.row), theme.styleMixins.value), { alignItems: "baseline", fontSize: theme.typography.fontSize20, gap: theme.styleMixins.gaps.g2 }), children: isShowBalance ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: { fontWeight: theme.typography.fontWeight700 }, value: totalBalanceInUSD, unit: "USD", hideUnitOutSide: true }), !!totalBalanceInUSD && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                 fontWeight: theme.typography.fontWeight400,
                                                 fontSize: "0.8em",
                                             }, children: "$" }), false && ((0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { cursor: "pointer", width: 8, height: 8 }, children: SvgPath_1.ARROW_DROP_DOWN }))] }))] })) : ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                 fontSize: theme.typography.fontSize24,
                                 fontWeight: theme.typography.fontWeight700,
-                                color: theme.palette.text.black,
-                            }, children: "******" })) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [!!timeRange && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                color: theme.palette.text.primary,
+                            }, children: "******" })) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4 }), children: [!!timeRange && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontWeight: theme.typography.fontWeight600,
                                     leading: theme.typography.leading140,
                                     fontSize: theme.typography.fontSize12,
                                     textTransform: "capitalize",
-                                    color: theme.palette.text.accent,
-                                }, children: TimeFilter_1.TIME_FILTER_LABEL[timeRange] })), !!(analytic === null || analytic === void 0 ? void 0 : analytic.pnl) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isShowBalance && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { cursor: "pointer", width: 8, height: 8 }, children: SvgPath_1.ARROW_DROP_UP }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: theme.palette.text.alertStatus, fontSize: theme.typography.fontSize12, fontWeight: theme.typography.fontWeight600, borderBottom: "1px dashed currentColor" }), children: [(0, jsx_runtime_1.jsx)("span", { children: (analytic === null || analytic === void 0 ? void 0 : analytic.pnl) > 0 ? "+" : "" }), " ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: analytic === null || analytic === void 0 ? void 0 : analytic.pnl }), " ", "(", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: analytic === null || analytic === void 0 ? void 0 : analytic.pnl_percent, unit: "%" }), ")"] })] })), !isShowBalance && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                    color: theme.palette.text.secondary,
+                                }, children: TimeFilter_1.TIME_FILTER_LABEL[timeRange] })), !!(analytic === null || analytic === void 0 ? void 0 : analytic.pnl) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isShowBalance && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { cursor: "pointer", width: 8, height: 8 }, children: SvgPath_1.ARROW_DROP_UP }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { fontSize: theme.typography.fontSize12, fontWeight: theme.typography.fontWeight600, borderBottom: "1px dashed currentColor" }), children: [(0, jsx_runtime_1.jsx)("span", { children: (analytic === null || analytic === void 0 ? void 0 : analytic.pnl) > 0 ? "+" : "" }), " ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: analytic === null || analytic === void 0 ? void 0 : analytic.pnl }), " ", "(", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: analytic === null || analytic === void 0 ? void 0 : analytic.pnl_percent, unit: "%" }), ")"] })] })), !isShowBalance && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                             fontSize: theme.typography.fontSize12,
                                             fontWeight: theme.typography.fontWeight600,
-                                            color: theme.palette.text.accent2,
-                                            display: theme.mixins.row,
+                                            color: theme.palette.text.secondary,
+                                            display: theme.styleMixins.row,
                                         }, children: "******" }))] }))] }), false && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
                                     width: "110%",
-                                    borderColor: "".concat(theme.palette.border.accent),
                                     opacity: 0.2,
-                                    marginTop: theme.mixins.customMargin.m4,
-                                } }), isShowBalance && ((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: {
+                                    marginTop: theme.styleMixins.customMargin.m4,
+                                } }), isShowBalance && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                             fontWeight: theme.typography.fontWeight500,
                                             leading: theme.typography.leading140,
                                             fontSize: theme.typography.fontSize12,
                                             textTransform: "capitalize",
-                                            color: theme.palette.text.accent,
-                                        }, children: "Profit" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.mixins.row), children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                            color: theme.palette.text.secondary,
+                                        }, children: "Profit" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.styleMixins.row), children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                     fontSize: theme.typography.fontSize12,
                                                     fontWeight: theme.typography.fontWeight600,
-                                                    color: theme.palette.text.accent2,
+                                                    color: theme.palette.text.secondary,
                                                 }, children: "\u2248 250k XP" }) }) }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { cursor: "pointer", width: 14, height: 14 }, children: SvgPath_1.IC_INFORMATION })] })), !isShowBalance && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontSize: theme.typography.fontSize12,
                                     fontWeight: theme.typography.fontWeight600,
-                                    color: theme.palette.text.accent2,
+                                    color: theme.palette.text.secondary,
                                 }, children: "******" }))] }))] })] }));
 };
 exports.default = AnalyticGroup;