add: readme+customize color

Author: sven-hash

README.md

@@ -0,0 +1,93 @@
+# Delegation Hub
+
+A simple web application for delegating AAVE, stkAAVE, and aAAVE voting power to a specified delegate address. Users can connect their wallet and delegate their voting power with a single click.
+
+## What It Does
+
+This website allows AAVE token holders to delegate their voting power (both VOTING and PROPOSITION) to a trusted delegate. It supports:
+- **AAVE** token delegation
+- **stkAAVE** token delegation  
+- **aAAVE** token delegation
+- Delegation of all tokens at once
+
+Users connect their wallet, view their token balances, and can delegate or remove delegation with a simple interface.
+
+## How to Create Your Own Page
+
+### Prerequisites
+
+- [Bun](https://bun.sh) (or Node.js/npm)
+- An Ethereum wallet for testing
+
+### Setup
+
+1. **Clone or fork this repository**
+
+2. **Install dependencies**
+   ```bash
+   bun install
+   ```
+
+3. **Create a `.env` file** in the root directory:
+   ```env
+   VITE_DELEGATE_ADDRESS=0xYourDelegateAddressHere
+   VITE_DELEGATE_NAME=Your Delegate Name
+   VITE_LOGO_NAME=Your Logo Text
+   
+   # Optional: Customize colors
+   VITE_MAIN_COLOR=#e8f8a6
+   VITE_MAIN_COLOR_DARK=#0d1208
+   
+   # Optional: WalletConnect Project ID (for better wallet connection)
+   VITE_WALLETCONNECT_PROJECT_ID=your-project-id
+   ```
+
+4. **Update the configuration**
+   - Set `VITE_DELEGATE_ADDRESS` to the Ethereum address you want users to delegate to
+   - Set `VITE_DELEGATE_NAME` to the display name (e.g., "No Trust Verify")
+   - Set `VITE_LOGO_NAME` to the text shown in the header (defaults to delegate name)
+
+5. **Run the development server**
+   ```bash
+   bun run dev
+   ```
+
+6. **Build for production**
+   ```bash
+   bun run build
+   ```
+
+### Configuration Options
+
+- **`VITE_DELEGATE_ADDRESS`** (required): The Ethereum address to delegate voting power to
+- **`VITE_DELEGATE_NAME`** (required): Display name for the delegate
+- **`VITE_LOGO_NAME`** (optional): Logo text in header (defaults to delegate name)
+- **`VITE_MAIN_COLOR`** (optional): Light theme background color (default: `#e8f8a6`)
+- **`VITE_MAIN_COLOR_DARK`** (optional): Dark theme background color (default: `#0d1208`)
+- **`VITE_WALLETCONNECT_PROJECT_ID`** (optional): WalletConnect project ID for better wallet support
+
+### Deployment
+
+The project includes a GitHub Actions workflow for automatic deployment to GitHub Pages. Just push to the `main` branch and it will deploy automatically.
+
+For manual deployment, build the project and serve the `dist` folder:
+```bash
+bun run build
+# Serve the dist folder with your preferred static hosting service
+```
+
+## How It Works
+
+The app interacts with AAVE governance contracts:
+- **AAVE Token**: `0x7fc66500c84a76ad7e9c93437bfc5ac33e2ddae9`
+- **stkAAVE Token**: `0x4da27a545c0c5b758a6ba100e3a049001de870f5`
+- **aAAVE Token**: `0xa700b4eb416be35b2911fd5dee80678ff64ff6c9`
+
+It calls the `delegateByType(address, powerType)` function where:
+- `address`: The delegate address (or user's own address to remove delegation)
+- `powerType`: `0` for VOTING, `1` for PROPOSITION
+
+### Inspired By
+
+This project is inspired by [AaveChan's delegation interface](https://apps.aavechan.com/delegate).
+

src/App.tsx

@@ -31,6 +31,18 @@ function App() {
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
     localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    
+    // Update CSS variable for the current theme
+    document.documentElement.style.setProperty(
+      '--bg-primary',
+      isDark ? config.mainColorDark : config.mainColor
+    );
+    
+    // Update theme-color meta tag when theme changes
+    const themeColorMeta = document.querySelector('meta[name="theme-color"]');
+    if (themeColorMeta) {
+      themeColorMeta.setAttribute('content', isDark ? config.mainColorDark : config.mainColor);
+    }
   }, [isDark]);
 
   const toggleTheme = () => {

src/config/env.ts

@@ -3,6 +3,8 @@ export const config = {
   delegateAddress: import.meta.env.VITE_DELEGATE_ADDRESS,
   delegateName: import.meta.env.VITE_DELEGATE_NAME,
   logoName: import.meta.env.VITE_LOGO_NAME || import.meta.env.VITE_DELEGATE_NAME,
+  mainColor: import.meta.env.VITE_MAIN_COLOR || '#e8f8a6',
+  mainColorDark: import.meta.env.VITE_MAIN_COLOR_DARK || '#0d1208',
 } as const;
 
 // Helper to check if string is an Ethereum address (not ENS)

src/main.tsx

@@ -2,8 +2,33 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { WalletProvider } from './components/WalletProvider'
 import App from './App'
+import { config } from './config/env'
 import './index.css'
 
+// Set the main color from environment variable for light theme
+document.documentElement.style.setProperty('--bg-primary', config.mainColor);
+
+// Create a style element to set dark theme color
+// The inline style in App.tsx will override this when theme changes
+const darkThemeStyle = document.createElement('style');
+darkThemeStyle.id = 'custom-dark-theme-color';
+darkThemeStyle.textContent = `
+  [data-theme="dark"] {
+    --bg-primary: ${config.mainColorDark};
+  }
+`;
+document.head.appendChild(darkThemeStyle);
+
+// Update theme-color meta tag (will be updated dynamically when theme changes)
+const themeColorMeta = document.querySelector('meta[name="theme-color"]');
+if (themeColorMeta) {
+  // Set initial theme color based on current theme
+  const isDark = document.documentElement.getAttribute('data-theme') === 'dark' ||
+    (!document.documentElement.getAttribute('data-theme') && 
+     window.matchMedia('(prefers-color-scheme: dark)').matches);
+  themeColorMeta.setAttribute('content', isDark ? config.mainColorDark : config.mainColor);
+}
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <WalletProvider>