Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Akhlak/stake page feature updates #191

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Akhlak/stake page feature updates #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
43b2d04
🛠️📕actual rank added instead of index, sorting added
Akhlak-Hossain-Jim Sep 11, 2024
c602a13
Update stake.jsx
Akhlak-Hossain-Jim Sep 12, 2024
a160913
🛠️sorting added
Akhlak-Hossain-Jim Sep 13, 2024
8bb55bc
🛠️delegated amount sorting added
Akhlak-Hossain-Jim Sep 13, 2024
7b19fed
🛠️amount sorting added
Akhlak-Hossain-Jim Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 62 additions & 20 deletions components/AllValidators.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -68,7 +118,7 @@ const AllValidators = ({
}}
></input>
</td>
{index < 10 ? (
{item?.rank <= 10 ? (
<td>
<Tooltip
titlePrimary={"text-warning"}
Expand All @@ -82,7 +132,7 @@ const AllValidators = ({
) : (
<td></td>
)}
{activeValidators ? <td>{index + 1}</td> : null}
{activeValidators ? <td>{item?.rank}</td> : null}
<td>
<div
className="d-flex position-relative rounded-circle"
Expand Down Expand Up @@ -125,17 +175,9 @@ const AllValidators = ({
)}
</td>
<td>
{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"
)
Expand Down
226 changes: 135 additions & 91 deletions components/DelegatedValidators.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
<tr key={index} className="caption2 text-white-300">
<td>
<input
type="checkbox"
checked={stakeState?.selectedValidators?.includes(
? allDelegatedValidatorsUsableSorted(sortParam)?.map((item, index) => (
<tr key={index} className="caption2 text-white-300">
<td>
<input
type="checkbox"
checked={stakeState?.selectedValidators?.includes(
item?.operatorAddress
)}
onChange={() => {
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,
});
}}
></input>
</td>
{activeValidators ? <td>{index + 1}</td> : null}
<td>
<div
className="d-flex position-relative rounded-circle gap-1"
style={{ width: "25px", aspectRatio: "1/1" }}
>
<img
alt={item?.description?.moniker}
className="rounded-circle"
layout="fill"
src={`/validatorAvatars/${item?.operatorAddress}.png`}
onError={handleOnError}
/>
</div>
</td>
<td className=" d-flex align-items-center justify-content-start">
<a
className="text-truncate"
href={`https://explorer.assetmantle.one/validators/${item.operatorAddress}`}
target="_blank"
rel="noreferrer"
>
{" "}
{item?.description?.moniker}{" "}
<i className="bi bi-arrow-up-right" />
</a>
</td>
<td>{((item?.tokens * 100) / totalTokens).toFixed(2)}%</td>

<td>
{shiftDecimalPlaces(
item?.commission?.commissionRates?.rate,
2
)}{" "}
%
</td>
<td>
)
? stakeDispatch({
type: "REMOVE_FROM_SELECTED_VALIDATORS",
payload: item?.operatorAddress,
})
: stakeDispatch({
type: "SET_SELECTED_VALIDATORS",
payload: item?.operatorAddress,
});
}}
></input>
</td>
{activeValidators ? <td>{item?.rank}</td> : null}
<td>
<div
className="d-flex position-relative rounded-circle gap-1"
style={{ width: "25px", aspectRatio: "1/1" }}
>
<img
alt={item?.description?.moniker}
className="rounded-circle"
layout="fill"
src={`/validatorAvatars/${item?.operatorAddress}.png`}
onError={handleOnError}
/>
</div>
</td>
<td className=" d-flex align-items-center justify-content-start">
<a
className="text-truncate"
href={`https://explorer.assetmantle.one/validators/${item.operatorAddress}`}
target="_blank"
rel="noreferrer"
>
{" "}
{getBalanceStyle(
fromChainDenom(
delegatedValidators?.find(
(element) =>
element?.operatorAddress == item?.operatorAddress
)?.delegatedAmount
),
"caption2 text-white-300",
"small text-white-300"
) || "-"}
</td>
</tr>
))
{item?.description?.moniker}{" "}
<i className="bi bi-arrow-up-right" />
</a>
</td>
<td>{((item?.tokens * 100) / totalTokens).toFixed(2)}%</td>

<td>
{shiftDecimalPlaces(item?.commission?.commissionRates?.rate, 2)}{" "}
%
</td>
<td>
{" "}
{getBalanceStyle(
fromChainDenom(item?.am_delegatedAmount),
"caption2 text-white-300",
"small text-white-300"
) || "-"}
</td>
</tr>
))
: delegatedValidators
?.filter(
(item) =>
Expand All @@ -134,7 +179,6 @@ const DelegatedValidators = ({
?.toLowerCase()
?.includes(searchValue.toLowerCase())
)

?.map((item, index) => (
<tr key={index} className="caption2 text-white-300">
<td>
Expand Down
Loading