EthAddress

Allows for different displays of an Ethereum address to a wallet, smart contract, transaction or any other hash. Use EthAddress when you want to truncate, link, show QR on hover, or other different visual representations of an Ethereum address.
Import component
import { EthAddress } from "rimble-ui";

Examples

Different ways to use the EthAddress component
Standard EthAddress
0x9505C8Fc1aD98b0aC651b91245d02D055fEc8E49
Truncated EthAddress
0x950...8E49

Props

Prop NameTypeIs RequiredDefault ValueDescription
addressstringrequirednoneThe Ethereum Address
truncatebooloptional
false
Will shorten the address when true
Styled System Props
EthAddress uses COMMON, TYPOGRAHY groups of Styed System props.

Design guidelines

Use the EthAddress when you need to show an Ethereum address to the user for display purposes only. If you're looking for something with copy-to-clipboard functionality, use PublicAddress instead.
Want to build this component? Read EthAddress documentation
When to use each variation
Full address
When you need the user to confirm an address. This will allow them to double check it more accurately and increase confidence in their transaction.
Example scenarios

Confirm payment

Are you sure you want to send 1 ETH to
0xAc03BB73b6a9e108530AFf4Df5077c2B3D481e5A
Truncated address
When the address acts more like meta data in your product. Like when you want to show a connected state or provide supporting information about a past transaction.
Example scenarios
Transaction hashFromTo
0x34ab...ddb80xAc03...1e5A0xa7ae...6f03
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.
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute