Self Create Flow Front-End

[ori-near]

Background

We have developed a Multisig Treasury Dashboard product on top of SputnikDAO that allows various NEAR ecosystem organizations to have a way to easily mange their funding. Currently,we offer white label solutions for custom instances (e.g. DevDAO, Infinex, etc). This ticket focuses on creating a self-service flow that allows anyone to create their own treasury instance directly through a future Treasury app product page.

User Story

As a user (sponsor of treasury application), I want to have the ability to create my own treasury instance through a simple and intuitive self-service flow so that I can start managing my DAO's or team's funds without needing any technical expertise.

Acceptance Criteria

1. Sign In

• The user is prompted to sign in to their own account.
• The login instructions should adapt based on the gateway the user is using (NEAR Social, NEAR Dev, etc).

2. Confirm Wallet

• The user is asked to confirm their NEAR wallet (name and username), which will be used for the initial setup costs.
• Display the estimated costs for SputnikDAO and Frontend BOS Widget Hosting.
• If the user's wallet balance is insufficient, show a yellow warning message, and do not allow the user to proceed.
• Enable the "Yes, use this wallet and continue" button when the user has sufficient funds. Clicking this button will lead the user to the next step.

3. Create Application Account

• The user enters a name for their treasury application in the format name.near.
• Check if the entered name is available and display a warning message if the name is not available.
• Enable the "Next" button when the user enters a valid and available Application Account name. Clicking this button will lead the user to the next step.

4. Create Sputnik DAO Account

• The user enters a name for their Sputnik DAO account in the format name.sputnik-dao.near.
• The input field is pre-populated with the name entered in the previous step (application account name), but the user can edit it.
• Check if the entered Sputnik DAO account name is available and display a warning message if the name is not available.
• Add an information message that explain what Sputnik DAO. Learn more should link to https://github.com/near-daos/sputnik-dao-contract.
• Enable the "Next" button when the user enters a valid Sputnik DAO account name. Clicking this button will lead the user to the next step.

5. Add Members

• The initial user has "Create" permission by default and cannot delete or edit themselves at this stage.
• The user can add members to the treasury and assign permissions (Create, Edit, Vote).
• Clicking "Add Member" opens the add members ight panel with the following inputs:
  • Username input field
  • Permissions dropdown (Create, Edit, Vote)
  • Delete option for added members (except the initial creator)
  • Cancel and Submit buttons
• Added members with their selected permissions are displayed in the list.

6. Summary

• A summary screen displays all the entered information:
  • Sponsor wallet name and username
  • Application account name
  • Sputnik DAO account name
  • Members and their permissions
  • Total costs
• The user can edit any of the fields by clicking the pencil icon.
• The user can click "Confirm and Create" button to proceed. Clicking this button creates the treasury and takes the user to the dashboard.

7. Dashboard

• The user is presented with their newly created treasury dashboard.
• A pop-up message congratulates the user and confirms that their treasury is ready:
  • The message provides URLs for accessing the dashboard through different gateways (NEAR.org, NEAR Social, web4).
  • Each gateway URL has options to copy the link and share it.
• The user can close the pop-up message to view the dashboard.

UX Flow

See Figma.

Related Tickets

Smart contract implementation: #89

[ori-near]

10/30 Team standup discussion:
1) Which account should @rubycop push components to?
treasury-factory.near

[ori-near]

@rubycop – I added more detailed AC to this ticket. Can you please go through this list and check each item to confirm the end to end flow works as intended? Also, please make sure to develop the appropriate automated testing (talk to Peter) and let us know once you have a preview. Thank you!!
CC: @Tguntenaar

[rubycop]

WIP
widget path: https://near.social/treasury-factory.near/widget/app

[ori-near]

Moved this to sprint 3. Please update @rubycop once it's done.

[ori-near]

We will do any follow up tasks as part of #167.

@rubycop – please add any notes in that ticket if you know of any follow up tasks.