{motions?.map((motion: DeriveCollectiveProposal): React.ReactNode => (
diff --git a/packages/page-staking/src/Targets/Validator.tsx b/packages/page-staking/src/Targets/Validator.tsx
index fc85195443..ff9cc11dd4 100644
--- a/packages/page-staking/src/Targets/Validator.tsx
+++ b/packages/page-staking/src/Targets/Validator.tsx
@@ -32,7 +32,7 @@ function Validator ({ info: { accountId, bondOther, bondOwn, bondTotal, commissi
toggleFavorite={toggleFavorite}
/>
| {formatNumber(rankOverall)} |
-
+ |
|
diff --git a/packages/page-tech-comm/src/Proposals/Proposal.tsx b/packages/page-tech-comm/src/Proposals/Proposal.tsx
index 77cc90fdc4..0424b2463f 100644
--- a/packages/page-tech-comm/src/Proposals/Proposal.tsx
+++ b/packages/page-tech-comm/src/Proposals/Proposal.tsx
@@ -41,7 +41,7 @@ function Proposal ({ className, imageHash, prime }: Props): React.ReactElement
{formatNumber(ayes.length)}/{formatNumber(threshold)}
|
-
+ |
{ayes.map((address, index): React.ReactNode => (
))}
|
-
+ |
{nays.map((address, index): React.ReactNode => (
{
[members]
);
- const _onChangeExtrinsic = (method?: SubmittableExtrinsic<'promise'>): void =>
- setProposal(() => method || null);
- const _onChangeThreshold = (threshold?: BN): void =>
- setThreshold([threshold || null, _hasThreshold(threshold)]);
+ const _onChangeExtrinsic = useCallback(
+ (method?: SubmittableExtrinsic<'promise'>): void => setProposal(() => method || null),
+ []
+ );
+ const _onChangeThreshold = useCallback(
+ (threshold?: BN): void => setThreshold([threshold || null, _hasThreshold(threshold)]),
+ [_hasThreshold]
+ );
return (
<>
diff --git a/packages/page-tech-comm/src/Proposals/index.tsx b/packages/page-tech-comm/src/Proposals/index.tsx
index 000bcd9189..d22db211de 100644
--- a/packages/page-tech-comm/src/Proposals/index.tsx
+++ b/packages/page-tech-comm/src/Proposals/index.tsx
@@ -29,13 +29,13 @@ function Proposals ({ className, isMember, members, prime, proposals }: Props):
| |
- {t('threshold')} |
- {t('aye')} |
- {t('nay')} |
+ {t('threshold')} |
+ {t('aye')} |
+ {t('nay')} |
|
- {proposals?.map((hash: Hash): React.ReactNode => (
+ {proposals.map((hash: Hash): React.ReactNode => (
{formatNumber(id)}
-
+ |
|
-
-
- |
|
-
+ |
|
+
+
+ |
{withSend && (
<>
@@ -52,9 +52,12 @@ function ProposalDisplay ({ className, isMember, proposal: { council, id, propos
/>
)}
+ |
+
|
diff --git a/packages/page-treasury/src/Overview/Proposals.tsx b/packages/page-treasury/src/Overview/Proposals.tsx
index 8403a07314..9addb24cfa 100644
--- a/packages/page-treasury/src/Overview/Proposals.tsx
+++ b/packages/page-treasury/src/Overview/Proposals.tsx
@@ -48,10 +48,10 @@ function ProposalsBase ({ className, isApprovals, proposals }: Props): React.Rea
| |
- {t('bond')} |
- {t('beneficiary')} |
- {t('value')} |
- |
+ {t('beneficiary')} |
+ {t('payment')} |
+ {t('bond')} |
+ |
{proposals.map((proposal): React.ReactNode => (
diff --git a/packages/react-components/src/Button/Group.tsx b/packages/react-components/src/Button/Group.tsx
index 47b844414c..0b03dfe3da 100644
--- a/packages/react-components/src/Button/Group.tsx
+++ b/packages/react-components/src/Button/Group.tsx
@@ -35,6 +35,10 @@ const Memo = React.memo(styled(ButtonGroup)`
margin-top: 0.75rem;
}
+ > .ui.buttons {
+ vertical-align: middle;
+ }
+
&.centered {
margin-bottom: 0.5rem;
text-align: center;
diff --git a/packages/react-components/src/Status/Queue.tsx b/packages/react-components/src/Status/Queue.tsx
index 9e80d8d26e..8d7c62536f 100644
--- a/packages/react-components/src/Status/Queue.tsx
+++ b/packages/react-components/src/Status/Queue.tsx
@@ -8,7 +8,7 @@ import { ITuple, SignerPayloadJSON } from '@polkadot/types/types';
import { BareProps } from '../types';
import { ActionStatus, PartialQueueTxExtrinsic, PartialQueueTxRpc, QueueStatus, QueueTx, QueueTxExtrinsic, QueueTxRpc, QueueTxStatus, SignerCallback } from './types';
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
import { SubmittableResult } from '@polkadot/api';
import { registry } from '@polkadot/react-api';
import jsonrpc from '@polkadot/types/interfaces/jsonrpc';
@@ -21,153 +21,195 @@ export interface Props extends BareProps {
children: React.ReactNode;
}
+interface StatusCount {
+ count: number;
+ status: ActionStatus;
+}
+
let nextId = 0;
const REMOVE_TIMEOUT = 7500;
const SUBMIT_RPC = jsonrpc.author.submitAndWatchExtrinsic;
-function Queue ({ children }: Props): React.ReactElement {
- const [_stqueue, _setStQueue] = useState([]);
- const [_txqueue, _setTxQueue] = useState([]);
- const stRef = useRef(_stqueue);
- const txRef = useRef(_txqueue);
+function mergeStatus (status: ActionStatus[]): ActionStatus[] {
+ return status
+ .reduce((result: StatusCount[], status): StatusCount[] => {
+ const prev = result.find(({ status: prev }) => prev.action === status.action && prev.status === status.status);
- const setStQueue = (st: QueueStatus[]): void => {
- stRef.current = st;
- _setStQueue(st);
- };
- const setTxQueue = (tx: QueueTx[]): void => {
- txRef.current = tx;
- _setTxQueue(tx);
- };
+ if (prev) {
+ prev.count++;
+ } else {
+ result.push({ count: 1, status });
+ }
- const addToTxQueue = (value: QueueTxExtrinsic | QueueTxRpc | QueueTx): void => {
- const id = ++nextId;
- const removeItem = (): void =>
- setTxQueue([...txRef.current.map((item): QueueTx =>
- item.id === id
- ? { ...item, status: 'completed' }
- : item
- )]);
+ return result;
+ }, [])
+ .map(({ count, status }): ActionStatus =>
+ count === 1
+ ? status
+ : { ...status, action: `${status.action} (x${count})` }
+ );
+}
- setTxQueue([...txRef.current, {
- ...value,
- id,
- removeItem,
- rpc: (value as QueueTxRpc).rpc || SUBMIT_RPC,
- status: 'queued'
- }]);
- };
+function extractEvents (result?: SubmittableResult): ActionStatus[] {
+ return mergeStatus(
+ ((result && result.events) || [])
+ // filter events handled globally, or those we are not interested in, these are
+ // handled by the global overview, so don't add them here
+ .filter((record): boolean => !!record.event && record.event.section !== 'democracy')
+ .map(({ event: { data, method, section } }): ActionStatus => {
+ if (section === 'system' && method === 'ExtrinsicFailed') {
+ const [dispatchError] = data as unknown as ITuple<[DispatchError]>;
+ let message = dispatchError.type;
- const queueAction = (status: ActionStatus | ActionStatus[]): void => {
- const _status = Array.isArray(status) ? status : [status];
+ if (dispatchError.isModule) {
+ try {
+ const mod = dispatchError.asModule;
+ const error = registry.findMetaError(new Uint8Array([mod.index.toNumber(), mod.error.toNumber()]));
- if (_status.length) {
- setStQueue([...stRef.current, ...(_status.map((item): QueueStatus => {
- const id = ++nextId;
- const removeItem = (): void =>
- setStQueue([...stRef.current.filter((item): boolean => item.id !== id)]);
-
- setTimeout(removeItem, REMOVE_TIMEOUT);
-
- return {
- ...item,
- id,
- isCompleted: false,
- removeItem
- };
- }))]);
- }
- };
- const queueExtrinsic = ({ accountId, extrinsic, txFailedCb, txSuccessCb, txStartCb, txUpdateCb, isUnsigned }: PartialQueueTxExtrinsic): void =>
- addToTxQueue({
- accountId,
- extrinsic,
- isUnsigned,
- txFailedCb,
- txSuccessCb,
- txStartCb,
- txUpdateCb
- });
- const queuePayload = (payload: SignerPayloadJSON, signerCb: SignerCallback): void =>
- addToTxQueue({
- accountId: payload.address,
- // this is not great, but the Extrinsic we don't need a submittable
- extrinsic: createType(registry, 'Extrinsic',
- { method: createType(registry, 'Call', payload.method) },
- { version: payload.version }
- ) as unknown as SubmittableExtrinsic,
- payload,
- signerCb
- });
- const queueRpc = ({ accountId, rpc, values }: PartialQueueTxRpc): void =>
- addToTxQueue({
- accountId,
- rpc,
- values
- });
- const queueSetTxStatus = (id: number, status: QueueTxStatus, result?: SubmittableResult, error?: Error): void => {
- setTxQueue([...txRef.current.map((item): QueueTx =>
- item.id === id
- ? {
- ...item,
- error: error === undefined
- ? item.error
- : error,
- result: result === undefined
- ? item.result
- : result,
- status: item.status === 'completed'
- ? item.status
- : status
- }
- : item
- )]);
-
- queueAction(
- ((result && result.events) || [])
- // filter events handled globally, or those we are not interested in, these are
- // handled by the global overview, so don't add them here
- .filter((record): boolean => !!record.event && record.event.section !== 'democracy')
- .map(({ event: { data, method, section } }): ActionStatus => {
- if (section === 'system' && method === 'ExtrinsicFailed') {
- const [dispatchError] = data as unknown as ITuple<[DispatchError]>;
- let message = dispatchError.type;
-
- if (dispatchError.isModule) {
- try {
- const mod = dispatchError.asModule;
- const error = registry.findMetaError(new Uint8Array([mod.index.toNumber(), mod.error.toNumber()]));
-
- message = `${error.section}.${error.name}`;
- } catch (error) {
- // swallow
- }
+ message = `${error.section}.${error.name}`;
+ } catch (error) {
+ // swallow
}
-
- return {
- action: `${section}.${method}`,
- status: 'error',
- message
- };
}
return {
action: `${section}.${method}`,
- status: 'event',
- message: 'extrinsic event'
+ status: 'error',
+ message
};
- })
- );
+ }
- if (STATUS_COMPLETE.includes(status)) {
- setTimeout((): void => {
- const item = txRef.current.find((item): boolean => item.id === id);
+ return {
+ action: `${section}.${method}`,
+ status: 'event',
+ message: 'extrinsic event'
+ };
+ })
+ );
+}
- item && item.removeItem();
- }, REMOVE_TIMEOUT);
- }
- };
+function Queue ({ children }: Props): React.ReactElement {
+ const [stqueue, _setStQueue] = useState([]);
+ const [txqueue, _setTxQueue] = useState([]);
+ const stRef = useRef(stqueue);
+ const txRef = useRef(txqueue);
+
+ const setStQueue = useCallback(
+ (st: QueueStatus[]): void => {
+ stRef.current = st;
+ _setStQueue(st);
+ },
+ []
+ );
+ const setTxQueue = useCallback(
+ (tx: QueueTx[]): void => {
+ txRef.current = tx;
+ _setTxQueue(tx);
+ },
+ []
+ );
+ const addToTxQueue = useCallback(
+ (value: QueueTxExtrinsic | QueueTxRpc | QueueTx): void => {
+ const id = ++nextId;
+ const removeItem = (): void =>
+ setTxQueue([...txRef.current.map((item): QueueTx =>
+ item.id === id
+ ? { ...item, status: 'completed' }
+ : item
+ )]);
+
+ setTxQueue([...txRef.current, {
+ ...value,
+ id,
+ removeItem,
+ rpc: (value as QueueTxRpc).rpc || SUBMIT_RPC,
+ status: 'queued'
+ }]);
+ },
+ [setTxQueue]
+ );
+ const queueAction = useCallback(
+ (_status: ActionStatus | ActionStatus[]): void => {
+ const status = Array.isArray(_status) ? _status : [_status];
+
+ status.length && setStQueue([
+ ...stRef.current,
+ ...(status.map((item): QueueStatus => {
+ const id = ++nextId;
+ const removeItem = (): void =>
+ setStQueue([...stRef.current.filter((item): boolean => item.id !== id)]);
+
+ setTimeout(removeItem, REMOVE_TIMEOUT);
+
+ return {
+ ...item,
+ id,
+ isCompleted: false,
+ removeItem
+ };
+ }))
+ ]);
+ },
+ [setStQueue]
+ );
+ const queueExtrinsic = useCallback(
+ (value: PartialQueueTxExtrinsic): void =>
+ addToTxQueue({ ...value }),
+ [addToTxQueue]
+ );
+ const queuePayload = useCallback(
+ (payload: SignerPayloadJSON, signerCb: SignerCallback): void =>
+ addToTxQueue({
+ accountId: payload.address,
+ // this is not great, but the Extrinsic we don't need a submittable
+ extrinsic: createType(registry, 'Extrinsic',
+ { method: createType(registry, 'Call', payload.method) },
+ { version: payload.version }
+ ) as unknown as SubmittableExtrinsic,
+ payload,
+ signerCb
+ }),
+ [addToTxQueue]
+ );
+ const queueRpc = useCallback(
+ (value: PartialQueueTxRpc): void =>
+ addToTxQueue({ ...value }),
+ [addToTxQueue]
+ );
+ const queueSetTxStatus = useCallback(
+ (id: number, status: QueueTxStatus, result?: SubmittableResult, error?: Error): void => {
+ setTxQueue([...txRef.current.map((item): QueueTx =>
+ item.id === id
+ ? {
+ ...item,
+ error: error === undefined
+ ? item.error
+ : error,
+ result: result === undefined
+ ? item.result
+ : result,
+ status: item.status === 'completed'
+ ? item.status
+ : status
+ }
+ : item
+ )]);
+
+ queueAction(
+ extractEvents(result)
+ );
+
+ if (STATUS_COMPLETE.includes(status)) {
+ setTimeout((): void => {
+ const item = txRef.current.find((item): boolean => item.id === id);
+
+ item && item.removeItem();
+ }, REMOVE_TIMEOUT);
+ }
+ },
+ [queueAction, setTxQueue]
+ );
return (
{
queuePayload,
queueRpc,
queueSetTxStatus,
- stqueue: _stqueue,
- txqueue: _txqueue
+ stqueue,
+ txqueue
}}>
{children}
diff --git a/packages/react-components/src/Table.tsx b/packages/react-components/src/Table.tsx
index f43c9ed501..25dd61ff63 100644
--- a/packages/react-components/src/Table.tsx
+++ b/packages/react-components/src/Table.tsx
@@ -61,7 +61,7 @@ const Memo = React.memo(styled(Table)`
width: 100%;
thead tr {
- background: #fafafa;
+ background: #f5f5f5;
}
tbody tr {
@@ -130,14 +130,11 @@ const Memo = React.memo(styled(Table)`
}
&.address {
+ min-width: 11rem;
padding: 0.85rem 1rem;
> .ui--AddressMini,
> .ui--AddressMini.padded {
- padding: 0;
- margin-bottom: -0.85rem;
- margin-top: -0.25rem;
-
label.ui--AddressMini-label {
margin-bottom: -0.3rem;
}
@@ -169,9 +166,9 @@ const Memo = React.memo(styled(Table)`
}
th {
- color: #999;
+ color: #888;
font-family: sans-serif;
- font-weight: 500;
+ font-weight: 400;
text-align: right;
white-space: nowrap;
diff --git a/packages/react-hooks/src/useAccounts.ts b/packages/react-hooks/src/useAccounts.ts
index 734e7ce1b3..0748e57639 100644
--- a/packages/react-hooks/src/useAccounts.ts
+++ b/packages/react-hooks/src/useAccounts.ts
@@ -29,8 +29,7 @@ export default function useAccounts (): UseAccounts {
return (): void => {
setTimeout(() => subscription.unsubscribe(), 0);
};
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
+ }, [mountedRef]);
return state;
}
diff --git a/packages/react-hooks/src/useAddresses.ts b/packages/react-hooks/src/useAddresses.ts
index af9f95f440..156c6bd60d 100644
--- a/packages/react-hooks/src/useAddresses.ts
+++ b/packages/react-hooks/src/useAddresses.ts
@@ -29,8 +29,7 @@ export default function useAccounts (): UseAccounts {
return (): void => {
setTimeout(() => subscription.unsubscribe(), 0);
};
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
+ }, [mountedRef]);
return state;
}
diff --git a/packages/react-hooks/src/useMembers.ts b/packages/react-hooks/src/useMembers.ts
index e4ce529e4c..67cf573cd3 100644
--- a/packages/react-hooks/src/useMembers.ts
+++ b/packages/react-hooks/src/useMembers.ts
@@ -14,17 +14,17 @@ interface Result {
export default function useMembers (collective: 'council' | 'technicalCommittee'): Result {
const { api } = useApi();
- const { allAccounts } = useAccounts();
+ const { allAccounts, hasAccounts } = useAccounts();
const [state, setState] = useState({ isMember: false, members: [] });
const retrieved = (
collective === 'council'
// eslint-disable-next-line react-hooks/rules-of-hooks
- ? useCall(api.query.electionsPhragmen?.members || api.query.elections.members, [], {
+ ? useCall(hasAccounts && (api.query.electionsPhragmen?.members || api.query.elections.members), [], {
transform: (accounts: [AccountId, Balance][]): string[] =>
accounts.map(([accountId]) => accountId.toString())
})
// eslint-disable-next-line react-hooks/rules-of-hooks
- : useCall(api.query.technicalCommittee.members, [], {
+ : useCall(hasAccounts && api.query.technicalCommittee.members, [], {
transform: (accounts: AccountId[]): string[] =>
accounts.map((accountId) => accountId.toString())
})
diff --git a/packages/react-hooks/src/useOwnStashes.ts b/packages/react-hooks/src/useOwnStashes.ts
index 155e6ba967..dd12b07e53 100644
--- a/packages/react-hooks/src/useOwnStashes.ts
+++ b/packages/react-hooks/src/useOwnStashes.ts
@@ -33,15 +33,15 @@ function getStashes (allAccounts: string[], ownBonded: Option[], ownL
}
export default function useOwnStashes (): [string, IsInKeyring][] | undefined {
- const { allAccounts } = useAccounts();
+ const { allAccounts, hasAccounts } = useAccounts();
const mountedRef = useIsMountedRef();
const { api } = useApi();
- const ownBonded = useCall[]>(api.query.staking?.bonded.multi as any, [allAccounts]);
- const ownLedger = useCall[]>(api.query.staking?.ledger.multi as any, [allAccounts]);
+ const ownBonded = useCall[]>(hasAccounts && api.query.staking?.bonded.multi as any, [allAccounts]);
+ const ownLedger = useCall[]>(hasAccounts && api.query.staking?.ledger.multi as any, [allAccounts]);
const [state, setState] = useState<[string, IsInKeyring][] | undefined>();
useEffect((): void => {
- mountedRef.current && allAccounts && ownBonded && ownLedger && setState(
+ mountedRef.current && ownBonded && ownLedger && setState(
getStashes(allAccounts, ownBonded, ownLedger)
);
}, [allAccounts, mountedRef, ownBonded, ownLedger]);
diff --git a/packages/react-hooks/src/useRegistrars.ts b/packages/react-hooks/src/useRegistrars.ts
index fc3579455c..650ad72301 100644
--- a/packages/react-hooks/src/useRegistrars.ts
+++ b/packages/react-hooks/src/useRegistrars.ts
@@ -18,8 +18,8 @@ interface State {
export default function useRegistrars (): State {
const { api } = useApi();
- const { allAccounts } = useAccounts();
- const query = useCall[]>(api.query.identity?.registrars, []);
+ const { allAccounts, hasAccounts } = useAccounts();
+ const query = useCall[]>(hasAccounts && api.query.identity?.registrars, []);
const [state, setState] = useState({ isRegistrar: false, registrars: [] });
// determine if we have a registrar or not - registrars are allowed to approve
diff --git a/packages/react-hooks/src/useSudo.ts b/packages/react-hooks/src/useSudo.ts
index f7bcf1de00..788cc276ef 100644
--- a/packages/react-hooks/src/useSudo.ts
+++ b/packages/react-hooks/src/useSudo.ts
@@ -12,8 +12,8 @@ import useCall from './useCall';
export default function useSudo (): UseSudo {
const { api } = useApi();
- const { allAccounts } = useAccounts();
- const sudoKey = useCall(api.query.sudo?.key, [], {
+ const { allAccounts, hasAccounts } = useAccounts();
+ const sudoKey = useCall(hasAccounts && api.query.sudo?.key, [], {
transform: (k): string =>
k.toString()
});
diff --git a/packages/react-signer/src/Modal.tsx b/packages/react-signer/src/Modal.tsx
index 469a026d10..d4a19eb32f 100644
--- a/packages/react-signer/src/Modal.tsx
+++ b/packages/react-signer/src/Modal.tsx
@@ -192,7 +192,11 @@ class Signer extends React.PureComponent {
const { isExternal, isHardware, hardwareType } = extractExternal(currentItem.accountId);
return (
-
+
{!isRenderError && (!isQrVisible || !isQrScanning) && !signedTx && (
<>
{!currentItem.isUnsigned && this.renderSignToggle()}
@@ -239,15 +243,22 @@ class Signer extends React.PureComponent {
tip={tip}
value={currentItem}
>
- {isQrVisible ? (
-
- ) : (
- <>
- {this.renderTip()}
- {this.renderUnlock()}
- {!isSubmit && this.renderSignFields()}
-
- )}
+ {isQrVisible
+ ? (
+
+ )
+ : (
+ <>
+ {this.renderTip()}
+ {this.renderUnlock()}
+ {!isSubmit && this.renderSignFields()}
+
+ )}
);
}
|