Refactor frontend codes.

Author: joekingss

power-voting/.eslintrc.js renamed to frontend/.eslintrc.js

@@ -17,6 +17,7 @@ dist.zip
 
 # env
 .env
+.env.example
 
 # misc
 .eslintcache

power-voting/.gitignore renamed to frontend/.gitignore

@@ -0,0 +1,32 @@
+# 使用 Node.js 镜像作为构建环境
+FROM node:22 as build-stage
+
+# 设置工作目录
+WORKDIR /app
+
+# 复制 package.json 和 package-lock.json
+COPY power-voting/package*.json ./
+
+# 安装依赖
+RUN yarn install
+
+# 复制项目文件
+COPY power-voting .
+
+# 构建项目
+RUN yarn build
+
+# 使用 Nginx 镜像作为生产环境
+FROM nginx:alpine
+
+# 将构建产物复制到 Nginx 的静态文件目录
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+
+# 复制自定义的 Nginx 配置文件
+COPY power-voting/nginx.conf /etc/nginx/conf.d/default.conf
+
+# 暴露 80 端口
+EXPOSE 80
+
+# 启动 Nginx
+CMD ["nginx", "-g", "daemon off;"]

power-voting/.prettierignore renamed to frontend/.prettierignore

@@ -15,7 +15,7 @@ RUN yarn build
 
 FROM nginx:alpine
 
-COPY --from=build /app/dist /voting/dev/dist
+COPY --from=build /app/dist /voting/dev/distya
 
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 

power-voting/.prettierrc renamed to frontend/.prettierrc

@@ -2,15 +2,13 @@
 
 ## 1. Overview
 
-Power Voting dApp utilizes timelock based on smart contract technology to achieve fair and private voting. Before the voting deadline, no one’s voting results will be seen by others, and the voting process will not be disturbed by other participant’s voting results. After the voting deadline, anyone can count the votes in a decentralized manner, and the results of the counting will executed and stored by smart contract and will not be manipulated by any centralized organization or individual. 
-
-Power Voting dApp aims to become the infrastructure of DAO governance.
+Power Voting dApp is implemented according to [Filecoin Community Voting Specs](https://docs.google.com/document/d/13910NE-O3mUQ6rztt6f3xe7hwW_aS-xaPW_zHuTpBW4/edit#heading=h.4kbcnjlru68f). It utilizes Drand Timelock technology to achieve fair and private voting. It supports voting for multiple roles including Token Holders, Storage Providers, Clients and Developers. Different roles are given different voting weights according to their contributions or token holdings. Power Voting dApp allows different roles with different voting weights to cast the votes and then unify voting power.
 
 ## 2. Problem
 
 In the community voting process governed by DAO, since the voting data of other community members can be seen before the vote counting time, the community members will be affected by the existing voting data before voting, and some members will even take advantage of a large number of voting rights in their hands to vote at the end of the voting process to make the voting results are reversed, resulting in unfair voting.
 
-In the centralized voting process, since the vote counting power is in the hands of the centralized organization, it will cause problems such as vote fraud and black box operation of vote counting, resulting in the voting results being manipulated by others, which cannot truly reflect the wishes of the community.
+In the centralized voting process, since the vote counting power is in the hands of the centralized organization, it will cause problems such as vote fraud and black box operation of vote counting, resulting in the voting results being manipulated by others, which cannot truly reflect the views of the community.
 
 ## 3. Solution
 
@@ -26,7 +24,7 @@ When creating a proposal, the creator will enter a voting expiration time, and P
 
 ## 5. Voting Power Snapshot
 
-Power Oracle will request raw data from FileCoin, GitHub and other data sources to calculate role identity and voting power and save them into Power Oracle contracts. SP and Client respectively invoke the `PowerAPI.minerRawPower(filActorld)` and `DataCapAPI.balance(filActorld)` interfaces to retrieve power. Power Oracle contracts will store 60 days history of voting power. When users vote, only the percentage is recorded, not the actual voting power. During the vote counting process, a random weight will be selected from the 60 days history and multiplied by the percentage to calculate the vote.
+Power Oracle will request raw data from FileCoin, GitHub and other data sources to identify roles and calculate their voting weights and save them into Power Oracle contracts. SP and Client respectively invoke the `PowerAPI.minerRawPower(filActorld)` and `DataCapAPI.balance(filActorld)` interfaces to retrieve power. Power Oracle contracts will store 60-day history of voting power. When users vote, only the percentage is recorded, not the actual voting power. During the vote counting process, a random weight will be selected from the 60 days history and multiplied by the percentage to calculate the vote.
 
 ## 6. Power Voting Flowchart
 
@@ -41,9 +39,9 @@ Power Oracle will request raw data from FileCoin, GitHub and other data sources
 ![](img/ucan1.png)
 ![](img/ucan2.png)
 
-## 9. Install
+## 9. Deploy
 
-#### 1.Environment and Development Tools
+#### 1. Environment and Development Tools
 
 1.Node.js 14 or later installed
 
@@ -55,15 +53,15 @@ Power Oracle will request raw data from FileCoin, GitHub and other data sources
 
 <img src="./img/git.png" style="zoom:50%;" alt="" />
 
-#### 2.Download Source Code
+#### 2. Download Source Code
 
 Download the source code with the following command:
 
 ```
 git clone https://github.com/black-domain/power-voting.git
 ```
 
-#### 3.Install Dependencies
+#### 3. Install Dependencies
 
 Install dependencies with the following command:
 
@@ -76,7 +74,7 @@ After yarn, you will get a 'node_modules' folder in the root directory.
 
 <img src="img/node_modules.png" style="zoom:50%;"  alt="" />
 
-#### 4.Update Keys in .env.example
+#### 4. Update Keys in .env.example
 
 Deploying PowerVoting and Oracle contract on Filecoin main network and replace the following address in ‘/.env.example’
 
@@ -96,7 +94,7 @@ Create wallet connect project id by https://www.rainbowkit.com/docs/migration-gu
 
 Set 'WALLET_CONNECT_ID'  in ‘/.env.example’
 
-#### 6.Build And Package
+#### 6. Build And Package
 
 Build  with the following command:
 
@@ -108,13 +106,11 @@ After building, you will get a 'dist' folder in the root directory.
 
 <img src="img/dist.png" style="zoom:50%;"  alt="" />
 
-#### 7.Deployment
+#### 7. Deployment
 
 To deploy the 'dist ' folder generated after building your front-end project, you can follow these steps:
 
 1. **Upload the dist folder to the server**: Upload the `dist` folder to your server. You can use FTP tools, SSH, or other methods to transfer the files to a specific directory on your server.
 2. **Configure the Web Server**: Ensure that your web server (such as Nginx, Apache, etc.) is properly configured, and you know where to serve static files from. Add a new site or virtual host in the configuration file and set the document root to point to the uploaded `dist` folder.
 3. **Start the Web Server**: Start or restart your web server to apply the new configuration.
-4. **Access the Website**: Open your browser and enter your domain name or server IP address. You should be able to see your deployed front-end application.
-
-
+4. **Access the Website**: Open your browser and enter your domain name or server IP address. You should be able to see your deployed front-end application.

frontend/Dockerfile

@@ -27,7 +27,7 @@ echo "project: $IMAGE_NAME, port: $PORT"
     git pull origin main
 )
 
-docker build -t $IMAGE_NAME .
+docker build -t $IMAGE_NAME -f Dockerfile.github .
 
 if docker ps -a --format '{{.Names}}' | grep -wq "$IMAGE_NAME"; then
     echo "Stopping container: $IMAGE_NAME..."