@fileverse-dev/fortune-react 1.0.88-patch-6 → 1.0.88-patch-8

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

@@ -211,7 +211,7 @@ var FormulaHint = function FormulaHint(props) {
     style: {
       backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
       maxHeight: "318px",
-      overflowY: "scroll"
+      overflowY: "auto"
     }
   }, fn.API_KEY && (/*#__PURE__*/React.createElement("div", {
     style: {
@@ -270,7 +270,7 @@ var FormulaHint = function FormulaHint(props) {
     style: {
       borderLeft: "4px solid ".concat(hasGnosisPayToken ? "#177E23" : "#fb923c"),
       backgroundColor: "white",
-      padding: "16px",
+      padding: "8px",
       margin: "4px 4px 0px 4px",
       borderRadius: "4px"
     }
@@ -286,12 +286,12 @@ var FormulaHint = function FormulaHint(props) {
       margin: "0 0 8px 0"
     },
     className: "text-heading-xsm color-text-default"
-  }, hasGnosisPayToken ? "Access granted" : "Access required")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+  }, hasGnosisPayToken ? "Access granted" : "Connect your Gnosis Pay account")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
     style: {
-      margin: "0 0 16px 0"
+      margin: "0 0 8px 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(timeLeft), " to use your Gnosis Pay account. Then you need to grant access again.")), /*#__PURE__*/React.createElement(Button, {
+  }, !hasGnosisPayToken ? "Grant access to your Gnosis Pay account and ensure you're using the same wallet for both Gnosis Pay and dSheet." : " You can now interact with your Gnosis Pay account for the next ".concat(timeFromNowMessage(timeLeft), ". When the timer\u2019s up, just re-grant access and you're good to go!")), /*#__PURE__*/React.createElement(Button, {
     onClick: grantAccess,
     disabled: hasGnosisPayToken || isWrongGnosisPayConnector || isLoading,
     className: "w-full items-center flex gap-1"

package/es/components/SheetOverlay/FormulaHint/use-gnosis-pay.js

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
+import { isGnosisPayAccessExpired } from "@fileverse-dev/formulajs/crypto-constants";
 import { GNOSIS_PAY_ACCESS } from "./constants";
-import { formatTimeLeft, isExpired } from "./utils/utils";
+import { formatTimeLeft, getJwtExpiry } from "./utils/utils";
 var useGnosisPay = function useGnosisPay(fn) {
   var gnosisTokenTokenIntervalRef = useRef(null);
   var _a = useState(false),
@@ -18,8 +19,8 @@ var useGnosisPay = function useGnosisPay(fn) {
   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)) {
+      var access = localStorage.getItem(GNOSIS_PAY_ACCESS) || "";
+      if (!access || isGnosisPayAccessExpired(access)) {
         if (hasGnosisPayToken) {
           setHasGnosisPayToken(false);
         }
@@ -29,8 +30,8 @@ var useGnosisPay = function useGnosisPay(fn) {
         localStorage.removeItem(GNOSIS_PAY_ACCESS);
         return;
       }
-      setHasGnosisPayToken(!!access.token);
-      setAccessTokenCreatedAt(access.createdAt);
+      setHasGnosisPayToken(!!access);
+      setAccessTokenCreatedAt(getJwtExpiry(access));
       onDone === null || onDone === void 0 ? void 0 : onDone();
     } else {
       var urlParams = new URLSearchParams(window.location.search);
@@ -51,11 +52,14 @@ var useGnosisPay = function useGnosisPay(fn) {
   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 access = localStorage.getItem(GNOSIS_PAY_ACCESS) || "";
+      var expiryTimestamp = getJwtExpiry(access) * 1000;
       var newTimeLeft = expiryTimestamp - Date.now();
       setTimeLeft(formatTimeLeft(newTimeLeft));
-      if (newTimeLeft <= 0 || !document.getElementById("gnosis-pay-area")) {
+      if (isGnosisPayAccessExpired(localStorage.getItem(GNOSIS_PAY_ACCESS)) || !document.getElementById("gnosis-pay-area")) {
+        localStorage.removeItem(GNOSIS_PAY_ACCESS);
+        setHasGnosisPayToken(false);
+        setAccessTokenCreatedAt(0);
         clearInterval(interval);
       }
     }, 1000);

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

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

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

@@ -4,14 +4,22 @@ export function formatTimeLeft(msLeft) {
   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" : "");
+}
+export function getJwtExpiry(token) {
+  var _a;
+  try {
+    var payloadBase64 = (_a = token === null || token === void 0 ? void 0 : token.split(".")) === null || _a === void 0 ? void 0 : _a[1];
+    if (!payloadBase64) return 0;
+    var payloadJson = atob(payloadBase64);
+    var payload = JSON.parse(payloadJson);
+    return typeof payload.exp === "number" ? payload.exp : 0;
+  } catch (error) {
+    return 0;
+  }
 }

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

@@ -10,7 +10,7 @@ var __assign = this && this.__assign || function () {
 };
 import _ from "lodash";
 import React, { useContext, useEffect, useRef, useState } from "react";
-import { LucideIcon, Tooltip } from "@fileverse/ui";
+import { cn, LucideIcon, Tooltip } from "@fileverse/ui";
 import { UNFilter } from "./constant";
 import WorkbookContext from "../../../context";
 import "./index.css";
@@ -160,6 +160,9 @@ var FormulaSearch = function FormulaSearch(props) {
     return /*#__PURE__*/React.createElement("div", {
       key: v.n,
       "data-func": v.n,
+      style: {
+        cursor: isWrongGnosisPayConnector && v.n === "GNOSISPAY" ? "not-allowed" : "pointer"
+      },
       className: "luckysheet-formula-search-item"
     }, /*#__PURE__*/React.createElement("div", {
       style: {
@@ -177,7 +180,7 @@ var FormulaSearch = function FormulaSearch(props) {
         width: "16px"
       }
     }))), /*#__PURE__*/React.createElement("div", {
-      className: "luckysheet-formula-search-func color-text-default text-body-sm"
+      className: cn("luckysheet-formula-search-func color-text-default text-body-sm", isWrongGnosisPayConnector && v.n === "GNOSISPAY" ? "color-text-disabled" : "")
     }, v.n)), /*#__PURE__*/React.createElement("div", {
       style: {
         display: "flex",

package/es/components/SheetOverlay/InputBox.js

@@ -169,6 +169,8 @@ var InputBox = function InputBox() {
   var selectActiveFormula = useCallback(function (e) {
     var _a, _b;
     var formulaName = (_b = (_a = getActiveFormula()) === null || _a === void 0 ? void 0 : _a.querySelector(".luckysheet-formula-search-func")) === null || _b === void 0 ? void 0 : _b.textContent;
+    var isWrongGnosisPayConnector = localStorage.getItem("LOGIN_METHOD") !== "walletAddress";
+    if (isWrongGnosisPayConnector && formulaName === "GNOSISPAY") return;
     if (formulaName) {
       insertSelectedFormula(formulaName);
       e.preventDefault();
@@ -178,8 +180,10 @@ var InputBox = function InputBox() {
   var selectActiveFormulaOnClick = useCallback(function (e) {
     var _a, _b;
     if (e.target.className.includes("sign-fortune")) return;
-    preText.current = inputRef.current.innerText;
     var formulaName = (_b = (_a = getActiveFormula()) === null || _a === void 0 ? void 0 : _a.querySelector(".luckysheet-formula-search-func")) === null || _b === void 0 ? void 0 : _b.textContent;
+    var isWrongGnosisPayConnector = localStorage.getItem("LOGIN_METHOD") !== "walletAddress";
+    if (isWrongGnosisPayConnector && formulaName === "GNOSISPAY") return;
+    preText.current = inputRef.current.innerText;
     if (formulaName) {
       insertSelectedFormula(formulaName);
       e.preventDefault();

package/es/components/index.d.ts

@@ -1,5 +1,5 @@
 import Workbook from "./Workbook";
-export { ERROR_MESSAGES_FLAG, SERVICES_API_KEY, } from "@fileverse-dev/formulajs/crypto-constants";
+export { ERROR_MESSAGES_FLAG, SERVICES_API_KEY, isGnosisPayAccessExpired, } from "@fileverse-dev/formulajs/crypto-constants";
 export { Workbook };
 export type { WorkbookInstance } from "./Workbook";
 export type { Cell, Sheet } from "@fileverse-dev/fortune-core";

package/es/components/index.js

@@ -1,3 +1,3 @@
 import Workbook from "./Workbook";
-export { ERROR_MESSAGES_FLAG, SERVICES_API_KEY } from "@fileverse-dev/formulajs/crypto-constants";
+export { ERROR_MESSAGES_FLAG, SERVICES_API_KEY, isGnosisPayAccessExpired } from "@fileverse-dev/formulajs/crypto-constants";
 export { Workbook };

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

@@ -220,7 +220,7 @@ var FormulaHint = function FormulaHint(props) {
     style: {
       backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
       maxHeight: "318px",
-      overflowY: "scroll"
+      overflowY: "auto"
     }
   }, fn.API_KEY && (/*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -279,7 +279,7 @@ var FormulaHint = function FormulaHint(props) {
     style: {
       borderLeft: "4px solid ".concat(hasGnosisPayToken ? "#177E23" : "#fb923c"),
       backgroundColor: "white",
-      padding: "16px",
+      padding: "8px",
       margin: "4px 4px 0px 4px",
       borderRadius: "4px"
     }
@@ -295,12 +295,12 @@ var FormulaHint = function FormulaHint(props) {
       margin: "0 0 8px 0"
     },
     className: "text-heading-xsm color-text-default"
-  }, hasGnosisPayToken ? "Access granted" : "Access required")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+  }, hasGnosisPayToken ? "Access granted" : "Connect your Gnosis Pay account")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
     style: {
-      margin: "0 0 16px 0"
+      margin: "0 0 8px 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((0, _utils.timeFromNowMessage)(timeLeft), " to use your Gnosis Pay account. Then you need to grant access again.")), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+  }, !hasGnosisPayToken ? "Grant access to your Gnosis Pay account and ensure you're using the same wallet for both Gnosis Pay and dSheet." : " You can now interact with your Gnosis Pay account for the next ".concat((0, _utils.timeFromNowMessage)(timeLeft), ". When the timer\u2019s up, just re-grant access and you're good to go!")), /*#__PURE__*/_react.default.createElement(_ui.Button, {
     onClick: grantAccess,
     disabled: hasGnosisPayToken || isWrongGnosisPayConnector || isLoading,
     className: "w-full items-center flex gap-1"

package/lib/components/SheetOverlay/FormulaHint/use-gnosis-pay.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
+var _cryptoConstants = require("@fileverse-dev/formulajs/crypto-constants");
 var _constants = require("./constants");
 var _utils = require("./utils/utils");
 var useGnosisPay = function useGnosisPay(fn) {
@@ -24,8 +25,8 @@ var useGnosisPay = function useGnosisPay(fn) {
   var isWrongGnosisPayConnector = localStorage.getItem("LOGIN_METHOD") !== "walletAddress";
   var handleGnosisPayToken = function handleGnosisPayToken(onDone) {
     if (localStorage.getItem(_constants.GNOSIS_PAY_ACCESS)) {
-      var access = JSON.parse(localStorage.getItem(_constants.GNOSIS_PAY_ACCESS) || "");
-      if (!(access === null || access === void 0 ? void 0 : access.token) || (0, _utils.isExpired)(access === null || access === void 0 ? void 0 : access.createdAt)) {
+      var access = localStorage.getItem(_constants.GNOSIS_PAY_ACCESS) || "";
+      if (!access || (0, _cryptoConstants.isGnosisPayAccessExpired)(access)) {
         if (hasGnosisPayToken) {
           setHasGnosisPayToken(false);
         }
@@ -35,8 +36,8 @@ var useGnosisPay = function useGnosisPay(fn) {
         localStorage.removeItem(_constants.GNOSIS_PAY_ACCESS);
         return;
       }
-      setHasGnosisPayToken(!!access.token);
-      setAccessTokenCreatedAt(access.createdAt);
+      setHasGnosisPayToken(!!access);
+      setAccessTokenCreatedAt((0, _utils.getJwtExpiry)(access));
       onDone === null || onDone === void 0 ? void 0 : onDone();
     } else {
       var urlParams = new URLSearchParams(window.location.search);
@@ -57,11 +58,14 @@ var useGnosisPay = function useGnosisPay(fn) {
   (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 access = localStorage.getItem(_constants.GNOSIS_PAY_ACCESS) || "";
+      var expiryTimestamp = (0, _utils.getJwtExpiry)(access) * 1000;
       var newTimeLeft = expiryTimestamp - Date.now();
       setTimeLeft((0, _utils.formatTimeLeft)(newTimeLeft));
-      if (newTimeLeft <= 0 || !document.getElementById("gnosis-pay-area")) {
+      if ((0, _cryptoConstants.isGnosisPayAccessExpired)(localStorage.getItem(_constants.GNOSIS_PAY_ACCESS)) || !document.getElementById("gnosis-pay-area")) {
+        localStorage.removeItem(_constants.GNOSIS_PAY_ACCESS);
+        setHasGnosisPayToken(false);
+        setAccessTokenCreatedAt(0);
         clearInterval(interval);
       }
     }, 1000);

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

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

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.formatTimeLeft = formatTimeLeft;
-exports.isExpired = isExpired;
+exports.getJwtExpiry = getJwtExpiry;
 exports.timeFromNowMessage = timeFromNowMessage;
 function formatTimeLeft(msLeft) {
   var totalSeconds = Math.max(0, Math.floor(msLeft / 1000));
@@ -12,14 +12,22 @@ function formatTimeLeft(msLeft) {
   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" : "");
+}
+function getJwtExpiry(token) {
+  var _a;
+  try {
+    var payloadBase64 = (_a = token === null || token === void 0 ? void 0 : token.split(".")) === null || _a === void 0 ? void 0 : _a[1];
+    if (!payloadBase64) return 0;
+    var payloadJson = atob(payloadBase64);
+    var payload = JSON.parse(payloadJson);
+    return typeof payload.exp === "number" ? payload.exp : 0;
+  } catch (error) {
+    return 0;
+  }
 }

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

@@ -169,6 +169,9 @@ var FormulaSearch = function FormulaSearch(props) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: v.n,
       "data-func": v.n,
+      style: {
+        cursor: isWrongGnosisPayConnector && v.n === "GNOSISPAY" ? "not-allowed" : "pointer"
+      },
       className: "luckysheet-formula-search-item"
     }, /*#__PURE__*/_react.default.createElement("div", {
       style: {
@@ -186,7 +189,7 @@ var FormulaSearch = function FormulaSearch(props) {
         width: "16px"
       }
     }))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "luckysheet-formula-search-func color-text-default text-body-sm"
+      className: (0, _ui.cn)("luckysheet-formula-search-func color-text-default text-body-sm", isWrongGnosisPayConnector && v.n === "GNOSISPAY" ? "color-text-disabled" : "")
     }, v.n)), /*#__PURE__*/_react.default.createElement("div", {
       style: {
         display: "flex",

package/lib/components/SheetOverlay/InputBox.js

@@ -178,6 +178,8 @@ var InputBox = function InputBox() {
   var selectActiveFormula = (0, _react.useCallback)(function (e) {
     var _a, _b;
     var formulaName = (_b = (_a = getActiveFormula()) === null || _a === void 0 ? void 0 : _a.querySelector(".luckysheet-formula-search-func")) === null || _b === void 0 ? void 0 : _b.textContent;
+    var isWrongGnosisPayConnector = localStorage.getItem("LOGIN_METHOD") !== "walletAddress";
+    if (isWrongGnosisPayConnector && formulaName === "GNOSISPAY") return;
     if (formulaName) {
       insertSelectedFormula(formulaName);
       e.preventDefault();
@@ -187,8 +189,10 @@ var InputBox = function InputBox() {
   var selectActiveFormulaOnClick = (0, _react.useCallback)(function (e) {
     var _a, _b;
     if (e.target.className.includes("sign-fortune")) return;
-    preText.current = inputRef.current.innerText;
     var formulaName = (_b = (_a = getActiveFormula()) === null || _a === void 0 ? void 0 : _a.querySelector(".luckysheet-formula-search-func")) === null || _b === void 0 ? void 0 : _b.textContent;
+    var isWrongGnosisPayConnector = localStorage.getItem("LOGIN_METHOD") !== "walletAddress";
+    if (isWrongGnosisPayConnector && formulaName === "GNOSISPAY") return;
+    preText.current = inputRef.current.innerText;
     if (formulaName) {
       insertSelectedFormula(formulaName);
       e.preventDefault();

package/lib/components/index.d.ts

@@ -1,5 +1,5 @@
 import Workbook from "./Workbook";
-export { ERROR_MESSAGES_FLAG, SERVICES_API_KEY, } from "@fileverse-dev/formulajs/crypto-constants";
+export { ERROR_MESSAGES_FLAG, SERVICES_API_KEY, isGnosisPayAccessExpired, } from "@fileverse-dev/formulajs/crypto-constants";
 export { Workbook };
 export type { WorkbookInstance } from "./Workbook";
 export type { Cell, Sheet } from "@fileverse-dev/fortune-core";

package/lib/components/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "Workbook", {
     return _Workbook.default;
   }
 });
+Object.defineProperty(exports, "isGnosisPayAccessExpired", {
+  enumerable: true,
+  get: function get() {
+    return _cryptoConstants.isGnosisPayAccessExpired;
+  }
+});
 var _Workbook = _interopRequireDefault(require("./Workbook"));
 var _cryptoConstants = require("@fileverse-dev/formulajs/crypto-constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse-dev/fortune-react",
-  "version": "1.0.88-patch-6",
+  "version": "1.0.88-patch-8",
   "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-6",
+    "@fileverse-dev/fortune-core": "1.0.88-patch-8",
     "@fileverse/ui": "^4.1.7-patch-21",
     "@tippyjs/react": "^4.2.6",
     "@types/regenerator-runtime": "^0.13.6",