tek-wallet 0.0.765 → 0.0.767
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/TekWallet/components/ui/Formatter/index__.d.ts +18 -0
- package/dist/components/TekWallet/components/ui/Formatter/index__.js +100 -0
- package/dist/components/TekWallet/components/views/SendInternalView/components/Form.js +2 -2
- package/dist/components/TekWallet/components/views/SwapView/index.js +31 -34
- package/dist/components/TekWallet/providers/SwapProvider/index.js +5 -0
- package/dist/components/TekWallet/providers/WalletDataProviderNoImport/index.js +1 -0
- package/dist/components/TekWallet/store/balance/index.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BoxProps } from "@mui/material";
|
|
3
|
+
export interface FormatterProps extends BoxProps {
|
|
4
|
+
value?: number | string;
|
|
5
|
+
start?: string;
|
|
6
|
+
unit?: string;
|
|
7
|
+
lengthValueAllowed?: number;
|
|
8
|
+
allowShowZero?: boolean;
|
|
9
|
+
useCompact?: boolean;
|
|
10
|
+
useCompactOnThousand?: boolean;
|
|
11
|
+
disableTooltip?: boolean;
|
|
12
|
+
showLessThan?: boolean;
|
|
13
|
+
isNotCurrency?: boolean;
|
|
14
|
+
hideUnitOutSide?: boolean;
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare const Formatter: React.FC<FormatterProps>;
|
|
18
|
+
export default Formatter;
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.Formatter = void 0;
|
|
8
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
+
var react_1 = require("react");
|
|
10
|
+
var CustomTooltip_1 = __importDefault(require("../CustomTooltip"));
|
|
11
|
+
var getStandardNumber_1 = __importDefault(require("./functions/getStandardNumber"));
|
|
12
|
+
var lengthFromDotToFirstNonZero_1 = __importDefault(require("./functions/lengthFromDotToFirstNonZero"));
|
|
13
|
+
var formatter_1 = __importDefault(require("./functions/formatter"));
|
|
14
|
+
var clsx_1 = __importDefault(require("clsx"));
|
|
15
|
+
var Formatter = function (_a) {
|
|
16
|
+
var value = _a.value, _b = _a.start, start = _b === void 0 ? "" : _b, _c = _a.unit, unit = _c === void 0 ? "" : _c, _d = _a.lengthValueAllowed, lengthValueAllowed = _d === void 0 ? 4 : _d, _e = _a.allowShowZero, allowShowZero = _e === void 0 ? false : _e, _f = _a.useCompact, useCompact = _f === void 0 ? true : _f, disableTooltip = _a.disableTooltip,
|
|
17
|
+
// showLessThan = false,
|
|
18
|
+
_g = _a.useCompactOnThousand,
|
|
19
|
+
// showLessThan = false,
|
|
20
|
+
useCompactOnThousand = _g === void 0 ? false : _g, _h = _a.isNotCurrency, isNotCurrency = _h === void 0 ? false : _h, _j = _a.hideUnitOutSide, hideUnitOutSide = _j === void 0 ? false : _j, className = _a.className;
|
|
21
|
+
// TODO: get user setting from backend
|
|
22
|
+
var userSetting = {
|
|
23
|
+
currency: "usd",
|
|
24
|
+
currencySymbol: "$",
|
|
25
|
+
rate: 1,
|
|
26
|
+
decimalDot: ".",
|
|
27
|
+
decimalComma: ",",
|
|
28
|
+
unitDirection: "right",
|
|
29
|
+
};
|
|
30
|
+
var valueInNumber = Number(value);
|
|
31
|
+
var addUnit = function (value) {
|
|
32
|
+
if (hideUnitOutSide)
|
|
33
|
+
return value;
|
|
34
|
+
var isLeft = userSetting.unitDirection === "left";
|
|
35
|
+
if (isLeft) {
|
|
36
|
+
return ((0, jsx_runtime_1.jsxs)("span", { className: (0, clsx_1.default)(className), children: [unit, " ", value] }));
|
|
37
|
+
}
|
|
38
|
+
return ((0, jsx_runtime_1.jsxs)("span", { className: (0, clsx_1.default)(className), children: [value, " ", unit] }));
|
|
39
|
+
};
|
|
40
|
+
var valueDisplay = (0, react_1.useCallback)(function () {
|
|
41
|
+
var returnFalsyValue = function () {
|
|
42
|
+
if (!allowShowZero)
|
|
43
|
+
return "--";
|
|
44
|
+
return (0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)(className), children: "0" });
|
|
45
|
+
};
|
|
46
|
+
if (isNaN(valueInNumber))
|
|
47
|
+
return returnFalsyValue();
|
|
48
|
+
if (valueInNumber === 0)
|
|
49
|
+
return returnFalsyValue();
|
|
50
|
+
var formattedNumber = (0, getStandardNumber_1.default)(valueInNumber);
|
|
51
|
+
// console.log("🚀 ~ formattedNumber:", formattedNumber);
|
|
52
|
+
// const beforeDot = formattedNumber.slice(0, formattedNumber.indexOf("."));
|
|
53
|
+
// console.log("🚀 ~ beforeDot:", beforeDot);
|
|
54
|
+
// const afterDot = formattedNumber.slice(formattedNumber.indexOf(".") + 1);
|
|
55
|
+
// console.log("🚀 ~ afterDot:", afterDot);
|
|
56
|
+
var lengthFromDot = (0, lengthFromDotToFirstNonZero_1.default)(formattedNumber);
|
|
57
|
+
// console.log("🚀 ~ lengthFromDot:", lengthFromDot);
|
|
58
|
+
// const useCompact = valueInNumber > 0 && valueInNumber < 0.01;
|
|
59
|
+
var useCompactInline = (formattedNumber === null || formattedNumber === void 0 ? void 0 : formattedNumber.length) > lengthValueAllowed;
|
|
60
|
+
// console.log("🚀 ~ useCompactInline:", useCompactInline);
|
|
61
|
+
// console.log("🚀 ~ valueInNumber:", valueInNumber);
|
|
62
|
+
if (useCompactInline) {
|
|
63
|
+
// if (showLessThan) {
|
|
64
|
+
// return (
|
|
65
|
+
// <span className={clsx(className)}>
|
|
66
|
+
// {start}
|
|
67
|
+
// {"< "}0{userSetting.decimalDot}01
|
|
68
|
+
// </span>
|
|
69
|
+
// );
|
|
70
|
+
// } else {
|
|
71
|
+
return ((0, jsx_runtime_1.jsxs)("span", { className: (0, clsx_1.default)(className), children: [start, "0.0", (0, jsx_runtime_1.jsx)("sub", { children: lengthFromDot }), formattedNumber.slice(2 + lengthFromDot, lengthValueAllowed - 1 + lengthFromDot)] }));
|
|
72
|
+
// }
|
|
73
|
+
}
|
|
74
|
+
return ((0, jsx_runtime_1.jsxs)("span", { className: (0, clsx_1.default)(className), children: [start, (0, formatter_1.default)(valueInNumber, useCompact, useCompactOnThousand, lengthValueAllowed)] }));
|
|
75
|
+
}, [
|
|
76
|
+
valueInNumber,
|
|
77
|
+
className,
|
|
78
|
+
start,
|
|
79
|
+
useCompact,
|
|
80
|
+
useCompactOnThousand,
|
|
81
|
+
lengthValueAllowed,
|
|
82
|
+
allowShowZero,
|
|
83
|
+
// showLessThan,
|
|
84
|
+
// userSetting.decimalDot,
|
|
85
|
+
]);
|
|
86
|
+
var trigger = valueDisplay();
|
|
87
|
+
return ((0, jsx_runtime_1.jsx)(CustomTooltip_1.default, { disabled: disableTooltip, trigger: value ? addUnit(trigger) : trigger, sx: {
|
|
88
|
+
"& .MuiPaper-root": {
|
|
89
|
+
whiteSpace: "nowrap",
|
|
90
|
+
backdropFilter: "blur(10px)",
|
|
91
|
+
borderRadius: "0.37rem",
|
|
92
|
+
padding: "0.5rem 0.75rem",
|
|
93
|
+
fontSize: "1.05em",
|
|
94
|
+
fontWeight: 500,
|
|
95
|
+
lineHeight: "100%",
|
|
96
|
+
},
|
|
97
|
+
}, children: (0, jsx_runtime_1.jsx)(exports.Formatter, { disableTooltip: true, start: start, value: value, lengthValueAllowed: 18, useCompact: false, unit: unit, allowShowZero: true, isNotCurrency: isNotCurrency }) }));
|
|
98
|
+
};
|
|
99
|
+
exports.Formatter = Formatter;
|
|
100
|
+
exports.default = exports.Formatter;
|
|
@@ -87,7 +87,6 @@ exports.default = Form;
|
|
|
87
87
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
88
88
|
var material_1 = require("@mui/material");
|
|
89
89
|
var Input_1 = __importDefault(require("../../../ui/Input"));
|
|
90
|
-
var Formatter_1 = __importDefault(require("../../../ui/Formatter"));
|
|
91
90
|
var SvgPath_1 = require("../../../ui/SvgPath");
|
|
92
91
|
var Text_1 = __importDefault(require("../../../ui/Text"));
|
|
93
92
|
var providers_1 = require("../../../../providers");
|
|
@@ -105,6 +104,7 @@ var Fees_1 = __importStar(require("../../../ui/Fees"));
|
|
|
105
104
|
var xhub_keyboard_1 = require("xhub-keyboard");
|
|
106
105
|
var useUniqueId_1 = require("../../../../hooks/useUniqueId");
|
|
107
106
|
var ChildPageLayout_1 = __importDefault(require("../../../layouts/ChildPageLayout"));
|
|
107
|
+
var Formatter_1 = __importDefault(require("../../../ui/Formatter"));
|
|
108
108
|
var validateAddressDebounce = (0, lodash_1.debounce)(function (callback) {
|
|
109
109
|
callback();
|
|
110
110
|
}, 500, { leading: true, trailing: true });
|
|
@@ -336,7 +336,7 @@ function Form(props) {
|
|
|
336
336
|
fontSize: theme.typography.fontSize14,
|
|
337
337
|
color: theme.palette.text.black,
|
|
338
338
|
fontWeight: theme.typography.fontWeight700,
|
|
339
|
-
}, children: "
|
|
339
|
+
}, children: "Transfer amount" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8, alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize11, color: theme.palette.text.accent }), children: "Your balance " }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { fontSize: theme.typography.fontSize12, color: theme.palette.text.black, fontWeight: theme.typography.fontWeight700 }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.balance, unit: " ".concat(selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.name) }) })] })] }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { elementsAcceptIds: ["form-amount-keyboard-id"], value: amount === null || amount === void 0 ? void 0 : amount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, placeholder: ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
|
|
340
340
|
display: "inline-flex",
|
|
341
341
|
alignItems: "center",
|
|
342
342
|
gap: theme.mixins.gaps.g4,
|
|
@@ -70,7 +70,6 @@ var Summary_1 = __importDefault(require("./components/Summary"));
|
|
|
70
70
|
var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"));
|
|
71
71
|
var FromCardSkeleton_1 = __importDefault(require("./components/FromCard/FromCardSkeleton"));
|
|
72
72
|
var useWallet_1 = __importDefault(require("../../../hooks/useWallet"));
|
|
73
|
-
var SwapFunction_1 = __importDefault(require("../../ui/SwapFunction"));
|
|
74
73
|
var SwapStep;
|
|
75
74
|
(function (SwapStep) {
|
|
76
75
|
SwapStep[SwapStep["FORM"] = 0] = "FORM";
|
|
@@ -162,39 +161,37 @@ var SwapView = function () {
|
|
|
162
161
|
container: {
|
|
163
162
|
height: "100%",
|
|
164
163
|
},
|
|
165
|
-
}, id: keyboardId, onChange: handleKeyboardChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toString(), keyboardId: "form-amount-keyboard-id", onOpen: handleKeyboardOpen, onClose: handleKeyboardClose, children: (0, jsx_runtime_1.
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
display: "none",
|
|
197
|
-
}, children: (0, jsx_runtime_1.jsx)(SwapFunction_1.default, {}) })] }) }));
|
|
164
|
+
}, id: keyboardId, onChange: handleKeyboardChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toString(), keyboardId: "form-amount-keyboard-id", onOpen: handleKeyboardOpen, onClose: handleKeyboardClose, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: SWAP_STEP_NAME[currentStep], overrideBack: handleBack }) }), children: (0, jsx_runtime_1.jsxs)(SwiperControlled_1.default, { ref: swiperRef, swiperProps: {
|
|
165
|
+
autoHeight: false,
|
|
166
|
+
spaceBetween: 32,
|
|
167
|
+
speed: isChangeSlidePromptly ? 0 : 500,
|
|
168
|
+
}, disableSwipe: true, initialActiveTab: currentStep, sx: {
|
|
169
|
+
height: "100%",
|
|
170
|
+
}, swiperStyle: {
|
|
171
|
+
height: "100%",
|
|
172
|
+
}, children: [(0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: __assign(__assign({ height: "100%", minHeight: "100%" }, theme.mixins.pagePadding), { paddingBottom: isKeyboardOpen
|
|
173
|
+
? theme.mixins.customPadding.p8
|
|
174
|
+
: theme.mixins.customPadding.p24 }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
|
|
175
|
+
display: "flex",
|
|
176
|
+
flexDirection: "column",
|
|
177
|
+
gap: theme.mixins.gaps.g12,
|
|
178
|
+
height: "100%",
|
|
179
|
+
}, children: [!fromTokens && (0, jsx_runtime_1.jsx)(FromCardSkeleton_1.default, {}), !!fromTokens && ((0, jsx_runtime_1.jsx)(FromCard_1.default, { onChange: onChange, onChangeToken: handleSelectToken, selectedToken: fromTokenSelected !== null && fromTokenSelected !== void 0 ? fromTokenSelected : undefined, amount: fromAmount !== null && fromAmount !== void 0 ? fromAmount : undefined, setFromInfoIsReady: setFromInfoIsReady, keyboardId: keyboardId, amountWasChanged: isUserTypedAmount, fromTokens: fromTokens })), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 18, height: 18 }, children: SvgPath_1.IC_SWAP }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
|
|
180
|
+
flex: 1,
|
|
181
|
+
borderStyle: "dashed",
|
|
182
|
+
borderColor: "#A3A3A3",
|
|
183
|
+
opacity: 0.3,
|
|
184
|
+
} })] }), !fromTokenSelected && (0, jsx_runtime_1.jsx)(FromCardSkeleton_1.default, {}), !!fromTokenSelected && ((0, jsx_runtime_1.jsx)(ToCard_1.default, { selectedToToken: toTokenSelected !== null && toTokenSelected !== void 0 ? toTokenSelected : undefined, selectedFromToken: fromTokenSelected !== null && fromTokenSelected !== void 0 ? fromTokenSelected : undefined, fromAmount: +(fromAmount !== null && fromAmount !== void 0 ? fromAmount : 0), onChangeToToken: handleSelectOutputToken })), !!toTokenRate && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
|
|
185
|
+
fontSize: theme.typography.fontSize12,
|
|
186
|
+
fontWeight: theme.typography.fontWeight500,
|
|
187
|
+
color: theme.palette.text.blackContrast,
|
|
188
|
+
alignSelf: "center",
|
|
189
|
+
}, children: ["1 ", fromTokenSelected === null || fromTokenSelected === void 0 ? void 0 : fromTokenSelected.name, " ~", " ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: toTokenRate, unit: toTokenSelected === null || toTokenSelected === void 0 ? void 0 : toTokenSelected.name })] })), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: {
|
|
190
|
+
marginTop: "auto",
|
|
191
|
+
}, status: !fromInfoIsReady ? Button_1.BUTTON_STATUS.DISABLED : Button_1.BUTTON_STATUS.ENABLED, fullWidth: true, onClick: handlePreviewSwap, children: "Preview swap" })] }) }, SwapStep.FORM), (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { style: __assign({ height: "100%", minHeight: "100%" }, theme.mixins.pagePadding), children: (0, jsx_runtime_1.jsx)(Summary_1.default, { isActiveStep: currentStep === SwapStep.CONFIRM, fromToken: fromTokenSelected !== null && fromTokenSelected !== void 0 ? fromTokenSelected : undefined, toToken: toTokenSelected !== null && toTokenSelected !== void 0 ? toTokenSelected : undefined, fromAmount: +(fromAmount !== null && fromAmount !== void 0 ? fromAmount : 0), receiveAmountEstimate: fromAmount ? +(fromAmount !== null && fromAmount !== void 0 ? fromAmount : 0) * toTokenRate : 0, confirmProps: {
|
|
192
|
+
onDone: handleNewTransaction,
|
|
193
|
+
onSuccess: handleOnSuccessSwap,
|
|
194
|
+
} }) }, SwapStep.CONFIRM)] }) }) }));
|
|
198
195
|
};
|
|
199
196
|
exports.SwapView = SwapView;
|
|
200
197
|
exports.default = exports.SwapView;
|
|
@@ -119,6 +119,11 @@ function SwapProvider(_a) {
|
|
|
119
119
|
}
|
|
120
120
|
});
|
|
121
121
|
}); }, [isInitPasscode, isLoadingSwapToken]);
|
|
122
|
+
(0, react_1.useEffect)(function () {
|
|
123
|
+
if (!fromTokens && isInitPasscode) {
|
|
124
|
+
updateSwapTokens();
|
|
125
|
+
}
|
|
126
|
+
}, [fromTokens, updateSwapTokens, isInitPasscode]);
|
|
122
127
|
return ((0, jsx_runtime_1.jsx)(exports.SwapContext.Provider, { value: {
|
|
123
128
|
isLoadingSwapToken: isLoadingSwapToken,
|
|
124
129
|
fromTokens: fromTokens,
|
|
@@ -160,6 +160,7 @@ function WalletDataProviderNoImport(_a) {
|
|
|
160
160
|
switch (_a.label) {
|
|
161
161
|
case 0:
|
|
162
162
|
_a.trys.push([0, 2, , 3]);
|
|
163
|
+
console.warn("🚀 ~ WalletDataProviderNoImport ~ isTokensLoading:", isTokensLoading);
|
|
163
164
|
if (isTokensLoading)
|
|
164
165
|
return [2 /*return*/];
|
|
165
166
|
setIsTokensLoading(true);
|
|
@@ -13,7 +13,7 @@ var useBalanceStore = (0, zustand_1.create)()((0, middleware_1.persist)(function
|
|
|
13
13
|
setAnalytic: function (analytic) { return set({ analytic: analytic }); },
|
|
14
14
|
tokens: undefined,
|
|
15
15
|
setTokens: function (tokens) {
|
|
16
|
-
var totalBalanceInUSD = tokens === null || tokens === void 0 ? void 0 : tokens.reduce(function (acc, token) { return acc + Number(token.
|
|
16
|
+
var totalBalanceInUSD = tokens === null || tokens === void 0 ? void 0 : tokens.reduce(function (acc, token) { return acc + Number(token.current_value) * Number(token.usd_rate); }, 0);
|
|
17
17
|
set({ tokens: tokens, totalBalanceInUSD: totalBalanceInUSD });
|
|
18
18
|
},
|
|
19
19
|
totalBalanceInUSD: undefined,
|