Skip to content

init aws rum and sentry events #1837

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simo6529 merged 4 commits into from
Jan 27, 2026
Merged

init aws rum and sentry events #1837

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a686ef2
init aws rum and sentry events
simo6529 Jan 27, 2026
83b2891
wip
simo6529 Jan 27, 2026
a6f7f06
wip
simo6529 Jan 27, 2026
bb9ba04
wip
simo6529 Jan 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion components/memes/drops/MemesLeaderboardDrop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import useIsMobileScreen from "@/hooks/isMobileScreen";
import useDeviceInfo from "@/hooks/useDeviceInfo";
import useLongPressInteraction from "@/hooks/useLongPressInteraction";
import { useMediaQuery } from "@/hooks/useMediaQuery";
import { startDropOpen } from "@/utils/monitoring/dropOpenTiming";
import Link from "next/link";
import React, { useState } from "react";
import { createPortal } from "react-dom";
Expand Down Expand Up @@ -75,7 +76,16 @@ export const MemesLeaderboardDrop: React.FC<MemesLeaderboardDropProps> = ({
return (
<div
className="tw-w-full tw-cursor-pointer tw-@container"
onClick={() => !hasTouchScreen && onDropClick(drop)}
onClick={() => {
if (hasTouchScreen) return;
startDropOpen({
dropId: drop.id,
waveId: drop.wave.id,
source: "leaderboard_memes",
isMobile: isMobileScreen,
});
onDropClick(drop);
}}
>
<div className="tw-group tw-w-full">
<div {...touchHandlers}>
Expand Down
83 changes: 48 additions & 35 deletions components/waves/drop/SingleWaveDropWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,18 @@ import type { ApiDrop } from "@/generated/models/ApiDrop";
import type { ApiWave } from "@/generated/models/ApiWave";
import { useMediaQuery } from "@/hooks/useMediaQuery";
import { Transition } from "@headlessui/react";
import { markDropOpenReady } from "@/utils/monitoring/dropOpenTiming";
import {
ArrowLeftIcon,
ChatBubbleLeftRightIcon,
} from "@heroicons/react/24/outline";
import React, { Fragment, useCallback, useEffect, useState } from "react";
import React, {
Fragment,
useCallback,
useEffect,
useRef,
useState,
} from "react";
import { SingleWaveDropChat } from "./SingleWaveDropChat";

interface SingleWaveDropWrapperProps {
Expand All @@ -27,6 +34,7 @@ export const SingleWaveDropWrapper: React.FC<SingleWaveDropWrapperProps> = ({
}) => {
const [isChatOpen, setIsChatOpen] = useState(false);
const isSmallScreen = useMediaQuery("(max-width: 1023px)");
const readyKeyRef = useRef<string | null>(null);

const toggleChat = useCallback(() => {
setIsChatOpen((prev) => !prev);
Expand All @@ -50,81 +58,86 @@ export const SingleWaveDropWrapper: React.FC<SingleWaveDropWrapperProps> = ({
};
}, [isChatOpen, isSmallScreen]);

useEffect(() => {
const readyKey = `${drop.id}:${wave.id}`;
if (readyKeyRef.current === readyKey) return;
readyKeyRef.current = readyKey;
markDropOpenReady({ dropId: drop.id, waveId: wave.id });
}, [drop.id, wave.id]);

return (
<div className="tw-w-full tw-h-full tw-bg-iron-950 tw-flex tw-flex-col lg:tw-flex-row tw-overflow-hidden">
<div className="@container tw-flex-1 tw-relative tw-h-full tw-overflow-hidden">
<header className="tw-absolute tw-top-0 tw-left-0 tw-right-3 tw-z-20 tw-pt-[calc(env(safe-area-inset-top,0px)+0.5rem)] tw-pb-2 tw-px-2 lg:tw-px-8 @[640px]:tw-px-8 tw-bg-iron-950/55 tw-bg-gradient-to-b tw-from-iron-950/75 tw-via-iron-950/55 tw-to-iron-950/10 tw-backdrop-blur-sm">
<div className="tw-w-full tw-flex tw-items-center tw-justify-between">
<div className="tw-flex tw-h-full tw-w-full tw-flex-col tw-overflow-hidden tw-bg-iron-950 lg:tw-flex-row">
<div className="@container tw-relative tw-h-full tw-flex-1 tw-overflow-hidden">
<header className="tw-absolute tw-left-0 tw-right-3 tw-top-0 tw-z-20 tw-bg-iron-950/55 tw-bg-gradient-to-b tw-from-iron-950/75 tw-via-iron-950/55 tw-to-iron-950/10 tw-px-2 tw-pb-2 tw-pt-[calc(env(safe-area-inset-top,0px)+0.5rem)] tw-backdrop-blur-sm @[640px]:tw-px-8 lg:tw-px-8">
<div className="tw-flex tw-w-full tw-items-center tw-justify-between">
<div className="tw-flex tw-items-center tw-gap-6">
<button
type="button"
aria-label="Close panel"
onClick={onClose}
className="tw-flex tw-items-center tw-justify-center tw-gap-2 tw-h-11 tw-w-11 sm:tw-h-auto sm:tw-w-auto sm:tw-px-3 sm:tw-py-2 tw-rounded-full sm:tw-rounded-lg tw-text-iron-300 desktop-hover:hover:tw-text-white tw-transition-all tw-bg-iron-950 sm:tw-bg-transparent tw-border tw-border-solid tw-border-iron-700 sm:tw-border-0"
className="tw-flex tw-h-11 tw-w-11 tw-items-center tw-justify-center tw-gap-2 tw-rounded-full tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-950 tw-text-iron-300 tw-transition-all desktop-hover:hover:tw-text-white sm:tw-h-auto sm:tw-w-auto sm:tw-rounded-lg sm:tw-border-0 sm:tw-bg-transparent sm:tw-px-3 sm:tw-py-2"
>
<ArrowLeftIcon className="tw-w-5 tw-h-5 sm:tw-w-4 sm:tw-h-4 tw-flex-shrink-0" />
<span className="tw-hidden sm:tw-inline tw-text-sm tw-font-semibold">Close</span>
<ArrowLeftIcon className="tw-h-5 tw-w-5 tw-flex-shrink-0 sm:tw-h-4 sm:tw-w-4" />
<span className="tw-hidden tw-text-sm tw-font-semibold sm:tw-inline">
Close
</span>
</button>
</div>

<button
onClick={toggleChat}
aria-label={isChatOpen ? "Hide chat" : "Show chat"}
className={`tw-gap-2 tw-px-3 tw-h-11 sm:tw-h-auto sm:tw-py-2 tw-w-11 sm:tw-w-auto tw-flex-shrink-0 tw-flex tw-items-center tw-justify-center tw-backdrop-blur-md tw-rounded-full sm:tw-rounded-lg tw-transition-all tw-text-sm tw-font-medium tw-border tw-border-solid ${
className={`tw-flex tw-h-11 tw-w-11 tw-flex-shrink-0 tw-items-center tw-justify-center tw-gap-2 tw-rounded-full tw-border tw-border-solid tw-px-3 tw-text-sm tw-font-medium tw-backdrop-blur-md tw-transition-all sm:tw-h-auto sm:tw-w-auto sm:tw-rounded-lg sm:tw-py-2 ${
isChatOpen
? "tw-bg-iron-800 tw-border-iron-700 tw-text-iron-100 desktop-hover:hover:tw-bg-iron-700"
: "tw-bg-iron-950 tw-border-iron-700 tw-text-iron-300 desktop-hover:hover:tw-bg-iron-800 desktop-hover:hover:tw-text-iron-200"
? "tw-border-iron-700 tw-bg-iron-800 tw-text-iron-100 desktop-hover:hover:tw-bg-iron-700"
: "tw-border-iron-700 tw-bg-iron-950 tw-text-iron-300 desktop-hover:hover:tw-bg-iron-800 desktop-hover:hover:tw-text-iron-200"
}`}
>
<ChatBubbleLeftRightIcon className="tw-w-5 tw-h-5 sm:tw-w-4 sm:tw-h-4 tw-flex-shrink-0" />
<ChatBubbleLeftRightIcon className="tw-h-5 tw-w-5 tw-flex-shrink-0 sm:tw-h-4 sm:tw-w-4" />
<span className="tw-hidden sm:tw-inline">
{isChatOpen ? "Hide" : "Show"} Chat
</span>
</button>
</div>
</header>

<div className="tw-h-full tw-overflow-y-auto tw-[scrollbar-gutter:stable] tw-scrollbar-thin tw-scrollbar-thumb-iron-500 tw-scrollbar-track-iron-800 desktop-hover:hover:tw-scrollbar-thumb-iron-300">
<div className="tw-[scrollbar-gutter:stable] tw-h-full tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-track-iron-800 tw-scrollbar-thumb-iron-500 desktop-hover:hover:tw-scrollbar-thumb-iron-300">
<div
className="tw-shrink-0 tw-h-[calc(env(safe-area-inset-top,0px)+4rem)]"
className="tw-h-[calc(env(safe-area-inset-top,0px)+4rem)] tw-shrink-0"
aria-hidden="true"
/>
{children}
<div
className="tw-shrink-0 tw-h-[env(safe-area-inset-bottom,0px)]"
className="tw-h-[env(safe-area-inset-bottom,0px)] tw-shrink-0"
aria-hidden="true"
/>
</div>
</div>

<CompactModeProvider compact={true}>
<div
className={`
tw-hidden lg:tw-flex tw-flex-col tw-h-full tw-bg-black tw-transition-all tw-duration-300 tw-ease-in-out
${
isChatOpen
? "tw-w-[400px] tw-border-l tw-border-solid tw-border-white/10 tw-border-y-0 tw-border-r-0"
: "tw-w-0 tw-overflow-hidden tw-border-none"
}
`}
className={`tw-hidden tw-h-full tw-flex-col tw-bg-black tw-transition-all tw-duration-300 tw-ease-in-out lg:tw-flex ${
isChatOpen
? "tw-w-[400px] tw-border-y-0 tw-border-l tw-border-r-0 tw-border-solid tw-border-white/10"
: "tw-w-0 tw-overflow-hidden tw-border-none"
} `}
>
<div className="@container tw-flex tw-flex-col tw-flex-1 tw-overflow-hidden tw-relative">
<div className="tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-h-12 tw-bg-gradient-to-b tw-from-black tw-to-transparent tw-z-50 tw-pointer-events-none" />
<div className="@container tw-relative tw-flex tw-flex-1 tw-flex-col tw-overflow-hidden">
<div className="tw-pointer-events-none tw-absolute tw-left-0 tw-right-0 tw-top-0 tw-z-50 tw-h-12 tw-bg-gradient-to-b tw-from-black tw-to-transparent" />
<SingleWaveDropChat key={drop.id} wave={wave} drop={drop} />
</div>
</div>
</CompactModeProvider>

<CompactModeProvider compact={true}>
<Transition.Root show={isChatOpen} as={Fragment}>
<div className="lg:tw-hidden tw-fixed tw-inset-y-0 tw-right-0 tw-left-[var(--left-rail,0px)] tw-z-[90] tw-overflow-hidden">
<div className="tw-fixed tw-inset-y-0 tw-left-[var(--left-rail,0px)] tw-right-0 tw-z-[90] tw-overflow-hidden lg:tw-hidden">
<Transition.Child
as={Fragment}
enter="tw-ease-out tw-duration-150"
enter="tw-duration-150 tw-ease-out"
enterFrom="tw-opacity-0"
enterTo="tw-opacity-100"
leave="tw-ease-in tw-duration-120"
leave="tw-duration-120 tw-ease-in"
leaveFrom="tw-opacity-100"
leaveTo="tw-opacity-0"
>
Expand All @@ -135,25 +148,25 @@ export const SingleWaveDropWrapper: React.FC<SingleWaveDropWrapperProps> = ({
</Transition.Child>
<Transition.Child
as={Fragment}
enter="tw-transform tw-transition tw-ease-out tw-duration-220"
enter="tw-duration-220 tw-transform tw-transition tw-ease-out"
enterFrom="tw-translate-x-full"
enterTo="tw-translate-x-0"
leave="tw-transform tw-transition tw-ease-in tw-duration-180"
leave="tw-duration-180 tw-transform tw-transition tw-ease-in"
leaveFrom="tw-translate-x-0"
leaveTo="tw-translate-x-full"
>
<div className="@container lg:tw-hidden tw-flex tw-flex-col tw-h-full tw-bg-iron-950 tw-absolute tw-inset-0 tw-z-[100] tw-transform-gpu tw-will-change-transform">
<div className="tw-flex tw-items-center tw-px-2 lg:tw-px-8 tw-pt-[calc(env(safe-area-inset-top,0px)+0.75rem)] tw-pb-2">
<div className="@container tw-absolute tw-inset-0 tw-z-[100] tw-flex tw-h-full tw-transform-gpu tw-flex-col tw-bg-iron-950 tw-will-change-transform lg:tw-hidden">
<div className="tw-flex tw-items-center tw-px-2 tw-pb-2 tw-pt-[calc(env(safe-area-inset-top,0px)+0.75rem)] lg:tw-px-8">
<button
onClick={toggleChat}
className="tw-flex tw-items-center tw-rounded-lg tw-gap-2 tw-px-3 tw-py-2 tw-text-white/70 desktop-hover:hover:tw-text-white tw-transition-colors tw-bg-transparent tw-border-0"
className="tw-flex tw-items-center tw-gap-2 tw-rounded-lg tw-border-0 tw-bg-transparent tw-px-3 tw-py-2 tw-text-white/70 tw-transition-colors desktop-hover:hover:tw-text-white"
>
<ArrowLeftIcon className="tw-w-5 tw-h-5 tw-flex-shrink-0" />
<ArrowLeftIcon className="tw-h-5 tw-w-5 tw-flex-shrink-0" />
<span className="tw-text-sm tw-font-semibold">Close</span>
</button>
</div>

<div className="@container tw-flex tw-flex-col tw-flex-1 tw-overflow-hidden">
<div className="@container tw-flex tw-flex-1 tw-flex-col tw-overflow-hidden">
<SingleWaveDropChat key={drop.id} wave={wave} drop={drop} />
</div>
</div>
Expand Down
93 changes: 0 additions & 93 deletions components/waves/drops/ArtistSubmissionBadge.tsx
View file
Open in desktop

This file was deleted.

87 changes: 0 additions & 87 deletions components/waves/drops/ProfileWinnerBadge.tsx
View file
Open in desktop

This file was deleted.

Loading