Edit ENS records

'use client';

import { EnsRecordsForm, type EnsRecords } from '@thenamespace/ens-components';
import { useEffect, useState } from 'react';
import { usePublicClient } from 'wagmi';
import { mainnet } from 'wagmi/chains';
import { normalize } from 'viem/ens';

const TEXT_KEYS = ['avatar', 'description', 'url', 'com.twitter'];

export function EditRecords({ name }: { name: string }) {
  const client = usePublicClient({ chainId: mainnet.id });
  const [records, setRecords] = useState<EnsRecords | null>(null);

  useEffect(() => {
    if (!client) return;

    const loadRecords = async () => {
      const ensName = normalize(name);
      const texts = await Promise.all(
        TEXT_KEYS.map(async (key) => ({
          key,
          value: (await client.getEnsText({ name: ensName, key })) ?? '',
        })),
      );
      const ethAddress = await client.getEnsAddress({ name: ensName });

      setRecords({
        texts: texts.filter((text) => text.value),
        addresses: ethAddress ? [{ coinType: 60, value: ethAddress }] : [],
      });
    };

    loadRecords().catch((error) => console.error('Failed to load records', error));
  }, [client, name]);

  if (!records) return <p>Loading records…</p>;

  return (
    <EnsRecordsForm
      name={name}
      existingRecords={records}
      avatarUploadDomain="app.example.com"
      onRecordsUpdated={(diff) => console.log('Updated records', diff)}
    />
  );
}

'use client';

import { SelectRecordsForm, type EnsRecords } from '@thenamespace/ens-components';
import { useState } from 'react';

export function ProfileStep({ onSave }: { onSave: (records: EnsRecords) => void }) {
  const [records, setRecords] = useState<EnsRecords>({ addresses: [], texts: [] });

  return (
    <SelectRecordsForm
      records={records}
      onRecordsUpdated={setRecords}
      avatarUpload={{ ensName: 'alice.eth', siweDomain: 'app.example.com' }}
      actionButtons={<button onClick={() => onSave(records)}>Save</button>}
    />
  );
}

interface EnsRecords {
  addresses: { coinType: number; value: string }[];
  texts: { key: string; value: string }[];
  contenthash?: { protocol: ContenthashProtocol; value: string };
}

// ContenthashProtocol: 'ipfs' | 'onion3' | 'arweave' | 'skynet' | 'swarm'

interface EnsRecordsDiff {
  textsAdded: EnsTextRecord[];
  textsModified: EnsTextRecord[];
  textsRemoved: EnsTextRecord[];
  addressesAdded: EnsAddressRecord[];
  addressesModified: EnsAddressRecord[];
  addressesRemoved: EnsAddressRecord[];
  contenthashAdded?: EnsContenthashRecord;
  contenthashModified?: EnsContenthashRecord;
  contenthashRemoved: boolean;
  isDifferent: boolean;
}