chore: improve logo uri

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")}`;
 }

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 = {

src/views/Rewards/components/OverviewStakingCard.tsx

@@ -3,19 +3,27 @@ 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();
   const formatUsd = (value: BigNumber) => `$${formatUSD(value)}`;
   return (
     <GenericOverviewCard
       upperCard={{
-        title: formatUsd(stakedTokens),
+        title: formatUsd(stakedTokens ?? BigNumber.from(0)),
         subTitle: "$ in staked LP tokens",
       }}
       lowerCard={{
         left: {
-          title: largestStakedPool?.name ?? "NONE",
+          title: largestStakedPool ? (
+            <IconPoolWrapper>
+              <PoolLogo src={largestStakedPool.logo} />
+              {largestStakedPool.name}
+            </IconPoolWrapper>
+          ) : (
+            "-"
+          ),
           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;
+`;