From 1eba3fed81ef1feeedcfee963e4c57a82007646a Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 24 Jul 2022 15:52:18 +0300
Subject: [PATCH] fix: change build browserslist to fix BigInt native
 compatibiltiy

---
 package.json                                  |  8 +++--
 .../ErrorBoundary/ErrorBoundary.tsx           | 35 +++++++++++++++++++
 src/utils/Wrapper.tsx                         | 17 +++++----
 3 files changed, 50 insertions(+), 10 deletions(-)
 create mode 100644 src/Components/ErrorBoundary/ErrorBoundary.tsx

diff --git a/package.json b/package.json
index 7fae6f1..7653fcc 100644
--- a/package.json
+++ b/package.json
@@ -135,9 +135,11 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+      "chrome >= 67",
+      "edge >= 79",
+      "firefox >= 68",
+      "opera >= 54",
+      "safari >= 14"
     ],
     "development": [
       "last 1 chrome version",
diff --git a/src/Components/ErrorBoundary/ErrorBoundary.tsx b/src/Components/ErrorBoundary/ErrorBoundary.tsx
new file mode 100644
index 0000000..8c41157
--- /dev/null
+++ b/src/Components/ErrorBoundary/ErrorBoundary.tsx
@@ -0,0 +1,35 @@
+import React, { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+    place?: string
+    children?: ReactNode;
+}
+
+interface State {
+    hasError: boolean;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+    public state: State = {
+        hasError: false
+    };
+
+    public static getDerivedStateFromError(_: Error): State {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+
+    public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        console.error(`Uncaught error at ${this.props.place}`, error, errorInfo);
+    }
+
+    public render() {
+        if (this.state.hasError) {
+            return <h1>Sorry.. there was an error</h1>;
+        }
+
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;
\ No newline at end of file
diff --git a/src/utils/Wrapper.tsx b/src/utils/Wrapper.tsx
index 1437d3c..37c4dbf 100644
--- a/src/utils/Wrapper.tsx
+++ b/src/utils/Wrapper.tsx
@@ -12,6 +12,7 @@ import ReactTooltip from 'react-tooltip';
 import 'react-multi-carousel/lib/styles.css';
 import 'react-loading-skeleton/dist/skeleton.css'
 import THEME from './theme';
+import ErrorBoundary from 'src/Components/ErrorBoundary/ErrorBoundary';
 THEME.injectStyles();
 
 let basename = '/';
@@ -42,13 +43,15 @@ export default function Wrapper(props: any) {
 
     return (
         <>
-            <ApolloProvider client={apolloClient}>
-                <Provider store={store}>
-                    <BrowserRouter basename={basename}>
-                        {props.children}
-                    </BrowserRouter>
-                </Provider>
-            </ApolloProvider>
+            <ErrorBoundary place='app'>
+                <ApolloProvider client={apolloClient}>
+                    <Provider store={store}>
+                        <BrowserRouter basename={basename}>
+                            {props.children}
+                        </BrowserRouter>
+                    </Provider>
+                </ApolloProvider>
+            </ErrorBoundary>
             <ReactTooltip
                 effect='solid'
                 delayShow={1000}