{"id":37311423,"url":"https://github.com/lugondev/ca-abi-interact","last_synced_at":"2026-01-16T03:01:05.391Z","repository":{"id":324198366,"uuid":"1096319944","full_name":"lugondev/ca-abi-interact","owner":"lugondev","description":"This is a modern web application for interacting with smart contracts, built with Next.js 16 and Tailwind CSS v4.","archived":false,"fork":false,"pushed_at":"2025-11-14T09:54:23.000Z","size":285,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-14T11:34:10.550Z","etag":null,"topics":["evm-bytecode","interface-builder","smartcontract-dapp"],"latest_commit_sha":null,"homepage":"https://ca.dexutil.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lugondev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-14T08:55:04.000Z","updated_at":"2025-11-14T09:54:27.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/lugondev/ca-abi-interact","commit_stats":null,"previous_names":["lugondev/ca-abi-interact"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/lugondev/ca-abi-interact","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lugondev%2Fca-abi-interact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lugondev%2Fca-abi-interact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lugondev%2Fca-abi-interact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lugondev%2Fca-abi-interact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lugondev","download_url":"https://codeload.github.com/lugondev/ca-abi-interact/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lugondev%2Fca-abi-interact/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28476668,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T00:15:39.755Z","status":"online","status_checked_at":"2026-01-16T02:00:07.781Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["evm-bytecode","interface-builder","smartcontract-dapp"],"created_at":"2026-01-16T03:01:04.580Z","updated_at":"2026-01-16T03:01:05.370Z","avatar_url":"https://github.com/lugondev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Contract ABI Interact v2.0\n\nA modern, feature-rich web application for interacting with smart contracts across multiple blockchain networks. Built with Next.js 16, React 19, and Tailwind CSS v4.\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js 18+ \n- pnpm (recommended package manager)\n\n### Installation\n\n1. Clone the repository:\n```bash\ngit clone \u003crepository-url\u003e\ncd ca-abi-interact\n```\n\n2. Install dependencies:\n```bash\npnpm install\n```\n\n3. Start the development server:\n```bash\npnpm dev\n```\n\n4. Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n### Available Scripts\n\n- `pnpm dev` - Start development server with Turbopack\n- `pnpm build` - Build for production\n- `pnpm start` - Start production server\n- `pnpm lint` - Run ESLint\n- `pnpm ts` - Type check with TypeScript\n\n## 🧭 Screens at a Glance\n\n- **Home / Contract Browser (`/`)** - Manage saved contracts per chain, browse ABI tabs, run reads/writes, and stream events in one place.\n- **ABI Builder (`/abi-builder`)** - Compose ABI items visually, import/export JSON, and encode call or deployment data into ready-to-use hex blobs.\n- **Tools (`/tools`)** - Access a collection of blockchain utilities including unit converters, calldata decoder, epoch converter, and encoding tools.\n\n## ✨ Features\n\n### Core Functionality\n- 🔗 **Chain-aware contract workspace** - Save ABIs per network, add/edit/duplicate/remove entries, and toggle noisy ABI items while the Zustand store persists your library and current selection locally.\n- 🗂️ **Sidebar \u0026 quick actions** - The contracts list surfaces Add/Duplicate/Edit/Remove controls plus explorer shortcuts, making it easy to swap between contracts without leaving the page.\n- 🧭 **Tabbed contract browser** - Switch between Properties (auto/one-click refresh), Calls (view functions with parameters), Operations (state-changing transactions), and Events (log streaming) to cover every ABI surface.\n\n### Transactions \u0026 Event Tooling\n- ✍️ **Transaction builder with dual modes** - Generate call data from ABI inputs, auto-fill to/from/value/nonce/gas via wagmi + viem helpers, then either *Sign \u0026 Broadcast* or *Sign Only* to obtain serialized raw transactions, signatures, and downloadable tx JSON.\n- 📡 **Event explorer** - Filter logs by indexed topics and block ranges, auto-refresh the latest results, and inspect payloads in a paginated table.\n- 🔁 **Refresh controls** - Use the global refresh button, per-call refreshers, or configurable auto-refresh intervals to keep property values and events in sync.\n\n### ABI Builder \u0026 Hex Tools\n- 🧱 **Visual ABI composer** - Add functions, events, and constructors through guided forms, import existing JSON, update items inline, and export or copy the assembled ABI whenever you need it.\n- 🧮 **Hex generator** - Encode function calls or deployment bytecode for any ABI item, copy/share the output, and inspect length/byte metrics without leaving the builder.\n\n### Developer Tools \u0026 Utilities\n- 🔧 **Eth Unit Converter** - Convert between wei, gwei, and ether with real-time conversion and copy-to-clipboard functionality.\n- 💱 **Token Unit Converter** - Convert token amounts based on custom decimals for any ERC-20 token.\n- ⏰ **Epoch Converter** - Convert between Unix timestamps and human-readable dates in both directions.\n- 🔢 **Base Converter** - Convert numbers between decimal, hexadecimal, binary, and octal representations.\n- 📝 **String \u003c\u003e Bytes32 Converter** - Encode strings to bytes32 format and decode bytes32 back to readable strings.\n- 🔍 **Calldata Decoder** - Decode raw transaction calldata using contract ABIs to inspect function calls and parameters.\n\n### Settings \u0026 Customization\n- 🌐 **Custom chains \u0026 RPC overrides** - Extend the built-in network registry, override RPC endpoints per chain, and swap networks from a searchable combobox.\n- ⏱️ **Refresh profiles** - Toggle automatic refresh intervals for contract properties/events or stick to manual “Refresh All” control based on your workflow.\n- 💾 **Persistent preferences** - Custom chains, RPC overrides, contracts, and refresh settings survive reloads thanks to local storage–backed stores.\n\n### User Experience\n- 🎯 Sticky header with navigation, wallet status, chain selector, and settings dialog, plus a drawer-based navigation pattern for mobile screens.\n- 🌓 **Dark/Light theme toggle** - Switch between dark and light modes with system preference detection and persistent theme selection.\n- 🧱 Sidebar + main panel layout keeps contract context visible while browsing functions, with accordions and tables powered by Radix UI + shadcn components.\n- 🔔 Wallet menu offers explorer shortcuts, copy-to-clipboard, and disconnect actions, while notifications surface transaction send/sign outcomes.\n- ♿ Accessible comboboxes, dialogs, accordions, and tabs provide a polished UX built on Tailwind CSS v4 and Radix primitives.\n\n### Developer Experience\n- 🏗️ Feature-Sliced architecture (`app`, `_entities`, `_features`, `_widgets`, `_pages`, `_shared`) keeps domain logic, UI, and widgets isolated for easier scaling.\n- 🔒 Zustand (with `persist` + Immer) powers client-side state, TanStack Query handles caching inside `Web3Provider`, and strict TypeScript typing covers the entire surface area.\n- ⚙️ Wagmi + viem unify RPC access, MetaMask connection, chain switching, gas estimation, and transaction signing across every supported network.\n- 🧰 Tailwind CSS v4, shadcn/ui, Lucide, ESLint 9, Turbopack, and TypeScript 5.7 create a modern DX for rapid iteration.\n\n## 🛠️ Tech Stack\n\n### Frontend Framework\n- **Next.js 16** - React framework with App Router\n- **React 19** - Latest React with concurrent features\n- **TypeScript 5.7** - Static type checking\n\n### Styling \u0026 UI\n- **Tailwind CSS v4** - Utility-first CSS framework\n- **Radix UI** - Accessible component primitives\n- **Lucide React** - Beautiful icon library\n- **shadcn/ui** - Pre-built component library\n\n### Web3 Integration\n- **Wagmi v2** - React hooks for Ethereum\n- **Viem v2** - TypeScript interface for Ethereum\n- **React Blockies** - Ethereum address avatars\n\n### State Management \u0026 Data\n- **Zustand** - Lightweight state management\n- **TanStack Query v5** - Server state management\n- **SWR** - Data fetching with caching\n- **Immer** - Immutable state updates\n\n### Development Tools\n- **ESLint 9** - Code linting with Next.js config\n- **Prettier** - Code formatting\n- **PostCSS** - CSS processing\n- **Turbopack** - Fast bundler for development\n\n## 📁 Project Structure\n\nThe project follows **Feature-Sliced Design** methodology for better maintainability and scalability:\n\n```\n├── app/                    # Next.js App Router pages\n│   ├── deploy/            # Contract deployment page\n│   ├── tools/             # Developer tools \u0026 utilities\n│   │   ├── base-converter/       # Number base conversion\n│   │   ├── calldata-decoder/     # Transaction calldata decoder\n│   │   ├── epoch-converter/      # Unix timestamp converter\n│   │   ├── eth-unit-converter/   # ETH unit conversions\n│   │   ├── string-bytes32/       # String/bytes32 encoding\n│   │   └── token-unit-converter/ # Token decimal conversions\n│   ├── globals.css        # Global styles\n│   ├── layout.tsx         # Root layout\n│   └── page.tsx           # Home page\n├── components/            # shadcn/ui components\n│   └── ui/               # Reusable UI primitives\n├── src/\n│   ├── _app/             # Application initialization\n│   │   ├── index.tsx     # Main app component\n│   │   └── Web3LoadingGuard.tsx\n│   ├── _entities/        # Business entities\n│   │   ├── chain/        # Blockchain network logic\n│   │   ├── contract/     # Smart contract management\n│   │   └── wallet/       # Wallet connection logic\n│   ├── _features/        # Feature modules\n│   │   ├── add-contract/     # Add new contracts\n│   │   ├── connect-wallet/   # Wallet connection\n│   │   ├── edit-contract/    # Contract editing\n│   │   ├── execute-contract/ # Contract interaction\n│   │   ├── fetch-events/     # Event monitoring\n│   │   ├── remove-contract/  # Contract removal\n│   │   ├── set-current-chain/# Chain switching\n│   │   ├── sign-transaction/ # Transaction signing\n│   │   └── theme-toggle/     # Dark/light theme switching\n│   ├── _pages/           # Page components\n│   │   ├── browser/      # Contract browser page\n│   │   ├── deploy/       # Deployment page\n│   │   └── error/        # Error pages\n│   ├── _shared/          # Shared utilities\n│   │   ├── config/       # Application configuration\n│   │   ├── lib/          # Utility libraries\n│   │   │   └── theme/    # Theme management utilities\n│   │   └── ui/           # Shared UI components\n│   └── _widgets/         # Complex UI widgets\n│       ├── contract-browser/  # Contract exploration widget\n│       ├── contracts-list/    # Contract list widget\n│       ├── layout/           # Layout components\n│       └── loading-screen/   # Loading states\n└── lib/                  # External library configurations\n    └── utils.ts          # Utility functions\n```\n\n### Architecture Principles\n\n- **Entities** (`_entities/`) - Core business logic and domain models\n- **Features** (`_features/`) - User-facing functionality and use cases  \n- **Widgets** (`_widgets/`) - Complex UI components combining multiple features\n- **Pages** (`_pages/`) - Route-level components and page layouts\n- **Shared** (`_shared/`) - Reusable utilities, components, and configurations\n\n## 🔧 Configuration\n\n### Environment Variables\n\nCreate a `.env.local` file for local development:\n\n```bash\n# Optional: Custom RPC endpoints\nNEXT_PUBLIC_ETHEREUM_RPC_URL=your_ethereum_rpc_url\nNEXT_PUBLIC_POLYGON_RPC_URL=your_polygon_rpc_url\n```\n\n### Supported Networks\n\nThe application supports multiple blockchain networks out of the box:\n- Ethereum Mainnet\n- Polygon\n- Arbitrum\n- Optimism\n- Base\n- And more...\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/amazing-feature`\n3. Commit your changes: `git commit -m 'Add amazing feature'`\n4. Push to the branch: `git push origin feature/amazing-feature`\n5. Open a Pull Request\n\n### Development Guidelines\n\n- Follow the Feature-Sliced Design architecture\n- Keep components under 500 lines of code\n- Use TypeScript for all new code\n- Write meaningful commit messages\n- Test your changes thoroughly\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\n\n## 🙏 Acknowledgments\n\n- [Next.js](https://nextjs.org/) - The React framework for production\n- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework\n- [Wagmi](https://wagmi.sh/) - React hooks for Ethereum\n- [Radix UI](https://www.radix-ui.com/) - Low-level UI primitives\n- [shadcn/ui](https://ui.shadcn.com/) - Beautifully designed components\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flugondev%2Fca-abi-interact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flugondev%2Fca-abi-interact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flugondev%2Fca-abi-interact/lists"}