Merge branch 'feature/#2533-example-proposal-templates' into feature/#2533-sablier-and-transfer-template

Author: mudrila

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "decent-interface",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": true,
   "dependencies": {
     "@amplitude/analytics-browser": "^2.11.1",

package.json

@@ -31,6 +31,10 @@
   margin-right: 0;
 }
 
+.sonner-toast[data-type='loading'] [data-icon] {
+  margin-top: 8px;
+}
+
 .sonner-toast [data-icon] svg {
   width: 24px;
   height: 24px;

public/images/hero_image.png

@@ -3,6 +3,7 @@ import { FormikProps } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
 import { InputComponent, TextareaComponent } from '../ui/forms/InputComponent';
+import { builderInProposalMode } from './constants';
 
 export interface ProposalMetadataProps extends FormikProps<CreateProposalForm> {
   mode: ProposalBuilderMode;
@@ -14,8 +15,7 @@ export default function ProposalMetadata({
   mode,
 }: ProposalMetadataProps) {
   const { t } = useTranslation(['proposalTemplate', 'proposal', 'common']);
-  const isProposalMode =
-    mode === ProposalBuilderMode.PROPOSAL || mode === ProposalBuilderMode.PROPOSAL_WITH_ACTIONS;
+  const isProposalMode = builderInProposalMode(mode);
 
   return (
     <VStack

src/assets/css/Toast.css

@@ -1,17 +1,17 @@
 import {
-  VStack,
-  HStack,
-  Text,
+  Accordion,
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
   Box,
   Flex,
+  HStack,
   IconButton,
-  Accordion,
-  AccordionPanel,
-  AccordionItem,
-  AccordionButton,
   Radio,
+  Text,
+  VStack,
 } from '@chakra-ui/react';
-import { Plus, MinusCircle, CaretDown, CaretRight } from '@phosphor-icons/react';
+import { CaretDown, CaretRight, MinusCircle, Plus } from '@phosphor-icons/react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CreateProposalTransaction, ProposalBuilderMode } from '../../types/proposalBuilder';
@@ -21,7 +21,7 @@ import ExampleLabel from '../ui/forms/ExampleLabel';
 import { BigIntComponent, InputComponent } from '../ui/forms/InputComponent';
 import CeleryButtonWithIcon from '../ui/utils/CeleryButtonWithIcon';
 import Divider from '../ui/utils/Divider';
-import { DEFAULT_PROPOSAL_TRANSACTION } from './constants';
+import { builderInProposalMode, DEFAULT_PROPOSAL_TRANSACTION } from './constants';
 
 interface ProposalTransactionProps {
   transaction: CreateProposalTransaction;
@@ -42,7 +42,7 @@ export default function ProposalTransaction({
   setFieldValue,
   mode,
 }: ProposalTransactionProps) {
-  const isProposalMode = mode === ProposalBuilderMode.PROPOSAL;
+  const isProposalMode = builderInProposalMode(mode);
   const { t } = useTranslation(['proposal', 'proposalTemplate', 'common']);
   const [expandedIndecies, setExpandedIndecies] = useState<number[]>([0]);
 
@@ -193,7 +193,7 @@ export default function ProposalTransaction({
                             setFieldValue(
                               `transactions.${transactionIndex}.parameters`,
                               transaction.parameters.filter(
-                                (parameterToRemove, parameterToRemoveIndex) =>
+                                (_parameterToRemove, parameterToRemoveIndex) =>
                                   parameterToRemoveIndex !== i,
                               ),
                             )

src/components/ProposalBuilder/ProposalMetadata.tsx

@@ -1,4 +1,15 @@
-import { CreateProposalTransaction, Stream, Tranche } from '../../types/proposalBuilder';
+import {
+  CreateProposalTransaction,
+  ProposalBuilderMode,
+  Stream,
+  Tranche,
+} from '../../types/proposalBuilder';
+
+export const builderInProposalMode = (mode: ProposalBuilderMode) =>
+  mode === ProposalBuilderMode.PROPOSAL ||
+  mode === ProposalBuilderMode.PROPOSAL_WITH_ACTIONS ||
+  mode === ProposalBuilderMode.SABLIER ||
+  mode === ProposalBuilderMode.PROPOSAL_FROM_TEMPLATE;
 
 export const DEFAULT_PROPOSAL_TRANSACTION: CreateProposalTransaction = {
   targetAddress: '',

src/components/ProposalBuilder/ProposalTransaction.tsx

@@ -31,6 +31,7 @@ import ProposalMetadata from './ProposalMetadata';
 import { ProposalStreams } from './ProposalStreams';
 import ProposalTransactionsForm from './ProposalTransactionsForm';
 import StepButtons from './StepButtons';
+import { builderInProposalMode } from './constants';
 
 interface ProposalBuilderProps {
   mode: ProposalBuilderMode;
@@ -53,8 +54,8 @@ export function ProposalBuilder({
   const step = (paths[paths.length - 1] || paths[paths.length - 2]) as
     | CreateProposalSteps
     | undefined;
-  const isProposalMode =
-    mode === ProposalBuilderMode.PROPOSAL || mode === ProposalBuilderMode.PROPOSAL_WITH_ACTIONS;
+  const isProposalMode = builderInProposalMode(mode);
+  const isSablierMode = mode === ProposalBuilderMode.SABLIER;
 
   const {
     governance: { isAzorius },
@@ -218,13 +219,13 @@ export function ProposalBuilder({
                         />
                         <Route
                           path={
-                            mode === ProposalBuilderMode.SABLIER
+                            isSablierMode
                               ? CreateProposalSteps.STREAMS
                               : CreateProposalSteps.TRANSACTIONS
                           }
                           element={
                             <>
-                              {mode === ProposalBuilderMode.SABLIER ? (
+                              {isSablierMode ? (
                                 <ProposalStreams
                                   pendingTransaction={pendingCreateTx}
                                   {...formikProps}

src/components/ProposalBuilder/constants.ts

@@ -56,7 +56,6 @@ export const MAX_CONTENT_WIDTH = '80rem';
 
 const features = {
   developmentMode: 'DEVELOPMENT_MODE',
-  termedRoles: 'TERMED_ROLES',
   demoMode: 'DEMO_MODE',
 } as const;
 
@@ -72,7 +71,6 @@ export const isFeatureEnabled = (feature: FeatureFlag) => {
 };
 
 export const isDevMode = () => isFeatureEnabled(features.developmentMode);
-export const isTermedRolesEnabled = () => isFeatureEnabled(features.termedRoles);
 export const isDemoMode = () => isFeatureEnabled(features.demoMode);
 
 /**

src/components/ProposalBuilder/index.tsx

@@ -234,6 +234,13 @@ export const useAzoriusProposals = () => {
 
         let proposalData;
 
+        if (
+          proposalCreatedEvent.args.proposer === undefined ||
+          proposalCreatedEvent.args.strategy === undefined
+        ) {
+          continue;
+        }
+
         if (proposalCreatedEvent.args.metadata && proposalCreatedEvent.args.transactions) {
           const metadataEvent = parseProposalMetadata(proposalCreatedEvent.args.metadata);
 
@@ -273,13 +280,6 @@ export const useAzoriusProposals = () => {
           }
         }
 
-        if (
-          proposalCreatedEvent.args.proposer === undefined ||
-          proposalCreatedEvent.args.strategy === undefined
-        ) {
-          continue;
-        }
-
         let strategyType: VotingStrategyType | undefined;
         const strategyAddress = proposalCreatedEvent.args.strategy;
         const {