use useTimeleft from @w3ux/hooks

polkadot-cloud · Nov 12, 2024 · 4ddaa6f · 4ddaa6f
1 parent 6d15f49
commit 4ddaa6f
Show file tree

Hide file tree

Showing 18 changed files with 78 additions and 280 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "@typescript-eslint/eslint-plugin": "^7.12.0",
     "@typescript-eslint/parser": "^7.12.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
-    "@w3ux/types": "^0.2.0",
+    "@w3ux/types": "0.2.1-beta.1",
     "eslint": "8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -30,7 +30,7 @@
     "@substrate/connect": "^2.0.1",
     "@w3ux/extension-assets": "^0.4.0",
     "@w3ux/factories": "^1.0.0",
-    "@w3ux/hooks": "^1.2.1",
+    "@w3ux/hooks": "^1.3.1-beta.7",
     "@w3ux/react-connect-kit": "^1.8.0",
     "@w3ux/react-odometer": "^1.1.0",
     "@w3ux/react-polkicon": "^2.0.1-alpha.0",

diff --git a/packages/app/src/canvas/PoolMembers/Prompts/UnbondMember.tsx b/packages/app/src/canvas/PoolMembers/Prompts/UnbondMember.tsx
@@ -12,7 +12,7 @@ import { Warning } from 'library/Form/Warning';
 import { useErasToTimeLeft } from 'hooks/useErasToTimeLeft';
 import { useSignerWarnings } from 'hooks/useSignerWarnings';
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic';
-import { timeleftAsString } from 'hooks/useTimeLeft/utils';
+import { timeleftAsString, planckToUnitBn } from 'library/Utils';
 import { SubmitTx } from 'library/SubmitTx';
 import { StaticNote } from 'modals/Utils/StaticNote';
 import { useNetwork } from 'contexts/Network';
@@ -23,7 +23,6 @@ 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,

diff --git a/packages/app/src/hooks/useTimeLeft/defaults.ts b/packages/app/src/hooks/useTimeLeft/defaults.ts
diff --git a/packages/app/src/hooks/useTimeLeft/index.tsx b/packages/app/src/hooks/useTimeLeft/index.tsx
diff --git a/packages/app/src/hooks/useTimeLeft/types.ts b/packages/app/src/hooks/useTimeLeft/types.ts
diff --git a/packages/app/src/hooks/useTimeLeft/utils.ts b/packages/app/src/hooks/useTimeLeft/utils.ts
diff --git a/packages/app/src/library/Countdown/types.ts b/packages/app/src/library/Countdown/types.ts
@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import type { TimeLeftFormatted } from 'hooks/useTimeLeft/types';
+import type { TimeLeftFormatted } from '@w3ux/types';
 
 export interface CountdownProps {
   timeleft: TimeLeftFormatted;

diff --git a/packages/app/src/library/StatBoxList/types.ts b/packages/app/src/library/StatBoxList/types.ts
@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import type { TimeLeftFormatted } from 'hooks/useTimeLeft/types';
+import type { TimeLeftFormatted } from '@w3ux/types';
 
 export interface NumberProps {
   label: string;

diff --git a/packages/app/src/library/Utils/index.ts b/packages/app/src/library/Utils/index.ts
@@ -3,7 +3,9 @@
 
 import { planckToUnit, rmCommas } from '@w3ux/utils';
 import BigNumber from 'bignumber.js';
-import type { TimeLeftFormatted, TimeLeftRaw } from 'hooks/useTimeLeft/types';
+import { fromUnixTime } from 'date-fns';
+import type { TimeLeftFormatted, TimeLeftRaw } from '@w3ux/types';
+import { getDurationFromNow } from '@w3ux/hooks/util';
 import type { TFunction } from 'i18next';
 
 // Return `planckToUnit` as a `BigNumber`.
@@ -37,3 +39,42 @@ export const formatTimeleft = (
   }
   return formatted;
 };
+
+// format the duration (from seconds) as a string.
+export const timeleftAsString = (
+  t: TFunction,
+  start: number,
+  duration: number,
+  full?: boolean
+) => {
+  const { days, hours, minutes, seconds } = getDurationFromNow(
+    fromUnixTime(start + duration) || null
+  );
+
+  const tHour = `time.${full ? `hour` : `hr`}`;
+  const tMinute = `time.${full ? `minute` : `min`}`;
+
+  let str = '';
+  if (days > 0) {
+    str += `${days} ${t('time.day', { count: days, ns: 'base' })}`;
+  }
+  if (hours > 0) {
+    if (str) {
+      str += ', ';
+    }
+    str += ` ${hours} ${t(tHour, { count: hours, ns: 'base' })}`;
+  }
+  if (minutes > 0) {
+    if (str) {
+      str += ', ';
+    }
+    str += ` ${minutes} ${t(tMinute, { count: minutes, ns: 'base' })}`;
+  }
+  if (!days && !hours) {
+    if (str) {
+      str += ', ';
+    }
+    str += ` ${seconds}`;
+  }
+  return str;
+};
diff --git a/packages/app/src/library/WithdrawPrompt/index.tsx b/packages/app/src/library/WithdrawPrompt/index.tsx
@@ -11,7 +11,7 @@ import { useNetwork } from 'contexts/Network';
 import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useSyncing } from 'hooks/useSyncing';
 import { ButtonPrimary } from 'ui-buttons';
-import { timeleftAsString } from 'hooks/useTimeLeft/utils';
+import { timeleftAsString } from 'library/Utils';
 import { getUnixTime } from 'date-fns';
 import { useErasToTimeLeft } from 'hooks/useErasToTimeLeft';
 import { useApi } from 'contexts/Api';

diff --git a/packages/app/src/modals/ManagePool/Forms/LeavePool/index.tsx b/packages/app/src/modals/ManagePool/Forms/LeavePool/index.tsx
@@ -14,7 +14,7 @@ import { Warning } from 'library/Form/Warning';
 import { useErasToTimeLeft } from 'hooks/useErasToTimeLeft';
 import { useSignerWarnings } from 'hooks/useSignerWarnings';
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic';
-import { timeleftAsString } from 'hooks/useTimeLeft/utils';
+import { timeleftAsString, planckToUnitBn } from 'library/Utils';
 import { SubmitTx } from 'library/SubmitTx';
 import { StaticNote } from 'modals/Utils/StaticNote';
 import { useOverlay } from 'kits/Overlay/Provider';
@@ -24,7 +24,6 @@ import { ButtonSubmitInvert } from 'ui-buttons';
 import { ModalPadding } from 'kits/Overlay/structure/ModalPadding';
 import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings';
 import { ActionItem } from 'library/ActionItem';
-import { planckToUnitBn } from 'library/Utils';
 
 export const LeavePool = ({
   setSection,