Add info alert in ALM (#402)

alm/src/components/MainPage.tsx

@@ -1,10 +1,13 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useCallback } from 'react'
 import styled from 'styled-components'
 import { Route, useHistory } from 'react-router-dom'
 import { Form } from './Form'
 import { StatusContainer } from './StatusContainer'
 import { useStateProvider } from '../state/StateProvider'
 import { TransactionReceipt } from 'web3-eth'
+import { InfoAlert } from './commons/InfoAlert'
+import { ExplorerTxLink } from './commons/ExplorerTxLink'
+import { FOREIGN_NETWORK_NAME, HOME_NETWORK_NAME } from '../config/constants'
 
 const StyledMainPage = styled.div`
   text-align: center;
@@ -32,6 +35,14 @@ const HeaderContainer = styled.header`
   }
 `
 
+const AlertP = styled.p`
+  align-items: start;
+  margin-bottom: 0;
+  @media (max-width: 600px) {
+    flex-direction: column;
+  }
+`
+
 export interface FormSubmitParams {
   chainId: number
   txHash: string
@@ -43,6 +54,27 @@ export const MainPage = () => {
   const { home, foreign } = useStateProvider()
   const [networkName, setNetworkName] = useState('')
   const [receipt, setReceipt] = useState<Maybe<TransactionReceipt>>(null)
+  const [showInfoAlert, setShowInfoAlert] = useState(false)
+
+  const loadFromStorage = useCallback(() => {
+    const hideAlert = window.localStorage.getItem('hideInfoAlert')
+    setShowInfoAlert(!hideAlert)
+  }, [])
+
+  useEffect(
+    () => {
+      loadFromStorage()
+    },
+    [loadFromStorage]
+  )
+
+  const onAlertClose = useCallback(
+    () => {
+      window.localStorage.setItem('hideInfoAlert', 'true')
+      loadFromStorage()
+    },
+    [loadFromStorage]
+  )
 
   const setNetworkData = (chainId: number) => {
     const network = chainId === home.chainId ? home.name : foreign.name
@@ -80,6 +112,25 @@ export const MainPage = () => {
         </HeaderContainer>
       </Header>
       <div className="container">
+        {showInfoAlert && (
+          <InfoAlert onClick={onAlertClose}>
+            <p className="is-left text-left">
+              The Arbitrary Message Bridge Live Monitoring application provides real-time status updates for messages
+              bridged between {HOME_NETWORK_NAME} and {FOREIGN_NETWORK_NAME}. You can check current tx status, view
+              validator info, and troubleshoot potential issues with bridge transfers.
+            </p>
+            <AlertP className="is-left text-left">
+              For more information refer to&nbsp;
+              <ExplorerTxLink
+                href="https://docs.tokenbridge.net/about-tokenbridge/components/amb-live-monitoring-application"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                the ALM documentation
+              </ExplorerTxLink>
+            </AlertP>
+          </InfoAlert>
+        )}
         <Route exact path={['/']} children={<Form onSubmit={onFormSubmit} />} />
         <Route
           path={['/:chainId/:txHash/:messageIdParam', '/:chainId/:txHash']}

alm/src/components/commons/CloseIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export const CloseIcon = () => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    data-prefix="fa"
+    data-icon="times"
+    className="svg-inline--fa fa-times fa-w-11 fa-lg "
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 352 512"
+    fill="#1890ff"
+    height="1em"
+  >
+    <path
+      fill="#1890ff"
+      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+    />
+  </svg>
+)

alm/src/components/commons/InfoAlert.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import styled from 'styled-components'
+import { InfoIcon } from './InfoIcon'
+import { CloseIcon } from './CloseIcon'
+
+const StyledInfoAlert = styled.div`
+  border: 1px solid var(--button-color);
+  border-radius: 4px;
+  margin-bottom: 20px;
+  padding-top: 10px;
+`
+
+const CloseIconContainer = styled.div`
+  cursor: pointer;
+`
+
+const TextContainer = styled.div`
+  flex-direction: column;
+`
+
+export const InfoAlert = ({ onClick, children }: { onClick: () => void; children: React.ReactChild[] }) => (
+  <div className="row is-center">
+    <StyledInfoAlert className="col-10 is-vertical-align row">
+      <InfoIcon />
+      <TextContainer className="col-10">{children}</TextContainer>
+      <CloseIconContainer className="col-1 is-vertical-align is-center" onClick={onClick}>
+        <CloseIcon />
+      </CloseIconContainer>
+    </StyledInfoAlert>
+  </div>
+)

alm/src/components/commons/InfoIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export const InfoIcon = () => (
+  <svg
+    className="col-1 is-left"
+    viewBox="64 64 896 896"
+    focusable="false"
+    data-icon="info-circle"
+    width="1em"
+    height="1em"
+    fill="#1890ff"
+    aria-hidden="true"
+  >
+    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" />
+  </svg>
+)