[ERC20 Launchpad] - Endpoint integration for Community information step

packages/commonwealth/client/scripts/state/api/communities/createCommunity.ts

@@ -13,6 +13,7 @@ interface CreateCommunityProps {
   socialLinks: string[];
   userAddress: string;
   isPWA?: boolean;
+  tokenName?: string;
 }
 
 export const buildCreateCommunityInput = ({
@@ -23,6 +24,7 @@ export const buildCreateCommunityInput = ({
   iconUrl,
   socialLinks,
   userAddress,
+  tokenName,
   chainNodeId,
 }: CreateCommunityProps) => {
   const nameToSymbol = name.toUpperCase().slice(0, 4);
@@ -36,6 +38,7 @@ export const buildCreateCommunityInput = ({
     user_address: userAddress,
     type: ChainType.Offchain,
     default_symbol: nameToSymbol,
+    token_name: tokenName,
     chain_node_id: chainNodeId,
   };
 };

packages/commonwealth/client/scripts/views/components/CommunityInformationForm/CommunityInformationForm.tsx

@@ -43,7 +43,9 @@ const CommunityInformationForm = ({
   isCreatingCommunity,
   submitBtnLabel,
 }: CommunityInformationFormProps) => {
-  const [communityName, setCommunityName] = useState('');
+  const [communityName, setCommunityName] = useState(
+    initialValues?.communityName || '',
+  );
   const [isProcessingProfileImage, setIsProcessingProfileImage] =
     useState(false);
 

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

@@ -16,9 +16,9 @@ const LaunchToken = () => {
   const {
     createTokenCommunityStep,
     onChangeStep,
+    createdTokenInfo,
     selectedAddress,
     setSelectedAddress,
-    createdTokenInfo,
     setCreatedTokenInfo,
   } = useCreateCommunity();
 
@@ -60,6 +60,7 @@ const LaunchToken = () => {
             handleGoBack={() => onChangeStep(false)}
             handleContinue={() => onChangeStep(true)}
             tokenInfo={createdTokenInfo}
+            selectedAddress={selectedAddress}
           />
         );
       case CreateTokenCommunityStep.SignatureLaunch:

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

@@ -1,41 +1,98 @@
+import { ChainBase, commonProtocol } from '@hicommonwealth/shared';
+import { notifyError } from 'controllers/app/notifications';
 import useAppStatus from 'hooks/useAppStatus';
 import { useBrowserAnalyticsTrack } from 'hooks/useBrowserAnalyticsTrack';
+import AddressInfo from 'models/AddressInfo';
 import React from 'react';
 import {
   BaseMixpanelPayload,
   MixpanelCommunityCreationEvent,
   MixpanelLoginPayload,
 } from 'shared/analytics/types';
+import useCreateCommunityMutation, {
+  buildCreateCommunityInput,
+} from 'state/api/communities/createCommunity';
+import { fetchCachedNodes } from 'state/api/nodes';
 import CommunityInformationForm from 'views/components/CommunityInformationForm/CommunityInformationForm';
+import { CommunityInformationFormSubmitValues } from 'views/components/CommunityInformationForm/types';
 import { CWText } from 'views/components/component_kit/cw_text';
 import CWBanner from 'views/components/component_kit/new_designs/CWBanner';
 import { openConfirmation } from 'views/modals/confirmation_modal';
 import { TokenInfo } from '../../types';
 import './CommunityInformationStep.scss';
+import { generateCommunityNameFromToken } from './utils';
 
 interface CommunityInformationStepProps {
   handleGoBack: () => void;
   handleContinue: () => void;
   tokenInfo?: TokenInfo;
+  selectedAddress?: AddressInfo;
 }
 
 const CommunityInformationStep = ({
   handleGoBack,
   handleContinue,
+  tokenInfo,
+  selectedAddress,
 }: CommunityInformationStepProps) => {
   const { isAddedToHomeScreen } = useAppStatus();
 
+  const initialValues = {
+    communityName: generateCommunityNameFromToken({
+      tokenName: tokenInfo?.name || '',
+      tokenSymbol: tokenInfo?.symbol || '',
+    }),
+    communityDescription: tokenInfo?.description || '',
+    communityProfileImageURL: tokenInfo?.imageURL || '',
+  };
+
   const { trackAnalytics } = useBrowserAnalyticsTrack<
     MixpanelLoginPayload | BaseMixpanelPayload
   >({
     onAction: true,
   });
 
-  const handleSubmit = async (values: unknown) => {
-    // TODO 8706: integrate endpoint
-    console.log('values => ', values);
-    await new Promise((r) => setTimeout(r, 10));
-    handleContinue();
+  const {
+    mutateAsync: createCommunityMutation,
+    isLoading: createCommunityLoading,
+  } = useCreateCommunityMutation();
+
+  const handleSubmit = async (
+    values: CommunityInformationFormSubmitValues & { communityId: string },
+  ) => {
+    // this condition will never be fulfilled but adding this to avoid typescript errors
+    if (!selectedAddress) {
+      notifyError('No address selected');
+      return;
+    }
+
+    const nodes = fetchCachedNodes();
+    const baseNode = nodes?.find(
+      (n) => n.ethChainId === commonProtocol.ValidChains.Base,
+    );
+    if (!baseNode || !baseNode.ethChainId) {
+      notifyError('Could not find base chain node');
+      return;
+    }
+
+    try {
+      const input = buildCreateCommunityInput({
+        id: values.communityId,
+        name: values.communityName,
+        chainBase: ChainBase.Ethereum,
+        description: values.communityDescription,
+        iconUrl: values.communityProfileImageURL,
+        socialLinks: values.links ?? [],
+        userAddress: selectedAddress.address,
+        chainNodeId: baseNode.ethChainId,
+        isPWA: isAddedToHomeScreen,
+        tokenName: tokenInfo?.name || '',
+      });
+      await createCommunityMutation(input);
+      handleContinue();
+    } catch (err) {
+      notifyError(err.message);
+    }
   };
 
   const handleCancel = () => {
@@ -81,9 +138,10 @@ const CommunityInformationStep = ({
       <CommunityInformationForm
         onSubmit={handleSubmit}
         onCancel={handleCancel}
-        isCreatingCommunity={false}
+        isCreatingCommunity={createCommunityLoading}
         submitBtnLabel="Next"
         withSocialLinks={true}
+        initialValues={initialValues}
       />
     </div>
   );

packages/commonwealth/client/scripts/views/pages/LaunchToken/steps/CommunityInformationStep/utils.ts

@@ -0,0 +1,9 @@
+export const generateCommunityNameFromToken = ({
+  tokenName,
+  tokenSymbol,
+}: {
+  tokenName: string;
+  tokenSymbol: string;
+}) => {
+  return `${tokenName} (${tokenSymbol}) Community`;
+};