@ludo.ninja/components 2.4.51 → 2.4.52

package/build/modules/opportunity/OpportunityCard.d.ts

@@ -2,8 +2,6 @@ import { TOpportunity } from './type';
 import { IProject } from "@ludo.ninja/api/build/graphql_tools/__generated__/opportunitiesHost/schema";
 import { Maybe } from "graphql/jsutils/Maybe";
 type OpportunityBackground = "green" | "blue" | "pink" | "orange" | "blue_pink" | "green_blue" | "yellow" | "blue_gray" | "gray";
-export declare const HEADER_BACKGROUNDS: OpportunityBackground[];
-export declare const HEADER_BACKGROUNDS_MAP: Record<string, OpportunityBackground>;
 export declare const OpportunityCard: ({ opportunity, toolsForRemove, headColorImage, }: {
     opportunity: TOpportunity & {
         project?: Maybe<Pick<IProject, "symbol" | "name" | "contract" | "originalMediaUrl" | "mediaUrl">>;

package/build/modules/opportunity/OpportunityCard.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OpportunityCard = exports.HEADER_BACKGROUNDS_MAP = exports.HEADER_BACKGROUNDS = void 0;
+exports.OpportunityCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const useDislikeOpportunity_1 = require("../../api/server-opportunities/mutations/useDislikeOpportunity");
 const useLikeOpportunity_1 = require("../../api/server-opportunities/mutations/useLikeOpportunity");
@@ -11,6 +11,7 @@ const useOpenOpportunity_1 = __importDefault(require("../../api/server-opportuni
 const data_1 = __importDefault(require("../../entities/labelCreationType/data"));
 const vars_1 = require("../../fonts/vars");
 const OpportunityDropDown_1 = require("./OpportunityDropDown");
+const generateCardSvgBackground_1 = require("./generateCardSvgBackground");
 const store_1 = require("../user/store");
 const heart_svg_1 = __importDefault(require("../../public/cards/heart"));
 const env_1 = require("../../store/env");
@@ -36,28 +37,6 @@ const moment_1 = __importDefault(require("moment/moment"));
 const react_1 = require("react");
 const sanitize_html_1 = __importDefault(require("sanitize-html"));
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.HEADER_BACKGROUNDS = [
-    "green",
-    "blue",
-    "pink",
-    "orange",
-    "blue_pink",
-    "green_blue",
-    "yellow",
-    "blue_gray",
-    "gray",
-];
-exports.HEADER_BACKGROUNDS_MAP = {
-    DePin: "green",
-    GameFi: "pink",
-    DeFi: "blue",
-    MemeCoins: "orange",
-    "All Projects": "blue_pink",
-    "AI Agents": "green_blue",
-    RWA: "yellow",
-    Other: "blue_gray",
-    "Token Graveyard": "gray",
-};
 const SWrapperLink = styled_components_1.default.a `
   position: relative;
   background-color: ${colors_2.WhiteColor};
@@ -95,7 +74,7 @@ const StyledCardHead = styled_components_1.default.div `
   display: flex;
   align-items: center;
 
-  background-image: url("${({ backgroundImage }) => `${constants_1.staticLink}/background_images/${backgroundImage || exports.HEADER_BACKGROUNDS[0]}.svg`}");
+  background-image: url("${({ backgroundImage }) => backgroundImage}");
   background-size: cover;
   //.imgWrapper {
   //  width: 100%;
@@ -361,9 +340,11 @@ const OpportunityCard = ({ opportunity, toolsForRemove, headColorImage, }) => {
     const sanitizedHtml = (0, sanitize_html_1.default)(opportunity?.description || "", {
         allowedTags: ["b", "i", "em", "strong", "br", "div"],
     });
-    return ((0, jsx_runtime_1.jsxs)(SWrapperLink, { href: opportunityLink, target: "_blank", onClick: () => openOpportunityAction({ opportunityId: opportunity.opportunityId }), children: [(0, jsx_runtime_1.jsx)(StyledCardHead, { backgroundImage: headColorImage ||
-                    exports.HEADER_BACKGROUNDS_MAP[opportunity?.categoryName || "Other"] ||
-                    exports.HEADER_BACKGROUNDS_MAP["Other"], children: (0, jsx_runtime_1.jsx)(OpportunityName, { title: opportunity.name, children: opportunity.name }) }), (0, jsx_runtime_1.jsxs)(StyledCardContent, { children: [(0, jsx_runtime_1.jsx)("div", { className: "cardContent", children: (0, jsx_runtime_1.jsxs)("div", { className: "cardContentWrapper", children: [opportunity?.project && ((0, jsx_runtime_1.jsxs)(ProjectBlock, { children: [Boolean(opportunity?.project?.mediaUrl) && !isProjectIconErrorLoading && ((0, jsx_runtime_1.jsx)("img", { className: "icon", src: opportunity?.project?.mediaUrl
+    const svg = (0, generateCardSvgBackground_1.generateCardSvgBackground)(opportunity?.categoryName || "Other");
+    const backgroundImage = headColorImage
+        ? `${constants_1.staticLink}/background_images/${headColorImage}.svg`
+        : `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+    return ((0, jsx_runtime_1.jsxs)(SWrapperLink, { href: opportunityLink, target: "_blank", onClick: () => openOpportunityAction({ opportunityId: opportunity.opportunityId }), children: [(0, jsx_runtime_1.jsx)(StyledCardHead, { backgroundImage: backgroundImage, children: (0, jsx_runtime_1.jsx)(OpportunityName, { title: opportunity.name, children: opportunity.name }) }), (0, jsx_runtime_1.jsxs)(StyledCardContent, { children: [(0, jsx_runtime_1.jsx)("div", { className: "cardContent", children: (0, jsx_runtime_1.jsxs)("div", { className: "cardContentWrapper", children: [opportunity?.project && ((0, jsx_runtime_1.jsxs)(ProjectBlock, { children: [Boolean(opportunity?.project?.mediaUrl) && !isProjectIconErrorLoading && ((0, jsx_runtime_1.jsx)("img", { className: "icon", src: opportunity?.project?.mediaUrl
                                                 ? `${getMediaENVDomain()}/projects/${opportunity?.project.mediaUrl}`
                                                 : opportunity?.project?.originalMediaUrl || "", alt: opportunity?.project?.name || opportunity?.projectContract, onError: () => {
                                                 setIsProjectIconErrorLoading(true);

package/build/modules/opportunity/generateCardSvgBackground.d.ts

@@ -0,0 +1 @@
+export declare const generateCardSvgBackground: (cardType: string, width?: number, height?: number) => string;

package/build/modules/opportunity/generateCardSvgBackground.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateCardSvgBackground = void 0;
+const djb2 = (str) => {
+    let h = 5381;
+    for (let i = 0; i < str.length; i++) {
+        h = ((h << 5) + h) ^ str.charCodeAt(i);
+        h = h >>> 0;
+    }
+    return h;
+};
+const fnv1a = (str) => {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < str.length; i++) {
+        h ^= str.charCodeAt(i);
+        h = Math.imul(h, 0x01000193) >>> 0;
+    }
+    return h;
+};
+const unit = (n) => {
+    return (n >>> 0) / 0x100000000;
+};
+const hslToRgb = (h, s, l) => {
+    const sv = s / 100, lv = l / 100;
+    const c = (1 - Math.abs(2 * lv - 1)) * sv;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = lv - c / 2;
+    let r = 0, g = 0, b = 0;
+    if (h < 60) {
+        r = c;
+        g = x;
+    }
+    else if (h < 120) {
+        r = x;
+        g = c;
+    }
+    else if (h < 180) {
+        g = c;
+        b = x;
+    }
+    else if (h < 240) {
+        g = x;
+        b = c;
+    }
+    else if (h < 300) {
+        r = x;
+        b = c;
+    }
+    else {
+        r = c;
+        b = x;
+    }
+    return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
+};
+const toHex = (r, g, b) => {
+    return "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0").toUpperCase()).join("");
+};
+const getCardColors = (cardType) => {
+    const h1 = djb2(cardType), h2 = fnv1a(cardType), h3 = djb2(cardType + "\x00b"), h4 = fnv1a(cardType + "\x00c");
+    const baseHue = unit(h1) * 360;
+    const accentHue = (baseHue + 30 + unit(h2) * 60) % 360;
+    const isGrey = unit(h4) < 0.1;
+    const bgS = isGrey ? 10 + unit(h2) * 15 : 40 + unit(h2) * 40;
+    const bgL = isGrey ? 75 + unit(h3) * 10 : 78 + unit(h3) * 12;
+    const acS = isGrey ? 5 + unit(h3) * 10 : 85 + unit(h3) * 15;
+    const acL = isGrey ? 65 + unit(h1) * 10 : 55 + unit(h4) * 15;
+    const background = toHex(...hslToRgb(baseHue, bgS, bgL));
+    const accentHex = toHex(...hslToRgb(accentHue, acS, acL));
+    const alpha = Math.round(0.9 * 255)
+        .toString(16)
+        .toUpperCase();
+    return { background, accentHex, accent: accentHex + alpha };
+};
+const generateCardSvgBackground = (cardType, width = 252, height = 40) => {
+    const { background, accentHex } = BASE_LABEL_COLORS[cardType.toLowerCase()] || getCardColors(cardType);
+    const sid = cardType.replace(/[^a-zA-Z0-9]/g, "_");
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none">
+  <g clip-path="url(#c_${sid})">
+    <rect width="${width}" height="${height}" fill="${background}"/>
+    <g opacity="0.5" filter="url(#f_${sid})">
+      <ellipse cx="44.9994" cy="-28.3162" rx="113.177" ry="82.5021" transform="rotate(165.754 44.9994 -28.3162)" fill="${accentHex}" fill-opacity="0.9"/>
+    </g>
+  </g>
+  <defs>
+    <filter id="f_${sid}"  x="-140.58" y="-187.016" width="371.159" height="317.399" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="37" result="effect1_foregroundBlur"/>
+    </filter>
+    <clipPath id="c_${sid}"><rect width="${width}" height="${height}" fill="white"/></clipPath>
+  </defs>
+</svg>`;
+};
+exports.generateCardSvgBackground = generateCardSvgBackground;
+const BASE_LABEL_COLORS = {
+    depin: { background: "#8DEC8A", accentHex: "#5EC1FF" },
+    gamefi: { background: "#DCAEFF", accentHex: "#FC58FF" },
+    defi: { background: "#A7ADFF", accentHex: "#58EBFF" },
+    memecoins: { background: "#FFD873", accentHex: "#FF5888" },
+    "all projects": { background: "#F4A7FF", accentHex: "#07DEFF" },
+    "ai agents": { background: "#8AE1F6", accentHex: "#4BED9C" },
+    rwa: { background: "#EBDEB4", accentHex: "#FFC328" },
+    other: { background: "#D0CDE1", accentHex: "#AA99F6" },
+    "token graveyard": { background: "#CECECE", accentHex: "#9E9E9E" },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.4.51",
+  "version": "2.4.52",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",