tek-wallet 0.0.56 → 0.0.58

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

@@ -1,16 +1,63 @@
 "use strict";
+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 clsx_1 = __importDefault(require("clsx"));
 var react_1 = require("react");
 var StatusDisplay_1 = require("../../../components/ui/StatusDisplay");
 var StatusDisplay_2 = __importDefault(require("../../../components/ui/StatusDisplay"));
+var system_1 = require("@mui/system");
+var theme_1 = __importDefault(require("../../../theme/mui/theme"));
+var StyledChildPageLayout = (0, system_1.styled)("div")(function () { return ({
+    height: "100%",
+    width: "100%",
+    position: "relative",
+    overflowY: "auto",
+}); });
+var StyledHeader = (0, system_1.styled)("div")(function () { return ({
+    height: "3.125rem",
+    width: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    zIndex: 50,
+}); });
+var StyledContent = (0, system_1.styled)("div")(function (props) { return (__assign({ height: "100%", width: "100%", overflowX: "hidden", overflowY: "auto" }, (props.hasHeader && !props.fullScreen
+    ? {
+        paddingTop: "3.125rem",
+    }
+    : {}))); });
+var StyledFooter = (0, system_1.styled)("div")(function () { return ({
+    height: "3rem",
+    width: "100%",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    zIndex: 50,
+}); });
+var StyledStatusOverlay = (0, system_1.styled)("div")(function () { return ({
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "".concat(theme_1.default.palette.backgroundBlack24.main),
+    zIndex: 50,
+}); });
 var ChildPageLayout = (0, react_1.forwardRef)(function (props, ref) {
-    var header = props.header, footer = props.footer, fullScreen = props.fullScreen, children = props.children;
+    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];
     (0, react_1.useImperativeHandle)(ref, function () {
         return {
@@ -31,7 +78,7 @@ var ChildPageLayout = (0, react_1.forwardRef)(function (props, ref) {
             },
         };
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.default)("h-full w-full relative", props.className), children: [header && ((0, jsx_runtime_1.jsx)("div", { className: "h-[3.125rem] w-full absolute top-0 left-0 z-50", children: header })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.default)("h-full w-full overflow-x-hidden overflow-y-auto", header && !fullScreen && "pt-[3.125rem]"), children: children }), footer && ((0, jsx_runtime_1.jsx)("div", { className: "h-12 w-full absolute bottom-0 left-0 z-50", children: footer })), status !== StatusDisplay_1.StatusDisplayType.Normal && ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)("absolute inset-0 flex items-center justify-center bg-ui-background-black-24 z-50"), children: (0, jsx_runtime_1.jsx)(StatusDisplay_2.default, { status: status }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(StyledChildPageLayout, { sx: sx, children: [header && (0, jsx_runtime_1.jsx)(StyledHeader, { children: header }), (0, jsx_runtime_1.jsx)(StyledContent, { hasHeader: !!header, fullScreen: fullScreen, children: children }), footer && (0, jsx_runtime_1.jsx)(StyledFooter, { children: footer }), status !== StatusDisplay_1.StatusDisplayType.Normal && ((0, jsx_runtime_1.jsx)(StyledStatusOverlay, { children: (0, jsx_runtime_1.jsx)(StatusDisplay_2.default, { status: status }) }))] }));
 });
 ChildPageLayout.displayName = "ChildPageLayout";
 exports.default = ChildPageLayout;

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

@@ -1,12 +1,13 @@
 "use strict";
 "use client";
-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 system_1 = require("@mui/system");
+var StyledDefaultPageLayout = (0, system_1.styled)("div")(function () { return ({
+    padding: "1rem",
+    minHeight: "100",
+}); });
 var DefaultPageLayout = function (props) {
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.default)("p-4", props.className), children: props.children });
+    return ((0, jsx_runtime_1.jsx)(StyledDefaultPageLayout, { sx: props.sx, children: props.children }));
 };
 exports.default = DefaultPageLayout;

package/dist/components/layouts/PageLayout/index.d.ts

@@ -0,0 +1,15 @@
+import { GeneralProps } from "../../../types/ui";
+interface PageLayoutProps extends GeneralProps {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    fullScreen?: boolean;
+}
+export type PageLayoutRef = {
+    showNormal: () => void;
+    showLoading: () => void;
+    showSuccess: () => void;
+    showError: () => void;
+    showWarning: () => void;
+};
+declare const PageLayout: import("react").ForwardRefExoticComponent<PageLayoutProps & import("react").RefAttributes<PageLayoutRef>>;
+export default PageLayout;

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

@@ -0,0 +1,85 @@
+"use strict";
+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 react_1 = require("react");
+var StatusDisplay_1 = require("../../../components/ui/StatusDisplay");
+var StatusDisplay_2 = __importDefault(require("../../../components/ui/StatusDisplay"));
+var system_1 = require("@mui/system");
+var theme_1 = __importDefault(require("../../../theme/mui/theme"));
+var StyledPageLayout = (0, system_1.styled)("div")(function () { return ({
+    height: "100%",
+    width: "100%",
+    position: "relative",
+}); });
+var StyledHeader = (0, system_1.styled)("div")(function () { return ({
+    height: "3.125rem",
+    width: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    zIndex: 50,
+}); });
+var StyledContent = (0, system_1.styled)("div")(function (_a) {
+    var hasHeader = _a.hasHeader, fullScreen = _a.fullScreen;
+    return (__assign({ height: "100%", width: "100%", overflowX: "hidden", overflowY: "auto" }, (hasHeader &&
+        !fullScreen && {
+        paddingTop: "3.125rem",
+    })));
+});
+var StyledFooter = (0, system_1.styled)("div")(function () { return ({
+    height: "3rem",
+    width: "100%",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    zIndex: 50,
+}); });
+var StyledStatusOverlay = (0, system_1.styled)("div")(function () { return ({
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "".concat(theme_1.default.palette.textWhite.main),
+    zIndex: 50,
+}); });
+var PageLayout = (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];
+    (0, react_1.useImperativeHandle)(ref, function () {
+        return {
+            showNormal: function () {
+                setStatus(StatusDisplay_1.StatusDisplayType.Normal);
+            },
+            showLoading: function () {
+                setStatus(StatusDisplay_1.StatusDisplayType.Loading);
+            },
+            showSuccess: function () {
+                setStatus(StatusDisplay_1.StatusDisplayType.Success);
+            },
+            showError: function () {
+                setStatus(StatusDisplay_1.StatusDisplayType.Error);
+            },
+            showWarning: function () {
+                setStatus(StatusDisplay_1.StatusDisplayType.Warning);
+            },
+        };
+    });
+    return ((0, jsx_runtime_1.jsxs)(StyledPageLayout, { sx: sx, children: [header && (0, jsx_runtime_1.jsx)(StyledHeader, { children: header }), (0, jsx_runtime_1.jsx)(StyledContent, { hasHeader: !!header, fullScreen: fullScreen, children: children }), footer && (0, jsx_runtime_1.jsx)(StyledFooter, { children: footer }), status !== StatusDisplay_1.StatusDisplayType.Normal && ((0, jsx_runtime_1.jsx)(StyledStatusOverlay, { children: (0, jsx_runtime_1.jsx)(StatusDisplay_2.default, { status: status }) }))] }));
+});
+PageLayout.displayName = "PageLayout";
+exports.default = PageLayout;

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

@@ -29,7 +29,6 @@ exports.BUTTON_STATUS = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var cn_1 = __importDefault(require("../../../utils/cn"));
 var material_1 = require("@mui/material");
-var theme_1 = __importDefault(require("../../../theme/mui/theme"));
 var BUTTON_STATUS;
 (function (BUTTON_STATUS) {
     BUTTON_STATUS["LOADING"] = "loading";
@@ -52,8 +51,8 @@ Button.Secondary = function (props) {
     var className = props.className, rest = __rest(props, ["className"]);
     return ((0, jsx_runtime_1.jsx)(Button, __assign({}, rest, { variant: "contained", color: "secondary", className: (0, cn_1.default)("text-16 leading-120 !capitalize font-500 px-4 py-2.5", className), sx: {
             borderRadius: "999px",
-            backgroundColor: "color-mix(in srgb, ".concat(theme_1.default.palette.secondary.main, " 16%, transparent)"),
-            color: theme_1.default.palette.secondary.main,
+            // backgroundColor: `color-mix(in srgb, ${theme.palette.secondary.main} 16%, transparent)`,
+            // color: theme.palette.secondary.main,
         } })));
 };
 Button.Secondary.displayName = "Button.Secondary";

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

@@ -1,13 +1,11 @@
 "use strict";
-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 system_1 = require("@mui/system");
+var StyledImage = (0, system_1.styled)("img")(function () { return ({
+    display: "block",
+}); });
 var Image = function (props) {
-    return (
-    // eslint-disable-next-line @next/next/no-img-element
-    (0, jsx_runtime_1.jsx)("img", { onClick: props.onClick, className: (0, cn_1.default)("block", props.className), src: props.src, alt: props.alt }));
+    return ((0, jsx_runtime_1.jsx)(StyledImage, { onClick: props.onClick, src: props.src, alt: props.alt, sx: props.sx }));
 };
 exports.default = Image;

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

@@ -21,17 +21,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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 react_1 = require("react");
+var system_1 = require("@mui/system");
+var StyledText = (0, system_1.styled)("span")(function () { return ({}); });
 var Text = (0, react_1.forwardRef)(function (_a, ref) {
-    var tag = _a.tag, children = _a.children, className = _a.className, rest = __rest(_a, ["tag", "children", "className"]);
-    var Tag = tag || "span";
-    return ((0, jsx_runtime_1.jsx)(Tag, __assign({ ref: ref, className: (0, cn_1.default)("", className) }, rest, { children: children })));
+    var children = _a.children, sx = _a.sx, rest = __rest(_a, ["children", "sx"]);
+    return ((0, jsx_runtime_1.jsx)(StyledText, __assign({ ref: ref, sx: sx }, rest, { children: children })));
 });
 Text.displayName = "Text";
 exports.default = Text;

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

@@ -4,10 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var cn_1 = __importDefault(require("../../../utils/cn"));
 var getImage_1 = __importDefault(require("../../../utils/getImage"));
+var system_1 = require("@mui/system");
+var StyledTheBackground = (0, system_1.styled)("div")(function () { return ({
+    backgroundImage: "url(".concat((0, getImage_1.default)("main_bg", "jpg"), ")"),
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+}); });
 var TheBackground = function (props) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.default)("bg-cover bg-center bg-no-repeat", props.className), style: {
+    return ((0, jsx_runtime_1.jsx)(StyledTheBackground, { sx: props.sx, style: {
             backgroundImage: "url(".concat((0, getImage_1.default)("main_bg", "jpg"), ")"),
         }, children: props.children }));
 };

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

@@ -1,5 +1,16 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -38,7 +49,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var cn_1 = __importDefault(require("../../../utils/cn"));
 var DefaultPageLayout_1 = __importDefault(require("../../../components/layouts/DefaultPageLayout"));
 var Image_1 = __importDefault(require("../../../components/ui/Image"));
 var Button_1 = __importDefault(require("../../../components/ui/Button"));
@@ -49,6 +59,13 @@ 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",
+}); });
 var AuthView = function (props) {
     var createWalletDrawerRef = (0, react_1.useRef)(null);
     var importWalletDrawerRef = (0, react_1.useRef)(null);
@@ -60,6 +77,17 @@ 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, { className: (0, cn_1.default)("flex flex-col gap-4 pb-bottom-page min-h-[100dvh]", props.className), children: [(0, jsx_runtime_1.jsx)(Image_1.default, { src: (0, getIcon_1.default)("eth"), className: "w-[80%] aspect-square fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }), (0, jsx_runtime_1.jsxs)("div", { className: "info_group flex flex-col gap-3 mt-auto", children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: createWalletDrawerRef, trigger: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { className: "!w-full", 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, { className: "!w-full", 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, { className: "text-center text-12 text-ui-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?" })] })] }) }));
+    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: "var(--bottom-page)", minHeight: "100dvh" }, props.sx), children: [(0, jsx_runtime_1.jsx)(Image_1.default, { src: (0, getIcon_1.default)("eth"), sx: {
+                        width: "80%",
+                        aspectRatio: "1/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, { 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?" })] })] }) }));
 };
 exports.default = AuthView;

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

@@ -1,5 +1,16 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -75,7 +86,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImportWalletViewStep = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var cn_1 = __importDefault(require("../../../utils/cn"));
 var DefaultPageLayout_1 = __importDefault(require("../../../components/layouts/DefaultPageLayout"));
 var SwiperControlled_1 = __importDefault(require("../../../components/ui/SwiperControlled"));
 var react_1 = require("swiper/react");
@@ -88,6 +98,7 @@ var Text_1 = __importDefault(require("../../../components/ui/Text"));
 var createWalletService_1 = __importDefault(require("../../../services/axios/create-wallet-service/createWalletService"));
 var importWalletIntenalService_1 = __importDefault(require("../../../services/axios/import-wallet-service/importWalletIntenalService"));
 var useWalletData_1 = __importDefault(require("../../../hooks/useWalletData"));
+var material_1 = require("@mui/material");
 var ImportWalletViewStep;
 (function (ImportWalletViewStep) {
     ImportWalletViewStep[ImportWalletViewStep["CREATE_PASSCODE"] = 0] = "CREATE_PASSCODE";
@@ -186,6 +197,34 @@ var ImportWalletView = function (props) {
             return [2 /*return*/];
         });
     }); };
-    return ((0, jsx_runtime_1.jsx)(TheBackground_1.default, { className: "h-[100dvh] w-[100vw]", 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, { className: (0, cn_1.default)("flex flex-col gap-4 size-full", props.className), children: (0, jsx_runtime_1.jsxs)(SwiperControlled_1.default, { ref: swiperControlledRef, className: "size-full", disableSwipe: true, children: [(0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center h-full gap-6", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { className: "text-ui-text-white font-600 text-16", 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, { className: "text-ui-text-white font-400 text-14 text-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)("div", { className: "flex flex-col items-center justify-center h-full gap-6", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { className: "text-ui-text-white font-600 text-16", 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, { className: "text-ui-text-white font-400 text-14 text-center", children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus, eos! Dolore quae vero in ducimus doloribus" })] }) })] }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(TheBackground_1.default, { sx: {
+            height: "100%",
+            width: "100%",
+        }, 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)("div", { className: "flex flex-col items-center justify-center h-full gap-6", 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",
+                                    itemsCenter: "center",
+                                    justifyContent: "center",
+                                    hFull: "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/dist/components/views/ImportWalletView/index.js

@@ -42,7 +42,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CreateWalletViewStep = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var cn_1 = __importDefault(require("../../../utils/cn"));
 var DefaultPageLayout_1 = __importDefault(require("../../../components/layouts/DefaultPageLayout"));
 var SwiperControlled_1 = __importDefault(require("../../../components/ui/SwiperControlled"));
 var react_1 = require("swiper/react");
@@ -53,6 +52,7 @@ var react_2 = require("react");
 var Text_1 = __importDefault(require("../../../components/ui/Text"));
 var Button_1 = __importDefault(require("../../ui/Button"));
 var importWalletIntenalService_1 = __importDefault(require("../../../services/axios/import-wallet-service/importWalletIntenalService"));
+var material_1 = require("@mui/material");
 var CreateWalletViewStep;
 (function (CreateWalletViewStep) {
     CreateWalletViewStep[CreateWalletViewStep["CREATE_PASSCODE"] = 0] = "CREATE_PASSCODE";
@@ -96,6 +96,36 @@ var CreateWalletView = function (props) {
             }
         });
     }); };
-    return ((0, jsx_runtime_1.jsx)(TheBackground_1.default, { className: "h-[100dvh] w-[100vw]", children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { ref: childPageLayoutRef, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { overrideBack: props.onBack, title: "Import wallet" }), children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { className: (0, cn_1.default)("flex flex-col gap-4 size-full", props.className), children: (0, jsx_runtime_1.jsx)(SwiperControlled_1.default, { ref: swiperControlledRef, className: "size-full", disableSwipe: true, children: (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col justify-center h-full gap-3", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { className: "text-ui-text-white font-500 text-16", children: "Your seed phrase" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-fit", children: (0, jsx_runtime_1.jsx)("textarea", { value: seedPhrase, onChange: handleChangeSeedPhrase, rows: 8, className: "w-full h-full bg-ui-background-primary rounded-lg p-4", placeholder: "Enter your seed phrase" }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { className: "text-ui-text-white font-400 text-13 text-center", children: "Your seed phrase is a list of words that are used to create your wallet. It is important to keep it safe and private." }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { className: "w-full mt-auto", onClick: handleImportWallet, children: "Import" })] }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(TheBackground_1.default, { sx: {
+            height: "100%",
+            width: "100%",
+        }, children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { ref: childPageLayoutRef, header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { overrideBack: props.onBack, title: "Import wallet" }), children: (0, jsx_runtime_1.jsx)(DefaultPageLayout_1.default, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "1rem",
+                    height: "100%",
+                    width: "100%",
+                }, children: (0, jsx_runtime_1.jsx)(SwiperControlled_1.default, { ref: swiperControlledRef, 
+                    // className="size-full"
+                    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",
+                                hFull: "100%",
+                                gap: "1rem",
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                        color: "text.white",
+                                        fontWeight: "500",
+                                        fontSize: "16px",
+                                    }, children: "Your seed phrase" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                        width: "100%",
+                                        height: "fit-content",
+                                    }, children: (0, jsx_runtime_1.jsx)(material_1.TextareaAutosize, { value: seedPhrase, onChange: handleChangeSeedPhrase, minRows: 8, maxRows: 8, placeholder: "Enter your seed phrase", style: {
+                                            width: "100%",
+                                            height: "100%",
+                                            backgroundColor: "ui.background.primary",
+                                            borderRadius: "lg",
+                                            padding: "4px",
+                                        } }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { className: "text-ui-text-white font-400 text-13 text-center", children: "Your seed phrase is a list of words that are used to create your wallet. It is important to keep it safe and private." }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { className: "w-full mt-auto", onClick: handleImportWallet, children: "Import" })] }) }) }) }) }) }));
 };
 exports.default = CreateWalletView;

package/dist/providers/TekWalletProvider/index.js

@@ -6,8 +6,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var WalletDataProvider_1 = __importDefault(require("../WalletDataProvider"));
+var mui_1 = __importDefault(require("../../theme/mui"));
 function TekWalletProvider(_a) {
     var children = _a.children;
-    return (0, jsx_runtime_1.jsx)(WalletDataProvider_1.default, { children: children });
+    return ((0, jsx_runtime_1.jsx)(WalletDataProvider_1.default, { children: (0, jsx_runtime_1.jsx)(mui_1.default, { children: children }) }));
 }
 exports.default = TekWalletProvider;

package/dist/theme/mui/index.js

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var styles_1 = require("@mui/material/styles");
+var material_1 = require("@mui/material");
 var theme_1 = __importDefault(require("./theme"));
 function MuiThemeProvider(_a) {
     var children = _a.children;
-    return (0, jsx_runtime_1.jsx)(styles_1.ThemeProvider, { theme: theme_1.default, children: children });
+    return (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme_1.default, children: children });
 }
 exports.default = MuiThemeProvider;

package/dist/theme/mui/theme.js

@@ -9,6 +9,12 @@ var theme = (0, styles_1.createTheme)({
         secondary: {
             main: "#01FF00",
         },
+        textWhite: {
+            main: "#ffffff",
+        },
+        backgroundBlack24: {
+            main: "rgba(0, 0, 0, 0.24)",
+        },
     },
 });
 exports.default = theme;

package/dist/types/ui.d.ts

@@ -1,6 +1,8 @@
+import { SxProps } from "@mui/system";
 export type UnknownFunction = (data?: unknown) => unknown;
 export type GeneralProps = {
     children?: React.ReactNode;
-    className?: string;
     onClick?: UnknownFunction;
+    sx?: SxProps;
+    className?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tek-wallet",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "description": "A custom React provider with TypeScript support",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,7 +15,7 @@
     "publish:patch": "npm run version:patch && npm publish",
     "publish:minor": "npm run version:minor && npm publish",
     "publish:major": "npm run version:major && npm publish",
-    "release": "npm run clean && npm run build && cp -r src/styles dist/styles && npm version patch"
+    "release": "npm run clean && npm run build && npm version patch"
   },
   "keywords": [
     "react",
@@ -30,6 +30,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/material": "^6.4.7",
+    "@mui/system": "^7.0.2",
     "axios": "^1.8.4",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -38,6 +39,7 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-otp-input": "^3.1.1",
+    "styled-components": "^6.1.17",
     "swiper": "^11.2.4"
   },
   "peerDependencies": {

package/dist/components/layouts/MainLayout/index.d.ts

@@ -1,5 +0,0 @@
-import { GeneralProps } from "../../../types/ui";
-interface MainLayoutProps extends GeneralProps {
-}
-declare const MainLayout: (props: MainLayoutProps) => import("react/jsx-runtime").JSX.Element;
-export default MainLayout;

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

@@ -1,13 +0,0 @@
-"use strict";
-"use client";
-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 TheBackground_1 = __importDefault(require("../../ui/TheBackground"));
-var clsx_1 = __importDefault(require("clsx"));
-var MainLayout = function (props) {
-    return ((0, jsx_runtime_1.jsx)(TheBackground_1.default, { className: (0, clsx_1.default)("size-full flex flex-col", props.className), children: (0, jsx_runtime_1.jsx)("main", { className: "h-[calc(100dvh)] w-full overflow-y-auto overflow-x-hidden", children: props.children }) }));
-};
-exports.default = MainLayout;

package/dist/styles/index.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;