SporosDAO / sweat-token

Sweat Token code and resources - Sweat Equity Vault for DAOs
https://app.sporosdao.xyz
Apache License 2.0
18 stars 16 forks source link

feat: UX flows for handling PM proposals #174

Closed ivelin closed 2 years ago

ivelin commented 2 years ago

Signed-off-by: ivelin ivelin.eth@gmail.com

netlify[bot] commented 2 years ago

Deploy Preview for sporosdaoapp-dev canceled.

Name Link
Latest commit fc6549c16cdd7d190130632c84608f8022734a3e
Latest deploy log https://app.netlify.com/sites/sporosdaoapp-dev/deploys/637ebd54212ec80008275236
ivelin commented 2 years ago

Quick update. There is a setback due to issues with subgraph. It does not seem to update for a while , which affects poorly UX. Just noticed Kali switched to direct RPC for proposals recently. It's a bummer because subgraph was a big middleware convenience. Not having it requires rewriting front end code to query directly RPC, which takes longer time to write code, test and doesn't scale for many users. In summary, it will take a few more days to rewrite the proposal data access code.

ivelin commented 2 years ago

recording

Browser metadata ``` Path: /dao/chain/5/address/0xe237747055b12f4da323bc559ac8d5eb66aac2f7/proposals/ Browser: Chrome 107.0.0.0 on Mac OS 10.15.7 Viewport: 2731 x 1336 @1x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F5%2Faddress%2F0xe237747055b12f4da323bc559ac8d5eb66aac2f7%2Fproposals%2F&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=107.0&resolution=2731x1336&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

netlify[bot] commented 2 years ago

screenshot

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/projects/ Browser: Chrome 106.0.0.0 on Mac OS 10.15.7 Viewport: 1635 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fprojects%2F&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=106.0&resolution=1635x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

netlify[bot] commented 2 years ago

Buttons are not in line.

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/projects/ Browser: Chrome 106.0.0.0 on Mac OS 10.15.7 Viewport: 1635 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fprojects%2F&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=106.0&resolution=1635x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

lipmaneth commented 2 years ago

recording

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/proposals/121 Browser: Chrome 106.0.0.0 on Mac OS 10.15.7 Viewport: 1635 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fproposals%2F121&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=106.0&resolution=1635x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

lipmaneth commented 2 years ago

recording

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/proposals/121 Browser: Chrome 106.0.0.0 on Mac OS 10.15.7 Viewport: 1635 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fproposals%2F121&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=106.0&resolution=1635x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

lipmaneth commented 2 years ago

Clicking on some of the proposals seems to crash the app. For example, proposal 121. It looks like this happens with the proposals where the "Details" button is greyed out. If the "Details" button is green, then it does not crash the app.

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/proposals/121 Browser: Chrome 106.0.0.0 on Mac OS 10.15.7 Viewport: 1635 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fproposals%2F121&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=106.0&resolution=1635x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

lipmaneth commented 2 years ago

screenshot

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/proposals/ Browser: Chrome 106.0.0.0 on Mac OS 10.15.7 Viewport: 1635 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fproposals%2F&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=106.0&resolution=1635x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

lipmaneth commented 2 years ago

screenshot

Can't click 'details' button for non-PM proposals.

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/proposals/ Browser: Chrome 106.0.0.0 on Mac OS 10.15.7 Viewport: 1803 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fproposals%2F&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=106.0&resolution=1803x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

lipmaneth commented 2 years ago

screenshot

How should we handle notifications such as these where very old proposals (in this case from June) haven't been processed? Perhaps at least let the user delete this notification so it doesn't continuously show up?

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/proposals/ Browser: Chrome 106.0.0.0 on Mac OS 10.15.7 Viewport: 1803 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fproposals%2F&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=106.0&resolution=1803x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

ivelin commented 2 years ago

Clicking on some of the proposals seems to crash the app. For example, proposal 121. It looks like this happens with the proposals where the "Details" button is greyed out. If the "Details" button is green, then it does not crash the app.

Browser metadata Open Deploy Preview · Mark as Resolved

Good catch. Fixed.

briareus-the-titan commented 2 years ago

If you connect your wallet and are on a different network than Arbitrum, you need to manually refresh

ivelin commented 2 years ago

If you connect your wallet and are on a different network than Arbitrum, you need to manually refresh

Good catch. Sounds like a wallet callback handling that applies across the app. Should we open this as a separate bug report and handle outside this PR to reduce bloat.

ivelin commented 2 years ago

https://deploy-preview-174--sporosdaoapp-dev.netlify.app/

OK, for the time being, there will be no Details button shown at all for proposals other than PM. See screenshot.

Each proposal type requires thoughtful UX to represent the underlying intention to users in a meaningful way.

Since this PR is already quite bloated as is with 31 file changes, we will be adding UX flows for other proposal types in separate PRs. Next on the TODO list are MINT, ESCAPE, QUORUM, MAJORITY, VOTING_PERIOD. If you prefer, these can be tracked as separate Feature Requests on the product board. @EdgeCaser what would you recommend? Screen Shot 2022-11-16 at 10 52 48 AM

ivelin commented 2 years ago

screenshot

Browser metadata Open Deploy Preview · Mark as Resolved

Good catch. Fixed for Projects and Proposals. Screen Shot 2022-11-16 at 11 45 20 AM Screen Shot 2022-11-16 at 11 45 28 AM

ivelin commented 2 years ago

screenshot

How should we handle notifications such as these where very old proposals (in this case from June) haven't been processed? Perhaps at least let the user delete this notification so it doesn't continuously show up?

Browser metadata Open Deploy Preview · Mark as Resolved

Interesting issue. Needs some thought. Working on it.

ivelin commented 2 years ago

screenshot How should we handle notifications such as these where very old proposals (in this case from June) haven't been processed? Perhaps at least let the user delete this notification so it doesn't continuously show up? Browser metadata Open Deploy Preview · Mark as Resolved

Interesting issue. Needs some thought. Working on it.

Found the root cause of this issue. Will need some support from Kali. Looks like a subgraph bug: https://discord.com/channels/923399898769018921/925091695677309059/1042502724790522006

https://arbiscan.io/address/0x28fea Screen Shot 2022-11-16 at 12 16 32 PM

Screen Shot 2022-11-16 at 12 15 36 PM c06dc72188b385478b507f7c7a39a7026d5#readContract

Screen Shot 2022-11-16 at 12 15 26 PM

Screen Shot 2022-11-16 at 12 12 32 PM

ivelin commented 2 years ago

screenshot How should we handle notifications such as these where very old proposals (in this case from June) haven't been processed? Perhaps at least let the user delete this notification so it doesn't continuously show up? Browser metadata Open Deploy Preview · Mark as Resolved

Interesting issue. Needs some thought. Working on it.

Found the root cause of this issue. Will need some support from Kali. Looks like a subgraph bug: https://discord.com/channels/923399898769018921/925091695677309059/1042502724790522006

https://arbiscan.io/address/0x28fea Screen Shot 2022-11-16 at 12 16 32 PM

Screen Shot 2022-11-16 at 12 15 36 PM c06dc72188b385478b507f7c7a39a7026d5#readContract

Screen Shot 2022-11-16 at 12 15 26 PM

Screen Shot 2022-11-16 at 12 12 32 PM

Path to solution confirmed with @nerderlyne . Starting work on PR: https://github.com/kalidao/kali-subgraph/pull/18

lipmaneth commented 2 years ago

recording

As a user, there isn't an easy way to get to the previous screen. The 'back arrow' button hides the side bar, but does not take me to the previous screen. To get to a previous screen, I need to hit 'back' in my browser tab.

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/projects/ Browser: Chrome 107.0.0.0 on Mac OS 10.15.7 Viewport: 2094 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fprojects%2F&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=107.0&resolution=2094x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

lipmaneth commented 2 years ago

recording

Clicking on the project details buttons from the proposals main page takes me to a new screen with an error message saying the proposal format isn't supported and I need to visit Kali. That doesn't seem right. We should be able to show details on that screen?

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/proposals/ Browser: Chrome 107.0.0.0 on Mac OS 10.15.7 Viewport: 2094 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fproposals%2F&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=107.0&resolution=2094x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

lipmaneth commented 2 years ago

screenshot

The 'info' icon is a bit confusing. I was expecting to hover over it and be shown a tool tip or some more info. Could just be me though.

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/projects/114/tribute Browser: Chrome 107.0.0.0 on Mac OS 10.15.7 Viewport: 2094 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fprojects%2F114%2Ftribute&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=107.0&resolution=2094x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

lipmaneth commented 2 years ago

recording

The 'Active' buttons are displayed and behave like they should be clickable (e.g. they're shown similarly to the Tribute button which is clickable), however they are not. Should we display them differently in the UI so users don't think they should be able to click them?

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/projects/114/tribute Browser: Chrome 107.0.0.0 on Mac OS 10.15.7 Viewport: 2094 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fprojects%2F114%2Ftribute&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=107.0&resolution=2094x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

lipmaneth commented 2 years ago

screenshot

It's my understanding that implementing voting for PM proposals is inside the scope of this PR. If so, is there a need to give users the option to visit Kali for PM proposals? What info/actions could they get at Kali that they couldn't get inside our app?

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/proposals/ Browser: Chrome 107.0.0.0 on Mac OS 10.15.7 Viewport: 2094 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fproposals%2F&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=107.0&resolution=2094x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

lipmaneth commented 2 years ago

recording

The font size and formatting of the cards for the projects page and proposals page is different.

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/proposals/ Browser: Chrome 107.0.0.0 on Mac OS 10.15.7 Viewport: 2094 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fproposals%2F&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=107.0&resolution=2094x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

lipmaneth commented 2 years ago

recording

Clicking the details button sends me to a screen saying more info can't be given. If that's true, then we should at least provide a link to Kali's app from that 2nd page.

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/proposals/40 Browser: Chrome 107.0.0.0 on Mac OS 10.15.7 Viewport: 2094 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fproposals%2F40&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=107.0&resolution=2094x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

lipmaneth commented 2 years ago

screenshot

Clicking the Kali button sends a user to the main proposal screen inside the Kali app. I'm unclear if there's really a reason to send users to Kali, but if so, a better experience would be to send them directly to the relevant proposal. For example, if I click 'Kali' on the Proposal #114 of the sporos app, then it would take me to the #114 in the Kali app, not the top level proposal page in the kali app.

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/projects/ Browser: Chrome 107.0.0.0 on Mac OS 10.15.7 Viewport: 2094 x 1177 @2x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fprojects%2F&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=107.0&resolution=2094x1177&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

ivelin commented 2 years ago

Incorrect error "Proposal type not Supported" when proposal is a PM extension.

recording

Browser metadata ``` Path: /dao/chain/42161/address/0x28feac06dc72188b385478b507f7c7a39a7026d5/proposals/97 Browser: Chrome 107.0.0.0 on Mac OS 10.15.7 Viewport: 2466 x 1279 @1x Language: en-US Cookies: Enabled ``` [Open in BrowserStack](https://www.browserstack.com/user/try-live?url=https%3A%2F%2Fdeploy-preview-174--sporosdaoapp-dev.netlify.app%2Fdao%2Fchain%2F42161%2Faddress%2F0x28feac06dc72188b385478b507f7c7a39a7026d5%2Fproposals%2F97&os=OS%20X&os_version=Catalina&browser=Chrome&browser_version=107.0&resolution=2466x1279&speed=1&start=true&ref=netlify-source)

Open Deploy Preview · Mark as Resolved

ivelin commented 2 years ago

UPDATE: Fixed here: https://github.com/SporosDAO/sweat-token/pull/181

Incorrect error "Proposal type not Supported" when proposal is a PM extension.

recording

Browser metadata Open Deploy Preview · Mark as Resolved

ivelin commented 2 years ago

Kali Subgraph and Sporos frontened fixes for this issue are now patched. PRs pending peer review: https://github.com/SporosDAO/sweat-token/pull/182

cc: @lipmaneth

screenshot How should we handle notifications such as these where very old proposals (in this case from June) haven't been processed? Perhaps at least let the user delete this notification so it doesn't continuously show up? Browser metadata Open Deploy Preview · Mark as Resolved

Interesting issue. Needs some thought. Working on it.

Found the root cause of this issue. Will need some support from Kali. Looks like a subgraph bug: https://discord.com/channels/923399898769018921/925091695677309059/1042502724790522006

https://arbiscan.io/address/0x28fea Screen Shot 2022-11-16 at 12 16 32 PM

Screen Shot 2022-11-16 at 12 15 36 PM c06dc72188b385478b507f7c7a39a7026d5#readContract

Screen Shot 2022-11-16 at 12 15 26 PM

Screen Shot 2022-11-16 at 12 12 32 PM

ivelin commented 1 year ago

recording

The font size and formatting of the cards for the projects page and proposals page is different.

Browser metadata Open Deploy Preview · Mark as Resolved

Right. In the case of projects the Title is just the Project title. In the case of proposal, there is no title field. Only description. So we do a bit of a hack by merging PM title and settings into proposal description field, which becomes more verbose. Hence the smaller font to display. Since we know which proposals are of type PM, we can display just the PM title instead of the Kali proposal description field. Would that be a better UX?

ivelin commented 1 year ago

Valid point. The thinking was to allow users to have a fallback front end. We can hide the Kali button for PM cards or replace with Etherscan/Arbiscan or leave as is. Let's branch this comment as a separate Good First Issue and agree on desired UX. It's a small self contained fix.

screenshot

Clicking the Kali button sends a user to the main proposal screen inside the Kali app. I'm unclear if there's really a reason to send users to Kali, but if so, a better experience would be to send them directly to the relevant proposal. For example, if I click 'Kali' on the Proposal #114 of the sporos app, then it would take me to the #114 in the Kali app, not the top level proposal page in the kali app.

Browser metadata Open Deploy Preview · Mark as Resolved

ivelin commented 1 year ago

Interesting. This is a default MUI component decoration for informative alerts. Let's branch this as a separate Good First Issue and agree on desired UX. It's a small self contained fix.

screenshot

The 'info' icon is a bit confusing. I was expecting to hover over it and be shown a tool tip or some more info. Could just be me though.

Browser metadata Open Deploy Preview · Mark as Resolved