Change identicon to use polkadot identicon

dappforce · Apr 5, 2024 · dd9c63c · dd9c63c
1 parent 0efcf22
commit dd9c63c
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -88,6 +88,7 @@
     "@opd/g2plot-react": "^2.6.0",
     "@polkadot/extension-dapp": "^0.44.6",
     "@polkadot/ui-keyring": "^2.9.8",
+    "@polkadot/ui-shared": "3.1.4",
     "@reduxjs/toolkit": "^1.3.4",
     "@subsocial/api": "0.8.10",
     "@subsocial/data-hub-sdk": "dappforce/subsocial-data-hub-sdk#staging",

diff --git a/src/components/utils/IdentityIcon.tsx b/src/components/utils/IdentityIcon.tsx
@@ -1,38 +1,79 @@
+import { Circle } from '@polkadot/ui-shared/icons/types'
 import Avatar from 'antd/lib/avatar/avatar'
-import React, { useEffect, useRef } from 'react'
+import React, { useMemo } from 'react'
 import { DEFAULT_AVATAR_SIZE } from 'src/config/Size.config'
 
+import { polkadotIcon } from '@polkadot/ui-shared'
 import clsx from 'clsx'
-import * as jdenticon from 'jdenticon'
 
-type JdenticonProps = {
+type PolkadotIdenticonProps = {
   value: string
   size: number
   className?: string
   style?: React.CSSProperties
 }
 
-const Jdenticon = ({ value, size, ...props }: JdenticonProps) => {
-  const icon = useRef<any>(null)
-  useEffect(() => {
-    jdenticon.update(icon?.current, value)
-  }, [value])
-
+const PolkadotIdenticon = ({ value, size, ...props }: PolkadotIdenticonProps) => {
   return (
     <div>
-      <svg data-jdenticon-value={value} height={size} ref={icon} width={size} {...props} />
+      <PolkadotIcon
+        address={value}
+        size={size}
+        className={clsx('h-full w-full [&_svg]:h-full [&_svg]:w-full', props.className)}
+        style={props.style}
+      />
     </div>
   )
 }
 
-export const IdentityIcon = React.memo((allProps: JdenticonProps) => {
+function renderCircle({ cx, cy, fill, r }: Circle, key: number): React.ReactNode {
+  return <circle cx={cx} cy={cy} fill={fill} key={key} r={r} />
+}
+
+interface Props {
+  address: string
+  className?: string
+  isAlternative?: boolean
+  size: number
+  style?: React.CSSProperties
+}
+/**
+ * Code taken from https://github.com/polkadot-js/ui/blob/master/packages/react-identicon/src/icons/Polkadot.tsx
+ * @polkadot/ui-shared newest version needs node >=v18 so we can't use it
+ * instead, we installed @polkadot/ui-shared v3.1 which is compatible with node v16
+ */
+function PolkadotIcon({
+  address,
+  className = '',
+  isAlternative = false,
+  size,
+  style = {},
+}: Props): React.ReactElement<Props> {
+  const circles = useMemo(() => polkadotIcon(address, { isAlternative }), [address, isAlternative])
+
+  return (
+    <svg
+      className={className}
+      height={size}
+      id={address}
+      name={address}
+      style={style}
+      viewBox='0 0 64 64'
+      width={size}
+    >
+      {circles.map(renderCircle)}
+    </svg>
+  )
+}
+
+export const IdentityIcon = React.memo((allProps: PolkadotIdenticonProps) => {
   const { value, size = DEFAULT_AVATAR_SIZE, ...props } = allProps
   const address = value?.toString() || ''
 
   return (
     <Avatar
       icon={
-        <Jdenticon
+        <PolkadotIdenticon
           value={address}
           size={size - 2}
           {...props}

diff --git a/yarn.lock b/yarn.lock
@@ -2076,6 +2076,14 @@
     eventemitter3 "^4.0.7"
     store "^2.0.12"
 
+"@polkadot/ui-shared@3.1.4":
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-shared/-/ui-shared-3.1.4.tgz#218a137941cf2afefb1c1fe9fe33872850e12ee9"
+  integrity sha512-jDdeOWKIy2r5isYp24b/KXqGcmub5MJfPKJ5mnUGz2F1GPhBAz+NAOGcmfUZeI/a6g1dPtN4mjbmapfG7c+dyQ==
+  dependencies:
+    colord "^2.9.3"
+    tslib "^2.5.0"
+
 "@polkadot/util-crypto@10.4.2", "@polkadot/util-crypto@^10.4.2":
   version "10.4.2"
   resolved "https://registry.yarnpkg.com/@polkadot/util-crypto/-/util-crypto-10.4.2.tgz#871fb69c65768bd48c57bb5c1f76a85d979fb8b5"
@@ -5106,6 +5114,11 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+colord@^2.9.3:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
+  integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
+
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"