add react select and form field

package.json

@@ -14,6 +14,7 @@
     "@daohaus/connect": "^0.4.1",
     "@daohaus/connect-context": "^0.4.1",
     "@daohaus/contract-utils": "^0.4.1",
+    "@daohaus/data-fetch-utils": "^0.4.1",
     "@daohaus/form-builder": "^0.4.1",
     "@daohaus/form-builder-base": "^0.4.1",
     "@daohaus/keychain-utils": "^0.4.1",
@@ -24,14 +25,14 @@
     "@daohaus/moloch-v3-macro-ui": "^0.4.1",
     "@daohaus/profile-data": "^0.4.1",
     "@daohaus/tx-builder": "^0.4.1",
-    "@daohaus/data-fetch-utils": "^0.4.1",
     "@daohaus/ui": "^0.4.1",
     "@daohaus/utils": "^0.4.1",
     "ethers": "^5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",
-    "react-router-dom": "^6.4.3"
+    "react-router-dom": "^6.4.3",
+    "react-select": "^5.8.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.22",

src/components/customFields/MultiSelect.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+    Buildable,
+
+    Field,
+
+} from '@daohaus/ui';
+import { useFormContext } from 'react-hook-form';
+import Select from 'react-select'
+
+import styled from 'styled-components';
+
+
+
+const MultiSelectContainer = styled.div`
+  
+`;
+
+export const MultiSelect = (props: Buildable<Field>) => {
+    const { setValue, watch } = useFormContext();
+    const [content, createdAt] = watch([props.id, "createdAt"]);
+
+    const options = [
+        { value: 'technology', label: 'Technology' },
+        { value: 'education', label: 'Education' },
+        { value: 'philosophy', label: 'Philosophy' },
+        { value: 'art', label: 'Art' },
+        { value: 'finance', label: 'Finance' },
+        { value: 'activism', label: 'Activism' },
+        { value: 'health', label: 'Health' },
+        { value: 'science', label: 'Science' },
+        { value: 'politics', label: 'Politics' },
+        { value: 'adventure', label: 'Adventure' },
+        { value: 'wtf', label: 'wtf' },
+        { value: 'special', label: 'Special' },
+      ]
+
+    const [selectedOption, setSelectedOption] = useState();
+
+    function handleChange(selectedOption: any) {
+        const selectedValues = selectedOption.map((option: any) => option.value)
+        setValue(props.id, selectedValues);
+        setSelectedOption(selectedOption)
+    }
+
+    useEffect(() => {
+        const drafts = localStorage.getItem("drafts") || "{}" as string;
+        const parsedDrafts = JSON.parse(drafts);
+
+        if (parsedDrafts[createdAt]) {
+
+            if(!parsedDrafts[createdAt].tags) {
+                return
+            }
+
+            const tags = parsedDrafts[createdAt]?.tags.map((tag: string) => {
+                return { value: tag, label: tag[0].toUpperCase() + tag.substring(1).toLowerCase() }
+            }
+            );
+            setSelectedOption(tags || []);
+
+        }
+
+      }, [createdAt]);
+
+
+    return (
+        <MultiSelectContainer>
+            <Select 
+              options={options}
+              value={selectedOption}
+              onChange={handleChange}
+              isMulti
+              styles={{
+                control: (baseStyles, state) => ({
+                  ...baseStyles,
+                  background: "hsl(228, 43.3%, 17.5%)", // TODO: use theme,
+                }),
+                menuList: base => ({
+                    ...base,
+                    background: "hsl(228, 43.3%, 17.5%)"
+                }),
+                option: (styles, {isFocused, isSelected}) => ({
+                    ...styles,
+                    background: isFocused
+                        ? 'hsl(226, 70.0%, 55.5%)'
+                        : isSelected
+                            ? 'hsla(291, 64%, 42%, 1)'
+                            : undefined
+                }),
+                multiValueRemove: (styles) => ({
+                    ...styles,
+                    backgroundColor: 'hsl(226, 70.0%, 55.5%)'
+                }),
+              }}
+               />
+        </MultiSelectContainer>
+    );
+};

src/legos/fieldConfig.ts

@@ -9,6 +9,7 @@ import { SaltNonce } from "../components/customFields/SaltNonce";
 import { DAOAddress } from "../components/customFields/DAOAddress";
 import { ShamanAddress } from "../components/customFields/ShamanAddress";
 import { ParamTag } from "../components/customFields/ParamTag";
+import { MultiSelect } from "../components/customFields/MultiSelect";
 
 export const AppFieldLookup = {
   ...MolochFields,
@@ -20,7 +21,8 @@ export const AppFieldLookup = {
   daoAddress: DAOAddress,
   shamanAddress: ShamanAddress,
   saltNonce: SaltNonce,
-  paramTag: ParamTag
+  paramTag: ParamTag,
+  multiSelect: MultiSelect,
 };
 
 export type CustomFieldLego = FieldLegoBase<typeof AppFieldLookup>;

src/legos/fields.ts

@@ -39,4 +39,8 @@ export const APP_FIELD: Record<string, CustomFieldLego> = {
     id: "paramTag",
     type: "paramTag",
   },
+  TAGS_MULTISELECT_FIELD: {
+    id: 'tags',
+    type: 'multiSelect',
+  },
 };

src/legos/forms.ts

@@ -67,6 +67,7 @@ export const APP_FORM: Record<string, CustomFormLego> = {
       APP_FIELD.DAO_ADDRESS_FIELD,
       APP_FIELD.SHAMAN_ADDRESS_FIELD,
       APP_FIELD.PARAM_TAG_FIELD,
+      APP_FIELD.TAGS_MULTISELECT_FIELD,
       {
         id: "parentCheckGateRender",
         type: "checkGateRender",

src/utils/summonTx.ts

@@ -496,8 +496,12 @@ const introPostConfigTX = (formValues: SummonParams, memberAddress: EthAddress,
   throw new Error("Encoding Error");
 };
 
-const metadataConfigTX = (formValues: Record<string, unknown>, memberAddress: EthAddress, posterAddress: string) => {
-  const { daoName, calculatedDAOAddress, article: body, headerImage, description, paramTag } = formValues;
+interface FormValues extends Record<string, unknown> {
+  tags: string[];
+}
+
+const metadataConfigTX = (formValues: FormValues, memberAddress: EthAddress, posterAddress: string) => {
+  const { daoName, calculatedDAOAddress, article: body, headerImage, description, paramTag, tags } = formValues;
   if (!isString(daoName)) {
     console.log("ERROR: Form Values", formValues);
     throw new Error("metadataTX recieved arguments in the wrong shape or type");
@@ -513,7 +517,7 @@ const metadataConfigTX = (formValues: Record<string, unknown>, memberAddress: Et
                 longDescription: body || "",
                 avatarImg: headerImage || "",
                 title: `${daoName} Incarnation`,
-                tags: ["DIN", "Incarnation", paramTag || "topic"],
+                tags: ["DIN", "Incarnation", paramTag || "topic", ...tags],
                 authorAddress: memberAddress,
                 // parentId: 0
               };