murmurhash mirror PR

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

@@ -61,6 +61,7 @@
     "framer-motion": "^11.2.4",
     "humanize-duration": "^3.32.0",
     "lucide-react": "^0.378.0",
+    "murmurhash3js": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-loader-spinner": "^6.1.6",
@@ -83,6 +84,7 @@
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^15.0.7",
     "@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",