diff --git a/alm/src/components/Form.tsx b/alm/src/components/Form.tsx index c438915b..06e23fb6 100644 --- a/alm/src/components/Form.tsx +++ b/alm/src/components/Form.tsx @@ -35,8 +35,13 @@ export const Form = ({ onSubmit }: { onSubmit: ({ chainId, txHash, receipt }: Fo onSubmit({ chainId, txHash, receipt }) } + const onBack = () => { + setTxHash('') + setSearchTx(false) + } + if (searchTx) { - return + return } return ( diff --git a/alm/src/components/MainPage.tsx b/alm/src/components/MainPage.tsx index d84a85dc..f8eaf813 100644 --- a/alm/src/components/MainPage.tsx +++ b/alm/src/components/MainPage.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import styled from 'styled-components' import { Route, useHistory } from 'react-router-dom' import { Form } from './Form' @@ -64,6 +64,13 @@ export const MainPage = () => { setNetworkData(chainId) } + useEffect(() => { + const w = window as any + if (w.ethereum) { + w.ethereum.autoRefreshOnNetworkChange = false + } + }, []) + return (
diff --git a/alm/src/components/StatusContainer.tsx b/alm/src/components/StatusContainer.tsx index c2a4b484..661fa4d1 100644 --- a/alm/src/components/StatusContainer.tsx +++ b/alm/src/components/StatusContainer.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react' -import { Link, useHistory, useParams } from 'react-router-dom' +import { useHistory, useParams } from 'react-router-dom' import { useTransactionStatus } from '../hooks/useTransactionStatus' import { formatTxHash, getExplorerTxUrl, getTransactionStatusDescription, validTxHash } from '../utils/networks' import { TRANSACTION_STATUS } from '../config/constants' @@ -8,23 +8,8 @@ import { Loading } from './commons/Loading' import { useStateProvider } from '../state/StateProvider' import { ExplorerTxLink } from './commons/ExplorerTxLink' import { ConfirmationsContainer } from './ConfirmationsContainer' -import { LeftArrow } from './commons/LeftArrow' -import styled from 'styled-components' import { TransactionReceipt } from 'web3-eth' - -const BackButton = styled.button` - color: var(--button-color); - border-color: var(--font-color); - margin-top: 10px; - &:focus { - outline: var(--button-color); - } -` - -const BackLabel = styled.label` - margin-left: 5px; - cursor: pointer; -` +import { BackButton } from './commons/BackButton' export interface StatusContainerParam { onBackToMain: () => void @@ -107,16 +92,7 @@ export const StatusContainer = ({ onBackToMain, setNetworkFromParams, receiptPar {displayConfirmations && ( )} -
-
- - - - Search another transaction - - -
-
+ ) } diff --git a/alm/src/components/TransactionSelector.tsx b/alm/src/components/TransactionSelector.tsx index 846ff3c4..b7aba39b 100644 --- a/alm/src/components/TransactionSelector.tsx +++ b/alm/src/components/TransactionSelector.tsx @@ -5,13 +5,23 @@ import { TRANSACTION_STATUS } from '../config/constants' import { TransactionReceipt } from 'web3-eth' import { Loading } from './commons/Loading' import { NetworkTransactionSelector } from './NetworkTransactionSelector' +import { BackButton } from './commons/BackButton' +import { TRANSACTION_STATUS_DESCRIPTION } from '../config/descriptions' +import { MultiLine } from './commons/MultiLine' +import styled from 'styled-components' + +const StyledMultiLine = styled(MultiLine)` + margin-bottom: 40px; +` export const TransactionSelector = ({ txHash, - onSelected + onSelected, + onBack }: { txHash: string onSelected: (chainId: number, receipt: TransactionReceipt) => void + onBack: () => void }) => { const { home, foreign } = useStateProvider() const { receipt: homeReceipt, status: homeStatus } = useTransactionFinder({ txHash, web3: home.web3 }) @@ -43,5 +53,15 @@ export const TransactionSelector = ({ return } + if (foreignStatus === TRANSACTION_STATUS.NOT_FOUND && homeStatus === TRANSACTION_STATUS.NOT_FOUND) { + const message = TRANSACTION_STATUS_DESCRIPTION[TRANSACTION_STATUS.NOT_FOUND] + return ( +
+ {message} + +
+ ) + } + return } diff --git a/alm/src/components/commons/BackButton.tsx b/alm/src/components/commons/BackButton.tsx new file mode 100644 index 00000000..eead9516 --- /dev/null +++ b/alm/src/components/commons/BackButton.tsx @@ -0,0 +1,35 @@ +import { Link } from 'react-router-dom' +import { LeftArrow } from './LeftArrow' +import React from 'react' +import styled from 'styled-components' + +const StyledButton = styled.button` + color: var(--button-color); + border-color: var(--font-color); + margin-top: 10px; + &:focus { + outline: var(--button-color); + } +` + +const BackLabel = styled.label` + margin-left: 5px; + cursor: pointer; +` + +export interface BackButtonParam { + onBackToMain: () => void +} + +export const BackButton = ({ onBackToMain }: BackButtonParam) => ( +
+
+ + + + Search another transaction + + +
+
+) diff --git a/alm/src/components/commons/MultiLine.tsx b/alm/src/components/commons/MultiLine.tsx new file mode 100644 index 00000000..84d78765 --- /dev/null +++ b/alm/src/components/commons/MultiLine.tsx @@ -0,0 +1,5 @@ +import styled from 'styled-components' + +export const MultiLine = styled.div` + white-space: pre-wrap; +` diff --git a/alm/src/config/descriptions.ts b/alm/src/config/descriptions.ts index fb395555..a220e2f3 100644 --- a/alm/src/config/descriptions.ts +++ b/alm/src/config/descriptions.ts @@ -4,7 +4,8 @@ export const TRANSACTION_STATUS_DESCRIPTION: { [key: string]: string } = { SUCCESS_ONE_MESSAGE: 'was initiated %t', SUCCESS_NO_MESSAGES: 'execution succeeded %t but it does not contain any bridge messages', FAILED: 'failed %t', - NOT_FOUND: 'was not found' + NOT_FOUND: + 'Transaction not found. \n1. Check that the transaction hash is correct. \n2. Wait several blocks for the transaction to be\nmined, gas price affects mining speed.' } export const CONFIRMATIONS_STATUS_LABEL: { [key: string]: string } = {