('Non-voters ({{count}})', { replace: { count: formatNumber(nonBacked.length) } })}
/>
- | {paraInfo.headHex} |
+
+ {paraInfo.headHex}
+ |
{paraInfo.updateAt && bestNumber && paraInfo.lifecycle?.isParachain
? (
diff --git a/packages/page-parachains/src/Overview/useParaInfo.ts b/packages/page-parachains/src/Overview/useParaInfo.ts
index 74f862d666..350cbdf26c 100644
--- a/packages/page-parachains/src/Overview/useParaInfo.ts
+++ b/packages/page-parachains/src/Overview/useParaInfo.ts
@@ -8,8 +8,6 @@ import type { Codec, ITuple } from '@polkadot/types/types';
import { createNamedHook, useApi, useCallMulti } from '@polkadot/react-hooks';
-import { sliceHex } from '../util';
-
type QueryResult = [Option, Option, Option, Vec, Vec, Vec, Vec, Option, Option, Option, Option>[]];
interface Result {
@@ -42,7 +40,7 @@ const MULTI_OPTS = {
},
transform: ([headData, optUp, optLifecycle, dmp, ump, hrmpE, hrmpI, optWm, optPending, optInfo, leases]: QueryResult): Result => ({
headHex: headData.isSome
- ? sliceHex(headData.unwrap())
+ ? headData.unwrap().toHex()
: null,
leases: leases
.map((opt, index) => opt.isSome ? index : -1)
diff --git a/packages/page-parachains/src/Parathreads/Parathread.tsx b/packages/page-parachains/src/Parathreads/Parathread.tsx
index 8abebc67d8..3209c462bf 100644
--- a/packages/page-parachains/src/Parathreads/Parathread.tsx
+++ b/packages/page-parachains/src/Parathreads/Parathread.tsx
@@ -41,7 +41,9 @@ function Parathread ({ id, leasePeriod, leases, nextAction }: Props): React.Reac
|
{manager && } |
- {headHex} |
+
+ {headHex}
+ |
, Option, Option, Option]): Result => ({
headHex: optHead.isSome
- ? sliceHex(optHead.unwrap())
+ ? optHead.unwrap().toHex()
: optGenesis.isSome
- ? sliceHex(optGenesis.unwrap().genesisHead)
+ ? optGenesis.unwrap().genesisHead.toHex()
: null,
lifecycle: optLifecycle.unwrapOr(null),
manager: optInfo.isSome
diff --git a/packages/page-parachains/src/Teleport.tsx b/packages/page-parachains/src/Teleport.tsx
index 4fd3e9b741..70293683bb 100644
--- a/packages/page-parachains/src/Teleport.tsx
+++ b/packages/page-parachains/src/Teleport.tsx
@@ -8,7 +8,7 @@ import type { BN } from '@polkadot/util';
import React, { useMemo, useState } from 'react';
-import { ChainImg, Dropdown, InputAddress, InputBalance, MarkWarning, Modal, Spinner, TxButton } from '@polkadot/react-components';
+import { ChainImg, Dropdown, InputAddress, InputBalance, MarkWarning, Modal, TxButton } from '@polkadot/react-components';
import { useApi, useApiUrl, useTeleport } from '@polkadot/react-hooks';
import { Available } from '@polkadot/react-query';
import { BN_ZERO, isFunction } from '@polkadot/util';
@@ -182,25 +182,12 @@ function Teleport ({ onClose }: Props): React.ReactElement | null {
label={t('amount')}
onChange={setAmount}
/>
- {destApi
- ? destApi.consts.balances
- ? (
- <>
- ('destination existential deposit')}
- />
-
- )
- : null
- : (
- ('Retrieving destination chain fees')}
- variant='appPadded'
- />
- )
- }
+ ('destination existential deposit')}
+ />
diff --git a/packages/page-preimages/src/Preimages/Hash.tsx b/packages/page-preimages/src/Preimages/Hash.tsx
index a7af1f0ca5..2553d45913 100644
--- a/packages/page-preimages/src/Preimages/Hash.tsx
+++ b/packages/page-preimages/src/Preimages/Hash.tsx
@@ -3,7 +3,7 @@
import type { HexString } from '@polkadot/util/types';
-import React, { useMemo } from 'react';
+import React from 'react';
import styled from 'styled-components';
import { CopyButton } from '@polkadot/react-components';
@@ -13,15 +13,10 @@ interface Props {
value: HexString;
}
-function Hash ({ className, value }: Props): React.ReactElement {
- const shortHash = useMemo(
- () => `${value.slice(0, 10)}…${value.slice(-8)}`,
- [value]
- );
-
+function Hash ({ className = '', value }: Props): React.ReactElement {
return (
- |
- {shortHash}
+ |
+ {value}
|
);
@@ -36,8 +31,6 @@ export default React.memo(styled(Hash)`
}
.shortHash {
- font: var(--font-mono);
-
+ div {
margin-left: 0.5rem;
}
diff --git a/packages/page-referenda/src/Referenda/RefOngoing.tsx b/packages/page-referenda/src/Referenda/RefOngoing.tsx
index 137f09ae30..bfc1ea231a 100644
--- a/packages/page-referenda/src/Referenda/RefOngoing.tsx
+++ b/packages/page-referenda/src/Referenda/RefOngoing.tsx
@@ -28,7 +28,6 @@ interface Expanded {
confirmEnd: BN | null;
};
proposalHash: HexString;
- shortHash: string;
submissionDeposit: PalletReferendaDeposit | null;
tally: PalletConvictionVotingTally | PalletRankedCollectiveTally;
tallyTotal: BN;
@@ -69,7 +68,6 @@ function expandOngoing (info: Referendum['info'], track?: PalletReferendaTrackIn
prepareEnd
},
proposalHash,
- shortHash: `${proposalHash.slice(0, 10)}…${proposalHash.slice(-8)}`,
submissionDeposit: unwrapDeposit(ongoing.submissionDeposit),
tally: ongoing.tally,
tallyTotal: ongoing.tally.ayes.add(ongoing.tally.nays)
@@ -79,7 +77,7 @@ function expandOngoing (info: Referendum['info'], track?: PalletReferendaTrackIn
function Ongoing ({ isMember, members, palletReferenda, palletVote, ranks, trackInfo, value: { id, info, isConvictionVote, track } }: Props): React.ReactElement {
const { t } = useTranslation();
- const { decisionDeposit, periods: { confirmEnd, decideEnd, periodEnd }, proposalHash, shortHash, submissionDeposit, tally, tallyTotal } = useMemo(
+ const { decisionDeposit, periods: { confirmEnd, decideEnd, periodEnd }, proposalHash, submissionDeposit, tally, tallyTotal } = useMemo(
() => expandOngoing(info, track),
[info, track]
);
@@ -97,7 +95,7 @@ function Ongoing ({ isMember, members, palletReferenda, palletVote, ranks, track
withHash
/>
)
- : {shortHash}
+ : {proposalHash}
}
|
)
- : toShortAddress(value)
+ : {value}
}
)}
@@ -132,6 +131,12 @@ export default React.memo(styled(AddressMini)`
> div {
overflow: hidden;
text-overflow: ellipsis;
+
+ &.shortAddress {
+ min-width: var(--width-shortaddr);
+ max-width: var(--width-shortaddr);
+ opacity: var(--opacity-light);
+ }
}
}
diff --git a/packages/react-components/src/AddressRow.tsx b/packages/react-components/src/AddressRow.tsx
index b2e6e9fee3..416e26d409 100644
--- a/packages/react-components/src/AddressRow.tsx
+++ b/packages/react-components/src/AddressRow.tsx
@@ -11,7 +11,6 @@ import BaseIdentityIcon from '@polkadot/react-identicon';
import IdentityIcon from './IdentityIcon';
import Row, { RowProps } from './Row';
-import { toShortAddress } from './util';
export interface Props extends RowProps {
isContract?: boolean;
@@ -37,7 +36,7 @@ function AddressRow ({ buttons, children, className, defaultName, fullLength = f
return (
- {toShortAddress(value)}
+ {value}
)}
@@ -93,8 +92,13 @@ export default React.memo(styled(AddressSmall)`
.shortAddress {
bottom: -0.95rem;
color: #8B8B8B;
+ display: inline-block;
left: 0;
+ min-width: var(--width-shortaddr);
+ max-width: var(--width-shortaddr);
+ overflow: hidden;
position: absolute;
+ text-overflow: ellipsis;
}
}
diff --git a/packages/react-components/src/Input.tsx b/packages/react-components/src/Input.tsx
index 3089af627d..ad47812304 100644
--- a/packages/react-components/src/Input.tsx
+++ b/packages/react-components/src/Input.tsx
@@ -24,6 +24,7 @@ interface Props {
isEditable?: boolean;
isError?: boolean;
isFull?: boolean;
+ isLoading?: boolean;
isHidden?: boolean;
isInPlaceEditor?: boolean;
isReadOnly?: boolean;
@@ -92,7 +93,7 @@ const isSelectAll = (key: string, isPreKeyDown: boolean): boolean =>
let counter = 0;
-function Input ({ autoFocus = false, children, className, defaultValue, help, icon, inputClassName, isAction = false, isDisabled = false, isDisabledError = false, isEditable = false, isError = false, isFull = false, isHidden = false, isInPlaceEditor = false, isReadOnly = false, isWarning = false, label, labelExtra, max, maxLength, min, name, onBlur, onChange, onEnter, onEscape, onKeyDown, onKeyUp, onPaste, placeholder, tabIndex, type = 'text', value, withEllipsis, withLabel }: Props): React.ReactElement {
+function Input ({ autoFocus = false, children, className, defaultValue, help, icon, inputClassName, isAction = false, isDisabled = false, isDisabledError = false, isEditable = false, isError = false, isFull = false, isHidden = false, isInPlaceEditor = false, isLoading = false, isReadOnly = false, isWarning = false, label, labelExtra, max, maxLength, min, name, onBlur, onChange, onEnter, onEscape, onKeyDown, onKeyUp, onPaste, placeholder, tabIndex, type = 'text', value, withEllipsis, withLabel }: Props): React.ReactElement {
const [stateName] = useState(() => `in_${counter++}_at_${Date.now()}`);
const [initialValue] = useState(() => defaultValue);
@@ -162,6 +163,9 @@ function Input ({ autoFocus = false, children, className, defaultValue, help, ic
isInPlaceEditor
? 'inPlaceEditor'
: '',
+ isLoading
+ ? '--tmp'
+ : '',
inputClassName || '',
isWarning && !isError
? 'isWarning'
@@ -172,7 +176,7 @@ function Input ({ autoFocus = false, children, className, defaultValue, help, ic
? (defaultValue || '')
: undefined
}
- disabled={isDisabled}
+ disabled={isDisabled || isLoading}
error={(!isDisabled && isError) || isDisabledError}
hidden={isHidden}
iconPosition={
diff --git a/packages/react-components/src/InputAddress/KeyPair.tsx b/packages/react-components/src/InputAddress/KeyPair.tsx
index 97c64d967e..91dcb6097a 100644
--- a/packages/react-components/src/InputAddress/KeyPair.tsx
+++ b/packages/react-components/src/InputAddress/KeyPair.tsx
@@ -1,12 +1,11 @@
// Copyright 2017-2023 @polkadot/react-components authors & contributors
// SPDX-License-Identifier: Apache-2.0
-import React, { useMemo } from 'react';
+import React from 'react';
import styled from 'styled-components';
import AccountName from '../AccountName';
import IdentityIcon from '../IdentityIcon';
-import { toShortAddress } from '../util/toShortAddress';
interface Props {
address: string;
@@ -17,11 +16,6 @@ interface Props {
}
function KeyPair ({ address, className = '' }: Props): React.ReactElement {
- const shortAddr = useMemo(
- () => toShortAddress(address),
- [address]
- );
-
return (
- {shortAddr}
+ {address}
);
@@ -48,12 +42,14 @@ export default React.memo(styled(KeyPair)`
> .address {
display: inline-block;
flex: 1;
- font: var(--font-mono);
font-size: var(--font-size-small);
margin-left: 1rem;
+ max-width: var(--width-shortaddr);
+ min-width: var(--width-shortaddr);
opacity: var(--opacity-light);
overflow: hidden;
text-align: right;
+ text-overflow: ellipsis;
}
> .icon {
diff --git a/packages/react-components/src/InputBalance.tsx b/packages/react-components/src/InputBalance.tsx
index 53c7c0435b..68b57084a6 100644
--- a/packages/react-components/src/InputBalance.tsx
+++ b/packages/react-components/src/InputBalance.tsx
@@ -19,6 +19,7 @@ interface Props {
isDisabled?: boolean;
isError?: boolean;
isFull?: boolean;
+ isLoading?: boolean;
isWarning?: boolean;
isZeroable?: boolean;
label?: React.ReactNode;
@@ -64,7 +65,7 @@ function reformat (value?: string | BN, isDisabled?: boolean, siDecimals?: numbe
};
}
-function InputBalance ({ autoFocus, children, className = '', defaultValue: inDefault, help, isDisabled, isError, isFull, isWarning, isZeroable, label, labelExtra, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siSymbol, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement {
+function InputBalance ({ autoFocus, children, className = '', defaultValue: inDefault, help, isDisabled, isError, isFull, isLoading, isWarning, isZeroable, label, labelExtra, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siSymbol, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement {
const { defaultValue, siDefault } = useMemo(
() => reformat(inDefault, isDisabled, siDecimals),
[inDefault, isDisabled, siDecimals]
@@ -80,6 +81,7 @@ function InputBalance ({ autoFocus, children, className = '', defaultValue: inDe
isDisabled={isDisabled}
isError={isError}
isFull={isFull}
+ isLoading={isLoading}
isSi
isWarning={isWarning}
isZeroable={isZeroable}
diff --git a/packages/react-components/src/InputNumber.tsx b/packages/react-components/src/InputNumber.tsx
index 4701e17737..6e204c8da7 100644
--- a/packages/react-components/src/InputNumber.tsx
+++ b/packages/react-components/src/InputNumber.tsx
@@ -25,6 +25,7 @@ interface Props {
isDisabled?: boolean;
isError?: boolean;
isFull?: boolean;
+ isLoading?: boolean;
isSi?: boolean;
isDecimal?: boolean;
isWarning?: boolean;
@@ -171,7 +172,7 @@ function getValues (api: ApiPromise, value: BN | string = BN_ZERO, si: SiDef | n
: getValuesFromString(api, value, si, bitLength, isSigned, isZeroable, maxValue, decimals);
}
-function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, className = '', defaultValue, help, isDecimal, isFull, isSi, isDisabled, isError = false, isWarning, isSigned = false, isZeroable = true, label, labelExtra, maxLength, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siDefault, siSymbol, value: propsValue }: Props): React.ReactElement {
+function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, className = '', defaultValue, help, isDecimal, isFull, isSi, isDisabled, isError = false, isLoading, isWarning, isSigned = false, isZeroable = true, label, labelExtra, maxLength, maxValue, onChange, onEnter, onEscape, placeholder, siDecimals, siDefault, siSymbol, value: propsValue }: Props): React.ReactElement {
const { t } = useTranslation();
const { api } = useApi();
const [si, setSi] = useState(() =>
@@ -273,6 +274,7 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
isDisabled={isDisabled}
isError={!isValid || isError}
isFull={isFull}
+ isLoading={isLoading}
isWarning={isWarning}
label={label}
labelExtra={labelExtra}
diff --git a/packages/react-components/src/Labelled.tsx b/packages/react-components/src/Labelled.tsx
index dd241f81ca..9e5418cb81 100644
--- a/packages/react-components/src/Labelled.tsx
+++ b/packages/react-components/src/Labelled.tsx
@@ -121,6 +121,11 @@ export default React.memo(styled(Labelled)`
flex: 1 1;
min-width: 0;
+ > .--tmp {
+ // existing is a bit too much
+ opacity: 0.15;
+ }
+
.ui.selection.dropdown {
&:not(.floating) {
padding-left: 1.45rem;
diff --git a/packages/react-components/src/Row.tsx b/packages/react-components/src/Row.tsx
index b8d58e7fcf..685ef23931 100644
--- a/packages/react-components/src/Row.tsx
+++ b/packages/react-components/src/Row.tsx
@@ -79,10 +79,16 @@ export const styles = `
.ui--Row-address,
.ui--Row-accountIndex {
- font-family: monospace;
- font-size: 1.25em;
padding: 0;
margin-bottom: 0.25rem;
+
+ &.shortAddr {
+ min-width: var(--width-shortaddr);
+ max-width: var(--width-shortaddr);
+ opacity: var(--opacity-light);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
}
.ui--Row-name {
@@ -159,6 +165,7 @@ export interface RowProps {
isInline?: boolean;
isEditableName?: boolean;
isEditableTags?: boolean;
+ isShortAddr?: boolean;
name?: string;
onChangeName?: (_: string) => void;
onChangeTags?: (_: string[]) => void;
@@ -167,7 +174,7 @@ export interface RowProps {
tags?: string[];
}
-function Row ({ address, buttons, children, className = '', defaultName, details, icon, iconInfo, isDisabled, isEditableName, isEditableTags, isInline, name, onChangeName, onChangeTags, onSaveName, onSaveTags, tags }: RowProps): React.ReactElement {
+function Row ({ address, buttons, children, className = '', defaultName, details, icon, iconInfo, isDisabled, isEditableName, isEditableTags, isInline, isShortAddr = true, name, onChangeName, onChangeTags, onSaveName, onSaveTags, tags }: RowProps): React.ReactElement {
const [isEditingName, toggleIsEditingName] = useToggle();
const [isEditingTags, toggleIsEditingTags] = useToggle();
@@ -220,7 +227,7 @@ function Row ({ address, buttons, children, className = '', defaultName, details
)
)}
{address && (
-
+
{address}
)}
diff --git a/packages/react-components/src/Table/Head.tsx b/packages/react-components/src/Table/Head.tsx
index e95dac2291..ac0e653227 100644
--- a/packages/react-components/src/Table/Head.tsx
+++ b/packages/react-components/src/Table/Head.tsx
@@ -36,9 +36,7 @@ function Head ({ children, className = '', filter, header, isEmpty }: Props): Re
>
{index === 0
? {label}
- : isEmpty
- ? ''
- : label
+ : !isEmpty && label &&
}
)}
@@ -75,6 +73,10 @@ export default React.memo(styled(Head)`
}
}
+ > label {
+ margin: 0 !important;
+ }
+
&.address {
padding-left: 3rem;
text-align: left;
diff --git a/packages/react-components/src/Table/Table.tsx b/packages/react-components/src/Table/Table.tsx
index f7d89a2560..6dcb7c055b 100644
--- a/packages/react-components/src/Table/Table.tsx
+++ b/packages/react-components/src/Table/Table.tsx
@@ -284,10 +284,19 @@ export default React.memo(styled(Table)`
}
&.hash {
- font: var(--font-mono);
// we actually want to use 10ch here, however in the
// block expand page gives different sizes to the hashes
min-width: 7.5rem;
+ white-space: nowrap;
+
+ > .shortHash {
+ max-width: var(--width-shorthash);
+ min-width: 3em;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: var(--width-shorthash);
+ }
}
&.links {
diff --git a/packages/react-components/src/Tabs/Tab.tsx b/packages/react-components/src/Tabs/Tab.tsx
index 94dd09b57e..4c35f9cf4c 100644
--- a/packages/react-components/src/Tabs/Tab.tsx
+++ b/packages/react-components/src/Tabs/Tab.tsx
@@ -51,7 +51,6 @@ export default React.memo(styled(Tab)`
align-items: center;
display: flex;
color: #8B8B8B;
- font-size: var(--font-size-small);
height: 100%;
padding: 0 1.5rem;
position: relative;
diff --git a/packages/react-components/src/styles/components.ts b/packages/react-components/src/styles/components.ts
index a251887e80..cf930e6bc0 100644
--- a/packages/react-components/src/styles/components.ts
+++ b/packages/react-components/src/styles/components.ts
@@ -46,7 +46,6 @@ export default (_theme: ThemeDef): string => `
button.ui--Button {
font: var(--font-sans);
- font-size: var(--font-size-small);
}
.editable {
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index f09e279e55..a6e1721f06 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@@ -538,11 +538,13 @@ export default createGlobalStyle (({ theme, uiHighlight }: Pr
font-style: normal;
font-weight: var(--font-weight-label);
line-height: 1rem;
+ margin-bottom: 0.25rem !important;
text-transform: var(--text-transform-label);
vertical-align: middle;
}
button {
+ font-size: var(--font-size-small);
font-weight: var(--font-weight-normal);
}
diff --git a/packages/react-components/src/util/getAddressName.ts b/packages/react-components/src/util/getAddressName.ts
index e9eac49078..e6de864ac2 100644
--- a/packages/react-components/src/util/getAddressName.ts
+++ b/packages/react-components/src/util/getAddressName.ts
@@ -4,7 +4,7 @@
import type { KeyringItemType } from '@polkadot/ui-keyring/types';
import { getAddressMeta } from './getAddressMeta';
-import { toShortAddress } from './toShortAddress';
+// import { toShortAddress } from './toShortAddress';
// isName, isDefault, name
export function getAddressName (address: string, type: KeyringItemType | null = null, defaultName?: string): [boolean, boolean, string] {
@@ -14,5 +14,5 @@ export function getAddressName (address: string, type: KeyringItemType | null =
? [false, false, meta.name.toUpperCase()]
: defaultName
? [false, true, defaultName.toUpperCase()]
- : [true, false, toShortAddress(address)];
+ : [true, false, address]; // toShortAddress(address)];
}
diff --git a/packages/react-components/src/util/toShortAddress.ts b/packages/react-components/src/util/toShortAddress.ts
index c6b41f526c..a3089f5a7e 100644
--- a/packages/react-components/src/util/toShortAddress.ts
+++ b/packages/react-components/src/util/toShortAddress.ts
@@ -6,7 +6,7 @@ import type { AccountId, AccountIndex, Address } from '@polkadot/types/interface
export function toShortAddress (_address?: AccountId | AccountIndex | Address | string | null | Uint8Array): string {
const address = (_address || '').toString();
- return (address.length > 13)
- ? `${address.slice(0, 6)}…${address.slice(-6)}`
+ return (address.length > 11)
+ ? `${address.slice(0, 5)}…${address.slice(-5)}`
: address;
}
diff --git a/packages/react-params/src/Holder.tsx b/packages/react-params/src/Holder.tsx
index e63cffb2b0..4ddb54a212 100644
--- a/packages/react-params/src/Holder.tsx
+++ b/packages/react-params/src/Holder.tsx
@@ -53,7 +53,6 @@ export default React.memo(styled(Holder)`
}
.ui--Param-Address {
- font: var(--font-mono);
}
.ui--Params-Content {
|