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

@@ -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" />

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"}

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" />