Resolution
What You Get
import { useRecords } from '@justaname.id/react';
export const ENSProfile = ({ ensName }: { ensName: string }) => {
const { records, isLoading, error } = useRecords({ ens: ensName });
if (isLoading) return <div>Loading profile...</div>;
if (error) return <div>Error loading profile</div>;
if (!records) return <div>No records found for {ensName}</div>;
return (
<div className="ens-profile">
<h2>{ensName}</h2>
{/* Display avatar if available */}
{records.texts?.find(t => t.key === 'avatar') && (
<img
src={records.texts.find(t => t.key === 'avatar')?.value}
alt="Avatar"
/>
)}
{/* Text Records Section */}
<section>
<h3>Profile Information</h3>
{records.texts?.map((text) => (
<div key={text.key}>
<strong>{text.key}:</strong> {text.value}
</div>
))}
</section>
{/* Addresses Section */}
<section>
<h3>Wallet Addresses</h3>
{records.coins?.map((coin) => (
<div key={coin.id}>
<strong>{coin.name} (coinType: {coin.id}):</strong>
<code>{coin.value}</code>
</div>
))}
</section>
{/* Content Hash */}
{records.contentHash && (
<section>
<h3>Decentralized Website</h3>
<p>
<strong>Protocol:</strong> {records.contentHash.protocolType}
</p>
<p>
<strong>Hash:</strong> {records.contentHash.decoded}
</p>
</section>
)}
</div>
);
};Records Response Structure
Last updated