feat: add timestamp hooks and core funcs (#91)

packages/useink/package.json

@@ -12,7 +12,7 @@
     "React",
     "hooks"
   ],
-  "version": "1.7.5",
+  "version": "1.8.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "description": "A React hooks library for ink! contracts",

packages/useink/src/core/substrate/timestamp/getTimestampDate.ts

@@ -0,0 +1,12 @@
+import { unixMilliToDate } from '../../../utils';
+import { ApiBase } from '../../types/index';
+import { getTimestampUnix } from './getTimestampNow.ts';
+
+export const getTimestampDate = async (
+  api: ApiBase<'promise'> | undefined,
+): Promise<Date | undefined> => {
+  const now = await getTimestampUnix(api);
+  if (!now) return;
+
+  return unixMilliToDate(now);
+};

packages/useink/src/core/substrate/timestamp/getTimestampNow.ts

@@ -1,11 +1,14 @@
-import { ApiPromise, Codec } from '../../types/index';
-import { getTimestamp } from './getTimestamp.ts';
+import { ApiBase } from '../../types/index';
+import { getTimestampQuery } from './getTimestampQuery.ts';
 
-export const getTimestampNow = async (
-  api: ApiPromise | undefined,
-): Promise<Codec | undefined> => {
-  const timestamp = getTimestamp(api);
-  if (!timestamp?.now) return;
+export const getTimestampUnix = async (
+  api: ApiBase<'promise'> | undefined,
+): Promise<number | undefined> => {
+  const query = getTimestampQuery(api);
+  if (!query?.now) return;
 
-  return await timestamp.now();
+  const t = await query.now();
+  const stringWithoutCommas = t.toHuman()?.toString().split(',').join('');
+
+  return stringWithoutCommas ? parseInt(stringWithoutCommas) : undefined;
 };

packages/useink/src/core/substrate/timestamp/getTimestampQuery.ts

@@ -0,0 +1,5 @@
+import { ApiBase, QueryableModuleCalls } from '../../types/index';
+
+export const getTimestampQuery = (
+  api: ApiBase<'promise'> | undefined,
+): QueryableModuleCalls<'promise'> | undefined => api?.query?.timestamp;

packages/useink/src/core/substrate/timestamp/index.ts

@@ -1,2 +1,3 @@
-export * from './getTimestamp.ts';
+export * from './getTimestampDate.ts';
 export * from './getTimestampNow.ts';
+export * from './getTimestampQuery.ts';

packages/useink/src/react/hooks/helpers/index.ts

@@ -0,0 +1 @@
+export * from './useUnixMilliToDate';

packages/useink/src/react/hooks/helpers/useUnixMilliToDate.ts

@@ -0,0 +1,7 @@
+import { unixMilliToDate } from '../../../utils/helpers/unixMilliToDate';
+import { useMemo } from 'react';
+
+export const useUnixMilliToDate = (
+  unixInMilliSeconds: number | undefined,
+): Date | undefined =>
+  useMemo(() => unixMilliToDate(unixInMilliSeconds), [unixInMilliSeconds]);

packages/useink/src/react/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './config/index';
 export * from './contracts/index';
+export * from './helpers/index';
 export * from './substrate/index';
 export * from './wallets/index';

packages/useink/src/react/hooks/substrate/balance/index.ts

@@ -0,0 +1 @@
+export * from './useBalance';

packages/useink/src/react/hooks/substrate/useBalance.ts → packages/useink/src/react/hooks/substrate/balance/useBalance.ts

@@ -1,9 +1,9 @@
-import { ChainId } from '../../../chains/index';
-import { DeriveBalancesAccount, WithAddress } from '../../../core/index';
-import { getBalance } from '../../../core/index';
-import { useChain } from '../index';
-import { useApi } from '../substrate/useApi.ts';
-import { useBlockHeader } from './useBlockHeader.ts';
+import { ChainId } from '../../../../chains/index';
+import { DeriveBalancesAccount, WithAddress } from '../../../../core/index';
+import { getBalance } from '../../../../core/index';
+import { useChain } from '../../index';
+import { useApi } from '../useApi.ts';
+import { useBlockHeader } from '../useBlockHeader.ts';
 import { useEffect, useState } from 'react';
 
 export const useBalance = (

packages/useink/src/react/hooks/substrate/index.ts

@@ -1,5 +1,6 @@
+export * from './balance';
+export * from './timestamp';
 export * from './useApi.ts';
-export * from './useBalance.ts';
 export * from './useBlockHeader.ts';
 export * from './useChainDecimals.ts';
 export * from './useTokenSymbol.ts';

packages/useink/src/react/hooks/substrate/timestamp/index.ts

@@ -0,0 +1,3 @@
+export * from './useTimestampDate';
+export * from './useTimestampNow';
+export * from './useTimestampQuery';

packages/useink/src/react/hooks/substrate/timestamp/useTimestampDate.ts

@@ -0,0 +1,9 @@
+import { ChainId } from '../../../../chains';
+import { useUnixMilliToDate } from '../../helpers';
+import { useTimestampNow } from './useTimestampNow';
+
+export const useTimestampDate = (chainId?: ChainId): Date | undefined => {
+  const unix = useTimestampNow(chainId);
+
+  return useUnixMilliToDate(unix);
+};

packages/useink/src/react/hooks/substrate/timestamp/useTimestampNow.ts

@@ -0,0 +1,18 @@
+import { ChainId } from '../../../../chains';
+import { getTimestampUnix } from '../../../../core';
+import { useApi } from '../useApi';
+import { useBlockHeader } from '../useBlockHeader';
+import { useEffect, useState } from 'react';
+
+// Get the current timestamp in milliseconds
+export const useTimestampNow = (chainId?: ChainId): number | undefined => {
+  const [now, setNow] = useState<number>();
+  const b = useBlockHeader(chainId);
+  const chainApi = useApi(chainId);
+
+  useEffect(() => {
+    getTimestampUnix(chainApi?.api).then(setNow).catch();
+  }, [b?.blockNumber]);
+
+  return now;
+};

packages/useink/src/react/hooks/substrate/timestamp/useTimestampQuery.ts

@@ -0,0 +1,19 @@
+import { ChainId } from '../../../../chains';
+import { QueryableModuleCalls, getTimestampQuery } from '../../../../core';
+import { useApi } from '../useApi';
+import { useEffect, useState } from 'react';
+
+// Get a queryable function that can then be used to call a chain: `await timestampQuery.now()`
+export const useTimestampQuery = (
+  chainId?: ChainId,
+): QueryableModuleCalls<'promise'> | undefined => {
+  const chainApi = useApi(chainId);
+  const [timestamp, setTimestamp] = useState<QueryableModuleCalls<'promise'>>();
+
+  useEffect(() => {
+    const t = getTimestampQuery(chainApi?.api);
+    setTimestamp(t);
+  }, [chainApi?.api]);
+
+  return timestamp;
+};

packages/useink/src/utils/helpers/index.ts

@@ -1,3 +1,4 @@
 export * from './getExpiredItem.ts';
 export * from './parseUnits';
 export * from './pseudoRandomId.ts';
+export * from './unixMilliToDate.ts';

packages/useink/src/utils/helpers/unixMilliToDate.ts

@@ -0,0 +1,4 @@
+export const unixMilliToDate = (
+  unixInMilliSeconds: number | undefined,
+): Date | undefined =>
+  unixInMilliSeconds ? new Date(unixInMilliSeconds) : undefined;

playground/src/components/pg-home/HomePage.tsx

@@ -15,6 +15,8 @@ import {
   useEventSubscription,
   useEvents,
   useInstalledWallets,
+  useTimestampDate,
+  useTimestampNow,
   useTokenSymbol,
   useTx,
   useTxPaymentInfo,
@@ -77,6 +79,8 @@ export const HomePage: React.FC = () => {
   const panic = useCall<boolean>(cRococoContract, 'panic');
   const assertBoom = useCall<boolean>(cRococoContract, 'assertBoom');
   const mood = useCall<MoodResult>(cRococoContract, 'mood');
+  const phalaTimestamp = useTimestampNow('phala');
+  const phalaDate = useTimestampDate('phala');
   const shibuyaContract = useContract(
     SHIBUYA_CONTRACT_ADDRESS,
     metadata,
@@ -271,6 +275,7 @@ export const HomePage: React.FC = () => {
                     {planckToDecimalFormatted(
                       balance?.freeBalance,
                       cRococoContract.contract.api,
+                      { decimals: 4 },
                     )}
                   </span>
                 </li>
@@ -336,6 +341,19 @@ export const HomePage: React.FC = () => {
               </ul>
             </li>
 
+            <li>
+              <b>
+                Phala&apos;s current timestamp:{' '}
+                <code className='p-1 rounded-md bg-slate-500'>
+                  {phalaTimestamp}
+                </code>
+              </b>
+
+              <p className='text-sm'>
+                Phala&apos;s last block time: {phalaDate?.toLocaleTimeString()}
+              </p>
+            </li>
+
             <li className='flex items-center gap-4'>
               <button
                 type='button'

words.txt

@@ -195,6 +195,7 @@ matklad
 merkle
 metaverse
 micnncim
+milli
 minix
 miterlimit
 mogiway