10886245916

Committed 16 Sep 2024 02:45PM UTC coverage: 13.702% (-0.009%) from 13.711%

Build # 10886245916

Build Type

Pull #9230

github

Committed by

web-flow

Commit Message

Merge 7d1d95cfa into 889a63dbc

Pull Request Pull Request #9230: [ERC20 Launchpad] - Endpoint integration for Community information step

Run Details

3031 of 20574 branches covered (14.73%)

Branch coverage included in aggregate %.

0 of 24 new or added lines in 6 files covered. (0.0%)

10 existing lines in 3 files now uncovered.

3964 of 30477 relevant lines covered (13.01%)

3.93 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

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

import React, { useState } from 'react';
import { slugifyPreserveDashes } from 'utils';

import { useFetchConfigurationQuery } from 'state/api/configuration';
import {
  CWCoverImageUploader,
  ImageBehavior,
} from 'views/components/component_kit/cw_cover_image_uploader';
import { CWIconButton } from 'views/components/component_kit/cw_icon_button';
import { CWText } from 'views/components/component_kit/cw_text';
import { CWTextArea } from 'views/components/component_kit/cw_text_area';
import { CWButton } from 'views/components/component_kit/new_designs/CWButton';
import { CommunityType } from 'views/components/component_kit/new_designs/CWCommunitySelector';
import { CWForm } from 'views/components/component_kit/new_designs/CWForm';
import { CWSelectList } from 'views/components/component_kit/new_designs/CWSelectList';
import { CWTextInput } from 'views/components/component_kit/new_designs/CWTextInput';
import './CommunityInformationForm.scss';
import {
  BASE_ID,
  BLAST_ID,
  ETHEREUM_MAINNET_ID,
  OSMOSIS_ID,
  POLYGON_ETH_CHAIN_ID,
  alphabeticallyStakeWiseSortedChains as sortedChains,
} from './constants';
import {
  CommunityInformationFormProps,
  CommunityInformationFormSubmitValues,
} from './types';
import useSocialLinks from './useSocialLinks';
import {
  baseCommunityInformationFormValidationSchema,
  communityChainValidation,
} from './validation';

const CommunityInformationForm = ({
  onSubmit,
  onCancel,
  onWatch,
  withChainsConfig,
  withSocialLinks = false,
  initialValues,
  isCreatingCommunity,
  submitBtnLabel,
}: CommunityInformationFormProps) => {
  const [communityName, setCommunityName] = useState(
    initialValues?.communityName || '',
  );
  const [isProcessingProfileImage, setIsProcessingProfileImage] =
    useState(false);

  const {
    socialLinks,
    addLink,
    removeLinkAtIndex,
    validateSocialLinks,
    updateAndValidateSocialLinkAtIndex,
  } = useSocialLinks();

  const { data: configurationData } = useFetchConfigurationQuery();

  const communityId = slugifyPreserveDashes(communityName.toLowerCase());
  const isCommunityNameTaken = !!configurationData?.redirects?.[communityId];

  const validation = withChainsConfig
    ? baseCommunityInformationFormValidationSchema.merge(
        communityChainValidation,
      )
    : baseCommunityInformationFormValidationSchema;

  const getChainOptions = () => {
    const mappedChainValue = (chainType) => ({
      helpText: chainType.hasStakeEnabled ? 'Community Stake' : '',
      label: chainType.label,
      value: `${chainType.value}`,
    });

    // Since we are treating polygon as an ecosystem, we will only have a single option, which will be
    // preselected and further input's will be disabled
    if (withChainsConfig?.community?.type === CommunityType.Polygon) {
      return sortedChains
        .filter((chainType) => chainType.value === POLYGON_ETH_CHAIN_ID)
        .map(mappedChainValue);
    }

    if (withChainsConfig?.community?.type === CommunityType.Solana) {
      return sortedChains
        .filter((chainType) => chainType.chainBase === CommunityType.Solana)
        .map(mappedChainValue);
    }

    return sortedChains
      .filter(
        (chainType) =>
          chainType.chainBase ===
          (withChainsConfig?.community?.type === CommunityType.Cosmos
            ? CommunityType.Cosmos
            : CommunityType.Ethereum),
      )
      .map(mappedChainValue);
  };

  const getInitialValue = () => {
    return {
      ...(initialValues || {}),
      ...(withChainsConfig && {
        chain: (() => {
          const options = getChainOptions();

          switch (withChainsConfig.community.type) {
            case CommunityType.Base:
              return options?.find((o) => o.value === BASE_ID);
            case CommunityType.Ethereum:
              return options?.find((o) => o.value === ETHEREUM_MAINNET_ID);
            case CommunityType.Cosmos:
              return options?.find((o) => o.value === OSMOSIS_ID);
            case CommunityType.Blast:
              return options?.find((o) => o.value === BLAST_ID);
            case CommunityType.Polygon:
            case CommunityType.Solana:
              return options?.[0];
          }
        })(),
      }),
    };
  };

  const handleSubmit = async (values: CommunityInformationFormSubmitValues) => {
    const hasLinksError = validateSocialLinks();

    if (isCommunityNameTaken || hasLinksError) return;
    // @ts-expect-error StrictNullChecks
    values.links = socialLinks.map((link) => link.value).filter(Boolean);

    await onSubmit({ ...values, communityId }).catch(console.error);
  };

  return (
    <CWForm
      validationSchema={validation}
      onSubmit={handleSubmit}
      className="CommunityInformationForm"
      initialValues={getInitialValue()}
      onWatch={onWatch}
    >
      {/* Form fields */}
      <CWTextInput
        name="communityName"
        hookToForm
        label="Community Name"
        placeholder="Name your community"
        fullWidth
        onInput={(e) => setCommunityName(e.target.value?.trim())}
        customError={
          isCommunityNameTaken ? 'Community name is already taken' : ''
        }
      />

      {withChainsConfig && (
        <CWSelectList
          name="chain"
          hookToForm
          isClearable={false}
          label="Select chain"
          placeholder="Select chain"
          isDisabled={
            withChainsConfig.community.type === CommunityType.Polygon ||
            withChainsConfig.community.type === CommunityType.Solana
          }
          options={getChainOptions()}
        />
      )}

      <CWTextInput
        label="Community URL"
        placeholder="URL will appear when you name your community"
        fullWidth
        disabled
        value={communityName ? `${window.location.origin}/${communityId}` : ''}
      />

      <CWTextArea
        name="communityDescription"
        hookToForm
        label="Community Description"
        placeholder="Enter a description of your community or project"
        charCount={250}
      />

      <CWCoverImageUploader
        subheaderText="Community Profile Image (Accepts JPG and PNG files)"
        canSelectImageBehaviour={false}
        showUploadAndGenerateText
        onImageProcessStatusChange={setIsProcessingProfileImage}
        name="communityProfileImageURL"
        hookToForm
        defaultImageBehaviour={ImageBehavior.Circle}
        enableGenerativeAI
      />

      {withSocialLinks ? (
        <>
          <section className="header">
            <CWText type="h4">
              Community Links{' '}
              <CWText type="b1" className="optional-label">
                &#40;Optional&#41;
              </CWText>
            </CWText>
            <CWText type="b1" className="description">
              Add your Discord, X (Twitter), Telegram, Website, etc.
            </CWText>
          </section>

          <section className="social-links">
            <CWText type="caption">Social Links</CWText>

            {socialLinks.map((socialLink, index) => (
              <div className="link-input-container" key={index}>
                <CWTextInput
                  containerClassName="w-full"
                  placeholder="https://example.com"
                  fullWidth
                  value={socialLink.value}
                  customError={socialLink.error}
                  onInput={(e) =>
                    updateAndValidateSocialLinkAtIndex(
                      e.target.value?.trim(),
                      index,
                    )
                  }
                  onBlur={() =>
                    updateAndValidateSocialLinkAtIndex(
                      socialLink.value || '',
                      index,
                    )
                  }
                  onFocus={() =>
                    updateAndValidateSocialLinkAtIndex(
                      socialLink.value || '',
                      index,
                    )
                  }
                />
                <CWIconButton
                  iconButtonTheme="neutral"
                  iconName="trash"
                  iconSize="large"
                  onClick={() => removeLinkAtIndex(index)}
                  disabled={socialLinks.length === 1}
                />
              </div>
            ))}

            <button type="button" className="add-link-button" onClick={addLink}>
              + Add social link
            </button>
          </section>
        </>
      ) : (
        <></>
      )}

      {/* Action buttons */}
      <section className="action-buttons">
        <CWButton
          type="button"
          label="Cancel"
          buttonWidth="wide"
          buttonType="secondary"
          onClick={onCancel}
        />
        <CWButton
          type="submit"
          buttonWidth="wide"
          label={submitBtnLabel}
          disabled={isCreatingCommunity || isProcessingProfileImage}
        />
      </section>
    </CWForm>
  );
};

export default CommunityInformationForm;

1	import React, { useState } from 'react';
2	import { slugifyPreserveDashes } from 'utils';
3
4	import { useFetchConfigurationQuery } from 'state/api/configuration';
5	import {
6	CWCoverImageUploader,
7	ImageBehavior,
8	} from 'views/components/component_kit/cw_cover_image_uploader';
9	import { CWIconButton } from 'views/components/component_kit/cw_icon_button';
10	import { CWText } from 'views/components/component_kit/cw_text';
11	import { CWTextArea } from 'views/components/component_kit/cw_text_area';
12	import { CWButton } from 'views/components/component_kit/new_designs/CWButton';
13	import { CommunityType } from 'views/components/component_kit/new_designs/CWCommunitySelector';
14	import { CWForm } from 'views/components/component_kit/new_designs/CWForm';
15	import { CWSelectList } from 'views/components/component_kit/new_designs/CWSelectList';
16	import { CWTextInput } from 'views/components/component_kit/new_designs/CWTextInput';
17	import './CommunityInformationForm.scss';
18	import {
19	BASE_ID,
20	BLAST_ID,
21	ETHEREUM_MAINNET_ID,
22	OSMOSIS_ID,
23	POLYGON_ETH_CHAIN_ID,
24	alphabeticallyStakeWiseSortedChains as sortedChains,
25	} from './constants';
26	import {
27	CommunityInformationFormProps,
28	CommunityInformationFormSubmitValues,
29	} from './types';
30	import useSocialLinks from './useSocialLinks';
31	import {
32	baseCommunityInformationFormValidationSchema,
33	communityChainValidation,
34	} from './validation';
35
36	const CommunityInformationForm = ({	×
37	onSubmit,
38	onCancel,
39	onWatch,
40	withChainsConfig,
41	withSocialLinks = false,	×
42	initialValues,
43	isCreatingCommunity,
44	submitBtnLabel,
45	}: CommunityInformationFormProps) => {
NEW 46	const [communityName, setCommunityName] = useState(	×
47	initialValues?.communityName \|\| '',	×
48	);
49	const [isProcessingProfileImage, setIsProcessingProfileImage] =
50	useState(false);	×
51
52	const {
53	socialLinks,
54	addLink,
55	removeLinkAtIndex,
56	validateSocialLinks,
57	updateAndValidateSocialLinkAtIndex,
58	} = useSocialLinks();	×
59
60	const { data: configurationData } = useFetchConfigurationQuery();	×
61
62	const communityId = slugifyPreserveDashes(communityName.toLowerCase());	×
63	const isCommunityNameTaken = !!configurationData?.redirects?.[communityId];	×
64
65	const validation = withChainsConfig	×
66	? baseCommunityInformationFormValidationSchema.merge(
67	communityChainValidation,
68	)
69	: baseCommunityInformationFormValidationSchema;
70
71	const getChainOptions = () => {	×
72	const mappedChainValue = (chainType) => ({	×
73	helpText: chainType.hasStakeEnabled ? 'Community Stake' : '',	×
74	label: chainType.label,
75	value: `${chainType.value}`,
76	});
77
78	// Since we are treating polygon as an ecosystem, we will only have a single option, which will be
79	// preselected and further input's will be disabled
80	if (withChainsConfig?.community?.type === CommunityType.Polygon) {	×
81	return sortedChains	×
82	.filter((chainType) => chainType.value === POLYGON_ETH_CHAIN_ID)	×
83	.map(mappedChainValue);
84	}
85
86	if (withChainsConfig?.community?.type === CommunityType.Solana) {	×
87	return sortedChains	×
88	.filter((chainType) => chainType.chainBase === CommunityType.Solana)	×
89	.map(mappedChainValue);
90	}
91
92	return sortedChains	×
93	.filter(
94	(chainType) =>
95	chainType.chainBase ===	×
96	(withChainsConfig?.community?.type === CommunityType.Cosmos	×
97	? CommunityType.Cosmos
98	: CommunityType.Ethereum),
99	)
100	.map(mappedChainValue);
101	};
102
103	const getInitialValue = () => {	×
104	return {	×
105	...(initialValues \|\| {}),	×
106	...(withChainsConfig && {	×
107	chain: (() => {
108	const options = getChainOptions();	×
109
110	switch (withChainsConfig.community.type) {	×
111	case CommunityType.Base:
112	return options?.find((o) => o.value === BASE_ID);	×
113	case CommunityType.Ethereum:
114	return options?.find((o) => o.value === ETHEREUM_MAINNET_ID);	×
115	case CommunityType.Cosmos:
116	return options?.find((o) => o.value === OSMOSIS_ID);	×
117	case CommunityType.Blast:
118	return options?.find((o) => o.value === BLAST_ID);	×
119	case CommunityType.Polygon:
120	case CommunityType.Solana:
121	return options?.[0];	×
122	}
123	})(),
124	}),
125	};
126	};
127
128	const handleSubmit = async (values: CommunityInformationFormSubmitValues) => {	×
129	const hasLinksError = validateSocialLinks();	×
130
131	if (isCommunityNameTaken \|\| hasLinksError) return;	×
132	// @ts-expect-error StrictNullChecks
133	values.links = socialLinks.map((link) => link.value).filter(Boolean);	×
134
135	await onSubmit({ ...values, communityId }).catch(console.error);	×
136	};
137
138	return (	×
139	<CWForm
140	validationSchema={validation}
141	onSubmit={handleSubmit}
142	className="CommunityInformationForm"
143	initialValues={getInitialValue()}
144	onWatch={onWatch}
145	>
146	{/* Form fields */}
147	<CWTextInput
148	name="communityName"
149	hookToForm
150	label="Community Name"
151	placeholder="Name your community"
152	fullWidth
153	onInput={(e) => setCommunityName(e.target.value?.trim())}	×
154	customError={
155	isCommunityNameTaken ? 'Community name is already taken' : ''	×
156	}
157	/>
158
159	{withChainsConfig && (	×
160	<CWSelectList
161	name="chain"
162	hookToForm
163	isClearable={false}
164	label="Select chain"
165	placeholder="Select chain"
166	isDisabled={
167	withChainsConfig.community.type === CommunityType.Polygon \|\|	×
168	withChainsConfig.community.type === CommunityType.Solana
169	}
170	options={getChainOptions()}
171	/>
172	)}
173
174	<CWTextInput
175	label="Community URL"
176	placeholder="URL will appear when you name your community"
177	fullWidth
178	disabled
179	value={communityName ? `${window.location.origin}/${communityId}` : ''}	×
180	/>
181
182	<CWTextArea
183	name="communityDescription"
184	hookToForm
185	label="Community Description"
186	placeholder="Enter a description of your community or project"
187	charCount={250}
188	/>
189
190	<CWCoverImageUploader
191	subheaderText="Community Profile Image (Accepts JPG and PNG files)"
192	canSelectImageBehaviour={false}
193	showUploadAndGenerateText
194	onImageProcessStatusChange={setIsProcessingProfileImage}
195	name="communityProfileImageURL"
196	hookToForm
197	defaultImageBehaviour={ImageBehavior.Circle}
198	enableGenerativeAI
199	/>
200
201	{withSocialLinks ? (	×
202	<>
203	<section className="header">
204	<CWText type="h4">
205	Community Links{' '}
206	<CWText type="b1" className="optional-label">
207	(Optional)
208	</CWText>
209	</CWText>
210	<CWText type="b1" className="description">
211	Add your Discord, X (Twitter), Telegram, Website, etc.
212	</CWText>
213	</section>
214
215	<section className="social-links">
216	<CWText type="caption">Social Links</CWText>
217
218	{socialLinks.map((socialLink, index) => (
219	<div className="link-input-container" key={index}>	×
220	<CWTextInput
221	containerClassName="w-full"
222	placeholder="https://example.com"
223	fullWidth
224	value={socialLink.value}
225	customError={socialLink.error}
226	onInput={(e) =>
227	updateAndValidateSocialLinkAtIndex(	×
228	e.target.value?.trim(),
229	index,
230	)
231	}
232	onBlur={() =>
233	updateAndValidateSocialLinkAtIndex(	×
234	socialLink.value \|\| '',	×
235	index,
236	)
237	}
238	onFocus={() =>
239	updateAndValidateSocialLinkAtIndex(	×
240	socialLink.value \|\| '',	×
241	index,
242	)
243	}
244	/>
245	<CWIconButton
246	iconButtonTheme="neutral"
247	iconName="trash"
248	iconSize="large"
249	onClick={() => removeLinkAtIndex(index)}	×
250	disabled={socialLinks.length === 1}
251	/>
252	</div>
253	))}
254
255	<button type="button" className="add-link-button" onClick={addLink}>
256	+ Add social link
257	</button>
258	</section>
259	</>
260	) : (
261	<></>
262	)}
263
264	{/* Action buttons */}
265	<section className="action-buttons">
266	<CWButton
267	type="button"
268	label="Cancel"
269	buttonWidth="wide"
270	buttonType="secondary"
271	onClick={onCancel}
272	/>
273	<CWButton
274	type="submit"
275	buttonWidth="wide"
276	label={submitBtnLabel}
277	disabled={isCreatingCommunity \|\| isProcessingProfileImage}	×
278	/>
279	</section>
280	</CWForm>
281	);
282	};
283
284	export default CommunityInformationForm;

hicommonwealth / commonwealth / 10886245916

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous