Skip to main content

Contributing to Crefy Connect

We welcome contributions from the community! Crefy Connect is an open-source project that benefits from your expertise and feedback.

Ways to Contribute

Code Contributions

  • Bug Fixes: Help us identify and fix issues
  • New Features: Implement new functionality and improvements
  • Performance Improvements: Optimize existing code
  • Documentation: Improve docs and examples

Non-Code Contributions

  • Documentation: Write tutorials, guides, and API docs
  • Testing: Help test new features and report bugs
  • Community Support: Help other developers in issues and discussions
  • Feature Requests: Suggest new functionality

Development Workflow

1. Fork and Clone

# Fork the repository on GitHub
# Then clone your fork
git clone https://github.com/your-username/crefy-connect.git
cd crefy-connect

2. Set Up Development Environment

# Install dependencies
npm install

# Set up pre-commit hooks
npm run prepare

# Build the project
npm run build

3. Create a Feature Branch

# Create a descriptive branch name
git checkout -b feature/add-new-login-method

# Or for bug fixes
git checkout -b fix/auth-modal-styling

4. Make Your Changes

  • Follow the existing code style
  • Add tests for new functionality
  • Update documentation
  • Ensure all tests pass

5. Test Your Changes

# Run unit tests
npm run test:unit

# Run integration tests
npm run test:integration

# Run all tests
npm run test

# Run linting
npm run lint

6. Submit a Pull Request

# Commit your changes
git add .
git commit -m "feat: add new login method support"

# Push to your fork
git push origin feature/add-new-login-method
Then create a Pull Request on GitHub with a clear description of your changes.

Code Standards

TypeScript

  • Use TypeScript for all new code
  • Enable strict type checking
  • Use interfaces for component props and API responses
  • Avoid any types when possible

React Best Practices

  • Use functional components with hooks
  • Follow React naming conventions
  • Keep components small and focused
  • Use proper TypeScript types for props

Naming Conventions

// Components: PascalCase
function AuthModal() { }

// Hooks: camelCase with 'use' prefix
function useCrefy() { }

// Constants: UPPER_SNAKE_CASE
const MAX_RETRIES = 3;

// Private properties: camelCase with underscore prefix
private _apiClient: ApiClient;

Error Handling

// Always handle errors appropriately
try {
  const result = await this.apiCall();
  return result;
} catch (error) {
  // Log error details
  console.error('API call failed', error);

  // Throw descriptive errors
  throw new Error('Failed to authenticate user');
}

Testing Guidelines

Component Tests

import { render, screen } from '@testing-library/react';
import { CrefyConnectProvider } from 'crefy-connect';

describe('CrefyConnectProvider', () => {
  it('should render children', () => {
    render(
      <CrefyConnectProvider
        appId="test-id"
        chain="sepolia"
        loginMethods={["google"]}
      >
        <div>Test Content</div>
      </CrefyConnectProvider>
    );

    expect(screen.getByText('Test Content')).toBeInTheDocument();
  });
});

Hook Tests

import { renderHook } from '@testing-library/react';
import { useCrefy } from 'crefy-connect';

describe('useCrefy', () => {
  it('should return authentication state', () => {
    const { result } = renderHook(() => useCrefy());

    expect(result.current.isAuthenticated).toBe(false);
  });
});

Documentation

API Documentation

When adding new APIs, create comprehensive documentation:
/**
 * Custom hook for sending ETH transactions
 * @param params - Transaction parameters
 * @returns Hook return object with sendEth function and state
 * @throws {Error} When transaction parameters are invalid
 */
export function useSendEth(): UseSendEthReturn

README Updates

  • Update README.md for new features
  • Add examples in the examples directory
  • Update installation instructions if needed

Community

Communication

  • GitHub Issues: For bug reports and feature requests
  • GitHub Discussions: For general questions and ideas
  • Discord: For real-time community chat

Getting Help

  • Check existing issues and documentation first
  • Provide clear, reproducible examples when reporting bugs
  • Be respectful and constructive in all communications

License

By contributing to Crefy Connect, you agree that your contributions will be licensed under the MIT License.
Thank You: We appreciate all contributions, big and small! Your help makes Crefy Connect better for everyone.