Use swop.id in your app
Three recipes. A "send to" picker, names instead of addresses, and paying a name safely.
1. A "send to…" picker
Search as the user types, show name and avatar, and keep the picked identity's address.
import { useEffect, useState } from 'react';
type Identity = {
handle: string;
name: string;
avatar: string;
evmAddress: string | null;
solanaAddress: string | null;
};
export function SwopIdPicker({ onPick }: { onPick: (id: Identity) => void }) {
const [q, setQ] = useState('');
const [results, setResults] = useState<Identity[]>([]);
useEffect(() => {
if (q.trim().length < 2) return setResults([]);
const t = setTimeout(async () => {
const url = new URL('https://apps.apiswop.co/api/v5/identity/resolve');
url.searchParams.set('q', q.trim());
url.searchParams.set('limit', '6');
const res = await fetch(url);
if (res.ok) setResults((await res.json()).data);
}, 250); // debounce: the API allows 100 requests per 15 minutes per IP
return () => clearTimeout(t);
}, [q]);
return (
<div>
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search a swop.id" />
<ul>
{results.map((p) => (
<li key={p.handle}>
<button onClick={() => onPick(p)}>
{p.avatar && <img src={p.avatar} alt="" width={24} height={24} />}
{p.name || p.handle} <small>{p.handle}</small>
</button>
</li>
))}
</ul>
</div>
);
}2. Show names instead of addresses
If your app already has wallet addresses (bettors, validators, buyers) and you know the swop.id behind them, render the handle and avatar with /lookup and keep the address as a tooltip. Cache each lookup; a name rarely changes.
There's no reverse lookup yet
The Identity API goes from name to address, not address to name. Store the swop.id when a user picks or enters it, rather than trying to work it out from an address later.
3. Pay a name
Use the Identity API to find the person and ENS to verify the address right before sending.
import { createPublicClient, http, isAddress, zeroAddress } from 'viem';
import { mainnet } from 'viem/chains';
import { normalize } from 'viem/ens';
const ens = createPublicClient({ chain: mainnet, transport: http('https://YOUR_MAINNET_RPC') });
export async function resolveForPayment(handle: string) {
const address = await ens.getEnsAddress({ name: normalize(handle) });
if (!address || !isAddress(address) || address === zeroAddress) {
throw new Error(`Could not resolve ${handle}. Not sending.`);
}
return address; // show this, with the network, before the user confirms
}Let users sign in with their swop.id
Want users to log in to your app with their Swop account and keep the same wallet? That's Sign in with Swop, part of Swivy. It's in preview.