more markup for tx details

icons/arrows/left-mini.svg

+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.535 11.293a1 1 0 0 0 0 1.414l3.536 3.536a1 1 0 1 1-1.414 1.414l-4.95-4.95a1 1 0 0 1 0-1.414l4.95-4.95a1 1 0 1 1 1.414 1.414l-3.536 3.536Z" fill="currentColor"/>
+</svg>

icons/arrows/right-mini.svg

+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.465 12.707a1 1 0 0 0 0-1.414L8.929 7.757a1 1 0 1 1 1.414-1.414l4.95 4.95a1 1 0 0 1 0 1.414l-4.95 4.95a1 1 0 1 1-1.414-1.414l3.536-3.536Z" fill="currentColor"/>
+</svg>

icons/external-link.svg

+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m10.67 6.276-5.267 5.267a.667.667 0 0 1-.943-.943l5.266-5.267h-4.39a.667.667 0 1 1 0-1.333h6.667v6.667a.667.667 0 0 1-1.334 0V6.276Z" fill="currentColor"/>
+</svg>

ui/blocks/profileMenu/ProfileMenuDesktop.tsx

@@ -11,7 +11,7 @@ const ProfileMenuDesktop = () => {
   return (
     <Popover openDelay={ 300 } placement="bottom-end" gutter={ 10 } isLazy>
       <PopoverTrigger>
-        <Button variant="unstyled" display="inline-flex" height="auto">
+        <Button variant="unstyled" display="inline-flex" height="auto" flexShrink={ 0 }>
           <UserAvatar size={ 50 } data={ data }/>
         </Button>
       </PopoverTrigger>

ui/pages/Transaction.tsx

+import { Flex, Link, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
+import externalLinkIcon from 'icons/external-link.svg';
 import Page from 'ui/shared/Page';
 import PageHeader from 'ui/shared/PageHeader';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
@@ -24,10 +26,31 @@ export interface Props {
 }
 
 const TransactionPageContent = ({ tab }: Props) => {
+
+  const externalLinks = (
+    <Flex marginLeft="auto" alignItems="center" columnGap={ 6 }>
+      <Link fontSize="sm" display="inline-flex" alignItems="center" target="_blank">
+        Open in Tenderly
+        <Icon as={ externalLinkIcon }/>
+      </Link>
+      <Link fontSize="sm" display="inline-flex" alignItems="center" target="_blank">
+        Open in Tenderly
+        <Icon as={ externalLinkIcon }/>
+      </Link>
+    </Flex>
+  );
+
   return (
     <Page>
       <PageHeader text="Transaction details"/>
-      <RoutedTabs tabs={ TABS } defaultActiveTab={ tab }/>
+      <Flex justifyContent="space-between">
+        <RoutedTabs
+          tabs={ TABS }
+          defaultActiveTab={ tab }
+          rightSlot={ externalLinks }
+        />
+
+      </Flex>
     </Page>
   );
 };

ui/shared/PrevNext.tsx

+import { Box, Icon, IconButton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import leftArrow from 'icons/arrows/left-mini.svg';
+import rightArrow from 'icons/arrows/right-mini.svg';
+
+interface Props {
+  className?: string;
+}
+
+const PrevNext = ({ className }: Props) => {
+  return (
+    <Box className={ className }>
+      <IconButton
+        aria-label="prev"
+        icon={ <Icon as={ leftArrow } boxSize={ 6 }/> }
+        h={ 6 }
+        borderRadius="sm"
+        variant="subtle"
+        colorScheme="gray"
+      />
+      <IconButton
+        aria-label="next"
+        icon={ <Icon as={ rightArrow }boxSize={ 6 }/> }
+        h={ 6 }
+        borderRadius="sm"
+        variant="subtle"
+        colorScheme="gray"
+        ml="10px"
+      />
+    </Box>
+  );
+};
+
+export default chakra(PrevNext);

ui/shared/RoutedTabs/RoutedTabs.tsx

@@ -26,9 +26,10 @@ const hiddenItemStyles: StyleProps = {
 interface Props {
   tabs: Array<RoutedTab>;
   defaultActiveTab: RoutedTab['routeName'];
+  rightSlot?: React.ReactNode;
 }
 
-const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
+const RoutedTabs = ({ tabs, defaultActiveTab, rightSlot }: Props) => {
   const defaultIndex = tabs.findIndex(({ routeName }) => routeName === defaultActiveTab);
 
   const [ activeTab, setActiveTab ] = React.useState<number>(defaultIndex);
@@ -82,6 +83,7 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
             </Tab>
           );
         }) }
+        { rightSlot }
       </TabList>
       <TabPanels>
         { tabsWithMenu.map((tab) => <TabPanel padding={ 0 } key={ tab.routeName }>{ tab.component }</TabPanel>) }

ui/shared/RoutedTabs/RoutedTabsMenu.tsx

@@ -37,7 +37,7 @@ const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRe
     <Popover isLazy placement="bottom-end" key="more" isOpen={ isOpen } onClose={ onClose } onOpen={ onOpen } closeDelay={ 0 }>
       <PopoverTrigger>
         <Button
-          variant="subtle"
+          variant="ghost"
           isActive={ isOpen || isActive }
           ref={ buttonRef }
           { ...styles }
@@ -50,7 +50,7 @@ const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRe
           { tabs.slice(tabsCut).map((tab, index) => (
             <Button
               key={ tab.routeName }
-              variant="subtle"
+              variant="ghost"
               onClick={ handleItemClick }
               isActive={ activeTab.routeName === tab.routeName }
               justifyContent="left"

ui/tx/TxDetails.tsx

@@ -12,6 +12,7 @@ import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import PrevNext from 'ui/shared/PrevNext';
 import RawInputData from 'ui/shared/RawInputData';
 import Token from 'ui/shared/Token';
 import Utilization from 'ui/shared/Utilization';
@@ -46,6 +47,7 @@ const TxDetails = () => {
       >
         { tx.hash }
         <CopyToClipboard text={ tx.hash }/>
+        <PrevNext ml={ 7 }/>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Status"