diff --git a/src/components/GovernancePage/index.js b/src/components/GovernancePage/index.js index df26deea..1e9e2b0f 100644 --- a/src/components/GovernancePage/index.js +++ b/src/components/GovernancePage/index.js @@ -1,23 +1,18 @@ -import React, { Component } from 'react' +import React, { Component } from 'react'; import { withRouter } from 'react-router-dom' import { numberWithCommas, convertNumberToText } from '../../utils/utils' import { IconConverter, IconAmount } from 'icon-sdk-js' +import { getLastBlock, getStepPrice, getPublicTreasury, prepList, getPRepsRPC, getTotalSupply } from '../../redux/store/iiss' +import { getPReps, getIISSInfo, icxCall } from '../../redux/api/restV3'; import { - getLastBlock, - getStepPrice, - getPublicTreasury, - prepList, - getPRepsRPC, - getTotalSupply, - getPRep -} from '../../redux/store/iiss' -import { getPReps, getIISSInfo, icxCall } from '../../redux/api/restV3' -import { LoadingComponent } from '../../components' + LoadingComponent, +} from '../../components' import { POPUP_TYPE } from '../../utils/const' -import { getTrackerApiUrl } from '../../redux/api/restV3/config' -import { GetAddressForPrepList } from '../../utils/const' +import { getTrackerApiUrl } from '../../redux/api/restV3/config'; +import { GetAddressForPrepList } from '../../utils/const'; class GovernancePage extends Component { + state = { activePreps: [], totalSupply: 0, @@ -35,37 +30,37 @@ class GovernancePage extends Component { blackChecked: false, allPrep: [], blackPrep: [], - lastBlockPrepName: '', + lastBlockPrepName: "", search: '', - loading: true, + loading: true } checkedState = {} - getAdditionalData = async (method) => { - const network = await getTrackerApiUrl() - const address = GetAddressForPrepList[network] - const params = { - to: address, - dataType: 'call', - data: { - method: method, - }, + getAdditionalData=async method=>{ + const network=await getTrackerApiUrl() + const address=GetAddressForPrepList[network] + const params={ + to:address, + dataType:'call', + data:{ + method:method + } } - const response = await icxCall(params) - return response + const response = await icxCall(params); + return response; } - governanceData = [] + governanceData=[]; statusList = [] - async componentWillMount() { + async componentWillMount(){ // our endpoints - this.governanceData = await getPReps() + this.governanceData = await getPReps(); this.publicTreasury = await getPublicTreasury() } async componentDidMount() { - const { data: preps } = await getPReps() - const { totalStake: totalStakedLoop, totalDelegated: totalVotedLoop } = await getPRepsRPC() + const { data: preps } = await getPReps(); + const {totalStake: totalStakedLoop, totalDelegated: totalVotedLoop } = await getPRepsRPC() const lastBlock = await getLastBlock() const stepPriceLoop = await getStepPrice() const _allPrep = await prepList() @@ -74,60 +69,27 @@ class GovernancePage extends Component { const total_supply = await getTotalSupply() const icxSupply = Number(total_supply / Math.pow(10, 18)) - // Fetch commission-related data for each prep in allPrep array - const commissionDataPromises = _allPrep.map(async (prep) => { - const commissionData = await getPRep(prep.address) - return { [prep.address]: commissionData } - }) - - // Wait for all commission data promises to resolve - const commissionDataArray = await Promise.all(commissionDataPromises); - - // Combine commission data for each prep into a single object - const commissionData = commissionDataArray.reduce((acc, data) => ({ ...acc, ...data }), {}); - const { height, peer_id } = lastBlock || {} - const allPrep = (_allPrep || []).map((prep) => { - const index = preps.findIndex((p) => prep.address === p.address) + const allPrep = (_allPrep || []).map(prep => { + const index = preps.findIndex(p => prep.address === p.address) if (index !== -1) { - prep.stake = IconAmount.of(preps[index].stake || 0x0, IconAmount.Unit.LOOP) - .convertUnit(IconAmount.Unit.ICX) - .value.toString(10) - prep.unstake = IconAmount.of(preps[index].unstake || 0x0, IconAmount.Unit.LOOP) - .convertUnit(IconAmount.Unit.ICX) - .value.toString(10) + prep.stake = IconAmount.of(preps[index].stake || 0x0, IconAmount.Unit.LOOP).convertUnit(IconAmount.Unit.ICX).value.toString(10) + prep.unstake = IconAmount.of(preps[index].unstake || 0x0, IconAmount.Unit.LOOP).convertUnit(IconAmount.Unit.ICX).value.toString(10) } prep.balance = Number(prep.balance) return prep }) - const blackPrep = (_blackPrep || []).map((bp) => { + const blackPrep = (_blackPrep || []).map(bp => { bp.grade = 3 bp.status = bp.penaltyStatus return bp }) - const lastPrepIndex = allPrep.findIndex((prep) => prep.address === peer_id) - const lastBlockPrepName = - lastPrepIndex === -1 ? '' : `#${lastPrepIndex + 1} ${allPrep[lastPrepIndex].name}` + const lastPrepIndex = allPrep.findIndex(prep => prep.address === peer_id) + const lastBlockPrepName = lastPrepIndex === -1 ? "" : `#${lastPrepIndex+1} ${allPrep[lastPrepIndex].name}` const totalSupply = Number(icxSupply || 0) - const totalStaked = !totalStakedLoop - ? 0 - : IconConverter.toNumber( - IconAmount.of(totalStakedLoop || 0x0, IconAmount.Unit.LOOP) - .convertUnit(IconAmount.Unit.ICX) - .value.toString(10) - ) - const totalVoted = !totalVotedLoop - ? 0 - : IconConverter.toNumber( - IconAmount.of(totalVotedLoop || 0x0, IconAmount.Unit.LOOP) - .convertUnit(IconAmount.Unit.ICX) - .value.toString(10) - ) - const stepPrice = !stepPriceLoop - ? 0 - : IconAmount.of(stepPriceLoop || 0x0, IconAmount.Unit.LOOP) - .convertUnit(IconAmount.Unit.ICX) - .value.toString(10) + const totalStaked = !totalStakedLoop ? 0 : IconConverter.toNumber(IconAmount.of(totalStakedLoop || 0x0, IconAmount.Unit.LOOP).convertUnit(IconAmount.Unit.ICX).value.toString(10)) + const totalVoted = !totalVotedLoop ? 0 : IconConverter.toNumber(IconAmount.of(totalVotedLoop || 0x0, IconAmount.Unit.LOOP).convertUnit(IconAmount.Unit.ICX).value.toString(10)) + const stepPrice = !stepPriceLoop ? 0 : IconAmount.of(stepPriceLoop || 0x0, IconAmount.Unit.LOOP).convertUnit(IconAmount.Unit.ICX).value.toString(10) const IISSData = await getIISSInfo() this.setState({ @@ -140,54 +102,63 @@ class GovernancePage extends Component { allPrep, blackPrep, lastBlockPrepName, - Ivoter: IISSData.variable.Ivoter, + // Ivoter: IISSData.variable.Ivoter, + Iwage: IISSData.variable.Iwage, Irelay: IISSData.variable.Irelay, Icps: IISSData.variable.Icps, Iglobal: Number(IISSData.variable.Iglobal) / Math.pow(10, 18), Iprep: IISSData.variable.Iprep, - commissionData, + }) } - handleChange = (e) => { + handleChange = e => { const { type, value } = e.target - switch (type) { + switch(type) { case 'checkbox': if (value === 'main') { this.setState({ mainChecked: !this.state.mainChecked, blackChecked: false, }) - } else if (value === 'sub') { + } + else if (value === 'sub') { this.setState({ subChecked: !this.state.subChecked, blackChecked: false, }) - } else if (value === 'rest') { + } + else if (value === 'rest') { this.setState({ restChecked: !this.state.restChecked, blackChecked: false, }) - } else if (value === 'black') { + } + else if (value === 'black') { if (this.state.blackChecked) { this.setState({ blackChecked: false, ...this.checkedState, }) - } else { - const { mainChecked, subChecked, restChecked } = this.state + } + else { + const { + mainChecked, + subChecked, + restChecked + } = this.state this.checkedState = { mainChecked, subChecked, - restChecked, + restChecked } this.setState({ blackChecked: true, mainChecked: false, subChecked: false, - restChecked: false, + restChecked: false }) } } @@ -199,10 +170,10 @@ class GovernancePage extends Component { } } getGovernanceStatus = (address) => { - let result = false - this.governanceData.data.forEach((item) => { - if (item.address === address) { - result = true + let result =false; + this.governanceData.data.forEach(item=>{ + if(item.address===address){ + result = true; } }) return result @@ -225,362 +196,162 @@ class GovernancePage extends Component { mainChecked, subChecked, restChecked, - blackChecked, - commissionData, + blackChecked } = this.state - const icxPublicTreasuryStr = this.state.supplyMetrics - ? numberWithCommas( - Math.floor(this.state.supplyMetrics.data.circulating_supply / Math.pow(10, 18)) - ) - : 0 - const totalStakedRate = !totalSupply ? '-' : (totalStaked / totalSupply) * 100 - const totalVotedRate = !totalSupply ? '-' : (totalVoted / totalSupply) * 100 + const icxPublicTreasuryStr = this.state.supplyMetrics ? numberWithCommas(Math.floor(this.state.supplyMetrics.data.circulating_supply / Math.pow(10, 18))) : 0; + const totalStakedRate = !totalSupply ? '-' : totalStaked / totalSupply * 100 + const totalVotedRate = !totalSupply ? '-' : totalVoted / totalSupply * 100 - const list = blackChecked - ? blackPrep - : allPrep.filter((p) => { - return ( - (mainChecked && (p.grade === 0 || p.grade === '0x0')) || - (subChecked && (p.grade === 1 || p.grade === '0x1')) || - (restChecked && (p.grade === 2 || p.grade === '0x2')) - ) - }) - const searched = !search - ? list.sort((a, b) => b.power - a.power) - : list.filter( - (prep) => - prep.name.toLowerCase().includes(search.toLowerCase().trim()) || - prep.address.toLowerCase().includes(search.trim()) - ) + const list = blackChecked ? blackPrep : allPrep.filter(p => { + return (mainChecked && (p.grade === 0 || p.grade === '0x0')) || (subChecked && (p.grade === 1 || p.grade === '0x1')) || (restChecked && (p.grade === 2 || p.grade === '0x2')) + }) + + const searched = !search ? list.sort((a,b) => b.power - a.power) : list.filter(prep => prep.name.toLowerCase().includes(search.toLowerCase().trim()) || prep.address.toLowerCase().includes(search.trim())) return ( -
-
- {loading && } - {!loading && ( -
-

- Governance - { - this.props.setPopup({ type: POPUP_TYPE.ABOUT }) - }}> - About Governance - -

-
-
-
- - Total Supply :{' '} - {convertNumberToText(totalSupply, 0)} - - - Staked :{' '} - {convertNumberToText(totalStaked, 0)} - - - Voted :{' '} - {convertNumberToText(totalVoted, 0)} - -
-
-
- - 100% - -
-
- {totalStakedRate > 8 && ( - - {totalStakedRate.toFixed(2)} - % - - )} -
-
- {totalVotedRate > 8 && ( - - {totalVotedRate.toFixed(2)} - % - - )} -
-
-
-

- Public Treasury (ICX) -

-

- - {numberWithCommas( - Number( - this.publicTreasury / Math.pow(10, 18) - ).toFixed(0) - )} - -

-
-
-
    -
  • -
    -

    - Voter Reward Rate (%) -

    -

    - {Number(this.state.Ivoter)} -

    -
    -
    • -
  • -
    -

    - Prep Reward Rate (%) -

    -

    - {Number(this.state.Iprep)} -

    -
    -
    • -
  • -
    -

    - CPS Reward Rate (%) -

    -

    - {Number(this.state.Icps)} -

    -
    -
    • -
  • -
    -

    - Monthly Inflation (ICX) -

    -

    - {numberWithCommas(this.state.Iglobal)} -

    -
    -
    • -
  • -
    -

    - Last Block - {lastBlockPrepName && ( - - {lastBlockPrepName} - - )} -

    -

    - - {numberWithCommas( - IconConverter.toNumber(height) - )} - -

    -
    -
    • -
-
-
- )} -
-
- {loading && } - {!loading && ( -
-
-
- - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - - - - - {!blackChecked && } - {!blackChecked && } - - - - - - - {searched.map((prep, index) => ( - - ))} - -
Add - Rank ↓ - Name - Governance - { - this.props.setPopup({ - type: POPUP_TYPE.GOVERNANCE, - }) - }}> - - - Sponsored -
- Projects - - { - this.props.setPopup({ - type: POPUP_TYPE.SPONSOR, - }) - }}> - 		- Productivity -
- - Produced /
- (Produced + Missed) - - 		BondedTotal VotesPower - Monthly -
Rewards -
- ICX / USD - 		- Commission %
- (Max Change /
- Max Rate) - -
-
-

- The detailed informations of P-Rep will be updated every UTC - 00:00, UTC 06:00, UTC 12:00, and UTC 18:00. Please check the URL - of the submitted JSON file for each P-Rep. -

-
-
- )} -
-
+
+
+ {loading && } + {!loading &&
+

Governance {this.props.setPopup({ type: POPUP_TYPE.ABOUT })}}>About Governance

+
+
+
Total Supply : {convertNumberToText(totalSupply, 0)}Staked : {convertNumberToText(totalStaked, 0)}Voted : {convertNumberToText(totalVoted, 0)}
+
+
100%
+
{totalStakedRate > 8 && {totalStakedRate.toFixed(2)}%}
+
{totalVotedRate > 8 && {totalVotedRate.toFixed(2)}%}
+
+
+

Public Treasury (ICX)

+

{numberWithCommas(Number(this.publicTreasury / Math.pow(10, 18)).toFixed(0))}

+ + +
+
+
    +
  • +
    +

    Prep Reward Rate (%)

    +

    {Number(this.state.Iprep/100)}

    +
    +
    • +
  • +
    +

    CPS Reward Rate (%)

    +

    {Number(this.state.Icps/100)}

    +
    +
    • +
  • +
    +

    Prep Wage (%) +

    +

    {Number(this.state.Iwage)}

    +
    +
    • +
  • +
    +

    Monthly Inflation (ICX)

    +

    {numberWithCommas(Number(this.state.Iglobal))}

    +
    +
    • +
  • +
    +

    Last Block{lastBlockPrepName && {lastBlockPrepName}}

    +

    {numberWithCommas(IconConverter.toNumber(height))}

    +
    +
    • +
+
+
} +
+
+ {loading && } + {!loading &&
+
+
+ + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + {!blackChecked && } + {!blackChecked && } + + + + + + + {searched.map((prep, index) => ( + + ))} + +
AddRank ↓NameGovernance{ + this.props.setPopup({ + type:POPUP_TYPE.GOVERNANCE + }) + }}>Sponsored
Projects{ + this.props.setPopup({type:POPUP_TYPE.SPONSOR}) + }}>		Productivity
Produced /
(Produced + Missed)		BondedTotal VotesPowerMonthly
Rewards
ICX / USD
+
+

+ The detailed informations of P-Rep will be updated every UTC 00:00, UTC 06:00, UTC 12:00, and UTC 18:00. Please check the URL of the submitted JSON file for each P-Rep. +

+
+
} +
+
) } } class TableRow extends Component { + state = { logoError: false, loaded: false, @@ -588,52 +359,37 @@ class TableRow extends Component { } loadImage = () => { - this.setState({ loaded: true }) + this.setState({loaded: true}) } - getBadge = (grade, node_state) => { - const className = - node_state === 'Synced' - ? 'prep-tag' - : node_state === 'Inactive' - ? 'prep-tag off' - : 'prep-tag block-synced' - switch (grade) { + getBadge = (grade, node_state ) => { + const className = node_state === 'Synced' ? 'prep-tag' : node_state === 'Inactive'? 'prep-tag off' : 'prep-tag block-synced' + switch(grade) { case 0: case '0x0': - return ( - - Main P-Rep - - ) + return Main P-Rep case 1: case '0x1': - return ( - - Sub P-Rep - - ) + return Sub P-Rep case 2: case '0x2': - return ( - - Candidate - - ) + return Candidate default: return null } } - goAddress = (address) => { + goAddress = address => { this.props.history.push('/address/' + address) } onError = () => { this.setState({ logoError: true }) } loadImage = () => { - this.setState({ loaded: true }) + this.setState({loaded: true}) } render() { - const { logoError } = this.state + const { + logoError + } = this.state const { totalVoted, rrep, @@ -642,17 +398,9 @@ class TableRow extends Component { blackChecked, index, governanceStatus, - commissionData, + statusData, } = this.props - - const currentPrepCommissionData = this.props.commissionData[prep.address] || {}; - const { - commissionRate, - maxCommissionRate, - maxCommissionChangeRate, - } = currentPrepCommissionData - const { // rank, logo_256, @@ -669,118 +417,46 @@ class TableRow extends Component { node_state, logo, status, - reward_monthly, - reward_monthly_usd, + reward_monthly, reward_monthly_usd, sponsored_cps_grants, cps_governance, bonded, - power, + power // balance, // unstake, } = prep - const sugComRate = - (((1 / totalVoted) * 100 * 12 * irep) / - 2 / - ((rrep * 3) / 10000 + ((1 / totalVoted) * 100 * 12 * irep) / 2)) * - 100 - const productivity = - !total_blocks || Number(total_blocks) === 0 - ? 'None' - : Number(validated_blocks) === 0 - ? '0.00%' - : `${((Number(validated_blocks) / Number(total_blocks)) * 100).toFixed(2)}%` + const sugComRate = ( (1 / totalVoted * 100 * 12 * irep / 2) / ((rrep * 3 / 10000) + 1 / totalVoted * 100 * 12 * irep / 2) ) * 100; + const productivity = !total_blocks || Number(total_blocks) === 0 ? 'None' : (Number(validated_blocks) === 0 ? '0.00%' : `${(Number(validated_blocks) / Number(total_blocks) * 100).toFixed(2)}%`) const prepVoted = IconConverter.toNumber(delegated || 0) const votedRate = !totalVoted ? 0 : prepVoted / totalVoted const badge = this.getBadge(grade, prep.node_state) const rank = index + 1 - return ( - - - {rank || '-'} - - 2 || grade === '0x3' ? 'black' : 'on'}> - - - {cps_governance ? '✓' : '-'} - {sponsored_cps_grants ? sponsored_cps_grants : 0} - - {productivity !== 'None' ? productivity : '0.00%'} - - {numberWithCommas(Number(validated_blocks))}/ {' '} - {numberWithCommas(Number(total_blocks))} - - - {!blackChecked && ( - - {numberWithCommas(Number(bonded / Math.pow(10, 18)).toFixed())} - - )} - {!blackChecked && ( - - {Number(votedRate * 100).toFixed(1)}% -
- {numberWithCommas(prepVoted.toFixed(0))} -
- - )} - {numberWithCommas(Number(power / Math.pow(10, 18)).toFixed())} - - {numberWithCommas(Number(reward_monthly).toFixed())} - {numberWithCommas(Number(reward_monthly_usd).toFixed())} - - - {isNaN(commissionRate) && isNaN(maxCommissionChangeRate) && isNaN(maxCommissionRate) ? ( - '-' - ) : ( - <> - - - {isNaN(commissionRate) ? '-' : numberWithCommas(Number(commissionRate / 100).toFixed())} - - -
- - {isNaN(maxCommissionChangeRate) ? '-' : numberWithCommas(Number(maxCommissionChangeRate / 100).toFixed())}/{' '} - {isNaN(maxCommissionRate) ? '-' : numberWithCommas(Number(maxCommissionRate / 100).toFixed())} - - - )} - - + return( + + {rank || '-'} + 2 || grade === '0x3') ? 'black' : 'on'}> + + + {cps_governance ?'✓':'-'} + {sponsored_cps_grants ? sponsored_cps_grants : 0} + { productivity !== "None" ? productivity : "0.00%"}{numberWithCommas(Number(validated_blocks))} / {numberWithCommas(Number(total_blocks))} + {!blackChecked && {numberWithCommas(Number(bonded / Math.pow(10, 18)).toFixed())}} + {!blackChecked && {Number(votedRate*100).toFixed(1)}% +
{numberWithCommas((prepVoted).toFixed(0))}
} + {numberWithCommas(Number(power / Math.pow(10, 18)).toFixed())} + {numberWithCommas(Number(reward_monthly).toFixed())} + {numberWithCommas(Number(reward_monthly_usd).toFixed())} + ) } } -export default withRouter(GovernancePage) +export default withRouter(GovernancePage);