add app alert banner

This commit is contained in:
fmtabbara
2021-09-02 12:29:47 +01:00
parent a5d3ba3900
commit c42f3c6844
+63 -40
View File
@@ -1,49 +1,72 @@
import React, { useState } from 'react'; import React, { useState } from 'react'
import Head from 'next/head'; import { Alert, AlertTitle } from '@material-ui/lab'
import { ThemeProvider } from '@material-ui/core/styles'; import Head from 'next/head'
import CssBaseline from '@material-ui/core/CssBaseline'; import { ThemeProvider } from '@material-ui/core/styles'
import { theme } from '../lib/theme'; import CssBaseline from '@material-ui/core/CssBaseline'
import type { AppProps } from 'next/app'; import { theme } from '../lib/theme'
import { ValidatorClientContext } from "../contexts/ValidatorClient"; import type { AppProps } from 'next/app'
import { ValidatorClientContext } from '../contexts/ValidatorClient'
import { Close } from '@material-ui/icons'
import { IconButton } from '@material-ui/core'
// TODO: should it perhaps be pulled from some config or also user provided? // TODO: should it perhaps be pulled from some config or also user provided?
export const BONDING_CONTRACT_ADDRESS: string = "punk10pyejy66429refv3g35g2t7am0was7yalwrzen"; export const BONDING_CONTRACT_ADDRESS: string =
'punk10pyejy66429refv3g35g2t7am0was7yalwrzen'
export const VALIDATOR_URLS: string[] = [ export const VALIDATOR_URLS: string[] = [
"https://testnet-milhon-validator1.nymtech.net", 'https://testnet-milhon-validator1.nymtech.net',
"https://testnet-milhon-validator2.nymtech.net", 'https://testnet-milhon-validator2.nymtech.net',
]; ]
export const ADDRESS_LENGTH: number = 43; export const ADDRESS_LENGTH: number = 43
export const ADMIN_ADDRESS: string = "punk1h3w4nj7kny5dfyjw2le4vm74z03v9vd4dstpu0" export const ADMIN_ADDRESS: string =
export const DENOM: string = "punk"; // used everywhere else 'punk1h3w4nj7kny5dfyjw2le4vm74z03v9vd4dstpu0'
export const KEY_LENGTH: number = 32; export const DENOM: string = 'punk' // used everywhere else
export const UDENOM: string = "upunk"; // required for client and coin construction export const KEY_LENGTH: number = 32
export const UDENOM: string = 'upunk' // required for client and coin construction
export default function Application(props: AppProps) { export default function Application(props: AppProps) {
const { Component, pageProps } = props; const { Component, pageProps } = props
const [client, setClient] = useState(null) const [client, setClient] = useState(null)
const [showAlert, setShowAlert] = useState(true)
React.useEffect(() => { React.useEffect(() => {
const jssStyles = document.querySelector('#jss-server-side'); const jssStyles = document.querySelector('#jss-server-side')
if (jssStyles) { if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles); jssStyles.parentElement.removeChild(jssStyles)
} }
}, []); }, [])
return ( return (
<React.Fragment> <React.Fragment>
<Head> <Head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" /> <meta
<title>Nym</title> name="viewport"
</Head> content="minimum-scale=1, initial-scale=1, width=device-width"
<ValidatorClientContext.Provider value={{ client, setClient }}> />
<ThemeProvider theme={theme}> <title>Nym</title>
<CssBaseline /> </Head>
<Component {...pageProps} /> <ValidatorClientContext.Provider value={{ client, setClient }}>
</ThemeProvider> <ThemeProvider theme={theme}>
</ValidatorClientContext.Provider> <CssBaseline />
</React.Fragment> {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>
</React.Fragment>
)
} }