@vellumlabs/cexplorer-sdk 1.1.8 → 1.2.0

package/dist/ui/sensitiveContentWarning/index.d.ts

@@ -0,0 +1,131 @@
+/**
+ * Props for the SensitiveContentWarning component
+ */
+export interface SensitiveContentWarningProps {
+    /**
+     * Callback function called when user clicks the Display button.
+     * This should trigger showing the sensitive/user-generated content.
+     *
+     * @example
+     * <SensitiveContentWarning onDisplay={() => setShowContent(true)} />
+     */
+    onDisplay: () => void;
+    /**
+     * Optional localStorage key for remembering user preference.
+     * If not provided, defaults to "showSensitiveContent".
+     *
+     * @default "showSensitiveContent"
+     * @example
+     * <SensitiveContentWarning
+     *   onDisplay={() => setShowContent(true)}
+     *   localStorageKey="showUserGeneratedContent"
+     * />
+     */
+    localStorageKey?: string;
+    /**
+     * Optional custom title text.
+     *
+     * @default "User-generated content"
+     * @example
+     * <SensitiveContentWarning
+     *   onDisplay={() => setShowContent(true)}
+     *   title="Sensitive Content Warning"
+     * />
+     */
+    title?: string;
+    /**
+     * Optional custom description text.
+     *
+     * @default "Following content is user-generated and unmoderated by the Cexplorer team."
+     * @example
+     * <SensitiveContentWarning
+     *   onDisplay={() => setShowContent(true)}
+     *   description="This content may contain sensitive information."
+     * />
+     */
+    description?: string;
+}
+/**
+ * SensitiveContentWarning displays a warning message before showing user-generated or sensitive content.
+ *
+ * This component acts as a content gate, warning users about potentially sensitive or unmoderated
+ * content. Users can choose to display the content immediately or check "Remember this setting"
+ * to automatically show similar content in the future via localStorage.
+ *
+ * **Key Features:**
+ * - Warning icon with clear messaging about content type
+ * - "Remember this setting" checkbox for localStorage persistence
+ * - "Display" button with eye icon to reveal content
+ * - Customizable title, description, and localStorage key
+ * - Follows GDPR-friendly approach by requiring explicit user consent
+ *
+ * **localStorage Behavior:**
+ * - When checkbox is checked and user clicks Display, preference is saved to localStorage
+ * - Parent component should check localStorage on mount to skip showing this warning
+ * - Uses localStorage key "showSensitiveContent" by default (customizable via props)
+ *
+ * **Common Use Cases:**
+ * - Warn before showing user-generated blockchain metadata
+ * - Gate access to unmoderated community content
+ * - Display warning for potentially sensitive transaction memos
+ * - Show notice before displaying external/untrusted data
+ * - Content moderation in NFT metadata display
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with state management
+ * const [showContent, setShowContent] = useState(() => {
+ *   return localStorage.getItem("showSensitiveContent") === "true";
+ * });
+ *
+ * if (!showContent) {
+ *   return <SensitiveContentWarning onDisplay={() => setShowContent(true)} />;
+ * }
+ *
+ * return <div>{sensitiveContent}</div>;
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom text and localStorage key
+ * <SensitiveContentWarning
+ *   onDisplay={() => setShowContent(true)}
+ *   localStorageKey="showNFTMetadata"
+ *   title="NFT Metadata Warning"
+ *   description="This NFT contains user-uploaded metadata that may not be verified."
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // In a transaction detail view
+ * const TransactionMemo = ({ memo }: { memo: string }) => {
+ *   const [showMemo, setShowMemo] = useState(() => {
+ *     return localStorage.getItem("showTransactionMemos") === "true";
+ *   });
+ *
+ *   if (!showMemo) {
+ *     return (
+ *       <SensitiveContentWarning
+ *         onDisplay={() => setShowMemo(true)}
+ *         localStorageKey="showTransactionMemos"
+ *         title="Transaction Memo"
+ *         description="This transaction contains a user-generated memo."
+ *       />
+ *     );
+ *   }
+ *
+ *   return <p className="text-text-sm">{memo}</p>;
+ * };
+ * ```
+ *
+ * @param {SensitiveContentWarningProps} props - Component props
+ * @param {() => void} props.onDisplay - Callback when Display button is clicked
+ * @param {string} [props.localStorageKey="showSensitiveContent"] - localStorage key for user preference
+ * @param {string} [props.title="User-generated content"] - Warning title text
+ * @param {string} [props.description] - Warning description text
+ * @returns {JSX.Element} A centered warning component with icon, text, checkbox, and display button
+ */
+export declare const SensitiveContentWarning: ({ onDisplay, localStorageKey, title, description, }: SensitiveContentWarningProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/sensitiveContentWarning/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/sensitiveContentWarning/index.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AACH,eAAO,MAAM,uBAAuB,GAAI,qDAKrC,4BAA4B,4CA0C9B,CAAC"}

package/dist/ui/truncatedText/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/truncatedText/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAGtC;;;;GAIG;AACH,UAAU,kBAAkB;IAC1B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,aAAa,GAAI,4CAI3B,kBAAkB,4CAiEpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/truncatedText/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;GAIG;AACH,UAAU,kBAAkB;IAC1B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,aAAa,GAAI,4CAI3B,kBAAkB,4CAmFpB,CAAC"}

package/dist/utils/format.d.ts

@@ -103,6 +103,8 @@ export declare const toUtcDate: (input: string | Date | number) => Date;
  * @param {string | Date | number} [input] - Date to format
  * @param {boolean} [hideTime=false] - Hide time portion, show only date
  * @param {boolean} [returnString=false] - Return ISO string instead of JSX
+ * @param {boolean} [showRelative=false] - Show relative time (e.g., "10 minutes ago") as main text
+ * @param {boolean} [showSecondary=false] - Show secondary date format below main text (small, muted)
  * @returns {JSX.Element | string} Formatted date with tooltip or ISO string
  *
  * @example
@@ -116,8 +118,30 @@ export declare const toUtcDate: (input: string | Date | number) => Date;
  * formatDate("2024-01-15T10:30:00Z", true)
  * // Returns: <Tooltip>Jan 15 2024</Tooltip>
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Withdrawals: relative time with absolute date below
+ * formatDate("2024-01-15T10:30:00Z", false, false, true, true)
+ * // Returns:
+ * // <div>
+ * //   10 minutes ago
+ * //   <small class="text-muted">15.1.2024, 10:30:45</small>
+ * // </div>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Rewards: formatted date with alternative format below
+ * formatDate("2024-11-03T10:30:00Z", false, false, false, true)
+ * // Returns:
+ * // <div>
+ * //   Nov 03 2024
+ * //   <small class="text-muted">3.11.2024, 10:30:45</small>
+ * // </div>
+ * ```
  */
-export declare const formatDate: (input?: string | Date | number, hideTime?: boolean, returnString?: boolean) => string | import("react/jsx-runtime").JSX.Element;
+export declare const formatDate: (input?: string | Date | number, hideTime?: boolean, returnString?: boolean, showRelative?: boolean, showSecondary?: boolean) => string | import("react/jsx-runtime").JSX.Element;
 /**
  * Formats future timestamp as relative time ("in X time").
  *

package/dist/utils/format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/utils/format.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,YAAY,GACvB,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,EAC/B,MAAM,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,EAC7C,aAAa,MAAM,uBAkBpB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,GAAG,MAAM,GAAG,SAAS,KAAG,MAIlE,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAW/D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,sBAAsB,GACjC,KAAK,MAAM,EACX,qBAAqB,OAAO,EAC5B,mBAAmB,MAAM,KACxB,MAWF,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS,GAAI,OAAO,MAAM,GAAG,IAAI,GAAG,MAAM,KAAG,IAOzD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,UAAU,GACrB,QAAQ,MAAM,GAAG,IAAI,GAAG,MAAM,EAC9B,WAAW,OAAO,EAClB,eAAc,OAAe,qDAkB9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,GAAI,WAAW,MAAM,WA2B7C,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,SAAS,MAAM,KAAG,MAsBrD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,GAAI,WAAW,MAAM,WA2B9C,CAAC"}
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/utils/format.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,YAAY,GACvB,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,EAC/B,MAAM,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,EAC7C,aAAa,MAAM,uBAkBpB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,GAAG,MAAM,GAAG,SAAS,KAAG,MAIlE,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAW/D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,sBAAsB,GACjC,KAAK,MAAM,EACX,qBAAqB,OAAO,EAC5B,mBAAmB,MAAM,KACxB,MAWF,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS,GAAI,OAAO,MAAM,GAAG,IAAI,GAAG,MAAM,KAAG,IAOzD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,UAAU,GACrB,QAAQ,MAAM,GAAG,IAAI,GAAG,MAAM,EAC9B,WAAW,OAAO,EAClB,eAAc,OAAe,EAC7B,eAAc,OAAe,EAC7B,gBAAe,OAAe,qDAqC/B,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,GAAI,WAAW,MAAM,WA2B7C,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,SAAS,MAAM,KAAG,MAsBrD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,GAAI,WAAW,MAAM,WA2B9C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellumlabs/cexplorer-sdk",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "description": "Cexplorer UI Component Library with theme system",
   "author": "Vellum Labs",
   "main": "dist/index.umd.js",