From 1c9ad39830658c6897ab0015a1c003540c510df6 Mon Sep 17 00:00:00 2001
From: Diogo Soares <diogo.lsoares@gmail.com>
Date: Mon, 24 Oct 2022 17:13:26 +0200
Subject: [PATCH 1/9] create the Governance section on Dashboard

---
 .../GovernanceSection/GovernanceSection.tsx   | 37 +++++++++++++++++++
 src/components/dashboard/index.tsx            |  5 +++
 2 files changed, 42 insertions(+)
 create mode 100644 src/components/dashboard/GovernanceSection/GovernanceSection.tsx

diff --git a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
new file mode 100644
index 0000000000..6123547784
--- /dev/null
+++ b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
@@ -0,0 +1,37 @@
+import { Typography, Grid, Card, Box } from '@mui/material'
+import { WidgetBody, WidgetContainer } from '@/components/dashboard/styled'
+
+const GovernanceSection = () => (
+  <Grid item xs={12} md>
+    <WidgetContainer>
+      <Typography component="h2" variant="subtitle1" fontWeight={700} mb={2}>
+        Governance
+      </Typography>
+
+      <WidgetBody>
+        <Grid gap="24px" container>
+          <Grid minWidth="200px" item xs md>
+            <Card>
+              <Box m={2} sx={{ minHeight: '200px' }}>
+                <Typography variant="h3">
+                  <strong>Claiming app</strong>
+                </Typography>
+              </Box>
+            </Card>
+          </Grid>
+          <Grid minWidth="200px" item xs md>
+            <Card>
+              <Box m={2} sx={{ minHeight: '200px' }}>
+                <Typography variant="h3">
+                  <strong>Snapshot</strong>
+                </Typography>
+              </Box>
+            </Card>
+          </Grid>
+        </Grid>
+      </WidgetBody>
+    </WidgetContainer>
+  </Grid>
+)
+
+export default GovernanceSection
diff --git a/src/components/dashboard/index.tsx b/src/components/dashboard/index.tsx
index 07f5009b28..024a723d99 100644
--- a/src/components/dashboard/index.tsx
+++ b/src/components/dashboard/index.tsx
@@ -4,6 +4,7 @@ import PendingTxsList from '@/components/dashboard/PendingTxs/PendingTxsList'
 import Overview from '@/components/dashboard/Overview/Overview'
 import { FeaturedApps } from '@/components/dashboard/FeaturedApps/FeaturedApps'
 import SafeAppsDashboardSection from '@/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection'
+import GovernanceSection from '@/components/dashboard/GovernanceSection/GovernanceSection'
 
 const Dashboard = (): ReactElement => {
   return (
@@ -16,6 +17,10 @@ const Dashboard = (): ReactElement => {
         <PendingTxsList size={4} />
       </Grid>
 
+      <Grid item xs={12}>
+        <GovernanceSection />
+      </Grid>
+
       <Grid item xs={12}>
         <FeaturedApps />
       </Grid>

From 5b3f6818a522cd9fe3f530618866d07b53c1110e Mon Sep 17 00:00:00 2001
From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com>
Date: Thu, 10 Nov 2022 17:29:35 +0100
Subject: [PATCH 2/9] [Governance Visibility] Dashboard section (#1125)

* dashboard section with placeholders

* use MUI Accordion for the collapsible section

* change expand icon color
---
 .../GovernanceSection/GovernanceSection.tsx   | 68 +++++++++++--------
 .../GovernanceSection/styles.module.css       | 18 +++++
 2 files changed, 59 insertions(+), 27 deletions(-)
 create mode 100644 src/components/dashboard/GovernanceSection/styles.module.css

diff --git a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
index 6123547784..bc1f709ff9 100644
--- a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
+++ b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
@@ -1,36 +1,50 @@
 import { Typography, Grid, Card, Box } from '@mui/material'
-import { WidgetBody, WidgetContainer } from '@/components/dashboard/styled'
+import { WidgetBody } from '@/components/dashboard/styled'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import Accordion from '@mui/material/Accordion'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import css from './styles.module.css'
 
 const GovernanceSection = () => (
   <Grid item xs={12} md>
-    <WidgetContainer>
-      <Typography component="h2" variant="subtitle1" fontWeight={700} mb={2}>
-        Governance
-      </Typography>
+    <Accordion className={css.accordion}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon color="border" />}>
+        <div>
+          <Typography component="h2" variant="subtitle1" fontWeight={700}>
+            Governance
+          </Typography>
+          <Typography variant="body2" mb={2} color="text.secondary">
+            Use your SAFE tokens to vote on important proposals or participate in forum discussions.
+          </Typography>
+        </div>
+      </AccordionSummary>
 
-      <WidgetBody>
-        <Grid gap="24px" container>
-          <Grid minWidth="200px" item xs md>
-            <Card>
-              <Box m={2} sx={{ minHeight: '200px' }}>
-                <Typography variant="h3">
-                  <strong>Claiming app</strong>
-                </Typography>
-              </Box>
-            </Card>
+      <AccordionDetails sx={({ spacing }) => ({ padding: `0 ${spacing(3)}` })}>
+        <WidgetBody>
+          <Grid spacing={3} container>
+            <Grid item xs={8}>
+              <Card>
+                <Box m={2} sx={{ minHeight: '200px' }}>
+                  <Typography variant="h3">
+                    <strong>Snapshot</strong>
+                  </Typography>
+                </Box>
+              </Card>
+            </Grid>
+            <Grid item xs={4}>
+              <Card>
+                <Box m={2} sx={{ minHeight: '200px' }}>
+                  <Typography variant="h3">
+                    <strong>Claiming app</strong>
+                  </Typography>
+                </Box>
+              </Card>
+            </Grid>
           </Grid>
-          <Grid minWidth="200px" item xs md>
-            <Card>
-              <Box m={2} sx={{ minHeight: '200px' }}>
-                <Typography variant="h3">
-                  <strong>Snapshot</strong>
-                </Typography>
-              </Box>
-            </Card>
-          </Grid>
-        </Grid>
-      </WidgetBody>
-    </WidgetContainer>
+        </WidgetBody>
+      </AccordionDetails>
+    </Accordion>
   </Grid>
 )
 
diff --git a/src/components/dashboard/GovernanceSection/styles.module.css b/src/components/dashboard/GovernanceSection/styles.module.css
new file mode 100644
index 0000000000..0bb82e73a3
--- /dev/null
+++ b/src/components/dashboard/GovernanceSection/styles.module.css
@@ -0,0 +1,18 @@
+.accordion {
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}
+
+.accordion :global .MuiAccordionSummary-root,
+.accordion :global .MuiAccordionDetails-root {
+  padding: 0;
+}
+
+.accordion :global .MuiAccordionSummary-root:hover {
+  background: inherit;
+}
+
+.accordion :global .Mui-expanded.MuiAccordionSummary-root {
+  background: inherit;
+}

From 125a91f9cdaaaaa6de3792844f7defe3260f4263 Mon Sep 17 00:00:00 2001
From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com>
Date: Wed, 23 Nov 2022 17:01:21 +0100
Subject: [PATCH 3/9] 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
---
 .../GovernanceSection/GovernanceSection.tsx   | 106 +++++++++++++-----
 src/components/dashboard/index.tsx            |   4 +-
 src/components/safe-apps/AppFrame/index.tsx   |   7 +-
 3 files changed, 85 insertions(+), 32 deletions(-)

diff --git a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
index bc1f709ff9..02dda3fabc 100644
--- a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
+++ b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
@@ -1,14 +1,28 @@
-import { Typography, Grid, Card, Box } from '@mui/material'
+import { Typography, Grid, Card, Box, Alert } from '@mui/material'
 import { WidgetBody } from '@/components/dashboard/styled'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import Accordion from '@mui/material/Accordion'
 import AccordionSummary from '@mui/material/AccordionSummary'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import css from './styles.module.css'
+import SafeAppsErrorBoundary from '@/components/safe-apps/SafeAppsErrorBoundary'
+import SafeAppsLoadError from '@/components/safe-apps/SafeAppsErrorBoundary/SafeAppsLoadError'
+import AppFrame from '@/components/safe-apps/AppFrame'
+import { useBrowserPermissions } from '@/hooks/safe-apps/permissions'
+import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
+import { SafeAppsTag } from '@/config/constants'
 
-const GovernanceSection = () => (
-  <Grid item xs={12} md>
-    <Accordion className={css.accordion}>
+const CLAIMING_WIDGET_ID = '#claiming-widget'
+const SNAPSHOT_WIDGET_ID = '#snapshot-widget'
+
+const GovernanceSection = () => {
+  const { getAllowedFeaturesList } = useBrowserPermissions()
+  const [claimingSafeApp, errorFetchingClaimingSafeApp] = useRemoteSafeApps(SafeAppsTag.SAFE_CLAIMING_APP)
+  const claimingApp = claimingSafeApp?.[0]
+  const fetchingSafeClaimingApp = !claimingApp && !errorFetchingClaimingSafeApp
+
+  return (
+    <Accordion className={css.accordion} defaultExpanded>
       <AccordionSummary expandIcon={<ExpandMoreIcon color="border" />}>
         <div>
           <Typography component="h2" variant="subtitle1" fontWeight={700}>
@@ -21,31 +35,69 @@ const GovernanceSection = () => (
       </AccordionSummary>
 
       <AccordionDetails sx={({ spacing }) => ({ padding: `0 ${spacing(3)}` })}>
-        <WidgetBody>
-          <Grid spacing={3} container>
-            <Grid item xs={8}>
-              <Card>
-                <Box m={2} sx={{ minHeight: '200px' }}>
-                  <Typography variant="h3">
-                    <strong>Snapshot</strong>
-                  </Typography>
-                </Box>
-              </Card>
-            </Grid>
-            <Grid item xs={4}>
-              <Card>
-                <Box m={2} sx={{ minHeight: '200px' }}>
-                  <Typography variant="h3">
-                    <strong>Claiming app</strong>
-                  </Typography>
-                </Box>
-              </Card>
+        {claimingApp || fetchingSafeClaimingApp ? (
+          <WidgetBody>
+            <Grid spacing={3} container>
+              <Grid item xs={12} md={6} lg={8}>
+                <Card sx={{ height: '300px' }}>
+                  {claimingApp ? (
+                    <SafeAppsErrorBoundary render={() => <SafeAppsLoadError onBackToApps={() => {}} />}>
+                      <AppFrame
+                        appUrl={`${claimingApp.url}${SNAPSHOT_WIDGET_ID}`}
+                        allowedFeaturesList={getAllowedFeaturesList(claimingApp.url)}
+                        isQueueBarDisabled
+                      />
+                    </SafeAppsErrorBoundary>
+                  ) : (
+                    <Box
+                      sx={{ height: '300px' }}
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="center"
+                      textAlign="center"
+                    >
+                      <Typography variant="h1" color="text.secondary">
+                        Loading Snapshot...
+                      </Typography>
+                    </Box>
+                  )}
+                </Card>
+              </Grid>
+              <Grid item xs={12} md={6} lg={4}>
+                <Card sx={{ height: '300px' }}>
+                  {claimingApp ? (
+                    <SafeAppsErrorBoundary render={() => <SafeAppsLoadError onBackToApps={() => {}} />}>
+                      <AppFrame
+                        appUrl={`${claimingApp.url}${CLAIMING_WIDGET_ID}`}
+                        allowedFeaturesList={getAllowedFeaturesList(claimingApp.url)}
+                        isQueueBarDisabled
+                      />
+                    </SafeAppsErrorBoundary>
+                  ) : (
+                    <Box
+                      sx={{ height: '300px' }}
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="center"
+                      textAlign="center"
+                    >
+                      <Typography variant="h1" color="text.secondary">
+                        Loading Claiming app...
+                      </Typography>
+                    </Box>
+                  )}
+                </Card>
+              </Grid>
             </Grid>
-          </Grid>
-        </WidgetBody>
+          </WidgetBody>
+        ) : (
+          <Alert severity="warning" elevation={3}>
+            There was an error fetching the Governance section. Please reload the page.
+          </Alert>
+        )}
       </AccordionDetails>
     </Accordion>
-  </Grid>
-)
+  )
+}
 
 export default GovernanceSection
diff --git a/src/components/dashboard/index.tsx b/src/components/dashboard/index.tsx
index 024a723d99..e58066a5bc 100644
--- a/src/components/dashboard/index.tsx
+++ b/src/components/dashboard/index.tsx
@@ -18,11 +18,11 @@ const Dashboard = (): ReactElement => {
       </Grid>
 
       <Grid item xs={12}>
-        <GovernanceSection />
+        <FeaturedApps />
       </Grid>
 
       <Grid item xs={12}>
-        <FeaturedApps />
+        <GovernanceSection />
       </Grid>
 
       <Grid item xs={12}>
diff --git a/src/components/safe-apps/AppFrame/index.tsx b/src/components/safe-apps/AppFrame/index.tsx
index 6b696be5a4..d99c48ae26 100644
--- a/src/components/safe-apps/AppFrame/index.tsx
+++ b/src/components/safe-apps/AppFrame/index.tsx
@@ -44,9 +44,10 @@ const UNKNOWN_APP_NAME = 'Unknown App'
 type AppFrameProps = {
   appUrl: string
   allowedFeaturesList: string
+  isQueueBarDisabled?: boolean
 }
 
-const AppFrame = ({ appUrl, allowedFeaturesList }: AppFrameProps): ReactElement => {
+const AppFrame = ({ appUrl, allowedFeaturesList, isQueueBarDisabled = false }: AppFrameProps): ReactElement => {
   const chainId = useChainId()
   const [txModalState, openTxModal, closeTxModal] = useTxModal()
   const [signMessageModalState, openSignMessageModal, closeSignMessageModal] = useSignMessageModal()
@@ -62,7 +63,7 @@ const AppFrame = ({ appUrl, allowedFeaturesList }: AppFrameProps): ReactElement
     dismissQueueBar,
     transactions,
   } = useTransactionQueueBarState()
-  const queueBarVisible = transactions.results.length > 0 && !queueBarDismissed
+  const queueBarVisible = !isQueueBarDisabled && transactions.results.length > 0 && !queueBarDismissed
   const [remoteApp] = useSafeAppFromBackend(appUrl, safe.chainId)
   const { safeApp: safeAppFromManifest } = useSafeAppFromManifest(appUrl, safe.chainId)
   const { thirdPartyCookiesDisabled, setThirdPartyCookiesDisabled } = useThirdPartyCookies()
@@ -227,7 +228,7 @@ const AppFrame = ({ appUrl, allowedFeaturesList }: AppFrameProps): ReactElement
 
         <TransactionQueueBar
           expanded={queueBarExpanded}
-          visible={!queueBarDismissed}
+          visible={queueBarVisible && !queueBarDismissed}
           setExpanded={setExpanded}
           onDismiss={dismissQueueBar}
           transactions={transactions}

From bed2d285585ede20cd047dd68f21d352a2ba6bdf Mon Sep 17 00:00:00 2001
From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com>
Date: Thu, 24 Nov 2022 18:15:47 +0100
Subject: [PATCH 4/9] 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
---
 .../dashboard/GovernanceSection/GovernanceSection.tsx      | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
index 02dda3fabc..b961910139 100644
--- a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
+++ b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
@@ -11,11 +11,14 @@ import AppFrame from '@/components/safe-apps/AppFrame'
 import { useBrowserPermissions } from '@/hooks/safe-apps/permissions'
 import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 import { SafeAppsTag } from '@/config/constants'
+import { useDarkMode } from '@/hooks/useDarkMode'
 
 const CLAIMING_WIDGET_ID = '#claiming-widget'
 const SNAPSHOT_WIDGET_ID = '#snapshot-widget'
 
 const GovernanceSection = () => {
+  const isDarkMode = useDarkMode()
+  const theme = isDarkMode ? 'dark' : 'light'
   const { getAllowedFeaturesList } = useBrowserPermissions()
   const [claimingSafeApp, errorFetchingClaimingSafeApp] = useRemoteSafeApps(SafeAppsTag.SAFE_CLAIMING_APP)
   const claimingApp = claimingSafeApp?.[0]
@@ -43,7 +46,7 @@ const GovernanceSection = () => {
                   {claimingApp ? (
                     <SafeAppsErrorBoundary render={() => <SafeAppsLoadError onBackToApps={() => {}} />}>
                       <AppFrame
-                        appUrl={`${claimingApp.url}${SNAPSHOT_WIDGET_ID}`}
+                        appUrl={`${claimingApp.url}?theme=${theme}${SNAPSHOT_WIDGET_ID}`}
                         allowedFeaturesList={getAllowedFeaturesList(claimingApp.url)}
                         isQueueBarDisabled
                       />
@@ -68,7 +71,7 @@ const GovernanceSection = () => {
                   {claimingApp ? (
                     <SafeAppsErrorBoundary render={() => <SafeAppsLoadError onBackToApps={() => {}} />}>
                       <AppFrame
-                        appUrl={`${claimingApp.url}${CLAIMING_WIDGET_ID}`}
+                        appUrl={`${claimingApp.url}?theme=${theme}${CLAIMING_WIDGET_ID}`}
                         allowedFeaturesList={getAllowedFeaturesList(claimingApp.url)}
                         isQueueBarDisabled
                       />

From 3ee67ba9fc5eba846808caff160b7c88f27e3047 Mon Sep 17 00:00:00 2001
From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com>
Date: Fri, 25 Nov 2022 15:33:24 +0100
Subject: [PATCH 5/9] 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)
---
 public/images/common/load.svg                 |   3 +
 .../GovernanceSection/GovernanceSection.tsx   | 102 ++++++++----------
 .../GovernanceSection/styles.module.css       |  30 ++++++
 3 files changed, 78 insertions(+), 57 deletions(-)
 create mode 100644 public/images/common/load.svg

diff --git a/public/images/common/load.svg b/public/images/common/load.svg
new file mode 100644
index 0000000000..b9ffbf3cc4
--- /dev/null
+++ b/public/images/common/load.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.7116 9.5326C34.736 6.43903 31.9501 3.9569 28.6553 2.35477L27.226 5.29417C32.9754 8.08997 36.5469 13.7955 36.5469 20.1845C36.5469 29.3085 29.1239 36.7313 20 36.7313C10.8761 36.7313 3.45311 29.3085 3.45311 20.1846C3.45311 14.7537 6.1659 9.6774 10.5395 6.61237L16.31 12.4107V0H3.95876L8.20274 4.26436C6.28945 5.68334 4.63665 7.43997 3.33196 9.46472C1.273 12.6603 0.18457 16.367 0.18457 20.1846C0.18457 31.1109 9.0737 40 20 40C30.9263 40 39.8154 31.1109 39.8154 20.1846C39.8154 16.3956 38.7421 12.7122 36.7116 9.5326Z"/>
+</svg>
diff --git a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
index b961910139..cee8776d6e 100644
--- a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
+++ b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
@@ -1,4 +1,4 @@
-import { Typography, Grid, Card, Box, Alert } from '@mui/material'
+import { Typography, Card, Box, Alert } from '@mui/material'
 import { WidgetBody } from '@/components/dashboard/styled'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import Accordion from '@mui/material/Accordion'
@@ -6,16 +6,14 @@ import AccordionSummary from '@mui/material/AccordionSummary'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import css from './styles.module.css'
 import SafeAppsErrorBoundary from '@/components/safe-apps/SafeAppsErrorBoundary'
-import SafeAppsLoadError from '@/components/safe-apps/SafeAppsErrorBoundary/SafeAppsLoadError'
 import AppFrame from '@/components/safe-apps/AppFrame'
 import { useBrowserPermissions } from '@/hooks/safe-apps/permissions'
 import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 import { SafeAppsTag } from '@/config/constants'
+import LoadIcon from '@/public/images/common/load.svg'
+import palette from '@/styles/colors'
 import { useDarkMode } from '@/hooks/useDarkMode'
 
-const CLAIMING_WIDGET_ID = '#claiming-widget'
-const SNAPSHOT_WIDGET_ID = '#snapshot-widget'
-
 const GovernanceSection = () => {
   const isDarkMode = useDarkMode()
   const theme = isDarkMode ? 'dark' : 'light'
@@ -24,6 +22,24 @@ const GovernanceSection = () => {
   const claimingApp = claimingSafeApp?.[0]
   const fetchingSafeClaimingApp = !claimingApp && !errorFetchingClaimingSafeApp
 
+  const WidgetLoadError = () => (
+    <Card className={css.loadErrorCard}>
+      <Box height="100%" display="flex" flexDirection="column" alignItems="center" justifyContent="center" gap={2}>
+        <LoadIcon fill={`${palette.primary.light}`} />
+        <Typography variant="body1" color="primary.light">
+          Couldn&apos;t load governance widget
+        </Typography>
+      </Box>
+    </Card>
+  )
+
+  const WidgetLoadErrorFallback = () => (
+    <Box className={css.loadErrorWrapper} display="flex" gap={3} width={1} sx={{ backgroundColor: 'background.main' }}>
+      <WidgetLoadError />
+      <WidgetLoadError />
+    </Box>
+  )
+
   return (
     <Accordion className={css.accordion} defaultExpanded>
       <AccordionSummary expandIcon={<ExpandMoreIcon color="border" />}>
@@ -40,58 +56,30 @@ const GovernanceSection = () => {
       <AccordionDetails sx={({ spacing }) => ({ padding: `0 ${spacing(3)}` })}>
         {claimingApp || fetchingSafeClaimingApp ? (
           <WidgetBody>
-            <Grid spacing={3} container>
-              <Grid item xs={12} md={6} lg={8}>
-                <Card sx={{ height: '300px' }}>
-                  {claimingApp ? (
-                    <SafeAppsErrorBoundary render={() => <SafeAppsLoadError onBackToApps={() => {}} />}>
-                      <AppFrame
-                        appUrl={`${claimingApp.url}?theme=${theme}${SNAPSHOT_WIDGET_ID}`}
-                        allowedFeaturesList={getAllowedFeaturesList(claimingApp.url)}
-                        isQueueBarDisabled
-                      />
-                    </SafeAppsErrorBoundary>
-                  ) : (
-                    <Box
-                      sx={{ height: '300px' }}
-                      display="flex"
-                      alignItems="center"
-                      justifyContent="center"
-                      textAlign="center"
-                    >
-                      <Typography variant="h1" color="text.secondary">
-                        Loading Snapshot...
-                      </Typography>
-                    </Box>
-                  )}
-                </Card>
-              </Grid>
-              <Grid item xs={12} md={6} lg={4}>
-                <Card sx={{ height: '300px' }}>
-                  {claimingApp ? (
-                    <SafeAppsErrorBoundary render={() => <SafeAppsLoadError onBackToApps={() => {}} />}>
-                      <AppFrame
-                        appUrl={`${claimingApp.url}?theme=${theme}${CLAIMING_WIDGET_ID}`}
-                        allowedFeaturesList={getAllowedFeaturesList(claimingApp.url)}
-                        isQueueBarDisabled
-                      />
-                    </SafeAppsErrorBoundary>
-                  ) : (
-                    <Box
-                      sx={{ height: '300px' }}
-                      display="flex"
-                      alignItems="center"
-                      justifyContent="center"
-                      textAlign="center"
-                    >
-                      <Typography variant="h1" color="text.secondary">
-                        Loading Claiming app...
-                      </Typography>
-                    </Box>
-                  )}
-                </Card>
-              </Grid>
-            </Grid>
+            <Card className={css.widgetWrapper}>
+              {claimingApp ? (
+                <SafeAppsErrorBoundary render={() => <WidgetLoadErrorFallback />}>
+                  <AppFrame
+                    key={theme}
+                    appUrl={`${claimingApp.url}#widget+${theme}`}
+                    allowedFeaturesList={getAllowedFeaturesList(claimingApp.url)}
+                    isQueueBarDisabled
+                  />
+                </SafeAppsErrorBoundary>
+              ) : (
+                <Box
+                  className={css.widgetWrapper}
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="center"
+                  textAlign="center"
+                >
+                  <Typography variant="h1" color="text.secondary">
+                    Loading section...
+                  </Typography>
+                </Box>
+              )}
+            </Card>
           </WidgetBody>
         ) : (
           <Alert severity="warning" elevation={3}>
diff --git a/src/components/dashboard/GovernanceSection/styles.module.css b/src/components/dashboard/GovernanceSection/styles.module.css
index 0bb82e73a3..97aacbec08 100644
--- a/src/components/dashboard/GovernanceSection/styles.module.css
+++ b/src/components/dashboard/GovernanceSection/styles.module.css
@@ -16,3 +16,33 @@
 .accordion :global .Mui-expanded.MuiAccordionSummary-root {
   background: inherit;
 }
+
+.loadErrorWrapper {
+  display: flex;
+}
+
+.widgetWrapper,
+.loadErrorWrapper {
+  border: none;
+  height: 300px;
+}
+
+/* iframe sm breakpoint + paddings */
+@media (max-width: 662px) {
+  .widgetWrapper,
+  .loadErrorWrapper {
+    height: 624px;
+  }
+
+  .loadErrorWrapper{
+    flex-direction: column;
+  }
+}
+
+.loadErrorCard {
+  flex-grow: 1;
+}
+
+.loadErrorCard:last-of-type {
+  min-width: 300px;
+}

From 5f936d917816de31bc9c0ef8d4f770e3369ea817 Mon Sep 17 00:00:00 2001
From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com>
Date: Mon, 28 Nov 2022 10:43:18 +0100
Subject: [PATCH 6/9] 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
---
 public/images/common/load.svg                 |  3 --
 public/images/common/network-error.svg        | 19 +++++++++++
 .../GovernanceSection/GovernanceSection.tsx   | 33 ++++++++++++------
 .../GovernanceSection/styles.module.css       | 34 +++++++++++++++++--
 src/components/safe-apps/AppFrame/index.tsx   |  9 ++---
 .../safe-apps/AppFrame/styles.module.css      |  4 +++
 6 files changed, 82 insertions(+), 20 deletions(-)
 delete mode 100644 public/images/common/load.svg
 create mode 100644 public/images/common/network-error.svg

diff --git a/public/images/common/load.svg b/public/images/common/load.svg
deleted file mode 100644
index b9ffbf3cc4..0000000000
--- a/public/images/common/load.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M36.7116 9.5326C34.736 6.43903 31.9501 3.9569 28.6553 2.35477L27.226 5.29417C32.9754 8.08997 36.5469 13.7955 36.5469 20.1845C36.5469 29.3085 29.1239 36.7313 20 36.7313C10.8761 36.7313 3.45311 29.3085 3.45311 20.1846C3.45311 14.7537 6.1659 9.6774 10.5395 6.61237L16.31 12.4107V0H3.95876L8.20274 4.26436C6.28945 5.68334 4.63665 7.43997 3.33196 9.46472C1.273 12.6603 0.18457 16.367 0.18457 20.1846C0.18457 31.1109 9.0737 40 20 40C30.9263 40 39.8154 31.1109 39.8154 20.1846C39.8154 16.3956 38.7421 12.7122 36.7116 9.5326Z"/>
-</svg>
diff --git a/public/images/common/network-error.svg b/public/images/common/network-error.svg
new file mode 100644
index 0000000000..50df59344d
--- /dev/null
+++ b/public/images/common/network-error.svg
@@ -0,0 +1,19 @@
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="90"
+    height="90"
+    viewBox="0 0 90 90">
+    <g fill="none" fillRule="evenodd">
+      <circle cx="45" cy="45" r="45" class="illustration-background-fill" />
+      <path
+        class="illustration-light-fill"
+        fillRule="nonzero"
+        d="M26.24 62c-.57 0-1.13-.15-1.623-.437a3.254 3.254 0 0 1-1.18-4.44l18.76-32.501a3.234 3.234 0 0 1 5.606 0l18.761 32.501c.286.495.436 1.057.436 1.628A3.244 3.244 0 0 1 63.76 62H26.24z"
+      />
+      <path
+        class="illustration-background-fill"
+        fillRule="nonzero"
+        d="M47 49h-4V36h4zM47 55h-4v-4h4z"
+      />
+    </g>
+  </svg>
diff --git a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
index cee8776d6e..fd7d3792ad 100644
--- a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
+++ b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
@@ -1,4 +1,4 @@
-import { Typography, Card, Box, Alert } from '@mui/material'
+import { Typography, Card, Box, Alert, IconButton, Link, SvgIcon } from '@mui/material'
 import { WidgetBody } from '@/components/dashboard/styled'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import Accordion from '@mui/material/Accordion'
@@ -9,10 +9,10 @@ import SafeAppsErrorBoundary from '@/components/safe-apps/SafeAppsErrorBoundary'
 import AppFrame from '@/components/safe-apps/AppFrame'
 import { useBrowserPermissions } from '@/hooks/safe-apps/permissions'
 import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
-import { SafeAppsTag } from '@/config/constants'
-import LoadIcon from '@/public/images/common/load.svg'
-import palette from '@/styles/colors'
+import { SafeAppsTag, SAFE_APPS_SUPPORT_CHAT_URL } from '@/config/constants'
 import { useDarkMode } from '@/hooks/useDarkMode'
+import { OpenInNew } from '@mui/icons-material'
+import NetworkError from '@/public/images/common/network-error.svg'
 
 const GovernanceSection = () => {
   const isDarkMode = useDarkMode()
@@ -24,10 +24,17 @@ const GovernanceSection = () => {
 
   const WidgetLoadError = () => (
     <Card className={css.loadErrorCard}>
-      <Box height="100%" display="flex" flexDirection="column" alignItems="center" justifyContent="center" gap={2}>
-        <LoadIcon fill={`${palette.primary.light}`} />
-        <Typography variant="body1" color="primary.light">
-          Couldn&apos;t load governance widget
+      <Box className={css.loadErrorMsgContainer}>
+        <Typography variant="h4" color="text.primary" fontWeight="bold">
+          Couldn&apos;t load governance widgets
+        </Typography>
+        <SvgIcon component={NetworkError} inheritViewBox className={css.loadErroricon} />
+        <Typography variant="body1" color="text.primary">
+          You can try to reload the page and in case the problem persists, please reach out to us via{' '}
+          <Link target="_blank" href={SAFE_APPS_SUPPORT_CHAT_URL} fontSize="medium">
+            Discord
+            <OpenInNew fontSize="small" color="primary" className={css.loadErroricon} />
+          </Link>
         </Typography>
       </Box>
     </Card>
@@ -42,7 +49,13 @@ const GovernanceSection = () => {
 
   return (
     <Accordion className={css.accordion} defaultExpanded>
-      <AccordionSummary expandIcon={<ExpandMoreIcon color="border" />}>
+      <AccordionSummary
+        expandIcon={
+          <IconButton size="small">
+            <ExpandMoreIcon color="border" />
+          </IconButton>
+        }
+      >
         <div>
           <Typography component="h2" variant="subtitle1" fontWeight={700}>
             Governance
@@ -63,7 +76,7 @@ const GovernanceSection = () => {
                     key={theme}
                     appUrl={`${claimingApp.url}#widget+${theme}`}
                     allowedFeaturesList={getAllowedFeaturesList(claimingApp.url)}
-                    isQueueBarDisabled
+                    isWidget
                   />
                 </SafeAppsErrorBoundary>
               ) : (
diff --git a/src/components/dashboard/GovernanceSection/styles.module.css b/src/components/dashboard/GovernanceSection/styles.module.css
index 97aacbec08..8d7bf29e47 100644
--- a/src/components/dashboard/GovernanceSection/styles.module.css
+++ b/src/components/dashboard/GovernanceSection/styles.module.css
@@ -9,12 +9,18 @@
   padding: 0;
 }
 
-.accordion :global .MuiAccordionSummary-root:hover {
+.accordion:hover :global .MuiAccordionSummary-root,
+.accordion :global .MuiAccordionSummary-root:hover,
+.accordion :global .Mui-expanded.MuiAccordionSummary-root {
   background: inherit;
 }
 
-.accordion :global .Mui-expanded.MuiAccordionSummary-root {
-  background: inherit;
+.accordion :global .MuiAccordionSummary-root {
+  pointer-events: none;
+}
+
+.accordion :global .MuiAccordionSummary-expandIconWrapper {
+  pointer-events: auto;
 }
 
 .loadErrorWrapper {
@@ -40,9 +46,31 @@
 }
 
 .loadErrorCard {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--space-2);
+  text-align: center;
   flex-grow: 1;
 }
 
 .loadErrorCard:last-of-type {
   min-width: 300px;
 }
+
+.loadErrorMsgContainer {
+  height: 100%;
+  display: flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content: center;
+  gap: var(--space-2);
+  max-width: 80%;
+}
+
+.loadErroricon {
+  font-size: 54px;
+  position: relative;
+  left: 3px;
+  top: 3px;
+}
diff --git a/src/components/safe-apps/AppFrame/index.tsx b/src/components/safe-apps/AppFrame/index.tsx
index d99c48ae26..69b52c7b95 100644
--- a/src/components/safe-apps/AppFrame/index.tsx
+++ b/src/components/safe-apps/AppFrame/index.tsx
@@ -38,16 +38,17 @@ import PermissionsPrompt from '../PermissionsPrompt'
 import { PermissionStatus } from '../types'
 
 import css from './styles.module.css'
+import classnames from 'classnames'
 
 const UNKNOWN_APP_NAME = 'Unknown App'
 
 type AppFrameProps = {
   appUrl: string
   allowedFeaturesList: string
-  isQueueBarDisabled?: boolean
+  isWidget?: boolean
 }
 
-const AppFrame = ({ appUrl, allowedFeaturesList, isQueueBarDisabled = false }: AppFrameProps): ReactElement => {
+const AppFrame = ({ appUrl, allowedFeaturesList, isWidget = false }: AppFrameProps): ReactElement => {
   const chainId = useChainId()
   const [txModalState, openTxModal, closeTxModal] = useTxModal()
   const [signMessageModalState, openSignMessageModal, closeSignMessageModal] = useSignMessageModal()
@@ -63,7 +64,7 @@ const AppFrame = ({ appUrl, allowedFeaturesList, isQueueBarDisabled = false }: A
     dismissQueueBar,
     transactions,
   } = useTransactionQueueBarState()
-  const queueBarVisible = !isQueueBarDisabled && transactions.results.length > 0 && !queueBarDismissed
+  const queueBarVisible = !isWidget && transactions.results.length > 0 && !queueBarDismissed
   const [remoteApp] = useSafeAppFromBackend(appUrl, safe.chainId)
   const { safeApp: safeAppFromManifest } = useSafeAppFromManifest(appUrl, safe.chainId)
   const { thirdPartyCookiesDisabled, setThirdPartyCookiesDisabled } = useThirdPartyCookies()
@@ -198,7 +199,7 @@ const AppFrame = ({ appUrl, allowedFeaturesList, isQueueBarDisabled = false }: A
         <title>Safe Apps - Viewer - {remoteApp ? remoteApp.name : UNKNOWN_APP_NAME}</title>
       </Head>
 
-      <div className={css.wrapper}>
+      <div className={classnames(css.wrapper, { [css.widgetWrapper]: isWidget })}>
         {thirdPartyCookiesDisabled && <ThirdPartyCookiesWarning onClose={() => setThirdPartyCookiesDisabled(false)} />}
 
         {appIsLoading && (
diff --git a/src/components/safe-apps/AppFrame/styles.module.css b/src/components/safe-apps/AppFrame/styles.module.css
index 60ed8e1e43..7c4b611382 100644
--- a/src/components/safe-apps/AppFrame/styles.module.css
+++ b/src/components/safe-apps/AppFrame/styles.module.css
@@ -3,6 +3,10 @@
   height: calc(100vh - var(--header-height));
 }
 
+.widgetWrapper {
+  height: 100%;
+}
+
 .iframe {
   height: 100%;
   width: 100%;

From 2023e623f0bcdd4e8c858f68c61bae99686f5c37 Mon Sep 17 00:00:00 2001
From: Aaron Cook <aaron@safe.global>
Date: Thu, 1 Dec 2022 13:13:30 +0100
Subject: [PATCH 7/9] 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
---
 .../GovernanceSection/GovernanceSection.tsx        | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
index fd7d3792ad..77d2e547bb 100644
--- a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
+++ b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
@@ -13,6 +13,18 @@ import { SafeAppsTag, SAFE_APPS_SUPPORT_CHAT_URL } from '@/config/constants'
 import { useDarkMode } from '@/hooks/useDarkMode'
 import { OpenInNew } from '@mui/icons-material'
 import NetworkError from '@/public/images/common/network-error.svg'
+import useChainId from '@/hooks/useChainId'
+import { getSafeTokenAddress } from '@/components/common/SafeTokenWidget'
+
+// Prevent `GovernanceSection` hooks from needlessly being called
+const GovernanceSectionWrapper = () => {
+  const chainId = useChainId()
+  if (!getSafeTokenAddress(chainId)) {
+    return null
+  }
+
+  return <GovernanceSection />
+}
 
 const GovernanceSection = () => {
   const isDarkMode = useDarkMode()
@@ -104,4 +116,4 @@ const GovernanceSection = () => {
   )
 }
 
-export default GovernanceSection
+export default GovernanceSectionWrapper

From 867e08d33052171571c3d3d03d592628c8726d76 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 6 Dec 2022 11:59:38 +0100
Subject: [PATCH 8/9] 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
---
 .../GovernanceSection/GovernanceSection.tsx   | 24 ++++++++--
 .../GovernanceSection/styles.module.css       |  6 +--
 .../safe-apps/AppFrame/SafeAppIframe.tsx      | 31 ++++++++++++
 src/components/safe-apps/AppFrame/index.tsx   | 48 +++++++------------
 .../safe-apps/AppFrame/styles.module.css      |  4 --
 .../safe-apps/AppFrame/useAppCommunicator.ts  |  2 +-
 .../safe-apps/AppFrame/useGetSafeInfo.ts      | 28 +++++++++++
 src/services/safe-apps/AppCommunicator.ts     |  1 +
 8 files changed, 101 insertions(+), 43 deletions(-)
 create mode 100644 src/components/safe-apps/AppFrame/SafeAppIframe.tsx
 create mode 100644 src/components/safe-apps/AppFrame/useGetSafeInfo.ts

diff --git a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
index 77d2e547bb..24485f2728 100644
--- a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
+++ b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
@@ -6,7 +6,6 @@ import AccordionSummary from '@mui/material/AccordionSummary'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import css from './styles.module.css'
 import SafeAppsErrorBoundary from '@/components/safe-apps/SafeAppsErrorBoundary'
-import AppFrame from '@/components/safe-apps/AppFrame'
 import { useBrowserPermissions } from '@/hooks/safe-apps/permissions'
 import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 import { SafeAppsTag, SAFE_APPS_SUPPORT_CHAT_URL } from '@/config/constants'
@@ -15,6 +14,12 @@ import { OpenInNew } from '@mui/icons-material'
 import NetworkError from '@/public/images/common/network-error.svg'
 import useChainId from '@/hooks/useChainId'
 import { getSafeTokenAddress } from '@/components/common/SafeTokenWidget'
+import SafeAppIframe from '@/components/safe-apps/AppFrame/SafeAppIframe'
+import type { UseAppCommunicatorHandlers } from '@/components/safe-apps/AppFrame/useAppCommunicator'
+import useAppCommunicator from '@/components/safe-apps/AppFrame/useAppCommunicator'
+import { useCurrentChain } from '@/hooks/useChains'
+import useAppIsLoading from '@/components/safe-apps/AppFrame/useAppIsLoading'
+import useGetSafeInfo from '@/components/safe-apps/AppFrame/useGetSafeInfo'
 
 // Prevent `GovernanceSection` hooks from needlessly being called
 const GovernanceSectionWrapper = () => {
@@ -30,10 +35,17 @@ const GovernanceSection = () => {
   const isDarkMode = useDarkMode()
   const theme = isDarkMode ? 'dark' : 'light'
   const { getAllowedFeaturesList } = useBrowserPermissions()
-  const [claimingSafeApp, errorFetchingClaimingSafeApp] = useRemoteSafeApps(SafeAppsTag.SAFE_CLAIMING_APP)
-  const claimingApp = claimingSafeApp?.[0]
+  const chain = useCurrentChain()
+  const [matchingApps, errorFetchingClaimingSafeApp] = useRemoteSafeApps(SafeAppsTag.SAFE_CLAIMING_APP)
+  const claimingApp = matchingApps?.[0]
+  const { iframeRef, setAppIsLoading } = useAppIsLoading()
   const fetchingSafeClaimingApp = !claimingApp && !errorFetchingClaimingSafeApp
 
+  // Initialize the app communicator
+  useAppCommunicator(iframeRef, claimingApp, chain, {
+    onGetSafeInfo: useGetSafeInfo(),
+  } as Partial<UseAppCommunicatorHandlers> as UseAppCommunicatorHandlers)
+
   const WidgetLoadError = () => (
     <Card className={css.loadErrorCard}>
       <Box className={css.loadErrorMsgContainer}>
@@ -84,11 +96,13 @@ const GovernanceSection = () => {
             <Card className={css.widgetWrapper}>
               {claimingApp ? (
                 <SafeAppsErrorBoundary render={() => <WidgetLoadErrorFallback />}>
-                  <AppFrame
+                  <SafeAppIframe
                     key={theme}
                     appUrl={`${claimingApp.url}#widget+${theme}`}
                     allowedFeaturesList={getAllowedFeaturesList(claimingApp.url)}
-                    isWidget
+                    title="Sage Governance"
+                    iframeRef={iframeRef}
+                    onLoad={() => setAppIsLoading(false)}
                   />
                 </SafeAppsErrorBoundary>
               ) : (
diff --git a/src/components/dashboard/GovernanceSection/styles.module.css b/src/components/dashboard/GovernanceSection/styles.module.css
index 8d7bf29e47..df6c7c8820 100644
--- a/src/components/dashboard/GovernanceSection/styles.module.css
+++ b/src/components/dashboard/GovernanceSection/styles.module.css
@@ -40,7 +40,7 @@
     height: 624px;
   }
 
-  .loadErrorWrapper{
+  .loadErrorWrapper {
     flex-direction: column;
   }
 }
@@ -61,8 +61,8 @@
 .loadErrorMsgContainer {
   height: 100%;
   display: flex;
-  flex-direction:column;
-  align-items:center;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
   gap: var(--space-2);
   max-width: 80%;
diff --git a/src/components/safe-apps/AppFrame/SafeAppIframe.tsx b/src/components/safe-apps/AppFrame/SafeAppIframe.tsx
new file mode 100644
index 0000000000..6f107436a4
--- /dev/null
+++ b/src/components/safe-apps/AppFrame/SafeAppIframe.tsx
@@ -0,0 +1,31 @@
+import type { ReactElement } from 'react'
+import css from './styles.module.css'
+
+type SafeAppIFrameProps = {
+  appUrl: string
+  allowedFeaturesList: string
+  title?: string
+  iframeRef?: React.MutableRefObject<HTMLIFrameElement | null>
+  onLoad?: () => void
+}
+
+// see sandbox mdn docs for more details https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox
+const IFRAME_SANDBOX_ALLOWED_FEATURES =
+  'allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms allow-downloads allow-orientation-lock'
+
+const SafeAppIframe = ({ appUrl, allowedFeaturesList, iframeRef, onLoad, title }: SafeAppIFrameProps): ReactElement => {
+  return (
+    <iframe
+      className={css.iframe}
+      id={`iframe-${appUrl}`}
+      ref={iframeRef}
+      src={appUrl}
+      title={title}
+      onLoad={onLoad}
+      sandbox={IFRAME_SANDBOX_ALLOWED_FEATURES}
+      allow={allowedFeaturesList}
+    />
+  )
+}
+
+export default SafeAppIframe
diff --git a/src/components/safe-apps/AppFrame/index.tsx b/src/components/safe-apps/AppFrame/index.tsx
index aa3e4b5a3e..7798729ca6 100644
--- a/src/components/safe-apps/AppFrame/index.tsx
+++ b/src/components/safe-apps/AppFrame/index.tsx
@@ -17,13 +17,11 @@ import { useSafeAppFromBackend } from '@/hooks/safe-apps/useSafeAppFromBackend'
 import useChainId from '@/hooks/useChainId'
 import useAddressBook from '@/hooks/useAddressBook'
 import { useSafePermissions } from '@/hooks/safe-apps/permissions'
-import useIsGranted from '@/hooks/useIsGranted'
 import { useCurrentChain } from '@/hooks/useChains'
 import { isSameUrl } from '@/utils/url'
 import { isMultisigDetailedExecutionInfo } from '@/utils/transaction-guards'
 import useTransactionQueueBarState from '@/components/safe-apps/AppFrame/useTransactionQueueBarState'
 import { gtmTrackPageview } from '@/services/analytics/gtm'
-import { getLegacyChainName } from '../utils'
 import useThirdPartyCookies from './useThirdPartyCookies'
 import useAnalyticsFromSafeApp from './useFromAppAnalytics'
 import useAppIsLoading from './useAppIsLoading'
@@ -38,28 +36,23 @@ import PermissionsPrompt from '../PermissionsPrompt'
 import { PermissionStatus } from '../types'
 
 import css from './styles.module.css'
-import classnames from 'classnames'
+import SafeAppIframe from './SafeAppIframe'
+import useGetSafeInfo from './useGetSafeInfo'
 
 const UNKNOWN_APP_NAME = 'Unknown App'
 
 type AppFrameProps = {
   appUrl: string
   allowedFeaturesList: string
-  isWidget?: boolean
 }
 
-// see sandbox mdn docs for more details https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox
-const IFRAME_SANDBOX_ALLOWED_FEATURES =
-  'allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms allow-downloads allow-orientation-lock'
-
-const AppFrame = ({ appUrl, allowedFeaturesList, isWidget = false }: AppFrameProps): ReactElement => {
+const AppFrame = ({ appUrl, allowedFeaturesList }: AppFrameProps): ReactElement => {
   const chainId = useChainId()
   const [txModalState, openTxModal, closeTxModal] = useTxModal()
   const [signMessageModalState, openSignMessageModal, closeSignMessageModal] = useSignMessageModal()
   const { safe, safeLoaded, safeAddress } = useSafeInfo()
   const addressBook = useAddressBook()
   const chain = useCurrentChain()
-  const granted = useIsGranted()
   const router = useRouter()
   const {
     expanded: queueBarExpanded,
@@ -68,7 +61,7 @@ const AppFrame = ({ appUrl, allowedFeaturesList, isWidget = false }: AppFramePro
     dismissQueueBar,
     transactions,
   } = useTransactionQueueBarState()
-  const queueBarVisible = !isWidget && transactions.results.length > 0 && !queueBarDismissed
+  const queueBarVisible = transactions.results.length > 0 && !queueBarDismissed
   const [remoteApp, , isBackendAppsLoading] = useSafeAppFromBackend(appUrl, safe.chainId)
   const { safeApp: safeAppFromManifest } = useSafeAppFromManifest(appUrl, safe.chainId)
   const { thirdPartyCookiesDisabled, setThirdPartyCookiesDisabled } = useThirdPartyCookies()
@@ -77,6 +70,7 @@ const AppFrame = ({ appUrl, allowedFeaturesList, isWidget = false }: AppFramePro
   const { getPermissions, hasPermission, permissionsRequest, setPermissionsRequest, confirmPermissionRequest } =
     useSafePermissions()
   const appName = useMemo(() => (remoteApp ? remoteApp.name : appUrl), [appUrl, remoteApp])
+
   const communicator = useAppCommunicator(iframeRef, remoteApp || safeAppFromManifest, chain, {
     onConfirmTransactions: openTxModal,
     onSignMessage: openSignMessageModal,
@@ -93,14 +87,7 @@ const AppFrame = ({ appUrl, allowedFeaturesList, isWidget = false }: AppFramePro
     onGetEnvironmentInfo: () => ({
       origin: document.location.origin,
     }),
-    onGetSafeInfo: () => ({
-      safeAddress,
-      chainId: parseInt(chainId, 10),
-      owners: safe.owners.map((owner) => owner.value),
-      threshold: safe.threshold,
-      isReadOnly: !granted,
-      network: getLegacyChainName(chain?.chainName || '', chainId).toUpperCase(),
-    }),
+    onGetSafeInfo: useGetSafeInfo(),
     onGetSafeBalances: (currency) =>
       getBalances(chainId, safeAddress, currency, {
         exclude_spam: true,
@@ -204,7 +191,7 @@ const AppFrame = ({ appUrl, allowedFeaturesList, isWidget = false }: AppFramePro
         <title>Safe Apps - Viewer - {remoteApp ? remoteApp.name : UNKNOWN_APP_NAME}</title>
       </Head>
 
-      <div className={classnames(css.wrapper, { [css.widgetWrapper]: isWidget })}>
+      <div className={css.wrapper}>
         {thirdPartyCookiesDisabled && <ThirdPartyCookiesWarning onClose={() => setThirdPartyCookiesDisabled(false)} />}
 
         {appIsLoading && (
@@ -218,20 +205,21 @@ const AppFrame = ({ appUrl, allowedFeaturesList, isWidget = false }: AppFramePro
           </div>
         )}
 
-        <iframe
-          className={css.iframe}
-          id={`iframe-${appUrl}`}
-          ref={iframeRef}
-          src={appUrl}
-          title={safeAppFromManifest?.name}
-          onLoad={onIframeLoad}
-          sandbox={IFRAME_SANDBOX_ALLOWED_FEATURES}
-          allow={allowedFeaturesList}
+        <div
           style={{
+            height: '100%',
             display: appIsLoading ? 'none' : 'block',
             paddingBottom: queueBarVisible ? TRANSACTION_BAR_HEIGHT : 0,
           }}
-        />
+        >
+          <SafeAppIframe
+            appUrl={appUrl}
+            allowedFeaturesList={allowedFeaturesList}
+            iframeRef={iframeRef}
+            onLoad={onIframeLoad}
+            title={safeAppFromManifest?.name}
+          />
+        </div>
 
         <TransactionQueueBar
           expanded={queueBarExpanded}
diff --git a/src/components/safe-apps/AppFrame/styles.module.css b/src/components/safe-apps/AppFrame/styles.module.css
index 7c4b611382..60ed8e1e43 100644
--- a/src/components/safe-apps/AppFrame/styles.module.css
+++ b/src/components/safe-apps/AppFrame/styles.module.css
@@ -3,10 +3,6 @@
   height: calc(100vh - var(--header-height));
 }
 
-.widgetWrapper {
-  height: 100%;
-}
-
 .iframe {
   height: 100%;
   width: 100%;
diff --git a/src/components/safe-apps/AppFrame/useAppCommunicator.ts b/src/components/safe-apps/AppFrame/useAppCommunicator.ts
index 5374ba80a7..7be3756b58 100644
--- a/src/components/safe-apps/AppFrame/useAppCommunicator.ts
+++ b/src/components/safe-apps/AppFrame/useAppCommunicator.ts
@@ -39,7 +39,7 @@ type JsonRpcResponse = {
   error?: string
 }
 
-type UseAppCommunicatorHandlers = {
+export type UseAppCommunicatorHandlers = {
   onConfirmTransactions: (txs: BaseTransaction[], requestId: RequestId, params?: SendTransactionRequestParams) => void
   onSignMessage: (
     message: string | EIP712TypedData,
diff --git a/src/components/safe-apps/AppFrame/useGetSafeInfo.ts b/src/components/safe-apps/AppFrame/useGetSafeInfo.ts
new file mode 100644
index 0000000000..00f8b2e2e6
--- /dev/null
+++ b/src/components/safe-apps/AppFrame/useGetSafeInfo.ts
@@ -0,0 +1,28 @@
+import { useMemo } from 'react'
+import useChainId from '@/hooks/useChainId'
+import { useCurrentChain } from '@/hooks/useChains'
+import useIsGranted from '@/hooks/useIsGranted'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import { getLegacyChainName } from '../utils'
+
+const useGetSafeInfo = () => {
+  const { safe, safeAddress } = useSafeInfo()
+  const granted = useIsGranted()
+  const chainId = useChainId()
+  const chain = useCurrentChain()
+  const chainName = chain?.chainName || ''
+
+  return useMemo(
+    () => () => ({
+      safeAddress,
+      chainId: parseInt(chainId, 10),
+      owners: safe.owners.map((owner) => owner.value),
+      threshold: safe.threshold,
+      isReadOnly: !granted,
+      network: getLegacyChainName(chainName || '', chainId).toUpperCase(),
+    }),
+    [chainId, chainName, granted, safeAddress, safe.owners, safe.threshold],
+  )
+}
+
+export default useGetSafeInfo
diff --git a/src/services/safe-apps/AppCommunicator.ts b/src/services/safe-apps/AppCommunicator.ts
index 1143878a3e..b961e105ec 100644
--- a/src/services/safe-apps/AppCommunicator.ts
+++ b/src/services/safe-apps/AppCommunicator.ts
@@ -79,6 +79,7 @@ class AppCommunicator {
 
   clear = (): void => {
     window.removeEventListener('message', this.handleIncomingMessage)
+    this.handlers.clear()
   }
 }
 

From 4991d1dabe06f78c82355a5d631171013138228f Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Wed, 7 Dec 2022 15:30:08 +0100
Subject: [PATCH 9/9] Fix: reload widget on safe change + catch errors (#1319)

---
 .../GovernanceSection/GovernanceSection.tsx   | 103 ++++++++++--------
 .../GovernanceSection/styles.module.css       |  14 +--
 .../safe-apps/AppFrame/SafeAppIframe.tsx      |   4 +-
 3 files changed, 62 insertions(+), 59 deletions(-)

diff --git a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
index 24485f2728..2ae5fe00a7 100644
--- a/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
+++ b/src/components/dashboard/GovernanceSection/GovernanceSection.tsx
@@ -1,3 +1,4 @@
+import { useRef } from 'react'
 import { Typography, Card, Box, Alert, IconButton, Link, SvgIcon } from '@mui/material'
 import { WidgetBody } from '@/components/dashboard/styled'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
@@ -5,7 +6,6 @@ import Accordion from '@mui/material/Accordion'
 import AccordionSummary from '@mui/material/AccordionSummary'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import css from './styles.module.css'
-import SafeAppsErrorBoundary from '@/components/safe-apps/SafeAppsErrorBoundary'
 import { useBrowserPermissions } from '@/hooks/safe-apps/permissions'
 import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 import { SafeAppsTag, SAFE_APPS_SUPPORT_CHAT_URL } from '@/config/constants'
@@ -18,35 +18,15 @@ import SafeAppIframe from '@/components/safe-apps/AppFrame/SafeAppIframe'
 import type { UseAppCommunicatorHandlers } from '@/components/safe-apps/AppFrame/useAppCommunicator'
 import useAppCommunicator from '@/components/safe-apps/AppFrame/useAppCommunicator'
 import { useCurrentChain } from '@/hooks/useChains'
-import useAppIsLoading from '@/components/safe-apps/AppFrame/useAppIsLoading'
 import useGetSafeInfo from '@/components/safe-apps/AppFrame/useGetSafeInfo'
+import type { SafeAppData } from '@gnosis.pm/safe-react-gateway-sdk'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import { fetchSafeAppFromManifest } from '@/services/safe-apps/manifest'
+import useAsync from '@/hooks/useAsync'
 
-// Prevent `GovernanceSection` hooks from needlessly being called
-const GovernanceSectionWrapper = () => {
-  const chainId = useChainId()
-  if (!getSafeTokenAddress(chainId)) {
-    return null
-  }
-
-  return <GovernanceSection />
-}
-
-const GovernanceSection = () => {
-  const isDarkMode = useDarkMode()
-  const theme = isDarkMode ? 'dark' : 'light'
-  const { getAllowedFeaturesList } = useBrowserPermissions()
-  const chain = useCurrentChain()
-  const [matchingApps, errorFetchingClaimingSafeApp] = useRemoteSafeApps(SafeAppsTag.SAFE_CLAIMING_APP)
-  const claimingApp = matchingApps?.[0]
-  const { iframeRef, setAppIsLoading } = useAppIsLoading()
-  const fetchingSafeClaimingApp = !claimingApp && !errorFetchingClaimingSafeApp
-
-  // Initialize the app communicator
-  useAppCommunicator(iframeRef, claimingApp, chain, {
-    onGetSafeInfo: useGetSafeInfo(),
-  } as Partial<UseAppCommunicatorHandlers> as UseAppCommunicatorHandlers)
-
-  const WidgetLoadError = () => (
+// A fallback component when the Safe App fails to load
+const WidgetLoadErrorFallback = () => (
+  <Box display="flex" flexDirection="column" alignItems="center" height="100%">
     <Card className={css.loadErrorCard}>
       <Box className={css.loadErrorMsgContainer}>
         <Typography variant="h4" color="text.primary" fontWeight="bold">
@@ -62,14 +42,46 @@ const GovernanceSection = () => {
         </Typography>
       </Box>
     </Card>
-  )
+  </Box>
+)
+
+// A mini Safe App frame with a minimal set of communication handlers
+const MiniAppFrame = ({ app, title }: { app: SafeAppData; title: string }) => {
+  const chain = useCurrentChain()
+  const isDarkMode = useDarkMode()
+  const theme = isDarkMode ? 'dark' : 'light'
+  const { getAllowedFeaturesList } = useBrowserPermissions()
+  const iframeRef = useRef<HTMLIFrameElement>(null)
 
-  const WidgetLoadErrorFallback = () => (
-    <Box className={css.loadErrorWrapper} display="flex" gap={3} width={1} sx={{ backgroundColor: 'background.main' }}>
-      <WidgetLoadError />
-      <WidgetLoadError />
-    </Box>
+  const [, error] = useAsync(() => {
+    if (!chain?.chainId) return
+    return fetchSafeAppFromManifest(app.url, chain.chainId)
+  }, [app.url, chain?.chainId])
+
+  // Initialize the app communicator
+  useAppCommunicator(iframeRef, app, chain, {
+    onGetSafeInfo: useGetSafeInfo(),
+  } as Partial<UseAppCommunicatorHandlers> as UseAppCommunicatorHandlers)
+
+  return error ? (
+    <WidgetLoadErrorFallback />
+  ) : (
+    <SafeAppIframe
+      key={theme}
+      appUrl={`${app.url}#widget+${theme}`}
+      allowedFeaturesList={getAllowedFeaturesList(app.url)}
+      title={title}
+      iframeRef={iframeRef}
+    />
   )
+}
+
+// Entire section for the governance widgets
+const GovernanceSection = () => {
+  const [matchingApps, errorFetchingClaimingSafeApp] = useRemoteSafeApps(SafeAppsTag.SAFE_CLAIMING_APP)
+  const claimingApp = matchingApps?.[0]
+  const fetchingSafeClaimingApp = !claimingApp && !errorFetchingClaimingSafeApp
+  const { safeLoading } = useSafeInfo()
 
   return (
     <Accordion className={css.accordion} defaultExpanded>
@@ -94,17 +106,8 @@ const GovernanceSection = () => {
         {claimingApp || fetchingSafeClaimingApp ? (
           <WidgetBody>
             <Card className={css.widgetWrapper}>
-              {claimingApp ? (
-                <SafeAppsErrorBoundary render={() => <WidgetLoadErrorFallback />}>
-                  <SafeAppIframe
-                    key={theme}
-                    appUrl={`${claimingApp.url}#widget+${theme}`}
-                    allowedFeaturesList={getAllowedFeaturesList(claimingApp.url)}
-                    title="Sage Governance"
-                    iframeRef={iframeRef}
-                    onLoad={() => setAppIsLoading(false)}
-                  />
-                </SafeAppsErrorBoundary>
+              {claimingApp && !safeLoading ? (
+                <MiniAppFrame app={claimingApp} title="Safe Governance" />
               ) : (
                 <Box
                   className={css.widgetWrapper}
@@ -130,4 +133,14 @@ const GovernanceSection = () => {
   )
 }
 
+// Prevent `GovernanceSection` hooks from needlessly being called
+const GovernanceSectionWrapper = () => {
+  const chainId = useChainId()
+  if (!getSafeTokenAddress(chainId)) {
+    return null
+  }
+
+  return <GovernanceSection />
+}
+
 export default GovernanceSectionWrapper
diff --git a/src/components/dashboard/GovernanceSection/styles.module.css b/src/components/dashboard/GovernanceSection/styles.module.css
index df6c7c8820..5ea0cd9502 100644
--- a/src/components/dashboard/GovernanceSection/styles.module.css
+++ b/src/components/dashboard/GovernanceSection/styles.module.css
@@ -23,26 +23,16 @@
   pointer-events: auto;
 }
 
-.loadErrorWrapper {
-  display: flex;
-}
-
-.widgetWrapper,
-.loadErrorWrapper {
+.widgetWrapper {
   border: none;
   height: 300px;
 }
 
 /* iframe sm breakpoint + paddings */
 @media (max-width: 662px) {
-  .widgetWrapper,
-  .loadErrorWrapper {
+  .widgetWrapper {
     height: 624px;
   }
-
-  .loadErrorWrapper {
-    flex-direction: column;
-  }
 }
 
 .loadErrorCard {
diff --git a/src/components/safe-apps/AppFrame/SafeAppIframe.tsx b/src/components/safe-apps/AppFrame/SafeAppIframe.tsx
index 6f107436a4..b6eaf46017 100644
--- a/src/components/safe-apps/AppFrame/SafeAppIframe.tsx
+++ b/src/components/safe-apps/AppFrame/SafeAppIframe.tsx
@@ -1,11 +1,11 @@
-import type { ReactElement } from 'react'
+import type { MutableRefObject, ReactElement } from 'react'
 import css from './styles.module.css'
 
 type SafeAppIFrameProps = {
   appUrl: string
   allowedFeaturesList: string
   title?: string
-  iframeRef?: React.MutableRefObject<HTMLIFrameElement | null>
+  iframeRef?: MutableRefObject<HTMLIFrameElement | null>
   onLoad?: () => void
 }