ALM: reorder warnings

This commit is contained in:
Kirill Fedoseev 2022-03-17 17:41:33 +04:00
parent 910c3759c1
commit 735aa75f81
6 changed files with 18 additions and 27 deletions

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

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

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

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

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

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