Chore/interface

Makefile

@@ -50,7 +50,7 @@ deploy-all-anvil :; forge script script/DeployAllAnvil.s.sol:DeployAllAnvil \
 	--verbosity -vvv
 
 # Sync ABIs from compiled contracts to the app
-sync-abis :; node scripts/sync-abis.js
+sync-abis :; node script/sync-abis.js
 
 # Full local development setup: deploy contracts + sync ABIs
 # Usage: Start anvil in one terminal, then run `make setup-local` in another

README.md

@@ -1,6 +1,6 @@
 # Loreum Chamber
 
-Loreum is a Smart Account framework that integrates artificial intelligence agents with decentralized capital management and directorship. The system introduces a novel Chamber architecture that enables dynamic, market-driven governance while maintaining human oversight through a unique delegation mechanism.
+Loreum is a secure shared vault for communities. NFT holders elect a board of leaders who work together to manage funds and approve transactions through a unique delegation mechanism.
 
 ## Overview
 

app/package.json

@@ -11,13 +11,17 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "^2.1.0",
+    "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-query": "^5.28.4",
     "framer-motion": "^11.0.8",
+    "mermaid": "^11.12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.0.1",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^6.22.3",
+    "remark-gfm": "^4.0.1",
     "viem": "^2.9.0",
     "wagmi": "^2.5.0"
   },

app/src/App.tsx

@@ -1,10 +1,7 @@
 import { Routes, Route } from 'react-router-dom'
 import { Toaster } from 'react-hot-toast'
 import Layout from '@/components/Layout'
-import Dashboard from '@/pages/Dashboard'
-import DeployChamber from '@/pages/DeployChamber'
-import ChamberDetail from '@/pages/ChamberDetail'
-import TransactionQueue from '@/pages/TransactionQueue'
+import { Dashboard, DeployChamber, ChamberDetail, TransactionQueue, Docs } from '@/pages'
 
 function App() {
   return (
@@ -39,6 +36,8 @@ function App() {
           <Route path="chamber/:address" element={<ChamberDetail />} />
           <Route path="chamber/:address/:tab" element={<ChamberDetail />} />
           <Route path="chamber/:address/transactions" element={<TransactionQueue />} />
+          <Route path="docs" element={<Docs />} />
+          <Route path="docs/*" element={<Docs />} />
         </Route>
       </Routes>
     </>

app/src/components/Layout.tsx

@@ -1,11 +1,12 @@
 import { Outlet, Link, useLocation } from 'react-router-dom'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
 import { motion } from 'framer-motion'
-import { FiHome, FiPlus, FiBox, FiGithub, FiBook } from 'react-icons/fi'
+import { FiHome, FiPlus, FiGithub, FiBook } from 'react-icons/fi'
 
 const navItems = [
   { path: '/', label: 'Chambers', icon: FiHome },
   { path: '/deploy', label: 'Deploy', icon: FiPlus },
+  { path: '/docs', label: 'Docs', icon: FiBook },
 ]
 
 export default function Layout() {
@@ -20,15 +21,7 @@ export default function Layout() {
             {/* Logo */}
             <Link to="/" className="flex items-center gap-3 group">
               <div className="relative">
-                <div className="w-9 h-9 bg-gradient-to-br from-cyan-500 to-violet-600 rounded-xl flex items-center justify-center shadow-glow group-hover:shadow-glow-lg transition-all">
-                  <FiBox className="w-4.5 h-4.5 text-white" />
-                </div>
-              </div>
-              <div>
-                <h1 className="font-heading text-lg font-semibold text-slate-100 group-hover:text-cyan-400 transition-colors tracking-tight">
-                  Chamber
-                </h1>
-                <p className="text-[10px] text-slate-500 font-medium uppercase tracking-wider">Protocol</p>
+                <img src="/logo.svg" alt="Chamber Logo" className="w-10 h-10 object-contain transition-all" />
               </div>
             </Link>
 
@@ -84,9 +77,7 @@ export default function Layout() {
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
           <div className="flex flex-col md:flex-row items-center justify-between gap-4">
             <div className="flex items-center gap-3 text-slate-500 text-sm">
-              <div className="w-6 h-6 bg-gradient-to-br from-cyan-500/20 to-violet-500/20 rounded-lg flex items-center justify-center">
-                <FiBox className="w-3 h-3 text-cyan-500" />
-              </div>
+              <img src="/logo.svg" alt="Chamber Logo" className="w-6 h-6 object-contain opacity-80" />
               <span className="font-medium">Chamber Protocol</span>
               <span className="text-slate-700">|</span>
               <span>Decentralized Treasury Governance</span>
@@ -101,10 +92,10 @@ export default function Layout() {
                 <FiGithub className="w-4 h-4" />
                 GitHub
               </a>
-              <a href="#" className="flex items-center gap-2 hover:text-cyan-400 transition-colors">
+              <Link to="/docs" className="flex items-center gap-2 hover:text-cyan-400 transition-colors">
                 <FiBook className="w-4 h-4" />
                 Docs
-              </a>
+              </Link>
             </div>
           </div>
         </div>

app/src/components/Mermaid.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState } from 'react'
+import mermaid from 'mermaid'
+
+mermaid.initialize({
+  startOnLoad: true,
+  theme: 'dark',
+  securityLevel: 'loose',
+  fontFamily: 'Inter, system-ui, sans-serif',
+  themeVariables: {
+    primaryColor: '#06b6d4',
+    primaryTextColor: '#f1f5f9',
+    primaryBorderColor: '#0e7490',
+    lineColor: '#94a3b8',
+    secondaryColor: '#8b5cf6',
+    tertiaryColor: '#1e293b',
+  }
+})
+
+interface MermaidProps {
+  chart: string
+}
+
+export default function Mermaid({ chart }: MermaidProps) {
+  const [svg, setSvg] = useState<string>('')
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let isMounted = true
+    const renderChart = async () => {
+      if (!chart) return
+
+      try {
+        // Clear previous content
+        setSvg('')
+
+        const id = `mermaid-${Math.random().toString(36).substring(2, 11)}`
+        const { svg } = await mermaid.render(id, chart)
+
+        if (isMounted) {
+          setSvg(svg)
+          setError(null)
+        }
+      } catch (err) {
+        console.error('Mermaid rendering failed:', err)
+        if (isMounted) {
+          setError('Failed to render diagram')
+        }
+      }
+    }
+
+    renderChart()
+    return () => { isMounted = false }
+  }, [chart])
+
+  if (error) {
+    return (
+      <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-red-400 text-sm">
+        {error}
+        <pre className="mt-2 text-xs opacity-50 overflow-auto">{chart}</pre>
+      </div>
+    )
+  }
+
+  return (
+    <div 
+      ref={containerRef} 
+      className="mermaid-container flex justify-center my-8 p-6 bg-slate-900/40 rounded-2xl border border-slate-700/50 overflow-auto"
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  )
+}

app/src/contracts/abis.ts

@@ -515,6 +515,20 @@ export const registryAbi = [
     outputs: [{ name: '', type: 'bool' }],
     stateMutability: 'view',
   },
+  {
+    type: 'function',
+    name: 'getChambersByAsset',
+    inputs: [{ name: 'asset', type: 'address' }],
+    outputs: [{ name: '', type: 'address[]' }],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'getAssets',
+    inputs: [],
+    outputs: [{ name: '', type: 'address[]' }],
+    stateMutability: 'view',
+  },
   {
     type: 'function',
     name: 'implementation',

app/src/contracts/deployments.json

@@ -1,8 +1,8 @@
 {
   "chainId": 31337,
-  "chamberImplementation": "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512",
-  "mockERC20": "0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9",
-  "mockERC721": "0xDc64a140Aa3E981100a9becA4E685f962f0cF6C9",
-  "registry": "0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0",
-  "timestamp": 1770170465
+  "chamberImplementation": "0x84eA74d481Ee0A5332c457a4d796187F6Ba67fEB",
+  "mockERC20": "0xa82fF9aFd8f496c3d6ac40E2a0F282E47488CFc9",
+  "mockERC721": "0x1613beB3B2C4f22Ee086B2b38C1476A3cE7f78E8",
+  "registry": "0x9E545E3C0baAB3E08CdfD552C960A1050f373042",
+  "timestamp": 1770179201
 }

app/src/contracts/generated-abis.ts

@@ -85,6 +85,19 @@ export const registryAbi = [
     ],
     "stateMutability": "view"
   },
+  {
+    "type": "function",
+    "name": "getAssets",
+    "inputs": [],
+    "outputs": [
+      {
+        "name": "",
+        "type": "address[]",
+        "internalType": "address[]"
+      }
+    ],
+    "stateMutability": "view"
+  },
   {
     "type": "function",
     "name": "getChamberCount",
@@ -122,6 +135,25 @@ export const registryAbi = [
     ],
     "stateMutability": "view"
   },
+  {
+    "type": "function",
+    "name": "getChambersByAsset",
+    "inputs": [
+      {
+        "name": "asset",
+        "type": "address",
+        "internalType": "address"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "",
+        "type": "address[]",
+        "internalType": "address[]"
+      }
+    ],
+    "stateMutability": "view"
+  },
   {
     "type": "function",
     "name": "getRoleAdmin",

app/src/docs/README.md

@@ -0,0 +1,38 @@
+# Chamber Protocol
+
+Welcome to the official documentation for the Chamber Protocol. 
+
+Chamber is a decentralized governance platform that allows communities to manage their assets through a dynamic, community-elected Board of Directors.
+
+## 🌟 Key Features
+
+- **Community-Led Governance**: Use your tokens to delegate support to leaders you trust.
+- **Dynamic Boards**: The Board of Directors automatically updates as community sentiment shifts.
+- **Secure Treasury**: Quorum-based transaction management ensures that no single member has control over community funds.
+- **Transparant Operations**: Every governance action and financial move is visible on the blockchain.
+
+## 📖 Where to Start?
+
+If you are new to Chamber, we recommend exploring the documentation in this order:
+
+### 1. [Overview](./introduction/overview.md)
+Understand what a Chamber is, how the Board works, and the core philosophy behind the protocol.
+
+### 2. [Getting Started](./introduction/getting-started.md)
+A practical guide on how to join a community, support your leaders, or start your own organization.
+
+### 3. [Governance Concepts](./protocol/governance.md)
+Learn about the rules of the Chamber, how delegation works, and how decisions are made.
+
+### 4. [Treasury Management](./protocol/vaults.md)
+Understand how the vault keeps assets safe and how the community can use them.
+
+---
+
+## 🔒 Security First
+
+Chamber is built with security as a priority. Our smart contracts are designed to be robust and transparent, ensuring that your community's assets are always handled according to the rules set by the community itself.
+
+---
+
+*For technical documentation and developer guides, please refer to the [Reference](./reference/api-reference.md) section.*