@fileverse-dev/fortune-react 1.0.88-patch-3 → 1.0.88-patch-4

package/es/components/SheetOverlay/FormulaHint/index.d.ts

@@ -1,7 +1,4 @@
 import React from "react";
 import "./index.css";
-export declare function formatExpiryTime(createdAt: number): string;
-export declare function isExpired(createdAt: number): boolean;
-export declare function timeFromNowMessage(expiryStr: string): string;
 declare const FormulaHint: React.FC<React.HTMLAttributes<HTMLDivElement>>;
 export default FormulaHint;

package/es/components/SheetOverlay/FormulaHint/index.js

@@ -13,23 +13,7 @@ import { Button, TextField, LucideIcon } from "@fileverse/ui";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import WorkbookContext from "../../../context";
 import "./index.css";
-export function formatExpiryTime(createdAt) {
-  var expiry = new Date(createdAt + 60 * 60 * 1000);
-  var mm = String(expiry.getMinutes()).padStart(2, "0");
-  var ss = String(expiry.getSeconds()).padStart(2, "0");
-  return "".concat(mm, ":").concat(ss);
-}
-export function isExpired(createdAt) {
-  var expiryTs = createdAt + 60 * 60 * 1000;
-  return Date.now() > expiryTs;
-}
-export function timeFromNowMessage(expiryStr) {
-  if (!expiryStr) {
-    return "0 minute";
-  }
-  var mm = expiryStr.split(":").map(Number)[0];
-  return "".concat(mm, " minute").concat(mm !== 1 ? "s" : "");
-}
+import { formatTimeLeft, isExpired, timeFromNowMessage } from "./utils/utils";
 var FormulaHint = function FormulaHint(props) {
   var _a;
   var context = useContext(WorkbookContext).context;
@@ -51,9 +35,12 @@ var FormulaHint = function FormulaHint(props) {
   var _f = useState(true),
     showFunctionBody = _f[0],
     setShouldShowFunctionBody = _f[1];
-  var _g = useState(""),
-    expiryTime = _g[0],
-    setExpiryTime = _g[1];
+  var _g = useState("0 minute"),
+    timeLeft = _g[0],
+    setTimeLeft = _g[1];
+  var _h = useState(0),
+    accessTokenCreatedAt = _h[0],
+    setAccessTokenCreatedAt = _h[1];
   var isWrongGnosisPayConnector = localStorage.getItem("LOGIN_METHOD") !== "walletAddress";
   var handleGnosisPayToken = function handleGnosisPayToken(onDone) {
     if (localStorage.getItem("GNOSIS_PAY_ACCESS")) {
@@ -62,13 +49,13 @@ var FormulaHint = function FormulaHint(props) {
         if (hasGnosisPayToken) {
           setHasGnosisPayToken(false);
         }
-        if (expiryTime) {
-          setExpiryTime("");
+        if (accessTokenCreatedAt) {
+          setAccessTokenCreatedAt(0);
         }
         return;
       }
       setHasGnosisPayToken(!!access.token);
-      setExpiryTime(formatExpiryTime(access.createdAt));
+      setAccessTokenCreatedAt(access.createdAt);
       onDone === null || onDone === void 0 ? void 0 : onDone();
     } else {
       var urlParams = new URLSearchParams(window.location.search);
@@ -93,9 +80,9 @@ var FormulaHint = function FormulaHint(props) {
     ETHERSCAN_API_KEY: "Etherscan API key"
   };
   var hintRef = useRef(null);
-  var _h = useState(0),
-    top = _h[0],
-    setTop = _h[1];
+  var _j = useState(0),
+    top = _j[0],
+    setTop = _j[1];
   var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
     var _a, _b, _c;
     if (!((_a = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) === null || _a === void 0 ? void 0 : _a.toString()) || !((_b = firstSelection.height_move) === null || _b === void 0 ? void 0 : _b.toString()) || !hintRef.current) return;
@@ -145,14 +132,42 @@ var FormulaHint = function FormulaHint(props) {
     };
   }, []);
   var gnosisTokenTokenIntervalRef = useRef(null);
-  var _j = useState(false),
-    isLoading = _j[0],
-    setIsLoading = _j[1];
+  var _k = useState(false),
+    isLoading = _k[0],
+    setIsLoading = _k[1];
   useEffect(function () {
     return function () {
       if (gnosisTokenTokenIntervalRef.current) clearInterval(gnosisTokenTokenIntervalRef.current);
     };
   }, [gnosisTokenTokenIntervalRef]);
+  useEffect(function () {
+    if (accessTokenCreatedAt <= 0) return function () {};
+    var interval = setInterval(function () {
+      var EXPIRY_DURATION_MS = 60 * 60 * 1000;
+      var expiryTimestamp = accessTokenCreatedAt + EXPIRY_DURATION_MS;
+      var newTimeLeft = expiryTimestamp - Date.now();
+      setTimeLeft(formatTimeLeft(newTimeLeft));
+      if (newTimeLeft <= 0 || !document.getElementById("gnosis-pay-area")) {
+        clearInterval(interval);
+      }
+    }, 1000);
+    return function () {
+      clearInterval(interval);
+    };
+  }, [accessTokenCreatedAt, fn]);
+  var grantAccess = function grantAccess() {
+    var button = document.getElementById("grant-gnosispay-access");
+    if (!button) return;
+    button.click();
+    setIsLoading(true);
+    var interval = setInterval(function () {
+      handleGnosisPayToken(function () {
+        clearInterval(interval);
+        setIsLoading(false);
+      });
+    }, 5000);
+    gnosisTokenTokenIntervalRef.current = interval;
+  };
   if (!fn) return null;
   return /*#__PURE__*/React.createElement("div", __assign({}, props, {
     ref: hintRef,
@@ -315,6 +330,7 @@ var FormulaHint = function FormulaHint(props) {
     disabled: !API_KEY,
     className: "min-w-[80px]"
   }, "Ok"))))))), fn.n === "GNOSISPAY" && (/*#__PURE__*/React.createElement("div", {
+    id: "gnosis-pay-area",
     style: {
       borderLeft: "4px solid ".concat(hasGnosisPayToken ? "#177E23" : "#fb923c"),
       backgroundColor: "white",
@@ -339,27 +355,15 @@ var FormulaHint = function FormulaHint(props) {
       margin: "0 0 16px 0"
     },
     className: "text-body-sm color-text-default"
-  }, !hasGnosisPayToken ? "To access your Gnosis Pay account, please grant permission. Your dSheet account should be created via the same wallet ss your Gnosis Pay. " : " You have ".concat(timeFromNowMessage(expiryTime), " to use your Gnosis Pay account. Then you need to grand access again.")), /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      var button = document.getElementById("grant-gnosispay-access");
-      if (!button) return;
-      button.click();
-      setIsLoading(true);
-      var interval = setInterval(function () {
-        handleGnosisPayToken(function () {
-          clearInterval(interval);
-          setIsLoading(false);
-        });
-      }, 5000);
-      gnosisTokenTokenIntervalRef.current = interval;
-    },
+  }, !hasGnosisPayToken ? "To access your Gnosis Pay account, please grant permission. Your dSheet account should be created via the same wallet ss your Gnosis Pay. " : " You have ".concat(timeFromNowMessage(timeLeft), " to use your Gnosis Pay account. Then you need to grant access again.")), /*#__PURE__*/React.createElement(Button, {
+    onClick: grantAccess,
     disabled: hasGnosisPayToken || isWrongGnosisPayConnector || isLoading,
     className: "w-full items-center flex gap-1"
   }, isLoading && (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LucideIcon, {
     name: "LoaderCircle",
     className: "animate-spin",
     size: "sm"
-  }))), /*#__PURE__*/React.createElement("p", null, "Grant access "), " ", expiryTime && /*#__PURE__*/React.createElement("div", null, expiryTime))))), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("p", null, "Grant access "), " ", accessTokenCreatedAt > 0 && /*#__PURE__*/React.createElement("div", null, timeLeft))))), /*#__PURE__*/React.createElement("div", {
     style: {
       backgroundColor: "white",
       padding: "6px",

package/es/components/SheetOverlay/FormulaHint/utils/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function formatTimeLeft(msLeft: number): string;
+export declare function isExpired(createdAt: number): boolean;
+export declare function timeFromNowMessage(expiryStr: string): string;

package/es/components/SheetOverlay/FormulaHint/utils/utils.js

@@ -0,0 +1,17 @@
+export function formatTimeLeft(msLeft) {
+  var totalSeconds = Math.max(0, Math.floor(msLeft / 1000));
+  var minutes = String(Math.floor(totalSeconds / 60)).padStart(2, "0");
+  var seconds = String(totalSeconds % 60).padStart(2, "0");
+  return "".concat(minutes, ":").concat(seconds);
+}
+export function isExpired(createdAt) {
+  var expiryTs = createdAt + 60 * 60 * 1000;
+  return Date.now() > expiryTs;
+}
+export function timeFromNowMessage(expiryStr) {
+  if (!expiryStr) {
+    return "0 minute";
+  }
+  var mm = expiryStr.split(":").map(Number)[0];
+  return "".concat(mm, " minute").concat(mm !== 1 ? "s" : "");
+}

package/lib/components/SheetOverlay/FormulaHint/index.d.ts

@@ -1,7 +1,4 @@
 import React from "react";
 import "./index.css";
-export declare function formatExpiryTime(createdAt: number): string;
-export declare function isExpired(createdAt: number): boolean;
-export declare function timeFromNowMessage(expiryStr: string): string;
 declare const FormulaHint: React.FC<React.HTMLAttributes<HTMLDivElement>>;
 export default FormulaHint;

package/lib/components/SheetOverlay/FormulaHint/index.js

@@ -5,14 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-exports.formatExpiryTime = formatExpiryTime;
-exports.isExpired = isExpired;
-exports.timeFromNowMessage = timeFromNowMessage;
 var _fortuneCore = require("@fileverse-dev/fortune-core");
 var _ui = require("@fileverse/ui");
 var _react = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("../../../context"));
 require("./index.css");
+var _utils = require("./utils/utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var __assign = void 0 && (void 0).__assign || function () {
@@ -25,23 +23,6 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
-function formatExpiryTime(createdAt) {
-  var expiry = new Date(createdAt + 60 * 60 * 1000);
-  var mm = String(expiry.getMinutes()).padStart(2, "0");
-  var ss = String(expiry.getSeconds()).padStart(2, "0");
-  return "".concat(mm, ":").concat(ss);
-}
-function isExpired(createdAt) {
-  var expiryTs = createdAt + 60 * 60 * 1000;
-  return Date.now() > expiryTs;
-}
-function timeFromNowMessage(expiryStr) {
-  if (!expiryStr) {
-    return "0 minute";
-  }
-  var mm = expiryStr.split(":").map(Number)[0];
-  return "".concat(mm, " minute").concat(mm !== 1 ? "s" : "");
-}
 var FormulaHint = function FormulaHint(props) {
   var _a;
   var context = (0, _react.useContext)(_context.default).context;
@@ -63,24 +44,27 @@ var FormulaHint = function FormulaHint(props) {
   var _f = (0, _react.useState)(true),
     showFunctionBody = _f[0],
     setShouldShowFunctionBody = _f[1];
-  var _g = (0, _react.useState)(""),
-    expiryTime = _g[0],
-    setExpiryTime = _g[1];
+  var _g = (0, _react.useState)("0 minute"),
+    timeLeft = _g[0],
+    setTimeLeft = _g[1];
+  var _h = (0, _react.useState)(0),
+    accessTokenCreatedAt = _h[0],
+    setAccessTokenCreatedAt = _h[1];
   var isWrongGnosisPayConnector = localStorage.getItem("LOGIN_METHOD") !== "walletAddress";
   var handleGnosisPayToken = function handleGnosisPayToken(onDone) {
     if (localStorage.getItem("GNOSIS_PAY_ACCESS")) {
       var access = JSON.parse(localStorage.getItem("GNOSIS_PAY_ACCESS") || "");
-      if (!(access === null || access === void 0 ? void 0 : access.token) || isExpired(access === null || access === void 0 ? void 0 : access.createdAt)) {
+      if (!(access === null || access === void 0 ? void 0 : access.token) || (0, _utils.isExpired)(access === null || access === void 0 ? void 0 : access.createdAt)) {
         if (hasGnosisPayToken) {
           setHasGnosisPayToken(false);
         }
-        if (expiryTime) {
-          setExpiryTime("");
+        if (accessTokenCreatedAt) {
+          setAccessTokenCreatedAt(0);
         }
         return;
       }
       setHasGnosisPayToken(!!access.token);
-      setExpiryTime(formatExpiryTime(access.createdAt));
+      setAccessTokenCreatedAt(access.createdAt);
       onDone === null || onDone === void 0 ? void 0 : onDone();
     } else {
       var urlParams = new URLSearchParams(window.location.search);
@@ -105,9 +89,9 @@ var FormulaHint = function FormulaHint(props) {
     ETHERSCAN_API_KEY: "Etherscan API key"
   };
   var hintRef = (0, _react.useRef)(null);
-  var _h = (0, _react.useState)(0),
-    top = _h[0],
-    setTop = _h[1];
+  var _j = (0, _react.useState)(0),
+    top = _j[0],
+    setTop = _j[1];
   var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
     var _a, _b, _c;
     if (!((_a = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) === null || _a === void 0 ? void 0 : _a.toString()) || !((_b = firstSelection.height_move) === null || _b === void 0 ? void 0 : _b.toString()) || !hintRef.current) return;
@@ -157,14 +141,42 @@ var FormulaHint = function FormulaHint(props) {
     };
   }, []);
   var gnosisTokenTokenIntervalRef = (0, _react.useRef)(null);
-  var _j = (0, _react.useState)(false),
-    isLoading = _j[0],
-    setIsLoading = _j[1];
+  var _k = (0, _react.useState)(false),
+    isLoading = _k[0],
+    setIsLoading = _k[1];
   (0, _react.useEffect)(function () {
     return function () {
       if (gnosisTokenTokenIntervalRef.current) clearInterval(gnosisTokenTokenIntervalRef.current);
     };
   }, [gnosisTokenTokenIntervalRef]);
+  (0, _react.useEffect)(function () {
+    if (accessTokenCreatedAt <= 0) return function () {};
+    var interval = setInterval(function () {
+      var EXPIRY_DURATION_MS = 60 * 60 * 1000;
+      var expiryTimestamp = accessTokenCreatedAt + EXPIRY_DURATION_MS;
+      var newTimeLeft = expiryTimestamp - Date.now();
+      setTimeLeft((0, _utils.formatTimeLeft)(newTimeLeft));
+      if (newTimeLeft <= 0 || !document.getElementById("gnosis-pay-area")) {
+        clearInterval(interval);
+      }
+    }, 1000);
+    return function () {
+      clearInterval(interval);
+    };
+  }, [accessTokenCreatedAt, fn]);
+  var grantAccess = function grantAccess() {
+    var button = document.getElementById("grant-gnosispay-access");
+    if (!button) return;
+    button.click();
+    setIsLoading(true);
+    var interval = setInterval(function () {
+      handleGnosisPayToken(function () {
+        clearInterval(interval);
+        setIsLoading(false);
+      });
+    }, 5000);
+    gnosisTokenTokenIntervalRef.current = interval;
+  };
   if (!fn) return null;
   return /*#__PURE__*/_react.default.createElement("div", __assign({}, props, {
     ref: hintRef,
@@ -327,6 +339,7 @@ var FormulaHint = function FormulaHint(props) {
     disabled: !API_KEY,
     className: "min-w-[80px]"
   }, "Ok"))))))), fn.n === "GNOSISPAY" && (/*#__PURE__*/_react.default.createElement("div", {
+    id: "gnosis-pay-area",
     style: {
       borderLeft: "4px solid ".concat(hasGnosisPayToken ? "#177E23" : "#fb923c"),
       backgroundColor: "white",
@@ -351,27 +364,15 @@ var FormulaHint = function FormulaHint(props) {
       margin: "0 0 16px 0"
     },
     className: "text-body-sm color-text-default"
-  }, !hasGnosisPayToken ? "To access your Gnosis Pay account, please grant permission. Your dSheet account should be created via the same wallet ss your Gnosis Pay. " : " You have ".concat(timeFromNowMessage(expiryTime), " to use your Gnosis Pay account. Then you need to grand access again.")), /*#__PURE__*/_react.default.createElement(_ui.Button, {
-    onClick: function onClick() {
-      var button = document.getElementById("grant-gnosispay-access");
-      if (!button) return;
-      button.click();
-      setIsLoading(true);
-      var interval = setInterval(function () {
-        handleGnosisPayToken(function () {
-          clearInterval(interval);
-          setIsLoading(false);
-        });
-      }, 5000);
-      gnosisTokenTokenIntervalRef.current = interval;
-    },
+  }, !hasGnosisPayToken ? "To access your Gnosis Pay account, please grant permission. Your dSheet account should be created via the same wallet ss your Gnosis Pay. " : " You have ".concat((0, _utils.timeFromNowMessage)(timeLeft), " to use your Gnosis Pay account. Then you need to grant access again.")), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    onClick: grantAccess,
     disabled: hasGnosisPayToken || isWrongGnosisPayConnector || isLoading,
     className: "w-full items-center flex gap-1"
   }, isLoading && (/*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
     name: "LoaderCircle",
     className: "animate-spin",
     size: "sm"
-  }))), /*#__PURE__*/_react.default.createElement("p", null, "Grant access "), " ", expiryTime && /*#__PURE__*/_react.default.createElement("div", null, expiryTime))))), /*#__PURE__*/_react.default.createElement("div", {
+  }))), /*#__PURE__*/_react.default.createElement("p", null, "Grant access "), " ", accessTokenCreatedAt > 0 && /*#__PURE__*/_react.default.createElement("div", null, timeLeft))))), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       backgroundColor: "white",
       padding: "6px",

package/lib/components/SheetOverlay/FormulaHint/utils/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function formatTimeLeft(msLeft: number): string;
+export declare function isExpired(createdAt: number): boolean;
+export declare function timeFromNowMessage(expiryStr: string): string;

package/lib/components/SheetOverlay/FormulaHint/utils/utils.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatTimeLeft = formatTimeLeft;
+exports.isExpired = isExpired;
+exports.timeFromNowMessage = timeFromNowMessage;
+function formatTimeLeft(msLeft) {
+  var totalSeconds = Math.max(0, Math.floor(msLeft / 1000));
+  var minutes = String(Math.floor(totalSeconds / 60)).padStart(2, "0");
+  var seconds = String(totalSeconds % 60).padStart(2, "0");
+  return "".concat(minutes, ":").concat(seconds);
+}
+function isExpired(createdAt) {
+  var expiryTs = createdAt + 60 * 60 * 1000;
+  return Date.now() > expiryTs;
+}
+function timeFromNowMessage(expiryStr) {
+  if (!expiryStr) {
+    return "0 minute";
+  }
+  var mm = expiryStr.split(":").map(Number)[0];
+  return "".concat(mm, " minute").concat(mm !== 1 ? "s" : "");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse-dev/fortune-react",
-  "version": "1.0.88-patch-3",
+  "version": "1.0.88-patch-4",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "module": "es/index.js",
@@ -16,7 +16,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@fileverse-dev/fortune-core": "1.0.88-patch-3",
+    "@fileverse-dev/fortune-core": "1.0.88-patch-4",
     "@fileverse/ui": "^4.1.7-patch-21",
     "@tippyjs/react": "^4.2.6",
     "@types/regenerator-runtime": "^0.13.6",