> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crefy.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Contributing

> How to contribute to Crefy Connect

# 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

```bash theme={null}
# 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

```bash theme={null}
# Install dependencies
npm install

# Set up pre-commit hooks
npm run prepare

# Build the project
npm run build
```

### 3. Create a Feature Branch

```bash theme={null}
# 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

```bash theme={null}
# 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

```bash theme={null}
# 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

```typescript theme={null}
// 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

```typescript theme={null}
// 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

```typescript theme={null}
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

```typescript theme={null}
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:

```typescript theme={null}
/**
 * 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.

<Note>
  **Thank You**: We appreciate all contributions, big and small! Your help makes Crefy Connect better for everyone.
</Note>