Skip to content

πŸš€ Welcome to the Arbitrum Starter Kit! Build decentralized apps on Arbitrum effortlessly. Interact with contracts, manage state, and design seamlessly. Demo - https://youtu.be/Vin9Cp8Wk5g

Notifications You must be signed in to change notification settings

HAPPYS1NGH/arbitrum-starter-kit

Repository files navigation

Arbitrum Starter Kit

Welcome to the Arbitrum Starter Kit! This starter kit provides you with a solid foundation for building decentralized applications (dApps) on the Arbitrum network. It comes pre-configured with Next.js, Wagmi v2, Viem, RainbowKit, TypeScript, Tailwind CSS, and Shadcn, enabling you to quickly start developing your dApp.

Getting Started

To get started with the Arbitrum Starter Kit, follow these steps:

  1. Clone the repository or click on the Use this template button:

    https://github.com/HAPPYS1NGH/arbitrum-starter-kit
    
  2. Navigate to the project directory:

    cd arbitrum-starter-kit
    
  3. Create a .env or .env.local file in the root directory and obtain the WalletConnect project ID from WalletConnect. Add the following line to your .env or .env.local file:

    WALLET_CONNECT_PROJECT_ID=<your_wallet_connect_project_id>
    
  4. Install dependencies:

    npm install
    

    or

    yarn install
    
  5. Start the development server:

    npm run dev
    

    or

    yarn dev
    
  6. Open your web browser and navigate to http:https://localhost:3000 to view the application.

Interacting with Contracts

This starter kit provides hooks from Wagmi v2 for interacting with smart contracts on the Arbitrum network. You can use these hooks to read and write data to contracts.

Directory Structure

The project follows a standard directory structure for a Next.js application. Here's an overview of the directory structure:

β”œβ”€β”€ README.md
β”œβ”€β”€ components.json
β”œβ”€β”€ next-env.d.ts
β”œβ”€β”€ next.config.js
β”œβ”€β”€ package-lock.json
β”œβ”€β”€ package.json
β”œβ”€β”€ postcss.config.js
β”œβ”€β”€ public
β”‚   β”œβ”€β”€ arbitrum.svg
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ app
β”‚   β”‚   β”œβ”€β”€ favicon.ico
β”‚   β”‚   β”œβ”€β”€ globals.css
β”‚   β”‚   β”œβ”€β”€ layout.tsx
β”‚   β”‚   β”œβ”€β”€ page.tsx
β”‚   β”‚   β”œβ”€β”€ read
β”‚   β”‚   β”‚   └── page.tsx
β”‚   β”‚   └── write
β”‚   β”‚       └── page.tsx
β”‚   β”œβ”€β”€ components
β”‚   β”‚   β”œβ”€β”€ shared
β”‚   β”‚   β”‚   └── Navbar.tsx
β”‚   β”‚   └── ui
β”‚   β”‚       β”œβ”€β”€ button.tsx
β”‚   β”‚       β”œβ”€β”€ input.tsx
β”‚   β”‚       └── sonner.tsx
β”‚   β”œβ”€β”€ containers
β”‚   β”‚   β”œβ”€β”€ home
β”‚   β”‚   β”‚   └── Profile.tsx
β”‚   β”‚   β”œβ”€β”€ read
β”‚   β”‚   β”‚   └── ReadContract.tsx
β”‚   β”‚   └── write
β”‚   β”‚       └── WriteContract.tsx
β”‚   β”œβ”€β”€ lib
β”‚   β”‚   └── utils.ts
β”‚   β”œβ”€β”€ providers
β”‚   β”‚   β”œβ”€β”€ Layout.tsx
β”‚   β”‚   └── Web3Provider.tsx
β”‚   └── utils
β”‚       └── config.ts
β”œβ”€β”€ tailwind.config.ts
└── tsconfig.json

Support

If you encounter any issues or have questions regarding the Arbitrum Starter Kit, please don't hesitate to reach out to us:

Happy coding! πŸš€

About

πŸš€ Welcome to the Arbitrum Starter Kit! Build decentralized apps on Arbitrum effortlessly. Interact with contracts, manage state, and design seamlessly. Demo - https://youtu.be/Vin9Cp8Wk5g

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages