tek-wallet 0.0.117 → 0.0.119

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

@@ -68,7 +68,8 @@ var ChildPageLayout = (0, react_1.forwardRef)(function (props, ref) {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    backgroundColor: "blackBackground.24",
+                    backgroundColor: "blackBackground.16",
+                    backdropFilter: "blur(4px)",
                     zIndex: 50,
                 }, children: (0, jsx_runtime_1.jsx)(StatusDisplay_2.default, { status: status }) }))] }));
 });

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

@@ -1,14 +1,24 @@
 "use strict";
 "use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 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: "100%",
-    width: "100%",
-}); });
+var theme_1 = __importDefault(require("../../../theme/mui/theme"));
+var material_1 = require("@mui/material");
 var DefaultPageLayout = function (props) {
-    return ((0, jsx_runtime_1.jsx)(StyledDefaultPageLayout, { sx: props.sx, children: props.children }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ padding: theme_1.default.palette.padding.pageX, paddingTop: theme_1.default.palette.padding.pageTop, paddingBottom: theme_1.default.palette.padding.pageBottom, minHeight: "100%", width: "100%" }, props.sx), children: props.children }));
 };
 exports.default = DefaultPageLayout;

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

@@ -30,7 +30,7 @@ var BackHeader = function (props) {
         }
         router.back();
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ display: "flex", alignItems: "center", gap: "1rem", height: "100%", backgroundColor: "ui.bg.white" }, props.sx), children: [!hideBack && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ display: "flex", alignItems: "center", gap: "1rem", height: "100%" }, props.sx), children: [!hideBack && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     display: "flex",
                     alignItems: "center",
                     gap: "0.5rem",

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

@@ -1,14 +1,26 @@
 "use strict";
 "use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var cn_1 = __importDefault(require("../../../utils/cn"));
+var styles_1 = require("../../../theme/mui/styles");
+var theme_1 = __importDefault(require("../../../theme/mui/theme"));
 var BackHeader_1 = __importDefault(require("../BackHeader"));
 var Text_1 = __importDefault(require("../Text"));
 var PageHeader = function (props) {
-    return ((0, jsx_runtime_1.jsxs)(BackHeader_1.default, { overrideBack: props.overrideBack, className: (0, cn_1.default)("flex items-center h-full bg-ui-bg-white relative px-4", props.className), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { className: "text-white absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 text-base font-500", children: props.title }), props.children] }));
+    return ((0, jsx_runtime_1.jsx)(BackHeader_1.default, { overrideBack: props.overrideBack, sx: __assign({ display: "flex", alignItems: "center", height: "100%", position: "relative", paddingLeft: theme_1.default.palette.padding.pageX, paddingRight: theme_1.default.palette.padding.pageX }, props.sx), children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, styles_1.headerTitle), { position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)" }), children: props.title }) }));
 };
 exports.default = PageHeader;

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

@@ -61,6 +61,7 @@ var ImportWalletView_1 = __importDefault(require("../ImportWalletView"));
 var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
 var material_1 = require("@mui/material");
 var PageHeader_1 = __importDefault(require("../../ui/PageHeader"));
+var styles_1 = require("../../../theme/mui/styles");
 var AuthView = function (props) {
     var createWalletDrawerRef = (0, react_1.useRef)(null);
     var importWalletDrawerRef = (0, react_1.useRef)(null);
@@ -72,7 +73,7 @@ var AuthView = function (props) {
         var _a;
         (_a = importWalletDrawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
     };
-    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Connect Wallet", overrideBack: props.onBack }), 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", overrideBack: props.onBack }), children: (0, jsx_runtime_1.jsxs)(DefaultPageLayout_1.default, { sx: __assign({ display: "flex", flexDirection: "column", gap: "1rem" }, props.sx), children: [(0, jsx_runtime_1.jsx)(Image_1.default, { src: (0, getIcon_1.default)("eth"), sx: {
                         width: "80%",
                         aspectRatio: "1",
                         position: "fixed",
@@ -83,15 +84,9 @@ var AuthView = function (props) {
                         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: {
-                                textAlign: "center",
-                                fontSize: "0.75rem",
-                                color: "text.white",
-                            }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, eos odio. Accusamus ea praesentium unde deserunt delectus, nihil corporis, mollitia ipsum impedit cupiditate eveniet vero esse facilis, incidunt in sequi?" })] })] }) }));
+                            }, 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: __assign({}, styles_1.sessionDescription), children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, eos odio. Accusamus ea praesentium unde deserunt delectus, nihil corporis, mollitia ipsum impedit cupiditate eveniet vero esse facilis, incidunt in sequi?" })] })] }) }));
 };
 exports.default = AuthView;

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

@@ -60,6 +60,7 @@ var react_2 = require("react");
 var Text_1 = __importDefault(require("../../../components/ui/Text"));
 var useWalletData_1 = __importDefault(require("../../../hooks/useWalletData"));
 var material_1 = require("@mui/material");
+var styles_1 = require("../../../theme/mui/styles");
 var CreateWalletViewStep;
 (function (CreateWalletViewStep) {
     CreateWalletViewStep[CreateWalletViewStep["CREATE_PASSCODE"] = 0] = "CREATE_PASSCODE";
@@ -142,31 +143,13 @@ var CreateWalletView = function (props) {
                                 alignItems: "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: {
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, styles_1.sessionTitle), 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: __assign({}, styles_1.sessionDescription), 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" })] }) })] }) }) }));
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, styles_1.sessionTitle), 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: __assign({}, styles_1.sessionDescription), children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus, eos! Dolore quae vero in ducimus doloribus" })] }) })] }) }) }));
 };
 exports.default = CreateWalletView;

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

@@ -63,6 +63,8 @@ var material_1 = require("@mui/material");
 var Button_1 = __importDefault(require("../../ui/Button"));
 var Icon_1 = __importDefault(require("../../ui/Icon"));
 var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
+var styles_1 = require("../../../theme/mui/styles");
+var theme_1 = __importDefault(require("../../../theme/mui/theme"));
 var GetSeedPhraseWalletViewStep;
 (function (GetSeedPhraseWalletViewStep) {
     GetSeedPhraseWalletViewStep[GetSeedPhraseWalletViewStep["ENTER_PASSCODE"] = 0] = "ENTER_PASSCODE";
@@ -150,16 +152,7 @@ var GetSeedPhraseWalletView = function (props) {
                                 alignItems: "center",
                                 gap: "1rem",
                                 height: "100%",
-                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                        color: "text.white",
-                                        fontWeight: "600",
-                                        fontSize: "16px",
-                                    }, children: "Enter 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: "Enter your passcode to get your wallet seed phrase" })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, styles_1.sessionTitle), children: "Enter 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: __assign({}, styles_1.sessionDescription), children: "Enter your passcode to get your wallet seed phrase" })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                 minHeight: "100%",
                                 display: "flex",
                                 flexDirection: "column",
@@ -170,16 +163,16 @@ var GetSeedPhraseWalletView = function (props) {
                                         gap: "1rem",
                                         height: "fit-content",
                                     }, children: seedPhrase === null || seedPhrase === void 0 ? void 0 : seedPhrase.split(" ").map(function (word, index) { return ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
-                                            color: "text.white",
+                                            color: theme_1.default.palette.whiteText.main,
                                             padding: "0.5rem 0.75rem",
-                                            backgroundColor: "rgba(255, 255, 255, 0.1)",
+                                            backgroundColor: theme_1.default.palette.blackBackground._16,
                                             borderRadius: "0.5rem",
-                                            fontSize: "14px",
-                                            fontWeight: "400",
+                                            fontSize: theme_1.default.palette.fontSize._14,
+                                            fontWeight: theme_1.default.palette.fontWeight._400,
                                             textAlign: "center",
                                             width: "100%",
-                                            border: "1px solid rgba(255, 255, 255, 0.2)",
-                                        }, children: [index + 1, ". ", isShowSeedPhrase ? word : "********"] }, index)); }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: { marginTop: "auto" }, children: "Please do not store your seed phrase digitally (e.g., text files on your computer, email...). Write it down and keep it in a secure, confidential location that is resistant to adverse conditions like moisture, fire, or other hazards for safe storage." }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                            border: "1px solid blackBackground.24",
+                                        }, children: [index + 1, ". ", isShowSeedPhrase ? word : "********"] }, index)); }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({ marginTop: "auto" }, styles_1.noteContent), children: "Please do not store your seed phrase digitally (e.g., text files on your computer, email...). Write it down and keep it in a secure, confidential location that is resistant to adverse conditions like moisture, fire, or other hazards for safe storage." }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                         display: "flex",
                                         alignItems: "stretch",
                                         gap: "1rem",

package/dist/theme/mui/styles.d.ts

@@ -0,0 +1,21 @@
+export declare const sessionTitle: {
+    color: string;
+    fontWeight: any;
+    fontSize: any;
+};
+export declare const sessionDescription: {
+    color: string;
+    fontWeight: any;
+    fontSize: any;
+    textAlign: string;
+};
+export declare const headerTitle: {
+    color: string;
+    fontWeight: any;
+    fontSize: any;
+};
+export declare const noteContent: {
+    color: string;
+    fontWeight: any;
+    fontSize: any;
+};

package/dist/theme/mui/styles.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noteContent = exports.headerTitle = exports.sessionDescription = exports.sessionTitle = void 0;
+var theme_1 = __importDefault(require("./theme"));
+exports.sessionTitle = {
+    color: "whiteText.main",
+    fontWeight: theme_1.default.palette.fontWeight._600,
+    fontSize: theme_1.default.palette.fontSize._16,
+};
+exports.sessionDescription = {
+    color: "whiteText._80",
+    fontWeight: theme_1.default.palette.fontWeight._400,
+    fontSize: theme_1.default.palette.fontSize._14,
+    textAlign: "center",
+};
+exports.headerTitle = {
+    color: "whiteText.main",
+    fontWeight: theme_1.default.palette.fontWeight._600,
+    fontSize: theme_1.default.palette.fontSize._16,
+};
+exports.noteContent = {
+    color: "whiteText._80",
+    fontWeight: theme_1.default.palette.fontWeight._400,
+    fontSize: theme_1.default.palette.fontSize._12,
+};

package/dist/theme/mui/theme.js

@@ -11,24 +11,68 @@ var theme = (0, styles_1.createTheme)({
         },
         whiteBackground: {
             main: "#ffffff",
-            16: "rgba(255, 255, 255, 0.16)",
-            24: "rgba(255, 255, 255, 0.24)",
+            _16: "rgba(255, 255, 255, 0.16)",
+            _24: "rgba(255, 255, 255, 0.24)",
         },
         whiteText: {
             main: "#ffffff",
-            16: "rgba(255, 255, 255, 0.16)",
-            24: "rgba(255, 255, 255, 0.24)",
+            _16: "rgba(255, 255, 255, 0.16)",
+            _24: "rgba(255, 255, 255, 0.24)",
+            _80: "rgba(255, 255, 255, 0.8)",
         },
         whiteBorder: {
             main: "#ffffff",
-            16: "rgba(255, 255, 255, 0.16)",
-            24: "rgba(255, 255, 255, 0.24)",
+            _16: "rgba(255, 255, 255, 0.16)",
+            _24: "rgba(255, 255, 255, 0.24)",
         },
         blackBackground: {
             main: "#000000",
-            16: "rgba(0, 0, 0, 0.16)",
-            24: "rgba(0, 0, 0, 0.24)",
+            _16: "rgba(0, 0, 0, 0.16)",
+            _24: "rgba(0, 0, 0, 0.24)",
+        },
+        fontSize: {
+            _10: "0.625rem",
+            _11: "0.6875rem",
+            _12: "0.75rem",
+            _13: "0.8125rem",
+            _14: "0.875rem",
+            _15: "0.9375rem",
+            _16: "1rem",
+            _17: "1.0625rem",
+            _18: "1.125rem",
+            _19: "1.1875rem",
+            _20: "1.25rem",
+            _21: "1.3125rem",
+            _22: "1.375rem",
+            _23: "1.4375rem",
+            _24: "1.5rem",
+            _25: "1.5625rem",
+            _26: "1.625rem",
+            _27: "1.6875rem",
+            _28: "1.75rem",
+            _29: "1.8125rem",
+            _30: "1.875rem",
+        },
+        fontWeight: {
+            _400: "400",
+            _500: "500",
+            _600: "600",
+            _700: "700",
+            _800: "800",
+        },
+        lineHeight: {
+            _100: "100%",
+            _120: "120%",
+            _140: "140%",
+            _160: "160%",
+            _180: "180%",
+        },
+        padding: {
+            pageX: "1rem",
+            pageTop: "1rem",
+            pageBottom: "2rem",
         },
     },
+    spacing: function (factor) { return "".concat(factor * 1, "rem"); },
 });
 exports.default = theme;

package/package.json

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