feat: updatable terms & conditions

package.json

@@ -19,6 +19,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "test-storybook",
+    "test:unit": "vitest run",
     "coverage": "test-storybook --coverage",
     "chromatic": "npx chromatic"
   },
@@ -63,11 +64,13 @@
     "async-mutex": "^0.5.0",
     "blockstore-core": "^5.0.2",
     "buffer": "^6.0.3",
+    "canonify": "^2.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "lucide-react": "^0.475.0",
     "lute-connect": "^1.4.1",
+    "marked": "^17.0.3",
     "multiformats": "^13.3.1",
     "nanostores": "^0.10.3",
     "p-map": "^7.0.3",
@@ -79,6 +82,7 @@
     "react-router-dom": "^6.27.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
+    "tweetnacl": "^1.0.3",
     "typescript": "^5.6.3",
     "zod": "^3.24.1"
   },
@@ -112,6 +116,7 @@
     "tsx": "^4.19.3",
     "vite-plugin-pwa": "^1.0.0",
     "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^4.0.18",
     "yargs": "^18.0.0"
   },
   "peerDependencies": {

src/components/ProfileCard/ProfileCard.tsx

@@ -5,8 +5,8 @@ import { cn } from "@/functions";
 import { XGovProposerStatusPill } from "../XGovProposerStatusPill/XGovProposerStatusPill";
 import { XGovStatusPill } from "../XGovStatusPill/XGovStatusPill";
 import { useState } from "react";
-import termsAndConditionsString from "./TermsAndConditionsText.md?raw";
 import { TermsAndConditionsModal } from "@/recipes";
+import { useTerms } from "@/hooks";
 import { TestnetDispenserBanner } from "../TestnetDispenserBanner/TestnetDispenserBanner";
 import { BecomeProposerModal } from "../BecomeProposerModal/BecomeProposerModal";
 import { BecomeXGovModal } from "../BecomeXGovModal/BecomeXGovModal";
@@ -59,6 +59,7 @@ export function ProfileCard({
   className = "",
 }: ProfileCardProps) {
   const delegates = useXGovDelegates(address);
+  const terms = useTerms();
   const [showBecomeXGovModal, setShowBecomeXGovModal] = useState(false);
   const [showBecomeProposerModal, setShowBecomeProposerModal] = useState(false);
   const [showBecomeProposerTermsModal, setShowBecomeProposerTermsModal] = useState(false);
@@ -219,7 +220,7 @@ export function ProfileCard({
             </span>
           </>
         }
-        terms={termsAndConditionsString}
+        terms={terms.data?.content ?? ""}
         isOpen={showBecomeProposerTermsModal}
         onClose={() => setShowBecomeProposerTermsModal(false)}
         onAccept={() => {

src/components/TermsAndConditionsView/TermsAndConditionsView.tsx

@@ -1,18 +1,41 @@
-import { formatMarkdownToHtml } from "@/recipes";
-import termsAndConditionsString from "../ProfileCard/TermsAndConditionsText.md?raw";
+import { renderTermsMarkdown } from "@/lib/markdown";
+import { useTerms } from "@/hooks";
+import { UseQuery } from "@/hooks/useQuery";
 
 interface TermsAndConditionsViewProps {
   title?: string;
   description?: string | JSX.Element;
   className?: string;
 }
 
-export function TermsAndConditionsView({
+function TermsAndConditionsContent({
   title = "xGov Proposer Terms & Conditions",
   description,
   className = "",
 }: TermsAndConditionsViewProps) {
-  const formattedContent = formatMarkdownToHtml(termsAndConditionsString);
+  const terms = useTerms();
+
+  if (terms.isLoading) {
+    return (
+      <div className={`w-full max-w-6xl mx-auto p-4 ${className}`}>
+        <div className="text-center text-gray-500 dark:text-gray-400 py-12">
+          Loading terms...
+        </div>
+      </div>
+    );
+  }
+
+  if (terms.isError) {
+    return (
+      <div className={`w-full max-w-6xl mx-auto p-4 ${className}`}>
+        <div className="text-center text-red-500 py-12">
+          Failed to load terms and conditions.
+        </div>
+      </div>
+    );
+  }
+
+  const formattedContent = renderTermsMarkdown(terms.data?.content ?? "");
 
   return (
     <div className={`w-full max-w-6xl mx-auto p-4 ${className}`}>
@@ -38,3 +61,11 @@ export function TermsAndConditionsView({
     </div>
   );
 }
+
+export function TermsAndConditionsView(props: TermsAndConditionsViewProps) {
+  return (
+    <UseQuery>
+      <TermsAndConditionsContent {...props} />
+    </UseQuery>
+  );
+}

src/components/TutorialDialog/TutorialDialog.tsx

@@ -12,11 +12,11 @@ import { Button } from "@/components/ui/button";
 import { CheckIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { cn } from "@/functions";
 import { TermsAndConditionsModal } from "@/recipes";
-import termsAndConditionsString from "../ProfileCard/TermsAndConditionsText.md?raw";
 import { BecomeProposerModal } from "../BecomeProposerModal/BecomeProposerModal";
 import { BecomeXGovModal } from "../BecomeXGovModal/BecomeXGovModal";
 import type { TransactionStateInfo } from "@/api/types/transaction_state";
 import { CheckCircleIcon } from "../icons/CheckCircleIcon";
+import { useTerms } from "@/hooks";
 
 export interface TutorialDialogProps {
   isOpen: boolean;
@@ -110,6 +110,7 @@ export function TutorialDialog({
   isXGov = false,
   isProposer = false
 }: TutorialDialogProps) {
+  const terms = useTerms();
   const [currentStep, setCurrentStep] = useState(0);
   const [showBecomeXGovModal, setShowBecomeXGovModal] = useState(false);
   const [showBecomeProposerModal, setShowBecomeProposerModal] = useState(false);
@@ -448,7 +449,7 @@ export function TutorialDialog({
             </div>
           </>
         }
-        terms={termsAndConditionsString}
+        terms={terms.data?.content ?? ""}
         isOpen={showBecomeProposerTermsModal}
         onClose={() => setShowBecomeProposerTermsModal(false)}
         onAccept={() => {

src/env.d.ts

@@ -1,2 +1,15 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+type R2Bucket = import("@cloudflare/workers-types").R2Bucket;
+
+declare namespace App {
+  interface Locals {
+    runtime?: {
+      env: {
+        BUCKET?: R2Bucket;
+        [key: string]: unknown;
+      };
+    };
+  }
+}

src/hooks/index.ts

@@ -10,4 +10,5 @@ export * from "./useQuery.tsx";
 export * from "./useRegistry.ts";
 export * from "./useSearchParams.ts";
 export * from "./useTimeLeft.ts";
+export * from "./useTerms.ts";
 export * from "./useWallet.tsx";

src/hooks/useTerms.ts

@@ -0,0 +1,23 @@
+import { useQuery } from "@tanstack/react-query";
+
+interface TermsData {
+  content: string;
+  source: "r2" | "static";
+  version: number;
+}
+
+async function fetchTerms(): Promise<TermsData> {
+  const res = await fetch("/api/terms");
+  if (!res.ok) {
+    throw new Error("Failed to fetch terms");
+  }
+  return res.json();
+}
+
+export function useTerms() {
+  return useQuery({
+    queryKey: ["terms"],
+    queryFn: fetchTerms,
+    staleTime: 5 * 60 * 1000,
+  });
+}