tek-wallet 0.0.763 → 0.0.765

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

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

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

@@ -38,7 +38,7 @@ function ActivitiesTypeSlice(props) {
     var _a, _b;
     var theme = (0, ThemeProvider_1.useTheme)();
     var _c = (0, useActivities_1.default)(), activities = _c.activities, loadActivities = _c.loadActivities, loadOutActivityType = _c.loadOutActivityType;
-    var type = props.type, isActive = props.isActive, limitItems = props.limitItems, sx = props.sx;
+    var type = props.type, isActive = props.isActive, limitItems = props.limitItems, sx = props.sx, smartListProps = props.smartListProps;
     var options = (0, TekWalletProvider_1.useWalletConfig)().options;
     var basePath = (options || {}).basePath;
     var activitiesByType = (0, react_1.useMemo)(function () {
@@ -61,14 +61,14 @@ 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: __assign({ width: "100%", height: "100%", display: "flex", paddingTop: theme.mixins.customPadding.p16, 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.jsx)(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, pb: theme.mixins.customPadding.p32 }), children: (_b = activitiesByType === null || activitiesByType === void 0 ? void 0 : activitiesByType.slice(0, limitItems)) === null || _b === void 0 ? void 0 : _b.map(function (activity, index) {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ width: "100%", height: "100%", display: "flex" }, sx), children: [status === Status.Loading && ((0, jsx_runtime_1.jsx)(WaitingData_1.default, { sx: { marginBottom: "auto", p: theme.mixins.customPadding.p16 } })), 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.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(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] &&
+                        ((activitiesByType === null || activitiesByType === void 0 ? void 0 : activitiesByType.length) || 0) < (limitItems || Infinity), loadingComponent: (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), 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={() => openDetail(activity)}
-                            , { data: dataAsJson, component: link_1.default, href: "".concat(basePath || "", "/tek-wallet/activity/").concat(activity.id) }, index));
+                            return ((0, jsx_runtime_1.jsx)(ActivityItem_1.default, { data: dataAsJson, component: link_1.default, href: "".concat(basePath || "", "/tek-wallet/activity/").concat(activity.id) }, activity.id + index));
                         }) }) }) }))] }));
 }
 exports.default = ActivitiesTypeSlice;

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

@@ -26,6 +26,7 @@ var Text_1 = __importDefault(require("../Text"));
 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");
 function ActivityDetail(props) {
     var theme = (0, ThemeProvider_1.useTheme)();
     var activityData = props.activityData;
@@ -37,12 +38,12 @@ function ActivityDetail(props) {
     var slug = (0, react_2.useMemo)(function () {
         return type === null || type === void 0 ? void 0 : type.slug;
     }, [type]);
-    var isIncrease = (0, react_2.useMemo)(function () {
-        return slug === type_1.TransactionSlug.DEPOSIT;
-    }, [slug]);
     var isReceive = (0, react_2.useMemo)(function () {
         return slug === type_1.TransactionSlug.RECEIVE || slug === type_1.TransactionSlug.DEPOSIT;
     }, [slug]);
+    var isIncrease = (0, react_2.useMemo)(function () {
+        return isReceive;
+    }, [isReceive]);
     var isSwap = (0, react_2.useMemo)(function () {
         return slug === type_1.TransactionSlug.SWAP;
     }, [slug]);
@@ -90,6 +91,6 @@ function ActivityDetail(props) {
                                     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.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 })] }) })), !!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.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { wordBreak: "break-all", textAlign: "left" }), children: toAddress })] }) }))] })] }));
+                                }, 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 }, 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 }, children: SvgPath_1.IC_COPY })] })] }) }))] })] }));
 }
 exports.default = ActivityDetail;

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

@@ -92,10 +92,10 @@ function ActivityItem(props) {
     }, [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.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: {
+    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, backdropFilter: "blur(12px)", p: theme.mixins.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.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, { size: 12, sx: {
+                }, 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,
                                 } })), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontSize: theme.typography.fontSize12,

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

@@ -52,7 +52,7 @@ var AnalyticGroup = function (props) {
                     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: {
                                             fontWeight: theme.typography.fontWeight400,
-                                            fontSize: "0.8em",
+                                            fontSize: "1em",
                                         }, 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,

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

@@ -40,7 +40,7 @@ var Button = function (props) {
 };
 Button.displayName = "Button";
 Button.Primary = function (props) {
-    var children = props.children, _a = props.status, status = _a === void 0 ? BUTTON_STATUS.ENABLED : _a, sx = props.sx, rest = __rest(props, ["children", "status", "sx"]);
+    var children = props.children, _a = props.status, status = _a === void 0 ? BUTTON_STATUS.ENABLED : _a, sx = props.sx, loading = props.loading, rest = __rest(props, ["children", "status", "sx", "loading"]);
     var theme = (0, ThemeProvider_1.useTheme)();
     // const disabledStyles: Record<string, SxProps> = {
     //   [BUTTON_STATUS.LOADING]: {
@@ -56,7 +56,7 @@ Button.Primary = function (props) {
     //     color: theme.palette.text.white24,
     //   },
     // };
-    return ((0, jsx_runtime_1.jsxs)(Button, __assign({}, rest, { variant: "contained", status: status, sx: __assign({ backgroundColor: theme.palette.background.primary, color: theme.palette.text.secondary, borderRadius: theme.mixins.customRadius.r12, textTransform: "capitalize", position: "relative", px: theme.mixins.customPadding.p16, py: theme.mixins.customPadding.p12, fontWeight: theme.typography.fontWeight500, fontSize: theme.typography.fontSize14, lineHeight: theme.typography.leading100 }, sx), disabled: status !== BUTTON_STATUS.ENABLED, children: [status === BUTTON_STATUS.LOADING && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(Button, __assign({}, rest, { variant: "contained", status: status, sx: __assign({ backgroundColor: theme.palette.background.primary, color: theme.palette.text.secondary, borderRadius: theme.mixins.customRadius.r12, textTransform: "capitalize", position: "relative", px: theme.mixins.customPadding.p16, py: theme.mixins.customPadding.p12, fontWeight: theme.typography.fontWeight500, fontSize: theme.typography.fontSize14, lineHeight: theme.typography.leading100 }, sx), disabled: status !== BUTTON_STATUS.ENABLED, loading: loading || status === BUTTON_STATUS.LOADING, children: [status === BUTTON_STATUS.LOADING && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     position: "absolute",
                     inset: 0,
                     display: "flex",

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

@@ -96,7 +96,6 @@ var xhub_keyboard_1 = require("xhub-keyboard");
 var useUniqueId_1 = require("../../../hooks/useUniqueId");
 var xhub_keyboard_2 = require("xhub-keyboard");
 var useWarningWrongPasscode_1 = require("../../../hooks/useWarningWrongPasscode");
-var clsx_1 = __importDefault(require("clsx"));
 var passcodeLength = 6;
 var ConfirmByPasscode = (0, react_1.forwardRef)(function (props, ref) {
     var onConfirmSuccess = props.onConfirmSuccess, sx = props.sx;
@@ -187,13 +186,13 @@ var ConfirmByPasscode = (0, react_1.forwardRef)(function (props, ref) {
                 case 5: return [2 /*return*/];
             }
         });
-    }); }, [handleClose, onConfirmSuccess, passcode]);
+    }); }, [handleClose, handleVerifyPasscode, onConfirmSuccess, passcode]);
     return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { style: {
                 width: "100%",
-            }, useBrowserInput: false, htmlFor: keyboardId, children: props.children }), onOpen: handleOnOpen, onClose: handleOnClose, triggerStatus: props.triggerStatus, sx: __assign({ width: "100%", maxWidth: "calc(100dvw - 2rem)", display: "flex" }, sx), children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { ref: keyboardRef, id: keyboardId, value: passcode, onChange: handlePasscodeChange, keyboardType: xhub_keyboard_1.KeyboardType.Text, layoutType: xhub_keyboard_1.LayoutType.Integer, classNames: {
-                keyboardContainer: (0, clsx_1.default)({
-                    "!hidden": isLocked,
-                }),
+            }, useBrowserInput: false, htmlFor: keyboardId, children: props.children }), onOpen: handleOnOpen, onClose: handleOnClose, triggerStatus: props.triggerStatus, sx: __assign({ width: "100%", maxWidth: "calc(100dvw - 2rem)", display: "flex" }, sx), children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { ref: keyboardRef, id: keyboardId, value: passcode, onChange: handlePasscodeChange, keyboardType: xhub_keyboard_1.KeyboardType.Text, layoutType: xhub_keyboard_1.LayoutType.Integer, styles: {
+                keyboardContainer: {
+                    display: isLocked ? "none" : "block",
+                },
             }, children: (0, jsx_runtime_1.jsx)(LoadingLayout_1.default, { initLoading: false, ref: loadingRef, sx: {
                     backgroundColor: "transparent",
                     width: "100%",
@@ -204,7 +203,7 @@ var ConfirmByPasscode = (0, react_1.forwardRef)(function (props, ref) {
                         backgroundColor: theme.palette.background.tertiary,
                     }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { justifyContent: "center", alignItems: "center", gap: "0.75rem", width: "100%" }), children: [(0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { style: {
                                     width: "100%",
-                                }, useBrowserInput: false, htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(OTP_1.default, { disabled: isLocked, value: passcode, onChange: handlePasscodeChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.CONFIRM_BY_PASSCODE }) }), warningContent, unknownError] }) }) }) }) }));
+                                }, useBrowserInput: false, htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(OTP_1.default, { disabled: isLocked, value: passcode, onChange: handlePasscodeChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.CONFIRM_BY_PASSCODE }) }), !isLocked && warningContent, unknownError] }) }) }) }) }));
 });
 ConfirmByPasscode.displayName = "ConfirmByPasscode";
 exports.default = ConfirmByPasscode;

package/dist/components/TekWallet/components/ui/ConfirmSwapToken/Result.js

@@ -28,12 +28,13 @@ var type_1 = require("../../../services/axios/get-activities-service/type");
 var InlineTitleValue_1 = __importDefault(require("../InlineTitleValue"));
 var convertTokensRate_1 = __importDefault(require("../../views/SwapView/functions/convertTokensRate"));
 function Result(props) {
+    var _a;
     var theme = (0, providers_1.useTheme)();
     var formatDate = (0, useFormatter_1.default)().formatDate;
     var transaction = props.transaction, onDone = props.onDone;
     var status = (0, react_1.useMemo)(function () { return (transaction === null || transaction === void 0 ? void 0 : transaction.transaction_status) || "failed"; }, [transaction === null || transaction === void 0 ? void 0 : transaction.transaction_status]);
     var amount = (0, react_1.useMemo)(function () { return transaction === null || transaction === void 0 ? void 0 : transaction.amount; }, [transaction === null || transaction === void 0 ? void 0 : transaction.amount]);
-    var toAmount = 1;
+    var toAmount = (0, react_1.useMemo)(function () { var _a; return (_a = transaction === null || transaction === void 0 ? void 0 : transaction.to_currency_data) === null || _a === void 0 ? void 0 : _a.swap_total_amount; }, [(_a = transaction === null || transaction === void 0 ? void 0 : transaction.to_currency_data) === null || _a === void 0 ? void 0 : _a.swap_total_amount]);
     var fromToken = (0, react_1.useMemo)(function () { return transaction === null || transaction === void 0 ? void 0 : transaction.currency_data; }, [transaction === null || transaction === void 0 ? void 0 : transaction.currency_data]);
     var toToken = (0, react_1.useMemo)(function () { return transaction === null || transaction === void 0 ? void 0 : transaction.to_currency_data; }, [transaction === null || transaction === void 0 ? void 0 : transaction.to_currency_data]);
     var toTokenRate = (0, react_1.useMemo)(function () {
@@ -85,11 +86,13 @@ function Result(props) {
                                             width: 20,
                                             height: 20,
                                             borderRadius: "999px",
-                                        } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "inherit" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount }) }), (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_SWAP", sx: {
+                                        } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "inherit" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mx: "auto" } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_SWAP", sx: {
                                             width: 16,
                                             height: 16,
-                                            mx: "auto",
-                                            transform: "rotate(-90deg)",
+                                            position: "absolute",
+                                            left: "50%",
+                                            top: "50%",
+                                            transform: "translate(-50%, -50%) rotate(-90deg)",
                                         } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: toToken === null || toToken === void 0 ? void 0 : toToken.link, sx: {
                                             width: 20,
                                             height: 20,

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

@@ -5,7 +5,7 @@ var react_1 = require("react");
 function DelayMounted(_a) {
     var children = _a.children, _b = _a.delay, delay = _b === void 0 ? 1000 : _b;
     var _c = (0, react_1.useState)(false), allowMount = _c[0], setAllowMount = _c[1];
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useLayoutEffect)(function () {
         var timeout = setTimeout(function () {
             setAllowMount(true);
         }, delay);

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

@@ -28,7 +28,7 @@ var LineValue_1 = __importDefault(require("../LineValue"));
 var formatDate_1 = __importDefault(require("../../../utils/formatDate"));
 var roundToTwoSignificantDecimals_1 = __importDefault(require("../../../utils/roundToTwoSignificantDecimals"));
 var DetailSwapResult = function (_a) {
-    var _b, _c, _d;
+    var _b, _c;
     var onClose = _a.onClose, swapData = _a.swapData;
     var transaction = (0, useWallet_1.default)().transaction;
     var theme = (0, providers_1.useTheme)();
@@ -38,7 +38,7 @@ var DetailSwapResult = function (_a) {
         return ((_b = (_a = resultData === null || resultData === void 0 ? void 0 : resultData.fee_info) === null || _a === void 0 ? void 0 : _a.fee_detail) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item === null || item === void 0 ? void 0 : item.currency; })) || [];
     }, [resultData]);
     var getOutputs = feeInfo === null || feeInfo === void 0 ? void 0 : feeInfo.map(function (item) { return item === null || item === void 0 ? void 0 : item.outputs; });
-    var getDetailOutputs = ((_b = getOutputs === null || getOutputs === void 0 ? void 0 : getOutputs[0]) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item; })) || [];
+    var getDetailOutputs = (0, react_1.useMemo)(function () { var _a; return ((_a = getOutputs === null || getOutputs === void 0 ? void 0 : getOutputs[0]) === null || _a === void 0 ? void 0 : _a.map(function (item) { return item; })) || []; }, [getOutputs]);
     var getInfoDetailOutputs = (0, react_1.useMemo)(function () {
         return (getDetailOutputs === null || getDetailOutputs === void 0 ? void 0 : getDetailOutputs[0]) || {};
     }, [getDetailOutputs]);
@@ -90,13 +90,13 @@ var DetailSwapResult = function (_a) {
                                 width: "100%",
                                 color: theme.palette.text.accent,
                                 mt: theme.mixins.customMargin.m12,
-                            } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between", mt: theme.mixins.customMargin.m16 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (_c = resultData === null || resultData === void 0 ? void 0 : resultData.currency_data) === null || _c === void 0 ? void 0 : _c.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                            } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between", mt: theme.mixins.customMargin.m16 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (_b = resultData === null || resultData === void 0 ? void 0 : resultData.currency_data) === null || _b === void 0 ? void 0 : _b.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                 fontSize: theme.typography.fontSize14,
                                                 fontWeight: theme.typography.fontWeight700,
-                                            }, children: resultData === null || resultData === void 0 ? void 0 : resultData.amount })] }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("swap_horizontal"), width: 20, height: 20 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                            }, children: resultData === null || resultData === void 0 ? void 0 : resultData.amount })] }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("swap_horizontal"), width: 20, height: 20 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.link, width: 20, height: 20, className: "rounded-full" }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
                                                 fontSize: theme.typography.fontSize14,
                                                 fontWeight: theme.typography.fontWeight700,
-                                            }, children: (0, roundToTwoSignificantDecimals_1.default)((resultData === null || resultData === void 0 ? void 0 : resultData.amount) * (getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.swap_amount)) })] })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                            }, children: [(0, roundToTwoSignificantDecimals_1.default)(getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.swap_total_amount), "cc"] })] })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
                                 width: "100%",
                                 color: theme.palette.text.accent,
                                 mt: theme.mixins.customMargin.m12,
@@ -110,7 +110,7 @@ var DetailSwapResult = function (_a) {
                                     fontSize: theme.typography.fontSize14,
                                     fontWeight: theme.typography.fontWeight700,
                                     ml: theme.mixins.customMargin.m8,
-                                }, children: ["1 ", (_d = resultData === null || resultData === void 0 ? void 0 : resultData.currency_data) === null || _d === void 0 ? void 0 : _d.full_name, " ~ ", getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.swap_amount, " ", getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.full_name] }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                }, children: ["1 ", (_c = resultData === null || resultData === void 0 ? void 0 : resultData.currency_data) === null || _c === void 0 ? void 0 : _c.full_name, " ~ ", getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.swap_amount, " ", getInfoDetailOutputs === null || getInfoDetailOutputs === void 0 ? void 0 : getInfoDetailOutputs.full_name] }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontSize: theme.typography.fontSize12,
                                     color: theme.palette.text.blackContrast,
                                 }, children: "Date time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {

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

@@ -33,7 +33,7 @@ var SvgPath_1 = require("../SvgPath");
 function ListItemCustom(_a) {
     var title = _a.title, description = _a.description, icon = _a.icon, rightIcon = _a.rightIcon, hideDefaultRightIcon = _a.hideDefaultRightIcon, sx = _a.sx, recommended = _a.recommended, hideTag = _a.hideTag, rest = __rest(_a, ["title", "description", "icon", "rightIcon", "hideDefaultRightIcon", "sx", "recommended", "hideTag"]);
     var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, __assign({}, rest, { sx: __assign(__assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g12, padding: "calc(".concat(theme.mixins.customPadding.p16, " + 6px) ").concat(theme.mixins.customPadding.p16), border: "1px solid ".concat(theme.palette.border.accent3), borderRadius: theme.mixins.customRadius.r16, backgroundColor: theme.palette.background.white, position: "relative", overflow: "hidden" }), sx), children: [!hideTag && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, __assign({}, rest, { sx: __assign(__assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g12, padding: "calc(".concat(theme.mixins.customPadding.p16, " + 6px) ").concat(theme.mixins.customPadding.p16), border: "1px solid ".concat(theme.palette.border.accent3), borderRadius: theme.mixins.customRadius.r16, backgroundColor: theme.palette.background.white, backdropFilter: "blur(12px)", position: "relative", overflow: "hidden" }), sx), children: [!hideTag && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     position: "absolute",
                     top: "-9px",
                     left: "-1px",

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

@@ -40,6 +40,8 @@ var NetworkSelection = function (props) {
     var networkData = (0, react_1.useMemo)(function () { return (0, parsePropsData_1.default)(networkDataString); }, [networkDataString]);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({}, rest, { sx: __assign(__assign({}, theme.mixins.row), { backgroundColor: active
                 ? "".concat(theme.palette.background.tertiary)
-                : "".concat(theme.palette.background.white), padding: theme.mixins.customPadding.p16, borderRadius: theme.mixins.customRadius.r12, border: "1px solid", borderColor: active ? "".concat(theme.palette.primary.main) : "".concat(theme.palette.border.accent3), gap: theme.mixins.gaps.g8, justifyContent: "space-between" }), onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(networkData); }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: networkData === null || networkData === void 0 ? void 0 : networkData.link, sx: { borderRadius: theme.mixins.customRadius.full }, width: 24 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "text.white", whiteSpace: "nowrap", textTransform: "capitalize" }), children: networkData === null || networkData === void 0 ? void 0 : networkData.name }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.activityDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13, fontWeight: theme.typography.fontWeight400 }), children: ["Minimum Deposit: ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: networkData === null || networkData === void 0 ? void 0 : networkData.min_value, unit: token === null || token === void 0 ? void 0 : token.name })] })] })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: active ? SvgPath_1.IC_CHECK : SvgPath_1.IC_UNCHECK })] })));
+                : "".concat(theme.palette.background.white), backdropFilter: "blur(12px)", padding: theme.mixins.customPadding.p16, borderRadius: theme.mixins.customRadius.r16, border: "1px solid", borderColor: active ? "".concat(theme.palette.primary.main) : "".concat(theme.palette.border.accent3), gap: theme.mixins.gaps.g8, justifyContent: "space-between" }), onClick: function () {
+            onClick === null || onClick === void 0 ? void 0 : onClick(networkData);
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: networkData === null || networkData === void 0 ? void 0 : networkData.link, sx: { borderRadius: theme.mixins.customRadius.full }, width: 24 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "text.white", whiteSpace: "nowrap", textTransform: "capitalize" }), children: networkData === null || networkData === void 0 ? void 0 : networkData.name }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.activityDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13, fontWeight: theme.typography.fontWeight400 }), children: ["Minimum transaction amount:", " ", (0, jsx_runtime_1.jsx)("strong", { children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: networkData === null || networkData === void 0 ? void 0 : networkData.min_value, unit: token === null || token === void 0 ? void 0 : token.name }) })] })] })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: active ? SvgPath_1.IC_CHECK : SvgPath_1.IC_UNCHECK })] })));
 };
 exports.default = NetworkSelection;