V2 docs WIP

src/components/ensv2/FrenCallout.tsx

@@ -0,0 +1,78 @@
+import type { PropsWithChildren } from 'react'
+
+type Fren = 'earl' | 'bittu' | 'kuzco' | 'lili' | 'peanut'
+type Variant = 'note' | 'tip' | 'warning'
+
+const FREN_IMAGES: Record<Fren, string> = {
+  earl: '/img/frens/Earl_padding.png',
+  bittu: '/img/frens/Bittu_padding.png',
+  kuzco: '/img/frens/Kuzco_padding.png',
+  lili: '/img/frens/Lili_padding.png',
+  peanut: '/img/frens/Peanut_padding.png',
+}
+
+const VARIANT_STYLES: Record<Variant, { bg: string; border: string }> = {
+  note: {
+    bg: 'var(--vocs-color_noteBackground, #f0f4f8)',
+    border: 'var(--vocs-color_noteBorder, #d0d7de)',
+  },
+  tip: {
+    bg: 'var(--vocs-color_tipBackground, #f0fdf4)',
+    border: 'var(--vocs-color_tipBorder, #86efac)',
+  },
+  warning: {
+    bg: 'var(--vocs-color_warningBackground, #fffbeb)',
+    border: 'var(--vocs-color_warningBorder, #fcd34d)',
+  },
+}
+
+interface FrenCalloutProps {
+  fren: Fren
+  variant?: Variant
+  title?: string
+}
+
+export function FrenCallout({
+  fren,
+  variant = 'note',
+  title,
+  children,
+}: PropsWithChildren<FrenCalloutProps>) {
+  const style = VARIANT_STYLES[variant]
+  const image = FREN_IMAGES[fren]
+
+  return (
+    <aside
+      style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'flex-start',
+        padding: '16px',
+        borderRadius: '8px',
+        border: `1px solid ${style.border}`,
+        backgroundColor: style.bg,
+        marginBottom: '16px',
+        fontSize: '14px',
+        lineHeight: 1.6,
+      }}
+    >
+      <img
+        src={image}
+        alt={fren}
+        style={{
+          width: '56px',
+          height: '56px',
+          objectFit: 'contain',
+          flexShrink: 0,
+          marginTop: '2px',
+        }}
+      />
+      <div style={{ width: '100%' }}>
+        {title && (
+          <div style={{ fontWeight: 600, marginBottom: '4px' }}>{title}</div>
+        )}
+        {children}
+      </div>
+    </aside>
+  )
+}

src/components/ensv2/IdExplorer.tsx

@@ -0,0 +1,169 @@
+import { useMemo, useState } from 'react'
+import { keccak256, toHex } from 'viem'
+
+import { Input } from '../ui/Input'
+
+function SplitId({
+  label,
+  upper,
+  lower,
+  lowerLabel,
+}: {
+  label: string
+  upper: string
+  lower: string
+  lowerLabel: string
+}) {
+  const full = `0x${upper}${lower}`
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="text-grey px-2 leading-none font-semibold">{label}</label>
+      <div className="flex gap-1 items-center">
+        <div className="flex-1 min-w-0">
+          <input
+            className="border-border disabled:bg-grey-light disabled:text-grey z-0 w-full rounded-md border px-3 py-2.5 leading-none font-mono text-xs font-normal outline-none truncate"
+            value={`0x${upper}...`}
+            disabled
+            title="Upper 224 bits (from labelhash)"
+          />
+        </div>
+        <div className="w-[120px] shrink-0">
+          <input
+            className="border-border disabled:bg-grey-light z-0 w-full rounded-md border px-3 py-2.5 leading-none font-mono text-xs font-bold outline-none text-[var(--vocs-color_textAccent)]"
+            value={lower}
+            disabled
+            title={lowerLabel}
+          />
+        </div>
+        <button
+          className="!bg-background text-text-secondary hover:text-text border-border rounded border p-1.5 text-xs leading-none transition shrink-0"
+          onClick={async () => {
+            await navigator.clipboard.writeText(full)
+          }}
+          title="Copy full value"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+          </svg>
+        </button>
+      </div>
+      <div className="flex gap-1 px-2">
+        <span className="flex-1 text-xs text-grey truncate">upper 224 bits (labelhash)</span>
+        <span className="w-[120px] shrink-0 text-xs text-grey">{lowerLabel}</span>
+        <span className="w-[28px] shrink-0" />
+      </div>
+    </div>
+  )
+}
+
+export function IdExplorer() {
+  const [label, setLabel] = useState('alice')
+  const [eacVersionId, setEacVersionId] = useState(0)
+  const [tokenVersionId, setTokenVersionId] = useState(0)
+
+  const computed = useMemo(() => {
+    if (!label) return null
+    try {
+      const labelhashHex = keccak256(toHex(label))
+      const labelhashBigInt = BigInt(labelhashHex)
+
+      // Canonical ID: zero the lower 32 bits
+      const canonicalId = labelhashBigInt ^ (labelhashBigInt & 0xFFFFFFFFn)
+
+      // Token ID: canonical ID | tokenVersionId
+      const tokenId = canonicalId | BigInt(tokenVersionId)
+
+      // Resource: canonical ID | eacVersionId
+      const resource = canonicalId | BigInt(eacVersionId)
+
+      // Split into upper (56 hex = 224 bits) and lower (8 hex = 32 bits)
+      const fullLabelhash = labelhashHex.slice(2).padStart(64, '0')
+      const upperHex = fullLabelhash.slice(0, 56)
+
+      const canonicalLower = '00000000'
+      const tokenLower = BigInt(tokenVersionId).toString(16).padStart(8, '0')
+      const resourceLower = BigInt(eacVersionId).toString(16).padStart(8, '0')
+
+      return {
+        labelhash: labelhashHex,
+        labelhashLower: fullLabelhash.slice(56),
+        upperHex,
+        canonicalLower,
+        tokenLower,
+        resourceLower,
+      }
+    } catch {
+      return null
+    }
+  }, [label, eacVersionId, tokenVersionId])
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Input
+        label="Label"
+        value={label}
+        onChange={(e) => setLabel(e.target.value)}
+        placeholder="alice"
+      />
+
+      <div className="flex gap-3">
+        <div className="flex-1">
+          <label className="text-grey px-2 leading-none font-semibold text-sm">
+            tokenVersionId: {tokenVersionId}
+          </label>
+          <input
+            type="range"
+            min={0}
+            max={10}
+            value={tokenVersionId}
+            onChange={(e) => setTokenVersionId(Number(e.target.value))}
+            className="w-full mt-2"
+          />
+        </div>
+        <div className="flex-1">
+          <label className="text-grey px-2 leading-none font-semibold text-sm">
+            eacVersionId: {eacVersionId}
+          </label>
+          <input
+            type="range"
+            min={0}
+            max={10}
+            value={eacVersionId}
+            onChange={(e) => setEacVersionId(Number(e.target.value))}
+            className="w-full mt-2"
+          />
+        </div>
+      </div>
+
+      {computed && (
+        <>
+          <SplitId
+            label="Labelhash"
+            upper={computed.upperHex}
+            lower={computed.labelhashLower}
+            lowerLabel="lower 32 bits"
+          />
+          <SplitId
+            label="Canonical ID"
+            upper={computed.upperHex}
+            lower={computed.canonicalLower}
+            lowerLabel="zeroed"
+          />
+          <SplitId
+            label="Token ID"
+            upper={computed.upperHex}
+            lower={computed.tokenLower}
+            lowerLabel="tokenVersionId"
+          />
+          <SplitId
+            label="Resource"
+            upper={computed.upperHex}
+            lower={computed.resourceLower}
+            lowerLabel="eacVersionId"
+          />
+        </>
+      )}
+    </div>
+  )
+}

src/components/ensv2/ResourceCalculator.tsx

@@ -0,0 +1,141 @@
+import { useMemo, useState } from 'react'
+import { keccak256, namehash, encodeAbiParameters, toHex } from 'viem'
+import { packetToBytes } from 'viem/ens'
+
+import { Input } from '../ui/Input'
+
+type RecordType = 'name' | 'text' | 'addr'
+
+export function ResourceCalculator() {
+  const [name, setName] = useState('alice.eth')
+  const [recordType, setRecordType] = useState<RecordType>('text')
+  const [textKey, setTextKey] = useState('avatar')
+  const [coinType, setCoinType] = useState('60')
+
+  const computed = useMemo(() => {
+    if (!name) return null
+    try {
+      const node = namehash(name)
+
+      let part: `0x${string}`
+      let partLabel: string
+      let authorizeFunction: string
+      let authorizeArgs: string
+
+      const dnsName = toHex(packetToBytes(name))
+
+      if (recordType === 'name') {
+        part = '0x0000000000000000000000000000000000000000000000000000000000000000'
+        partLabel = 'bytes32(0) (name-level)'
+        authorizeFunction = 'authorizeNameRoles'
+        authorizeArgs = `(${dnsName}, roleBitmap, account, true)`
+      } else if (recordType === 'text') {
+        // partHash(key) = keccak256(bytes(key))
+        part = keccak256(toHex(textKey))
+        partLabel = `partHash("${textKey}") = keccak256(bytes("${textKey}"))`
+        authorizeFunction = 'authorizeTextRoles'
+        authorizeArgs = `(${dnsName}, "${textKey}", account, true)`
+      } else {
+        // partHash(coinType) = keccak256(abi.encode(coinType))
+        const coinTypeNum = BigInt(coinType || '0')
+        part = keccak256(
+          encodeAbiParameters([{ type: 'uint256' }], [coinTypeNum])
+        )
+        partLabel = `partHash(${coinType}) = keccak256(abi.encode(${coinType}))`
+        authorizeFunction = 'authorizeAddrRoles'
+        authorizeArgs = `(${dnsName}, ${coinType}, account, true)`
+      }
+
+      // resource = keccak256(node, part)
+      // Special case: resource(0, 0) = ROOT_RESOURCE = 0
+      let resource: string
+      if (node === '0x0000000000000000000000000000000000000000000000000000000000000000' &&
+          part === '0x0000000000000000000000000000000000000000000000000000000000000000') {
+        resource = '0x0000000000000000000000000000000000000000000000000000000000000000'
+      } else {
+        resource = keccak256(
+          encodeAbiParameters(
+            [{ type: 'bytes32' }, { type: 'bytes32' }],
+            [node, part]
+          )
+        )
+      }
+
+      return {
+        node,
+        part,
+        partLabel,
+        resource,
+        authorizeFunction,
+        authorizeArgs,
+        dnsName,
+      }
+    } catch {
+      return null
+    }
+  }, [name, recordType, textKey, coinType])
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Input
+        label="Name"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder="alice.eth"
+      />
+
+      <div className="flex flex-col gap-2">
+        <label className="text-grey px-2 leading-none font-semibold">
+          Scope
+        </label>
+        <div className="flex gap-2 px-2">
+          {(['name', 'text', 'addr'] as const).map((type) => (
+            <button
+              key={type}
+              onClick={() => setRecordType(type)}
+              className={`rounded-md border px-3 py-1.5 text-sm font-medium transition ${
+                recordType === type
+                  ? 'border-[var(--vocs-color_borderAccent)] bg-[var(--vocs-color_borderAccent)] text-white'
+                  : 'border-border hover:border-[var(--vocs-color_borderAccent)]'
+              }`}
+            >
+              {type === 'name' ? 'Name-level' : type === 'text' ? 'Text key' : 'Coin type'}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {recordType === 'text' && (
+        <Input
+          label="Text key"
+          value={textKey}
+          onChange={(e) => setTextKey(e.target.value)}
+          placeholder="avatar"
+        />
+      )}
+
+      {recordType === 'addr' && (
+        <Input
+          label="Coin type"
+          value={coinType}
+          onChange={(e) => setCoinType(e.target.value)}
+          placeholder="60"
+        />
+      )}
+
+      {computed && (
+        <>
+          <Input label="node (namehash)" value={computed.node} disabled copyButton />
+          <Input label={`part (${computed.partLabel})`} value={computed.part} disabled copyButton />
+          <Input label="resource = keccak256(node, part)" value={computed.resource} disabled copyButton />
+          <Input
+            label={`To grant: ${computed.authorizeFunction}`}
+            value={computed.authorizeArgs}
+            disabled
+            copyButton
+          />
+        </>
+      )}
+    </div>
+  )
+}