From f2e4cf47018e3399f0448ad0a4b5e0b30897669a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 20 Jan 2026 09:49:42 +0000
Subject: [PATCH] refactor: use UserName component in TopContributor and remove
 sats suffix from goals

- Update TopContributor to use UserName component for better styling and badges
  - Grimoire members and supporters now show badges in top contributor display
  - Removed manual profile fetching and name display logic
- Remove "sats" suffix from goal percentage displays for cleaner look
  - User menu: "21k / 210k" instead of "21k / 210k sats"
  - Welcome screen: "21k / 210k" instead of "21k / 210k sats"
- Keep "sats" suffix only in the TopContributor amount (default variant only)
---
 src/components/GrimoireWelcome.tsx      |  2 +-
 src/components/nostr/TopContributor.tsx | 12 ++++--------
 src/components/nostr/user-menu.tsx      |  2 +-
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/GrimoireWelcome.tsx b/src/components/GrimoireWelcome.tsx
index 881b095..4905dbc 100644
--- a/src/components/GrimoireWelcome.tsx
+++ b/src/components/GrimoireWelcome.tsx
@@ -148,7 +148,7 @@ export function GrimoireWelcome({
                     <span>Monthly goal</span>
                     <span>
                       {formatSats(monthlyDonations)} /{" "}
-                      {formatSats(MONTHLY_GOAL_SATS)} sats
+                      {formatSats(MONTHLY_GOAL_SATS)}
                     </span>
                   </div>
                   <Progress value={goalProgress} className="h-1" />
diff --git a/src/components/nostr/TopContributor.tsx b/src/components/nostr/TopContributor.tsx
index 0c154c1..bac06d7 100644
--- a/src/components/nostr/TopContributor.tsx
+++ b/src/components/nostr/TopContributor.tsx
@@ -1,6 +1,5 @@
 import { Trophy } from "lucide-react";
-import { useProfile } from "@/hooks/useProfile";
-import { getDisplayName } from "@/lib/nostr-utils";
+import { UserName } from "./UserName";
 
 interface TopContributorProps {
   pubkey: string;
@@ -13,9 +12,6 @@ export function TopContributor({
   amount,
   variant = "default",
 }: TopContributorProps) {
-  const profile = useProfile(pubkey);
-  const displayName = getDisplayName(pubkey, profile);
-
   function formatNumber(sats: number): string {
     if (sats >= 1_000_000) {
       return `${(sats / 1_000_000).toFixed(1)}M`;
@@ -34,11 +30,11 @@ export function TopContributor({
       <Trophy
         className={`${isCompact ? "size-3" : "size-3.5"} text-yellow-500`}
       />
-      <span
+      <div
         className={`${isCompact ? "text-[10px]" : "text-xs"} text-muted-foreground flex-1 truncate`}
       >
-        {displayName}
-      </span>
+        <UserName pubkey={pubkey} />
+      </div>
       <span className={`${isCompact ? "text-[10px]" : "text-xs"} font-medium`}>
         {formatNumber(amount)}
         {!isCompact && " sats"}
diff --git a/src/components/nostr/user-menu.tsx b/src/components/nostr/user-menu.tsx
index 7b9b30f..b19a86c 100644
--- a/src/components/nostr/user-menu.tsx
+++ b/src/components/nostr/user-menu.tsx
@@ -445,7 +445,7 @@ export default function UserMenu() {
                 <span className="text-muted-foreground">Monthly goal</span>
                 <span className="font-medium">
                   {formatSats(monthlyDonations)} /{" "}
-                  {formatSats(MONTHLY_GOAL_SATS)} sats
+                  {formatSats(MONTHLY_GOAL_SATS)}
                 </span>
               </div>
               <Progress value={goalProgress} className="h-1.5" />