Handle for Wallets
Learn how to use Handles as a user-friendly identifier for wallets.
Since Handles are essentially ERC-721 NFTs owned by the user's wallet, they can be conveniently used as user-friendly identifiers for wallets.
Resolve Address
- React SDK
- JavaScript SDK
- API
Use the useResolveAddress hook to determine the EVM address associated with an Handle.
Available in @lens-protocol/react-web and @lens-protocol/react-native
ResolveAddress.tsx
import { useResolveAddress } from '@lens-protocol/react-web';
function ResolveAddress({ handle }: { handle: string }) { const { execute, loading } = useResolveAddress();
const resolve = async () => { const handle = window.confirm('Enter an handle to resolve');
const result = await execute({ handle });
if (result.isFailure()) { console.error(result.error.message); return; }
console.log(`Resolved address: ${String(result.value)}`); };
return ( <button onClick={resolve} disabled={loading}> Resolve </button> );}
List Owned Handles
There may be scenarios where you need to list all Handles owned by a specific address.
- React SDK
- JavaScript SDK
- API
Use the useOwnedHandles hook to retrieve all the handles associated with a specific address.
Available in @lens-protocol/react-web and @lens-protocol/react-native
MyHandles.tsx
import { useOwnedHandles } from '@lens-protocol/react-web';
function MyHandles({ address }: { address: string }) { const { data, loading, error, } = useOwnedHandles({ for: address, });
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
if (data.length === 0) return <div>No handles found</div>;
return ( <ul> {data.map((handle) => ( <li key={handle.id}>{handle.fullHandle}</li> ))} </ul> );}