Merge pull request #8771 from hicommonwealth/marcin/8743/throphy-icon

Contest bugs
hicommonwealth · Aug 8, 2024 · 46ce1d5 · 46ce1d5
2 parents b2d48f0 + 4332d84
commit 46ce1d5
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 6 deletions.
diff --git a/...monwealth/client/scripts/views/components/AdminOnboardingSlider/AdminOnboardingSlider.tsx b/...monwealth/client/scripts/views/components/AdminOnboardingSlider/AdminOnboardingSlider.tsx
@@ -1,4 +1,4 @@
-import { ChainBase } from '@hicommonwealth/shared';
+import { ChainBase, commonProtocol } from '@hicommonwealth/shared';
 import shape1Url from 'assets/img/shapes/shape1.svg';
 import shape3Url from 'assets/img/shapes/shape3.svg';
 import shape4Url from 'assets/img/shapes/shape4.svg';
@@ -111,9 +111,14 @@ export const AdminOnboardingSlider = () => {
     pageName === 'create-topic' && navigate('/manage/topics');
   };
 
-  const isEvmCommunity = community?.base === ChainBase.Ethereum;
+  const isCommunitySupported =
+    community?.base === ChainBase.Ethereum &&
+    [
+      commonProtocol.ValidChains.Base,
+      commonProtocol.ValidChains.SepoliaBase,
+    ].includes(community?.ChainNode?.ethChainId as number);
   const isContestActionCompleted =
-    contestEnabled && isEvmCommunity && contestsData?.length > 0;
+    contestEnabled && isCommunitySupported && contestsData?.length > 0;
 
   const isSliderHidden =
     !app.activeChainId() ||
@@ -148,7 +153,7 @@ export const AdminOnboardingSlider = () => {
         headerText="Finish setting up your community"
         onDismiss={() => setIsModalVisible(true)}
       >
-        {contestEnabled && isEvmCommunity && (
+        {contestEnabled && isCommunitySupported && (
           <ActionCard
             ctaText={CARD_TYPES['launch-contest'].ctaText}
             title={CARD_TYPES['launch-contest'].title}

diff --git a/packages/commonwealth/client/scripts/views/components/NewThreadForm/CustomTopicOption.tsx b/packages/commonwealth/client/scripts/views/components/NewThreadForm/CustomTopicOption.tsx
@@ -0,0 +1,26 @@
+import Topic from 'models/Topic';
+import React from 'react';
+import { components, OptionProps } from 'react-select';
+import { CWIcon } from 'views/components/component_kit/cw_icons/cw_icon';
+
+interface CustomTopicOptionProps {
+  originalProps: OptionProps<{ value: string; label: string }>;
+  topic?: Topic;
+}
+
+const CustomTopicOption = ({
+  originalProps,
+  topic,
+}: CustomTopicOptionProps) => {
+  return (
+    // @ts-expect-error <StrictNullChecks/>
+    <components.Option {...originalProps}>
+      {(topic?.activeContestManagers?.length || 0) > 0 && (
+        <CWIcon iconName="trophy" iconSize="small" />
+      )}
+      {originalProps.label}
+    </components.Option>
+  );
+};
+
+export default CustomTopicOption;
diff --git a/packages/commonwealth/client/scripts/views/components/NewThreadForm/NewThreadForm.scss b/packages/commonwealth/client/scripts/views/components/NewThreadForm/NewThreadForm.scss
@@ -18,6 +18,17 @@
     width: 100%;
   }
 
+  .topic-select {
+    .cwsl__option {
+      justify-content: start !important;
+      gap: 4px;
+    }
+    .trophy-icon {
+      margin-bottom: -2px;
+      margin-right: 4px;
+    }
+  }
+
   .new-thread-header {
     display: flex;
     justify-content: space-between;

diff --git a/packages/commonwealth/client/scripts/views/components/NewThreadForm/NewThreadForm.tsx b/packages/commonwealth/client/scripts/views/components/NewThreadForm/NewThreadForm.tsx
@@ -18,7 +18,9 @@ import { useCreateThreadMutation } from 'state/api/threads';
 import { useFetchTopicsQuery } from 'state/api/topics';
 import useUserStore from 'state/ui/user';
 import JoinCommunityBanner from 'views/components/JoinCommunityBanner';
+import CustomTopicOption from 'views/components/NewThreadForm/CustomTopicOption';
 import useJoinCommunity from 'views/components/SublayoutHeader/useJoinCommunity';
+import { CWIcon } from 'views/components/component_kit/cw_icons/cw_icon';
 import { CWButton } from 'views/components/component_kit/new_designs/CWButton';
 import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
 import { CWTextInput } from 'views/components/component_kit/new_designs/CWTextInput';
@@ -228,7 +230,7 @@ export const NewThreadForm = () => {
   const isDisabledBecauseOfContestsConsent =
     contestThreadBannerVisible && !submitEntryChecked;
 
-  const contestTopicBannerVisible =
+  const contestTopicAffordanceVisible =
     contestsEnabled && isContestAvailable && hasTopicOngoingContest;
 
   const walletBalanceError =
@@ -260,6 +262,29 @@ export const NewThreadForm = () => {
 
               {!!hasTopics && (
                 <CWSelectList
+                  className="topic-select"
+                  components={{
+                    // eslint-disable-next-line react/no-multi-comp
+                    Option: (originalProps) =>
+                      CustomTopicOption({
+                        originalProps,
+                        topic: topicsForSelector.find(
+                          (t) => String(t.id) === originalProps.data.value,
+                        ),
+                      }),
+                  }}
+                  formatOptionLabel={(option) => (
+                    <>
+                      {contestTopicAffordanceVisible && (
+                        <CWIcon
+                          className="trophy-icon"
+                          iconName="trophy"
+                          iconSize="small"
+                        />
+                      )}
+                      {option.label}
+                    </>
+                  )}
                   options={sortedTopics.map((topic) => ({
                     label: topic?.name,
                     value: `${topic?.id}`,
@@ -288,7 +313,7 @@ export const NewThreadForm = () => {
                 />
               )}
 
-              {contestTopicBannerVisible && (
+              {contestTopicAffordanceVisible && (
                 <ContestTopicBanner
                   contests={threadTopic?.activeContestManagers.map((acm) => {
                     return {