Integrate Jdenticon to Antd Avatar component

IdentityIcon.tsx

import { IdentityProps } from '@polkadot/react-identicon/types'

import Avatar from 'antd/lib/avatar/avatar'
import React, {useEffect, useRef} from 'react'
import { DEFAULT_AVATAR_SIZE } from 'src/config/Size.config'

import * as jdenticon from 'jdenticon';

type JdenticonProps = {
  value: string;
  size: number;
  className?: string;
}

const Jdenticon = ({ value, size, className }: JdenticonProps) => {
  const icon = useRef<any>(null);
  useEffect(() => {
    jdenticon.update(icon?.current, value);
  }, [value]);

  return (
    <div>
      <svg className={className} data-jdenticon-value={value} height={size} ref={icon} width={size} />
    </div>
  );
};

export const IdentityIcon = React.memo((allProps: IdentityProps) => {
  const { value, size = DEFAULT_AVATAR_SIZE } = allProps
  const address = value?.toString() || ''

  return (
    <Avatar
      icon={
        <Jdenticon
          className='DfIdentityIconContent'
          value={address}
          size={size - 2}
        />
      }
      size={size}
      className='DfIdentityIcon'
    />
  )
})

export default IdentityIcon