neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use system_chainType (#2559)

Browse Source 
* Use system_chainType

* Formatting cleanups

* Alignment of Expander -> BalanceFormat

* Formatting
This commit is contained in:
Jaco Greeff 2020-04-12 13:32:43 +02:00 committed by GitHub
parent ad262045f3
commit a8d6ba7863
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 51 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/page-council/src/Overview/Voters.tsx
View File

@ -19,7 +19,14 @@ function Voters ({ balance, voters }: Props): React.ReactElement<Props> | null {
}
return (
<Expander summary={<><FormatBalance value={balance} />&nbsp;({voters.length})</>}>
<Expander
summary={
<FormatBalance
labelPost={` (${voters.length})`}
value={balance}
/>
}
>
{voters.map((who): React.ReactNode =>
<AddressMini
key={who.toString()}

8
packages/page-staking/src/Overview/Address/StakeOther.tsx
View File

@ -8,7 +8,6 @@ import BN from 'bn.js';
import React from 'react';
import { AddressMini, Expander } from '@polkadot/react-components';
import { FormatBalance } from '@polkadot/react-query';
import { formatNumber } from '@polkadot/util';
interface Props {
stakeOther?: BN;
@ -21,9 +20,10 @@ function StakeOther ({ nominators, stakeOther }: Props): React.ReactElement<Prop
{stakeOther?.gtn(0) && (
<>
<Expander summary={
<FormatBalance value={stakeOther}>
&nbsp;({formatNumber(nominators.length)})
</FormatBalance>
<FormatBalance
labelPost={` (${nominators.length})`}
value={stakeOther}
/>
}>
{nominators.map(([who, bonded]): React.ReactNode =>
<AddressMini

2
packages/page-staking/src/Overview/Address/index.tsx
View File

@ -155,7 +155,7 @@ function Address ({ address, className, filterName, hasQueries, isAuthor, isElec
onlineCount={onlineCount}
onlineMessage={onlineMessage}
/>
<td className={`address ${isMain ? 'all' : ''}`}>
<td className='address'>
<AddressSmall value={address} />
</td>
{isMain

7
packages/page-staking/src/Targets/Validator.tsx
View File

@ -44,7 +44,12 @@ function Validator ({ info: { accountId, bondOther, bondOwn, bondTotal, commissi
</td>
<td className='number together'><FormatBalance value={bondTotal} /></td>
<td className='number together'><FormatBalance value={bondOwn} /></td>
<td className='number together'><FormatBalance value={bondOther} >&nbsp;({formatNumber(numNominators)})</FormatBalance></td>
<td className='number together'>
<FormatBalance
labelPost={` (${numNominators})`}
value={bondOther}
/>
</td>
<td className='number together'><FormatBalance value={rewardPayout} /></td>
<td>
<Icon

31
packages/react-api/src/Api.tsx
View File

@ -3,7 +3,7 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { InjectedExtension } from '@polkadot/extension-inject/types';
import { ChainProperties } from '@polkadot/types/interfaces';
import { ChainProperties, ChainType } from '@polkadot/types/interfaces';
import { ApiProps, ApiState } from './types';
import React, { useContext, useEffect, useMemo, useState } from 'react';
@ -40,6 +40,7 @@ interface ChainData {
injectedAccounts: InjectedAccountExt[];
properties: ChainProperties;
systemChain: string;
systemChainType: ChainType;
systemName: string;
systemVersion: string;
}
@ -57,22 +58,23 @@ let api: ApiPromise;
export { api };
async function retrieve (api: ApiPromise): Promise<ChainData> {
const [properties, systemChain, systemName, systemVersion, injectedAccounts] = await Promise.all([
const [properties, systemChain, systemChainType, systemName, systemVersion, injectedAccounts] = await Promise.all([
api.rpc.system.properties(),
api.rpc.system.chain(),
api.rpc.system.chainType
? api.rpc.system.chainType()
: Promise.resolve(registry.createType('ChainType', 'Live')),
api.rpc.system.name(),
api.rpc.system.version(),
injectedPromise
.then(() => web3Accounts())
.then((accounts): InjectedAccountExt[] =>
accounts.map(({ address, meta }): InjectedAccountExt => ({
address,
meta: {
...meta,
name: `${meta.name} (${meta.source === 'polkadot-js' ? 'extension' : meta.source})`
}
}))
)
.then((accounts) => accounts.map(({ address, meta }): InjectedAccountExt => ({
address,
meta: {
...meta,
name: `${meta.name} (${meta.source === 'polkadot-js' ? 'extension' : meta.source})`
}
})))
.catch((error): InjectedAccountExt[] => {
console.error('web3Enable', error);
@ -84,21 +86,22 @@ async function retrieve (api: ApiPromise): Promise<ChainData> {
injectedAccounts,
properties,
systemChain: (systemChain || '<unknown>').toString(),
systemChainType,
systemName: systemName.toString(),
systemVersion: systemVersion.toString()
};
}
async function loadOnReady (api: ApiPromise): Promise<ApiState> {
const { injectedAccounts, properties, systemChain, systemName, systemVersion } = await retrieve(api);
const { injectedAccounts, properties, systemChain, systemChainType, systemName, systemVersion } = await retrieve(api);
const ss58Format = uiSettings.prefix === -1
? properties.ss58Format.unwrapOr(DEFAULT_SS58).toNumber()
: uiSettings.prefix;
const tokenSymbol = properties.tokenSymbol.unwrapOr(undefined)?.toString();
const tokenDecimals = properties.tokenDecimals.unwrapOr(DEFAULT_DECIMALS).toNumber();
const isDevelopment = isTestChain(systemChain);
const isDevelopment = systemChainType.isDevelopment || systemChainType.isLocal || isTestChain(systemChain);
console.log('api: found chain', systemChain, JSON.stringify(properties));
console.log(`chain: ${systemChain} (${systemChainType}), ${JSON.stringify(properties)}`);
// explicitly override the ss58Format as specified
registry.setChainProperties(registry.createType('ChainProperties', { ...properties, ss58Format }));

6
packages/react-components/src/AddressInfo.tsx
View File

@ -9,7 +9,7 @@ import { BareProps } from './types';
import BN from 'bn.js';
import React from 'react';
import styled from 'styled-components';
import { formatBalance, formatNumber, isObject } from '@polkadot/util';
import { formatBalance, formatNumber, hexToString, isObject } from '@polkadot/util';
import { Expander, Icon, Tooltip } from '@polkadot/react-components';
import { withCalls, withMulti } from '@polkadot/react-api/hoc';
import { useAccounts } from '@polkadot/react-hooks';
@ -256,12 +256,12 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
name='info circle'
/>
<Tooltip
text={balancesAll.lockedBreakdown.map(({ amount, reasons }, index): React.ReactNode => (
text={balancesAll.lockedBreakdown.map(({ amount, id, reasons }, index): React.ReactNode => (
<div key={index}>
{amount.isMax()
? t('everything')
: formatBalance(amount, { forceUnit: '-' })
}<div className='faded'>{reasons.toString()}</div>
}{id && <div className='faded'>{hexToString(id.toHex())}</div>}<div className='faded'>{reasons.toString()}</div>
</div>
))}
trigger={`${address}-locks-trigger`}

4
packages/react-components/src/Expander.tsx
View File

@ -102,6 +102,10 @@ export default React.memo(styled(Expander)`
min-width: 12rem;
overflow: hidden;
.ui--Expander-summary-header > .ui--FormatBalance {
min-width: 12rem;
}
> div {
overflow: hidden;
text-overflow: ellipsis;

5
packages/react-components/src/Tooltip.tsx
View File

@ -85,10 +85,15 @@ export default React.memo(styled(Tooltip)`
}
.faded {
margin-top: -0.25rem;
opacity: 0.75 !important;
font-size: 0.75em !important;
}
.faded+.faded {
margin-top: -0.5rem;
}
.row+.row {
margin-top: 0.5rem;
}

5
packages/react-query/src/FormatBalance.tsx
View File

@ -16,6 +16,7 @@ interface Props extends BareProps {
children?: React.ReactNode;
isShort?: boolean;
label?: React.ReactNode;
labelPost?: React.ReactNode;
value?: Compact<any> | BN | string | null | 'all';
withSi?: boolean;
}
@ -48,7 +49,7 @@ function format (value: Compact<any> | BN | string, currency: string, withSi?: b
// return <>{prefix}.<span className='balance-postfix'>{`000${postfix || ''}`.slice(-3)}</span>{unit === '-' ? '' : unit}</>;
// }
function FormatBalance ({ children, className, isShort, label, value, withSi }: Props): React.ReactElement<Props> {
function FormatBalance ({ children, className, isShort, label, labelPost, value, withSi }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const [currency] = useState(formatBalance.getDefaults().unit);
@ -60,7 +61,7 @@ function FormatBalance ({ children, className, isShort, label, value, withSi }:
? t('everything')
: format(value, currency, withSi, isShort)
: '-'
}</span>{children}
}</span>{labelPost}{children}
</div>
);
}