From 5229cf28301e5fe6f7a53dada8d2178ddf68148c Mon Sep 17 00:00:00 2001 From: victoriari Date: Mon, 10 Jun 2024 20:59:58 +0300 Subject: [PATCH] Added README.md --- README.md | 68 +++++++++++++++++++++++++++++++++++++++------------ docs/specs.md | 4 +-- 2 files changed, 54 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index f9f7a16..0c5e92a 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,64 @@ -# Casper Lottery +# Casper Lottery +This repository contains the front-end implementation of a decentralized application (DApp) demonstrating a simple lottery system using CSPR.suite series of products. -This project implementes a lottery application on Casper using Odra, and the CSPR.Suite series of products to demonstrate building on Casper. +Built with CSPR.click, Odra, and the CSPR.cloud, this DApp showcases how Casper blockchain technology can be utilized for transparent and fair random selection processes. Detailed spec: [here](./docs/specs.md) +### Setup +#### CSPR.click +Create a new project using CSPR.click react template: +``` +npx create-react-app my-new-casper-app --template @make-software/csprclick-react +``` +Go to the newly created project directory, install dependencies and run the app. -### Usage - -#### Prerequisites - -#### Setup - -#### Build +In this case it will be "my-new-casper-app" +``` +cd my-new-casper-app +npm install +npm start +``` +This command will start the development server. You can view the app by navigating to http://localhost:3000 in your web browser. +More details [here](https://docs.cspr.click/) -### Contributing +[CRA link](https://www.npmjs.com/package/@make-software/cra-template-csprclick-react) -#### Prerequisites - -#### Setup - -#### Build +### Build +To build the project for production, use: +``` +npm run build +``` +This command will create a build folder with optimized production-ready files. +### Usage +To initialize and use the CSPR.click feature in the frontend application, follow these steps: +1. ####Import the hook: +In the React component file where you want to use the CSPR.click feature, import the hook from the library: +``` +import { useClickRef } from '@make-software/csprclick-ui'; +``` +2. ####Initialize the hook: +``` +const clickRef = useClickRef(); +``` +3. ####Use methods to handle sign in/sign out events +``` +clickRef.on('csprclick:signed_in', async (event) => await doSomethingWithAccount(event.account)); +``` +4. ####Add the CSPR.click header +To add the CSPR.click header to your application import the ClickUI component. +``` +import { ClickUI } from '@make-software/csprclick-ui'; +``` +Customize the behavior of the hook by passing options as parameters. For example, you can use advanced functions such as adding a list of languages, a dark theme, and a list of currencies by passing parameters to props. +``` + +``` diff --git a/docs/specs.md b/docs/specs.md index b30a6a3..55ab07d 100644 --- a/docs/specs.md +++ b/docs/specs.md @@ -1,8 +1,6 @@ # PWB Example dApp -Created: March 15, 2024 1:03 PM -Project: Marketing -Status: In Progress +Created: March 15, 2024 ## Casper example dApp