fix: review ui

patractlabs · Sep 1, 2021 · 3f38415 · 3f38415
1 parent 72a81e7
commit 3f38415
Show file tree

Hide file tree

Showing 32 changed files with 943 additions and 556 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,25 +1,25 @@
-import "./App.css";
+import './App.css'
 
-import React, { FC, ReactElement, Suspense, useEffect } from "react";
-import { Switch, Route, Redirect, BrowserRouter } from "react-router-dom";
-import "./i18n";
-import useRouter from "./core/hooks/useRouter";
-import Home from "./pages/Home";
-import Header from "./pages/Header";
-import Dashboard from "./pages/Dashboard";
-import PageLoading from "./pages/PageLoading";
-import { ApiProvider } from "./core/context/api";
-import { useApi } from "./core/hooks/useApi";
-import { useTranslation } from "react-i18next";
-import { Language } from "./core/enum";
-import { DashboardProvider } from "./core/context/dashboard-context";
+import React, { FC, ReactElement, Suspense, useEffect } from 'react'
+import { Switch, Route, Redirect, BrowserRouter } from 'react-router-dom'
+import './i18n'
+import useRouter from './core/hooks/useRouter'
+import Home from './pages/Home'
+import Header from './pages/Header'
+import Dashboard from './pages/Dashboard'
+import PageLoading from './pages/PageLoading'
+import { ApiProvider } from './core/context/api'
+import { useApi } from './core/hooks/useApi'
+import { useTranslation } from 'react-i18next'
+import { Language } from './core/enum'
+import { DashboardProvider } from './core/context/dashboard-context'
 
 const AuthRoute: FC<{
-  component: FC;
-  path: string;
+  component: FC
+  path: string
 }> = ({ component: Component, ...rest }): ReactElement => {
-  const { isLogged } = useApi();
-  const { location } = useRouter();
+  const { isLogged } = useApi()
+  const { location } = useRouter()
 
   return (
     <Route
@@ -32,18 +32,18 @@ const AuthRoute: FC<{
         )
       }
     />
-  );
-};
+  )
+}
 
 const App: FC = (): ReactElement => {
-  const { i18n } = useTranslation();
+  const { i18n } = useTranslation()
 
   useEffect(() => {
-    i18n.language = i18n.language.toLowerCase().includes("zh")
+    i18n.language = i18n.language.toLowerCase().includes('zh')
       ? Language.zh
-      : Language.en;
-    console.log("lang", i18n.language);
-  }, [i18n]);
+      : Language.en
+    console.log('lang', i18n.language)
+  }, [i18n])
 
   return (
     <ApiProvider>
@@ -67,6 +67,6 @@ const App: FC = (): ReactElement => {
       </div>
     </ApiProvider>
   )
-};
+}
 
-export default App;
+export default App
diff --git a/src/assets/replay_circle_filled_black.svg b/src/assets/replay_circle_filled_black.svg
diff --git a/src/config/locales/en-us.json b/src/config/locales/en-us.json
@@ -9,7 +9,7 @@
   "bannerTitle2": "Elara provides Polkadot developers with free, instant and scalable blockchain API access services, including Polkadot, Kusama, etc.",
   "bannerBtn": "Start For Free",
   "Cumulative": "Total Requests",
-
+  "TotalBandwidth": "Total Bandwidth",
   "Product": "Service Advantages",
   "Easy": "Easy To Use",
   "NoNeed": "Developers can directly use our JSON-RPC interface based on HTTPS and WebSocket to access the Polkadot network without synchronizing blocks and complex settings.",
@@ -21,20 +21,19 @@
   "Ourhighly": "Our highly scalable infrastructure ensures rapid access to all relay chains, parachains, and independent chains based on Substrate in the Polkadot ecosystem, allowing developers to quickly deploy their applications to new networks",
 
   "Customer": "Special Service",
-  "WeProvide": "If the bandwidth requested by the application exceeds the account free quota, developers can contact us at any time to provide customized solutions。",
+  "WeProvide": "If the amount of application Bandwidth exceeds the account free quota, developers can contact us at any time to provide customized solutions.",
 
   "service": "Free Services",
   "AllNetworks": "All networks in the",
   "AllNetworks1": "Polkadot ecosystem",
   "1000000requests": "1,000,000 requests for",
   "1000000requests1": "every account every day",
-  "10projects": "10 projects",
   "Direct": "Direct customer support",
   "NeedMore": "Need more services?",
   "YouCan": "You can contact us through the following channels, we will provide you with customized solutions",
   "No Data": "No Data",
   "We provide you": "We provide you",
-  "10 Projects": "10 Projects",
+  "Projects": " Projects",
   "All networks in the Polkadot ecosystem": "All networks in the Polkadot ecosystem",
   "Public API Access Service for Polkadot Ecosystem": "Public API Access Service for Polkadot Ecosystem",
   "Contact & Subscription": "Contact & Subscription",
@@ -80,6 +79,7 @@
   },
 
   "Details": {
+    "Refresh": "Refresh",
     "Request": "Request",
     "Country": "Country",
     "OfTotal": "Of Total",
@@ -92,7 +92,6 @@
     "Requests": "Requests",
     "Settings": "Settings",
     "NotSet": "Not Set",
-    "Requests Today": "Requests Today",
     "WeekRequests": "Weekly requests statistics",
     "WeekBandwidth": "Weekly bandwidth statistics",
     "Creation Time": "Creation Time",
@@ -103,6 +102,7 @@
     "maxChar": "Within 16 characters",
     "projectName": "Project Name",
     "rateLimitLabel": "Per Second Requests Rate-Limiting",
+    "bandwidthLimitLabel": "Per Day Total Bandwidth",
     "dailyTotalReqLable": "Per Day Total Requests",
     "invalidLimitReqs": "Recent Invalid / Rate Limited Requests",
     "Method": "Method",
@@ -142,7 +142,19 @@
     "copy": "Click to copy",
     "copied": "Copied",
     "invalidName": "Please enter 4 - 16 digits of the alphabet",
-    "invalidNumber": "Please input a number"
+    "invalidNumber": "Please input a number",
+    "MaxNum": "Elara provides 10 free projects for developers, if you need customization, please contact us",
+    "MaxBandwidth": "The total daily bandwidth limit is 10GB",
+    "GetLastestData": "Get the latest data",
+    "RequestNumTip": "you can customize the daily request limit on the \"Settings\" page",
+    "BandwidthNumTip": "you can customize the daily bandwidth limit on the \"Settings\" page",
+    "EmptyConclusion": "Elara provides Polkadot developers with free, instant and scalable blockchain API access services.",
+    "EmptyUsageTitle": "Start Using",
+    "EmptyParagraph1": "1. Click \"Create New Project\"",
+    "EmptyParagraph2": "2. Enter the project name and select the type of chain",
+    "EmptyParagraph3": "3. Copy the endpoint link and send the API request",
+    "EmptyParagraph4": "4. View statistics on the \"Requests\" page of the project",
+    "EmptyParagraph5": "5. Modify project restrictions on the \"Settings\" page of the project"
   },
 
   "modal": {

diff --git a/src/config/locales/zh-cn.json b/src/config/locales/zh-cn.json
@@ -1,13 +1,14 @@
 {
   "home": "首页",
-  "dashboard": "概览",
+  "dashboard": "看板",
   "contactUs": "联系我们",
   "Documentation": "API 文档",
 
   "bannerTitle1": "波卡生态的公共API接入服务",
   "bannerTitle2": "Elara向波卡开发者提供免费、即时和可扩展的区块链API接入服务，包括Polkadot、Kusama等",
   "bannerBtn": "开始免费使用",
   "Cumulative": "累计请求数",
+  "TotalBandwidth": "累计带宽",
 
   "Product": "服务优势",
   "Easy": "简单易用",
@@ -26,13 +27,12 @@
   "AllNetworks1": "",
   "1000000requests": "每个账户每天 ",
   "1000000requests1": "1,000,000 次请求 ",
-  "10projects": "10 个项目",
   "Direct": "直接客户支持",
   "NeedMore": "需要更多的服务？",
   "YouCan": "您可以通过以下渠道联系我们，我们将为您提供定制方案",
   "No Data": "暂无数据",
   "We provide you": "我们为您提供",
-  "10 Projects": "10 个免费项目",
+  "Projects": "个免费项目",
   "All networks in the Polkadot ecosystem": "波卡生态所有网络",
   "Public API Access Service for Polkadot Ecosystem": "波卡生态的公共API接入服务",
   "Contact & Subscription": "联系和订阅",
@@ -78,6 +78,7 @@
   },
 
   "Details": {
+    "Refresh": "刷新",
     "Request": "请求数",
     "Country": "国家",
     "OfTotal": "占比",
@@ -90,7 +91,6 @@
     "Requests": "请求数据",
     "Settings": "设置",
     "NotSet": "未设置",
-    "Requests Today": "今日请求数",
     "WeekRequests": "周请求数统计",
     "WeekBandwidth": "周带宽统计",
     "Creation Time": "创建时间",
@@ -101,6 +101,7 @@
     "maxChar": "16个字符内",
     "projectName": "项目名称",
     "rateLimitLabel": "每秒请求数上限",
+    "bandwidthLimitLabel": "每日带宽上限",
     "dailyTotalReqLable": "每日请求总数上限",
     "invalidLimitReqs": "无效/限速 请求数",
     "Method": "方法",
@@ -140,7 +141,19 @@
     "copy": "点击复制到剪切板",
     "copied": "已复制",
     "invalidName": "请输入4-16个英文字符",
-    "invalidNumber": "请输入数字"
+    "invalidNumber": "请输入数字",
+    "MaxNum": "Elara为开发者提供10个免费项目，如果你需要定制，请联系我们",
+    "MaxBandwidth": "每天的带宽限制为10GB",
+    "GetLastestData": "获取最新数据",
+    "RequestNumTip": "可在“设置”页自定义每日请求上限",
+    "BandwidthNumTip": "可在“设置”页自定义每日带宽上限",
+    "EmptyConclusion": "Elara向波卡开发者提供免费、即时和可扩展的区块链API接入服务",
+    "EmptyUsageTitle": "开始使用",
+    "EmptyParagraph1": "1. 点击“新建项目”",
+    "EmptyParagraph2": "2. 输入项目名称，选择链的类型",
+    "EmptyParagraph3": "3. 复制Endpoint链接，发送API请求",
+    "EmptyParagraph4": "4. 在 项目的“请求数据”页面查看统计信息",
+    "EmptyParagraph5": "5. 在 项目的“设置”页面修改项目限制"
   },
 
   "modal": {

diff --git a/src/config/origin.ts b/src/config/origin.ts
@@ -1,13 +1,13 @@
-let API_DOMAIN = '';
-let ENDPOINTS_URL = '';
-let WSS_ENDPOINTS_URL = '';
-console.log('process.env.REACT_APP_NODE_ENV', process.env.REACT_APP_NODE_ENV);
+let API_DOMAIN = ''
+let ENDPOINTS_URL = ''
+let WSS_ENDPOINTS_URL = ''
+console.log('process.env.REACT_APP_NODE_ENV', process.env.REACT_APP_NODE_ENV)
 if (process.env.REACT_APP_NODE_ENV === 'development') {
-  API_DOMAIN = '/accountApi/api';
+  API_DOMAIN = '/accountApi/api'
   // API_DOMAIN = 'https://elara.patract.io';
 
-  ENDPOINTS_URL = "https://api.elara.patract.io";
-  WSS_ENDPOINTS_URL = "wss://api.elara.patract.io";
+  ENDPOINTS_URL = 'https://test-elara2.patract.cn/api'
+  WSS_ENDPOINTS_URL = 'wss://test-service.elara2.patract.cn'
 } else if (process.env.REACT_APP_NODE_ENV === 'pre-production') {
   API_DOMAIN = 'https://test-elara2.patract.cn/api'
 
@@ -20,8 +20,4 @@ if (process.env.REACT_APP_NODE_ENV === 'development') {
   WSS_ENDPOINTS_URL = 'wss://service.elara.patract.io'
 }
 
-export {
-  API_DOMAIN,
-  ENDPOINTS_URL,
-  WSS_ENDPOINTS_URL
-}
+export { API_DOMAIN, ENDPOINTS_URL, WSS_ENDPOINTS_URL }
diff --git a/src/core/data/api.ts b/src/core/data/api.ts
@@ -10,9 +10,7 @@ import {
 import { Menu } from '../types/classes/chain'
 import { httpPost, httpGet } from './http'
 import { API_DOMAIN } from '../../config/origin'
-import {
-  StatT,
-} from '../types/classes/stat'
+import { StatT } from '../types/classes/stat'
 import axios from 'axios'
 
 /**
@@ -26,7 +24,7 @@ export const apiLogin = async (): Promise<User> => {
       name: string
       status: string
       level: string
-      limit: { projectNum: number }
+      limit: { projectNum: number; bwDayLimit: number }
     }
   }>(`${API_DOMAIN}/auth/login`)
 
@@ -36,6 +34,7 @@ export const apiLogin = async (): Promise<User> => {
     level: res.user.level,
     maxProjectNum: res.user.limit.projectNum,
     projectNum: res.projectNum,
+    bwDayLimit: res.user.limit.bwDayLimit,
   }
 }
 
@@ -52,28 +51,27 @@ export const apiCreateProject = async (data: ProjectCreatDto) =>
   await httpPost<Project>(`${API_DOMAIN}/project/create`, data)
 
 /**
- * project delete 
+ * project delete
  */
-export const apiDelProject = async (data: {
-  id: string
-}) => await httpPost<unknown>(`${API_DOMAIN}/project/delete`, data)
+export const apiDelProject = async (data: { id: string }) =>
+  await httpPost<unknown>(`${API_DOMAIN}/project/delete`, data)
 
 /**
  * total requests on homepage
  */
 export const apiGetTotalStatics = async () =>
-  await httpGet<{ bindwidth: number; request: number }>(
+  await httpGet<{ bandwidth: number; request: number }>(
     `${API_DOMAIN}/public/stat`
   )
 
 /**
- * requests by recent 30 days 
+ * requests by recent 30 days
  */
 export const apiGetLast30DaysRequests = async () =>
-  await httpPost<{ stats: { request: number; bandwidth: number }[]; timeline: string[] }>(
-    `${API_DOMAIN}/public/days`,
-    { days: 30 }
-  )
+  await httpPost<{
+    stats: { request: number; bandwidth: number }[]
+    timeline: string[]
+  }>(`${API_DOMAIN}/public/days`, { days: 30 })
 
 /**
  * 控制台菜单数据
@@ -143,12 +141,12 @@ export const apiFetchCountry = async (data: {
   page: number
   chain: string
   pid: string
-}) =>  await httpPost<CountryTableDataExt>(
+}) =>
+  await httpPost<CountryTableDataExt>(
     `${API_DOMAIN}/stat/project/country`,
     data
   )
 
-
 /**
  * project name 更新
  */
@@ -164,8 +162,8 @@ export const apiUpdateProjectName = async (data: {
  */
 export const apiUpdateProjectLimit = async (data: {
   id: string
-  reqSecLimit: number
   reqDayLimit: number
+  bwDayLimit: number
 }) => await httpPost<unknown>(`${API_DOMAIN}/project/update/limit`, data)
 
 /**

diff --git a/src/core/types/classes/project.ts b/src/core/types/classes/project.ts
@@ -14,8 +14,9 @@ export class Project {
   bw: number
   delay: number
   inReqCnt: number
-  reqSecLimit: string
-  reqDayLimit: string
+  reqSecLimit: number
+  reqDayLimit: number
+  bwDayLimit: number
 }
 export interface RangeChartData {
   timeline: string[]
@@ -53,7 +54,10 @@ export interface CountryTableDataExt {
 
 export interface CallMethodsData {
   total: number
-  list: {method: string, value: number}[]
+  list: { method: string; value: number }[]
 }
 
-export type CallMethodsDataExt = Record<keyof typeof RequestType, CallMethodsData>
+export type CallMethodsDataExt = Record<
+  keyof typeof RequestType,
+  CallMethodsData
+>