addreth

What It Does

• 👁 Display addresses in a compact way, while retaining the ability to see them in full.
• 📋 Copy the address to the clipboard with a single click.
• 👉 Check the address on the block explorer of your choice.
• 🏷 ENS resolution works out of the box if wagmi is present.
• 🌈 Six themes to choose from or to customize as desired.
• 🎹 Accessible: keyboard navigation and focus states work as expected.
• 💆‍♀️ Zero configuration: just import and drop <Addreth /> in your app.
• 🪚 Customizable: change the global configuration with <AddrethConfig /> (optional).
• 📦 Small: 5.05 kB, styles and themes included, and no external dependencies.

How It Looks

Design by Paty Davila

Installation

npm i -S addreth
pnpm add addreth
yarn add addreth

Getting Started

Import Addreth and add it to your app:

import { Addreth } from "addreth";

function App() {
  return (
    <main>
      <Addreth address="0x…" />
    </main>
  );
}

From this point, you could check out the demo page to see various examples of what can be done with the component, or consult the API documentation below.

API

<Addreth />

The <Addreth /> component only requires the address prop to be set. It will display the address in a compact way while provide a convenient set of features. Multiple props are available to customize it in different ways:

address

The address prop is the only required prop, and it must be a valid Ethereum address.

<Addreth address="0x0000000000000000000000000000000000000000" />;

actions

The actions prop allows to control the action buttons inside the badge. It can be set to "all" (default), "copy", "explorer" or "none".

// Display the copy button only.
// The block explorer button will still appear on the popup.
<Addreth address="0x…" actions="copy" />;

ens

The ens prop allows to control whether to use the ENS name resolution, and it is enabled by default.

This is an alias for icon="identicon" and label="address".

<Addreth address="0x…" ens={false} />;

explorer

The explorer prop allows to generate the name and URL of a given block explorer (e.g. Etherscan).

<Addreth
  address="0x…"
  explorer={(address) => ({
    name: "Base",
    url: `https://basescan.com/address/${address}`,
  })}

font and fontMono

The font and fontMono props allow to control the font names used for the badge and buttons. If fontMono is specified, it will be applied to the address specifically. If neither font nor fontMono are specified, the fonts will be inherited from the web page.

// Use the same font for the address and buttons
<Addreth address="0x…" font="Anonymous Pro" />;

icon

The icon prop allows to control the icon displayed in the badge. It can be set to "ens" (default), "identicon", false or null.

• If set to "ens" and the app uses wagmi, the ENS avatar corresponding to the address, if it exists, will be displayed. Otherwise, the icon will fallback to "identicon".
• If set to "identicon", the identicon corresponding to the address will be displayed.
• If set to false or null, no icon will be displayed.
• If set to a function, it will be called with the address as argument and must return either React element to replace the icon entirely, or a string to provide an image URL.

// Display the ENS avatar if available, otherwise display the identicon.
<Addreth address="0x…" icon="ens" />;

// Always display the identicon.
<Addreth address="0x…" icon="identicon" />;

// Do not display any icon.
<Addreth address="0x…" icon={false} />;

// Custom icon with a URL.
<Addreth
  address="0x…"
  icon={(address) => `https://example.com/identicon/${address}.svg`}
/>;

// Custom icon with a React element.
<Addreth
  address="0x…"
  icon={(address) => (
    <img src={`https://example.com/identicon/${address}.svg`} />
  )}
/>;

label

The label prop allows to control the label displayed in the badge. It can be set to "ens" (default), "address" or a function.

• If set to "ens" and the app uses wagmi, the ENS name corresponding to the address, if it exists, will be displayed. Otherwise, the label will fallback to "address".
• If set to "address", the address will be displayed, shortened to shortenAddress characters on each side (4 by default).
• If set to a function, it will be called with the address as argument and must return a React node.

// Display the ENS name if available.
<Addreth address="0x…" label="ens" />;

// Always display the address.
<Addreth address="0x…" label="address" />;

// Custom label.
<Addreth
  address="0x…"
  label={(address) => <b>{address}</b>}
/>;

maxWidth

The maxWidth prop allows to control the maximum width of the badge. If not specified, the badge will adapt to its parent width.

// Limit the badge width to 200px.
<Addreth address="0x…" maxWidth={200} />;

popupNode

The popupNode prop allows to control the node used to render the popup. It defaults to document.body.

shortenAddress

The shortenAddress prop allows to control the number of first and last characters to show for the address. It defaults to 4. Set it to false to display the full address.

// Display the first and last 6 characters of the address.
<Addreth address="0x…" shortenAddress={6} />;

stylesId

The stylesId prop allows to control the ID attribute of the style element used to inject the CSS in the page. It defaults to "addreth-styles".

theme

The theme prop allows to control the theme used for the badge and buttons. It can be set to one of the provided themes, or used to define a custom theme.

Available themes:

• light (default)
• dark
• unified-light
• unified-dark
• simple-light
• simple-dark

You can also define a custom theme by passing an object. If base is provided, it will extend from that theme. Otherwise, it will extend the default theme (light), or the parent one if provided (see AddrethConfig to check how to define a parent config).

type ThemeDeclaration = {
  base?: ThemeName; // the theme to extend from

  // general
  textColor?: Color; // text color of the button and popup
  secondaryColor?: Color; // color of icons
  focusColor?: Color; // color of the focus ring
  fontSize?: number; // font size used everywhere

  // badge
  badgeBackground?: Color; // background color for the badge
  badgeRadius?: number; // radius used for the badge (if badgeGap is 0) or for individual buttons
  badgeIconRadius?: number; // radius for the badge icon (defaults to badgeRadius if not set)
  badgeGap?: number; // gap between badge itemstype
  badgeHeight?: number; // height of the badge
  badgePadding?: number; // inner padding of the badge
  badgeLabelPadding?: number; // padding inside the badge label

  // popup
  popupBackground?: Color; // background color of the popup
  popupRadius?: number; // radius of the popup
  popupShadow?: string; // shadow of the popup
};

See theme.ts for more details.

underline

Display the label underlined.

<Addreth address="0x…" underline />;

uppercase

Display the label in uppercase.

<Addreth address="0x…" uppercase />;

<AddrethConfig />

Having to wrap <Addreth /> in order to provide your desired default configuration can be tedious, which is why <AddrethConfig /> is provided. It allows to customize the default configuration of <Addreth /> and support the same props, except address.

import { Addreth, AddrethConfig } from "addreth";

function App() {
  return (
    <AddrethConfig font="Anonymous Pro" theme="dark">
      <Addreth address="0x…" />
    </AddrethConfig>
  );
}

FAQ

Is it SSR-friendly?

The component won’t cause any issue in SSR environments, however it will only render after the styles have been injected into the page.

Does it work with Ethers.js or other Ethereum libraries?

You can wrap the component and set icon and label to anything you want, including ENS name and avatar coming from another library.

I am not using wagmi, but Next.js says it cannot resolve the dependency.

Next.js tries to resolve all imports including when using import() which addreth uses to detect the presence of wagmi. A solution is to tell Next.js to ignore this dependency by adding this to your next.config.js:

webpack(conf) {
  conf.resolve.fallback = { wagmi: false };
  return conf;
}

License

MIT