Style ErrorBoundaries and remove hotjar

packages/files-ui/.env.example

@@ -6,7 +6,6 @@ REACT_APP_API_URL=https://stage-api.chainsafe.io/api/v1
 REACT_APP_STRIPE_PK=
 REACT_APP_SENTRY_DSN_URL=
 REACT_APP_SENTRY_ENV=development
-REACT_APP_HOTJAR_ID=
 # Get your ID on Blocknative: https://explorer.blocknative.com/account
 REACT_APP_BLOCKNATIVE_ID=
 REACT_APP_GOOGLE_CLIENT_ID=939164021653-lb5eiquuatf877em98bpi8v360p5vcs4.apps.googleusercontent.com

packages/storage-ui/.env.example

@@ -7,7 +7,6 @@ REACT_APP_IPFS_GATEWAY=https://ipfs.chainsafe.io/ipfs
 REACT_APP_STRIPE_PK=
 REACT_APP_SENTRY_DSN_URL=
 REACT_APP_SENTRY_ENV=development
-REACT_APP_HOTJAR_ID=
 # Get your ID on Blocknative: https://explorer.blocknative.com/account
 REACT_APP_BLOCKNATIVE_ID=
 REACT_APP_MAINTENANCE_MODE=false

packages/storage-ui/package.json

@@ -38,7 +38,6 @@
     "react-pdf": "5.3.0",
     "react-scripts": "3.4.4",
     "react-swipeable": "^6.0.1",
-    "react-use-hotjar": "1.0.8",
     "react-zoom-pan-pinch": "^1.6.1",
     "remark-gfm": "^1.0.0",
     "typescript": "~4.0.5",
@@ -93,4 +92,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

packages/storage-ui/src/App.tsx

@@ -1,12 +1,11 @@
-import React, { useCallback, useEffect } from "react"
-import { init as initSentry, ErrorBoundary, showReportDialog } from "@sentry/react"
+import React from "react"
+import { init as initSentry, ErrorBoundary } from "@sentry/react"
 import { Web3Provider } from "@chainsafe/web3-context"
 import { ThemeSwitcher } from "@chainsafe/common-theme"
 import "@chainsafe/common-theme/dist/font-faces.css"
-import { Button, CssBaseline, Modal, Router, ToastProvider, Typography } from "@chainsafe/common-components"
+import { CssBaseline, Router, ToastProvider } from "@chainsafe/common-components"
 import StorageRoutes from "./Components/StorageRoutes"
 import AppWrapper from "./Components/Layouts/AppWrapper"
-import { useHotjar } from "react-use-hotjar"
 import { LanguageProvider } from "./Contexts/LanguageContext"
 import { lightTheme } from "./Themes/LightTheme"
 import { darkTheme } from "./Themes/DarkTheme"
@@ -18,6 +17,7 @@ import { BillingProvider } from "./Contexts/BillingContext"
 import { NotificationsProvider } from "./Contexts/NotificationsContext"
 import { PosthogProvider } from "./Contexts/PosthogContext"
 import { HelmetProvider } from "react-helmet-async"
+import ErrorModal from "./Components/Modules/ErrorModal"
 
 if (
   process.env.NODE_ENV === "production" &&
@@ -61,49 +61,18 @@ const onboardConfig = {
 }
 
 const App = () => {
-  const { initHotjar } = useHotjar()
   const { canUseLocalStorage } = useLocalStorage()
-  const hotjarId = process.env.REACT_APP_HOTJAR_ID
   const apiUrl = process.env.REACT_APP_API_URL || "https://stage-api.chainsafe.io/api/v1"
   // This will default to testnet unless mainnet is specifically set in the ENV
 
-  useEffect(() => {
-    if (hotjarId && process.env.NODE_ENV === "production") {
-      initHotjar(hotjarId, "6", () => console.log("Hotjar initialized"))
-    }
-  }, [hotjarId, initHotjar])
-
-  const fallBack = useCallback(({ error, componentStack, eventId, resetError }) => (
-    <Modal
-      active
-      closePosition="none"
-      onClose={resetError}
-    >
-      <Typography>
-        An error occurred and has been logged. If you would like to
-        provide additional info to help us debug and resolve the issue,
-        click the `&quot;`Provide Additional Details`&quot;` button
-      </Typography>
-      <Typography>{error?.message.toString()}</Typography>
-      <Typography>{componentStack}</Typography>
-      <Typography>{eventId}</Typography>
-      <Button
-        onClick={() => showReportDialog({ eventId: eventId || "" })}
-      >
-      Provide Additional Details
-      </Button>
-      <Button onClick={resetError}>Reset error</Button>
-    </Modal>
-  ), [])
-
   return (
     <HelmetProvider>
       <ThemeSwitcher
         storageKey="css.themeKey"
         themes={{ light: lightTheme, dark: darkTheme }}
       >
         <ErrorBoundary
-          fallback={fallBack}
+          fallback={ErrorModal}
           onReset={() => window.location.reload()}
         >
           <CssBaseline />

packages/storage-ui/src/Components/Modules/ErrorModal.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable max-len */
+import React from "react"
+import { Button, Modal, Typography } from "@chainsafe/common-components"
+import { ROUTE_LINKS } from "../StorageRoutes"
+
+interface Props {
+  error: Error
+  componentStack: string | null
+  eventId: string | null
+  resetError: () => void
+}
+
+const ErrorModal = ({ error, componentStack, resetError }: Props) => {
+
+  const generalStyle = {
+    margin: "1rem",
+    backgrounColor: "var(--gray1)",
+    color: "var(--gray9)"
+  }
+
+  return <Modal
+    active
+    closePosition="none"
+    onClose={resetError}
+  >
+    <Typography
+      variant="h2"
+      style={{
+        marginTop: "3rem",
+        display: "inline-block",
+        ...generalStyle
+      }}
+    >
+        An unexpected error occured
+    </Typography>
+    <Typography
+      component="p"
+      style={{ ...generalStyle }}
+    >
+        If you would like to provide additional info to help us debug and resolve the issue, reach out on <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href={ROUTE_LINKS.DiscordInvite}
+      >
+        Discord
+      </a>
+    </Typography>
+    <br/>
+    <Typography
+      variant="h4"
+      style={{
+        ...generalStyle,
+        display: "inline-block"
+      }}
+    >
+        Error:
+    </Typography>
+    <Typography
+      style={{
+        ...generalStyle,
+        backgroundColor: "ghostwhite",
+        padding: "1rem",
+        marginTop: 0,
+        color: "black"
+      }}
+      component="p"
+    >
+      <pre>{error?.message.toString()}</pre>
+    </Typography>
+    <Typography
+      variant="h4"
+      style={{
+        ...generalStyle,
+        display: "inline-block"
+      }}
+    >
+        Stack:
+    </Typography>
+    <Typography
+      component="p"
+      style={{
+        ...generalStyle,
+        height: "5rem",
+        overflow: "auto",
+        padding: "1rem",
+        border: "2px solid ghostwhite",
+        marginTop: 0
+      }}
+    >
+      {componentStack}
+    </Typography>
+    <div
+      style={{
+        ...generalStyle,
+        display: "flex",
+        justifyContent: "center"
+
+      }}
+    >
+      <Button onClick={resetError}>
+        Close
+      </Button>
+    </div>
+  </Modal>
+}
+
+export default ErrorModal

yarn.lock

@@ -21389,11 +21389,6 @@ react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-use-hotjar@1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/react-use-hotjar/-/react-use-hotjar-1.0.8.tgz#00df9f6b1e6e4f0f75a44600a4dacefb65c5280e"
-  integrity sha512-paWu8a6n3gYzD6dMS26KtKxwmzegFJh3nrIhcICWfAtxrjlAYH8hTflr5JJN868ubwXnewiQ7lvJBb13EAooeQ==
-
 react-zoom-pan-pinch@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-1.6.1.tgz#da16267c258ab37e8ebcdc7c252794a9633e91ec"