Merge pull request #32 from celo-org/frontend-edits

front end updates

.gitignore

@@ -41,6 +41,7 @@ nb-configuration.xml
 PROPOSAL.md
 
 # Ignore lock files
-*.lock
-packages/*/*.lock
-
+yarn.lock
+package-lock.json
+packages/*/yarn.lock
+packages/*/package-lock.json

README.md

@@ -1,8 +1,8 @@
 <!-- TITLE -->
-<p align="center"> 
+<p align="center">
   <img width="100px" src="https://github.com/celo-org/celo-composer/blob/main/images/readme/celo_isotype.svg" align="center" alt="Celo" />
- <h2 align="center">Celo Composer</h2>
- <p align="center">Build, deploy, and iterate quickly on decentralized applications using Celo.</p>
+ <h2 align="center">Celo Composer - MiniPay Template</h2>
+ <p align="center">Build, deploy, and iterate quickly on decentralized applications using Celo for MiniPay.</p>
 </p>
   <p align="center">
     <a href="https://github.com/celo-org/celo-composer/graphs/stars">
@@ -25,35 +25,40 @@
 
 <!-- TABLE OF CONTENTS -->
 
-<details>
+<div>
   <summary>Table of Contents</summary>
   <ol>
-    <li>
-      <a href="#about-the-project">About The Project</a>
-      <ul>
+    <li><a href="#about-the-project">About The Project</a></li>
+      <ol>
         <li><a href="#built-with">Built With</a></li>
-      </ul>
-    </li>
-    <li>
-      <ul>
         <li><a href="#prerequisites">Prerequisites</a></li>
-        <li><a href="#installation">Installation</a></li>
-      </ul>
-    </li>
+        <li><a href="#minipay">MiniPay</a></li>
+     </ol>
+    <li><a href="#how-to-use-celo-composer">How to use Celo Composer</a></li>
+        <ol>
+          <li><a href="#install-dependencies">Install Dependencies</a></li>
+          <li><a href="#deploy-a-smart-contract">Deploy a Smart Contract</a></li>
+          <li><a href="#deploy-your-dapp-locally">Deploy your Dapp Locally</a></li>
+          <li><a href="#add-ui-components">Add UI Components</a></li>
+          <li><a href="#deploy-with-vercel">Deploy with Vercel</a></li>
+          <li><a href="#supported-frameworks">Supported Frameworks</a></li>
+        </ol>
     <li><a href="#usage">Usage</a></li>
+    <li><a href="#support">Support</a></li>
     <li><a href="#roadmap">Roadmap</a></li>
     <li><a href="#contributing">Contributing</a></li>
     <li><a href="#license">License</a></li>
     <li><a href="#contact">Contact</a></li>
-    <li><a href="#acknowledgments">Acknowledgments</a></li>
   </ol>
-</details>
+</div>
 
 <!-- ABOUT THE PROJECT -->
 
 ## About The Project
 
-Celo Composer allows you to quickly build, deploy, and iterate on decentralized applications using Celo. It provides a number of frameworks, examples, and Celo specific functionality to help you get started with your next dApp.
+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.
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
@@ -63,106 +68,162 @@ Celo Composer is built on Celo to make it simple to build dApps using a variety
 
 - [Celo](https://celo.org/)
 - [Solidity](https://docs.soliditylang.org/en/v0.8.19/)
-- [Next.js](https://nextjs.org/)
+- [Hardhat](https://hardhat.org/)
 - [React.js](https://reactjs.org/)
-- [Material UI](https://mui.com/)
-- [React Native](https://reactnative.dev/)
-- [Flutter](https://docs.flutter.dev/)
-- [React-celo](https://github.com/celo-org/react-celo/)
-- [Rainbowkit-celo](https://github.com/celo-org/rainbowkit-celo)
+- [Next.js](https://nextjs.org/)
+- [viem](https://viem.sh/)
+- [Tailwind](https://tailwindcss.com/)
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 
 <!-- GETTING STARTED -->
 
 ## Prerequisites
 
-- Node
+- Node (v20 or higher)
 - Git (v2.38 or higher)
 
-## How to use Celo Composer
+## MiniPay
+
+Welcome to the [MiniPay](https://www.opera.com/products/minipay) wallet integration guide. MiniPay is one of the fastest growing wallets that was built out by Opera on Celo that seeks to create a simple user experience to use DApps. MiniPay is available as a standalone app and inside the Opera Mini browser on Android phones thereby allowing DApp developers to tap into a distribution of 100M users on integration.
+
+This guide provides information on how to develop and test your dapp for MiniPay.
+
+To get started with MiniPay, we recommend testing the wallet and building a sample dApp using our starter kit. The following steps will guide you through setting up MiniPay, building your dApp, and testing it in the wallet.
+
+:::info
+Install the new [MiniPay standalone app](https://play.google.com/store/apps/details?id=com.opera.minipay) now! 🎉 📥
+:::
 
-The easiest way to start with Celo Composer is using `@celo/celo-composer`. This CLI tool lets you quickly start building dApps on Celo for multiple frameworks, including React (with either react-celo or rainbowkit-celo), React Native (w/o Expo), Flutter, and Angular. To get started, just run the following command, and follow the steps:
+## How to use Celo Composer - MiniPay template
+
+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
 
 ```bash
 npx @celo/celo-composer@latest create
 ```
 
-### Front-end framework
+- Step 2: Provide the Project Name: You will be prompted to enter the name of your project.
 
-![Celo Composer select framework](https://github.com/celo-org/celo-composer/blob/main/images/readme/cc_step_1.png?raw=true)
+```text
+What is your project name: 
+```
 
-### Web3 library (for react-app)
+- Step 3: Choose to Use Hardhat: You will be asked if you want to use Hardhat. Select Yes or No.
 
-![Celo Composer select framework](https://github.com/celo-org/celo-composer/blob/main/images/readme/cc_step_2.png?raw=true)
+```text
+Do you want to use Hardhat? (Y/n)
+```
 
-### Smart contract framework
+- Step 4: Choose to Use a Template: You will be asked if you want to use a template. Select `Yes` .
 
-![Celo Composer tool selection](https://github.com/celo-org/celo-composer/blob/main/images/readme/cc_step_3.png?raw=true)
+```text
+Do you want to use a template?
+```
 
-### Subgraph
+- Step 5: Select a Template: If you chose to use a template, you will be prompted to select `MiniPay` from the list provided.
 
-![Celo Composer subgraph support](https://github.com/celo-org/celo-composer/blob/main/images/readme/cc_step_4.png?raw=true)
+- Step 6: Provide the Project Owner's Name: You will be asked to enter the project owner's name.
 
-### Name your dApp
+```text
+Project Owner name:
+```
 
-![Celo Composer dApp name](https://github.com/celo-org/celo-composer/blob/main/images/readme/cc_step_5.png?raw=true)
+- Step 7: Wait for Project Creation: The CLI will now create the project based on your inputs. This may take a few minutes.
 
-**_🔥Voila, you have a dApp ready to go. Voila, you have a dApp ready to go. Start building your dApp on Celo._**
+- Step 8: Follow the instructions to start the project. The same will be displayed on the console after the project is created.
 
-### Getting started
+```text
+🚀 Your starter project has been successfully created!
+```
 
-Once your custom dApp has been created, just install dependencies, either with `yarn` or `npm i`, and run the respective script from the `package.json` file.
-## Supported Frameworks
+## Install Dependencies
 
-### React
 
-- Support for Website and Progressive Web Application.
-- Works with all major crypto wallets.
+Once your custom dApp has been created, just install dependencies, either with yarn:
 
-Check [package readme](https://github.com/celo-org/celo-composer/blob/main/packages/react-app/README.md) to learn more about.
+```bash
+   yarn
+```
 
-### React Native
+If you prefer npm, you can run:
 
-- Out of the box config, just focus on buidl.
-- Support for Android and IOS.
-- Works with and without [Expo](https://expo.dev/).
-- Working example app included.
+```bash
+   npm install
+```
 
-Check [package readme](https://github.com/celo-org/celo-composer/blob/main/packages/react-native-app/README.md) to learn more about.
+## Deploy a Smart Contract
 
-### Flutter
+Find the detailed instructions on how to run your smart contract in [packages/hardhat/README.md](./packages/hardhat/README.md).
 
-- One command to get started - Type `flutter run` to start development in your mobile phone.
-- Works with all major mobile crypto wallets.
-- Support for Android, IOS (Web, Windows, and Linux coming soon).
-- Working example app included.
+For quick development follow these three steps:
 
-Check [package readme](https://github.com/celo-org/celo-composer/blob/main/packages/flutter-app/README.md) to learn more about.
+1. Change `packages/hardhat/env.template` to `packages/hardhat/env` and add your `PRIVATE_KEY` into the `.env` file.
+2. 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](https://faucet.celo.org/alfajores).
+3. Run the following commands from the `packages/hardhat` folder to deploy your smart contract to the Celo Testnet Alfajores:
 
-### Angular
+```bash
+npx hardhat ignition deploy ./ignition/modules/MiniPay.ts --network alfajores
+```
 
-- Support for Website and Progressive Web Application.
-- Works with all major crypto wallets.
+## Deploy your Dapp Locally
 
-Check [package readme](https://github.com/celo-org/celo-composer/blob/main/packages/angular-app/README.md) to learn more about.
+Find the detailed instructions on how to run your frontend in the [`react-dapp` README.md](./packages/react-app/README.md).
 
-<!-- USAGE EXAMPLES -->
+Before you start the project, please follow these steps:
 
-## 🔭 Learning Solidity
+1. Rename the file:
+   packages/react-app/.env.template
+   to
+   packages/react-app/.env
 
-📕 Read the docs: <https://docs.soliditylang.org>
+2. Open the newly renamed .env file and add your WalletConnect Cloud Project ID from [WalletConnect Cloud](https://cloud.walletconnect.com/)
 
-- [Primitive Data Types](https://solidity-by-example.org/primitives/)
-- [Mappings](https://solidity-by-example.org/mapping/)
-- [Structs](https://solidity-by-example.org/structs/)
-- [Modifiers](https://solidity-by-example.org/function-modifier/)
-- [Events](https://solidity-by-example.org/events/)
-- [Inheritance](https://solidity-by-example.org/inheritance/)
-- [Payable](https://solidity-by-example.org/payable/)
-- [Fallback](https://solidity-by-example.org/fallback/)
+Once you've done that, you're all set to start your project!
 
-📧 Learn the [Solidity globals and units](https://solidity.readthedocs.io/en/v0.8.19/units-and-global-variables.html)
+Run the following commands from the `packages/react-app` folder to start the project:
+
+```bash
+   yarn dev
+```
+
+If you prefer npm, you can run:
+
+```bash
+   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](https://ui.shadcn.com/) in this project, refer to the [UI Components Guide](./docs/UI_COMPONENTS.md).
+
+## 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](./docs/DEPLOYMENT_GUIDE.md).
+
+
+## Supported Frameworks
+
+### React / Nextjs
+
+- Support for Website and Progressive Web Application.
+- Works with all major crypto wallets.
+
+Check [nextjs docs](https://nextjs.org/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](https://hardhat.org/hardhat-runner/docs/getting-started) to learn more about it.
 
 ## Support
 
@@ -194,4 +255,4 @@ Distributed under the MIT License. See `LICENSE.txt` for more information.
 - [@CeloDevs](https://twitter.com/CeloDevs)
 - [Discord](https://discord.com/invite/celo)
 
-<p align="right">(<a href="#top">back to top</a>)</p>
+<p align="right">(<a href="#top">back to top</a>)</p>

packages/docs/DEPLOYMENT_GUIDE.md

@@ -0,0 +1,95 @@
+# Deployment Guide for Celo Composer React/Next App Using Vercel CLI
+
+This document provides step-by-step instructions for deploying your Next.js app to Vercel using the Vercel CLI.
+
+## Prerequisites
+
+1. **Node.js installed**: Ensure Node.js is installed on your system.
+
+## Step 1: Install Vercel CLI
+
+Install Vercel CLI globally using npm or pnpm:
+
+```bash
+npm install -g vercel
+# OR if using pnpm
+pnpm add -g vercel
+```
+
+## Step 2: Login to Vercel
+
+Log in to your Vercel account:
+
+```bash
+vercel login
+```
+
+Follow the on-screen instructions to authenticate your account.
+
+## Step 3: Goto React App
+
+Navigate to the root directory of your Next.js app:
+
+```bash
+cd packages/react-app
+```
+
+## Step 4: Deploy the App
+
+To deploy your Celo Composer app using Vercel CLI, run:
+
+```bash
+vercel
+```
+
+> [!NOTE]  
+> First-Time Deployment:
+>
+> - The CLI will ask several questions, including project scope, project name, and framework detection.
+>
+> Subsequent Deployments:
+>
+> - Run vercel to deploy the latest changes without additional configuration.
+
+## Step 5: View Deployment Status
+
+After deployment, you’ll receive a preview deployment URL:
+
+```bash
+https://<project-name>.vercel.app
+```
+
+> [!IMPORTANT]
+> Important: This preview deployment is only accessible to the authenticated user (the Vercel account owner). To make your app publicly accessible, you need to deploy to production.
+
+## Step 6: Deploy to Production
+
+To make the app publicly accessible, deploy it to production:
+
+```bash
+vercel deploy --prod
+```
+
+This command creates a production deployment accessible to everyone.
+
+## Step 8: Configure Environment Variables
+
+If your app uses environment variables, configure them in Vercel:
+
+1. Go to the Vercel Dashboard.
+2. Select your project.
+3. Go to Settings > Environment Variables.
+4. Add variables for Development, Preview, and Production environments.
+
+Alternatively, use Vercel CLI:
+
+```bash
+vercel env add <variable-name> <variable-value>
+```
+
+## Step 9: Update Deployment
+
+Whenever you make changes to your code, update the deployment:
+
+- Preview deployment: `vercel`
+- Production deployment: `vercel --prod`