feat: analytics script loading

Author: Tarnadas

api/prisma/migrations/20251105103902_add_analytics_script/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Dex" ADD COLUMN     "analyticsScript" TEXT;

api/prisma/schema.prisma

@@ -89,6 +89,7 @@ model Dex {
   seoThemeColor        String?  // SEO Theme Color (e.g., "#1a1b23")
   seoKeywords          String?  // SEO Keywords
   privyLoginMethods    String?  // Comma-separated list of Privy login methods (email,passkey,twitter,google)
+  analyticsScript      String?  // Custom analytics script (GA, Plausible, etc.) with script tags
   isGraduated          Boolean  @default(false) // Whether the DEX has fully graduated
   graduationTxHash    String?  @unique // Transaction hash used for graduation (prevents reuse)
   multisigChainId      Int?     // Chain ID where the multisig delegate signer link was established

api/src/lib/github.ts

@@ -676,6 +676,9 @@ function prepareDexConfigContent(
     VITE_USE_CUSTOM_PNL_POSTERS: pnlPostersData.length > 0 ? "true" : "false",
     VITE_CUSTOM_PNL_POSTER_COUNT: String(pnlPostersData.length),
     VITE_TRADING_VIEW_COLOR_CONFIG: config.tradingViewColorConfig || "",
+
+    // Analytics
+    VITE_ANALYTICS_SCRIPT: config.analyticsScript || "",
   };
 
   const configJsContent = `window.__RUNTIME_CONFIG__ = ${JSON.stringify(

api/src/lib/types.ts

@@ -104,6 +104,7 @@ export interface DexConfig {
   seoTwitterHandle: string | null;
   seoThemeColor: string | null;
   seoKeywords: string | null;
+  analyticsScript: string | null;
 }
 
 /**

api/src/models/dex.ts

@@ -48,6 +48,7 @@ export function convertDexToDexConfig(dex: Dex): DexConfig {
     seoTwitterHandle: dex.seoTwitterHandle,
     seoThemeColor: dex.seoThemeColor,
     seoKeywords: dex.seoKeywords,
+    analyticsScript: dex.analyticsScript,
   };
 }
 
@@ -88,6 +89,7 @@ function convertValidatedDataToDexConfig(
     seoTwitterHandle: validatedData.seoTwitterHandle ?? null,
     seoThemeColor: validatedData.seoThemeColor ?? null,
     seoKeywords: validatedData.seoKeywords ?? null,
+    analyticsScript: validatedData.analyticsScript ?? null,
   };
 }
 
@@ -300,6 +302,10 @@ export const dexSchema = z.object({
     .string()
     .max(500, "Keywords must be 500 characters or less")
     .nullish(),
+  analyticsScript: z
+    .string()
+    .max(2000, "Analytics script must be 2000 characters or less")
+    .nullish(),
 });
 
 export const dexFormSchema = dexSchema
@@ -566,6 +572,7 @@ export async function createDex(
         seoTwitterHandle: validatedData.seoTwitterHandle,
         seoThemeColor: validatedData.seoThemeColor,
         seoKeywords: validatedData.seoKeywords,
+        analyticsScript: validatedData.analyticsScript,
         swapFeeBps: validatedData.swapFeeBps,
         repoUrl: repoUrl,
         user: {
@@ -727,6 +734,8 @@ export async function updateDex(
     updateData.seoThemeColor = validatedData.seoThemeColor;
   if ("seoKeywords" in validatedData)
     updateData.seoKeywords = validatedData.seoKeywords;
+  if ("analyticsScript" in validatedData)
+    updateData.analyticsScript = validatedData.analyticsScript;
 
   try {
     const prismaClient = await getPrisma();

app/app/components/AnalyticsConfigSection.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+interface AnalyticsConfigSectionProps {
+  analyticsScript: string;
+  handleInputChange: (
+    field: string
+  ) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  idPrefix?: string;
+}
+
+const AnalyticsConfigSection: React.FC<AnalyticsConfigSectionProps> = ({
+  analyticsScript,
+  handleInputChange,
+  idPrefix = "",
+}) => {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <label
+          htmlFor={`${idPrefix}analyticsScript`}
+          className="text-sm font-medium text-gray-200"
+        >
+          Analytics Script
+        </label>
+        <textarea
+          id={`${idPrefix}analyticsScript`}
+          name="analyticsScript"
+          value={analyticsScript}
+          onChange={handleInputChange("analyticsScript")}
+          placeholder="Paste your analytics script here (including <script> tags)&#10;&#10;Example:&#10;<script async src='https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX'></script>&#10;<script>&#10;  window.dataLayer = window.dataLayer || [];&#10;  function gtag(){dataLayer.push(arguments);}&#10;  gtag('js', new Date());&#10;  gtag('config', 'G-XXXXXXXXXX');&#10;</script>"
+          className="w-full px-3 py-2 bg-background-light/30 border border-light/20 rounded-lg text-sm font-mono resize-y min-h-[160px] focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50"
+          maxLength={2000}
+        />
+        <div className="flex items-start gap-2 text-xs text-gray-400">
+          <div className="flex-shrink-0 mt-0.5">
+            <div className="i-heroicons:information-circle w-4 h-4" />
+          </div>
+          <div className="flex-1">
+            <p className="mb-2">
+              Add your analytics tracking script from any provider that uses
+              script tags. The script will be securely injected into your DEX.
+            </p>
+            <p>
+              <strong>Note:</strong> Include the complete script tags exactly as
+              provided by your analytics service. The script will be placed in
+              the DEX's HTML head section.
+            </p>
+          </div>
+        </div>
+        {analyticsScript && (
+          <p className="text-xs text-gray-500">
+            {analyticsScript.length} / 2,000 characters
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AnalyticsConfigSection;

app/app/components/DexSectionRenderer.tsx

@@ -6,6 +6,7 @@ import ThemeCustomizationSection from "./ThemeCustomizationSection";
 import PnLPostersSection from "./PnLPostersSection";
 import SocialLinksSection from "./SocialLinksSection";
 import SEOConfigSection from "./SEOConfigSection";
+import AnalyticsConfigSection from "./AnalyticsConfigSection";
 import ReownConfigSection from "./ReownConfigSection";
 import PrivyConfigSection from "./PrivyConfigSection";
 import BlockchainConfigSection from "./BlockchainConfigSection";
@@ -145,6 +146,19 @@ export const DEX_SECTIONS: DexSectionConfig[] = [
   },
   {
     id: 7,
+    key: "analyticsConfiguration",
+    title: "Analytics Configuration",
+    description:
+      "Add your analytics tracking script to monitor usage and performance of your DEX. Supports Google Analytics, Plausible, Matomo, and other analytics services. This is completely optional.",
+    isOptional: true,
+    component: AnalyticsConfigSection,
+    getProps: props => ({
+      analyticsScript: props.analyticsScript,
+      handleInputChange: props.handleInputChange,
+    }),
+  },
+  {
+    id: 8,
     key: "reownConfiguration",
     title: "Reown Configuration",
     description:
@@ -157,7 +171,7 @@ export const DEX_SECTIONS: DexSectionConfig[] = [
     }),
   },
   {
-    id: 8,
+    id: 9,
     key: "privyConfiguration",
     title: "Privy Configuration",
     description:
@@ -184,7 +198,7 @@ export const DEX_SECTIONS: DexSectionConfig[] = [
         : true,
   },
   {
-    id: 9,
+    id: 10,
     key: "blockchainConfiguration",
     title: "Blockchain Configuration",
     description:
@@ -203,7 +217,7 @@ export const DEX_SECTIONS: DexSectionConfig[] = [
     }),
   },
   {
-    id: 10,
+    id: 11,
     key: "languageSupport",
     title: "Language Support",
     description:
@@ -216,7 +230,7 @@ export const DEX_SECTIONS: DexSectionConfig[] = [
     }),
   },
   {
-    id: 11,
+    id: 12,
     key: "navigationMenus",
     title: "Navigation Menus",
     description:
@@ -235,7 +249,7 @@ export const DEX_SECTIONS: DexSectionConfig[] = [
     }),
   },
   {
-    id: 12,
+    id: 13,
     key: "serviceDisclaimer",
     title: "Service Disclaimer",
     description:

app/app/hooks/useDexForm.ts

@@ -71,6 +71,7 @@ export interface DexSectionProps {
   seoTwitterHandle: string;
   seoThemeColor: string;
   seoKeywords: string;
+  analyticsScript: string;
   walletConnectProjectId: string;
   privyAppId: string;
   privyTermsOfUse: string;
@@ -141,6 +142,7 @@ export interface DexFormData {
   seoTwitterHandle: string;
   seoThemeColor: string;
   seoKeywords: string;
+  analyticsScript: string;
 }
 
 export interface UseDexFormReturn extends DexFormData {
@@ -188,9 +190,10 @@ export interface UseDexFormReturn extends DexFormData {
   setSeoTwitterHandle: (value: string) => void;
   setSeoThemeColor: (value: string) => void;
   setSeoKeywords: (value: string) => void;
+  setAnalyticsScript: (value: string) => void;
   handleInputChange: (
     field: string
-  ) => (e: React.ChangeEvent<HTMLInputElement>) => void;
+  ) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
   handleImageChange: (field: string) => (blob: Blob | null) => void;
   handlePnLPosterChange: (posters: (Blob | null)[]) => void;
   populateFromDexData: (
@@ -287,6 +290,7 @@ const initialFormState: DexFormData = {
   seoTwitterHandle: "",
   seoThemeColor: "",
   seoKeywords: "",
+  analyticsScript: "",
 };
 
 export function useDexForm(): UseDexFormReturn {
@@ -388,9 +392,13 @@ export function useDexForm(): UseDexFormReturn {
     initialFormState.seoThemeColor
   );
   const [seoKeywords, setSeoKeywords] = useState(initialFormState.seoKeywords);
+  const [analyticsScript, setAnalyticsScript] = useState(
+    initialFormState.analyticsScript
+  );
 
   const handleInputChange =
-    (field: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    (field: string) =>
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       const value = e.target.value;
       switch (field) {
         case "brokerName":
@@ -438,6 +446,9 @@ export function useDexForm(): UseDexFormReturn {
         case "seoKeywords":
           setSeoKeywords(value);
           break;
+        case "analyticsScript":
+          setAnalyticsScript(value);
+          break;
       }
     };
 
@@ -526,6 +537,8 @@ export function useDexForm(): UseDexFormReturn {
         setSeoThemeColor(dexData.seoThemeColor);
       if (dexData.seoKeywords !== undefined)
         setSeoKeywords(dexData.seoKeywords);
+      if (dexData.analyticsScript !== undefined)
+        setAnalyticsScript(dexData.analyticsScript);
 
       if (dexData.themeCSS !== undefined) {
         setCurrentTheme(dexData.themeCSS);
@@ -614,6 +627,7 @@ export function useDexForm(): UseDexFormReturn {
         seoTwitterHandle,
         seoThemeColor,
         seoKeywords,
+        analyticsScript,
       },
       images: {
         primaryLogo: primaryLogoBase64,
@@ -659,6 +673,7 @@ export function useDexForm(): UseDexFormReturn {
     seoTwitterHandle,
     seoThemeColor,
     seoKeywords,
+    analyticsScript,
   ]);
 
   const resetForm = () => {
@@ -700,6 +715,7 @@ export function useDexForm(): UseDexFormReturn {
     setSeoTwitterHandle(initialFormState.seoTwitterHandle);
     setSeoThemeColor(initialFormState.seoThemeColor);
     setSeoKeywords(initialFormState.seoKeywords);
+    setAnalyticsScript(initialFormState.analyticsScript);
   };
 
   const generateTheme = useCallback(
@@ -917,6 +933,7 @@ export function useDexForm(): UseDexFormReturn {
       seoTwitterHandle,
       seoThemeColor,
       seoKeywords,
+      analyticsScript,
       walletConnectProjectId,
       privyAppId,
       privyTermsOfUse,
@@ -975,6 +992,7 @@ export function useDexForm(): UseDexFormReturn {
       seoTwitterHandle,
       seoThemeColor,
       seoKeywords,
+      analyticsScript,
       walletConnectProjectId,
       privyAppId,
       privyTermsOfUse,
@@ -1057,6 +1075,7 @@ export function useDexForm(): UseDexFormReturn {
     seoTwitterHandle,
     seoThemeColor,
     seoKeywords,
+    analyticsScript,
     setBrokerName,
     setTelegramLink,
     setDiscordLink,
@@ -1093,6 +1112,7 @@ export function useDexForm(): UseDexFormReturn {
     setSeoTwitterHandle,
     setSeoThemeColor,
     setSeoKeywords,
+    setAnalyticsScript,
     handleInputChange,
     handleImageChange,
     handlePnLPosterChange,

app/app/routes/_layout.dex.tsx

@@ -76,6 +76,7 @@ export default function DexRoute() {
         seoTwitterHandle: dexData.seoTwitterHandle || "",
         seoThemeColor: dexData.seoThemeColor || "",
         seoKeywords: dexData.seoKeywords || "",
+        analyticsScript: dexData.analyticsScript || "",
         themeCSS: dexData.themeCSS,
       });
 

app/app/routes/_layout.dex_.config.tsx

@@ -184,6 +184,7 @@ export default function DexConfigRoute() {
         seoTwitterHandle: formValues.seoTwitterHandle.trim(),
         seoThemeColor: formValues.seoThemeColor.trim(),
         seoKeywords: formValues.seoKeywords.trim(),
+        analyticsScript: formValues.analyticsScript.trim(),
       };
 
       const formData = createDexFormData(dexDataToSend, imageBlobs);