@streamlayer/react-ui 0.80.1 → 0.81.1

package/lib/ui/app/Features/Gamification/Leaderboard.d.ts

@@ -2,4 +2,5 @@
 import type { Gamification } from '@streamlayer/feature-gamification';
 export declare const Leaderboard: React.FC<{
     gamification: Gamification;
+    hideTabs: (hide: boolean) => void;
 }>;

package/lib/ui/app/Features/Gamification/Leaderboard.js

@@ -1,7 +1,9 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useStore as o } from "@nanostores/react";
-import { LeaderboardList as p } from "../../../gamification/leaderboard/index.js";
-import { Friends as m } from "./Friends.js";
+import { jsx as l } from "react/jsx-runtime";
+import { useStore as i } from "@nanostores/react";
+import n from "lodash.throttle";
+import { useRef as p, useCallback as c } from "react";
+import { LeaderboardList as f } from "../../../gamification/leaderboard/index.js";
+import { Friends as d } from "./Friends.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
@@ -10,22 +12,27 @@ import "../../../../utils/common.js";
 import "../../../gamification/leaderboard/list-item/styles.js";
 import "@linaria/react";
 import "../../../icons/index.js";
-import "react";
 import "../../../gamification/leaderboard/styles.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
-const j = ({ gamification: r }) => {
-  const { data: e } = o(r.leaderboardList.$store);
-  return e != null && e.length ? /* @__PURE__ */ t(
-    p,
+const F = ({ gamification: r, hideTabs: o }) => {
+  const { data: e } = i(r.leaderboardList.$store), s = p(0), m = c(
+    n((t) => {
+      Math.abs(s.current - t.scrollOffset) < 112 || (s.current = t.scrollOffset, o(t.scrollOffset !== 0 && t.scrollDirection === "forward"));
+    }, 200),
+    [o]
+  );
+  return e != null && e.length ? /* @__PURE__ */ l(
+    f,
     {
       fetchMore: r.leaderboardList.fetchMore,
       items: e,
+      onScroll: m,
       openItemDetail: r.openUser,
       currentUserId: r.currentUserId.get()
     }
-  ) : /* @__PURE__ */ t(m, { deepLink: r.deepLink });
+  ) : /* @__PURE__ */ l(d, { deepLink: r.deepLink });
 };
 export {
-  j as Leaderboard
+  F as Leaderboard
 };

package/lib/ui/app/Features/Gamification/Tabs.js

@@ -1,10 +1,11 @@
-import { jsx as r, jsxs as m, Fragment as s } from "react/jsx-runtime";
-import { useState as n } from "react";
-import { SDKScrollContainer as d, SDKWhiteContainer as p, SDKContentContainer as a } from "../../styles.js";
-import { ActivePages as i, Tabs as l } from "../../../gamification/tabs/index.js";
-import { Leaderboard as c } from "./Leaderboard.js";
-import { QuestionsList as h } from "./QuestionsList.js";
-import { UserSummary as u } from "./UserSummary.js";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import S from "lodash.throttle";
+import { useState as d, useRef as u, useTransition as E, useCallback as y, useEffect as C } from "react";
+import { SDKWhiteContainer as f, SDKScrollContainer as D, SDKContentContainer as L } from "../../styles.js";
+import { ActivePages as s, Tabs as A } from "../../../gamification/tabs/index.js";
+import { Leaderboard as P } from "./Leaderboard.js";
+import { QuestionsList as R } from "./QuestionsList.js";
+import { UserSummary as w } from "./UserSummary.js";
 import "@linaria/react";
 import "../../../gamification/tabs/styles.js";
 import "@nanostores/react";
@@ -46,49 +47,76 @@ import "../../../gamification/user-statistics/components/rank/styles.js";
 import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
-const dr = ({
-  gamification: t
+const Lr = ({
+  gamification: i
 }) => {
-  const [o, e] = n(i.HOME);
-  return /* @__PURE__ */ r("div", {
+  const [h, b] = d(!1), [o, T] = d(s.HOME), m = u(null), e = u(0), [g, l] = E(), v = (r) => {
+    l(() => T(r));
+  }, p = (r) => {
+    l(() => b(r));
+  }, c = y(S(() => {
+    const r = m.current;
+    if (!r)
+      return;
+    const {
+      scrollTop: n
+    } = r;
+    if (n === 0) {
+      e.current = 0, p(!1);
+      return;
+    }
+    if (Math.abs(e.current - n) < 112)
+      return;
+    const x = e.current < n ? "forward" : "backward";
+    e.current = n, p(x === "forward");
+  }, 200), []);
+  return C(() => {
+    const r = m.current;
+    return r ? (o === s.HOME && r.addEventListener("scroll", c), () => {
+      r.removeEventListener("scroll", c);
+    }) : () => {
+    };
+  }, [o, c]), /* @__PURE__ */ a("div", {
     style: {
       height: "100%",
       display: "flex",
       flexDirection: "column",
       overflow: "hidden"
     },
-    children: /* @__PURE__ */ m(d, {
-      children: [/* @__PURE__ */ r(p, {
+    children: [g, /* @__PURE__ */ t(f, {
+      style: {
+        paddingBottom: "4px",
+        transition: "margin-top 0.2s ease-in-out",
+        marginTop: h ? "-56px" : "0px"
+      },
+      children: /* @__PURE__ */ t(A, {
+        activePage: o,
+        toggleActivePage: v
+      })
+    }), o === s.HOME && /* @__PURE__ */ a(D, {
+      ref: m,
+      children: [/* @__PURE__ */ t(f, {
         style: {
-          paddingBottom: "4px"
+          paddingTop: "12px"
         },
-        children: /* @__PURE__ */ r(l, {
-          activePage: o,
-          toggleActivePage: e
+        children: /* @__PURE__ */ t(w, {
+          userSummary: i.userSummary
         })
-      }), o === i.HOME && /* @__PURE__ */ m(s, {
-        children: [/* @__PURE__ */ r(p, {
-          style: {
-            paddingTop: "12px"
-          },
-          children: /* @__PURE__ */ r(u, {
-            userSummary: t.userSummary
-          })
-        }), /* @__PURE__ */ r(a, {
-          children: /* @__PURE__ */ r(h, {
-            openQuestion: t.openQuestion,
-            store: t.feedList.getStore()
-          })
-        })]
-      }), o === i.LEADERBOARD && /* @__PURE__ */ r("div", {
-        className: "c1bp9dj2",
-        children: /* @__PURE__ */ r(c, {
-          gamification: t
+      }), /* @__PURE__ */ t(L, {
+        children: /* @__PURE__ */ t(R, {
+          openQuestion: i.openQuestion,
+          store: i.feedList.getStore()
         })
       })]
-    })
+    }), o === s.LEADERBOARD && /* @__PURE__ */ t("div", {
+      className: "c1bp9dj2",
+      children: /* @__PURE__ */ t(P, {
+        gamification: i,
+        hideTabs: p
+      })
+    })]
   });
 };
 export {
-  dr as Tabs
+  Lr as Tabs
 };

package/lib/ui/app/Features/Gamification/gamification-feature.js

@@ -48,6 +48,7 @@ import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "../../../gamification/vote/twitter-details/styles.js";
 import "./Tabs.js";
+import "lodash.throttle";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";

package/lib/ui/app/Features/Gamification/index.js

@@ -47,6 +47,7 @@ import "../../../questions/twitter/account/index.js";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "../../../gamification/vote/twitter-details/styles.js";
+import "lodash.throttle";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
@@ -86,7 +87,7 @@ const C = () => h, n = /* @__PURE__ */ s(C())({
 }) => {
   const i = r + t;
   return i === 0 ? 0 : Math.round(r / i * 100);
-}, Vr = ({
+}, Wr = ({
   gamification: r,
   className: t
 }) => {
@@ -120,5 +121,5 @@ const C = () => h, n = /* @__PURE__ */ s(C())({
   });
 };
 export {
-  Vr as GamificationOverlay
+  Wr as GamificationOverlay
 };

package/lib/ui/gamification/leaderboard/index.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { ListProps } from 'react-window';
 import { LeaderboardItemProps } from '../../gamification/leaderboard/list-item';
 type LeaderboardListProps = {
     items: Omit<LeaderboardItemProps, 'openItemDetail'>[];
     currentUserId?: string;
     openItemDetail: (id: string) => void;
     fetchMore: () => void;
+    onScroll?: ListProps['onScroll'];
 };
 export declare const LeaderboardList: React.FC<LeaderboardListProps>;
 export {};

package/lib/ui/gamification/leaderboard/index.js

@@ -1,38 +1,40 @@
 import { jsx as o } from "react/jsx-runtime";
-import h from "react-virtualized-auto-sizer";
-import { FixedSizeList as u } from "react-window";
-import f from "react-window-infinite-loader";
-import { LeaderboardItem as I } from "./list-item/index.js";
-import { ScrollContainer as L } from "./styles.js";
+import u from "react-virtualized-auto-sizer";
+import { FixedSizeList as f } from "react-window";
+import I from "react-window-infinite-loader";
+import { LeaderboardItem as L } from "./list-item/index.js";
+import { ScrollContainer as c } from "./styles.js";
 import "../../../utils/common.js";
 import "./list-item/styles.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
-const D = ({
+const F = ({
   items: r,
   currentUserId: i,
   openItemDetail: m,
-  fetchMore: n
-}) => /* @__PURE__ */ o(h, { children: ({ width: p, height: d }) => /* @__PURE__ */ o(
-  f,
+  fetchMore: n,
+  onScroll: p
+}) => /* @__PURE__ */ o(u, { children: ({ width: d, height: l }) => /* @__PURE__ */ o(
+  I,
   {
     isItemLoaded: (e) => e < r.length,
     itemCount: r.length + 1,
     loadMoreItems: n,
-    children: ({ onItemsRendered: e, ref: l }) => /* @__PURE__ */ o(L, { children: /* @__PURE__ */ o(
-      u,
+    children: ({ onItemsRendered: e, ref: a }) => /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(
+      f,
       {
         itemSize: 56,
+        onScroll: p,
         onItemsRendered: e,
-        ref: l,
+        ref: a,
         itemCount: r.length,
-        width: p,
-        height: d,
-        children: ({ index: t, style: a }) => /* @__PURE__ */ o(
-          I,
+        width: d,
+        height: l,
+        children: ({ index: t, style: h }) => /* @__PURE__ */ o(
+          L,
           {
-            style: { ...a, maxHeight: 48 },
+            style: { ...h, maxHeight: 48 },
             ...r[t],
             openItemDetail: () => m(r[t].userId),
             isCurrentUser: !!i && i === r[t].userId
@@ -44,5 +46,5 @@ const D = ({
   }
 ) });
 export {
-  D as LeaderboardList
+  F as LeaderboardList
 };

package/lib/ui/gamification/vote/feedback/index.d.ts

@@ -15,6 +15,7 @@ interface FeedbackProps {
     votedInCurrentRender: boolean;
     votedAfterQuestionClosed: boolean;
     enteredAnActiveQuestion: boolean;
+    marketClosed: boolean;
 }
 export declare const Feedback: React.FC<FeedbackProps>;
 export {};

package/lib/ui/gamification/vote/feedback/index.js

@@ -1,65 +1,66 @@
-import { jsxs as r, Fragment as o, jsx as i } from "react/jsx-runtime";
-import { QuestionType as t, QuestionStatus as R } from "@streamlayer/sdk-web-types";
+import { jsxs as r, Fragment as t, jsx as i } from "react/jsx-runtime";
+import { QuestionType as n, QuestionStatus as Q } from "@streamlayer/sdk-web-types";
 import { SvgIcon as l } from "../../../icons/index.js";
-import { Container as L, FeedbackIconWrap as h, FeedbackHeader as a, FeedbackDescription as d, FeedbackText as s, IconPrediction as N, FeedbackTitle as Q } from "./styles.js";
+import { Container as f, FeedbackIconWrap as h, FeedbackHeader as p, FeedbackDescription as d, FeedbackText as s, IconPrediction as L, FeedbackTitle as j } from "./styles.js";
 import "@linaria/react";
 import "react";
-const Y = ({
+const B = ({
   feedbackMessages: e,
-  questionVotedCorrectly: P,
-  questionVoted: m,
-  questionType: n,
-  hasCorrectAnswer: u,
-  questionStatus: E,
-  showExpiredNotification: I,
+  questionVotedCorrectly: I,
+  questionVoted: a,
+  questionType: c,
+  hasCorrectAnswer: F,
+  questionStatus: S,
+  showExpiredNotification: u,
   showClosedNotificationTrivia: w,
-  votedInCurrentRender: p,
-  votedAfterQuestionClosed: S,
-  enteredAnActiveQuestion: x
+  votedInCurrentRender: m,
+  votedAfterQuestionClosed: y,
+  enteredAnActiveQuestion: E,
+  marketClosed: N
 }) => {
-  const T = m && (n === t.TRIVIA || n === t.PREDICTION) && p && E !== R.RESOLVED, b = n === t.PREDICTION && !u, k = E === R.RESOLVED && n === t.PREDICTION && !m && !x || n === t.PREDICTION && S && p && x, D = T && b, O = T && u, y = m && n === t.POLL && p;
-  if (!I && !w && !D && !O && !k && !y)
+  const b = a && (c === n.TRIVIA || c === n.PREDICTION) && m && S !== Q.RESOLVED, x = c === n.PREDICTION && !F, T = N && c === n.PREDICTION && !a && !E || c === n.PREDICTION && y && m && E, k = b && x, D = b && F, O = c === n.PREDICTION && a && m && F, R = a && c === n.POLL && m;
+  if (!u && !w && !k && !D && !T && !R && !O)
     return null;
-  const F = P ? "correct" : "incorrect", c = P ? e == null ? void 0 : e.correctFeedback : e == null ? void 0 : e.incorrectFeedback;
-  return /* @__PURE__ */ r(L, { "data-isPrediction": b, children: [
-    I && /* @__PURE__ */ r(o, { children: [
+  const P = I ? "correct" : "incorrect", o = I ? e == null ? void 0 : e.correctFeedback : e == null ? void 0 : e.incorrectFeedback;
+  return /* @__PURE__ */ r(f, { "data-isPrediction": x, children: [
+    u && /* @__PURE__ */ r(t, { children: [
       /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(l, { name: "questionExpired" }) }),
       /* @__PURE__ */ r("div", { children: [
-        /* @__PURE__ */ i(a, { children: /* @__PURE__ */ i(d, { children: "Question Expired" }) }),
+        /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i(d, { children: "Question Expired" }) }),
         /* @__PURE__ */ i(s, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
       ] })
     ] }),
-    w && /* @__PURE__ */ r(o, { children: [
+    w && /* @__PURE__ */ r(t, { children: [
       /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(l, { name: "questionExpired" }) }),
       /* @__PURE__ */ r("div", { children: [
-        /* @__PURE__ */ i(a, { children: /* @__PURE__ */ i(d, { children: "Question Closed" }) }),
+        /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i(d, { children: "Question Closed" }) }),
         /* @__PURE__ */ i(s, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
       ] })
     ] }),
-    k && /* @__PURE__ */ r(o, { children: [
+    T && /* @__PURE__ */ r(t, { children: [
       /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(l, { name: "questionExpired" }) }),
       /* @__PURE__ */ r("div", { children: [
-        /* @__PURE__ */ i(a, { children: /* @__PURE__ */ i(d, { children: "Question Closed" }) }),
+        /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i(d, { children: "Question Closed" }) }),
         /* @__PURE__ */ i(s, { children: "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
       ] })
     ] }),
-    D && /* @__PURE__ */ r(o, { children: [
-      /* @__PURE__ */ i(N, { name: "icon-prediction" }),
+    k && /* @__PURE__ */ r(t, { children: [
+      /* @__PURE__ */ i(L, { name: "icon-prediction" }),
       /* @__PURE__ */ i(d, { children: "Stay tuned to see if your prediction was correct." })
     ] }),
-    y && /* @__PURE__ */ r(o, { children: [
+    R && /* @__PURE__ */ r(t, { children: [
       /* @__PURE__ */ i(h, { "data-feedbackType": "correct", children: /* @__PURE__ */ i(l, { name: "correct" }) }),
       /* @__PURE__ */ i(d, { children: "That's for answering. Please stay tuned for the next question." })
     ] }),
-    O && /* @__PURE__ */ r(o, { children: [
-      /* @__PURE__ */ i(h, { "data-feedbackType": F, children: /* @__PURE__ */ i(l, { name: F }) }),
-      /* @__PURE__ */ i("div", { children: /* @__PURE__ */ r(a, { children: [
-        /* @__PURE__ */ i(Q, { "data-feedbackType": F, children: c == null ? void 0 : c.title }),
-        /* @__PURE__ */ i(d, { children: c == null ? void 0 : c.description })
+    (D || O) && /* @__PURE__ */ r(t, { children: [
+      /* @__PURE__ */ i(h, { "data-feedbackType": P, children: /* @__PURE__ */ i(l, { name: P }) }),
+      /* @__PURE__ */ i("div", { children: /* @__PURE__ */ r(p, { children: [
+        /* @__PURE__ */ i(j, { "data-feedbackType": P, children: o == null ? void 0 : o.title }),
+        /* @__PURE__ */ i(d, { children: o == null ? void 0 : o.description })
       ] }) })
     ] })
   ] });
 };
 export {
-  Y as Feedback
+  B as Feedback
 };

package/lib/ui/gamification/vote/index.js

@@ -1,12 +1,12 @@
-import { jsx as c, jsxs as D, Fragment as K } from "react/jsx-runtime";
-import { useState as l, useEffect as Y, useCallback as p, useMemo as m } from "react";
-import { QuestionStatus as V, QuestionType as o } from "@streamlayer/sdk-web-types";
-import { SDKScrollContainer as z } from "../../app/styles.js";
-import { ExpiredAlert as G } from "./expired-alert/index.js";
-import { Feedback as J } from "./feedback/index.js";
-import { Container as U, Content as X, Title as Z, Options as _ } from "./styles.js";
-import { VotingOption as $ } from "./vote-option/index.js";
-import { WinBar as Q } from "./win-bar/index.js";
+import { jsx as a, jsxs as g, Fragment as Y } from "react/jsx-runtime";
+import { useState as T, useEffect as z, useCallback as A, useMemo as o } from "react";
+import { QuestionType as c, QuestionStatus as w } from "@streamlayer/sdk-web-types";
+import { SDKScrollContainer as G } from "../../app/styles.js";
+import { ExpiredAlert as J } from "./expired-alert/index.js";
+import { Feedback as U } from "./feedback/index.js";
+import { Container as X, Content as Z, Title as _, Options as $ } from "./styles.js";
+import { VotingOption as Q } from "./vote-option/index.js";
+import { WinBar as tt } from "./win-bar/index.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "./expired-alert/styles.js";
@@ -18,104 +18,106 @@ import "../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "./win-bar/styles.js";
-const pt = ({ openedQuestion: t, isLoading: y, vote: v, close: C }) => {
-  var S, q;
-  const g = t.subject, T = t.type, a = t.status, E = (S = t.options) == null ? void 0 : S.options, [d, b] = l(!1), [h, N] = l(!1), [n, P] = l(!0), [e, k] = l(!1), [u, x] = l(""), I = t == null ? void 0 : t.id;
-  Y(() => {
-    a === V.RESOLVED && P(!1);
+const At = ({ openedQuestion: t, isLoading: I, vote: v, close: p }) => {
+  var D, k;
+  const N = t.subject, l = t.type, e = t.status, E = (D = t.options) == null ? void 0 : D.options, V = t.marketClosed, [R, P] = T(!1), [y, b] = T(!1), [n, u] = T(!0), [s, L] = T(!1), [x, O] = T(""), d = t == null ? void 0 : t.id;
+  z(() => {
+    l === c.PREDICTION ? V && u(!1) : e === w.RESOLVED && u(!1);
   }, []);
-  const L = p((i) => {
-    N(i), b(!0);
-  }, []), R = p(
+  const M = A((i) => {
+    b(i), P(!0);
+  }, []), q = A(
     async (i) => {
-      if (I) {
+      if (d) {
         const f = i.currentTarget.value;
-        x(f), await v(I, f);
+        O(f), await v(d, f);
       }
     },
-    [I, x, v]
-  ), M = p(() => {
-    k(!0), setTimeout(C, 3e3);
-  }, [C]), r = m(
+    [d, O, v]
+  ), j = A(() => {
+    L(!0), setTimeout(p, 3e3);
+  }, [p]), r = o(
     () => t == null ? void 0 : t.answers.find((i) => i.youVoted === !0),
     [t]
-  ), A = m(
+  ), h = o(
     () => !!(t != null && t.answers.find((i) => i.correct === !0)),
     [t]
-  ), w = m(
+  ), C = o(
     () => t == null ? void 0 : t.answers.find((i) => i.correct === !0),
     [t]
-  ), j = m(() => t ? t.answers.map((i) => {
+  ), B = o(() => t ? t.answers.map((i) => {
     var f;
     return {
       ...i,
       questionVoted: !!r,
-      youSelected: u === i.id,
-      isLoading: y,
-      hasCorrectAnswer: A,
+      youSelected: x === i.id,
+      isLoading: I,
+      hasCorrectAnswer: h,
       questionType: t.type,
-      answerTimeExpired: e,
-      questionStatus: a,
+      answerTimeExpired: s,
+      questionStatus: e,
       imageMode: (f = t.appearance) == null ? void 0 : f.images,
-      onVote: R
+      onVote: q
     };
   }) : [], [
-    A,
-    e,
-    y,
+    h,
+    s,
+    I,
     t,
     r,
-    a,
-    R,
-    u
-  ]), B = E && (E.case === "trivia" || E.case === "prediction") ? E.value : void 0, s = a === V.RESOLVED && T === o.TRIVIA && !r && !n, O = T === o.TRIVIA && h && d && n, F = m(() => {
-    if (!(s || e))
-      return a === V.RESOLVED ? 0 : r ? r.correct ? r.points : 0 : w == null ? void 0 : w.points;
-  }, [e, r, w, a, s]), W = m(() => s || e ? "Time expired" : t.type === o.POLL ? "Time remaining" : r ? "You won" : "To win", [e, t.type, r, s]), H = r || s || O || T === o.TRIVIA && a === V.RESOLVED && n;
-  return /* @__PURE__ */ c(z, { "data-question-header": "true", children: /* @__PURE__ */ c(U, { children: /* @__PURE__ */ D(X, { children: [
-    /* @__PURE__ */ c(
-      J,
+    e,
+    q,
+    x
+  ]), F = E && (E.case === "trivia" || E.case === "prediction") ? E.value : void 0, m = e === w.RESOLVED && l === c.TRIVIA && !r && !n, S = l === c.TRIVIA && y && R && n, W = o(() => {
+    if (!(m || s))
+      return e === w.RESOLVED ? 0 : r ? r.correct ? r.points : 0 : C == null ? void 0 : C.points;
+  }, [s, r, C, e, m]), H = o(() => m || s ? "Time expired" : t.type === c.POLL ? "Time remaining" : r ? "You won" : "To win", [s, t.type, r, m]), K = r || m || S || l === c.TRIVIA && e === w.RESOLVED && n;
+  return /* @__PURE__ */ a(G, { "data-question-header": "true", children: /* @__PURE__ */ a(X, { children: /* @__PURE__ */ g(Z, { children: [
+    /* @__PURE__ */ a(
+      U,
       {
-        feedbackMessages: B,
+        feedbackMessages: F,
         questionVoted: !!r,
         questionVotedCorrectly: r == null ? void 0 : r.correct,
-        questionType: T,
-        hasCorrectAnswer: A,
-        questionStatus: a,
-        showExpiredNotification: s,
-        showClosedNotificationTrivia: O,
-        votedInCurrentRender: d,
-        votedAfterQuestionClosed: h,
-        enteredAnActiveQuestion: n
+        questionType: l,
+        hasCorrectAnswer: h,
+        questionStatus: e,
+        showExpiredNotification: m,
+        showClosedNotificationTrivia: S,
+        votedInCurrentRender: R,
+        votedAfterQuestionClosed: y,
+        enteredAnActiveQuestion: n,
+        marketClosed: V
       }
     ),
-    t.type !== o.PREDICTION && /* @__PURE__ */ c(
-      Q,
+    t.type !== c.PREDICTION && /* @__PURE__ */ a(
+      tt,
       {
-        title: W,
-        points: F,
-        onTimerExpired: M,
+        title: H,
+        points: W,
+        onTimerExpired: j,
         questionType: t.type,
-        isTimer: !y,
+        isTimer: !I,
         isPlayingTimer: !r,
-        timerDuration: H ? 0 : Number(((q = t == null ? void 0 : t.appearance) == null ? void 0 : q.autoHideInterval) || "30")
+        timerDuration: K ? 0 : Number(((k = t == null ? void 0 : t.appearance) == null ? void 0 : k.autoHideInterval) || "30")
       }
     ),
-    e ? /* @__PURE__ */ c(
-      G,
+    s ? /* @__PURE__ */ a(
+      J,
       {
         title: "More to come...",
         description: "Watch for additional enhanced stream interactive experience."
       }
-    ) : /* @__PURE__ */ D(K, { children: [
-      /* @__PURE__ */ c(Z, { "data-isPrediction": t.type === o.PREDICTION, children: g }),
-      /* @__PURE__ */ c(_, { children: j.map((i) => /* @__PURE__ */ c(
-        $,
+    ) : /* @__PURE__ */ g(Y, { children: [
+      /* @__PURE__ */ a(_, { "data-isPrediction": t.type === c.PREDICTION, children: N }),
+      /* @__PURE__ */ a($, { children: B.map((i) => /* @__PURE__ */ a(
+        Q,
         {
           ...i,
-          markThatVoted: L,
-          votedAfterQuestionClosed: h,
-          enteredAnActiveQuestion: n
+          markThatVoted: M,
+          votedAfterQuestionClosed: y,
+          enteredAnActiveQuestion: n,
+          marketClosed: V
         },
         i.id
       )) })
@@ -123,5 +125,5 @@ const pt = ({ openedQuestion: t, isLoading: y, vote: v, close: C }) => {
   ] }) }) });
 };
 export {
-  pt as Vote
+  At as Vote
 };

package/lib/ui/gamification/vote/vote-option/index.d.ts

@@ -11,6 +11,7 @@ export type VotingOptionProps = ExtendedQuestionAnswer & {
     questionStatus: QuestionStatus;
     votedAfterQuestionClosed: boolean;
     enteredAnActiveQuestion: boolean;
+    marketClosed: boolean;
     onVote: (e: React.MouseEvent<HTMLButtonElement>) => void;
     markThatVoted: (votedAfterQuestionClosed: boolean) => void;
 };

package/lib/ui/gamification/vote/vote-option/index.js

@@ -1,76 +1,79 @@
-import { jsx as n, jsxs as f } from "react/jsx-runtime";
-import { QuestionImages as s, QuestionStatus as I, QuestionType as c } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as x } from "../../../animated-counter/index.js";
-import { IconDefault as L, IconContainer as Q, IconWrap as v, IconCircle as B, ButtonContainer as V, ButtonPct as b, ButtonBody as j, Title as U, Indicators as $, CheckIcon as M, Percentage as W } from "./styles.js";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { QuestionImages as s, QuestionType as i, QuestionStatus as p } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as L } from "../../../animated-counter/index.js";
+import { IconDefault as Q, IconContainer as v, IconWrap as B, IconCircle as V, ButtonContainer as b, ButtonPct as j, ButtonBody as U, Title as $, Indicators as M, CheckIcon as W, Percentage as y } from "./styles.js";
 import "react-countup";
 import "@linaria/react";
 import "../../../icons/index.js";
 import "react";
-const m = {
-  [s.CENTERED]: (t) => /* @__PURE__ */ n(L, { alt: "option-icon", src: t }),
-  [s.TRANSPARENT]: (t) => /* @__PURE__ */ n(Q, { children: /* @__PURE__ */ n(v, { style: { backgroundImage: `url(${t})` } }) }),
-  [s.ROUNDED]: (t) => /* @__PURE__ */ n(B, { alt: "option-icon", src: t }),
+const I = {
+  [s.CENTERED]: (t) => /* @__PURE__ */ r(Q, { alt: "option-icon", src: t }),
+  [s.TRANSPARENT]: (t) => /* @__PURE__ */ r(v, { children: /* @__PURE__ */ r(B, { style: { backgroundImage: `url(${t})` } }) }),
+  [s.ROUNDED]: (t) => /* @__PURE__ */ r(V, { alt: "option-icon", src: t }),
   [s.NONE]: () => null,
   [s.UNSET]: () => null
-}, y = ({ questionType: t, hasCorrectAnswer: i, correct: e, youVoted: r, questionVoted: o }) => {
-  if (t === c.POLL && r)
+}, z = ({ questionType: t, hasCorrectAnswer: c, correct: e, youVoted: n, questionVoted: o }) => {
+  if (t === i.POLL && n)
     return "correct";
-  if (t === c.PREDICTION) {
-    if (i && o)
-      return r ? e ? "correct" : "incorrect" : "unset";
-    if (r)
+  if (t === i.PREDICTION) {
+    if (c && o)
+      return n ? e ? "correct" : "incorrect" : "unset";
+    if (n)
       return "correct";
   }
-  return t === c.TRIVIA && o && r ? e ? "correct" : "incorrect" : "unset";
-}, z = ({
+  return t === i.TRIVIA && o && n ? e ? "correct" : "incorrect" : "unset";
+}, F = ({
   questionType: t,
-  questionVoted: i,
+  questionVoted: c,
   correct: e,
-  hasCorrectAnswer: r,
+  hasCorrectAnswer: n,
   questionStatus: o
-}) => t === c.TRIVIA ? i && e : t === c.PREDICTION ? i && e && r || o === I.RESOLVED && e : !1, q = (t) => {
-  var R;
+}) => t === i.TRIVIA ? c && e : t === i.PREDICTION ? c && e && n || o === p.RESOLVED && e : !1, tt = (t) => {
+  var S;
   const {
     // option props
-    id: i,
+    id: c,
     icon: e,
-    text: r,
+    text: n,
     percentageDecimal: o,
     // extra props
-    onVote: p,
+    onVote: T,
     markThatVoted: D,
-    youSelected: E,
+    youSelected: f,
     questionVoted: a,
     // ToDo: Figure out why imageMode is not in the response, and delete default value
-    imageMode: h,
-    answerTimeExpired: T,
-    questionStatus: d,
-    isLoading: g,
-    questionType: C,
-    correct: w,
-    hasCorrectAnswer: A,
-    votedAfterQuestionClosed: O,
-    enteredAnActiveQuestion: S
-  } = t, l = y(t), P = z({ questionType: C, questionVoted: a, correct: w, hasCorrectAnswer: A, questionStatus: d }), u = d === I.RESOLVED && C === c.PREDICTION, N = a || u;
-  return /* @__PURE__ */ f(
-    V,
+    imageMode: C,
+    answerTimeExpired: g,
+    questionStatus: h,
+    isLoading: w,
+    questionType: d,
+    correct: A,
+    hasCorrectAnswer: O,
+    votedAfterQuestionClosed: P,
+    enteredAnActiveQuestion: E,
+    marketClosed: N
+  } = t, l = z(t), k = F({ questionType: d, questionVoted: a, correct: A, hasCorrectAnswer: O, questionStatus: h }), u = N && d === i.PREDICTION, R = a || u;
+  return /* @__PURE__ */ m(
+    b,
     {
-      value: i,
-      "data-selected": E,
+      value: c,
+      "data-selected": f,
       "data-answerState": l,
-      disabled: a || g || T || u && !S || u && S && O,
-      "data-isNotChecked": a && !E && l !== "incorrect",
-      onClick: (k) => {
-        D(d === I.RESOLVED), p(k);
+      disabled: a || w || g || u && !E || u && E && P,
+      "data-isNotChecked": a && !f && l !== "incorrect",
+      onClick: (x) => {
+        D(
+          d === i.PREDICTION ? N : h === p.RESOLVED
+        ), T(x);
       },
       children: [
-        /* @__PURE__ */ n(b, { "data-answerState": l, style: { width: `${N ? o : 0}%` } }),
-        /* @__PURE__ */ f(j, { children: [
-          e && h && ((R = m[h]) == null ? void 0 : R.call(m, e)),
-          /* @__PURE__ */ n(U, { children: r }),
-          N && /* @__PURE__ */ f($, { children: [
-            P && /* @__PURE__ */ n(M, { name: "selected" }),
-            /* @__PURE__ */ n(W, { children: /* @__PURE__ */ n(x, { value: o, suffix: "%" }) })
+        /* @__PURE__ */ r(j, { "data-answerState": l, style: { width: `${R ? o : 0}%` } }),
+        /* @__PURE__ */ m(U, { children: [
+          e && C && ((S = I[C]) == null ? void 0 : S.call(I, e)),
+          /* @__PURE__ */ r($, { children: n }),
+          R && /* @__PURE__ */ m(M, { children: [
+            k && /* @__PURE__ */ r(W, { name: "selected" }),
+            /* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(L, { value: o, suffix: "%" }) })
           ] })
         ] })
       ]
@@ -78,5 +81,5 @@ const m = {
   );
 };
 export {
-  q as VotingOption
+  tt as VotingOption
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.80.1",
+  "version": "0.81.1",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -37,19 +37,21 @@
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "*",
     "@streamlayer/sl-eslib": "^5.53.6",
+    "@types/lodash.throttle": "^4.1.9",
+    "lodash.throttle": "^4.1.1",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.30.0",
+    "@streamlayer/feature-gamification": "^0.30.1",
     "@streamlayer/sdk-web": "^0.29.5",
     "@streamlayer/sdk-web-anonymous-auth": "^0.11.30",
     "@streamlayer/sdk-web-api": "^0.1.0",
-    "@streamlayer/sdk-web-features": "^0.11.0",
     "@streamlayer/sdk-web-core": "^0.1.0",
-    "@streamlayer/sdk-web-interfaces": "^0.18.16",
-    "@streamlayer/sdk-web-notifications": "^0.1.0",
-    "@streamlayer/sdk-web-storage": "^0.0.4",
+    "@streamlayer/sdk-web-features": "^0.11.1",
+    "@streamlayer/sdk-web-interfaces": "^0.18.17",
     "@streamlayer/sdk-web-logger": "^0.0.1",
+    "@streamlayer/sdk-web-notifications": "^0.0.1",
+    "@streamlayer/sdk-web-storage": "^0.0.4",
     "@streamlayer/sdk-web-types": "^0.1.0"
   },
   "nx": {
@@ -90,6 +92,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.32.11"
+    "@streamlayer/react": "^0.33.1"
   }
 }