Skip to content

Commit

Permalink
Merge pull request #987 from oraichain/feat/sort-validator
Browse files Browse the repository at this point in the history 
update sort validators mobile
  • Loading branch information
@haunv3
haunv3 authored Jun 20, 2024
2 parents 5df1669 + 83f62ff commit c4a65de
Showing 1 changed file with 116 additions and 114 deletions.
230 changes: 116 additions & 114 deletions src/components/ValidatorList/ValidatorCardList/ValidatorCardList.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
// @ts-nocheck
import React, {memo, useMemo} from "react";
import {NavLink} from "react-router-dom";
import React, { memo, useMemo } from "react";
import { NavLink } from "react-router-dom";
import classNames from "classnames/bind";
import consts from "src/constants/consts";
import {formatPercentage, formatInteger, formatOrai} from "src/helpers/helper";
import {computeTotalVotingPower} from "src/components/ValidatorList/ValidatorTable/ValidatorTable";
import { formatPercentage, formatInteger, formatOrai, groupAndShuffle } from "src/helpers/helper";
import { computeTotalVotingPower } from "src/components/ValidatorList/ValidatorTable/ValidatorTable";
import aiIcon from "src/assets/common/ai_ic.svg";
import {logoBrand} from "src/constants/logoBrand";
import {Progress} from "antd";
import { logoBrand } from "src/constants/logoBrand";
import { Progress } from "antd";
import Delegate from "src/components/common/Delegate";
import styles from "./ValidatorCardList.module.scss";
import "./style.css";
Expand All @@ -22,136 +22,138 @@ const getCumulativeShareCell = (previousValue, currentValue, totalValue) => {
return (
<div className={cx("cumulative-share-data-cell")}>
<div className={cx("graph")}>
<div className={cx("graph-previous")} style={{width: previousPercent + "%"}}></div>
<div className={cx("graph-current")} style={{left: previousPercent + "%", width: currentPercent + "%"}}></div>
<div className={cx("graph-previous")} style={{ width: previousPercent + "%" }}></div>
<div className={cx("graph-current")} style={{ left: previousPercent + "%", width: currentPercent + "%" }}></div>
</div>
<div className={cx("total-value")}>{totalPercent} %</div>
</div>
);
};

const ValidatorCardList = memo(({data = []}) => {
const ValidatorCardList = memo(({ data = [] }) => {
const totalVotingPower = useMemo(() => computeTotalVotingPower(data), [data]);
let previousVotingPower = 0;
return (
<div className='validator-card-list'>
{data?.map((item, index) => {
let currentVotingPower = 0;
let votingPowerDataCell = (
<div className={cx("voting-power-data-cell")}>
<div>-</div>
<div>- %</div>
</div>
);
if (item?.voting_power && totalVotingPower > 0) {
currentVotingPower = parseFloat(item.voting_power);
votingPowerDataCell = (
{groupAndShuffle(data, 5)
?.flat()
?.map((item, index) => {
let currentVotingPower = 0;
let votingPowerDataCell = (
<div className={cx("voting-power-data-cell")}>
<span>{formatInteger(currentVotingPower)}</span>
<span>{formatPercentage(currentVotingPower / totalVotingPower, 2)}%</span>
<div>-</div>
<div>- %</div>
</div>
);
}
if (item?.voting_power && totalVotingPower > 0) {
currentVotingPower = parseFloat(item.voting_power);
votingPowerDataCell = (
<div className={cx("voting-power-data-cell")}>
<span>{formatInteger(currentVotingPower)}</span>
<span>{formatPercentage(currentVotingPower / totalVotingPower, 2)}%</span>
</div>
);
}

const cumulativeShareDataCell = getCumulativeShareCell(previousVotingPower, currentVotingPower, totalVotingPower);
previousVotingPower += currentVotingPower;
const estAPR = item?.apr.toFixed(2);
const cumulativeShareDataCell = getCumulativeShareCell(previousVotingPower, currentVotingPower, totalVotingPower);
previousVotingPower += currentVotingPower;
const estAPR = item?.apr.toFixed(2);

const logoItem = logoBrand.find(it => item.operator_address === it.operatorAddress);
const logo = item?.image ? item?.image : logoItem;
const logoURL = logo ? (typeof logo === "object" ? logo.logo : logo) : false;
const validatorCardListItem = (
<div className={cx("validator-card-list-item")} key={"validator-card-list-item-" + index}>
<table>
<tbody>
<tr>
<td>
<div className={cx("item-title")}>Rank </div>
</td>
<td>
<div className={cx("item-link")}>{item?.rank ?? "-"}</div>
</td>
</tr>
const logoItem = logoBrand.find(it => item.operator_address === it.operatorAddress);
const logo = item?.image ? item?.image : logoItem;
const logoURL = logo ? (typeof logo === "object" ? logo.logo : logo) : false;
const validatorCardListItem = (
<div className={cx("validator-card-list-item")} key={"validator-card-list-item-" + index}>
<table>
<tbody>
<tr>
<td>
<div className={cx("item-title")}>Rank </div>
</td>
<td>
<div className={cx("item-link")}>{item?.rank ?? "-"}</div>
</td>
</tr>

<tr>
<td>
<div className={cx("item-title")}>Proposer</div>
</td>
<td>
{item?.moniker ? (
<NavLink className={cx("validator-data-cell")} to={`${consts.PATH.VALIDATORS}/${item.operator_address}`}>
{logoURL && <img alt='/' src={logoURL} width={32} height={32} className={cx("logo")} />}
{!logoURL && <div className={cx("logo-custom")}> {item.moniker.substring(0, 3).toUpperCase()} </div>}
{item.moniker}
</NavLink>
) : (
<div className={cx("item-link")}>-</div>
)}
</td>
</tr>
<tr>
<td>
<div className={cx("item-title")}>Proposer</div>
</td>
<td>
{item?.moniker ? (
<NavLink className={cx("validator-data-cell")} to={`${consts.PATH.VALIDATORS}/${item.operator_address}`}>
{logoURL && <img alt='/' src={logoURL} width={32} height={32} className={cx("logo")} />}
{!logoURL && <div className={cx("logo-custom")}> {item.moniker.substring(0, 3).toUpperCase()} </div>}
{item.moniker}
</NavLink>
) : (
<div className={cx("item-link")}>-</div>
)}
</td>
</tr>

<tr>
<td colSpan={2}>
<div className={cx("item-title")}>Voting power</div>
{votingPowerDataCell}
</td>
</tr>
<tr>
<td colSpan={2}>
<div className={cx("item-title")}>Voting power</div>
{votingPowerDataCell}
</td>
</tr>

<tr>
<td colSpan={2}>
<div className={cx("item-title")}>Cumulative Share %</div>
{cumulativeShareDataCell}
</td>
</tr>
<tr>
<td colSpan={2}>
<div className={cx("item-title")}>Cumulative Share %</div>
{cumulativeShareDataCell}
</td>
</tr>

<tr>
<td>
<div className={cx("item-title")}>Uptime</div>
<div className={cx("item-text")}>
<div>{item?.uptime ? formatPercentage(item.uptime, 2) + "%" : "-"}</div>
<div>
{item?.uptime && (
<Progress
percent={formatPercentage(item.uptime, 2)}
showInfo={false}
strokeColor={formatPercentage(item.uptime, 2) === 100 ? "#37cc6e" : "#7664E4"}
trailColor='#bfbfbf'
/>
)}
<tr>
<td>
<div className={cx("item-title")}>Uptime</div>
<div className={cx("item-text")}>
<div>{item?.uptime ? formatPercentage(item.uptime, 2) + "%" : "-"}</div>
<div>
{item?.uptime && (
<Progress
percent={formatPercentage(item.uptime, 2)}
showInfo={false}
strokeColor={formatPercentage(item.uptime, 2) === 100 ? "#37cc6e" : "#7664E4"}
trailColor='#bfbfbf'
/>
)}
</div>
</div>
</div>
</td>
<td>
<div className={cx("item-title")}>Commisson</div>
<div className={cx("item-text")}>{item?.commission_rate ? formatPercentage(item.commission_rate, 2) + "%" : "-"}</div>
</td>
</tr>
</td>
<td>
<div className={cx("item-title")}>Commisson</div>
<div className={cx("item-text")}>{item?.commission_rate ? formatPercentage(item.commission_rate, 2) + "%" : "-"}</div>
</td>
</tr>

<tr>
<td>
<div className={cx("item-title")}>Self Bonded</div>
<div className={cx("voting-power-data-cell")}>
<span>{formatOrai(item?.self_bonded)}</span>
<span>ORAI</span>
</div>
</td>
<td>
<Delegate
a={item}
operatorAddress={item.operator_address}
openButtonText='Delegate'
delegateText={`Delegate for "${item?.moniker}"`}
estAPR={estAPR / 100}
/>
</td>
</tr>
</tbody>
</table>
</div>
);
<tr>
<td>
<div className={cx("item-title")}>Self Bonded</div>
<div className={cx("voting-power-data-cell")}>
<span>{formatOrai(item?.self_bonded)}</span>
<span>ORAI</span>
</div>
</td>
<td>
<Delegate
a={item}
operatorAddress={item.operator_address}
openButtonText='Delegate'
delegateText={`Delegate for "${item?.moniker}"`}
estAPR={estAPR / 100}
/>
</td>
</tr>
</tbody>
</table>
</div>
);

return validatorCardListItem;
})}
return validatorCardListItem;
})}
</div>
);
});
Expand Down

0 comments on commit c4a65de

Please sign in to comment.