Example Website Integration

Here's how you can integrate Somnia Domain Services (SDS) into different types of applications.

🟦 React / Next.js

import { useEffect, useState } from "react";
import { getPrimarySomName } from "@/lib/sds";

export function DisplayName({ address }: { address: string }) {
  const [name, setName] = useState<string | null>(null);

  useEffect(() => {
    getPrimarySomName(address).then(setName);
  }, [address]);

  return <span>{name || address}</span>;
}

🟨 Vanilla JS + HTML

<script type="module">
import { getPrimarySomName } from "./lib/sds.js";

const address = "0x123...abc";
const element = document.getElementById("username");

getPrimarySomName(address).then(name => {
  element.textContent = name || address;
});
</script>

<span id="username">Loading...</span>

🟩 Node.js / Backend

import { getPrimarySomName } from "./lib/sds";

async function resolveName(addr: string) {
  const name = await getPrimarySomName(addr);
  return name || addr;
}

🔁 Fallback Logic

Always use a fallback if the name is not registered:

const display = somniaName || walletAddress;

This ensures your app never breaks.

---

Next: Network details you’ll need for RPC access and smart contract connection.