Token launcher for home page

packages/commonwealth/client/scripts/navigation/CommonDomainRoutes.tsx

@@ -48,6 +48,9 @@ const NewProposalPage = lazy(() => import('views/pages/new_proposal/index'));
 const DiscussionsPage = lazy(
   () => import('views/pages/discussions/DiscussionsPage'),
 );
+const CommunityHomePage = lazy(
+  () => import('../views/pages/CommunityHome/CommunityHomePage'),
+);
 const ViewThreadPage = lazy(
   () => import('../views/pages/view_thread/ViewThreadPage'),
 );
@@ -317,6 +320,13 @@ const CommonDomainRoutes = ({
   // GOVERNANCE END
 
   // DISCUSSIONS
+  <Route
+    key="/:scope/community-home"
+    path="/:scope/community-home"
+    element={withLayout(CommunityHomePage, {
+      scoped: true,
+    })}
+  />,
   <Route
     key="/:scope/discussions"
     path="/:scope/discussions"

packages/commonwealth/client/scripts/views/components/sidebar/discussion_section.tsx

@@ -55,6 +55,11 @@ export const DiscussionSection = ({
     location,
   );
 
+  const matchesCommunityHomeRoute = matchRoutes(
+    [{ path: ':scope/community-home' }],
+    location,
+  );
+
   const matchesArchivedRoute = matchRoutes(
     [{ path: '/archived' }, { path: ':scope/archived' }],
     location,
@@ -113,6 +118,31 @@ export const DiscussionSection = ({
     localStorage[`${app.activeChainId()}-discussions-toggle-tree`],
   );
   const discussionsGroupData: SectionGroupAttrs[] = [
+    {
+      title: 'Community Home',
+      containsChildren: false,
+      hasDefaultToggle: false,
+      isVisible: true,
+      isUpdated: true,
+      isActive: !!matchesCommunityHomeRoute,
+      onClick: (e, toggle: boolean) => {
+        e.preventDefault();
+        resetSidebarState();
+        handleRedirectClicks(
+          navigate,
+          e,
+          `/community-home`,
+          communityId,
+          () => {
+            setDiscussionsToggleTree(
+              `children.CommunityHome.toggledState`,
+              toggle,
+            );
+          },
+        );
+      },
+      displayData: null,
+    },
     {
       title: 'All',
       containsChildren: false,

packages/commonwealth/client/scripts/views/pages/CommunityHome/CommunityHomePage.scss

@@ -0,0 +1,36 @@
+@import '../../../styles/shared';
+
+.BreadcrumbsComponent {
+  z-index: 0 !important;
+}
+
+.CommunityHome {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+
+  .header-section {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: $white;
+
+    .btn-border {
+      margin: 0 !important;
+      padding: 0 !important;
+
+      &:focus-within {
+        border-width: 1px !important;
+        padding: 0 !important;
+      }
+    }
+  }
+
+  .my-16 {
+    margin: 16px 0;
+  }
+}

packages/commonwealth/client/scripts/views/pages/CommunityHome/CommunityHomePage.tsx

@@ -0,0 +1,59 @@
+import { findDenominationString } from 'helpers/findDenomination';
+import { useFlag } from 'hooks/useFlag';
+import React, { useRef, useState } from 'react';
+import { useManageCommunityStakeModalStore } from 'state/ui/modals';
+import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
+import { CWText } from '../../components/component_kit/cw_text';
+import { CWModal } from '../../components/component_kit/new_designs/CWModal';
+import ManageCommunityStakeModal from '../../modals/ManageCommunityStakeModal/ManageCommunityStakeModal';
+import IdeaLaunchpad from '../Communities/IdeaLaunchpad';
+import './CommunityHomePage.scss';
+
+const CommunityHome = () => {
+  const containerRef = useRef();
+  const tokenizedCommunityEnabled = useFlag('tokenizedCommunity');
+
+  const {
+    setModeOfManageCommunityStakeModal,
+    modeOfManageCommunityStakeModal,
+  } = useManageCommunityStakeModalStore();
+
+  const [selectedCommunityId] = useState<string>();
+
+  return (
+    // @ts-expect-error <StrictNullChecks/>
+    <CWPageLayout ref={containerRef} className="CommunitiesPageLayout">
+      <div className="CommunityHome">
+        <div className="header-section">
+          <div className="description">
+            <CWText
+              type="h1"
+              {...(tokenizedCommunityEnabled && { fontWeight: 'semiBold' })}
+            >
+              Home {tokenizedCommunityEnabled ? '' : 'Communities'}
+            </CWText>
+          </div>
+          <IdeaLaunchpad />
+        </div>
+        <CWModal
+          size="small"
+          content={
+            <ManageCommunityStakeModal
+              mode={modeOfManageCommunityStakeModal}
+              // @ts-expect-error <StrictNullChecks/>
+              onModalClose={() => setModeOfManageCommunityStakeModal(null)}
+              denomination={
+                findDenominationString(selectedCommunityId || '') || 'ETH'
+              }
+            />
+          }
+          // @ts-expect-error <StrictNullChecks/>
+          onClose={() => setModeOfManageCommunityStakeModal(null)}
+          open={!!modeOfManageCommunityStakeModal}
+        />
+      </div>
+    </CWPageLayout>
+  );
+};
+
+export default CommunityHome;

packages/commonwealth/client/scripts/views/pages/CommunityHome/index.ts

@@ -0,0 +1 @@
+export * from './CommunityHomePage';