7

In Metamask, each account has a colorful picture filled with shapes as shown in the image attached below (right side)

enter image description here

Is there a way to generate them programatically on the client side? I have seen websites generating a similar design to them such as https://www.partybid.app/

enter image description here

3 Answers 3

11

Metamask uses something called Jazzicon. Check it out here

2

There is a react lib that does this job (https://www.npmjs.com/package/react-jazzicon)

import Jazzicon from 'react-jazzicon'

export default function App(){

  …

  return (
    <Jazzicon diameter={100} seed={Math.round(Math.random() * 10000000)} />
  )
}
0

There is a lib that solve this problem (https://www.npmjs.com/package/@cfx-kit/wallet-avatar)

import { generateAvatarURL } from '@cfx-kit/wallet-avatar'

export default function App() {
    // ...
    return <img src={generateAvatarURL(account)} alt='account-avatar' />
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.