Repository: Significant-Gravitas/Auto-GPT
File: autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsx (TypeScript)

Code before:
  }, [credits, prevCredits]);

  // Do not render until we have both credits and onboarding data
  if (credits === null || !state) return null;

  return (
    <Popover
      open={walletOpen}
      onOpenChange={(open) => {
        setWalletOpen(open);
        if (!open) {
          // Persist the latest acknowledged credits so we only auto-open on future gains
          if (typeof credits === "number") {
            storage.set(StorageKey.WALLET_LAST_SEEN_CREDITS, String(credits));
            setLastSeenCredits(credits);
          }
        }
      }}
    >
      <PopoverTrigger asChild>
        <div className="relative inline-block">
          <button
            ref={walletRef}
            className={cn(
              "group relative flex flex-nowrap items-center gap-2 rounded-md bg-zinc-50 px-3 py-2 text-sm",
            )}
            onClick={onWalletOpen}
          >
            <WalletIcon size={20} className="inline-block md:hidden" />
            <div>
              <span className="mr-1 hidden md:inline-block">Earn credits </span>
              <span className="text-sm font-semibold">
                {formatCredits(credits)}
              </span>
              {completedCount !== null && completedCount < totalCount && (
                <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-violet-600" />
              )}
              <div className="absolute bottom-[-2.5rem] left-1/2 z-50 hidden -translate-x-1/2 transform whitespace-nowrap rounded-small bg-white px-4 py-2 shadow-md group-hover:block">
                <Text variant="body-medium">
                  {completedCount} of {totalCount} rewards claimed
                </Text>
              </div>
            </div>
          </button>
          <div
            className={cn(
              "pointer-events-none absolute inset-0 rounded-md bg-violet-400 duration-2000 ease-in-out",
              flash ? "opacity-50 duration-0" : "opacity-0",
            )}
          />
        </div>

Review comment (suggestion):
This doesn't combine multiple class strings, so:
```suggestion
            className={"group relative flex flex-nowrap items-center gap-2 rounded-md bg-zinc-50 px-3 py-2 text-sm"}
```

Code after:
  }, [credits, prevCredits]);

  // Do not render until we have both credits and onboarding data
  if (credits === null || !state) return null;

  return (
    <Popover
      open={walletOpen}
      onOpenChange={(open) => {
        setWalletOpen(open);
        if (!open) {
          // Persist the latest acknowledged credits so we only auto-open on future gains
          if (typeof credits === "number") {
            storage.set(StorageKey.WALLET_LAST_SEEN_CREDITS, String(credits));
            setLastSeenCredits(credits);
          }
        }
      }}
    >
      <PopoverTrigger asChild>
        <div className="relative inline-block">
          <button
            ref={walletRef}
            className="group relative flex flex-nowrap items-center gap-2 rounded-md bg-zinc-50 px-3 py-2 text-sm"
            onClick={onWalletOpen}
          >
            <WalletIcon size={20} className="inline-block md:hidden" />
            <div>
              <span className="mr-1 hidden md:inline-block">Earn credits </span>
              <span className="text-sm font-semibold">
                {formatCredits(credits)}
              </span>
              {completedCount !== null && completedCount < totalCount && (
                <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-violet-600"></span>
              )}
              <div className="absolute bottom-[-2.5rem] left-1/2 z-50 hidden -translate-x-1/2 transform whitespace-nowrap rounded-small bg-white px-4 py-2 shadow-md group-hover:block">
                <Text variant="body-medium">
                  {completedCount} of {totalCount} rewards claimed
                </Text>
              </div>
            </div>
          </button>
          <div
            className={cn(
              "pointer-events-none absolute inset-0 rounded-md bg-violet-400 duration-2000 ease-in-out",
              flash ? "opacity-50 duration-0" : "opacity-0",
            )}
          />
        </div>
      </PopoverTrigger>
      <PopoverContent