讓我們製作 Avatar 來區分自己與朋友的帳號吧

這邊要先安裝 @metamask/jazzico

npm i @metamask/jazzico

// Identicon.tsx
import { useEffect, useRef } from 'react';
import { useEthers } from '@usedapp/core';
import styled from '@emotion/styled';
import Jazzicon from '@metamask/jazzicon';

const StyledIdenticon = styled.div`
  height: 1rem;
  width: 1rem;
  border-radius: 1.125rem;
  background-color: black;
`;

type Props = {
  account: string;
};

export function FriendIdenticon({ account }: Props) {
  const ref = useRef<HTMLDivElement>();
  useEffect(() => {
    if (account && ref.current) {
      ref.current.innerHTML = '';
      ref.current.appendChild(Jazzicon(16, parseInt(account.slice(2, 10), 16)));
    }
  }, [account]);

  return <StyledIdenticon ref={ref as any} />;
}

最終效果

如果有不懂的地方可以偷看完成的DEMO