GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark mode on error cards

Browse Source
This commit is contained in:
Yana
2025-04-17 17:36:27 +03:00
parent e4ecd099cc
commit cea3ad9908
10 changed files with 57 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
explorer-v2/src/components/accountPageComponents/AccountBalancesCard.tsx
+19 -14
View File
@@ -1,6 +1,6 @@
"use client";
import { fetchAccountBalance, fetchNymPrice } from "@/app/api";
import { Skeleton, Stack, Typography } from "@mui/material";
import { Skeleton, Stack, Typography, useTheme } from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import type { IRewardDetails } from "../../app/api/types";
import ExplorerCard from "../cards/ExplorerCard";
@@ -45,7 +45,7 @@ const getAllocation = (unyms: number, totalUnyms: number): number => {
};
const calculateStakingRewards = (
accumulatedRewards: IRewardDetails[],
accumulatedRewards: IRewardDetails[]
): number => {
if (accumulatedRewards.length > 0) {
const totalRewards = accumulatedRewards.reduce((total, rewardDetail) => {
@@ -61,6 +61,8 @@ const calculateStakingRewards = (
export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
const { address } = props;
const theme = useTheme();
const isDarkMode = theme.palette.mode === "dark";
const {
data: accountInfo,
@@ -101,7 +103,10 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
if (isError || priceError || !accountInfo || !nymPrice) {
return (
<ExplorerCard label="Total value">
<Typography variant="h5" sx={{ color: "pine.600", letterSpacing: 0.7 }}>
<Typography
variant="h5"
sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
>
Failed to account data.
</Typography>
<Skeleton variant="text" height={238} />
@@ -113,7 +118,7 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
const totalBalanceUSD = getPriceInUSD(
Number(accountInfo.total_value.amount),
nymPriceData,
nymPriceData
);
const spendableNYM =
accountInfo.balances.length > 0
@@ -127,46 +132,46 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
accountInfo.balances.length > 0
? getAllocation(
Number(accountInfo.balances[0].amount),
Number(accountInfo.total_value.amount),
Number(accountInfo.total_value.amount)
)
: 0;
const delegationsNYM = getNymsFormated(
Number(accountInfo.total_delegations.amount),
Number(accountInfo.total_delegations.amount)
);
const delegationsUSD = getPriceInUSD(
Number(accountInfo.total_delegations.amount),
nymPriceData,
nymPriceData
);
const delegationsAllocation = getAllocation(
Number(accountInfo.total_delegations.amount),
Number(accountInfo.total_value.amount),
Number(accountInfo.total_value.amount)
);
const operatorRewardsAllocation = getAllocation(
Number(accountInfo.operator_rewards?.amount || 0),
Number(accountInfo.total_value.amount),
Number(accountInfo.total_value.amount)
);
const operatorRewardsNYM = getNymsFormated(
Number(accountInfo.operator_rewards?.amount || 0),
Number(accountInfo.operator_rewards?.amount || 0)
);
const operatorRewardsUSD = getPriceInUSD(
Number(accountInfo.operator_rewards?.amount || 0),
nymPriceData,
nymPriceData
);
const claimableNYM = getNymsFormated(
Number(accountInfo.claimable_rewards.amount),
Number(accountInfo.claimable_rewards.amount)
);
const claimableUSD = getPriceInUSD(
Number(accountInfo.claimable_rewards.amount),
nymPriceData,
nymPriceData
);
const claimableAllocation = getAllocation(
Number(accountInfo.claimable_rewards.amount),
Number(accountInfo.total_value.amount),
Number(accountInfo.total_value.amount)
);
const stakingRewards =
explorer-v2/src/components/accountPageComponents/AccountInfoCard.tsx
+7 -2
View File
@@ -1,6 +1,6 @@
"use client";
import { fetchAccountBalance } from "@/app/api";
import { Box, Skeleton, Stack, Typography } from "@mui/material";
import { Box, Skeleton, Stack, Typography, useTheme } from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import ExplorerCard from "../cards/ExplorerCard";
import CopyToClipboard from "../copyToClipboard/CopyToClipboard";
@@ -13,6 +13,8 @@ interface IAccountInfoCardProps {
export const AccountInfoCard = (props: IAccountInfoCardProps) => {
const { address } = props;
const theme = useTheme();
const isDarkMode = theme.palette.mode === "dark";
const { data, isLoading, isError } = useQuery({
queryKey: ["accountBalance", address],
@@ -38,7 +40,10 @@ export const AccountInfoCard = (props: IAccountInfoCardProps) => {
if (isError || !data) {
return (
<ExplorerCard label="Total NYM">
<Typography variant="h5" sx={{ color: "pine.600", letterSpacing: 0.7 }}>
<Typography
variant="h5"
sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
>
Failed to account data.
</Typography>
<Skeleton variant="text" height={238} />
explorer-v2/src/components/landingPageComponents/CurrentEpochCard.tsx
+16 -15
View File
@@ -4,7 +4,7 @@ import {
type EpochResponseData,
useEpochContext,
} from "@/providers/EpochProvider";
import { Skeleton, Typography } from "@mui/material";
import { Skeleton, Typography, useTheme } from "@mui/material";
import { differenceInMinutes, format } from "date-fns";
import { useCallback, useEffect, useState } from "react";
import ExplorerCard from "../cards/ExplorerCard";
@@ -34,10 +34,13 @@ export const CurrentEpochCard = () => {
const [endTime, setEndTime] = useState("");
const [progress, setProgress] = useState(0);
const theme = useTheme();
const isDarkMode = theme.palette.mode === "dark";
const updateState = useCallback((data: NonNullable<EpochResponseData>) => {
const { startTime, endTime } = getStartEndTime(
data.current_epoch_start,
data.current_epoch_end,
data.current_epoch_end
);
const progress = calulateProgress(data.current_epoch_end);
@@ -65,30 +68,28 @@ export const CurrentEpochCard = () => {
);
}
if (isError) {
if (isError || !data) {
return (
<ExplorerCard label="Current mixnet epoch">
<Typography variant="body3" fontWeight="light">
<Typography
variant="h5"
sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
>
Failed to load data
</Typography>
</ExplorerCard>
);
}
if (!data) {
return (
<ExplorerCard label="Current mixnet epoch">
<Typography variant="body3" fontWeight="light">
No data available
</Typography>
</ExplorerCard>
);
}
if (epochStatus === "pending") {
return (
<ExplorerCard label="Current mixnet epoch">
<Typography variant="body3" fontWeight="light" height={80}>
<Typography
variant="body3"
fontWeight="light"
height={80}
sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
>
Waiting for next epoch to start...
</Typography>
</ExplorerCard>
explorer-v2/src/components/landingPageComponents/StakersNumberCard.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export const StakersNumberCard = () => {
return (
<ExplorerCard label="Number of delegations">
<Typography
variant="h3"
variant="h5"
sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
>
Failed to load node data.
explorer-v2/src/components/landingPageComponents/TokenomicsCard.tsx
+9 -4
View File
@@ -1,7 +1,7 @@
"use client";
import { fetchEpochRewards, fetchNoise, fetchNymPrice } from "@/app/api";
import { formatBigNum } from "@/utils/formatBigNumbers";
import { Box, Skeleton, Stack, Typography } from "@mui/material";
import { Box, Skeleton, Stack, Typography, useTheme } from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import type { ExplorerData, NymTokenomics } from "../../app/api/types";
import ExplorerCard from "../cards/ExplorerCard";
@@ -9,6 +9,8 @@ import ExplorerListItem from "../list/ListItem";
import { TitlePrice } from "../price/TitlePrice";
export const TokenomicsCard = () => {
const theme = useTheme();
const isDarkMode = theme.palette.mode === "dark";
const {
data: nymPrice,
isLoading,
@@ -69,7 +71,10 @@ export const TokenomicsCard = () => {
) {
return (
<ExplorerCard label="Tokenomics overview">
<Typography variant="h5" sx={{ color: "pine.600", letterSpacing: 0.7 }}>
<Typography
variant="h5"
sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
>
Failed to load tokenomics overview.
</Typography>
<Skeleton variant="text" height={80} />
@@ -98,7 +103,7 @@ export const TokenomicsCard = () => {
function calculateTVL(
epochRewards: ExplorerData["currentEpochRewardsData"],
nymPriceData: NymTokenomics,
packetsAndStaking: ExplorerData["packetsAndStakingData"],
packetsAndStaking: ExplorerData["packetsAndStakingData"]
): number {
const lastTotalStake =
packetsAndStaking[packetsAndStaking.length - 1]?.total_stake || 0;
@@ -109,7 +114,7 @@ export const TokenomicsCard = () => {
);
}
const TVL = formatBigNum(
calculateTVL(epochRewardsData, nymPrice, packetsAndStakingData),
calculateTVL(epochRewardsData, nymPrice, packetsAndStakingData)
);
const dataRows = [
explorer-v2/src/components/nymNodePageComponents/BasicInfoCard.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export const BasicInfoCard = ({ paramId }: Props) => {
return (
<ExplorerCard label="Basic info">
<Typography
variant="h3"
variant="h5"
sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
>
Failed to load node data.
explorer-v2/src/components/nymNodePageComponents/NodeDataCard.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ export const NodeDataCard = ({ paramId }: Props) => {
return (
<ExplorerCard label="Nym node data" sx={{ height: "100%" }}>
<Typography
variant="h3"
variant="h5"
sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
>
Failed to load node data.
explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ export const NodeParametersCard = ({ paramId }: Props) => {
return (
<ExplorerCard label="Node parameters" sx={{ height: "100%" }}>
<Typography
variant="h3"
variant="h5"
sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
>
Failed to load node data.
explorer-v2/src/components/nymNodePageComponents/NodeProfileCard.tsx
+1 -1
View File
@@ -113,7 +113,7 @@ export const NodeProfileCard = ({ paramId }: Props) => {
return (
<ExplorerCard label="Nym Node" sx={{ height: "100%" }}>
<Typography
variant="h3"
variant="h5"
sx={{
color: theme.palette.mode === "dark" ? "base.white" : "pine.950",
}}
explorer-v2/src/components/nymNodePageComponents/NodeRoleCard.tsx
+1 -1
View File
@@ -216,7 +216,7 @@ export const NodeRoleCard = ({ paramId }: Props) => {
return (
<ExplorerCard label="Node role & performance">
<Typography
variant="h3"
variant="h5"
sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
>
Failed to load node data.