diff --git a/app/ui/lib/Identicon.tsx b/app/ui/lib/Identicon.tsx index 776762d6a..e09b5f661 100644 --- a/app/ui/lib/Identicon.tsx +++ b/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
+ const pixels = useMemo(() => getPixels(name), [name]) + return ( +
+ + + {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 + })} + + +
+ ) } diff --git a/package-lock.json b/package-lock.json index a6c88ca36..2d7bd0570 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,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", @@ -28,6 +27,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", @@ -61,6 +61,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", @@ -2036,14 +2037,6 @@ "react-dom": ">=16.8.0" } }, - "node_modules/@oxide/identicon": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/@oxide/identicon/-/identicon-0.0.4.tgz", - "integrity": "sha512-LcjQCjBo+XABZEidOpQAYYa/CUA8FaJZrb/JK1HGkPKzWAx94O+zFmnmxTWqvl7VGOEGyYObNxB43v3BCVe3iw==", - "dependencies": { - "md5": "^2.3.0" - } - }, "node_modules/@oxide/react-asciidoc": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/@oxide/react-asciidoc/-/react-asciidoc-0.2.3.tgz", @@ -5573,6 +5566,12 @@ "@types/lodash": "*" } }, + "node_modules/@types/md5": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/@types/md5/-/md5-2.3.5.tgz", + "integrity": "sha512-/i42wjYNgE6wf0j2bcTX6kuowmdL/6PE4IVitMpm2eYKBUuYCprdcWVK+xEF0gcV6ufMCRhtxmReGfc6hIK7Jw==", + "dev": true + }, "node_modules/@types/mdast": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz", @@ -20992,14 +20991,6 @@ } } }, - "@oxide/identicon": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/@oxide/identicon/-/identicon-0.0.4.tgz", - "integrity": "sha512-LcjQCjBo+XABZEidOpQAYYa/CUA8FaJZrb/JK1HGkPKzWAx94O+zFmnmxTWqvl7VGOEGyYObNxB43v3BCVe3iw==", - "requires": { - "md5": "^2.3.0" - } - }, "@oxide/react-asciidoc": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/@oxide/react-asciidoc/-/react-asciidoc-0.2.3.tgz", @@ -23356,6 +23347,12 @@ "@types/lodash": "*" } }, + "@types/md5": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/@types/md5/-/md5-2.3.5.tgz", + "integrity": "sha512-/i42wjYNgE6wf0j2bcTX6kuowmdL/6PE4IVitMpm2eYKBUuYCprdcWVK+xEF0gcV6ufMCRhtxmReGfc6hIK7Jw==", + "dev": true + }, "@types/mdast": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz", diff --git a/package.json b/package.json index 5c9b3449f..d2eb36c92 100644 --- a/package.json +++ b/package.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",