improvement to prize winner message (#6784)

open-chat-labs · Nov 11, 2024 · f9d99fd · f9d99fd
1 parent a3f87f7
commit f9d99fd
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/frontend/app/src/components/home/ChatMessage.svelte b/frontend/app/src/components/home/ChatMessage.svelte
@@ -555,7 +555,6 @@
                         blockLevelMarkdown={msg.blockLevelMarkdown}
                         on:removePreview
                         on:registerVote={registerVote}
-                        on:goToMessageIndex
                         on:upgrade
                         on:startVideoCall
                         on:expandMessage />

diff --git a/frontend/app/src/components/home/ChatMessageContent.svelte b/frontend/app/src/components/home/ChatMessageContent.svelte
@@ -103,7 +103,7 @@
         {reply}
         {pinned} />
 {:else if content.kind === "prize_winner_content"}
-    <PrizeWinnerContent on:goToMessageIndex {content} />
+    <PrizeWinnerContent {content} />
 {:else if content.kind === "poll_content"}
     <PollContent {readonly} {me} {content} {myUserId} {senderId} on:registerVote />
 {:else if content.kind === "giphy_content"}

diff --git a/frontend/app/src/components/home/PrizeWinnerContent.svelte b/frontend/app/src/components/home/PrizeWinnerContent.svelte
@@ -2,11 +2,11 @@
     import Markdown from "./Markdown.svelte";
     import type { OpenChat, PrizeWinnerContent } from "openchat-client";
     import { userStore, currentUser as user, cryptoLookup } from "openchat-client";
-    import { createEventDispatcher, getContext } from "svelte";
+    import { getContext } from "svelte";
     import { _ } from "svelte-i18n";
     import SpinningToken from "../icons/SpinningToken.svelte";
+    import type { ProfileLinkClickedEvent } from "../web-components/profileLink";
 
-    const dispatch = createEventDispatcher();
     const client = getContext<OpenChat>("client");
 
     export let content: PrizeWinnerContent;
@@ -25,14 +25,22 @@
             : `${$userStore.get(userId)?.username ?? $_("unknown")}`;
     }
 
-    function zoomToMessage() {
-        dispatch("goToMessageIndex", {
-            index: content.prizeMessageIndex,
-        });
+    function openUserProfile(ev: Event) {
+        ev.target?.dispatchEvent(
+            new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
+                detail: {
+                    userId: content.transaction.recipient,
+                    chatButton: false,
+                    inGlobalContext: false,
+                },
+                bubbles: true,
+            }),
+        );
+        ev.stopPropagation();
     }
 </script>
 
-<div role="button" tabindex="0" class="msg" on:click={zoomToMessage}>
+<div class="msg">
     <div class="wrapper" class:other={!me}>
         <div class="graphic" class:tiny={!me}>
             {#if me}
@@ -46,7 +54,7 @@
             {/if}
         </div>
         <div class="txt" class:other={!me}>
-            <div class="label">
+            <div class="label" on:click={openUserProfile}>
                 <Markdown
                     text={$_("prizes.winner", {
                         values: { recipient: winner, amount, token: symbol },
@@ -63,7 +71,6 @@
 
 <style lang="scss">
     .msg {
-        cursor: pointer;
         text-align: center;
         padding-top: $sp2;
     }
@@ -79,6 +86,7 @@
     }
 
     .label {
+        cursor: pointer;
         @include font(book, normal, fs-100);
     }