Added XP progress bar

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;

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

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"

packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.scss

@@ -0,0 +1,60 @@
+@import '../../../../styles/shared';
+
+.XPProgressIndicator {
+  all: unset;
+  padding: 4px;
+
+  .b2 {
+    color: $primary-500 !important;
+  }
+
+  &:focus,
+  &:focus-within {
+    outline: none !important;
+  }
+
+  &:hover {
+    background-color: $neutral-100;
+    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;
+      }
+    }
+  }
+}

packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/XPProgressIndicator.tsx

@@ -0,0 +1,58 @@
+import clsx from 'clsx';
+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';
+
+const XPProgressIndicator = ({
+  mode = XPProgressIndicatorMode.Detailed,
+  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;
+
+  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>
+  );
+
+  return (
+    <button className={clsx('XPProgressIndicator', className, mode)}>
+      {mode === XPProgressIndicatorMode.Compact ? (
+        <CWText type="b2" fontWeight="semiBold">
+          XP
+        </CWText>
+      ) : (
+        weeklyProgress
+      )}
+    </button>
+  );
+};
+
+export default XPProgressIndicator;

packages/commonwealth/client/scripts/views/components/SublayoutHeader/XPProgressIndicator/index.ts

@@ -0,0 +1,4 @@
+import XPProgressIndicator from './XPProgressIndicator';
+export * from './types';
+
+export default XPProgressIndicator;

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;
+};

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 = {