From 4771ab60b26e241666a8e41b1cf5301591833a72 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Thu, 7 Apr 2022 10:52:21 +0100 Subject: [PATCH] style and remove hotjar --- packages/files-ui/.env.example | 1 - packages/storage-ui/.env.example | 1 - packages/storage-ui/package.json | 3 +- packages/storage-ui/src/App.tsx | 41 +------ .../src/Components/Modules/ErrorModal.tsx | 107 ++++++++++++++++++ yarn.lock | 5 - 6 files changed, 113 insertions(+), 45 deletions(-) create mode 100644 packages/storage-ui/src/Components/Modules/ErrorModal.tsx diff --git a/packages/files-ui/.env.example b/packages/files-ui/.env.example index 45101c9bd5..0a83db94cb 100644 --- a/packages/files-ui/.env.example +++ b/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 diff --git a/packages/storage-ui/.env.example b/packages/storage-ui/.env.example index 5f61e2ed06..f8f5315c29 100644 --- a/packages/storage-ui/.env.example +++ b/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 diff --git a/packages/storage-ui/package.json b/packages/storage-ui/package.json index 0ac86e9ea2..00cd17b886 100644 --- a/packages/storage-ui/package.json +++ b/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" ] } -} \ No newline at end of file +} diff --git a/packages/storage-ui/src/App.tsx b/packages/storage-ui/src/App.tsx index 2755ae95f8..fabe5f80c1 100644 --- a/packages/storage-ui/src/App.tsx +++ b/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,41 +61,10 @@ 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 }) => ( - - - 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 `"`Provide Additional Details`"` button - - {error?.message.toString()} - {componentStack} - {eventId} - - - - ), []) - return ( { themes={{ light: lightTheme, dark: darkTheme }} > window.location.reload()} > diff --git a/packages/storage-ui/src/Components/Modules/ErrorModal.tsx b/packages/storage-ui/src/Components/Modules/ErrorModal.tsx new file mode 100644 index 0000000000..810cc2eb3a --- /dev/null +++ b/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 + + An unexpected error occured + + + If you would like to provide additional info to help us debug and resolve the issue, reach out on + Discord + + +
+ + Error: + + + 
{error?.message.toString()}
+ + + Stack: + + + {componentStack} + +
+ +
+ +} + +export default ErrorModal \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 4d279ff2d4..b8510f871d 100644 --- a/yarn.lock +++ b/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"