Revert "feat(refactor): Use useOnResize, remove lodash.throttle. (#…

…2313)"

This reverts commit 5d012c0.

package.json

@@ -32,8 +32,8 @@
     "@w3ux/hooks": "^1.2.1",
     "@w3ux/react-connect-kit": "^1.8.0",
     "@w3ux/react-odometer": "^1.1.0",
-    "@w3ux/react-polkicon": "2.0.1-alpha.0",
-    "@w3ux/utils": "1.1.1-beta.6",
+    "@w3ux/react-polkicon": "^2.0.1-alpha.0",
+    "@w3ux/utils": "1.0.1",
     "@w3ux/validator-assets": "^0.2.0",
     "@zondax/ledger-substrate": "^1.0.0",
     "bignumber.js": "^9.1.2",
@@ -48,6 +48,7 @@
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
     "qrcode-generator": "1.4.4",
     "rc-slider": "^11.1.6",
     "react": "^18.3.1",
@@ -68,6 +69,7 @@
     "@ledgerhq/logs": "^6.12.0",
     "@types/chroma-js": "^2.4.4",
     "@types/lodash.debounce": "^4.0.9",
+    "@types/lodash.throttle": "^4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.2.25",
     "@types/react-helmet": "^6.1.11",

src/consts.ts

@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { stringToU8a } from '@w3ux/utils';
+import { stringToU8a } from '@polkadot/util';
 
 /*
  * Global Constants

src/contexts/Api/defaults.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 /* eslint-disable @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
 
-import { stringToU8a } from '@w3ux/utils';
+import { stringToU8a } from '@polkadot/util';
 import BigNumber from 'bignumber.js';
 import type {
   APIActiveEra,

src/contexts/Pools/BondedPools/index.tsx

@@ -1,8 +1,8 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { u8aUnwrapBytes } from '@polkadot/util';
-import { rmCommas, setStateWithRef, shuffle, u8aToString } from '@w3ux/utils';
+import { u8aUnwrapBytes, u8aToString } from '@polkadot/util';
+import { rmCommas, setStateWithRef, shuffle } from '@w3ux/utils';
 import type { ReactNode } from 'react';
 import { createContext, useContext, useRef, useState } from 'react';
 import type {

src/hooks/useCreatePoolAccounts/index.tsx

@@ -1,8 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { bnToU8a } from '@polkadot/util';
-import { u8aConcat } from '@w3ux/utils';
+import { bnToU8a, u8aConcat } from '@polkadot/util';
 import BigNumber from 'bignumber.js';
 import { BN } from 'bn.js';
 import { EmptyH256, ModPrefix, U32Opts } from 'consts';

src/hooks/useSize/index.tsx

@@ -0,0 +1,48 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import throttle from 'lodash.throttle';
+import type { MutableRefObject } from 'react';
+import { useEffect, useState } from 'react';
+
+// Custom hook to get the width and height of a specified element. Updates the `size` state when the
+// specified "outer element" (or the window by default) resizes.
+export const useSize = (
+  element: MutableRefObject<HTMLElement | null | undefined>,
+  outerElement?: MutableRefObject<HTMLElement | null | undefined>
+) => {
+  // Helper function to retrieve the width and height of an element
+  // If no element is found, default dimensions are set to 0.
+  const getSize = (el: HTMLElement | null = null) => {
+    const width = el?.offsetWidth || 0;
+    const height = el?.offsetHeight || 0;
+    return { width, height };
+  };
+
+  // State to store the current width and height of the specified element.
+  const [size, setSize] = useState<{ width: number; height: number }>(
+    getSize(element?.current)
+  );
+
+  // Throttle the resize event handler to limit how often size updates occur.
+  const resizeThrottle = throttle(() => {
+    setSize(getSize(element?.current));
+  }, 100);
+
+  // Set up the resize event listener on mount and clean it up on unmount.
+  useEffect(() => {
+    // Determine the target for the resize event listener.
+    // If `outerElement` is provided, listen to its resize events; otherwise, listen to the window's.
+    const listenFor = outerElement?.current || window;
+
+    listenFor.addEventListener('resize', resizeThrottle);
+
+    // Clean up event listener when the component unmounts to avoid memory leaks.
+    return () => {
+      listenFor.removeEventListener('resize', resizeThrottle);
+    };
+  }, [outerElement]);
+
+  // Return the current size of the element.
+  return size;
+};

src/hooks/useValidatorFilters/index.tsx

@@ -1,13 +1,12 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { u8aUnwrapBytes } from '@polkadot/util';
+import { u8aUnwrapBytes, u8aToString } from '@polkadot/util';
 import { useTranslation } from 'react-i18next';
 import { useValidators } from 'contexts/Validators/ValidatorEntries';
 import type { AnyFunction, AnyJson } from '@w3ux/types';
 import { MaxEraRewardPointsEras } from 'consts';
 import type { AnyFilter } from 'library/Filter/types';
-import { u8aToString } from '@w3ux/utils';
 
 export const useValidatorFilters = () => {
   const { t } = useTranslation('library');

src/library/Account/PoolAccount.tsx

@@ -1,8 +1,8 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { u8aUnwrapBytes } from '@polkadot/util';
-import { ellipsisFn, u8aToString } from '@w3ux/utils';
+import { u8aUnwrapBytes, u8aToString } from '@polkadot/util';
+import { ellipsisFn } from '@w3ux/utils';
 import { useTranslation } from 'react-i18next';
 import { useBondedPools } from 'contexts/Pools/BondedPools';
 import { Polkicon } from '@w3ux/react-polkicon';

src/library/QRCode/DisplayPayload.tsx

@@ -5,7 +5,7 @@ import type { ReactElement } from 'react';
 import { memo, useMemo } from 'react';
 import { QrDisplay } from './Display.js';
 import type { DisplayPayloadProps } from './types.js';
-import { u8aConcat } from '@w3ux/utils';
+import { u8aConcat } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
 const createSignPayload = (

src/library/QRCode/util.ts

@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { u8aConcat } from '@w3ux/utils';
+import { u8aConcat } from '@polkadot/util';
 
 const MULTIPART = new Uint8Array([0]);
 

src/library/ValidatorList/ValidatorItem/Utils.tsx

@@ -1,11 +1,10 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { u8aUnwrapBytes } from '@polkadot/util';
+import { u8aUnwrapBytes, u8aToString } from '@polkadot/util';
 import type BigNumber from 'bignumber.js';
 import { MaxEraRewardPointsEras } from 'consts';
 import type { AnyJson } from '@w3ux/types';
-import { u8aToString } from '@w3ux/utils';
 
 export const getIdentityDisplay = (
   _identity: AnyJson,

src/modals/ManagePool/Forms/RenamePool/index.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
-import { u8aUnwrapBytes } from '@polkadot/util';
+import { u8aUnwrapBytes, u8aToString } from '@polkadot/util';
 import type { Dispatch, FormEvent, SetStateAction } from 'react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,7 +18,6 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert';
 import { ModalPadding } from 'kits/Overlay/structure/ModalPadding';
 import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings';
-import { u8aToString } from '@w3ux/utils';
 
 export const RenamePool = ({
   setSection,