check status api

dapp/src/App.tsx

@@ -49,7 +49,10 @@ async function enableEthereum(setAccount: SetAccount): Promise<string | undefine
 
 function App() {
   const classes: any = useStyles()
-  const [account, setAccount] = useState('');
+  const [account, setAccount] = useState('')
+  const [isStatus, setIsStatus] = useState(() => {
+    return !!window && !! window.ethereum && !! window.ethereum.status
+  })
 
   useEffect(() => {
     grabAddress(setAccount)
@@ -58,7 +61,10 @@ function App() {
   return (
     <ThemeProvider theme={theme}>
       <div className={classes.root}>
-        <Header account={account} enableEthereum={() => enableEthereum(setAccount)} />
+        <Header
+          account={account}
+          isStatus={isStatus}
+          enableEthereum={() => enableEthereum(setAccount)} />
       </div>
     </ThemeProvider>
   );

dapp/src/components/Header.tsx

@@ -12,13 +12,12 @@ const formatAccount = (account: string): string => {
 
 type HeaderProps = {
   account: string,
+  isStatus: boolean
   enableEthereum: EnableEthereum
 }
 
-function Header({account, enableEthereum}: HeaderProps) {
+function Header({account, isStatus, enableEthereum}: HeaderProps) {
   const classes: any = useStyles()
-  console.log('classnames', classNames(classes.connect, {[classes.connected]: !!account}), classes.connect, classes.connected)
-  console.log({account, classes}, !!account)
   return (
     <div className={classes.root}>
       <Typography component={'span'} className={classNames(classes.connect, {[classes.connected]: !!account})} onClick={!account ? enableEthereum : console.log}>
@@ -27,6 +26,7 @@ function Header({account, enableEthereum}: HeaderProps) {
           <div>Connected</div>
         </div>}
         {!account && <span>Connect</span>}
+        {isStatus && <span>Status Api Available</span>}
       </Typography>
     </div>
   )

dapp/src/styles/header.js

@@ -19,7 +19,7 @@ const useStyles = makeStyles(theme => ({
     marginLeft: 'auto',
     marginRight: '3rem',
     cursor: 'pointer',
-    gridColumnEnd: '49'
+    gridColumnEnd: '50'
   },
   connected: {
     color: '#44D058',