Merge pull request #15 from HausDAO/feature/prop-forms

Feature/prop forms

src/Routes.tsx

@@ -22,6 +22,8 @@ import RageQuit from "./pages/RageQuit";
 import { MULTI_DAO_ROUTER } from "@daohaus/moloch-v3-hooks";
 import { HomeContainer } from "./components/layout/HomeContainer";
 import { DaoContainer } from "./components/layout/DaoContainer";
+import NewProposal from "./pages/NewProposal";
+import UpdateSettings from "./pages/UpdateSettings";
 
 export const Routes = ({
   setDaoChainId,
@@ -53,8 +55,10 @@ export const Routes = ({
         <Route path="formtest" element={<FormTest />} />
         <Route path="safes" element={<Safes />} />
         <Route path="settings" element={<Settings />} />
+        <Route path="settings/update" element={<UpdateSettings />} />
         <Route path="proposals" element={<Proposals />} />
         <Route path="proposal/:proposalId" element={<Proposal />} />
+        <Route path="new-proposal" element={<NewProposal />} />
         <Route path="members" element={<Members />} />
         <Route path="member/:memberAddress" element={<Member />} />
         <Route path="members/ragequit" element={<RageQuit />} />

src/components/ButtonRouterLink.tsx

@@ -0,0 +1,42 @@
+import React, { ComponentProps } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import styled from 'styled-components';
+import { Button } from '@daohaus/ui';
+
+type ProfileLinkProps = {
+  href?: string;
+  to: string;
+  selected?: boolean;
+  disabled?: boolean;
+  linkType?: 'internal' | 'external' | 'no-icon-external';
+  hideIcon?: boolean;
+  target?: string;
+  rel?: string;
+} & Partial<ComponentProps<typeof Button>>;
+
+const StyledRouterLink = styled(RouterLink)`
+  text-decoration: none;
+  color: unset;
+  &:hover {
+    text-decoration: none;
+  }
+`;
+
+export const ButtonRouterLink = ({
+  to,
+  target,
+  disabled,
+  children,
+  linkType,
+  hideIcon,
+  rel,
+  ...buttonProps
+}: ProfileLinkProps) => {
+  return (
+    <StyledRouterLink to={to} target={target} className="button-link" rel={rel}>
+      <Button disabled={disabled} {...buttonProps}>
+        {children}
+      </Button>
+    </StyledRouterLink>
+  );
+};

src/components/NewProposalList.tsx

@@ -0,0 +1,106 @@
+import { Link as RouterLink } from "react-router-dom";
+import { RiArrowRightSLine } from "react-icons/ri/index.js";
+import styled from "styled-components";
+
+import { Bold, DataSm, ParMd, Tabs } from "@daohaus/ui";
+
+import { CustomFormLego } from "../legos/legoConfig";
+import { useCurrentDao } from "@daohaus/moloch-v3-hooks";
+
+const ListContainer = styled.div`
+  margin-top: 2.5rem;
+`;
+
+const ListItemContainer = styled.div`
+  width: 100%;
+  padding: 1rem 0;
+  border-top: 1px ${({ theme }) => theme.secondary.step6} solid;
+`;
+
+const ListItemLink = styled(RouterLink)`
+  text-decoration: none;
+  width: 100%;
+  color: unset;
+  &:hover {
+    text-decoration: none;
+  }
+`;
+
+const ListItemHoverContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+  border-radius: ${({ theme }) => theme.card.radius};
+
+  &:hover {
+    background: 1px ${({ theme }) => theme.secondary.step3};
+  }
+`;
+
+const ListItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  word-wrap: break-word;
+  max-width: 39rem;
+`;
+
+const StyledIcon = styled(RiArrowRightSLine)`
+  fill: ${({ theme }) => theme.primary.step9};
+  font-size: 3rem;
+`;
+
+type NewProposalListProps = {
+  basicProposals: CustomFormLego[];
+  advancedProposals: CustomFormLego[];
+};
+
+const ProposalList = ({ proposals }: { proposals: CustomFormLego[] }) => {
+  const { daoChain, daoId } = useCurrentDao();
+
+  return (
+    <div>
+      {proposals.map((proposalLego: CustomFormLego) => (
+        <ListItemContainer key={proposalLego.id}>
+          <ListItemLink
+            to={`/molochv3/${daoChain}/${daoId}/new-proposal?formLego=${proposalLego.id}`}
+          >
+            <ListItemHoverContainer>
+              <ListItem>
+                <ParMd>
+                  <Bold>{proposalLego.title}</Bold>
+                </ParMd>
+                <DataSm>{proposalLego.description}</DataSm>
+              </ListItem>
+              <StyledIcon />
+            </ListItemHoverContainer>
+          </ListItemLink>
+        </ListItemContainer>
+      ))}
+    </div>
+  );
+};
+
+export const NewProposalList = ({
+  basicProposals,
+  advancedProposals,
+}: NewProposalListProps) => {
+  return (
+    <ListContainer>
+      <Tabs
+        tabList={[
+          {
+            label: "Basics",
+            Component: () => <ProposalList proposals={basicProposals} />,
+          },
+          {
+            label: "Advanced",
+            Component: () => <ProposalList proposals={advancedProposals} />,
+          },
+        ]}
+      />
+    </ListContainer>
+  );
+};

src/components/layout/DaoContainer.tsx

@@ -5,6 +5,7 @@ import { TXBuilder } from "@daohaus/tx-builder";
 import { H4 } from "@daohaus/ui";
 import { ValidNetwork } from "@daohaus/keychain-utils";
 import { CurrentDaoProvider, useDaoData } from "@daohaus/moloch-v3-hooks";
+import { useMemo } from "react";
 
 export const DaoContainer = () => {
   const location = useLocation();
@@ -19,17 +20,28 @@ export const DaoContainer = () => {
 
   const routePath = `molochv3/${daoChain}/${daoId}`;
 
+  const navLinks = useMemo(() => {
+    let baseLinks = [
+      { label: "Claim", href: `/${routePath}/claim` },
+      { label: "DAO", href: `/${routePath}` },
+      { label: "Safes", href: `/${routePath}/safes` },
+      { label: "Proposals", href: `/${routePath}/proposals` },
+      { label: "Members", href: `/${routePath}/members` },
+      { label: "Settings", href: `/${routePath}/settings` },
+    ];
+
+    return address
+      ? [
+          ...baseLinks,
+          { label: "Profile", href: `/${routePath}/member/${address}` },
+        ]
+      : baseLinks;
+  }, [daoChain, daoId, address]);
+
   return (
     <DHLayout
       pathname={location.pathname}
-      navLinks={[
-        { label: "Home", href: `/` },
-        { label: "DAO Overview", href: `/${routePath}` },
-        { label: "Safes", href: `/${routePath}/safes` },
-        { label: "Proposals", href: `/${routePath}/proposals` },
-        { label: "Members", href: `/${routePath}/members` },
-        { label: "Settings", href: `/${routePath}/settings` },
-      ]}
+      navLinks={navLinks}
       leftNav={<H4>{dao?.name}</H4>}
     >
       <CurrentDaoProvider

src/legos/fields.ts

@@ -1,30 +1,10 @@
-import { FieldLego } from "@daohaus/form-builder";
-import { CustomFieldLego } from "./fieldConfig";
+import { CustomFieldLego } from "./legoConfig";
 
 export const APP_FIELD: Record<string, CustomFieldLego> = {
-  TITLE: {
-    id: "title",
-    type: "input",
-    label: "Proposal Title",
-    placeholder: "Enter title",
-  },
-  DESCRIPTION: {
-    id: "description",
-    type: "textarea",
-    label: "Description",
-    placeholder: "Enter description",
-  },
-  LINK: {
-    id: "link",
-    type: "input",
-    label: "Link",
-    placeholder: "http://",
-    expectType: "url",
-  },
   TEST_FIELD: {
     id: "testField",
     type: "testField",
-    label: "Test Field",
-    placeholder: "Enter something",
+    label: "Enter Something Super",
+    placeholder: "Super Duper",
   },
 };

src/legos/forms.ts

@@ -1,20 +1,19 @@
-import { FormLego } from "@daohaus/form-builder";
 import { FIELD } from "@daohaus/moloch-v3-legos";
-import { CustomFormLego } from "./fieldConfig";
+import { CustomFormLego } from "./legoConfig";
 import { APP_FIELD } from "./fields";
 import { APP_TX } from "./tx";
 
 const PROPOSAL_SETTINGS_FIELDS = [FIELD.PROPOSAL_EXPIRY, FIELD.PROP_OFFERING];
 
 export const APP_FORM: Record<string, CustomFormLego> = {
-  SIGNAL: {
-    id: "SIGNAL",
-    title: "Signal Form",
-    subtitle: "Signal Proposal",
+  TEST_FORM: {
+    id: "TEST_FORM",
+    title: "Super Signal Form",
+    subtitle: "Super Signal Proposal",
     description: "Ratify on-chain using a DAO proposal.",
-    requiredFields: { title: true, description: true },
+    requiredFields: { title: true, description: true, testField: true },
     log: true,
-    tx: APP_TX.POST_SIGNAL,
+    tx: APP_TX.TEST_TX,
     fields: [
       FIELD.TITLE,
       FIELD.DESCRIPTION,

src/legos/legoConfig.ts

@@ -0,0 +1,38 @@
+import { MolochFields } from "@daohaus/moloch-v3-fields";
+import { FieldLegoBase, FormLegoBase } from "@daohaus/utils";
+import { COMMON_FORMS, PROPOSAL_FORMS } from "@daohaus/moloch-v3-legos";
+
+import { APP_FORM } from "./forms";
+import { TestField } from "../components/customFields/fieldTest";
+
+export const AppFieldLookup = {
+  ...MolochFields,
+  testField: TestField,
+};
+
+export type CustomFieldLego = FieldLegoBase<typeof AppFieldLookup>;
+export type CustomFormLego = FormLegoBase<typeof AppFieldLookup>;
+
+export const BASIC_PROPOSAL_FORMS = {
+  TEST_FORM: APP_FORM.TEST_FORM,
+  SIGNAL: PROPOSAL_FORMS.SIGNAL,
+  ISSUE: PROPOSAL_FORMS.ISSUE,
+  TOKENS_FOR_SHARES: PROPOSAL_FORMS.TOKENS_FOR_SHARES,
+  TRANSFER_ERC20: PROPOSAL_FORMS.TRANSFER_ERC20,
+  TRANSFER_NETWORK_TOKEN: PROPOSAL_FORMS.TRANSFER_NETWORK_TOKEN,
+};
+
+export const ADVANCED_PROPOSAL_FORMS = {
+  WALLETCONNECT: PROPOSAL_FORMS.WALLETCONNECT,
+  UPDATE_GOV_SETTINGS: PROPOSAL_FORMS.UPDATE_GOV_SETTINGS,
+  TOKEN_SETTINGS: PROPOSAL_FORMS.TOKEN_SETTINGS,
+  ADD_SHAMAN: PROPOSAL_FORMS.ADD_SHAMAN,
+  GUILDKICK: PROPOSAL_FORMS.GUILDKICK,
+  MULTICALL_BUILDER: PROPOSAL_FORMS.MULTICALL_BUILDER,
+};
+
+export const ALL_APP_FORMS = {
+  ...APP_FORM,
+  ...PROPOSAL_FORMS,
+  ...COMMON_FORMS,
+};

src/legos/tx.ts

@@ -16,8 +16,8 @@ export enum ProposalTypeIds {
 }
 
 export const APP_TX = {
-  POST_SIGNAL: buildMultiCallTX({
-    id: "POST_SIGNAL",
+  TEST_TX: buildMultiCallTX({
+    id: "TEST_TX",
     JSONDetails: {
       type: "JSONDetails",
       jsonSchema: {
@@ -38,6 +38,7 @@ export const APP_TX = {
             jsonSchema: {
               title: `.formValues.title`,
               description: `.formValues.description`,
+              superSignal: `.formValues.testField`,
               contentURI: `.formValues.link`,
               contentURIType: { type: "static", value: "url" },
               proposalType: { type: "static", value: ProposalTypeIds.Signal },

src/pages/FormTest.tsx

@@ -2,7 +2,7 @@ import { FormBuilder } from "@daohaus/form-builder";
 import { MolochFields } from "@daohaus/moloch-v3-fields";
 
 import { APP_FORM } from "../legos/forms";
-import { AppFieldLookup } from "../legos/fieldConfig";
+import { AppFieldLookup } from "../legos/legoConfig";
 import { useCurrentDao } from "@daohaus/moloch-v3-hooks";
 
 export const FormTest = () => {