Adjust styled injection (final round) (#8814)
* Adjust styled injection (final round) * Fix (some) build issues * Fix (some more) build errors * ... it builds (... ship it!)
This commit is contained in:
Jaco
GitHub
parent
105042e63a
commit
2bf56dbf11
@ -1,11 +1,13 @@
|
||||
// Copyright 2017-2023 @polkadot/app-accounts authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type { BN } from '@polkadot/util';
|
||||
|
||||
import React, { ReactNode, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { Checkbox, Dropdown, Input, InputNumber, MarkError, MarkWarning, Modal } from '@polkadot/react-components';
|
||||
import { useToggle } from '@polkadot/react-hooks';
|
||||
import { BN } from '@polkadot/util';
|
||||
import { BN_ZERO } from '@polkadot/util';
|
||||
|
||||
import { useTranslation } from '../translate';
|
||||
import { DeriveValidationOutput } from '../types';
|
||||
@ -21,21 +23,21 @@ interface Props {
|
||||
|
||||
export const ETH_DEFAULT_PATH = "m/44'/60'/0'/0/0";
|
||||
|
||||
function CreateEthDerivationPath ({ className,
|
||||
derivePath,
|
||||
deriveValidation,
|
||||
onChange,
|
||||
seedType }: Props): React.ReactElement<Props> {
|
||||
function CreateEthDerivationPath ({ className, derivePath, deriveValidation, onChange, seedType }: Props): React.ReactElement<Props> {
|
||||
const { t } = useTranslation();
|
||||
const [addIndex, setAddIndex] = useState(0);
|
||||
const [customIndex, setCustomIndex] = useState(new BN(0));
|
||||
const [addressList] = useState<{ key: number; text: ReactNode; value: number; }[]>(new Array(10).fill(0).map((_, i) => ({
|
||||
key: i,
|
||||
text: t('Address index {{index}}', {
|
||||
replace: { index: i }
|
||||
}),
|
||||
value: i
|
||||
})));
|
||||
const [customIndex, setCustomIndex] = useState<BN | undefined>(BN_ZERO);
|
||||
const [addressList] = useState<{ key: number; text: ReactNode; value: number; }[]>(
|
||||
() => new Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => ({
|
||||
key: i,
|
||||
text: t('Address index {{index}}', {
|
||||
replace: { index: i }
|
||||
}),
|
||||
value: i
|
||||
}))
|
||||
);
|
||||
const [useCustomPath, toggleCustomPath] = useToggle();
|
||||
const [useCustomIndex, toggleCustomIndex] = useToggle();
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// Copyright 2017-2023 @polkadot/app-bounties authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type { IconName } from '@fortawesome/fontawesome-svg-core';
|
||||
import type { DeriveCollectiveProposal } from '@polkadot/api-derive/types';
|
||||
import type { BountyStatus } from '@polkadot/types/interfaces';
|
||||
|
||||
@ -19,10 +20,10 @@ interface Props {
|
||||
status: BountyStatus;
|
||||
}
|
||||
|
||||
const icons = {
|
||||
const icons: Record<string, IconName> = {
|
||||
ayes: 'check',
|
||||
nays: 'times'
|
||||
};
|
||||
} as const;
|
||||
|
||||
function VotersColumn ({ className, option, proposals, status }: Props): React.ReactElement<Props> {
|
||||
const { t } = useTranslation();
|
||||
|
||||
@ -25,7 +25,7 @@ interface Props {
|
||||
|
||||
const LOCKS = [1, 10, 20, 30, 40, 50, 60];
|
||||
|
||||
function ReferendumVotes ({ change, className, count, isAye, isWinning, total, votes }: Props): React.ReactElement<Props> | null {
|
||||
function ReferendumVotes ({ className, count, isAye, total, votes }: Props): React.ReactElement<Props> | null {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const sorted = useMemo(
|
||||
@ -52,16 +52,16 @@ function ReferendumVotes ({ change, className, count, isAye, isWinning, total, v
|
||||
<ExpanderScroll
|
||||
className={className}
|
||||
empty={votes && t<string>('No voters')}
|
||||
help={change.gtn(0) && (
|
||||
<>
|
||||
<FormatBalance value={change} />
|
||||
<p>{isWinning
|
||||
? t<string>('The amount this total can be reduced by to change the referendum outcome. This assumes changes to the convictions of the existing votes, with no additional turnout.')
|
||||
: t<string>('The amount this total should be increased by to change the referendum outcome. This assumes additional turnout with new votes at 1x conviction.')
|
||||
}</p>
|
||||
</>
|
||||
)}
|
||||
helpIcon={isWinning ? 'arrow-circle-down' : 'arrow-circle-up'}
|
||||
// help={change.gtn(0) && (
|
||||
// <>
|
||||
// <FormatBalance value={change} />
|
||||
// <p>{isWinning
|
||||
// ? t<string>('The amount this total can be reduced by to change the referendum outcome. This assumes changes to the convictions of the existing votes, with no additional turnout.')
|
||||
// : t<string>('The amount this total should be increased by to change the referendum outcome. This assumes additional turnout with new votes at 1x conviction.')
|
||||
// }</p>
|
||||
// </>
|
||||
// )}
|
||||
// helpIcon={isWinning ? 'arrow-circle-down' : 'arrow-circle-up'}
|
||||
renderChildren={votes.length ? renderVotes : undefined}
|
||||
summary={
|
||||
<>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Copyright 2017-2023 @polkadot/app-gilt authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type { u128 } from '@polkadot/types';
|
||||
import type { u32, u128 } from '@polkadot/types';
|
||||
import type { BN } from '@polkadot/util';
|
||||
|
||||
import React, { useMemo, useState } from 'react';
|
||||
@ -101,7 +101,7 @@ function Bid ({ className, isDisabled, proxies }: Props): React.ReactElement<Pro
|
||||
onChange={setDuration}
|
||||
/>
|
||||
<InputNumber
|
||||
defaultValue={api.consts.gilt.queueCount}
|
||||
defaultValue={api.consts.gilt.queueCount as u32}
|
||||
isDisabled
|
||||
label={t<string>('maximum lock periods')}
|
||||
/>
|
||||
|
||||
@ -74,8 +74,8 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }:
|
||||
const [{ imageHash, isImageHashValid }, setImageHash] = useState<HashState>({ imageHash: null, isImageHashValid: false });
|
||||
const [{ imageLen, imageLenDefault, isImageLenValid }, setImageLen] = useState<ImageState>({ imageLen: BN_ZERO, isImageLenValid: false });
|
||||
const [enactIndex, setEnactIndex] = useState(0);
|
||||
const [afterBlocks, setAfterBlocks] = useState(BN_HUNDRED);
|
||||
const [atBlock, setAtBlock] = useState(BN_ONE);
|
||||
const [afterBlocks, setAfterBlocks] = useState<BN | undefined>(BN_HUNDRED);
|
||||
const [atBlock, setAtBlock] = useState<BN | undefined>(BN_ONE);
|
||||
const [initialAt, setInitialAt] = useState<BN | undefined>();
|
||||
const preimage = usePreimage(imageHash);
|
||||
|
||||
@ -170,8 +170,8 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }:
|
||||
);
|
||||
|
||||
const _onChangeImageLen = useCallback(
|
||||
(value: BN): void => {
|
||||
setImageLen((prev) => ({
|
||||
(value?: BN): void => {
|
||||
value && setImageLen((prev) => ({
|
||||
imageLen: value,
|
||||
imageLenDefault: prev.imageLenDefault,
|
||||
isImageLenValid: !value.isZero()
|
||||
|
||||
@ -119,7 +119,7 @@ function Sign ({ className = '' }: Props): React.ReactElement<Props> {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`${className} toolbox--Sign`}>
|
||||
<StyledDiv className={`${className} toolbox--Sign`}>
|
||||
<div className='ui--row'>
|
||||
<InputAddress
|
||||
className='full'
|
||||
@ -207,11 +207,11 @@ function Sign ({ className = '' }: Props): React.ReactElement<Props> {
|
||||
onClick={_onSign}
|
||||
/>
|
||||
</Button.Group>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Sign)`
|
||||
const StyledDiv = styled.div`
|
||||
.toolbox--Sign-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -243,4 +243,6 @@ export default React.memo(styled(Sign)`
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Sign);
|
||||
|
||||
@ -75,7 +75,7 @@ function Verify ({ className = '' }: Props): React.ReactElement {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`${className} toolbox--Verify`}>
|
||||
<StyledDiv className={`${className} toolbox--Verify`}>
|
||||
<div className='ui--row'>
|
||||
<InputAddress
|
||||
className='full'
|
||||
@ -127,11 +127,11 @@ function Verify ({ className = '' }: Props): React.ReactElement {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Verify)`
|
||||
const StyledDiv = styled.div`
|
||||
.ui--AlignedIconContainer {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
@ -142,4 +142,6 @@ export default React.memo(styled(Verify)`
|
||||
position: relative;
|
||||
top: 1.25rem;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Verify);
|
||||
|
||||
@ -22,14 +22,14 @@ function BidType ({ className, value }: Props): React.ReactElement<Props> {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<StyledDiv className={className}>
|
||||
<div>{value && value.type}</div>
|
||||
{vouchId && <AddressSmall value={vouchId} />}
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(BidType)`
|
||||
const StyledDiv = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: no-wrap;
|
||||
@ -41,4 +41,6 @@ export default React.memo(styled(BidType)`
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(BidType);
|
||||
|
||||
@ -74,7 +74,7 @@ function Member ({ bestNumber, className = '', value: { accountId, isCandidateVo
|
||||
);
|
||||
|
||||
return (
|
||||
<tr className={className}>
|
||||
<StyledTr className={className}>
|
||||
<td className='address relative all'>
|
||||
<AddressSmall value={accountId} />
|
||||
<div className='absolute'>
|
||||
@ -145,11 +145,11 @@ function Member ({ bestNumber, className = '', value: { accountId, isCandidateVo
|
||||
<td className='button start'>
|
||||
<DesignKusama accountId={accountId} />
|
||||
</td>
|
||||
</tr>
|
||||
</StyledTr>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Member)`
|
||||
const StyledTr = styled.tr`
|
||||
.payoutExpander {
|
||||
.payout+.payout {
|
||||
margin-top: 0.5rem;
|
||||
@ -173,4 +173,6 @@ export default React.memo(styled(Member)`
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Member);
|
||||
|
||||
@ -33,7 +33,7 @@ function Summary ({ className = '', info, payoutTotal }: Props): React.ReactElem
|
||||
);
|
||||
|
||||
return (
|
||||
<SummaryBox className={className}>
|
||||
<StyledSummaryBox className={className}>
|
||||
<section className='media--1100'>
|
||||
{info && members && (
|
||||
<CardSummary label={t<string>('members')}>
|
||||
@ -83,11 +83,11 @@ function Summary ({ className = '', info, payoutTotal }: Props): React.ReactElem
|
||||
</CardSummary>
|
||||
)}
|
||||
</section>
|
||||
</SummaryBox>
|
||||
</StyledSummaryBox>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Summary)`
|
||||
const StyledSummaryBox = styled(SummaryBox)`
|
||||
.society--header--account {
|
||||
white-space: nowrap;
|
||||
|
||||
@ -99,4 +99,6 @@ export default React.memo(styled(Summary)`
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Summary);
|
||||
|
||||
@ -23,7 +23,7 @@ interface Props {
|
||||
|
||||
function Overview ({ className, info, isMember, mapMembers, ownMembers, payoutTotal }: Props): React.ReactElement<Props> {
|
||||
return (
|
||||
<div className={className}>
|
||||
<StyledDiv className={className}>
|
||||
<Summary
|
||||
info={info}
|
||||
payoutTotal={payoutTotal}
|
||||
@ -34,12 +34,14 @@ function Overview ({ className, info, isMember, mapMembers, ownMembers, payoutTo
|
||||
ownMembers={ownMembers}
|
||||
/>
|
||||
<Members mapMembers={mapMembers} />
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Overview)`
|
||||
const StyledDiv = styled.div`
|
||||
.overviewSection {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Overview);
|
||||
|
||||
@ -29,7 +29,7 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
|
||||
const [isExpanded, toggleExpanded] = useToggle(false);
|
||||
|
||||
const renderMembers = useCallback(
|
||||
() => members.map(({ accountId, member }, count) => (
|
||||
() => members.map(({ accountId, member }, count): React.ReactNode => (
|
||||
<AddressMini
|
||||
balance={member.points}
|
||||
key={`${count}:${accountId}`}
|
||||
@ -42,7 +42,7 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
|
||||
);
|
||||
|
||||
const renderNominees = useCallback(
|
||||
() => info && info.nominating.map((stashId, count) => (
|
||||
() => info && info.nominating.map((stashId, count): React.ReactNode => (
|
||||
<AddressMini
|
||||
key={`${count}:${stashId}`}
|
||||
value={stashId}
|
||||
|
||||
@ -171,7 +171,7 @@ function Query ({ className = '', onRemove, value }: Props): React.ReactElement<
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${className} storage--Query storage--actionrow`}>
|
||||
<StyledDiv className={`${className} storage--Query storage--actionrow`}>
|
||||
<div className='storage--actionrow-value'>
|
||||
<Labelled
|
||||
label={
|
||||
@ -190,11 +190,11 @@ function Query ({ className = '', onRemove, value }: Props): React.ReactElement<
|
||||
onClick={_onRemove}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Query)`
|
||||
const StyledDiv = styled.div`
|
||||
margin-bottom: 0.25em;
|
||||
|
||||
label {
|
||||
@ -223,4 +223,6 @@ export default React.memo(styled(Query)`
|
||||
.storage--actionrow-buttons {
|
||||
margin-top: -0.25rem; /* offset parent spacing for buttons */
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Query);
|
||||
|
||||
@ -211,7 +211,7 @@ function Modules ({ className = '', onAdd }: Props): React.ReactElement<Props> {
|
||||
const { creator: { method, section } } = key;
|
||||
|
||||
return (
|
||||
<section className={`${className} storage--actionrow`}>
|
||||
<StyledSection className={`${className} storage--actionrow`}>
|
||||
<div className='storage--actionrow-value'>
|
||||
<InputStorage
|
||||
defaultValue={startValue}
|
||||
@ -262,11 +262,11 @@ function Modules ({ className = '', onAdd }: Props): React.ReactElement<Props> {
|
||||
onClick={_onAdd}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</StyledSection>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Modules)`
|
||||
const StyledSection = styled.section`
|
||||
.ui--Column:last-child .ui--Labelled {
|
||||
padding-left: 0.5rem;
|
||||
|
||||
@ -274,4 +274,6 @@ export default React.memo(styled(Modules)`
|
||||
left: 2.05rem; /* 3.55 - 1.5 (diff from padding above) */
|
||||
}
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Modules);
|
||||
|
||||
@ -24,7 +24,7 @@ function StorageApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
|
||||
);
|
||||
|
||||
return (
|
||||
<main className={`${className} storage--App`}>
|
||||
<StyledMain className={`${className} storage--App`}>
|
||||
<Selection
|
||||
basePath={basePath}
|
||||
onAdd={_onAdd}
|
||||
@ -33,11 +33,11 @@ function StorageApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
|
||||
onRemove={_onRemove}
|
||||
value={queue}
|
||||
/>
|
||||
</main>
|
||||
</StyledMain>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(StorageApp)`
|
||||
const StyledMain = styled.main`
|
||||
.storage--actionrow {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
@ -66,4 +66,6 @@ export default React.memo(styled(StorageApp)`
|
||||
flex: 0;
|
||||
padding: 0.5rem 0.25rem;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(StorageApp);
|
||||
|
||||
@ -32,7 +32,7 @@ function SetKey ({ allAccounts, className = '', isMine, sudoKey }: Props): React
|
||||
|
||||
return (
|
||||
<section>
|
||||
<section className={`${className} ui--row`}>
|
||||
<StyledSection className={`${className} ui--row`}>
|
||||
{isMine
|
||||
? (
|
||||
<>
|
||||
@ -64,7 +64,7 @@ function SetKey ({ allAccounts, className = '', isMine, sudoKey }: Props): React
|
||||
</Labelled>
|
||||
)
|
||||
}
|
||||
</section>
|
||||
</StyledSection>
|
||||
{willLose && (
|
||||
<article className='warning padded'>
|
||||
<div>{t<string>('You will no longer have sudo access')}</div>
|
||||
@ -74,7 +74,7 @@ function SetKey ({ allAccounts, className = '', isMine, sudoKey }: Props): React
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(SetKey)`
|
||||
const StyledSection = styled.section`
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
|
||||
@ -89,4 +89,6 @@ export default React.memo(styled(SetKey)`
|
||||
.sudoLabelled {
|
||||
align-items: center;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(SetKey);
|
||||
|
||||
@ -38,7 +38,7 @@ function Sudo ({ className, isMine, sudoKey }: Props): React.ReactElement<Props>
|
||||
|
||||
return isMine
|
||||
? (
|
||||
<section className={className}>
|
||||
<StyledSection className={className}>
|
||||
<Extrinsic
|
||||
defaultValue={apiDefaultTxSudo}
|
||||
label={t<string>('submit the following change')}
|
||||
@ -84,7 +84,7 @@ function Sudo ({ className, isMine, sudoKey }: Props): React.ReactElement<Props>
|
||||
}
|
||||
/>
|
||||
</Button.Group>
|
||||
</section>
|
||||
</StyledSection>
|
||||
)
|
||||
: (
|
||||
<article className='error padded'>
|
||||
@ -96,9 +96,11 @@ function Sudo ({ className, isMine, sudoKey }: Props): React.ReactElement<Props>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Sudo)`
|
||||
const StyledSection = styled.section`
|
||||
.sudoToggle {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Sudo);
|
||||
|
||||
@ -47,7 +47,6 @@ function SudoApp ({ basePath }: Props): React.ReactElement<Props> {
|
||||
</Route>
|
||||
<Route>
|
||||
<Sudo
|
||||
allAccounts={allAccounts}
|
||||
isMine={hasSudoKey}
|
||||
sudoKey={sudoKey}
|
||||
/>
|
||||
|
||||
@ -122,7 +122,7 @@ function Tip ({ bestNumber, className = '', defaultId, hash, isMember, members,
|
||||
const recipient = who.toString();
|
||||
|
||||
return (
|
||||
<tr className={className}>
|
||||
<StyledTr className={className}>
|
||||
<td className='address'>
|
||||
<AddressSmall value={who} />
|
||||
</td>
|
||||
@ -208,13 +208,15 @@ function Tip ({ bestNumber, className = '', defaultId, hash, isMember, members,
|
||||
type='tip'
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</StyledTr>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Tip)`
|
||||
const StyledTr = styled.tr`
|
||||
.closingTimer {
|
||||
display: inline-block;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Tip);
|
||||
|
||||
@ -73,7 +73,7 @@ function Tips ({ className = '', defaultId, hashes, isMember, members, onSelectT
|
||||
]);
|
||||
|
||||
return (
|
||||
<Table
|
||||
<StyledTable
|
||||
className={className}
|
||||
empty={tips && t<string>('No open tips')}
|
||||
filter={isMember && (
|
||||
@ -100,11 +100,11 @@ function Tips ({ className = '', defaultId, hashes, isMember, members, onSelectT
|
||||
tip={tip}
|
||||
/>
|
||||
))}
|
||||
</Table>
|
||||
</StyledTable>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Tips)`
|
||||
const StyledTable = styled(Table)`
|
||||
.tipsFilter {
|
||||
text-align: right;
|
||||
|
||||
@ -113,4 +113,6 @@ export default React.memo(styled(Tips)`
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Tips);
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
// Copyright 2017-2023 @polkadot/app-utilities authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type { Option } from '@polkadot/apps-config/settings/types';
|
||||
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
|
||||
import { createOption } from '@polkadot/app-settings/util';
|
||||
@ -24,11 +22,11 @@ interface State {
|
||||
inputSS58: number;
|
||||
}
|
||||
|
||||
function getState (input: string): State {
|
||||
function getState (input: string | null): State {
|
||||
let address: string | null = null;
|
||||
let inputSS58 = 42;
|
||||
|
||||
if (isAddress(input)) {
|
||||
if (input && isAddress(input)) {
|
||||
const decoded = base58Decode(input);
|
||||
const [,,, ss58Decoded] = checkAddressChecksum(decoded);
|
||||
|
||||
@ -49,13 +47,13 @@ function Addresses ({ className }: Props): React.ReactElement<Props> {
|
||||
const [prefix, setPrefix] = useState(-1);
|
||||
|
||||
const setAddress = useCallback(
|
||||
(address: string) =>
|
||||
(address: string | null) =>
|
||||
setState(getState(address)),
|
||||
[]
|
||||
);
|
||||
|
||||
const prefixOptions = useMemo(
|
||||
(): (Option | React.ReactNode)[] => {
|
||||
() => {
|
||||
const network = allNetworks.find(({ prefix }) => prefix === chainSS58);
|
||||
|
||||
return createSs58(t).map((o) =>
|
||||
|
||||
@ -12,16 +12,18 @@ import React, { useRef } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { withCalls, withMulti } from '@polkadot/react-api/hoc';
|
||||
import { Expander, Icon, Tooltip } from '@polkadot/react-components';
|
||||
import { useBestNumber } from '@polkadot/react-hooks';
|
||||
import { BlockToTime, FormatBalance } from '@polkadot/react-query';
|
||||
import { BN_MAX_INTEGER, BN_ZERO, bnMax, formatBalance, formatNumber, isObject } from '@polkadot/util';
|
||||
|
||||
import CryptoType from './CryptoType';
|
||||
import DemocracyLocks from './DemocracyLocks';
|
||||
import Expander from './Expander';
|
||||
import Icon from './Icon';
|
||||
import Label from './Label';
|
||||
import StakingRedeemable from './StakingRedeemable';
|
||||
import StakingUnbonding from './StakingUnbonding';
|
||||
import Tooltip from './Tooltip';
|
||||
import { useTranslation } from './translate';
|
||||
|
||||
// true to display, or (for bonded) provided values [own, ...all extras]
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { MarkWarning } from '@polkadot/react-components';
|
||||
import { useApi } from '@polkadot/react-hooks';
|
||||
import { isFunction } from '@polkadot/util';
|
||||
|
||||
import MarkWarning from './MarkWarning';
|
||||
import { useTranslation } from './translate';
|
||||
|
||||
function BatchWarning (): React.ReactElement | null {
|
||||
|
||||
@ -30,7 +30,7 @@ function ChainImg ({ className = '', isInline, logo, onClick, withoutHl }: Props
|
||||
}, [logo, specName, systemChain, systemName]);
|
||||
|
||||
return (
|
||||
<img
|
||||
<StyledImg
|
||||
alt='chain logo'
|
||||
className={`${className}${(isEmpty && !withoutHl) ? ' highlight--bg' : ''}${isInline ? ' isInline' : ''}`}
|
||||
onClick={onClick}
|
||||
@ -39,7 +39,7 @@ function ChainImg ({ className = '', isInline, logo, onClick, withoutHl }: Props
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(ChainImg)`
|
||||
const StyledImg = styled.img`
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
@ -51,4 +51,6 @@ export default React.memo(styled(ChainImg)`
|
||||
vertical-align: middle;
|
||||
width: 24px;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(ChainImg);
|
||||
|
||||
@ -53,7 +53,7 @@ function ChainLock ({ className = '', genesisHash, isDisabled, onChange }: Props
|
||||
}
|
||||
|
||||
return (
|
||||
<Toggle
|
||||
<StyledToggle
|
||||
className={className}
|
||||
isDisabled={isDisabled}
|
||||
label={t<string>('only this network')}
|
||||
@ -64,6 +64,8 @@ function ChainLock ({ className = '', genesisHash, isDisabled, onChange }: Props
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(ChainLock)`
|
||||
const StyledToggle = styled(Toggle)`
|
||||
text-align: right;
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(ChainLock);
|
||||
|
||||
@ -9,7 +9,7 @@ import Icon from './Icon';
|
||||
interface Props {
|
||||
className?: string;
|
||||
isDisabled?: boolean;
|
||||
label: React.ReactNode;
|
||||
label?: React.ReactNode;
|
||||
onChange?: (isChecked: boolean) => void;
|
||||
value?: boolean;
|
||||
}
|
||||
@ -23,7 +23,7 @@ function Checkbox ({ className = '', isDisabled, label, onChange, value }: Props
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
<StyledDiv
|
||||
className={`${className} ui--Checkbox ${isDisabled ? 'isDisabled' : ''}`}
|
||||
onClick={_onClick}
|
||||
>
|
||||
@ -32,11 +32,11 @@ function Checkbox ({ className = '', isDisabled, label, onChange, value }: Props
|
||||
icon='check'
|
||||
/>
|
||||
{label && <label>{label}</label>}
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Checkbox)`
|
||||
const StyledDiv = styled.div`
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
@ -66,4 +66,6 @@ export default React.memo(styled(Checkbox)`
|
||||
border: 1px solid var(--color-checkbox);
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Checkbox);
|
||||
|
||||
@ -8,6 +8,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { useQueue } from '@polkadot/react-hooks';
|
||||
import { isString } from '@polkadot/util';
|
||||
|
||||
import Button from './Button';
|
||||
import { useTranslation } from './translate';
|
||||
@ -19,12 +20,12 @@ interface Props {
|
||||
label?: React.ReactNode;
|
||||
type?: string;
|
||||
isMnemonic?: boolean;
|
||||
value: string;
|
||||
value?: React.ReactNode | null;
|
||||
}
|
||||
|
||||
const NOOP = () => undefined;
|
||||
|
||||
function CopyButton ({ children, className = '', icon = 'copy', label, type, value }: Props): React.ReactElement<Props> {
|
||||
function CopyButton ({ children, className = '', icon = 'copy', label, type, value }: Props): React.ReactElement<Props> | null {
|
||||
const { t } = useTranslation();
|
||||
const { queueAction } = useQueue();
|
||||
|
||||
@ -39,11 +40,15 @@ function CopyButton ({ children, className = '', icon = 'copy', label, type, val
|
||||
[type, queueAction, t]
|
||||
);
|
||||
|
||||
if (!isString(value)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${className} ui--CopyButton`}>
|
||||
<StyledDiv className={`${className} ui--CopyButton`}>
|
||||
<CopyToClipboard
|
||||
onCopy={_onCopy}
|
||||
text={value}
|
||||
text={value as string}
|
||||
>
|
||||
<div className='copyContainer'>
|
||||
{children}
|
||||
@ -58,12 +63,14 @@ function CopyButton ({ children, className = '', icon = 'copy', label, type, val
|
||||
</span>
|
||||
</div>
|
||||
</CopyToClipboard>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(CopyButton)`
|
||||
const StyledDiv = styled.div`
|
||||
.copySpan {
|
||||
white-space: nowrap;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(CopyButton);
|
||||
|
||||
@ -109,7 +109,7 @@ function DemocracyLocks ({ className = '', value }: Props): React.ReactElement<P
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<StyledDiv className={className}>
|
||||
<FormatBalance
|
||||
labelPost={
|
||||
<Icon
|
||||
@ -132,14 +132,16 @@ function DemocracyLocks ({ className = '', value }: Props): React.ReactElement<P
|
||||
</div>
|
||||
))}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(DemocracyLocks)`
|
||||
const StyledDiv = styled.div`
|
||||
white-space: nowrap;
|
||||
|
||||
.ui--FormatBalance {
|
||||
display: inline-block;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(DemocracyLocks);
|
||||
|
||||
@ -29,7 +29,7 @@ interface Props<Option extends DropdownItemProps> {
|
||||
onChange?: (value: any) => void;
|
||||
onClose?: () => void;
|
||||
onSearch?: (filteredOptions: any[], query: string) => Option[];
|
||||
options: Option[];
|
||||
options: (React.ReactNode | Option)[];
|
||||
placeholder?: string;
|
||||
renderLabel?: (item: any) => any;
|
||||
searchInput?: { autoFocus: boolean };
|
||||
@ -44,7 +44,7 @@ export type IDropdown<Option extends DropdownItemProps> = React.ComponentType<Pr
|
||||
Header: React.ComponentType<{ content: React.ReactNode }>;
|
||||
}
|
||||
|
||||
function BaseDropdown<Option extends DropdownItemProps> ({ allowAdd = false, children, className = '', defaultValue, dropdownClassName, isButton, isDisabled, isError, isFull, isMultiple, label, labelExtra, onAdd, onBlur, onChange, onClose, onSearch, options, placeholder, renderLabel, searchInput, tabIndex, transform, value, withEllipsis, withLabel }: Props<Option>): React.ReactElement<Props<Option>> {
|
||||
function Dropdown<Option extends DropdownItemProps> ({ allowAdd = false, children, className = '', defaultValue, dropdownClassName, isButton, isDisabled, isError, isFull, isMultiple, label, labelExtra, onAdd, onBlur, onChange, onClose, onSearch, options, placeholder, renderLabel, searchInput, tabIndex, transform, value, withEllipsis, withLabel }: Props<Option>): React.ReactElement<Props<Option>> {
|
||||
const lastUpdate = useRef<string>('');
|
||||
const [stored, setStored] = useState<string | undefined>();
|
||||
|
||||
@ -97,7 +97,9 @@ function BaseDropdown<Option extends DropdownItemProps> ({ allowAdd = false, chi
|
||||
onBlur={onBlur}
|
||||
onChange={_onChange}
|
||||
onClose={onClose}
|
||||
options={options}
|
||||
// NOTE This is not quite correct since we also pass React.ReactNode items
|
||||
// through (e.g. these are used as headers, see InputAddress). But... it works...
|
||||
options={options as Option[]}
|
||||
placeholder={placeholder}
|
||||
renderLabel={renderLabel}
|
||||
search={onSearch || allowAdd}
|
||||
@ -111,7 +113,7 @@ function BaseDropdown<Option extends DropdownItemProps> ({ allowAdd = false, chi
|
||||
return isButton
|
||||
? <SUIButton.Group>{dropdown}{children}</SUIButton.Group>
|
||||
: (
|
||||
<Labelled
|
||||
<StyledLabelled
|
||||
className={`${className} ui--Dropdown`}
|
||||
isFull={isFull}
|
||||
label={label}
|
||||
@ -121,11 +123,11 @@ function BaseDropdown<Option extends DropdownItemProps> ({ allowAdd = false, chi
|
||||
>
|
||||
{dropdown}
|
||||
{children}
|
||||
</Labelled>
|
||||
</StyledLabelled>
|
||||
);
|
||||
}
|
||||
|
||||
const Dropdown = React.memo(styled(BaseDropdown)`
|
||||
const StyledLabelled = styled(Labelled)`
|
||||
.ui--Dropdown-item {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
@ -165,9 +167,8 @@ const Dropdown = React.memo(styled(BaseDropdown)`
|
||||
}
|
||||
}
|
||||
}
|
||||
`) as unknown as IDropdown<any>;
|
||||
`;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
(Dropdown as any).Header = SUIDropdown.Header;
|
||||
Dropdown.Header = SUIDropdown.Header;
|
||||
|
||||
export default Dropdown;
|
||||
|
||||
@ -13,12 +13,12 @@ interface Props {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
icon?: IconName;
|
||||
onClick: () => void;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
function EditButton ({ children, className = '', icon = 'edit', onClick }: Props): React.ReactElement<Props> {
|
||||
return (
|
||||
<div
|
||||
<StyledDiv
|
||||
className={`${className} ui--EditButton`}
|
||||
onClick={onClick}
|
||||
>
|
||||
@ -29,11 +29,11 @@ function EditButton ({ children, className = '', icon = 'edit', onClick }: Props
|
||||
icon={icon}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(EditButton)`
|
||||
const StyledDiv = styled.div`
|
||||
cursor: pointer;
|
||||
|
||||
.ui--Icon.icon-button {
|
||||
@ -45,4 +45,6 @@ export default React.memo(styled(EditButton)`
|
||||
.editSpan {
|
||||
white-space: nowrap;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(EditButton);
|
||||
|
||||
@ -61,14 +61,14 @@ function Editor ({ className = '', code, isValid, onEdit }: Props): React.ReactE
|
||||
}, [code]);
|
||||
|
||||
return (
|
||||
<div
|
||||
<StyledDiv
|
||||
className={`${className} ui-Editor ${isValid === false ? 'invalid' : ''}`}
|
||||
id={editorId}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Editor)`
|
||||
const StyledDiv = styled.div`
|
||||
.codeflask {
|
||||
border: 1px solid var(--border-input);
|
||||
background: transparent;
|
||||
@ -80,4 +80,6 @@ export default React.memo(styled(Editor)`
|
||||
border-color: #e0b4b4;
|
||||
}
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Editor);
|
||||
|
||||
@ -8,10 +8,10 @@ import type { Codec } from '@polkadot/types/types';
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
|
||||
import { Input } from '@polkadot/react-components';
|
||||
import { balanceEvents, balanceEventsOverrides } from '@polkadot/react-components/constants';
|
||||
import Params from '@polkadot/react-params';
|
||||
|
||||
import { balanceEvents, balanceEventsOverrides } from './constants';
|
||||
import Input from './Input';
|
||||
import { useTranslation } from './translate';
|
||||
import { getContractAbi } from './util';
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Icon } from '@polkadot/react-components';
|
||||
import Icon from './Icon';
|
||||
|
||||
interface Props {
|
||||
onClick: () => void;
|
||||
@ -14,17 +14,17 @@ interface Props {
|
||||
|
||||
function ExpandButton ({ className = '', expanded, onClick }: Props): React.ReactElement<Props> {
|
||||
return (
|
||||
<div
|
||||
<StyledDiv
|
||||
className={`${className} ui--ExpandButton`}
|
||||
data-testid='row-toggle'
|
||||
onClick={onClick}
|
||||
>
|
||||
<Icon icon={expanded ? 'caret-up' : 'caret-down'} />
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(ExpandButton)`
|
||||
const StyledDiv = styled.div`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -33,4 +33,6 @@ export default React.memo(styled(ExpandButton)`
|
||||
border: 1px solid var(--border-table);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(ExpandButton);
|
||||
|
||||
@ -22,7 +22,7 @@ export interface Props {
|
||||
isLeft?: boolean;
|
||||
isPadded?: boolean;
|
||||
onClick?: (isOpen: boolean) => void;
|
||||
renderChildren?: () => React.ReactNode;
|
||||
renderChildren?: (() => React.ReactNode | undefined | null) | null;
|
||||
summary?: React.ReactNode;
|
||||
summaryHead?: React.ReactNode;
|
||||
summaryMeta?: Meta;
|
||||
@ -98,7 +98,7 @@ function Expander ({ children, className = '', isHeader, isLeft, isOpen, isPadde
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`${className} ui--Expander ${isExpanded ? 'isExpanded' : ''} ${isHeader ? 'isHeader' : ''} ${isPadded ? 'isPadded' : ''} ${hasContent ? 'hasContent' : ''} ${withBreaks ? 'withBreaks' : ''}`}>
|
||||
<StyledDiv className={`${className} ui--Expander ${isExpanded ? 'isExpanded' : ''} ${isHeader ? 'isHeader' : ''} ${isPadded ? 'isPadded' : ''} ${hasContent ? 'hasContent' : ''} ${withBreaks ? 'withBreaks' : ''}`}>
|
||||
<div
|
||||
className={`ui--Expander-summary${isLeft ? ' isLeft' : ''}`}
|
||||
onClick={toggleExpanded}
|
||||
@ -118,11 +118,11 @@ function Expander ({ children, className = '', isHeader, isLeft, isOpen, isPadde
|
||||
{hasContent && (isExpanded || withHidden) && (
|
||||
<div className='ui--Expander-content'>{children || demandChildren}</div>
|
||||
)}
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Expander)`
|
||||
const StyledDiv = styled.div`
|
||||
max-width: 60rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -214,4 +214,6 @@ export default React.memo(styled(Expander)`
|
||||
&.isPadded .ui--Expander-summary {
|
||||
margin-left: 2.25rem;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Expander);
|
||||
|
||||
@ -11,7 +11,7 @@ import Table from './Table';
|
||||
|
||||
interface Props extends ExpanderProps {
|
||||
empty?: string;
|
||||
renderChildren?: () => React.ReactNode[];
|
||||
renderChildren?: (() => React.ReactNode[] | undefined | null) | null;
|
||||
}
|
||||
|
||||
function mapRow (row: React.ReactNode, key: number): React.ReactNode {
|
||||
@ -36,7 +36,7 @@ function ExpanderScroll ({ children, className, empty, renderChildren, summary }
|
||||
isInline
|
||||
>
|
||||
{renderChildren
|
||||
? renderChildren().map(mapRow)
|
||||
? renderChildren()?.map(mapRow)
|
||||
: Array.isArray(children)
|
||||
? children.map(mapRow)
|
||||
: <tr><td>{children}</td></tr>
|
||||
@ -48,7 +48,7 @@ function ExpanderScroll ({ children, className, empty, renderChildren, summary }
|
||||
);
|
||||
|
||||
return (
|
||||
<Expander
|
||||
<StyledExpander
|
||||
className={className}
|
||||
renderChildren={hasContent ? innerRender : undefined}
|
||||
summary={summary}
|
||||
@ -56,7 +56,7 @@ function ExpanderScroll ({ children, className, empty, renderChildren, summary }
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(ExpanderScroll)`
|
||||
const StyledExpander = styled(Expander)`
|
||||
.tableContainer {
|
||||
overflow-y: scroll;
|
||||
display: block;
|
||||
@ -65,4 +65,6 @@ export default React.memo(styled(ExpanderScroll)`
|
||||
max-width: 25rem;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(ExpanderScroll);
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Input } from '@polkadot/react-components/index';
|
||||
import Input from './Input';
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
@ -15,7 +15,7 @@ interface Props {
|
||||
|
||||
function Filter ({ className = '', filterOn, label, setFilter }: Props) {
|
||||
return (
|
||||
<div className={className}>
|
||||
<StyledDiv className={className}>
|
||||
<Input
|
||||
autoFocus
|
||||
isFull
|
||||
@ -23,15 +23,17 @@ function Filter ({ className = '', filterOn, label, setFilter }: Props) {
|
||||
onChange={setFilter}
|
||||
value={filterOn}
|
||||
/>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Filter)`
|
||||
const StyledDiv = styled.div`
|
||||
width: 29.5rem;
|
||||
|
||||
.ui--Input {
|
||||
margin: 0;
|
||||
height: 3.893rem;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Filter);
|
||||
|
||||
@ -11,13 +11,13 @@ interface Props {
|
||||
|
||||
function FilterOverlay ({ children, className }: Props): React.ReactElement<Props> {
|
||||
return (
|
||||
<div className={className}>
|
||||
<StyledDiv className={className}>
|
||||
{children}
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(FilterOverlay)`
|
||||
const StyledDiv = styled.div`
|
||||
display: none;
|
||||
right: calc(50% - var(--width-half) + 1.5rem);
|
||||
|
||||
@ -52,4 +52,6 @@ export default React.memo(styled(FilterOverlay)`
|
||||
@media only screen and (max-width: 1750px) {
|
||||
right: 1.5rem;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(FilterOverlay);
|
||||
|
||||
@ -16,7 +16,7 @@ interface FlagProps {
|
||||
|
||||
function Flag ({ className = '', color, label }: FlagProps): React.ReactElement<FlagProps> {
|
||||
return (
|
||||
<Tag
|
||||
<StyledTag
|
||||
className={`${className} ${color === 'theme' ? ' highlight--color-bg highlight--bg' : ''}` }
|
||||
color={color}
|
||||
label={label}
|
||||
@ -25,7 +25,7 @@ function Flag ({ className = '', color, label }: FlagProps): React.ReactElement<
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Flag)`
|
||||
const StyledTag = styled(Tag)`
|
||||
border-radius: 0 0.25rem 0.25rem 0;
|
||||
padding: 0.5833em 1.25em 0.5833em 1.5em;
|
||||
font-size: var(--font-size-tiny);
|
||||
@ -63,4 +63,6 @@ export default React.memo(styled(Flag)`
|
||||
top: 50%;
|
||||
transition: none;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Flag);
|
||||
|
||||
@ -3,8 +3,9 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { AddressRow, Button, Modal } from '@polkadot/react-components';
|
||||
|
||||
import AddressRow from './AddressRow';
|
||||
import Button from './Button';
|
||||
import Modal from './Modal';
|
||||
import { useTranslation } from './translate';
|
||||
|
||||
type Mode = 'account' | 'address' | 'contract' | 'code';
|
||||
|
||||
@ -21,7 +21,7 @@ function HelpOverlay ({ className = '', md }: Props): React.ReactElement<Props>
|
||||
const [isVisible, toggleVisible] = useToggle();
|
||||
|
||||
return (
|
||||
<div className={`${className} ui--HelpOverlay`}>
|
||||
<StyledDiv className={`${className} ui--HelpOverlay`}>
|
||||
<div className='help-button'>
|
||||
<Icon
|
||||
icon='question-circle'
|
||||
@ -42,11 +42,11 @@ function HelpOverlay ({ className = '', md }: Props): React.ReactElement<Props>
|
||||
{md}
|
||||
</ReactMd>
|
||||
</div>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(HelpOverlay)`
|
||||
const StyledDiv = styled.div`
|
||||
.help-button {
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@ -86,4 +86,6 @@ export default React.memo(styled(HelpOverlay)`
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(HelpOverlay);
|
||||
|
||||
@ -36,7 +36,7 @@ function Icon ({ className = '', color = 'normal', icon, isPadded, isSpinning, o
|
||||
};
|
||||
|
||||
return (
|
||||
<FontAwesomeIcon
|
||||
<StyledFAI
|
||||
{...extraProps}
|
||||
className={`${className} ui--Icon ${color}Color${onClick ? ' isClickable' : ''}${isPadded ? ' isPadded' : ''}`}
|
||||
icon={icon}
|
||||
@ -48,7 +48,7 @@ function Icon ({ className = '', color = 'normal', icon, isPadded, isSpinning, o
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Icon)`
|
||||
const StyledFAI = styled(FontAwesomeIcon)`
|
||||
outline: none;
|
||||
|
||||
&.isClickable {
|
||||
@ -86,4 +86,6 @@ export default React.memo(styled(Icon)`
|
||||
&.darkGrayColor {
|
||||
color: #8B8B8B;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Icon);
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
// Copyright 2017-2023 @polkadot/react-components authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type { IconName } from '@fortawesome/fontawesome-svg-core';
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
@ -9,16 +11,16 @@ import Icon from './Icon';
|
||||
interface Props {
|
||||
className?: string;
|
||||
href?: string;
|
||||
icon?: string;
|
||||
icon?: IconName;
|
||||
label?: React.ReactNode;
|
||||
rel?: string;
|
||||
target?: string;
|
||||
onClick: () => void;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
function IconLink ({ className = '', href, icon, label, onClick, rel, target }: Props): React.ReactElement<Props> {
|
||||
return (
|
||||
<a
|
||||
<StyledA
|
||||
className={className}
|
||||
href={href}
|
||||
onClick={onClick}
|
||||
@ -27,12 +29,14 @@ function IconLink ({ className = '', href, icon, label, onClick, rel, target }:
|
||||
>
|
||||
{icon && <Icon icon={icon} />}
|
||||
{label}
|
||||
</a>
|
||||
</StyledA>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(IconLink)`
|
||||
const StyledA = styled.a`
|
||||
.ui--Icon {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(IconLink);
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
|
||||
import type { IdentityProps } from '@polkadot/react-identicon/types';
|
||||
import type { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
|
||||
import type { ThemeProps } from '../types';
|
||||
|
||||
import React, { useCallback } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { getSystemIcon } from '@polkadot/apps-config';
|
||||
import { ThemeProps } from '@polkadot/react-components/types';
|
||||
import { useApi, useQueue } from '@polkadot/react-hooks';
|
||||
import BaseIdentityIcon from '@polkadot/react-identicon';
|
||||
import { settings } from '@polkadot/ui-settings';
|
||||
|
||||
@ -14,13 +14,13 @@ interface Props {
|
||||
|
||||
function InfoForInput ({ children, className = '', type = 'info' }: Props): React.ReactElement<Props> {
|
||||
return (
|
||||
<Labelled>
|
||||
<StyledLabelled>
|
||||
<div className={`${className} ${type}`}>{children}</div>
|
||||
</Labelled>
|
||||
</StyledLabelled>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(InfoForInput)`
|
||||
const StyledLabelled = styled(Labelled)`
|
||||
background: white;
|
||||
border-radius: 0 0 0.25rem 0.25rem;
|
||||
margin: -0.5rem 0 0.25rem;
|
||||
@ -39,4 +39,6 @@ export default React.memo(styled(InfoForInput)`
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(InfoForInput);
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// Copyright 2017-2023 @polkadot/react-components authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type { DropdownItemProps } from 'semantic-ui-react';
|
||||
import type { KeyringOption$Type, KeyringOptions, KeyringSectionOption, KeyringSectionOptions } from '@polkadot/ui-keyring/options/types';
|
||||
import type { Option } from './types';
|
||||
|
||||
@ -289,7 +290,7 @@ class InputAddress extends React.PureComponent<Props, State> {
|
||||
}
|
||||
};
|
||||
|
||||
private onSearch = (filteredOptions: KeyringSectionOptions, _query: string): KeyringSectionOptions => {
|
||||
private onSearch = (filteredOptions: KeyringSectionOptions, _query: string): DropdownItemProps[] => {
|
||||
const { isInput = true } = this.props;
|
||||
const query = _query.trim();
|
||||
const queryLower = query.toLowerCase();
|
||||
@ -312,57 +313,62 @@ class InputAddress extends React.PureComponent<Props, State> {
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME The return here is _very_ suspect, but it actually does exactly
|
||||
// what it is meant to do... filter and return the options for clicking
|
||||
//
|
||||
// (effectively it seems to be the value type that should allow undefined
|
||||
// instead of null in there...)
|
||||
return matches.filter((item, index): boolean => {
|
||||
const isLast = index === matches.length - 1;
|
||||
const nextItem = matches[index + 1];
|
||||
const hasNext = nextItem && nextItem.value;
|
||||
|
||||
return !(isNull(item.value) || isUndefined(item.value)) || (!isLast && !!hasNext);
|
||||
});
|
||||
}) as DropdownItemProps[];
|
||||
};
|
||||
}
|
||||
|
||||
const StyledDropdown = styled(Dropdown)`
|
||||
.ui.dropdown .text {
|
||||
width: 100%;
|
||||
}
|
||||
.ui.dropdown .text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.disabled.search {
|
||||
pointer-events: all;
|
||||
}
|
||||
.ui.disabled.search {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.ui.search.selection.dropdown {
|
||||
> .text > .ui--KeyPair {
|
||||
.ui--IdentityIcon {
|
||||
left: -2.75rem;
|
||||
top: -1.05rem;
|
||||
.ui.search.selection.dropdown {
|
||||
> .text > .ui--KeyPair {
|
||||
.ui--IdentityIcon {
|
||||
left: -2.75rem;
|
||||
top: -1.05rem;
|
||||
|
||||
> div,
|
||||
img,
|
||||
svg {
|
||||
height: 32px !important;
|
||||
width: 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: 0;
|
||||
|
||||
> .ui--AccountName {
|
||||
height: auto;
|
||||
}
|
||||
> div,
|
||||
img,
|
||||
svg {
|
||||
height: 32px !important;
|
||||
width: 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .menu > div.item > .ui--KeyPair > .name > .ui--AccountName {
|
||||
height: auto;
|
||||
.name {
|
||||
margin-left: 0;
|
||||
|
||||
> .ui--AccountName {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hideAddress .ui.search.selection.dropdown > .text > .ui--KeyPair .address {
|
||||
flex: 0;
|
||||
max-width: 0;
|
||||
> .menu > div.item > .ui--KeyPair > .name > .ui--AccountName {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.hideAddress .ui.search.selection.dropdown > .text > .ui--KeyPair .address {
|
||||
flex: 0;
|
||||
max-width: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const ExportedComponent = withMulti(
|
||||
|
||||
@ -45,7 +45,7 @@ function InputAddressSimple ({ autoFocus, bytesLength, children, className = '',
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`${className} ui--InputAddressSimple`}>
|
||||
<StyledDiv className={`${className} ui--InputAddressSimple`}>
|
||||
<Input
|
||||
autoFocus={autoFocus}
|
||||
defaultValue={defaultValue}
|
||||
@ -66,11 +66,11 @@ function InputAddressSimple ({ autoFocus, bytesLength, children, className = '',
|
||||
size={32}
|
||||
value={address}
|
||||
/>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(InputAddressSimple)`
|
||||
const StyledDiv = styled.div`
|
||||
position: relative;
|
||||
|
||||
.ui--InputAddressSimpleIcon {
|
||||
@ -81,4 +81,6 @@ export default React.memo(styled(InputAddressSimple)`
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(InputAddressSimple);
|
||||
|
||||
@ -100,7 +100,7 @@ function InputFile ({ accept, className = '', clearContent, isDisabled, isError
|
||||
ref={dropRef}
|
||||
>
|
||||
{({ getInputProps, getRootProps }): JSX.Element => (
|
||||
<div {...getRootProps({ className: `${className} ui--InputFile ${isError ? 'error' : ''}` })}>
|
||||
<StyledDiv {...getRootProps({ className: `${className} ui--InputFile ${isError ? 'error' : ''}` })}>
|
||||
<input {...getInputProps()} />
|
||||
<em className='label'>
|
||||
{
|
||||
@ -114,7 +114,7 @@ function InputFile ({ accept, className = '', clearContent, isDisabled, isError
|
||||
})
|
||||
}
|
||||
</em>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
)}
|
||||
</Dropzone>
|
||||
);
|
||||
@ -134,7 +134,7 @@ function InputFile ({ accept, className = '', clearContent, isDisabled, isError
|
||||
: dropZone;
|
||||
}
|
||||
|
||||
export default React.memo(styled(InputFile)`
|
||||
const StyledDiv = styled.div`
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-input);
|
||||
border-radius: 0.28571429rem;
|
||||
@ -151,4 +151,6 @@ export default React.memo(styled(InputFile)`
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(InputFile);
|
||||
|
||||
@ -32,7 +32,7 @@ interface Props {
|
||||
label?: React.ReactNode;
|
||||
labelExtra?: React.ReactNode;
|
||||
maxLength?: number;
|
||||
maxValue?: BN;
|
||||
maxValue?: BN | null;
|
||||
onChange?: (value?: BN) => void;
|
||||
onEnter?: () => void;
|
||||
onEscape?: () => void;
|
||||
@ -82,7 +82,7 @@ function getSiPowers (si: SiDef | null, decimals?: number): [BN, number, number]
|
||||
return [new BN(basePower + si.power), basePower, si.power];
|
||||
}
|
||||
|
||||
function isValidNumber (bn: BN, bitLength: BitLength, isSigned: boolean, isZeroable: boolean, maxValue?: BN): boolean {
|
||||
function isValidNumber (bn: BN, bitLength: BitLength, isSigned: boolean, isZeroable: boolean, maxValue?: BN | null): boolean {
|
||||
if (
|
||||
// cannot be negative
|
||||
(!isSigned && bn.lt(BN_ZERO)) ||
|
||||
@ -101,7 +101,7 @@ function isValidNumber (bn: BN, bitLength: BitLength, isSigned: boolean, isZeroa
|
||||
return true;
|
||||
}
|
||||
|
||||
function inputToBn (api: ApiPromise, input: string, si: SiDef | null, bitLength: BitLength, isSigned: boolean, isZeroable: boolean, maxValue?: BN, decimals?: number): [BN, boolean] {
|
||||
function inputToBn (api: ApiPromise, input: string, si: SiDef | null, bitLength: BitLength, isSigned: boolean, isZeroable: boolean, maxValue?: BN | null, decimals?: number): [BN, boolean] {
|
||||
const [siPower, basePower, siUnitPower] = getSiPowers(si, decimals);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
|
||||
@ -132,7 +132,7 @@ function inputToBn (api: ApiPromise, input: string, si: SiDef | null, bitLength:
|
||||
];
|
||||
}
|
||||
|
||||
function getValuesFromString (api: ApiPromise, value: string, si: SiDef | null, bitLength: BitLength, isSigned: boolean, isZeroable: boolean, maxValue?: BN, decimals?: number): [string, BN, boolean] {
|
||||
function getValuesFromString (api: ApiPromise, value: string, si: SiDef | null, bitLength: BitLength, isSigned: boolean, isZeroable: boolean, maxValue?: BN | null, decimals?: number): [string, BN, boolean] {
|
||||
return [
|
||||
value,
|
||||
...inputToBn(api, value, si, bitLength, isSigned, isZeroable, maxValue, decimals)
|
||||
@ -155,7 +155,7 @@ function getValuesFromBn (valueBn: BN, si: SiDef | null, isSigned: boolean, isZe
|
||||
];
|
||||
}
|
||||
|
||||
function getValues (api: ApiPromise, value: BN | string = BN_ZERO, si: SiDef | null, bitLength: BitLength, isSigned: boolean, isZeroable: boolean, maxValue?: BN, decimals?: number): [string, BN, boolean] {
|
||||
function getValues (api: ApiPromise, value: BN | string = BN_ZERO, si: SiDef | null, bitLength: BitLength, isSigned: boolean, isZeroable: boolean, maxValue?: BN | null, decimals?: number): [string, BN, boolean] {
|
||||
return isBn(value)
|
||||
? getValuesFromBn(value, si, isSigned, isZeroable, decimals)
|
||||
: getValuesFromString(api, value, si, bitLength, isSigned, isZeroable, maxValue, decimals);
|
||||
@ -240,7 +240,7 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
|
||||
const maxValueLength = getGlobalMaxValue(bitLength).toString().length;
|
||||
|
||||
return (
|
||||
<Input
|
||||
<StyledInput
|
||||
autoFocus={autoFocus}
|
||||
className={`${className} ui--InputNumber ${isDisabled ? 'isDisabled' : ''}`}
|
||||
isDisabled={isDisabled}
|
||||
@ -271,11 +271,11 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</Input>
|
||||
</StyledInput>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(InputNumber)`
|
||||
const StyledInput = styled(Input)`
|
||||
.siUnit {
|
||||
bottom: 0.85rem;
|
||||
color: var(--color-label);
|
||||
@ -285,4 +285,6 @@ export default React.memo(styled(InputNumber)`
|
||||
font-weight: var(--font-weight-bold);
|
||||
right: 1.25rem;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(InputNumber);
|
||||
|
||||
@ -59,7 +59,7 @@ function InputTags ({ allowAdd = true, className = '', defaultValue, isDisabled,
|
||||
const { theme } = useContext(ThemeContext as React.Context<ThemeDef>);
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
<StyledDropdown
|
||||
allowAdd={allowAdd && !isDisabled}
|
||||
className={`${className} ui--InputTags ${theme}Theme`}
|
||||
defaultValue={defaultValue}
|
||||
@ -80,7 +80,7 @@ function InputTags ({ allowAdd = true, className = '', defaultValue, isDisabled,
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(InputTags)`
|
||||
const StyledDropdown = styled(Dropdown)`
|
||||
&& .ui.label {
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
@ -104,4 +104,6 @@ export default React.memo(styled(InputTags)`
|
||||
&&.darkTheme .ui.label {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(InputTags);
|
||||
|
||||
@ -37,7 +37,7 @@ function Inset ({ children, className = '', header, href, isCollapsible, isError
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
<StyledDiv
|
||||
className={`${className} ui--Inset ${href ? 'as-link' : ''} ${isCollapsible ? 'collapsible' : ''} ${(isError && !isSuccess) ? 'error' : ''} ${(!isError && isSuccess) ? 'success' : ''} ${withBottomMargin ? 'bottom-margin' : ''} ${withTopMargin ? 'top-margin' : ''}`}
|
||||
>
|
||||
{isCollapsible && (
|
||||
@ -58,11 +58,11 @@ function Inset ({ children, className = '', header, href, isCollapsible, isError
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</StyledDiv>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Inset)`
|
||||
const StyledDiv = styled.div`
|
||||
& {
|
||||
box-shadow: 0 3px 3px rgba(0,0,0,.2);
|
||||
position: relative;
|
||||
@ -140,4 +140,6 @@ export default React.memo(styled(Inset)`
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(Inset);
|
||||
|
||||
@ -6,10 +6,10 @@ import type { Inspect } from '@polkadot/types/types';
|
||||
import React, { useMemo } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Output } from '@polkadot/react-components';
|
||||
import { useApi } from '@polkadot/react-hooks';
|
||||
import { u8aToHex } from '@polkadot/util';
|
||||
|
||||
import Output from './Output';
|
||||
import { useTranslation } from './translate';
|
||||
|
||||
interface Props {
|
||||
@ -67,7 +67,7 @@ function DecodedInspect ({ className, hex, inspect, label }: Props): React.React
|
||||
}
|
||||
|
||||
return (
|
||||
<Output
|
||||
<StyledOutput
|
||||
className={className}
|
||||
isDisabled
|
||||
label={label}
|
||||
@ -97,11 +97,11 @@ function DecodedInspect ({ className, hex, inspect, label }: Props): React.React
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</Output>
|
||||
</StyledOutput>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(DecodedInspect)`
|
||||
const StyledOutput = styled(Output)`
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
@ -145,4 +145,6 @@ export default React.memo(styled(DecodedInspect)`
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export default React.memo(DecodedInspect);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Copyright 2017-2023 @polkadot/react-components authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type { DividerProps } from '@polkadot/react-components/Menu/types';
|
||||
import type { DividerProps } from './types';
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import AccountName from '@polkadot/react-components/AccountName';
|
||||
import { Icon } from '@polkadot/react-components/index';
|
||||
import AccountName from './AccountName';
|
||||
import Icon from './Icon';
|
||||
|
||||
interface ParentAccountProps {
|
||||
address: string,
|
||||
|
||||
@ -6,9 +6,9 @@ import type { PopupProps } from './types';
|
||||
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Button } from '@polkadot/react-components/index';
|
||||
import { useOutsideClick, useTheme, useToggle } from '@polkadot/react-hooks';
|
||||
|
||||
import Button from '../Button';
|
||||
import PopupWindow from './PopupWindow';
|
||||
|
||||
function Popup ({ children, className = '', closeOnScroll, isDisabled, onCloseAction, position = 'left', value }: PopupProps) {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
// Copyright 2017-2023 @polkadot/react-components authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type { FlagColor as TagColor } from '@polkadot/react-components/types';
|
||||
import type { ThemeDef } from '@polkadot/react-hooks/ctx/types';
|
||||
import type { FlagColor as TagColor } from './types';
|
||||
|
||||
import React, { useContext, useState } from 'react';
|
||||
import styled, { ThemeContext } from 'styled-components';
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Button } from '@polkadot/react-components';
|
||||
import Button from './Button';
|
||||
|
||||
interface Option {
|
||||
isDisabled?: boolean;
|
||||
|
||||
@ -6,11 +6,13 @@ import type { TreasuryProposal as TreasuryProposalType } from '@polkadot/types/i
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import { InputAddress, Labelled, Static } from '@polkadot/react-components';
|
||||
import { useApi } from '@polkadot/react-hooks';
|
||||
import { FormatBalance } from '@polkadot/react-query';
|
||||
|
||||
import InputAddress from './InputAddress';
|
||||
import Inset, { InsetProps } from './Inset';
|
||||
import Labelled from './Labelled';
|
||||
import Static from './Static';
|
||||
import { useTranslation } from './translate';
|
||||
|
||||
interface Props {
|
||||
|
||||
@ -5,10 +5,9 @@ import type { IconName } from '@fortawesome/fontawesome-svg-core';
|
||||
import type { WithTranslation } from 'react-i18next';
|
||||
import type { SubmittableExtrinsic } from '@polkadot/api/types';
|
||||
import type { Abi } from '@polkadot/api-contract';
|
||||
import type { ActionStatus } from '@polkadot/react-components/Status/types';
|
||||
import type { ThemeDef } from '@polkadot/react-hooks/ctx/types';
|
||||
import type { AccountId, Index } from '@polkadot/types/interfaces';
|
||||
import type { TxCallback, TxFailedCallback } from './Status/types';
|
||||
import type { ActionStatus, TxCallback, TxFailedCallback } from './Status/types';
|
||||
|
||||
import { AccountIndex, Address } from '@polkadot/types/interfaces';
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// Copyright 2017-2023 @polkadot/react-params authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type { BitLength } from '@polkadot/react-components/types';
|
||||
import type { Registry, TypeDef } from '@polkadot/types/types';
|
||||
import type { BN } from '@polkadot/util';
|
||||
import type { Props } from '../types';
|
||||
@ -12,9 +13,9 @@ import { bnToBn, formatNumber, isUndefined } from '@polkadot/util';
|
||||
|
||||
import Bare from './Bare';
|
||||
|
||||
function getBitLength (registry: Registry, { type }: TypeDef): number {
|
||||
function getBitLength (registry: Registry, { type }: TypeDef): BitLength {
|
||||
try {
|
||||
return registry.createType(type as 'u32').bitLength();
|
||||
return registry.createType(type as 'u32').bitLength() as BitLength;
|
||||
} catch (error) {
|
||||
return 32;
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@ function isValidAddress (value: string | null | undefined, isEthereum: boolean):
|
||||
}
|
||||
|
||||
function BasicAccountIdBase (props: Props): React.ReactElement<Props> {
|
||||
const { bytesLength, className = '', defaultValue: { value }, isDisabled, isError, label, onChange, withLabel } = props;
|
||||
const { bytesLength, className = '', defaultValue: { value }, isDisabled, isError, label, onChange } = props;
|
||||
const [defaultValue] = useState(() => (value as string)?.toString());
|
||||
|
||||
const _onChange = useCallback(
|
||||
@ -54,12 +54,10 @@ function BasicAccountIdBase (props: Props): React.ReactElement<Props> {
|
||||
forceIconType={bytesLength === 20 ? 'ethereum' : 'substrate'}
|
||||
isDisabled={isDisabled}
|
||||
isError={isError}
|
||||
isInput
|
||||
label={label}
|
||||
noConvert
|
||||
onChange={_onChange}
|
||||
placeholder={bytesLength === 20 ? '0x1...' : '5...'}
|
||||
withLabel={withLabel}
|
||||
/>
|
||||
</Bare>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user