feat: initial Pezkuwi Apps rebrand from polkadot-apps

Rebranded terminology:
- Polkadot → Pezkuwi
- Kusama → Dicle
- Westend → Zagros
- Rococo → PezkuwiChain
- Substrate → Bizinikiwi
- parachain → teyrchain

Custom logos with Kurdistan brand colors (#e6007a → #86e62a):
- bizinikiwi-hexagon.svg
- sora-bizinikiwi.svg
- hezscanner.svg
- heztreasury.svg
- pezkuwiscan.svg
- pezkuwistats.svg
- pezkuwiassembly.svg
- pezkuwiholic.svg

packages/react-query/src/Available.tsx

@@ -0,0 +1,35 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DeriveBalancesAll } from '@pezkuwi/api-derive/types';
+import type { AccountId, AccountIndex, Address } from '@pezkuwi/types/interfaces';
+
+import React from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+
+import FormatBalance from './FormatBalance.js';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
+}
+
+function AvailableDisplay ({ children, className = '', label, params }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances?.all, [params]);
+
+  return (
+    <FormatBalance
+      className={className}
+      label={label}
+      value={allBalances?.transferable || allBalances?.availableBalance}
+    >
+      {children}
+    </FormatBalance>
+  );
+}
+
+export default React.memo(AvailableDisplay);

packages/react-query/src/Balance.tsx

@@ -0,0 +1,35 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DeriveBalancesAll } from '@pezkuwi/api-derive/types';
+import type { AccountId, AccountIndex, Address } from '@pezkuwi/types/interfaces';
+
+import React from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+
+import FormatBalance from './FormatBalance.js';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
+}
+
+function BalanceDisplay ({ children, className = '', label, params }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances?.all, [params]);
+
+  return (
+    <FormatBalance
+      className={className}
+      label={label}
+      value={allBalances?.freeBalance}
+    >
+      {children}
+    </FormatBalance>
+  );
+}
+
+export default React.memo(BalanceDisplay);

packages/react-query/src/BalanceFree.tsx

@@ -0,0 +1,35 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DeriveBalancesAll } from '@pezkuwi/api-derive/types';
+import type { AccountId, AccountIndex, Address } from '@pezkuwi/types/interfaces';
+
+import React from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+
+import FormatBalance from './FormatBalance.js';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
+}
+
+function BalanceFree ({ children, className = '', label, params }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances?.all, [params]);
+
+  return (
+    <FormatBalance
+      className={className}
+      label={label}
+      value={allBalances?.freeBalance}
+    >
+      {children}
+    </FormatBalance>
+  );
+}
+
+export default React.memo(BalanceFree);

packages/react-query/src/BalanceVoting.tsx

@@ -0,0 +1,36 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DeriveBalancesAll } from '@pezkuwi/api-derive/types';
+import type { AccountId, AccountIndex, Address } from '@pezkuwi/types/interfaces';
+
+import React from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+
+import FormatBalance from './FormatBalance.js';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  isReferenda?: boolean;
+  label?: React.ReactNode;
+  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
+}
+
+function BalanceVoting ({ children, className = '', isReferenda, label, params }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances?.all, [params]);
+
+  return (
+    <FormatBalance
+      className={className}
+      label={label}
+      value={isReferenda && api.query.convictionVoting && allBalances ? allBalances.votingBalance.add(allBalances.reservedBalance) : allBalances?.votingBalance}
+    >
+      {children}
+    </FormatBalance>
+  );
+}
+
+export default React.memo(BalanceVoting);

packages/react-query/src/BestFinalized.tsx

@@ -0,0 +1,30 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { BlockNumber } from '@pezkuwi/types/interfaces';
+
+import React from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+import { formatNumber } from '@pezkuwi/util';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+}
+
+function BestFinalized ({ children, className = '', label }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const bestNumberFinalized = useCall<BlockNumber>(api.derive.chain.bestNumberFinalized);
+
+  return (
+    <div className={`${className} ${bestNumberFinalized ? '' : '--tmp'}`}>
+      {label || ''}{
+        <span className='--digits'>{formatNumber(bestNumberFinalized || 1234)}</span>
+      }{children}
+    </div>
+  );
+}
+
+export default React.memo(BestFinalized);

packages/react-query/src/BestNumber.tsx

@@ -0,0 +1,32 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { BlockNumber } from '@pezkuwi/types/interfaces';
+
+import React from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+import { formatNumber } from '@pezkuwi/util';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  isFinalized?: boolean;
+  label?: React.ReactNode;
+  withPound?: boolean;
+}
+
+function BestNumber ({ children, className = '', isFinalized, label, withPound }: Props): React.ReactElement<Props> {
+  const { api, isApiReady } = useApi();
+  const bestNumber = useCall<BlockNumber>(isApiReady && (isFinalized ? api.derive.chain.bestNumberFinalized : api.derive.chain.bestNumber));
+
+  return (
+    <div className={`${className} ${bestNumber ? '' : '--tmp'}`}>
+      {label || ''}{withPound && '#'}{
+        <span className='--digits'>{formatNumber(bestNumber || 1234)}</span>
+      }{children}
+    </div>
+  );
+}
+
+export default React.memo(BestNumber);

packages/react-query/src/BlockToTime.tsx

@@ -0,0 +1,54 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ApiPromise } from '@pezkuwi/api';
+import type { BN } from '@pezkuwi/util';
+
+import React from 'react';
+
+import { styled } from '@pezkuwi/react-components/styled';
+import { useBlockTime } from '@pezkuwi/react-hooks';
+
+interface Props {
+  api?: ApiPromise;
+  children?: React.ReactNode;
+  className?: string;
+  isInline?: boolean;
+  label?: React.ReactNode;
+  value?: BN;
+}
+
+function BlockToTime ({ api, children, className = '', isInline, label, value }: Props): React.ReactElement<Props> | null {
+  const [, text] = useBlockTime(value, api);
+
+  if (!value || value.isZero()) {
+    return null;
+  }
+
+  return (
+    <StyledDiv className={`${className} ui--BlockToTime ${isInline ? 'isInline' : ''}`}>
+      {label || ''}{text.split(' ').map((v, index) =>
+        <span
+          className={index % 2 ? 'timeUnits' : undefined}
+          key={index}
+        >{v}</span>
+      )}{children}
+    </StyledDiv>
+  );
+}
+
+const StyledDiv = styled.div`
+  &.isInline {
+    display: inline-block;
+  }
+
+  span+span {
+    padding-left: 0.25em;
+  }
+
+  span.timeUnits {
+    font-size: var(--font-percent-tiny);
+  }
+`;
+
+export default React.memo(BlockToTime);

packages/react-query/src/Bonded.tsx

@@ -0,0 +1,44 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Option } from '@pezkuwi/types';
+import type { AccountId, AccountIndex, Address, StakingLedger } from '@pezkuwi/types/interfaces';
+
+import React from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+
+import FormatBalance from './FormatBalance.js';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
+  label?: React.ReactNode;
+}
+
+const OPT_C = {
+  transform: (value: Option<AccountId>) => value.unwrapOr(null)
+};
+
+const OPT_L = {
+  transform: (value: Option<StakingLedger>) => value.unwrapOr(null)
+};
+
+function BondedDisplay ({ children, className = '', label, params }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const controllerId = useCall<AccountId | null>(api.query.staking?.bonded, [params], OPT_C);
+  const stakingLedger = useCall<StakingLedger | null>(controllerId && api.query.staking?.ledger, [controllerId], OPT_L);
+
+  return (
+    <FormatBalance
+      className={className}
+      label={label}
+      value={stakingLedger?.active}
+    >
+      {children}
+    </FormatBalance>
+  );
+}
+
+export default React.memo(BondedDisplay);

packages/react-query/src/Chain.tsx

@@ -0,0 +1,27 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { useApi } from '@pezkuwi/react-hooks';
+
+import { useTranslation } from './translate.js';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+}
+
+function Chain ({ children, className = '', label }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { systemChain } = useApi();
+
+  return (
+    <div className={className}>
+      {label || ''}{systemChain || t('Unknown')}{children}
+    </div>
+  );
+}
+
+export default React.memo(Chain);

packages/react-query/src/CoreDescriptor.tsx

@@ -0,0 +1,29 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { PezkuwiRuntimeTeyrchainsAssignerCoretimeCoreDescriptor } from '@pezkuwi/types/lookup';
+
+import React from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  query: string;
+}
+
+function BrokerStatus ({ children, className = '', query }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const status = useCall<PezkuwiRuntimeTeyrchainsAssignerCoretimeCoreDescriptor>(api.query.broker?.status);
+  const strStatus = status === undefined ? '' : status.toJSON()[query];
+
+  return (
+    <div className={className}>
+      {strStatus?.toString()}
+      {children}
+    </div>
+  );
+}
+
+export default React.memo(BrokerStatus);

packages/react-query/src/Elapsed.tsx

@@ -0,0 +1,91 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { BN } from '@pezkuwi/util';
+
+import React, { useEffect, useState } from 'react';
+
+import { styled } from '@pezkuwi/react-components/styled';
+import { bnToBn } from '@pezkuwi/util';
+
+type Ticker = (now: number) => void;
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  value?: BN | Date | number;
+}
+
+const TICK_TIMEOUT = 100;
+const tickers = new Map<number, Ticker>();
+
+let lastNow = Date.now();
+let lastId = 0;
+
+function tick (): void {
+  lastNow = Date.now();
+
+  for (const ticker of tickers.values()) {
+    ticker(lastNow);
+  }
+
+  setTimeout(tick, TICK_TIMEOUT);
+}
+
+function formatValue (value: number, type = 's', withDecimal = false): React.ReactNode {
+  const [pre, post] = value.toFixed(1).split('.');
+
+  return withDecimal
+    ? <>{pre}.{post} <span className='timeUnit'>{type}</span></>
+    : <>{pre} <span className='timeUnit'>{type}</span></>;
+}
+
+function getDisplayValue (now = 0, value: BN | Date | number = 0): React.ReactNode {
+  const tsValue = (
+    value && (value as Date).getTime
+      ? (value as Date).getTime()
+      : bnToBn(value as number).toNumber()
+  ) || 0;
+
+  if (!now || !tsValue) {
+    return formatValue(0, 's', true);
+  }
+
+  const elapsed = Math.max(Math.abs(now - tsValue), 0) / 1000;
+
+  return (elapsed < 60)
+    ? formatValue(elapsed, 's', elapsed < 15)
+    : (elapsed < 3600)
+      ? formatValue(elapsed / 60, 'min')
+      : formatValue(elapsed / 3600, 'hr');
+}
+
+tick();
+
+function Elapsed ({ children, className = '', value }: Props): React.ReactElement<Props> {
+  const [now, setNow] = useState(lastNow);
+
+  useEffect((): () => void => {
+    const id = lastId++;
+
+    tickers.set(id, setNow);
+
+    return (): void => {
+      tickers.delete(id);
+    };
+  }, []);
+
+  return (
+    <StyledDiv className={`${className} ui--Elapsed --digits`}>
+      {getDisplayValue(now, value)}{children}
+    </StyledDiv>
+  );
+}
+
+const StyledDiv = styled.div`
+  .timeUnit {
+    font-size: var(--font-percent-tiny);
+  }
+`;
+
+export default React.memo(Elapsed);

packages/react-query/src/FormatBalance.tsx

@@ -0,0 +1,159 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Compact } from '@pezkuwi/types';
+import type { Registry } from '@pezkuwi/types/types';
+import type { BN } from '@pezkuwi/util';
+
+import React, { useMemo } from 'react';
+
+import { styled } from '@pezkuwi/react-components/styled';
+import { useApi } from '@pezkuwi/react-hooks';
+import { formatBalance, isString } from '@pezkuwi/util';
+
+import { useTranslation } from './translate.js';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  format?: [decimals: number, unit: string];
+  formatIndex?: number;
+  isShort?: boolean;
+  label?: React.ReactNode;
+  labelPost?: LabelPost;
+  useTicker?: boolean;
+  value?: Compact<any> | BN | string | number | null;
+  valueFormatted?: string;
+  withCurrency?: boolean;
+  withSi?: boolean;
+}
+
+// for million, 2 * 3-grouping + comma
+const M_LENGTH = 6 + 1;
+const K_LENGTH = 3 + 1;
+
+type LabelPost = string | React.ReactNode
+
+function getFormat (registry: Registry, formatIndex = 0): [number, string] {
+  const decimals = registry.chainDecimals;
+  const tokens = registry.chainTokens;
+
+  return [
+    formatIndex < decimals.length
+      ? decimals[formatIndex]
+      : decimals[0],
+    formatIndex < tokens.length
+      ? tokens[formatIndex]
+      : tokens[1]
+  ];
+}
+
+function createElement (prefix: string, postfix: string, unit: string, label: LabelPost = '', isShort = false, ticker?: string): React.ReactNode {
+  if (ticker) {
+    return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && <span className='ui--FormatBalance-postfix'>{`${postfix || ''}`.slice(-4)}</span>}<span className='ui--FormatBalance-unit'> {ticker}</span>{label}</>;
+  } else {
+    return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && <span className='ui--FormatBalance-postfix'>{`0000${postfix || ''}`.slice(-4)}</span>}<span className='ui--FormatBalance-unit'> {unit}</span>{label}</>;
+  }
+}
+
+function splitFormat (value: string, label?: LabelPost, isShort?: boolean): React.ReactNode {
+  const [prefix, postfixFull] = value.split('.');
+  const [postfix, unit] = postfixFull.split(' ');
+
+  return createElement(prefix, postfix, unit, label, isShort);
+}
+
+function applyFormat (value: Compact<any> | BN | string | number, [decimals, token]: [number, string], withCurrency = true, withSi?: boolean, _isShort?: boolean, labelPost?: LabelPost, useTicker?: boolean): React.ReactNode {
+  const [prefix, postfix, ticker] = formatBalance(value, { decimals, forceUnit: '-', withSi: false }).split('.');
+  const isShort = _isShort || (withSi && prefix.length >= K_LENGTH);
+  const unitPost = withCurrency ? token : '';
+
+  if (prefix.length > M_LENGTH) {
+    const [major, rest] = formatBalance(value, { decimals, withUnit: false }).split('.');
+    const minor = rest.substring(0, 4);
+    const unit = rest.substring(4);
+
+    return <>{major}.<span className='ui--FormatBalance-postfix'>{minor}</span><span className='ui--FormatBalance-unit'>{unit}{unit ? unitPost : ` ${unitPost}`}</span>{labelPost || ''}</>;
+  }
+
+  if (useTicker) {
+    return createElement(prefix, postfix, unitPost, labelPost, isShort, ticker);
+  } else {
+    return createElement(prefix, postfix, unitPost, labelPost, isShort);
+  }
+}
+
+function FormatBalance ({ children, className = '', format, formatIndex, isShort, label, labelPost, useTicker, value, valueFormatted, withCurrency, withSi }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api } = useApi();
+
+  const formatInfo = useMemo(
+    () => format || getFormat(api.registry, formatIndex),
+    [api, format, formatIndex]
+  );
+
+  // labelPost here looks messy, however we ensure we have one less text node
+  return (
+    <StyledSpan className={`${className} ui--FormatBalance`}>
+      {label ? <>{label}&nbsp;</> : ''}
+      <span
+        className='ui--FormatBalance-value --digits'
+        data-testid='balance-summary'
+      >{
+          valueFormatted
+            ? splitFormat(valueFormatted, labelPost, isShort)
+            : value
+              ? value === 'all'
+                ? <>{t('everything')}{labelPost || ''}</>
+                : applyFormat(value, formatInfo, withCurrency, withSi, isShort, labelPost, useTicker)
+              : isString(labelPost)
+                ? `-${labelPost.toString()}`
+                : labelPost
+        }</span>{children}
+    </StyledSpan>
+  );
+}
+
+const StyledSpan = styled.span`
+  vertical-align: baseline;
+  white-space: nowrap;
+
+  * {
+    vertical-align: baseline !important;
+  }
+
+  > label,
+  > .label {
+    display: inline-block;
+    margin-right: 0.25rem;
+    vertical-align: baseline;
+  }
+
+  .ui--FormatBalance-unit {
+    font-size: var(--font-percent-tiny);
+  }
+
+  .ui--FormatBalance-value {
+    text-align: right;
+
+    > .ui--FormatBalance-postfix {
+      font-weight: lighter;
+      vertical-align: baseline;
+    }
+  }
+
+  > .ui--Button {
+    margin-left: 0.25rem;
+  }
+
+  .ui--Icon {
+    margin-bottom: -0.25rem;
+    margin-top: 0.25rem;
+  }
+
+  .ui--Icon+.ui--FormatBalance-value {
+    margin-left: 0.375rem;
+  }
+`;
+
+export default React.memo(FormatBalance);

packages/react-query/src/LockedVote.tsx

@@ -0,0 +1,39 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DeriveCouncilVote } from '@pezkuwi/api-derive/types';
+import type { AccountId, AccountIndex, Address } from '@pezkuwi/types/interfaces';
+
+import React from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+
+import FormatBalance from './FormatBalance.js';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
+}
+
+function LockedVote ({ children, className = '', label, params }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const info = useCall<DeriveCouncilVote>(api.derive.council.votesOf, [params]);
+
+  if (!info?.stake.gtn(0)) {
+    return null;
+  }
+
+  return (
+    <FormatBalance
+      className={className}
+      label={label}
+      value={info?.stake}
+    >
+      {children}
+    </FormatBalance>
+  );
+}
+
+export default React.memo(LockedVote);

packages/react-query/src/NodeName.tsx

@@ -0,0 +1,24 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { useApi } from '@pezkuwi/react-hooks';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+}
+
+function NodeName ({ children, className = '', label }: Props): React.ReactElement<Props> {
+  const { systemName } = useApi();
+
+  return (
+    <div className={className}>
+      {label || ''}{systemName}{children}
+    </div>
+  );
+}
+
+export default React.memo(NodeName);

packages/react-query/src/NodeVersion.tsx

@@ -0,0 +1,27 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { useApi } from '@pezkuwi/react-hooks';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+}
+
+function NodeVersion ({ children, className = '', label }: Props): React.ReactElement<Props> {
+  const { systemVersion } = useApi();
+
+  // eg. 0.1.0-90d0bb6-x86_64-macos
+  const displayVersion = systemVersion.split('-')[0];
+
+  return (
+    <div className={className}>
+      {label || ''}{displayVersion}{children}
+    </div>
+  );
+}
+
+export default React.memo(NodeVersion);

packages/react-query/src/Nonce.tsx

@@ -0,0 +1,31 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DeriveBalancesAll } from '@pezkuwi/api-derive/types';
+import type { BN } from '@pezkuwi/util';
+
+import React from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+import { formatNumber } from '@pezkuwi/util';
+
+interface Props {
+  callOnResult?: (accountNonce: BN) => void;
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+  params?: string | null;
+}
+
+function Nonce ({ children, className = '', label, params }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const allBalances = useCall<DeriveBalancesAll>(api.derive.balances?.all, [params]);
+
+  return (
+    <div className={className}>
+      {label || ''}{formatNumber(allBalances?.accountNonce)}{children}
+    </div>
+  );
+}
+
+export default React.memo(Nonce);

packages/react-query/src/PoolSize.tsx

@@ -0,0 +1,38 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { PalletBrokerStatusRecord } from '@pezkuwi/types/lookup';
+
+import React from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+function PoolSize ({ children, className = '' }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const status = useCall<PalletBrokerStatusRecord>(api.query.broker?.status);
+  let systemPool = 0;
+  let privatePool = 0;
+  let poolSize = '';
+
+  if (status === undefined) {
+    poolSize = '0';
+  } else {
+    systemPool = status.toJSON().systemPoolSize as number;
+    privatePool = status.toJSON().systemPoolSize as number;
+    poolSize = (systemPool + privatePool).toString();
+  }
+
+  return (
+    <div className={className}>
+      {poolSize}
+      {children}
+    </div>
+  );
+}
+
+export default React.memo(PoolSize);

packages/react-query/src/SessionToTime.tsx

@@ -0,0 +1,48 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DeriveSessionProgress } from '@pezkuwi/api-derive/types';
+import type { BN } from '@pezkuwi/util';
+
+import React, { useMemo } from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+import { BN_ZERO } from '@pezkuwi/util';
+
+import BlockToTime from './BlockToTime.js';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  isInline?: boolean;
+  label?: React.ReactNode;
+  value?: BN;
+}
+
+function SessionToTime ({ children, className, isInline, label, value }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const sessionInfo = useCall<DeriveSessionProgress>(api.derive.session.progress);
+
+  const blocks = useMemo(
+    () => sessionInfo && value && sessionInfo.currentIndex.lt(value)
+      ? value
+        .sub(sessionInfo.currentIndex)
+        .imul(sessionInfo.sessionLength)
+        .isub(sessionInfo.sessionProgress)
+      : BN_ZERO,
+    [sessionInfo, value]
+  );
+
+  return (
+    <BlockToTime
+      className={className}
+      isInline={isInline}
+      label={label}
+      value={blocks}
+    >
+      {children}
+    </BlockToTime>
+  );
+}
+
+export default React.memo(SessionToTime);

packages/react-query/src/TimeNow.tsx

@@ -0,0 +1,34 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Moment } from '@pezkuwi/types/interfaces';
+
+import React, { useMemo } from 'react';
+
+import Elapsed from './Elapsed.js';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+  value?: Moment;
+}
+
+function TimeNow ({ children, className = '', label, value }: Props): React.ReactElement<Props> {
+  const timestamp = Date.now();
+
+  const [now, hasValue] = useMemo(
+    () => [value || timestamp, !!(value || timestamp)],
+    [timestamp, value]
+  );
+
+  return (
+    <div className={`${className} ${hasValue ? '' : '--tmp'}`}>
+      {label || ''}
+      <Elapsed value={hasValue ? now : Date.now()} />
+      {children}
+    </div>
+  );
+}
+
+export default React.memo(TimeNow);

packages/react-query/src/TotalInactive.tsx

@@ -0,0 +1,33 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+
+import FormatBalance from './FormatBalance.js';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+}
+
+function TotalInactive ({ children, className = '', label }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const inactiveIssuance = useCall<string>(api.query.balances?.inactiveIssuance);
+
+  return (
+    <div className={className}>
+      {label || ''}
+      <FormatBalance
+        className={inactiveIssuance ? '' : '--tmp'}
+        value={inactiveIssuance || 1}
+        withSi
+      />
+      {children}
+    </div>
+  );
+}
+
+export default React.memo(TotalInactive);

packages/react-query/src/TotalIssuance.tsx

@@ -0,0 +1,33 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+
+import FormatBalance from './FormatBalance.js';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+}
+
+function TotalIssuance ({ children, className = '', label }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const totalIssuance = useCall<string>(api.query.balances?.totalIssuance);
+
+  return (
+    <div className={className}>
+      {label || ''}
+      <FormatBalance
+        className={totalIssuance ? '' : '--tmp'}
+        value={totalIssuance || 1}
+        withSi
+      />
+      {children}
+    </div>
+  );
+}
+
+export default React.memo(TotalIssuance);

packages/react-query/src/index.ts

@@ -0,0 +1,22 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default as Available } from './Available.js';
+export { default as BalanceFree } from './BalanceFree.js';
+export { default as BalanceVoting } from './BalanceVoting.js';
+export { default as BestFinalized } from './BestFinalized.js';
+export { default as BestNumber } from './BestNumber.js';
+export { default as BlockToTime } from './BlockToTime.js';
+export { default as Bonded } from './Bonded.js';
+export { default as Chain } from './Chain.js';
+export { default as Elapsed } from './Elapsed.js';
+export { default as FormatBalance } from './FormatBalance.js';
+export { default as LockedVote } from './LockedVote.js';
+export { default as NodeName } from './NodeName.js';
+export { default as NodeVersion } from './NodeVersion.js';
+export { default as Nonce } from './Nonce.js';
+export { default as PoolSize } from './PoolSize.js';
+export { default as SessionToTime } from './SessionToTime.js';
+export { default as TimeNow } from './TimeNow.js';
+export { default as TotalInactive } from './TotalInactive.js';
+export { default as TotalIssuance } from './TotalIssuance.js';

packages/react-query/src/translate.ts

@@ -0,0 +1,8 @@
+// Copyright 2017-2025 @pezkuwi/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useTranslation as useTranslationBase } from 'react-i18next';
+
+export function useTranslation (): { t: (key: string, options?: { replace: Record<string, unknown> }) => string } {
+  return useTranslationBase('react-query');
+}