diff --git a/src/utils/format.ts b/src/utils/format.ts index 042674479..35ad8e8d1 100644 --- a/src/utils/format.ts +++ b/src/utils/format.ts @@ -290,8 +290,8 @@ export function humanReadableNumber(num: number, decimals = 0): string { * @returns A string formatted as USD. A number with 2 decimal places. * @note USD only has 2 decimal places of precision, so this will round up to the nearest cent. */ -export function formatUSD(value: BigNumberish): string { - const formattedString = formatUnits(value, 18); +export function formatUSD(value?: BigNumberish): string { + const formattedString = formatUnits(value ?? 0, 18); const [dollars, cents] = formattedString.split("."); - return `${dollars}.${cents.slice(0, 2).padEnd(2, "0")}`; + return `${dollars}.${(cents ?? "").slice(0, 2).padEnd(2, "0")}`; } diff --git a/src/views/Rewards/components/GenericOverviewCard.tsx b/src/views/Rewards/components/GenericOverviewCard.tsx index 054dc8f04..1c6de1c89 100644 --- a/src/views/Rewards/components/GenericOverviewCard.tsx +++ b/src/views/Rewards/components/GenericOverviewCard.tsx @@ -2,10 +2,11 @@ import styled from "@emotion/styled"; import { COLORS } from "utils"; import { ReactComponent as Background } from "assets/bg-banners/overview-card-background.svg"; import { Text } from "components"; +import { ReactElement } from "react"; type GenericOverviewCardTitleProps = { subTitle: string; - title: string; + title: string | ReactElement; }; type GenericOverviewCardProps = { diff --git a/src/views/Rewards/components/OverviewStakingCard.tsx b/src/views/Rewards/components/OverviewStakingCard.tsx index 915d44912..b82975ebb 100644 --- a/src/views/Rewards/components/OverviewStakingCard.tsx +++ b/src/views/Rewards/components/OverviewStakingCard.tsx @@ -3,6 +3,7 @@ import { useRewards } from "../hooks/useRewards"; import GenericOverviewCard from "./GenericOverviewCard"; import { ReactComponent as Icon } from "assets/icons/rewards/graph-within-star.svg"; import { formatUSD } from "utils"; +import styled from "@emotion/styled"; const OverviewStakingCard = () => { const { stakedTokens, largestStakedPool } = useRewards(); @@ -10,12 +11,19 @@ const OverviewStakingCard = () => { return ( + + {largestStakedPool.name} + + ) : ( + "-" + ), subTitle: "Top Pool", }, right: { @@ -29,3 +37,14 @@ const OverviewStakingCard = () => { }; export default OverviewStakingCard; + +const IconPoolWrapper = styled.div` + display: flex; + align-items: center; + gap: 8px; +`; + +const PoolLogo = styled.img` + height: 16px; + width: 16px; +`;