Inline identicon (#2145)

* copy identicon into the repo

* render svg directly

* clean it up

Author: david-crespo

app/ui/lib/Identicon.tsx

@@ -5,9 +5,35 @@
  *
  * Copyright Oxide Computer Company
  */
+import md5 from 'md5'
 import { useMemo } from 'react'
 
-import { generateIdenticon, md5 } from '@oxide/identicon'
+type Rectangle = { x: number; y: number; isOn: boolean }
+
+const getPixels = (s: string) => {
+  const hash = md5(s)
+  const buffer: Rectangle[] = []
+
+  for (let i = 0; i < 18; i++) {
+    const isOn = hash.charCodeAt(i) % 2 === 0
+
+    if (i < 3) {
+      // Start with the two central columns
+      buffer.push({ x: 2, y: i, isOn })
+      buffer.push({ x: 3, y: i, isOn })
+    } else if (i < 6) {
+      // Move out to the columns one from the edge
+      buffer.push({ x: 1, y: i - 3, isOn })
+      buffer.push({ x: 4, y: i - 3, isOn })
+    } else if (i < 9) {
+      // Fill the outside columns
+      buffer.push({ x: 0, y: i - 6, isOn })
+      buffer.push({ x: 5, y: i - 6, isOn })
+    }
+  }
+
+  return buffer
+}
 
 type IdenticonProps = {
   /** string used to generate the graphic */
@@ -16,6 +42,19 @@ type IdenticonProps = {
 }
 
 export function Identicon({ name, className }: IdenticonProps) {
-  const content = useMemo(() => generateIdenticon(md5(name)), [name])
-  return <div className={className} dangerouslySetInnerHTML={{ __html: content }} />
+  const pixels = useMemo(() => getPixels(name), [name])
+  return (
+    <div className={className}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28">
+        <g fill="currentColor">
+          {pixels.map((pixel) => {
+            if (!pixel.isOn) return null
+            const x = pixel.x * 3 + 2 * pixel.x
+            const y = pixel.y * 8 + 2 * pixel.y
+            return <rect key={`${x}|${y}`} x={x} y={y} width="3" height="8" />
+          })}
+        </g>
+      </svg>
+    </div>
+  )
 }

package-lock.json

@@ -33,7 +33,6 @@
     "@floating-ui/react": "^0.26.11",
     "@headlessui/react": "^1.7.18",
     "@oxide/design-system": "^1.2.10",
-    "@oxide/identicon": "0.0.4",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -48,6 +47,7 @@
     "filesize": "^10.1.1",
     "lodash.throttle": "^4.1.1",
     "match-sorter": "^6.3.4",
+    "md5": "^2.3.0",
     "mousetrap": "^1.6.5",
     "p-map": "^7.0.2",
     "p-retry": "^6.2.0",
@@ -81,6 +81,7 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
     "@types/lodash.throttle": "^4.1.9",
+    "@types/md5": "^2.3.5",
     "@types/mousetrap": "^1.6.15",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",