Thank you for your interest in contributing to Base Terminal. This document provides guidelines and instructions for contributing.
By participating in this project, you agree to abide by our Code of Conduct.
Before creating bug reports, please check existing issues to avoid duplicates. When creating a bug report, include:
- A clear, descriptive title
- Steps to reproduce the issue
- Expected vs actual behavior
- Screenshots if applicable
- Your environment (browser, OS, Node.js version)
Feature requests are welcome! Please:
- Check if the feature has already been requested
- Provide a clear description of the feature
- Explain why this feature would be useful
- Consider how it fits with the project's goals
- Fork the repository and create your branch from
main - Install dependencies:
pnpm install - Make your changes following our coding standards
- Write or update tests as needed
- Run the test suite:
pnpm test - Run the linter:
pnpm lint - Commit your changes with a clear message
- Push to your fork and submit a Pull Request
# Clone your fork
git clone https://github.com/YOUR_USERNAME/base-terminal.git
cd base-terminal/base-terminal-dashboard
# Install dependencies
pnpm install
# Copy environment variables
cp .env.local.example .env.local
# Add your Cambrian API key to .env.local
# Start development server
pnpm dev- Use TypeScript for all new code
- Define proper types (avoid
anywhen possible) - Export types alongside functions
- Use interfaces for object shapes
// Good
interface TokenData {
address: string;
symbol: string;
decimals: number;
}
export function getToken(address: string): Promise<TokenData> {
// ...
}
// Avoid
export function getToken(address: any): Promise<any> {
// ...
}- Use functional components with hooks
- Keep components focused and small
- Use TypeScript interfaces for props
- Include proper loading and error states
interface CardProps {
title: string;
data?: DataType;
loading?: boolean;
}
export default function Card({ title, data, loading = false }: CardProps) {
if (loading) return <LoadingSpinner />;
if (!data) return <EmptyState />;
return <div>{/* content */}</div>;
}- Use Tailwind CSS utility classes
- Follow the terminal theme (
terminal-*classes) - Ensure responsive design (mobile-first)
- Use semantic HTML elements
components/ # React components
lib/ # Utilities and API clients
types/ # TypeScript type definitions
app/ # Next.js pages and routes
- Files: PascalCase for components (
TokenSearch.tsx), camelCase for utilities (cambrian-api.ts) - Components: PascalCase (
TokenSearch) - Functions: camelCase (
getCurrentPrice) - Types/Interfaces: PascalCase (
TokenData) - Constants: SCREAMING_SNAKE_CASE (
BASE_CHAIN_ID)
- Write tests for new features and bug fixes
- Use React Testing Library for component tests
- Mock external dependencies
- Aim for meaningful test coverage
import { render, screen } from '@testing-library/react';
import TokenSearch from './TokenSearch';
describe('TokenSearch', () => {
it('renders search input', () => {
render(<TokenSearch onSearch={() => {}} />);
expect(screen.getByRole('textbox')).toBeInTheDocument();
});
});Follow conventional commit format:
type(scope): subject
body (optional)
footer (optional)
Types:
feat: New featurefix: Bug fixdocs: Documentation changesstyle: Code style changes (formatting, etc.)refactor: Code refactoringtest: Adding or updating testschore: Maintenance tasks
Examples:
feat(search): add token address validation
fix(pools): handle empty API response
docs: update contributing guide
- Update the README.md if needed
- Update the documentation if needed
- Ensure all tests pass
- Request review from maintainers
- Address review feedback
- Once approved, a maintainer will merge your PR
Feel free to open an issue for any questions or join discussions in existing issues.
Thank you for contributing!