@nobak/design-system 1.0.0

package/lib/components/RecoverySetup/RecoverySetup.js

@@ -0,0 +1,354 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useState } from 'react';
+import { Stepper } from "../../shared/components/navigation/Stepper/Stepper";
+import { Form } from "../../shared/components/forms/Form/Form";
+import { Input } from "../../shared/components/forms/Input/Input";
+import { Button } from "../../shared/elements/Button/Button";
+import { Text } from "../../shared/elements/Text/Text";
+import { Badge } from "../../shared/elements/Badge/Badge";
+
+// Placeholder for RCIInput and DigitalDisplay
+var RCIInput = function RCIInput(props) {
+  return /*#__PURE__*/React.createElement(Input, props);
+};
+var DigitalDisplay = function DigitalDisplay(_ref) {
+  var value = _ref.value;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "bg-neutral-100 rounded-lg p-4 font-mono text-lg text-center mb-2"
+  }, value);
+};
+
+// Step 1: Intro
+var IntroStep = function IntroStep(_ref2) {
+  var onNext = _ref2.onNext;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    content: "Set up account recovery to protect your Nobak Wallet.",
+    fontSize: ": "
+  }), /*#__PURE__*/React.createElement(Text, {
+    content: "Choose one or more secure recovery methods. This helps you regain access if you lose your device or credentials.",
+    fontSize: ": "
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "mt-4 flex flex-col gap-2"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    title: "Recovery Phrase",
+    variant: "primary",
+    size: "small"
+  }), /*#__PURE__*/React.createElement(Badge, {
+    title: "Email Recovery",
+    variant: "secondary",
+    size: "small"
+  }), /*#__PURE__*/React.createElement(Badge, {
+    title: "Authenticator App (Optional)",
+    variant: "basic",
+    size: "small"
+  })), /*#__PURE__*/React.createElement(Button, {
+    text: "Start",
+    variant: "primary",
+    onClick: onNext
+  }));
+};
+
+// Step 2: Recovery Phrase
+var RecoveryPhraseStep = function RecoveryPhraseStep(_ref3) {
+  var phraseVerified = _ref3.phraseVerified,
+    verifyPhrase = _ref3.verifyPhrase,
+    onNext = _ref3.onNext,
+    onBack = _ref3.onBack;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    content: "Backup Recovery Phrase",
+    fontSize: ": "
+  }), /*#__PURE__*/React.createElement(Text, {
+    content: "Write down your secret phrase and keep it safe. You'll need to verify it next.",
+    fontSize: ": "
+  }), /*#__PURE__*/React.createElement(DigitalDisplay, {
+    value: "abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon about"
+  }), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Type your recovery phrase to verify",
+    onChange: function onChange(e) {
+      return verifyPhrase(e.target.value);
+    }
+  }), phraseVerified && /*#__PURE__*/React.createElement(Badge, {
+    title: "Verified",
+    variant: "positive",
+    size: "small"
+  }), /*#__PURE__*/React.createElement(Button, {
+    text: "Next",
+    variant: "primary",
+    onClick: onNext,
+    disabled: !phraseVerified
+  }), /*#__PURE__*/React.createElement(Button, {
+    text: "Back",
+    variant: "basic",
+    onClick: onBack
+  }));
+};
+
+// Step 3: Email Recovery
+var EmailRecoveryStep = function EmailRecoveryStep(_ref4) {
+  var email = _ref4.email,
+    setEmail = _ref4.setEmail,
+    emailError = _ref4.emailError,
+    emailSent = _ref4.emailSent,
+    sendEmailCode = _ref4.sendEmailCode,
+    emailCode = _ref4.emailCode,
+    setEmailCode = _ref4.setEmailCode,
+    verifyEmailCode = _ref4.verifyEmailCode,
+    onBack = _ref4.onBack;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    content: "Set Up Email Recovery",
+    fontSize: ": "
+  }), /*#__PURE__*/React.createElement(Text, {
+    content: "We'll send a code to your email to verify ownership.",
+    fontSize: ": "
+  }), /*#__PURE__*/React.createElement(Form, {
+    fields: [{
+      field: {
+        type: 'email',
+        label: 'Email',
+        value: email,
+        onChange: function onChange(e) {
+          return setEmail(e.target.value);
+        },
+        error: emailError
+      }
+    }],
+    onSubmit: sendEmailCode,
+    submitLabel: emailSent ? 'Resend Code' : 'Send Code'
+  }), emailSent && /*#__PURE__*/React.createElement("div", {
+    className: "mt-4"
+  }, /*#__PURE__*/React.createElement(RCIInput, {
+    placeholder: "Enter verification code",
+    onChange: function onChange(e) {
+      return setEmailCode(e.target.value);
+    },
+    error: emailError
+  }), /*#__PURE__*/React.createElement(Button, {
+    text: "Verify Code",
+    variant: "primary",
+    onClick: verifyEmailCode
+  })), /*#__PURE__*/React.createElement(Button, {
+    text: "Back",
+    variant: "basic",
+    onClick: onBack
+  }));
+};
+
+// Step 4: Additional Security
+var AdditionalSecurityStep = function AdditionalSecurityStep(_ref5) {
+  var showOtp = _ref5.showOtp,
+    setShowOtp = _ref5.setShowOtp,
+    otp = _ref5.otp,
+    setOtp = _ref5.setOtp,
+    otpError = _ref5.otpError,
+    verifyOtp = _ref5.verifyOtp,
+    onNext = _ref5.onNext,
+    onBack = _ref5.onBack;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    content: "Add Extra Security (Optional)",
+    fontSize: ": "
+  }), /*#__PURE__*/React.createElement(Text, {
+    content: "Protect your account with an authenticator app (TOTP).",
+    fontSize: ": "
+  }), /*#__PURE__*/React.createElement(Button, {
+    text: showOtp ? 'Hide Authenticator' : 'Add Authenticator',
+    variant: "secondary",
+    onClick: function onClick() {
+      return setShowOtp(function (v) {
+        return !v;
+      });
+    }
+  }), showOtp && /*#__PURE__*/React.createElement("div", {
+    className: "mt-4"
+  }, /*#__PURE__*/React.createElement(Text, {
+    content: "Scan the QR code with your authenticator app, then enter the 6-digit code.",
+    fontSize: ": "
+  }), /*#__PURE__*/React.createElement(DigitalDisplay, {
+    value: "otpauth://totp/Nobak:demo?secret=SECRETKEY"
+  }), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Enter 6-digit code",
+    onChange: function onChange(e) {
+      return setOtp(e.target.value);
+    },
+    error: otpError
+  }), /*#__PURE__*/React.createElement(Button, {
+    text: "Verify Code",
+    variant: "primary",
+    onClick: verifyOtp
+  })), /*#__PURE__*/React.createElement(Button, {
+    text: "Next",
+    variant: "primary",
+    onClick: onNext
+  }), /*#__PURE__*/React.createElement(Button, {
+    text: "Back",
+    variant: "basic",
+    onClick: onBack
+  }));
+};
+
+// Step 5: Confirmation
+var ConfirmationStep = function ConfirmationStep(_ref6) {
+  var onRestart = _ref6.onRestart;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-center"
+  }, /*#__PURE__*/React.createElement(Text, {
+    content: "Recovery Setup Complete!",
+    fontSize: ": "
+  }), /*#__PURE__*/React.createElement(Badge, {
+    title: "All Set",
+    variant: "positive",
+    size: "medium"
+  }), /*#__PURE__*/React.createElement(Text, {
+    content: "Your account is protected. Keep your recovery methods safe.",
+    fontSize: ": "
+  }), /*#__PURE__*/React.createElement(Button, {
+    text: "Finish",
+    variant: "primary",
+    onClick: onRestart
+  }));
+};
+export var RecoverySetup = function RecoverySetup() {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    step = _useState2[0],
+    setStep = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    phraseVerified = _useState4[0],
+    setPhraseVerified = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    email = _useState6[0],
+    setEmail = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    emailCode = _useState8[0],
+    setEmailCode = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    emailSent = _useState0[0],
+    setEmailSent = _useState0[1];
+  var _useState1 = useState(''),
+    _useState10 = _slicedToArray(_useState1, 2),
+    emailError = _useState10[0],
+    setEmailError = _useState10[1];
+  var _useState11 = useState(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    otp = _useState12[0],
+    setOtp = _useState12[1];
+  var _useState13 = useState(''),
+    _useState14 = _slicedToArray(_useState13, 2),
+    otpError = _useState14[0],
+    setOtpError = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    showOtp = _useState16[0],
+    setShowOtp = _useState16[1];
+  var handleNext = function handleNext() {
+    return setStep(function (s) {
+      return Math.min(s + 1, stepComponents.length - 1);
+    });
+  };
+  var handleBack = function handleBack() {
+    return setStep(function (s) {
+      return Math.max(s - 1, 0);
+    });
+  };
+  var handleRestart = function handleRestart() {
+    return setStep(0);
+  };
+
+  // Simulate phrase verification
+  var verifyPhrase = function verifyPhrase(input) {
+    if (input.trim() === 'correct phrase') {
+      setPhraseVerified(true);
+      setTimeout(handleNext, 700);
+    } else {
+      setPhraseVerified(false);
+    }
+  };
+
+  // Simulate sending email code
+  var sendEmailCode = function sendEmailCode() {
+    if (!/^[^@]+@[^@]+\.[^@]+$/.test(email)) {
+      setEmailError('Enter a valid email address.');
+      return;
+    }
+    setEmailError('');
+    setEmailSent(true);
+  };
+
+  // Simulate email code verification
+  var verifyEmailCode = function verifyEmailCode() {
+    if (emailCode === '123456') {
+      setEmailError('');
+      handleNext();
+    } else {
+      setEmailError('Invalid verification code.');
+    }
+  };
+
+  // Simulate OTP verification
+  var verifyOtp = function verifyOtp() {
+    if (otp === '000000') {
+      setOtpError('');
+      handleNext();
+    } else {
+      setOtpError('Invalid code.');
+    }
+  };
+  var stepComponents = [{
+    component: IntroStep,
+    options: {
+      onNext: handleNext
+    }
+  }, {
+    component: RecoveryPhraseStep,
+    options: {
+      phraseVerified: phraseVerified,
+      verifyPhrase: verifyPhrase,
+      onNext: handleNext,
+      onBack: handleBack
+    }
+  }, {
+    component: EmailRecoveryStep,
+    options: {
+      email: email,
+      setEmail: setEmail,
+      emailError: emailError,
+      emailSent: emailSent,
+      sendEmailCode: sendEmailCode,
+      emailCode: emailCode,
+      setEmailCode: setEmailCode,
+      verifyEmailCode: verifyEmailCode,
+      onBack: handleBack
+    }
+  }, {
+    component: AdditionalSecurityStep,
+    options: {
+      showOtp: showOtp,
+      setShowOtp: setShowOtp,
+      otp: otp,
+      setOtp: setOtp,
+      otpError: otpError,
+      verifyOtp: verifyOtp,
+      onNext: handleNext,
+      onBack: handleBack
+    }
+  }, {
+    component: ConfirmationStep,
+    options: {
+      onRestart: handleRestart
+    }
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full max-w-lg mx-auto bg-white rounded-xl shadow-md p-6 mt-4 flex flex-col gap-6"
+  }, /*#__PURE__*/React.createElement(Stepper, {
+    steps: stepComponents,
+    currentStep: step
+  }));
+};

package/lib/components/RisingSun.js

@@ -0,0 +1,122 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+// RisingSun.tsx
+import React, { useEffect, useRef, useState } from 'react';
+var RisingSun = function RisingSun(_ref) {
+  var children = _ref.children,
+    _ref$roundedClass = _ref.roundedClass,
+    roundedClass = _ref$roundedClass === void 0 ? '' : _ref$roundedClass;
+  var canvasRef = useRef(null);
+  var parentRef = useRef(null);
+  var _useState = useState({
+      width: 800,
+      height: 600
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    canvasSize = _useState2[0],
+    setCanvasSize = _useState2[1]; // Default size
+
+  useEffect(function () {
+    if (parentRef.current) {
+      var handleResize = function handleResize() {
+        var _ref2 = parentRef.current,
+          clientWidth = _ref2.clientWidth,
+          clientHeight = _ref2.clientHeight;
+        setCanvasSize({
+          width: clientWidth,
+          height: clientHeight
+        });
+      };
+      handleResize(); // Initialize with the current parent size
+
+      var resizeObserver = new ResizeObserver(handleResize);
+      resizeObserver.observe(parentRef.current);
+      return function () {
+        resizeObserver.disconnect();
+      };
+    }
+  }, []);
+  useEffect(function () {
+    var canvas = canvasRef.current;
+    var context = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
+    if (!context) return;
+    var canvasWidth = canvasSize.width,
+      canvasHeight = canvasSize.height;
+    var sunRadius = 80;
+    var startAngle = 0;
+    var getRayEndPoint = function getRayEndPoint(angle) {
+      var radians = angle * Math.PI / 180;
+      var dx = Math.cos(radians);
+      var dy = Math.sin(radians);
+      if (canvasWidth * dy <= canvasHeight * dx) {
+        return {
+          x: canvasWidth,
+          y: canvasWidth * dy / dx
+        };
+      } else {
+        return {
+          x: canvasHeight * dx / dy,
+          y: canvasHeight
+        };
+      }
+    };
+    var _draw = function draw() {
+      context.clearRect(0, 0, canvasWidth, canvasHeight);
+      context.beginPath();
+      context.arc(0, 0, sunRadius, 0, Math.PI / 2);
+      context.lineTo(0, 0);
+      context.fillStyle = '#C2CCD5';
+      context.fill();
+      for (var i = 0; i < 30; i++) {
+        var angle = (startAngle + 12 * i) % 360;
+        var endPoint = getRayEndPoint(angle);
+        context.beginPath();
+        context.moveTo(0, 0);
+        context.lineTo(endPoint.x, endPoint.y);
+        context.strokeStyle = '#C2CCD5'; // Custom hex color
+        context.lineWidth = 1;
+        context.stroke();
+      }
+      startAngle += 0.05; // Slower rotation speed
+
+      requestAnimationFrame(_draw);
+    };
+    _draw();
+  }, [canvasSize]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: parentRef,
+    className: "relative w-full h-full overflow-hidden ".concat(roundedClass),
+    style: {
+      WebkitMaskImage: 'inherit'
+    }
+  }, /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      backgroundColor: '#080909'
+    },
+    width: canvasSize.width,
+    height: canvasSize.height
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row justify-center pt-[24px] pb-[24px] gap-[24px]",
+    style: {
+      position: 'relative',
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col justify-center w-[400px]"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-primary-100 text-h4-bold"
+  }, "Secure, Fast and User-Friendly: Meet Nobak Wallet"), /*#__PURE__*/React.createElement("div", {
+    className: "text-primary-400 text-p1-medium"
+  }, "Your gateway to the Stellar ecosystem\u2014manage your digital assets with confidence."))));
+};
+export { RisingSun };