Add LUX Network branding configuration

- Add Dockerfile.branded for quick LUX-branded builds - Add LuxLogo React component with icon, wordmark, and full logo variants - Add comprehensive documentation for LUX branding setup - Configure for downward-pointing black triangle (▼) logo - Set up for Inter font usage throughout Co-authored-by: Hanzo Dev <dev@hanzo.ai>
2026-07-27 03:13:50 +00:00 · 2025-06-26 22:03:09 +00:00
parent 6a4c7f8976
commit e4350d3ef0
3 changed files with 248 additions and 0 deletions
@@ -0,0 +1,28 @@
+FROM ghcr.io/blockscout/frontend:latest
+
+# LUX Network Branding
+ENV NEXT_PUBLIC_NETWORK_NAME="LUX Network" \
+    NEXT_PUBLIC_NETWORK_SHORT_NAME="LUX" \
+    NEXT_PUBLIC_NETWORK_ID="96369" \
+    NEXT_PUBLIC_NETWORK_CURRENCY_NAME="LUX" \
+    NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL="LUX" \
+    NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS="18" \
+    NEXT_PUBLIC_API_HOST="api-explore.lux.network" \
+    NEXT_PUBLIC_API_PROTOCOL="https" \
+    NEXT_PUBLIC_API_BASE_PATH="/" \
+    NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL="wss" \
+    NEXT_PUBLIC_APP_HOST="explore.lux.network" \
+    NEXT_PUBLIC_APP_PROTOCOL="https" \
+    NEXT_PUBLIC_IS_TESTNET="false" \
+    NEXT_PUBLIC_HOMEPAGE_CHARTS='["daily_txs", "coin_price", "market_cap"]' \
+    NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED="true" \
+    NEXT_PUBLIC_STATS_API_HOST="https://api-explore.lux.network/api/stats" \
+    NEXT_PUBLIC_VISUALIZE_API_HOST="https://api-explore.lux.network/api/visualize" \
+    NEXT_PUBLIC_CONTRACT_INFO_API_HOST="https://api-explore.lux.network" \
+    NEXT_PUBLIC_ADMIN_SERVICE_API_HOST="https://api-explore.lux.network"
+
+# Copy LUX logo
+COPY public/logos/lux-logo-white.png /app/public/assets/lux-logo.png
+
+# Note: Font and color theme changes require building from source
+# This image uses the default Blockscout theme
@@ -0,0 +1,111 @@
+# LUX Network Explorer Branding Setup
+
+This document explains how the LUX Network branding has been configured for the Blockscout explorer.
+
+## Overview
+
+The LUX Network explorer uses a custom Docker image with LUX branding applied via environment variables. The explorer is accessible at:
+- Local: http://localhost:3000
+- Production: https://explore.lux.network
+
+## Key Components
+
+### 1. Docker Image
+- **Image**: `ghcr.io/luxfi/explore:latest`
+- **Base**: Built on `ghcr.io/blockscout/frontend:latest`
+- **Location**: GitHub Container Registry
+
+### 2. Branding Elements
+- **Network Name**: LUX Network
+- **Symbol**: LUX (▼)
+- **Chain ID**: 96369 (Mainnet)
+- **Logo**: Downward-pointing black triangle (stored at `/public/logos/lux-logo-white.png`)
+
+### 3. Configuration Files
+
+#### Docker Compose (`/home/z/blockscout/docker-luxnet/frontend.yml`)
+```yaml
+services:
+  frontend:
+    image: ghcr.io/luxfi/explore:latest
+    container_name: 'explore-lux'
+    ports:
+      - 3000:3000
+    environment:
+      - NEXT_PUBLIC_API_HOST=api-explore.lux.network
+      - NEXT_PUBLIC_NETWORK_NAME=Lux Mainnet
+      # ... other env vars
+```
+
+#### Production Environment (`.env.production`)
+Contains all necessary environment variables for LUX branding:
+- Network configuration
+- API endpoints
+- Logo paths
+- Font configuration (Inter font)
+
+### 4. GitHub Actions
+
+The `.github/workflows/build-lux.yml` workflow automatically builds and pushes the Docker image when changes are pushed to:
+- `main` branch
+- `lux-branding` branch
+
+**Required Secret**: `GH_PAT` (GitHub Personal Access Token with packages:write permission)
+
+## Deployment
+
+### Local Development
+```bash
+# Pull latest image
+docker pull ghcr.io/luxfi/explore:latest
+
+# Start the service
+cd /home/z/blockscout
+docker-compose -f docker-luxnet/frontend.yml up -d
+
+# Check status
+docker ps | grep explore-lux
+```
+
+### Production Deployment
+The production deployment should use the same Docker image with appropriate production environment variables. Ensure the reverse proxy (nginx/cloudflare) is configured to serve explore.lux.network from port 3000.
+
+## Known Issues
+
+1. **Font Override**: The pre-built Blockscout image has hardcoded Poppins font references. To fully replace with Inter font, building from source is required.
+
+2. **Logo Path**: The logo should be accessible at `/logos/lux-logo-white.png` but may need additional nginx configuration for proper serving.
+
+3. **Monochromatic Theme**: Full theme customization requires building from source with modified Chakra UI configurations.
+
+## Future Improvements
+
+1. Build from source for complete control over fonts and theme
+2. Implement full monochromatic Vercel-style theme
+3. Add custom favicon with LUX triangle logo
+4. Configure proper logo serving in production
+
+## Commands Reference
+
+```bash
+# Check running container
+docker ps | grep explore-lux
+
+# View logs
+docker logs explore-lux
+
+# Restart service
+docker-compose -f docker-luxnet/frontend.yml restart
+
+# Rebuild and push image
+docker build -f Dockerfile.branded -t ghcr.io/luxfi/explore:latest .
+docker push ghcr.io/luxfi/explore:latest
+```
+
+## Support
+
+For issues with the explorer, check:
+1. Container logs: `docker logs explore-lux`
+2. Network connectivity to API endpoints
+3. Environment variable configuration
+4. GitHub Actions build status
@@ -0,0 +1,109 @@
+import React from 'react';
+
+interface LuxLogoProps {
+  width?: number;
+  height?: number;
+  className?: string;
+  variant?: 'icon' | 'wordmark' | 'full';
+}
+
+export const LuxLogo: React.FC<LuxLogoProps> = ({ 
+  width = 50, 
+  height = 50, 
+  className = '',
+  variant = 'icon'
+}) => {
+  // LUX triangle icon (downward-pointing black triangle)
+  const renderIcon = () => (
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      viewBox="0 0 50 50" 
+      width={width} 
+      height={height}
+      className={className}
+    >
+      <polygon 
+        points="25,46.65 50,3.35 0,3.35" 
+        fill="currentColor"
+      />
+    </svg>
+  );
+
+  // LUX wordmark in Inter font
+  const renderWordmark = () => (
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      viewBox="0 0 100 30" 
+      width={width * 2} 
+      height={height * 0.6}
+      className={className}
+    >
+      <text 
+        x="0" 
+        y="23" 
+        fontFamily="Inter, sans-serif" 
+        fontSize="28" 
+        fontWeight="700"
+        letterSpacing="-0.02em"
+        fill="currentColor"
+      >
+        LUX
+      </text>
+    </svg>
+  );
+
+  // Full logo with icon and wordmark
+  const renderFull = () => (
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      viewBox="0 0 150 50" 
+      width={width * 3} 
+      height={height}
+      className={className}
+    >
+      {/* Triangle icon */}
+      <polygon 
+        points="25,46.65 50,3.35 0,3.35" 
+        fill="currentColor"
+      />
+      {/* Wordmark */}
+      <text 
+        x="60" 
+        y="35" 
+        fontFamily="Inter, sans-serif" 
+        fontSize="32" 
+        fontWeight="700"
+        letterSpacing="-0.02em"
+        fill="currentColor"
+      >
+        LUX
+      </text>
+    </svg>
+  );
+
+  switch (variant) {
+    case 'wordmark':
+      return renderWordmark();
+    case 'full':
+      return renderFull();
+    case 'icon':
+    default:
+      return renderIcon();
+  }
+};
+
+// Emoji version
+export const LuxEmoji = () => '▼';
+
+// Export variants for easy use
+export const LuxIcon = (props: Omit<LuxLogoProps, 'variant'>) => (
+  <LuxLogo {...props} variant="icon" />
+);
+
+export const LuxWordmark = (props: Omit<LuxLogoProps, 'variant'>) => (
+  <LuxLogo {...props} variant="wordmark" />
+);
+
+export const LuxFullLogo = (props: Omit<LuxLogoProps, 'variant'>) => (
+  <LuxLogo {...props} variant="full" />
+);