[ERC20 Launchpad] - UI for Launch token step

packages/commonwealth/client/scripts/helpers/feature-flags.ts

@@ -28,6 +28,7 @@ const featureFlags = {
   ),
   farcasterContest: buildFlag(process.env.FLAG_FARCASTER_CONTEST),
   newEditor: buildFlag(process.env.FLAG_NEW_EDITOR),
+  tokenizedCommunity: buildFlag(process.env.FLAG_TOKENIZED_COMMUNITY),
 };
 
 export type AvailableFeatureFlag = keyof typeof featureFlags;

packages/commonwealth/client/scripts/helpers/formValidations/messages.ts

@@ -1,5 +1,7 @@
 export const VALIDATION_MESSAGES = {
   NO_INPUT: 'No input',
+  MIN_CHAR_LIMIT_REQUIRED: (charLimit: number) =>
+    `Minimum ${charLimit} characters required`,
   MAX_CHAR_LIMIT_REACHED: 'Max character limit reached',
   INVALID_INPUT: 'Invalid input',
 };

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

@@ -11,6 +11,7 @@ const CommunitiesPage = lazy(() => import('views/pages/Communities'));
 const SearchPage = lazy(() => import('views/pages/search'));
 
 const CreateCommunityPage = lazy(() => import('views/pages/CreateCommunity'));
+const LaunchToken = lazy(() => import('views/pages/LaunchToken'));
 const OverviewPage = lazy(() => import('views/pages/overview'));
 const MembersPage = lazy(
   () =>
@@ -112,6 +113,7 @@ const CommunityNotFoundPage = lazy(
 const CommonDomainRoutes = ({
   contestEnabled,
   farcasterContestEnabled,
+  tokenizedCommunityEnabled,
 }: RouteFeatureFlags) => [
   <Route key="/editor" path="/editor" element={<EditorPage />} />,
 
@@ -125,6 +127,15 @@ const CommonDomainRoutes = ({
     path="/createCommunity"
     element={withLayout(CreateCommunityPage, { type: 'common' })}
   />,
+  ...(tokenizedCommunityEnabled
+    ? [
+        <Route
+          key="/createTokenCommunity"
+          path="/createTokenCommunity"
+          element={withLayout(LaunchToken, { type: 'common' })}
+        />,
+      ]
+    : []),
   <Route
     key="/dashboard"
     path="/dashboard"

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

@@ -7,6 +7,7 @@ import { RouteFeatureFlags } from './Router';
 const SearchPage = lazy(() => import('views/pages/search'));
 
 const CreateCommunityPage = lazy(() => import('views/pages/CreateCommunity'));
+const LaunchTokenPage = lazy(() => import('views/pages/LaunchToken'));
 const OverviewPage = lazy(() => import('views/pages/overview'));
 const MembersPage = lazy(
   () =>
@@ -103,6 +104,7 @@ const ProfilePageRedirect = lazy(() => import('views/pages/profile_redirect'));
 const CustomDomainRoutes = ({
   contestEnabled,
   farcasterContestEnabled,
+  tokenizedCommunityEnabled,
 }: RouteFeatureFlags) => {
   return [
     <Route
@@ -118,6 +120,15 @@ const CustomDomainRoutes = ({
       path="/createCommunity"
       element={withLayout(CreateCommunityPage, { type: 'common' })}
     />,
+    ...(tokenizedCommunityEnabled
+      ? [
+          <Route
+            key="/createTokenCommunity"
+            path="/createTokenCommunity"
+            element={withLayout(LaunchTokenPage, { type: 'common' })}
+          />,
+        ]
+      : []),
     <Route key="/home" path="/home" element={<Navigate to="/overview" />} />,
     <Route
       key="/search"

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

@@ -15,6 +15,7 @@ import GeneralRoutes from './GeneralRoutes';
 export type RouteFeatureFlags = {
   contestEnabled: boolean;
   farcasterContestEnabled: boolean;
+  tokenizedCommunityEnabled: boolean;
 };
 
 const Router = () => {
@@ -26,9 +27,15 @@ const Router = () => {
     false,
   );
 
+  const tokenizedCommunityEnabled = client.getBooleanValue(
+    'tokenizedCommunity',
+    false,
+  );
+
   const flags = {
     contestEnabled,
     farcasterContestEnabled,
+    tokenizedCommunityEnabled,
   };
 
   const { isCustomDomain } = fetchCachedCustomDomain() || {};

packages/commonwealth/client/scripts/views/components/component_kit/cw_text_area.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import 'components/component_kit/cw_text_area.scss';
 
 import { useFormContext } from 'react-hook-form';
-import { CWText } from 'views/components/component_kit/cw_text';
+import { CWLabel } from './cw_label';
 import type { BaseTextInputProps } from './cw_text_input';
 import { MessageRow, useTextInputWithValidation } from './cw_text_input';
 import type { ValidationStatus } from './cw_validation_text';
@@ -164,9 +164,7 @@ export const CWTextArea = (props: TextAreaProps) => {
       )}
       {charCount && (
         <div className="character-count">
-          <CWText type="caption">
-            Character count: {characterCount}/{charCount}
-          </CWText>
+          <CWLabel label={`Character count: ${characterCount}/${charCount}`} />
         </div>
       )}
     </div>

packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunitySelector/CWCommunitySelector.scss

@@ -11,16 +11,22 @@
   border: 1px solid $neutral-300;
   background-color: $white;
   cursor: pointer;
-  transition: border, background-color 0.3s;
+  transition:
+    border,
+    background-color 0.3s;
+
+  &.active {
+    border-color: $primary-500;
+    background-color: $primary-50;
+  }
 
   &:hover {
     border: 1px solid $neutral-200;
     background-color: $neutral-100;
   }
-
-  @include extraSmall {
-    flex-direction: column;
-    align-items: start;
+  .radio-button {
+    width: fit-content;
+    min-width: 24px !important;
   }
 
   .chain-logo-container {
@@ -41,4 +47,23 @@
       margin-top: 8px;
     }
   }
+
+  @include extraSmall {
+    flex-direction: column;
+    align-items: start;
+
+    &.withRadio {
+      padding: 16px 12px;
+      gap: 8px;
+      flex-direction: row !important;
+      align-items: center !important;
+
+      .chain-logo-container {
+        img {
+          width: 36px;
+          height: 36px;
+        }
+      }
+    }
+  }
 }

packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWCommunitySelector/CWCommunitySelector.tsx

@@ -6,6 +6,8 @@ import { CWText } from 'views/components/component_kit/cw_text';
 import { CWTag } from 'views/components/component_kit/new_designs/CWTag';
 
 import { ChainBase } from '@hicommonwealth/shared';
+import clsx from 'clsx';
+import { CWRadioButton, RadioButtonProps } from '../cw_radio_button';
 import './CWCommunitySelector.scss';
 
 export enum CommunityType {
@@ -26,8 +28,9 @@ interface CWCommunitySelectorProps {
   img: string;
   title: string;
   isRecommended?: boolean;
-  description: string;
+  description?: string;
   onClick: () => void;
+  withRadioButton?: RadioButtonProps;
 }
 
 const CWCommunitySelector = ({
@@ -36,9 +39,21 @@ const CWCommunitySelector = ({
   isRecommended,
   description,
   onClick,
+  withRadioButton,
 }: CWCommunitySelectorProps) => {
   return (
-    <div className={ComponentType.CommunitySelector} onClick={onClick}>
+    <div
+      className={clsx(ComponentType.CommunitySelector, {
+        active: withRadioButton?.checked,
+        withRadio: !!withRadioButton,
+      })}
+      onClick={onClick}
+    >
+      {withRadioButton && (
+        <div className="radio-button">
+          <CWRadioButton {...withRadioButton} />
+        </div>
+      )}
       <div className="chain-logo-container">
         <img src={img} alt={title} />
       </div>

packages/commonwealth/client/scripts/views/components/component_kit/new_designs/cw_radio_button.tsx

@@ -20,9 +20,10 @@ type RadioButtoFormValidationProps = {
   hookToForm?: boolean;
 };
 
-type RadioButtonProps = {
+export type RadioButtonProps = {
   groupName?: string;
   onChange?: (e?: any) => void;
+  hideLabels?: boolean;
 } & Omit<RadioButtonType, 'disabled'> &
   RadioButtonStyleProps &
   RadioButtoFormValidationProps;
@@ -37,6 +38,7 @@ export const CWRadioButton = (props: RadioButtonProps) => {
     onChange,
     checked,
     value,
+    hideLabels,
   } = props;
 
   const formContext = useFormContext();
@@ -64,9 +66,11 @@ export const CWRadioButton = (props: RadioButtonProps) => {
           await onChange?.(e);
         }}
       />
-      <CWText className="label" type="b2" fontWeight="regular">
-        {label || value}
-      </CWText>
+      {!hideLabels && (
+        <CWText className="label" type="b2" fontWeight="regular">
+          {label || value}
+        </CWText>
+      )}
     </label>
   );
 };

packages/commonwealth/client/scripts/views/pages/LaunchToken/LaunchToken.scss

@@ -0,0 +1,7 @@
+@import '../../../../styles/shared';
+
+.LaunchToken {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}

packages/commonwealth/client/scripts/views/pages/LaunchToken/LaunchToken.tsx

@@ -0,0 +1,60 @@
+import { useCommonNavigate } from 'navigation/helpers';
+import React from 'react';
+import CWFormSteps from 'views/components/component_kit/new_designs/CWFormSteps';
+import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
+import { MixpanelCommunityCreationEvent } from '../../../../../shared/analytics/types';
+import useAppStatus from '../../../hooks/useAppStatus';
+import { useBrowserAnalyticsTrack } from '../../../hooks/useBrowserAnalyticsTrack';
+import './LaunchToken.scss';
+import TokenInformationStep from './steps/TokenInformationStep';
+import useCreateCommunity from './useCreateCommunity';
+import { CreateTokenCommunityStep, getFormSteps } from './utils';
+
+const LaunchToken = () => {
+  const navigate = useCommonNavigate();
+  const { createTokenCommunityStep, onChangeStep } = useCreateCommunity();
+
+  const { isAddedToHomeScreen } = useAppStatus();
+
+  useBrowserAnalyticsTrack({
+    payload: {
+      event: MixpanelCommunityCreationEvent.CREATE_TOKEN_COMMUNITY_VISITED,
+      isPWA: isAddedToHomeScreen,
+    },
+  });
+
+  const isSuccessStep =
+    createTokenCommunityStep === CreateTokenCommunityStep.Success;
+
+  const getCurrentStep = () => {
+    switch (createTokenCommunityStep) {
+      case CreateTokenCommunityStep.TokenInformation:
+        return (
+          <TokenInformationStep
+            handleGoBack={() => navigate('/')} // redirect to home
+            handleContinue={() => onChangeStep(true)}
+          />
+        );
+      case CreateTokenCommunityStep.CommunityInformation:
+        // TODO: https://github.com/hicommonwealth/commonwealth/issues/8706
+        return <>Not Implemented</>;
+      case CreateTokenCommunityStep.SignatureLaunch:
+        // TODO: https://github.com/hicommonwealth/commonwealth/issues/8707
+        return <>Not Implemented</>;
+    }
+  };
+
+  return (
+    <CWPageLayout>
+      <div className="LaunchToken">
+        {!isSuccessStep && (
+          <CWFormSteps steps={getFormSteps(createTokenCommunityStep)} />
+        )}
+
+        {getCurrentStep()}
+      </div>
+    </CWPageLayout>
+  );
+};
+
+export default LaunchToken;

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

@@ -0,0 +1,3 @@
+import LaunchToken from './LaunchToken';
+
+export default LaunchToken;

packages/commonwealth/client/scripts/views/pages/LaunchToken/steps/TokenInformationStep/TokenInformationForm/TokenInformationForm.scss

@@ -0,0 +1,30 @@
+@import '../../../../../../../styles/shared.scss';
+
+.TokenInformationForm {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  max-width: 596px;
+
+  .optional-label {
+    font-family: $font-family-silka;
+    color: $neutral-500;
+    margin-left: 6px;
+    margin-top: auto;
+  }
+
+  .action-buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 24px;
+    margin-bottom: 24px;
+    gap: 10px;
+
+    @include smallInclusive {
+      justify-content: flex-end;
+    }
+  }
+}