Development

README.md

@@ -1,5 +1,7 @@
 # MultiversX Explorer
 
+![explorer.multiversx.com](https://github.com/multiversx/mx-explorer-dapp/blob/main/public/share.jpg)
+
 This project was bootstrapped with [Vite](https://vitejs.dev/guide/).
 
 ## Deployments

src/components/AccountLink/AccountLink.tsx

@@ -14,13 +14,21 @@ export const AccountLink = ({
   address,
   assets,
   className,
-  linkClassName
+  linkClassName,
+  'data-testid': testId
 }: AccountLinkType) => {
   return (
     <div
-      className={classNames('d-flex', 'align-items-center', className, {
-        hash: !className
-      })}
+      className={classNames(
+        'd-flex',
+        'align-items-center',
+        'trim-wrapper',
+        className,
+        {
+          hash: !className
+        }
+      )}
+      data-testid={testId}
     >
       <ScAddressIcon initiator={address} />
       {addressIsBech32(address) ? (

src/components/NetworkLink/NetworkLink.tsx

@@ -9,6 +9,7 @@ export const NetworkLink = ({
   to,
   children,
   preventScrollReset = false,
+  'data-testid': dataTestId,
   ...rest
 }: NetworkLinkPropsType) => {
   const { id: activeNetworkId } = useSelector(activeNetworkSelector);
@@ -32,7 +33,11 @@ export const NetworkLink = ({
   };
 
   return (
-    <Link {...props} preventScrollReset={preventScrollReset}>
+    <Link
+      {...props}
+      preventScrollReset={preventScrollReset}
+      {...(dataTestId ? { 'data-testid': dataTestId } : {})}
+    >
       {children}
     </Link>
   );

src/components/ScResultsTable/components/ScResultRow.tsx

@@ -1,38 +1,18 @@
 import {
   ScAddressIcon,
-  ShardSpan,
   NetworkLink,
   TimeAgo,
   Trim,
-  Denominate
+  Denominate,
+  AccountLink
 } from 'components';
-import { addressIsBech32, urlBuilder } from 'helpers';
 import { TransactionSCResultType } from 'types';
 
 export interface ScResultRowType {
   scResult: TransactionSCResultType;
   address?: string;
 }
 
-export const ScAccountLink = ({
-  address,
-  testId
-}: {
-  address: string;
-  testId?: string;
-}) =>
-  addressIsBech32(address) ? (
-    <NetworkLink
-      to={urlBuilder.accountDetails(address)}
-      data-testid={testId ? testId : 'addressLink'}
-      className='trim-wrapper'
-    >
-      <Trim text={address} />
-    </NetworkLink>
-  ) : (
-    <ShardSpan shard={address} />
-  );
-
 export const ScResultRow = ({ scResult, address }: ScResultRowType) => {
   const directionOut = address === scResult.sender;
   const directionIn = address === scResult.receiver;
@@ -65,7 +45,7 @@ export const ScResultRow = ({ scResult, address }: ScResultRowType) => {
           {directionOut ? (
             <Trim text={scResult.sender} />
           ) : (
-            <ScAccountLink address={scResult.sender} testId='senderLink' />
+            <AccountLink address={scResult.sender} data-testid='senderLink' />
           )}
         </div>
       </td>
@@ -75,7 +55,10 @@ export const ScResultRow = ({ scResult, address }: ScResultRowType) => {
           {directionIn ? (
             <Trim text={scResult.receiver} />
           ) : (
-            <ScAccountLink address={scResult.receiver} testId='receiverLink' />
+            <AccountLink
+              address={scResult.receiver}
+              data-testid='receiverLink'
+            />
           )}
         </div>
       </td>

src/components/TimeAgo/TimeAgo.tsx

@@ -5,11 +5,13 @@ import { timeAgo } from './helpers/timeAgo';
 export const TimeAgo = ({
   value,
   short = false,
-  tooltip = false
+  tooltip = false,
+  showAgo = false
 }: {
   value: number;
   short?: boolean;
   tooltip?: boolean;
+  showAgo?: boolean;
 }) => {
   const ms = value * 1000;
   let result = timeAgo(ms);
@@ -31,9 +33,15 @@ export const TimeAgo = ({
         </Tooltip>
       )}
     >
-      <span>{result}</span>
+      <span>
+        {result}
+        {showAgo ? ' ago' : ''}
+      </span>
     </OverlayTrigger>
   ) : (
-    <>{result}</>
+    <>
+      {result}
+      {showAgo ? ' ago' : ''}
+    </>
   );
 };

src/components/TimeAgo/helpers/timeAgo.ts

@@ -9,8 +9,6 @@ export function dhms(ms: number) {
   const minsms = hrsms % (60 * 1000);
   const secs = Math.floor(minsms / 1000);
 
-  // let diff = ' ago';
-  const diff = '';
   let secsString = secs + ' sec';
   let minsString = mins + ' min';
   let hrsString = hrs + ' hr';
@@ -21,17 +19,17 @@ export function dhms(ms: number) {
   if (hrs > 1) hrsString = hrs + ' hrs';
   if (days > 1) daysString = days + ' days';
 
-  if (days >= 1) return daysString + ' ' + hrsString + diff;
+  if (days >= 1) return daysString + ' ' + hrsString;
   if (hrs >= 1) {
-    const minutesString = mins === 0 ? '' : ' ' + minsString + diff;
+    const minutesString = mins === 0 ? '' : ' ' + minsString;
     return hrsString + minutesString;
   }
   if (mins >= 1) {
-    const secString = secs === 0 ? '' : ' ' + secsString + diff;
+    const secString = secs === 0 ? '' : ' ' + secsString;
     return minsString + secString;
   }
 
-  return secsString + diff;
+  return secsString;
 }
 
 export const timeAgo = (timestamp: number) => {

src/components/TransactionAction/TransactionAction.tsx

@@ -3,9 +3,8 @@ import { useSelector } from 'react-redux';
 
 import { ReactComponent as DefaultAvatar } from 'assets/img/default-avatar.svg';
 import {
-  ScAddressIcon,
   NetworkLink,
-  AccountName,
+  AccountLink,
   Denominate,
   TransactionActionBlock,
   NftBadge
@@ -110,16 +109,11 @@ const ActionText = ({
       }
 
       return addressIsBech32(entry.address) ? (
-        <div className='d-flex align-items-center'>
-          <ScAddressIcon initiator={entry.address} />
-          <NetworkLink
-            to={urlBuilder.accountDetails(entry.address)}
-            data-testid='receiverLink'
-            className='trim-wrapper'
-          >
-            <AccountName address={entry.address} assets={entryAssets} />
-          </NetworkLink>
-        </div>
+        <AccountLink
+          address={entry.address}
+          assets={entryAssets}
+          data-testid='receiverLink'
+        />
       ) : (
         ''
       );

src/components/TransactionsTable/components/TransactionRow.tsx

@@ -1,5 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
+  AccountLink,
   ScAddressIcon,
   ShardSpan,
   NetworkLink,
@@ -9,7 +10,7 @@ import {
   AccountName,
   TransactionIcon
 } from 'components';
-import { addressIsBech32, urlBuilder, getDisplayReceiver } from 'helpers';
+import { urlBuilder, getDisplayReceiver } from 'helpers';
 import { faArrowRight } from 'icons/regular';
 import { UITransactionType, TransferTypeEnum } from 'types';
 
@@ -99,29 +100,21 @@ export const TransactionRow = ({
           {showLockedAccounts && (
             <LockedTokenAddressIcon address={transaction.sender} />
           )}
-          <ScAddressIcon initiator={transaction.sender} />
+
           {directionOut ? (
-            <AccountName
+            <>
+              <ScAddressIcon initiator={transaction.sender} />
+              <AccountName
+                address={transaction.sender}
+                assets={transaction.senderAssets}
+              />
+            </>
+          ) : (
+            <AccountLink
               address={transaction.sender}
               assets={transaction.senderAssets}
+              data-testid='senderLink'
             />
-          ) : (
-            <>
-              {addressIsBech32(transaction.sender) ? (
-                <NetworkLink
-                  to={urlBuilder.accountDetails(transaction.sender)}
-                  data-testid='senderLink'
-                  className='trim-wrapper'
-                >
-                  <AccountName
-                    address={transaction.sender}
-                    assets={transaction.senderAssets}
-                  />
-                </NetworkLink>
-              ) : (
-                <ShardSpan shard={transaction.sender} />
-              )}
-            </>
           )}
         </div>
       </td>
@@ -140,17 +133,18 @@ export const TransactionRow = ({
       <td>
         <div className='d-flex align-items-center receiver'>
           {showLockedAccounts && <LockedTokenAddressIcon address={receiver} />}
-          <ScAddressIcon initiator={receiver} />
+
           {directionIn ? (
-            <AccountName address={receiver} assets={receiverAssets} />
+            <>
+              <ScAddressIcon initiator={receiver} />
+              <AccountName address={receiver} assets={receiverAssets} />
+            </>
           ) : (
-            <NetworkLink
-              to={urlBuilder.accountDetails(receiver)}
+            <AccountLink
+              address={receiver}
+              assets={receiverAssets}
               data-testid='receiverLink'
-              className='trim-wrapper'
-            >
-              <AccountName address={receiver} assets={receiverAssets} />
-            </NetworkLink>
+            />
           )}
         </div>
       </td>

src/components/TransactionsTable/components/TransactionValue/TransactionValue.tsx

@@ -28,11 +28,8 @@ const MultipleTokensBadge = ({
   );
 
   return (
-    <Overlay title={<Tooltip />}>
-      <FontAwesomeIcon
-        icon={faLayerPlus}
-        className='ms-2 text-neutral-400 cursor-context'
-      />
+    <Overlay title={<Tooltip />} className='cursor-context multiple-tokens'>
+      <FontAwesomeIcon icon={faLayerPlus} className='ms-1 text-neutral-400' />
     </Overlay>
   );
 };

src/components/TransactionsTable/transactionsTable.styles.scss

@@ -25,8 +25,8 @@
     }
     .transaction-value {
       color: var(--body-color);
-      max-width: 13.5rem;
-      min-width: 13.5rem;
+      max-width: 12.5rem;
+      min-width: 12.5rem;
     }
     .transaction-function {
       max-width: 9.5rem;

src/components/Trim/trim.styles.scss

@@ -153,6 +153,7 @@ a:hover > .trim span {
   }
 }
 .table .trim-size-xl .trim {
+  max-width: 10rem;
   @include media-breakpoint-up(md) {
     max-width: 13rem;
   }

src/hooks/adapter/helpers.ts

@@ -33,6 +33,7 @@ export function getTransactionsParams({
   miniBlockHash,
   search,
   token,
+  order,
   withUsername = true
 }: GetTransactionsType) {
   const params: AdapterProviderPropsType['params'] = {
@@ -50,7 +51,8 @@ export function getTransactionsParams({
     ...(status ? { status } : {}),
     ...(miniBlockHash ? { miniBlockHash } : {}),
     ...(search ? { search } : {}),
-    ...(token ? { token } : {})
+    ...(token ? { token } : {}),
+    ...(order ? { order } : {})
   };
 
   return params;
@@ -136,7 +138,8 @@ export function getCollectionsParams({
   identifiers,
   type,
   sort,
-  excludeMetaESDT
+  excludeMetaESDT,
+  withOwner
 }: GetCollectionsType) {
   const params: AdapterProviderPropsType['params'] = {
     ...(fields !== undefined ? { fields } : {}),
@@ -146,7 +149,8 @@ export function getCollectionsParams({
     ...(sort !== undefined ? { sort } : {}),
     ...(excludeMetaESDT !== undefined ? { excludeMetaESDT } : {}),
     ...(page !== undefined ? { from: (page - 1) * size } : {}),
-    ...(size !== undefined ? { size } : {})
+    ...(size !== undefined ? { size } : {}),
+    ...(withOwner !== undefined ? { withOwner } : {})
   };
 
   return params;