npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

create-unichain-dapp

v0.1.0

Published

A starter kit for building (Dapps) on the Unichain L2, powered by create-unichain-dapp.

Downloads

9

Readme

A starter-kit featuring Next.js & Hardhat or Foundry, designed for building dApps, and for developing, deploying, testing, and verifying Solidity smart contracts on the Unichain L2. The starter kit comes pre-configured with few example dApps and includes essential tools and libraries such as create-next-app, Hardhat, Foundry, TypeScript, Tailwind CSS, shadcn-ui, web3.js and more.

🚀 Quick Start

Choose your preferred implementation:

📦 Installation

Open up your terminal (or command prompt) and type the following command:

npx create-unichain-dapp <your-dapp-name>

# Select Hardhat or Foundry Option

# cd into the directory
cd <your-dapp-name>

Note: If you have used the npx command then you don't have to install manually in any directory.

Hardhat Setup

📜 Smart Contracts

All smart contracts are located inside the backend aka hardhat folder, which can be found in the root directory. To get started, first install the necessary dependencies by running:

# change directory into the backend folder
cd backend

npm install

🔑 Private Key

Ensure you create a .env file in the backend directory. Then paste your Metamask private key in .env with the variable name ACCOUNT_PRIVATE_KEY as follows:

ACCOUNT_PRIVATE_KEY=0x734...

⚙️ Compile

Now, you can write your contracts in ./contracts/ directory, replace Greeter.sol with <your-contracts>.sol file.

# For compiling the smart contracts
npx hardhat compile

After successful compilation, the artifacts directory will be created in ./src with a JSON /contracts/<your-contracts>.sol/<your-contracts>.json containing ABI and Bytecode of your compiled smart contracts.

🧪 Test

To write tests, go to ./test directory and create <your-contracts>.ts, you can test your smart contracts using the following command.

# For testing the smart contracts
npx hardhat test

⛓️ Deploy

Before deploying the smart contracts, ensure that you have added the Unichain Sepolia to your MetaMask wallet and that it has sufficient funds. If you do not have testnet $EDU on Unichain Sepolia, please follow this faucets guide.

Also, make changes in ./scripts/deploy.ts (replace the greeter contract name with <your-contract-name>).

For deploying the smart contracts to Unichain Sepolia network, type the following command:

# For deploying the smart contracts
npx hardhat run scripts/deploy.ts --network unichain
<your-contract> deployed to: 0x...

Copy and paste the generated contract JSON ABI folder contracts inside the backend/src/contracts directory to the /frontend/ directory.

Copy and paste the deployed contract address in the frontend page directory. For example, if the deployed contract is Greeter.sol, then you have to paste the address in frontend/app/(dapps)/simple-greeting-dapp/page.tsx.

✅ Verify

To verify the deployed smart contract on Unichain Sepolia, execute the following command:

# For verifying the smart contracts
npx hardhat verify --network unichain <deployed-contract-address>

Foundry Setup

📜 Smart Contracts

All smart contracts are located inside the backend aka foundry folder, which can be found in the root directory.

# change directory into the backend folder
cd backend

🔑 Private Key

Ensure you create a .env file in the backend directory. Then paste your Metamask private key in .env with the variable name ACCOUNT_PRIVATE_KEY as follows:

ACCOUNT_PRIVATE_KEY=0x734...

⚙️ Compile

Now, you can write your contracts in ./src/ directory, replace Greeter.sol with <your-contracts>.sol file.

# For compiling the smart contracts
forge compile

After successful compilation, the artifacts directory will be created in ./out with a JSON /<your-contract>/<your-contracts>.json containing ABI and Bytecode of your compiled smart contracts.

🧪 Test

To write tests, go to ./test directory and create <your-contracts>.t.sol, you can test your smart contracts using the following command.

# For testing the smart contracts
forge test

⛓️ Deploy

Before deploying the smart contracts, ensure that you have added the Unichain Sepolia to your MetaMask wallet and that it has sufficient funds. If you do not have testnet $EDU on Unichain Sepolia, please follow this faucets guide.

Also, make changes in ./script/DeployGreeter.s.sol (replace the deploy greeter contract name with <your-contract-name>).

For deploying the smart contracts to Unichain Sepolia network, type the following command:

# For deploying the smart contracts
forge script script/DeployGreeter.s.sol --broadcast --rpc-url https://sepolia.unichain.org --gas-limit 30000000 --with-gas-price 5gwei --skip-simulation
<your-contract> deployed to: 0x...

Copy and paste the generated contract JSON ABI folder Greeter.sol inside the backend/out/ directory to the /frontend/contracts/ directory.

Copy and paste the deployed contract address in the frontend page directory. For example, if the deployed contract is Greeter.sol, then you have to paste the address in frontend/app/(dapps)/simple-greeting-dapp/page.tsx.

✅ Verify

To verify the deployed smart contract on Unichain Sepolia, execute the following command:

Next.js Client

Start the Next.js app by running the following command in the frontend directory:

# Change directory into the frontend folder
cd frontend

# Start the development server
npm run dev

➡️ Contributing

We welcome contributions from the community! If you'd like to contribute, please follow the guidelines in our CONTRIBUTING.md file.

⚖️ License

create-unichain-dapp is licensed under the MIT License.