@rotki/ui-library 2.14.1 → 2.15.0

package/dist/components/logos/RuiLogo.vue.js

@@ -1,11 +1,11 @@
-import { defineComponent, useTemplateRef, ref, computed, watch, watchEffect, useSSRContext, onServerPrefetch, openBlock, createElementBlock, normalizeStyle, unref, toDisplayString, createCommentVNode } from "vue";
-import { get, set, isClient } from "@vueuse/shared";
+import { defineComponent, ref, useTemplateRef, computed, watch, watchEffect, useSSRContext, onServerPrefetch, openBlock, createElementBlock, normalizeStyle, createElementVNode, normalizeClass, unref, createCommentVNode, toDisplayString } from "vue";
+import { isClient, set, get } from "@vueuse/shared";
 import fallback from "./logo.svg.js";
-import { getLogoSources } from "./use-logo-sources.js";
+import { getCachedLogoSources, getVerifiedLogoUrl, getLogoSources, removeVerifiedLogoUrl, setVerifiedLogoUrl } from "./use-logo-sources.js";
 const _hoisted_1 = ["src"];
 const _hoisted_2 = ["src"];
 const _hoisted_3 = {
-  key: 3,
+  key: 0,
   class: "text-h4 text-rui-primary dark:text-white"
 };
 const appName = "rotki";
@@ -23,47 +23,87 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     src: {}
   },
   setup(__props) {
-    const customImageRef = useTemplateRef("customImageRef");
-    const error = ref(false);
-    const decoding = ref(!!__props.logo && !__props.src);
-    const pendingSources = ref(false);
-    const emptyLinks = {
+    const emptyLinks = () => ({
       app: void 0,
       website: void 0,
       about: void 0,
       emptyScreen: void 0
-    };
-    const externalSources = ref(emptyLinks);
-    const externalSource = computed(() => {
-      if (__props.src)
-        return __props.src;
-      const sources = get(externalSources);
-      if (!__props.logo || !sources[__props.logo]) {
-        set(decoding, get(pendingSources));
+    });
+    const error = ref(false);
+    const seasonalReady = ref(false);
+    const externalSources = ref(emptyLinks());
+    const customImageRef = useTemplateRef("customImageRef");
+    if (isClient && __props.logo && !__props.src) {
+      const cached = getCachedLogoSources(__props.branch);
+      if (cached)
+        set(externalSources, cached);
+    }
+    function buildExternalUrl(sources) {
+      if (!__props.logo || !sources[__props.logo])
         return void 0;
-      }
       const url = `https://raw.githubusercontent.com/rotki/data/${__props.branch}/assets/icons/${sources[__props.logo]}`;
       if (__props.uniqueKey !== void 0)
         return `${url}?key=${__props.uniqueKey}`;
       return url;
+    }
+    const externalSource = computed(() => {
+      if (__props.src)
+        return __props.src;
+      return buildExternalUrl(get(externalSources));
     });
+    const showCustom = computed(() => !!__props.src || !!get(externalSource) && get(seasonalReady) && !get(error));
+    if (isClient && __props.logo && !__props.src) {
+      const verifiedUrl = getVerifiedLogoUrl(__props.branch, String(__props.logo));
+      const currentUrl = get(externalSource);
+      if (verifiedUrl && currentUrl && verifiedUrl === currentUrl)
+        set(seasonalReady, true);
+    }
+    function preloadImage(url) {
+      if (!isClient)
+        return;
+      const existing = document.head.querySelectorAll('link[rel="preload"][as="image"]');
+      for (const link2 of existing) {
+        if (link2.href === url)
+          return;
+      }
+      const link = document.createElement("link");
+      link.rel = "preload";
+      link.as = "image";
+      link.href = url;
+      document.head.appendChild(link);
+    }
+    if (isClient && __props.logo && !__props.src) {
+      const url = get(externalSource);
+      if (url)
+        preloadImage(url);
+    }
     async function fetchSources() {
       if (!__props.logo || __props.src)
         return;
-      set(pendingSources, true);
       const links = await getLogoSources(__props.branch);
       if (links)
         set(externalSources, links);
-      set(pendingSources, false);
     }
-    watch(
-      () => get(customImageRef)?.complete,
-      (complete) => {
-        if (complete) {
-          get(customImageRef)?.decode().catch(() => set(error, true)).finally(() => set(decoding, false));
-        }
-      }
-    );
+    function onImageError() {
+      set(error, true);
+      if (__props.logo)
+        removeVerifiedLogoUrl(__props.branch, String(__props.logo));
+    }
+    function onImageLoaded() {
+      const img = get(customImageRef);
+      if (!img)
+        return;
+      img.decode().then(() => {
+        set(seasonalReady, true);
+        const url = get(externalSource);
+        if (url && __props.logo)
+          setVerifiedLogoUrl(__props.branch, String(__props.logo), url);
+      }).catch(() => set(error, true));
+    }
+    watch(() => get(customImageRef)?.complete, (complete) => {
+      if (complete)
+        onImageLoaded();
+    });
     watchEffect(fetchSources);
     if (!isClient)
       useSSRContext();
@@ -75,30 +115,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: "gap-x-4 flex items-center relative",
         style: normalizeStyle({ height: `${__props.size}rem` })
       }, [
-        !unref(externalSource) && unref(decoding) ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          role: "img",
-          "aria-label": appName,
-          class: "h-full transition delay-0 opacity-0",
-          style: normalizeStyle({ width: `${__props.size}rem` })
-        }, null, 4)) : unref(externalSource) && (!unref(error) || unref(decoding)) ? (openBlock(), createElementBlock("img", {
-          key: 1,
-          ref_key: "customImageRef",
-          ref: customImageRef,
-          src: unref(externalSource),
-          alt: appName,
-          "data-image": "custom",
-          class: "h-full transition ease-out duration-200 delay-100",
-          style: normalizeStyle({ width: `${__props.size}rem` }),
-          onError: _cache[0] || (_cache[0] = ($event) => error.value = true)
-        }, null, 44, _hoisted_1)) : (openBlock(), createElementBlock("img", {
-          key: 2,
-          src: unref(fallback),
-          alt: appName,
-          "data-image": "fallback",
-          class: "h-full transition ease-out duration-200 delay-100",
-          style: normalizeStyle({ width: `${__props.size}rem` })
-        }, null, 12, _hoisted_2)),
+        createElementVNode("div", {
+          class: "relative",
+          style: normalizeStyle({ width: `${__props.size}rem`, height: `${__props.size}rem` })
+        }, [
+          createElementVNode("img", {
+            src: unref(fallback),
+            alt: appName,
+            "data-image": "fallback",
+            class: normalizeClass(["absolute inset-0 h-full w-full transition ease-out duration-200", unref(showCustom) ? "opacity-0" : "opacity-100"])
+          }, null, 10, _hoisted_1),
+          unref(externalSource) && !unref(error) ? (openBlock(), createElementBlock("img", {
+            key: 0,
+            ref_key: "customImageRef",
+            ref: customImageRef,
+            src: unref(externalSource),
+            alt: appName,
+            "data-image": "custom",
+            class: normalizeClass(["absolute inset-0 h-full w-full transition ease-out duration-200", unref(showCustom) ? "opacity-100" : "opacity-0 pointer-events-none"]),
+            onError: _cache[0] || (_cache[0] = ($event) => onImageError()),
+            onLoad: _cache[1] || (_cache[1] = ($event) => onImageLoaded())
+          }, null, 42, _hoisted_2)) : createCommentVNode("", true)
+        ], 4),
         __props.text ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(appName))) : createCommentVNode("", true)
       ], 4);
     };

package/dist/components/logos/RuiLogo.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiLogo.vue.js","sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isClient } from '@vueuse/shared';\nimport { useSSRContext } from 'vue';\nimport fallback from '@/components/logos/logo.svg';\nimport { getLogoSources } from '@/components/logos/use-logo-sources';\n\nexport interface ExternalLinks {\n  drawer?: string;\n  app?: string;\n  website?: string;\n  about?: string;\n  emptyScreen?: string;\n  [key: string]: string | undefined;\n}\n\nexport interface Props {\n  text?: boolean;\n  branch?: 'develop' | 'main' | string;\n  logo?: keyof ExternalLinks;\n  size?: string | number; // in rems\n  uniqueKey?: string | number;\n  src?: string;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst { text = false, branch = 'develop', logo, size = 3, uniqueKey, src } = defineProps<Props>();\n\nconst customImageRef = useTemplateRef<HTMLImageElement>('customImageRef');\nconst error = ref<boolean>(false);\nconst decoding = ref<boolean>(!!logo && !src);\nconst pendingSources = ref<boolean>(false);\nconst appName = 'rotki';\nconst emptyLinks: ExternalLinks = {\n  app: undefined,\n  website: undefined,\n  about: undefined,\n  emptyScreen: undefined,\n};\nconst externalSources = ref<ExternalLinks>(emptyLinks);\n\nconst externalSource = computed<string | undefined>(() => {\n  if (src)\n    return src;\n\n  const sources = get(externalSources);\n  if (!logo || !sources[logo]) {\n    set(decoding, get(pendingSources));\n    return undefined;\n  }\n\n  const url = `https://raw.githubusercontent.com/rotki/data/${branch}/assets/icons/${sources[logo]}`;\n\n  if (uniqueKey !== undefined)\n    return `${url}?key=${uniqueKey}`;\n\n  return url;\n});\n\nasync function fetchSources(): Promise<void> {\n  if (!logo || src)\n    return;\n\n  set(pendingSources, true);\n  const links = await getLogoSources(branch);\n\n  if (links)\n    set(externalSources, links);\n\n  set(pendingSources, false);\n}\n\nwatch(\n  () => get(customImageRef)?.complete,\n  (complete) => {\n    if (complete) {\n      get(customImageRef)\n        ?.decode()\n        .catch(() => set(error, true))\n        .finally(() => set(decoding, false));\n    }\n  },\n);\n\nwatchEffect(fetchSources);\n\nif (!isClient)\n  useSSRContext();\n\nonServerPrefetch(async () => {\n  await fetchSources();\n});\n</script>\n\n<template>\n  <div\n    class=\"gap-x-4 flex items-center relative\"\n    :style=\"{ height: `${size}rem` }\"\n  >\n    <div\n      v-if=\"!externalSource && decoding\"\n      role=\"img\"\n      :aria-label=\"appName\"\n      class=\"h-full transition delay-0 opacity-0\"\n      :style=\"{ width: `${size}rem` }\"\n    />\n    <img\n      v-else-if=\"externalSource && (!error || decoding)\"\n      ref=\"customImageRef\"\n      :src=\"externalSource\"\n      :alt=\"appName\"\n      data-image=\"custom\"\n      class=\"h-full transition ease-out duration-200 delay-100\"\n      :style=\"{ width: `${size}rem` }\"\n      @error=\"error = true\"\n    />\n    <img\n      v-else\n      :src=\"fallback\"\n      :alt=\"appName\"\n      data-image=\"fallback\"\n      class=\"h-full transition ease-out duration-200 delay-100\"\n      :style=\"{ width: `${size}rem` }\"\n    />\n    <div\n      v-if=\"text\"\n      class=\"text-h4 text-rui-primary dark:text-white\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_toDisplayString"],"mappings":";;;;;;;;;;AAkCA,MAAM,UAAU;;;;;;;;;;;;;;;AAJhB,UAAM,iBAAiB,eAAiC,gBAAgB;AACxE,UAAM,QAAQ,IAAa,KAAK;AAChC,UAAM,WAAW,IAAa,CAAC,CAAC,gBAAQ,CAAC,WAAG;AAC5C,UAAM,iBAAiB,IAAa,KAAK;AAEzC,UAAM,aAA4B;AAAA,MAChC,KAAK;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAEf,UAAM,kBAAkB,IAAmB,UAAU;AAErD,UAAM,iBAAiB,SAA6B,MAAM;AACxD,UAAI,QAAA;AACF,eAAO,QAAA;AAET,YAAM,UAAU,IAAI,eAAe;AACnC,UAAI,CAAC,QAAA,QAAQ,CAAC,QAAQ,QAAA,IAAI,GAAG;AAC3B,YAAI,UAAU,IAAI,cAAc,CAAC;AACjC,eAAO;AAAA,MACT;AAEA,YAAM,MAAM,gDAAgD,QAAA,MAAM,iBAAiB,QAAQ,QAAA,IAAI,CAAC;AAEhG,UAAI,QAAA,cAAc;AAChB,eAAO,GAAG,GAAG,QAAQ,QAAA,SAAS;AAEhC,aAAO;AAAA,IACT,CAAC;AAED,mBAAe,eAA8B;AAC3C,UAAI,CAAC,QAAA,QAAQ,QAAA;AACX;AAEF,UAAI,gBAAgB,IAAI;AACxB,YAAM,QAAQ,MAAM,eAAe,cAAM;AAEzC,UAAI;AACF,YAAI,iBAAiB,KAAK;AAE5B,UAAI,gBAAgB,KAAK;AAAA,IAC3B;AAEA;AAAA,MACE,MAAM,IAAI,cAAc,GAAG;AAAA,MAC3B,CAAC,aAAa;AACZ,YAAI,UAAU;AACZ,cAAI,cAAc,GACd,OAAA,EACD,MAAM,MAAM,IAAI,OAAO,IAAI,CAAC,EAC5B,QAAQ,MAAM,IAAI,UAAU,KAAK,CAAC;AAAA,QACvC;AAAA,MACF;AAAA,IAAA;AAGF,gBAAY,YAAY;AAExB,QAAI,CAAC;AACH,oBAAA;AAEF,qBAAiB,YAAY;AAC3B,YAAM,aAAA;AAAA,IACR,CAAC;;0BAICA,mBAmCM,OAAA;AAAA,QAlCJ,OAAM;AAAA,QACL,mCAAoB,QAAA,IAAI,OAAA;AAAA,MAAA;QAGhB,CAAAC,MAAA,cAAA,KAAkBA,MAAA,QAAA,kBAD3BD,mBAME,OAAA;AAAA;UAJA,MAAK;AAAA,UACJ,cAAY;AAAA,UACb,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,QAAA,eAGbC,MAAA,cAAA,MAAc,CAAMA,MAAA,KAAA,KAASA,MAAA,QAAA,mBAD1CD,mBASE,OAAA;AAAA;mBAPI;AAAA,UAAJ,KAAI;AAAA,UACH,KAAKC,MAAA,cAAA;AAAA,UACL,KAAK;AAAA,UACN,cAAW;AAAA,UACX,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,UACvB,+CAAO,MAAA,QAAK;AAAA,QAAA,0CAEfD,mBAOE,OAAA;AAAA;UALC,KAAKC,MAAA,QAAA;AAAA,UACL,KAAK;AAAA,UACN,cAAW;AAAA,UACX,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,QAAA;QAGlB,QAAA,qBADRD,mBAKM,OALN,YAKME,gBADD,OAAO,CAAA;;;;;"}
+{"version":3,"file":"RuiLogo.vue.js","sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isClient } from '@vueuse/shared';\nimport { useSSRContext } from 'vue';\nimport fallback from '@/components/logos/logo.svg';\nimport { getCachedLogoSources, getLogoSources, getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl } from '@/components/logos/use-logo-sources';\n\nexport interface ExternalLinks {\n  drawer?: string;\n  app?: string;\n  website?: string;\n  about?: string;\n  emptyScreen?: string;\n  [key: string]: string | undefined;\n}\n\nexport interface Props {\n  text?: boolean;\n  branch?: 'develop' | 'main' | string;\n  logo?: keyof ExternalLinks;\n  size?: string | number; // in rems\n  uniqueKey?: string | number;\n  src?: string;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst { text = false, branch = 'develop', logo, size = 3, uniqueKey, src } = defineProps<Props>();\n\nconst appName = 'rotki';\nconst emptyLinks: () => ExternalLinks = () => ({\n  app: undefined,\n  website: undefined,\n  about: undefined,\n  emptyScreen: undefined,\n});\n\nconst error = ref<boolean>(false);\nconst seasonalReady = ref<boolean>(false);\nconst externalSources = ref<ExternalLinks>(emptyLinks());\n\nconst customImageRef = useTemplateRef<HTMLImageElement>('customImageRef');\n\n// Synchronously hydrate from sessionStorage so the URL is available immediately on refresh\nif (isClient && logo && !src) {\n  const cached = getCachedLogoSources(branch);\n  if (cached)\n    set(externalSources, cached);\n}\n\nfunction buildExternalUrl(sources: ExternalLinks): string | undefined {\n  if (!logo || !sources[logo])\n    return undefined;\n\n  const url = `https://raw.githubusercontent.com/rotki/data/${branch}/assets/icons/${sources[logo]}`;\n\n  if (uniqueKey !== undefined)\n    return `${url}?key=${uniqueKey}`;\n\n  return url;\n}\n\nconst externalSource = computed<string | undefined>(() => {\n  if (src)\n    return src;\n\n  return buildExternalUrl(get(externalSources));\n});\n\nconst showCustom = computed<boolean>(() => !!src || (!!get(externalSource) && get(seasonalReady) && !get(error)));\n\n// If we have a previously verified URL that matches the current source, trust it immediately\nif (isClient && logo && !src) {\n  const verifiedUrl = getVerifiedLogoUrl(branch, String(logo));\n  const currentUrl = get(externalSource);\n  if (verifiedUrl && currentUrl && verifiedUrl === currentUrl)\n    set(seasonalReady, true);\n}\n\nfunction preloadImage(url: string): void {\n  if (!isClient)\n    return;\n\n  const existing = document.head.querySelectorAll<HTMLLinkElement>('link[rel=\"preload\"][as=\"image\"]');\n  for (const link of existing) {\n    if (link.href === url)\n      return;\n  }\n\n  const link = document.createElement('link');\n  link.rel = 'preload';\n  link.as = 'image';\n  link.href = url;\n  document.head.appendChild(link);\n}\n\n// Inject a preload hint for the seasonal image so the browser starts fetching early\nif (isClient && logo && !src) {\n  const url = get(externalSource);\n  if (url)\n    preloadImage(url);\n}\n\nasync function fetchSources(): Promise<void> {\n  if (!logo || src)\n    return;\n\n  const links = await getLogoSources(branch);\n\n  if (links)\n    set(externalSources, links);\n}\n\nfunction onImageError(): void {\n  set(error, true);\n  if (logo)\n    removeVerifiedLogoUrl(branch, String(logo));\n}\n\nfunction onImageLoaded(): void {\n  const img = get(customImageRef);\n  if (!img)\n    return;\n\n  img.decode()\n    .then(() => {\n      set(seasonalReady, true);\n      // Cache the verified URL so subsequent page loads can trust it immediately\n      const url = get(externalSource);\n      if (url && logo)\n        setVerifiedLogoUrl(branch, String(logo), url);\n    })\n    .catch(() => set(error, true));\n}\n\nwatch(() => get(customImageRef)?.complete, (complete) => {\n  if (complete)\n    onImageLoaded();\n});\n\nwatchEffect(fetchSources);\n\nif (!isClient)\n  useSSRContext();\n\nonServerPrefetch(async () => {\n  await fetchSources();\n});\n</script>\n\n<template>\n  <div\n    class=\"gap-x-4 flex items-center relative\"\n    :style=\"{ height: `${size}rem` }\"\n  >\n    <div\n      class=\"relative\"\n      :style=\"{ width: `${size}rem`, height: `${size}rem` }\"\n    >\n      <!-- Fallback: always in DOM, fades out when custom image is ready -->\n      <img\n        :src=\"fallback\"\n        :alt=\"appName\"\n        data-image=\"fallback\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-0' : 'opacity-100'\"\n      />\n\n      <!-- Custom/seasonal image: fades in when decoded -->\n      <img\n        v-if=\"externalSource && !error\"\n        ref=\"customImageRef\"\n        :src=\"externalSource\"\n        :alt=\"appName\"\n        data-image=\"custom\"\n        class=\"absolute inset-0 h-full w-full transition ease-out duration-200\"\n        :class=\"showCustom ? 'opacity-100' : 'opacity-0 pointer-events-none'\"\n        @error=\"onImageError()\"\n        @load=\"onImageLoaded()\"\n      />\n    </div>\n\n    <div\n      v-if=\"text\"\n      class=\"text-h4 text-rui-primary dark:text-white\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"names":["link","_createElementBlock","_createElementVNode","_normalizeStyle","_unref","_normalizeClass","_toDisplayString"],"mappings":"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"}

package/dist/components/logos/use-logo-sources.d.ts

@@ -1,10 +1,29 @@
 import type { ExternalLinks } from '../../components/logos/RuiLogo.vue.js';
+/**
+ * Returns cached logo sources synchronously from sessionStorage.
+ * Returns undefined if nothing is cached or sessionStorage is unavailable.
+ */
+export declare function getCachedLogoSources(branch: string): ExternalLinks | undefined;
+/**
+ * Returns a previously verified (successfully decoded) seasonal logo URL
+ * for the given branch and logo type from sessionStorage.
+ */
+export declare function getVerifiedLogoUrl(branch: string, logo: string): string | undefined;
+/**
+ * Stores a verified seasonal logo URL in sessionStorage after successful decode.
+ */
+export declare function setVerifiedLogoUrl(branch: string, logo: string, url: string): void;
+/**
+ * Removes a previously verified seasonal logo URL from sessionStorage.
+ * Called when an image fails to load so stale entries aren't trusted on next load.
+ */
+export declare function removeVerifiedLogoUrl(branch: string, logo: string): void;
 /**
  * Fetches external logo sources for a given branch, deduplicating concurrent requests.
  * Uses a module-level cache so all RuiLogo instances share a single fetch per branch.
  */
 export declare function getLogoSources(branch: string): Promise<ExternalLinks | undefined>;
 /**
- * Clears the module-level cache. Exposed for testing only.
+ * Clears the module-level cache and sessionStorage entries. Exposed for testing only.
  */
 export declare function clearLogoSourcesCache(): void;

package/dist/components/logos/use-logo-sources.js

@@ -1,11 +1,50 @@
 import { transformCase } from "../../utils/helpers.js";
 const ASSET_MAPPINGS_URL = "https://raw.githubusercontent.com/rotki/data";
+const SESSION_SOURCES_PREFIX = "rui-logo-sources";
+const SESSION_VERIFIED_PREFIX = "rui-logo-verified";
 const sourcesCache = /* @__PURE__ */ new Map();
 function isExternalLinks(value) {
   if (typeof value !== "object" || value === null)
     return false;
   return Object.values(value).every((v) => v === void 0 || typeof v === "string");
 }
+function writeSessionStorage(key, value) {
+  try {
+    sessionStorage.setItem(key, value);
+  } catch {
+  }
+}
+function readSessionStorage(key) {
+  try {
+    return sessionStorage.getItem(key) ?? void 0;
+  } catch {
+    return void 0;
+  }
+}
+function getCachedLogoSources(branch) {
+  const raw = readSessionStorage(`${SESSION_SOURCES_PREFIX}:${branch}`);
+  if (!raw)
+    return void 0;
+  try {
+    const parsed = JSON.parse(raw);
+    if (isExternalLinks(parsed))
+      return parsed;
+  } catch {
+  }
+  return void 0;
+}
+function getVerifiedLogoUrl(branch, logo) {
+  return readSessionStorage(`${SESSION_VERIFIED_PREFIX}:${branch}:${logo}`);
+}
+function setVerifiedLogoUrl(branch, logo, url) {
+  writeSessionStorage(`${SESSION_VERIFIED_PREFIX}:${branch}:${logo}`, url);
+}
+function removeVerifiedLogoUrl(branch, logo) {
+  try {
+    sessionStorage.removeItem(`${SESSION_VERIFIED_PREFIX}:${branch}:${logo}`);
+  } catch {
+  }
+}
 async function fetchSourcesFromNetwork(branch) {
   try {
     const response = await fetch(
@@ -15,8 +54,10 @@ async function fetchSourcesFromNetwork(branch) {
       return void 0;
     const json = await response.json();
     const links = transformCase(json?.logo, "camelCase");
-    if (isExternalLinks(links))
+    if (isExternalLinks(links)) {
+      writeSessionStorage(`${SESSION_SOURCES_PREFIX}:${branch}`, JSON.stringify(links));
       return links;
+    }
     return void 0;
   } catch {
     return void 0;
@@ -31,6 +72,10 @@ function getLogoSources(branch) {
   return promise;
 }
 export {
-  getLogoSources
+  getCachedLogoSources,
+  getLogoSources,
+  getVerifiedLogoUrl,
+  removeVerifiedLogoUrl,
+  setVerifiedLogoUrl
 };
 //# sourceMappingURL=use-logo-sources.js.map

package/dist/components/logos/use-logo-sources.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-logo-sources.js","sources":["../../../src/components/logos/use-logo-sources.ts"],"sourcesContent":["import type { ExternalLinks } from '@/components/logos/RuiLogo.vue';\nimport { transformCase } from '@/utils/helpers';\n\nconst ASSET_MAPPINGS_URL = 'https://raw.githubusercontent.com/rotki/data';\n\n// Module-level cache: deduplicates asset-mappings fetches across all RuiLogo instances.\n// Keyed by branch so different branches don't share stale data.\nconst sourcesCache = new Map<string, Promise<ExternalLinks | undefined>>();\n\nfunction isExternalLinks(value: unknown): value is ExternalLinks {\n  if (typeof value !== 'object' || value === null)\n    return false;\n\n  return Object.values(value).every(v => v === undefined || typeof v === 'string');\n}\n\nasync function fetchSourcesFromNetwork(branch: string): Promise<ExternalLinks | undefined> {\n  try {\n    const response = await fetch(\n      `${ASSET_MAPPINGS_URL}/${branch}/constants/asset-mappings.json`,\n    );\n\n    if (!response.ok)\n      return undefined;\n\n    const json = await response.json();\n    const links = transformCase(json?.logo, 'camelCase');\n    if (isExternalLinks(links))\n      return links;\n\n    return undefined;\n  }\n  catch {\n    return undefined;\n  }\n}\n\n/**\n * Fetches external logo sources for a given branch, deduplicating concurrent requests.\n * Uses a module-level cache so all RuiLogo instances share a single fetch per branch.\n */\nexport function getLogoSources(branch: string): Promise<ExternalLinks | undefined> {\n  const cached = sourcesCache.get(branch);\n  if (cached)\n    return cached;\n\n  const promise = fetchSourcesFromNetwork(branch);\n  sourcesCache.set(branch, promise);\n  return promise;\n}\n\n/**\n * Clears the module-level cache. Exposed for testing only.\n */\nexport function clearLogoSourcesCache(): void {\n  sourcesCache.clear();\n}\n"],"names":[],"mappings":";AAGA,MAAM,qBAAqB;AAI3B,MAAM,mCAAmB,IAAA;AAEzB,SAAS,gBAAgB,OAAwC;AAC/D,MAAI,OAAO,UAAU,YAAY,UAAU;AACzC,WAAO;AAET,SAAO,OAAO,OAAO,KAAK,EAAE,MAAM,OAAK,MAAM,UAAa,OAAO,MAAM,QAAQ;AACjF;AAEA,eAAe,wBAAwB,QAAoD;AACzF,MAAI;AACF,UAAM,WAAW,MAAM;AAAA,MACrB,GAAG,kBAAkB,IAAI,MAAM;AAAA,IAAA;AAGjC,QAAI,CAAC,SAAS;AACZ,aAAO;AAET,UAAM,OAAO,MAAM,SAAS,KAAA;AAC5B,UAAM,QAAQ,cAAc,MAAM,MAAM,WAAW;AACnD,QAAI,gBAAgB,KAAK;AACvB,aAAO;AAET,WAAO;AAAA,EACT,QACM;AACJ,WAAO;AAAA,EACT;AACF;AAMO,SAAS,eAAe,QAAoD;AACjF,QAAM,SAAS,aAAa,IAAI,MAAM;AACtC,MAAI;AACF,WAAO;AAET,QAAM,UAAU,wBAAwB,MAAM;AAC9C,eAAa,IAAI,QAAQ,OAAO;AAChC,SAAO;AACT;"}
+{"version":3,"file":"use-logo-sources.js","sources":["../../../src/components/logos/use-logo-sources.ts"],"sourcesContent":["import type { ExternalLinks } from '@/components/logos/RuiLogo.vue';\nimport { transformCase } from '@/utils/helpers';\n\nconst ASSET_MAPPINGS_URL = 'https://raw.githubusercontent.com/rotki/data';\nconst SESSION_SOURCES_PREFIX = 'rui-logo-sources';\nconst SESSION_VERIFIED_PREFIX = 'rui-logo-verified';\n\n// Module-level cache: deduplicates asset-mappings fetches across all RuiLogo instances.\n// Keyed by branch so different branches don't share stale data.\nconst sourcesCache = new Map<string, Promise<ExternalLinks | undefined>>();\n\nfunction isExternalLinks(value: unknown): value is ExternalLinks {\n  if (typeof value !== 'object' || value === null)\n    return false;\n\n  return Object.values(value).every(v => v === undefined || typeof v === 'string');\n}\n\nfunction writeSessionStorage(key: string, value: string): void {\n  try {\n    sessionStorage.setItem(key, value);\n  }\n  catch {\n    // sessionStorage may be full or unavailable\n  }\n}\n\nfunction readSessionStorage(key: string): string | undefined {\n  try {\n    return sessionStorage.getItem(key) ?? undefined;\n  }\n  catch {\n    return undefined;\n  }\n}\n\nfunction clearSessionStorage(prefix: string): void {\n  try {\n    const keysToRemove: string[] = [];\n    for (let i = 0; i < sessionStorage.length; i++) {\n      const key = sessionStorage.key(i);\n      if (key?.startsWith(prefix))\n        keysToRemove.push(key);\n    }\n    keysToRemove.forEach(key => sessionStorage.removeItem(key));\n  }\n  catch {\n    // sessionStorage may be unavailable\n  }\n}\n\n/**\n * Returns cached logo sources synchronously from sessionStorage.\n * Returns undefined if nothing is cached or sessionStorage is unavailable.\n */\nexport function getCachedLogoSources(branch: string): ExternalLinks | undefined {\n  const raw = readSessionStorage(`${SESSION_SOURCES_PREFIX}:${branch}`);\n  if (!raw)\n    return undefined;\n\n  try {\n    const parsed: unknown = JSON.parse(raw);\n    if (isExternalLinks(parsed))\n      return parsed;\n  }\n  catch {\n    // Invalid JSON, ignore\n  }\n  return undefined;\n}\n\n/**\n * Returns a previously verified (successfully decoded) seasonal logo URL\n * for the given branch and logo type from sessionStorage.\n */\nexport function getVerifiedLogoUrl(branch: string, logo: string): string | undefined {\n  return readSessionStorage(`${SESSION_VERIFIED_PREFIX}:${branch}:${logo}`);\n}\n\n/**\n * Stores a verified seasonal logo URL in sessionStorage after successful decode.\n */\nexport function setVerifiedLogoUrl(branch: string, logo: string, url: string): void {\n  writeSessionStorage(`${SESSION_VERIFIED_PREFIX}:${branch}:${logo}`, url);\n}\n\n/**\n * Removes a previously verified seasonal logo URL from sessionStorage.\n * Called when an image fails to load so stale entries aren't trusted on next load.\n */\nexport function removeVerifiedLogoUrl(branch: string, logo: string): void {\n  try {\n    sessionStorage.removeItem(`${SESSION_VERIFIED_PREFIX}:${branch}:${logo}`);\n  }\n  catch {\n    // sessionStorage may be unavailable\n  }\n}\n\nasync function fetchSourcesFromNetwork(branch: string): Promise<ExternalLinks | undefined> {\n  try {\n    const response = await fetch(\n      `${ASSET_MAPPINGS_URL}/${branch}/constants/asset-mappings.json`,\n    );\n\n    if (!response.ok)\n      return undefined;\n\n    const json = await response.json();\n    const links = transformCase(json?.logo, 'camelCase');\n    if (isExternalLinks(links)) {\n      writeSessionStorage(`${SESSION_SOURCES_PREFIX}:${branch}`, JSON.stringify(links));\n      return links;\n    }\n\n    return undefined;\n  }\n  catch {\n    return undefined;\n  }\n}\n\n/**\n * Fetches external logo sources for a given branch, deduplicating concurrent requests.\n * Uses a module-level cache so all RuiLogo instances share a single fetch per branch.\n */\nexport function getLogoSources(branch: string): Promise<ExternalLinks | undefined> {\n  const cached = sourcesCache.get(branch);\n  if (cached)\n    return cached;\n\n  const promise = fetchSourcesFromNetwork(branch);\n  sourcesCache.set(branch, promise);\n  return promise;\n}\n\n/**\n * Clears the module-level cache and sessionStorage entries. Exposed for testing only.\n */\nexport function clearLogoSourcesCache(): void {\n  sourcesCache.clear();\n  clearSessionStorage(SESSION_SOURCES_PREFIX);\n  clearSessionStorage(SESSION_VERIFIED_PREFIX);\n}\n"],"names":[],"mappings":";AAGA,MAAM,qBAAqB;AAC3B,MAAM,yBAAyB;AAC/B,MAAM,0BAA0B;AAIhC,MAAM,mCAAmB,IAAA;AAEzB,SAAS,gBAAgB,OAAwC;AAC/D,MAAI,OAAO,UAAU,YAAY,UAAU;AACzC,WAAO;AAET,SAAO,OAAO,OAAO,KAAK,EAAE,MAAM,OAAK,MAAM,UAAa,OAAO,MAAM,QAAQ;AACjF;AAEA,SAAS,oBAAoB,KAAa,OAAqB;AAC7D,MAAI;AACF,mBAAe,QAAQ,KAAK,KAAK;AAAA,EACnC,QACM;AAAA,EAEN;AACF;AAEA,SAAS,mBAAmB,KAAiC;AAC3D,MAAI;AACF,WAAO,eAAe,QAAQ,GAAG,KAAK;AAAA,EACxC,QACM;AACJ,WAAO;AAAA,EACT;AACF;AAqBO,SAAS,qBAAqB,QAA2C;AAC9E,QAAM,MAAM,mBAAmB,GAAG,sBAAsB,IAAI,MAAM,EAAE;AACpE,MAAI,CAAC;AACH,WAAO;AAET,MAAI;AACF,UAAM,SAAkB,KAAK,MAAM,GAAG;AACtC,QAAI,gBAAgB,MAAM;AACxB,aAAO;AAAA,EACX,QACM;AAAA,EAEN;AACA,SAAO;AACT;AAMO,SAAS,mBAAmB,QAAgB,MAAkC;AACnF,SAAO,mBAAmB,GAAG,uBAAuB,IAAI,MAAM,IAAI,IAAI,EAAE;AAC1E;AAKO,SAAS,mBAAmB,QAAgB,MAAc,KAAmB;AAClF,sBAAoB,GAAG,uBAAuB,IAAI,MAAM,IAAI,IAAI,IAAI,GAAG;AACzE;AAMO,SAAS,sBAAsB,QAAgB,MAAoB;AACxE,MAAI;AACF,mBAAe,WAAW,GAAG,uBAAuB,IAAI,MAAM,IAAI,IAAI,EAAE;AAAA,EAC1E,QACM;AAAA,EAEN;AACF;AAEA,eAAe,wBAAwB,QAAoD;AACzF,MAAI;AACF,UAAM,WAAW,MAAM;AAAA,MACrB,GAAG,kBAAkB,IAAI,MAAM;AAAA,IAAA;AAGjC,QAAI,CAAC,SAAS;AACZ,aAAO;AAET,UAAM,OAAO,MAAM,SAAS,KAAA;AAC5B,UAAM,QAAQ,cAAc,MAAM,MAAM,WAAW;AACnD,QAAI,gBAAgB,KAAK,GAAG;AAC1B,0BAAoB,GAAG,sBAAsB,IAAI,MAAM,IAAI,KAAK,UAAU,KAAK,CAAC;AAChF,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,QACM;AACJ,WAAO;AAAA,EACT;AACF;AAMO,SAAS,eAAe,QAAoD;AACjF,QAAM,SAAS,aAAa,IAAI,MAAM;AACtC,MAAI;AACF,WAAO;AAET,QAAM,UAAU,wBAAwB,MAAM;AAC9C,eAAa,IAAI,QAAQ,OAAO;AAChC,SAAO;AACT;"}

package/dist/style.css

@@ -850,6 +850,9 @@ html[data-theme="dark"], html.dark {
 .sticky {
   position: sticky;
 }
+.inset-0 {
+  inset: 0px;
+}
 .inset-y-0 {
   top: 0px;
   bottom: 0px;
@@ -2410,9 +2413,6 @@ html[data-theme="dark"], html.dark {
 .delay-0 {
   transition-delay: 0s;
 }
-.delay-100 {
-  transition-delay: 100ms;
-}
 .delay-200 {
   transition-delay: 200ms;
 }

package/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@rotki/ui-library",
-  "version": "2.14.1",
+  "version": "2.15.0",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rotki/ui-library",
-  "version": "2.14.1",
+  "version": "2.15.0",
   "description": "A vue design system and component library for rotki",
   "type": "module",
   "keywords": [
@@ -77,14 +77,14 @@
     }
   },
   "peerDependencies": {
-    "@vueuse/core": ">13.0.0",
-    "@vueuse/shared": ">13.0.0",
     "dayjs": ">=1.11.13 <12",
     "vue": ">=3.5.0"
   },
   "web-types": "dist/web-types.json",
   "dependencies": {
     "@popperjs/core": "2.11.8",
+    "@vueuse/core": "14.2.1",
+    "@vueuse/shared": "14.2.1",
     "scule": "1.3.0",
     "tinycolor2": "1.6.0"
   },
@@ -107,9 +107,6 @@
     "@vitest/ui": "4.1.0",
     "@vue/test-utils": "2.4.6",
     "@vue/tsconfig": "0.9.0",
-    "@vueuse/core": "14.2.1",
-    "@vueuse/math": "14.2.1",
-    "@vueuse/shared": "14.2.1",
     "autoprefixer": "10.4.27",
     "cac": "7.0.0",
     "consola": "3.4.2",