Fixes #258: Add deterministic Community Metadata preview and download

apps/web/src/app/(app)/communities/[id]/proposals/page.tsx

@@ -45,7 +45,7 @@ function ScopedProposalHistory({ community }: { community: CommunityView }) {
       try {
         const client = createReadOnlyGovernorClient(governorContract);
         const transaction = await client.proposal_state({
-          proposal_id: Uint8Array.from(Buffer.from(proposalId, "hex")),
+          proposal_id: Buffer.from(proposalId, "hex") as any,
         });
         setStates((current) => ({
           ...current,

apps/web/src/components/community/CommunityMetadataPreview.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { type CommunityMetadataDraft, validateCommunityMetadataDraft } from "@/lib/community/schema";
+import { serializeCommunityMetadata, type SerializedMetadata } from "@/lib/community/metadata";
+
+export function CommunityMetadataPreview({ draft }: { draft: CommunityMetadataDraft }) {
+  const [serialized, setSerialized] = useState<SerializedMetadata | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    serializeCommunityMetadata(draft).then((res) => {
+      if (active) setSerialized(res);
+    });
+    return () => {
+      active = false;
+    };
+  }, [draft]);
+
+  if (!serialized) {
+    return <div className="text-sm text-slate-400">Building metadata...</div>;
+  }
+
+  const errors = validateCommunityMetadataDraft(draft);
+  const isValid = Object.keys(errors).length === 0;
+
+  function handleDownload() {
+    if (!isValid || !serialized) return;
+    const blob = new Blob([serialized.json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "community-metadata.json";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-lg bg-[#0b0f19] p-4 font-mono text-xs text-slate-300">
+        <pre className="overflow-x-auto">{serialized.json}</pre>
+      </div>
+      <div className="flex items-center justify-between">
+        <div className="text-sm">
+          <span className="text-slate-500">SHA-256 Hash: </span>
+          <span className="font-mono text-slate-100 break-all">{serialized.hash}</span>
+        </div>
+        <button
+          type="button"
+          disabled={!isValid}
+          onClick={handleDownload}
+          className="rounded-lg border border-slate-700 px-3 py-1.5 text-sm text-slate-200 transition hover:bg-slate-800 disabled:opacity-50"
+        >
+          Download JSON
+        </button>
+      </div>
+      {!isValid && (
+        <p className="text-xs text-amber-200">
+          Fix metadata errors before downloading.
+        </p>
+      )}
+    </div>
+  );
+}

apps/web/src/components/community/CreateCommunityWizard.tsx

@@ -13,6 +13,7 @@ import {
 import { useWallet } from "@/context/WalletProvider";
 import { useNetworkGuard } from "@/hooks/useNetworkGuard";
 import { NetworkMismatchNotice } from "@/components/NetworkMismatchNotice";
+import { CommunityMetadataPreview } from "./CommunityMetadataPreview";
 import {
   CREATION_STEPS,
   CREATION_DRAFT_STORAGE_KEY,
@@ -73,6 +74,11 @@ const STEP_LABELS: Record<CreationStep, string> = {
 const METADATA_FIELDS = [
   { key: "name", label: "Community name", placeholder: "Stolla Builders" },
   { key: "symbol", label: "Token symbol", placeholder: "STBL" },
+  { key: "description", label: "Description", placeholder: "A community for builders" },
+  { key: "collectionUri", label: "Collection URI", placeholder: "ipfs://Qm..." },
+  { key: "logo", label: "Logo URI", placeholder: "ipfs://Qm..." },
+  { key: "externalLinkLabel", label: "Link Label", placeholder: "Website" },
+  { key: "externalLinkUrl", label: "Link URL", placeholder: "https://stolla.org" },
   { key: "metadataUri", label: "IPFS metadata URI", placeholder: "ipfs://Qm..." },
 ] as const;
 
@@ -358,7 +364,17 @@ export function CreateCommunityWizard({
               </div>
             ))}
           </dl>
-          <NetworkFacts comparison={comparison} address={address} />
+
+          <div className="mt-6 border-t border-slate-800 pt-6">
+            <h3 className="mb-4 text-sm font-medium text-slate-300">
+              Community Metadata
+            </h3>
+            <CommunityMetadataPreview draft={state.draft} />
+          </div>
+
+          <div className="mt-6 border-t border-slate-800 pt-6">
+            <NetworkFacts comparison={comparison} address={address} />
+          </div>
         </Panel>
       )}
 

apps/web/src/hooks/useNetworkGuard.ts

@@ -2,18 +2,15 @@
 
 import { useMemo } from "react";
 import { useWallet } from "@/context/WalletProvider";
-import { compareNetworks, type NetworkComparison } from "@/lib/network";
+import { compareNetworks, describeNetwork, type NetworkComparison } from "@/lib/network";
 import { activeNetwork } from "@/lib/stellar";
 
-/**
- * Reconciles the network the wallet reports with the one the application is
- * configured for. Every gate in the app reads this rather than the wallet
- * network directly, so mismatch handling stays in one place.
- */
 export function useNetworkGuard(): NetworkComparison {
-  const { walletNetwork } = useWallet();
-  return useMemo(
-    () => compareNetworks(activeNetwork, walletNetwork),
-    [walletNetwork],
-  );
+  const { walletNetworkPassphrase, walletNetwork } = useWallet();
+  return useMemo(() => {
+    const detected = walletNetworkPassphrase 
+      ? describeNetwork(walletNetworkPassphrase, walletNetwork ?? undefined) 
+      : null;
+    return compareNetworks(activeNetwork, detected);
+  }, [walletNetworkPassphrase, walletNetwork]);
 }

apps/web/src/lib/community-creation.test.ts

@@ -17,7 +17,12 @@ import { NETWORKS, compareNetworks, describeNetwork } from "./network";
 const DRAFT: CommunityDraft = {
   name: "Stolla Builders",
   symbol: "STBL",
+  description: "A community for builders",
+  collectionUri: "ipfs://QmCollection",
   metadataUri: "ipfs://QmCollection",
+  logo: "",
+  externalLinkLabel: "",
+  externalLinkUrl: "",
   votingDelay: "1",
   votingPeriod: "10000",
   proposalThreshold: "1",

apps/web/src/lib/community-creation.ts

@@ -12,7 +12,12 @@ export type CreationStep = (typeof CREATION_STEPS)[number];
 export type CommunityDraft = {
   name: string;
   symbol: string;
+  description: string;
+  collectionUri: string;
   metadataUri: string;
+  logo: string;
+  externalLinkLabel: string;
+  externalLinkUrl: string;
   votingDelay: string;
   votingPeriod: string;
   proposalThreshold: string;
@@ -67,7 +72,12 @@ export type CreationState = {
 export const DEFAULT_DRAFT: CommunityDraft = {
   name: "",
   symbol: "",
+  description: "",
+  collectionUri: "",
   metadataUri: "",
+  logo: "",
+  externalLinkLabel: "",
+  externalLinkUrl: "",
   votingDelay: "1",
   votingPeriod: "10000",
   proposalThreshold: "1",

apps/web/src/lib/community-factory.test.ts

@@ -11,7 +11,12 @@ import type { CommunitySimulation, CommunityDraft } from "./community-creation";
 const DRAFT: CommunityDraft = {
   name: "Stolla Builders",
   symbol: "STBL",
+  description: "A community for builders",
+  collectionUri: "ipfs://QmCollection",
   metadataUri: "ipfs://QmCollection",
+  logo: "",
+  externalLinkLabel: "",
+  externalLinkUrl: "",
   votingDelay: "1",
   votingPeriod: "10000",
   proposalThreshold: "1",

apps/web/src/lib/community/metadata.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+import { serializeCommunityMetadata } from "./metadata";
+import type { CommunityMetadataDraft } from "./schema";
+
+const baseDraft: CommunityMetadataDraft = {
+  name: "  My Community  ",
+  symbol: "MC",
+  description: "  This is a \n test.  ",
+  collectionUri: "ipfs://collection",
+  metadataUri: "ipfs://metadata",
+  logo: "  https://logo.png  ",
+  externalLinkLabel: "  Website  ",
+  externalLinkUrl: "  https://example.com  ",
+};
+
+describe("serializeCommunityMetadata", () => {
+  it("normalizes inputs and maintains fixed ordering", async () => {
+    const res1 = await serializeCommunityMetadata(baseDraft);
+    const res2 = await serializeCommunityMetadata({
+      ...baseDraft,
+      name: "My Community", // Already trimmed
+      description: "This is a \n test.",
+      logo: "https://logo.png",
+      externalLinkLabel: "Website",
+      externalLinkUrl: "https://example.com",
+    });
+
+    expect(res1.json).toBe(res2.json);
+    expect(res1.hash).toBe(res2.hash);
+    expect(res1.json).toContain('"name": "My Community"');
+    expect(res1.json).toContain('"logo": "https://logo.png"');
+    expect(res1.json).toContain('"label": "Website"');
+  });
+
+  it("handles Unicode correctly", async () => {
+    const draft = {
+      ...baseDraft,
+      name: "🚀 Emoji 🚀",
+      description: "Tésting Ünicode",
+    };
+    const res = await serializeCommunityMetadata(draft);
+    expect(res.json).toContain("🚀 Emoji 🚀");
+    expect(res.json).toContain("Tésting Ünicode");
+    // Verify hash stability for specific known input
+    expect(res.hash).toHaveLength(64); 
+  });
+
+  it("handles empty optional fields", async () => {
+    const draft = {
+      ...baseDraft,
+      logo: "   ",
+      externalLinkLabel: " ",
+      externalLinkUrl: "",
+    };
+    const res = await serializeCommunityMetadata(draft);
+    expect(res.json).not.toContain("logo");
+    expect(res.json).toContain('"externalLinks": []');
+  });
+
+  it("escapes characters as standard JSON", async () => {
+    const draft = {
+      ...baseDraft,
+      description: 'Quote " test \\ slash',
+    };
+    const res = await serializeCommunityMetadata(draft);
+    expect(res.json).toContain('Quote \\" test \\\\ slash');
+  });
+});

apps/web/src/lib/community/metadata.ts

@@ -0,0 +1,48 @@
+import { COMMUNITY_SCHEMA_VERSION, type CommunityMetadataDraft } from "./schema";
+
+export type SerializedMetadata = {
+  bytes: Uint8Array;
+  json: string;
+  hash: string;
+};
+
+export async function serializeCommunityMetadata(draft: CommunityMetadataDraft): Promise<SerializedMetadata> {
+  const metadata = {
+    schemaVersion: COMMUNITY_SCHEMA_VERSION,
+    name: draft.name.trim(),
+    description: draft.description.trim(),
+  } as Record<string, unknown>;
+
+  if (draft.logo.trim()) {
+    metadata.logo = draft.logo.trim();
+  }
+
+  const linkLabel = draft.externalLinkLabel.trim();
+  const linkUrl = draft.externalLinkUrl.trim();
+
+  if (linkLabel && linkUrl) {
+    metadata.externalLinks = [{ label: linkLabel, url: linkUrl }];
+  } else {
+    metadata.externalLinks = [];
+  }
+
+  // To ensure the same normalized inputs always produce identical JSON bytes,
+  // we must insert the keys in a consistent order.
+  const orderedMetadata = {
+    schemaVersion: metadata.schemaVersion,
+    name: metadata.name,
+    description: metadata.description,
+    ...(metadata.logo ? { logo: metadata.logo } : {}),
+    externalLinks: metadata.externalLinks,
+  };
+
+  const json = JSON.stringify(orderedMetadata, null, 2);
+  const encoder = new TextEncoder();
+  const bytes = encoder.encode(json);
+
+  const hashBuffer = await crypto.subtle.digest("SHA-256", bytes);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hash = hashArray.map(b => b.toString(16).padStart(2, "0")).join("");
+
+  return { bytes, json, hash };
+}

apps/web/src/lib/communityFactory/useCommunityDeployment.ts

@@ -27,7 +27,7 @@ const stageLabels: Record<DeploymentStage, string> = {
 };
 
 export function useCommunityDeployment() {
-  const { address, networkPassphrase, signTransaction } = useWallet();
+  const { address, walletNetworkPassphrase, signTransaction } = useWallet();
   const activeSubmissionRef = useRef(false);
   const [stage, setStage] = useState<DeploymentStage>("idle");
   const [error, setError] = useState<string | null>(null);
@@ -55,7 +55,7 @@ export function useCommunityDeployment() {
         const nextOutcome = await deployCommunityFromWizard(state, {
           address,
           expectedNetworkPassphrase: config.networkPassphrase,
-          walletNetworkPassphrase: networkPassphrase,
+          walletNetworkPassphrase: walletNetworkPassphrase,
           createClient: () =>
             createCommunityFactoryClient({
               publicKey: address ?? "",
@@ -78,7 +78,7 @@ export function useCommunityDeployment() {
         activeSubmissionRef.current = false;
       }
     },
-    [address, isSubmitting, networkPassphrase, signTransaction],
+    [address, isSubmitting, walletNetworkPassphrase, signTransaction],
   );
 
   return {

apps/web/src/lib/contracts.ts

@@ -42,7 +42,7 @@ export function createNftClient({
   const nft = contractId ?? requireContractIds().nft;
   return new NftClient({
     contractId: nft,
-    networkPassphrase: config.passphrase,
+    networkPassphrase: config.networkPassphrase,
     rpcUrl: config.rpcUrl,
     publicKey,
     signTransaction,
@@ -59,7 +59,7 @@ export function createGovernorClient({
   if (mocked) return mocked as unknown as GovernorClient;
   return new GovernorClient({
     contractId: governor,
-    networkPassphrase: config.passphrase,
+    networkPassphrase: config.networkPassphrase,
     rpcUrl: config.rpcUrl,
     publicKey,
     signTransaction,
@@ -70,7 +70,7 @@ export function createReadOnlyNftClient(contractId?: string) {
   const nft = contractId ?? requireContractIds().nft;
   return new NftClient({
     contractId: nft,
-    networkPassphrase: config.passphrase,
+    networkPassphrase: config.networkPassphrase,
     rpcUrl: config.rpcUrl,
   });
 }
@@ -81,7 +81,7 @@ export function createReadOnlyGovernorClient(contractId?: string) {
   if (mocked) return mocked as unknown as GovernorClient;
   return new GovernorClient({
     contractId: governor,
-    networkPassphrase: config.passphrase,
+    networkPassphrase: config.networkPassphrase,
     rpcUrl: config.rpcUrl,
   });
 }