Development

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- ## [[2.3.3](https://github.com/multiversx/mx-explorer-dapp/pull/213)] - 2026-01-22
+
+- [Websocket Transfers](https://github.com/multiversx/mx-explorer-dapp/pull/210)
+
 - ## [[2.3.2](https://github.com/multiversx/mx-explorer-dapp/pull/208)] - 2025-11-27
 
 - [Handle deprecatedRelayedV1V2](https://github.com/multiversx/mx-explorer-dapp/pull/208)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mx-explorer-dapp",
   "description": "MultiversX Blockchain Explorer",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",
   "repository": "multiversx/mx-explorer-dapp",

src/assets/scss/common/variables/_bootstrap-variables.scss

@@ -393,7 +393,7 @@ $dropdown-link-color: $neutral-400;
 $dropdown-link-hover-color: $body-color;
 $dropdown-link-hover-bg: $neutral-700;
 $dropdown-link-active-color: $body-color;
-$dropdown-link-active-bg: $neutral-900;
+$dropdown-link-active-bg: $neutral-980;
 $dropdown-link-disabled-color: $neutral-700;
 $dropdown-header-color: $neutral-700;
 // scss-docs-end dropdown-variables

src/components/Chart/ChartLine.tsx

@@ -1,17 +1,10 @@
 import BigNumber from 'bignumber.js';
 import classNames from 'classnames';
 import moment from 'moment';
-import {
-  ResponsiveContainer,
-  XAxis,
-  YAxis,
-  Line,
-  LineChart,
-  Tooltip,
-  CartesianGrid
-} from 'recharts';
+import { XAxis, YAxis, Line, Tooltip, CartesianGrid } from 'recharts';
 
 import { getColors } from 'helpers';
+import { ChartLineContainer } from './ChartLineContainer';
 import { ChartTooltip } from './ChartTooltip';
 import { formatYAxis } from './helpers/formatYAxis';
 import { getChartMergedData } from './helpers/getChartMergedData';
@@ -82,8 +75,8 @@ export const ChartLine = ({
         'has-only-start-end-tick': hasOnlyStartEndTick
       })}
     >
-      <ResponsiveContainer width={width ?? '100%'} height={height ?? '100%'}>
-        <LineChart data={chartData}>
+      <ChartLineContainer width={width} height={height} data={chartData}>
+        <>
           <defs>
             <linearGradient id='transparent' x1='0' y1='0' x2='0' y2='1'>
               <stop offset='100%' stopColor='transparent' stopOpacity={0} />
@@ -190,8 +183,8 @@ export const ChartLine = ({
               }
             />
           )}
-        </LineChart>
-      </ResponsiveContainer>
+        </>
+      </ChartLineContainer>
     </div>
   );
 };

src/components/Chart/ChartLineContainer.tsx

@@ -0,0 +1,28 @@
+import { JSXElementConstructor, memo, ReactElement } from 'react';
+import { ResponsiveContainer, LineChart } from 'recharts';
+import { MergedChartDataType } from './helpers/types';
+
+interface ChartLineContainerUIType {
+  children: ReactElement<unknown, string | JSXElementConstructor<any>>;
+  data: MergedChartDataType[];
+  width?: string | number;
+  height?: string | number;
+}
+
+export const ChartLineContainer = memo(
+  ({ children, data, width, height }: ChartLineContainerUIType) => {
+    if (typeof width === 'number' && typeof height === 'number') {
+      return (
+        <LineChart data={data} width={width} height={height}>
+          {children}
+        </LineChart>
+      );
+    }
+
+    return (
+      <ResponsiveContainer width={width ?? '100%'} height={height ?? '100%'}>
+        <LineChart data={data}>{children}</LineChart>
+      </ResponsiveContainer>
+    );
+  }
+);

src/components/NftPreview/NftPreview.tsx

@@ -83,50 +83,52 @@ export const NftPreview = ({ token }: { token: NftType }) => {
     <div className='nft-details d-flex flex-column text-start'>
       <ul className='list-unstyled mb-0'>
         {token.uris.map((uri, i) => {
-          if (uri !== null && uri !== undefined) {
-            const link = Buffer.from(String(uri), 'base64').toString();
-            const { stringWithLinks, found } = scamFlag(link, token.scamInfo);
+          if (!uri) {
+            return null;
+          }
 
-            return (
-              <li key={i}>
-                <FontAwesomeIcon
-                  icon={faCaretRight}
-                  size='xs'
-                  className='text-neutral-400 me-2'
-                />
-                {link.startsWith(
-                  'https://ipfs.io/ipfs/'
-                ) /* && token.isWhitelistedStorage === true */ ? (
-                  <ModalLink
-                    href={found ? stringWithLinks : link}
-                    target='_blank'
-                    rel='noreferrer nofollow noopener'
-                    className='text-break-all'
-                  >
-                    <Thumbnail link={found ? '' : link} token={token} index={i}>
-                      {found ? stringWithLinks : link}
+          const link = Buffer.from(String(uri), 'base64').toString();
+          const { stringWithLinks, found } = scamFlag(link, token.scamInfo);
+
+          return (
+            <li key={i}>
+              <FontAwesomeIcon
+                icon={faCaretRight}
+                size='xs'
+                className='text-neutral-400 me-2'
+              />
+              {link.startsWith(
+                'https://ipfs.io/ipfs/'
+              ) /* && token.isWhitelistedStorage === true */ ? (
+                <ModalLink
+                  href={found ? stringWithLinks : link}
+                  target='_blank'
+                  rel='noreferrer nofollow noopener'
+                  className='text-break-all'
+                >
+                  <Thumbnail link={found ? '' : link} token={token} index={i}>
+                    {found ? stringWithLinks : link}
+                  </Thumbnail>
+                </ModalLink>
+              ) : (
+                <span className='text-break'>
+                  {found ? (
+                    <Anchorme
+                      linkComponent={ModalLink}
+                      target='_blank'
+                      rel='noreferrer nofollow noopener'
+                    >
+                      {stringWithLinks}
+                    </Anchorme>
+                  ) : (
+                    <Thumbnail link={link} token={token} index={i}>
+                      <span>{link}</span>
                     </Thumbnail>
-                  </ModalLink>
-                ) : (
-                  <span className='text-break'>
-                    {found ? (
-                      <Anchorme
-                        linkComponent={ModalLink}
-                        target='_blank'
-                        rel='noreferrer nofollow noopener'
-                      >
-                        {stringWithLinks}
-                      </Anchorme>
-                    ) : (
-                      <Thumbnail link={link} token={token} index={i}>
-                        <span>{link}</span>
-                      </Thumbnail>
-                    )}
-                  </span>
-                )}
-              </li>
-            );
-          } else return null;
+                  )}
+                </span>
+              )}
+            </li>
+          );
         })}
       </ul>
       {/* {token.isWhitelistedStorage === false && (

src/helpers/processData/index.ts

@@ -7,6 +7,7 @@ export * from './processGrowthPrice';
 export * from './processGrowthSearch';
 export * from './processGrowthStaking';
 export * from './processGrowthTransactions';
+export * from './processListUpdates';
 export * from './processNodesIdentities';
 export * from './processNodesOverview';
 export * from './processNodesVersions';

src/helpers/processData/processListUpdates.ts

@@ -0,0 +1,42 @@
+import { PAGE_SIZE } from 'appConstants';
+
+interface ProcessListUpdatesProps {
+  existing: any[];
+  incoming: any[];
+  uniqueKey: string;
+  size?: number;
+}
+
+export const processListUpdates = ({
+  existing = [],
+  incoming = [],
+  uniqueKey,
+  size = PAGE_SIZE
+}: ProcessListUpdatesProps) => {
+  const existingSet = new Set(existing.map((entry) => entry[uniqueKey]));
+  const updated = new Map<string, any>();
+  const result: any[] = [];
+
+  for (const entry of existing) {
+    updated.set(entry[uniqueKey], entry);
+  }
+  for (const entry of incoming) {
+    updated.set(entry[uniqueKey], { ...entry, isNew: true });
+  }
+
+  for (const entry of incoming) {
+    if (!existingSet.has(entry[uniqueKey])) {
+      result.push(updated.get(entry[uniqueKey])!);
+    }
+  }
+
+  for (const entry of existing) {
+    if (entry[uniqueKey] === undefined) {
+      continue;
+    }
+    result.push(updated.get(entry[uniqueKey])!);
+  }
+
+  // keep the resulting set the same size as the page size prop
+  return result.slice(0, size);
+};

src/hooks/adapter/requests/useTokenRequests.ts

@@ -14,8 +14,8 @@ export const useTokenRequests = () => {
   return {
     /* Tokens */
 
-    getToken: (tokenId: string, { signal, timeout }: AxiosParamsApiType = {}) =>
-      provider({ url: `/tokens/${tokenId}`, signal, timeout }),
+    getToken: (token: string, { signal, timeout }: AxiosParamsApiType = {}) =>
+      provider({ url: `/tokens/${token}`, signal, timeout }),
 
     getTokens: ({ signal, timeout, ...params }: GetTokensType) =>
       provider({
@@ -34,13 +34,13 @@ export const useTokenRequests = () => {
       }),
 
     getTokenTransactions: ({
-      tokenId,
+      token,
       signal,
       timeout,
       ...params
     }: GetTransactionsType & GetTokenResourceType) =>
       provider({
-        url: `/tokens/${tokenId}/transactions`,
+        url: `/tokens/${token}/transactions`,
         signal,
         timeout,
         params: getTransactionsParams({
@@ -49,13 +49,13 @@ export const useTokenRequests = () => {
       }),
 
     getTokenTransactionsCount: ({
-      tokenId,
+      token,
       signal,
       timeout,
       ...params
     }: GetTransactionsType & GetTokenResourceType) =>
       provider({
-        url: `/tokens/${tokenId}/transactions/c`,
+        url: `/tokens/${token}/transactions/c`,
         signal,
         timeout,
         params: getTransactionsParams({
@@ -65,13 +65,13 @@ export const useTokenRequests = () => {
       }),
 
     getTokenTransfers: ({
-      tokenId,
+      token,
       signal,
       timeout,
       ...params
     }: GetTransactionsType & GetTokenResourceType) =>
       provider({
-        url: `/tokens/${tokenId}/transfers`,
+        url: `/tokens/${token}/transfers`,
         signal,
         timeout,
         params: getTransactionsParams({
@@ -80,13 +80,13 @@ export const useTokenRequests = () => {
       }),
 
     getTokenTransfersCount: ({
-      tokenId,
+      token,
       signal,
       timeout,
       ...params
     }: GetTransactionsType & GetTokenResourceType) =>
       provider({
-        url: `/tokens/${tokenId}/transfers/c`,
+        url: `/tokens/${token}/transfers/c`,
         signal,
         timeout,
         params: getTransactionsParams({
@@ -96,32 +96,28 @@ export const useTokenRequests = () => {
       }),
 
     getTokenAccounts: ({
-      tokenId,
+      token,
       signal,
       timeout,
       ...params
     }: GetTokensType & GetTokenResourceType) =>
       provider({
-        url: `/tokens/${tokenId}/accounts`,
+        url: `/tokens/${token}/accounts`,
         signal,
         timeout,
         params: getTokensParams({ ...params })
       }),
 
-    getTokenAccountsCount: ({
-      tokenId,
-      signal,
-      timeout
-    }: GetTokenResourceType) =>
+    getTokenAccountsCount: ({ token, signal, timeout }: GetTokenResourceType) =>
       provider({
-        url: `/tokens/${tokenId}/accounts/count`,
+        url: `/tokens/${token}/accounts/count`,
         signal,
         timeout
       }),
 
-    getTokenSupply: ({ tokenId, signal, timeout }: GetTokenResourceType) =>
+    getTokenSupply: ({ token, signal, timeout }: GetTokenResourceType) =>
       provider({
-        url: `/tokens/${tokenId}/supply`,
+        url: `/tokens/${token}/supply`,
         signal,
         timeout
       })

src/hooks/fetch/index.ts

@@ -12,5 +12,6 @@ export * from './useFetchNodesVersions';
 export * from './useFetchShards';
 export * from './useFetchStats';
 export * from './useFetchTransactions';
+export * from './useFetchCustomTransfers';
 export * from './useFetchTransactionsInPool';
 export * from './useFetchWebsocketConfig';

src/hooks/fetch/useFetchApiData.ts

@@ -22,7 +22,9 @@ export interface FetchApiDataProps {
   event?: WebsocketEventsEnum;
   websocketConfig?: Record<string, any>;
   urlParams?: Record<string, any>;
+  uuid?: string;
   isRefreshPaused?: boolean;
+  isCustomUpdate?: boolean;
 }
 
 export const useFetchApiData = ({
@@ -35,6 +37,8 @@ export const useFetchApiData = ({
   event,
   websocketConfig = {},
   urlParams = {},
+  uuid = '',
+  isCustomUpdate,
   isRefreshPaused = false
 }: FetchApiDataProps) => {
   const { page, size } = useGetPage();
@@ -61,7 +65,11 @@ export const useFetchApiData = ({
   useRegisterWebsocketListener({
     subscription,
     event,
-    config: { from: 0, size: PAGE_SIZE, ...websocketConfig },
+    uuid,
+    config: {
+      ...(isCustomUpdate ? {} : { from: 0, size: PAGE_SIZE }),
+      ...websocketConfig
+    },
     onWebsocketEvent,
     isPaused
   });