templatify

src/app/animals/page.tsx

@@ -7,6 +7,8 @@ import { MapPin } from 'lucide-react'
 import { fetchAnimalRecords } from '../../services/laconicQueryService'
 import Navigation from '../../components/Navigation'
 import { AnimalRecord } from '../../types/records'
+import { APP_CONFIG, getThemeColors } from '../../config/appConfig'
+
 
 const hiddenIndices = (process.env.NEXT_PUBLIC_HIDDEN_INDICES?.split(',') || [])
   .map(num => parseInt(num))
@@ -25,7 +27,7 @@ export default function AnimalsPage() {
     try {
       setLoading(true)
       setError(null)
-      const data = await fetchAnimalRecords()
+      const data = await fetchAnimalRecords(APP_CONFIG.recordEnv)
 
       // Sort by creation time, oldest first
       const sortedRecords = [...data].sort((a, b) => 

src/app/page.tsx

@@ -10,6 +10,8 @@ import { processMTMPayment } from '../services/paymentService'
 import { connectWallet, WalletState } from '../services/walletService'
 import { WalletType } from '../services/types'
 import { FREE_MODE } from '../config/freeMode'
+import { APP_CONFIG, getThemeColors } from '../config/appConfig'
+
 
 console.log('NEXT_PUBLIC_FREE_MODE value:', process.env.NEXT_PUBLIC_FREE_MODE)
 console.log('FREE_MODE computed value:', FREE_MODE)
@@ -21,6 +23,9 @@ const Page: React.FC = (): React.ReactElement => {
     type: null
   })
 
+  const theme = getThemeColors(APP_CONFIG.theme)
+
+
   const handleConnect = async (walletType: WalletType): Promise<void> => {
     if (FREE_MODE) return
     try {
@@ -62,25 +67,24 @@ const Page: React.FC = (): React.ReactElement => {
   }
 
   return (
-    <div className="min-h-screen w-full flex flex-col items-center bg-gradient-to-b from-emerald-950 via-green-900 to-emerald-950">
+    <div className={`min-h-screen w-full flex flex-col items-center bg-gradient-to-b ${theme.gradient}`}>
       <div className="container max-w-7xl mx-auto px-4 py-8">
         <Navigation />
         
-        {/* Header */}
-        <div className="text-center mb-8">
-          <h1 className="text-4xl sm:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-300">
-            Ranger
+        <div className="text-center mb-8 pt-16 sm:pt-0">
+          <h1 className={`text-4xl sm:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-${theme.primary}-400 to-${theme.secondary}-300`}>
+            {APP_CONFIG.title}
           </h1>
-          <p className="text-emerald-200 text-lg mb-8">
-            Go outside and touch grass
+          <p className={`text-${theme.text}-200 text-lg mb-8`}>
+            {APP_CONFIG.description}
           </p>
-   	
-   	{!FREE_MODE && (	  
-          <WalletHeader
-            walletState={walletState}
-            onConnect={handleConnect}
-          />
-		       )}
+          
+          {!FREE_MODE && (
+            <WalletHeader
+              walletState={walletState}
+              onConnect={handleConnect}
+            />
+          )}
         </div>
 
         {/* Single Analysis Card */}

src/config/appConfig.ts

@@ -0,0 +1,38 @@
+// src/config/appConfig.ts
+
+export const APP_CONFIG = {
+  theme: process.env.NEXT_PUBLIC_THEME || 'forest', // forest, ocean, desert, mountain
+  title: process.env.NEXT_PUBLIC_APP_TITLE || 'Ranger',
+  description: process.env.NEXT_PUBLIC_APP_DESCRIPTION || 'Go outside and touch grass',
+  recordEnv: process.env.NEXT_PUBLIC_RECORD_ENV || 'production'
+}
+
+export const getThemeColors = (theme: string) => {
+  const themes = {
+    forest: {
+      gradient: 'from-emerald-950 via-green-900 to-emerald-950',
+      primary: 'emerald',
+      secondary: 'teal',
+      text: 'emerald'
+    },
+    ocean: {
+      gradient: 'from-blue-950 via-cyan-900 to-blue-950',
+      primary: 'blue',
+      secondary: 'cyan',
+      text: 'blue'
+    },
+    desert: {
+      gradient: 'from-amber-950 via-orange-900 to-amber-950',
+      primary: 'amber',
+      secondary: 'orange',
+      text: 'amber'
+    },
+    mountain: {
+      gradient: 'from-slate-950 via-gray-900 to-slate-950',
+      primary: 'slate',
+      secondary: 'gray',
+      text: 'slate'
+    }
+  }
+  return themes[theme as keyof typeof themes] || themes.forest
+}

src/services/animalProcessingService.ts

@@ -98,7 +98,8 @@ export async function processAnimalImage(
       coordinates.lat,
       coordinates.lng,
       visionDescription,
-      ipfsUrl
+      ipfsUrl,
+      process.env.NEXT_PUBLIC_PORTAL_NAME
     )
 
     console.log('Published animal record to Laconic Registry:', registryId)

src/services/laconicQueryService.ts

@@ -2,12 +2,15 @@
 
 import { AnimalRecord } from '../types/records'
 
-const LACONIC_GQL_ENDPOINT = process.env.NEXT_PUBLIC_LACONIC_GQL_ENDPOINT || 'https://laconicd-sapo.laconic.com/api'
+const LACONIC_GQL_ENDPOINT = process.env.NEXT_PUBLIC_LACONIC_GQL_ENDPOINT
 
 const ANIMAL_RECORDS_QUERY = `
-  query GetAnimalRecords {
+  query GetAnimalRecords($portalName: String!) {
     queryRecords(
-      attributes: [{ key: "type", value: { string: "AnimalRecord" } }],
+      attributes: [
+        { key: "type", value: { string: "AnimalRecord" } },
+	{ key: "portalName", value: { string: $portalName } }
+      ],
       all: true
     ) {
       id
@@ -34,13 +37,14 @@ const ANIMAL_RECORDS_QUERY = `
   }
 `
 
-export async function fetchAnimalRecords(): Promise<AnimalRecord[]> {
+export async function fetchAnimalRecords(portalName: string): Promise<AnimalRecord[]> {
   try {
     const response = await fetch(LACONIC_GQL_ENDPOINT, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
-        query: ANIMAL_RECORDS_QUERY
+        query: ANIMAL_RECORDS_QUERY,
+	variables: { portalName }
       }),
     })
     

src/services/laconicService.ts

@@ -17,6 +17,7 @@ interface LaconicAnimalRecord {
     }
     description: string
     imageUrl: string
+    portalName: string
   }
 }
 
@@ -25,7 +26,8 @@ export async function publishAnimalRecord(
   latitude: number,
   longitude: number,
   description: string,
-  imageUrl: string
+  imageUrl: string,
+  portalName: string = process.env.NEXT_PUBLIC_PORTAL_NAME
 ): Promise<string> {
   try {
     // Verify config file exists
@@ -41,7 +43,8 @@ export async function publishAnimalRecord(
           longitude
         },
         description,
-        imageUrl
+        imageUrl,
+	portalName
       }
     }