`[ENG-65]` `[ENG-66]` - example proposal templates + unified UX for Sablier PB and general PB #2646

mudrila · 2024-12-20T21:02:19Z

Changes

This PR eliminates "Stream Sablier Builder" set of custom components and leverages existing ProposalBuilder in order to streamline and standardize UI / UX. Since "Stream Sablier Builder" was initially build as "copy-paste" adaptation of ProposalBuilder eventually UX diverged over time.
Implement "Example Templates" that are visible for any DAO
- Aidrop Template - completely new functionality that uses Disperse smart contract
- Send Assets Template (the very same functionality that we have on Treasury page)
- Sablier Stream Template - links to Sablier Proposal Builder

Addressed issues

Closes [ENG-65] https://linear.app/decent-labs/issue/ENG-65/implement-airdrop-action-during-proposal-creation
Closes [ENG-66] https://linear.app/decent-labs/issue/ENG-66/add-example-proposal-templates

Testing

Same UI / UX for Sablier Proposal Builder and "general" Proposal Builder

Navigate to proposal creation form
In 2nd browser window - navigate to Sablier proposal creation form (there's no UX path, so you need to manually hit proper path: /proposals/new/sablier/metadata)
Verify that UI / UX identical for replicated elements (proposal metadata form, UI controls like cancelling proposal creation, page title / breadcrumbs, proposal streams form)

Example Templates for Airdrop, Send Assets and Sablier Stream

Navigate to DAO's Proposal Templates page (from the Dashboard: "Create Proposal" -> "Browse Templates")
Verify that new section with "Pre-configured Templates" available for any DAO on any chain. It should have 3 templates: "Transfer", "Airdrop Tokens", "Create Sablier Stream"
Verify that "Transfer" template correctly opens "Send Assets Modal", filling and submitting form should navigate to "Create Proposal With Actions" form, where "Send Assets" action will be added in the actions list
Verify that "Airdrop Tokens" template correctly opens respective modal, filling and submitting form should navigate to "Create Proposal With Actions" form, where "Airdrop" action will be added in the actions list
Verify that "Create Sablier Stream" navigates to "Create Sablier Proposal" form

…em within ProposalBuilder

netlify · 2024-12-20T21:03:28Z

✅ Deploy Preview for decent-interface-dev ready!

Name	Link
🔨 Latest commit	`c8754c1`
🔍 Latest deploy log	https://app.netlify.com/sites/decent-interface-dev/deploys/678878eb22d6960008e78956
😎 Deploy Preview	https://deploy-preview-2646.app.dev.decentdao.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

…ropModal >.<

…salBuilder

…2533-sablier-and-transfer-template

adamgall

Thanks for the additional context @mudrila!

The UI on /proposals/new/sablier/metadata doesn't look identical to /proposals/new/metadata, there are a handful of differences. Maybe some or all of these are expected?

difference	`/proposals/new/metadata`	`/proposal/new/sablier/metadata`
Page title	"Create Proposal"	"Create Proposal Template"
Title subtext	"A short title for this proposal"	"A short title for this proposal template"
Description subtext	"Add a brief description, markdown supported"	"Markdown syntax supported"
Preview card/section	Includes general proposal information	Includes Sablier-specific information

Nitpick on Naming

Not a change that was introduced in this PR, but I think calling the Sablier page "Create Proposal Template" isn't correct.

We're not creating a template here, we're using an existing template to create a proposal.

So maybe rename the new Sablier proposal workflow/page just "Create Proposal.

This would change the full breadcrumb from:

"Your DAO / Proposal Templates / Create Proposal Template", to
"Your DAO / Proposal Templates / Create Proposal"

which IMO is in line with the breadcrumb and page title for the original Create Proposal flow (at /proposals/new/metadata): "Your DAO / All Proposals / Create Proposal".

src/types/proposalBuilder.ts

mudrila · 2025-01-07T15:12:39Z

Thanks for the additional context @mudrila!

The UI on /proposals/new/sablier/metadata doesn't look identical to /proposals/new/metadata, there are a handful of differences. Maybe some or all of these are expected?

difference /proposals/new/metadata /proposal/new/sablier/metadata
Page title "Create Proposal" "Create Proposal Template"
Title subtext "A short title for this proposal" "A short title for this proposal template"
Description subtext "Add a brief description, markdown supported" "Markdown syntax supported"
Preview card/section Includes general proposal information Includes Sablier-specific information

Nitpick on Naming

Not a change that was introduced in this PR, but I think calling the Sablier page "Create Proposal Template" isn't correct.

We're not creating a template here, we're using an existing template to create a proposal.

So maybe rename the new Sablier proposal workflow/page just "Create Proposal.

This would change the full breadcrumb from:

"Your DAO / Proposal Templates / Create Proposal Template", to

"Your DAO / Proposal Templates / Create Proposal"

which IMO is in line with the breadcrumb and page title for the original Create Proposal flow (at /proposals/new/metadata): "Your DAO / All Proposals / Create Proposal".

Oh dang - that definitely just a lack of proper conditional rendering - it is supposed to reflect page title, title subtext, description subtext from the "Create Proposal" UI. But yeah - the summary and streams creation are supposed to be slightly different (same components - different content). I'll fix this

- Introduced a new component, ShowNonceInputOnMultisig, to conditionally render a nonce input field based on governance settings. - Updated ProposalBuilder and related pages to utilize the new contentRoute prop for rendering transaction forms and nonce input, improving modularity. - Refactored multiple proposal creation pages to integrate nonce handling, ensuring a consistent user experience across different proposal types. - Streamlined imports and improved code organization for better maintainability. These changes aim to enhance the user experience when creating proposals, particularly for multisig governance scenarios.

…2533-example-proposal-templates-composition

- Added `prevStepUrl` and `nextStepUrl` props to the ProposalBuilder component to facilitate navigation between proposal steps. - Refactored multiple proposal creation pages to compute these URLs dynamically using the current location, improving user experience and consistency across different proposal types. - Updated imports to include `useLocation` for better URL management. These changes aim to streamline the proposal creation process and enhance navigation for users.

…ality and navigation - Introduced new props for `pageHeaderTitle`, `pageHeaderBreadcrumbs`, and `pageHeaderButtonClickHandler` in the ProposalBuilder component to improve header customization across different proposal creation pages. - Updated multiple proposal creation pages to utilize the new header props, ensuring a consistent user experience and better navigation. - Streamlined imports and improved code organization for maintainability. These changes aim to enhance the user experience when creating proposals by providing clearer navigation and context within the application.

…e Clarity - Simplified the import structure in `constants.ts` by removing unused imports related to `ProposalBuilderMode`. - Introduced `ProposalMetadataTypeProps` interface and default props functions in `ProposalMetadata.tsx` to standardize metadata handling across proposal types. - Updated `ProposalBuilder` component to accept `proposalMetadataTypeProps`, enhancing flexibility in rendering metadata. - Refactored multiple proposal creation pages to utilize the new metadata props, ensuring consistent user experience and improved maintainability. - Streamlined the `ProposalMetadata` component to use the new props for labels and helpers, enhancing clarity and reducing conditional logic. These changes aim to improve the organization and readability of the code while providing a more consistent approach to handling proposal metadata.

…ns Experience - Removed unused imports and components from the ProposalBuilder, streamlining the code. - Introduced a new `ActionsExperience` component to encapsulate action handling logic, improving modularity and readability. - Updated the `SafeProposalWithActionsCreatePage` to utilize the new `ActionsExperience` component, enhancing the user interface for action management. - Set `actionsExperience` prop to `null` in other proposal creation pages to maintain consistency where actions are not applicable. These changes aim to improve the organization and clarity of the proposal creation process, particularly in managing proposal actions.

…tep Button Handling - Removed the `nextStepUrl` prop from the ProposalBuilder component to streamline button management. - Introduced a `metadataStepButtons` function in multiple proposal creation pages to encapsulate button rendering logic, enhancing modularity. - Updated the `SafeCreateProposalTemplatePage`, `SafeProposalWithActionsCreatePage`, `SafeProposalCreatePage`, and `SafeSablierProposalCreatePage` to utilize the new button handling approach, ensuring consistency across different proposal types. - Cleaned up imports and improved code organization for better maintainability. These changes aim to enhance the clarity and consistency of step button handling in the proposal creation process.

- Removed the `ProposalBuilderMode` enum and associated logic to simplify the component structure. - Updated `ProposalBuilder` and related pages to accept new props for `transactionsDetails`, `templateDetails`, and `streamsDetails`, allowing for more dynamic rendering of proposal details. - Cleaned up imports and improved code organization across multiple proposal creation pages, enhancing maintainability. - Streamlined the handling of transactions, templates, and streams in the proposal creation process, ensuring a more consistent user experience. These changes aim to improve the modularity and clarity of the proposal creation components, facilitating easier future enhancements.

…Handling - Updated the `metadataStepButtons` function in multiple proposal creation pages to accept an object with `formErrors` and `createProposalBlocked` parameters, enhancing clarity and consistency in button state management. - Refactored the `ProposalBuilder` component to align with the new metadata handling approach, ensuring a more modular and maintainable code structure. - Improved the user experience by ensuring that button states are derived from clear and standardized props across different proposal types. These changes aim to enhance the organization and readability of the proposal creation process, particularly in managing step button states.

- Updated the `metadataStepButtons` function in multiple proposal creation pages to a unified `stepButtons` function, enhancing clarity and consistency in button state management. - Refactored the `ProposalBuilder` component to align with the new step button handling approach, ensuring a more modular and maintainable code structure. - Improved the user experience by ensuring that button states are derived from clear and standardized props across different proposal types. These changes aim to enhance the organization and readability of the proposal creation process, particularly in managing step button states.

…eation Pages - Removed the ProposalBuilder component from its original location, streamlining the import paths across multiple proposal creation pages. - Updated the import statements in SafeCreateProposalTemplatePage, SafeProposalWithActionsCreatePage, SafeProposalCreatePage, and SafeSablierProposalCreatePage to reflect the new structure. - Enhanced code organization and maintainability by consolidating related components under a single directory. These changes aim to improve the modularity and clarity of the proposal creation process, facilitating easier future enhancements.

…or Enhanced Flexibility - Updated the ProposalBuilder and ProposalDetails components to replace JSX.Element with React.ReactNode for props related to rendering transactions, templates, and streams. - This change improves the flexibility of the components, allowing for a wider range of renderable content types. - Adjusted the StepButtons component to align with the new prop types, ensuring consistency across the proposal creation process. These modifications aim to enhance the modularity and adaptability of the proposal components, facilitating easier future enhancements.

…l-templates-composition Refactoring on top of #2646

…2533-sablier-and-transfer-template

…nsfer-template `[ENG-65]` `[ENG-66]` Create example templates for Transfer, Airdrop and Sablier stream creation

linear · 2025-01-22T21:07:08Z

ENG-65 Implement "Airdrop action" during proposal creation

ENG-66 Add example proposal templates

adamgall

Mostly all good! Nice work. Just a couple of change requests.

src/i18n/locales/en/modals.json

src/providers/NetworkConfig/web3-modal.config.ts

src/types/proposalBuilder.ts

src/hooks/utils/useResolveENSName.ts

src/hooks/utils/useGetSafeName.ts

src/components/ProposalBuilder/ProposalActionCard.tsx

Da-Colon

Alot of moving parts. but looks like @adamgall is working closely, agreed with the comments and so far so good with the updates made so far. Plenty more to do. see yall in the next PR.

src/components/ProposalBuilder/ProposalActionCard.tsx

src/pages/dao/proposals/actions/new/SafeProposalWithActionsCreatePage.tsx

src/providers/NetworkConfig/networks/polygon.ts

src/providers/NetworkConfig/web3-modal.config.ts

mudrila · 2025-01-24T15:14:06Z

@adamgall @DarksightKellar @Da-Colon I went through testing paths and everything looks legit to me. Anyway, I'd like to have additional layer of testing when we'll be doing release - so I'm merging it into develop and then will be testing next release on the proposal builder side pretty heavily. Thank you for reviews!

mudrila added 5 commits December 13, 2024 18:02

WIP: refactoring proposal builder and sablier proposal builder

f06c8b5

Kill custom sablier builder - extract necessary components and use th…

f8e3cdd

…em within ProposalBuilder

Merge branch 'develop' into feature/#2533-example-proposal-templates

c2d3d62

Extract reusable sablier proposal builder constants

84cb21b

Formatting

159d51f

mudrila added bug Something isn't working enhancement New feature or request labels Dec 20, 2024

mudrila requested review from adamgall, johnqh, DarksightKellar and Da-Colon December 20, 2024 21:02

mudrila self-assigned this Dec 20, 2024

mudrila added 14 commits December 20, 2024 22:29

Create example templates for transfer and sablier stream

8f94f8e

Finalize implementation for send assets action template

789164f

Formatting

eefefdd

Add airdrop template

e4d5678

Add missing translations

2196693

Add recipient button

46d3553

Little bit copy-pasting cleanup

bbb5bc9

Update copy and fix some bugs in airdrop modal

4f1c828

Proper Airdrop action display

de57c58

Logical fixes

48e37ee

Figured out there was an extra field which shouldn't be there in Aird…

303722f

…ropModal >.<

Merge branch 'develop' into feature/#2533-example-proposal-templates

c8cfb5e

Better conditional rendering for transactions / streams step in Propo…

afdb67d

…salBuilder

Merge branch 'feature/#2533-example-proposal-templates' into feature/#…

7c72f99

…2533-sablier-and-transfer-template

adamgall reviewed Jan 7, 2025

View reviewed changes

Da-Colon reviewed Jan 7, 2025

View reviewed changes

src/types/proposalBuilder.ts Show resolved Hide resolved

adamgall mentioned this pull request Jan 22, 2025

Refactoring on top of #2646 #2683

Merged

adamgall and others added 16 commits January 22, 2025 00:17

Merge branch 'develop' into feature/#2533-example-proposal-templates

c91c9ce

Merge branch 'feature/#2533-example-proposal-templates' into feature/#…

d4b21e7

…2533-example-proposal-templates-composition

Merge pull request #2683 from decentdao/feature/#2533-example-proposa…

b63e4a7

…l-templates-composition Refactoring on top of #2646

Merge branch 'feature/#2533-example-proposal-templates' into feature/#…

6dd9366

…2533-sablier-and-transfer-template

Merge pull request #2647 from decentdao/feature/#2533-sablier-and-tra…

352f165

…nsfer-template `[ENG-65]` `[ENG-66]` Create example templates for Transfer, Airdrop and Sablier stream creation

mudrila changed the title ~~Use same components between proposal builder and sablier stream proposal builder~~ [ENG-65] [ENG-66] - example proposal templates + unified UX for Sablier PB and general PB Jan 22, 2025

adamgall requested a review from DarksightKellar January 22, 2025 22:31

adamgall requested changes Jan 22, 2025

View reviewed changes

Action components cleanup

a977cde

mudrila requested a review from adamgall January 23, 2025 11:02

Formatting

60d14be

adamgall approved these changes Jan 23, 2025

View reviewed changes

Da-Colon approved these changes Jan 24, 2025

View reviewed changes

mudrila added the maintenance Keep the lights on label Jan 24, 2025

mudrila merged commit a1de1a2 into develop Jan 24, 2025
4 checks passed

mudrila deleted the feature/#2533-example-proposal-templates branch January 24, 2025 15:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`[ENG-65]` `[ENG-66]` - example proposal templates + unified UX for Sablier PB and general PB #2646

`[ENG-65]` `[ENG-66]` - example proposal templates + unified UX for Sablier PB and general PB #2646

mudrila commented Dec 20, 2024 •

edited

Loading

netlify bot commented Dec 20, 2024 •

edited

Loading

adamgall left a comment

mudrila commented Jan 7, 2025

Nitpick on Naming

linear bot commented Jan 22, 2025

adamgall left a comment

Da-Colon left a comment

mudrila commented Jan 24, 2025

[ENG-65] [ENG-66] - example proposal templates + unified UX for Sablier PB and general PB #2646

[ENG-65] [ENG-66] - example proposal templates + unified UX for Sablier PB and general PB #2646

Conversation

mudrila commented Dec 20, 2024 • edited Loading

Changes

Addressed issues

Testing

Same UI / UX for Sablier Proposal Builder and "general" Proposal Builder

Example Templates for Airdrop, Send Assets and Sablier Stream

netlify bot commented Dec 20, 2024 • edited Loading

✅ Deploy Preview for decent-interface-dev ready!

adamgall left a comment

Choose a reason for hiding this comment

Nitpick on Naming

mudrila commented Jan 7, 2025

Nitpick on Naming

linear bot commented Jan 22, 2025

adamgall left a comment

Choose a reason for hiding this comment

Da-Colon left a comment

Choose a reason for hiding this comment

mudrila commented Jan 24, 2025

`[ENG-65]` `[ENG-66]` - example proposal templates + unified UX for Sablier PB and general PB #2646

`[ENG-65]` `[ENG-66]` - example proposal templates + unified UX for Sablier PB and general PB #2646

mudrila commented Dec 20, 2024 •

edited

Loading

netlify bot commented Dec 20, 2024 •

edited

Loading