details item

data/tx.ts

+export const tx = {
+  hash: '0x1ea365d2144796f793883534aa51bf20d23292b19478994eede23dfc599e7c34',
+  status: 'success',
+  block_num: 15006918,
+  confirmation_num: 283,
+  confirmation_duration: 30,
+  timestamp: 1662623567695,
+  address_from: '0x97Aa2EfcF35c0f4c9AaDDCa8c2330fa7A9533830',
+  address_to: '0x97Aa2EfcF35c0f4c9AaDDCa8c2330fa7A9533830',
+  amount: {
+    value: 0.03,
+    value_usd: 35.5,
+  },
+  fee: {
+    value: 0.002395904453623692,
+    value_usd: 2.84,
+  },
+  gas_price: 0.000000017716513811,
+  gas_limit: 208420,
+  gas_used: 159319,
+  gas_fees: {
+    base: 13.538410068,
+    max: 20.27657523,
+    max_priority: 1.5,
+  },
+  burnt_fees: {
+    value: 0.002156925953623692,
+    value_usd: 2.55,
+  },
+};

icons/info.svg

+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.034 3H6.965C4.587 3 3 4.703 3 7.141v5.718C3 15.299 4.583 17 6.965 17h6.068C15.416 17 17 15.3 17 12.859V7.14C17 4.701 15.416 3 13.034 3ZM6.965 4.05h6.069c1.785 0 2.916 1.214 2.916 3.091v5.718c0 1.877-1.13 3.091-2.917 3.091H6.966c-1.786 0-2.916-1.214-2.916-3.091V7.14c0-1.874 1.134-3.091 2.915-3.091ZM10 6.818a.525.525 0 0 1 .072 1.045l-.079.005a.525.525 0 0 1-.07-1.045l.077-.005Zm-.007 2.221c.266 0 .486.198.52.454l.005.071v3.093a.525.525 0 0 1-1.045.072l-.005-.072V9.564c0-.29.235-.525.525-.525Z" fill="currentColor"/>
+</svg>

theme/components/Tooltip.ts

@@ -35,7 +35,7 @@ const baseStyle = defineStyle((props) => {
     [$bg.variable]: `colors.${ bg }`,
     [$fg.reference]: `colors.${ fg }`,
     [$arrowBg.variable]: $bg.reference,
-    maxWidth: 'unset',
+    maxWidth: props.maxWidth || props.maxW || 'unset',
   };
 });
 

ui/shared/DetailsInfoItem.tsx

+import { GridItem, Icon, Flex, Tooltip, Box, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import infoIcon from 'icons/info.svg';
+
+interface Props {
+  title: string;
+  hint: string;
+  children: React.ReactNode;
+}
+
+const DetailsInfoItem = ({ title, hint, children }: Props) => {
+  return (
+    <>
+      <GridItem>
+        <Flex columnGap={ 2 } alignItems="center">
+          <Tooltip
+            label={ hint }
+            placement="top"
+            maxW="320px"
+          >
+            <Box cursor="pointer" display="inherit">
+              <Icon as={ infoIcon } boxSize={ 5 }/>
+            </Box>
+          </Tooltip>
+          <Text fontWeight={ 500 } whiteSpace="nowrap">{ title }</Text>
+        </Flex>
+      </GridItem>
+      <GridItem display="flex" alignItems="center">{ children }</GridItem>
+    </>
+  );
+};
+
+export default DetailsInfoItem;

ui/tx/TxDetails.tsx

+import { Grid } from '@chakra-ui/react';
 import React from 'react';
 
+import { tx } from 'data/tx';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+
 const TxDetails = () => {
-  return <div>TxDetails component</div>;
+  return (
+    <Grid columnGap={ 8 } rowGap={ 3 } templateColumns="auto 1fr">
+      <DetailsInfoItem
+        title="Transaction hash"
+        hint="Unique character string (TxID) assigned to every verified transaction."
+      >
+        { tx.hash }
+        <CopyToClipboard text={ tx.hash }/>
+      </DetailsInfoItem>
+      <DetailsInfoItem
+        title="Status"
+        hint="Current transaction state: Success, Failed (Error), or Pending (In Process)"
+      >
+        { tx.status }
+      </DetailsInfoItem>
+    </Grid>
+  );
 };
 
 export default TxDetails;