Initial commit: Pezkuwi SDK UI

Comprehensive web interface for interacting with Pezkuwi blockchain. Features: - Blockchain explorer - Wallet management - Staking interface - Governance participation - Developer tools Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-07-15 12:35:48 +00:00 · 2026-01-19 13:55:36 +03:00
commit d949863789
5831 changed files with 327739 additions and 0 deletions
@@ -0,0 +1,76 @@
+// Copyright 2017-2026 @pezkuwi/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DeriveStakingAccount } from '@pezkuwi/api-derive/types';
+import type { Option } from '@pezkuwi/types';
+import type { SlashingSpans } from '@pezkuwi/types/interfaces';
+import type { BN } from '@pezkuwi/util';
+
+import React from 'react';
+
+import { useAccounts, useApi, useCall } from '@pezkuwi/react-hooks';
+import { FormatBalance } from '@pezkuwi/react-query';
+
+import { useTranslation } from './translate.js';
+import TxButton from './TxButton.js';
+
+interface DeriveStakingAccountPartial {
+  controllerId: DeriveStakingAccount['controllerId'] | string;
+  stashId: DeriveStakingAccount['stashId'] | string;
+  redeemable?: BN;
+}
+
+interface Props {
+  className?: string;
+  isPool?: boolean;
+  stakingInfo?: DeriveStakingAccountPartial;
+}
+
+const OPT_SPAN = {
+  transform: (optSpans: Option<SlashingSpans>): number =>
+    optSpans.isNone
+      ? 0
+      : optSpans.unwrap().prior.length + 1
+};
+
+function StakingRedeemable ({ className = '', isPool, stakingInfo }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const { allAccounts } = useAccounts();
+  const { t } = useTranslation();
+  const spanCount = useCall<number>(api.query.staking.slashingSpans, [stakingInfo?.stashId], OPT_SPAN);
+
+  if (!stakingInfo?.redeemable?.gtn(0)) {
+    return null;
+  }
+
+  return (
+    <div className={className}>
+      <FormatBalance value={stakingInfo.redeemable}>
+        {allAccounts.includes((stakingInfo.controllerId || '').toString())
+          ? (
+            <TxButton
+              accountId={stakingInfo.controllerId}
+              icon='lock'
+              isIcon
+              key='unlock'
+              params={
+                isPool
+                  ? [stakingInfo.controllerId, spanCount]
+                  : api.tx.staking.withdrawUnbonded.meta.args.length === 1
+                    ? [spanCount]
+                    : []
+              }
+              tooltip={t('Withdraw these unbonded funds')}
+              tx={
+                isPool
+                  ? api.tx.nominationPools.withdrawUnbonded
+                  : api.tx.staking.withdrawUnbonded}
+            />
+          )
+          : <span className='icon-void'>&nbsp;</span>}
+      </FormatBalance>
+    </div>
+  );
+}
+
+export default React.memo(StakingRedeemable);