Properly handle not found transaction and disable auto refresh (#397)

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 <TransactionSelector txHash={txHash} onSelected={onSelected} />
+    return <TransactionSelector txHash={txHash} onSelected={onSelected} onBack={onBack} />
   }
 
   return (

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 (
     <StyledMainPage>
       <Header>

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'
-
+import { BackButton } from './commons/BackButton'
-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;
-`
 
 export interface StatusContainerParam {
   onBackToMain: () => void
@@ -107,16 +92,7 @@ export const StatusContainer = ({ onBackToMain, setNetworkFromParams, receiptPar
       {displayConfirmations && (
         <ConfirmationsContainer message={messageToConfirm} receipt={receipt} fromHome={isHome} timestamp={timestamp} />
       )}
-      <div className="row is-center">
+      <BackButton onBackToMain={onBackToMain} />
-        <div className="col-9">
-          <Link to="/" onClick={onBackToMain}>
-            <BackButton className="button outline is-left">
-              <LeftArrow />
-              <BackLabel>Search another transaction</BackLabel>
-            </BackButton>
-          </Link>
-        </div>
-      </div>
     </div>
   )
 }

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 <NetworkTransactionSelector onNetworkSelected={onSelectedNetwork} />
   }
 
+  if (foreignStatus === TRANSACTION_STATUS.NOT_FOUND && homeStatus === TRANSACTION_STATUS.NOT_FOUND) {
+    const message = TRANSACTION_STATUS_DESCRIPTION[TRANSACTION_STATUS.NOT_FOUND]
+    return (
+      <div>
+        <StyledMultiLine>{message}</StyledMultiLine>
+        <BackButton onBackToMain={onBack} />
+      </div>
+    )
+  }
+
   return <Loading />
 }

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) => (
+  <div className="row is-center">
+    <div className="col-9">
+      <Link to="/" onClick={onBackToMain}>
+        <StyledButton className="button outline is-left">
+          <LeftArrow />
+          <BackLabel>Search another transaction</BackLabel>
+        </StyledButton>
+      </Link>
+    </div>
+  </div>
+)

alm/src/components/commons/MultiLine.tsx

@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const MultiLine = styled.div`
+  white-space: pre-wrap;
+`

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 } = {