MyCrypto/common/components/ui/Identicon.tsx

import { toDataUrl } from 'ethereum-blockies';
import { isValidETHAddress } from 'libs/validators';
import React from 'react';

interface Props {
  address: string;
  size?: string;
}

export default function Identicon(props: Props) {
  const size = props.size || '4rem';
  // FIXME breaks on failed checksums
  const identiconDataUrl = isValidETHAddress(props.address.toLowerCase())
    ? toDataUrl(props.address.toLowerCase())
    : '';
  return (
    <div style={{ position: 'relative', width: size, height: size }} title="Address Identicon">
      <div
        style={{
          position: 'absolute',
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          borderRadius: '50%',

          boxShadow: `
                    inset rgba(255, 255, 255, 0.5) 0 2px 2px,
                    inset rgba(0, 0, 0, 0.6) 0 -1px 8px
                  `
        }}
      />
      {identiconDataUrl && (
        <img
          src={identiconDataUrl}
          style={{
            borderRadius: '50%',
            width: '100%',
            height: '100%'
          }}
        />
      )}
    </div>
  );
}