Function QuestButton

packages/shared/src/components/quest/QuestButton.tsx:632–1256

({
  compact = false,
  panelOnly = false,
}: QuestButtonProps)

};

export const QuestButton = ({
  compact = false,
  panelOnly = false,
}: QuestButtonProps): ReactElement => {
  const router = useRouter();
  const { optOutLevelSystem } = useSettingsContext();
  const { user } = useAuthContext();
  const { data, isPending, isError } = useQuestDashboard();
  const {
    mutate: claimQuestReward,
    isPending: isClaimPending,
    variables,
  } = useClaimQuestReward();

  const level = data?.level?.level ?? 1;
  const levelProgress = data?.level ? getLevelProgress(data.level) : 0;
  const showLevelSystem = !optOutLevelSystem;
  const claimableCount = useMemo(() => getClaimableQuestCount(data), [data]);
  const claimingQuestId = isClaimPending ? variables?.userQuestId : undefined;
  const [rewardFlightLayers, setRewardFlightLayers] = useState<
    QuestRewardFlightLayerState[]
  >([]);
  const [levelFireworkParticles, setLevelFireworkParticles] = useState<
    QuestLevelFireworkParticle[]
  >([]);
  const [animatedLevel, setAnimatedLevel] = useState<number | null>(null);
  const [animatedLevelProgress, setAnimatedLevelProgress] = useState<
    number | null
  >(null);
  const [animatingClaimRotationIds, setAnimatingClaimRotationIds] = useState<
    string[]
  >([]);
  const [claimedStampRotationIds, setClaimedStampRotationIds] = useState<
    string[]
  >([]);
  const [
    animatingClaimedStampRotationIds,
    setAnimatingClaimedStampRotationIds,
  ] = useState<string[]>([]);
  const [deferredClaimedStampRotationIds, setDeferredClaimedStampRotationIds] =
    useState<string[]>([]);
  const progressTimersRef = useRef<number[]>([]);
  const claimedStampTimersRef = useRef<number[]>([]);
  const currentProgressAnimationRotationIdRef = useRef<string | null>(null);
  const renderedLevel = animatedLevel ?? level;
  const renderedLevelProgress = animatedLevelProgress ?? levelProgress;
  const triggerTooltipContent = data?.level
    ? `Total XP: ${data.level.totalXp.toLocaleString('de-DE')}`
    : 'Quests';
  const triggerButtonSize = compact ? ButtonSize.Small : ButtonSize.Medium;
  const triggerButtonVariant = compact
    ? ButtonVariant.Tertiary
    : ButtonVariant.Float;
  const triggerVisualSize = compact ? 32 : QUEST_LEVEL_PROGRESS_SIZE;
  const triggerProgressStroke = compact ? 3 : QUEST_LEVEL_PROGRESS_STROKE;
  const triggerProgressRadius = (triggerVisualSize - triggerProgressStroke) / 2;
  const triggerProgressCircumference = 2 * Math.PI * triggerProgressRadius;
  const triggerVisualClassName = compact ? 'size-8' : 'size-10';