Identicons

CSPR.click can generate an identicon for a public key. Identicons are useful when you want to display a compact visual hint next to an account, recipient, sender, or connected wallet address.

Use the getAccountIdenticon() SDK method to generate an HTMLCanvasElement, then render it as an image with toDataURL().

Recommended display guidelines:

• Place the identicon to the left of the public key.

• Render it as a square with no border and 10% rounded corners. Never display it as a circle.

• When truncating the public key, use 5 hex chars + ... + 5 hex chars — for example: 02026...9555c.

React example

The following component receives a public key, generates its identicon, and renders it next to the public key.

import { useMemo } from 'react';
import { useClickRef } from './ClickContext';

type IdenticonProps = {
  publicKey: string;
};

export const Identicon = ({ publicKey }: IdenticonProps) => {
  const { clickRef } = useClickRef();

  const identicon = useMemo(() => {
    if (!clickRef || !publicKey) {
      return undefined;
    }

    return clickRef.getAccountIdenticon(publicKey.toLowerCase());
  }, [clickRef, publicKey]);

  return (
    <FlexRow gap={8} align="center">
      <img
        src={identicon?.toDataURL()}
        width={20}
        height={20}
        alt="Account identicon"
      />
      <Span>{publicKey}</Span>
    </FlexRow>
  );
};

Read more about the getAccountIdenticon method in the SDK reference.