From 49c6bb71a192704aef2c0b9f7a9a2d4a4c078ac2 Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 17 Oct 2025 10:14:11 +0800 Subject: [PATCH] feat: identicon --- package.json | 1 + pnpm-lock.yaml | 24 ++++++++++++++++++++---- src/pages/_components/identicon.tsx | 26 ++++++++++++++++++++++++++ 3 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 src/pages/_components/identicon.tsx diff --git a/package.json b/package.json index 424edb32..9c7360b0 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2b31881d..ed637858 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/pages/_components/identicon.tsx b/src/pages/_components/identicon.tsx new file mode 100644 index 00000000..1db67b36 --- /dev/null +++ b/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 = ({ + value = 'test', + size = 28 +}: IdenticonProps) => { + const icon = useRef(null); + + useEffect(() => { + jdenticon?.update(icon.current, 'value'); + }, [value]); + + return ( + <> + + + ); +}; + +export default Identicon;