feat: identicon

package.json

@@ -45,6 +45,7 @@
     "file-saver": "^2.0.5",
     "has-ansi": "^5.0.1",
     "highlight.js": "^11.10.0",
+    "jdenticon": "^3.3.0",
     "jotai": "^2.8.4",
     "js-yaml": "^4.1.0",
     "jszip": "^3.10.1",

pnpm-lock.yaml

@@ -96,6 +96,9 @@ dependencies:
   highlight.js:
     specifier: ^11.10.0
     version: 11.11.1
+  jdenticon:
+    specifier: ^3.3.0
+    version: 3.3.0
   jotai:
     specifier: ^2.8.4
     version: 2.13.1(@babel/core@7.28.4)(@types/react@18.3.24)(react@18.3.1)
@@ -3616,7 +3619,7 @@ packages:
     resolution: {integrity: sha512-hy8b7Y1J8OGe6LbAjj3xniQrj3v6lsivCcrmf4TzSgPzLkhIeKgc5IZnT7ReIqmEuodjfO8EYAuoFvIrHi/+jQ==, tarball: https://registry.npmjs.org/@types/history/-/history-5.0.0.tgz}
     deprecated: This is a stub types definition. history provides its own type definitions, so you do not need this installed.
     dependencies:
-      history: 4.10.1
+      history: 5.3.0
 
   /@types/hoist-non-react-statics@3.3.7(@types/react@18.3.24):
     resolution: {integrity: sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==, tarball: https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz}
@@ -3742,7 +3745,7 @@ packages:
       '@types/history': 4.7.11
       '@types/react': 18.3.26
       '@types/react-router': 5.1.20
-      redux: 3.7.2
+      redux: 4.2.1
 
   /@types/react-router@5.1.20:
     resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==, tarball: https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz}
@@ -6415,6 +6418,12 @@ packages:
   /caniuse-lite@1.0.30001750:
     resolution: {integrity: sha512-cuom0g5sdX6rw00qOoLNSFCJ9/mYIsuSOA+yzpDw8eopiFqcVwQvZHqov0vmEighRxX++cfC0Vg1G+1Iy/mSpQ==, tarball: https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001750.tgz}
 
+  /canvas-renderer@2.2.1:
+    resolution: {integrity: sha512-RrBgVL5qCEDIXpJ6NrzyRNoTnXxYarqm/cS/W6ERhUJts5UQtt/XPEosGN3rqUkZ4fjBArlnCbsISJ+KCFnIAg==, tarball: https://registry.npmjs.org/canvas-renderer/-/canvas-renderer-2.2.1.tgz}
+    dependencies:
+      '@types/node': 24.7.2
+    dev: false
+
   /case-sensitive-paths-webpack-plugin@2.4.0:
     resolution: {integrity: sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==, tarball: https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz}
     engines: {node: '>=4'}
@@ -9097,7 +9106,6 @@ packages:
     resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==, tarball: https://registry.npmjs.org/history/-/history-5.3.0.tgz}
     dependencies:
       '@babel/runtime': 7.28.3
-    dev: false
 
   /hmac-drbg@1.0.1:
     resolution: {integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==, tarball: https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz}
@@ -9822,6 +9830,14 @@ packages:
     resolution: {integrity: sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==, tarball: https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz}
     dev: false
 
+  /jdenticon@3.3.0:
+    resolution: {integrity: sha512-DhuBRNRIybGPeAjMjdHbkIfiwZCCmf8ggu7C49jhp6aJ7DYsZfudnvnTY5/1vgUhrGA7JaDAx1WevnpjCPvaGg==, tarball: https://registry.npmjs.org/jdenticon/-/jdenticon-3.3.0.tgz}
+    engines: {node: '>=6.4.0'}
+    hasBin: true
+    dependencies:
+      canvas-renderer: 2.2.1
+    dev: false
+
   /jest-haste-map@29.7.0:
     resolution: {integrity: sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==, tarball: https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.7.0.tgz}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -14388,7 +14404,7 @@ packages:
       adjust-sourcemap-loader: 4.0.0
       convert-source-map: 1.9.0
       loader-utils: 2.0.4
-      postcss: 8.4.31
+      postcss: 8.5.6
       source-map: 0.6.1
     dev: false
 

src/pages/_components/identicon.tsx

@@ -0,0 +1,26 @@
+import jdenticon from 'jdenticon';
+import React, { useEffect, useRef } from 'react';
+
+interface IdenticonProps {
+  value: string;
+  size: number;
+}
+
+const Identicon: React.FC<IdenticonProps> = ({
+  value = 'test',
+  size = 28
+}: IdenticonProps) => {
+  const icon = useRef<any>(null);
+
+  useEffect(() => {
+    jdenticon?.update(icon.current, 'value');
+  }, [value]);
+
+  return (
+    <>
+      <svg data-jdenticon-value={value} height={size} ref={icon} width={size} />
+    </>
+  );
+};
+
+export default Identicon;