ALM: reorder warnings

alm/src/components/ExecutionConfirmation.tsx

@@ -11,6 +11,8 @@ import { Thead, AgeTd, StatusTd } from './commons/Table'
 import { ManualExecutionButton } from './ManualExecutionButton'
 import { useStateProvider } from '../state/StateProvider'
 import { matchesRule, MessageObject, WarnRule } from '../utils/web3'
+import { WarningAlert } from './commons/WarningAlert'
+import { ErrorAlert } from './commons/ErrorAlert'
 
 const StyledExecutionConfirmation = styled.div`
   margin-top: 30px;
@@ -35,8 +37,10 @@ export const ExecutionConfirmation = ({
   executionEventsFetched,
   setPendingExecution
 }: ExecutionConfirmationParams) => {
-  const { foreign, setWarning } = useStateProvider()
+  const { foreign } = useStateProvider()
   const [safeExecutionAvailable, setSafeExecutionAvailable] = useState(false)
+  const [error, setError] = useState('')
+  const [warning, setWarning] = useState('')
   const availableManualExecution =
     !isHome &&
     (executionData.status === VALIDATOR_CONFIRMATION_STATUS.WAITING ||
@@ -106,6 +110,8 @@ export const ExecutionConfirmation = ({
 
   return (
     <StyledExecutionConfirmation>
+      {error && <ErrorAlert onClick={() => setError('')} error={error} />}
+      {warning && <WarningAlert onClick={() => setWarning('')} error={warning} />}
       <table>
         <Thead>
           <tr>
@@ -148,6 +154,7 @@ export const ExecutionConfirmation = ({
                   setExecutionData={setExecutionData}
                   signatureCollected={signatureCollected as string[]}
                   setPendingExecution={setPendingExecution}
+                  setError={setError}
                 />
               </td>
             )}

alm/src/components/MainPage.tsx

@@ -8,8 +8,6 @@ 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'
-import { ErrorAlert } from './commons/ErrorAlert'
-import { WarningAlert } from './commons/WarningAlert'
 
 const StyledMainPage = styled.div`
   text-align: center;
@@ -53,7 +51,7 @@ export interface FormSubmitParams {
 
 export const MainPage = () => {
   const history = useHistory()
-  const { home, foreign, error, setError, warning, setWarning } = useStateProvider()
+  const { home, foreign } = useStateProvider()
   const [networkName, setNetworkName] = useState('')
   const [receipt, setReceipt] = useState<Maybe<TransactionReceipt>>(null)
   const [showInfoAlert, setShowInfoAlert] = useState(false)
@@ -133,8 +131,6 @@ export const MainPage = () => {
             </AlertP>
           </InfoAlert>
         )}
-        {error && <ErrorAlert onClick={() => setError('')} error={error} />}
-        {warning && <WarningAlert onClick={() => setWarning('')} error={warning} />}
         <Route exact path={['/']} children={<Form onSubmit={onFormSubmit} />} />
         <Route
           path={['/:chainId/:txHash/:messageIdParam', '/:chainId/:txHash']}

alm/src/components/ManualExecutionButton.tsx

@@ -33,16 +33,18 @@ interface ManualExecutionButtonParams {
   setExecutionData: Function
   signatureCollected: string[]
   setPendingExecution: Function
+  setError: Function
 }
 
 export const ManualExecutionButton = ({
   safeExecutionAvailable,
   messageData,
   setExecutionData,
   signatureCollected,
-  setPendingExecution
+  setPendingExecution,
+  setError
 }: ManualExecutionButtonParams) => {
-  const { foreign, setError } = useStateProvider()
+  const { foreign } = useStateProvider()
   const { library, activate, account, active } = useWeb3React()
   const [manualExecution, setManualExecution] = useState(false)
   const [allowFailures, setAllowFailures] = useState(false)

alm/src/components/commons/ErrorAlert.tsx

@@ -33,7 +33,7 @@ export const ErrorAlert = ({ onClick, error }: { onClick: () => void; error: str
   }
   return (
     <div className="row is-center">
-      <StyledErrorAlert className="col-10 is-vertical-align row">
+      <StyledErrorAlert className="col-12 is-vertical-align row">
         <InfoIcon color="var(--failed-color)" />
         <TextContainer className="col-10">
           {text}

alm/src/components/commons/WarningAlert.tsx

@@ -22,7 +22,7 @@ const TextContainer = styled.div`
 export const WarningAlert = ({ onClick, error }: { onClick: () => void; error: string }) => {
   return (
     <div className="row is-center">
-      <StyledErrorAlert className="col-10 is-vertical-align row">
+      <StyledErrorAlert className="col-12 is-vertical-align row">
         <InfoIcon color="var(--warning-color)" />
         <TextContainer className="col-10">{error}</TextContainer>
         <CloseIconContainer className="col-1 is-vertical-align is-center" onClick={onClick}>

alm/src/state/StateProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useState } from 'react'
+import React, { createContext, ReactNode } from 'react'
 import { useNetwork } from '../hooks/useNetwork'
 import {
   HOME_RPC_URL,
@@ -25,10 +25,6 @@ export interface StateContext {
   home: BaseNetworkParams
   foreign: BaseNetworkParams
   loading: boolean
-  error: string
-  setError: Function
-  warning: string
-  setWarning: Function
 }
 
 const initialState = {
@@ -46,11 +42,7 @@ const initialState = {
     bridgeAddress: FOREIGN_BRIDGE_ADDRESS,
     bridgeContract: null
   },
-  loading: true,
-  error: '',
-  setError: () => {},
-  warning: '',
-  setWarning: () => {}
+  loading: true
 }
 
 const StateContext = createContext<StateContext>(initialState)
@@ -62,8 +54,6 @@ export const StateProvider = ({ children }: { children: ReactNode }) => {
     homeWeb3: homeNetwork.web3,
     foreignWeb3: foreignNetwork.web3
   })
-  const [error, setError] = useState('')
-  const [warning, setWarning] = useState('')
 
   const value = {
     home: {
@@ -78,11 +68,7 @@ export const StateProvider = ({ children }: { children: ReactNode }) => {
       bridgeContract: foreignBridge,
       ...foreignNetwork
     },
-    loading: homeNetwork.loading || foreignNetwork.loading,
-    error,
-    setError,
-    warning,
-    setWarning
+    loading: homeNetwork.loading || foreignNetwork.loading
   }
 
   return <StateContext.Provider value={value}>{children}</StateContext.Provider>