React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

---

Project-specific notes

This repository is a frontend explorer for the Push Chain and various supported external chains. The UI fetches transaction and gateway data from RPC endpoints defined in src/config/chains.ts.

Running the frontend

Install dependencies and start the development server:

npm install
npm run dev

Localnet toggle and default network

By default the explorer points at the Donut testnet RPC endpoints. The UI now includes a simple toggle (above the transaction search bar) that switches all Push Chain requests to your local node ports (85xx/26657/8080 etc). This is useful when running a localnet for development:

Service	Default (Donut)	Localnet (toggle on)
Core RPC	https://donut.rpc.push.org	http://localhost:26657
EVM HTTP	https://evm.donut.rpc.push.org	http://localhost:8545
Explorer	https://donut.push.network/tx/	http://localhost:8080/tx/

The localnet instance runs with CAIP-2 identifier eip155:9000, so state and transactions on the push-chain node will be credited using that chain ID. The UI automatically switches when the toggle is enabled.

The toggle state is saved in localStorage so it survives page reloads. You don't need to rebuild the project or manage .env files.

⚠️ The Donut testnet remains the default; only enable localnet when you actually have a node running on the expected ports.

Additional documentation

For information on supported networks and gateway addresses, refer to src/config/chains.ts. The frontend currently supports EVM and Solana development networks; feel free to add more chains following the existing structure.

---

(The sections above were added to augment the template for this project.)