https://github.com/blocto/reward-demo
Sample React project from sending Blocto point as reward
https://github.com/blocto/reward-demo
Last synced: 8 months ago
JSON representation
Sample React project from sending Blocto point as reward
- Host: GitHub
- URL: https://github.com/blocto/reward-demo
- Owner: blocto
- Created: 2020-05-22T07:41:50.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T06:39:09.000Z (almost 3 years ago)
- Last Synced: 2025-03-26T18:52:35.781Z (9 months ago)
- Language: JavaScript
- Size: 4.34 MB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blocto Reward Demo
This project demonstrates how to use [Blocto Reward API](https://github.com/portto/Blocto-Integration/blob/master/RewardSystem.md) in your web app.
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
[Demo Site](http://35.234.30.94)
## Setup
Follow these steps to run this demo:
### 1. Get API Token
Contact [info@portto.io](mailto:hlee@portto.io) to setup developer account and get API token for this project.
Once you have the token, put it in `server/constants.js`.
### 2. Install Dependencies
`yarn`
Installs all dependency modules.
### 3. Start Demo Web App
`yarn start`
Runs the app in the development mode.
This script starts up API server at [http://localhost:3001](http://localhost:3001) and web server at [http://localhost:3000](http://localhost:3000)
The page will reload if you make edits.
You will also see any lint errors in the console.
## How It Works
This demo project consists of two parts: **client side interface** and **server side API**.
Client side interface gets users' Blocto wallet address and passes this address to server side when user clicks **Get Reward**.
Then server side sends request to Blocto service:
Endpoint:
- Staging: `https://api-staging.blocto.app/reward/send`
- Production: `https://api.blocto.app/reward/send`
Headers:
```
'Authorization': API_TOKEN,
'Content-Type': 'application/json'
```
Body:
```javascript
{
blockchain: "ethereum",
wallet_address: USER_WALLET_ADDRESS,
point: BLOCTO_POINT_AMOUNT
}
```
We recommend using a backend service to send requests to Blocto service, so you will not leak your API_TOKEN.
## Using the Quiz Component
We have provided a `Quiz` react component to work with reward API. Add it to your react project by
```sh
npm i @portto/quiz --save
# or
yarn add @portto/quiz
```
Then in your project you can use it like
```javascript
import React from 'react';
import Quiz from '@portto/quiz';
import { fromJS } from 'immutable';
const SampleReward = () => {
const [isQuizActive, setQuizActive] = useState(false)
const stopQuiz = () => {
setQuizActive(false);
};
const completeQuiz = () => {
// Send reward
setQuizActive(false);
};
return (
Claim your rewards now.',
submit: 'Submit',
}}
/>
);
}
export default SampleReward;
```
Check out `./src/App.js` for complete example.