Domain Widget

The DomainProfileWidget is a React component that displays a .night domain’s profile, including avatar, bio, social links, and resolved addresses.

Installation

npm install @midnames/sdk

Basic usage

import { DomainProfileWidget } from "@midnames/sdk/react/DomainProfileWidget";
import "@midnames/sdk/styles.css";

function App() {
  return <DomainProfileWidget fullDomain="facu.night" />;
}

Props

Required

Prop	Type	Description
fullDomain	string	The .night domain to display

Optional

Prop	Type	Default	Description
publicDataProvider	PublicDataProvider	auto (mainnet)	Custom data provider
variant	'full' | 'compact' | 'inline' | 'minimal'	'full'	Layout variant
theme	'light' | 'dark' | 'auto'	'auto'	Color theme
showBanner	boolean	true	Show banner image
showAvatar	boolean	true	Show avatar
showBio	boolean	true	Show bio text
showDomainInfo	boolean	true	Show address fields
showSocialLinks	boolean	true	Show social link chips
showCopyButtons	boolean	true	Show copy-to-clipboard on addresses
showStatus	boolean	true	Show registration status badge
fields	('target' | 'owner')[]	['target', 'owner']	Which address fields to display
customFields	string[]	[]	Additional domain fields to display
borderRadius	'none' | 'sm' | 'md' | 'lg'	'md'	Card border radius
padding	'none' | 'sm' | 'md' | 'lg'	'md'	Card padding
className	string	—	Additional CSS class
renderActions	(data: DomainProfileData | null) => ReactNode	—	Render custom actions below the profile
onError	(error: MidnamesError) => void	—	Error callback
onFieldClick	(field: string, value: string) => void	—	Field click callback
onCopySuccess	(field: string, value: string) => void	—	Copy success callback

Examples

Compact variant with dark theme

<DomainProfileWidget
  fullDomain="facu.night"
  variant="compact"
  theme="dark"
/>

Minimal card showing only target

<DomainProfileWidget
  fullDomain="facu.night"
  variant="minimal"
  fields={["target"]}
  showBanner={false}
  showSocialLinks={false}
/>

With custom fields and callbacks

<DomainProfileWidget
  fullDomain="facu.night"
  customFields={["website", "github"]}
  onCopySuccess={(field, value) => {
    console.log(`Copied ${field}: ${value}`);
  }}
  onError={(err) => {
    console.error("Widget error:", err.code, err.message);
  }}
/>

Custom actions

<DomainProfileWidget
  fullDomain="facu.night"
  renderActions={(data) => (
    <button onClick={() => window.open(`https://midnight.domains/${data?.fullDomain}`)}>
      View on Midnight Domains
    </button>
  )}
/>

HolographicCard

An interactive card component that fetches domain profile data and renders it with a holographic tilt/shine effect.

import { HolographicCard } from "@midnames/sdk/react/HolographicCard";
import "@midnames/sdk/holographic-card.css";

function App() {
  return <HolographicCard domain="facu.night" />;
}

Props

Required

Prop	Type	Description
domain	string	The .night domain to display

Optional

Prop	Type	Default	Description
publicDataProvider	PublicDataProvider	auto (mainnet)	Custom data provider
showUserInfo	boolean	true	Show avatar, name, and bio
enableTilt	boolean	true	Enable mouse-tracking tilt effect
enableMobileTilt	boolean	false	Enable device-orientation tilt on mobile
mobileTiltSensitivity	number	5	Degrees of tilt per unit of device rotation
behindGradient	string	holographic default	CSS gradient rendered behind the card
innerGradient	string	linear-gradient(145deg, ...)	CSS gradient for the card face
showBehindGradient	boolean	true	Show the behind gradient layer
contactText	string	"Contact"	Label for the contact action button
className	string	—	Additional CSS class on the card wrapper
onContactClick	() => void	—	Called when the contact button is clicked
onError	(error: MidnamesError) => void	—	Error callback

Example with custom gradient

<HolographicCard
  domain="facu.night"
  behindGradient="radial-gradient(circle at 50% 50%, #22d3ee44 0%, transparent 70%)"
  contactText="Send message"
  onContactClick={() => console.log("contact clicked")}
/>