From 906927498a07e8d605fcc520334e76b29c8554e3 Mon Sep 17 00:00:00 2001
From: Malik Zulqurnain <malikzulqurnain2121@gmail.com>
Date: Mon, 13 Jan 2025 19:05:34 +0500
Subject: [PATCH 1/6] Added XP progress bar in header

---
 .../client/scripts/helpers/feature-flags.ts   |  1 +
 .../DesktopHeader/DesktopHeader.tsx           |  3 ++
 .../XPProgressIndicator.scss                  | 53 +++++++++++++++++++
 .../XPProgressIndicator.tsx                   | 46 ++++++++++++++++
 .../XPProgressIndicator/index.ts              |  3 ++
 packages/commonwealth/client/vite.config.ts   |  1 +
 6 files changed, 107 insertions(+)
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.scss
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.tsx
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/index.ts

diff --git a/packages/commonwealth/client/scripts/helpers/feature-flags.ts b/packages/commonwealth/client/scripts/helpers/feature-flags.ts
index d55dd93e7e5..43ca679d77c 100644
--- a/packages/commonwealth/client/scripts/helpers/feature-flags.ts
+++ b/packages/commonwealth/client/scripts/helpers/feature-flags.ts
@@ -34,6 +34,7 @@ const featureFlags = {
   stickyEditor: buildFlag(process.env.FLAG_STICKY_EDITOR),
   newMobileNav: buildFlag(process.env.FLAG_NEW_MOBILE_NAV),
   rewardsPage: buildFlag(process.env.FLAG_REWARDS_PAGE),
+  xp: buildFlag(process.env.FLAG_XP),
 };
 
 export type AvailableFeatureFlag = keyof typeof featureFlags;
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx
index 8751e07d37b..581646ec665 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx
@@ -22,6 +22,7 @@ import AuthButtons from 'views/components/SublayoutHeader/AuthButtons';
 import { AuthModalType } from 'views/modals/AuthModal';
 import { capDecimals } from 'views/modals/ManageCommunityStakeModal/utils';
 import { CWText } from '../../component_kit/cw_text';
+import XPProgressIndicator from '../XPProgressIndicator';
 import './DesktopHeader.scss';
 
 interface DesktopHeaderProps {
@@ -32,6 +33,7 @@ interface DesktopHeaderProps {
 const DesktopHeader = ({ onMobile, onAuthModalOpen }: DesktopHeaderProps) => {
   const navigate = useCommonNavigate();
   const rewardsEnabled = useFlag('rewardsPage');
+  const xpEnabled = useFlag('xp');
   const { menuVisible, setMenu, menuName, setUserToggledVisibility } =
     useSidebarStore();
   const user = useUserStore();
@@ -87,6 +89,7 @@ const DesktopHeader = ({ onMobile, onAuthModalOpen }: DesktopHeaderProps) => {
               isLoggedIn: user.isLoggedIn,
             })}
           >
+            {xpEnabled && <XPProgressIndicator />}
             <CreateContentPopover />
             {!isWindowSmallInclusive(window.innerWidth) && (
               <CWTooltip
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.scss b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.scss
new file mode 100644
index 00000000000..6d432464fca
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.scss
@@ -0,0 +1,53 @@
+@import '../../../../styles/shared';
+
+.XPProgressIndicator {
+  all: unset;
+  min-width: 150px;
+  width: 200px;
+  max-width: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  padding: 4px;
+
+  &:focus,
+  &:focus-within {
+    outline: none !important;
+  }
+
+  &:hover {
+    background-color: $neutral-100;
+    cursor: pointer;
+    border-radius: 6px;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 0 4px;
+
+    .caption {
+      font-size: 10px !important;
+      color: $primary-500 !important;
+    }
+  }
+
+  .progress-bar {
+    height: 10px;
+    width: 100%;
+    border: 1px solid $neutral-100;
+
+    &::-webkit-progress-bar {
+      background-color: $neutral-200;
+      border-radius: $border-radius-corners;
+    }
+
+    &::-webkit-progress-value {
+      background-color: $primary-400;
+      border-radius: $border-radius-corners;
+    }
+  }
+}
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.tsx
new file mode 100644
index 00000000000..9c99b1f2a4a
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.tsx
@@ -0,0 +1,46 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import useUserStore from 'state/ui/user';
+import { CWText } from '../../component_kit/cw_text';
+import './XPProgressIndicator.scss';
+
+type XPProgressIndicatorProps = {
+  className?: string;
+};
+
+const XPProgressIndicator = ({ className }: XPProgressIndicatorProps) => {
+  const sampleData = {
+    weeklyGoal: {
+      current: 170,
+      target: 400,
+    },
+  };
+
+  const currentProgress = parseInt(
+    (
+      (sampleData.weeklyGoal.current / sampleData.weeklyGoal.target) *
+      100
+    ).toFixed(0),
+  );
+
+  const user = useUserStore();
+
+  if (!user.isLoggedIn) return;
+
+  return (
+    <button className={clsx('XPProgressIndicator', className)}>
+      <div className="header">
+        <CWText type="caption" fontWeight="semiBold">
+          Weekly XP Goal
+        </CWText>
+        <CWText type="caption" fontWeight="semiBold">
+          {sampleData.weeklyGoal.current} / {sampleData.weeklyGoal.target} XP
+        </CWText>
+      </div>
+      <progress className="progress-bar" value={currentProgress} max={100} />
+    </button>
+  );
+};
+
+export default XPProgressIndicator;
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/index.ts b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/index.ts
new file mode 100644
index 00000000000..f290554a713
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/index.ts
@@ -0,0 +1,3 @@
+import XPProgressIndicator from './XPProgressIndicator';
+
+export default XPProgressIndicator;
diff --git a/packages/commonwealth/client/vite.config.ts b/packages/commonwealth/client/vite.config.ts
index 315369001de..5b559795d5b 100644
--- a/packages/commonwealth/client/vite.config.ts
+++ b/packages/commonwealth/client/vite.config.ts
@@ -49,6 +49,7 @@ export default defineConfig(({ mode }) => {
     'process.env.FLAG_REWARDS_PAGE': JSON.stringify(env.FLAG_REWARDS_PAGE),
     'process.env.FLAG_STICKY_EDITOR': JSON.stringify(env.FLAG_STICKY_EDITOR),
     'process.env.FLAG_NEW_MOBILE_NAV': JSON.stringify(env.FLAG_NEW_MOBILE_NAV),
+    'process.env.FLAG_XP': JSON.stringify(env.FLAG_XP),
   };
 
   const config = {

From 70df2a93a0dee940e7e81eeca375b7b568c8bc6f Mon Sep 17 00:00:00 2001
From: Malik Zulqurnain <malikzulqurnain2121@gmail.com>
Date: Mon, 13 Jan 2025 19:18:46 +0500
Subject: [PATCH 2/6] Added progress indicator for mobile screens

---
 .../MobileHeader/MobileHeader.tsx             |  9 +++
 .../XPProgressIndicator.scss                  | 63 ++++++++++---------
 .../XPProgressIndicator.tsx                   | 26 +++++---
 .../XPProgressIndicator/index.ts              |  1 +
 .../XPProgressIndicator/types.ts              |  9 +++
 5 files changed, 73 insertions(+), 35 deletions(-)
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/types.ts

diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/MobileHeader/MobileHeader.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/MobileHeader/MobileHeader.tsx
index ab120df7e07..e4931650d91 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/MobileHeader/MobileHeader.tsx
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/MobileHeader/MobileHeader.tsx
@@ -18,6 +18,10 @@ import MobileSearchModal from 'views/modals/MobileSearchModal';
 import useUserMenuItems from '../useUserMenuItems';
 
 import { DOCS_SUBDOMAIN } from '@hicommonwealth/shared';
+import { useFlag } from 'hooks/useFlag';
+import XPProgressIndicator, {
+  XPProgressIndicatorMode,
+} from '../XPProgressIndicator';
 import './MobileHeader.scss';
 
 interface MobileHeaderProps {
@@ -35,6 +39,7 @@ const MobileHeader = ({
   const [isModalOpen, isSetModalOpen] = useState(false);
   const { menuVisible } = useSidebarStore();
   const userData = useUserStore();
+  const xpEnabled = useFlag('xp');
   const user = userData.addresses?.[0];
   const { isInviteLinkModalOpen, setIsInviteLinkModalOpen } =
     useInviteLinkModal();
@@ -78,6 +83,10 @@ const MobileHeader = ({
         )}
 
         <div className="right-side">
+          {xpEnabled && (
+            <XPProgressIndicator mode={XPProgressIndicatorMode.Compact} />
+          )}
+
           {magnifyingGlassVisible && (
             <CWIconButton
               iconName="magnifyingGlass"
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.scss b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.scss
index 6d432464fca..a6ad4e62150 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.scss
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.scss
@@ -2,15 +2,12 @@
 
 .XPProgressIndicator {
   all: unset;
-  min-width: 150px;
-  width: 200px;
-  max-width: 200px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 2px;
   padding: 4px;
 
+  .b2 {
+    color: $primary-500 !important;
+  }
+
   &:focus,
   &:focus-within {
     outline: none !important;
@@ -22,32 +19,42 @@
     border-radius: 6px;
   }
 
-  .header {
+  .weekly-progress {
+    min-width: 150px;
+    width: 200px;
+    max-width: 200px;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 0 4px;
-
-    .caption {
-      font-size: 10px !important;
-      color: $primary-500 !important;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px;
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 0 4px;
+
+      .caption {
+        font-size: 10px !important;
+        color: $primary-500 !important;
+      }
     }
-  }
 
-  .progress-bar {
-    height: 10px;
-    width: 100%;
-    border: 1px solid $neutral-100;
+    .progress-bar {
+      height: 10px;
+      width: 100%;
+      border: 1px solid $neutral-100;
 
-    &::-webkit-progress-bar {
-      background-color: $neutral-200;
-      border-radius: $border-radius-corners;
-    }
+      &::-webkit-progress-bar {
+        background-color: $neutral-200;
+        border-radius: $border-radius-corners;
+      }
 
-    &::-webkit-progress-value {
-      background-color: $primary-400;
-      border-radius: $border-radius-corners;
+      &::-webkit-progress-value {
+        background-color: $primary-400;
+        border-radius: $border-radius-corners;
+      }
     }
   }
 }
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.tsx
index 9c99b1f2a4a..0695f3f9716 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.tsx
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.tsx
@@ -4,12 +4,12 @@ import React from 'react';
 import useUserStore from 'state/ui/user';
 import { CWText } from '../../component_kit/cw_text';
 import './XPProgressIndicator.scss';
+import { XPProgressIndicatorMode, XPProgressIndicatorProps } from './types';
 
-type XPProgressIndicatorProps = {
-  className?: string;
-};
-
-const XPProgressIndicator = ({ className }: XPProgressIndicatorProps) => {
+const XPProgressIndicator = ({
+  mode = XPProgressIndicatorMode.Detailed,
+  className,
+}: XPProgressIndicatorProps) => {
   const sampleData = {
     weeklyGoal: {
       current: 170,
@@ -28,8 +28,8 @@ const XPProgressIndicator = ({ className }: XPProgressIndicatorProps) => {
 
   if (!user.isLoggedIn) return;
 
-  return (
-    <button className={clsx('XPProgressIndicator', className)}>
+  const weeklyProgress = (
+    <div className={clsx('weekly-progress', className)}>
       <div className="header">
         <CWText type="caption" fontWeight="semiBold">
           Weekly XP Goal
@@ -39,6 +39,18 @@ const XPProgressIndicator = ({ className }: XPProgressIndicatorProps) => {
         </CWText>
       </div>
       <progress className="progress-bar" value={currentProgress} max={100} />
+    </div>
+  );
+
+  return (
+    <button className={clsx('XPProgressIndicator', className, mode)}>
+      {mode === XPProgressIndicatorMode.Compact ? (
+        <CWText type="b2" fontWeight="semiBold">
+          XP
+        </CWText>
+      ) : (
+        weeklyProgress
+      )}
     </button>
   );
 };
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/index.ts b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/index.ts
index f290554a713..17948b30e12 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/index.ts
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/index.ts
@@ -1,3 +1,4 @@
 import XPProgressIndicator from './XPProgressIndicator';
+export * from './types';
 
 export default XPProgressIndicator;
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/types.ts b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/types.ts
new file mode 100644
index 00000000000..badcc04ee0d
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/types.ts
@@ -0,0 +1,9 @@
+export enum XPProgressIndicatorMode {
+  Compact = 'compact',
+  Detailed = 'detailed',
+}
+
+export type XPProgressIndicatorProps = {
+  mode?: XPProgressIndicatorMode;
+  className?: string;
+};

From 7516b03ebb171e4fa31e50d6033666d137635c7e Mon Sep 17 00:00:00 2001
From: Malik Zulqurnain <malikzulqurnain2121@gmail.com>
Date: Tue, 14 Jan 2025 21:13:31 +0500
Subject: [PATCH 3/6] Added task list in profile xp

---
 .../TaskList/Quests/QuestTask/QuestTask.scss  | 54 +++++++++++++++
 .../TaskList/Quests/QuestTask/QuestTask.tsx   | 38 ++++++++++
 .../TaskList/Quests/QuestTask/index.ts        |  3 +
 .../TaskList/Quests/Quests.scss               | 26 +++++++
 .../TaskList/Quests/Quests.tsx                | 69 +++++++++++++++++++
 .../TaskList/Quests/index.ts                  |  3 +
 .../TaskList/TaskList.scss                    | 10 +++
 .../XPProgressIndicator/TaskList/TaskList.tsx | 19 +++++
 .../XPProgressIndicator/TaskList/index.ts     |  3 +
 .../WeeklyProgressGoal.scss                   | 40 +++++++++++
 .../WeeklyProgressGoal/WeeklyProgressGoal.tsx | 38 ++++++++++
 .../WeeklyProgressGoal/index.ts               |  3 +
 .../XPProgressIndicator.scss                  | 39 -----------
 .../XPProgressIndicator.tsx                   | 66 +++++++++---------
 .../new_designs/CWPopover/CWPopover.tsx       |  2 +-
 15 files changed, 342 insertions(+), 71 deletions(-)
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.scss
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.tsx
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/index.ts
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.scss
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.tsx
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/index.ts
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.scss
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.tsx
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/index.ts
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/WeeklyProgressGoal/WeeklyProgressGoal.scss
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/WeeklyProgressGoal/WeeklyProgressGoal.tsx
 create mode 100644 packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/WeeklyProgressGoal/index.ts

diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.scss b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.scss
new file mode 100644
index 00000000000..4fb8b70aa69
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.scss
@@ -0,0 +1,54 @@
+@import '../../../../../../../styles/shared';
+
+.QuestTask {
+  all: unset;
+  display: grid;
+  grid-template-columns: 1fr 5fr;
+  width: 100%;
+  padding: 12px 16px;
+  gap: 12px;
+  cursor: pointer;
+  border-radius: 8px;
+
+  &:hover {
+    background-color: $neutral-100;
+  }
+
+  &:focus,
+  &:focus-within {
+    outline: none;
+  }
+
+  .left {
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+
+    img {
+      width: 44px;
+      height: 44px;
+      object-fit: cover;
+      border-radius: 6px;
+    }
+  }
+
+  .right {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    justify-content: center;
+    width: 100%;
+
+    .xp-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .days-left {
+        color: $primary-500 !important;
+      }
+    }
+  }
+}
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.tsx
new file mode 100644
index 00000000000..b20e8da9f15
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.tsx
@@ -0,0 +1,38 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { CWText } from 'views/components/component_kit/cw_text';
+import { CWTag } from 'views/components/component_kit/new_designs/CWTag';
+import './QuestTask.scss';
+
+type QuestTaskProps = {
+  className?: string;
+  onClick: () => void;
+  quest: {
+    imageURL: string;
+    title: string;
+    xpPoints: number;
+    endsOn: Date;
+  };
+};
+
+const QuestTask = ({ className, quest, onClick }: QuestTaskProps) => {
+  return (
+    <button className={clsx('QuestTask', className)} onClick={onClick}>
+      <div className="left">
+        <img src={quest.imageURL} />
+      </div>
+      <div className="right">
+        <CWText type="b1">{quest.title}</CWText>
+        <div className="xp-row">
+          <CWTag label={`${quest.xpPoints} XP`} type="proposal" />
+          <CWText type="caption" className="days-left">
+            {4} days left
+          </CWText>
+        </div>
+      </div>
+    </button>
+  );
+};
+
+export default QuestTask;
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/index.ts b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/index.ts
new file mode 100644
index 00000000000..032e459b54c
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/index.ts
@@ -0,0 +1,3 @@
+import QuestTask from './QuestTask';
+
+export default QuestTask;
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.scss b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.scss
new file mode 100644
index 00000000000..1cbe24ad015
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.scss
@@ -0,0 +1,26 @@
+@import '../../../../../../styles/shared';
+
+.Quests {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 8px 0px;
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 4px 4px 18px;
+
+    .b1 {
+      color: $neutral-400 !important;
+    }
+  }
+
+  .list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.tsx
new file mode 100644
index 00000000000..5dd93dabf19
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.tsx
@@ -0,0 +1,69 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { CWText } from 'client/scripts/views/components/component_kit/cw_text';
+import { CWButton } from 'client/scripts/views/components/component_kit/new_designs/CWButton';
+import QuestTask from './QuestTask';
+import './Quests.scss';
+
+type QuestsProps = {
+  className?: string;
+};
+
+const Quests = ({ className }: QuestsProps) => {
+  const handleSeeAllQuests = () => {
+    // TODO: navigate to quests page
+  };
+
+  const sampleQuests = [
+    {
+      id: 1,
+      imageURL:
+        'https://cdn.pixabay.com/photo/2023/01/08/14/22/sample-7705350_640.jpg',
+      title: 'UniLend Airdrop',
+      xpPoints: 100,
+      endsOn: new Date(),
+    },
+    {
+      id: 2,
+      imageURL:
+        'https://cdn.pixabay.com/photo/2023/01/08/14/22/sample-7705350_640.jpg',
+      title: 'Plasm Twitter Launch',
+      xpPoints: 500,
+      endsOn: new Date(),
+    },
+    {
+      id: 3,
+      imageURL:
+        'https://cdn.pixabay.com/photo/2023/01/08/14/22/sample-7705350_640.jpg',
+      title: 'Blackbird Quests',
+      xpPoints: 200,
+      endsOn: new Date(),
+    },
+  ];
+
+  return (
+    <div className={clsx('Quests', className)}>
+      <div className="header">
+        <CWText type="b1" fontWeight="semiBold">
+          Weekly Quests
+        </CWText>
+        <CWButton
+          label="See all"
+          iconRight="arrowRight"
+          buttonHeight="sm"
+          buttonWidth="narrow"
+          buttonType="tertiary"
+          onClick={handleSeeAllQuests}
+        />
+      </div>
+      <div className="list">
+        {sampleQuests.map((quest) => (
+          <QuestTask key={quest.id} quest={quest} onClick={() => {}} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Quests;
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/index.ts b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/index.ts
new file mode 100644
index 00000000000..36a34ad9a09
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/index.ts
@@ -0,0 +1,3 @@
+import Quests from './Quests';
+
+export default Quests;
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.scss b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.scss
new file mode 100644
index 00000000000..f1b992c2ebb
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.scss
@@ -0,0 +1,10 @@
+@import '../../../../../styles/shared';
+
+.TaskList {
+  width: 300px;
+  background-color: $white;
+  border: 1px solid $neutral-200;
+  border-radius: 8px;
+  box-shadow: $elevation-4 !important;
+  margin-top: 4px;
+}
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.tsx
new file mode 100644
index 00000000000..6535c7eb18f
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.tsx
@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import Quests from './Quests';
+import './TaskList.scss';
+
+type TaskListProps = {
+  className?: string;
+};
+
+const TaskList = ({ className }: TaskListProps) => {
+  return (
+    <div className={clsx('TaskList', className)}>
+      <Quests />
+    </div>
+  );
+};
+
+export default TaskList;
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/index.ts b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/index.ts
new file mode 100644
index 00000000000..2247049c2a7
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/index.ts
@@ -0,0 +1,3 @@
+import TaskList from './TaskList';
+
+export default TaskList;
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/WeeklyProgressGoal/WeeklyProgressGoal.scss b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/WeeklyProgressGoal/WeeklyProgressGoal.scss
new file mode 100644
index 00000000000..06d18688109
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/WeeklyProgressGoal/WeeklyProgressGoal.scss
@@ -0,0 +1,40 @@
+@import '../../../../../styles/shared';
+
+.WeeklyProgressGoal {
+  min-width: 150px;
+  width: 200px;
+  max-width: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 0 4px;
+
+    .caption {
+      font-size: 10px !important;
+      color: $primary-500 !important;
+    }
+  }
+
+  .progress-bar {
+    height: 10px;
+    width: 100%;
+    border: 1px solid $neutral-100;
+
+    &::-webkit-progress-bar {
+      background-color: $neutral-200;
+      border-radius: $border-radius-corners;
+    }
+
+    &::-webkit-progress-value {
+      background-color: $primary-400;
+      border-radius: $border-radius-corners;
+    }
+  }
+}
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/WeeklyProgressGoal/WeeklyProgressGoal.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/WeeklyProgressGoal/WeeklyProgressGoal.tsx
new file mode 100644
index 00000000000..1294f92b47f
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/WeeklyProgressGoal/WeeklyProgressGoal.tsx
@@ -0,0 +1,38 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { CWText } from '../../../component_kit/cw_text';
+import './WeeklyProgressGoal.scss';
+
+type WeeklyProgressGoalProps = {
+  className?: string;
+  progress: {
+    current: number;
+    target: number;
+  };
+};
+
+const WeeklyProgressGoal = ({
+  className,
+  progress,
+}: WeeklyProgressGoalProps) => {
+  const currentProgress = parseInt(
+    ((progress.current / progress.target) * 100).toFixed(0),
+  );
+
+  return (
+    <div className={clsx('WeeklyProgressGoal', className)}>
+      <div className="header">
+        <CWText type="caption" fontWeight="semiBold">
+          Weekly XP Goal
+        </CWText>
+        <CWText type="caption" fontWeight="semiBold">
+          {progress.current} / {progress.target} XP
+        </CWText>
+      </div>
+      <progress className="progress-bar" value={currentProgress} max={100} />
+    </div>
+  );
+};
+
+export default WeeklyProgressGoal;
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/WeeklyProgressGoal/index.ts b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/WeeklyProgressGoal/index.ts
new file mode 100644
index 00000000000..af0df8909c3
--- /dev/null
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/WeeklyProgressGoal/index.ts
@@ -0,0 +1,3 @@
+import WeeklyProgressGoal from './WeeklyProgressGoal';
+
+export default WeeklyProgressGoal;
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.scss b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.scss
index a6ad4e62150..32a39cdd8a4 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.scss
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.scss
@@ -18,43 +18,4 @@
     cursor: pointer;
     border-radius: 6px;
   }
-
-  .weekly-progress {
-    min-width: 150px;
-    width: 200px;
-    max-width: 200px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 2px;
-
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      padding: 0 4px;
-
-      .caption {
-        font-size: 10px !important;
-        color: $primary-500 !important;
-      }
-    }
-
-    .progress-bar {
-      height: 10px;
-      width: 100%;
-      border: 1px solid $neutral-100;
-
-      &::-webkit-progress-bar {
-        background-color: $neutral-200;
-        border-radius: $border-radius-corners;
-      }
-
-      &::-webkit-progress-value {
-        background-color: $primary-400;
-        border-radius: $border-radius-corners;
-      }
-    }
-  }
 }
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.tsx
index 0695f3f9716..b66fabfff18 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.tsx
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.tsx
@@ -1,8 +1,14 @@
-import clsx from 'clsx';
 import React from 'react';
 
+import ClickAwayListener from '@mui/base/ClickAwayListener';
+import clsx from 'clsx';
 import useUserStore from 'state/ui/user';
 import { CWText } from '../../component_kit/cw_text';
+import CWPopover, {
+  usePopover,
+} from '../../component_kit/new_designs/CWPopover';
+import TaskList from './TaskList';
+import WeeklyProgressGoal from './WeeklyProgressGoal';
 import './XPProgressIndicator.scss';
 import { XPProgressIndicatorMode, XPProgressIndicatorProps } from './types';
 
@@ -17,41 +23,39 @@ const XPProgressIndicator = ({
     },
   };
 
-  const currentProgress = parseInt(
-    (
-      (sampleData.weeklyGoal.current / sampleData.weeklyGoal.target) *
-      100
-    ).toFixed(0),
-  );
-
   const user = useUserStore();
 
-  if (!user.isLoggedIn) return;
+  const popoverProps = usePopover();
 
-  const weeklyProgress = (
-    <div className={clsx('weekly-progress', className)}>
-      <div className="header">
-        <CWText type="caption" fontWeight="semiBold">
-          Weekly XP Goal
-        </CWText>
-        <CWText type="caption" fontWeight="semiBold">
-          {sampleData.weeklyGoal.current} / {sampleData.weeklyGoal.target} XP
-        </CWText>
-      </div>
-      <progress className="progress-bar" value={currentProgress} max={100} />
-    </div>
-  );
+  if (!user.isLoggedIn) return;
 
   return (
-    <button className={clsx('XPProgressIndicator', className, mode)}>
-      {mode === XPProgressIndicatorMode.Compact ? (
-        <CWText type="b2" fontWeight="semiBold">
-          XP
-        </CWText>
-      ) : (
-        weeklyProgress
-      )}
-    </button>
+    <ClickAwayListener onClickAway={() => popoverProps.setAnchorEl(null)}>
+      <>
+        <button
+          className={clsx('XPProgressIndicator', className, mode)}
+          onClick={popoverProps.handleInteraction}
+        >
+          {mode === XPProgressIndicatorMode.Compact ? (
+            <CWText type="b2" fontWeight="semiBold">
+              XP
+            </CWText>
+          ) : (
+            <WeeklyProgressGoal
+              progress={{
+                current: sampleData.weeklyGoal.current,
+                target: sampleData.weeklyGoal.target,
+              }}
+            />
+          )}
+        </button>
+        <CWPopover
+          content={<TaskList />}
+          placement="bottom"
+          {...popoverProps}
+        />
+      </>
+    </ClickAwayListener>
   );
 };
 
diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWPopover/CWPopover.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWPopover/CWPopover.tsx
index 1315ced9f12..50057e3c927 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWPopover/CWPopover.tsx
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWPopover/CWPopover.tsx
@@ -19,7 +19,7 @@ export type UsePopoverProps = {
   id: string;
   open: boolean;
   setAnchorEl: React.Dispatch<
-    React.SetStateAction<AnchorType | VirtualElement>
+    React.SetStateAction<AnchorType | VirtualElement | null>
   >;
   handleInteraction: (e: React.MouseEvent<AnchorType>) => void;
 

From 542057e4bda990ce350f95a57579ea6fc926cfff Mon Sep 17 00:00:00 2001
From: Malik Zulqurnain <malikzulqurnain2121@gmail.com>
Date: Tue, 14 Jan 2025 21:47:05 +0500
Subject: [PATCH 4/6] Added weekly progress bar in tasklist for mobile view

---
 .../TaskList/Quests/QuestTask/QuestTask.scss    |  6 +++---
 .../TaskList/Quests/QuestTask/QuestTask.tsx     |  6 +++---
 .../TaskList/Quests/Quests.tsx                  |  6 +++---
 .../XPProgressIndicator/TaskList/TaskList.scss  | 12 ++++++++++++
 .../XPProgressIndicator/TaskList/TaskList.tsx   | 17 +++++++++++++++++
 5 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.scss b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.scss
index 4fb8b70aa69..648dd7d47c1 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.scss
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.scss
@@ -5,7 +5,6 @@
   display: grid;
   grid-template-columns: 1fr 5fr;
   width: 100%;
-  padding: 12px 16px;
   gap: 12px;
   cursor: pointer;
   border-radius: 8px;
@@ -20,7 +19,7 @@
   }
 
   .left {
-    padding: 4px;
+    padding: 16px 4px 16px 12px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -35,6 +34,7 @@
   }
 
   .right {
+    padding: 12px 16px 12px 0;
     display: flex;
     flex-direction: column;
     gap: 4px;
@@ -47,7 +47,7 @@
       align-items: center;
 
       .days-left {
-        color: $primary-500 !important;
+        color: $primary-300 !important;
       }
     }
   }
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.tsx
index b20e8da9f15..eb1e244490a 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.tsx
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/QuestTask/QuestTask.tsx
@@ -12,7 +12,7 @@ type QuestTaskProps = {
     imageURL: string;
     title: string;
     xpPoints: number;
-    endsOn: Date;
+    daysLeftBeforeEnd: number;
   };
 };
 
@@ -26,8 +26,8 @@ const QuestTask = ({ className, quest, onClick }: QuestTaskProps) => {
         <CWText type="b1">{quest.title}</CWText>
         <div className="xp-row">
           <CWTag label={`${quest.xpPoints} XP`} type="proposal" />
-          <CWText type="caption" className="days-left">
-            {4} days left
+          <CWText type="caption" className="days-left" fontWeight="semiBold">
+            {quest.daysLeftBeforeEnd} days left
           </CWText>
         </div>
       </div>
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.tsx
index 5dd93dabf19..d94e34d2235 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.tsx
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.tsx
@@ -22,7 +22,7 @@ const Quests = ({ className }: QuestsProps) => {
         'https://cdn.pixabay.com/photo/2023/01/08/14/22/sample-7705350_640.jpg',
       title: 'UniLend Airdrop',
       xpPoints: 100,
-      endsOn: new Date(),
+      daysLeftBeforeEnd: 4,
     },
     {
       id: 2,
@@ -30,7 +30,7 @@ const Quests = ({ className }: QuestsProps) => {
         'https://cdn.pixabay.com/photo/2023/01/08/14/22/sample-7705350_640.jpg',
       title: 'Plasm Twitter Launch',
       xpPoints: 500,
-      endsOn: new Date(),
+      daysLeftBeforeEnd: 5,
     },
     {
       id: 3,
@@ -38,7 +38,7 @@ const Quests = ({ className }: QuestsProps) => {
         'https://cdn.pixabay.com/photo/2023/01/08/14/22/sample-7705350_640.jpg',
       title: 'Blackbird Quests',
       xpPoints: 200,
-      endsOn: new Date(),
+      daysLeftBeforeEnd: 8,
     },
   ];
 
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.scss b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.scss
index f1b992c2ebb..021f197e477 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.scss
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.scss
@@ -7,4 +7,16 @@
   border-radius: 8px;
   box-shadow: $elevation-4 !important;
   margin-top: 4px;
+  z-index: 999;
+
+  .weekly-progress-bar {
+    width: 100% !important;
+    min-width: unset;
+    max-width: unset;
+    padding: 16px 12px 8px 12px;
+  }
+
+  @include extraSmall {
+    width: 100%;
+  }
 }
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.tsx
index 6535c7eb18f..59f4d102df3 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.tsx
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.tsx
@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
 
+import useBrowserWindow from 'hooks/useBrowserWindow';
+import WeeklyProgressGoal from '../WeeklyProgressGoal';
 import Quests from './Quests';
 import './TaskList.scss';
 
@@ -9,8 +11,23 @@ type TaskListProps = {
 };
 
 const TaskList = ({ className }: TaskListProps) => {
+  const { isWindowExtraSmall } = useBrowserWindow({});
+
+  const sampleData = {
+    weeklyGoal: {
+      current: 170,
+      target: 400,
+    },
+  };
+
   return (
     <div className={clsx('TaskList', className)}>
+      {isWindowExtraSmall && (
+        <WeeklyProgressGoal
+          className="weekly-progress-bar"
+          progress={sampleData.weeklyGoal}
+        />
+      )}
       <Quests />
     </div>
   );

From 862b975e0ff7c17b2d6fa526f27590655908ec4c Mon Sep 17 00:00:00 2001
From: Malik Zulqurnain <malikzulqurnain2121@gmail.com>
Date: Tue, 14 Jan 2025 21:48:24 +0500
Subject: [PATCH 5/6] Fix types

---
 .../client/scripts/views/components/Select/Select.tsx          | 3 ---
 .../components/component_kit/CWPopoverMenu/CWPopoverMenu.tsx   | 1 -
 2 files changed, 4 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Select/Select.tsx b/packages/commonwealth/client/scripts/views/components/Select/Select.tsx
index 06a25330f81..54dbd1d7ffc 100644
--- a/packages/commonwealth/client/scripts/views/components/Select/Select.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Select/Select.tsx
@@ -67,7 +67,6 @@ export const Select = ({
   return (
     <ClickAwayListener
       onClickAway={async () => {
-        // @ts-expect-error <StrictNullChecks/>
         popoverProps.setAnchorEl(null);
         onClose && (await onClose());
       }}
@@ -129,7 +128,6 @@ export const Select = ({
                       e.preventDefault();
                       // @ts-expect-error <StrictNullChecks/>
                       onSelect(option);
-                      // @ts-expect-error <StrictNullChecks/>
                       popoverProps.setAnchorEl(null);
                       onClose && (await onClose());
                     }}
@@ -143,7 +141,6 @@ export const Select = ({
                             iconSize="small"
                             onClick={(e) => {
                               e.stopPropagation();
-                              // @ts-expect-error <StrictNullChecks/>
                               popoverProps.setAnchorEl(null);
                               onOptionEdit?.(option);
                             }}
diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/CWPopoverMenu/CWPopoverMenu.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/CWPopoverMenu/CWPopoverMenu.tsx
index 9b79a9a8b8d..a7ea0854432 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/CWPopoverMenu/CWPopoverMenu.tsx
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/CWPopoverMenu/CWPopoverMenu.tsx
@@ -47,7 +47,6 @@ export const PopoverMenu = ({
   }, [onOpenChange, open]);
 
   return (
-    // @ts-expect-error <StrictNullChecks/>
     <ClickAwayListener onClickAway={() => setAnchorEl(null)}>
       {/* needs to be div instead of fragment so listener can work */}
       <div className="popover-container">

From fe9b70e5eb94b30a5e7d62c8cd0fef97884d81d7 Mon Sep 17 00:00:00 2001
From: Malik Zulqurnain <malikzulqurnain2121@gmail.com>
Date: Tue, 21 Jan 2025 00:40:18 +0500
Subject: [PATCH 6/6] Integrated xp task list api

---
 .../client/scripts/state/api/user/getXPs.ts   | 31 +++++++++++++++
 .../client/scripts/state/api/user/index.ts    |  2 +
 .../TaskList/Quests/Quests.tsx                | 38 +++++--------------
 .../XPProgressIndicator/TaskList/TaskList.tsx | 27 ++++++++++++-
 4 files changed, 68 insertions(+), 30 deletions(-)
 create mode 100644 packages/commonwealth/client/scripts/state/api/user/getXPs.ts

diff --git a/packages/commonwealth/client/scripts/state/api/user/getXPs.ts b/packages/commonwealth/client/scripts/state/api/user/getXPs.ts
new file mode 100644
index 00000000000..a6aef60237e
--- /dev/null
+++ b/packages/commonwealth/client/scripts/state/api/user/getXPs.ts
@@ -0,0 +1,31 @@
+import { GetXps } from '@hicommonwealth/schemas';
+import { trpc } from 'utils/trpcClient';
+import { z } from 'zod';
+
+type UseGetXPsProps = z.infer<typeof GetXps.input> & {
+  enabled?: boolean;
+};
+
+const useGetXPs = ({
+  community_id,
+  event_name,
+  from,
+  to,
+  user_id,
+  enabled = true,
+}: UseGetXPsProps) => {
+  return trpc.user.getXps.useQuery(
+    {
+      community_id,
+      event_name,
+      from,
+      to,
+      user_id,
+    },
+    {
+      enabled,
+    },
+  );
+};
+
+export default useGetXPs;
diff --git a/packages/commonwealth/client/scripts/state/api/user/index.ts b/packages/commonwealth/client/scripts/state/api/user/index.ts
index af41a69242a..177c9e129a7 100644
--- a/packages/commonwealth/client/scripts/state/api/user/index.ts
+++ b/packages/commonwealth/client/scripts/state/api/user/index.ts
@@ -2,6 +2,7 @@ import { useCreateApiKeyMutation } from './createApiKey';
 import { useDeleteApiKeyMutation } from './deleteApiKey';
 import { useGetApiKeyQuery } from './getApiKey';
 import useGetNewContent from './getNewContent';
+import useGetXPs from './getXPs';
 import useUpdateUserActiveCommunityMutation from './updateActiveCommunity';
 import useUpdateUserEmailMutation from './updateEmail';
 import useUpdateUserEmailSettingsMutation from './updateEmailSettings';
@@ -13,6 +14,7 @@ export {
   useDeleteApiKeyMutation,
   useGetApiKeyQuery,
   useGetNewContent,
+  useGetXPs,
   useSignIn,
   useUpdateUserActiveCommunityMutation,
   useUpdateUserEmailMutation,
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.tsx
index d94e34d2235..d400c5b5eeb 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.tsx
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/Quests/Quests.tsx
@@ -8,40 +8,20 @@ import './Quests.scss';
 
 type QuestsProps = {
   className?: string;
+  quests: {
+    id: number;
+    imageURL: string;
+    xpPoints: number;
+    title: string;
+    daysLeftBeforeEnd: number;
+  }[];
 };
 
-const Quests = ({ className }: QuestsProps) => {
+const Quests = ({ className, quests }: QuestsProps) => {
   const handleSeeAllQuests = () => {
     // TODO: navigate to quests page
   };
 
-  const sampleQuests = [
-    {
-      id: 1,
-      imageURL:
-        'https://cdn.pixabay.com/photo/2023/01/08/14/22/sample-7705350_640.jpg',
-      title: 'UniLend Airdrop',
-      xpPoints: 100,
-      daysLeftBeforeEnd: 4,
-    },
-    {
-      id: 2,
-      imageURL:
-        'https://cdn.pixabay.com/photo/2023/01/08/14/22/sample-7705350_640.jpg',
-      title: 'Plasm Twitter Launch',
-      xpPoints: 500,
-      daysLeftBeforeEnd: 5,
-    },
-    {
-      id: 3,
-      imageURL:
-        'https://cdn.pixabay.com/photo/2023/01/08/14/22/sample-7705350_640.jpg',
-      title: 'Blackbird Quests',
-      xpPoints: 200,
-      daysLeftBeforeEnd: 8,
-    },
-  ];
-
   return (
     <div className={clsx('Quests', className)}>
       <div className="header">
@@ -58,7 +38,7 @@ const Quests = ({ className }: QuestsProps) => {
         />
       </div>
       <div className="list">
-        {sampleQuests.map((quest) => (
+        {quests.map((quest) => (
           <QuestTask key={quest.id} quest={quest} onClick={() => {}} />
         ))}
       </div>
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.tsx
index 59f4d102df3..fd1b0076cf4 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.tsx
+++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/TaskList/TaskList.tsx
@@ -2,6 +2,9 @@ import clsx from 'clsx';
 import React from 'react';
 
 import useBrowserWindow from 'hooks/useBrowserWindow';
+import moment from 'moment';
+import { useGetXPs } from 'state/api/user';
+import useUserStore from 'state/ui/user';
 import WeeklyProgressGoal from '../WeeklyProgressGoal';
 import Quests from './Quests';
 import './TaskList.scss';
@@ -20,6 +23,16 @@ const TaskList = ({ className }: TaskListProps) => {
     },
   };
 
+  const user = useUserStore();
+  const { data = [], isLoading } = useGetXPs({
+    user_id: user.id,
+    from: moment().startOf('week').toDate(),
+    to: moment().endOf('week').toDate(),
+    enabled: user.isLoggedIn,
+  });
+
+  if (isLoading) return;
+
   return (
     <div className={clsx('TaskList', className)}>
       {isWindowExtraSmall && (
@@ -28,7 +41,19 @@ const TaskList = ({ className }: TaskListProps) => {
           progress={sampleData.weeklyGoal}
         />
       )}
-      <Quests />
+      <Quests
+        quests={data
+          .filter((task) => task.quest_id)
+          .map((task) => ({
+            daysLeftBeforeEnd: 4, // TODO: where to get time diff from
+            id: task.quest_id || 0,
+            // TODO: where to get this url from
+            imageURL:
+              'https://cdn.pixabay.com/photo/2023/01/08/14/22/sample-7705350_640.jpg',
+            title: task.event_name,
+            xpPoints: task.xp_points,
+          }))}
+      />
     </div>
   );
 };