feat: Dashboard governance widgets #1149

DiogoSoaress · 2022-11-14T17:56:28Z

What it solves

Mini Safe apps iframes are displayed in the dashboard

Resolves #974

Screenshots

github-actions · 2022-11-14T17:59:16Z

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

cloudflare-workers-and-pages · 2022-11-14T17:59:41Z

Deploying with Cloudflare Pages

Latest commit:	`533a4c3`
Status:	✅ Deploy successful!
Preview URL:	https://6cbf0990.web-core.pages.dev
Branch Preview URL:	https://dashboard-mini-safe-apps.web-core.pages.dev

View logs

github-actions · 2022-11-22T10:15:57Z

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

iamacook

Looking good. I've noticed a few issues though:

On initial load "Explore Safe App" flashes, then the loading message and finally the section closes.
- "Explore Safe Apps" shouldn't show.
- Neither it or the loading message should flash.
- I think the Accordion should then be open by default and we save the expansion preference locally.

The Claiming App widget does not load.
The truncation of proposal names doesn't work in the iframe.

iamacook · 2022-11-22T11:16:28Z

src/components/dashboard/GovernanceSection/GovernanceSection.tsx

-                </Box>
-              </Card>
+  if (!claimingApp) {
+    return null


We should give some feedback instead of showing nothing.

Can we write "There was an error fetching the widgets" ?
Note: this is for an error on the following request https://safe-client.staging.5afe.dev/v1/chains/1/safe-apps?client_url=http://localhost:3000

"There was an error fetching the widget" works.

DiogoSoaress · 2022-11-22T14:40:35Z

I think the Accordion should then be open by default and we save the expansion preference locally.

This default resulted from https://www.notion.so/gnosis-safe/Kickoff-SafeDAO-27-10-2022-2234309ec4ba47ce87ccf662c867aa8c

Can you confirm @liliiaorlenko ? Should the Governance section start collapsed or expanded?

iamacook · 2022-11-22T14:48:33Z

This default resulted from https://www.notion.so/gnosis-safe/Kickoff-SafeDAO-27-10-2022-2234309ec4ba47ce87ccf662c867aa8c

If that's the intended design then let's stick to it but the loading text shouldn't show unless it's open.

liliiaorlenko · 2022-11-22T15:14:16Z

I think the Accordion should then be open by default and we save the expansion preference locally.

This default resulted from https://www.notion.so/gnosis-safe/Kickoff-SafeDAO-27-10-2022-2234309ec4ba47ce87ccf662c867aa8c

Can you confirm @liliiaorlenko ? Should the Governance section start collapsed or expanded?

It should start open. Let me know when I can recommend suggestions for implemented visual improvements, there is some spacing fixes I would like to add
:)

DiogoSoaress · 2022-11-22T15:34:48Z

@liliiaorlenko now it is a good time for design remarks 🎨 you can access it here https://dashboard-mini-safe-apps.web-core.pages.dev/

DiogoSoaress · 2022-11-22T18:23:12Z

src/components/dashboard/GovernanceSection/GovernanceSection.tsx

+  const { getAllowedFeaturesList } = useBrowserPermissions()
+  const [claimingSafeApp, errorFetchingClaimingSafeApp] = useRemoteSafeApps(SafeAppsTag.SAFE_CLAIMING_APP)
+  const claimingApp = claimingSafeApp?.[0]
+  const fetchingSafeClaimingApp = !claimingApp && !errorFetchingClaimingSafeApp


I've implemented this loading logic because the loading state returned by useRemoteSafeApps starts false.

Can we not move this logic into the hook? This will forever load if an error occurs.

iamacook

The truncation looks good now. However, the loading screen still flashes before closing the Accordion. As suggested, it should load open. I would suggest we then cache the open preference locally.

iamacook · 2022-11-23T07:15:13Z

src/components/dashboard/GovernanceSection/GovernanceSection.tsx

+  const { getAllowedFeaturesList } = useBrowserPermissions()
+  const [claimingSafeApp, errorFetchingClaimingSafeApp] = useRemoteSafeApps(SafeAppsTag.SAFE_CLAIMING_APP)
+  const claimingApp = claimingSafeApp?.[0]
+  const fetchingSafeClaimingApp = !claimingApp && !errorFetchingClaimingSafeApp


Can we not move this logic into the hook? This will forever load if an error occurs.

iamacook · 2022-11-23T07:15:39Z

src/components/dashboard/GovernanceSection/GovernanceSection.tsx

+          <Paper>
+            <Box sx={{ height: '300px' }} display="flex" alignItems="center" justifyContent="center">
+              <Typography variant="h1" color="text.secondary">
+                Loading Safe Claiming App...


I know that they both hypothetically the Claiming App but I think it would look visually better if we split it into the same layout as the widgets, e.g. [ Loading Snapshot ] [ Loading Claiming ]. What do you think? cc @liliiaorlenko

In this case we are just fetching the remote Safe apps endpoint. Each of the widgets loads with its own Skeleton component. So this "loading" component was more for the whole Governance section

I would adjust it to reference "governance" instead of the Claiming App specifically then.

Can it display "Loading apps" ?

That's quite generic imo. If you wanted to specify apps, I would say splitting the loading section in two as my suggestion further up would make sense.

iamacook · 2022-11-23T07:16:06Z

src/components/dashboard/GovernanceSection/GovernanceSection.tsx

+                <Card sx={{ height: '300px' }}>
+                  <SafeAppsErrorBoundary render={() => <SafeAppsLoadError onBackToApps={() => {}} />}>
+                    <AppFrame
+                      appUrl={`${claimingApp.url}#snapshot-widget`}


I suggest we move both hashes to constants.

DiogoSoaress · 2022-11-23T08:43:43Z

As #1149 (comment), it should load open.

I added the defaultExpanded property to the Accordion but for some reason it works in localhost but not work in the deployment URL. Investigating...

DiogoSoaress · 2022-11-23T11:15:56Z

Can we not move this logic into the hook? This will forever load if an error occurs.

After revisiting it, the hook is returning correctly IMO. This is more of a component state logic so I would leave it in the component. Maybe I can rename the variable to fetchingRemoteApps ?

iamacook · 2022-11-23T11:31:41Z

After revisiting it, the hook is returning correctly IMO. This is more of a component state logic so I would leave it in the component. Maybe I can rename the variable to fetchingRemoteApps ?

It's not regarding the naming, it's that both the error and loading flags are referenced. If an error occurs, the UI will show them as persistently loading. We shouldn't combine them.

github-actions · 2022-11-23T15:01:09Z

Branch preview

https://pr1149--webcore.review-react-br.5afe.dev

DiogoSoaress · 2022-11-23T15:02:48Z

If an error occurs, the UI will show them as persistently loading.

If an error occurs, it throws inside of the useAsync and the error is set. The UI will display

gitpoap-bot · 2022-11-23T16:01:26Z

Congrats, your important contribution to this open-source project has earned you a GitPOAP!

GitPOAP: 2022 Safe Web Core Contributor:

Head to gitpoap.io & connect your GitHub account to mint!

Learn more about GitPOAPs here.

* create the Governance section on Dashboard * [Governance Visibility] Dashboard section (#1125) * dashboard section with placeholders * use MUI Accordion for the collapsible section * change expand icon color * feat: Dashboard governance widgets (#1149) * feat: load a mini safe app in dashboard's Governance section * fix card heights * display snapshot widget * fetch the claiming app and display the widgets * fix: accordion defaultExpanded and fix loading states flicker * responsive widgets grid * expandDefault true * no need to pass explicit boolean value. improve loading components * feat: pass dark mode in the widgets url (#1219) * expandDefault true * no need to pass explicit boolean value. improve loading components * feat: pass dark mode in the widgets url * pass preferred them in a search parameter * feat: One governance widget (#1237) * feat: call only one widget from the safe-claiming app * rm unused Grid * use widgetWrapper for the loading component * add a custom fallback component * ammend load error copy * use different color in the placeholder as per design * feat: dark flag in URL hash (#1251) * fix: governance widgets CSS (#1254) * fix: Accordion only clickable on expandIcon * adjust AppFrame height for widgets * change the widget load error component * fix code style * improve classnames params * fix: return `null` if no Claiming App on chain (#1284) * fix: return `null` if no Claiming App on chain * fix: reference deployed token address * fix: add address of token on Goerli * fix: add loading wrapper * fix: rename wrapper * Fix: use a non-tracking version of the AppFrame (#1307) * Fix: use a non-tracking version of the AppFrame * Clear communicator handlers * useAppIsLoading * Rename components * Extract getSafeInfo * AppFrameWrapperProps -> AppFrameProps * Fix: reload widget on safe change + catch errors (#1319) Co-authored-by: iamacook <[email protected]> Co-authored-by: katspaugh <[email protected]> Co-authored-by: katspaugh <[email protected]>

DiogoSoaress changed the base branch from dev to epic-governance November 14, 2022 17:56

DiogoSoaress changed the title ~~[WIP] Dashboard mini safe apps~~ [WIP] Dashboard mini Safe apps Nov 14, 2022

DiogoSoaress mentioned this pull request Nov 14, 2022

Dashboard iframes #985

Closed

This was referenced Nov 14, 2022

feat: Safe claiming widget safe-global/safe-react-apps#569

Closed

feat(safe-claiming-app): Snapshot widget safe-global/safe-react-apps#575

Merged

DiogoSoaress changed the title ~~[WIP] Dashboard mini Safe apps~~ feat: Dashboard governance widgets Nov 22, 2022

DiogoSoaress requested a review from iamacook November 22, 2022 10:29

iamacook reviewed Nov 22, 2022

View reviewed changes

DiogoSoaress mentioned this pull request Nov 22, 2022

fix(safe-claiming-app): claiming widget not loading in Firefox safe-global/safe-react-apps#581

Merged

DiogoSoaress commented Nov 22, 2022

View reviewed changes

DiogoSoaress requested a review from iamacook November 22, 2022 18:23

iamacook reviewed Nov 23, 2022

View reviewed changes

DiogoSoaress force-pushed the epic-governance branch from eade19c to 5b3f681 Compare November 23, 2022 14:54

DiogoSoaress added 7 commits November 23, 2022 15:55

feat: load a mini safe app in dashboard's Governance section

9e8c9f5

fix card heights

742576c

display snapshot widget

f178d43

fetch the claiming app and display the widgets

9c6a6ec

fix: accordion defaultExpanded and fix loading states flicker

6d542ca

responsive widgets grid

da49eb8

expandDefault true

660f56d

DiogoSoaress force-pushed the dashboard-mini-safe-apps branch from 1f63f11 to 660f56d Compare November 23, 2022 14:55

no need to pass explicit boolean value. improve loading components

dfca320

DiogoSoaress requested a review from iamacook November 23, 2022 15:50

iamacook approved these changes Nov 23, 2022

View reviewed changes

DiogoSoaress merged commit 125a91f into epic-governance Nov 23, 2022

DiogoSoaress deleted the dashboard-mini-safe-apps branch November 23, 2022 16:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Dashboard governance widgets #1149

feat: Dashboard governance widgets #1149

DiogoSoaress commented Nov 14, 2022 •

edited

Loading

github-actions bot commented Nov 14, 2022 •

edited

Loading

cloudflare-workers-and-pages bot commented Nov 14, 2022 •

edited

Loading

github-actions bot commented Nov 22, 2022 •

edited

Loading

iamacook left a comment

iamacook Nov 22, 2022

DiogoSoaress Nov 22, 2022

iamacook Nov 22, 2022

DiogoSoaress commented Nov 22, 2022

iamacook commented Nov 22, 2022

liliiaorlenko commented Nov 22, 2022 •

edited

Loading

DiogoSoaress commented Nov 22, 2022

DiogoSoaress Nov 22, 2022

iamacook Nov 23, 2022

iamacook left a comment

iamacook Nov 23, 2022

iamacook Nov 23, 2022

DiogoSoaress Nov 23, 2022

iamacook Nov 23, 2022

DiogoSoaress Nov 23, 2022

iamacook Nov 23, 2022

iamacook Nov 23, 2022

DiogoSoaress commented Nov 23, 2022

DiogoSoaress commented Nov 23, 2022

iamacook commented Nov 23, 2022

github-actions bot commented Nov 23, 2022

DiogoSoaress commented Nov 23, 2022

gitpoap-bot bot commented Nov 23, 2022

feat: Dashboard governance widgets #1149

feat: Dashboard governance widgets #1149

Conversation

DiogoSoaress commented Nov 14, 2022 • edited Loading

What it solves

Screenshots

github-actions bot commented Nov 14, 2022 • edited Loading

ESLint Summary View Full Report

cloudflare-workers-and-pages bot commented Nov 14, 2022 • edited Loading

Deploying with Cloudflare Pages

github-actions bot commented Nov 22, 2022 • edited Loading

ESLint Summary View Full Report

iamacook left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DiogoSoaress commented Nov 22, 2022

iamacook commented Nov 22, 2022

liliiaorlenko commented Nov 22, 2022 • edited Loading

DiogoSoaress commented Nov 22, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

iamacook left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DiogoSoaress commented Nov 23, 2022

DiogoSoaress commented Nov 23, 2022

iamacook commented Nov 23, 2022

github-actions bot commented Nov 23, 2022

Branch preview

DiogoSoaress commented Nov 23, 2022

gitpoap-bot bot commented Nov 23, 2022

DiogoSoaress commented Nov 14, 2022 •

edited

Loading

github-actions bot commented Nov 14, 2022 •

edited

Loading

cloudflare-workers-and-pages bot commented Nov 14, 2022 •

edited

Loading

github-actions bot commented Nov 22, 2022 •

edited

Loading

liliiaorlenko commented Nov 22, 2022 •

edited

Loading