feat(refactor): Update to latest w3ux utils (#2283)

package.json

@@ -32,7 +32,7 @@
     "@w3ux/react-connect-kit": "^1.8.0",
     "@w3ux/react-odometer": "^1.1.0",
     "@w3ux/react-polkicon": "^1.3.0",
-    "@w3ux/utils": "^0.10.0",
+    "@w3ux/utils": "1.0.1",
     "@w3ux/validator-assets": "^0.2.0",
     "@zondax/ledger-substrate": "^1.0.0",
     "bignumber.js": "^9.1.2",

src/canvas/CreatePool/Summary/index.tsx

@@ -55,12 +55,11 @@ export const Summary = ({ section }: SetupStepProps) => {
       ({ address }: { address: string }) => address
     );
 
-    const bondToSubmit = unitToPlanck(bond, units);
-    const bondAsString = bondToSubmit.isNaN() ? '0' : bondToSubmit.toString();
+    const bondToSubmit = unitToPlanck(bond, units).toString();
 
     const txs = [
       api.tx.nominationPools.create(
-        bondAsString,
+        bondToSubmit,
         roles?.root || activeAccount,
         roles?.nominator || activeAccount,
         roles?.bouncer || activeAccount

src/canvas/JoinPool/Overview/JoinForm.tsx

@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { planckToUnit, unitToPlanck } from '@w3ux/utils';
+import { unitToPlanck } from '@w3ux/utils';
 import type BigNumber from 'bignumber.js';
 import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useNetwork } from 'contexts/Network';
@@ -24,6 +24,7 @@ import { SubmitTx } from 'library/SubmitTx';
 import type { OverviewSectionProps } from '../types';
 import { defaultClaimPermission } from 'controllers/ActivePools/defaults';
 import { useTranslation } from 'react-i18next';
+import { planckToUnitBn } from 'library/Utils';
 
 export const JoinForm = ({ bondedPool }: OverviewSectionProps) => {
   const { t } = useTranslation();
@@ -54,7 +55,7 @@ export const JoinForm = ({ bondedPool }: OverviewSectionProps) => {
 
   // Bond amount to join pool with.
   const [bond, setBond] = useState<{ bond: string }>({
-    bond: planckToUnit(totalPossibleBond, units).toString(),
+    bond: planckToUnitBn(totalPossibleBond, units).toString(),
   });
 
   // Whether the bond amount is valid.
@@ -78,9 +79,11 @@ export const JoinForm = ({ bondedPool }: OverviewSectionProps) => {
       return tx;
     }
 
-    const bondToSubmit = unitToPlanck(!bondValid ? '0' : bond.bond, units);
-    const bondAsString = bondToSubmit.isNaN() ? '0' : bondToSubmit.toString();
-    const txs = [api.tx.nominationPools.join(bondAsString, bondedPool.id)];
+    const bondToSubmit = unitToPlanck(
+      !bondValid ? '0' : bond.bond,
+      units
+    ).toString();
+    const txs = [api.tx.nominationPools.join(bondToSubmit, bondedPool.id)];
 
     // If claim permission is not the default, add it to tx.
     if (claimPermission !== defaultClaimPermission) {

src/canvas/JoinPool/Overview/Stats.tsx

@@ -3,7 +3,7 @@
 
 import { useNetwork } from 'contexts/Network';
 import { HeadingWrapper } from '../Wrappers';
-import { planckToUnit, rmCommas } from '@w3ux/utils';
+import { rmCommas } from '@w3ux/utils';
 import { useApi } from 'contexts/Api';
 import BigNumber from 'bignumber.js';
 import { useEffect, useState } from 'react';
@@ -14,6 +14,7 @@ import { MaxEraRewardPointsEras } from 'consts';
 import { StyledLoader } from 'library/PoolSync/Loader';
 import type { CSSProperties } from 'styled-components';
 import { PoolSync } from 'library/PoolSync';
+import { planckToUnitBn } from 'library/Utils';
 
 export const Stats = ({
   bondedPool,
@@ -86,7 +87,7 @@ export const Stats = ({
               <Token className="icon" />
               {!poolBalance
                 ? `...`
-                : planckToUnit(poolBalance, units)
+                : planckToUnitBn(poolBalance, units)
                     .decimalPlaces(3)
                     .toFormat()}{' '}
               {unit} {t('bonded')}

src/canvas/JoinPool/Preloader.tsx

@@ -10,11 +10,12 @@ import { CanvasTitleWrapper } from 'canvas/Wrappers';
 import { useBondedPools } from 'contexts/Pools/BondedPools';
 import BigNumber from 'bignumber.js';
 import type { BondedPool } from 'contexts/Pools/BondedPools/types';
-import { capitalizeFirstLetter, planckToUnit, rmCommas } from '@w3ux/utils';
+import { capitalizeFirstLetter, rmCommas } from '@w3ux/utils';
 import { useNetwork } from 'contexts/Network';
 import { useApi } from 'contexts/Api';
 import { PoolSyncBar } from 'library/PoolSync/Bar';
 import type { PoolRewardPointsKey } from 'contexts/Pools/PoolPerformance/types';
+import { planckToUnitBn } from 'library/Utils';
 
 export const Preloader = ({
   performanceKey,
@@ -36,7 +37,7 @@ export const Preloader = ({
   bondedPools.forEach((b: BondedPool) => {
     totalPoolPoints = totalPoolPoints.plus(rmCommas(b.points));
   });
-  const totalPoolPointsUnit = planckToUnit(totalPoolPoints, units)
+  const totalPoolPointsUnit = planckToUnitBn(totalPoolPoints, units)
     .decimalPlaces(0)
     .toFormat();
 

src/canvas/NominatorSetup/Summary/index.tsx

@@ -57,11 +57,10 @@ export const Summary = ({ section }: SetupStepProps) => {
           }
         : payee.destination;
 
-    const bondToSubmit = unitToPlanck(bond || '0', units);
-    const bondAsString = bondToSubmit.isNaN() ? '0' : bondToSubmit.toString();
+    const bondToSubmit = unitToPlanck(bond || '0', units).toString();
 
     const txs = [
-      api.tx.staking.bond(bondAsString, payeeToSubmit),
+      api.tx.staking.bond(bondToSubmit, payeeToSubmit),
       api.tx.staking.nominate(targetsToSubmit),
     ];
     return newBatchCall(txs, activeAccount);

src/canvas/PoolMembers/Lists/Default.tsx

@@ -1,7 +1,6 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { isNotZero } from '@w3ux/utils';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { poolMembersPerPage } from 'library/List/defaults';
@@ -63,7 +62,7 @@ export const MembersListInner = ({
 
   // Configure list when network is ready to fetch.
   useEffect(() => {
-    if (isReady && isNotZero(activeEra.index) && fetched === 'unsynced') {
+    if (isReady && !activeEra.index.isZero() && fetched === 'unsynced') {
       setupMembersList();
     }
   }, [isReady, fetched, activeEra.index]);

src/canvas/PoolMembers/Prompts/UnbondMember.tsx

@@ -2,14 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { Polkicon } from '@w3ux/react-polkicon';
-import {
-  ellipsisFn,
-  greaterThanZero,
-  planckToUnit,
-  remToUnit,
-  rmCommas,
-  unitToPlanck,
-} from '@w3ux/utils';
+import { ellipsisFn, remToUnit, rmCommas, unitToPlanck } from '@w3ux/utils';
 import BigNumber from 'bignumber.js';
 import { getUnixTime } from 'date-fns';
 import { useEffect, useState } from 'react';
@@ -30,6 +23,7 @@ import { Title } from 'library/Prompt/Title';
 import { ModalPadding } from 'kits/Overlay/structure/ModalPadding';
 import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings';
 import { ModalNotes } from 'kits/Overlay/structure/ModalNotes';
+import { planckToUnitBn } from 'library/Utils';
 
 export const UnbondMember = ({
   who,
@@ -50,7 +44,7 @@ export const UnbondMember = ({
 
   const { bondDuration } = consts;
   const { points } = member;
-  const freeToUnbond = planckToUnit(new BigNumber(rmCommas(points)), units);
+  const freeToUnbond = planckToUnitBn(new BigNumber(rmCommas(points)), units);
 
   const bondDurationFormatted = timeleftAsString(
     t,
@@ -68,7 +62,7 @@ export const UnbondMember = ({
   const [bondValid, setBondValid] = useState<boolean>(false);
 
   // unbond all validation
-  const isValid = (() => greaterThanZero(freeToUnbond))();
+  const isValid = (() => freeToUnbond.isGreaterThan(0))();
 
   // update bond value on task change
   useEffect(() => {
@@ -83,9 +77,11 @@ export const UnbondMember = ({
       return tx;
     }
     // remove decimal errors
-    const bondToSubmit = unitToPlanck(!bondValid ? '0' : bond.bond, units);
-    const bondAsString = bondToSubmit.isNaN() ? '0' : bondToSubmit.toString();
-    tx = api.tx.nominationPools.unbond(who, bondAsString);
+    const bondToSubmit = unitToPlanck(
+      !bondValid ? '0' : bond.bond,
+      units
+    ).toString();
+    tx = api.tx.nominationPools.unbond(who, bondToSubmit);
     return tx;
   };
 

src/canvas/PoolMembers/Prompts/WithdrawMember.tsx

@@ -2,13 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { Polkicon } from '@w3ux/react-polkicon';
-import {
-  ellipsisFn,
-  isNotZero,
-  planckToUnit,
-  remToUnit,
-  rmCommas,
-} from '@w3ux/utils';
+import { ellipsisFn, remToUnit, rmCommas } from '@w3ux/utils';
 import BigNumber from 'bignumber.js';
 import type { RefObject } from 'react';
 import { useState } from 'react';
@@ -27,6 +21,7 @@ import { useTranslation } from 'react-i18next';
 import { ModalPadding } from 'kits/Overlay/structure/ModalPadding';
 import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings';
 import { ModalNotes } from 'kits/Overlay/structure/ModalNotes';
+import { planckToUnitBn } from 'library/Utils';
 
 export const WithdrawMember = ({
   who,
@@ -62,11 +57,11 @@ export const WithdrawMember = ({
     }
   });
 
-  const bonded = planckToUnit(new BigNumber(rmCommas(points)), units);
-  const totalWithdraw = planckToUnit(new BigNumber(totalWithdrawUnit), units);
+  const bonded = planckToUnitBn(new BigNumber(rmCommas(points)), units);
+  const totalWithdraw = planckToUnitBn(new BigNumber(totalWithdrawUnit), units);
 
   // valid to submit transaction
-  const [valid] = useState<boolean>(isNotZero(totalWithdraw) ?? false);
+  const [valid] = useState<boolean>(!totalWithdraw.isZero());
 
   // tx to submit
   const getTx = () => {

src/contexts/FastUnstake/index.tsx

@@ -1,12 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import {
-  greaterThanZero,
-  isNotZero,
-  rmCommas,
-  setStateWithRef,
-} from '@w3ux/utils';
+import { rmCommas, setStateWithRef } from '@w3ux/utils';
 import BigNumber from 'bignumber.js';
 import type { ReactNode } from 'react';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
@@ -111,7 +106,7 @@ export const FastUnstakeProvider = ({ children }: { children: ReactNode }) => {
     if (
       isReady &&
       activeAccount &&
-      isNotZero(activeEra.index) &&
+      !activeEra.index.isZero() &&
       fastUnstakeErasToCheckPerBlock > 0 &&
       isBonding()
     ) {
@@ -238,7 +233,7 @@ export const FastUnstakeProvider = ({ children }: { children: ReactNode }) => {
     // ensure current era has synced
     if (
       era.isLessThan(0) ||
-      !greaterThanZero(bondDuration) ||
+      !bondDuration.isGreaterThan(0) ||
       !api ||
       !a ||
       checkingRef.current ||

src/contexts/Plugins/index.tsx

@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { isNotZero, setStateWithRef } from '@w3ux/utils';
+import { setStateWithRef } from '@w3ux/utils';
 import type { ReactNode } from 'react';
 import { createContext, useContext, useRef, useState } from 'react';
 import type { Plugin } from 'config/plugins';
@@ -51,7 +51,7 @@ export const PluginsProvider = ({ children }: { children: ReactNode }) => {
   useEffectIgnoreInitial(() => {
     if (!plugins.includes('subscan')) {
       SubscanController.resetData();
-    } else if (isReady && isNotZero(activeEra.index)) {
+    } else if (isReady && !activeEra.index.isZero()) {
       SubscanController.network = network;
       if (activeAccount) {
         SubscanController.handleFetchPayouts(activeAccount);

src/contexts/Setup/index.tsx

@@ -1,11 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import {
-  greaterThanZero,
-  localStorageOrDefault,
-  unitToPlanck,
-} from '@w3ux/utils';
+import { localStorageOrDefault, unitToPlanck } from '@w3ux/utils';
 import type { ReactNode } from 'react';
 import { createContext, useContext, useState } from 'react';
 import type { BondFor, MaybeAddress } from 'types';
@@ -27,6 +23,7 @@ import type {
   PoolSetups,
   SetupContextInterface,
 } from './types';
+import BigNumber from 'bignumber.js';
 
 export const SetupContext =
   createContext<SetupContextInterface>(defaultSetupContext);
@@ -179,11 +176,13 @@ export const SetupProvider = ({ children }: { children: ReactNode }) => {
     }
     const setup = getSetupProgress('nominator', address) as NominatorSetup;
     const { progress } = setup;
-    const bond = unitToPlanck(progress?.bond || '0', units);
+    const bond = new BigNumber(
+      unitToPlanck(progress?.bond || '0', units).toString()
+    );
 
     const p = 33;
     let percentage = 0;
-    if (greaterThanZero(bond)) {
+    if (bond.isGreaterThan(0)) {
       percentage += p;
     }
     if (progress.nominations.length) {
@@ -202,14 +201,16 @@ export const SetupProvider = ({ children }: { children: ReactNode }) => {
     }
     const setup = getSetupProgress('pool', address) as PoolSetup;
     const { progress } = setup;
-    const bond = unitToPlanck(progress?.bond || '0', units);
+    const bond = new BigNumber(
+      unitToPlanck(progress?.bond || '0', units).toString()
+    );
 
     const p = 25;
     let percentage = 0;
     if (progress.metadata !== '') {
       percentage += p;
     }
-    if (greaterThanZero(bond)) {
+    if (bond.isGreaterThan(0)) {
       percentage += p;
     }
     if (progress.nominations.length) {

src/contexts/Staking/index.tsx

@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { greaterThanZero, rmCommas, setStateWithRef } from '@w3ux/utils';
+import { rmCommas, setStateWithRef } from '@w3ux/utils';
 import type { ReactNode } from 'react';
 import { createContext, useContext, useRef, useState } from 'react';
 import { useBalances } from 'contexts/Balances';
@@ -205,7 +205,7 @@ export const StakingProvider = ({ children }: { children: ReactNode }) => {
   // Helper function to determine whether the active account is bonding, or is yet to start.
   const isBonding = () =>
     hasController() &&
-    greaterThanZero(getLedger({ stash: activeAccount }).active);
+    getLedger({ stash: activeAccount }).active.isGreaterThan(0);
 
   // Helper function to determine whether the active account.
   const isUnlocking = () =>

src/contexts/Validators/ValidatorEntries/index.tsx

@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { greaterThanZero, rmCommas, shuffle } from '@w3ux/utils';
+import { rmCommas, shuffle } from '@w3ux/utils';
 import BigNumber from 'bignumber.js';
 import type { ReactNode } from 'react';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
@@ -573,7 +573,7 @@ export const ValidatorsProvider = ({ children }: { children: ReactNode }) => {
 
   // Fetch parachain session validators when `earliestStoredSession` ready.
   useEffectIgnoreInitial(() => {
-    if (isReady && greaterThanZero(earliestStoredSession)) {
+    if (isReady && earliestStoredSession.isGreaterThan(0)) {
       subscribeParachainValidators();
     }
   }, [isReady, earliestStoredSession]);