Function ProfileButton

packages/shared/src/components/profile/ProfileButton.tsx:34–296

({
  className,
  settingsIconOnly,
}: ProfileButtonProps)

}

export default function ProfileButton({
  className,
  settingsIconOnly,
}: ProfileButtonProps): ReactElement {
  const { isOpen, onUpdate, wrapHandler } = useInteractivePopup();
  const { user, isAuthReady } = useAuthContext();
  const { showIndicator } = useProfileCompletionIndicator();
  const { streak, isLoading, isStreaksEnabled } = useReadingStreak();
  const hasCoresAccess = useHasAccessToCores();
  const [animatedCores, setAnimatedCores] = useState<number | null>(null);
  const [animatedReputation, setAnimatedReputation] = useState<number | null>(
    null,
  );
  const clearCounterTimersRef = useRef<
    Partial<Record<QuestRewardType.Reputation | QuestRewardType.Cores, number>>
  >({});
  const activeClaimRef = useRef<
    Partial<Record<QuestRewardType.Reputation | QuestRewardType.Cores, string>>
  >({});
  const coresCounterRef = useRef<HTMLDivElement | null>(null);
  const reputationCounterRef = useRef<HTMLSpanElement | null>(null);
  const displayedBalance =
    typeof animatedCores === 'number'
      ? animatedCores
      : user?.balance?.amount ?? 0;
  const displayedReputation =
    typeof animatedReputation === 'number'
      ? animatedReputation
      : user?.reputation;

  const preciseBalance = formatCurrency(displayedBalance, {
    minimumFractionDigits: 0,
  });

  const playCounterImpactAnimation = useCallback(
    (rewardType: QuestRewardType.Reputation | QuestRewardType.Cores) => {
      const target =
        rewardType === QuestRewardType.Reputation
          ? reputationCounterRef.current
          : coresCounterRef.current;

      if (!target || typeof target.animate !== 'function') {
        return;
      }

      target.animate(
        [
          { transform: 'scale(1)' },
          { transform: 'scale(1.2)', offset: 0.45 },
          { transform: 'scale(1)' },
        ],
        {
          duration: 180,
          easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
        },
      );
    },
    [],