Extrinsic 1st class citizen

README.md

@@ -7,26 +7,30 @@ A modern, feature-rich blockchain explorer for the Quantus Network built with Re
 ## 🚀 Features
 
 ### Core Functionality
+
 - **🔍 Universal Search** - Search across transactions, blocks, and accounts with intelligent auto-complete
 - **📊 Real-time Data** - Live blockchain statistics and recent activity updates
 - **📱 Responsive Design** - Optimized for desktop, tablet, and mobile devices
 - **🌙 Dark/Light Theme** - Toggle between themes with system preference support
 - **⚡ Fast Performance** - Server-side rendering with Next.js 14 App Router
 
 ### Data Views
+
 - **💰 Transactions** - Browse all network transactions with detailed information
 - **🧱 Blocks** - Explore block data including height, hash, and timestamp
 - **👤 Accounts** - View account balances and transaction history
 - **📈 Chain Statistics** - Network metrics and activity summaries
 
 ### Technical Features
+
 - **Type-Safe GraphQL** - Automated code generation for GraphQL queries
 - **Modern UI Components** - Built with Radix UI primitives and Tailwind CSS
 - **Accessibility First** - WCAG compliant components and keyboard navigation
 
 ## 🛠️ Technology Stack
 
 ### Frontend
+
 - **React.js 19** - The library for web user interfaces
 - **Tanstack Router** - Modern and scalable router
 - **TypeScript** - Type-safe JavaScript
@@ -35,11 +39,13 @@ A modern, feature-rich blockchain explorer for the Quantus Network built with Re
 - **Lucide React** - Beautiful icons
 
 ### Data & API
+
 - **Apollo Client** - GraphQL client with caching
 - **GraphQL Code Generator** - Type-safe GraphQL operations
 - **Date-fns** - Date manipulation utilities
 
 ### Development Tools
+
 - **Storybook** - Component development environment
 - **Jest** - Testing framework
 - **ESLint** - Code linting
@@ -55,17 +61,20 @@ A modern, feature-rich blockchain explorer for the Quantus Network built with Re
 ## 🚀 Getting Started
 
 ### 1. Clone the Repository
+
 ```bash
 git clone https://github.com/Quantus-Network/explorer.git
 cd explorer
 ```
 
 ### 2. Install Dependencies
+
 ```bash
 bun install
 ```
 
 ### 3. Environment Setup
+
 Create a `.env.local` file in the root directory:
 
 ```env
@@ -77,11 +86,13 @@ ANALYZE=false
 ```
 
 ### 4. Generate GraphQL Types
+
 ```bash
 bun gql:compile
 ```
 
 ### 5. Start Development Server
+
 ```bash
 bun dev
 ```
@@ -119,25 +130,27 @@ quantus-block-explorer/
 
 ## 🔧 Development Scripts
 
-| Command | Description |
-|---------|-------------|
-| `bun dev` | Start development server |
-| `bun run build` | Build for production |
-| `bun start` | Start production server |
-| `bun lint` | Run ESLint |
-| `bun test` | Run tests |
-| `bun format` | Format code with Prettier |
-| `bun storybook` | Start Storybook |
-| `bun gql:compile` | Generate GraphQL types |
+| Command           | Description               |
+| ----------------- | ------------------------- |
+| `bun dev`         | Start development server  |
+| `bun run build`   | Build for production      |
+| `bun start`       | Start production server   |
+| `bun lint`        | Run ESLint                |
+| `bun test`        | Run tests                 |
+| `bun format`      | Format code with Prettier |
+| `bun storybook`   | Start Storybook           |
+| `bun gql:compile` | Generate GraphQL types    |
 
 ## 🧪 Testing
 
 ### Unit Tests
+
 ```bash
 bun test
 ```
 
 ### Storybook Tests
+
 ```bash
 bun storybook
 bun test-storybook:ci
@@ -152,6 +165,7 @@ bun storybook
 ```
 
 Components are organized by feature and include:
+
 - Stories for different states
 - Accessibility testing
 - Visual regression testing
@@ -161,11 +175,13 @@ Components are organized by feature and include:
 The project uses Apollo Client for GraphQL integration with automatic code generation:
 
 ### Adding New Queries
+
 1. Create query in `src/api/`
 2. Run `bun gql:compile` to generate types
 3. Import and use in components
 
 ### Example Query Structure
+
 ```typescript
 export const exampleQuery = {
   useGetData: (config?: QueryHookOptions) => {
@@ -191,15 +207,16 @@ export const exampleQuery = {
 
 ## 🔐 Environment Variables
 
-| Variable | Description | Required |
-|----------|-------------|----------|
-| `VITE_SITE_URL` | Site base URL | Yes |
-| `VITE_GRAPHQL_URL` | GraphQL API endpoint | Yes |
-| `ANALYZE` | Enable bundle analyzer | No |
+| Variable           | Description            | Required |
+| ------------------ | ---------------------- | -------- |
+| `VITE_SITE_URL`    | Site base URL          | Yes      |
+| `VITE_GRAPHQL_URL` | GraphQL API endpoint   | Yes      |
+| `ANALYZE`          | Enable bundle analyzer | No       |
 
 ## 🚀 Deployment
 
 ### Manual Deployment
+
 ```bash
 bun run build
 ```
@@ -230,6 +247,7 @@ We welcome contributions! Please follow these steps:
 7. **Open a Pull Request**
 
 ### Code Style
+
 - Use TypeScript for all new code
 - Follow the existing naming conventions
 - Add tests for new features
@@ -238,6 +256,7 @@ We welcome contributions! Please follow these steps:
 ## 📝 Code Quality
 
 This project maintains high code quality through:
+
 - **ESLint** - Airbnb configuration with TypeScript support
 - **Prettier** - Consistent code formatting
 - **Husky** - Pre-commit hooks for quality checks
@@ -248,17 +267,20 @@ This project maintains high code quality through:
 ### Common Issues
 
 **GraphQL Types Not Generated**
+
 ```bash
 bun gql:compile
 ```
 
 **Development Server Won't Start**
+
 ```bash
 bun clean
 bun dev
 ```
 
 ### Getting Help
+
 - Check the [Issues](https://github.com/Quantus-Network/explorer/issues) page
 - Create a new issue with detailed information
 

codegen.ts

@@ -1,9 +1,7 @@
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
-  schema:
-    process.env.CODEGEN_SCHEMA_URL ||
-    'https://subsquid.quantus.com/green/graphql',
+  schema: process.env.CODEGEN_SCHEMA_URL || 'http://localhost:4350/graphql',
   documents: ['src/**/*.{ts,tsx}'],
   generates: {
     './src/__generated__/': {

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

package.json

@@ -12,7 +12,7 @@
     "storybook:serve": "http-server storybook-static --port 6006 --silent",
     "serve-storybook": "run-s storybook:*",
     "test-storybook:ci": "start-server-and-test serve-storybook http://127.0.0.1:6006 test-storybook",
-    "format": "prettier '**/*.{json,yaml}' --write",
+    "format": "prettier . --write",
     "prepare": "husky",
     "gen-assets": "svgr --template svgr-template.cjs --index-template svgr-index-template.cjs --icon --title-prop --typescript --jsx-runtime automatic --replace-attr-values currentColor=currentColor,#FFEF00=currentColor --filename-case pascal -d src/assets assets",
     "gql:compile": "graphql-codegen"