mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-07-22 11:25:54 +00:00
Add Pezkuwi SDK UI - Polkadot.js Apps clone
- Clone Polkadot.js Apps repository - Update package.json with Pezkuwi branding - Add Pezkuwi endpoint to production chains (wss://pezkuwichain.app:9944) - Create comprehensive README for SDK UI - Set up project structure with all packages Next steps: - Apply Kurdistan colors (Kesk, Sor, Zer, Spi + Black) to UI theme - Replace logos with Pezkuwi branding - Test build and deployment
This commit is contained in:
Claude
@@ -0,0 +1,38 @@
|
||||
// Copyright 2017-2025 @polkadot/react-api authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type { ApiProps, SubtractProps } from '../types.js';
|
||||
import type { DefaultProps } from './types.js';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { ApiCtx } from '@polkadot/react-hooks/ctx/Api';
|
||||
import { assert } from '@polkadot/util';
|
||||
|
||||
export default function withApi <P extends ApiProps> (Inner: React.ComponentType<P>, defaultProps: DefaultProps = {}): React.ComponentType<any> {
|
||||
class WithApi extends React.PureComponent<SubtractProps<P, ApiProps>> {
|
||||
private component: any = React.createRef();
|
||||
|
||||
public override render (): React.ReactNode {
|
||||
return (
|
||||
<ApiCtx.Consumer>
|
||||
{(apiProps?: ApiProps): React.ReactNode => {
|
||||
assert(apiProps?.api, 'Application root must be wrapped inside \'react-api/Api\' to provide API context');
|
||||
|
||||
return (
|
||||
<Inner
|
||||
{...defaultProps}
|
||||
{...(apiProps as any)}
|
||||
{...this.props}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
ref={this.component}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</ApiCtx.Consumer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return WithApi;
|
||||
}
|
||||
@@ -0,0 +1,302 @@
|
||||
// Copyright 2017-2025 @polkadot/react-api authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
// SInce this file is deemed deprecated (and awaiting removal), we just don't care
|
||||
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-call */
|
||||
/* eslint-disable @typescript-eslint/restrict-template-expressions */
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-return */
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
||||
|
||||
import type { ApiProps, CallState as State, OnChangeCb, SubtractProps } from '../types.js';
|
||||
import type { Options } from './types.js';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { assert, isNull, isUndefined, nextTick } from '@polkadot/util';
|
||||
|
||||
import echoTransform from '../transform/echo.js';
|
||||
import { isEqual, triggerChange } from '../util/index.js';
|
||||
import withApi from './api.js';
|
||||
|
||||
// FIXME This is not correct, we need some junction of derive, query & consts
|
||||
interface Method {
|
||||
(...params: unknown[]): Promise<any>;
|
||||
at: (hash: Uint8Array | string, ...params: unknown[]) => Promise<any>;
|
||||
meta: any;
|
||||
multi: (params: unknown[], cb: (value?: any) => void) => Promise<any>;
|
||||
}
|
||||
|
||||
type ApiMethodInfo = [Method, unknown[], string];
|
||||
|
||||
const NOOP = (): void => {
|
||||
// ignore
|
||||
};
|
||||
|
||||
const NO_SKIP = (): boolean => false;
|
||||
|
||||
// a mapping of actual error messages that has already been shown
|
||||
const errorred: Record<string, boolean> = {};
|
||||
|
||||
export default function withCall<P extends ApiProps> (endpoint: string, { at, atProp, callOnResult, fallbacks, isMulti = false, paramName, paramPick, paramValid = false, params = [], propName, skipIf = NO_SKIP, transform = echoTransform, withIndicator = false }: Options = {}): (Inner: React.ComponentType<ApiProps>) => React.ComponentType<any> {
|
||||
return (Inner: React.ComponentType<ApiProps>): React.ComponentType<SubtractProps<P, ApiProps>> => {
|
||||
class WithPromise extends React.Component<P, State> {
|
||||
public override state: State = {
|
||||
callResult: undefined,
|
||||
callUpdated: false,
|
||||
callUpdatedAt: 0
|
||||
};
|
||||
|
||||
private destroy?: () => void;
|
||||
|
||||
private isActive = false;
|
||||
|
||||
private propName: string;
|
||||
|
||||
private timerId = -1;
|
||||
|
||||
constructor (props: P) {
|
||||
super(props);
|
||||
|
||||
const [, section, method] = endpoint.split('.');
|
||||
|
||||
this.propName = `${section}_${method}`;
|
||||
}
|
||||
|
||||
public override componentDidUpdate (prevProps: any): void {
|
||||
const oldParams = this.getParams(prevProps);
|
||||
const newParams = this.getParams(this.props);
|
||||
|
||||
if (this.isActive && !isEqual(newParams, oldParams)) {
|
||||
this
|
||||
.subscribe(newParams)
|
||||
.then(NOOP)
|
||||
.catch(NOOP);
|
||||
}
|
||||
}
|
||||
|
||||
public override componentDidMount (): void {
|
||||
this.isActive = true;
|
||||
|
||||
if (withIndicator) {
|
||||
this.timerId = window.setInterval((): void => {
|
||||
const elapsed = Date.now() - (this.state.callUpdatedAt || 0);
|
||||
const callUpdated = elapsed <= 1500;
|
||||
|
||||
if (callUpdated !== this.state.callUpdated) {
|
||||
this.nextState({ callUpdated });
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// The attachment takes time when a lot is available, set a timeout
|
||||
// to first handle the current queue before subscribing
|
||||
nextTick((): void => {
|
||||
this
|
||||
.subscribe(this.getParams(this.props))
|
||||
.then(NOOP)
|
||||
.catch(NOOP);
|
||||
});
|
||||
}
|
||||
|
||||
public override componentWillUnmount (): void {
|
||||
this.isActive = false;
|
||||
|
||||
this.unsubscribe()
|
||||
.then(NOOP)
|
||||
.catch(NOOP);
|
||||
|
||||
if (this.timerId !== -1) {
|
||||
clearInterval(this.timerId);
|
||||
}
|
||||
}
|
||||
|
||||
private nextState (state: Partial<State>): void {
|
||||
if (this.isActive) {
|
||||
this.setState(state as State);
|
||||
}
|
||||
}
|
||||
|
||||
private getParams (props: any): [boolean, unknown[]] {
|
||||
const paramValue = paramPick
|
||||
? paramPick(props)
|
||||
: paramName
|
||||
? props[paramName]
|
||||
: undefined;
|
||||
|
||||
if (atProp) {
|
||||
at = props[atProp];
|
||||
}
|
||||
|
||||
// When we are specifying a param and have an invalid, don't use it. For 'params',
|
||||
// we default to the original types, i.e. no validation (query app uses this)
|
||||
if (!paramValid && paramName && (isUndefined(paramValue) || isNull(paramValue))) {
|
||||
return [false, []];
|
||||
}
|
||||
|
||||
const values = isUndefined(paramValue)
|
||||
? params
|
||||
: params.concat(
|
||||
(Array.isArray(paramValue) && !(paramValue as any).toU8a)
|
||||
? paramValue
|
||||
: [paramValue]
|
||||
);
|
||||
|
||||
return [true, values];
|
||||
}
|
||||
|
||||
private constructApiSection = (endpoint: string): [Record<string, Method>, string, string, string] => {
|
||||
const { api } = this.props;
|
||||
const [area, section, method, ...others] = endpoint.split('.');
|
||||
|
||||
assert(area.length && section.length && method.length && others.length === 0, `Invalid API format, expected <area>.<section>.<method>, found ${endpoint}`);
|
||||
assert(['consts', 'rpc', 'query', 'derive'].includes(area), `Unknown api.${area}, expected consts, rpc, query or derive`);
|
||||
assert(!at || area === 'query', 'Only able to do an \'at\' query on the api.query interface');
|
||||
|
||||
const apiSection = (api as any)[area][section];
|
||||
|
||||
return [
|
||||
apiSection,
|
||||
area,
|
||||
section,
|
||||
method
|
||||
];
|
||||
};
|
||||
|
||||
private getApiMethod (newParams: unknown[]): ApiMethodInfo {
|
||||
if (endpoint === 'subscribe') {
|
||||
const [fn, ...params] = newParams;
|
||||
|
||||
return [
|
||||
fn as Method,
|
||||
params,
|
||||
'subscribe'
|
||||
];
|
||||
}
|
||||
|
||||
const endpoints = [endpoint].concat(fallbacks || []);
|
||||
const expanded = endpoints.map(this.constructApiSection);
|
||||
const [apiSection, area, section, method] = expanded.find(([apiSection]): boolean =>
|
||||
!!apiSection
|
||||
) || [{}, expanded[0][1], expanded[0][2], expanded[0][3]];
|
||||
|
||||
assert(apiSection?.[method], `Unable to find api.${area}.${section}.${method}`);
|
||||
|
||||
const meta = apiSection[method].meta;
|
||||
|
||||
if (area === 'query' && meta?.type.isMap) {
|
||||
const arg = newParams[0];
|
||||
|
||||
assert((!isUndefined(arg) && !isNull(arg)) || meta.type.asMap.kind.isLinkedMap, `${meta.name} expects one argument`);
|
||||
}
|
||||
|
||||
return [
|
||||
apiSection[method],
|
||||
newParams,
|
||||
method.startsWith('subscribe') ? 'subscribe' : area
|
||||
];
|
||||
}
|
||||
|
||||
private async subscribe ([isValid, newParams]: [boolean, unknown[]]): Promise<void> {
|
||||
if (!isValid || skipIf(this.props)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { api } = this.props;
|
||||
let info: ApiMethodInfo | undefined;
|
||||
|
||||
await api.isReady;
|
||||
|
||||
try {
|
||||
assert(at || !atProp, 'Unable to perform query on non-existent at hash');
|
||||
|
||||
info = this.getApiMethod(newParams);
|
||||
} catch (error) {
|
||||
// don't flood the console with the same errors each time, just do it once, then
|
||||
// ignore it going forward
|
||||
if (!errorred[(error as Error).message]) {
|
||||
console.warn(endpoint, '::', error);
|
||||
|
||||
errorred[(error as Error).message] = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!info) {
|
||||
return;
|
||||
}
|
||||
|
||||
const [apiMethod, params, area] = info;
|
||||
const updateCb = (value?: any): void =>
|
||||
this.triggerUpdate(this.props, value);
|
||||
|
||||
await this.unsubscribe();
|
||||
|
||||
try {
|
||||
if (['derive', 'subscribe'].includes(area) || (area === 'query' && (!at && !atProp))) {
|
||||
this.destroy = isMulti
|
||||
? await apiMethod.multi(params, updateCb)
|
||||
: await apiMethod(...params, updateCb);
|
||||
} else if (area === 'consts') {
|
||||
updateCb(apiMethod);
|
||||
} else {
|
||||
updateCb(
|
||||
at
|
||||
? await apiMethod.at(at, ...params)
|
||||
: await apiMethod(...params)
|
||||
);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/require-await
|
||||
private async unsubscribe (): Promise<void> {
|
||||
if (this.destroy) {
|
||||
this.destroy();
|
||||
this.destroy = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
private triggerUpdate (props: any, value?: any): void {
|
||||
try {
|
||||
const callResult = (props.transform || transform)(value);
|
||||
|
||||
if (!this.isActive || isEqual(callResult, this.state.callResult)) {
|
||||
return;
|
||||
}
|
||||
|
||||
triggerChange(callResult as OnChangeCb, callOnResult, props.callOnResult as OnChangeCb);
|
||||
|
||||
this.nextState({
|
||||
callResult,
|
||||
callUpdated: true,
|
||||
callUpdatedAt: Date.now()
|
||||
});
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
public override render (): React.ReactNode {
|
||||
const { callResult, callUpdated, callUpdatedAt } = this.state;
|
||||
const _props = {
|
||||
...this.props,
|
||||
callUpdated,
|
||||
callUpdatedAt
|
||||
};
|
||||
|
||||
if (!isUndefined(callResult)) {
|
||||
(_props as any)[propName || this.propName] = callResult;
|
||||
}
|
||||
|
||||
return (
|
||||
<Inner {..._props} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return withApi(WithPromise);
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
// Copyright 2017-2025 @polkadot/react-api authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type { BaseProps } from '../types.js';
|
||||
import type { DefaultProps, Options } from './types.js';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import withCall from './call.js';
|
||||
|
||||
interface Props<T> extends BaseProps<T> {
|
||||
callResult?: T;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
|
||||
export default function withCallDiv<T> (endpoint: string, options: Options = {}) {
|
||||
return (render: (value?: T) => React.ReactNode, defaultProps: DefaultProps = {}): React.ComponentType<any> => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
function Inner ({ callResult, callUpdated, children, className = defaultProps.className, label = '' }: any): React.ReactElement<Props<T>> {
|
||||
return (
|
||||
<div
|
||||
{...defaultProps}
|
||||
className={[className || '', callUpdated ? 'rx--updated' : undefined].join(' ')}
|
||||
>
|
||||
{label}{render(callResult as T)}{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return withCall(endpoint, { ...options, propName: 'callResult' })(Inner);
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
// Copyright 2017-2025 @polkadot/react-api authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type React from 'react';
|
||||
import type { ApiProps, SubtractProps } from '../types.js';
|
||||
import type { Options } from './types.js';
|
||||
|
||||
import withCall from './call.js';
|
||||
|
||||
type Call = string | [string, Options];
|
||||
|
||||
export default function withCalls <P> (...calls: Call[]): (Component: React.ComponentType<P>) => React.ComponentType<SubtractProps<P, ApiProps>> {
|
||||
return (Component: React.ComponentType<P>): React.ComponentType<any> => {
|
||||
// NOTE: Order is reversed so it makes sense in the props, i.e. component
|
||||
// after something can use the value of the preceding version
|
||||
return calls
|
||||
.reverse()
|
||||
.reduce((Component, call): React.ComponentType<any> => {
|
||||
return Array.isArray(call)
|
||||
? withCall(...call)(Component as unknown as React.ComponentType<ApiProps>)
|
||||
: withCall(call)(Component as unknown as React.ComponentType<ApiProps>);
|
||||
}, Component);
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// Copyright 2017-2025 @polkadot/react-api authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
export { default as withApi } from './api.js';
|
||||
export { default as withCall } from './call.js';
|
||||
export { default as withCallDiv } from './callDiv.js';
|
||||
export { default as withCalls } from './calls.js';
|
||||
export { default as withMulti } from './multi.js';
|
||||
export { default as withObservable } from './observable.js';
|
||||
export * from './onlyOn.js';
|
||||
@@ -0,0 +1,16 @@
|
||||
// Copyright 2017-2025 @polkadot/react-api authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type React from 'react';
|
||||
|
||||
type HOC = (Component: React.ComponentType<any>) => React.ComponentType<any>;
|
||||
|
||||
export default function withMulti<T> (Component: React.ComponentType<T>, ...hocs: HOC[]): React.ComponentType<any> {
|
||||
// NOTE: Order is reversed so it makes sense in the props, i.e. component
|
||||
// after something can use the value of the preceding version
|
||||
return hocs
|
||||
.reverse()
|
||||
.reduce((Component, hoc): React.ComponentType<any> =>
|
||||
hoc(Component), Component
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
// Copyright 2017-2025 @polkadot/react-api authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
// TODO: Lots of duplicated code between this and withObservable, surely there is a better way of doing this?
|
||||
|
||||
import type { Observable, OperatorFunction } from 'rxjs';
|
||||
import type { CallState } from '../types.js';
|
||||
import type { DefaultProps, HOC, Options, RenderFn } from './types.js';
|
||||
|
||||
import React from 'react';
|
||||
import { catchError, map, of } from 'rxjs';
|
||||
|
||||
import echoTransform from '../transform/echo.js';
|
||||
import { intervalObservable, isEqual, triggerChange } from '../util/index.js';
|
||||
|
||||
interface State extends CallState {
|
||||
subscriptions: { unsubscribe: () => void }[];
|
||||
}
|
||||
|
||||
export default function withObservable<T, P> (observable: Observable<P>, { callOnResult, propName = 'value', transform = echoTransform }: Options = {}): HOC {
|
||||
return (Inner: React.ComponentType<any>, defaultProps: DefaultProps = {}, render?: RenderFn): React.ComponentType<any> => {
|
||||
class WithObservable extends React.Component<any, State> {
|
||||
private isActive = true;
|
||||
|
||||
public override state: State = {
|
||||
callResult: undefined,
|
||||
callUpdated: false,
|
||||
callUpdatedAt: 0,
|
||||
subscriptions: []
|
||||
};
|
||||
|
||||
public override componentDidMount (): void {
|
||||
this.setState({
|
||||
subscriptions: [
|
||||
observable
|
||||
.pipe(
|
||||
map(transform) as OperatorFunction<P, any>,
|
||||
catchError(() => of(undefined))
|
||||
)
|
||||
.subscribe((value) => this.triggerUpdate(this.props, value as T)),
|
||||
intervalObservable(this)
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
public override componentWillUnmount (): void {
|
||||
this.isActive = false;
|
||||
this.state.subscriptions.forEach((subscription): void =>
|
||||
subscription.unsubscribe()
|
||||
);
|
||||
}
|
||||
|
||||
private triggerUpdate = (props: P, callResult?: T): void => {
|
||||
try {
|
||||
if (!this.isActive || isEqual(callResult, this.state.callResult)) {
|
||||
return;
|
||||
}
|
||||
|
||||
triggerChange(callResult, callOnResult, (props as Options).callOnResult || defaultProps.callOnResult);
|
||||
|
||||
this.setState({
|
||||
callResult,
|
||||
callUpdated: true,
|
||||
callUpdatedAt: Date.now()
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(this.props, error);
|
||||
}
|
||||
};
|
||||
|
||||
public override render (): React.ReactNode {
|
||||
const { children } = this.props;
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
const { callResult, callUpdated, callUpdatedAt } = this.state;
|
||||
const _props = {
|
||||
...defaultProps,
|
||||
...this.props,
|
||||
callUpdated,
|
||||
callUpdatedAt,
|
||||
[propName]: callResult
|
||||
};
|
||||
|
||||
return (
|
||||
<Inner {..._props}>
|
||||
{render?.(callResult)}{children}
|
||||
</Inner>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return WithObservable;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
// Copyright 2017-2025 @polkadot/app-accounts authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type { ComponentType } from 'react';
|
||||
import type { Environment } from '../types.js';
|
||||
|
||||
import { getEnvironment } from '../util/index.js';
|
||||
|
||||
const onlyOn = (environment: Environment) => <T extends ComponentType<any>>(component: T): T | (() => null) => {
|
||||
if (getEnvironment() === environment) {
|
||||
return component;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react/display-name
|
||||
return () => null;
|
||||
};
|
||||
|
||||
export const onlyOnWeb = onlyOn('web');
|
||||
export const onlyOnApp = onlyOn('app');
|
||||
@@ -0,0 +1,44 @@
|
||||
// Copyright 2017-2025 @polkadot/react-api authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type React from 'react';
|
||||
import type { OnChangeCb } from '../types.js';
|
||||
|
||||
export type Transform = (value: any, index: number) => any;
|
||||
|
||||
export interface DefaultProps {
|
||||
callOnResult?: OnChangeCb;
|
||||
[index: string]: any;
|
||||
}
|
||||
|
||||
export interface Options {
|
||||
at?: Uint8Array | string;
|
||||
atProp?: string;
|
||||
callOnResult?: OnChangeCb;
|
||||
fallbacks?: string[];
|
||||
isMulti?: boolean;
|
||||
params?: unknown[];
|
||||
paramName?: string;
|
||||
paramPick?: (props: any) => unknown;
|
||||
paramValid?: boolean;
|
||||
propName?: string;
|
||||
skipIf?: (props: any) => boolean;
|
||||
transform?: Transform;
|
||||
withIndicator?: boolean;
|
||||
}
|
||||
|
||||
export type RenderFn = (value?: any) => any;
|
||||
|
||||
export type StorageTransform = (input: any, index: number) => unknown;
|
||||
|
||||
export type HOC = (Component: React.ComponentType<unknown>, defaultProps?: DefaultProps, render?: RenderFn) => React.ComponentType<unknown>;
|
||||
|
||||
export interface ApiMethod {
|
||||
name: string;
|
||||
section?: string;
|
||||
}
|
||||
|
||||
export type ComponentRenderer = (render: RenderFn, defaultProps?: DefaultProps) => React.ComponentType<any>;
|
||||
|
||||
export type OmitProps<T, K> = Pick<T, Exclude<keyof T, K>>;
|
||||
export type SubtractProps<T, K> = OmitProps<T, keyof K>;
|
||||
Reference in New Issue
Block a user