shadcn.io is not affiliated with official shadcn/ui
NFT Transfer Web3 Block for Svelte
A wallet's My NFTs page with its Transfer dialog shown open: pick one of three tokens, enter a recipient the form checks, read the network fee, confirm you checked the address and record the transfer.
Installation
Overview
Move a token to another address without a slip, with this transfer dialog for Svelte with Ark UI. It opens from the My NFTs page of Passoff, an NFT wallet: the page is drawn under a soft scrim inside a hairline frame with a plus mark on each corner, and its header holds an outline Transfer Button. The dialog has a Radio Group of three tokens, each with a greyscale sigil tile, a recipient Input that checks the shape of the address as you type and names it when it is one of two saved addresses, otherwise "First transfer to this address", a fee list with a sample dollar figure and a required Checkbox, "I checked the address". Transfer, the only Shine Button, checks all three and then replaces the body with "Transfer recorded in this demo; the token stays in your wallet." For preview the dialog is drawn open in place when the page loads; the header button opens the real Dialog with the same fields and the same state. For wallets, marketplaces and any app that moves tokens.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. The Transfer button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same TransferFields component and share the block's state. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
What stays local, and how do I wire a real transfer?
All of it. The tokens, the two saved addresses and the fee (0.0021 ETH, about $6.51 at a sample rate) are typed constants, and Transfer only records the choice in the dialog. In your app replace the comment in go with your wallet library's call for the token's standard, show the real fee estimate, and wait for the transaction before you say it is done.
What does the address check do?
It checks the shape only: 0x and 40 hexadecimal digits. A wrong length or a wrong character is named in a line under the field once you press Transfer, or at once for a wrong character. A well-formed address is either a saved one, which shows its label, or "First transfer to this address". The checksum is not verified in the demo; in your app verify the EIP-55 checksum and resolve names before you offer to send.
Why the I checked the address box?
Transfers cannot be undone, and most losses are to a wrong or swapped address. The box has to be ticked, and Transfer refuses with a message under the box if it isn't. It is a prompt to compare the address, not a guard, so keep your own checks as well.
Is it accessible, and how does it look on a phone?
Yes. The real dialog is named by its title and described by its sentence, the tokens use arrow keys, a refused Transfer moves focus to the address field and a polite status message says why, and the recorded result takes focus. The trigger is the button wrapped in DialogTrigger with asChild. On a phone the copy shown on load docks to the foot of the frame as a bottom sheet with its actions pinned, and the list scrolls above them.