diff --git a/components/AllValidators.jsx b/components/AllValidators.jsx
index f92eb614..d55dc185 100644
--- a/components/AllValidators.jsx
+++ b/components/AllValidators.jsx
@@ -14,31 +14,81 @@ const AllValidators = ({
stakeDispatch,
totalTokens,
delegatedValidators,
+ sortParam = "tokens",
}) => {
const {
allValidatorsBonded,
- isLoadingValidatorsBonded,
- errorValidatorsBonded,
+ // isLoadingValidatorsBonded,
+ // errorValidatorsBonded,
} = useAllValidatorsBonded();
const {
allValidatorsUnbonded,
- isLoadingValidatorsUnbonded,
- errorValidatorsUnbonded,
+ // isLoadingValidatorsUnbonded,
+ // errorValidatorsUnbonded,
} = useAllValidatorsUnbonded();
// controller for onError
+ const allValidatorsBondedUsable = allValidatorsBonded.map((el, index) => ({
+ ...el,
+ rank: index + 1,
+ am_delegatedAmount: delegatedValidators?.find(
+ (element) => element?.operatorAddress == el?.operatorAddress
+ )?.delegatedAmount,
+ }));
+
+ const allValidatorsBondedUsableSorted = (sortBy) => {
+ let ascending = true;
+ let sortStr = `${sortBy}`;
+ if (sortBy[0] === "-") {
+ ascending = false;
+ let temp = sortBy.split("");
+ sortStr = "";
+ for (let i = 1; i < temp.length; i++) sortStr += temp[i];
+ }
+
+ switch (sortStr) {
+ case "name":
+ return allValidatorsBondedUsable?.sort((a, b) => {
+ let av = a?.description?.moniker.trim();
+ let bv = b?.description?.moniker.trim();
+ return ascending ? av?.localeCompare(bv) : bv?.localeCompare(av);
+ });
+ case "commission":
+ return allValidatorsBondedUsable?.sort((a, b) => {
+ let av =
+ !isNaN(a?.commission?.commissionRates?.rate) &&
+ Number(a?.commission?.commissionRates?.rate);
+ let bv =
+ !isNaN(b?.commission?.commissionRates?.rate) &&
+ Number(b?.commission?.commissionRates?.rate);
+ return ascending ? av - bv : bv - av;
+ });
+ case "delegatedAmount":
+ return allValidatorsBondedUsable?.sort((a, b) => {
+ let av =
+ !isNaN(a?.am_delegatedAmount) && Number(a?.am_delegatedAmount);
+ let bv =
+ !isNaN(b?.am_delegatedAmount) && Number(b?.am_delegatedAmount);
+ return ascending ? av - bv : bv - av;
+ });
+ case "tokens":
+ default:
+ return allValidatorsBondedUsable?.sort((a, b) =>
+ ascending ? b?.tokens - a?.tokens : a?.tokens - b?.tokens
+ );
+ }
+ };
+
const handleOnError = (e) => {
e.preventDefault();
- // console.log("e: ", e);
e.target.src = "/validatorAvatars/alt.png";
};
- const statusArray = [0, 1, 2, -1];
+ // const statusArray = [0, 1, 2, -1];
return (
<>
{activeValidators
- ? allValidatorsBonded
- ?.sort((a, b) => b.tokens - a.tokens)
+ ? allValidatorsBondedUsableSorted(sortParam)
?.filter((item) =>
item?.description?.moniker
.toLowerCase()
@@ -68,7 +118,7 @@ const AllValidators = ({
}}
>
- {index < 10 ? (
+ {item?.rank <= 10 ? (
|
|
)}
- {activeValidators ? {index + 1} | : null}
+ {activeValidators ? {item?.rank} | : null}
|
- {delegatedValidators?.find(
- (element) =>
- element?.operatorAddress == item?.operatorAddress
- )
+ {item?.am_delegatedAmount
? getBalanceStyle(
- fromChainDenom(
- delegatedValidators?.find(
- (element) =>
- element?.operatorAddress == item?.operatorAddress
- )?.delegatedAmount
- ),
+ fromChainDenom(item?.am_delegatedAmount),
"caption2 text-white-300",
"small text-white-300"
)
diff --git a/components/DelegatedValidators.jsx b/components/DelegatedValidators.jsx
index c4e07f8a..ec2eb46b 100644
--- a/components/DelegatedValidators.jsx
+++ b/components/DelegatedValidators.jsx
@@ -15,115 +15,160 @@ const DelegatedValidators = ({
stakeDispatch,
setShowClaimError,
delegatedValidators,
+ sortParam,
}) => {
const {
allValidatorsBonded,
- isLoadingValidatorsBonded,
- errorValidatorsBonded,
+ // isLoadingValidatorsBonded,
+ // errorValidatorsBonded,
} = useAllValidatorsBonded();
const {
allValidatorsUnbonded,
- isLoadingValidatorsUnbonded,
- errorValidatorsUnbonded,
+ // isLoadingValidatorsUnbonded,
+ // errorValidatorsUnbonded,
} = useAllValidatorsUnbonded();
// controller for onError
const handleOnError = (e) => {
e.preventDefault();
- // console.log("e: ", e);
e.target.src = "/validatorAvatars/alt.png";
};
- const statusArray = [0, 1, 2, -1];
+ const allDelegatedValidatorFiltered = delegatedValidators
+ ?.sort((a, b) => b.tokens - a.tokens)
+ ?.filter(
+ (item) =>
+ allValidatorsBonded?.find(
+ (e) => item?.operatorAddress == e?.operatorAddress
+ ) &&
+ item?.description?.moniker
+ ?.toLowerCase()
+ ?.includes(searchValue.toLowerCase())
+ );
+
+ const allDelegatedValidatorUsable = allDelegatedValidatorFiltered?.map(
+ (el) => ({
+ ...el,
+ am_delegatedAmount: delegatedValidators?.find(
+ (element) => element?.operatorAddress == el?.operatorAddress
+ )?.delegatedAmount,
+ })
+ );
+
+ const allDelegatedValidatorsUsableSorted = (sortBy) => {
+ let ascending = true;
+ let sortStr = `${sortBy}`;
+ if (sortBy[0] === "-") {
+ ascending = false;
+ let temp = sortBy.split("");
+ sortStr = "";
+ for (let i = 1; i < temp.length; i++) sortStr += temp[i];
+ }
+
+ switch (sortStr) {
+ case "name":
+ return allDelegatedValidatorUsable?.sort((a, b) => {
+ let av = a?.description?.moniker.trim();
+ let bv = b?.description?.moniker.trim();
+ return ascending ? av?.localeCompare(bv) : bv?.localeCompare(av);
+ });
+ case "commission":
+ return allDelegatedValidatorUsable?.sort((a, b) => {
+ let av =
+ !isNaN(a?.commission?.commissionRates?.rate) &&
+ Number(a?.commission?.commissionRates?.rate);
+ let bv =
+ !isNaN(b?.commission?.commissionRates?.rate) &&
+ Number(b?.commission?.commissionRates?.rate);
+ return ascending ? av - bv : bv - av;
+ });
+ case "delegatedAmount":
+ return allDelegatedValidatorUsable?.sort((a, b) => {
+ let av =
+ !isNaN(a?.am_delegatedAmount) && Number(a?.am_delegatedAmount);
+ let bv =
+ !isNaN(b?.am_delegatedAmount) && Number(b?.am_delegatedAmount);
+ return ascending ? av - bv : bv - av;
+ });
+ case "tokens":
+ default:
+ return allDelegatedValidatorUsable?.sort((a, b) =>
+ ascending ? b?.tokens - a?.tokens : a?.tokens - b?.tokens
+ );
+ }
+ };
+
+ // const statusArray = [0, 1, 2, -1];
return (
<>
{activeValidators
- ? delegatedValidators
- ?.sort((a, b) => b.tokens - a.tokens)
- ?.filter(
- (item) =>
- allValidatorsBonded?.find(
- (e) => item?.operatorAddress == e?.operatorAddress
- ) &&
- item?.description?.moniker
- ?.toLowerCase()
- ?.includes(searchValue.toLowerCase())
- )
- ?.map((item, index) => (
- |
- |
- (
+ |
+ |
+ {
+ setShowClaimError(false);
+ stakeState?.selectedValidators?.includes(
item?.operatorAddress
- )}
- onChange={() => {
- setShowClaimError(false);
- stakeState?.selectedValidators?.includes(
- item?.operatorAddress
- )
- ? stakeDispatch({
- type: "REMOVE_FROM_SELECTED_VALIDATORS",
- payload: item?.operatorAddress,
- })
- : stakeDispatch({
- type: "SET_SELECTED_VALIDATORS",
- payload: item?.operatorAddress,
- });
- }}
- >
- |
- {activeValidators ? {index + 1} | : null}
-
-
- 
- |
-
-
- {" "}
- {item?.description?.moniker}{" "}
-
-
- |
- {((item?.tokens * 100) / totalTokens).toFixed(2)}% |
-
-
- {shiftDecimalPlaces(
- item?.commission?.commissionRates?.rate,
- 2
- )}{" "}
- %
- |
-
+ )
+ ? stakeDispatch({
+ type: "REMOVE_FROM_SELECTED_VALIDATORS",
+ payload: item?.operatorAddress,
+ })
+ : stakeDispatch({
+ type: "SET_SELECTED_VALIDATORS",
+ payload: item?.operatorAddress,
+ });
+ }}
+ >
+ |
+ {activeValidators ? {item?.rank} | : null}
+
+
+
+ |
+
+
{" "}
- {getBalanceStyle(
- fromChainDenom(
- delegatedValidators?.find(
- (element) =>
- element?.operatorAddress == item?.operatorAddress
- )?.delegatedAmount
- ),
- "caption2 text-white-300",
- "small text-white-300"
- ) || "-"}
- |
-
- ))
+ {item?.description?.moniker}{" "}
+
+
+ |
+ {((item?.tokens * 100) / totalTokens).toFixed(2)}% |
+
+
+ {shiftDecimalPlaces(item?.commission?.commissionRates?.rate, 2)}{" "}
+ %
+ |
+
+ {" "}
+ {getBalanceStyle(
+ fromChainDenom(item?.am_delegatedAmount),
+ "caption2 text-white-300",
+ "small text-white-300"
+ ) || "-"}
+ |
+
+ ))
: delegatedValidators
?.filter(
(item) =>
@@ -134,7 +179,6 @@ const DelegatedValidators = ({
?.toLowerCase()
?.includes(searchValue.toLowerCase())
)
-
?.map((item, index) => (
|
diff --git a/pages/stake.jsx b/pages/stake.jsx
index ba6e6101..27daafc3 100644
--- a/pages/stake.jsx
+++ b/pages/stake.jsx
@@ -17,10 +17,20 @@ export default function Stake() {
const [showClaimError, setShowClaimError] = useState(false);
const [activeValidators, setActiveValidators] = useState(true);
const [delegated, setDelegated] = useState(false);
+ const [SortTableByField, setSortTableByField] = useState("tokens");
const { allValidators } = useAllValidators();
const { delegatedValidators } = useDelegatedValidators();
- let validatorsArray = allValidators.sort((a, b) => b.tokens - a.tokens);
+ let validatorsArray = allValidators
+ .sort((a, b) => b.tokens - a.tokens)
+ .map((el, index) => ({ ...el, rank: index + 1 }));
+
+ const rankedDelegatedValidators = delegatedValidators?.map((el) => {
+ for (let item of validatorsArray) {
+ if (el?.description?.moniker === item?.description?.moniker)
+ return { ...el, rank: item?.rank };
+ }
+ });
//Calculate total tokens to calculate voting power
const totalTokens = validatorsArray.reduce(
@@ -60,30 +70,58 @@ export default function Stake() {
};
// transaction manifest modal states and functions
- const GasOptions = [
- {
- name: "Zero",
- usd: "0.0000",
- mntl: "0.0000",
- },
- {
- name: "Low",
- usd: "0.0000",
- mntl: "0.0000",
- },
- {
- name: "High",
- usd: "0.0000",
- mntl: "0.0000",
- },
- ];
- const [SelectedGasFee, setSelectedGasFee] = useState(GasOptions[0].name);
- const [ManifestShowAdvanced, setManifestShowAdvanced] = useState(false);
- const [ManifestKeystorePassword, setManifestKeystorePassword] = useState();
- const [ManifestCustomGas, setManifestCustomGas] = useState();
- const handleManifestConfirm = () => {
- console.log("Confirming transaction manifest");
- };
+ // const GasOptions = [
+ // {
+ // name: "Zero",
+ // usd: "0.0000",
+ // mntl: "0.0000",
+ // },
+ // {
+ // name: "Low",
+ // usd: "0.0000",
+ // mntl: "0.0000",
+ // },
+ // {
+ // name: "High",
+ // usd: "0.0000",
+ // mntl: "0.0000",
+ // },
+ // ];
+ // const [SelectedGasFee, setSelectedGasFee] = useState(GasOptions[0].name);
+ // const [ManifestShowAdvanced, setManifestShowAdvanced] = useState(false);
+ // const [ManifestKeystorePassword, setManifestKeystorePassword] = useState();
+ // const [ManifestCustomGas, setManifestCustomGas] = useState();
+ // const handleManifestConfirm = () => {
+ // console.log("Confirming transaction manifest");
+ // };
+
+ const THRank = (
+ |
+ SortTableByField === "tokens"
+ ? setSortTableByField("-tokens")
+ : setSortTableByField("tokens")
+ }
+ >
+ Rank{" "}
+ {(activeValidators || (activeValidators && delegated)) && (
+
+ {SortTableByField === "tokens" ? (
+
+ ) : (
+
+ )}
+
+ )}
+ |
+ );
return (
<>
@@ -187,18 +225,14 @@ export default function Stake() {
|
{activeValidators ? (
delegated ? (
-
- Rank
- |
+ THRank
) : (
<>
|
-
- Rank
- |
+ {THRank}
)
) : delegated ? null : (
@@ -208,22 +242,156 @@ export default function Stake() {
colSpan="2"
scope="col"
style={{ whiteSpace: "nowrap", marginRight: "20px" }}
+ role="button"
+ tabIndex={0}
+ onClick={() =>
+ SortTableByField === "name"
+ ? setSortTableByField("-name")
+ : setSortTableByField("name")
+ }
>
- Validator Name
+ Validator Name{" "}
+ {(activeValidators ||
+ (activeValidators && delegated)) && (
+
+ {SortTableByField === "name" ? (
+
+ ) : (
+
+ )}
+
+ )}
-
- Voting Power
+ |
+ SortTableByField === "tokens"
+ ? setSortTableByField("-tokens")
+ : setSortTableByField("tokens")
+ }
+ >
+ Voting Power{" "}
+ {(activeValidators ||
+ (activeValidators && delegated)) && (
+
+ {SortTableByField === "tokens" ? (
+
+ ) : (
+
+ )}
+
+ )}
|
-
- Commission
+ |
+ SortTableByField === "commission"
+ ? setSortTableByField("-commission")
+ : setSortTableByField("commission")
+ }
+ >
+ Commission{" "}
+ {(activeValidators ||
+ (activeValidators && delegated)) && (
+
+ {SortTableByField === "commission" ? (
+
+ ) : (
+
+ )}
+
+ )}
|
{delegated ? null : (
-
- Delegations
+ |
+ SortTableByField === "tokens"
+ ? setSortTableByField("-tokens")
+ : setSortTableByField("tokens")
+ }
+ >
+ Delegations{" "}
+ {(activeValidators ||
+ (activeValidators && delegated)) && (
+
+ {SortTableByField === "tokens" ? (
+
+ ) : (
+
+ )}
+
+ )}
|
)}
-
- Delegated Amount
+ |
+ SortTableByField === "delegatedAmount"
+ ? setSortTableByField("-delegatedAmount")
+ : setSortTableByField("delegatedAmount")
+ }
+ >
+ Delegated Amount{" "}
+ {(activeValidators ||
+ (activeValidators && delegated)) && (
+
+ {SortTableByField === "delegatedAmount" ? (
+
+ ) : (
+
+ )}
+
+ )}
|
{activeValidators ? null : (
@@ -235,13 +403,14 @@ export default function Stake() {
|
{delegated ? (
) : (
allValidators.length !== 1 &&
@@ -255,6 +424,7 @@ export default function Stake() {
validatorsArray={validatorsArray}
activeValidators={activeValidators}
totalTokens={totalTokens}
+ sortParam={SortTableByField}
/>
)
)}