shadcn.io is not affiliated with official shadcn/ui
Address Book Web3 Block for Solid
A payments address book with eight contacts, search and a network filter, and an Add a contact form that compares a new address with every saved one and flags a lookalike with the differing characters marked.
Installation
Overview
Keep the addresses people pay often, and stop a copy-and-paste trick before it is saved, with this address book for Solid with Ark UI. It's the book of Parchmark, a payments app. A hairline frame with a plus mark on each corner starts with a toolbar band: a search Input and a Native Select for the network. Under it eight contacts sit in a scroll region that keeps its height: a label, a short address, a two-letter network tile, the last use as a date, a copy button and a remove. The Add a contact band has Fields for the label, the network and the address, and checks the address as you type: its shape, a duplicate, and above all a lookalike, an address with the same first four and last four characters as a saved one. Then both full addresses appear in mono type with the differing characters marked, and saving needs the Checkbox I compared them ticked. Save contact is the only Shine Button. For wallets, payment tools and any app that stores other people's addresses.
FAQ
What is a lookalike address, and how is it found?
Some attackers create an address that begins and ends like one you already use and put a copy of it in your clipboard or history, hoping you only check the ends. The block compares the first four and the last four characters after 0x with every saved contact; a match that isn't identical shows both addresses with the characters that differ marked. Try a lookalike fills one in so you can see it. It's a prompt to compare, not a verdict, so saving it stays possible once you tick the box.
What else is checked, and what is not?
As you type: the shape (0x and 42 characters in all), the characters allowed, and a duplicate, which names the contact that already has it. The checksum of a mixed-case address (EIP-55) is not verified in this demo, and the form says so. In your app verify it, and on the server too.
What stays local, and how do I wire it?
All of it. The contacts are typed in START and live in local state; saving adds a row at the top and says Saved in this demo, and nothing is sent. Copy uses the browser's clipboard on your press and reports its result politely. In your app store contacts on your server, scoped to the account, and run the same lookalike comparison there before saving.
Does the search keep the page still?
Yes. Search matches labels and addresses, the network filter narrows the list, and the scroll region keeps its height whether five rows, one or none show. With none, an empty state names the problem and a Clear search and network button resets both. A count in the toolbar and the status line say how many show.
Is it accessible from the keyboard?
Yes. The region is named and focusable so it scrolls with the keyboard, each copy and remove button names its contact, and the lookalike box is a labelled group of two terms and a checkbox. Problems are written out, never only colored. One polite status message reports searches, copies, removals and saves.