Merge pull request #450 from blockscout/tx-hash-type-swap

swap tx hash and type in table

ui/txs/TxsTable.pw.tsx

+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import * as txMock from 'mocks/txs/tx';
+import TestApp from 'playwright/TestApp';
+
+import TxsTable from './TxsTable';
+
+test('base view +@dark-mode +@desktop-xl', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      { /* eslint-disable-next-line react/jsx-no-bind */ }
+      <TxsTable txs={ [ txMock.base, txMock.base ] } sort={ () => () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/txs/TxsTable.tsx

@@ -27,8 +27,8 @@ const TxsTable = ({ txs, sort, sorting, top, showBlockInfo, showSocketInfo, curr
       <TheadSticky top={ top }>
         <Tr>
           <Th width="54px"></Th>
-          <Th width="20%">Type</Th>
           <Th width="18%">Txn hash</Th>
+          <Th width="20%">Type</Th>
           <Th width="15%">Method</Th>
           { showBlockInfo && <Th width="11%">Block</Th> }
           <Th width={{ xl: '128px', base: '66px' }}>From</Th>

ui/txs/TxsTableItem.tsx

@@ -84,13 +84,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress }: Props) => {
           ) }
         </Popover>
       </Td>
-      <Td>
-        <VStack alignItems="start">
-          <TxType types={ tx.tx_types }/>
-          <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined }/>
-        </VStack>
-      </Td>
-      <Td>
+      <Td pr={ 4 }>
         <VStack alignItems="start" lineHeight="24px">
           <Address width="100%">
             <AddressLink
@@ -102,6 +96,12 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress }: Props) => {
           <Text color="gray.500" fontWeight="400">{ dayjs(tx.timestamp).fromNow() }</Text>
         </VStack>
       </Td>
+      <Td>
+        <VStack alignItems="start">
+          <TxType types={ tx.tx_types }/>
+          <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined }/>
+        </VStack>
+      </Td>
       <Td whiteSpace="nowrap">
         { tx.method ? (
           <TruncatedTextTooltip label={ tx.method }>