Merge pull request #66 from kmildi/dev

fix about page buttons
Qrucial · Jun 8, 2023 · ecfeac7 · ecfeac7
2 parents 8998e48 + 0088f1e
commit ecfeac7
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/frontend/substrate-front-end-template/src/About.js b/frontend/substrate-front-end-template/src/About.js
@@ -1,7 +1,9 @@
 import React from 'react'
-import { Container, Segment, Header } from 'semantic-ui-react'
+import { useNavigate } from "react-router-dom";
+import { Container, Segment, Header, Button, Icon } from 'semantic-ui-react'
 
 export default function About(props) {
+  const navigate = useNavigate();
   return (
     <Container>
       <Segment raised style={{background: '#f7f7f7'}}>
@@ -15,10 +17,16 @@ export default function About(props) {
           <p>All audit reports are bound to the audited project packages themselves and results are verifiable and transparent. Audit reports can be challenged, so the better hackers can steal the reputation of others.</p>
           <Header color='blue' as='h3'>Request audit</Header>
           <p>Get QRD and request an automated audit, tools will run automatically. And someone might even do a free test audit for you in this beta instance, just for fun.</p>
-          <button primary onclick="window.location.href='/requestor';">-></button>
+          <Button icon primary size="tiny"
+            onClick={() => navigate('/requestor')}>
+            <Icon name="arrow right" />
+          </Button>
           <Header color='blue' as='h3'>Become an auditor</Header> 
           <p>Right now, in this test instance, anyone can "hack" him/herself to become an auditor. In the live system we'll add those who already proved their skills through CTF games, eg. CCTF.</p>
-          <button primary onclick="window.location.href='/auditor';">-></button>
+          <Button icon primary size="tiny"
+            onClick={() => navigate('/auditor')}>
+            <Icon name="arrow right" />
+          </Button>
           <Header color='blue' as='h3'>Become council member</Header> 
           <p>Council members overview the audit challenges and help the QDAO system to be fair play. Become a council member by hacking the beta system or asking on matrix.</p>
         </div>  

diff --git a/frontend/substrate-front-end-template/src/CouncilPage.js b/frontend/substrate-front-end-template/src/CouncilPage.js
@@ -29,7 +29,14 @@ export default function CouncilPage(props) {
   return (
     <div>
       {isCouncil === false && 
-        <div>You are not yet member of the council.</div>
+        <div>
+          <p>You are not member of the council yet.</p>
+          <p>
+            <a href="" target="_blank">
+              How to become a council member?
+            </a>
+          </p>
+        </div>
       }
       {isCouncil && (
         <div>

diff --git a/frontend/substrate-front-end-template/src/RequestAudit.js b/frontend/substrate-front-end-template/src/RequestAudit.js
@@ -5,7 +5,7 @@ import { useSubstrateState } from './substrate-lib'
 import useTxAndPost from './hooks/useTxAndPost'
 import useFormValidation from './hooks/useFormValidation'
 
-const DEFAULT_STAKE = 500
+export const DEFAULT_STAKE = 500
 
 export default function RequestAudit(props) {
   const [formState, setFormState] = useState({ url: '', hash: '', bounty: DEFAULT_STAKE, minAuditorScore: DEFAULT_STAKE })

diff --git a/frontend/substrate-front-end-template/src/Requestor.js b/frontend/substrate-front-end-template/src/Requestor.js
@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Grid, Segment, Header } from 'semantic-ui-react'
 import { useSubstrateState } from './substrate-lib'
-import RequestAudit from './RequestAudit'
+import { BalanceAnnotation } from './AccountSelector'
+import RequestAudit, { DEFAULT_STAKE } from './RequestAudit'
 import AuditList from './AuditList'
 
 export default function Requestor(props) {
@@ -49,6 +50,14 @@ export default function Requestor(props) {
   return (
     <Grid.Column>
       <RequestAudit changeList={changeList}/>
+      <Segment style={{background: '#f7f7f7'}}>
+        <p>The minimum stake for requesting an audit is {DEFAULT_STAKE} QRD.
+          <br></br>
+          Your current balance is: <BalanceAnnotation />
+          <br></br>
+          <a href="" target="_blank">How to get QRD?</a>
+        </p>
+      </Segment>
       {(myAudits.length > 0) &&
       <Segment>
         <Header as='h3' color='blue'>My requests</Header>