Merge pull request #2580 from decentdao/2534-templates-ux

Add browse templates to DAO home

src/components/DaoDashboard/Activities/ProposalsHome.tsx

@@ -17,6 +17,7 @@ import {
   SortBy,
 } from '../../../types';
 import { ProposalsList } from '../../Proposals/ProposalsList';
+import { CreateProposalMenu } from '../../ui/menus/CreateProposalMenu';
 import { OptionMenu } from '../../ui/menus/OptionMenu';
 import { ModalType } from '../../ui/modals/ModalProvider';
 import { useDecentModal } from '../../ui/modals/useDecentModal';
@@ -258,25 +259,19 @@ export function ProposalsHome() {
 
           {/* DELEGATE AND CREATE PROPOSAL BUTTONS (non-mobile) */}
           <Show above="md">
-            <Flex gap={3}>
+            <Flex gap={6}>
               {canDelegate && (
                 <Button
                   onClick={delegate}
                   variant="secondary"
-                  size="sm"
+                  border={0}
+                  size="md"
                 >
                   {t('delegate', { ns: 'common' })}
                 </Button>
               )}
               {canUserCreateProposal && safe?.address && (
-                <Link to={DAO_ROUTES.proposalNew.relative(addressPrefix, safe.address)}>
-                  <Button
-                    size="sm"
-                    minW={0}
-                  >
-                    {t('createProposal')}
-                  </Button>
-                </Link>
+                <CreateProposalMenu safeAddress={safe.address} />
               )}
             </Flex>
           </Show>

src/components/ProposalBuilder/index.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex, Grid, GridItem, Icon, Text } from '@chakra-ui/react';
-import { SquaresFour, Trash } from '@phosphor-icons/react';
+import { ArrowLeft, SquaresFour } from '@phosphor-icons/react';
 import { Formik, FormikProps } from 'formik';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -165,7 +165,7 @@ export function ProposalBuilder({
                         },
                       ]
                 }
-                ButtonIcon={Trash}
+                ButtonIcon={ArrowLeft}
                 buttonProps={{
                   isDisabled: pendingCreateTx,
                   variant: 'secondary',

src/components/ui/menus/CreateProposalMenu/index.tsx

@@ -0,0 +1,129 @@
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Icon,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+} from '@chakra-ui/react';
+import { CaretDown } from '@phosphor-icons/react';
+import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { Address } from 'viem';
+import { NEUTRAL_2_82_TRANSPARENT } from '../../../../constants/common';
+import { DAO_ROUTES } from '../../../../constants/routes';
+import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
+import { EaseOutComponent } from '../../utils/EaseOutComponent';
+
+export function CreateProposalMenu({ safeAddress }: { safeAddress: Address }) {
+  const { t } = useTranslation('proposal');
+
+  const { addressPrefix } = useNetworkConfig();
+
+  const navigate = useNavigate();
+
+  return (
+    <Box>
+      <Menu
+        placement="bottom-end"
+        offset={[0, 4]}
+      >
+        {({ isOpen }) => (
+          <Fragment>
+            <MenuButton
+              as={Button}
+              variant="secondary"
+              border="1px solid transparent"
+              borderRadius="0.75rem"
+              _hover={{ bg: 'neutral-2' }}
+              _active={{
+                color: 'lilac-0',
+                border: '1px solid',
+                borderColor: 'neutral-3',
+                bg: 'neutral-2',
+              }}
+            >
+              <Flex
+                alignItems="center"
+                gap={2}
+              >
+                <Text>{t('createProposal')}</Text>
+                <Icon
+                  as={CaretDown}
+                  boxSize="1.5rem"
+                />
+              </Flex>
+            </MenuButton>
+            {isOpen && (
+              <EaseOutComponent>
+                <MenuList>
+                  <Box
+                    backdropFilter="auto"
+                    bg={NEUTRAL_2_82_TRANSPARENT}
+                    backdropBlur="10px"
+                    border="1px solid"
+                    borderColor="neutral-3"
+                    className="scroll-dark"
+                    maxHeight="20rem"
+                    overflowY="auto"
+                    rounded="0.75rem"
+                    py="0.25rem"
+                  >
+                    <Box px="0.15rem">
+                      <MenuItem
+                        as={Button}
+                        variant="tertiary"
+                        h="2.5rem"
+                        onClick={() =>
+                          navigate(DAO_ROUTES.proposalNew.relative(addressPrefix, safeAddress))
+                        }
+                        noOfLines={1}
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="flex-start"
+                        rounded="0.75rem"
+                        gap={2}
+                      >
+                        <Flex flexDir="column">
+                          <Text>{t('createFromScratch')}</Text>
+                        </Flex>
+                      </MenuItem>
+                    </Box>
+                    <Divider my="0.25rem" />
+                    <Box px="0.15rem">
+                      <MenuItem
+                        as={Button}
+                        variant="tertiary"
+                        h="2.5rem"
+                        onClick={() =>
+                          navigate(
+                            DAO_ROUTES.proposalTemplates.relative(addressPrefix, safeAddress),
+                          )
+                        }
+                        noOfLines={1}
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="flex-start"
+                        rounded="0.75rem"
+                        gap={2}
+                      >
+                        <Flex flexDir="column">
+                          <Text>{t('browseTemplates')}</Text>
+                        </Flex>
+                      </MenuItem>
+                    </Box>
+                  </Box>
+                </MenuList>
+              </EaseOutComponent>
+            )}
+          </Fragment>
+        )}
+      </Menu>
+    </Box>
+  );
+}

src/i18n/locales/en/breadcrumbs.json

@@ -8,7 +8,7 @@
   "proposal": "#{{proposalId}} {{proposalTitle}}",
   "proposalTemplates": "Proposal Templates",
   "proposalTemplate": "{{proposalTemplateTitle}}",
-  "proposalTemplateNew": "New Proposal Template",
+  "proposalTemplateNew": "Create Proposal Template",
   "modifyGovernance": "Modify Governance",
   "parentLink": "Parent-Safe",
   "settings": "Settings"

src/i18n/locales/en/proposal.json

@@ -142,5 +142,7 @@
   "clawBackEmptyTransactionsError": "Failed to process clawback - child Safe has no safely transferrable tokens",
   "pendingProposalNotice": "Pending proposal still processing",
   "metadataFailedParsePlaceholder": "Unknown - Failed to parse metadata",
-  "multisigNonceDuplicateErrorMessage": "Transaction with the same nonce already exists"
+  "multisigNonceDuplicateErrorMessage": "Transaction with the same nonce already exists",
+  "createFromScratch": "Create from scratch",
+  "browseTemplates": "Browse templates"
 }

src/i18n/locales/en/proposalTemplate.json

@@ -1,6 +1,6 @@
 {
-  "createProposalTemplate": "New Proposal Template",
-  "proposalTemplateTitle": "Proposal Template Title",
+  "createProposalTemplate": "Create Proposal Template",
+  "proposalTemplateTitle": "Title",
   "proposalTemplateTitleHelperText": "A short title for this proposal template",
   "proposalTemplateDescription": "Description",
   "proposalTemplateDescriptionHelperText": "Markdown syntax supported",