@xyo-network/xl1-blockies

React identicons for XL1 addresses and accounts.

Description

XL1 is the XYO Layer One blockchain protocol. This package provides deterministic React identicons for XL1 addresses. It is used by the XL1 React client SDK, but can be installed directly when an app only needs address avatars.

Install

Using npm:

npm i --save @xyo-network/xl1-blockies

Using yarn:

yarn add @xyo-network/xl1-blockies

Using pnpm:

pnpm add @xyo-network/xl1-blockies

Using bun:

bun add @xyo-network/xl1-blockies

Install peer dependencies from this package's peerDependencies in package.json, especially react, react-dom, and @mui/material.

Usage

Render a deterministic avatar from an address or seed:

import { BlockiesAvatarAddress, RingsAvatarAddress } from '@xyo-network/xl1-blockies'

export const AccountAvatar = ({ address }: { address: string }) => (
  <>
    <BlockiesAvatarAddress address={address} size={32} />
    <RingsAvatarAddress seed={address} size={32} />
  </>
)

Documentation

Exports include:

• BlockiesAvatar, BlockiesAvatarAddress, and BlockiesAvatarAddressApproved.
• RingsAvatar and RingsAvatarAddress.
• Low-level createIcon and ring rendering helpers for custom avatar components.

Use @xyo-network/xl1-react-client-sdk when you also need wallet providers, gateway hooks, and connected-account UI.

AI Agent Skills

Install the recommended XL1/XYO skills with Skills.sh:

npx skills add XYOracleNetwork/xyo-skills --all

In XY toolchain repos, the equivalent convenience command is:

pnpm xy skills defaults
pnpm xy skills lint --fix

For XL1 work, ask your agent to use xyo-knowledge, xl1-knowledge, and xl1-patterns. These skills cover XYO primitives, XL1 chain and gateway APIs, and application patterns for XL1 dApps.

Building Locally

pnpm xy build @xyo-network/xl1-blockies
pnpm xy test @xyo-network/xl1-blockies
pnpm xy lint @xyo-network/xl1-blockies

License

See the LICENSE file for license rights and limitations (LGPL-3.0-only).

Credits

Made with 🔥 and ❄️ by XYO Foundation