tek-wallet 0.0.92 → 0.0.94

package/dist/components/ui/OTP/index.d.ts

@@ -7,5 +7,8 @@ interface CustomOtpInputProps extends Omit<OTPInputProps, "renderInput"> {
     otpInputType?: OtpInputType;
     renderInput?: (inputProps: InputProps, index: number) => React.ReactNode;
 }
-declare const CustomOtpInput: (props: CustomOtpInputProps) => import("react/jsx-runtime").JSX.Element;
+export type CustomOtpInputRef = {
+    blur: () => void;
+};
+declare const CustomOtpInput: import("react").ForwardRefExoticComponent<CustomOtpInputProps & import("react").RefAttributes<CustomOtpInputRef>>;
 export default CustomOtpInput;

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

@@ -27,17 +27,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OtpInputType = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_otp_input_1 = __importDefault(require("react-otp-input"));
 var OtpInputType;
 (function (OtpInputType) {
     OtpInputType["TEXT"] = "text";
     OtpInputType["PASSWORD"] = "password";
 })(OtpInputType || (exports.OtpInputType = OtpInputType = {}));
-var CustomOtpInput = function (props) {
+var CustomOtpInput = (0, react_1.forwardRef)(function (props, ref) {
     var otpInputType = props.otpInputType, rest = __rest(props, ["otpInputType"]);
-    switch (otpInputType) {
-        case OtpInputType.PASSWORD:
-            return ((0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { inputType: "password", inputStyle: {
+    var blurButtonRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        blur: function () {
+            var _a;
+            (_a = blurButtonRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        },
+    }); });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { ref: blurButtonRef }), otpInputType === OtpInputType.PASSWORD && ((0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { inputType: "password", inputStyle: {
                     border: "1px solid #ffffff58",
                     borderRadius: "0.75rem",
                     width: "2.8rem",
@@ -46,9 +52,7 @@ var CustomOtpInput = function (props) {
                     outline: "none",
                     color: "#ffffff",
                     backgroundColor: "#ffffff29",
-                }, renderInput: function (props) { return (0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "decimal" })); } })));
-        default:
-            return ((0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { renderInput: function (props) { return (0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "text" })); } })));
-    }
-};
+                }, renderInput: function (props) { return (0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "decimal" })); } }))), otpInputType !== OtpInputType.TEXT && ((0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { renderInput: function (props) { return (0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "text" })); } })))] }));
+});
+CustomOtpInput.displayName = "CustomOtpInput";
 exports.default = CustomOtpInput;

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

@@ -72,6 +72,7 @@ var CreateWalletView = function (props) {
     var swiperControlledRef = (0, react_2.useRef)(null);
     var childPageLayoutRef = (0, react_2.useRef)(null);
     var _c = (0, react_2.useState)(CreateWalletViewStep.CREATE_PASSCODE), currentStep = _c[0], setCurrentStep = _c[1];
+    var otpInputRef = (0, react_2.useRef)(null);
     var createWallet = (0, useWalletData_1.default)().createWallet;
     var gotoStep = function (step) {
         var _a;
@@ -116,7 +117,9 @@ var CreateWalletView = function (props) {
         }, 1500);
     };
     var handleConfirmOtpChange = function (value) {
+        var _a;
         setConfirmOtp(value);
+        (_a = otpInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         console.warn("🚀 ~ handleConfirmOtpChange ~ value:", value);
         /**
          * validate otp here
@@ -126,9 +129,11 @@ var CreateWalletView = function (props) {
                 passcode: value,
                 appSlug: process.env.NEXT_PUBLIC_TEK_WALLET_APP_SLUG || "",
             }, function () {
-                // childPageLayoutRef.current?.showLoading();
+                var _a;
+                (_a = childPageLayoutRef.current) === null || _a === void 0 ? void 0 : _a.showLoading();
             }, function () {
-                // childPageLayoutRef.current?.showSuccess();
+                var _a;
+                (_a = childPageLayoutRef.current) === null || _a === void 0 ? void 0 : _a.showSuccess();
             }, handleCreateWalletError);
         }
     };

package/package.json

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