pshenmic · alexeyandreevsky · Nov 6, 2024 · Nov 6, 2024 · Nov 7, 2024 · Nov 7, 2024
diff --git a/packages/frontend/src/app/block/[hash]/Block.js b/packages/frontend/src/app/block/[hash]/Block.js
@@ -15,6 +15,7 @@ import {
 
 function Block ({ hash }) {
   const [block, setBlock] = useState({ data: {}, loading: true, error: false })
+  const [rate, setRate] = useState({ data: {}, loading: true, error: false })
   const txHashes = block.data?.txs || []
   const tdTitleWidth = 250
 
@@ -24,6 +25,10 @@ function Block ({ hash }) {
     Api.getBlockByHash(hash)
       .then(res => fetchHandlerSuccess(setBlock, res))
       .catch(err => fetchHandlerError(setBlock, err))
+
+    Api.getRate()
+      .then(res => fetchHandlerSuccess(setRate, res))
+      .catch(err => fetchHandlerError(setRate, err))
   }
 
   useEffect(fetchData, [hash])
@@ -117,6 +122,7 @@ function Block ({ hash }) {
               <TransactionsList
                 transactions={txHashes.map(hash => ({ hash }))}
                 type={'hashes'}
+                rate={rate.data}
               />
             </Container>
           : null}

diff --git a/packages/frontend/src/app/home/Home.js b/packages/frontend/src/app/home/Home.js
@@ -162,7 +162,7 @@ function Home () {
             <Heading className={'InfoBlock__Title'} as={'h2'}>Transactions</Heading>
             {!transactions.loading
               ? !transactions.error
-                  ? <TransactionsList transactions={transactions.data.resultSet} showMoreLink={'/transactions'}/>
+                  ? <TransactionsList transactions={transactions.data.resultSet} showMoreLink={'/transactions'} rate={rate.data}/>
                   : <ErrorMessageBlock/>
               : <LoadingList itemsCount={Math.round(transactions.props.printCount * 1.5)}/>}
           </Flex>

diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js
@@ -252,7 +252,7 @@ function Identity ({ identifier }) {
                             <TabPanel px={0} h={'100%'}>
                               {!transactions.error
                                 ? !transactions.loading
-                                    ? <TransactionsList transactions={transactions.data.resultSet}/>
+                                    ? <TransactionsList transactions={transactions.data.resultSet} rate={rate.data}/>
                                     : <LoadingList itemsCount={9}/>
                                 : <ErrorMessageBlock/>}
                             </TabPanel>

diff --git a/packages/frontend/src/app/transactions/Transactions.js b/packages/frontend/src/app/transactions/Transactions.js
@@ -21,6 +21,7 @@ const paginateConfig = {
 
 function Transactions ({ defaultPage = 1, defaultPageSize }) {
   const [transactions, setTransactions] = useState({ data: {}, loading: true, error: false })
+  const [rate, setRate] = useState({ data: {}, loading: true, error: false })
   const [total, setTotal] = useState(1)
   const [pageSize, setPageSize] = useState(defaultPageSize || paginateConfig.pageSize.default)
   const [currentPage, setCurrentPage] = useState(defaultPage ? defaultPage - 1 : 0)
@@ -41,6 +42,10 @@ function Transactions ({ defaultPage = 1, defaultPageSize }) {
         setTotal(res.pagination.total)
       })
       .catch(err => fetchHandlerError(setTransactions, err))
+
+    Api.getRate()
+      .then(res => fetchHandlerSuccess(setRate, res))
+      .catch(err => fetchHandlerError(setRate, err))
   }
 
   useEffect(() => fetchData(currentPage + 1, pageSize), [pageSize, currentPage])
@@ -72,30 +77,30 @@ function Transactions ({ defaultPage = 1, defaultPageSize }) {
       className={'Transactions'}
     >
         <Container maxW={'container.xl'} className={'InfoBlock'}>
-            <Heading className={'InfoBlock__Title'} as={'h1'}>Transactions</Heading>
+          <Heading className={'InfoBlock__Title'} as={'h1'}>Transactions</Heading>
 
-            {!transactions.error
-              ? !transactions.loading
-                  ? <TransactionsList transactions={transactions.data.resultSet}/>
-                  : <LoadingList itemsCount={pageSize}/>
-              : <Container h={20}><ErrorMessageBlock/></Container>
-            }
+          {!transactions.error
+            ? !transactions.loading
+                ? <TransactionsList transactions={transactions.data.resultSet} rate={rate.data}/>
+                : <LoadingList itemsCount={pageSize}/>
+            : <Container h={20}><ErrorMessageBlock/></Container>
+          }
 
-            {transactions.data?.resultSet?.length > 0 &&
-              <div className={'ListNavigation'}>
-                <Box display={['none', 'none', 'block']} width={'155px'}/>
-                <Pagination
-                    onPageChange={({ selected }) => setCurrentPage(selected)}
-                    pageCount={pageCount}
-                    forcePage={currentPage}
-                />
-                <PageSizeSelector
-                    PageSizeSelectHandler={(e) => setPageSize(Number(e.target.value))}
-                    value={pageSize}
-                    items={paginateConfig.pageSize.values}
-                />
-              </div>
-            }
+          {transactions.data?.resultSet?.length > 0 &&
+            <div className={'ListNavigation'}>
+              <Box display={['none', 'none', 'block']} width={'155px'}/>
+              <Pagination
+                onPageChange={({ selected }) => setCurrentPage(selected)}
+                pageCount={pageCount}
+                forcePage={currentPage}
+              />
+              <PageSizeSelector
+                PageSizeSelectHandler={(e) => setPageSize(Number(e.target.value))}
+                value={pageSize}
+                items={paginateConfig.pageSize.values}
+              />
+            </div>
+          }
         </Container>
     </Container>
   )

diff --git a/packages/frontend/src/components/transactions/StatusIcon.js b/packages/frontend/src/components/transactions/StatusIcon.js
@@ -0,0 +1,15 @@
+import { SuccessIcon, ErrorIcon, QueuedIcon, PooledIcon, BroadcastedIcon } from '../ui/icons'
+
+function StatusIcon ({ status, ...props }) {
+  const StatusIcons = {
+    SUCCESS: <SuccessIcon {...props}/>,
+    FAIL: <ErrorIcon {...props}/>,
+    QUEUED: <QueuedIcon {...props}/>,
+    POOLED: <PooledIcon {...props}/>,
+    BROADCASTED: <BroadcastedIcon {...props}/>
+  }
+
+  return StatusIcons[status] || <></>
+}
+
+export default StatusIcon
diff --git a/packages/frontend/src/components/transactions/TransactionsList.js b/packages/frontend/src/components/transactions/TransactionsList.js
@@ -4,7 +4,7 @@ import { EmptyListMessage } from '../ui/lists'
 import { Grid, GridItem } from '@chakra-ui/react'
 import './TransactionsList.scss'
 
-export default function TransactionsList ({ transactions = [], showMoreLink, type = 'full', headerStyles = 'default' }) {
+export default function TransactionsList ({ transactions = [], showMoreLink, type = 'full', headerStyles = 'default', rate }) {
   const headerExtraClass = {
     default: '',
     light: 'BlocksList__ColumnTitles--Light'
@@ -14,11 +14,17 @@ export default function TransactionsList ({ transactions = [], showMoreLink, typ
     <div className={'TransactionsList'}>
       {type === 'full' &&
         <Grid className={`TransactionsList__ColumnTitles ${headerExtraClass[headerStyles] || ''}`}>
-          <GridItem className={'TransactionsList__ColumnTitle'}>
+          <GridItem className={'TransactionsList__ColumnTitle TransactionsList__ColumnTitle--Timestamp'}>
             Time
           </GridItem>
           <GridItem className={'TransactionsList__ColumnTitle TransactionsList__ColumnTitle--Hash'}>
-            Transaction Hash
+            Hash
+          </GridItem>
+          <GridItem className={'TransactionsList__ColumnTitle TransactionsList__ColumnTitle--GasUsed'}>
+            Gas used
+          </GridItem>
+          <GridItem className={'TransactionsList__ColumnTitle TransactionsList__ColumnTitle--Sender'}>
+            Sender
           </GridItem>
           <GridItem className={'TransactionsList__ColumnTitle'}>
             Type
@@ -31,6 +37,7 @@ export default function TransactionsList ({ transactions = [], showMoreLink, typ
             <TransactionsListItem
               key={key}
               transaction={transaction}
+              rate={rate}
             />
         ))
         : <EmptyListMessage>There are no transactions yet.</EmptyListMessage>

diff --git a/packages/frontend/src/components/transactions/TransactionsList.scss b/packages/frontend/src/components/transactions/TransactionsList.scss
@@ -1,13 +1,19 @@
 @use '../../styles/mixins.scss';
+@use './variables' as txs;
 @import '../../styles/variables.scss';
 
 .TransactionsList {
+  container-type: inline-size;
+
   &__ColumnTitles {
     @include mixins.defListTitles;
-    grid-template-columns: 100px calc(100% - 270px) 170px;
+    @include txs.Columns();
   }
 
   &__ColumnTitle {
+    @include txs.Column();
+    width: 100%;
+    display: block;
     word-break: normal;
     white-space: normal;
     overflow-wrap: break-word;
@@ -21,15 +27,13 @@
     }
   }
 
-  @media screen and (max-width: $breakpoint-sm) {
-    &__ColumnTitles {
-      grid-template-columns: 1fr 1fr;
-    }
-
+  @container (max-width: 660px) {
     &__ColumnTitle {
-      &--Hash {
-        display: none;
+      &--Sender {
+        width: 0;
+        height: 0;
+        visibility: hidden;
       }
     }
   }
-}
+}
diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.js b/packages/frontend/src/components/transactions/TransactionsListItem.js
@@ -4,10 +4,12 @@ import Link from 'next/link'
 import { getTimeDelta } from '../../util/index'
 import { Grid, GridItem } from '@chakra-ui/react'
 import TypeBadge from './TypeBadge'
-import { Identifier } from '../data'
+import { Identifier, Credits } from '../data'
+import StatusIcon from './StatusIcon'
+import { RateTooltip } from '../ui/Tooltips'
 import './TransactionsListItem.scss'
 
-function TransactionsListItem ({ transaction }) {
+function TransactionsListItem ({ transaction, rate }) {
   return (
     <Link
       href={`/transaction/${transaction?.hash}`}
@@ -16,17 +18,34 @@ function TransactionsListItem ({ transaction }) {
       <Grid className={`TransactionsListItem__Content ${!transaction?.timestamp && !transaction?.type ? 'TransactionsListItem__Content--Inline' : ''}`}>
         {transaction?.timestamp &&
           <GridItem className={'TransactionsListItem__Column TransactionsListItem__Column--Timestamp'}>
+            <StatusIcon className={'TransactionsListItem__StatusIcon'} status={transaction.status} w={'18px'} h={'18px'} mr={'8px'}/>
             {getTimeDelta(new Date(), new Date(transaction.timestamp))}
           </GridItem>
         }
         {transaction?.hash &&
-          <GridItem className={'TransactionsListItem__Column TransactionsListItem__Column--Identifier'}>
-            <Identifier copyButton={true} styles={['highlight-both']}>{transaction.hash}</Identifier>
+          <GridItem className={'TransactionsListItem__Column TransactionsListItem__Column--Hash'}>
+            <Identifier styles={['highlight-both']}>{transaction.hash}</Identifier>
+          </GridItem>
+        }
+        {transaction?.gasUsed &&
+          <GridItem className={'TransactionsListItem__Column TransactionsListItem__Column--GasUsed'}>
+            <RateTooltip
+              credits={transaction.gasUsed}
+              rate={rate}
+              placement={'top'}
+            >
+              <span><Credits>{transaction.gasUsed}</Credits> Credits</span>
+            </RateTooltip>
+          </GridItem>
+        }
+        {(transaction?.sender || true) &&
+          <GridItem className={'TransactionsListItem__Column TransactionsListItem__Column--Sender'}>
+            <Identifier avatar={true} styles={['highlight-both']}>3TfBxpwdmiHsrajx7EmErGnV597uYdH3JGhvwpVDcdAT</Identifier>
           </GridItem>
         }
         {transaction?.type !== undefined &&
           <GridItem className={'TransactionsListItem__Column TransactionsListItem__Column--Type'}>
-            <TypeBadge typeId={transaction.type}/>
+            <TypeBadge className={'TransactionsListItem__TypeBadge'} typeId={transaction.type}/>
           </GridItem>
         }
       </Grid>

diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.scss b/packages/frontend/src/components/transactions/TransactionsListItem.scss
@@ -1,38 +1,34 @@
 @use '../../styles/mixins.scss';
+@use './variables' as txs;
 @import '../../styles/variables.scss';
 
 .TransactionsListItem {
   @include mixins.DefListItem;
   display: block;
 
   &__Content {
-    display: grid;
-    grid-template-columns: 100px 1fr auto;
+    @include txs.Columns();
 
     &--Inline {
       display: inline !important;
     }
   }
 
   &__Column {
-    display: flex;
-    align-items: center;
+    @include txs.Column();
 
     &--Timestamp {
       font-family: $font-mono;
-      font-size: 12px;
-      margin-right: 16px;
+      font-size: 0.75rem;
       white-space: nowrap;
       color: #fff;
     }
 
-    &--Identifier {
+    &--Hash, &--Sender {
       color: var(--chakra-colors-gray-250);
       font-family: $font-mono;
       flex-grow: 1;
-      margin-right: 16px;
-      font-size: 12px;
-
+      font-size: 0.75rem;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -48,28 +44,46 @@
       justify-content: flex-end;
       white-space: nowrap;
     }
-  }
 
-  @media screen and (max-width: $breakpoint-sm) {
-      &__Column {
-        &--Timestamp {
-          grid-column: 1 / 1;
-        }
+    &--GasUsed {
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      color: #fff;
+      white-space: nowrap;
+      text-align: left;
+    }
+  }
 
-        &--Identifier {
-          order: 3;
-          grid-column: 1 / -1;
-          margin-right: 0;
-          margin-top: 12px;
+  @container (max-width: 660px) {
+    &__Column {
+      &--Sender {
+        .Identifier__SymbolsContainer {
+          display: none;
         }
 
-        &--Type {
-          grid-column: 0 / 1;
+        .Identifier__Avatar {
+          margin: 0;
         }
       }
+    }
+  }
+
+  @container (max-width: 400px) {
+    padding: 5px 8px;
 
-      &__Content {
-        grid-template-columns: 1fr 1fr;
+    &__Column {
+      &, .Identifier {
+        font-size: 0.563rem;
       }
+    }
+
+    &__TypeBadge {
+      font-size: 0.438rem !important;
+      line-height: 15px;
+    }
+
+    &__StatusIcon {
+      display: none !important;
+    }
   }
 }
diff --git a/packages/frontend/src/components/transactions/TypeBadge.js b/packages/frontend/src/components/transactions/TypeBadge.js
@@ -3,7 +3,7 @@ import { getTransitionTypeKeyById } from '../../util/index'
 import { TransactionTypesEnum, TransactionTypesColors } from '../../enums/state.transition.type'
 import { Tooltip } from '../ui/Tooltips'
 
-function TypeBadge ({ typeId }) {
+function TypeBadge ({ typeId, ...props }) {
   const TransitionTypeKey = getTransitionTypeKeyById(typeId)
 
   const descriptions = {
@@ -24,7 +24,10 @@ function TypeBadge ({ typeId }) {
       content={descriptions[TransitionTypeKey]}
       placement={'top'}
     >
-      <Badge colorScheme={TransactionTypesColors[TransitionTypeKey]}>
+      <Badge
+        colorScheme={TransactionTypesColors[TransitionTypeKey]}
+        {...props}
+      >
         {TransactionTypesEnum[TransitionTypeKey]}
       </Badge>
     </Tooltip>