From 77bc6c662a10dfe4f048c4a57229f45a1084769c Mon Sep 17 00:00:00 2001 From: Gerardo Nardelli Date: Mon, 20 Jul 2020 12:29:16 -0300 Subject: [PATCH] Add info alert in ALM (#402) --- alm/src/components/MainPage.tsx | 53 +++++++++++++++++++++++- alm/src/components/commons/CloseIcon.tsx | 21 ++++++++++ alm/src/components/commons/InfoAlert.tsx | 31 ++++++++++++++ alm/src/components/commons/InfoIcon.tsx | 16 +++++++ 4 files changed, 120 insertions(+), 1 deletion(-) create mode 100644 alm/src/components/commons/CloseIcon.tsx create mode 100644 alm/src/components/commons/InfoAlert.tsx create mode 100644 alm/src/components/commons/InfoIcon.tsx diff --git a/alm/src/components/MainPage.tsx b/alm/src/components/MainPage.tsx index f8eaf813..88ced815 100644 --- a/alm/src/components/MainPage.tsx +++ b/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>(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 = () => {
+ {showInfoAlert && ( + +

+ 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. +

+ + For more information refer to  + + the ALM documentation + + + + )} } /> ( + +) diff --git a/alm/src/components/commons/InfoAlert.tsx b/alm/src/components/commons/InfoAlert.tsx new file mode 100644 index 00000000..f5dbbfb7 --- /dev/null +++ b/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[] }) => ( +
+ + + {children} + + + + +
+) diff --git a/alm/src/components/commons/InfoIcon.tsx b/alm/src/components/commons/InfoIcon.tsx new file mode 100644 index 00000000..f8d84f92 --- /dev/null +++ b/alm/src/components/commons/InfoIcon.tsx @@ -0,0 +1,16 @@ +import React from 'react' + +export const InfoIcon = () => ( + +)