Celo

Celo Composer Build, deploy, and iterate quickly on decentralized applications using Celo.

GitHub Contributors GitHub Contributors Issues GitHub pull requests MIT License

Table of Contents About The Project Built With Prerequisites How to use Celo Composer Install Dependencies Deploy a Smart Contract Deploy your Dapp Locally Add UI Components Deploy with Vercel Supported Frameworks Supported Templates Usage Support Roadmap Contributing License Contact About The Project Celo Composer allows you to quickly build, deploy, and iterate on decentralized applications using Celo. It provides a number of frameworks, templates, deployment and component support, and Celo specific functionality to help you get started with your next dApp.

It is the perfect lightweight starter-kit for any hackathon and for quickly testing out integrations and deployments on Celo.

(back to top)

Built With Celo Composer is built on Celo to make it simple to build dApps using a variety of front-end frameworks, and libraries.

Celo Solidity Hardhat React.js Next.js viem Tailwind (back to top)

Prerequisites Node (v20 or higher) Git (v2.38 or higher) How to use Celo Composer The easiest way to start with Celo Composer is using @celo/celo-composer. This CLI tool lets you quickly start building dApps on Celo, including several templates. To get started, just run the following command, and follow the steps:

Step 1 npx @celo/celo-composer@latest create Step 2: Provide the Project Name: You will be prompted to enter the name of your project. What is your project name: Step 3: Choose to Use Hardhat: You will be asked if you want to use Hardhat. Select Yes or No. Do you want to use Hardhat? (Y/n) Step 4: Choose to Use a Template: You will be asked if you want to use a template. Select Yes or No. Do you want to use a template? Step 5: Select a Template: If you chose to use a template, you will be prompted to select a template from the list provided.

• Minipay
• Valora Step 6: Provide the Project Owner's Name: You will be asked to enter the project owner's name. Project Owner name: Step 7: Wait for Project Creation: The CLI will now create the project based on your inputs. This may take a few minutes.

Step 8: Follow the instructions to start the project. The same will be displayed on the console after the project is created.

🚀 Your starter project has been successfully created! Install Dependencies Once your custom dApp has been created, just install dependencies, either with yarn:

yarn If you prefer npm, you can run:

npm install Deploy a Smart Contract Find the detailed instructions on how to run your smart contract in packages/hardhat/README.md.

For quick development follow these three steps:

Change packages/hardhat/env.template to packages/hardhat/env and add your PRIVATE_KEY into the .env file. Make sure your wallet is funded when deploying to testnet or mainnet. You can get test tokens for deploying it on Alfajores from the Celo Faucet. Run the following commands from the packages/hardhat folder to deploy your smart contract to the Celo Testnet Alfajores: npx hardhat ignition deploy ./ignition/modules/Lock.ts --network alfajores Deploy your Dapp Locally Find the detailed instructions on how to run your frontend in the react-dapp README.md.

Before you start the project, please follow these steps:

Rename the file: packages/react-app/.env.template to packages/react-app/.env

Open the newly renamed .env file and add your WalletConnect Cloud Project ID from WalletConnect Cloud

Once you've done that, you're all set to start your project!

Run the following commands from the packages/react-app folder to start the project:

yarn dev If you prefer npm, you can run:

npm run dev Thank you for using Celo Composer! If you have any questions or need further assistance, please refer to the README or reach out to our team.

🔥Voila, you have a dApp ready to go. Start building your dApp on Celo.

Add UI Components To keep the Celo Composer as lightwieght as possible we didn't add any components but rather a guide on how to add the components you need yourself with a very simple to use components library. To learn how to add UI components using ShadCN in this project, refer to the UI Components Guide.

Deploy with Vercel The Celo Composer is a great tool for hackathons and fast deployments. We created a guide for you, using the Vercel CLI to create a live deployment in minutes. For detailed instructions on deploying the Next.js app using Vercel CLI, refer to the Deployment Guide.

Supported Frameworks React / Nextjs Support for Website and Progressive Web Application. Works with all major crypto wallets. Check nextjs docs to learn more about it.

Hardhat Robust framework for building and testing smart contracts. Compatible with various Ethereum development tools and plugins. Check hardhat docs to learn more about it.

Supported Templates Minipay Pre-built template for creating a mini-payment application. Seamless integration with Celo blockchain for handling payments. Checkout minipay docs to learn more about it.

Valora Template designed for Valora wallet integration. Facilitates easy wallet connectivity and transaction management. Checkout valora docs to learn more about it.

Support Join the Celo Discord server at https://chat.celo.org. Reach out on the dedicated repo channel here.

Roadmap See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing We welcome contributions from the community.

(back to top)

License Distributed under the MIT License. See LICENSE.txt for more information.

Contact @CeloDevs Discord (back to top)