From 9a3d824a4a451d4906219607f4a7bcd27dbbeba4 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Mon, 6 Sep 2021 20:39:24 +0100
Subject: [PATCH] remove alert

---
 wallet-web/components/AppAlert.tsx | 30 ++++++++++++++++++++++++++++++
 wallet-web/pages/_app.tsx          | 20 +-------------------
 2 files changed, 31 insertions(+), 19 deletions(-)
 create mode 100644 wallet-web/components/AppAlert.tsx

diff --git a/wallet-web/components/AppAlert.tsx b/wallet-web/components/AppAlert.tsx
new file mode 100644
index 0000000000..6e7bff3583
--- /dev/null
+++ b/wallet-web/components/AppAlert.tsx
@@ -0,0 +1,30 @@
+import { IconButton } from '@material-ui/core'
+import { Close } from '@material-ui/icons'
+import { Alert, AlertProps, AlertTitle } from '@material-ui/lab'
+import React, { useState } from 'react'
+
+export const AppAlert = ({
+  message,
+  severity = 'info',
+  title,
+}: {
+  message: string
+  severity?: AlertProps['severity']
+  title?: string
+}) => {
+  const [showAlert, setShowAlert] = useState(true)
+
+  return showAlert ? (
+    <Alert
+      severity={severity}
+      action={
+        <IconButton size="small" onClick={() => setShowAlert(false)}>
+          <Close />
+        </IconButton>
+      }
+    >
+      <AlertTitle>{title}</AlertTitle>
+      {message}
+    </Alert>
+  ) : null
+}
diff --git a/wallet-web/pages/_app.tsx b/wallet-web/pages/_app.tsx
index f4fd63eab4..0cce398e52 100644
--- a/wallet-web/pages/_app.tsx
+++ b/wallet-web/pages/_app.tsx
@@ -1,14 +1,11 @@
 import React, { useState } from 'react'
-import { Alert, AlertTitle } from '@material-ui/lab'
 import Head from 'next/head'
 import { ThemeProvider } from '@material-ui/core/styles'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { theme } from '../lib/theme'
 import type { AppProps } from 'next/app'
 import { ValidatorClientContext } from '../contexts/ValidatorClient'
-import { Close } from '@material-ui/icons'
-import { IconButton } from '@material-ui/core'
-
+import { AppAlert } from '../components/AppAlert'
 // TODO: should it perhaps be pulled from some config or also user provided?
 export const BONDING_CONTRACT_ADDRESS: string =
   'punk10pyejy66429refv3g35g2t7am0was7yalwrzen'
@@ -49,21 +46,6 @@ export default function Application(props: AppProps) {
       <ValidatorClientContext.Provider value={{ client, setClient }}>
         <ThemeProvider theme={theme}>
           <CssBaseline />
-          {showAlert && (
-            <Alert
-              severity="info"
-              action={
-                <IconButton size="small" onClick={() => setShowAlert(false)}>
-                  <Close />
-                </IconButton>
-              }
-            >
-              <AlertTitle>Network maintenance</AlertTitle>
-              Testnet Milhon is currently down for maintenance. You may find
-              that certain features in the wallet do not work during this
-              period.
-            </Alert>
-          )}
           <Component {...pageProps} />
         </ThemeProvider>
       </ValidatorClientContext.Provider>