adapt details tab for small desktop screens

theme/components/Tag.ts

@@ -25,8 +25,6 @@ const sizes = {
       fontSize: 'sm',
       px: 2,
       py: '2px',
-    },
-    label: {
       lineHeight: 5,
     },
   }),

ui/pages/Transaction.tsx

@@ -4,8 +4,8 @@ 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 ExternalLink from 'ui/shared/ExternalLink';
 import Page from 'ui/shared/Page';
 import PageHeader from 'ui/shared/PageHeader';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
@@ -30,19 +30,6 @@ export interface Props {
 const TransactionPageContent = ({ tab }: Props) => {
   const link = useLink();
 
-  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>
       <Link mb={ 6 } display="inline-flex" href={ link('txs') }>
@@ -50,10 +37,13 @@ const TransactionPageContent = ({ tab }: Props) => {
         Transactions
       </Link>
       <PageHeader text="Transaction details"/>
+      <Flex marginLeft="auto" alignItems="center" columnGap={ 6 } mb={ 6 }>
+        <ExternalLink title="Open in Tenderly" href="#"/>
+        <ExternalLink title="Open in Tenderly" href="#"/>
+      </Flex>
       <RoutedTabs
         tabs={ TABS }
         defaultActiveTab={ tab }
-        rightSlot={ externalLinks }
       />
     </Page>
   );

ui/shared/DetailsInfoItem.tsx

@@ -27,7 +27,7 @@ const DetailsInfoItem = ({ title, hint, children, ...styles }: Props) => {
           <Text fontWeight={ 500 }>{ title }</Text>
         </Flex>
       </GridItem>
-      <GridItem display="flex" alignItems="center" py={ 2 } lineHeight={ 5 } whiteSpace="nowrap" { ...styles }>
+      <GridItem display="flex" alignItems="center" flexWrap="wrap" rowGap={ 3 } py={ 2 } lineHeight={ 5 } whiteSpace="nowrap" { ...styles }>
         { children }
       </GridItem>
     </>

ui/shared/ExternalLink.tsx

+import { Link, Icon } from '@chakra-ui/react';
+import React from 'react';
+
+import externalLinkIcon from 'icons/external-link.svg';
+
+interface Props {
+  href: string;
+  title: string;
+}
+
+const ExternalLink = ({ href, title }: Props) => {
+  return (
+    <Link fontSize="sm" display="inline-flex" alignItems="center" target="_blank" href={ href }>
+      { title }
+      <Icon as={ externalLinkIcon }/>
+    </Link>
+  );
+};
+
+export default React.memo(ExternalLink);

ui/shared/Page.tsx

@@ -39,13 +39,20 @@ const Page = ({ children }: Props) => {
       alignItems="stretch"
     >
       { !isMobile && <NavigationDesktop/> }
-      <VStack width="100%" paddingX={ isMobile ? 4 : 8 } paddingTop={ isMobile ? 0 : 9 } paddingBottom={ 10 } spacing={ 0 }>
+      <VStack
+        width="100%"
+        paddingX={ isMobile ? 4 : 8 }
+        paddingTop={ isMobile ? 0 : 9 }
+        paddingBottom={ 10 }
+        spacing={ 0 }
+        overflow="hidden"
+      >
         <Header/>
         <Box
           as="main"
           borderRadius="base"
           w="100%"
-          overflow="hidden"
+          // overflow="hidden"
           paddingTop={ isMobile ? '138px' : '52px' }
         >
           { children }

ui/shared/RoutedTabs/RoutedTabs.tsx

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

ui/tx/TokenTransfer.tsx

-import { Center, Icon, Text } from '@chakra-ui/react';
+import { Flex, Icon, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import rightArrowIcon from 'icons/arrows/right.svg';
@@ -16,16 +16,18 @@ interface Props {
 
 const TokenTransfer = ({ from, to, amount, usd, token }: Props) => {
   return (
-    <Center>
-      <AddressLink fontWeight="500" hash={ from } truncation="constant"/>
-      <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
-      <AddressLink fontWeight="500" hash={ to } truncation="constant"/>
-      <Text fontWeight={ 500 } as="span" ml={ 4 }>For:{ space }
+    <Flex alignItems="center" flexWrap="wrap" columnGap={ 3 } rowGap={ 3 }>
+      <Flex alignItems="center">
+        <AddressLink fontWeight="500" hash={ from } truncation="constant"/>
+        <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
+        <AddressLink fontWeight="500" hash={ to } truncation="constant"/>
+      </Flex>
+      <Text fontWeight={ 500 } as="span">For:{ space }
         <Text fontWeight={ 600 } as="span">{ amount }</Text>{ space }
         <Text fontWeight={ 400 } variant="secondary" as="span">(${ usd.toFixed(2) })</Text>
       </Text>
-      <Token symbol={ token } ml={ 3 }/>
-    </Center>
+      <Token symbol={ token }/>
+    </Flex>
   );
 };
 

ui/tx/TxDecodedInputData.tsx

@@ -55,7 +55,7 @@ const TxDecodedInputData = () => {
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   return (
-    <Grid gridTemplateColumns="minmax(80px, auto) minmax(80px, auto) 1fr" fontSize="sm" lineHeight={ 5 } w="100%">
+    <Grid gridTemplateColumns="minmax(80px, auto) minmax(80px, auto) minmax(0, 1fr)" fontSize="sm" lineHeight={ 5 } w="100%">
       { /* FIRST PART OF BLOCK */ }
       <GridItem fontWeight={ 600 } pl={ PADDING } pr={ GAP }>Method Id</GridItem>
       <GridItem colSpan={ 2 } pr={ PADDING }>0xddf252ad</GridItem>
@@ -77,6 +77,7 @@ const TxDecodedInputData = () => {
         pr={ PADDING }
         borderTopColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
         borderTopWidth="1px"
+        whiteSpace="normal"
       >
         Transfer(address indexed from, address indexed to, uint256 indexed tokenId)
       </GridItem>

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 HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import PrevNext from 'ui/shared/PrevNext';
 import RawInputData from 'ui/shared/RawInputData';
 import Token from 'ui/shared/Token';
@@ -24,11 +25,11 @@ import TxStatus from 'ui/tx/TxStatus';
 const TxDetails = () => {
   const [ isExpanded, setIsExpanded ] = React.useState(false);
 
-  const leftSeparatorStyles = {
-    ml: 3,
-    pl: 3,
-    borderLeftWidth: '1px',
-    borderLeftColor: 'gray.700',
+  const rightSeparatorStyles = {
+    mr: 3,
+    pr: 3,
+    borderRightWidth: '1px',
+    borderRightColor: 'gray.700',
   };
 
   const handleCutClick = React.useCallback(() => {
@@ -40,12 +41,15 @@ const TxDetails = () => {
   }, []);
 
   return (
-    <Grid columnGap={ 8 } rowGap={ 3 } templateColumns="auto 1fr">
+    <Grid columnGap={ 8 } rowGap={ 3 } templateColumns="auto minmax(0, 1fr)">
       <DetailsInfoItem
         title="Transaction hash"
         hint="Unique character string (TxID) assigned to every verified transaction."
+        flexWrap="nowrap"
       >
-        { tx.hash }
+        <Box overflow="hidden">
+          <HashStringShortenDynamic hash={ tx.hash }/>
+        </Box>
         <CopyToClipboard text={ tx.hash }/>
         <PrevNext ml={ 7 }/>
       </DetailsInfoItem>
@@ -59,8 +63,8 @@ const TxDetails = () => {
         title="Block"
         hint="Block number containing the transaction."
       >
-        <Text>{ tx.block_num }</Text>
-        <Text { ...leftSeparatorStyles } borderLeftColor="gray.500" variant="secondary">
+        <Text { ...rightSeparatorStyles }>{ tx.block_num }</Text>
+        <Text borderLeftColor="gray.500" variant="secondary">
           { tx.confirmation_num } Block confirmations
         </Text>
       </DetailsInfoItem>
@@ -69,9 +73,9 @@ const TxDetails = () => {
         hint="Date & time of transaction inclusion, including length of time for confirmation."
       >
         <Icon as={ clockIcon } boxSize={ 5 } color="gray.500"/>
-        <Text ml={ 1 }>{ dayjs(tx.timestamp).fromNow() }</Text>
-        <Text { ...leftSeparatorStyles }>{ dayjs(tx.timestamp).format('LLLL') }</Text>
-        <Text { ...leftSeparatorStyles } borderLeftColor="gray.500" variant="secondary">
+        <Text ml={ 1 } { ...rightSeparatorStyles }>{ dayjs(tx.timestamp).fromNow() }</Text>
+        <Text { ...rightSeparatorStyles } borderLeftColor="gray.500">{ dayjs(tx.timestamp).format('LLLL') }</Text>
+        <Text variant="secondary">
           Confirmed within { tx.confirmation_duration } secs
         </Text>
       </DetailsInfoItem>
@@ -89,13 +93,14 @@ const TxDetails = () => {
       <DetailsInfoItem
         title="Interacted with contract"
         hint="Address (external or contract) receiving the transaction."
+        flexWrap="nowrap"
       >
         <Address>
           <AddressIcon hash={ tx.address_to }/>
           <AddressLink ml={ 2 } hash={ tx.address_to }/>
           <CopyToClipboard text={ tx.address_to }/>
         </Address>
-        <Tag colorScheme="orange" variant="solid" ml={ 3 }>SANA</Tag>
+        <Tag colorScheme="orange" variant="solid" ml={ 3 } flexShrink={ 0 }>SANA</Tag>
         <Icon as={ successIcon } boxSize={ 4 } ml={ 2 } color="green.500"/>
         <Token symbol="USDT" ml={ 3 }/>
       </DetailsInfoItem>
@@ -103,7 +108,7 @@ const TxDetails = () => {
         title="Token transferred"
         hint="List of token transferred in the transaction."
       >
-        <Flex flexDirection="column" alignItems="flex-start" rowGap={ 5 }>
+        <Flex flexDirection="column" alignItems="flex-start" rowGap={ 5 } w="100%">
           { tx.transferred_tokens.map((item) => <TokenTransfer key={ item.token } { ...item }/>) }
         </Flex>
       </DetailsInfoItem>
@@ -133,8 +138,8 @@ const TxDetails = () => {
         title="Gas limit & usage by txn"
         hint="Actual gas amount used by the transaction."
       >
-        <Text>{ tx.gas_used.toLocaleString('en') }</Text>
-        <Text { ...leftSeparatorStyles }>{ tx.gas_limit.toLocaleString('en') }</Text>
+        <Text { ...rightSeparatorStyles }>{ tx.gas_used.toLocaleString('en') }</Text>
+        <Text >{ tx.gas_limit.toLocaleString('en') }</Text>
         <Utilization ml={ 4 } value={ tx.gas_used / tx.gas_limit }/>
       </DetailsInfoItem>
       <DetailsInfoItem
@@ -142,15 +147,15 @@ const TxDetails = () => {
         // eslint-disable-next-line max-len
         hint="Base Fee refers to the network Base Fee at the time of the block, while Max Fee & Max Priority Fee refer to the max amount a user is willing to pay for their tx & to give to the miner respectively."
       >
-        <Box>
+        <Box { ...rightSeparatorStyles }>
           <Text as="span" fontWeight="500">Base: </Text>
           <Text fontWeight="600" as="span">{ tx.gas_fees.base }</Text>
         </Box>
-        <Box { ...leftSeparatorStyles }>
+        <Box { ...rightSeparatorStyles }>
           <Text as="span" fontWeight="500">Max: </Text>
           <Text fontWeight="600" as="span">{ tx.gas_fees.max }</Text>
         </Box>
-        <Box { ...leftSeparatorStyles }>
+        <Box>
           <Text as="span" fontWeight="500">Max priority: </Text>
           <Text fontWeight="600" as="span">{ tx.gas_fees.max_priority }</Text>
         </Box>
@@ -184,16 +189,16 @@ const TxDetails = () => {
             title="Other"
             hint="Other data related to this transaction."
           >
-            <Box>
+            <Box { ...rightSeparatorStyles }>
               <Text as="span" fontWeight="500">Txn type: </Text>
               <Text fontWeight="600" as="span">{ tx.type.value }</Text>
               <Text fontWeight="400" as="span" ml={ 1 }>({ tx.type.eip })</Text>
             </Box>
-            <Box { ...leftSeparatorStyles }>
+            <Box { ...rightSeparatorStyles }>
               <Text as="span" fontWeight="500">Nonce: </Text>
               <Text fontWeight="600" as="span">{ tx.nonce }</Text>
             </Box>
-            <Box { ...leftSeparatorStyles }>
+            <Box>
               <Text as="span" fontWeight="500">Position: </Text>
               <Text fontWeight="600" as="span">{ tx.position }</Text>
             </Box>