diff --git a/package.json b/package.json index 49220e27e..9d94f481c 100644 --- 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 index 4ac7ff1fb..d3bbf5353 100644 --- 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(null) - useEffect(() => { - jdenticon.update(icon?.current, value) - }, [value]) - +const PolkadotIdenticon = ({ value, size, ...props }: PolkadotIdenticonProps) => { return (
- +
) } -export const IdentityIcon = React.memo((allProps: JdenticonProps) => { +function renderCircle({ cx, cy, fill, r }: Circle, key: number): React.ReactNode { + return +} + +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 { + const circles = useMemo(() => polkadotIcon(address, { isAlternative }), [address, isAlternative]) + + return ( + + {circles.map(renderCircle)} + + ) +} + +export const IdentityIcon = React.memo((allProps: PolkadotIdenticonProps) => { const { value, size = DEFAULT_AVATAR_SIZE, ...props } = allProps const address = value?.toString() || '' return ( { href: '/c', forceHardNavigation: true, }, + { + name: 'Open Gov', + icon: , + href: '/c/opengov', + forceHardNavigation: true, + }, ...(getIsLoggedIn() ? [ { diff --git a/yarn.lock b/yarn.lock index ddb953ef6..9a1428eaf 100644 --- 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"