truncated-value

Why This Exists

Most apps display addresses truncated to their first and last few characters (e.g. 0xd8dA...6045). Address poisoning scams exploit this: attackers generate addresses matching the visible prefix and suffix, seed them into transaction histories, and wait for users to copy the wrong one. Truncation hides the characters that matter most for verification.

This component keeps the full value in the DOM at all times. The middle portion is visually collapsed with CSS, but never removed:

• Browser find (Ctrl+F) matches the complete string, even while truncated
• Click to expand lets users inspect every character before copying

Interactive Playground

Examples

Installation

npm install @umplabs/truncated-value
# or
pnpm add @umplabs/truncated-value

Or use the CDN with no bundler required:

<script src="https://unpkg.com/@umplabs/truncated-value/dist/truncated-value.iife.global.js"></script>

Usage

HTML (CDN)

<script src="https://unpkg.com/@umplabs/truncated-value/dist/truncated-value.iife.global.js"></script>
<truncated-value value="0x1234567890abcdef1234567890abcdef12345678" expandable></truncated-value>

React

import { TruncatedValue } from '@umplabs/truncated-value/react';

<TruncatedValue
  value="0x1234567890abcdef1234567890abcdef12345678"
  startLength={6}
  endLength={4}
  expandable
/>

Vue / Svelte (Web Component)

import '@umplabs/truncated-value/web-component';

<truncated-value value="0x1234567890abcdef1234567890abcdef12345678" expandable />

Styling

This component ships with no visual opinions — no colors, fonts, sizes, or spacing. The only built-in CSS handles the truncation mechanics. Everything else is up to you, so it fits naturally into any design system or brand.

Web Component

Use the ::part() selector to style shadow DOM parts:

truncated-value::part(container) {
  font-weight: bold;
}

truncated-value::part(start),
truncated-value::part(end) {
  color: #888;
}

React

Use the className / style props and target CSS classes:

.truncated-value { font-weight: bold; }
.tv-middle       { /* hidden middle text */ }
.tv-ellipsis     { /* the ellipsis indicator */ }