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
2026-05-06 13:47:55 +00:00 · 2026-01-07 13:05:27 +03:00
commit d21bfb1320
5867 changed files with 329019 additions and 0 deletions
@@ -0,0 +1,58 @@
+// Copyright 2017-2025 @pezkuwi/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { LineData } from './types.js';
+
+import React, { useMemo } from 'react';
+
+import { Chart, Spinner, styled } from '@pezkuwi/react-components';
+
+interface Props {
+  className?: string;
+  colors: (string | undefined)[];
+  labels: string[];
+  legends: string[];
+  title: string;
+  values: LineData;
+}
+
+function ChartDisplay ({ className = '', colors, labels, legends, title, values }: Props): React.ReactElement<Props> {
+  const isLoading = useMemo(
+    () => !labels || labels.length === 0 || !values || values.length === 0 || !values[0]?.length,
+    [labels, values]
+  );
+
+  return (
+    <StyledDiv className={`${className} staking--Chart ${isLoading ? 'isLoading' : ''}`}>
+      <Chart.Line
+        colors={colors}
+        labels={labels}
+        legends={legends}
+        title={title}
+        values={values}
+      />
+      {isLoading && (
+        <Spinner />
+      )}
+    </StyledDiv>
+  );
+}
+
+const StyledDiv = styled.div`
+  &.isLoading {
+    position: relative;
+
+    canvas, h1 {
+      opacity: 0.25;
+    }
+
+    .ui--Spinner {
+      position: absolute;
+      top: 34%;
+      left: 0;
+      right: 0;
+    }
+  }
+`;
+
+export default React.memo(ChartDisplay);
@@ -0,0 +1,76 @@
+// Copyright 2017-2025 @pezkuwi/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DeriveStakerPoints } from '@pezkuwi/api-derive/types';
+import type { LineData, Props } from './types.js';
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+
+import { useTranslation } from '../translate.js';
+import Chart from './Chart.js';
+
+const COLORS_POINTS = [undefined, '#acacac'];
+
+function extractPoints (labels: string[], points: DeriveStakerPoints[]): LineData {
+  const avgSet = new Array<number>(labels.length);
+  const idxSet = new Array<number>(labels.length);
+  const [total, avgCount] = points.reduce(([total, avgCount], { points }) => {
+    if (points.gtn(0)) {
+      total += points.toNumber();
+      avgCount++;
+    }
+
+    return [total, avgCount];
+  }, [0, 0]);
+
+  points.forEach(({ era, points }): void => {
+    const avg = avgCount > 0
+      ? Math.ceil(total * 100 / avgCount) / 100
+      : 0;
+    const index = labels.indexOf(era.toHuman());
+
+    if (index !== -1) {
+      avgSet[index] = avg;
+      idxSet[index] = points.toNumber();
+    }
+  });
+
+  return [idxSet, avgSet];
+}
+
+function ChartPoints ({ labels, validatorId }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const params = useMemo(() => [validatorId, false], [validatorId]);
+  const stakerPoints = useCall<DeriveStakerPoints[]>(api.derive.staking.stakerPoints, params);
+  const [values, setValues] = useState<LineData>([]);
+
+  useEffect(
+    () => setValues([]),
+    [validatorId]
+  );
+
+  useEffect(
+    () => stakerPoints && setValues(extractPoints(labels, stakerPoints)),
+    [labels, stakerPoints]
+  );
+
+  const legendsRef = useRef([
+    t('points'),
+    t('average')
+  ]);
+
+  return (
+    <Chart
+      colors={COLORS_POINTS}
+      labels={labels}
+      legends={legendsRef.current}
+      title={t('era points')}
+      values={values}
+    />
+  );
+}
+
+export default React.memo(ChartPoints);
@@ -0,0 +1,81 @@
+// Copyright 2017-2025 @pezkuwi/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DeriveStakerPrefs } from '@pezkuwi/api-derive/types';
+import type { LineData, Props } from './types.js';
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+import { BN, BN_BILLION } from '@pezkuwi/util';
+
+import { useTranslation } from '../translate.js';
+import Chart from './Chart.js';
+
+const MULT = new BN(100 * 100);
+const COLORS_POINTS = [undefined, '#acacac'];
+
+function extractPrefs (labels: string[], prefs: DeriveStakerPrefs[]): LineData {
+  const avgSet = new Array<number>(labels.length);
+  const idxSet = new Array<number>(labels.length);
+  const [total, avgCount] = prefs.reduce(([total, avgCount], { validatorPrefs }) => {
+    const comm = validatorPrefs.commission.unwrap().mul(MULT).div(BN_BILLION).toNumber() / 100;
+
+    if (comm !== 0) {
+      total += comm;
+      avgCount++;
+    }
+
+    return [total, avgCount];
+  }, [0, 0]);
+
+  prefs.forEach(({ era, validatorPrefs }): void => {
+    const comm = validatorPrefs.commission.unwrap().mul(MULT).div(BN_BILLION).toNumber() / 100;
+    const avg = avgCount > 0
+      ? Math.ceil(total * 100 / avgCount) / 100
+      : 0;
+    const index = labels.indexOf(era.toHuman());
+
+    if (index !== -1) {
+      avgSet[index] = avg;
+      idxSet[index] = comm;
+    }
+  });
+
+  return [idxSet, avgSet];
+}
+
+function ChartPrefs ({ labels, validatorId }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const params = useMemo(() => [validatorId, false], [validatorId]);
+  const stakerPrefs = useCall<DeriveStakerPrefs[]>(api.derive.staking.stakerPrefs, params);
+  const [values, setValues] = useState<LineData>([]);
+
+  useEffect(
+    () => setValues([]),
+    [validatorId]
+  );
+
+  useEffect(
+    () => stakerPrefs && setValues(extractPrefs(labels, stakerPrefs)),
+    [labels, stakerPrefs]
+  );
+
+  const legendsRef = useRef([
+    t('commission'),
+    t('average')
+  ]);
+
+  return (
+    <Chart
+      colors={COLORS_POINTS}
+      labels={labels}
+      legends={legendsRef.current}
+      title={t('commission')}
+      values={values}
+    />
+  );
+}
+
+export default React.memo(ChartPrefs);
@@ -0,0 +1,104 @@
+// Copyright 2017-2025 @pezkuwi/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DeriveEraRewards, DeriveOwnSlashes, DeriveStakerPoints } from '@pezkuwi/api-derive/types';
+import type { LineData, Props } from './types.js';
+
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+import { BN, formatBalance } from '@pezkuwi/util';
+
+import { useTranslation } from '../translate.js';
+import Chart from './Chart.js';
+import { balanceToNumber } from './util.js';
+
+const COLORS_REWARD = ['#8c2200', '#008c22', '#acacac'];
+
+function extractRewards (labels: string[], erasRewards: DeriveEraRewards[], ownSlashes: DeriveOwnSlashes[], allPoints: DeriveStakerPoints[], divisor: BN): LineData {
+  const slashSet = new Array<number>(labels.length);
+  const rewardSet = new Array<number>(labels.length);
+  const avgSet = new Array<number>(labels.length);
+  const [total, avgCount] = erasRewards.reduce(([total, avgCount], { era, eraReward }) => {
+    const points = allPoints.find((points) => points.era.eq(era));
+    const reward = points?.eraPoints.gtn(0)
+      ? balanceToNumber(points.points.mul(eraReward).div(points.eraPoints), divisor)
+      : 0;
+
+    if (reward > 0) {
+      total += reward;
+      avgCount++;
+    }
+
+    return [total, avgCount];
+  }, [0, 0]);
+
+  erasRewards.forEach(({ era, eraReward }): void => {
+    const points = allPoints.find((points) => points.era.eq(era));
+    const slashed = ownSlashes.find((slash) => slash.era.eq(era));
+    const reward = points?.eraPoints.gtn(0)
+      ? balanceToNumber(points.points.mul(eraReward).div(points.eraPoints), divisor)
+      : 0;
+    const slash = slashed
+      ? balanceToNumber(slashed.total, divisor)
+      : 0;
+    const avg = avgCount > 0
+      ? Math.ceil(total * 100 / avgCount) / 100
+      : 0;
+    const index = labels.indexOf(era.toHuman());
+
+    if (index !== -1) {
+      rewardSet[index] = reward;
+      avgSet[index] = avg;
+      slashSet[index] = slash;
+    }
+  });
+
+  return [slashSet, rewardSet, avgSet];
+}
+
+function ChartRewards ({ labels, validatorId }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const params = useMemo(() => [validatorId, false], [validatorId]);
+  const ownSlashes = useCall<DeriveOwnSlashes[]>(api.derive.staking.ownSlashes, params);
+  const erasRewards = useCall<DeriveEraRewards[]>(api.derive.staking.erasRewards);
+  const stakerPoints = useCall<DeriveStakerPoints[]>(api.derive.staking.stakerPoints, params);
+  const [values, setValues] = useState<LineData>([]);
+
+  const { currency, divisor } = useMemo(
+    () => ({
+      currency: formatBalance.getDefaults().unit,
+      divisor: new BN('1'.padEnd(formatBalance.getDefaults().decimals + 1, '0'))
+    }),
+    []
+  );
+
+  useEffect(
+    () => setValues([]),
+    [validatorId]
+  );
+
+  useEffect(
+    () => erasRewards && ownSlashes && stakerPoints && setValues(extractRewards(labels, erasRewards, ownSlashes, stakerPoints, divisor)),
+    [labels, divisor, erasRewards, ownSlashes, stakerPoints]
+  );
+
+  const legends = useMemo(() => [
+    t('{{currency}} slashed', { replace: { currency } }),
+    t('{{currency}} rewards', { replace: { currency } }),
+    t('{{currency}} average', { replace: { currency } })
+  ], [currency, t]);
+
+  return (
+    <Chart
+      colors={COLORS_REWARD}
+      labels={labels}
+      legends={legends}
+      title={t('rewards & slashes')}
+      values={values}
+    />
+  );
+}
+
+export default React.memo(ChartRewards);
@@ -0,0 +1,97 @@
+// Copyright 2017-2025 @pezkuwi/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DeriveOwnExposure } from '@pezkuwi/api-derive/types';
+import type { LineData, Props } from './types.js';
+
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+import { BN, BN_ZERO, formatBalance } from '@pezkuwi/util';
+
+import { useTranslation } from '../translate.js';
+import Chart from './Chart.js';
+import { balanceToNumber } from './util.js';
+
+const COLORS_STAKE = [undefined, '#8c2200', '#acacac'];
+
+function extractStake (labels: string[], exposures: DeriveOwnExposure[], divisor: BN): LineData {
+  const expPagedSet = new Array<number>(labels.length);
+  const expMetaSet = new Array<number>(labels.length);
+  const avgSet = new Array<number>(labels.length);
+  const [total, avgCount] = exposures.reduce(([total, avgCount], { exposureMeta }) => {
+    const expMeta = exposureMeta.isSome && exposureMeta.unwrap();
+    const expM = balanceToNumber((expMeta && expMeta.total?.unwrap()) || BN_ZERO, divisor);
+
+    if (expM > 0) {
+      total += expM;
+      avgCount++;
+    }
+
+    return [total, avgCount];
+  }, [0, 0]);
+
+  exposures.forEach(({ era, exposureMeta, exposurePaged }): void => {
+    const expPaged = exposurePaged.isSome && exposurePaged.unwrap();
+    const expMeta = exposureMeta.isSome && exposureMeta.unwrap();
+    // Darwinia Crab doesn't have the total field
+    const expP = balanceToNumber((expPaged && expPaged.pageTotal?.unwrap()) || BN_ZERO, divisor);
+    const expM = balanceToNumber((expMeta && expMeta.total?.unwrap()) || BN_ZERO, divisor);
+    const avg = avgCount > 0
+      ? Math.ceil(total * 100 / avgCount) / 100
+      : 0;
+    const index = labels.indexOf(era.toHuman());
+
+    if (index !== -1) {
+      avgSet[index] = avg;
+      expPagedSet[index] = expP;
+      expMetaSet[index] = expM;
+    }
+  });
+
+  return [expPagedSet, expMetaSet, avgSet];
+}
+
+function ChartStake ({ labels, validatorId }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const params = useMemo(() => [validatorId, false], [validatorId]);
+  const ownExposures = useCall<DeriveOwnExposure[]>(api.derive.staking.ownExposures, params);
+  const [values, setValues] = useState<LineData>([]);
+
+  const { currency, divisor } = useMemo(
+    () => ({
+      currency: formatBalance.getDefaults().unit,
+      divisor: new BN('1'.padEnd(formatBalance.getDefaults().decimals + 1, '0'))
+    }),
+    []
+  );
+
+  useEffect(
+    () => setValues([]),
+    [validatorId]
+  );
+
+  useEffect(
+    () => ownExposures && setValues(extractStake(labels, ownExposures, divisor)),
+    [labels, divisor, ownExposures]
+  );
+
+  const legends = useMemo(() => [
+    t('{{currency}} paged', { replace: { currency } }),
+    t('{{currency}} total', { replace: { currency } }),
+    t('{{currency}} average', { replace: { currency } })
+  ], [currency, t]);
+
+  return (
+    <Chart
+      colors={COLORS_STAKE}
+      labels={labels}
+      legends={legends}
+      title={t('elected stake')}
+      values={values}
+    />
+  );
+}
+
+export default React.memo(ChartStake);
@@ -0,0 +1,51 @@
+// Copyright 2017-2025 @pezkuwi/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Props } from './types.js';
+
+import React from 'react';
+
+import { Columar, styled } from '@pezkuwi/react-components';
+
+import ChartPoints from './ChartPoints.js';
+import ChartPrefs from './ChartPrefs.js';
+import ChartRewards from './ChartRewards.js';
+import ChartStake from './ChartStake.js';
+
+function Validator ({ className = '', labels, validatorId }: Props): React.ReactElement<Props> | null {
+  return (
+    <StyledColumar className={className}>
+      <Columar.Column>
+        <ChartPoints
+          labels={labels}
+          validatorId={validatorId}
+        />
+        <ChartRewards
+          labels={labels}
+          validatorId={validatorId}
+        />
+      </Columar.Column>
+      <Columar.Column>
+        <ChartStake
+          labels={labels}
+          validatorId={validatorId}
+        />
+        <ChartPrefs
+          labels={labels}
+          validatorId={validatorId}
+        />
+      </Columar.Column>
+    </StyledColumar>
+  );
+}
+
+const StyledColumar = styled(Columar)`
+  .staking--Chart {
+    background: var(--bg-table);
+    border: 1px solid var(--border-table);
+    border-radius: 0.25rem;
+    padding: 1rem 1.5rem;
+  }
+`;
+
+export default React.memo(Validator);
@@ -0,0 +1,72 @@
+// Copyright 2017-2025 @pezkuwi/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { INumber } from '@pezkuwi/types/types';
+
+import React, { useCallback, useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { Button, InputAddressSimple, Spinner } from '@pezkuwi/react-components';
+import { useApi, useCall } from '@pezkuwi/react-hooks';
+
+import { useTranslation } from '../translate.js';
+import Validator from './Validator.js';
+
+interface Props {
+  basePath: string,
+  className?: string;
+}
+
+function doQuery (basePath: string, validatorId?: string | null): void {
+  if (validatorId) {
+    window.location.hash = `${basePath}/query/${validatorId}`;
+  }
+}
+
+function Query ({ basePath, className }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const { value } = useParams<{ value: string }>();
+  const [validatorId, setValidatorId] = useState<string | null>(value || null);
+  const eras = useCall<INumber[]>(api.derive.staking.erasHistoric);
+
+  const labels = useMemo(
+    () => eras?.map((e) => e.toHuman() as string),
+    [eras]
+  );
+
+  const _onQuery = useCallback(
+    () => doQuery(basePath, validatorId),
+    [basePath, validatorId]
+  );
+
+  if (!labels) {
+    return <Spinner />;
+  }
+
+  return (
+    <div className={className}>
+      <InputAddressSimple
+        className='staking--queryInput'
+        defaultValue={value}
+        label={t('validator to query')}
+        onChange={setValidatorId}
+        onEnter={_onQuery}
+      >
+        <Button
+          icon='play'
+          isDisabled={!validatorId}
+          onClick={_onQuery}
+        />
+      </InputAddressSimple>
+      {value && (
+        <Validator
+          labels={labels}
+          validatorId={value}
+        />
+      )}
+    </div>
+  );
+}
+
+export default React.memo(Query);
@@ -0,0 +1,19 @@
+// Copyright 2017-2025 @pezkuwi/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { BN } from '@pezkuwi/util';
+
+export interface Props {
+  className?: string;
+  labels: string[];
+  validatorId: string;
+}
+
+export type LineDataEntry = (BN | number)[];
+
+export type LineData = LineDataEntry[];
+
+export interface ChartInfo {
+  labels: string[];
+  values: LineData;
+}
@@ -0,0 +1,45 @@
+// Copyright 2017-2025 @pezkuwi/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DeriveSessionIndexes } from '@pezkuwi/api-derive/types';
+import type { u32 } from '@pezkuwi/types';
+import type { SessionRewards } from '../types.js';
+
+import { useEffect, useState } from 'react';
+
+import { createNamedHook, useApi, useCall, useIsMountedRef } from '@pezkuwi/react-hooks';
+import { BN_ONE, BN_ZERO, isFunction } from '@pezkuwi/util';
+
+function useBlockCountsImpl (accountId: string, sessionRewards: SessionRewards[]): u32[] {
+  const { api } = useApi();
+  const mountedRef = useIsMountedRef();
+  const indexes = useCall<DeriveSessionIndexes>(api.derive.session?.indexes);
+  const current = useCall<u32>(api.query.imOnline?.authoredBlocks, [indexes?.currentIndex, accountId]);
+  const [counts, setCounts] = useState<u32[]>([]);
+  const [historic, setHistoric] = useState<u32[]>([]);
+
+  useEffect((): void => {
+    if (isFunction(api.query.imOnline?.authoredBlocks) && sessionRewards?.length) {
+      const filtered = sessionRewards.filter(({ sessionIndex }): boolean => sessionIndex.gt(BN_ZERO));
+
+      if (filtered.length) {
+        Promise
+          .all(filtered.map(({ parentHash, sessionIndex }): Promise<u32> =>
+            // eslint-disable-next-line deprecation/deprecation
+            api.query.imOnline.authoredBlocks.at(parentHash, sessionIndex.sub(BN_ONE), accountId)
+          ))
+          .then((historic): void => {
+            mountedRef.current && setHistoric(historic);
+          }).catch(console.error);
+      }
+    }
+  }, [accountId, api, mountedRef, sessionRewards]);
+
+  useEffect((): void => {
+    setCounts([...historic, current || api.createType('u32')].slice(1));
+  }, [api, current, historic]);
+
+  return counts;
+}
+
+export default createNamedHook('useBlockCounts', useBlockCountsImpl);
@@ -0,0 +1,20 @@
+// Copyright 2017-2025 @pezkuwi/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { BN } from '@pezkuwi/util';
+
+import { BN_THOUSAND, BN_ZERO, isBn, isFunction } from '@pezkuwi/util';
+
+interface ToBN {
+  toBn: () => BN;
+}
+
+export function balanceToNumber (amount: BN | ToBN = BN_ZERO, divisor: BN): number {
+  const value = isBn(amount)
+    ? amount
+    : isFunction(amount.toBn)
+      ? amount.toBn()
+      : BN_ZERO;
+
+  return value.mul(BN_THOUSAND).div(divisor).toNumber() / 1000;
+}