From 3fee0a666e6c7fabc877fa9a1c1201a8e7d9be02 Mon Sep 17 00:00:00 2001 From: saumyakaran Date: Fri, 29 May 2020 19:06:01 +0530 Subject: [PATCH 1/3] re-added help-center --- src/App.jsx | 19 +- src/components/FAQs.jsx | 181 +++++++----- src/components/HelpCenter.jsx | 8 +- src/components/NavBar.jsx | 4 +- src/components/guides/HowToStake.jsx | 421 ++++++++++----------------- src/index.js | 2 + 6 files changed, 278 insertions(+), 357 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index fdf521c..2ebb3ef 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { HashRouter as Router, Route, Redirect } from "react-router-dom"; +import { HashRouter as Router, Route } from "react-router-dom"; import { Flex, useColorMode } from "@chakra-ui/core"; import { Helmet } from "react-helmet"; import amplitude from "amplitude-js"; @@ -18,9 +18,9 @@ import { currency } from "./constants"; import Loader from "./Loader"; import getValidatorInfo from "./getValidatorInfo"; -import Testing from "./components/Testing"; -import getNominatorInfo from "./getNominatorInfo.js"; -import TxStatus from "./components/ConfirmationPage/TxStatus.js"; +import getNominatorInfo from "./getNominatorInfo"; +import TxStatus from "./components/ConfirmationPage/TxStatus"; +import HelpCenter from "./components/HelpCenter.jsx"; const AMPLITUDE_KEY = "1f1699160a46dec6cc7514c14cb5c968"; @@ -65,7 +65,7 @@ function App() { const handleTxBlock = block => { setTxBlock(block); - } + }; const handleSubmit = bool => { setSubmitted(bool); @@ -211,9 +211,16 @@ function App() { ( - + )} /> + + + diff --git a/src/components/FAQs.jsx b/src/components/FAQs.jsx index 2565ca9..964e7b4 100644 --- a/src/components/FAQs.jsx +++ b/src/components/FAQs.jsx @@ -11,82 +11,109 @@ import { } from '@chakra-ui/core' const data = [ - { - id: 1, - question: 'Why stake?', - answer: `10% inflation/year when the network launches\n 50% targeted active staking\n ~20% annual return`, - link: { - url: - 'https://wiki.polkadot.network/docs/en/learn-staking#why-stake', - content: 'Learn more about why stake', - isExternal: true, - }, - }, - { - id: 2, - question: 'What is Polkadot?', - answer: - 'Polkadot is a protocol that allows independent blockchains to exchange information.', - link: { - url: - 'https://wiki.polkadot.network/docs/en/learn-introduction#what-is-polkadot', - content: 'Learn more about Polkadot', - isExternal: true, - }, - }, - { - id: 3, - question: 'How does staking work in polkadot and what is NPoS?', - answer: - 'Polkadot uses NPoS (Nominated Proof-of-Stake) as its mechanism for selecting the validator set. It is designed with the roles of validators and nominators, to maximize chain security.', - link: { - url: - 'https://wiki.polkadot.network/docs/en/learn-staking#how-does-staking-work-in-polkadot', - content: 'Learn more about staking', - isExternal: true, - }, - }, - { - id: 4, - question: 'What are nominators?', - answer: - 'Nominators secure the relay chain by selecting good validators and staking DOTs.', - link: { - url: 'https://wiki.polkadot.network/docs/en/maintain-nominator', - content: 'Learn more about nominators', - isExternal: true, - }, - }, - { - id: 5, - question: 'What are validators?', - answer: - 'Validators secure the relay chain by staking DOTs, validating proofs from collators and participating in consensus with other validators.', - link: { - url: 'https://wiki.polkadot.network/docs/en/maintain-validator', - content: 'Learn more about validators', - isExternal: true, - }, - }, - { - id: 6, - question: 'How to stake?', - answer: - "In order to stake DOTs, the first step is to create stash and controller accounts. Next bond the DOTs of the stash account. Select the controller. Now you're ready to stake DOTs as a nominator!", - link: { - url: - 'https://wiki.polkadot.network/docs/en/maintain-guides-how-to-nominate-alexander', - content: 'Learn more about how to stake', - isExternal: true, - }, - }, - { - id: 7, - question: 'What does Polkadot Reward Calculator do?', - answer: - 'Polkadot Reward Calculator presents the Daily Earning Potential for each validator in a graphical format which makes it easy to visualize which validator would yield the highest return if the same amount is staked.', - }, -] + { + id: 1, + question: "Why stake?", + answer: `10% inflation/year when the network launches\n 50% targeted active staking\n ~20% annual return`, + link: { + url: "https://wiki.polkadot.network/docs/en/learn-staking#why-stake", + content: "Learn more about why stake", + isExternal: true + } + }, + { + id: 2, + question: "What is Polkadot?", + answer: + "Polkadot is a protocol that allows independent blockchains to exchange information.", + link: { + url: + "https://wiki.polkadot.network/docs/en/learn-introduction#what-is-polkadot", + content: "Learn more about Polkadot", + isExternal: true + } + }, + { + id: 4, + question: "What is Kusama?", + answer: + 'Kusama is a "canary network" for Polkadot, an early unaudited release of the code that is available first and holds real economic value.', + link: { + url: "https://wiki.polkadot.network/docs/en/kusama-index", + content: "Learn more about Kusama", + isExternal: true + } + }, + { + id: 3, + question: "How does staking work in polkadot and what is NPoS?", + answer: + "Polkadot uses NPoS (Nominated Proof-of-Stake) as its mechanism for selecting the validator set. It is designed with the roles of validators and nominators, to maximize chain security.", + link: { + url: + "https://wiki.polkadot.network/docs/en/learn-staking#how-does-staking-work-in-polkadot", + content: "Learn more about staking", + isExternal: true + } + }, + { + id: 4, + question: "What are nominators?", + answer: + "Nominators secure the relay chain by selecting good validators and staking KSM/DOTs.", + link: { + url: "https://wiki.polkadot.network/docs/en/maintain-nominator", + content: "Learn more about nominators", + isExternal: true + } + }, + { + id: 5, + question: "What are validators?", + answer: + "Validators secure the relay chain by staking KSM/DOTs, validating proofs from collators and participating in consensus with other validators.", + link: { + url: "https://wiki.polkadot.network/docs/en/maintain-validator", + content: "Learn more about validators", + isExternal: true + } + }, + { + id: 6, + question: "How to stake?", + answer: + "In order to stake KSM/DOTs, the first step is to create stash and controller accounts. Next bond the KSM/DOTs of the stash account. Select the controller. Now you're ready to stake KSM/DOTs as a nominator!", + link: { + url: + "https://wiki.polkadot.network/docs/en/maintain-guides-how-to-nominate-alexander", + content: "Learn more about how to stake", + isExternal: true + } + }, + { + id: 7, + question: "How are rewards calculated?", + answer: + "We take into account user's budget along with on-chain information about the validators like commission, total stake and previous era points to calculate expected earnings.", + link: { + url: + "https://github.com/buidl-labs/YieldScan/wiki/Rewards-Calculation-Logic", + content: "View rewards calculation logic wiki", + isExternal: true + } + }, + { + id: 8, + question: "How do you calculate the risk score for validators?", + answer: + "We on chain information about the validators like Own stake, Other stake, Number of backers, Number of slashes and Active validation time → no of eras validated to determine risk scores for validators.", + link: { + url: "https://github.com/buidl-labs/YieldScan/wiki/Risk-Score-Logic", + content: "View risk score logic wiki", + isExternal: true + } + } +]; class FAQs extends React.Component { render() { @@ -109,7 +136,7 @@ class FAQs extends React.Component { href={data.link.url} color="teal.500" isExternal={ - data.link.isExternal ? true : false + !!data.link.isExternal } > {data.link.content} diff --git a/src/components/HelpCenter.jsx b/src/components/HelpCenter.jsx index f73247b..87d3054 100644 --- a/src/components/HelpCenter.jsx +++ b/src/components/HelpCenter.jsx @@ -12,11 +12,11 @@ import { // Button, Link as ChakraLink, } from '@chakra-ui/core' -import FAQs from './FAQs' -import HowToStake from './guides/HowToStake' -import LogEvent from './LogEvent' import Helmet from 'react-helmet' -import Footer from './Footer' +import FAQs from './FAQs.jsx' +import HowToStake from './guides/HowToStake.jsx' +import LogEvent from './LogEvent' +import Footer from './Footer.jsx' export default function HelpCenter() { return ( diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index df4d8c9..018b8a1 100644 --- a/src/components/NavBar.jsx +++ b/src/components/NavBar.jsx @@ -70,7 +70,7 @@ export default () => { Returns Calculator - {/* + { > Help Center - */} + - - - How to stake - Guide - Help Center - Polka Analytics - + return ( + + + Yield Scan - How to stake - Guide - Help Center - - - - - How to stake? - - - A step by step guide on how to stake tokens on the{' '} - - Polkadot Network - - + + + + + How to stake? + + + A step by step guide on how to stake KSM on the{" "} + + Kusama Network + + - {/* Steps to stake */} - - {/* Step 1: Create a stash account */} - - 1 - - } - iconStyle={{ - background: '#319795', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }} - > - - Create a stash account - - - Stash account holds funds bonded for staking, but - delegates some functions to a Controller. To create a - stash account, head over to the Accounts section of the - Polkadot UI. Click on the “Add account” button. This - will open up a form with 5 fields. We’ll ignore the - fields under the advanced creation options for the - purpose of this tutorial. The first field asks for a - “Name”. Enter whatever name you want the account to - have. The second field contains an auto-generated - “mnemonic seed”. Write this phrase down and keep it - safe. Don’t share this with anyone as this will give - them access to the funds in your account. Next, you need - to choose a strong password. We highly recommend using a - password generator to generate a strong password. - Needless to say, keep this information safe and secret - as well. Now, click on the “Save” button. This will open - up a dialog which will ask you to save the backup file - for your account in a secure location along with your - password as this will allow you to restore your account. - Go ahead and click the “Create and backup account” - button. This will open a download dialog on your - browser. Choose a secure location to store this file and - click “Save File”. Your stash account is created and a - backup file has been stored your your selected location. - - + {/* Steps to stake */} + + {/* Step 1: Create a stash account */} + + 1 + + } + iconStyle={{ + background: "#19cc95", + display: "flex", + justifyContent: "center", + alignItems: "center" + }} + > + + Create a stash account + + + Stash account holds funds bonded for staking, but delegates some + functions to a Controller. To create a stash account, head over to + the Accounts section of the Polkadot UI. Click on the “Add account” + button. This will open up a form with 5 fields. We’ll ignore the + fields under the advanced creation options for the purpose of this + tutorial. The first field asks for a “Name”. Enter whatever name you + want the account to have. The second field contains an + auto-generated “mnemonic seed”. Write this phrase down and keep it + safe. Don’t share this with anyone as this will give them access to + the funds in your account. Next, you need to choose a strong + password. We highly recommend using a password generator to generate + a strong password. Needless to say, keep this information safe and + secret as well. Now, click on the “Save” button. This will open up a + dialog which will ask you to save the backup file for your account + in a secure location along with your password as this will allow you + to restore your account. Go ahead and click the “Create and backup + account” button. This will open a download dialog on your browser. + Choose a secure location to store this file and click “Save File”. + Your stash account is created and a backup file has been stored your + your selected location. + + - {/* Step 2: Create a controller account */} - - 2 - - } - iconStyle={{ - background: '#319795', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }} - > - - Create a controller account - - - Controller account acts on behalf of the Stash account, - signalling decisions about nominating and validating. It - sets preferences like payout account and commission. It - only needs enough funds to pay transaction fees. The - steps to create a controller account are identical to - creating a stash account. The only difference is in the - usage. For now, just repeat the steps that were used to - create the stash account. - - + {/* Step 2: Create a controller account */} + + 2 + + } + iconStyle={{ + background: "#19cc95", + display: "flex", + justifyContent: "center", + alignItems: "center" + }} + > + + Create a controller account + + + Controller account acts on behalf of the Stash account, signalling + decisions about nominating and validating. It sets preferences like + payout account and commission. It only needs enough funds to pay + transaction fees. The steps to create a controller account are + identical to creating a stash account. The only difference is in the + usage. For now, just repeat the steps that were used to create the + stash account. + + - {/* Step 3: Bond your tokens */} - - 3 - - } - iconStyle={{ - background: '#319795', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }} - > - - Bond your tokens - - - On the Polkadot UI, go to the “Staking” tab. On the - top-left of this section you’ll see a tab labelled - “Account actions”. Click on this tab. Next, click on the - button labelled “New stake” on your screen. This will - open up a form with fields for your stash account, - controller account, value to be bonded from the stash - account and payment destination. In the stash and - controller account fields, select your stash and - controller accounts respectively. In the “value bonded” - field, enter the amount of tokens that you would like to - stake in forthcoming rounds. Lastly, for the “payment - destination” select whichever payment destination you - like. If you’re unsure just click “Stash account - (increase amount at stake)”. Click on the “Bond” button. - This will open up an authenication form, enter the - password of your stash account and click “Sign and - Submit” button. Now, you’re bonded and ready to - nominate. - - - - {/* Step 4: Nominate a validator */} - - 4 - - } - iconStyle={{ - background: '#319795', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }} - > - - Nominate a validator - - - Go to the “Staking Overview” tab. You’ll see the list or - current validators on the left side. On the right side, - you’ll see a list of validators that have signalled - their intention to actively participate in the next era. - Pick one (or more) of these validators to nominate and - copy their address by clicking on the icon. Return to - the “Account Actions” screen and you will see your - bonded account. Click the “Nominate” button and fill in - the blank field with the address of the validator you - have chosen. Sign and submit the transaction, and you - are now nominating! - - - - {/* Step 5: Stop nominating */} - - 5 - - } - iconStyle={{ - background: '#319795', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }} - > - - Stop nominating - - - To stop nominating, click the “Stop nominating” button. - If you want to start nominating again, just repeat step - 4. -
- Congratulations! You’re now a nominator on the Polkadot - Network. - - - - {/* CTA: Ready to stake? */} - } - iconStyle={{ - background: '#319795', - }} - > - - Ready to stake? - - - Return to dashboard - - - - - ) + {/* CTA: Ready to stake? */} + } + iconStyle={{ + background: "#19cc95" + }} + > + + Ready to stake? + + + + For instructions on how to use the returns calculator, visit{" "} + + returns calculator wiki + + + + + + ); } diff --git a/src/index.js b/src/index.js index c501803..f4f8f52 100644 --- a/src/index.js +++ b/src/index.js @@ -20,6 +20,8 @@ const customTheme = { colors: { ...theme.colors, brand: { + 200: "#19cc95", + 500: "#19cc95", 900: "#19cc95" } } From 98c28aedd25edc849177ed93d7b25a27fa9cb37f Mon Sep 17 00:00:00 2001 From: saumyakaran <40575379+saumyakaran@users.noreply.github.com> Date: Fri, 29 May 2020 19:18:19 +0530 Subject: [PATCH 2/3] Update contact email --- src/components/HelpCenter.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HelpCenter.jsx b/src/components/HelpCenter.jsx index 87d3054..89684fc 100644 --- a/src/components/HelpCenter.jsx +++ b/src/components/HelpCenter.jsx @@ -81,7 +81,7 @@ export default function HelpCenter() { Can't find what you're looking for? Contact Us From 87b2f9ace448d1323fc64bcf69e8a5dc30b7bcce Mon Sep 17 00:00:00 2001 From: saumyakaran Date: Fri, 29 May 2020 19:28:13 +0530 Subject: [PATCH 3/3] kusama added to heading --- src/components/NetworkDetails/NetworkDetails.js | 2 +- src/components/ReturnsCalculator.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/NetworkDetails/NetworkDetails.js b/src/components/NetworkDetails/NetworkDetails.js index b6977ef..525b173 100644 --- a/src/components/NetworkDetails/NetworkDetails.js +++ b/src/components/NetworkDetails/NetworkDetails.js @@ -37,7 +37,7 @@ const NetworkDetails = (props: NetworkDetailsProps) => { - Network Details + Kusama Network Details { maxW='960px' > - Calculate your returns + Calculate your returns on Kusama {!suggestionsFound ? (