tek-wallet 0.0.737 → 0.0.738

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

@@ -44,6 +44,26 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -78,17 +98,20 @@ var ThemeProvider_1 = require("../../../providers/ThemeProvider");
 var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
 var LineValue_1 = __importDefault(require("../LineValue"));
 var SvgPath_1 = require("../SvgPath");
-var sortByBalance_1 = __importDefault(require("./components/sortByBalance"));
-var ReceiveHistory_1 = __importDefault(require("../ReceiveHistory"));
-var sort_utils_1 = require("../../../utils/sort.utils");
 var PageHeader_1 = __importDefault(require("../PageHeader"));
 var BottomActionLayout_1 = __importDefault(require("../BottomActionLayout"));
 var xhub_keyboard_1 = require("xhub-keyboard");
 var useUniqueId_1 = require("../../../hooks/useUniqueId");
+var FiatDeposit_1 = __importDefault(require("../FiatDeposit"));
+var lodash_1 = require("lodash");
+var HelpButton_1 = __importDefault(require("./components/HelpButton"));
+var SortGroup_1 = __importStar(require("./components/SortGroup"));
+var SortTool_1 = require("./components/SortTool");
 var ReceiveMethods;
 (function (ReceiveMethods) {
     ReceiveMethods["RECEIVE_INTERNAL"] = "Receive internally";
     ReceiveMethods["RECEIVE_EXTERNAL"] = "Receive externally";
+    ReceiveMethods["RECEIVE_FIAT"] = "Receive fiat";
 })(ReceiveMethods || (exports.ReceiveMethods = ReceiveMethods = {}));
 var ReceiveStep;
 (function (ReceiveStep) {
@@ -103,33 +126,46 @@ var RECEIVE_STEP_NAME = (_a = {},
     _a[ReceiveStep.SELECT_NETWORK] = "Select network",
     _a[ReceiveStep.SHOW_QR_CODE] = "Scan QR code",
     _a);
-exports.ReceiveFunction = (0, react_1.forwardRef)(function (props, ref) {
+var searchDebounce = (0, lodash_1.debounce)(function (callback) {
+    callback();
+}, 500, { leading: true, trailing: true });
+exports.ReceiveFunction = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.functionsList, functionsList = _b === void 0 ? [ReceiveMethods.RECEIVE_EXTERNAL, ReceiveMethods.RECEIVE_INTERNAL] : _b, gotoHistory = _a.gotoHistory, userInfo = _a.userInfo, props = __rest(_a, ["functionsList", "gotoHistory", "userInfo"]);
     var drawerRef = (0, react_1.useRef)(null);
     var amountDrawerRef = (0, react_1.useRef)(null);
-    var _a = (0, react_1.useState)(), selectedMethod = _a[0], setSelectedMethod = _a[1];
+    var _c = (0, react_1.useState)(), selectedMethod = _c[0], setSelectedMethod = _c[1];
     var stepDrawerRef = (0, react_1.useRef)(null);
     var stepSwiperRef = (0, react_1.useRef)(null);
     var amountInputRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)(false), isSharing = _b[0], setIsSharing = _b[1];
-    var _c = (0, react_1.useState)(), sortBalance = _c[0], setSortBalance = _c[1];
-    var historyRef = (0, react_1.useRef)(null);
+    var _d = (0, react_1.useState)(false), isSharing = _d[0], setIsSharing = _d[1];
     var theme = (0, ThemeProvider_1.useTheme)();
-    var _d = (0, react_1.useState)(ReceiveStep.SELECT_METHOD), currentStep = _d[0], setCurrentStep = _d[1];
-    var _e = (0, react_1.useState)(), selectedToken = _e[0], setSelectedToken = _e[1];
-    var _f = (0, react_1.useState)(), selectedNetwork = _f[0], setSelectedNetwork = _f[1];
-    var _g = (0, useWalletData_1.default)(), isInitPasscode = _g.isInitPasscode, blockchainWallets = _g.blockchainWallets, masterWallet = _g.masterWallet;
-    var _h = (0, react_1.useState)(""), inputAmount = _h[0], setInputAmount = _h[1];
-    var _j = (0, react_1.useState)(""), amount = _j[0], setAmount = _j[1];
-    var _k = (0, react_1.useState)(""), amountError = _k[0], setAmountError = _k[1];
+    var _e = (0, react_1.useState)(ReceiveStep.SELECT_METHOD), currentStep = _e[0], setCurrentStep = _e[1];
+    var _f = (0, react_1.useState)(), selectedToken = _f[0], setSelectedToken = _f[1];
+    var _g = (0, react_1.useState)(), selectedNetwork = _g[0], setSelectedNetwork = _g[1];
+    var _h = (0, useWalletData_1.default)(), isInitPasscode = _h.isInitPasscode, blockchainWallets = _h.blockchainWallets, masterWallet = _h.masterWallet;
+    var _j = (0, react_1.useState)(""), inputAmount = _j[0], setInputAmount = _j[1];
+    var _k = (0, react_1.useState)(""), amount = _k[0], setAmount = _k[1];
+    var _l = (0, react_1.useState)(""), amountError = _l[0], setAmountError = _l[1];
     var keyboardId = (0, useUniqueId_1.useUniqueId)("receive-function-keyboard");
-    // const [receiveTokens, setReceiveTokens] = useState<ReceiveTokenType[]>([]);
-    var _l = (0, useReceiveData_1.default)(), receiveExternalTokens = _l.receiveExternalTokens, updateReceiveExternalToken = _l.updateReceiveExternalToken, receiveInternalTokens = _l.receiveInternalTokens, updateReceiveInternalToken = _l.updateReceiveInternalToken;
+    var chooseNetworkSupportDrawerRef = (0, react_1.useRef)(null);
+    var _m = (0, useReceiveData_1.default)(), receiveExternalTokens = _m.receiveExternalTokens, updateReceiveExternalToken = _m.updateReceiveExternalToken, receiveInternalTokens = _m.receiveInternalTokens, updateReceiveInternalToken = _m.updateReceiveInternalToken;
+    var _o = (0, react_1.useState)(), searchedReceiveTokens = _o[0], setSearchedReceiveTokens = _o[1];
+    var _p = (0, react_1.useState)(""), searchValue = _p[0], setSearchValue = _p[1];
+    var isExternal = (0, react_1.useMemo)(function () {
+        return selectedMethod === ReceiveMethods.RECEIVE_EXTERNAL;
+    }, [selectedMethod]);
+    var isInternal = (0, react_1.useMemo)(function () {
+        return selectedMethod === ReceiveMethods.RECEIVE_INTERNAL;
+    }, [selectedMethod]);
     var receiveTokens = (0, react_1.useMemo)(function () {
-        if (selectedMethod === ReceiveMethods.RECEIVE_INTERNAL) {
-            return (0, sort_utils_1.sortByBalance)(receiveInternalTokens || [], sortBalance);
+        if (isInternal) {
+            return receiveInternalTokens;
         }
-        return (0, sort_utils_1.sortByBalance)(receiveExternalTokens || [], sortBalance);
-    }, [receiveExternalTokens, receiveInternalTokens, selectedMethod, sortBalance]);
+        return receiveExternalTokens;
+    }, [isInternal, receiveExternalTokens, receiveInternalTokens]);
+    var handleGotoHistory = (0, react_1.useCallback)(function () {
+        gotoHistory === null || gotoHistory === void 0 ? void 0 : gotoHistory(selectedMethod);
+    }, [selectedMethod, gotoHistory]);
     var networks = (0, react_1.useMemo)(function () {
         if (!selectedToken) {
             return [];
@@ -146,17 +182,17 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (props, ref) {
         if (!selectedToken) {
             return undefined;
         }
-        if (selectedMethod === ReceiveMethods.RECEIVE_INTERNAL) {
+        if (isInternal) {
             return masterWallet;
         }
         return (_a = blockchainWallets === null || blockchainWallets === void 0 ? void 0 : blockchainWallets.find(function (item) { return item.networkSlug === (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.slug); })) === null || _a === void 0 ? void 0 : _a.blockchainAddress;
-    }, [blockchainWallets, selectedNetwork, selectedMethod, masterWallet, selectedToken]);
+    }, [selectedToken, isInternal, blockchainWallets, masterWallet, selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.slug]);
     var qrCodeValue = (0, react_1.useMemo)(function () {
         var _a, _b, _c;
         if (!receiveAddress || !selectedToken) {
             return "";
         }
-        if (selectedMethod === ReceiveMethods.RECEIVE_INTERNAL) {
+        if (isInternal) {
             var tonTransferParamInternal = {
                 address: receiveAddress,
                 amount: +amount * Math.pow(10, ((_a = selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.decimal) !== null && _a !== void 0 ? _a : 0)),
@@ -171,19 +207,23 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (props, ref) {
         }
         // return `ton://transfer/${receiveAddress}?jetton=${selectedToken?.network_data?.[0]?.address}&text=test-text&amount=${+amount * 10 ** (selectedToken?.decimal ?? 0)}`;
         return "".concat(receiveAddress);
-    }, [receiveAddress, selectedToken, amount, selectedMethod]);
+    }, [receiveAddress, selectedToken, isInternal, amount]);
     var warningMessage = (0, react_1.useMemo)(function () {
-        if (selectedMethod === ReceiveMethods.RECEIVE_EXTERNAL && !amount) {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["The amount must be between", " ", (0, jsx_runtime_1.jsxs)("strong", { style: { color: theme.palette.primary.main }, children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { value: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.min_value }), " to", " ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.max_value, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }), " "] }), " ", "and", " ", (0, jsx_runtime_1.jsx)("strong", { style: { color: theme.palette.primary.main }, children: "select the correct network" }), ", unless you will lose your assets."] }));
+        if (isExternal && !amount) {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Please send an amount be between", " ", (0, jsx_runtime_1.jsxs)("strong", { style: { color: theme.palette.primary.main }, children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { value: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.min_value }), " to", " ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.max_value, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }), " "] }), " ", "and", " ", (0, jsx_runtime_1.jsx)("strong", { style: { color: theme.palette.primary.main }, children: "select the correct network" }), ", or you will lose your assets."] }));
         }
-        if (selectedMethod === ReceiveMethods.RECEIVE_EXTERNAL && !!amount) {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Please", " ", (0, jsx_runtime_1.jsx)("strong", { style: { color: theme.palette.primary.main }, children: "select the correct network" }), ", unless you will lose your assets."] }));
-        }
-        if (selectedMethod === ReceiveMethods.RECEIVE_INTERNAL && !amount) {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["The amount must be between", " ", (0, jsx_runtime_1.jsxs)("strong", { style: { color: theme.palette.primary.main }, children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { value: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.min_value }), " to", " ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.max_value, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) })] }), ", unless you will lose your assets."] }));
+        if (isExternal && !!amount) {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Please", " ", (0, jsx_runtime_1.jsx)("strong", { style: { color: theme.palette.primary.main }, children: "select the correct network" }), ", or you will lose your assets."] }));
         }
         return null;
-    }, [selectedMethod, selectedNetwork, amount, selectedToken]);
+    }, [
+        isExternal,
+        amount,
+        theme.palette.primary.main,
+        selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.min_value,
+        selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.max_value,
+        selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name,
+    ]);
     var handleShareProgress = function () {
         setIsSharing(true);
     };
@@ -197,6 +237,8 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (props, ref) {
         setSelectedToken(undefined);
         setSelectedNetwork(undefined);
         setSelectedMethod(undefined);
+        setSearchValue("");
+        setSearchedReceiveTokens([]);
         handleShareFinish();
     };
     var open = function () {
@@ -213,16 +255,15 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (props, ref) {
         close: close,
     }); });
     var handleBack = function () {
-        if (currentStep === ReceiveStep.SHOW_QR_CODE &&
-            selectedMethod === ReceiveMethods.RECEIVE_INTERNAL) {
+        if (currentStep === ReceiveStep.SHOW_QR_CODE && isInternal) {
             gotoStep(ReceiveStep.SELECT_TOKEN);
             return;
         }
         gotoStep(currentStep - 1);
     };
-    var closeHistory = function () {
+    var closeChooseNetworkSupport = function () {
         var _a;
-        (_a = historyRef.current) === null || _a === void 0 ? void 0 : _a.close();
+        (_a = chooseNetworkSupportDrawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
     };
     var handleSelectMethod = function (method) {
         setSelectedMethod(method);
@@ -247,7 +288,7 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (props, ref) {
     var handleSelectToken = function (token) {
         setSelectedToken(token);
         if (!!token) {
-            if (selectedMethod === ReceiveMethods.RECEIVE_INTERNAL) {
+            if (isInternal) {
                 gotoStep(ReceiveStep.SHOW_QR_CODE);
             }
             else {
@@ -318,63 +359,124 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (props, ref) {
     }, [isInitPasscode, receiveExternalTokens, receiveInternalTokens]);
     var sharedImageName = (0, react_1.useMemo)(function () {
         var _a;
-        if (selectedMethod === ReceiveMethods.RECEIVE_INTERNAL) {
+        if (isInternal) {
             return masterWallet;
         }
         var blockchainAddress = (_a = blockchainWallets === null || blockchainWallets === void 0 ? void 0 : blockchainWallets.find(function (item) { return item.networkSlug === (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.slug); })) === null || _a === void 0 ? void 0 : _a.blockchainAddress;
         return blockchainAddress;
-    }, [blockchainWallets, masterWallet, selectedMethod, selectedNetwork]);
+    }, [blockchainWallets, isInternal, masterWallet, selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.slug]);
+    var handleSearch = function (e) {
+        var searchValue = e.target.value;
+        setSearchValue(searchValue);
+        searchDebounce(function () {
+            if (searchValue.length > 0) {
+                var filteredTokens = receiveTokens === null || receiveTokens === void 0 ? void 0 : receiveTokens.filter(function (item) {
+                    return item.name.toLowerCase().includes(searchValue.toLowerCase());
+                });
+                setSearchedReceiveTokens(filteredTokens || []);
+            }
+            else {
+                setSearchedReceiveTokens(receiveTokens);
+            }
+        });
+    };
+    var isSearching = (0, react_1.useMemo)(function () {
+        return searchValue.length > 0;
+    }, [searchValue]);
+    var isLoadingDepositTokens = (0, react_1.useMemo)(function () {
+        return !receiveTokens;
+    }, [receiveTokens]);
+    var isEmptyDepositTokens = (0, react_1.useMemo)(function () {
+        return !isLoadingDepositTokens && (receiveTokens === null || receiveTokens === void 0 ? void 0 : receiveTokens.length) === 0;
+    }, [isLoadingDepositTokens, receiveTokens]);
+    var isEmptySearch = (0, react_1.useMemo)(function () {
+        return isSearching && (searchedReceiveTokens === null || searchedReceiveTokens === void 0 ? void 0 : searchedReceiveTokens.length) === 0;
+    }, [isSearching, searchedReceiveTokens]);
+    var _q = (0, react_1.useState)([]), tokenRender = _q[0], setTokenRender = _q[1];
+    (0, react_1.useEffect)(function () {
+        if (isSearching) {
+            setTokenRender(searchedReceiveTokens || []);
+        }
+        else {
+            setTokenRender(receiveTokens || []);
+        }
+    }, [isSearching, searchedReceiveTokens, receiveTokens]);
+    var handleSort = function (sortBy, sortOrder) {
+        var sortedTokens = __spreadArray([], tokenRender, true);
+        sortedTokens.sort(function (a, b) {
+            var _a, _b;
+            if (sortBy === SortGroup_1.SortByType.Name) {
+                return sortOrder === SortTool_1.SortOrder.ASC
+                    ? ((_a = a === null || a === void 0 ? void 0 : a.name) === null || _a === void 0 ? void 0 : _a.localeCompare((b === null || b === void 0 ? void 0 : b.name) || "")) || 0
+                    : ((_b = b === null || b === void 0 ? void 0 : b.name) === null || _b === void 0 ? void 0 : _b.localeCompare((a === null || a === void 0 ? void 0 : a.name) || "")) || 0;
+            }
+            return sortOrder === SortTool_1.SortOrder.ASC
+                ? +((a === null || a === void 0 ? void 0 : a.balance) || 0) - +((b === null || b === void 0 ? void 0 : b.balance) || 0)
+                : +((b === null || b === void 0 ? void 0 : b.balance) || 0) - +((a === null || a === void 0 ? void 0 : a.balance) || 0);
+        });
+        setTokenRender(sortedTokens);
+    };
+    var handleClearSearch = function () {
+        setSearchValue("");
+    };
     return ((0, jsx_runtime_1.jsx)(RequireConnect_1.default, { sx: props.sx, children: (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: props.children, onOpen: props.onOpen, onClose: handleOnClose, sx: props.sx, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: RECEIVE_STEP_NAME[ReceiveStep.SELECT_METHOD], onClose: close, children: (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: stepDrawerRef, direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, sx: {
                         width: "100%",
-                    }, trigger: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content", width: "100%" }), children: [(0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Top up via internal transfer", description: "Receive crypto from other Ting users", icon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 24, height: 24 }, children: SvgPath_1.IC_RECEIVE_INTERNAL }), onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_INTERNAL); } }), (0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Top up via blockchain", description: "Deposit using a Web3 or an Exchange wallet", icon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 24, height: 24 }, children: SvgPath_1.IC_RECEIVE_EXTERNAL }), onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_EXTERNAL); } })] }), children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: {
+                    }, trigger: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content", width: "100%" }), children: [functionsList.includes(ReceiveMethods.RECEIVE_INTERNAL) && ((0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Top up via internal transfer", description: "Receive crypto from other Ting users", icon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 24, height: 24 }, children: SvgPath_1.IC_RECEIVE_INTERNAL }), onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_INTERNAL); }, recommended: true })), functionsList.includes(ReceiveMethods.RECEIVE_EXTERNAL) && ((0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Top up via blockchain", description: "Deposit using a Web3 or an Exchange wallet", icon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 24, height: 24 }, children: SvgPath_1.IC_RECEIVE_EXTERNAL }), onClick: function () { return handleSelectMethod(ReceiveMethods.RECEIVE_EXTERNAL); }, recommended: true })), functionsList.includes(ReceiveMethods.RECEIVE_FIAT) && ((0, jsx_runtime_1.jsx)(FiatDeposit_1.default, { children: (0, jsx_runtime_1.jsx)(ListItemCustom_1.default, { title: "Fiat-Gateway", description: "Experimental deposit via bank transfer", icon: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 24, height: 24 }, children: SvgPath_1.IC_RECEIVE_EXTERNAL }), recommended: false }) }))] }), children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { sx: {
                             position: "relative",
                             sx: "100dvh",
-                        }, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: RECEIVE_STEP_NAME[Math.max(currentStep, ReceiveStep.SELECT_TOKEN)], overrideBack: handleBack, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, marginLeft: "auto" }), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_HELP }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", sx: {
-                                            height: "1rem",
-                                            width: "1px",
-                                            backgroundColor: theme.palette.border.accent3,
-                                        } }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: historyRef, trigger: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20, display: "block" }, children: SvgPath_1.IC_HISTORY }), direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(ReceiveHistory_1.default, { onClose: closeHistory }) })] }) }), footer: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        }, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: RECEIVE_STEP_NAME[Math.max(currentStep, ReceiveStep.SELECT_TOKEN)], overrideBack: handleBack, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, marginLeft: "auto" }), children: [(0, jsx_runtime_1.jsx)(HelpButton_1.default, {}), false && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", sx: {
+                                                    height: "1rem",
+                                                    width: "1px",
+                                                    backgroundColor: theme.palette.border.accent3,
+                                                } }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20, display: "block" }, onClick: handleGotoHistory, children: SvgPath_1.IC_HISTORY })] }))] }) }), footer: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                 maxHeight: currentStep === ReceiveStep.SHOW_QR_CODE ? "120px" : 0,
                                 overflow: "hidden",
                                 transition: currentStep === ReceiveStep.SHOW_QR_CODE
                                     ? "max-height 0.3s linear 0.3s"
                                     : "max-height 0s linear",
                             }, children: (0, jsx_runtime_1.jsx)(Share_1.default, { elementId: "share-receive-info", onProgress: handleShareProgress, onFinish: handleShareFinish, imageName: sharedImageName, children: (0, jsx_runtime_1.jsx)(BottomActionLayout_1.default, { children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { fullWidth: true, status: isSharing ? Button_1.BUTTON_STATUS.LOADING : undefined, children: "Share" }) }) }) }), children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { padding: theme.mixins.pagePadding }, children: (0, jsx_runtime_1.jsxs)(SwiperControlled_1.default, { ref: stepSwiperRef, swiperProps: {
-                                    // autoHeight: true,
                                     spaceBetween: 32,
-                                }, disableSwipe: true, 
-                                // key={`step_${currentStep}`}
-                                initialActiveTab: currentStep - 1, children: [(0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content" }), children: [!receiveTokens && (0, jsx_runtime_1.jsx)(WaitingData_1.default, {}), (receiveTokens === null || receiveTokens === void 0 ? void 0 : receiveTokens.length) === 0 && (0, jsx_runtime_1.jsx)(EmptyData_1.default, {}), receiveTokens && (receiveTokens === null || receiveTokens === void 0 ? void 0 : receiveTokens.length) > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputBase, { startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_SEARCH }) }), placeholder: "Search", sx: {
-                                                                borderRadius: theme.mixins.customRadius.r12,
-                                                                border: "1px solid",
-                                                                borderColor: theme.palette.border.accent3,
-                                                                background: theme.palette.background.white,
-                                                                color: theme.palette.text.black,
-                                                                py: theme.mixins.customPadding.p6,
-                                                                px: theme.mixins.customPadding.p12,
-                                                                fontSize: theme.typography.fontSize16,
-                                                                "input::placeholder": {
-                                                                    fontSize: theme.typography.fontSize12,
-                                                                    pl: theme.mixins.customPadding.p4,
-                                                                    fontWeight: theme.typography.fontWeight500,
-                                                                    color: theme.palette.text.black,
-                                                                },
-                                                            } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                                                                display: theme.mixins.row,
-                                                                justifyContent: "space-between",
-                                                                mt: theme.mixins.customMargin.m16,
-                                                            }, children: [(0, jsx_runtime_1.jsx)(sortByBalance_1.default, { name: "Token" }), (0, jsx_runtime_1.jsx)(sortByBalance_1.default, { name: "Balance", 
-                                                                    // sortBalance={sortBalance}
-                                                                    setSortBalance: setSortBalance })] })] })), receiveTokens === null || receiveTokens === void 0 ? void 0 : receiveTokens.map(function (item, index) {
+                                }, disableSwipe: true, initialActiveTab: currentStep - 1, children: [(0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, height: "fit-content" }), children: [!isEmptyDepositTokens && ((0, jsx_runtime_1.jsx)(material_1.InputBase, { onChange: handleSearch, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_SEARCH }) }), value: searchValue, placeholder: "Search", sx: {
+                                                        borderRadius: theme.mixins.customRadius.r12,
+                                                        border: "1px solid",
+                                                        borderColor: theme.palette.border.accent3,
+                                                        background: theme.palette.background.white,
+                                                        color: theme.palette.text.black,
+                                                        py: theme.mixins.customPadding.p6,
+                                                        px: theme.mixins.customPadding.p12,
+                                                        fontSize: theme.typography.fontSize16,
+                                                        lineHeight: "100%",
+                                                        "input::placeholder": {
+                                                            fontSize: theme.typography.fontSize12,
+                                                            pl: theme.mixins.customPadding.p4,
+                                                            fontWeight: theme.typography.fontWeight500,
+                                                            color: theme.palette.text.black,
+                                                            lineHeight: "100%",
+                                                        },
+                                                    }, endAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: {
+                                                            visibility: isSearching ? "visible" : "hidden",
+                                                        }, children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
+                                                                width: 20,
+                                                                height: 20,
+                                                                p: theme.mixins.customPadding.p4,
+                                                                cursor: "pointer",
+                                                            }, onClick: handleClearSearch, children: SvgPath_1.IC_CLOSE }) }) })), (tokenRender === null || tokenRender === void 0 ? void 0 : tokenRender.length) > 0 && (0, jsx_runtime_1.jsx)(SortGroup_1.default, { onChange: handleSort }), isLoadingDepositTokens && (0, jsx_runtime_1.jsx)(WaitingData_1.default, {}), isEmptyDepositTokens && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { py: "4rem" }, title: "No deposit tokens", description: "No deposit tokens" })), isSearching && isEmptySearch && ((0, jsx_runtime_1.jsx)(EmptyData_1.default, { sx: { py: "4rem" }, title: "No search results", description: "Let's try again with a different search" })), tokenRender === null || tokenRender === void 0 ? void 0 : tokenRender.map(function (item, index) {
                                                     var stringifiedTokenData = JSON.stringify(item);
                                                     if (!item)
                                                         return null;
                                                     return ((0, jsx_runtime_1.jsx)(TokenSelection_1.default, { onClick: handleSelectToken, tokenData: stringifiedTokenData, active: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.id) === item.id }, "token_".concat(item.id, "_").concat(index)));
-                                                })] }) }, "slide_step_".concat(ReceiveStep.SELECT_TOKEN)), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, display: selectedMethod === ReceiveMethods.RECEIVE_EXTERNAL ? "flex" : "none" }), children: networks === null || networks === void 0 ? void 0 : networks.map(function (item, index) {
-                                                if (!item)
-                                                    return null;
-                                                return ((0, jsx_runtime_1.jsx)(NetworkSelection_1.default, { onClick: handleSelectNetwork, networkData: JSON.stringify(item), active: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.id) === item.id, token: selectedToken }, "network_".concat(item.id, "_").concat(index)));
-                                            }) }) }, "slide_step_".concat(ReceiveStep.SELECT_NETWORK)), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                                })] }) }, "slide_step_".concat(ReceiveStep.SELECT_TOKEN)), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12, display: isExternal ? "flex" : "none" }), children: [(networks === null || networks === void 0 ? void 0 : networks.length) > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.paper), { borderRadius: theme.mixins.customRadius.r16, background: theme.palette.background.accent3, gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.fieldTitle), { fontWeight: theme.typography.fontWeight700, color: theme.palette.text.darkContrast }), children: "Choosing a network? Let us help!" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.activityDescription), { color: theme.palette.text.accent, fontWeight: theme.typography.fontWeight500 }), children: "Select the network used by your sending platform." }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: 0.125, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: chooseNetworkSupportDrawerRef, sx: {
+                                                                        mt: 0.25,
+                                                                    }, trigger: (0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: {
+                                                                            color: theme.palette.primary.main,
+                                                                            fontWeight: theme.typography.fontWeight600,
+                                                                            fontSize: theme.typography.fontSize10,
+                                                                            lineHeight: "100%",
+                                                                        }, children: "Learn more" }), children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "How to choose my top up network", onClose: closeChooseNetworkSupport, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.mixins.listDescription), { color: theme.palette.text.blackContrast }), children: "Lorem ipsum dolor sit amet consectetur. Vitae faucibus ornare lectus arcu sit sed et. Eu integer pharetra posuere lobortis varius dapibus risus. Pellentesque quis id diam ante lectus ornare tristique." }), (0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.mixins.listDescription), { color: theme.palette.text.blackContrast }), children: "Eget viverra quis facilisis velit mattis. Risus sed egestas vitae ridiculus odio sit eu adipiscing. Scelerisque nunc nec nisl mauris venenatis viverra est dictumst adipiscing." }), (0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.mixins.listDescription), { color: theme.palette.text.blackContrast }), children: "Id pulvinar aliquam quam ut sed ut pharetra turpis ipsum. Condimentum eget a interdum neque sagittis lobortis proin nisi. Magna id massa risus elit at." })] }) }) }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 6, height: 6, mt: "4px" }, children: (0, jsx_runtime_1.jsx)("svg", { width: "4", height: "6", viewBox: "0 0 4 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.7 3L0.7 6L0 5.3L2.3 3L0 0.7L0.7 0L3.7 3Z", fill: "#1C461D" }) }) })] })] })), networks === null || networks === void 0 ? void 0 : networks.map(function (item, index) {
+                                                    if (!item)
+                                                        return null;
+                                                    return ((0, jsx_runtime_1.jsx)(NetworkSelection_1.default, { onClick: handleSelectNetwork, networkData: JSON.stringify(item), active: (selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.id) === item.id, token: selectedToken }, "network_".concat(item.id, "_").concat(index)));
+                                                })] }) }, "slide_step_".concat(ReceiveStep.SELECT_NETWORK)), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                                 display: "flex",
                                                 flexDirection: "column",
                                                 gap: theme.mixins.gaps.g16,
@@ -383,20 +485,27 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (props, ref) {
                                                                     width: "100%",
                                                                 } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), { top: 0, width: "fit-content", height: "fit-content", borderRadius: theme.mixins.customRadius.r12, padding: theme.mixins.customPadding.p8 }), children: [(0, jsx_runtime_1.jsx)(QRCode_1.default, { value: qrCodeValue, logo: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.link, bgColor: "transparent", size: 150 }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), { padding: theme.mixins.customPadding.p4, borderRadius: 9999, backgroundColor: theme.palette.background.white }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { crossOrigin: "anonymous", width: 24, height: 24, src: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.link, sx: {
                                                                                 borderRadius: 9999,
-                                                                            } }) })] }), selectedMethod === ReceiveMethods.RECEIVE_EXTERNAL && ((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: "Network" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.row), onClick: handleBack, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { component: "button", sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4, cursor: "pointer", transition: "transform 0.3s ease-in-out", "&:active": {
+                                                                            } }) })] }), isExternal && ((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: "Network" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.row), onClick: handleBack, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { component: "button", sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4, cursor: "pointer", transition: "transform 0.3s ease-in-out", "&:active": {
                                                                                         transform: "translateX(0.5rem)",
                                                                                     } }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { width: 24, height: 24, sx: {
                                                                                             borderRadius: "9999px",
-                                                                                        }, src: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.link }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.name })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 12, height: 12, ml: "auto" }, children: SvgPath_1.IC_CHEVRON_RIGHT })] })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4 }), children: [(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: __assign({}, theme.mixins.valueDescription), children: selectedMethod === ReceiveMethods.RECEIVE_INTERNAL
-                                                                                    ? "Internal address"
-                                                                                    : "Address" }), selectedMethod === ReceiveMethods.RECEIVE_INTERNAL && ((0, jsx_runtime_1.jsx)(CustomTooltip_1.default, { trigger: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 16, height: 16, mb: "3px" }, children: SvgPath_1.IC_TOOLTIP }), children: (0, jsx_runtime_1.jsx)(DialogContentLayout_1.default, { content: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.warning), children: ["This address is used to receive token by internal transfer. You can not use it for blockchain transaction. If you want to receive token by blockchain, please select the ", (0, jsx_runtime_1.jsx)("strong", { children: "Receive External" }), " method instead."] }) }) }))] }), (0, jsx_runtime_1.jsxs)(CopyTextComponent_1.default, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between" }), value: receiveAddress || "", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { wordBreak: "break-all", maxWidth: "85%" }), children: receiveAddress }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_COPY })] })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                                                                    color: theme.palette.border.accent,
-                                                                    width: "100%",
-                                                                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [!!amount && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Amount" }), value: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.activityTitle), { fontSize: theme.typography.fontSize13 }), children: [amount, " ", selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name] }) })), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Top Up Arrival Time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.activityTitle), { fontSize: theme.typography.fontSize13 }), children: "~ 7 Minutes" }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Withdrawal Arrival Time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.activityTitle), { fontSize: theme.typography.fontSize13 }), children: "~ 20 Minutes" }) })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                                                                        }, src: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.link }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: selectedNetwork === null || selectedNetwork === void 0 ? void 0 : selectedNetwork.name })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
+                                                                                    width: 12,
+                                                                                    height: 12,
+                                                                                    ml: "auto",
+                                                                                    transform: "rotate(90deg)",
+                                                                                }, children: SvgPath_1.IC_CHEVRON_RIGHT })] })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4 }), children: [(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: __assign({}, theme.mixins.valueDescription), children: isInternal ? "Internal address" : "Address" }), isInternal && ((0, jsx_runtime_1.jsx)(CustomTooltip_1.default, { trigger: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 16, height: 16, mb: "3px" }, children: SvgPath_1.IC_TOOLTIP }), children: (0, jsx_runtime_1.jsx)(DialogContentLayout_1.default, { content: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.warning), children: ["This address is used to receive token by internal transfer. You can not use it for blockchain transaction. If you want to receive token by blockchain, please select the ", (0, jsx_runtime_1.jsx)("strong", { children: "Receive External" }), " method instead."] }) }) }))] }), (0, jsx_runtime_1.jsxs)(CopyTextComponent_1.default, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between" }), value: receiveAddress || "", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { wordBreak: "break-all", maxWidth: "85%" }), children: receiveAddress }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_COPY })] })] }), (!!userInfo || !!amount || isExternal || !!warningMessage) && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
                                                                     color: theme.palette.border.accent,
                                                                     width: "100%",
-                                                                    mt: theme.mixins.customMargin.m12,
-                                                                } }), !!warningMessage && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4, backgroundColor: theme.palette.background.white16, borderRadius: theme.mixins.customRadius.r12, padding: theme.mixins.customPadding.p8 }), children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: warningMessage }) }))] }) }), selectedMethod === ReceiveMethods.RECEIVE_INTERNAL && ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: amountDrawerRef, sx: {
+                                                                } })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ width: "100%" }, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [!!userInfo && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { sx: {
+                                                                            alignItems: "start",
+                                                                        }, field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Received user" }), value: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { width: 16, height: 16, src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, sx: {
+                                                                                        borderRadius: "9999px",
+                                                                                    } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g2 }), children: (0, jsx_runtime_1.jsxs)(Text_1.default, { children: [userInfo === null || userInfo === void 0 ? void 0 : userInfo.nickname, " "] }) })] }), valueDescription: (0, jsx_runtime_1.jsx)(Text_1.default, { children: userInfo === null || userInfo === void 0 ? void 0 : userInfo.username }) })), !!amount && ((0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Amount" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize13 }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }) }) })), isExternal && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Top Up Arrival Time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize13 }), children: "~ 7 Minutes" }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.valueDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13 }), children: "Withdrawal Arrival Time" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize13 }), children: "~ 20 Minutes" }) })] }))] }), !!warningMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                                                            color: theme.palette.border.accent,
+                                                                            width: "100%",
+                                                                            mt: theme.mixins.customMargin.m12,
+                                                                        } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.valueDescription), children: warningMessage })] }))] }) }), isInternal && ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: amountDrawerRef, sx: {
                                                         width: "100%",
                                                         display: "flex",
                                                         justifyContent: "center",
@@ -404,7 +513,10 @@ exports.ReceiveFunction = (0, react_1.forwardRef)(function (props, ref) {
                                                                 fontSize: theme.typography.fontSize14,
                                                                 textTransform: "none",
                                                                 fontWeight: theme.typography.fontWeight500,
-                                                            }, children: [amount ? "Edit" : "+ Set", " amount"] }) }), children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { id: keyboardId, onChange: handleChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), keyboardId: "amount-keyboard-id", children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { onClose: function () { var _a; return (_a = amountDrawerRef.current) === null || _a === void 0 ? void 0 : _a.close(); }, title: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.fieldTitle), children: [amount ? "Edit" : "Set", " ", selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name, " amount"] }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { ref: amountInputRef, elementsAcceptIds: ["amount-keyboard-id"], value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, rightElement: (0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { onClick: handleClickMaxAmount, sx: __assign({}, theme.mixins.smallButton), children: "Max" }) }) }), amountError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: amountError })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { width: "100%", mt: theme.mixins.customMargin.m8, gap: theme.mixins.gaps.g12 }), children: [!!amount && ((0, jsx_runtime_1.jsx)(Button_1.default.Text, { onClick: handleUnset, children: "Unset" })), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { flex: 1 }, onClick: handleContinue, status: !!amountError
+                                                                display: "flex",
+                                                                alignItems: "center",
+                                                                gap: theme.mixins.gaps.g4,
+                                                            }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: amount ? SvgPath_1.IC_EDIT : SvgPath_1.IC_SET }), amount ? "Edit" : "Set", " amount"] }) }), children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { id: keyboardId, onChange: handleChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), keyboardId: "amount-keyboard-id", children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { onClose: function () { var _a; return (_a = amountDrawerRef.current) === null || _a === void 0 ? void 0 : _a.close(); }, title: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.fieldTitle), children: [amount ? "Edit" : "Set", " ", selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name, " amount"] }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { ref: amountInputRef, elementsAcceptIds: ["amount-keyboard-id"], value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, rightElement: (0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { onClick: handleClickMaxAmount, sx: __assign({}, theme.mixins.smallButton), children: "Max" }) }) }), amountError && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: amountError })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { width: "100%", mt: theme.mixins.customMargin.m8, gap: theme.mixins.gaps.g12 }), children: [!!amount && ((0, jsx_runtime_1.jsx)(Button_1.default.Text, { onClick: handleUnset, children: "Unset" })), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { flex: 1 }, onClick: handleContinue, status: !!amountError
                                                                                     ? Button_1.BUTTON_STATUS.DISABLED
                                                                                     : Button_1.BUTTON_STATUS.ENABLED, children: "Continue" })] })] }) }) }) }))] }) }, "slide_step_".concat(ReceiveStep.SHOW_QR_CODE))] }) }) }) }) }) }) }));
 });

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

@@ -201,7 +201,6 @@ var ReceiveHistory = function (props) {
                         return [3 /*break*/, 5];
                     case 4:
                         setLoading(false);
-                        console.error("Error fetching swap history.");
                         return [7 /*endfinally*/];
                     case 5: return [2 /*return*/];
                 }
@@ -366,7 +365,7 @@ var ReceiveHistory = function (props) {
     }, [currentId, hasOpenedDetail, selectedItem, transactionDetail, drawerRefs.current.detail]);
     return ((0, jsx_runtime_1.jsxs)(ChildPageLayout_1.default, { sx: {
             width: "100dvw",
-        }, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Top up history", overrideBack: props.onClose }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { px: theme.mixins.customPadding.p16, 
+        }, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Top Up History", overrideBack: props.onClose }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { px: theme.mixins.customPadding.p16, 
                     // pt: theme.mixins.customPadding.p16,
                     gap: theme.mixins.gaps.g8, ml: theme.mixins.customMargin.m4 }), children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 4, children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: function (ref) {
                                 drawerRefs.current.status = ref !== null && ref !== void 0 ? ref : undefined;
@@ -421,7 +420,7 @@ var ReceiveHistory = function (props) {
                                     timestamp: selectedItem.date_created,
                                     success: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.transaction_status,
                                     message: "",
-                                } }, "detail-".concat(currentId))) }) }, "drawer-".concat(currentId)), resultData.map(function (item) { return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: function () {
+                                } }, "detail-".concat(currentId))) }) }, "drawer-".concat(currentId)), resultData.map(function (item, i) { return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: function () {
                             // handleTransactionClick(item.id);
                         }, sx: {
                             px: theme.mixins.customPadding.p16,
@@ -430,7 +429,7 @@ var ReceiveHistory = function (props) {
                                     opacity: 0.6,
                                     backgroundColor: theme.palette.border.accent3,
                                     my: theme.mixins.customMargin.m16,
-                                } })] }, item.id)); })] })) : (resultData.length == 0 &&
+                                } })] }, i)); })] })) : (resultData.length == 0 &&
                 !isLoading && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign(__assign({}, theme.mixins.center), { padding: theme.mixins.customPadding.p24 }), theme.mixins.column), { gap: theme.mixins.gaps.g4, textAlign: "center" }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("result"), width: 62, height: 62, sx: {
                             mx: "auto",
                             mb: theme.mixins.customMargin.m12,

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

@@ -26,6 +26,10 @@ export declare const IC_CHECK: import("react/jsx-runtime").JSX.Element;
 export declare const IC_UNCHECK: import("react/jsx-runtime").JSX.Element;
 export declare const IC_BACK: import("react/jsx-runtime").JSX.Element;
 export declare const IC_TOOLTIP: import("react/jsx-runtime").JSX.Element;
+export declare const IC_RECEIVE_TAG: import("react/jsx-runtime").JSX.Element;
+export declare const IC_RECEIVE_TAG_RECOMMENDED: import("react/jsx-runtime").JSX.Element;
+export declare const IC_EDIT: import("react/jsx-runtime").JSX.Element;
+export declare const IC_SET: import("react/jsx-runtime").JSX.Element;
 export declare const IC_NO_SEE: import("react/jsx-runtime").JSX.Element;
 export declare const IC_EXPANDER_ARROW: import("react/jsx-runtime").JSX.Element;
 export declare const IC_INFORMATION: import("react/jsx-runtime").JSX.Element;