multiversx · arhtudormorar · Apr 9, 2025 · Mar 30, 2025 · Mar 30, 2025 · Mar 31, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[v4.0.1](https://github.com/multiversx/mx-sdk-dapp/pull/1397)] - 2025-03-31
+- [Added shard data to the Ledger address table](https://github.com/multiversx/mx-sdk-dapp/pull/1396)
+
 ## [[v4.0.0](https://github.com/multiversx/mx-sdk-dapp/pull/1395)] - 2025-03-27
+
 - [Changed sdk-core dependecy to `^14x`](https://github.com/multiversx/mx-sdk-dapp/pull/1394)
 
 ## [[v4.0.0-alpha.0](https://github.com/multiversx/mx-sdk-dapp/pull/1393)] - 2025-03-27

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "A library to hold the main logic for a dapp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",

diff --git a/src/UI/Pagination/Pagination.tsx b/src/UI/Pagination/Pagination.tsx
@@ -12,6 +12,7 @@ import classNames from 'classnames';
 import { DataTestIdsEnum } from 'constants/index';
 import { WithStylesImportType } from 'hocs/useStyles';
 import { withStyles } from 'hocs/withStyles';
+import { Tooltip } from 'UI/Tooltip';
 import { WithClassnameType } from 'UI/types';
 import { stringIsInteger } from 'utils/validation/stringIsInteger';
 
@@ -153,11 +154,23 @@ const PaginationComponent = ({
                 </span>
               </div>
             ) : (
-              <PaginationEllipsisForm
-                paginationItem={paginationItem}
-                maxPageToSearchFor={totalPages}
-                onSearch={handlePageClick}
-              />
+              <Tooltip
+                triggerOnClick
+                trigger={(isTooltipVisible) => (
+                  <div
+                    className={classNames(styles?.paginationTooltip, {
+                      [styles?.active]: isTooltipVisible
+                    })}
+                  >
+                    {paginationItem}
+                  </div>
+                )}
+              >
+                <PaginationEllipsisForm
+                  maxPageToSearchFor={totalPages}
+                  onSearch={handlePageClick}
+                />
+              </Tooltip>
             )}
           </div>
         ))}

diff --git a/src/UI/Pagination/components/PaginationEllipsisForm/PaginationEllipsisForm.tsx b/src/UI/Pagination/components/PaginationEllipsisForm/PaginationEllipsisForm.tsx
@@ -1,6 +1,5 @@
 import React, {
   ChangeEvent,
-  FocusEvent,
   FormEvent,
   KeyboardEvent,
   MouseEvent,
@@ -9,26 +8,21 @@ import React, {
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import BigNumber from 'bignumber.js';
-import classNames from 'classnames';
 
 import { WithStylesImportType } from 'hocs/useStyles';
 import { withStyles } from 'hocs/withStyles';
 
 export interface PaginationEllipsisFormPropsType extends WithStylesImportType {
-  paginationItem: string;
   maxPageToSearchFor: number;
   onSearch: (page: number) => void;
 }
 
 const PaginationEllipsisFormComponent = ({
   styles,
   onSearch,
-  paginationItem,
   maxPageToSearchFor
 }: PaginationEllipsisFormPropsType) => {
   const [pageValue, setPageValue] = useState('');
-  const [isEllipsisTooltipVisible, setIsEllipsisTooltipVisible] =
-    useState(false);
 
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     if (['Equal', 'Minus', 'Period', 'KeyE', 'Comma'].includes(event.code)) {
@@ -56,75 +50,43 @@ const PaginationEllipsisFormComponent = ({
     onSearch(parseInt(pageValue));
   };
 
-  const handleEllipsisClick = (event: MouseEvent<HTMLElement>) => {
-    event.preventDefault();
-    setIsEllipsisTooltipVisible(
-      (isEllipsisTooltipVisible) => !isEllipsisTooltipVisible
-    );
-  };
-
-  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
-    if (!event.currentTarget.contains(event.relatedTarget)) {
-      setIsEllipsisTooltipVisible(false);
-    }
-  };
-
   return (
-    <div
-      onClick={handleEllipsisClick}
-      className={classNames(styles?.paginationEllipsisFormContainer, {
-        [styles?.active]: isEllipsisTooltipVisible
-      })}
+    <form
+      className={styles?.paginationEllipsisForm}
+      onClick={(event) => event.stopPropagation()}
+      onSubmit={handleSubmit}
     >
-      {isEllipsisTooltipVisible && (
-        <div
-          className={styles?.paginationEllipsisFormWrapper}
-          onBlur={handleBlur}
-          tabIndex={-1}
-        >
-          <form
-            className={styles?.paginationEllipsisForm}
-            onClick={(event) => event.stopPropagation()}
-            onSubmit={handleSubmit}
-          >
-            <label
-              htmlFor='paginationSearch'
-              className={styles?.paginationEllipsisFormFieldLabel}
-            >
-              Page
-            </label>
+      <label
+        htmlFor='paginationSearch'
+        className={styles?.paginationEllipsisFormFieldLabel}
+      >
+        Page
+      </label>
 
-            <div className={styles?.paginationEllipsisFormField}>
-              <input
-                autoFocus
-                type='number'
-                autoComplete='off'
-                id='paginationSearch'
-                name='paginationSearch'
-                onChange={handleChange}
-                onKeyDown={handleKeyDown}
-                value={pageValue}
-                className={styles?.paginationEllipsisFormFieldInput}
-              />
+      <div className={styles?.paginationEllipsisFormField}>
+        <input
+          autoFocus
+          type='number'
+          autoComplete='off'
+          id='paginationSearch'
+          name='paginationSearch'
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          value={pageValue}
+          className={styles?.paginationEllipsisFormFieldInput}
+        />
 
-              <div
-                className={styles?.paginationEllipsisFormButton}
-                onClick={handleMagnifyingGlassClick}
-              >
-                <FontAwesomeIcon
-                  icon={faMagnifyingGlass}
-                  className={styles?.paginationEllipsisFormButtonIcon}
-                />
-              </div>
-            </div>
-          </form>
+        <div
+          className={styles?.paginationEllipsisFormButton}
+          onClick={handleMagnifyingGlassClick}
+        >
+          <FontAwesomeIcon
+            icon={faMagnifyingGlass}
+            className={styles?.paginationEllipsisFormButtonIcon}
+          />
         </div>
-      )}
-
-      <span className={styles?.paginationEllipsisFormTrigger}>
-        {paginationItem}
-      </span>
-    </div>
+      </div>
+    </form>
   );
 };
 

diff --git a/src/UI/Pagination/components/PaginationEllipsisForm/paginationEllipsisFormStyles.scss b/src/UI/Pagination/components/PaginationEllipsisForm/paginationEllipsisFormStyles.scss
@@ -1,106 +1,63 @@
-.pagination-ellipsis-form-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 200ms ease;
-  border-radius: 50%;
+.pagination-ellipsis-form {
+  text-align: left;
+  gap: 8px;
+  cursor: default;
 
-  &:hover,
-  &.active {
-    background-color: #143736;
+  .pagination-ellipsis-form-field-label {
+    margin-bottom: 8px;
+    font-size: 12px;
+    color: #a3a3a3;
+    cursor: pointer;
   }
 
-  .pagination-ellipsis-form-wrapper {
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: calc(100% + 24px);
-    position: absolute;
+  .pagination-ellipsis-form-field {
+    display: flex;
+    gap: 8px;
+    position: relative;
 
-    .pagination-ellipsis-form {
-      flex-direction: row;
-      text-align: left;
-      gap: 8px;
-      cursor: default;
-      background: #000000;
-      border-radius: 12px;
-      border: 1px solid #262626;
-      padding: 8px;
+    .pagination-ellipsis-form-field-input {
+      width: 80px;
+      height: calc(40px + 4px);
+      border-width: 1px;
+      box-shadow: none;
+      font-size: 1rem;
+      padding: 12px;
+      padding-right: calc(40px);
+      text-align: center;
+      transition: all 200ms ease;
+      border-color: transparent;
+      appearance: none;
+      -webkit-appearance: none;
+      appearance: none;
+      -moz-appearance: textfield;
+      margin: 0;
 
-      &:after {
-        width: 8px;
-        height: 8px;
-        border: 1px solid #262626;
-        background-color: #000000;
-        border-top: none;
-        border-right: none;
-        position: absolute;
-        content: '';
-        left: 50%;
-        transform-origin: center;
-        transform: translateX(calc(50% - 8px)) rotateZ(calc(45deg * -1));
-        bottom: calc(20px / 4 * -1);
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
       }
 
-      .pagination-ellipsis-form-field-label {
-        margin-bottom: 8px;
-        font-size: 12px;
-        color: #a3a3a3;
-        cursor: pointer;
+      &:focus {
+        border-color: #23f7dd;
       }
+    }
 
-      .pagination-ellipsis-form-field {
-        display: flex;
-        gap: 8px;
-        position: relative;
-
-        .pagination-ellipsis-form-field-input {
-          width: 80px;
-          height: calc(40px + 4px);
-          border-width: 1px;
-          box-shadow: none;
-          font-size: 1rem;
-          padding: 12px;
-          padding-right: calc(40px);
-          text-align: center;
-          transition: all 200ms ease;
-          border-color: transparent;
-          appearance: none;
-          -webkit-appearance: none;
-          appearance: none;
-          -moz-appearance: textfield;
-          margin: 0;
-
-          &::-webkit-outer-spin-button,
-          &::-webkit-inner-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
-          }
-
-          &:focus {
-            border-color: #23f7dd;
-          }
-        }
-
-        .pagination-ellipsis-form-button {
-          outline: none;
-          border: none;
-          background-color: transparent;
-          line-height: 1;
-          cursor: pointer;
-          position: absolute;
-          right: 4px;
-          transform: translateY(-50%);
-          font-size: 12px;
-          padding: calc(20px / 2);
-          top: 50%;
+    .pagination-ellipsis-form-button {
+      outline: none;
+      border: none;
+      background-color: transparent;
+      line-height: 1;
+      cursor: pointer;
+      position: absolute;
+      right: 4px;
+      transform: translateY(-50%);
+      font-size: 12px;
+      padding: calc(20px / 2);
+      top: 50%;
 
-          &:hover .pagination-ellipsis-form-button-icon {
-            color: #23f7dd;
-          }
-        }
+      &:hover .pagination-ellipsis-form-button-icon {
+        color: #23f7dd;
       }
     }
   }

diff --git a/src/UI/Pagination/paginationStyles.scss b/src/UI/Pagination/paginationStyles.scss
@@ -154,6 +154,22 @@
           z-index: 2;
         }
       }
+
+      .pagination-tooltip {
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 200ms ease;
+        border-radius: 50%;
+
+        &:hover,
+        &.active {
+          background-color: #143736;
+        }
+      }
     }
   }
 }