From cea3ad99084c3e8175d08ff8bb2ed67796c12ab7 Mon Sep 17 00:00:00 2001 From: Yana Date: Thu, 17 Apr 2025 17:36:27 +0300 Subject: [PATCH] Add dark mode on error cards --- .../AccountBalancesCard.tsx | 33 +++++++++++-------- .../accountPageComponents/AccountInfoCard.tsx | 9 +++-- .../CurrentEpochCard.tsx | 31 ++++++++--------- .../StakersNumberCard.tsx | 2 +- .../landingPageComponents/TokenomicsCard.tsx | 13 +++++--- .../nymNodePageComponents/BasicInfoCard.tsx | 2 +- .../nymNodePageComponents/NodeDataCard.tsx | 2 +- .../NodeParametersCard.tsx | 2 +- .../nymNodePageComponents/NodeProfileCard.tsx | 2 +- .../nymNodePageComponents/NodeRoleCard.tsx | 2 +- 10 files changed, 57 insertions(+), 41 deletions(-) diff --git a/explorer-v2/src/components/accountPageComponents/AccountBalancesCard.tsx b/explorer-v2/src/components/accountPageComponents/AccountBalancesCard.tsx index 5abd9d5b59..0bfc69bc64 100644 --- a/explorer-v2/src/components/accountPageComponents/AccountBalancesCard.tsx +++ b/explorer-v2/src/components/accountPageComponents/AccountBalancesCard.tsx @@ -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 ( - + Failed to account data. @@ -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 = diff --git a/explorer-v2/src/components/accountPageComponents/AccountInfoCard.tsx b/explorer-v2/src/components/accountPageComponents/AccountInfoCard.tsx index 17d99c6ca7..b85a8b921c 100644 --- a/explorer-v2/src/components/accountPageComponents/AccountInfoCard.tsx +++ b/explorer-v2/src/components/accountPageComponents/AccountInfoCard.tsx @@ -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 ( - + Failed to account data. diff --git a/explorer-v2/src/components/landingPageComponents/CurrentEpochCard.tsx b/explorer-v2/src/components/landingPageComponents/CurrentEpochCard.tsx index 7dfe141bcc..db6d267ee3 100644 --- a/explorer-v2/src/components/landingPageComponents/CurrentEpochCard.tsx +++ b/explorer-v2/src/components/landingPageComponents/CurrentEpochCard.tsx @@ -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) => { 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 ( - + Failed to load data ); } - if (!data) { - return ( - - - No data available - - - ); - } - if (epochStatus === "pending") { return ( - + Waiting for next epoch to start... diff --git a/explorer-v2/src/components/landingPageComponents/StakersNumberCard.tsx b/explorer-v2/src/components/landingPageComponents/StakersNumberCard.tsx index c7d081cf16..ad9eeb6f17 100644 --- a/explorer-v2/src/components/landingPageComponents/StakersNumberCard.tsx +++ b/explorer-v2/src/components/landingPageComponents/StakersNumberCard.tsx @@ -34,7 +34,7 @@ export const StakersNumberCard = () => { return ( Failed to load node data. diff --git a/explorer-v2/src/components/landingPageComponents/TokenomicsCard.tsx b/explorer-v2/src/components/landingPageComponents/TokenomicsCard.tsx index 8a45c9e54e..cfc4239a3f 100644 --- a/explorer-v2/src/components/landingPageComponents/TokenomicsCard.tsx +++ b/explorer-v2/src/components/landingPageComponents/TokenomicsCard.tsx @@ -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 ( - + Failed to load tokenomics overview. @@ -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 = [ diff --git a/explorer-v2/src/components/nymNodePageComponents/BasicInfoCard.tsx b/explorer-v2/src/components/nymNodePageComponents/BasicInfoCard.tsx index 55631feabd..af3e87b189 100644 --- a/explorer-v2/src/components/nymNodePageComponents/BasicInfoCard.tsx +++ b/explorer-v2/src/components/nymNodePageComponents/BasicInfoCard.tsx @@ -49,7 +49,7 @@ export const BasicInfoCard = ({ paramId }: Props) => { return ( Failed to load node data. diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeDataCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeDataCard.tsx index 9abc02850a..367aeb0b82 100644 --- a/explorer-v2/src/components/nymNodePageComponents/NodeDataCard.tsx +++ b/explorer-v2/src/components/nymNodePageComponents/NodeDataCard.tsx @@ -60,7 +60,7 @@ export const NodeDataCard = ({ paramId }: Props) => { return ( Failed to load node data. diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx index dda98be3b6..69e0ed901e 100644 --- a/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx +++ b/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx @@ -60,7 +60,7 @@ export const NodeParametersCard = ({ paramId }: Props) => { return ( Failed to load node data. diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeProfileCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeProfileCard.tsx index 18bb793bd6..51256dc21c 100644 --- a/explorer-v2/src/components/nymNodePageComponents/NodeProfileCard.tsx +++ b/explorer-v2/src/components/nymNodePageComponents/NodeProfileCard.tsx @@ -113,7 +113,7 @@ export const NodeProfileCard = ({ paramId }: Props) => { return ( { return ( Failed to load node data.