# CHAINJET

## Introduction

ChainJet CLI is a modern Web3 development tool that streamlines the creation of decentralized applications (dApps) on EVM-compatible blockchains. It provides a pre-configured scaffold with the latest Web3 technologies, eliminating common setup errors and reducing development time significantly.

![ChainJet CLI Screenshot](https://content.gitbook.com/content/ABH1qqDt9xEeHJ22Z6EC/blobs/l7UYhyjng54hu30DmDD5/screen.gif)

### What's Included

* **Next.js 16** - React framework with App Router and Server Components
* **RainbowKit v2** - Beautiful and accessible wallet connection UI
* **wagmi v2** - React hooks library for Ethereum interactions
* **viem v2** - TypeScript interface for Ethereum and Web3 operations
* **TanStack Query** - Advanced async state management
* **TypeScript** - Optional full type safety
* **Tailwind CSS** - Utility-first CSS framework
* **Pre-configured Networks** - Ethereum, Polygon, Optimism, Arbitrum, Base

![ChainJet CLI Screenshot](https://content.gitbook.com/content/ABH1qqDt9xEeHJ22Z6EC/blobs/aJnXupVVyKcThxNxHlmB/screen.png)

### Why ChainJet?

#### Problem: Common Web3 Development Issues

* Outdated or conflicting dependencies
* "getDefaultConfig is not a function" error
* Complex configuration setup
* Version mismatches between libraries
* Steep learning curve for Web3 beginners

#### Solution: ChainJet CLI

* Pre-tested, compatible dependency versions
* Automatic error resolution
* Zero-configuration setup
* Multi-chain ready out of the box
* Optimized for maximum developer experience

***

## Getting Started

### System Requirements

* **Node.js**: v18.0.0 or higher
* **npm**: v9.0.0 or higher (or yarn/pnpm)
* **Git**: v2.0.0 or higher
* **Operating System**: macOS, Linux, or Windows (WSL2)

### Check Your Environment

```bash
# Verify Node.js installation
node --version

# Verify npm installation
npm --version

# Verify Git installation
git --version
```

***

## Installation

### Global Installation (Recommended)

Install ChainJet CLI globally to create projects from anywhere:

```bash
npm install -g chainjet
```

Verify installation:

```bash
chainjet --version
```

### Local Installation

If you prefer to install locally in a specific directory:

```bash
npm install chainjet
npx chainjet create my-web3-app
```

### Using with npx (No Installation Required)

Directly create a project without installing:

```bash
npx chainjet create my-web3-app
```

***

## Quick Start

{% stepper %}
{% step %}

#### Create Your Project

```bash
npx chainjet create my-web3-app
```

{% endstep %}

{% step %}

#### Choose Your Preferences

The CLI will prompt you to select:

<pre><code>? Choose your project name: my-web3-app
? Choose your language:
<strong>  ❯ TypeScript (recommended)
</strong>    JavaScript

? Install dependencies? (Y/n): Y
</code></pre>

{% endstep %}

{% step %}

#### Navigate to Your Project

```bash
cd my-web3-app
```

{% endstep %}

{% step %}

#### Start Development Server

{% tabs %}
{% tab title="npm" %}

```bash
npm run dev
```

{% endtab %}

{% tab title="pnpm" %}

```bash
pnpm dev
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn dev
```

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### Open in Browser

Visit `http://localhost:3000` in your browser. You should see the ChainJet welcome page with the RainbowKit wallet connector ready to use.
{% endstep %}
{% endstepper %}

***

## Configuration

### Environment Variables

Create a `.env.local` file in your project root:

```env
# WalletConnect Project ID (get from https://cloud.walletconnect.com)
NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_project_id_here
```

### RainbowKit Configuration

The `app/config.ts` file contains RainbowKit settings:

```typescript
import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';

export const config = getDefaultConfig({
  appName: 'My Web3 App',
  projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID!,
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true,
});
```

### wagmi Configuration

wagmi hooks are automatically configured through RainbowKit's config. No additional setup needed.

***

## Commands

### Create New Project

```bash
chainjet create [project-name] [options]
```

**Options:**

* `--template` - Choose template (default: `nextjs`)
* `--typescript` - Use TypeScript (default: true)
* `--git` - Initialize git repository (default: true)
* `--install` - Install dependencies (default: true)
* `--package-manager` - npm, yarn, or pnpm (auto-detected)

**Example:**

```bash
chainjet create my-app --typescript --package-manager pnpm
```

### Development Server

```bash
npm run dev
```

Starts the Next.js development server on `http://localhost:3000` with hot module replacement.

### Build for Production

```bash
npm run build
```

Creates an optimized production build.

### Start Production Server

```bash
npm start
```

Runs the production build.

### Lint Code

```bash
npm run lint
```

Runs ESLint to check code quality.

***

## Project Structure

```
my-web3-app/
├── app/
│   ├── layout.tsx         # Root layout with providers
│   ├── page.tsx           # Home page with wallet connection
│   └── globals.css        # Global styles
├── components/
│   └── providers.tsx      # Wagmi and RainbowKit providers
├── wagmi-config.ts        # Wagmi configuration
├── package.json           # Dependencies (latest versions)
├── tsconfig.json          # TypeScript configuration
├── next.config.js         # Next.js configuration
└── README.md              # Project documentation
```

### Key Files

**`app/layout.tsx`** - Root layout with WagmiProvider and RainbowKitProvider\
\&#xNAN;**`components/providers.tsx`** - Context providers setup\
\&#xNAN;**`.env.local`** - Environment variables and secrets

***

## Features

### 1. Pre-configured Wallet Connection

RainbowKit v2 is pre-configured with:

```typescript
import { ConnectButton } from '@rainbow-me/rainbowkit';

export default function Home() {
  return (
    <div>
      <h1>My dApp</h1>
      <ConnectButton />
    </div>
  );
}
```

### 2. React Hooks for Web3 Interactions

```typescript
import { useAccount, useBalance, useContractRead } from 'wagmi';

export function MyComponent() {
  const { address, isConnected } = useAccount();
  const { data: balance } = useBalance({ address });

  if (!isConnected) return <p>Please connect your wallet</p>;

  return (
    <div>
      <p>Address: {address}</p>
      <p>Balance: {balance?.formatted} ETH</p>
    </div>
  );
}
```

### 3. Type-Safe Contract Interactions with Viem

```typescript
import { createPublicClient, http } from 'viem';
import { mainnet } from 'viem/chains';

const client = createPublicClient({
  chain: mainnet,
  transport: http(),
});

// Type-safe contract reading
const balance = await client.getBalance({ address: '0x...' });
```

### 4. Multi-Chain Support

Switch between networks in RainbowKit:

```typescript
import { useNetwork, useSwitchNetwork } from 'wagmi';

export function NetworkSwitcher() {
  const { chain } = useNetwork();
  const { chains, switchNetwork } = useSwitchNetwork();

  return (
    <div>
      <p>Current chain: {chain?.name}</p>
      {chains.map((c) => (
        <button key={c.id} onClick={() => switchNetwork?.(c.id)}>
          {c.name}
        </button>
      ))}
    </div>
  );
}
```

### 5. State Management with TanStack Query

```typescript
import { useQuery } from '@tanstack/react-query';

function MyComponent() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['myData'],
    queryFn: () => fetch('/api/data').then(r => r.json()),
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <div>{/* render data */}</div>;
}
```

***

## Supported Networks

ChainJet CLI comes pre-configured with support for these EVM-compatible networks:

| Network  | Chain ID | RPC      | Testnet            |
| -------- | -------- | -------- | ------------------ |
| Ethereum | 1        | mainnet  | Sepolia (11155111) |
| Polygon  | 137      | matic    | Mumbai (80001)     |
| Optimism | 10       | optimism | Sepolia (11155420) |
| Arbitrum | 42161    | arbitrum | Sepolia (421614)   |
| Base     | 8453     | base     | Sepolia (84532)    |

### Add Custom Network

Modify `app/config.ts`:

```typescript
import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { myCustomChain } from 'viem/chains';

export const config = getDefaultConfig({
  appName: 'My Web3 App',
  projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID!,
  chains: [mainnet, polygon, optimism, arbitrum, base, myCustomChain],
});
```

***

## Troubleshooting

### Issue: "getDefaultConfig is not a function"

**Cause:** Dependency version mismatch

**Solution:** This is automatically fixed in ChainJet CLI. If you encounter it:

```bash
# Delete dependencies and reinstall
rm -rf node_modules package-lock.json
npm install
```

### Issue: Wallet Connection Not Working

**Cause:** Missing or invalid WalletConnect Project ID

**Solution:**

1. Go to <https://cloud.walletconnect.com>
2. Create a new project
3. Copy your Project ID
4. Add to `.env.local`:

   ```env
   NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_id_here
   ```

### Issue: RPC Rate Limiting

**Cause:** Using public RPC endpoints with high volume

**Solution:** Configure custom RPC endpoints:

```env
NEXT_PUBLIC_MAINNET_RPC_URL=https://your-rpc-endpoint.com
```

Recommended RPC providers:

* [Alchemy](https://alchemy.com/)
* [Infura](https://infura.io/)
* [QuickNode](https://quicknode.com/)

### Issue: Build Fails with TypeScript Errors

**Solution:** Check TypeScript configuration:

```bash
# Type-check without building
npx tsc --noEmit

# Fix common issues
npm run lint
```

### Issue: Hot Module Replacement (HMR) Not Working

**Solution:** Update `next.config.js`:

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

export default nextConfig;
```

***

## API Reference

### CLI Commands

#### `chainjet create [name]`

Creates a new Web3 dApp project.

```bash
chainjet create my-app
```

#### `chainjet --version`

Shows installed ChainJet CLI version.

#### `chainjet --help`

Shows available commands and options.

***

## Examples

### Example 1: Simple Balance Display

```typescript
'use client';

import { useAccount, useBalance } from 'wagmi';

export default function BalanceDisplay() {
  const { address, isConnected } = useAccount();
  const { data: balance } = useBalance({ address });

  if (!isConnected) {
    return <p>Connect your wallet to see balance</p>;
  }

  return (
    <div className="p-4 border rounded-lg">
      <p className="text-sm text-gray-500">Address</p>
      <p className="font-mono text-sm">{address}</p>
      
      <p className="text-sm text-gray-500 mt-4">Balance</p>
      <p className="text-2xl font-bold">
        {balance?.formatted} {balance?.symbol}
      </p>
    </div>
  );
}
```

### Example 2: Send Transaction

```typescript
'use client';

import { useSendTransaction } from 'wagmi';
import { parseEther } from 'viem';

export default function SendTransaction() {
  const { sendTransaction } = useSendTransaction();

  const handleSend = () => {
    sendTransaction({
      to: '0x1234...5678',
      value: parseEther('0.1'),
    });
  };

  return <button onClick={handleSend}>Send 0.1 ETH</button>;
}
```

### Example 3: Read Contract Data

```typescript
'use client';

import { useContractRead } from 'wagmi';
import { ERC20_ABI } from '@/lib/abis';

export default function TokenBalance() {
  const { data: balance } = useContractRead({
    address: '0x6B175474E89094C44Da98b954EedeAC495271d0F', // DAI
    abi: ERC20_ABI,
    functionName: 'balanceOf',
    args: ['0x1234...5678'],
  });

  return <p>Token Balance: {balance?.toString()}</p>;
}
```

### Example 4: Multi-Chain App

```typescript
'use client';

import { useNetwork, useSwitchNetwork } from 'wagmi';

export default function MultiChainApp() {
  const { chain } = useNetwork();
  const { chains, switchNetwork } = useSwitchNetwork();

  return (
    <div>
      <p>Current Network: {chain?.name}</p>
      
      <div className="flex gap-2 mt-4">
        {chains.map((c) => (
          <button
            key={c.id}
            onClick={() => switchNetwork?.(c.id)}
            className={`px-4 py-2 rounded ${
              chain?.id === c.id
                ? 'bg-blue-500 text-white'
                : 'bg-gray-200'
            }`}
          >
            {c.name}
          </button>
        ))}
      </div>
    </div>
  );
}
```

***

## Contributing

We welcome contributions! Here's how to get started:

### Fork and Clone

```bash
git clone https://github.com/ramykatour/chainjet.git
cd chainjet
npm install
```

### Create a Branch

```bash
git checkout -b feature/your-feature-name
```

### Make Changes

Edit files and test locally:

```bash
npm run dev
```

### Submit Pull Request

1. Push to your fork
2. Create a Pull Request
3. Describe your changes
4. Wait for review

***

## FAQ

<details>

<summary>Can I use ChainJet with other blockchains?</summary>

ChainJet works with any EVM-compatible blockchain. You can add custom chains to your `app/config.ts`.

</details>

<details>

<summary>Do I need to know Solidity?</summary>

No, ChainJet is for frontend dApp development. For smart contracts, you'd use Hardhat or Foundry.

</details>

<details>

<summary>Can I use ChainJet for production?</summary>

Yes! ChainJet is production-ready. Ensure you properly configure environment variables and test thoroughly.

</details>

<details>

<summary>What's included in the free version?</summary>

ChainJet CLI is completely free and open-source. All features are available at no cost.

</details>

<details>

<summary>How do I update ChainJet?</summary>

Update globally with:

```bash
npm update -g chainjet-cli
```

</details>

<details>

<summary>Can I modify the template?</summary>

Yes! The generated project is yours to customize. ChainJet only provides the initial scaffold.

</details>

<details>

<summary>How do I deploy my dApp?</summary>

You can deploy to:

* **Vercel** (recommended for Next.js)
* **Netlify**
* **GitHub Pages**
* **Traditional hosting**

Example Vercel deployment:

```bash
npm install -g vercel
vercel
```

</details>

<details>

<summary>What if I find a bug?</summary>

Report issues on [GitHub Issues](https://github.com/ramykatour/chainjet/issues)

</details>

<details>

<summary>How do I get support?</summary>

* Check [GitHub Discussions](https://github.com/ramykatour/chainjet/discussions)
* Open an [Issue](https://github.com/ramykatour/chainjet/issues)
* Join our [Discord Community](https://discord.gg/chainjet)

</details>

***

## Additional Resources

* [Next.js Documentation](https://nextjs.org/docs)
* [RainbowKit Documentation](https://www.rainbowkit.com/)
* [wagmi Documentation](https://wagmi.sh/)
* [viem Documentation](https://viem.sh/)
* [Tailwind CSS Documentation](https://tailwindcss.com/)
* [Web3 Best Practices](https://ethereum.org/en/developers/)

***

## License

ChainJet CLI is MIT licensed.

## Support

For questions or issues, visit:

* **GitHub**: <https://github.com/ramykatour/chainjet>
* **Website**: <https://chainjet.online>
* **Demo**: <https://demo.chainjet.online>
* **Docs**: <https://docs.chainjet.online>

***

**Last Updated**: April 2026\
**Version**: 1.0.0