tek-wallet 0.0.64 → 0.0.66

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

@@ -20,6 +20,7 @@ var StatusDisplay_1 = require("../../../components/ui/StatusDisplay");
 var StatusDisplay_2 = __importDefault(require("../../../components/ui/StatusDisplay"));
 var theme_1 = __importDefault(require("../../../theme/mui/theme"));
 var material_1 = require("@mui/material");
+var getImage_1 = __importDefault(require("../../../utils/getImage"));
 var ChildPageLayout = (0, react_1.forwardRef)(function (props, ref) {
     var header = props.header, footer = props.footer, fullScreen = props.fullScreen, children = props.children, sx = props.sx;
     var _a = (0, react_1.useState)(StatusDisplay_1.StatusDisplayType.Normal), status = _a[0], setStatus = _a[1];
@@ -42,18 +43,20 @@ var ChildPageLayout = (0, react_1.forwardRef)(function (props, ref) {
             },
         };
     });
-    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: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ position: "relative", backgroundImage: "url(".concat((0, getImage_1.default)("main_bg", "jpg"), ")"), backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat", height: "100dvh", width: "100vw" }, sx), children: [header && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     height: "3.125rem",
                     width: "100%",
                     position: "absolute",
                     top: 0,
                     left: 0,
                     zIndex: 50,
-                }, children: header })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ height: "100%", width: "100%", overflowX: "hidden", overflowY: "auto" }, (header && !fullScreen
-                    ? {
-                        paddingTop: "3.125rem",
-                    }
-                    : {})), children: children }), footer && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                }, children: header })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    height: "100%",
+                    width: "100%",
+                    overflowX: "hidden",
+                    overflowY: "auto",
+                    paddingTop: header && !fullScreen ? "3.125rem" : 0,
+                }, children: children }), footer && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     height: "3rem",
                     width: "100%",
                     position: "absolute",

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

@@ -5,8 +5,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var system_1 = require("@mui/system");
 var StyledDefaultPageLayout = (0, system_1.styled)("div")(function () { return ({
     padding: "1rem",
-    minHeight: "100dvh",
-    minWidth: "100vw",
+    minHeight: "100%",
+    width: "100%",
 }); });
 var DefaultPageLayout = function (props) {
     return ((0, jsx_runtime_1.jsx)(StyledDefaultPageLayout, { sx: props.sx, children: props.children }));

package/dist/components/ui/SwiperControlled/index.js

@@ -60,8 +60,6 @@ var SwiperControlled = (0, react_2.forwardRef)(function (props, ref) {
     };
     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: {
                     width: "100%",
-                    border: "2px blue solid",
-                    maxWidth: "100vw",
                 }, allowTouchMove: !props.disableSwipe, children: props.children }))] }));
 });
 SwiperControlled.displayName = "SwiperControlled";

package/dist/components/views/AuthView/index.js

@@ -57,16 +57,10 @@ var DrawerComponent_1 = __importStar(require("../../../components/ui/DrawerCompo
 var CreateWalletView_1 = __importDefault(require("../CreateWalletView"));
 var react_1 = require("react");
 var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
-var TheBackground_1 = __importDefault(require("../../ui/TheBackground"));
 var ImportWalletView_1 = __importDefault(require("../ImportWalletView"));
-var system_1 = require("@mui/system");
-var InfoGroup = (0, system_1.styled)(system_1.Box)(function () { return ({
-    display: "flex",
-    flexDirection: "column",
-    gap: "0.75rem",
-    marginTop: "auto",
-    border: "2px red solid",
-}); });
+var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
+var material_1 = require("@mui/material");
+var PageHeader_1 = __importDefault(require("../../ui/PageHeader"));
 var AuthView = function (props) {
     var createWalletDrawerRef = (0, react_1.useRef)(null);
     var importWalletDrawerRef = (0, react_1.useRef)(null);
@@ -78,14 +72,20 @@ var AuthView = function (props) {
         var _a;
         (_a = importWalletDrawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
     };
-    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: {
+    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Connect Wallet" }), 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: {
                         width: "80%",
                         aspectRatio: "1",
                         position: "fixed",
                         top: "50%",
                         left: "50%",
                         transform: "translate(-50%, -50%)",
-                    } }), (0, jsx_runtime_1.jsxs)(InfoGroup, { children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { sx: {
+                    } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "1rem",
+                        border: "2px blue solid",
+                        marginTop: "auto",
+                    }, children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { sx: {
                                 width: "100%",
                                 border: "2px red solid",
                             }, 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: {

package/dist/components/views/CreateWalletView/index.js

@@ -89,7 +89,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var DefaultPageLayout_1 = __importDefault(require("../../../components/layouts/DefaultPageLayout"));
 var SwiperControlled_1 = __importDefault(require("../../../components/ui/SwiperControlled"));
 var react_1 = require("swiper/react");
-var TheBackground_1 = __importDefault(require("../../../components/ui/TheBackground"));
 var ChildPageLayout_1 = __importDefault(require("../../../components/layouts/ChildPageLayout"));
 var PageHeader_1 = __importDefault(require("../../../components/ui/PageHeader"));
 var OTP_1 = __importStar(require("../../../components/ui/OTP"));
@@ -197,37 +196,37 @@ var ImportWalletView = function (props) {
             return [2 /*return*/];
         });
     }); };
-    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: {
-                                    display: "flex",
-                                    flexDirection: "column",
-                                    justifyContent: "center",
-                                    height: "100%",
-                                    gap: "1rem",
-                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                            color: "text.white",
-                                            fontWeight: "600",
-                                            fontSize: "16px",
-                                        }, children: "Create Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: otp, onChange: handleOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                            color: "text.white",
-                                            fontWeight: "400",
-                                            fontSize: "14px",
-                                            textAlign: "center",
-                                        }, children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus, eos! Dolore quae vero in ducimus doloribus" })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                                    display: "flex",
-                                    flexDirection: "column",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    height: "100%",
-                                    gap: "1rem",
-                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                            color: "text.white",
-                                            fontWeight: "600",
-                                            fontSize: "16px",
-                                        }, children: "Confirm Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: confirmOtp, onChange: handleConfirmOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                            color: "text.white",
-                                            fontWeight: "400",
-                                            fontSize: "14px",
-                                            textAlign: "center",
-                                        }, children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus, eos! Dolore quae vero in ducimus doloribus" })] }) })] }) }) }) }));
+    return ((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" }, 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: {
+                                display: "flex",
+                                flexDirection: "column",
+                                justifyContent: "center",
+                                height: "100%",
+                                gap: "1rem",
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                        color: "text.white",
+                                        fontWeight: "600",
+                                        fontSize: "16px",
+                                    }, children: "Create Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: otp, onChange: handleOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                        color: "text.white",
+                                        fontWeight: "400",
+                                        fontSize: "14px",
+                                        textAlign: "center",
+                                    }, children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus, eos! Dolore quae vero in ducimus doloribus" })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                height: "100%",
+                                gap: "1rem",
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                        color: "text.white",
+                                        fontWeight: "600",
+                                        fontSize: "16px",
+                                    }, children: "Confirm Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: confirmOtp, onChange: handleConfirmOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                        color: "text.white",
+                                        fontWeight: "400",
+                                        fontSize: "14px",
+                                        textAlign: "center",
+                                    }, children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus, eos! Dolore quae vero in ducimus doloribus" })] }) })] }) }) }));
 };
 exports.default = ImportWalletView;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tek-wallet",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "description": "A custom React provider with TypeScript support",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",