From d228bb7ea9eaa0d7461aee92f5ec205cd417a1ef Mon Sep 17 00:00:00 2001
From: Gerardo Nardelli <gerardo.nardelli@altoros.com>
Date: Tue, 23 Jun 2020 10:49:59 -0300
Subject: [PATCH] Add button to search another transaction in ALM (#364)

---
 alm/src/components/StatusContainer.tsx   | 25 +++++++++++++++++++++++-
 alm/src/components/commons/LeftArrow.tsx | 20 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 alm/src/components/commons/LeftArrow.tsx

diff --git a/alm/src/components/StatusContainer.tsx b/alm/src/components/StatusContainer.tsx
index 0f3ebc56..a8d0d000 100644
--- a/alm/src/components/StatusContainer.tsx
+++ b/alm/src/components/StatusContainer.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useHistory, useParams } from 'react-router-dom'
+import { Link, 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,6 +8,19 @@ 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'
+
+const BackButton = styled.button`
+  color: var(--font-color);
+  border-color: var(--font-color);
+  margin-top: 10px;
+`
+
+const BackLabel = styled.label`
+  margin-left: 5px;
+  cursor: pointer;
+`
 
 export const StatusContainer = () => {
   const { home, foreign } = useStateProvider()
@@ -77,6 +90,16 @@ export const StatusContainer = () => {
       {displayConfirmations && (
         <ConfirmationsContainer message={messageToConfirm} receipt={receipt} fromHome={isHome} timestamp={timestamp} />
       )}
+      <div className="row is-center">
+        <div className="col-9">
+          <Link to="/">
+            <BackButton className="button outline is-left">
+              <LeftArrow />
+              <BackLabel>Search another transaction</BackLabel>
+            </BackButton>
+          </Link>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/alm/src/components/commons/LeftArrow.tsx b/alm/src/components/commons/LeftArrow.tsx
new file mode 100644
index 00000000..1700297a
--- /dev/null
+++ b/alm/src/components/commons/LeftArrow.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { useContext } from 'react'
+import { ThemeContext } from 'styled-components'
+
+export const LeftArrow = () => {
+  const themeContext = useContext(ThemeContext)
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      id="mdi-arrow-left"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill={themeContext.fontColor}
+    >
+      <path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" />
+    </svg>
+  )
+}