Allows for different displays of an Ethereum address to a wallet, smart contract, transaction or any other hash. Use EthAddress when you want to to make it easy for a user to copy an address or show a QR of an address.

Import component

import { EthAddress } from "rimble-ui";

Examples

Different ways to use the EthAddress component

Standard EthAddress

<EthAddress address="0x9505C8Fc1aD98b0aC651b91245d02D055fEc8E49" />
<EthAddress address="0x9505C8Fc1aD98b0aC651b91245d02D055fEc8E49" />
Copy code

EthAddress with text buttons

Copy
Show QR Code
<EthAddress address="0x9505C8Fc1aD98b0aC651b91245d02D055fEc8E49" textLabels />
<EthAddress address="0x9505C8Fc1aD98b0aC651b91245d02D055fEc8E49" textLabels />
Copy code

Props

false

Styled System Props

EthAddress uses COMMON, TYPOGRAPHY groups of Styled System props.

Design guidelines

Use the EthAddress when you need to show an Ethereum address to the user for display purposes or when you want copy-to-clipboard functionality.

Design

Some best practice for using EthAddress in your product.

Only show an address when necessary

You can search any public address in Etherscan and get a complete list of all past transactions for that address as well as the value of that account. If your dapp doesn't need you to publicly display your user's public addresses for all to see, it's probably safer for them if you don't.

Display with a label

Label an Ethereum address appropriately. Is it the address of your account or somebody else's? Or is just a transaction hash?

Research

Users may not trust truncation

Public addresses can make new users nervous when transacting, so consider carefully when to use truncation. Research has shown that some inexperienced dapp users will copy and paste a truncated address into a new tab's URL bar to double check the address matches their wallet address.

Full disclosure: this research was for blockchain news platform, Civil.

Those same users were less careful about other's addresses

This behaviour wasn't repeated when the users were asked to send ETH to another wallet. They were keen to check the entire string of their own address, but would happily interact with a recipient's truncated address. Bear this in mind when deciding which addresses to truncate and which ones to display in full.