tek-wallet 0.0.60 → 0.0.62
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/layouts/ChildPageLayout/index.js +28 -38
- package/dist/components/ui/DrawerComponent/index.js +1 -5
- package/dist/components/ui/SwiperControlled/index.js +4 -1
- package/dist/components/ui/TheBackground/index.js +13 -10
- package/dist/components/views/AuthView/index.js +7 -3
- package/dist/components/views/CreateWalletView/index.js +1 -4
- package/package.json +1 -1
|
@@ -18,44 +18,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
18
18
|
var react_1 = require("react");
|
|
19
19
|
var StatusDisplay_1 = require("../../../components/ui/StatusDisplay");
|
|
20
20
|
var StatusDisplay_2 = __importDefault(require("../../../components/ui/StatusDisplay"));
|
|
21
|
-
var system_1 = require("@mui/system");
|
|
22
21
|
var theme_1 = __importDefault(require("../../../theme/mui/theme"));
|
|
23
|
-
var
|
|
24
|
-
height: "100%",
|
|
25
|
-
width: "100%",
|
|
26
|
-
position: "relative",
|
|
27
|
-
overflowY: "auto",
|
|
28
|
-
}); });
|
|
29
|
-
var StyledHeader = (0, system_1.styled)("div")(function () { return ({
|
|
30
|
-
height: "3.125rem",
|
|
31
|
-
width: "100%",
|
|
32
|
-
position: "absolute",
|
|
33
|
-
top: 0,
|
|
34
|
-
left: 0,
|
|
35
|
-
zIndex: 50,
|
|
36
|
-
}); });
|
|
37
|
-
var StyledContent = (0, system_1.styled)("div")(function (props) { return (__assign({ height: "100%", width: "100%", overflowX: "hidden", overflowY: "auto" }, (props.hasHeader && !props.fullScreen
|
|
38
|
-
? {
|
|
39
|
-
paddingTop: "3.125rem",
|
|
40
|
-
}
|
|
41
|
-
: {}))); });
|
|
42
|
-
var StyledFooter = (0, system_1.styled)("div")(function () { return ({
|
|
43
|
-
height: "3rem",
|
|
44
|
-
width: "100%",
|
|
45
|
-
position: "absolute",
|
|
46
|
-
bottom: 0,
|
|
47
|
-
left: 0,
|
|
48
|
-
zIndex: 50,
|
|
49
|
-
}); });
|
|
50
|
-
var StyledStatusOverlay = (0, system_1.styled)("div")(function () { return ({
|
|
51
|
-
position: "absolute",
|
|
52
|
-
inset: 0,
|
|
53
|
-
display: "flex",
|
|
54
|
-
alignItems: "center",
|
|
55
|
-
justifyContent: "center",
|
|
56
|
-
backgroundColor: "".concat(theme_1.default.palette.backgroundBlack24.main),
|
|
57
|
-
zIndex: 50,
|
|
58
|
-
}); });
|
|
22
|
+
var material_1 = require("@mui/material");
|
|
59
23
|
var ChildPageLayout = (0, react_1.forwardRef)(function (props, ref) {
|
|
60
24
|
var header = props.header, footer = props.footer, fullScreen = props.fullScreen, children = props.children, sx = props.sx;
|
|
61
25
|
var _a = (0, react_1.useState)(StatusDisplay_1.StatusDisplayType.Normal), status = _a[0], setStatus = _a[1];
|
|
@@ -78,7 +42,33 @@ var ChildPageLayout = (0, react_1.forwardRef)(function (props, ref) {
|
|
|
78
42
|
},
|
|
79
43
|
};
|
|
80
44
|
});
|
|
81
|
-
return ((0, jsx_runtime_1.jsxs)(
|
|
45
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ height: "100%", width: "100%", position: "relative", overflowY: "auto" }, sx), children: [header && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
|
|
46
|
+
height: "3.125rem",
|
|
47
|
+
width: "100%",
|
|
48
|
+
position: "absolute",
|
|
49
|
+
top: 0,
|
|
50
|
+
left: 0,
|
|
51
|
+
zIndex: 50,
|
|
52
|
+
}, children: header })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ height: "100%", width: "100%", overflowX: "hidden", overflowY: "auto" }, (header && !fullScreen
|
|
53
|
+
? {
|
|
54
|
+
paddingTop: "3.125rem",
|
|
55
|
+
}
|
|
56
|
+
: {})), children: children }), footer && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
|
|
57
|
+
height: "3rem",
|
|
58
|
+
width: "100%",
|
|
59
|
+
position: "absolute",
|
|
60
|
+
bottom: 0,
|
|
61
|
+
left: 0,
|
|
62
|
+
zIndex: 50,
|
|
63
|
+
}, children: footer })), status !== StatusDisplay_1.StatusDisplayType.Normal && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
|
|
64
|
+
position: "absolute",
|
|
65
|
+
inset: 0,
|
|
66
|
+
display: "flex",
|
|
67
|
+
alignItems: "center",
|
|
68
|
+
justifyContent: "center",
|
|
69
|
+
backgroundColor: "".concat(theme_1.default.palette.backgroundBlack24.main),
|
|
70
|
+
zIndex: 50,
|
|
71
|
+
}, children: (0, jsx_runtime_1.jsx)(StatusDisplay_2.default, { status: status }) }))] }));
|
|
82
72
|
});
|
|
83
73
|
ChildPageLayout.displayName = "ChildPageLayout";
|
|
84
74
|
exports.default = ChildPageLayout;
|
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.DRAWER_DIRECTION = void 0;
|
|
7
4
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
5
|
var system_1 = require("@mui/system");
|
|
9
6
|
var material_1 = require("@mui/material");
|
|
10
7
|
var react_1 = require("react");
|
|
11
|
-
var cn_1 = __importDefault(require("../../../utils/cn"));
|
|
12
8
|
var DRAWER_DIRECTION;
|
|
13
9
|
(function (DRAWER_DIRECTION) {
|
|
14
10
|
DRAWER_DIRECTION["LEFT"] = "left";
|
|
@@ -42,7 +38,7 @@ var DrawerComponent = (0, react_1.forwardRef)(function (props, ref) {
|
|
|
42
38
|
open: handleOpen,
|
|
43
39
|
close: handleClose,
|
|
44
40
|
}); });
|
|
45
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(
|
|
41
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: props.sx, onClick: toggle, children: props.trigger }), (0, jsx_runtime_1.jsx)(CustomDrawer, { onOpen: function () { }, anchor: props.direction || "bottom", open: isShowDrawerComponent, onClose: handleClose, children: props.children })] }));
|
|
46
42
|
});
|
|
47
43
|
DrawerComponent.displayName = "DrawerComponent";
|
|
48
44
|
exports.default = DrawerComponent;
|
|
@@ -58,7 +58,10 @@ var SwiperControlled = (0, react_2.forwardRef)(function (props, ref) {
|
|
|
58
58
|
setActiveTab(value);
|
|
59
59
|
(_b = (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(value);
|
|
60
60
|
};
|
|
61
|
-
return ((0, jsx_runtime_1.jsxs)(
|
|
61
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: "100%" }, children: [props.tabs && ((0, jsx_runtime_1.jsxs)(material_1.Tabs, { className: (0, cn_1.default)(props.tabsClassName), value: activeTab, onChange: handleTabChange, children: __spreadArray([], props.tabs, true) })), (0, jsx_runtime_1.jsx)(react_1.Swiper, __assign({}, props.swiperProps, { onSlideChange: handleSlideChange, ref: swiperRef, initialSlide: activeTab, style: {
|
|
62
|
+
width: "100%",
|
|
63
|
+
border: "2px blue solid",
|
|
64
|
+
}, allowTouchMove: !props.disableSwipe, children: props.children }))] }));
|
|
62
65
|
});
|
|
63
66
|
SwiperControlled.displayName = "SwiperControlled";
|
|
64
67
|
exports.default = SwiperControlled;
|
|
@@ -1,20 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
15
|
};
|
|
5
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
17
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var material_1 = require("@mui/material");
|
|
7
19
|
var getImage_1 = __importDefault(require("../../../utils/getImage"));
|
|
8
|
-
var system_1 = require("@mui/system");
|
|
9
|
-
var StyledTheBackground = (0, system_1.styled)("div")(function () { return ({
|
|
10
|
-
backgroundImage: "url(".concat((0, getImage_1.default)("main_bg", "jpg"), ")"),
|
|
11
|
-
backgroundSize: "cover",
|
|
12
|
-
backgroundPosition: "center",
|
|
13
|
-
backgroundRepeat: "no-repeat",
|
|
14
|
-
}); });
|
|
15
20
|
var TheBackground = function (props) {
|
|
16
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
17
|
-
backgroundImage: "url(".concat((0, getImage_1.default)("main_bg", "jpg"), ")"),
|
|
18
|
-
}, children: props.children }));
|
|
21
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ backgroundImage: "url(".concat((0, getImage_1.default)("main_bg", "jpg"), ")"), backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" }, props.sx), children: props.children }));
|
|
19
22
|
};
|
|
20
23
|
exports.default = TheBackground;
|
|
@@ -65,6 +65,7 @@ var InfoGroup = (0, system_1.styled)(system_1.Box)(function () { return ({
|
|
|
65
65
|
flexDirection: "column",
|
|
66
66
|
gap: "0.75rem",
|
|
67
67
|
marginTop: "auto",
|
|
68
|
+
border: "2px red solid",
|
|
68
69
|
}); });
|
|
69
70
|
var AuthView = function (props) {
|
|
70
71
|
var createWalletDrawerRef = (0, react_1.useRef)(null);
|
|
@@ -77,14 +78,17 @@ var AuthView = function (props) {
|
|
|
77
78
|
var _a;
|
|
78
79
|
(_a = importWalletDrawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
|
|
79
80
|
};
|
|
80
|
-
return ((0, jsx_runtime_1.jsx)(TheBackground_1.default, { children: (0, jsx_runtime_1.jsxs)(DefaultPageLayout_1.default, { sx: __assign({ display: "flex", flexDirection: "column", gap: "1rem", paddingBottom: "
|
|
81
|
+
return ((0, jsx_runtime_1.jsx)(TheBackground_1.default, { children: (0, jsx_runtime_1.jsxs)(DefaultPageLayout_1.default, { sx: __assign({ display: "flex", flexDirection: "column", gap: "1rem", paddingBottom: "2.25rem" }, props.sx), children: [(0, jsx_runtime_1.jsx)(Image_1.default, { src: (0, getIcon_1.default)("eth"), sx: {
|
|
81
82
|
width: "80%",
|
|
82
|
-
aspectRatio: "1
|
|
83
|
+
aspectRatio: "1",
|
|
83
84
|
position: "fixed",
|
|
84
85
|
top: "50%",
|
|
85
86
|
left: "50%",
|
|
86
87
|
transform: "translate(-50%, -50%)",
|
|
87
|
-
} }), (0, jsx_runtime_1.jsxs)(InfoGroup, { children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, {
|
|
88
|
+
} }), (0, jsx_runtime_1.jsxs)(InfoGroup, { children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { sx: {
|
|
89
|
+
width: "100%",
|
|
90
|
+
border: "2px red solid",
|
|
91
|
+
}, ref: createWalletDrawerRef, trigger: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100%" }, children: "Create a new wallet" }), direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(CreateWalletView_1.default, { onBack: onBackCreateWallet }) }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: importWalletDrawerRef, trigger: (0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { sx: { width: "100%" }, children: "I have a wallet" }), direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(ImportWalletView_1.default, { onBack: onBackImportWallet }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
|
|
88
92
|
textAlign: "center",
|
|
89
93
|
fontSize: "0.75rem",
|
|
90
94
|
color: "text.white",
|
|
@@ -197,10 +197,7 @@ var ImportWalletView = function (props) {
|
|
|
197
197
|
return [2 /*return*/];
|
|
198
198
|
});
|
|
199
199
|
}); };
|
|
200
|
-
return ((0, jsx_runtime_1.jsx)(TheBackground_1.default, { sx: {
|
|
201
|
-
height: "100dvh",
|
|
202
|
-
width: "100vw",
|
|
203
|
-
}, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { ref: childPageLayoutRef, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { overrideBack: handleBack, title: "Passcode" }), children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: __assign({ display: "flex", flexDirection: "column", gap: "1rem", height: "100%" }, props.sx), children: (0, jsx_runtime_1.jsxs)(SwiperControlled_1.default, { ref: swiperControlledRef, disableSwipe: true, children: [(0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
|
|
200
|
+
return ((0, jsx_runtime_1.jsx)(TheBackground_1.default, { children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { ref: childPageLayoutRef, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { overrideBack: handleBack, title: "Passcode" }), children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: __assign({ display: "flex", flexDirection: "column", gap: "1rem", height: "100%" }, props.sx), children: (0, jsx_runtime_1.jsxs)(SwiperControlled_1.default, { ref: swiperControlledRef, disableSwipe: true, children: [(0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
|
|
204
201
|
display: "flex",
|
|
205
202
|
flexDirection: "column",
|
|
206
203
|
justifyContent: "center",
|