go back link

icons/arrows/left.svg

+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.535 9.293c-.63.63-.184 1.707.707 1.707H19a1 1 0 0 1 0 2h-8.758c-.89 0-1.337 1.077-.707 1.707l2.95 2.95a1 1 0 1 1-1.414 1.414l-6.364-6.364a1 1 0 0 1 0-1.414l6.364-6.364a1 1 0 1 1 1.414 1.414l-2.95 2.95Z" fill="currentColor"/>
+</svg>

ui/pages/Transaction.tsx

@@ -3,7 +3,9 @@ import React from 'react';
 
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
+import leftArrowIcon from 'icons/arrows/left.svg';
 import externalLinkIcon from 'icons/external-link.svg';
+import useLink from 'lib/link/useLink';
 import Page from 'ui/shared/Page';
 import PageHeader from 'ui/shared/PageHeader';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
@@ -26,6 +28,7 @@ export interface Props {
 }
 
 const TransactionPageContent = ({ tab }: Props) => {
+  const link = useLink();
 
   const externalLinks = (
     <Flex marginLeft="auto" alignItems="center" columnGap={ 6 }>
@@ -42,15 +45,16 @@ const TransactionPageContent = ({ tab }: Props) => {
 
   return (
     <Page>
+      <Link mb={ 6 } display="inline-flex" href={ link('txs') }>
+        <Icon as={ leftArrowIcon } boxSize={ 6 } mr={ 2 }/>
+        Transactions
+      </Link>
       <PageHeader text="Transaction details"/>
-      <Flex justifyContent="space-between">
-        <RoutedTabs
-          tabs={ TABS }
-          defaultActiveTab={ tab }
-          rightSlot={ externalLinks }
-        />
-
-      </Flex>
+      <RoutedTabs
+        tabs={ TABS }
+        defaultActiveTab={ tab }
+        rightSlot={ externalLinks }
+      />
     </Page>
   );
 };