[attestations] Add attestations to mvr frontend

app/.env.example

@@ -12,3 +12,9 @@
 # Example:
 # SERVERVAR="foo"
 # NEXT_PUBLIC_CLIENTVAR="bar"
+
+# Optional: point ALL networks at a local stack (a localnet + the attestation
+# demo server) so the app doesn't depend on live Sui infra. Leave unset for
+# production. See ATTESTATION-INTEGRATION.md.
+# NEXT_PUBLIC_LOCAL_RPC_URL="http://127.0.0.1:9000"
+# NEXT_PUBLIC_LOCAL_MVR_ENDPOINT="http://127.0.0.1:8000"

app/src/app/attestors/page.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { PlainPageLayout } from "@/components/layouts/PlainPageLayout";
+import { Text } from "@/components/ui/Text";
+import { AttesterAvatar } from "@/components/single-package/SinglePackageTrustSignals";
+import { attestationConfig, type TrustedAttestor } from "@/lib/attestations";
+import { beautifySuiAddress } from "@/lib/utils";
+
+export default function TrustedAttestorsPage() {
+  const cfg = attestationConfig();
+  const attestors = cfg?.trustedAttestors ?? [];
+
+  return (
+    <PlainPageLayout>
+      <div className="flex flex-col gap-lg py-lg">
+        <div className="flex flex-col gap-xs">
+          <Text kind="heading" size="heading-regular">
+            Trusted attestors
+          </Text>
+          <Text
+            as="p"
+            kind="paragraph"
+            size="paragraph-small"
+            className="max-w-2xl text-content-secondary"
+          >
+            Attestations are surfaced only from this curated set of attesters.
+            Trust is a consumer-side choice — these are the packages MVR
+            recognizes as authoritative sources of audits and vulnerability
+            disclosures.
+          </Text>
+        </div>
+
+        {attestors.length === 0 ? (
+          <Text as="p" kind="paragraph" size="paragraph-small">
+            No trusted attestors are configured.
+          </Text>
+        ) : (
+          <div className="flex flex-col gap-sm">
+            {attestors.map((a) => (
+              <AttestorCard key={a.originalId} attestor={a} />
+            ))}
+          </div>
+        )}
+      </div>
+    </PlainPageLayout>
+  );
+}
+
+function AttestorCard({ attestor }: { attestor: TrustedAttestor }) {
+  return (
+    <div className="flex items-center gap-md rounded-md bg-bg-secondary p-md">
+      <AttesterAvatar attestor={attestor} size="lg" />
+      <div className="flex flex-col gap-2xs">
+        <Text kind="label" size="label-regular">
+          {attestor.name}
+        </Text>
+        {attestor.mvrName ? (
+          <a
+            href={`/package/${attestor.mvrName}`}
+            className="text-content-accent underline w-fit"
+          >
+            <Text kind="paragraph" size="paragraph-xs">
+              {attestor.mvrName}
+            </Text>
+          </a>
+        ) : (
+          <Text
+            as="p"
+            kind="paragraph"
+            size="paragraph-xs"
+            className="font-mono opacity-60"
+          >
+            {beautifySuiAddress(attestor.originalId)}
+          </Text>
+        )}
+      </div>
+    </div>
+  );
+}

app/src/components/providers/client-provider.tsx

@@ -33,15 +33,23 @@ export type Clients = {
   };
 };
 
+// When set (the local demo stack — a localnet + the attestation demo server),
+// ALL networks are pointed at it so the app does not depend on live Sui infra.
+// Unset in production, where the per-network defaults apply.
+// See ATTESTATION-INTEGRATION.md.
+const LOCAL_RPC = process.env.NEXT_PUBLIC_LOCAL_RPC_URL;
+const LOCAL_MVR = process.env.NEXT_PUBLIC_LOCAL_MVR_ENDPOINT;
+const LOCAL_GRAPHQL = process.env.NEXT_PUBLIC_LOCAL_GRAPHQL;
+
 const mainnet = new SuiClient({
-  url: "https://suins-rpc.mainnet.sui.io:443",
+  url: LOCAL_RPC ?? "https://suins-rpc.mainnet.sui.io:443",
   network: "mainnet",
 });
 
 export const DefaultClients: Clients = {
   mainnet,
   testnet: new SuiClient({
-    url: "https://suins-rpc.testnet.sui.io",
+    url: LOCAL_RPC ?? "https://suins-rpc.testnet.sui.io",
     network: "testnet",
   }),
   devnet: new SuiClient({ url: getFullnodeUrl("devnet"), network: "devnet" }),
@@ -57,19 +65,19 @@ export const DefaultClients: Clients = {
   },
   graphql: {
     mainnet: new SuiGraphQLClient({
-      url: "https://graphql.mainnet.sui.io/graphql",
+      url: LOCAL_GRAPHQL ?? "https://graphql.mainnet.sui.io/graphql",
     }),
     testnet: new SuiGraphQLClient({
-      url: "https://graphql.testnet.sui.io/graphql",
+      url: LOCAL_GRAPHQL ?? "https://graphql.testnet.sui.io/graphql",
     }),
   },
   mvrEndpoints: {
-    mainnet: "https://mainnet.mvr.mystenlabs.com",
-    testnet: "https://testnet.mvr.mystenlabs.com",
+    mainnet: LOCAL_MVR ?? "https://mainnet.mvr.mystenlabs.com",
+    testnet: LOCAL_MVR ?? "https://testnet.mvr.mystenlabs.com",
   },
   mvrExperimentalEndpoints: {
-    mainnet: "https://qa.mainnet.mvr.mystenlabs.com",
-    testnet: "https://qa.testnet.mvr.mystenlabs.com",
+    mainnet: LOCAL_MVR ?? "https://qa.mainnet.mvr.mystenlabs.com",
+    testnet: LOCAL_MVR ?? "https://qa.testnet.mvr.mystenlabs.com",
   },
 };
 

app/src/components/single-package/SinglePackage.tsx

@@ -12,6 +12,14 @@ import { ReadMeRenderer } from "./ReadMeRenderer";
 import { SinglePackageDependencies } from "./SinglePackageDependencies";
 import { SinglePackageDependents } from "./SinglePackageDependents";
 import { SinglePackageVersions } from "./SinglePackageVersions";
+import {
+  SinglePackageTrustSignals,
+  TrustSignalCount,
+} from "./SinglePackageTrustSignals";
+import {
+  SinglePackageIssued,
+  IssuedCount,
+} from "./SinglePackageIssued";
 import { DependenciesIconSelected } from "@/icons/single-package/DependenciesIcon";
 import { DependendsIconSelected } from "@/icons/single-package/DependendsIcon";
 import { DependenciesIconUnselected } from "@/icons/single-package/DependenciesIcon";
@@ -23,6 +31,24 @@ import { ReadMeIconUnselected } from "@/icons/single-package/ReadMeIcon";
 import { SinglePackageTab } from "@/utils/types";
 import { AnalyticsIconUnselected } from "@/icons/single-package/AnalyticsIcon";
 import { AnalyticsIconSelected } from "@/icons/single-package/AnalyticsIcon";
+import { attestationConfig, isConfiguredAttestor } from "@/lib/attestations";
+
+// Simple shield-check glyph for the Trust Signals tab; reused for both states.
+const TrustSignalsIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z" />
+    <path d="M9 12l2 2 4-4" />
+  </svg>
+);
+
+// Upload/outbox glyph for the Issued tab (attestations this package emits).
+const IssuedIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" />
+    <path d="M12 15V3" />
+    <path d="M7 8l5-5 5 5" />
+  </svg>
+);
 
 export const Tabs: SinglePackageTab[] = [
   {
@@ -68,6 +94,28 @@ export const Tabs: SinglePackageTab[] = [
     ) => <NameTotalDependentsCount name={name!.name} network={network} />,
     component: (name: ResolvedName) => <SinglePackageDependents name={name} />,
   },
+  {
+    key: "trust-signals",
+    title: "Security",
+    selectedIcon: <TrustSignalsIcon />,
+    unselectedIcon: <TrustSignalsIcon />,
+    label: (address: string, network: "mainnet" | "testnet") => (
+      <TrustSignalCount address={address} network={network} />
+    ),
+    component: (name: ResolvedName) => <SinglePackageTrustSignals name={name} />,
+  },
+  {
+    key: "issued",
+    title: "Attestations",
+    selectedIcon: <IssuedIcon />,
+    unselectedIcon: <IssuedIcon />,
+    label: (
+      _address: string,
+      network: "mainnet" | "testnet",
+      name?: ResolvedName,
+    ) => (name ? <IssuedCount name={name} network={network} /> : null),
+    component: (name: ResolvedName) => <SinglePackageIssued name={name} />,
+  },
   {
     key: "analytics",
     title: "Analytics",
@@ -89,7 +137,17 @@ export function SinglePackage({
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const [activeTab, setActiveTab] = useState(Tabs[0]!.key);
+  // The "Issued" tab is in the nav only for configured attesters (a free
+  // in-memory check), but it stays reachable by URL (?tab=issued) for any
+  // package — the panel shows a not-trusted warning. So nav visibility
+  // (navTabs) and URL-selectability (the full Tabs list) differ.
+  const cfg = attestationConfig();
+  const navTabs =
+    cfg && isConfiguredAttestor(cfg, name.package_address)
+      ? Tabs
+      : Tabs.filter((t) => t.key !== "issued");
+
+  const [activeTab, setActiveTab] = useState(navTabs[0]!.key);
 
   useEffect(() => {
     const tab = searchParams.get("tab");
@@ -112,7 +170,7 @@ export function SinglePackage({
       <div className="container">
         <div className="grid grid-cols-1 gap-2xl lg:grid-cols-24">
           <SinglePackageTabs
-            tabs={Tabs}
+            tabs={navTabs}
             name={name}
             setActiveTab={updateTab}
             isActiveTab={isActiveTab}

app/src/components/single-package/SinglePackageHeader.tsx

@@ -1,8 +1,28 @@
+import Link from "next/link";
 import { ResolvedName } from "@/hooks/mvrResolution";
 import { Text } from "../ui/Text";
 import ImageWithFallback from "../ui/image-with-fallback";
 import { beautifySuiAddress } from "@/lib/utils";
 import { CopyBtn } from "../ui/CopyBtn";
+import { attestationConfig, isConfiguredAttestor } from "@/lib/attestations";
+import { ShieldCheckIcon } from "@/icons/single-package/ShieldCheckIcon";
+
+/** Pill marking a package as a trusted attestor in this consumer's trust
+ *  config. Links to the full trusted-attestors list. Uses next/link so the
+ *  first click navigates (a plain <a> hard-navigates and was flaky here). */
+function TrustedAttestorBadge() {
+  return (
+    <Link
+      href="/attestors"
+      className="flex items-center gap-2xs rounded-full bg-bg-quarternaryBleedthrough px-xs py-2xs hover:bg-bg-accentBleedthrough3"
+    >
+      <ShieldCheckIcon className="h-3.5 w-3.5 text-content-positive" />
+      <Text kind="label" size="label-2xs">
+        MVR-trusted attestor
+      </Text>
+    </Link>
+  );
+}
 
 export function SinglePackageHeader({
   name,
@@ -11,6 +31,10 @@ export function SinglePackageHeader({
   name: ResolvedName;
   network: "mainnet" | "testnet";
 }) {
+  const cfg = attestationConfig();
+  const isTrustedAttestor =
+    !!cfg && isConfiguredAttestor(cfg, name.package_address);
+
   return (
     <div className="container flex items-center justify-between py-md md:py-lg">
       <div className="flex items-center gap-md">
@@ -20,9 +44,12 @@ export function SinglePackageHeader({
           className="h-14 w-14 rounded-sm"
         />
         <div className="flex flex-col gap-2xs">
-          <Text kind="heading" size="heading-regular">
-            {name.name}
-          </Text>
+          <div className="flex items-center gap-sm">
+            <Text kind="heading" size="heading-regular">
+              {name.name}
+            </Text>
+            {isTrustedAttestor && <TrustedAttestorBadge />}
+          </div>
           <Text
             kind="paragraph"
             size="paragraph-xs"