Use mumurhash for identicon colors (#1553)

packages/ui/components/ui/identicon/generate.ts

@@ -1,12 +1,12 @@
 // Inspired by: https://github.com/vercel/avatar
 
-import djb2a from 'djb2a';
 import color from 'tinycolor2';
+import Murmur from 'murmurhash3js';
 
 // Deterministically getting a gradient from a string for use as an identicon
 export const generateGradient = (str: string) => {
   // Get first color
-  const hash = djb2a(str);
+  const hash = Murmur.x86.hash32(str);
   const c = color({ h: hash % 360, s: 0.95, l: 0.5 });
 
   const tetrad = c.tetrad(); // 4 colors spaced around the color wheel, the first being the input
@@ -22,11 +22,10 @@ export const generateGradient = (str: string) => {
 
 export const generateSolidColor = (str: string) => {
   // Get color
-  const hash = djb2a(str);
+  const hash = Murmur.x86.hash32(str);
   const c = color({ h: hash % 360, s: 0.95, l: 0.5 })
     .saturate(0)
     .darken(20);
-
   return {
     bg: c.toHexString(),
     // get readable text color

packages/ui/package.json

@@ -59,10 +59,10 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "0.2.0",
-    "djb2a": "^2.0.0",
     "framer-motion": "^11.2.4",
     "humanize-duration": "^3.32.0",
     "lucide-react": "^0.378.0",
+    "murmurhash3js": "^3.0.1",
     "react-dom": "^18.3.1",
     "react-loader-spinner": "^6.1.6",
     "react-router-dom": "^6.23.1",
@@ -85,6 +85,7 @@
     "@storybook/react-vite": "8.1.1",
     "@storybook/theming": "^8.1.11",
     "@types/humanize-duration": "^3.27.4",
+    "@types/murmurhash3js": "^3.0.7",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@types/tinycolor2": "^1.4.6",