(null);
@@ -43,6 +52,8 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
const [isForgetOpen, toggleForget] = useToggle();
const [isIdentityOpen, toggleIdentity] = useToggle();
const [isPasswordOpen, togglePassword] = useToggle();
+ const [isRecoverAccountOpen, toggleRecoverAccount] = useToggle();
+ const [isRecoverSetupOpen, toggleRecoverSetup] = useToggle();
const [isSettingsOpen, toggleSettings] = useToggle();
const [isTransferOpen, toggleTransfer] = useToggle();
@@ -51,7 +62,7 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
useEffect((): void => {
const { identity, nickname } = info || {};
- if (api.api.query.identity?.identityOf) {
+ if (api.api.query.identity && api.api.query.identity.identityOf) {
if (identity?.display) {
setAccName(identity.display);
}
@@ -63,14 +74,14 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
useEffect((): void => {
const account = keyring.getAccount(address);
- setGenesisHash((account && account.meta.genesisHash) || null);
+ setGenesisHash(account?.meta.genesisHash || null);
setFlags({
- isDevelopment: (account && account.meta.isTesting) || false,
+ isDevelopment: account?.meta.isTesting || false,
isEditable: (account && !(account.meta.isInjected || account.meta.isHardware)) || false,
- isExternal: (account && account.meta.isExternal) || false
+ isExternal: account?.meta.isExternal || false
});
- _setTags(account?.meta?.tags || []);
- setAccName(account?.meta?.name || '');
+ _setTags(account?.meta.tags || []);
+ setAccName(account?.meta.name || '');
}, [address]);
useEffect((): void => {
@@ -158,6 +169,46 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
onClick={_onFavorite}
/>
+
+ {recoveryInfo && (
+
+ {t('This account is recoverable, with the following friends:')}
+
+ {recoveryInfo.friends.map((friend, index): React.ReactNode => (
+
+
+
+
+ {t('threshold')}
+ {formatNumber(recoveryInfo.threshold)}
+
+
+ {t('delay')}
+ {formatNumber(recoveryInfo.delayPeriod)}
+
+
+ {t('deposit')}
+ {formatBalance(recoveryInfo.deposit)}
+
+
+
+
+ }
+ info={
{isEditingTags
@@ -321,6 +386,19 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
>
{t('Forget this account')}
+ {api.api.tx.recovery?.createRecovery && (
+ <>
+
+ {t('Make recoverable')}
+
+ )}
+
+ {t('Initiate recovery for another')}
+
+
+ )}
{!api.isDevelopment && (
<>
({ address, isFavorite: favorites.includes(address) }))
+ .sort((a, b): number => {
+ const accA = keyring.getAccount(a.address) as KeyringAddress;
+ const accB = keyring.getAccount(b.address) as KeyringAddress;
+
+ return (accA.meta.whenCreated || 0) - (accB.meta.whenCreated || 0);
+ })
.sort((a, b): number =>
a.isFavorite === b.isFavorite
? 0
@@ -122,6 +129,7 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement
(['vanity']);
+ const items = useMemo(() => [
+ {
+ isRoot: true,
+ name: 'overview',
+ text: t('My accounts')
+ },
+ {
+ name: 'vanity',
+ text: t('Vanity address')
+ }
+ ], [t]);
useEffect((): void => {
setHidden(
@@ -42,17 +53,7 @@ export default function AccountsApp ({ basePath, onStatusChange }: Props): React
diff --git a/packages/app-accounts/src/modals/Backup.tsx b/packages/app-accounts/src/modals/Backup.tsx
index e3a5127e0b22..a686dfbed7a2 100644
--- a/packages/app-accounts/src/modals/Backup.tsx
+++ b/packages/app-accounts/src/modals/Backup.tsx
@@ -16,12 +16,6 @@ interface Props extends BareProps {
address: string;
}
-interface ButtonsProps {
- doBackup: () => void;
- isPassValid: boolean;
- onClose: () => void;
-}
-
interface ContentProps {
address: string;
doBackup: () => void;
@@ -68,7 +62,6 @@ export default function ({ address, onClose }: Props): React.ReactElement
password={password}
onChangePass={_onChangePass}
/>
-
+
);
}
@@ -114,27 +110,3 @@ function Content ({ address, doBackup, isPassTouched, isPassValid, onChangePass,
);
}
-
-function Buttons ({ doBackup, isPassValid, onClose }: ButtonsProps): React.ReactElement {
- const { t } = useTranslation();
-
- return (
-
-
-
-
- );
-}
diff --git a/packages/app-accounts/src/modals/ChangeOperator.tsx b/packages/app-accounts/src/modals/ChangeOperator.tsx
index 171bad851577..a868a4538a07 100644
--- a/packages/app-accounts/src/modals/ChangeOperator.tsx
+++ b/packages/app-accounts/src/modals/ChangeOperator.tsx
@@ -8,7 +8,7 @@ import { I18nProps } from '@polkadot/react-components/types';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
-import { AddressMini, Button, Toggle, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { AddressMini, Toggle, InputAddress, Modal, TxButton } from '@polkadot/react-components';
import { useApi } from '@polkadot/react-hooks';
import { registry } from '@polkadot/react-api';
import { Available } from '@polkadot/react-query';
@@ -168,26 +168,17 @@ function ChangeOperator ({ className, onClose, recipientId: propRecipientId, sen
/>
-
-
-
+
+
);
diff --git a/packages/app-accounts/src/modals/ChangePass.tsx b/packages/app-accounts/src/modals/ChangePass.tsx
index 54b316034669..eb641ec65c95 100644
--- a/packages/app-accounts/src/modals/ChangePass.tsx
+++ b/packages/app-accounts/src/modals/ChangePass.tsx
@@ -38,7 +38,6 @@ class ChangePass extends TxComponent {
{this.renderContent()}
{this.renderButtons()}
@@ -51,24 +50,15 @@ class ChangePass extends TxComponent {
const { isNewValid, isOldValid } = this.state;
return (
-
-
-
+
+
);
}
diff --git a/packages/app-accounts/src/modals/Create.tsx b/packages/app-accounts/src/modals/Create.tsx
index 33cd17729f80..91568e2b82a1 100644
--- a/packages/app-accounts/src/modals/Create.tsx
+++ b/packages/app-accounts/src/modals/Create.tsx
@@ -8,7 +8,7 @@ import { KeypairType } from '@polkadot/util-crypto/types';
import { ModalProps } from '../types';
import FileSaver from 'file-saver';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
import styled from 'styled-components';
import { DEV_PHRASE } from '@polkadot/keyring/defaults';
import { AddressRow, Button, Dropdown, Input, InputAddress, Modal, Password } from '@polkadot/react-components';
@@ -39,6 +39,12 @@ interface AddressState {
seedType: SeedType;
}
+interface CreateOptions {
+ genesisHash?: string;
+ name: string;
+ tags?: string[];
+}
+
const DEFAULT_PAIR_TYPE = 'sr25519';
function deriveValidate (seed: string, derivePath: string, pairType: KeypairType): string | null {
@@ -129,12 +135,12 @@ export function downloadAccount ({ json, pair }: CreateResult): void {
InputAddress.setLastValue('account', pair.address);
}
-function createAccount (suri: string, pairType: KeypairType, name: string, password: string, success: string): ActionStatus {
+function createAccount (suri: string, pairType: KeypairType, { genesisHash, name, tags = [] }: CreateOptions, password: string, success: string): ActionStatus {
// we will fill in all the details below
const status = { action: 'create' } as ActionStatus;
try {
- const result = keyring.addUri(suri, password, { name: name.trim(), tags: [] }, pairType);
+ const result = keyring.addUri(suri, password, { genesisHash, name, tags }, pairType);
const { address } = result.pair;
status.account = address;
@@ -152,12 +158,20 @@ function createAccount (suri: string, pairType: KeypairType, name: string, passw
function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: propsType }: Props): React.ReactElement {
const { t } = useTranslation();
- const { isDevelopment } = useApi();
+ const { api, isDevelopment } = useApi();
const [{ address, deriveError, derivePath, isSeedValid, pairType, seed, seedType }, setAddress] = useState(generateSeed(propsSeed, '', propsSeed ? 'raw' : 'bip', propsType));
const [isConfirmationOpen, setIsConfirmationOpen] = useState(false);
const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
const [{ isPassValid, password }, setPassword] = useState({ isPassValid: false, password: '' });
const isValid = !!address && !deriveError && isNameValid && isPassValid && isSeedValid;
+ const seedOpt = useMemo(() => (
+ isDevelopment
+ ? [{ value: 'dev', text: t('Development') }]
+ : []
+ ).concat(
+ { value: 'bip', text: t('Mnemonic') },
+ { value: 'raw', text: t('Raw seed') }
+ ), [isDevelopment, t]);
const _onChangePass = (password: string): void =>
setPassword({ isPassValid: keyring.isPassValid(password), password });
@@ -180,7 +194,8 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
return;
}
- const status = createAccount(`${seed}${derivePath}`, pairType, name, password, t('created account'));
+ const options = { genesisHash: isDevelopment ? undefined : api.genesisHash.toString(), name: name.trim() };
+ const status = createAccount(`${seed}${derivePath}`, pairType, options, password, t('created account'));
_toggleConfirmation();
onStatusChange(status);
@@ -191,7 +206,6 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
{address && isConfirmationOpen && (
-
-
-
+
+
);
diff --git a/packages/app-accounts/src/modals/CreateConfirmation.tsx b/packages/app-accounts/src/modals/CreateConfirmation.tsx
index 7b0914ec3f89..72409b545980 100644
--- a/packages/app-accounts/src/modals/CreateConfirmation.tsx
+++ b/packages/app-accounts/src/modals/CreateConfirmation.tsx
@@ -18,10 +18,7 @@ export default function CreateConfirmation ({ address, name, onClose, onCommit }
const { t } = useTranslation();
return (
-
+
{t('Please make sure to save this file in a secure location as it is required, together with your password, to restore your account.')}
-
-
-
+
+
);
diff --git a/packages/app-accounts/src/modals/Derive.tsx b/packages/app-accounts/src/modals/Derive.tsx
index 6c78251b66db..4bfc41cea427 100644
--- a/packages/app-accounts/src/modals/Derive.tsx
+++ b/packages/app-accounts/src/modals/Derive.tsx
@@ -138,7 +138,6 @@ export default function Derive ({ className, from, onClose }: Props): React.Reac
{address && isConfirmationOpen && (
)}
-
-
-
+
+ {isLocked
+ ? (
+
);
diff --git a/packages/app-accounts/src/modals/Identity.tsx b/packages/app-accounts/src/modals/Identity.tsx
index 66caf5f26d94..96032daf189c 100644
--- a/packages/app-accounts/src/modals/Identity.tsx
+++ b/packages/app-accounts/src/modals/Identity.tsx
@@ -6,7 +6,7 @@ import { Registration } from '@polkadot/types/interfaces';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
-import { Button, Input, Modal, Toggle, TxButton } from '@polkadot/react-components';
+import { Input, Modal, Toggle, TxButton } from '@polkadot/react-components';
import { getAddressMeta } from '@polkadot/react-components/util';
import { useApi, useCall } from '@polkadot/react-hooks';
import { Data, Option } from '@polkadot/types';
@@ -63,6 +63,7 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement({ errPgp: true, valPgp: '' });
const [valRiot, setValRiot] = useState('');
+ const [valTwitter, setValTwitter] = useState('');
const [valWeb, setValWeb] = useState('');
useEffect((): void => {
@@ -80,6 +82,7 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement
+
-
-
-
+
+
);
diff --git a/packages/app-accounts/src/modals/Import.tsx b/packages/app-accounts/src/modals/Import.tsx
index 4e8730798c3b..a7ea5eb7a9fb 100644
--- a/packages/app-accounts/src/modals/Import.tsx
+++ b/packages/app-accounts/src/modals/Import.tsx
@@ -38,29 +38,17 @@ class Import extends TxComponent {
const { isFileValid, isPassValid } = this.state;
return (
-
+
{this.renderInput()}
-
-
-
+
+
);
diff --git a/packages/app-accounts/src/modals/Offer.tsx b/packages/app-accounts/src/modals/Offer.tsx
new file mode 100644
index 000000000000..0b3df2ba130b
--- /dev/null
+++ b/packages/app-accounts/src/modals/Offer.tsx
@@ -0,0 +1,230 @@
+/* eslint-disable @typescript-eslint/camelcase */
+// Copyright 2017-2020 @polkadot/app-accounts authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
+import { I18nProps } from '@polkadot/react-components/types';
+
+import BN from 'bn.js';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { AddressMini, Toggle, InputAddress, InputNumber, Modal, TxButton, InputBalance } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
+import { registry } from '@polkadot/react-api';
+import { Available } from '@polkadot/react-query';
+import { Vec } from '@polkadot/types';
+
+import translate from '../translate';
+import AccountId from '@polkadot/types/primitive/Generic/AccountId';
+import { Codec } from '@polkadot/types/types';
+
+const Candidates = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ .candidate {
+ border: 1px solid #eee;
+ border-radius: 0.25rem;
+ margin: 0.25rem;
+ padding-bottom: 0.25rem;
+ padding-right: 0.5rem;
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ border-color: transparent;
+ border-style: solid;
+ border-radius: 0.25em;
+ border-width: 0.25em;
+ }
+
+ &.isAye {
+ background: #fff;
+ border-color: #ccc;
+ }
+
+ &.member::after {
+ border-color: green;
+ }
+
+ &.runnerup::after {
+ border-color: steelblue;
+ }
+
+ .ui--AddressMini-icon {
+ z-index: 1;
+ }
+
+ .candidate-right {
+ text-align: right;
+ }
+ }
+`;
+
+interface Props extends I18nProps {
+ className?: string;
+ onClose: () => void;
+ buyerId?: string;
+ senderId?: string;
+}
+
+function Offer ({ className, onClose, senderId: propSenderId, buyerId: propBuyerId, t }: Props): React.ReactElement {
+ const { api } = useApi();
+ const [extrinsic, setExtrinsic] = useState(null);
+ const [hasAvailable, setHasAvailable] = useState(true);
+ const [buyerId, setBuyerId] = useState(propBuyerId || null);
+ const [contracts, setContracts] = useState([]);
+ const [selects, setSelects] = useState>(
+ contracts.reduce((obj, contract): Record => Object.assign(obj, { [contract]: false }), {}));
+ const [senderId, setSenderId] = useState(propSenderId || null);
+
+ const [amount, setAmount] = useState(new BN(0));
+ const [expired, setExpired] = useState();
+
+ const onOffer = (accountId: string | null): void => {
+ setSenderId(accountId);
+ if (accountId) {
+ api.query.operator
+ .operatorHasContracts(accountId as any)
+ .then((contracts): void => {
+ const contractList: string[] = contracts.map((c): string => c.toString());
+ setContracts(contractList);
+ setSelects(contractList.reduce((obj, contract): Record => Object.assign(obj, { [contract]: false }), {}));
+ });
+ }
+ };
+
+ const onChangeContracts = (accountId: string): (isChecked: boolean) => void =>
+ (isChecked: boolean): void => {
+ setSelects({ ...selects, [accountId]: isChecked });
+ };
+
+ useEffect((): void => {
+ const _ok = Object.values(selects).some((select): boolean => select);
+ if (buyerId && senderId && _ok) {
+ setExtrinsic(api.tx.trading.offer(
+ senderId,
+ new Vec(registry, AccountId,
+ Object.entries(selects).filter(([, select]): boolean => select).map(([contractId]): string => contractId)),
+ amount,
+ expired));
+ setHasAvailable(true);
+ } else {
+ setHasAvailable(false);
+ }
+ }, [selects, senderId, buyerId]);
+
+ const transferrable = {t('transferrable')} ;
+
+ return (
+
+ {t('Offer')}
+
+
+
}
+ onChange={setBuyerId}
+ type='account'
+ />
+
+ {contracts.map((contractId): React.ReactNode => {
+ const key = contractId.toString();
+ const isAye = selects[key] || false;
+ return (
+
+
+
+
+ );
+ })}
+
+
}
+ onChange={onOffer}
+ type='allPlus'
+ />
+
+
+
+
+
+
+ );
+}
+
+export default translate(
+ styled(Offer)`
+ article.padded {
+ box-shadow: none;
+ margin-left: 2rem;
+ }
+
+ .balance {
+ margin-bottom: 0.5rem;
+ text-align: right;
+ padding-right: 1rem;
+
+ .label {
+ opacity: 0.7;
+ }
+ }
+
+ label.with-help {
+ flex-basis: 10rem;
+ }
+ `
+);
diff --git a/packages/app-accounts/src/modals/Qr.tsx b/packages/app-accounts/src/modals/Qr.tsx
index 593ef76fee05..fd13dc65321d 100644
--- a/packages/app-accounts/src/modals/Qr.tsx
+++ b/packages/app-accounts/src/modals/Qr.tsx
@@ -15,6 +15,7 @@ import { useTranslation } from '../translate';
interface Scanned {
address: string;
genesisHash: string;
+ name?: string;
}
interface Props extends ModalProps {
@@ -27,6 +28,13 @@ function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactEle
const [scanned, setScanned] = useState(null);
const _onNameChange = (name: string): void => setName({ isNameValid: !!name.trim(), name });
+ const _onScan = (scanned: Scanned): void => {
+ setScanned(scanned);
+
+ if (scanned.name) {
+ _onNameChange(scanned.name);
+ }
+ };
const _onSave = (): void => {
if (!scanned || !isNameValid) {
return;
@@ -50,7 +58,6 @@ function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactEle
{
@@ -76,28 +83,19 @@ function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactEle
)
: (
-
)
}
-
-
-
+
+
);
diff --git a/packages/app-accounts/src/modals/RecoverAccount.tsx b/packages/app-accounts/src/modals/RecoverAccount.tsx
new file mode 100644
index 000000000000..13df51df3a03
--- /dev/null
+++ b/packages/app-accounts/src/modals/RecoverAccount.tsx
@@ -0,0 +1,51 @@
+// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React, { useState } from 'react';
+import { InputAddress, Modal, TxButton } from '@polkadot/react-components';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+ address: string;
+ className?: string;
+ onClose: () => void;
+}
+
+export default function RecoverAccount ({ address, className, onClose }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const [recover, setRecover] = useState(null);
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/packages/app-accounts/src/modals/RecoverSetup.tsx b/packages/app-accounts/src/modals/RecoverSetup.tsx
new file mode 100644
index 000000000000..26a0b70885d0
--- /dev/null
+++ b/packages/app-accounts/src/modals/RecoverSetup.tsx
@@ -0,0 +1,87 @@
+// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import BN from 'bn.js';
+import React, { useEffect, useState } from 'react';
+import { InputAddressMulti, InputAddress, InputNumber, Modal, TxButton } from '@polkadot/react-components';
+import { useAccounts, useAddresses } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+ address: string;
+ className?: string;
+ onClose: () => void;
+}
+
+const MAX_HELPERS = 16;
+
+export default function RecoverSetup ({ address, className, onClose }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const { allAccounts } = useAccounts();
+ const { allAddresses } = useAddresses();
+ const [availableHelpers, setAvailableHelpers] = useState([]);
+ const [delay, setDelay] = useState();
+ const [helpers, setHelpers] = useState([]);
+ const [threshold, setThreshold] = useState();
+
+ useEffect((): void => {
+ if (allAccounts && allAddresses) {
+ setAvailableHelpers(
+ [...allAccounts, ...allAddresses].filter((a): boolean => a !== address)
+ );
+ }
+ }, [address, allAccounts, allAddresses]);
+
+ const isErrorDelay = !delay;
+ const isErrorHelpers = !helpers.length;
+ const isErrorThreshold = !threshold || !threshold.gtn(0) || threshold.gtn(helpers.length);
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/packages/app-accounts/src/modals/SessionKey.tsx b/packages/app-accounts/src/modals/SessionKey.tsx
index ed175663c83a..618d8d870839 100644
--- a/packages/app-accounts/src/modals/SessionKey.tsx
+++ b/packages/app-accounts/src/modals/SessionKey.tsx
@@ -30,7 +30,7 @@ function SetSessionKey ({ className, senderId: propSenderId, onClose, t }: Props
useEffect((): void => {
if (!!keys && /^0x[0-9a-f]+$/i.test(keys)) {
try {
- setExtrinsic(api.tx.session.setKeys(keys, EMPTY_PROOF));
+ setExtrinsic(api.tx.session.setKeys(keys as any, EMPTY_PROOF as any));
setHasError(false);
} catch {
setHasError(true);
@@ -67,7 +67,7 @@ function SetSessionKey ({ className, senderId: propSenderId, onClose, t }: Props
/>
-
+
@@ -110,8 +109,10 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
type='allPlus'
/>
-
-
-
+
+
);
diff --git a/packages/app-address-book/package.json b/packages/app-address-book/package.json
index 5b820620e421..d499840cc20e 100644
--- a/packages/app-address-book/package.json
+++ b/packages/app-address-book/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-address-book",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"main": "index.js",
"repository": "https://github.com/polkadot-js/apps.git",
"author": "Jaco Greeff ",
@@ -10,7 +10,7 @@
"contributors": [],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-address-book/src/Address.tsx b/packages/app-address-book/src/Address.tsx
index 5e44e0868b4f..6ebbabca7ba2 100644
--- a/packages/app-address-book/src/Address.tsx
+++ b/packages/app-address-book/src/Address.tsx
@@ -49,7 +49,7 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
useEffect((): void => {
const { identity, nickname } = info || {};
- if (api.api.query.identity?.identityOf) {
+ if (api.api.query.identity && api.api.query.identity.identityOf) {
if (identity?.display) {
setAccName(identity.display);
}
diff --git a/packages/app-address-book/src/Overview.tsx b/packages/app-address-book/src/Overview.tsx
index b0a52a4198bd..4548f08a60b7 100644
--- a/packages/app-address-book/src/Overview.tsx
+++ b/packages/app-address-book/src/Overview.tsx
@@ -62,6 +62,7 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement
);
diff --git a/packages/app-address-book/src/index.tsx b/packages/app-address-book/src/index.tsx
index 495e456c7111..568aa89017f5 100644
--- a/packages/app-address-book/src/index.tsx
+++ b/packages/app-address-book/src/index.tsx
@@ -5,7 +5,7 @@
import { AppProps } from '@polkadot/react-components/types';
import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import React from 'react';
+import React, { useMemo } from 'react';
import { Route, Switch } from 'react-router';
import { HelpOverlay } from '@polkadot/react-components';
import Tabs from '@polkadot/react-components/Tabs';
@@ -21,6 +21,13 @@ interface Props extends AppProps {
export default function AddressBookApp ({ basePath, onStatusChange }: Props): React.ReactElement {
const { t } = useTranslation();
+ const items = useMemo(() => [
+ {
+ isRoot: true,
+ name: 'overview',
+ text: t('My contacts')
+ }
+ ], [t]);
return (
@@ -28,13 +35,7 @@ export default function AddressBookApp ({ basePath, onStatusChange }: Props): Re
diff --git a/packages/app-address-book/src/modals/Create.tsx b/packages/app-address-book/src/modals/Create.tsx
index 88037d8f1d54..2d5391a30468 100644
--- a/packages/app-address-book/src/modals/Create.tsx
+++ b/packages/app-address-book/src/modals/Create.tsx
@@ -75,10 +75,7 @@ export default function Create ({ onClose, onStatusChange }: Props): React.React
};
return (
-
+
-
-
-
+
+
);
diff --git a/packages/app-claims/package.json b/packages/app-claims/package.json
index 8d35d683e246..d3faf44186c0 100644
--- a/packages/app-claims/package.json
+++ b/packages/app-claims/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-claims",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"description": "An app for claiming Polkadot tokens",
"main": "index.js",
"scripts": {},
@@ -11,7 +11,8 @@
],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11",
+ "secp256k1": "^3.8.0"
}
}
diff --git a/packages/app-claims/src/Claim.tsx b/packages/app-claims/src/Claim.tsx
index 1b573774132c..77f20412a196 100644
--- a/packages/app-claims/src/Claim.tsx
+++ b/packages/app-claims/src/Claim.tsx
@@ -4,7 +4,6 @@
import { Option } from '@polkadot/types';
import { BalanceOf, EthereumAddress } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
@@ -12,15 +11,17 @@ import { Button, Card } from '@polkadot/react-components';
import { useApi } from '@polkadot/react-hooks';
import { FormatBalance } from '@polkadot/react-query';
-import translate from './translate';
+import { useTranslation } from './translate';
import { addrToChecksum } from './util';
-interface Props extends I18nProps {
+interface Props {
button: React.ReactNode;
+ className?: string;
ethereumAddress: EthereumAddress | null;
}
-function Claim ({ button, className, ethereumAddress, t }: Props): React.ReactElement | null {
+function Claim ({ button, className, ethereumAddress }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const { api } = useApi();
const [claimValue, setClaimValue] = useState(null);
const [claimAddress, setClaimAddress] = useState(null);
@@ -77,31 +78,29 @@ function Claim ({ button, className, ethereumAddress, t }: Props): React.ReactEl
);
}
-export default translate(
- styled(Claim)`
- font-size: 1.15rem;
- display: flex;
- flex-direction: column;
- justify-content: center;
- min-height: 12rem;
- align-items: center;
- margin: 0 1rem;
+export default styled(Claim)`
+ font-size: 1.15rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ min-height: 12rem;
+ align-items: center;
+ margin: 0 1rem;
- h3 {
- font-family: monospace;
- font-size: 1.5rem;
- max-width: 100%;
- margin: 0.5rem;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
+ h3 {
+ font-family: monospace;
+ font-size: 1.5rem;
+ max-width: 100%;
+ margin: 0.5rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
- h2 {
- margin: 0.5rem 0 2rem;
- font-family: monospace;
- font-size: 2.5rem;
- font-weight: 200;
- }
- `
-);
+ h2 {
+ margin: 0.5rem 0 2rem;
+ font-family: monospace;
+ font-size: 2.5rem;
+ font-weight: 200;
+ }
+`;
diff --git a/packages/app-claims/src/translate.ts b/packages/app-claims/src/translate.ts
index 0f305e89edd3..7fd3ffee7377 100644
--- a/packages/app-claims/src/translate.ts
+++ b/packages/app-claims/src/translate.ts
@@ -1,4 +1,4 @@
-// Copyright 2017-2020 @polkadot/app-123code authors & contributors
+// Copyright 2017-2020 @polkadot/app-claims authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
diff --git a/packages/app-claims/src/util.spec.ts b/packages/app-claims/src/util.spec.ts
index 48c503320d33..fa31a72004b9 100644
--- a/packages/app-claims/src/util.spec.ts
+++ b/packages/app-claims/src/util.spec.ts
@@ -4,10 +4,10 @@
import { hexToU8a } from '@polkadot/util';
-import { publicToAddr } from './util';
+import { publicToAddr, recoverFromJSON } from './util';
-describe('publicToAddr', (): void => {
- it('converts a publicKey to address', (): void => {
+describe('util', (): void => {
+ it('converts a publicKey to address via publicToAddr', (): void => {
expect(
publicToAddr(
hexToU8a(
@@ -16,4 +16,10 @@ describe('publicToAddr', (): void => {
)
).toEqual('0x0BED7ABd61247635c1973eB38474A2516eD1D884');
});
+
+ it('converts to valid signature via recoverFromJSON', (): void => {
+ expect(
+ JSON.stringify(recoverFromJSON('{"address":"0x002309df96687e44280bb72c3818358faeeb699c","msg":"Pay KSMs to the Kusama account:88dc3417d5058ec4b4503e0c12ea1a0a89be200fe98922423d4334014fa6b0ee","sig":"0x55bd020bdbbdc02de34e915effc9b18a99002f4c29f64e22e8dcbb69e722ea6c28e1bb53b9484063fbbfd205e49dcc1f620929f520c9c4c3695150f05a28f52a01","version":"2"}'))
+ ).toEqual('{"error":null,"ethereumAddress":"0x002309df96687e44280bb72c3818358faeeb699c","signature":"0x55bd020bdbbdc02de34e915effc9b18a99002f4c29f64e22e8dcbb69e722ea6c28e1bb53b9484063fbbfd205e49dcc1f620929f520c9c4c3695150f05a28f52a01"}');
+ });
});
diff --git a/packages/app-contracts/package.json b/packages/app-contracts/package.json
index 098f6b3ff91b..9a33910c2bed 100644
--- a/packages/app-contracts/package.json
+++ b/packages/app-contracts/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-contracts",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"description": "Deployment and management of substrate contracts",
"main": "index.js",
"scripts": {},
@@ -10,7 +10,7 @@
],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/api-contract": "^0.100.0-beta.27"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/api-contract": "^1.1.0-beta.20"
}
}
diff --git a/packages/app-contracts/src/Codes/Add.tsx b/packages/app-contracts/src/Codes/Add.tsx
index d07ff00a6c82..07663b413fa5 100644
--- a/packages/app-contracts/src/Codes/Add.tsx
+++ b/packages/app-contracts/src/Codes/Add.tsx
@@ -63,17 +63,14 @@ class Add extends ContractModal {
const isValid = !isBusy && isCodeValid && isNameValid;
return (
-
- {this.renderCancelButton()}
-
+ {
const isValid = !isBusy && accountId && isNameValid && isWasmValid && !gasLimit.isZero() && !!accountId;
return (
-
- {this.renderCancelButton()}
-
+ {
const isValid = isNameValid && isAddressValid && isAbiValid;
return (
-
- {this.renderCancelButton()}
-
+ | null {
- const { className, isOpen, callContract, callMessageIndex, onChangeCallContractAddress, onChangeCallMessageIndex, onClose, t } = props;
+ const { t } = useTranslation();
+ const { className, isOpen, callContract, callMessageIndex, onChangeCallContractAddress, onChangeCallMessageIndex, onClose } = props;
if (isNull(callContract) || isNull(callMessageIndex)) {
return null;
@@ -198,12 +196,7 @@ function Call (props: Props): React.ReactElement | null {
/>
)}
- | null {
onSuccess={_toggleBusy}
params={_constructTx}
tx={api.tx.contracts ? 'contracts.call' : 'contract.call'}
+ withSpinner
/>
)
}
@@ -258,17 +252,14 @@ function Call (props: Props): React.ReactElement | null {
);
}
-export default withMulti(
- styled(Call)`
- .rpc-toggle {
- margin-top: 1rem;
- display: flex;
- justify-content: flex-end;
- }
+export default styled(Call)`
+ .rpc-toggle {
+ margin-top: 1rem;
+ display: flex;
+ justify-content: flex-end;
+ }
- .clear-all {
- float: right;
- }
- `,
- translate
-);
+ .clear-all {
+ float: right;
+ }
+`;
diff --git a/packages/app-contracts/src/Contracts/Contract.tsx b/packages/app-contracts/src/Contracts/Contract.tsx
index 442dd82960b7..69c50282222f 100644
--- a/packages/app-contracts/src/Contracts/Contract.tsx
+++ b/packages/app-contracts/src/Contracts/Contract.tsx
@@ -3,7 +3,6 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { I18nProps } from '@polkadot/react-components/types';
import React, { useState } from 'react';
import styled from 'styled-components';
@@ -13,9 +12,9 @@ import keyring from '@polkadot/ui-keyring';
import { PromiseContract as ApiContract } from '@polkadot/api-contract';
import { AddressRow, Button, Card, Forget, Messages } from '@polkadot/react-components';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps, RouteComponentProps {
+interface Props extends RouteComponentProps {
basePath: string;
contract: ApiContract;
onCall: (_?: number) => () => void;
@@ -29,7 +28,8 @@ const ContractCard = styled(Card)`
`;
function Contract (props: Props): React.ReactElement | null {
- const { contract: { abi, address }, onCall, t } = props;
+ const { t } = useTranslation();
+ const { contract: { abi, address }, onCall } = props;
if (!address || !abi) {
return null;
@@ -114,4 +114,4 @@ function Contract (props: Props): React.ReactElement | null {
);
}
-export default translate(withRouter(Contract));
+export default withRouter(Contract);
diff --git a/packages/app-contracts/src/Contracts/ValidateAddr.tsx b/packages/app-contracts/src/Contracts/ValidateAddr.tsx
index 779dd6724f53..b0065dac1d2e 100644
--- a/packages/app-contracts/src/Contracts/ValidateAddr.tsx
+++ b/packages/app-contracts/src/Contracts/ValidateAddr.tsx
@@ -1,27 +1,26 @@
-/* eslint-disable @typescript-eslint/camelcase */
// Copyright 2017-2020 @polkadot/app-contracts authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { ContractInfo } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
-import { ApiProps } from '@polkadot/react-api/types';
import React, { useEffect, useState } from 'react';
import { Option } from '@polkadot/types';
-import { withCalls } from '@polkadot/react-api/hoc';
+import { useApi, useCall } from '@polkadot/react-hooks';
import { InfoForInput } from '@polkadot/react-components';
import keyring from '@polkadot/ui-keyring';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends ApiProps, I18nProps {
+interface Props {
address?: string | null;
- contracts_contractInfoOf?: Option;
onChange: (isValid: boolean) => void;
}
-function ValidateAddr ({ address, contracts_contractInfoOf, onChange, t }: Props): React.ReactElement | null {
+export default function ValidateAddr ({ address, onChange }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
+ const { api } = useApi();
+ const contractInfo = useCall>(api.query.contracts.contractInfoOf, [address]);
const [isAddress, setIsAddress] = useState(false);
const [isStored, setIsStored] = useState(false);
@@ -35,8 +34,8 @@ function ValidateAddr ({ address, contracts_contractInfoOf, onChange, t }: Props
}, [address]);
useEffect((): void => {
- setIsStored(!!contracts_contractInfoOf && contracts_contractInfoOf.isSome);
- }, [contracts_contractInfoOf]);
+ setIsStored(!!contractInfo?.isSome);
+ }, [contractInfo]);
useEffect((): void => {
onChange(isAddress && isStored);
@@ -48,20 +47,10 @@ function ValidateAddr ({ address, contracts_contractInfoOf, onChange, t }: Props
return (
- {
- isAddress
- ? t('Unable to find deployed contract code at the specified address')
- : t('The value is not in a valid address format')
+ {isAddress
+ ? t('Unable to find deployed contract code at the specified address')
+ : t('The value is not in a valid address format')
}
);
}
-
-export default translate(
- withCalls(
- ['query.contracts.contractInfoOf', {
- fallbacks: ['query.contract.contractInfoOf'],
- paramName: 'address'
- }]
- )(ValidateAddr)
-);
diff --git a/packages/app-contracts/src/Contracts/index.tsx b/packages/app-contracts/src/Contracts/index.tsx
index de646bc8264b..104b409ec862 100644
--- a/packages/app-contracts/src/Contracts/index.tsx
+++ b/packages/app-contracts/src/Contracts/index.tsx
@@ -2,42 +2,40 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps, StringOrNull } from '@polkadot/react-components/types';
-import { ComponentProps } from '../types';
+import { StringOrNull } from '@polkadot/react-components/types';
+import { ComponentProps as Props } from '../types';
import React, { useState, useEffect } from 'react';
+import { ApiPromise } from '@polkadot/api';
import { PromiseContract as ApiContract } from '@polkadot/api-contract';
-import { withApi, withMulti } from '@polkadot/react-api/hoc';
import { Button, CardGrid } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
-import translate from '../translate';
+import { useTranslation } from '../translate';
import Add from './Add';
import ContractCard from './Contract';
import Call from './Call';
import { getContractForAddress } from './util';
-interface Props extends ComponentProps, I18nProps, ApiProps {}
-
-function filterContracts ({ api, accounts, contracts: keyringContracts }: Props): ApiContract[] {
+function filterContracts (api: ApiPromise, { accounts, contracts: keyringContracts }: Props): ApiContract[] {
return accounts && keyringContracts && Object.keys(keyringContracts)
.map((address): ApiContract | null => getContractForAddress(api, address))
.filter((contract: ApiContract | null): boolean => !!contract) as ApiContract[];
}
-function Contracts (props: Props): React.ReactElement {
- const { accounts, basePath, contracts: keyringContracts, hasCode, showDeploy, t } = props;
- // const { callAddress, callMessage, isAddOpen, isCallOpen } = this.state;
-
- const [contracts, setContracts] = useState(filterContracts(props));
+export default function Contracts (props: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const { api } = useApi();
+ const { accounts, basePath, contracts: keyringContracts, hasCode, showDeploy } = props;
+ const [contracts, setContracts] = useState(filterContracts(api, props));
const [callContractIndex, setCallContractIndex] = useState(0);
const [callMessageIndex, setCallMessageIndex] = useState(0);
const [isAddOpen, setIsAddOpen] = useState(false);
const [isCallOpen, setIsCallOpen] = useState(false);
useEffect((): void => {
- setContracts(filterContracts(props));
- }, [accounts, keyringContracts]);
+ setContracts(filterContracts(api, props));
+ }, [accounts, api, keyringContracts]);
let callContract = contracts[callContractIndex] || null;
@@ -97,16 +95,14 @@ function Contracts (props: Props): React.ReactElement {
}
>
- {contracts.map((contract: ApiContract, index): React.ReactNode => {
- return (
- {
);
}
-
-export default withMulti(
- Contracts,
- translate,
- withApi
-);
diff --git a/packages/app-contracts/src/Deploy.tsx b/packages/app-contracts/src/Deploy.tsx
index 907a5e22f70f..3d4f9d4057dc 100644
--- a/packages/app-contracts/src/Deploy.tsx
+++ b/packages/app-contracts/src/Deploy.tsx
@@ -14,7 +14,7 @@ import { SubmittableResult } from '@polkadot/api';
import { Abi } from '@polkadot/api-contract';
import { withApi, withMulti } from '@polkadot/react-api/hoc';
import keyring from '@polkadot/ui-keyring';
-import { Button, Dropdown, InputBalance, MessageSignature, TxButton } from '@polkadot/react-components';
+import { Dropdown, InputBalance, MessageSignature, TxButton } from '@polkadot/react-components';
import createValues from '@polkadot/react-params/values';
import ContractModal, { ContractModalProps, ContractModalState } from './Modal';
@@ -224,28 +224,26 @@ class Deploy extends ContractModal {
const isValid = isAbiValid && isHashValid && isEndowValid && isGasValid && !!accountId && isNameValid;
return (
-
- {this.renderCancelButton()}
-
+
{this.renderContent()}
-
+
{this.renderButtons()}
@@ -157,22 +157,6 @@ class ContractModal
);
}
- protected renderCancelButton (): React.ReactNode {
- const { t } = this.props;
-
- return (
- <>
- {
+export default function RemoveABI ({ code, onClose, onRemove }: Props): React.ReactElement {
+ const { t } = useTranslation();
+
const _onRemove = (): void => {
onClose && onClose();
onRemove();
};
+
return (
{t('This operation does not impact the associated on-chain code or any of its contracts.')}
-
-
-
+
+
);
}
-
-export default translate(RemoveABI);
diff --git a/packages/app-council/package.json b/packages/app-council/package.json
index 14f97b2575eb..877ab05640d1 100644
--- a/packages/app-council/package.json
+++ b/packages/app-council/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-council",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"description": "Council",
"main": "index.js",
"scripts": {},
@@ -10,8 +10,8 @@
],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40",
- "@polkadot/react-query": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11",
+ "@polkadot/react-query": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-council/src/Motions/Motion.tsx b/packages/app-council/src/Motions/Motion.tsx
index d0e42bff5117..9cf467e608c4 100644
--- a/packages/app-council/src/Motions/Motion.tsx
+++ b/packages/app-council/src/Motions/Motion.tsx
@@ -3,21 +3,25 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { DerivedCollectiveProposal } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
-import { AddressMini, Voting } from '@polkadot/react-components';
+import { AddressMini } from '@polkadot/react-components';
import ProposalCell from '@polkadot/app-democracy/Overview/ProposalCell';
import { formatNumber } from '@polkadot/util';
-import translate from '../translate';
+import { useTranslation } from '../translate';
+import Voting from './Voting';
-interface Props extends I18nProps {
+interface Props {
+ className?: string;
isMember: boolean;
+ members: string[];
motion: DerivedCollectiveProposal;
}
-function Motion ({ className, isMember, motion: { hash, proposal, votes }, t }: Props): React.ReactElement | null {
+export default function Motion ({ className, isMember, members, motion: { hash, proposal, votes } }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
+
if (!votes) {
return null;
}
@@ -59,14 +63,12 @@ function Motion ({ className, isMember, motion: { hash, proposal, votes }, t }:
);
}
-
-export default translate(Motion);
diff --git a/packages/app-council/src/Motions/Propose.tsx b/packages/app-council/src/Motions/Propose.tsx
index f29f30728b79..4c9aa9fd5958 100644
--- a/packages/app-council/src/Motions/Propose.tsx
+++ b/packages/app-council/src/Motions/Propose.tsx
@@ -2,13 +2,13 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
+import { SubmittableExtrinsic } from '@polkadot/api/types';
import { ApiProps } from '@polkadot/react-api/types';
-import { Call, Proposal } from '@polkadot/types/interfaces';
+import { Proposal } from '@polkadot/types/interfaces';
import BN from 'bn.js';
import React from 'react';
-import { registry } from '@polkadot/react-api';
-import { withCalls, withMulti } from '@polkadot/react-api/hoc';
+import { registry, withApi, withMulti } from '@polkadot/react-api';
import { Button, Extrinsic, InputNumber } from '@polkadot/react-components';
import TxModal, { TxModalState, TxModalProps } from '@polkadot/react-components/TxModal';
import { createType } from '@polkadot/types';
@@ -17,11 +17,11 @@ import translate from '../translate';
interface Props extends TxModalProps, ApiProps {
isMember: boolean;
- memberCount: number;
+ members: string[];
}
interface State extends TxModalState {
- method: Call | null;
+ method: SubmittableExtrinsic<'promise'> | null;
threshold: BN | null;
}
@@ -32,16 +32,14 @@ class Propose extends TxModal {
this.defaultState = {
...this.defaultState,
method: null,
- threshold: props.memberCount ? new BN((props.memberCount / 2) + 1) : null
+ threshold: props.members.length ? new BN(Math.ceil(props.members.length * 0.5)) : null
};
this.state = this.defaultState;
}
- public static getDerivedStateFromProps ({ memberCount }: Props, { threshold }: State): Pick | null {
- if (!threshold && memberCount > 0) {
- const simpleMajority = new BN((memberCount / 2) + 1);
-
- return { threshold: simpleMajority };
+ public static getDerivedStateFromProps ({ members }: Props, { threshold }: State): Pick | null {
+ if (!threshold && members.length) {
+ return { threshold: new BN(Math.ceil(members.length * 0.5)) };
}
return null;
@@ -61,10 +59,10 @@ class Propose extends TxModal {
}
protected isDisabled = (): boolean => {
- const { memberCount = 0 } = this.props;
+ const { members } = this.props;
const { accountId, method, threshold } = this.state;
- const hasThreshold = !!threshold && threshold.gtn(0) && threshold.ltn(memberCount + 1);
+ const hasThreshold = !!threshold && threshold.gtn(0) && threshold.ltn(members.length + 1);
const hasMethod = !!method;
return !accountId || !hasMethod || !hasThreshold;
@@ -85,7 +83,7 @@ class Propose extends TxModal {
}
protected renderContent = (): React.ReactNode => {
- const { apiDefaultTxSudo, memberCount = 0, t } = this.props;
+ const { apiDefaultTxSudo, members, t } = this.props;
const { threshold } = this.state;
return (
@@ -94,13 +92,13 @@ class Propose extends TxModal {
className='medium'
label={t('threshold')}
help={t('The minimum number of council votes required to approve this motion')}
- isError={!threshold || threshold.eqn(0) || threshold.gtn(memberCount)}
+ isError={!threshold || threshold.eqn(0) || threshold.gtn(members.length)}
onChange={this.onChangeThreshold}
onEnter={this.sendTx}
placeholder={
t(
'Positive number between 1 and {{memberCount}}',
- { replace: { memberCount } }
+ { replace: { memberCount: members.length } }
)
}
value={threshold || new BN(0)}
@@ -116,16 +114,16 @@ class Propose extends TxModal {
}
private onChangeThreshold = (threshold: BN | null = null): void => {
- const { memberCount = 0 } = this.props;
+ const { members } = this.props;
- if (memberCount > 0 && !this.defaultState.threshold) {
- this.defaultState.threshold = new BN((memberCount / 2) + 1);
+ if (members.length && !this.defaultState.threshold) {
+ this.defaultState.threshold = new BN(Math.ceil(members.length * 0.5));
}
this.setState({ threshold });
}
- private onChangeExtrinsic = (method?: Call): void => {
+ private onChangeExtrinsic = (method?: SubmittableExtrinsic<'promise'>): void => {
if (!method) {
return;
}
@@ -135,14 +133,6 @@ class Propose extends TxModal {
}
export default withMulti(
- Propose,
- translate,
- withCalls(
- ['query.electionsPhragmen.members', {
- fallbacks: ['query.elections.members'],
- propName: 'memberCount',
- transform: (value: any[]): number =>
- value.length
- }]
- )
+ translate(Propose),
+ withApi
);
diff --git a/packages/app-council/src/Motions/Slashing.tsx b/packages/app-council/src/Motions/Slashing.tsx
index da3f7451c30b..e097f26d4ff8 100644
--- a/packages/app-council/src/Motions/Slashing.tsx
+++ b/packages/app-council/src/Motions/Slashing.tsx
@@ -2,12 +2,11 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { AccountId } from '@polkadot/types/interfaces';
import { CallFunction } from '@polkadot/types/types';
import React, { useEffect, useState } from 'react';
import { Button, Dropdown, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
-import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
+import { useApi, useToggle } from '@polkadot/react-hooks';
import { useTranslation } from '../translate';
import useAvailableSlashes from './useAvailableSlashes';
@@ -15,6 +14,7 @@ import useAvailableSlashes from './useAvailableSlashes';
interface Props {
className?: string;
isMember: boolean;
+ members: string[];
}
interface Option {
@@ -22,28 +22,16 @@ interface Option {
value: number;
}
-export default function Slashing ({ className, isMember }: Props): React.ReactElement {
+export default function Slashing ({ className, isMember, members }: Props): React.ReactElement {
const { t } = useTranslation();
const { api } = useApi();
- const members = useCall(api.query.electionsPhragmen?.members || api.query.elections.members, []);
const slashes = useAvailableSlashes();
const [isVisible, toggleVisible] = useToggle();
- const [isSelectedMember, setIsMember] = useState(false);
const [accountId, setAcountId] = useState(null);
const [proposal, setProposal] = useState(null);
const [eras, setEras] = useState([]);
const [selectedEra, setSelectedEra] = useState(0);
- const threshold = Math.ceil((members?.length || 0) * 0.75);
-
- useEffect((): void => {
- if (accountId && members) {
- setIsMember(
- members
- .map(([accountId]): string => accountId.toString())
- .includes(accountId)
- );
- }
- }, [accountId, members]);
+ const threshold = Math.ceil((members.length || 0) * 0.5);
useEffect((): void => {
if (slashes?.length) {
@@ -77,7 +65,7 @@ export default function Slashing ({ className, isMember }: Props): React.ReactEl
<>
-
-
-
+
+
)}
diff --git a/packages/app-council/src/Motions/Voting.tsx b/packages/app-council/src/Motions/Voting.tsx
new file mode 100644
index 000000000000..0c669cd78c3c
--- /dev/null
+++ b/packages/app-council/src/Motions/Voting.tsx
@@ -0,0 +1,73 @@
+// Copyright 2017-2020 @polkadot/app-council authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Hash, Proposal, ProposalIndex } from '@polkadot/types/interfaces';
+
+import React, { useState } from 'react';
+import { Button, Modal, ProposedAction, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
+import { useAccounts, useToggle } from '@polkadot/react-hooks';
+import { isBoolean } from '@polkadot/util';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+ hash: Hash;
+ idNumber: ProposalIndex;
+ isDisabled: boolean;
+ members: string[];
+ proposal: Proposal;
+}
+
+export default function Voting ({ hash, idNumber, isDisabled, members, proposal }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
+ const { hasAccounts } = useAccounts();
+ const [isVotingOpen, toggleVoting] = useToggle();
+ const [accountId, setAccountId] = useState(null);
+ const [voteValue, setVoteValue] = useState(true);
+
+ if (!hasAccounts) {
+ return null;
+ }
+
+ const _onChangeVote = (vote?: boolean): void => setVoteValue(isBoolean(vote) ? vote : true);
+
+ return (
+ <>
+ {isVotingOpen && (
+
+
+
+
+ )}
+ {
- const { api } = useApi();
- const { allAccounts } = useAccounts();
- const members = useCall<[AccountId, Balance][]>(api.query.electionsPhragmen?.members || api.query.elections.members, []);
- const [isMember, setIsMember] = useState(false);
-
- useEffect((): void => {
- if (allAccounts && members) {
- setIsMember(
- members
- .map(([accountId]): string => accountId.toString())
- .some((accountId): boolean => allAccounts.includes(accountId))
- );
- }
- }, [allAccounts, members]);
+export default function Proposals ({ className, motions }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const { isMember, members } = useCouncilMembers();
return (
-
{motions?.length
? (
@@ -50,6 +44,7 @@ function Proposals ({ className, motions, t }: Props): React.ReactElement
);
}
-
-export default translate(Proposals);
diff --git a/packages/app-council/src/Overview/Candidate.tsx b/packages/app-council/src/Overview/Candidate.tsx
index effba7836d4b..bfbc43bbc4b6 100644
--- a/packages/app-council/src/Overview/Candidate.tsx
+++ b/packages/app-council/src/Overview/Candidate.tsx
@@ -2,23 +2,24 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
import { AccountId, Balance } from '@polkadot/types/interfaces';
import React from 'react';
import { AddressSmall } from '@polkadot/react-components';
import { FormatBalance } from '@polkadot/react-query';
-import translate from '../translate';
+import { useTranslation } from '../translate';
import Voters from './Voters';
-interface Props extends I18nProps {
+interface Props {
address: AccountId;
balance?: Balance;
voters?: AccountId[];
}
-function Candidate ({ address, balance, t, voters }: Props): React.ReactElement {
+export default function Candidate ({ address, balance, voters }: Props): React.ReactElement {
+ const { t } = useTranslation();
+
return (
@@ -37,5 +38,3 @@ function Candidate ({ address, balance, t, voters }: Props): React.ReactElement<
);
}
-
-export default translate(Candidate);
diff --git a/packages/app-council/src/Overview/Candidates.tsx b/packages/app-council/src/Overview/Candidates.tsx
index 65f2b2285387..4899602ce2b6 100644
--- a/packages/app-council/src/Overview/Candidates.tsx
+++ b/packages/app-council/src/Overview/Candidates.tsx
@@ -4,21 +4,22 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { AccountId } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
import { ComponentProps } from './types';
import React from 'react';
import { Table } from '@polkadot/react-components';
-import translate from '../translate';
+import { useTranslation } from '../translate';
import Candidate from './Candidate';
-interface Props extends I18nProps, ComponentProps {
+interface Props extends ComponentProps {
allVotes?: Record;
className?: string;
}
-function Candidates ({ allVotes = {}, className, electionsInfo: { candidates, runnersUp }, t }: Props): React.ReactElement {
+export default function Candidates ({ allVotes = {}, className, electionsInfo: { candidates, runnersUp } }: Props): React.ReactElement {
+ const { t } = useTranslation();
+
return (
{t('runners up')}
@@ -59,5 +60,3 @@ function Candidates ({ allVotes = {}, className, electionsInfo: { candidates, ru
);
}
-
-export default translate(Candidates);
diff --git a/packages/app-council/src/Overview/Members.tsx b/packages/app-council/src/Overview/Members.tsx
index 7252f97d6b03..c4dde01307db 100644
--- a/packages/app-council/src/Overview/Members.tsx
+++ b/packages/app-council/src/Overview/Members.tsx
@@ -1,24 +1,24 @@
-/* eslint-disable @typescript-eslint/camelcase */
// Copyright 2017-2020 @polkadot/app-democracy authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { AccountId } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
import { ComponentProps } from './types';
import React from 'react';
import { Table } from '@polkadot/react-components';
-import translate from '../translate';
+import { useTranslation } from '../translate';
import Candidate from './Candidate';
-interface Props extends I18nProps, ComponentProps {
+interface Props extends ComponentProps {
allVotes?: Record;
className?: string;
}
-function Members ({ allVotes = {}, className, electionsInfo: { members }, t }: Props): React.ReactElement {
+export default function Members ({ allVotes = {}, className, electionsInfo: { members } }: Props): React.ReactElement {
+ const { t } = useTranslation();
+
return (
{members.length
@@ -41,5 +41,3 @@ function Members ({ allVotes = {}, className, electionsInfo: { members }, t }: P
);
}
-
-export default translate(Members);
diff --git a/packages/app-council/src/Overview/Summary.tsx b/packages/app-council/src/Overview/Summary.tsx
index 331ec34f562a..14c69e44796f 100644
--- a/packages/app-council/src/Overview/Summary.tsx
+++ b/packages/app-council/src/Overview/Summary.tsx
@@ -1,9 +1,7 @@
-/* eslint-disable @typescript-eslint/camelcase */
// Copyright 2017-2020 @polkadot/app-democracy authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
import { BlockNumber } from '@polkadot/types/interfaces';
import { ComponentProps } from './types';
@@ -11,13 +9,16 @@ import React from 'react';
import { SummaryBox, CardSummary } from '@polkadot/react-components';
import { formatNumber } from '@polkadot/util';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps, ComponentProps {
+interface Props extends ComponentProps {
bestNumber?: BlockNumber;
+ className?: string;
}
-function Summary ({ bestNumber, className, electionsInfo: { members, candidateCount, desiredSeats, runnersUp, termDuration, voteCount }, t }: Props): React.ReactElement {
+export default function Summary ({ bestNumber, className, electionsInfo: { members, candidateCount, desiredSeats, runnersUp, termDuration, voteCount } }: Props): React.ReactElement {
+ const { t } = useTranslation();
+
return (
@@ -52,5 +53,3 @@ function Summary ({ bestNumber, className, electionsInfo: { members, candidateCo
);
}
-
-export default translate(Summary);
diff --git a/packages/app-council/src/Overview/Vote.tsx b/packages/app-council/src/Overview/Vote.tsx
index a7b962a2f4ba..678ac991877c 100644
--- a/packages/app-council/src/Overview/Vote.tsx
+++ b/packages/app-council/src/Overview/Vote.tsx
@@ -10,7 +10,7 @@ import { ComponentProps } from './types';
import BN from 'bn.js';
import React from 'react';
import { withApi } from '@polkadot/react-api/hoc';
-import { AddressMulti, Button } from '@polkadot/react-components';
+import { InputAddressMulti, Button } from '@polkadot/react-components';
import TxModal, { TxModalState, TxModalProps } from '@polkadot/react-components/TxModal';
import translate from '../translate';
@@ -95,7 +95,7 @@ class Vote extends TxModal {
accountId={accountId}
onChange={this.setVoteValue}
/>
- {
(api.query.electionsPhragmen || api.query.elections)
.votesOf<[AccountId[]] & Codec>(accountId)
.then(([existingVotes]): void => {
- this.setState({ votes: existingVotes.map((accountId): string => accountId.toString()) });
+ const { electionsInfo: { candidates, members, runnersUp } } = this.props;
+ const available = members
+ .map(([accountId]): string => accountId.toString())
+ .concat(runnersUp.map(([accountId]): string => accountId.toString()))
+ .concat(candidates.map((accountId): string => accountId.toString()));
+
+ this.setState({
+ votes: existingVotes
+ .map((accountId): string => accountId.toString())
+ .filter((accountId): boolean => available.includes(accountId))
+ });
});
}
}
diff --git a/packages/app-council/src/Overview/VoteValue.tsx b/packages/app-council/src/Overview/VoteValue.tsx
index 9bb6af6fc7d9..ee825fbf7b89 100644
--- a/packages/app-council/src/Overview/VoteValue.tsx
+++ b/packages/app-council/src/Overview/VoteValue.tsx
@@ -2,8 +2,7 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { DerivedBalances } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
+import { DerivedBalancesAll } from '@polkadot/api-derive/types';
import BN from 'bn.js';
import React, { useEffect, useState } from 'react';
@@ -12,9 +11,9 @@ import { useApi, useCall } from '@polkadot/react-hooks';
import { BalanceVoting } from '@polkadot/react-query';
import { formatBalance, isBn } from '@polkadot/util';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
+interface Props {
accountId?: string | null;
onChange: (value: BN) => void;
}
@@ -24,9 +23,10 @@ interface ValueState {
value?: BN | string;
}
-function VoteValue ({ accountId, onChange, t }: Props): React.ReactElement | null {
+export default function VoteValue ({ accountId, onChange }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const { api } = useApi();
- const allBalances = useCall(api.derive.balances.all as any, [accountId]);
+ const allBalances = useCall(api.derive.balances.all as any, [accountId]);
const [{ selectedId, value }, setValue] = useState({});
// TODO This may be useful elsewhere, so figure out a way to make this a utility
@@ -69,5 +69,3 @@ function VoteValue ({ accountId, onChange, t }: Props): React.ReactElement | null {
+export default function Voters ({ voters }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
+
return (
@@ -34,5 +35,3 @@ function Voters ({ voters, t }: Props): React.ReactElement | null {
);
}
-
-export default translate(Voters);
diff --git a/packages/app-council/src/index.tsx b/packages/app-council/src/index.tsx
index 6037da4f0c08..bb52af314db7 100644
--- a/packages/app-council/src/index.tsx
+++ b/packages/app-council/src/index.tsx
@@ -5,7 +5,7 @@
import { DerivedCollectiveProposals } from '@polkadot/api-derive/types';
import { AppProps, BareProps } from '@polkadot/react-components/types';
-import React from 'react';
+import React, { useMemo } from 'react';
import { Route, Switch } from 'react-router';
import { useLocation } from 'react-router-dom';
import styled from 'styled-components';
@@ -27,27 +27,28 @@ function CouncilApp ({ basePath, className }: Props): React.ReactElement
const { pathname } = useLocation();
const numMotions = useCounter();
const motions = useCall(api.derive.council.proposals, []);
+ const items = useMemo(() => [
+ {
+ isRoot: true,
+ name: 'overview',
+ text: t('Council overview')
+ },
+ {
+ name: 'candidates',
+ text: t('Candidates')
+ },
+ {
+ name: 'motions',
+ text: t('Motions ({{count}})', { replace: { count: numMotions } })
+ }
+ ], [numMotions, t]);
return (
diff --git a/packages/app-council/src/useCouncilMembers.ts b/packages/app-council/src/useCouncilMembers.ts
new file mode 100644
index 000000000000..19600c29f436
--- /dev/null
+++ b/packages/app-council/src/useCouncilMembers.ts
@@ -0,0 +1,33 @@
+// Copyright 2017-2020 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { AccountId, Balance } from '@polkadot/types/interfaces';
+
+import { useState, useEffect } from 'react';
+import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
+
+interface Result {
+ isMember: boolean;
+ members: string[];
+}
+
+export default function useCouncilMembers (): Result {
+ const { api } = useApi();
+ const { allAccounts } = useAccounts();
+ const queryMembers = useCall<[AccountId, Balance][]>(api.query.electionsPhragmen?.members || api.query.elections.members, []);
+ const [members, setMembers] = useState({ isMember: false, members: [] });
+
+ useEffect((): void => {
+ if (allAccounts && queryMembers) {
+ const members = queryMembers.map(([accountId]): string => accountId.toString());
+
+ setMembers({
+ members,
+ isMember: members.some((accountId): boolean => allAccounts.includes(accountId))
+ });
+ }
+ }, [allAccounts, queryMembers]);
+
+ return members;
+}
diff --git a/packages/app-council/src/useCounter.ts b/packages/app-council/src/useCounter.ts
index 1dcdb87073be..66d620246a39 100644
--- a/packages/app-council/src/useCounter.ts
+++ b/packages/app-council/src/useCounter.ts
@@ -9,7 +9,7 @@ import { useApi, useCall } from '@polkadot/react-hooks';
export default function useCounter (): number {
const { api, isApiReady } = useApi();
- const motions = useCall(isApiReady ? api.derive.council.proposals : undefined, []);
+ const motions = useCall(isApiReady ? api.derive.council?.proposals : undefined, []);
const [counter, setCounter] = useState(0);
useEffect((): void => {
diff --git a/packages/app-dapps-staking/package.json b/packages/app-dapps-staking/package.json
index b5a74487665b..1d6def07b936 100644
--- a/packages/app-dapps-staking/package.json
+++ b/packages/app-dapps-staking/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-dapps-staking",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"description": "A basic staking app",
"main": "index.js",
"scripts": {},
@@ -11,9 +11,9 @@
],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/app-explorer": "^0.39.0-beta.40",
- "@polkadot/react-components": "^0.39.0-beta.40",
- "@polkadot/react-query": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/app-explorer":"^0.40.0-beta.11",
+ "@polkadot/react-components":"^0.40.0-beta.11",
+ "@polkadot/react-query":"^0.40.0-beta.11"
}
}
diff --git a/packages/app-dapps-staking/src/Actions/Account/BondExtra.tsx b/packages/app-dapps-staking/src/Actions/Account/BondExtra.tsx
index 6e6355ec97e3..68cdb4b8b2b2 100644
--- a/packages/app-dapps-staking/src/Actions/Account/BondExtra.tsx
+++ b/packages/app-dapps-staking/src/Actions/Account/BondExtra.tsx
@@ -72,7 +72,7 @@ class BondExtra extends TxComponent {
size='small'
>
{this.renderContent()}
-
+
| null {
const { api } = useApi();
- const allBalances = useCall(api.derive.balances.all as any, [accountId]);
+ const allBalances = useCall(api.derive.balances.all as any, [accountId]);
const [error, setError] = useState(null);
useEffect((): void => {
diff --git a/packages/app-dapps-staking/src/Actions/Account/Nominate.tsx b/packages/app-dapps-staking/src/Actions/Account/Nominate.tsx
index 2ebaf6cb9056..f46990351d86 100644
--- a/packages/app-dapps-staking/src/Actions/Account/Nominate.tsx
+++ b/packages/app-dapps-staking/src/Actions/Account/Nominate.tsx
@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/react-components/types';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
-import { AddressMulti, Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { InputAddressMulti, Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
import { useFavorites } from '@polkadot/react-hooks';
import { STORE_FAVS_BASE } from '../../constants';
@@ -74,7 +74,7 @@ function Nominate ({ className, controllerId, nominees, onClose, allContracts, s
isDisabled
label={t('stash account')}
/>
-
-
+
{
onError={this.onControllerError}
/>
-
+
{
size='small'
>
{this.renderContent()}
-
+
{
size='small'
>
{this.renderContent()}
-
+
{
const { api } = useApi();
- const balancesAll = useCall(api.derive.balances.all as any, [stashId]);
+ const balancesAll = useCall(api.derive.balances.all as any, [stashId]);
const stakingAccount = useCall((api.derive as any).plasmStaking.account, [stashId]);
const [{ controllerId, destination, isStashNominating, nominees }, setStakeState] = useState({ controllerId: null, destination: 0, isStashNominating: false });
const [isBondExtraOpen, toggleBondExtra] = useToggle();
diff --git a/packages/app-dapps-staking/src/Actions/NewStake.tsx b/packages/app-dapps-staking/src/Actions/NewStake.tsx
index fbffd33dd2b2..d930f5b8456a 100644
--- a/packages/app-dapps-staking/src/Actions/NewStake.tsx
+++ b/packages/app-dapps-staking/src/Actions/NewStake.tsx
@@ -114,7 +114,7 @@ class NewStake extends TxComponent {
value={destination}
/>
-
+
{
if (totalInsurance) {
setTotal(
- `${formatBalance(totalInsurance, false)}${formatBalance.calcSi(totalInsurance.toString()).value}`
+ `${formatBalance(totalInsurance, { forceUnit: '-', withSi: false })}${formatBalance.calcSi(totalInsurance.toString()).value}`
);
}
}, [totalInsurance]);
@@ -70,7 +70,7 @@ function Summary ({ className, isVisible, allContracts, stakedContracts, stakedE
if (totalInsurance && totalStaked?.gtn(0)) {
setStakeInfo({
percentage: `${(totalStaked.muln(10000).div(totalInsurance).toNumber() / 100).toFixed(2)}%`,
- staked: `${formatBalance(totalStaked, false)}${formatBalance.calcSi(totalStaked.toString()).value}`
+ staked: `${formatBalance(totalStaked, { forceUnit: '-', withSi: false })}${formatBalance.calcSi(totalStaked.toString()).value}`
});
}
}, [totalInsurance, stakedExposures]);
@@ -103,7 +103,7 @@ function Summary ({ className, isVisible, allContracts, stakedContracts, stakedE
{
lastReward.gtn(0)
- ? `${formatBalance(lastReward, false)}`
+ ? `${formatBalance(lastReward, { forceUnit: '-', withSi: false })}`
: '-'
}
diff --git a/packages/app-dapps-staking/src/types.ts b/packages/app-dapps-staking/src/types.ts
index 2f6644a94156..71a1895c03a4 100644
--- a/packages/app-dapps-staking/src/types.ts
+++ b/packages/app-dapps-staking/src/types.ts
@@ -2,14 +2,14 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { DerivedFees, DerivedBalances } from '@polkadot/api-derive/types';
+import { DerivedFees, DerivedBalancesAll } from '@polkadot/api-derive/types';
import { AccountId, Balance, BlockNumber, Hash, SessionIndex } from '@polkadot/types/interfaces';
export type Nominators = Record;
export interface CalculateBalanceProps {
balances_fees?: DerivedFees;
- balances_all?: DerivedBalances;
+ balances_all?: DerivedBalancesAll;
}
export type AccountFilter = 'all' | 'controller' | 'session' | 'stash' | 'unbonded';
diff --git a/packages/app-dashboard/package.json b/packages/app-dashboard/package.json
index 90c1ad4dfe46..94515a1ba6c4 100644
--- a/packages/app-dashboard/package.json
+++ b/packages/app-dashboard/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-dashboard",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"description": "Dashboard for all apps, allowing for an overview and quick navigation",
"main": "index.js",
"scripts": {},
@@ -10,8 +10,8 @@
],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/apps-routing": "^0.39.0-beta.40",
- "@polkadot/react-components": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/apps-routing": "^0.40.0-beta.11",
+ "@polkadot/react-components": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-dashboard/src/Entry.tsx b/packages/app-dashboard/src/Entry.tsx
index 9db7b1194b35..661d8de607db 100644
--- a/packages/app-dashboard/src/Entry.tsx
+++ b/packages/app-dashboard/src/Entry.tsx
@@ -3,20 +3,22 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { Route } from '@polkadot/apps-routing/types';
-import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { Icon } from '@polkadot/react-components';
-import translate from './translate';
+import { useTranslation } from './translate';
-interface Props extends I18nProps {
+interface Props {
+ className?: string;
route: Route;
}
-function Entry ({ className, route: { i18n, icon, name }, t }: Props): React.ReactElement {
+function Entry ({ className, route: { i18n, icon, name } }: Props): React.ReactElement {
+ const { t } = useTranslation();
+
return (
@@ -32,8 +34,8 @@ function Entry ({ className, route: { i18n, icon, name }, t }: Props): React.Rea
);
}
-export default translate(styled(Entry)`
+export default styled(Entry)`
.name {
margin-top: 0.75rem;
}
-`);
+`;
diff --git a/packages/app-democracy/package.json b/packages/app-democracy/package.json
index cb9e19af6540..d011861770e7 100644
--- a/packages/app-democracy/package.json
+++ b/packages/app-democracy/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-democracy",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"description": "A referendum & proposal app",
"main": "index.js",
"scripts": {},
@@ -10,8 +10,8 @@
],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40",
- "@polkadot/react-query": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11",
+ "@polkadot/react-query": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-democracy/src/Overview/DispatchEntry.tsx b/packages/app-democracy/src/Overview/DispatchEntry.tsx
index df3f61ef2cb1..c3cb419be023 100644
--- a/packages/app-democracy/src/Overview/DispatchEntry.tsx
+++ b/packages/app-democracy/src/Overview/DispatchEntry.tsx
@@ -2,7 +2,6 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
import { AccountId, Balance, BlockNumber, Hash, Proposal, ReferendumIndex } from '@polkadot/types/interfaces';
import { ITuple } from '@polkadot/types/types';
@@ -11,16 +10,18 @@ import { useApi, useCall } from '@polkadot/react-hooks';
import { Bytes, Option } from '@polkadot/types';
import { formatNumber } from '@polkadot/util';
-import translate from '../translate';
+import { useTranslation } from '../translate';
import ProposalCell from './ProposalCell';
+import PreImageButton from './PreImageButton';
-interface Props extends I18nProps {
+interface Props {
blockNumber?: BlockNumber;
hash: Hash;
referendumIndex: ReferendumIndex;
}
-function DispatchEntry ({ blockNumber, hash, referendumIndex, t }: Props): React.ReactElement
{
+export default function DispatchEntry ({ blockNumber, hash, referendumIndex }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
const preimage = useCall>
>(api.query.democracy.preimages, [hash]);
@@ -47,8 +48,13 @@ function DispatchEntry ({ blockNumber, hash, referendumIndex, t }: Props): React
proposalHash={hash}
proposal={proposal}
/>
+
+
);
}
-
-export default translate(DispatchEntry);
diff --git a/packages/app-democracy/src/Overview/DispatchQueue.tsx b/packages/app-democracy/src/Overview/DispatchQueue.tsx
index adaca2d7c010..073fd91c22b4 100644
--- a/packages/app-democracy/src/Overview/DispatchQueue.tsx
+++ b/packages/app-democracy/src/Overview/DispatchQueue.tsx
@@ -2,17 +2,21 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps as Props } from '@polkadot/react-components/types';
import { BlockNumber, Hash, ReferendumIndex } from '@polkadot/types/interfaces';
import React from 'react';
import { Table } from '@polkadot/react-components';
import { useApi, useCall } from '@polkadot/react-hooks';
-import translate from '../translate';
+import { useTranslation } from '../translate';
import DispatchEntry from './DispatchEntry';
-function DispatchQueue ({ className, t }: Props): React.ReactElement | null {
+interface Props {
+ className?: string;
+}
+
+export default function DispatchQueue ({ className }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const { api } = useApi();
const queued = useCall<[BlockNumber, Hash, ReferendumIndex][]>(api.query.democracy.dispatchQueue, []);
@@ -43,5 +47,3 @@ function DispatchQueue ({ className, t }: Props): React.ReactElement | nu
);
}
-
-export default translate(DispatchQueue);
diff --git a/packages/app-democracy/src/Overview/Externals.tsx b/packages/app-democracy/src/Overview/Externals.tsx
index 7b229fbe206e..0db223f80adf 100644
--- a/packages/app-democracy/src/Overview/Externals.tsx
+++ b/packages/app-democracy/src/Overview/Externals.tsx
@@ -4,7 +4,6 @@
import { AccountId, Balance, BlockNumber, Hash, Proposal, VoteThreshold } from '@polkadot/types/interfaces';
import { ITuple } from '@polkadot/types/types';
-import { I18nProps as Props } from '@polkadot/react-components/types';
import React, { useEffect, useState } from 'react';
import { AddressSmall, Table } from '@polkadot/react-components';
@@ -12,10 +11,16 @@ import { useApi, useCall } from '@polkadot/react-hooks';
import { FormatBalance } from '@polkadot/react-query';
import { Bytes, Option } from '@polkadot/types';
-import translate from '../translate';
+import { useTranslation } from '../translate';
+import PreImageButton from './PreImageButton';
import ProposalCell from './ProposalCell';
-function Externals ({ className, t }: Props): React.ReactElement | null {
+interface Props {
+ className?: string;
+}
+
+export default function Externals ({ className }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const { api } = useApi();
const external = useCall>>(api.query.democracy.nextExternal, []);
const [hash, setHash] = useState(null);
@@ -66,11 +71,16 @@ function Externals ({ className, t }: Props): React.ReactElement | null {
proposalHash={hash}
proposal={expanded?.proposal}
/>
+
+
);
}
-
-export default translate(Externals);
diff --git a/packages/app-democracy/src/Overview/PreImage.tsx b/packages/app-democracy/src/Overview/PreImage.tsx
index 437c273e907e..508b88c12378 100644
--- a/packages/app-democracy/src/Overview/PreImage.tsx
+++ b/packages/app-democracy/src/Overview/PreImage.tsx
@@ -3,50 +3,54 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { I18nProps } from '@polkadot/react-components/types';
+import { Hash } from '@polkadot/types/interfaces';
-import BN from 'bn.js';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
-import { Button, Input, InputAddress, InputNumber, Extrinsic, Modal, Toggle, TxButton } from '@polkadot/react-components';
+import { Input, InputAddress, Extrinsic, Modal, Toggle, TxButton } from '@polkadot/react-components';
import { useApi } from '@polkadot/react-hooks';
import { Available } from '@polkadot/react-query';
import { blake2AsHex } from '@polkadot/util-crypto';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
+interface Props {
+ className?: string;
+ isImminent?: boolean;
+ matchHash?: Hash;
onClose: () => void;
}
const ZERO_HASH = blake2AsHex('');
-function PreImage ({ className, onClose, t }: Props): React.ReactElement {
+function PreImage ({ className, isImminent: propsIsImminent, matchHash, onClose }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { apiDefaultTxSudo } = useApi();
const [accountId, setAccountId] = useState(null);
- const [atBlock, setAtBlock] = useState();
- const [forProposal, setForProposal] = useState();
- const [isImminent, setIsImminent] = useState(false);
- const [{ hex, hash }, setHash] = useState<{ hex: string; hash: string }>({ hex: '', hash: ZERO_HASH });
+ const [isImminent, setIsImminent] = useState(propsIsImminent || false);
+ const [{ encodedProposal, encodedHash }, setHash] = useState<{ encodedProposal: string; encodedHash: string }>({ encodedProposal: '', encodedHash: ZERO_HASH });
const [proposal, setProposal] = useState();
useEffect((): void => {
- const hex = (proposal as SubmittableExtrinsic)?.method.toHex() || '';
+ const encodedProposal = (proposal as SubmittableExtrinsic)?.method.toHex() || '';
- setHash({ hex, hash: blake2AsHex(hex) });
+ setHash({ encodedProposal, encodedHash: blake2AsHex(encodedProposal) });
}, [proposal]);
+ const isMatched = matchHash
+ ? matchHash.eq(encodedHash)
+ : true;
+
return (
{t('transferrable')}} params={accountId} />}
onChange={setAccountId}
type='account'
/>
@@ -58,8 +62,9 @@ function PreImage ({ className, onClose, t }: Props): React.ReactElement
onChange={setIsImminent}
value={isImminent}
/>
- {isImminent && (
- <>
-
-
-
-
+
+
);
}
-export default translate(
- styled(PreImage)`
- .toggleImminent {
- margin: 0.5rem 0;
- text-align: right;
- }
- `
-);
+export default styled(PreImage)`
+ .toggleImminent {
+ margin: 0.5rem 0;
+ text-align: right;
+ }
+`;
diff --git a/packages/app-democracy/src/Overview/PreImageButton.tsx b/packages/app-democracy/src/Overview/PreImageButton.tsx
new file mode 100644
index 000000000000..c3dc888cf9c6
--- /dev/null
+++ b/packages/app-democracy/src/Overview/PreImageButton.tsx
@@ -0,0 +1,47 @@
+// Copyright 2017-2020 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Proposal, Hash } from '@polkadot/types/interfaces';
+
+import React from 'react';
+import { Button } from '@polkadot/react-components';
+import { useToggle } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate';
+import PreImage from './PreImage';
+
+interface Props {
+ hash: Hash;
+ isImminent?: boolean;
+ proposal?: Proposal;
+ withoutOr?: boolean;
+}
+
+export default function PreImageButton ({ hash, isImminent, proposal, withoutOr }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
+ const [isPreimageOpen, togglePreimage] = useToggle();
+
+ if (proposal) {
+ return null;
+ }
+
+ return (
+ <>
+ {!withoutOr && {
+function Proposal ({ className, value: { balance, hash, index, proposal, proposer, seconds } }: Props): React.ReactElement {
+ const { t } = useTranslation();
const seconding = seconds.filter((_address, index): boolean => index !== 0);
return (
@@ -36,7 +38,7 @@ function Proposal ({ className, t, value: { balance, hash, index, proposal, prop
proposalHash={hash}
proposal={proposal}
/>
-
+
{seconding.length !== 0 && (
@@ -55,29 +57,30 @@ function Proposal ({ className, t, value: { balance, hash, index, proposal, prop
)}
-
+
);
}
-export default translate(
- styled(Proposal)`
- .identityIcon {
- &:first-child {
- padding-top: 0;
- }
-
- &:last-child {
- margin-bottom: 4px;
- }
+export default styled(Proposal)`
+ .identityIcon {
+ &:first-child {
+ padding-top: 0;
}
- .seconding {
- padding-top: 1.1rem;
+ &:last-child {
+ margin-bottom: 4px;
}
- `
-);
+ }
+`;
diff --git a/packages/app-democracy/src/Overview/ProposalCell.tsx b/packages/app-democracy/src/Overview/ProposalCell.tsx
index 399a33c7a96c..fa19454d7947 100644
--- a/packages/app-democracy/src/Overview/ProposalCell.tsx
+++ b/packages/app-democracy/src/Overview/ProposalCell.tsx
@@ -3,20 +3,22 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { Hash, Proposal } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
import { registry } from '@polkadot/react-api';
import { Call } from '@polkadot/react-components';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
+interface Props {
+ className?: string;
proposal?: Proposal | null;
proposalHash: Hash | string;
}
-function ProposalCell ({ className, proposal, proposalHash, t }: Props): React.ReactElement {
+export default function ProposalCell ({ className, proposal, proposalHash }: Props): React.ReactElement {
+ const { t } = useTranslation();
+
if (!proposal) {
return (
@@ -42,5 +44,3 @@ function ProposalCell ({ className, proposal, proposalHash, t }: Props): React.R
);
}
-
-export default translate(ProposalCell);
diff --git a/packages/app-democracy/src/Overview/Proposals.tsx b/packages/app-democracy/src/Overview/Proposals.tsx
index 15ab65914ee7..e18fa6ab8ae3 100644
--- a/packages/app-democracy/src/Overview/Proposals.tsx
+++ b/packages/app-democracy/src/Overview/Proposals.tsx
@@ -3,16 +3,20 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { DeriveProposal } from '@polkadot/api-derive/types';
-import { I18nProps as Props } from '@polkadot/react-components/types';
import React from 'react';
import { Table } from '@polkadot/react-components';
import { useApi, useCall } from '@polkadot/react-hooks';
import ProposalDisplay from './Proposal';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-function Proposals ({ className, t }: Props): React.ReactElement {
+interface Props {
+ className?: string;
+}
+
+export default function Proposals ({ className }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
const proposals = useCall(api.derive.democracy.proposals, []);
@@ -37,5 +41,3 @@ function Proposals ({ className, t }: Props): React.ReactElement {
);
}
-
-export default translate(Proposals);
diff --git a/packages/app-democracy/src/Overview/Propose.tsx b/packages/app-democracy/src/Overview/Propose.tsx
index c37b0204b0b7..06285e00a34a 100644
--- a/packages/app-democracy/src/Overview/Propose.tsx
+++ b/packages/app-democracy/src/Overview/Propose.tsx
@@ -2,21 +2,21 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
-
import BN from 'bn.js';
import React, { useState } from 'react';
-import { Button, Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
import { Available } from '@polkadot/react-query';
import { isHex } from '@polkadot/util';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
+interface Props {
+ className?: string;
onClose: () => void;
}
-function Propose ({ className, onClose, t }: Props): React.ReactElement {
+export default function Propose ({ className, onClose }: Props): React.ReactElement {
+ const { t } = useTranslation();
const [accountId, setAccountId] = useState(null);
const [balance, setBalance] = useState();
const [{ isHashValid, hash }, setHash] = useState<{ isHashValid: boolean; hash?: string }>({ isHashValid: false, hash: '' });
@@ -30,13 +30,12 @@ function Propose ({ className, onClose, t }: Props): React.ReactElement {
{t('transferrable')}} params={accountId} />}
onChange={setAccountId}
type='account'
/>
@@ -53,30 +52,18 @@ function Propose ({ className, onClose, t }: Props): React.ReactElement {
onChange={setBalance}
/>
-
-
-
+
+
);
}
-
-export default translate(Propose);
diff --git a/packages/app-democracy/src/Overview/Referendum.tsx b/packages/app-democracy/src/Overview/Referendum.tsx
index 9d42bee6dfd9..5ef61df7a503 100644
--- a/packages/app-democracy/src/Overview/Referendum.tsx
+++ b/packages/app-democracy/src/Overview/Referendum.tsx
@@ -4,21 +4,23 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { DerivedReferendumVote, DerivedReferendum } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
import { BlockNumber } from '@polkadot/types/interfaces';
import BN from 'bn.js';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
-import { formatNumber } from '@polkadot/util';
+import { Button } from '@polkadot/react-components';
import { useApi, useCall } from '@polkadot/react-hooks';
import { FormatBalance } from '@polkadot/react-query';
+import { formatNumber } from '@polkadot/util';
-import translate from '../translate';
+import { useTranslation } from '../translate';
+import PreImageButton from './PreImageButton';
import ProposalCell from './ProposalCell';
import Voting from './Voting';
-interface Props extends I18nProps {
+interface Props {
+ className?: string;
idNumber: BN;
value: DerivedReferendum;
}
@@ -32,7 +34,8 @@ interface State {
votedTotal: BN;
}
-function Referendum ({ className, idNumber, t, value }: Props): React.ReactElement | null {
+function Referendum ({ className, idNumber, value }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const { api } = useApi();
const bestNumber = useCall(api.derive.chain.bestNumber, []);
const votesFor = useCall(api.derive.democracy.referendumVotesFor as any, [idNumber]);
@@ -48,16 +51,21 @@ function Referendum ({ className, idNumber, t, value }: Props): React.ReactEleme
useEffect((): void => {
if (votesFor) {
const newState: State = votesFor.reduce((state, { balance, vote }): State => {
+ const isDefault = vote.conviction.index === 0;
+ const counted = balance
+ .muln(isDefault ? 1 : vote.conviction.index)
+ .divn(isDefault ? 10 : 1);
+
if (vote.isAye) {
state.voteCountAye++;
- state.votedAye = state.votedAye.add(balance);
+ state.votedAye = state.votedAye.add(counted);
} else {
state.voteCountNay++;
- state.votedNay = state.votedNay.add(balance);
+ state.votedNay = state.votedNay.add(counted);
}
state.voteCount++;
- state.votedTotal = state.votedTotal.add(balance);
+ state.votedTotal = state.votedTotal.add(counted);
return state;
}, {
@@ -108,20 +116,27 @@ function Referendum ({ className, idNumber, t, value }: Props): React.ReactEleme
-
+
);
}
-export default translate(
- styled(Referendum)`
- .democracy--Referendum-results {
- margin-bottom: 1em;
+export default styled(Referendum)`
+ .democracy--Referendum-results {
+ margin-bottom: 1em;
- &.chart {
- text-align: center;
- }
+ &.chart {
+ text-align: center;
}
- `
-);
+ }
+`;
diff --git a/packages/app-democracy/src/Overview/Referendums.tsx b/packages/app-democracy/src/Overview/Referendums.tsx
index 18b0a533ac41..e933e9e0fbde 100644
--- a/packages/app-democracy/src/Overview/Referendums.tsx
+++ b/packages/app-democracy/src/Overview/Referendums.tsx
@@ -3,16 +3,20 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { DerivedReferendum } from '@polkadot/api-derive/types';
-import { I18nProps as Props } from '@polkadot/react-components/types';
import React from 'react';
import { Table } from '@polkadot/react-components';
import { useApi, useCall } from '@polkadot/react-hooks';
import Referendum from './Referendum';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-function Referendums ({ className, t }: Props): React.ReactElement {
+interface Props {
+ className?: string;
+}
+
+export default function Referendums ({ className }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
const referendums = useCall(api.derive.democracy.referendums, []);
@@ -38,5 +42,3 @@ function Referendums ({ className, t }: Props): React.ReactElement {
);
}
-
-export default translate(Referendums);
diff --git a/packages/app-democracy/src/Overview/Seconding.tsx b/packages/app-democracy/src/Overview/Seconding.tsx
index f97317ccf295..2dc1d6b8c0a7 100644
--- a/packages/app-democracy/src/Overview/Seconding.tsx
+++ b/packages/app-democracy/src/Overview/Seconding.tsx
@@ -2,42 +2,46 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { AccountId } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
+import { AccountId, Proposal } from '@polkadot/types/interfaces';
import BN from 'bn.js';
import React, { useState } from 'react';
-import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
-import { useAccounts } from '@polkadot/react-hooks';
+import { Button, InputAddress, Modal, ProposedAction, TxButton } from '@polkadot/react-components';
+import { useAccounts, useToggle } from '@polkadot/react-hooks';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
+interface Props {
+ className?: string;
depositors: AccountId[];
+ proposal?: Proposal;
proposalId: BN | number;
}
-function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement | null {
+export default function Seconding ({ depositors, proposal, proposalId }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const { hasAccounts } = useAccounts();
const [accountId, setAccountId] = useState(null);
- const [isSecondingOpen, setIsSecondingOpen] = useState(false);
+ const [isSecondingOpen, toggleSeconding] = useToggle();
if (!hasAccounts) {
return null;
}
const isDepositor = depositors.some((depositor): boolean => depositor.eq(accountId));
- const _toggleSeconding = (): void => setIsSecondingOpen(!isSecondingOpen);
return (
<>
{isSecondingOpen && (
+
-
-
-
+
+
)}
@@ -73,10 +68,8 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement {
const { api } = useApi();
const activeProposals = useCall(api.derive.democracy.proposals, []);
const bestNumber = useCall(api.derive.chain.bestNumber, []);
- const nextActive = useCall(api.query.democracy?.lowestUnbaked || api.query.democracy.nextTally, []);
+ const nextActive = useCall(api.query.democracy.lowestUnbaked, []);
const publicPropCount = useCall(api.query.democracy.publicPropCount, []);
const referendumCount = useCall(api.query.democracy.referendumCount, []);
diff --git a/packages/app-democracy/src/Overview/Voting.tsx b/packages/app-democracy/src/Overview/Voting.tsx
index 910bfd4371f0..92d060460e0d 100644
--- a/packages/app-democracy/src/Overview/Voting.tsx
+++ b/packages/app-democracy/src/Overview/Voting.tsx
@@ -2,31 +2,51 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
+import { PropIndex, Proposal } from '@polkadot/types/interfaces';
-import BN from 'bn.js';
-import React, { useState } from 'react';
-import { Button, Modal, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
-import { useAccounts } from '@polkadot/react-hooks';
+import React, { useMemo, useState } from 'react';
+import { Button, Dropdown, Modal, ProposedAction, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
+import { useAccounts, useApi, useToggle } from '@polkadot/react-hooks';
import { isBoolean } from '@polkadot/util';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
- referendumId: BN | number;
+interface Props {
+ proposal?: Proposal;
+ referendumId: PropIndex;
}
-function Voting ({ referendumId, t }: Props): React.ReactElement | null {
+const CONVICTIONS: [number, number][] = [1, 2, 4, 8, 16, 32].map((lock, index) => [index + 1, lock]);
+
+export default function Voting ({ proposal, referendumId }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
+ const { api } = useApi();
const { hasAccounts } = useAccounts();
const [accountId, setAccountId] = useState(null);
- const [isVotingOpen, setIsVotingOpen] = useState(false);
- const [voteValue, setVoteValue] = useState(true);
+ const [conviction, setConviction] = useState(0);
+ const [isVotingOpen, toggleVoting] = useToggle();
+ const [aye, setVoteValue] = useState(true);
+ const [enact] = useState(
+ (api.consts.democracy.enactmentPeriod.toNumber() * api.consts.timestamp.minimumPeriod.toNumber() / 1000 * 2) / 60 / 60 / 24
+ );
+ const convictionOpts = useMemo(() => [
+ { text: t('0.1x voting balance, no lockup period'), value: 0 },
+ ...CONVICTIONS.map(([value, lock]): { text: string; value: number } => ({
+ text: t('{{value}}x voting balance, locked for {{lock}}x enactment ({{period}} days)', {
+ replace: {
+ lock,
+ period: (enact * lock).toFixed(2),
+ value
+ }
+ }),
+ value
+ }))
+ ], [t, enact]);
if (!hasAccounts) {
return null;
}
- const _toggleVoting = (): void => setIsVotingOpen(!isVotingOpen);
const _onChangeVote = (vote?: boolean): void => setVoteValue(isBoolean(vote) ? vote : true);
return (
@@ -34,20 +54,30 @@ function Voting ({ referendumId, t }: Props): React.ReactElement | null {
{isVotingOpen && (
+
@@ -56,10 +86,8 @@ function Voting ({ referendumId, t }: Props): React.ReactElement | null {
icon='check'
isPrimary
label={t('Vote')}
- onClick={_toggleVoting}
+ onClick={toggleVoting}
/>
);
}
-
-export default translate(Voting);
diff --git a/packages/app-democracy/src/Overview/index.tsx b/packages/app-democracy/src/Overview/index.tsx
index ea3f5b610667..a53a4e5a11ca 100644
--- a/packages/app-democracy/src/Overview/index.tsx
+++ b/packages/app-democracy/src/Overview/index.tsx
@@ -2,13 +2,11 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps as Props } from '@polkadot/react-components/types';
-
import React, { useState } from 'react';
import styled from 'styled-components';
import { Button } from '@polkadot/react-components';
-import translate from '../translate';
+import { useTranslation } from '../translate';
import DispatchQueue from './DispatchQueue';
import Externals from './Externals';
import Proposals from './Proposals';
@@ -17,7 +15,12 @@ import Summary from './Summary';
import PreImage from './PreImage';
import Propose from './Propose';
-function Overview ({ className, t }: Props): React.ReactElement {
+interface Props {
+ className?: string;
+}
+
+function Overview ({ className }: Props): React.ReactElement {
+ const { t } = useTranslation();
const [isPreimageOpen, setIsPreimageOpen] = useState(false);
const [isProposeOpen, setIsProposeOpen] = useState(false);
@@ -56,10 +59,8 @@ function Overview ({ className, t }: Props): React.ReactElement {
);
}
-export default translate(
- styled(Overview)`
- .proposalSection {
- margin-bottom: 1.5rem;
- }
- `
-);
+export default styled(Overview)`
+ .proposalSection {
+ margin-bottom: 1.5rem;
+ }
+`;
diff --git a/packages/app-democracy/src/index.tsx b/packages/app-democracy/src/index.tsx
index eed66427bf95..ce5cdee467c5 100644
--- a/packages/app-democracy/src/index.tsx
+++ b/packages/app-democracy/src/index.tsx
@@ -2,26 +2,35 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
+import { AppProps, BareProps } from '@polkadot/react-components/types';
-import React from 'react';
+import React, { useMemo } from 'react';
import { Route, Switch } from 'react-router';
import { HelpOverlay, Tabs } from '@polkadot/react-components';
-import uiSettings from '@plasm/ui-settings';
+import uiSettings from '@polkadot/ui-settings';
import basicMd from './md/basic.md';
import Overview from './Overview';
-import translate from './translate';
+import { useTranslation } from './translate';
export { default as useCounter } from './useCounter';
-interface Props extends AppProps, BareProps, I18nProps {}
+interface Props extends AppProps, BareProps {}
const hidden = uiSettings.uiMode === 'full'
? []
: ['propose'];
-function DemocracyApp ({ basePath, t }: Props): React.ReactElement {
+export default function DemocracyApp ({ basePath }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const items = useMemo(() => [
+ {
+ isRoot: true,
+ name: 'overview',
+ text: t('Democracy overview')
+ }
+ ], [t]);
+
return (
{
@@ -44,5 +47,3 @@ function DemocracyApp ({ basePath, t }: Props): React.ReactElement {
);
}
-
-export default translate(DemocracyApp);
diff --git a/packages/app-democracy/src/useCounter.ts b/packages/app-democracy/src/useCounter.ts
index 8c3c937fd7bc..8f6ed5971a99 100644
--- a/packages/app-democracy/src/useCounter.ts
+++ b/packages/app-democracy/src/useCounter.ts
@@ -7,8 +7,8 @@ import { useApi, useCall } from '@polkadot/react-hooks';
export default function useCounter (): number {
const { api, isApiReady } = useApi();
- const proposals = useCall(isApiReady ? api.derive.democracy.proposals : undefined, []);
- const referenda = useCall(isApiReady ? api.derive.democracy.referendums : undefined, []);
+ const proposals = useCall(isApiReady ? api.derive.democracy?.proposals : undefined, []);
+ const referenda = useCall(isApiReady ? api.derive.democracy?.referendums : undefined, []);
const [counter, setCounter] = useState(0);
useEffect((): void => {
diff --git a/packages/app-explorer/package.json b/packages/app-explorer/package.json
index 78f3248a5936..ac93bfc34e0b 100644
--- a/packages/app-explorer/package.json
+++ b/packages/app-explorer/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-explorer",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"main": "index.js",
"repository": "https://github.com/polkadot-js/apps.git",
"author": "Jaco Greeff ",
@@ -10,7 +10,7 @@
"contributors": [],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-explorer/src/SummarySession.tsx b/packages/app-explorer/src/SummarySession.tsx
index 6efbf9711560..79d6c57f3f8f 100644
--- a/packages/app-explorer/src/SummarySession.tsx
+++ b/packages/app-explorer/src/SummarySession.tsx
@@ -3,86 +3,72 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { DerivedSessionInfo } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
import { CardSummary } from '@polkadot/react-components';
import { useApi, useCall } from '@polkadot/react-hooks';
-
-import translate from './translate';
import { formatNumber } from '@polkadot/util';
-interface Props extends I18nProps {
- sessionInfo?: DerivedSessionInfo;
+import { useTranslation } from './translate';
+
+interface Props {
withEra?: boolean;
withSession?: boolean;
}
-function renderSession ({ sessionInfo, t, withSession = true }: Props): React.ReactNode {
- if (!withSession || !sessionInfo) {
- return null;
- }
-
- const label = sessionInfo.isEpoch && sessionInfo.sessionLength.gtn(1)
- ? t('epoch')
- : t('session');
-
- return sessionInfo.sessionLength.gtn(0)
- ? (
-
- {formatNumber(sessionInfo.currentIndex)}
-
- );
-}
-
-function renderEra ({ sessionInfo, t, withEra = true }: Props): React.ReactNode {
- if (!withEra || !sessionInfo) {
- return null;
- }
-
- const label = t('era');
-
- return sessionInfo.sessionLength.gtn(0)
- ? (
-
- {formatNumber(sessionInfo.currentEra)}
-
- );
-}
-
-function SummarySession (props: Props): React.ReactElement {
+export default function SummarySession ({ withEra = true, withSession = true }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
- const sessionInfo = useCall((api.derive as any).plasmStaking.info, []);
- const [expanded, setExpanded] = useState(props);
-
- useEffect((): void => {
- setExpanded({ ...props, sessionInfo });
- }, [props, sessionInfo]);
+ const sessionInfo = useCall(api.derive.session?.info, []);
+ const eraLabel = useMemo(() =>
+ t('era')
+ , [t]);
+ const sessionLabel = useMemo(() =>
+ sessionInfo?.isEpoch
+ ? t('epoch')
+ : t('session')
+ , [sessionInfo, t]);
return (
<>
- {renderSession(expanded)}
- {renderEra(expanded)}
+ {sessionInfo && (
+ <>
+ {withSession && (
+ sessionInfo.sessionLength.gtn(1)
+ ? (
+
+ #{formatNumber(sessionInfo.currentIndex)}
+
+ )
+ )}
+ {withEra && (
+ sessionInfo.sessionLength.gtn(1)
+ ? (
+
+ #{formatNumber(sessionInfo.currentEra)}
+
+ )
+ )}
+
+ )}
);
}
-
-export default translate(SummarySession);
diff --git a/packages/app-explorer/src/index.tsx b/packages/app-explorer/src/index.tsx
index 6361e1878f02..c634027f615b 100644
--- a/packages/app-explorer/src/index.tsx
+++ b/packages/app-explorer/src/index.tsx
@@ -2,31 +2,52 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
+import { AppProps, BareProps } from '@polkadot/react-components/types';
import { KeyedEvent } from './types';
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
import { Route, Switch } from 'react-router';
-import styled from 'styled-components';
+// import styled from 'styled-components';
import Tabs from '@polkadot/react-components/Tabs';
import { useApi } from '@polkadot/react-hooks';
import { BlockAuthorsContext, EventsContext } from '@polkadot/react-query';
-import uiSettings from '@plasm/ui-settings';
+import uiSettings from '@polkadot/ui-settings';
import BlockInfo from './BlockInfo';
import Forks from './Forks';
import Main from './Main';
import NodeInfo from './NodeInfo';
-import translate from './translate';
+import { useTranslation } from './translate';
-interface Props extends AppProps, BareProps, I18nProps {
+interface Props extends AppProps, BareProps {
newEvents?: KeyedEvent[];
}
-function ExplorerApp ({ basePath, className, t }: Props): React.ReactElement {
+function ExplorerApp ({ basePath, className }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
const { lastHeaders } = useContext(BlockAuthorsContext);
const events = useContext(EventsContext);
+ const items = useMemo(() => [
+ {
+ isRoot: true,
+ name: 'chain',
+ text: t('Chain info')
+ },
+ {
+ hasParams: true,
+ name: 'query',
+ text: t('Block details')
+ },
+ {
+ name: 'forks',
+ text: t('Forks')
+ },
+ {
+ name: 'node',
+ text: t('Node info')
+ }
+ ], [t]);
return (
@@ -38,26 +59,7 @@ function ExplorerApp ({ basePath, className, t }: Props): React.ReactElement
@@ -76,6 +78,32 @@ function ExplorerApp ({ basePath, className, t }: Props): React.ReactElement .details {
+// word-break: break-all;
+// }
+// }
+// `;
diff --git a/packages/app-extrinsics/package.json b/packages/app-extrinsics/package.json
index e531171e0820..bb282946800f 100644
--- a/packages/app-extrinsics/package.json
+++ b/packages/app-extrinsics/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-extrinsics",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"main": "index.js",
"repository": "https://github.com/polkadot-js/apps.git",
"author": "Jaco Greeff ",
@@ -10,9 +10,9 @@
"contributors": [],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40",
- "@polkadot/react-params": "^0.39.0-beta.40",
- "@polkadot/react-signer": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11",
+ "@polkadot/react-params": "^0.40.0-beta.11",
+ "@polkadot/react-signer": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-extrinsics/src/Balance.tsx b/packages/app-extrinsics/src/Balance.tsx
index ab766a2d0c54..ecc1606f3457 100644
--- a/packages/app-extrinsics/src/Balance.tsx
+++ b/packages/app-extrinsics/src/Balance.tsx
@@ -5,7 +5,7 @@
import { BareProps } from '@polkadot/react-api/types';
import React from 'react';
-import { DerivedBalances } from '@polkadot/api-derive/types';
+import { DerivedBalancesAll } from '@polkadot/api-derive/types';
import { InputBalance } from '@polkadot/react-components';
import { useApi, useCall } from '@polkadot/react-hooks';
@@ -16,7 +16,7 @@ interface Props extends BareProps {
export default function BalanceDisplay ({ className, label, params, style }: Props): React.ReactElement {
const { api } = useApi();
- const allBalances = useCall(api.derive.balances.all as any, [params]);
+ const allBalances = useCall(api.derive.balances.all as any, [params]);
return (
| null;
accountId?: string | null;
}
@@ -60,6 +59,7 @@ class Selection extends TxComponent {
label={t('Submit Unsigned')}
icon='sign-in'
extrinsic={extrinsic}
+ withSpinner
/>
{
);
}
- private onChangeExtrinsic = (method: Call | null = null): void => {
+ private onChangeExtrinsic = (method: SubmittableExtrinsic<'promise'> | null = null): void => {
this.nextState({ method });
}
@@ -104,7 +104,7 @@ class Selection extends TxComponent {
this.nextState({ accountId });
}
- private getExtrinsic (): SubmittableExtrinsic | null {
+ private getExtrinsic (): SubmittableExtrinsic<'promise'> | null {
const { api } = this.props;
const { method } = this.state;
diff --git a/packages/app-extrinsics/src/index.tsx b/packages/app-extrinsics/src/index.tsx
index c4a2351e9400..328b10a07cf7 100644
--- a/packages/app-extrinsics/src/index.tsx
+++ b/packages/app-extrinsics/src/index.tsx
@@ -2,27 +2,28 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
+import { AppProps as Props } from '@polkadot/react-components/types';
-import React from 'react';
+import React, { useMemo } from 'react';
import { Tabs } from '@polkadot/react-components';
import Selection from './Selection';
-import translate from './translate';
+import { useTranslation } from './translate';
-interface Props extends AppProps, I18nProps {}
+export default function ExtrinsicsApp ({ basePath }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const items = useMemo(() => [{
+ isRoot: true,
+ name: 'create',
+ text: t('Extrinsic submission')
+ }], [t]);
-function ExtrinsicsApp ({ basePath, t }: Props): React.ReactElement {
return (
{
}
export { ExtrinsicsApp };
-
-export default translate(ExtrinsicsApp);
diff --git a/packages/app-generic-asset/package.json b/packages/app-generic-asset/package.json
index 08753088ba93..01c6b8146cfc 100644
--- a/packages/app-generic-asset/package.json
+++ b/packages/app-generic-asset/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-generic-asset",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"description": "A basic GenericAsset transfer app",
"main": "index.js",
"scripts": {},
@@ -10,7 +10,7 @@
],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-generic-asset/src/Transfer.tsx b/packages/app-generic-asset/src/Transfer.tsx
index 7a775372a6ff..6a8587e562bf 100644
--- a/packages/app-generic-asset/src/Transfer.tsx
+++ b/packages/app-generic-asset/src/Transfer.tsx
@@ -118,7 +118,6 @@ function Transfer ({ assets, className, onClose, recipientId: propRecipientId, s
label={t('Make Transfer')}
icon='send'
onStart={onClose}
- withSpinner={false}
/>
diff --git a/packages/app-generic-asset/src/index.tsx b/packages/app-generic-asset/src/index.tsx
index e11192105935..61ada78e1f9a 100644
--- a/packages/app-generic-asset/src/index.tsx
+++ b/packages/app-generic-asset/src/index.tsx
@@ -2,36 +2,39 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
+import { AppProps, BareProps } from '@polkadot/react-components/types';
-import React from 'react';
+import React, { useMemo } from 'react';
import { Route, Switch } from 'react-router';
import { Tabs } from '@polkadot/react-components';
import Transfer from './Transfer';
import Assets from './Assets';
-import translate from './translate';
+import { useTranslation } from './translate';
-interface Props extends AppProps, BareProps, I18nProps {}
+interface Props extends AppProps, BareProps {}
+
+export default function AssetApp ({ basePath }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const items = useMemo(() => [
+ {
+ isRoot: true,
+ name: 'assets',
+ text: t('Assets')
+ },
+ {
+ name: 'transfer',
+ text: t('Transfer')
+ }
+ ], [t]);
-function AssetApp ({ basePath, t }: Props): React.ReactElement {
return (
@@ -41,5 +44,3 @@ function AssetApp ({ basePath, t }: Props): React.ReactElement {
);
}
-
-export default translate(AssetApp);
diff --git a/packages/app-generic-asset/src/modals/Create.tsx b/packages/app-generic-asset/src/modals/Create.tsx
index ff4636524953..5eca03b4d491 100644
--- a/packages/app-generic-asset/src/modals/Create.tsx
+++ b/packages/app-generic-asset/src/modals/Create.tsx
@@ -2,22 +2,23 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
-
import BN from 'bn.js';
import React, { useState } from 'react';
-import { InputNumber, Button, Input, Modal } from '@polkadot/react-components';
+import { Button, Input, InputNumber, Modal } from '@polkadot/react-components';
-import translate from '../translate';
+import { useTranslation } from '../translate';
export interface ModalProps {
onClose: () => void;
onRegister: (id: BN, name: string) => void;
}
-interface Props extends ModalProps, I18nProps {}
+interface Props extends ModalProps {
+ className?: string;
+}
-function Create ({ onClose, onRegister, t }: Props): React.ReactElement {
+export default function Create ({ onClose, onRegister }: Props): React.ReactElement {
+ const { t } = useTranslation();
const [assetId, setAssetId] = useState(new BN(0));
const [name, setName] = useState('new asset');
@@ -28,10 +29,7 @@ function Create ({ onClose, onRegister, t }: Props): React.ReactElement {
};
return (
-
+
{
value={name}
/>
-
-
-
+
+
);
}
-
-export default translate(Create);
diff --git a/packages/app-js/package.json b/packages/app-js/package.json
index afdfb58f0a6f..deb3d330607f 100644
--- a/packages/app-js/package.json
+++ b/packages/app-js/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-js",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"description": "A simple JavaScript console for playing with the API",
"main": "index.js",
"scripts": {},
@@ -10,8 +10,7 @@
],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40",
- "snappyjs": "^0.6.0"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-js/src/ActionButtons.tsx b/packages/app-js/src/ActionButtons.tsx
index 5488f6bfaa28..c3e70c132bda 100644
--- a/packages/app-js/src/ActionButtons.tsx
+++ b/packages/app-js/src/ActionButtons.tsx
@@ -2,19 +2,17 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { BareProps, I18nProps } from '@polkadot/react-components/types';
+import { BareProps } from '@polkadot/react-components/types';
import React, { useState } from 'react';
-import styled from 'styled-components';
import { Button as SUIB, Popup } from 'semantic-ui-react';
import { Button, Input } from '@polkadot/react-components';
-import translate from './translate';
+import { useTranslation } from './translate';
-interface Props extends BareProps, I18nProps {
+interface Props extends BareProps {
isCustomExample: boolean;
isRunning: boolean;
- generateLink: () => void;
removeSnippet: () => void;
runJs: () => void;
saveSnippet: (snippetName: string) => void;
@@ -22,18 +20,11 @@ interface Props extends BareProps, I18nProps {
stopJs: () => void;
}
-function ActionButtons ({ className, generateLink, isCustomExample, isRunning, removeSnippet, runJs, saveSnippet, stopJs, t }: Props): React.ReactElement {
+export default function ActionButtons ({ className, isCustomExample, isRunning, removeSnippet, runJs, saveSnippet, stopJs }: Props): React.ReactElement {
+ const { t } = useTranslation();
const [isOpen, setIsOpen] = useState(false);
- const [shareText, setShareText] = useState(t('Generate link to share code example'));
const [snippetName, setSnippetName] = useState('');
- const _generateLink = (): void => {
- setShareText(t('Copied to clipboard'));
- generateLink();
- };
- const _onShareClose = (): void => {
- setShareText(t('Generate link to share code example'));
- };
const _onChangeName = (snippetName: string): void => {
setSnippetName(snippetName);
};
@@ -51,19 +42,6 @@ function ActionButtons ({ className, generateLink, isCustomExample, isRunning, r
return (
-
- }
- wide='very'
- />
{
// FIXME: The
event trigger on='hover' does not work together with the ui-app'
//
component. That's why the original Semantic UI component is being used here.
@@ -137,7 +115,3 @@ function ActionButtons ({ className, generateLink, isCustomExample, isRunning, r
, key): Record => {
+ result[key] = null;
+
+ return result;
+ }, { global: null, window: null });
+
+ return {
+ ...nullObject,
+ api: api.clone(),
+ console: {
+ error: (...args: any[]): void => hookConsole('error', args),
+ log: (...args: any[]): void => hookConsole('log', args)
+ },
+ hashing,
+ keyring: isDevelopment
+ ? uiKeyring.keyring
+ : null,
+ setIsRunning,
+ types,
+ util
};
-
- try {
- const compStr = atob(base64);
- const compU8a = new Uint8Array(compStr.length);
-
- compU8a.forEach((_, i): void => {
- compU8a[i] = compStr.charCodeAt(i);
- });
-
- const u8a = snappy.uncompress(compU8a);
- const code = util.u8aToString(u8a);
-
- sharedExample.code = code;
- } catch (error) {
- const errorMessage = 'ERROR: Unable to decode code example from URL';
-
- console.error(`${errorMessage}: \n${error}`);
- sharedExample.code = `// ${errorMessage}`;
- }
-
- return sharedExample;
}
// FIXME This... ladies & gentlemen, is a mess that should be untangled
-function Playground ({ className, t }: Props): React.ReactElement {
- const { api, isDevelopment } = useApi();
- const history = useHistory();
- const { base64 } = useParams();
+function Playground ({ className }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const apiProps = useApi();
const injectedRef = useRef(null);
const [code, setCode] = useState('');
- const [isAnimated, setIsAnimated] = useState(true);
const [isCustomExample, setIsCustomExample] = useState(false);
const [isRunning, setIsRunning] = useState(false);
const [customExamples, setCustomExamples] = useState([]);
const [logs, setLogs] = useState([]);
const [options, setOptions] = useState([]);
const [selected, setSelected] = useState(snippets[0]);
- const [sharedExample, setSharedExample] = useState();
- // add snippet wrappers
+ // initialize all options
useEffect((): void => {
+ // add snippets if not already available (global)
if (!hasSnippetWrappers) {
snippets.forEach((snippet): void => {
- snippet.code = `${makeWrapper(isDevelopment)}${snippet.code}`;
+ snippet.code = `${makeWrapper(apiProps.isDevelopment)}${snippet.code}`;
});
hasSnippetWrappers = true;
}
- }, []);
- // initialize all options
- useEffect((): void => {
- const sharedExample = base64 ? decodeBase64(base64) : undefined;
const localData = {
examples: localStorage.getItem(STORE_EXAMPLES),
selectedValue: localStorage.getItem(STORE_SELECTED)
};
const customExamples = localData.examples ? JSON.parse(localData.examples) : [];
-
- const options: Snippet[] = sharedExample
- ? [sharedExample, ...customExamples, ...snippets]
- : [...customExamples, ...snippets];
-
+ const options: Snippet[] = [...customExamples, ...snippets];
const selected = options.find((option): boolean => option.value === localData.selectedValue);
setCustomExamples(customExamples);
setIsCustomExample((selected && selected.type === 'custom') || false);
setOptions(options);
- setSelected(sharedExample || selected || snippets[0]);
- setSharedExample(sharedExample);
+ setSelected(selected || snippets[0]);
}, []);
useEffect((): void => {
@@ -136,32 +117,6 @@ function Playground ({ className, t }: Props): React.ReactElement {
logs.push({ args, type });
setLogs(logs.slice(0));
};
- const _copyToClipboard = (link: string): void => {
- // See https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f
- const el = document.createElement('textarea');
-
- el.value = link;
- el.setAttribute('readonly', '');
- el.style.position = 'absolute';
- el.style.left = '-9999px';
- document.body.appendChild(el);
-
- const existingSelection = document.getSelection();
- const selected = existingSelection && existingSelection.rangeCount > 0
- ? existingSelection.getRangeAt(0)
- : undefined;
-
- el.select();
- document.execCommand('copy');
- document.body.removeChild(el);
-
- if (existingSelection && selected) {
- existingSelection.removeAllRanges();
- existingSelection.addRange(selected);
- }
-
- setIsAnimated(!isAnimated);
- };
const _stopJs = (): void => {
if (injectedRef.current) {
injectedRef.current.api.disconnect();
@@ -174,30 +129,21 @@ function Playground ({ className, t }: Props): React.ReactElement {
setIsRunning(true);
_clearConsole();
- injectedRef.current = {
- api: api.clone(),
- console: {
- error: (...args: any[]): void => _hookConsole('error', args),
- log: (...args: any[]): void => _hookConsole('log', args)
- },
- global: null,
- hashing,
- keyring: isDevelopment
- ? uiKeyring.keyring
- : null,
- types,
- util,
- window: null
- };
+ injectedRef.current = setupInjected(apiProps, setIsRunning, _hookConsole);
await injectedRef.current.api.isReady;
- // squash into a single line so exceptions (with line numbers) maps to the same line/origin
- // as we have in the editor view (TODO: Make the console.error here actually return the full stack)
- const exec = `(async ({${Object.keys(injectedRef.current).join(',')}}) => { try { ${code} \n } catch (error) { console.error(error); } })(injected);`;
+ try {
+ // squash into a single line so exceptions (with line numbers) maps to the
+ // same line/origin as we have in the editor view
+ // TODO: Make the console.error here actually return the full stack
+ const exec = `(async ({${Object.keys(injectedRef.current).sort().join(',')}}) => { try { ${code} \n } catch (error) { console.error(error); setIsRunning(false); } })(injected);`;
- // eslint-disable-next-line no-new-func
- new Function('injected', exec)(injectedRef.current);
+ // eslint-disable-next-line no-new-func
+ new Function('injected', exec).bind({}, injectedRef.current)();
+ } catch (error) {
+ injectedRef.current.console.error(error);
+ }
setIsRunning(false);
};
@@ -216,34 +162,13 @@ function Playground ({ className, t }: Props): React.ReactElement {
}
}
};
- const _generateLink = (): void => {
- const u8a = util.stringToU8a(code);
- const compU8a = snappy.compress(u8a);
- const compStr = compU8a.reduce((str: string, ch: number): string => {
- return str + String.fromCharCode(ch);
- }, '');
-
- const base64code = btoa(compStr);
- const path = `/js/share/${base64code}`;
-
- if (base64code !== base64) {
- history.push(path);
- }
-
- const basePath = window.location.pathname.replace('/', '').length > 0
- ? `${window.location.origin}/${window.location.pathname.replace('/', '')}`
- : `${window.location.origin}`;
-
- _copyToClipboard(`${basePath}/#${path}`);
- };
const _removeSnippet = (): void => {
const filtered = customExamples.filter((value): boolean => value.value !== selected.value);
const nextOptions = [...filtered, ...snippets];
setCustomExamples(filtered);
setIsCustomExample(nextOptions[0].type === 'custom');
- setOptions(sharedExample ? [sharedExample, ...nextOptions] : nextOptions);
-
+ setOptions(nextOptions);
_selectExample(nextOptions[0].value);
localStorage.setItem(STORE_EXAMPLES, JSON.stringify(filtered));
};
@@ -257,20 +182,13 @@ function Playground ({ className, t }: Props): React.ReactElement {
type: 'custom',
value: `custom-${Date.now()}`
};
- const nextOptions = [snapshot, ...customExamples, ...snippets];
- const options = selected.type === 'shared'
- ? nextOptions
- : sharedExample
- ? [sharedExample, ...nextOptions]
- : nextOptions;
+ const options = [snapshot, ...customExamples, ...snippets];
localStorage.setItem(STORE_EXAMPLES, JSON.stringify([snapshot, ...customExamples]));
-
setCustomExamples([snapshot, ...customExamples]);
setIsCustomExample(true);
setOptions(options);
setSelected(snapshot);
- setSharedExample(selected.type === 'shared' ? undefined : sharedExample);
};
const snippetName = selected.type === 'custom' ? selected.text : undefined;
@@ -280,6 +198,7 @@ function Playground ({ className, t }: Props): React.ReactElement {
-
-
-
-
+
+
{
);
}
-export default translate(
- styled(Playground)`
+export default styled(Playground)`
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ padding: 1rem 0 0;
+
+ .js--Content {
+ align-content: stretch;
+ align-items: stretch;
display: flex;
- flex-direction: column;
- height: 100vh;
- padding: 1rem 0 0;
+ height: 100%;
+ justify-content: space-between;
+ margin-bottom: 0;
+ }
+
+ .js--Dropdown {
+ position: relative;
+ z-index: 200;
- .js--Content {
- align-content: stretch;
- align-items: stretch;
+ .dropdown .menu > .item {
display: flex;
- height: 100%;
+ flex-direction: row-reverse;
justify-content: space-between;
- margin-bottom: 0;
}
+ }
- .js--Dropdown {
- margin-right: 100px;
- position: relative;
- z-index: 200;
+ .js--Editor,
+ .js--Output {
+ min-width: 200px;
- .dropdown .menu > .item {
- display: flex;
- flex-direction: row-reverse;
- justify-content: space-between;
- }
+ .action-button {
+ position: absolute;
+ right: 0.25rem;
+ top: 0.5rem;
+ z-index: 100;
}
+ }
- .js--Editor,
- .js--Output {
- min-width: 200px;
+ .js--Editor {
+ flex-grow: 1;
+ overflow: auto;
+ padding: 0;
+ position: relative;
+ resize: horizontal;
+ width: 60%;
- .action-button {
- position: absolute;
- right: 0.25rem;
- top: 0.5rem;
- z-index: 100;
- }
+ textarea {
+ outline: 0;
}
- .js--Editor {
- flex-grow: 1;
- overflow: auto;
- padding: 0;
- position: relative;
- resize: horizontal;
- width: 60%;
-
- textarea {
- outline: 0;
- }
-
- .codeflask {
- background: transparent;
- }
+ .codeflask {
+ background: transparent;
+ }
- .codeflask--has-line-numbers {
- z-index: 0;
- }
+ .codeflask--has-line-numbers {
+ z-index: 0;
+ }
- .codeflask--has-line-numbers .codeflask__flatten {
- font-size: 12px;
- line-height: 18px;
- min-width: calc(100% - 40px);
- padding-top: 50px;
- width: auto;
- }
+ .codeflask--has-line-numbers .codeflask__flatten {
+ font-size: 12px;
+ line-height: 18px;
+ min-width: calc(100% - 40px);
+ padding-top: 50px;
+ width: auto;
+ }
- .codeflask__lines {
- background: #fafafa;
- line-height: 18px;
- padding-top: 50px;
- z-index: 100;
- }
+ .codeflask__lines {
+ background: #fafafa;
+ line-height: 18px;
+ padding-top: 50px;
+ z-index: 100;
+ }
- &::after {
- bottom: 0;
- content: '↔';
- cursor: col-resize;
- font-size: 20px;
- height: 20px;
- line-height: 18px;
- position: absolute;
- right: 0;
- width: 22px;
- z-index: 1;
- }
+ &::after {
+ bottom: 0;
+ content: '↔';
+ cursor: col-resize;
+ font-size: 20px;
+ height: 20px;
+ line-height: 18px;
+ position: absolute;
+ right: 0;
+ width: 22px;
+ z-index: 1;
}
+ }
- .ui.popup.popup-local {
- display: flex;
- flex: 1 1 100%;
- max-width: 300px;
+ .ui.popup.popup-local {
+ display: flex;
+ flex: 1 1 100%;
+ max-width: 300px;
- .button {
- margin: 0;
- }
+ .button {
+ margin: 0;
}
- `
-);
+ }
+`;
diff --git a/packages/app-js/src/index.tsx b/packages/app-js/src/index.tsx
index 6becd8c08835..0261bb1387ce 100644
--- a/packages/app-js/src/index.tsx
+++ b/packages/app-js/src/index.tsx
@@ -2,20 +2,12 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { AppProps, BareProps } from '@polkadot/react-components/types';
+import { AppProps as Props } from '@polkadot/react-components/types';
import React from 'react';
-import { Route, Switch } from 'react-router';
import Playground from './Playground';
-interface Props extends AppProps, BareProps {}
-
-export default function ScriptingApp ({ basePath }: Props): React.ReactElement {
- return (
-
-
- );
+export default function JsApp (props: Props): React.ReactElement {
+ return {
const isValid = !isBusy && isCodeValid && isNameValid;
return (
-
- {this.renderCancelButton()}
-
+ {
const isValid = !isBusy && accountId && isNameValid && isWasmValid && !gasLimit.isZero() && !!accountId;
return (
-
- {this.renderCancelButton()}
-
+ {
const isValid = isNameValid && isAddressValid && isAbiValid;
return (
-
- {this.renderCancelButton()}
-
+ {
const isValid = isAbiValid && isHashValid && isEndowValid && isGasValid && !!accountId && isNameValid;
return (
-
- {this.renderCancelButton()}
-
+
return (
-
- {t(this.headerText)}
-
{this.renderContent()}
-
+
{this.renderButtons()}
@@ -160,22 +157,6 @@ class ContractModal
);
}
- protected renderCancelButton (): React.ReactNode {
- const { t } = this.props;
-
- return (
- <>
-
{t('This operation does not impact the associated on-chain code or any of its contracts.')}
-
+
{
+ const { t } = useTranslation();
+ const items = useMemo(() => [
+ {
+ isRoot: true,
+ name: 'overview',
+ text: t('Parachains overview')
+ }
+ ], [t]);
-function ParachainsApp ({ basePath, t }: Props): React.ReactElement {
return (
@@ -34,5 +37,3 @@ function ParachainsApp ({ basePath, t }: Props): React.ReactElement {
);
}
-
-export default translate(ParachainsApp);
diff --git a/packages/app-settings/package.json b/packages/app-settings/package.json
index a9974419d834..0f48cf65d307 100644
--- a/packages/app-settings/package.json
+++ b/packages/app-settings/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-settings",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"description": "Settings management",
"main": "index.js",
"scripts": {},
@@ -10,9 +10,9 @@
],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40",
- "@polkadot/react-query": "^0.39.0-beta.40",
- "query-string": "^6.8.3"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11",
+ "@polkadot/react-query": "^0.40.0-beta.11",
+ "query-string": "^6.10.1"
}
}
diff --git a/packages/app-settings/src/Developer.tsx b/packages/app-settings/src/Developer.tsx
index 0820f7b1b65d..2273f62a0cb1 100644
--- a/packages/app-settings/src/Developer.tsx
+++ b/packages/app-settings/src/Developer.tsx
@@ -2,7 +2,7 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
+import { AppProps as Props } from '@polkadot/react-components/types';
import React, { useEffect, useState } from 'react';
import store from 'store';
@@ -11,14 +11,13 @@ import { registry } from '@polkadot/react-api';
import { Button, Editor, InputFile } from '@polkadot/react-components';
import { isJsonObject, stringToU8a, u8aToString } from '@polkadot/util';
-import translate from './translate';
-
-interface Props extends AppProps, I18nProps {}
+import { useTranslation } from './translate';
const EMPTY_CODE = '{\n\n}';
const EMPTY_TYPES = {};
-function Developer ({ className, onStatusChange, t }: Props): React.ReactElement {
+function Developer ({ className, onStatusChange }: Props): React.ReactElement {
+ const { t } = useTranslation();
const [code, setCode] = useState(EMPTY_CODE);
const [isJsonValid, setIsJsonValid] = useState(true);
const [isTypesValid, setIsTypesValid] = useState(true);
@@ -160,12 +159,10 @@ function Developer ({ className, onStatusChange, t }: Props): React.ReactElement
);
}
-export default translate(
- styled(Developer)`
- .editor {
- height: 21rem;
- margin-left: 2rem;
- position: relative;
- }
- `
-);
+export default styled(Developer)`
+ .editor {
+ height: 21rem;
+ margin-left: 2rem;
+ position: relative;
+ }
+`;
diff --git a/packages/app-settings/src/General.tsx b/packages/app-settings/src/General.tsx
index 49c298b18931..00311f2c2082 100644
--- a/packages/app-settings/src/General.tsx
+++ b/packages/app-settings/src/General.tsx
@@ -2,49 +2,43 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
-import { Option, SetOption } from './types';
+import { Option } from './types';
import React, { useEffect, useState, useMemo } from 'react';
import { isLedgerCapable } from '@polkadot/react-api';
-import { Button, Dropdown } from '@polkadot/react-components';
+import { Button, ButtonCancel, Dropdown } from '@polkadot/react-components';
import uiSettings, { SettingsStruct } from '@polkadot/ui-settings';
-import translate from './translate';
+import { availableLanguages } from './available';
+import { useTranslation } from './translate';
import { createIdenticon, createOption, save, saveAndReload } from './util';
import SelectUrl from './SelectUrl';
-interface Props extends I18nProps{
+interface Props {
+ className?: string;
isModalContent?: boolean;
- onClose?: () => void;
+ onClose: () => void;
}
-const prefixOptions = uiSettings.availablePrefixes.map((o): Option => createOption(o, ['default']));
-const iconOptions = uiSettings.availableIcons.map((o): Option => createIdenticon(o, ['default']));
const ledgerConnOptions = uiSettings.availableLedgerConn;
-const availableLanguages: SetOption[] = [
- {
- text: 'Default browser language (auto-detect)',
- value: 'default'
- },
- {
- text: 'English',
- value: 'en'
- },
- {
- text: '汉语',
- value: 'zh'
- },
- {
- text: '日本語',
- value: 'ja'
- }
-];
-function General ({ className, isModalContent, onClose, t }: Props): React.ReactElement {
+export default function General ({ className, isModalContent, onClose }: Props): React.ReactElement {
+ const { t } = useTranslation();
// tri-state: null = nothing changed, false = no reload, true = reload required
const [changed, setChanged] = useState(null);
const [settings, setSettings] = useState(uiSettings.get());
+ const iconOptions = useMemo((): Option[] => {
+ return uiSettings.availableIcons.map((o): Option => createIdenticon(t, o, ['default']));
+ }, [t]);
+ const prefixOptions = useMemo((): Option[] => {
+ return uiSettings.availablePrefixes.map((o): Option => createOption(t, o, ['default']));
+ }, [t]);
+ const translateLanguages = useMemo((): Option[] => {
+ return availableLanguages.map(({ text, value, withI18n }) => ({
+ value,
+ text: withI18n ? t(text as string) : text
+ }));
+ }, [t]);
useEffect((): void => {
const prev = uiSettings.get();
@@ -67,13 +61,6 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
setChanged(null);
};
- const translatedAvailableLanguages = useMemo(() =>
- availableLanguages.map(option => ({
- ...option,
- text: t(option.text)
- }))
- , [t]);
-
const { icon, i18nLang, ledgerConn, prefix, uiMode } = settings;
return (
@@ -124,7 +111,7 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
defaultValue={i18nLang}
label={t('default interface language')}
onChange={_handleChange('i18nLang')}
- options={translatedAvailableLanguages}
+ options={translateLanguages}
/>
@@ -132,12 +119,7 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
{isModalContent && (
<>
- {
+function SelectUrl ({ className, onChange }: Props): React.ReactElement {
+ const { t } = useTranslation();
const [info, setInfo] = useState(getInitialState());
const { isCustom, isValid, url } = info;
const help = t('Select the remote endpoint, either from the dropdown on manual entered via the custom toggle');
const label = t('remote node/endpoint to connect to');
+ const translatedEndpoints = useMemo(() => {
+ return availableEndpoints.map((option): Option => createOption(t, option, ['local']));
+ }, [t]);
+
+ useEffect((): void => {
+ if (onChange && info.isValid) {
+ onChange(info.url);
+ }
+ }, [info]);
+
const _onChangeUrl = (url: string): void => setInfo({ ...info, ...makeUrl(url) });
const _onChangeCustom = (isCustom: boolean): void =>
setInfo({
@@ -75,12 +84,6 @@ function SelectUrl ({ className, onChange, t }: Props): React.ReactElement {
- if (onChange && info.isValid) {
- onChange(info.url);
- }
- }, [info]);
-
return (
{
@@ -97,7 +100,7 @@ function SelectUrl ({ className, onChange, t }: Props): React.ReactElement
}
{
- const _renderDeveloper = (): React.ReactNode => {
- return (
- {
+ const { t } = useTranslation();
+ const items = useMemo(() => [
+ {
+ isRoot: true,
+ name: 'general',
+ text: t('General')
+ },
+ {
+ name: 'developer',
+ text: t('Developer')
+ }
+ ], [t]);
return (
@@ -36,25 +40,18 @@ function SettingsApp (props: Props): React.ReactElement {
-
+
);
}
-
-export default translate(SettingsApp);
diff --git a/packages/app-settings/src/types.ts b/packages/app-settings/src/types.ts
index 12c6c42620b1..46d70c42ffca 100644
--- a/packages/app-settings/src/types.ts
+++ b/packages/app-settings/src/types.ts
@@ -3,12 +3,8 @@
// of the Apache-2.0 license. See the LICENSE file for details.
export interface Option {
- text: React.ReactNode;
- value: string | number;
-}
-
-export interface SetOption {
info?: string;
- text: string;
+ text: React.ReactNode;
value: string | number;
+ withI18n?: boolean;
}
diff --git a/packages/app-settings/src/util.tsx b/packages/app-settings/src/util.tsx
index 924d295b36ca..7fb5fd8d5870 100644
--- a/packages/app-settings/src/util.tsx
+++ b/packages/app-settings/src/util.tsx
@@ -2,14 +2,14 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { SettingsStruct } from '@plasm/ui-settings/types';
-import { Option, SetOption } from './types';
+import { SettingsStruct } from '@polkadot/ui-settings/types';
+import { Option } from './types';
import React from 'react';
import { ChainImg, IdentityIcon } from '@polkadot/react-components';
-import uiSettings from '@plasm/ui-settings';
+import uiSettings from '@polkadot/ui-settings';
-export function createOption ({ info, text, value }: SetOption, overrides: string[] = [], override = 'empty'): Option {
+export function createOption (t: (input: any) => string, { info, text, value, withI18n }: Option, overrides: string[] = [], override = 'empty'): Option {
return {
text: (
- {text}
+ {withI18n ? t(text) : text}
),
value
};
}
-export function createIdenticon ({ info, text, value }: SetOption, overrides: string[] = [], override = 'empty'): Option {
+export function createIdenticon (t: (input: any) => string, { info, text, value, withI18n }: Option, overrides: string[] = [], override = 'empty'): Option {
return {
text: (
- {text}
+ {withI18n ? t(text) : text}
),
value
diff --git a/packages/app-society/LICENSE b/packages/app-society/LICENSE
new file mode 100644
index 000000000000..0d381b2e97dc
--- /dev/null
+++ b/packages/app-society/LICENSE
@@ -0,0 +1,201 @@
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+Copyright [yyyy] [name of copyright owner]
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/packages/app-society/README.md b/packages/app-society/README.md
new file mode 100644
index 000000000000..1b410883198f
--- /dev/null
+++ b/packages/app-society/README.md
@@ -0,0 +1 @@
+# @polkadot/app-society
diff --git a/packages/app-society/package.json b/packages/app-society/package.json
new file mode 100644
index 000000000000..c3697f7618f1
--- /dev/null
+++ b/packages/app-society/package.json
@@ -0,0 +1,13 @@
+{
+ "name": "@polkadot/app-society",
+ "version": "0.40.0-beta.11",
+ "description": "A society",
+ "main": "index.js",
+ "scripts": {},
+ "author": "Jaco Greeff ",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11"
+ }
+}
diff --git a/packages/app-society/src/Overview/Bid.tsx b/packages/app-society/src/Overview/Bid.tsx
new file mode 100644
index 000000000000..49b4b42ef28e
--- /dev/null
+++ b/packages/app-society/src/Overview/Bid.tsx
@@ -0,0 +1,37 @@
+// Copyright 2017-2020 @polkadot/app-society authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Bid } from '@polkadot/types/interfaces';
+
+import React from 'react';
+import { AddressSmall } from '@polkadot/react-components';
+import { FormatBalance } from '@polkadot/react-query';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+ value: Bid;
+}
+
+export default function BidRow ({ value: { who, kind, value } }: Props): React.ReactElement {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
+ {t('kind')}
+ {kind.type}
+
+
+ {t('value')}}
+ value={value}
+ />
+
+
+ );
+}
diff --git a/packages/app-society/src/Overview/Bids.tsx b/packages/app-society/src/Overview/Bids.tsx
new file mode 100644
index 000000000000..6ba10987c324
--- /dev/null
+++ b/packages/app-society/src/Overview/Bids.tsx
@@ -0,0 +1,43 @@
+// Copyright 2017-2020 @polkadot/app-society authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Bid } from '@polkadot/types/interfaces';
+
+import React from 'react';
+import { Table } from '@polkadot/react-components';
+import { useApi, useCall } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate';
+import BidRow from './Bid';
+
+interface Props {
+ className?: string;
+}
+
+export default function Bids ({ className }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const { api } = useApi();
+ const bids = useCall(api.query.society.bids, []);
+
+ return (
+
+
{t('bids')}
+ {bids?.length
+ ? (
+
+
+ {bids.map((bid): React.ReactNode => (
+
+
+ )
+ : t('No bids')
+ }
+
{
+ const { t } = useTranslation();
+ const { api } = useApi();
+ const votes = useCall(api.query.society.votes.multi as any, [allMembers.map((memberId): [AccountId, string] => [accountId, memberId])] as any, {
+ transform: (voteOpts: Option[]): VoteType[] =>
+ voteOpts
+ .map((voteOpt, index): [string, Option] => [allMembers[index], voteOpt])
+ .filter(([, voteOpt]): boolean => voteOpt.isSome)
+ .map(([accountId, voteOpt]): VoteType => [accountId, voteOpt.unwrap()])
+ });
+
+ return (
+
+
+
+
+ {t('kind')}
+ {kind.type}
+
+
+ {t('value')}}
+ value={value}
+ />
+
+
+
+
+ );
+}
diff --git a/packages/app-society/src/Overview/CandidateVoting.tsx b/packages/app-society/src/Overview/CandidateVoting.tsx
new file mode 100644
index 000000000000..40762bfbe844
--- /dev/null
+++ b/packages/app-society/src/Overview/CandidateVoting.tsx
@@ -0,0 +1,67 @@
+// Copyright 2017-2020 @polkadot/app-society authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React, { useMemo, useState } from 'react';
+import { useToggle } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate';
+import { Button, Dropdown, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+
+interface Props {
+ candidateId: string;
+ isMember: boolean;
+ ownMembers: string[];
+}
+
+export default function CandidateVoting ({ candidateId, isMember, ownMembers }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const [isVisible, toggleVisible] = useToggle();
+ const [vote, setVote] = useState(true);
+ const [accountId, setAccountId] = useState(null);
+ const voteOpts = useMemo(() => [
+ { text: t('Aye, I approve'), value: true },
+ { text: t('Nay, I do not approve'), value: false }
+ ], [t]);
+
+ return (
+ <>
+ {isVisible && (
+
+
+
+
+
+
+ )}
+ {
+ const { t } = useTranslation();
+ const { api } = useApi();
+ const candidates = useCall(api.derive.society.candidates, []);
+
+ return (
+
+
{t('candidates')}
+ {candidates?.length
+ ? (
+
+
+ {candidates.map((candidate): React.ReactNode => (
+
+
+ )
+ : t('No candidates')
+ }
+
| null {
+ const { t } = useTranslation();
+ const { api } = useApi();
+ const votes = useCall(api.derive.society.members, [], {
+ transform: (members: DeriveSocietyMember[]): VoteType[] =>
+ members
+ .filter(({ vote }): boolean => !!vote)
+ .map(({ accountId, vote }): VoteType => [accountId.toString(), vote as SocietyVote])
+ });
+
+ if (!info || !info.hasDefender || !info.defender) {
+ return null;
+ }
+
+ return (
+
+ );
+}
diff --git a/packages/app-society/src/Overview/DefenderVoting.tsx b/packages/app-society/src/Overview/DefenderVoting.tsx
new file mode 100644
index 000000000000..5b5c5dcdb137
--- /dev/null
+++ b/packages/app-society/src/Overview/DefenderVoting.tsx
@@ -0,0 +1,66 @@
+// Copyright 2017-2020 @polkadot/app-society authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React, { useMemo, useState } from 'react';
+import { useToggle } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate';
+import { Button, Dropdown, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+
+interface Props {
+ isMember: boolean;
+ ownMembers: string[];
+}
+
+export default function DefenderVoting ({ isMember, ownMembers }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const [isVisible, toggleVisible] = useToggle();
+ const [vote, setVote] = useState(true);
+ const [accountId, setAccountId] = useState(null);
+ const voteOpts = useMemo(() => [
+ { text: t('Aye, I approve'), value: true },
+ { text: t('Nay, I do not approve'), value: false }
+ ], [t]);
+
+ return (
+ <>
+ {isVisible && (
+
+
+
+
+
+
+ )}
+ {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
+ {t('strikes')}
+ {strikes.toString()}
+
+
+ );
+}
diff --git a/packages/app-society/src/Overview/Members.tsx b/packages/app-society/src/Overview/Members.tsx
new file mode 100644
index 000000000000..9acbbd56bdad
--- /dev/null
+++ b/packages/app-society/src/Overview/Members.tsx
@@ -0,0 +1,51 @@
+// Copyright 2017-2020 @polkadot/app-society authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { DeriveSociety, DeriveSocietyMember } from '@polkadot/api-derive/types';
+
+import React, { useEffect, useState } from 'react';
+import { Table } from '@polkadot/react-components';
+import { useApi, useCall } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate';
+import Member from './Member';
+
+interface Props {
+ className?: string;
+ info?: DeriveSociety;
+}
+
+export default function Members ({ className, info }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const { api } = useApi();
+ const members = useCall(api.derive.society.members, []);
+ const [filtered, setFiltered] = useState([]);
+
+ useEffect((): void => {
+ members && setFiltered(
+ members.filter((member): boolean => !info || !info.hasDefender || !member.accountId.eq(info.defender))
+ );
+ }, [info, members]);
+
+ return (
+
+
{t('members')}
+ {filtered.length
+ ? (
+
+
+ {filtered.map((member): React.ReactNode => (
+
+
+ )
+ : t('No active members')
+ }
+
| null {
+ if (!value) {
+ return null;
+ }
+
+ return (
+
+
+
+ );
+}
+
+function Summary ({ className, info }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const { api } = useApi();
+ const members = useCall(api.derive.society.members, []);
+ const bestNumber = useCall(api.derive.chain.bestNumber, []);
+
+ const pot = info?.pot.gtn(0)
+ ? info.pot.toString()
+ : null;
+
+ return (
+
+
+
+ {info && members && (
+
+ {members.length}/{info.maxMembers.toString()}
+
+ )}
+
+ {bestNumber && (
+ <>
+
+
+
+ )}
+
+
+ );
+}
+
+export default styled(Summary)`
+ .society--header--account {
+ white-space: nowrap;
+
+ .ui--AccountIndex,
+ .ui--IdentityIcon {
+ display: inline-block;
+ }
+
+ .ui--IdentityIcon {
+ margin-right: 0.5rem;
+ }
+ }
+`;
diff --git a/packages/app-society/src/Overview/VoteDisplay.tsx b/packages/app-society/src/Overview/VoteDisplay.tsx
new file mode 100644
index 000000000000..9fef982fd2ff
--- /dev/null
+++ b/packages/app-society/src/Overview/VoteDisplay.tsx
@@ -0,0 +1,79 @@
+// Copyright 2017-2020 @polkadot/app-society authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { VoteSplit, VoteType } from '../types';
+
+import React, { useEffect, useState } from 'react';
+import { AddressMini } from '@polkadot/react-components';
+
+import { useTranslation } from '../translate';
+
+interface Props {
+ votes?: VoteType[];
+}
+
+export default function VoteDisplay ({ votes }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const [{ allAye, allNay, allSkeptic }, setVoteSplit] = useState({ allAye: [], allNay: [], allSkeptic: [] });
+
+ useEffect((): void => {
+ if (votes) {
+ setVoteSplit({
+ allAye: votes.filter(([, vote]): boolean => vote.isApprove),
+ allNay: votes.filter(([, vote]): boolean => vote.isReject),
+ allSkeptic: votes.filter(([, vote]): boolean => vote.isSkeptic)
+ });
+ }
+ }, [votes]);
+
+ return (
+ <>
+
+ {allSkeptic.length !== 0 && (
+
+
+ {t('Skeptics ({{count}})', { replace: { count: allSkeptic.length } })}
+
+ {allSkeptic.map(([who]): React.ReactNode =>
+
+ )}
+
+
+ {allAye.length !== 0 && (
+
+
+ {t('Approvals ({{count}})', { replace: { count: allAye.length } })}
+
+ {allAye.map(([who]): React.ReactNode =>
+
+ )}
+
+
+ {allNay.length !== 0 && (
+
+
+ {t('Rejections ({{count}})', { replace: { count: allNay.length } })}
+
+ {allNay.map(([who]): React.ReactNode =>
+
+ )}
+
+
+ );
+}
diff --git a/packages/app-society/src/Overview/index.tsx b/packages/app-society/src/Overview/index.tsx
new file mode 100644
index 000000000000..380205bdfbf5
--- /dev/null
+++ b/packages/app-society/src/Overview/index.tsx
@@ -0,0 +1,51 @@
+// Copyright 2017-2020 @polkadot/app-society authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { DeriveSociety } from '@polkadot/api-derive/types';
+
+import React from 'react';
+import styled from 'styled-components';
+import { useApi, useCall } from '@polkadot/react-hooks';
+
+import useMembers from '../useMembers';
+import Bids from './Bids';
+import Candidates from './Candidates';
+import Defender from './Defender';
+import Members from './Members';
+import Summary from './Summary';
+
+interface Props {
+ className?: string;
+}
+
+function Overview ({ className }: Props): React.ReactElement {
+ const { api } = useApi();
+ const info = useCall(api.derive.society.info, []);
+ const { allMembers, isMember, ownMembers } = useMembers();
+
+ return (
+
+
+ );
+}
+
+export default styled(Overview)`
+ .overviewSection {
+ margin-bottom: 1.5rem;
+ }
+`;
diff --git a/packages/app-society/src/index.tsx b/packages/app-society/src/index.tsx
new file mode 100644
index 000000000000..320e90510c6e
--- /dev/null
+++ b/packages/app-society/src/index.tsx
@@ -0,0 +1,39 @@
+// Copyright 2017-2020 @polkadot/app-society authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { AppProps, BareProps } from '@polkadot/react-components/types';
+
+import React, { useMemo } from 'react';
+import { Route, Switch } from 'react-router';
+import { Tabs } from '@polkadot/react-components';
+
+import Overview from './Overview';
+import { useTranslation } from './translate';
+
+interface Props extends AppProps, BareProps {}
+
+export default function SocietyApp ({ basePath, className }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const items = useMemo(() => [
+ {
+ isRoot: true,
+ name: 'overview',
+ text: t('Society overview')
+ }
+ ], [t]);
+
+ return (
+
+
+
+
+
+ );
+}
diff --git a/packages/app-society/src/translate.ts b/packages/app-society/src/translate.ts
new file mode 100644
index 000000000000..e1216aa50f1d
--- /dev/null
+++ b/packages/app-society/src/translate.ts
@@ -0,0 +1,11 @@
+// Copyright 2017-2020 @polkadot/app-society authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
+
+export function useTranslation (): UseTranslationResponse {
+ return useTranslationBase('app-society');
+}
+
+export default withTranslation(['app-society']);
diff --git a/packages/app-society/src/types.ts b/packages/app-society/src/types.ts
new file mode 100644
index 000000000000..31efbb3838ec
--- /dev/null
+++ b/packages/app-society/src/types.ts
@@ -0,0 +1,19 @@
+// Copyright 2017-2020 @polkadot/app-society authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { SocietyVote } from '@polkadot/types/interfaces';
+
+export interface OwnMembers {
+ allMembers: string[];
+ isMember: boolean;
+ ownMembers: string[];
+}
+
+export interface VoteSplit {
+ allAye: VoteType[];
+ allNay: VoteType[];
+ allSkeptic: VoteType[];
+}
+
+export type VoteType = [string, SocietyVote];
diff --git a/packages/app-society/src/useMembers.ts b/packages/app-society/src/useMembers.ts
new file mode 100644
index 000000000000..48629ec9c221
--- /dev/null
+++ b/packages/app-society/src/useMembers.ts
@@ -0,0 +1,30 @@
+// Copyright 2017-2020 @polkadot/app-society authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { DeriveSocietyMember } from '@polkadot/api-derive/types';
+import { OwnMembers } from './types';
+
+import { useEffect, useState } from 'react';
+import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
+
+export default function useMembers (): OwnMembers {
+ const { api } = useApi();
+ const { allAccounts } = useAccounts();
+ const members = useCall(api.derive.society?.members, []);
+ const [ownState, setOwnState] = useState({ allMembers: [], isMember: false, ownMembers: [] });
+
+ useEffect((): void => {
+ if (allAccounts && members) {
+ const allMembers = members
+ .filter((member): boolean => !member.isSuspended)
+ .map((member): string => member.accountId.toString());
+ const ownMembers = allMembers
+ .filter((address): boolean => allAccounts.includes(address));
+
+ setOwnState({ allMembers, isMember: ownMembers.length !== 0, ownMembers });
+ }
+ }, [allAccounts, members]);
+
+ return ownState;
+}
diff --git a/packages/app-staking/package.json b/packages/app-staking/package.json
index 97caffc75368..5a3e7d9778be 100644
--- a/packages/app-staking/package.json
+++ b/packages/app-staking/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-staking",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"description": "A basic staking app",
"main": "index.js",
"scripts": {},
@@ -10,9 +10,9 @@
],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/app-explorer": "^0.39.0-beta.40",
- "@polkadot/react-components": "^0.39.0-beta.40",
- "@polkadot/react-query": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/app-explorer": "^0.40.0-beta.11",
+ "@polkadot/react-components": "^0.40.0-beta.11",
+ "@polkadot/react-query": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-staking/src/Actions/Account/BondExtra.tsx b/packages/app-staking/src/Actions/Account/BondExtra.tsx
index 66e56cc2a2f2..2e51fe227604 100644
--- a/packages/app-staking/src/Actions/Account/BondExtra.tsx
+++ b/packages/app-staking/src/Actions/Account/BondExtra.tsx
@@ -9,7 +9,7 @@ import { CalculateBalanceProps } from '../../types';
import BN from 'bn.js';
import React from 'react';
-import { Available, Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { Available, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { calcTxLength } from '@polkadot/react-signer/Checks';
import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
import { withCalls, withApi, withMulti } from '@polkadot/react-api/hoc';
@@ -68,30 +68,21 @@ class BondExtra extends TxComponent {
{this.renderContent()}
-
-
-
+
+
);
@@ -100,7 +91,6 @@ class BondExtra extends TxComponent {
private renderContent (): React.ReactNode {
const { stashId, systemChain, t } = this.props;
const { amountError, maxAdditional, maxBalance } = this.state;
- const transferrable = {t('transferrable')} ;
const isUnsafeChain = detectUnsafe(systemChain);
return (
@@ -110,7 +100,7 @@ class BondExtra extends TxComponent {
defaultValue={stashId}
isDisabled
label={t('stash account')}
- labelExtra={{t('transferrable')}} params={stashId} />}
/>
{
this.setState((prevState: State): State => {
const { api } = this.props;
const { amountError = prevState.amountError, maxAdditional = prevState.maxAdditional, maxBalance = prevState.maxBalance } = newState;
- const extrinsic = (maxAdditional && maxAdditional.gte(ZERO))
+ const extrinsic: any = (maxAdditional && maxAdditional.gte(ZERO))
? api.tx.staking.bondExtra(maxAdditional)
: null;
@@ -158,7 +148,7 @@ class BondExtra extends TxComponent {
let prevMax = new BN(0);
let maxBalance = new BN(1);
- let extrinsic;
+ let extrinsic: any;
while (!prevMax.eq(maxBalance)) {
prevMax = maxBalance;
diff --git a/packages/app-staking/src/Actions/Account/InjectKeys.tsx b/packages/app-staking/src/Actions/Account/InjectKeys.tsx
index 370cf72a4968..b2a637091c57 100644
--- a/packages/app-staking/src/Actions/Account/InjectKeys.tsx
+++ b/packages/app-staking/src/Actions/Account/InjectKeys.tsx
@@ -2,18 +2,17 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
import { KeypairType } from '@polkadot/util-crypto/types';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
import { Button, Dropdown, Icon, Input, Modal, StatusContext } from '@polkadot/react-components';
import keyring from '@polkadot/ui-keyring';
import { assert, u8aToHex } from '@polkadot/util';
import { keyExtractSuri, mnemonicValidate } from '@polkadot/util-crypto';
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
-interface Props extends I18nProps {
+interface Props {
isOpen?: boolean;
onClose: () => void;
}
@@ -28,17 +27,25 @@ const CRYPTO_MAP: Record = {
const EMPTY_KEY = '0x';
-function InjectKeys ({ isOpen = true, onClose, t }: Props): React.ReactElement | null {
+export default function InjectKeys ({ isOpen = true, onClose }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const { queueRpc } = useContext(StatusContext);
// this needs to align with what is set as the first value in `type`
const [crypto, setCrypto] = useState('sr25519');
const [publicKey, setPublicKey] = useState(EMPTY_KEY);
const [suri, setSuri] = useState('');
- const [type, setType] = useState('babe');
+ const [keyType, setKeyType] = useState('babe');
+ const keyTypeOpt = useMemo(() => [
+ { text: t('Aura'), value: 'aura' },
+ { text: t('Babe'), value: 'babe' },
+ { text: t('Grandpa'), value: 'gran' },
+ { text: t('I\'m Online'), value: 'imon' },
+ { text: t('Parachains'), value: 'para' }
+ ], [t]);
useEffect((): void => {
- setCrypto(CRYPTO_MAP[type][0]);
- }, [type]);
+ setCrypto(CRYPTO_MAP[keyType][0]);
+ }, [keyType]);
useEffect((): void => {
try {
@@ -56,13 +63,12 @@ function InjectKeys ({ isOpen = true, onClose, t }: Props): React.ReactElement {
+ const _onSubmit = (): void =>
queueRpc({
rpc: { section: 'author', method: 'insertKey' } as any,
- values: [type, suri, publicKey]
+ values: [keyType, suri, publicKey]
});
- };
- const _cryptoOptions = CRYPTO_MAP[type].map((value): { text: string; value: KeypairType } => ({
+ const _cryptoOptions = CRYPTO_MAP[keyType].map((value): { text: string; value: KeypairType } => ({
text: value === 'ed25519'
? t('ed25519, Edwards')
: t('sr15519, Schnorrkel'),
@@ -72,7 +78,6 @@ function InjectKeys ({ isOpen = true, onClose, t }: Props): React.ReactElement
@@ -84,15 +89,9 @@ function InjectKeys ({ isOpen = true, onClose, t }: Props): React.ReactElement
-
-
-
+
+
);
}
-
-export default translate(InjectKeys);
diff --git a/packages/app-staking/src/Actions/Account/InputValidateAmount.tsx b/packages/app-staking/src/Actions/Account/InputValidateAmount.tsx
index 51ad43dcf526..71986017ce09 100644
--- a/packages/app-staking/src/Actions/Account/InputValidateAmount.tsx
+++ b/packages/app-staking/src/Actions/Account/InputValidateAmount.tsx
@@ -2,7 +2,7 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { DerivedBalances } from '@polkadot/api-derive/types';
+import { DerivedBalancesAll } from '@polkadot/api-derive/types';
import { I18nProps } from '@polkadot/react-components/types';
import BN from 'bn.js';
@@ -20,7 +20,7 @@ interface Props extends I18nProps {
function ValidateAmount ({ accountId, onError, value, t }: Props): React.ReactElement | null {
const { api } = useApi();
- const allBalances = useCall(api.derive.balances.all as any, [accountId]);
+ const allBalances = useCall(api.derive.balances.all as any, [accountId]);
const [error, setError] = useState(null);
useEffect((): void => {
diff --git a/packages/app-staking/src/Actions/Account/InputValidationController.tsx b/packages/app-staking/src/Actions/Account/InputValidationController.tsx
index ea0d30700a4a..c06e8b134cd8 100644
--- a/packages/app-staking/src/Actions/Account/InputValidationController.tsx
+++ b/packages/app-staking/src/Actions/Account/InputValidationController.tsx
@@ -2,7 +2,6 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
import { AccountId, StakingLedger } from '@polkadot/types/interfaces';
import React, { useEffect, useState } from 'react';
@@ -10,9 +9,9 @@ import { Icon } from '@polkadot/react-components';
import { Option } from '@polkadot/types';
import { useApi, useCall } from '@polkadot/react-hooks';
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
-interface Props extends I18nProps {
+interface Props {
accountId: string | null;
controllerId: string | null;
defaultController?: string;
@@ -22,25 +21,20 @@ interface Props extends I18nProps {
const DISTINCT = 'Distinct stash and controller accounts are recommended to ensure fund security.';
-function ValidateController ({ accountId, controllerId, defaultController, isUnsafeChain, onError, t }: Props): React.ReactElement | null {
+export default function ValidateController ({ accountId, controllerId, defaultController, isUnsafeChain, onError }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const { api } = useApi();
const bondedId = useCall(api.query.staking.bonded, [controllerId], {
- transform: (value: Option): string | null => {
- const extracted = value.unwrapOr(null);
-
- return extracted
- ? extracted.toString()
- : null;
- }
+ transform: (value: Option): string | null =>
+ value.isSome
+ ? value.unwrap().toString()
+ : null
});
- const stashId = useCall(api.query.staking.ledger, [controllerId], {
- transform: (value: Option): string | null => {
- const extracted = value.unwrapOr({ stash: null }).stash;
-
- return extracted
- ? extracted.toString()
- : null;
- }
+ const stashId = useCall(controllerId ? api.query.staking.ledger : null, [controllerId], {
+ transform: (value: Option): string | null =>
+ value.isSome
+ ? value.unwrap().stash.toString()
+ : null
});
const [error, setError] = useState(null);
@@ -77,5 +71,3 @@ function ValidateController ({ accountId, controllerId, defaultController, isUns
);
}
-
-export default translate(ValidateController);
diff --git a/packages/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx b/packages/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx
index 754c49d4adaa..7f78f64337ac 100644
--- a/packages/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx
+++ b/packages/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx
@@ -2,20 +2,19 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
-
import BN from 'bn.js';
import React, { useEffect, useState } from 'react';
import { Icon } from '@polkadot/react-components';
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
-interface Props extends I18nProps {
+interface Props {
unstakeThreshold: BN | undefined;
onError: (error: string | null) => void;
}
-function InputValidationUnstakeThreshold ({ onError, t, unstakeThreshold }: Props): React.ReactElement | null {
+export default function InputValidationUnstakeThreshold ({ onError, unstakeThreshold }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const [error, setError] = useState(null);
useEffect((): void => {
@@ -45,5 +44,3 @@ function InputValidationUnstakeThreshold ({ onError, t, unstakeThreshold }: Prop
);
}
-
-export default translate(InputValidationUnstakeThreshold);
diff --git a/packages/app-staking/src/Actions/Account/Nominate.tsx b/packages/app-staking/src/Actions/Account/Nominate.tsx
index 84e6dba49c6e..c37cdfcbf2eb 100644
--- a/packages/app-staking/src/Actions/Account/Nominate.tsx
+++ b/packages/app-staking/src/Actions/Account/Nominate.tsx
@@ -3,17 +3,17 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { DerivedStakingOverview } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
-import { AddressMulti, Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { InputAddressMulti, InputAddress, Modal, TxButton } from '@polkadot/react-components';
import { useFavorites } from '@polkadot/react-hooks';
import { STORE_FAVS_BASE } from '../../constants';
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
-interface Props extends I18nProps {
+interface Props {
+ className?: string;
controllerId: string;
next: string[];
nominees?: string[];
@@ -24,21 +24,22 @@ interface Props extends I18nProps {
const MAX_NOMINEES = 16;
-function Nominate ({ className, controllerId, nominees, onClose, next, stakingOverview, stashId, t }: Props): React.ReactElement | null {
+function Nominate ({ className, controllerId, nominees, onClose, next, stakingOverview, stashId }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const [favorites] = useFavorites(STORE_FAVS_BASE);
const [validators, setValidators] = useState([]);
- const [selection, setSelection] = useState([]);
+ const [selection, setSelection] = useState();
const [available, setAvailable] = useState([]);
useEffect((): void => {
- if (!selection.length && nominees) {
+ if (!selection && nominees) {
setSelection(nominees);
}
}, [selection, nominees]);
useEffect((): void => {
if (stakingOverview) {
- setValidators((stakingOverview.currentElected || []).map((acc): string => acc.toString()));
+ setValidators(stakingOverview.validators.map((acc): string => acc.toString()));
}
}, [stakingOverview]);
@@ -61,7 +62,6 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv
-
-
-
+
+
);
}
-export default translate(
- styled(Nominate)`
- .shortlist {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
-
- .candidate {
- border: 1px solid #eee;
- border-radius: 0.25rem;
- margin: 0.25rem;
- padding-bottom: 0.25rem;
- padding-right: 0.5rem;
- position: relative;
-
- &::after {
- content: '';
- position: absolute;
- top: 0;
- right: 0;
- border-color: transparent;
- border-style: solid;
- border-radius: 0.25em;
- border-width: 0.25em;
- }
-
- &.isAye {
- background: #fff;
- border-color: #ccc;
- }
-
- &.member::after {
- border-color: green;
- }
-
- &.runnerup::after {
- border-color: steelblue;
- }
-
- .ui--AddressMini-icon {
- z-index: 1;
- }
-
- .candidate-right {
- text-align: right;
- }
+export default styled(Nominate)`
+ .shortlist {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ .candidate {
+ border: 1px solid #eee;
+ border-radius: 0.25rem;
+ margin: 0.25rem;
+ padding-bottom: 0.25rem;
+ padding-right: 0.5rem;
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ border-color: transparent;
+ border-style: solid;
+ border-radius: 0.25em;
+ border-width: 0.25em;
+ }
+
+ &.isAye {
+ background: #fff;
+ border-color: #ccc;
+ }
+
+ &.member::after {
+ border-color: green;
+ }
+
+ &.runnerup::after {
+ border-color: steelblue;
+ }
+
+ .ui--AddressMini-icon {
+ z-index: 1;
+ }
+
+ .candidate-right {
+ text-align: right;
}
}
- `
-);
+ }
+`;
diff --git a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
index 8759f7e7c363..490b2e440246 100644
--- a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
+++ b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
@@ -6,7 +6,7 @@ import { ApiProps } from '@polkadot/react-api/types';
import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
-import { Button, Icon, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { Icon, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { withApi, withMulti } from '@polkadot/react-api/hoc';
import translate from '../../translate';
@@ -45,7 +45,6 @@ class SetControllerAccount extends TxComponent {
@@ -81,27 +80,19 @@ class SetControllerAccount extends TxComponent {
onError={this.onControllerError}
/>
-
-
-
+
+
);
diff --git a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
index 9439e694abc5..6254007d6ecb 100644
--- a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
+++ b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
@@ -5,7 +5,7 @@
import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
-import { Button, Dropdown, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { Dropdown, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { withMulti } from '@polkadot/react-api/hoc';
import translate from '../../translate';
@@ -39,31 +39,22 @@ class SetRewardDestination extends TxComponent {
{this.renderContent()}
-
-
-
+
+
);
diff --git a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
index 857e97ce07ff..c5990454691f 100644
--- a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
+++ b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
@@ -2,16 +2,14 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
-
import React, { useState } from 'react';
-import { Button, InputAddress, Input, Modal, TxButton } from '@polkadot/react-components';
+import { Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
import { useApi } from '@polkadot/react-hooks';
import ValidationSessionKey from './InputValidationSessionKey';
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
-interface Props extends I18nProps {
+interface Props {
controllerId: string;
isOpen: boolean;
onClose: () => void;
@@ -21,7 +19,8 @@ interface Props extends I18nProps {
const EMPTY_PROOF = new Uint8Array();
-function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t }: Props): React.ReactElement | null {
+export default function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const { isSubstrateV2 } = useApi();
const [keysError, setKeysError] = useState(null);
const [keys, setKeys] = useState(
@@ -42,7 +41,6 @@ function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t
@@ -82,37 +80,26 @@ function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t
)
}
-
-
-
+
+
);
}
-
-export default translate(SetSessionKey);
diff --git a/packages/app-staking/src/Actions/Account/Unbond.tsx b/packages/app-staking/src/Actions/Account/Unbond.tsx
index 7bb36dc77331..75e7e79a5bd8 100644
--- a/packages/app-staking/src/Actions/Account/Unbond.tsx
+++ b/packages/app-staking/src/Actions/Account/Unbond.tsx
@@ -11,7 +11,7 @@ import BN from 'bn.js';
import React from 'react';
import styled from 'styled-components';
import { Option } from '@polkadot/types';
-import { AddressInfo, Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { AddressInfo, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { withCalls, withApi, withMulti } from '@polkadot/react-api/hoc';
import translate from '../../translate';
@@ -63,31 +63,22 @@ class Unbond extends TxComponent {
{this.renderContent()}
-
-
-
+
+
);
diff --git a/packages/app-staking/src/Actions/Account/Validate.tsx b/packages/app-staking/src/Actions/Account/Validate.tsx
index 619a3c354278..703519cc74d3 100644
--- a/packages/app-staking/src/Actions/Account/Validate.tsx
+++ b/packages/app-staking/src/Actions/Account/Validate.tsx
@@ -2,18 +2,14 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { ValidatorPrefs, ValidatorPrefsTo145, ValidatorPrefsTo196 } from '@polkadot/types/interfaces';
import { ApiProps } from '@polkadot/react-api/types';
import { I18nProps } from '@polkadot/react-components/types';
import BN from 'bn.js';
import React from 'react';
-import { registry } from '@polkadot/react-api';
import { withApi, withMulti } from '@polkadot/react-api/hoc';
-import { Button, InputAddress, InputBalance, InputNumber, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-import { createType } from '@polkadot/types';
+import { InputAddress, InputNumber, Modal, TxButton, TxComponent } from '@polkadot/react-components';
-import InputValidationUnstakeThreshold from './InputValidationUnstakeThreshold';
import translate from '../../translate';
interface Props extends ApiProps, I18nProps {
@@ -21,15 +17,10 @@ interface Props extends ApiProps, I18nProps {
isOpen: boolean;
onClose: () => void;
stashId: string;
- validatorPrefs?: ValidatorPrefs | ValidatorPrefsTo145 | ValidatorPrefsTo196;
}
interface State {
- hasCommission: boolean;
commission: BN;
- unstakeThreshold: BN;
- unstakeThresholdError: string | null;
- validatorPayment: BN;
}
const COMM_MUL = new BN(10000000);
@@ -37,11 +28,7 @@ const MAX_COMM = new BN(100);
class Validate extends TxComponent {
public state: State = {
- hasCommission: !!(createType(registry, 'ValidatorPrefs').commission),
- commission: new BN(0),
- unstakeThreshold: new BN(3),
- unstakeThresholdError: null,
- validatorPayment: new BN(0)
+ commission: new BN(0)
};
// FIXME Borken with new InputBalance
@@ -85,7 +72,6 @@ class Validate extends TxComponent {
{this.renderContent()}
@@ -95,45 +81,28 @@ class Validate extends TxComponent {
}
private renderButtons (): React.ReactNode {
- const { controllerId, isSubstrateV2, onClose, t } = this.props;
- const { commission, hasCommission, unstakeThreshold, unstakeThresholdError, validatorPayment } = this.state;
+ const { controllerId, onClose, t } = this.props;
+ const { commission } = this.state;
return (
-
-
-
+
+
);
}
private renderContent (): React.ReactNode {
- const { controllerId, isSubstrateV2, stashId, t, validatorPrefs } = this.props;
- const { hasCommission, unstakeThreshold, unstakeThresholdError } = this.state;
- const defaultThreshold = validatorPrefs && (validatorPrefs as ValidatorPrefsTo145).unstakeThreshold && (validatorPrefs as ValidatorPrefsTo145).unstakeThreshold.toBn();
+ const { controllerId, stashId, t } = this.props;
return (
@@ -149,46 +118,15 @@ class Validate extends TxComponent {
isDisabled
label={t('controller account')}
/>
- {!isSubstrateV2 && (
- <>
-
);
}
@@ -196,18 +134,6 @@ class Validate extends TxComponent {
private onChangeCommission = (commission?: BN): void => {
commission && this.setState({ commission: commission.mul(COMM_MUL) });
}
-
- private onChangePayment = (validatorPayment?: BN): void => {
- validatorPayment && this.setState({ validatorPayment });
- }
-
- private onChangeThreshold = (unstakeThreshold?: BN): void => {
- unstakeThreshold && this.setState({ unstakeThreshold });
- }
-
- private onUnstakeThresholdError = (unstakeThresholdError: string | null): void => {
- this.setState({ unstakeThresholdError });
- }
}
export default withMulti(
diff --git a/packages/app-staking/src/Actions/Account/index.tsx b/packages/app-staking/src/Actions/Account/index.tsx
index ec3e64ecb4c1..659ac8072ff9 100644
--- a/packages/app-staking/src/Actions/Account/index.tsx
+++ b/packages/app-staking/src/Actions/Account/index.tsx
@@ -2,18 +2,17 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { DerivedBalances, DerivedStakingAccount, DerivedStakingOverview, DerivedHeartbeats } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
+import { DerivedBalancesAll, DerivedStakingAccount, DerivedStakingOverview, DerivedHeartbeats } from '@polkadot/api-derive/types';
import { AccountId, Exposure, StakingLedger, ValidatorPrefs } from '@polkadot/types/interfaces';
import { Codec, ITuple } from '@polkadot/types/types';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { AddressInfo, AddressMini, AddressSmall, Button, Menu, Popup, TxButton } from '@polkadot/react-components';
-import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
+import { useAccounts, useApi, useCall, useToggle } from '@polkadot/react-hooks';
import { u8aConcat, u8aToHex } from '@polkadot/util';
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
import BondExtra from './BondExtra';
import InjectKeys from './InjectKeys';
import Nominate from './Nominate';
@@ -22,11 +21,13 @@ import SetRewardDestination from './SetRewardDestination';
import SetSessionKey from './SetSessionKey';
import Unbond from './Unbond';
import Validate from './Validate';
+import useInactives from './useInactives';
type ValidatorInfo = ITuple<[ValidatorPrefs, Codec]>;
-interface Props extends I18nProps {
+interface Props {
allStashes?: string[];
+ className?: string;
isOwnStash: boolean;
next: string[];
onUpdateType: (stashId: string, type: 'validator' | 'nominator' | 'started' | 'other') => void;
@@ -41,6 +42,7 @@ interface StakeState {
hexSessionIdNext: string | null;
hexSessionIdQueue: string | null;
isLoading: boolean;
+ isOwnController: boolean;
isStashNominating: boolean;
isStashValidating: boolean;
nominees?: string[];
@@ -56,18 +58,20 @@ function toIdString (id?: AccountId | null): string | null {
: null;
}
-function getStakeState (allStashes: string[] | undefined, { controllerId, nextSessionIds, nominators, rewardDestination, sessionIds, stakers, stakingLedger, validatorPrefs }: DerivedStakingAccount, stashId: string, validateInfo: ValidatorInfo): StakeState {
+function getStakeState (allAccounts: string[], allStashes: string[] | undefined, { controllerId: _controllerId, nextSessionIds, nominators, rewardDestination, sessionIds, stakers, stakingLedger, validatorPrefs }: DerivedStakingAccount, stashId: string, validateInfo: ValidatorInfo): StakeState {
const isStashNominating = !!(nominators?.length);
const isStashValidating = !validateInfo[1].isEmpty || !!allStashes?.includes(stashId);
const nextConcat = u8aConcat(...nextSessionIds.map((id): Uint8Array => id.toU8a()));
const currConcat = u8aConcat(...sessionIds.map((id): Uint8Array => id.toU8a()));
+ const controllerId = toIdString(_controllerId);
return {
- controllerId: toIdString(controllerId),
+ controllerId,
destination: rewardDestination?.toNumber() || 0,
hexSessionIdNext: u8aToHex(nextConcat, 48),
hexSessionIdQueue: u8aToHex(currConcat.length ? currConcat : nextConcat, 48),
isLoading: false,
+ isOwnController: allAccounts.includes(controllerId || ''),
isStashNominating,
isStashValidating,
// we assume that all ids are non-null
@@ -83,12 +87,16 @@ function getStakeState (allStashes: string[] | undefined, { controllerId, nextSe
};
}
-function Account ({ allStashes, className, isOwnStash, next, onUpdateType, stakingOverview, stashId, t }: Props): React.ReactElement {
- const { api, isSubstrateV2 } = useApi();
+function Account ({ allStashes, className, isOwnStash, next, onUpdateType, stakingOverview, stashId }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const { api } = useApi();
+ const { allAccounts } = useAccounts();
const validateInfo = useCall(api.query.staking.validators, [stashId]);
- const balancesAll = useCall(api.derive.balances.all as any, [stashId]);
+ const balancesAll = useCall(api.derive.balances.all as any, [stashId]);
const stakingAccount = useCall(api.derive.staking.account as any, [stashId]);
- const [{ controllerId, destination, hexSessionIdQueue, hexSessionIdNext, isLoading, isStashNominating, isStashValidating, nominees, sessionIds, validatorPrefs }, setStakeState] = useState({ controllerId: null, destination: 0, hexSessionIdNext: null, hexSessionIdQueue: null, isLoading: true, isStashNominating: false, isStashValidating: false, sessionIds: [] });
+ const [{ controllerId, destination, hexSessionIdQueue, hexSessionIdNext, isLoading, isOwnController, isStashNominating, isStashValidating, nominees, sessionIds, validatorPrefs }, setStakeState] = useState({ controllerId: null, destination: 0, hexSessionIdNext: null, hexSessionIdQueue: null, isLoading: true, isOwnController: false, isStashNominating: false, isStashValidating: false, sessionIds: [] });
+ const [activeNoms, setActiveNoms] = useState([]);
+ const inactiveNoms = useInactives(stashId, nominees);
const [isBondExtraOpen, toggleBondExtra] = useToggle();
const [isInjectOpen, toggleInject] = useToggle();
const [isNominateOpen, toggleNominate] = useToggle();
@@ -101,7 +109,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, staki
useEffect((): void => {
if (stakingAccount && validateInfo) {
- const state = getStakeState(allStashes, stakingAccount, stashId, validateInfo);
+ const state = getStakeState(allAccounts, allStashes, stakingAccount, stashId, validateInfo);
setStakeState(state);
@@ -115,6 +123,12 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, staki
}
}, [allStashes, stakingAccount, stashId, validateInfo]);
+ useEffect((): void => {
+ if (nominees) {
+ setActiveNoms(nominees.filter((id): boolean => !inactiveNoms.includes(id)));
+ }
+ }, [inactiveNoms, nominees]);
+
return (
@@ -202,25 +216,42 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, staki
)
: (
- {isStashNominating && nominees && (
-
- {t('Nominating ({{count}})', { replace: { count: nominees.length } })}
- {nominees.map((nomineeId, index): React.ReactNode => (
-
+ {isStashNominating && (
+ <>
+ {activeNoms.length !== 0 && (
+
+ {t('Active nominations ({{count}})', { replace: { count: activeNoms.length } })}
+ {activeNoms.map((nomineeId, index): React.ReactNode => (
+
+ )}
+ {inactiveNoms.length !== 0 && (
+
+ {t('Inactive nominations ({{count}})', { replace: { count: inactiveNoms.length } })}
+ {inactiveNoms.map((nomineeId, index): React.ReactNode => (
+
+ )}
+
)}
)
@@ -247,7 +278,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, staki
)
: (
- {(!sessionIds.length || (isSubstrateV2 && hexSessionIdNext === '0x'))
+ {(!sessionIds.length || hexSessionIdNext === '0x')
? (
)}
-
+
{t('Unbond funds')}
{t('Change controller account')}
-
+
{t('Change reward destination')}
{isStashValidating &&
-
+
{t('Change validator preferences')}
}
{!isStashNominating &&
-
- {isSubstrateV2 ? t('Change session keys') : t('Change session account')}
+
+ {t('Change session keys')}
}
{isStashNominating &&
-
- {t('Change nominee(s)')}
+
+ {t('Set nominees')}
}
- {!isStashNominating && isSubstrateV2 &&
+ {!isStashNominating &&
{t('Inject session keys (advanced)')}
@@ -345,16 +391,14 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, staki
);
}
-export default translate(
- styled(Account)`
- .ui--Button-Group {
- display: inline-block;
- margin-right: 0.25rem;
- vertical-align: inherit;
- }
+export default styled(Account)`
+ .ui--Button-Group {
+ display: inline-block;
+ margin-right: 0.25rem;
+ vertical-align: inherit;
+ }
- .mini-nopad {
- padding: 0;
- }
- `
-);
+ .mini-nopad {
+ padding: 0;
+ }
+`;
diff --git a/packages/app-staking/src/Actions/Account/useInactives.ts b/packages/app-staking/src/Actions/Account/useInactives.ts
new file mode 100644
index 000000000000..9740c09e3aff
--- /dev/null
+++ b/packages/app-staking/src/Actions/Account/useInactives.ts
@@ -0,0 +1,42 @@
+// Copyright 2017-2020 @polkadot/ui-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Exposure } from '@polkadot/types/interfaces';
+
+import { useEffect, useState } from 'react';
+import { useApi, useIsMountedRef } from '@polkadot/react-hooks';
+
+export default function useInactives (stashId: string, nominees?: string[]): string[] {
+ const { api } = useApi();
+ const mountedRef = useIsMountedRef();
+ const [inactives, setInactives] = useState([]);
+
+ useEffect((): () => void => {
+ let unsub: (() => void) | undefined;
+
+ if (mountedRef.current && nominees?.length) {
+ api.query.staking.stakers
+ .multi(nominees, (exposures: Exposure[]): void => {
+ const inactives: string[] = [];
+
+ exposures.forEach((exposure, index): void => {
+ if (!exposure.others.some((indv): boolean => indv.who.eq(stashId))) {
+ inactives.push(nominees[index].toString());
+ }
+ });
+
+ setInactives(inactives);
+ })
+ .then((_unsub): void => {
+ unsub = _unsub;
+ });
+ }
+
+ return (): void => {
+ unsub && unsub();
+ };
+ }, [nominees, stashId]);
+
+ return inactives;
+}
diff --git a/packages/app-staking/src/Actions/NewStake.tsx b/packages/app-staking/src/Actions/NewStake.tsx
index 0d6b188e7529..99ec88e56513 100644
--- a/packages/app-staking/src/Actions/NewStake.tsx
+++ b/packages/app-staking/src/Actions/NewStake.tsx
@@ -9,7 +9,7 @@ import { CalculateBalanceProps } from '../types';
import BN from 'bn.js';
import React from 'react';
import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { Button, Dropdown, InputAddress, InputBalanceBonded, Modal, TxButton, TxComponent } from '@polkadot/react-components';
+import { Dropdown, InputAddress, InputBalanceBonded, Modal, TxButton, TxComponent } from '@polkadot/react-components';
import { withApi, withMulti } from '@polkadot/react-api/hoc';
import translate from '../translate';
@@ -59,7 +59,6 @@ class NewStake extends TxComponent {
@@ -114,26 +113,18 @@ class NewStake extends TxComponent {
value={destination}
/>
-
-
-
+
+
);
diff --git a/packages/app-staking/src/Actions/index.tsx b/packages/app-staking/src/Actions/index.tsx
index 62b625811398..5e1936b12d5e 100644
--- a/packages/app-staking/src/Actions/index.tsx
+++ b/packages/app-staking/src/Actions/index.tsx
@@ -3,7 +3,6 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { DerivedHeartbeats, DerivedStakingOverview } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
import { AccountId, StakingLedger } from '@polkadot/types/interfaces';
import React, { useEffect, useState } from 'react';
@@ -13,10 +12,11 @@ import { Option } from '@polkadot/types';
import Account from './Account';
import StartStaking from './NewStake';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
+interface Props {
allStashes: string[];
+ className?: string;
isVisible: boolean;
recentlyOnline?: DerivedHeartbeats;
next: string[];
@@ -47,7 +47,8 @@ function getStashes (allAccounts: string[], stashTypes: Record,
);
}
-function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stakingOverview, t }: Props): React.ReactElement {
+export default function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stakingOverview }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
const { allAccounts } = useAccounts();
const queryBonded = useCall[]>(api.query.staking.bonded.multi as any, [allAccounts]);
@@ -109,5 +110,3 @@ function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stak
);
}
-
-export default translate(Actions);
diff --git a/packages/app-staking/src/Overview/Address.tsx b/packages/app-staking/src/Overview/Address.tsx
index 25b22cb048f8..1297cf1ec2b6 100644
--- a/packages/app-staking/src/Overview/Address.tsx
+++ b/packages/app-staking/src/Overview/Address.tsx
@@ -2,35 +2,35 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { AccountId, Balance, Points, ValidatorPrefsTo196 } from '@polkadot/types/interfaces';
-import { DerivedStakingQuery, DerivedHeartbeats } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
+import { AccountId, Balance, Points } from '@polkadot/types/interfaces';
+import { DeriveAccountInfo, DerivedStakingQuery, DerivedHeartbeatAuthor } from '@polkadot/api-derive/types';
import { ValidatorFilter } from '../types';
import BN from 'bn.js';
import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import ApiPromise from '@polkadot/api/promise';
import { AddressMini, AddressSmall, Badge, Icon } from '@polkadot/react-components';
-import { useCall, useApi } from '@polkadot/react-hooks';
+import { useApi, useCall } from '@polkadot/react-hooks';
import { FormatBalance } from '@polkadot/react-query';
+import keyring from '@polkadot/ui-keyring';
import { formatNumber } from '@polkadot/util';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
- address: AccountId | string;
- authorsMap: Record;
+interface Props {
+ address: string;
className?: string;
defaultName: string;
filter: ValidatorFilter;
+ filterName: string;
hasQueries: boolean;
+ heartbeat?: DerivedHeartbeatAuthor;
+ isAuthor?: boolean;
isElected: boolean;
isFavorite: boolean;
- lastAuthors?: string[];
+ lastBlock?: string;
myAccounts: string[];
- onFavorite?: (accountId: string) => void;
points?: Points;
- recentlyOnline?: DerivedHeartbeats;
toggleFavorite: (accountId: string) => void;
withNominations?: boolean;
}
@@ -45,74 +45,100 @@ interface StakingState {
stakeTotal?: BN;
stakeOther?: BN;
stakeOwn?: BN;
- stashId: string;
- validatorPayment?: BN;
}
-function Address ({ address, authorsMap, className, filter, hasQueries, isElected, isFavorite, lastAuthors, myAccounts, points, recentlyOnline, t, toggleFavorite, withNominations = true }: Props): React.ReactElement | null {
+function expandInfo ({ controllerId, nextSessionIds, stakers, validatorPrefs }: DerivedStakingQuery, myAccounts: string[], withNominations = true): StakingState {
+ const nominators = withNominations && stakers
+ ? stakers.others.map(({ who, value }): [AccountId, Balance] => [who, value.unwrap()])
+ : [];
+ const stakeTotal = (stakers && !stakers.total.isEmpty && stakers.total.unwrap()) || undefined;
+ const stakeOwn = (stakers && !stakers.own.isEmpty && stakers.own.unwrap()) || undefined;
+ const stakeOther = (stakeTotal && stakeOwn) ? stakeTotal.sub(stakeOwn) : undefined;
+ const commission = validatorPrefs?.commission?.unwrap();
+
+ return {
+ commission: commission
+ ? `${(commission.toNumber() / 10000000).toFixed(2)}%`
+ : undefined,
+ controllerId: controllerId?.toString(),
+ hasNominators: nominators.length !== 0,
+ isNominatorMe: nominators.some(([who]): boolean =>
+ myAccounts.includes(who.toString())
+ ),
+ nominators,
+ sessionId: nextSessionIds && nextSessionIds[0]?.toString(),
+ stakeOther,
+ stakeOwn,
+ stakeTotal
+ };
+}
+
+function checkFilter (filter: string, hasNominators: boolean, isElected: boolean, isNominatorMe: boolean, heartbeat?: DerivedHeartbeatAuthor): boolean {
+ return (filter === 'hasNominators' && !hasNominators) ||
+ (filter === 'noNominators' && hasNominators) ||
+ (filter === 'hasWarnings' && heartbeat?.isOnline) ||
+ (filter === 'noWarnings' && !heartbeat?.isOnline) ||
+ (filter === 'iNominated' && !isNominatorMe) ||
+ (filter === 'nextSet' && !isElected);
+}
+
+function checkVisibility (api: ApiPromise, address: string, filterName: string, info: DeriveAccountInfo | undefined): boolean {
+ let isVisible = false;
+ const filterLower = filterName.toLowerCase();
+
+ if (filterLower) {
+ if (info) {
+ const { identity, nickname, accountId, accountIndex } = info;
+
+ if (accountId?.toString().includes(filterName) || accountIndex?.toString().includes(filterName)) {
+ isVisible = true;
+ } else if (api.query.identity && api.query.identity.identityOf && identity?.display) {
+ isVisible = identity.display.toLowerCase().includes(filterLower);
+ } else if (nickname) {
+ isVisible = nickname.toLowerCase().includes(filterLower);
+ }
+ }
+
+ if (!isVisible) {
+ const account = keyring.getAddress(address);
+
+ isVisible = account?.meta?.name
+ ? account.meta.name.toLowerCase().includes(filterLower)
+ : false;
+ }
+ } else {
+ isVisible = true;
+ }
+
+ return isVisible;
+}
+
+export default function Address ({ address, className, filter, filterName, hasQueries, heartbeat, isAuthor, isElected, isFavorite, lastBlock, myAccounts, points, toggleFavorite, withNominations }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const { api } = useApi();
// FIXME Any horrors, caused by derive type mismatches
+ const info = useCall(api.derive.accounts.info as any, [address]);
const stakingInfo = useCall(api.derive.staking.query as any, [address]);
- const [hasActivity, setHasActivity] = useState(true);
- const [{ commission, hasNominators, isNominatorMe, nominators, stashId, stakeOwn, stakeOther, validatorPayment }, setStakingState] = useState({
- hasNominators: false,
- isNominatorMe: false,
- nominators: [],
- stashId: address.toString()
- });
+ const [{ commission, hasNominators, isNominatorMe, nominators, stakeOwn, stakeOther }, setStakingState] = useState({ hasNominators: false, isNominatorMe: false, nominators: [] });
const [isExpanded, setIsExpanded] = useState(false);
+ const [isVisible, setIsVisible] = useState(true);
useEffect((): void => {
- if (stakingInfo) {
- const { controllerId, nextSessionIds, stakers, stashId, validatorPrefs } = stakingInfo;
- const nominators = withNominations && stakers
- ? stakers.others.map(({ who, value }): [AccountId, Balance] => [who, value.unwrap()])
- : [];
- const stakeTotal = (stakers && !stakers.total.isEmpty && stakers.total.unwrap()) || undefined;
- const stakeOwn = (stakers && !stakers.own.isEmpty && stakers.own.unwrap()) || undefined;
- const stakeOther = (stakeTotal && stakeOwn) ? stakeTotal.sub(stakeOwn) : undefined;
- const commission = validatorPrefs?.commission?.unwrap();
-
- setStakingState({
- commission: commission
- ? `${(commission.toNumber() / 10000000).toFixed(2)}%`
- : undefined,
- controllerId: controllerId?.toString(),
- hasNominators: nominators.length !== 0,
- isNominatorMe: nominators.some(([who]): boolean =>
- myAccounts.includes(who.toString())
- ),
- nominators,
- sessionId: nextSessionIds && nextSessionIds[0]?.toString(),
- stashId: (stashId || address).toString(),
- stakeOther,
- stakeOwn,
- stakeTotal,
- validatorPayment: (validatorPrefs as any as ValidatorPrefsTo196)?.validatorPayment?.unwrap()
- });
- }
+ stakingInfo && setStakingState(
+ expandInfo(stakingInfo, myAccounts, withNominations)
+ );
}, [stakingInfo]);
useEffect((): void => {
- if (recentlyOnline && stashId && recentlyOnline[stashId]) {
- setHasActivity(recentlyOnline[stashId].isOnline);
- }
- }, [recentlyOnline, stashId]);
-
- if ((filter === 'hasNominators' && !hasNominators) ||
- (filter === 'noNominators' && hasNominators) ||
- (filter === 'hasWarnings' && hasActivity) ||
- (filter === 'noWarnings' && !hasActivity) ||
- (filter === 'iNominated' && !isNominatorMe) ||
- (filter === 'nextSet' && !isElected)) {
- return null;
- }
+ setIsVisible(
+ checkFilter(filter, hasNominators, isElected, isNominatorMe, heartbeat) ||
+ checkVisibility(api, address, filterName, info)
+ );
+ }, [filter, filterName, heartbeat, info, hasNominators, isNominatorMe]);
- const lastBlockNumber = authorsMap[stashId];
- const isAuthor = lastAuthors && lastAuthors.includes(stashId);
- const _onFavorite = (): void => toggleFavorite(stashId);
+ const _onFavorite = (): void => toggleFavorite(address);
const _onQueryStats = (): void => {
- window.location.hash = `/staking/query/${stashId}`;
+ window.location.hash = `/staking/query/${address}`;
};
const _toggleNominators = (event: React.SyntheticEvent): void => {
event.preventDefault();
@@ -122,7 +148,7 @@ function Address ({ address, authorsMap, className, filter, hasQueries, isElecte
};
return (
-
+
-
- {stakeOwn && {t('own stake')}} value={stakeOwn} />}
+ {stakeOwn && (
+ {t('own stake')}}
+ value={stakeOwn}
+ />
+ )}
{stakeOther && (
@@ -176,16 +207,21 @@ function Address ({ address, authorsMap, className, filter, hasQueries, isElecte
)}
)
- : {t('other stake')}} value={stakeOther}> ({formatNumber(nominators.length)})
+ : (
+ {t('other stake')}}
+ value={stakeOther}
+ >
+ ({formatNumber(nominators.length)})
+ )
)}
{!isExpanded && (
<>
- {(commission || validatorPayment) && (
- commission
- ? <>{t('commission')} {commission}
- : {t('commission')}} value={validatorPayment} />
+ {commission && (
+ <>{t('commission')} {commission}
)}
@@ -194,7 +230,9 @@ function Address ({ address, authorsMap, className, filter, hasQueries, isElecte
)}
- {lastBlockNumber && <>{t('last #')} {lastBlockNumber}}
+ {lastBlock && (
+ <>{t('last #')} {lastBlock}
+ )}
{hasQueries && api.query.imOnline?.authoredBlocks && (
@@ -209,77 +247,3 @@ function Address ({ address, authorsMap, className, filter, hasQueries, isElecte
);
}
-
-export default translate(
- styled(Address)`
- .extras {
- display: inline-block;
- margin-bottom: 0.75rem;
-
- .favorite {
- cursor: pointer;
- display: inline-block;
- margin-left: 0.5rem;
- margin-right: -0.25rem;
-
- &.isSelected {
- color: darkorange;
- }
- }
- }
-
- .blockNumberV1,
- .blockNumberV2 {
- border-radius: 0.25rem;
- font-size: 1.5rem;
- font-weight: 100;
- line-height: 1.5rem;
- opacity: 0.5;
- vertical-align: middle;
- z-index: 1;
-
- &.isCurrent {
- background: #3f3f3f;
- box-shadow: 0 3px 3px rgba(0,0,0,.2);
- color: #eee;
- opacity: 1;
- }
- }
-
- .blockNumberV2 {
- display: inline-block;
- padding: 0.25rem 0;
-
- &.isCurrent {
- margin-right: -0.25rem;
- padding: 0.25rem 0.75rem;
- }
- }
-
- .blockNumberV1 {
- padding: 0.25rem 0.5rem;
- position: absolute;
- right: 0;
- }
-
- .staking--Address-info {
- margin-right: 0.25rem;
- text-align: right;
-
- .staking--label {
- margin: 0 2.25rem -0.75rem 0;
- }
- }
-
- .staking--label.controllerSpacer {
- margin-top: 0.5rem;
- }
-
- .staking--stats {
- bottom: 0.75rem;
- cursor: pointer;
- position: absolute;
- right: 0.5rem;
- }
- `
-);
diff --git a/packages/app-staking/src/Overview/CurrentList.tsx b/packages/app-staking/src/Overview/CurrentList.tsx
index 5290cbc8fddf..07c8924528c3 100644
--- a/packages/app-staking/src/Overview/CurrentList.tsx
+++ b/packages/app-staking/src/Overview/CurrentList.tsx
@@ -3,19 +3,19 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { DerivedHeartbeats, DerivedStakingOverview } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { AccountId, EraPoints, Points } from '@polkadot/types/interfaces';
+import { AccountId } from '@polkadot/types/interfaces';
import { ValidatorFilter } from '../types';
+import { AddressDetails } from './types';
-import React, { useEffect, useState } from 'react';
-import { Dropdown, FilterOverlay, Table } from '@polkadot/react-components';
-import { useAccounts, useApi, useFavorites } from '@polkadot/react-hooks';
+import React, { useEffect, useMemo, useReducer, useState } from 'react';
+import { Dropdown, FilterOverlay, Input, Table } from '@polkadot/react-components';
+import { useAccounts, useFavorites } from '@polkadot/react-hooks';
import { STORE_FAVS_BASE } from '../constants';
-import translate from '../translate';
+import { useTranslation } from '../translate';
import Address from './Address';
-interface Props extends I18nProps {
+interface Props {
authorsMap: Record;
hasQueries: boolean;
isIntentions: boolean;
@@ -26,76 +26,115 @@ interface Props extends I18nProps {
stakingOverview?: DerivedStakingOverview;
}
-type AccountExtend = [string, boolean, boolean, Points?];
+type AccountExtend = [string, boolean, boolean];
-function filterAccounts (accounts: string[] = [], elected: string[], favorites: string[], without: string[], eraPoints?: EraPoints): AccountExtend[] {
+function sortByFav ([,, isFavA]: AccountExtend, [,, isFavB]: AccountExtend): number {
+ return isFavA === isFavB
+ ? 0
+ : (isFavA ? -1 : 1);
+}
+
+function filterAccounts (accounts: string[] = [], elected: string[], favorites: string[], without: string[]): AccountExtend[] {
return accounts
.filter((accountId): boolean => !without.includes(accountId as any))
- .sort((a, b): number => {
- const isFavA = favorites.includes(a);
- const isFavB = favorites.includes(b);
-
- return isFavA === isFavB
- ? 0
- : (isFavA ? -1 : 1);
- })
- .map((accountId): AccountExtend => {
- const electedIdx = elected.indexOf(accountId);
-
- return [
- accountId,
- elected.includes(accountId),
- favorites.includes(accountId),
- electedIdx !== -1
- ? eraPoints?.individual[electedIdx]
- : undefined
- ];
- });
+ .map((accountId): AccountExtend => [
+ accountId,
+ elected.includes(accountId),
+ favorites.includes(accountId)
+ ])
+ .sort(sortByFav);
}
function accountsToString (accounts: AccountId[]): string[] {
return accounts.map((accountId): string => accountId.toString());
}
-function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAuthors, next, recentlyOnline, stakingOverview, t }: Props): React.ReactElement | null {
- const { isSubstrateV2 } = useApi();
+function reduceDetails (state: Record, _details: AddressDetails | AddressDetails[]): Record {
+ const details = Array.isArray(_details)
+ ? _details
+ : [_details];
+
+ return details.reduce((result, details): Record => {
+ result[details.address] = {
+ ...(state[details.address] || {}),
+ ...details
+ };
+
+ return result;
+ }, { ...state });
+}
+
+export default function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAuthors, next, recentlyOnline, stakingOverview }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const { allAccounts } = useAccounts();
const [favorites, toggleFavorite] = useFavorites(STORE_FAVS_BASE);
const [filter, setFilter] = useState('all');
- const [{ elected, validators, waiting }, setFiltered] = useState<{ elected: AccountExtend[]; validators: AccountExtend[]; waiting: AccountExtend[] }>({ elected: [], validators: [], waiting: [] });
+ const [{ allElected, elected, validators, waiting }, setFiltered] = useState<{ allElected: string[]; elected: AccountExtend[]; validators: AccountExtend[]; waiting: AccountExtend[] }>({ allElected: [], elected: [], validators: [], waiting: [] });
+ const [nameFilter, setNameFilter] = useState('');
+ const [addressDetails, dispatchDetails] = useReducer(reduceDetails, {});
+ const filterOpts = useMemo(() => [
+ { text: t('Show all validators and intentions'), value: 'all' },
+ { text: t('Show only my nominations'), value: 'iNominated' },
+ { text: t('Show only with nominators'), value: 'hasNominators' },
+ { text: t('Show only without nominators'), value: 'noNominators' },
+ { text: t('Show only with warnings'), value: 'hasWarnings' },
+ { text: t('Show only without warnings'), value: 'noWarnings' },
+ { text: t('Show only elected for next session'), value: 'nextSet' }
+ ], [t]);
useEffect((): void => {
if (isVisible && stakingOverview) {
- const _elected = accountsToString(stakingOverview.currentElected);
+ const allElected = accountsToString(stakingOverview.currentElected);
const _validators = accountsToString(stakingOverview.validators);
- const validators = filterAccounts(_validators, _elected, favorites, [], stakingOverview.eraPoints);
- const elected = isSubstrateV2 ? filterAccounts(_elected, _elected, favorites, _validators) : [];
+ const validators = filterAccounts(_validators, allElected, favorites, []);
+ const elected = filterAccounts(allElected, allElected, favorites, _validators);
setFiltered({
+ allElected,
elected,
validators,
- waiting: filterAccounts(next, [], favorites, _elected)
+ waiting: filterAccounts(next, [], favorites, allElected)
});
}
- }, [favorites, isVisible, next, stakingOverview]);
+ }, [favorites, isVisible, next, stakingOverview?.currentElected, stakingOverview?.validators]);
+
+ useEffect((): void => {
+ if (stakingOverview) {
+ dispatchDetails(validators.map(([address]): AddressDetails => {
+ const electedIdx = allElected.indexOf(address);
- const _renderRows = (addresses: AccountExtend[], defaultName: string, withOnline: boolean): React.ReactNode =>
- addresses.map(([address, isElected, isFavorite, points]): React.ReactNode => (
+ return {
+ address,
+ points: electedIdx !== -1
+ ? stakingOverview.eraPoints?.individual[electedIdx]
+ : undefined
+ };
+ }));
+ }
+ }, [stakingOverview?.eraPoints, allElected, validators]);
+
+ const _renderRows = (addresses: AccountExtend[], defaultName: string, isMain: boolean): React.ReactNode =>
+ addresses.map(([address, isElected, isFavorite]): React.ReactNode => (
{_renderRows(validators, t('validators'), true)}
@@ -134,5 +172,3 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAut
);
}
-
-export default translate(CurrentList);
diff --git a/packages/app-staking/src/Overview/Summary.tsx b/packages/app-staking/src/Overview/Summary.tsx
index a2fc65e5eae5..d6c937189b22 100644
--- a/packages/app-staking/src/Overview/Summary.tsx
+++ b/packages/app-staking/src/Overview/Summary.tsx
@@ -3,7 +3,6 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { DerivedStakingOverview } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
import React, { useContext } from 'react';
import styled from 'styled-components';
@@ -11,16 +10,18 @@ import SummarySession from '@polkadot/app-explorer/SummarySession';
import { CardSummary, IdentityIcon, SummaryBox } from '@polkadot/react-components';
import { BlockAuthorsContext } from '@polkadot/react-query';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
+interface Props {
className?: string;
isVisible: boolean;
next: string[];
stakingOverview?: DerivedStakingOverview;
+ style?: any;
}
-function Summary ({ className, isVisible, next, stakingOverview, style, t }: Props): React.ReactElement {
+function Summary ({ className, isVisible, next, stakingOverview, style }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { lastBlockAuthors, lastBlockNumber } = useContext(BlockAuthorsContext);
return (
@@ -63,18 +64,16 @@ function Summary ({ className, isVisible, next, stakingOverview, style, t }: Pro
);
}
-export default translate(
- styled(Summary)`
- .validator--Account-block-icon {
- margin-right: 0.75rem;
- margin-top: -0.25rem;
- vertical-align: middle;
- }
+export default styled(Summary)`
+ .validator--Account-block-icon {
+ margin-right: 0.75rem;
+ margin-top: -0.25rem;
+ vertical-align: middle;
+ }
- .validator--Summary-authors {
- .validator--Account-block-icon+.validator--Account-block-icon {
- margin-left: -1.5rem;
- }
+ .validator--Summary-authors {
+ .validator--Account-block-icon+.validator--Account-block-icon {
+ margin-left: -1.5rem;
}
- `
-);
+ }
+`;
diff --git a/packages/app-staking/src/Overview/types.ts b/packages/app-staking/src/Overview/types.ts
new file mode 100644
index 000000000000..5dd15942fc39
--- /dev/null
+++ b/packages/app-staking/src/Overview/types.ts
@@ -0,0 +1,10 @@
+// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Points } from '@polkadot/types/interfaces';
+
+export interface AddressDetails {
+ address: string;
+ points?: Points;
+}
diff --git a/packages/app-staking/src/Query/Validator.tsx b/packages/app-staking/src/Query/Validator.tsx
index bde688c322d1..5f39b80283e5 100644
--- a/packages/app-staking/src/Query/Validator.tsx
+++ b/packages/app-staking/src/Query/Validator.tsx
@@ -2,7 +2,6 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
import { Balance, Hash, Exposure } from '@polkadot/types/interfaces';
import { SessionRewards, Slash } from '../types';
@@ -14,10 +13,10 @@ import { getHistoric } from '@polkadot/react-api/util';
import { useApi } from '@polkadot/react-hooks';
import { formatBalance, formatNumber } from '@polkadot/util';
-import translate from '../translate';
+import { useTranslation } from '../translate';
import useBlockCounts from '../useBlockCounts';
-interface Props extends I18nProps {
+interface Props {
className?: string;
sessionRewards: SessionRewards[];
validatorId: string;
@@ -100,7 +99,8 @@ function extractEraSlash (validatorId: string, slashes: Slash[]): BN {
}, new BN(0));
}
-function Validator ({ className, sessionRewards, t, validatorId }: Props): React.ReactElement {
+export default function Validator ({ className, sessionRewards, validatorId }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
const blockCounts = useBlockCounts(validatorId, sessionRewards);
const [blocksLabels, setBlocksLabels] = useState([]);
@@ -269,5 +269,3 @@ function Validator ({ className, sessionRewards, t, validatorId }: Props): React
);
}
-
-export default translate(Validator);
diff --git a/packages/app-staking/src/Query/index.tsx b/packages/app-staking/src/Query/index.tsx
index 5cf610c2caaf..ea3d2ba360b8 100644
--- a/packages/app-staking/src/Query/index.tsx
+++ b/packages/app-staking/src/Query/index.tsx
@@ -2,21 +2,22 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
import { SessionRewards } from '../types';
import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import { Button, InputAddressSimple } from '@polkadot/react-components';
-import translate from '../translate';
+import { useTranslation } from '../translate';
import Validator from './Validator';
-interface Props extends I18nProps {
+interface Props {
+ className?: string;
sessionRewards: SessionRewards[];
}
-function Query ({ className, sessionRewards, t }: Props): React.ReactElement {
+export default function Query ({ className, sessionRewards }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { value } = useParams();
const [validatorId, setValidatorId] = useState(value || null);
@@ -51,5 +52,3 @@ function Query ({ className, sessionRewards, t }: Props): React.ReactElement
);
}
-
-export default translate(Query);
diff --git a/packages/app-staking/src/Targets/Summary.tsx b/packages/app-staking/src/Targets/Summary.tsx
index b91f58e8c29b..6ee1b61d8a07 100644
--- a/packages/app-staking/src/Targets/Summary.tsx
+++ b/packages/app-staking/src/Targets/Summary.tsx
@@ -3,45 +3,34 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { Balance } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
import BN from 'bn.js';
import React, { useEffect, useState } from 'react';
import { SummaryBox, CardSummary } from '@polkadot/react-components';
import { useApi, useCall } from '@polkadot/react-hooks';
-import { formatBalance } from '@polkadot/util';
+import { FormatBalance } from '@polkadot/react-query';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
+interface Props {
lastReward: BN;
totalStaked: BN;
}
interface StakeInfo {
percentage: string;
- staked: string | null;
}
-function Summary ({ lastReward, t, totalStaked }: Props): React.ReactElement {
+export default function Summary ({ lastReward, totalStaked }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
const totalInsurance = useCall(api.query.balances.totalIssuance, []);
- const [{ percentage, staked }, setStakeInfo] = useState({ percentage: '-', staked: null });
- const [total, setTotal] = useState(null);
-
- useEffect((): void => {
- if (totalInsurance) {
- setTotal(
- `${formatBalance(totalInsurance, false)}${formatBalance.calcSi(totalInsurance.toString()).value}`
- );
- }
- }, [totalInsurance]);
+ const [{ percentage }, setStakeInfo] = useState({ percentage: '-' });
useEffect((): void => {
if (totalInsurance && totalStaked?.gtn(0)) {
setStakeInfo({
- percentage: `${(totalStaked.muln(10000).div(totalInsurance).toNumber() / 100).toFixed(2)}%`,
- staked: `${formatBalance(totalStaked, false)}${formatBalance.calcSi(totalStaked.toString()).value}`
+ percentage: `${(totalStaked.muln(10000).div(totalInsurance).toNumber() / 100).toFixed(2)}%`
});
}
}, [totalInsurance, totalStaked]);
@@ -50,25 +39,28 @@ function Summary ({ lastReward, t, totalStaked }: Props): React.ReactElement
- {staked || '-'}
+
/
- {total || '-'}
+
{percentage}
- {
- lastReward.gtn(0)
- ? `${formatBalance(lastReward, false)}`
- : '-'
- }
+
);
}
-
-export default translate(Summary);
diff --git a/packages/app-staking/src/Targets/Validator.tsx b/packages/app-staking/src/Targets/Validator.tsx
index 9caf4e849445..7b96fc737bd2 100644
--- a/packages/app-staking/src/Targets/Validator.tsx
+++ b/packages/app-staking/src/Targets/Validator.tsx
@@ -2,7 +2,6 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.v
-import { I18nProps } from '@polkadot/react-components/types';
import { ValidatorInfo } from './types';
import React from 'react';
@@ -10,14 +9,15 @@ import { AddressSmall, Icon } from '@polkadot/react-components';
import { FormatBalance } from '@polkadot/react-query';
import { formatNumber } from '@polkadot/util';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
+interface Props {
info: ValidatorInfo;
toggleFavorite: (accountId: string) => void;
}
-function Validator ({ info: { accountId, bondOther, bondOwn, bondTotal, commissionPer, isCommission, isFavorite, isNominating, key, numNominators, rankOverall, rewardPayout, validatorPayment }, t, toggleFavorite }: Props): React.ReactElement {
+export default function Validator ({ info: { accountId, bondOther, bondOwn, bondTotal, commissionPer, isCommission, isFavorite, isNominating, key, numNominators, rankOverall, rewardPayout, validatorPayment }, toggleFavorite }: Props): React.ReactElement {
+ const { t } = useTranslation();
const _onFavorite = (): void => toggleFavorite(key);
const _onQueryStats = (): void => {
window.location.hash = `/staking/query/${key}`;
@@ -43,10 +43,10 @@ function Validator ({ info: { accountId, bondOther, bondOwn, bondTotal, commissi
: {t('commission')}} value={validatorPayment} />
}
- {t('total stake')}} value={bondTotal} /> {t('own stake')}} value={bondOwn} /> {t('other stake')}} value={bondOther} > ({formatNumber(numNominators)}) {t('payout (est.)')}} value={rewardPayout} /> {t('total stake')}} value={bondTotal} /> {t('own stake')}} value={bondOwn} /> {t('other stake')}} value={bondOther} > ({formatNumber(numNominators)}) {t('profit/era est.')}} value={rewardPayout} />
);
}
-
-export default translate(Validator);
diff --git a/packages/app-staking/src/Targets/index.tsx b/packages/app-staking/src/Targets/index.tsx
index 8f6afd457669..f75b58aa8bc0 100644
--- a/packages/app-staking/src/Targets/index.tsx
+++ b/packages/app-staking/src/Targets/index.tsx
@@ -3,7 +3,6 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { DerivedStakingElected } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
import { ValidatorPrefs, ValidatorPrefsTo196 } from '@polkadot/types/interfaces';
import { SessionRewards } from '../types';
import { ValidatorInfo } from './types';
@@ -12,18 +11,19 @@ import BN from 'bn.js';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { registry } from '@polkadot/react-api';
-import { InputBalance, Table } from '@polkadot/react-components';
+import { Icon, InputBalance, Table } from '@polkadot/react-components';
import { useAccounts, useApi, useDebounce, useFavorites, useCall } from '@polkadot/react-hooks';
import { createType } from '@polkadot/types';
import { STORE_FAVS_BASE } from '../constants';
-import translate from '../translate';
+import { useTranslation } from '../translate';
import Summary from './Summary';
import Validator from './Validator';
const PERBILL = new BN(1000000000);
-interface Props extends I18nProps {
+interface Props {
+ className?: string;
sessionRewards: SessionRewards[];
}
@@ -32,11 +32,31 @@ interface AllInfo {
validators: ValidatorInfo[];
}
+type SortBy = 'rankOverall' | 'rankBondOwn' | 'rankBondOther' | 'rankBondTotal' | 'rankComm';
+
function sortValidators (list: ValidatorInfo[]): ValidatorInfo[] {
return list
+ .sort((a, b): number => b.commissionPer - a.commissionPer)
+ .map((info, index): ValidatorInfo => {
+ info.rankComm = index + 1;
+
+ return info;
+ })
+ .sort((a, b): number => b.bondOther.cmp(a.bondOther))
+ .map((info, index): ValidatorInfo => {
+ info.rankBondOther = index + 1;
+
+ return info;
+ })
+ .sort((a, b): number => b.bondOwn.cmp(a.bondOwn))
+ .map((info, index): ValidatorInfo => {
+ info.rankBondOwn = index + 1;
+
+ return info;
+ })
.sort((a, b): number => b.bondTotal.cmp(a.bondTotal))
.map((info, index): ValidatorInfo => {
- info.rankBonded = index + 1;
+ info.rankBondTotal = index + 1;
return info;
})
@@ -59,30 +79,15 @@ function sortValidators (list: ValidatorInfo[]): ValidatorInfo[] {
? cmp
: a.rankReward === b.rankReward
? a.rankPayment === b.rankPayment
- ? a.rankBonded === b.rankBonded
- ? 0
- : a.rankBonded < b.rankBonded
- ? 1
- : -1
- : a.rankPayment < b.rankPayment
- ? 1
- : -1
- : a.rankReward < b.rankReward
- ? 1
- : -1;
+ ? b.rankBondTotal - a.rankBondTotal
+ : b.rankPayment - a.rankPayment
+ : b.rankReward - a.rankReward;
})
.map((info, index): ValidatorInfo => {
info.rankOverall = index + 1;
return info;
- })
- .sort((a, b): number =>
- a.isFavorite === b.isFavorite
- ? 0
- : a.isFavorite
- ? -1
- : 1
- );
+ });
}
function extractInfo (allAccounts: string[], amount: BN = new BN(0), electedInfo: DerivedStakingElected, favorites: string[], lastReward: BN): AllInfo {
@@ -126,7 +131,10 @@ function extractInfo (allAccounts: string[], amount: BN = new BN(0), electedInfo
key,
commissionPer: (((prefs as ValidatorPrefs).commission?.unwrap() || new BN(0)).muln(10000).div(PERBILL).toNumber() / 100),
numNominators: exposure.others.length,
- rankBonded: 0,
+ rankBondOther: 0,
+ rankBondOwn: 0,
+ rankBondTotal: 0,
+ rankComm: 0,
rankOverall: 0,
rankPayment: 0,
rankReward: 0,
@@ -140,7 +148,8 @@ function extractInfo (allAccounts: string[], amount: BN = new BN(0), electedInfo
return { totalStaked, validators };
}
-function Targets ({ className, sessionRewards, t }: Props): React.ReactElement {
+function Targets ({ className, sessionRewards }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
const { allAccounts } = useAccounts();
const [_amount, setAmount] = useState(new BN(1000));
@@ -148,8 +157,31 @@ function Targets ({ className, sessionRewards, t }: Props): React.ReactElement({ totalStaked: new BN(0), validators: [] });
+ const [{ sorted, sortBy, sortFromMax }, setSorted] = useState<{ sorted: ValidatorInfo[]; sortBy: SortBy; sortFromMax: boolean }>({ sorted: [], sortBy: 'rankOverall', sortFromMax: true });
const amount = useDebounce(_amount);
+ const _sort = (newSortBy: SortBy, unsorted = validators, isAdjust = true): void => {
+ const newSortFromMax = isAdjust && newSortBy === sortBy ? !sortFromMax : true;
+
+ setSorted({
+ sortBy: newSortBy,
+ sortFromMax: newSortFromMax,
+ sorted: unsorted
+ .sort((a, b): number =>
+ newSortFromMax
+ ? a[newSortBy] - b[newSortBy]
+ : b[newSortBy] - a[newSortBy]
+ )
+ .sort((a, b): number =>
+ a.isFavorite === b.isFavorite
+ ? 0
+ : a.isFavorite
+ ? -1
+ : 1
+ )
+ });
+ };
+
useEffect((): void => {
if (sessionRewards && sessionRewards.length) {
const lastRewardSession = sessionRewards.filter(({ reward }): boolean => reward.gtn(0));
@@ -164,7 +196,10 @@ function Targets ({ className, sessionRewards, t }: Props): React.ReactElement
{
if (electedInfo) {
- setWorkable(extractInfo(allAccounts, amount, electedInfo, favorites, lastReward));
+ const { totalStaked, validators } = extractInfo(allAccounts, amount, electedInfo, favorites, lastReward);
+
+ setWorkable({ totalStaked, validators });
+ _sort('rankOverall', validators, false);
}
}, [allAccounts, amount, electedInfo, favorites, lastReward]);
@@ -174,19 +209,33 @@ function Targets ({ className, sessionRewards, t }: Props): React.ReactElement
- {validators.length
+ {sorted.length
? (
<>
+
+
+
+
+ {['rankComm', 'rankBondTotal', 'rankBondOwn', 'rankBondOther', 'rankOverall'].map((header): React.ReactNode => (
+ _sort(header as 'rankComm')}
+ >
+ ))}
+
+
- {validators.map((info): React.ReactNode =>
+ {sorted.map((info): React.ReactNode =>
[]]): [string[], string[]] {
- return [
- stashes.map((accountId): string => accountId.toString()),
- controllers
- .filter((optId): boolean => optId.isSome)
- .map((accountId): string => accountId.unwrap().toString())
- ];
-}
-
function StakingApp ({ basePath, className }: Props): React.ReactElement {
const { t } = useTranslation();
- const { api, isSubstrateV2 } = useApi();
+ const { api } = useApi();
const { hasAccounts } = useAccounts();
const { pathname } = useLocation();
const [next, setNext] = useState([]);
- const [allStashes, allControllers] = (useCall<[string[], string[]]>(api.derive.staking.controllers, [], {
- defaultValue: EMPTY_ALL,
- transform: transformStakingControllers
- }) as [string[], string[]]);
+ const allStashes = useCall(api.derive.staking.controllers, [], {
+ defaultValue: [],
+ transform: ([stashes]: [AccountId[]]): string[] =>
+ stashes.map((accountId): string => accountId.toString())
+ }) as string[];
const recentlyOnline = useCall(api.derive.imOnline.receivedHeartbeats, []);
const stakingOverview = useCall(api.derive.staking.overview, []);
const sessionRewards = useSessionRewards(MAX_SESSIONS);
const hasQueries = hasAccounts && !!(api.query.imOnline?.authoredBlocks);
- const validators = stakingOverview?.validators;
+ const items = useMemo(() => [
+ {
+ isRoot: true,
+ name: 'overview',
+ text: t('Staking overview')
+ },
+ {
+ name: 'waiting',
+ text: t('Waiting')
+ },
+ {
+ name: 'returns',
+ text: t('Returns')
+ },
+ {
+ name: 'actions',
+ text: t('Account actions')
+ },
+ {
+ hasParams: true,
+ name: 'query',
+ text: t('Validator stats')
+ }
+ ], [t]);
useEffect((): void => {
- validators && setNext(
- isSubstrateV2
- // this is a V2 node currentValidators is a list of stashes
- ? allStashes.filter((address): boolean => !validators.includes(address as any))
- // this is a V1 node currentValidators is a list of controllers
- : allControllers.filter((address): boolean => !validators.includes(address as any))
+ stakingOverview && setNext(
+ allStashes.filter((address): boolean => !stakingOverview.validators.includes(address as any))
);
- }, [allControllers, allStashes, validators]);
+ }, [allStashes, stakingOverview?.validators]);
return (
@@ -76,30 +83,7 @@ function StakingApp ({ basePath, className }: Props): React.ReactElement
: ['query']
: ['actions', 'query']
}
- items={[
- {
- isRoot: true,
- name: 'overview',
- text: t('Staking overview')
- },
- {
- name: 'waiting',
- text: t('Waiting')
- },
- {
- name: 'returns',
- text: t('Returns')
- },
- {
- name: 'actions',
- text: t('Account actions')
- },
- {
- hasParams: true,
- name: 'query',
- text: t('Validator stats')
- }
- ]}
+ items={items}
/>
;
export interface CalculateBalanceProps {
balances_fees?: DerivedFees;
- balances_all?: DerivedBalances;
+ balances_all?: DerivedBalancesAll;
}
export type AccountFilter = 'all' | 'controller' | 'session' | 'stash' | 'unbonded';
diff --git a/packages/app-storage/package.json b/packages/app-storage/package.json
index 1f5ba433013f..5ca95137e428 100644
--- a/packages/app-storage/package.json
+++ b/packages/app-storage/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-storage",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"main": "index.js",
"repository": "https://github.com/polkadot-js/apps.git",
"author": "Jaco Greeff ",
@@ -10,8 +10,8 @@
"contributors": [],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40",
- "@polkadot/react-params": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11",
+ "@polkadot/react-params": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-storage/src/Query.tsx b/packages/app-storage/src/Query.tsx
index f241b3a41bec..0ecc260a4f9c 100644
--- a/packages/app-storage/src/Query.tsx
+++ b/packages/app-storage/src/Query.tsx
@@ -3,7 +3,6 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { RenderFn, DefaultProps, ComponentRenderer } from '@polkadot/react-api/hoc/types';
-import { I18nProps } from '@polkadot/react-components/types';
import { ConstValue } from '@polkadot/react-components/InputConsts/types';
import { QueryTypes, StorageEntryPromise, StorageModuleQuery } from './types';
@@ -16,9 +15,8 @@ import valueToText from '@polkadot/react-params/valueToText';
import { Compact, Option, Raw } from '@polkadot/types';
import { isU8a, u8aToHex, u8aToString } from '@polkadot/util';
-import translate from './translate';
-
-interface Props extends I18nProps {
+interface Props {
+ className?: string;
onRemove: (id: number) => void;
value: QueryTypes;
}
@@ -214,22 +212,20 @@ function Query ({ className, onRemove, value }: Props): React.ReactElement {
+export default function Consts ({ onAdd }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
const [defaultValue] = useState((): ConstValue => {
const section = Object.keys(api.consts)[0];
@@ -54,5 +52,3 @@ function Consts ({ onAdd, t }: Props): React.ReactElement {
);
}
-
-export default translate(Consts);
diff --git a/packages/app-storage/src/Selection/Modules.tsx b/packages/app-storage/src/Selection/Modules.tsx
index 1e819acbd677..bf208f46df00 100644
--- a/packages/app-storage/src/Selection/Modules.tsx
+++ b/packages/app-storage/src/Selection/Modules.tsx
@@ -3,37 +3,71 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { TypeDef } from '@polkadot/types/types';
-import { I18nProps } from '@polkadot/react-components/types';
import { RawParams } from '@polkadot/react-params/types';
-import { ComponentProps, StorageEntryPromise } from '../types';
+import { ComponentProps as Props, StorageEntryPromise } from '../types';
import React, { useState } from 'react';
-import { getTypeDef } from '@polkadot/types';
+import ApiPromise from '@polkadot/api/promise';
import { Button, InputStorage } from '@polkadot/react-components';
-import Params from '@polkadot/react-params';
import { useApi } from '@polkadot/react-hooks';
+import Params from '@polkadot/react-params';
+import { getTypeDef } from '@polkadot/types';
import { isNull, isUndefined } from '@polkadot/util';
-import translate from '../translate';
-
-interface Props extends ComponentProps, I18nProps {}
+import { useTranslation } from '../translate';
type ParamsType = { type: TypeDef }[];
-function areParamsValid (values: RawParams): boolean {
- return values.reduce(
- (isValid: boolean, value): boolean => (
- isValid &&
- !isUndefined(value) &&
- !isUndefined(value.value) &&
- value.isValid),
- true
- );
+interface KeyState {
+ defaultValues: RawParams | undefined | null;
+ isIterable: boolean;
+ key: StorageEntryPromise;
+ params: ParamsType;
+}
+
+function areParamsValid ({ creator: { meta: { type } } }: StorageEntryPromise, values: RawParams): boolean {
+ return values.reduce((isValid: boolean, value): boolean => {
+ return isValid &&
+ !isUndefined(value) &&
+ !isUndefined(value.value) &&
+ value.isValid;
+ }, (
+ type.isDoubleMap
+ ? values.length === 2
+ : values.length === (type.isMap ? 1 : 0)
+ ));
+}
+
+function expandKey (api: ApiPromise, key: StorageEntryPromise): KeyState {
+ const { creator: { meta: { type }, section } } = key;
+
+ return {
+ defaultValues: section === 'session' && type.isDoubleMap
+ ? [{ isValid: true, value: api.consts.session.dedupKeyPrefix.toHex() }]
+ : null,
+ isIterable: type.isMap && type.asMap.linked.isTrue,
+ key,
+ params: type.isDoubleMap
+ ? [
+ { type: getTypeDef(type.asDoubleMap.key1.toString()) },
+ { type: getTypeDef(type.asDoubleMap.key2.toString()) }
+ ]
+ : type.isMap
+ ? [{
+ type: getTypeDef(
+ type.asMap.linked.isTrue
+ ? `Option<${type.asMap.key.toString()}>`
+ : type.asMap.key.toString()
+ )
+ }]
+ : []
+ };
}
-function Modules ({ onAdd, t }: Props): React.ReactElement {
+export default function Modules ({ onAdd }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
- const [{ defaultValues, isIterable, key, params }, setKey] = useState<{ defaultValues: RawParams | undefined | null; isIterable: boolean; key: StorageEntryPromise; params: ParamsType }>({ defaultValues: undefined, isIterable: false, key: api.query.timestamp.now, params: [] });
+ const [{ defaultValues, isIterable, key, params }, setKey] = useState({ defaultValues: undefined, isIterable: false, key: api.query.timestamp.now, params: [] });
const [{ isValid, values }, setValues] = useState<{ isValid: boolean; values: RawParams }>({ isValid: true, values: [] });
const _onAdd = (): void => {
@@ -43,42 +77,13 @@ function Modules ({ onAdd, t }: Props): React.ReactElement {
params: values.filter(({ value }): boolean => !isIterable || !isNull(value))
});
};
- const _onChangeValues = (values: RawParams): void => {
+ const _onChangeValues = (values: RawParams): void =>
setValues({
- isValid: (
- key.creator.meta.type.isDoubleMap
- ? values.length === 2
- : values.length === (key.creator.meta.type.isMap ? 1 : 0)
- ) && areParamsValid(values),
+ isValid: areParamsValid(key, values),
values
});
- };
const _onChangeKey = (key: StorageEntryPromise): void => {
- const asMap = key.creator.meta.type.isMap && key.creator.meta.type.asMap;
- const isIterable = !!asMap && (asMap.kind.isLinkedMap || asMap.kind.isPrefixedMap);
-
- setKey({
- defaultValues: key.creator.section === 'session' && key.creator.meta.type.isDoubleMap
- ? [{ isValid: true, value: api.consts.session.dedupKeyPrefix.toHex() }]
- : null,
- isIterable,
- key,
- params: key.creator.meta.type.isDoubleMap
- ? [
- { type: getTypeDef(key.creator.meta.type.asDoubleMap.key1.toString()) },
- { type: getTypeDef(key.creator.meta.type.asDoubleMap.key2.toString()) }
- ]
- : asMap
- ? [{
- type: getTypeDef(
- isIterable
- ? `Option<${asMap.key.toString()}>`
- : asMap.key.toString()
- )
- }]
- : []
- });
-
+ setKey(expandKey(api, key));
_onChangeValues([]);
};
@@ -112,5 +117,3 @@ function Modules ({ onAdd, t }: Props): React.ReactElement {
);
}
-
-export default translate(Modules);
diff --git a/packages/app-storage/src/Selection/Raw.tsx b/packages/app-storage/src/Selection/Raw.tsx
index 65a9b322eaf2..c566e16d3c18 100644
--- a/packages/app-storage/src/Selection/Raw.tsx
+++ b/packages/app-storage/src/Selection/Raw.tsx
@@ -2,19 +2,17 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
-import { ComponentProps } from '../types';
+import { ComponentProps as Props } from '../types';
import React, { useState } from 'react';
import { Button, Input } from '@polkadot/react-components';
-import translate from '../translate';
+import { useTranslation } from '../translate';
import { u8aToU8a } from '@polkadot/util';
import { Compact } from '@polkadot/types';
-interface Props extends ComponentProps, I18nProps {}
-
-function Raw ({ onAdd, t }: Props): React.ReactElement {
+export default function Raw ({ onAdd }: Props): React.ReactElement {
+ const { t } = useTranslation();
const [{ isValid, key }, setValue] = useState<{ isValid: boolean; key: Uint8Array }>({ isValid: false, key: new Uint8Array([]) });
const _onAdd = (): void => {
@@ -51,5 +49,3 @@ function Raw ({ onAdd, t }: Props): React.ReactElement {
);
}
-
-export default translate(Raw);
diff --git a/packages/app-storage/src/Selection/index.tsx b/packages/app-storage/src/Selection/index.tsx
index 03595350bd0c..b1ea0deeaba4 100644
--- a/packages/app-storage/src/Selection/index.tsx
+++ b/packages/app-storage/src/Selection/index.tsx
@@ -2,28 +2,42 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
import { ComponentProps, QueryTypes, ParitalQueryTypes } from '../types';
-import React from 'react';
+import React, { useMemo } from 'react';
import { Route, Switch } from 'react-router';
import { Tabs } from '@polkadot/react-components';
-import { useApi } from '@polkadot/react-hooks';
import Consts from './Consts';
import Modules from './Modules';
import Raw from './Raw';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
+interface Props {
basePath: string;
onAdd: (query: QueryTypes) => void;
}
let id = -1;
-function Selection ({ basePath, onAdd, t }: Props): React.ReactElement {
- const { isSubstrateV2 } = useApi();
+export default function Selection ({ basePath, onAdd }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const items = useMemo(() => [
+ {
+ isRoot: true,
+ name: 'modules',
+ text: t('Storage')
+ },
+ {
+ name: 'constants',
+ text: t('Constants')
+ },
+ {
+ name: 'raw',
+ text: t('Raw storage')
+ }
+ ], [t]);
+
const _onAdd = (query: ParitalQueryTypes): void => onAdd({ ...query, id: ++id });
const _renderComponent = (Component: React.ComponentType): () => React.ReactNode =>
// eslint-disable-next-line react/display-name
@@ -34,26 +48,7 @@ function Selection ({ basePath, onAdd, t }: Props): React.ReactElement {
@@ -64,5 +59,3 @@ function Selection ({ basePath, onAdd, t }: Props): React.ReactElement {
);
}
-
-export default translate(Selection);
diff --git a/packages/app-storage/src/index.tsx b/packages/app-storage/src/index.tsx
index 8c3f9a5096ee..605ad8f1194c 100644
--- a/packages/app-storage/src/index.tsx
+++ b/packages/app-storage/src/index.tsx
@@ -2,27 +2,23 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
+import { AppProps as Props } from '@polkadot/react-components/types';
import { QueryTypes } from './types';
-import './index.css';
-
import React, { useState } from 'react';
+import styled from 'styled-components';
import Queries from './Queries';
import Selection from './Selection';
-import translate from './translate';
-
-interface Props extends AppProps, I18nProps {}
-function StorageApp ({ basePath }: Props): React.ReactElement {
+function StorageApp ({ basePath, className }: Props): React.ReactElement {
const [queue, setQueue] = useState([]);
const _onAdd = (query: QueryTypes): void => setQueue([query, ...queue]);
const _onRemove = (id: number): void => setQueue(queue.filter((item): boolean => item.id !== id));
return (
-
+
{
);
}
-export default translate(StorageApp);
+export default styled(StorageApp)`
+ .storage--actionrow {
+ align-items: center;
+ display: flex;
+
+ .button {
+ margin: 0.25rem;
+ }
+
+ &.head {
+ flex: 1 1 100%;
+ margin: 0 auto;
+ max-width: 620px;
+ }
+ }
+
+ .storage--actionrow-value {
+ flex: 1;
+ min-width: 0;
+
+ .ui--output {
+ word-break: break-all;
+ }
+ }
+
+ .storage--actionrow-buttons {
+ flex: 0;
+ padding: 0 0.25rem;
+ }
+`;
diff --git a/packages/app-sudo/package.json b/packages/app-sudo/package.json
index 2a6b966e04aa..9a568d62895f 100644
--- a/packages/app-sudo/package.json
+++ b/packages/app-sudo/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-sudo",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"description": "A basic app that shows the ropes on customisation",
"main": "index.js",
"scripts": {},
@@ -11,7 +11,7 @@
],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-sudo/src/SetKey.tsx b/packages/app-sudo/src/SetKey.tsx
index 89051acb7fb1..72e0cf82eb37 100644
--- a/packages/app-sudo/src/SetKey.tsx
+++ b/packages/app-sudo/src/SetKey.tsx
@@ -9,11 +9,12 @@ import { ComponentProps } from './types';
import styled from 'styled-components';
-import translate from './translate';
+import { useTranslation } from './translate';
interface Props extends I18nProps, ComponentProps {}
-function SetKey ({ allAccounts, className, isMine, sudoKey, t }: Props): React.ReactElement {
+function SetKey ({ allAccounts, className, isMine, sudoKey }: Props): React.ReactElement {
+ const { t } = useTranslation();
const [selected, setSelected] = useState(null);
useEffect((): void => {
@@ -75,21 +76,19 @@ function SetKey ({ allAccounts, className, isMine, sudoKey, t }: Props): React.R
);
}
-export default translate(
- styled(SetKey)`
- align-items: flex-end;
- justify-content: center;
+export default styled(SetKey)`
+ align-items: flex-end;
+ justify-content: center;
- .summary {
- text-align: center;
- }
+ .summary {
+ text-align: center;
+ }
- .sudoInputAddress {
- margin: -0.25rem 0.5rem -0.25rem 0;
- }
+ .sudoInputAddress {
+ margin: -0.25rem 0.5rem -0.25rem 0;
+ }
- .sudoLabelled {
- align-items: center;
- }
- `
-);
+ .sudoLabelled {
+ align-items: center;
+ }
+`;
diff --git a/packages/app-sudo/src/Sudo.tsx b/packages/app-sudo/src/Sudo.tsx
index 35a3da545552..9e41563326b2 100644
--- a/packages/app-sudo/src/Sudo.tsx
+++ b/packages/app-sudo/src/Sudo.tsx
@@ -2,7 +2,7 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { Call } from '@polkadot/types/interfaces';
+import { SubmittableExtrinsic } from '@polkadot/api/types';
import { I18nProps } from '@polkadot/react-components/types';
import { ApiProps } from '@polkadot/react-api/types';
import { ComponentProps } from './types';
@@ -20,7 +20,7 @@ interface Props extends I18nProps, ApiProps, ComponentProps {
}
interface State {
- method: Call | null;
+ method: SubmittableExtrinsic<'promise'> | null;
isValid: boolean;
}
@@ -53,6 +53,7 @@ class Propose extends TxComponent {
isDisabled={!method || !isValid}
params={method ? [createType(registry, 'Proposal', method)] : []}
ref={this.button}
+ withSpinner
/>
@@ -81,7 +82,7 @@ class Propose extends TxComponent {
);
}
- private onChangeExtrinsic = (method?: Call): void => {
+ private onChangeExtrinsic = (method?: SubmittableExtrinsic<'promise'>): void => {
if (!method) {
return;
}
diff --git a/packages/app-sudo/src/index.tsx b/packages/app-sudo/src/index.tsx
index d97f56164379..e00692f1263f 100644
--- a/packages/app-sudo/src/index.tsx
+++ b/packages/app-sudo/src/index.tsx
@@ -3,10 +3,10 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
+import { AppProps as Props } from '@polkadot/react-components/types';
import { ComponentProps } from './types';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
import { Route, Switch } from 'react-router';
import { Icon, Tabs } from '@polkadot/react-components';
import { useCall, useAccounts, useApi } from '@polkadot/react-hooks';
@@ -14,16 +14,25 @@ import { useCall, useAccounts, useApi } from '@polkadot/react-hooks';
import SetKey from './SetKey';
import Sudo from './Sudo';
-import translate from './translate';
+import { useTranslation } from './translate';
-interface Props extends AppProps, I18nProps {
-}
-
-function SudoApp ({ basePath, t }: Props): React.ReactElement {
+export default function SudoApp ({ basePath }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
const sudoKey = useCall(api.query.sudo.key, [], { transform: (k): string => k.toString() });
const { allAccounts } = useAccounts();
const [isMine, setIsMine] = useState(false);
+ const items = useMemo(() => [
+ {
+ isRoot: true,
+ name: 'index',
+ text: t('Sudo access')
+ },
+ {
+ name: 'key',
+ text: t('Set sudo key')
+ }
+ ], [t]);
useEffect((): void => {
setIsMine(!!sudoKey && allAccounts.some((key): boolean => key === sudoKey));
@@ -47,17 +56,7 @@ function SudoApp ({ basePath, t }: Props): React.ReactElement {
{isMine
@@ -79,5 +78,3 @@ function SudoApp ({ basePath, t }: Props): React.ReactElement {
);
}
-
-export default translate(SudoApp);
diff --git a/packages/app-tech-comm/package.json b/packages/app-tech-comm/package.json
index 53d9f884166d..d40a8266ab16 100644
--- a/packages/app-tech-comm/package.json
+++ b/packages/app-tech-comm/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-tech-comm",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"description": "Council",
"main": "index.js",
"scripts": {},
@@ -10,8 +10,8 @@
],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40",
- "@polkadot/react-query": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11",
+ "@polkadot/react-query": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-tech-comm/src/Overview/Members.tsx b/packages/app-tech-comm/src/Overview/Members.tsx
index 2302f9144259..92395ad9b171 100644
--- a/packages/app-tech-comm/src/Overview/Members.tsx
+++ b/packages/app-tech-comm/src/Overview/Members.tsx
@@ -3,19 +3,20 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { AccountId } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
import { AddressSmall, Table } from '@polkadot/react-components';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
- members?: AccountId[];
+interface Props {
className?: string;
+ members?: AccountId[];
}
-function Members ({ className, members, t }: Props): React.ReactElement {
+export default function Members ({ className, members }: Props): React.ReactElement {
+ const { t } = useTranslation();
+
return (
{members?.length
@@ -37,5 +38,3 @@ function Members ({ className, members, t }: Props): React.ReactElement
{
{
+export default function Summary ({ className, members, proposals }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
const proposalCount = useCall(api.query.technicalCommittee.proposalCount, []);
@@ -36,5 +34,3 @@ function Summary ({ className, members, proposals, t }: Props): React.ReactEleme
);
}
-
-export default translate(Summary);
diff --git a/packages/app-tech-comm/src/Overview/index.tsx b/packages/app-tech-comm/src/Overview/index.tsx
index 3549b117d299..3f484cd82959 100644
--- a/packages/app-tech-comm/src/Overview/index.tsx
+++ b/packages/app-tech-comm/src/Overview/index.tsx
@@ -2,18 +2,14 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
-import { ComponentProps } from '../types';
+import { ComponentProps as Props } from '../types';
import React from 'react';
-import translate from '../translate';
import Members from './Members';
import Summary from './Summary';
-interface Props extends I18nProps, ComponentProps {}
-
-function Overview ({ className, members, proposals }: Props): React.ReactElement {
+export default function Overview ({ className, members, proposals }: Props): React.ReactElement {
return (
);
}
-
-export default translate(Overview);
diff --git a/packages/app-tech-comm/src/Proposals/Proposal.tsx b/packages/app-tech-comm/src/Proposals/Proposal.tsx
index f08676b696c4..09e1f3ead011 100644
--- a/packages/app-tech-comm/src/Proposals/Proposal.tsx
+++ b/packages/app-tech-comm/src/Proposals/Proposal.tsx
@@ -3,7 +3,6 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { Proposal as ProposalType, Votes } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
import { AddressMini } from '@polkadot/react-components';
@@ -12,14 +11,16 @@ import ProposalCell from '@polkadot/app-democracy/Overview/ProposalCell';
import { Option } from '@polkadot/types';
import { formatNumber } from '@polkadot/util';
-import translate from '../translate';
+import { useTranslation } from '../translate';
import Voting from './Voting';
-interface Props extends I18nProps {
+interface Props {
+ className?: string;
hash: string;
}
-function Proposal ({ className, hash, t }: Props): React.ReactElement | null {
+export default function Proposal ({ className, hash }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const { api } = useApi();
const optProposal = useCall>(api.query.technicalCommittee.proposalOf, [hash]);
const votes = useCall>(api.query.technicalCommittee.voting, [hash]);
@@ -72,5 +73,3 @@ function Proposal ({ className, hash, t }: Props): React.ReactElement | n
);
}
-
-export default translate(Proposal);
diff --git a/packages/app-tech-comm/src/Proposals/Propose.tsx b/packages/app-tech-comm/src/Proposals/Propose.tsx
index 64651415b8a8..1a88be2a8517 100644
--- a/packages/app-tech-comm/src/Proposals/Propose.tsx
+++ b/packages/app-tech-comm/src/Proposals/Propose.tsx
@@ -2,9 +2,9 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
+import { SubmittableExtrinsic } from '@polkadot/api/types';
import { TxSource, TxDef } from '@polkadot/react-hooks/types';
-import { Call, Proposal } from '@polkadot/types/interfaces';
+import { Proposal } from '@polkadot/types/interfaces';
import BN from 'bn.js';
import React, { useEffect, useState } from 'react';
@@ -13,17 +13,15 @@ import { Extrinsic, InputNumber, TxModalNew as TxModal } from '@polkadot/react-c
import { useApi, useTx } from '@polkadot/react-hooks';
import { createType } from '@polkadot/types';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
+interface Props {
memberCount?: number;
onClose: () => void;
}
-function Propose ({ t, onClose, memberCount = 0 }: Props): React.ReactElement {
- const _hasThreshold = (threshold?: BN | null): boolean =>
- !!threshold && !threshold.isZero() && threshold.lten(memberCount);
-
+export default function Propose ({ onClose, memberCount = 0 }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { apiDefaultTxSudo } = useApi();
const [proposal, setProposal] = useState(null);
const [[threshold, hasThreshold], setThreshold] = useState<[BN | null, boolean]>([
@@ -44,11 +42,14 @@ function Propose ({ t, onClose, memberCount = 0 }: Props): React.ReactElement
+ !!threshold && !threshold.isZero() && threshold.lten(memberCount);
+
useEffect((): void => {
setThreshold([threshold, _hasThreshold(threshold)]);
}, [memberCount]);
- const _onChangeExtrinsic = (method?: Call): void =>
+ const _onChangeExtrinsic = (method?: SubmittableExtrinsic<'promise'>): void =>
setProposal(method ? createType(registry, 'Proposal', method) : null);
const _onChangeThreshold = (threshold?: BN): void =>
setThreshold([threshold || null, _hasThreshold(threshold)]);
@@ -79,5 +80,3 @@ function Propose ({ t, onClose, memberCount = 0 }: Props): React.ReactElement
);
}
-
-export default translate(Propose);
diff --git a/packages/app-tech-comm/src/Proposals/Voting.tsx b/packages/app-tech-comm/src/Proposals/Voting.tsx
index eeb29332a778..faabad1dbb56 100644
--- a/packages/app-tech-comm/src/Proposals/Voting.tsx
+++ b/packages/app-tech-comm/src/Proposals/Voting.tsx
@@ -2,32 +2,30 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
-
import BN from 'bn.js';
import React, { useState } from 'react';
import { Button, Modal, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
-import { useAccounts } from '@polkadot/react-hooks';
+import { useAccounts, useToggle } from '@polkadot/react-hooks';
import { isBoolean } from '@polkadot/util';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
+interface Props {
hash: string;
proposalId: BN | number;
}
-function Voting ({ hash, proposalId, t }: Props): React.ReactElement | null {
+export default function Voting ({ hash, proposalId }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
const { hasAccounts } = useAccounts();
const [accountId, setAccountId] = useState(null);
- const [isVotingOpen, setIsVotingOpen] = useState(false);
+ const [isVotingOpen, toggleVoting] = useToggle();
const [voteValue, setVoteValue] = useState(true);
if (!hasAccounts) {
return null;
}
- const _toggleVoting = (): void => setIsVotingOpen(!isVotingOpen);
const _onChangeVote = (vote?: boolean): void => setVoteValue(isBoolean(vote) ? vote : true);
return (
@@ -35,7 +33,6 @@ function Voting ({ hash, proposalId, t }: Props): React.ReactElement | nu
{isVotingOpen && (
@@ -47,7 +44,7 @@ function Voting ({ hash, proposalId, t }: Props): React.ReactElement | nu
| nu
icon='check'
isPrimary
label={t('Vote')}
- onClick={_toggleVoting}
+ onClick={toggleVoting}
/>
);
}
-
-export default translate(Voting);
diff --git a/packages/app-tech-comm/src/Proposals/index.tsx b/packages/app-tech-comm/src/Proposals/index.tsx
index f67f0811dc2b..437c6e6ec7ae 100644
--- a/packages/app-tech-comm/src/Proposals/index.tsx
+++ b/packages/app-tech-comm/src/Proposals/index.tsx
@@ -2,29 +2,27 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
import { Hash } from '@polkadot/types/interfaces';
-import { ComponentProps } from '../types';
+import { ComponentProps as Props } from '../types';
-import React, { useState } from 'react';
+import React from 'react';
import { Button, Table } from '@polkadot/react-components';
+import { useToggle } from '@polkadot/react-hooks';
-import translate from '../translate';
+import { useTranslation } from '../translate';
import Proposal from './Proposal';
import Propose from './Propose';
-interface Props extends ComponentProps, I18nProps {}
-
-function Proposals ({ className, members, proposals, t }: Props): React.ReactElement {
- const [isProposeOpen, setIsProposeOpen] = useState(false);
- const _toggleProposal = (): void => setIsProposeOpen(!isProposeOpen);
+export default function Proposals ({ className, members, proposals }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const [isProposeOpen, togglePropose] = useToggle(false);
return (
{isProposeOpen && (
)}
@@ -32,7 +30,7 @@ function Proposals ({ className, members, proposals, t }: Props): React.ReactEle
isPrimary
label={t('Submit proposal')}
icon='add'
- onClick={_toggleProposal}
+ onClick={togglePropose}
/>
{proposals?.length
@@ -53,5 +51,3 @@ function Proposals ({ className, members, proposals, t }: Props): React.ReactEle
{
+export default function TechCommApp ({ basePath, className }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
const members = useCall(api.query.technicalCommittee.members, []);
const proposals = useCall(api.query.technicalCommittee.proposals, []);
+ const items = useMemo(() => [
+ {
+ isRoot: true,
+ name: 'overview',
+ text: t('Tech. committee')
+ },
+ {
+ name: 'proposals',
+ text: t('Proposals ({{count}})', { replace: { count: (proposals && proposals.length) || 0 } })
+ }
+ ], [proposals, t]);
return (
@@ -58,5 +60,3 @@ function TechCommApp ({ basePath, className, t }: Props): React.ReactElement
);
}
-
-export default translate(TechCommApp);
diff --git a/packages/app-tech-comm/src/useCounter.ts b/packages/app-tech-comm/src/useCounter.ts
index 98b2629a61a9..5aa387a48deb 100644
--- a/packages/app-tech-comm/src/useCounter.ts
+++ b/packages/app-tech-comm/src/useCounter.ts
@@ -9,7 +9,7 @@ import { useApi, useCall } from '@polkadot/react-hooks';
export default function useCounter (): number {
const { api, isApiReady } = useApi();
- const proposals = useCall(isApiReady ? api.query.technicalCommittee && api.query.technicalCommittee.proposals : undefined, []);
+ const proposals = useCall(isApiReady ? api.query.technicalCommittee?.proposals : undefined, []);
const [counter, setCounter] = useState(0);
useEffect((): void => {
diff --git a/packages/app-toolbox/package.json b/packages/app-toolbox/package.json
index bd8cd558a0ee..7d1c211863a9 100644
--- a/packages/app-toolbox/package.json
+++ b/packages/app-toolbox/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-toolbox",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"main": "index.js",
"repository": "https://github.com/polkadot-js/apps.git",
"author": "Jaco Greeff ",
@@ -10,7 +10,7 @@
"contributors": [],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-toolbox/src/Hash.tsx b/packages/app-toolbox/src/Hash.tsx
index 8d1d8c121799..8882bfd5233b 100644
--- a/packages/app-toolbox/src/Hash.tsx
+++ b/packages/app-toolbox/src/Hash.tsx
@@ -2,14 +2,12 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps as Props } from '@polkadot/react-components/types';
-
import React, { useState } from 'react';
import { Input, Output, Static } from '@polkadot/react-components';
import { hexToU8a, isHex, stringToU8a } from '@polkadot/util';
import { blake2AsHex } from '@polkadot/util-crypto';
-import translate from './translate';
+import { useTranslation } from './translate';
interface State {
data: string;
@@ -17,7 +15,8 @@ interface State {
isHexData: boolean;
}
-function Hash ({ t }: Props): React.ReactElement {
+export default function Hash (): React.ReactElement<{}> {
+ const { t } = useTranslation();
const [{ data, hash, isHexData }, setState] = useState({
data: '',
hash: blake2AsHex(stringToU8a(''), 256),
@@ -77,5 +76,3 @@ function Hash ({ t }: Props): React.ReactElement {
);
}
-
-export default translate(Hash);
diff --git a/packages/app-toolbox/src/Rpc/Account.tsx b/packages/app-toolbox/src/Rpc/Account.tsx
index d350afda015c..5cf9a58bd708 100644
--- a/packages/app-toolbox/src/Rpc/Account.tsx
+++ b/packages/app-toolbox/src/Rpc/Account.tsx
@@ -2,23 +2,23 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
-
import BN from 'bn.js';
import React, { useState } from 'react';
import styled from 'styled-components';
import { InputAddress, Labelled } from '@polkadot/react-components';
import { Nonce } from '@polkadot/react-query';
-import translate from './translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
+interface Props {
+ className?: string;
defaultValue?: string | null;
isError?: boolean;
onChange: (accountId: string | undefined | null, accountNonce: BN) => void;
}
-function Account ({ className, defaultValue, isError, onChange, t }: Props): React.ReactElement {
+function Account ({ className, defaultValue, isError, onChange }: Props): React.ReactElement {
+ const { t } = useTranslation();
const [accountId, setAccountId] = useState(defaultValue);
const [accountNonce, setAccountNonce] = useState(new BN(0));
@@ -59,9 +59,7 @@ function Account ({ className, defaultValue, isError, onChange, t }: Props): Rea
);
}
-export default translate(
- styled(Account)`
- box-sizing: border-box;
- padding-left: 2em;
- `
-);
+export default styled(Account)`
+ box-sizing: border-box;
+ padding-left: 2em;
+`;
diff --git a/packages/app-toolbox/src/Rpc/Selection.tsx b/packages/app-toolbox/src/Rpc/Selection.tsx
index d3bb3f42d377..7346f48a4f87 100644
--- a/packages/app-toolbox/src/Rpc/Selection.tsx
+++ b/packages/app-toolbox/src/Rpc/Selection.tsx
@@ -14,7 +14,7 @@ import Params from '@polkadot/react-params';
import { getTypeDef } from '@polkadot/types';
import { isNull } from '@polkadot/util';
-import translate from './translate';
+import translate from '../translate';
interface Props extends I18nProps {
queueRpc: QueueTxRpcAdd;
diff --git a/packages/app-toolbox/src/Sign.tsx b/packages/app-toolbox/src/Sign.tsx
index 29082b837e41..f8dbda94e293 100644
--- a/packages/app-toolbox/src/Sign.tsx
+++ b/packages/app-toolbox/src/Sign.tsx
@@ -3,7 +3,6 @@
// of the Apache-2.0 license. See the LICENSE file for details.
import { Signer } from '@polkadot/api/types';
-import { I18nProps } from '@polkadot/react-components/types';
import { KeyringPair } from '@polkadot/keyring/types';
import React, { useEffect, useState } from 'react';
@@ -13,10 +12,10 @@ import { Button, Input, InputAddress, Output, Static } from '@polkadot/react-com
import keyring from '@polkadot/ui-keyring';
import { hexToU8a, isFunction, isHex, stringToHex, stringToU8a, u8aToHex } from '@polkadot/util';
-import translate from './translate';
+import { useTranslation } from './translate';
import Unlock from './Unlock';
-interface Props extends I18nProps {
+interface Props {
className?: string;
}
@@ -26,7 +25,8 @@ interface AccountState {
isInjected: boolean;
}
-function Sign ({ className, t }: Props): React.ReactElement {
+function Sign ({ className }: Props): React.ReactElement {
+ const { t } = useTranslation();
const [currentPair, setCurrentPair] = useState(keyring.getPairs()[0] || null);
const [{ data, isHexData }, setData] = useState<{ data: string; isHexData: boolean }>({ data: '', isHexData: false });
const [{ isInjected }, setAccountState] = useState({
@@ -205,38 +205,36 @@ function Sign ({ className, t }: Props): React.ReactElement {
);
}
-export default translate(
- styled(Sign)`
- .toolbox--Sign-input {
- position: relative;
+export default styled(Sign)`
+ .toolbox--Sign-input {
+ position: relative;
+ width: 100%;
+ height: 100%;
+
+ .unlock-overlay {
+ position: absolute;
width: 100%;
height: 100%;
+ top:0;
+ left:0;
+ background-color: #0f0e0e7a;
+ }
- .unlock-overlay {
- position: absolute;
- width: 100%;
- height: 100%;
- top:0;
- left:0;
- background-color: #0f0e0e7a;
- }
-
- .unlock-overlay-warning {
- display: flex;
- align-items: center;
- justify-content: center;
- height:100%;
- }
+ .unlock-overlay-warning {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height:100%;
+ }
- .unlock-overlay-content {
- color:#fff;
- padding: 0 2.5rem;
- text-align:center;
+ .unlock-overlay-content {
+ color:#fff;
+ padding: 0 2.5rem;
+ text-align:center;
- .ui--Button-Group {
- text-align: center;
- }
+ .ui--Button-Group {
+ text-align: center;
}
}
- `
-);
+ }
+`;
diff --git a/packages/app-toolbox/src/Unlock.tsx b/packages/app-toolbox/src/Unlock.tsx
index 480ef826122b..fb08d52725e8 100644
--- a/packages/app-toolbox/src/Unlock.tsx
+++ b/packages/app-toolbox/src/Unlock.tsx
@@ -46,7 +46,6 @@ class Unlock extends TxComponent {
{this.renderContent()}
{this.renderActions()}
@@ -58,23 +57,14 @@ class Unlock extends TxComponent {
const { t } = this.props;
return (
-
-
-
+
+
);
}
diff --git a/packages/app-toolbox/src/Verify.tsx b/packages/app-toolbox/src/Verify.tsx
index c74d13f0c265..8c54d9a96e67 100644
--- a/packages/app-toolbox/src/Verify.tsx
+++ b/packages/app-toolbox/src/Verify.tsx
@@ -2,7 +2,6 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps as Props } from '@polkadot/react-components/types';
import { KeypairType } from '@polkadot/util-crypto/types';
import React, { useEffect, useState } from 'react';
@@ -13,7 +12,7 @@ import { isHex } from '@polkadot/util';
import { naclVerify, schnorrkelVerify } from '@polkadot/util-crypto';
import styled from 'styled-components';
-import translate from './translate';
+import { useTranslation } from './translate';
type CryptoTypes = KeypairType | 'unknown';
@@ -34,7 +33,8 @@ const AlignedIcon = styled(Icon)`
}
`;
-function Verify ({ t }: Props): React.ReactElement {
+export default function Verify (): React.ReactElement<{}> {
+ const { t } = useTranslation();
const [{ cryptoType, isValid }, setValidity] = useState<{ cryptoType: CryptoTypes; isValid: boolean }>({ cryptoType: 'unknown', isValid: false });
const [{ data, isHexData }, setData] = useState<{ data: string; isHexData: boolean }>({ data: '', isHexData: false });
const [{ publicKey, isValidPk }, setPublicKey] = useState<{ publicKey: Uint8Array | null; isValidPk: boolean }>({ publicKey: null, isValidPk: false });
@@ -157,5 +157,3 @@ function Verify ({ t }: Props): React.ReactElement {
);
}
-
-export default translate(Verify);
diff --git a/packages/app-toolbox/src/index.tsx b/packages/app-toolbox/src/index.tsx
index c9f4e772788f..f8ee676cfdcb 100644
--- a/packages/app-toolbox/src/index.tsx
+++ b/packages/app-toolbox/src/index.tsx
@@ -2,9 +2,9 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
+import { AppProps as Props } from '@polkadot/react-components/types';
-import React from 'react';
+import React, { useMemo } from 'react';
import { Route, Switch } from 'react-router';
import Tabs from '@polkadot/react-components/Tabs';
import { useAccounts } from '@polkadot/react-hooks';
@@ -13,14 +13,12 @@ import Hash from './Hash';
import Rpc from './Rpc';
import Sign from './Sign';
import Verify from './Verify';
-import translate from './translate';
+import { useTranslation } from './translate';
-interface Props extends AppProps, I18nProps {
-}
-
-function ToolboxApp ({ basePath, t }: Props): React.ReactElement {
+export default function ToolboxApp ({ basePath }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { hasAccounts } = useAccounts();
- const tabs = [
+ const items = useMemo(() => [
{
isRoot: true,
name: 'rpc',
@@ -38,17 +36,19 @@ function ToolboxApp ({ basePath, t }: Props): React.ReactElement {
name: 'verify',
text: t('Verify signature')
}
- ];
- const filteredTabs = hasAccounts
- ? tabs
- : tabs.filter(({ name }): boolean => !['sign', 'verify'].includes(name));
+ ], [t]);
return (
@@ -60,5 +60,3 @@ function ToolboxApp ({ basePath, t }: Props): React.ReactElement {
);
}
-
-export default translate(ToolboxApp);
diff --git a/packages/app-trading/LICENSE b/packages/app-trading/LICENSE
new file mode 100644
index 000000000000..0d381b2e97dc
--- /dev/null
+++ b/packages/app-trading/LICENSE
@@ -0,0 +1,201 @@
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+Copyright [yyyy] [name of copyright owner]
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/packages/app-trading/README.md b/packages/app-trading/README.md
new file mode 100644
index 000000000000..a356078f77fc
--- /dev/null
+++ b/packages/app-trading/README.md
@@ -0,0 +1 @@
+# @polkadot/app-dapps-staking
diff --git a/packages/app-trading/package.json b/packages/app-trading/package.json
new file mode 100644
index 000000000000..1ff2addf078b
--- /dev/null
+++ b/packages/app-trading/package.json
@@ -0,0 +1,19 @@
+{
+ "name": "@polkadot/app-trading",
+ "version": "0.40.0-beta.11",
+ "description": "The applications of the operator trading.",
+ "main": "index.js",
+ "scripts": {},
+ "author": "Takumi Yamashita , Jaco Greeff ",
+ "maintainers": [
+ "Takumi Yamashita ",
+ "Jaco Greeff "
+ ],
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/app-explorer":"^0.40.0-beta.11",
+ "@polkadot/react-components":"^0.40.0-beta.11",
+ "@polkadot/react-query":"^0.40.0-beta.11"
+ }
+}
diff --git a/packages/app-trading/src/Overview/Address.tsx b/packages/app-trading/src/Overview/Address.tsx
new file mode 100644
index 000000000000..5019da0509f7
--- /dev/null
+++ b/packages/app-trading/src/Overview/Address.tsx
@@ -0,0 +1,173 @@
+// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { OfferOf } from '@plasm/utils';
+
+import React, { useState } from 'react';
+import { AddressMini, AddressSmall, Badge, Button, Icon, TxButton } from '@polkadot/react-components';
+import { useCall, useApi } from '@polkadot/react-hooks';
+import { formatBalance, formatNumber } from '@polkadot/util';
+
+import { BlockNumber, AccountId } from '@polkadot/types/interfaces';
+import { useTranslation } from '../translate';
+
+interface Props {
+ offer: OfferOf;
+ className?: string;
+ defaultName: string;
+ isFavorite: boolean;
+ onFavorite?: (accountId: string) => void;
+ toggleFavorite: (accountId: string) => void;
+}
+
+export default function Address ({ offer, className, isFavorite, toggleFavorite }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
+ const { api } = useApi();
+ const [isExpanded, setIsExpanded] = useState(false);
+ const blockNumber = useCall(api.derive.chain.bestNumber, []);
+ const _onFavorite = (): void => toggleFavorite(offer.buyer.toString());
+ const _toggleContracts = (event: React.SyntheticEvent): void => {
+ event.preventDefault();
+ event.stopPropagation();
+
+ setIsExpanded(!isExpanded);
+ };
+
+ const isExpired = offer.expired <= (blockNumber || 0) && offer.state.isWaiting;
+
+ return (
+
+
+
+
+
+
+ {isExpired && (
+
+
+
+
+
+
+ {offer.contracts && (
+ isExpanded
+ ? (
+
+ {offer.contracts.map((contract: AccountId): React.ReactNode =>
+
+ )}
+
+ ({formatNumber(offer.contracts.length)})
+ )}
+
+ {!isExpanded && (
+ <>
+
+ {offer.expired && (
+ <>{t('expired')} {formatNumber(offer.expired)}
+ )}
+
+
+ {offer.amount && (
+ <>{t('amount')} {formatBalance(offer.amount)}
+ )}
+
+
+ )}
+
+
+
+
+
+
+ );
+}
diff --git a/packages/app-trading/src/Overview/CurrentList.tsx b/packages/app-trading/src/Overview/CurrentList.tsx
new file mode 100644
index 000000000000..063668ddd338
--- /dev/null
+++ b/packages/app-trading/src/Overview/CurrentList.tsx
@@ -0,0 +1,104 @@
+// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { OfferFilter } from '../types';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { useApi, useCall, useFavorites } from '@polkadot/react-hooks';
+import { Dropdown, FilterOverlay, Input, Table } from '@polkadot/react-components';
+import { BlockNumber } from '@polkadot/types/interfaces';
+
+import { STORE_FAVS_BASE } from '../constants';
+import { useTranslation } from '../translate';
+import Address from './Address';
+
+import { OfferOf } from '@plasm/utils';
+
+interface Props {
+ allOffers: OfferOf[];
+}
+
+function isFiltered (a: OfferOf, filter: OfferFilter, currentNumber: BlockNumber): boolean {
+ return filter === 'all' ? true
+ : (a.expired > currentNumber && a.state.isWaiting && filter === 'waiting') ||
+ (a.expired <= currentNumber && a.state.isWaiting && filter === 'expired') ||
+ (a.state.isReject && filter === 'reject') ||
+ (a.state.isAccept && filter === 'accept');
+}
+
+function filterOffers (allOffers: OfferOf[] = [], filter: OfferFilter, nameFilter: string, favorites: string[], currentNumber: BlockNumber): OfferOf[] {
+ console.log('prev filter: ', allOffers);
+ console.log('filter', filter);
+ const sortedOffers = allOffers
+ .filter((a: OfferOf): boolean => isFiltered(a, filter, currentNumber))
+ .filter((a: OfferOf): boolean => nameFilter === '' ? true
+ : a.buyer.toString().includes(nameFilter) || a.sender.toString().includes(nameFilter))
+ .sort((a: OfferOf, b: OfferOf): number => a.expired.toNumber() - b.expired.toNumber());
+ return sortedOffers.sort((a, b): number => {
+ const isFavA = favorites.includes(a.buyer.toString());
+ const isFavB = favorites.includes(b.buyer.toString());
+ return isFavA === isFavB ? 0 : (isFavA ? -1 : 1);
+ });
+}
+
+export default function CurrentList ({ allOffers }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
+ const { api } = useApi();
+ const currentNumber = useCall(api.derive.chain.bestNumber, []);
+ const [favorites, toggleFavorite] = useFavorites(STORE_FAVS_BASE);
+ const [filter, setFilter] = useState('all');
+ const [nameFilter, setNameFilter] = useState('');
+ const [offers, setOffers] = useState([]);
+
+ const filterOpts = useMemo(() => [
+ { text: t('Show all offers and intentions'), value: 'all' },
+ { text: t('Show only waiting'), value: 'waiting' },
+ { text: t('Show only accept'), value: 'accept' },
+ { text: t('Show only reject'), value: 'reject' },
+ { text: t('Show only expired'), value: 'expired' }
+ ], [t]);
+
+ useEffect((): void => {
+ if (allOffers) {
+ const offers = filterOffers(allOffers, filter, nameFilter, favorites, currentNumber as BlockNumber);
+ setOffers(offers);
+ }
+ }, [allOffers, filter, favorites, nameFilter, currentNumber]);
+
+ const _renderRows = (offers: OfferOf[], defaultName: string): React.ReactNode =>
+ offers.map((offer): React.ReactNode => (
+
+
+
+
+
+
+ {_renderRows(offers, t('offers'))}
+
+
+
{
+ const { t } = useTranslation();
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/app-trading/src/Overview/index.tsx b/packages/app-trading/src/Overview/index.tsx
new file mode 100644
index 000000000000..ed86e99cb50c
--- /dev/null
+++ b/packages/app-trading/src/Overview/index.tsx
@@ -0,0 +1,26 @@
+// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { BareProps } from '@polkadot/react-components/types';
+
+import React from 'react';
+import CurrentList from './CurrentList';
+import Summary from './Summary';
+
+import { OfferOf } from '@plasm/utils';
+
+interface Props extends BareProps {
+ allOffers: OfferOf[];
+}
+
+export default function Overview ({ className, allOffers }: Props): React.ReactElement {
+ return (
+
+
+ );
+}
diff --git a/packages/app-trading/src/constants.ts b/packages/app-trading/src/constants.ts
new file mode 100644
index 000000000000..6a3dae261e48
--- /dev/null
+++ b/packages/app-trading/src/constants.ts
@@ -0,0 +1,5 @@
+// Copyright 2017-2020 @polkadot/app-dapps-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+export const STORE_FAVS_BASE = 'trading:favorites';
diff --git a/packages/app-trading/src/index.tsx b/packages/app-trading/src/index.tsx
new file mode 100644
index 000000000000..fac779ba9a50
--- /dev/null
+++ b/packages/app-trading/src/index.tsx
@@ -0,0 +1,102 @@
+// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { AppProps as Props } from '@polkadot/react-components/types';
+import { AccountId } from '@polkadot/types/interfaces';
+
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Vec } from '@polkadot/types';
+import { ITuple } from '@polkadot/types/types';
+import { Button, HelpOverlay } from '@polkadot/react-components';
+import Tabs from '@polkadot/react-components/Tabs';
+import { useCall, useAccounts, useApi } from '@polkadot/react-hooks';
+
+import basicMd from './md/basic.md';
+import Overview from './Overview';
+import { useTranslation } from './translate';
+
+import Offer from '@polkadot/app-accounts/modals/Offer';
+import { OfferOf } from '@plasm/utils';
+
+const EMPY_OFFERS: OfferOf[] = [];
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function transformOffers ([_, offers]: ITuple<[Vec, Vec]>): OfferOf[] {
+ return offers.map((offer): OfferOf => offer);
+}
+
+function TradingApp ({ basePath, className }: Props): React.ReactElement {
+ const { t } = useTranslation();
+ const { api } = useApi();
+ const { hasAccounts } = useAccounts();
+ const allOffers = (useCall(api.query.trading.offers, [], {
+ defaultValue: EMPY_OFFERS,
+ transform: transformOffers
+ }) as OfferOf[]);
+ const hasQueries = hasAccounts && !!(api.query.imOnline?.authoredBlocks);
+
+ console.log('allOffers', allOffers);
+
+ const [isOfferOpen, setIsOfferOpen] = useState(false);
+ const _toggleOffer = (): void => setIsOfferOpen(!isOfferOpen);
+
+ return (
+
+
+
+ {isOfferOpen && (
+
+ );
+}
+
+export default styled(TradingApp)`
+ .staking--hidden {
+ display: none;
+ }
+
+ .staking--queryInput {
+ margin-bottom: 1.5rem;
+ }
+
+ .staking--Chart h1 {
+ margin-bottom: 0.5rem;
+ }
+
+ .staking--Chart+.staking--Chart {
+ margin-top: 1.5rem;
+ }
+`;
diff --git a/packages/app-trading/src/md/basic.md b/packages/app-trading/src/md/basic.md
new file mode 100644
index 000000000000..246a25969ec8
--- /dev/null
+++ b/packages/app-trading/src/md/basic.md
@@ -0,0 +1,32 @@
+# Staking
+
+Welcome to the staking module. Here you can see an overview of all the validators on the network and participate in the network as either a validator (running a node that helps secure the network), or a nominator (adding funds to help secure the network).
+
+Validators and nominators earn rewards at the end of an era: the rewards are split between the validators and nominators for that validator, in proportion to the amount bonded by each individual.
+
+# Bonding
+
+Bonding funds is the first step that either a validator or nominator performs. It locks up a portion of funds that is used to secure the network. These funds are placed at risk, i.e. you can be slashed and lose a portion if the validator node misbehaves. Validators and nominators share both rewards and the slashing effects. Choosing a well behaving validator to nominate is crucial.
+
+For bonding (with an intention to either validate or nominate), you need to have 2 accounts -
+
+- **Stash** This is the primary account that holds the funds and has a portion bonded for participation;
+- **Controller** This is used to control the operation of the validator or nominator, switching between validating, nominating and idle; (It only needs enough funds to send transactions when actions are taken)
+
+To bond, you select the stash account, bond from it and designate a controller. Additionally you can select the amount of funds to bond and set your payout preferences.
+
+# Nominating
+
+Nomination (using the controller account as set as part of the bonding) is a process of selecting a number of validators (or potential validators) that you deem trustworthy. Once the validators are selected, the bonded value is assigned to participate in the network security.
+
+At any point you could stop nominating (using the controller) or top up the funds bonded (from the stash).
+
+# Validating
+
+Validators run nodes that author blocks. The primary requirement here is the ability to run a node that is available 24/7 and is well-connected to the network.
+
+In addition to the stash and controller account described above, a validator has to indicate an additional account called `Session key` -
+
+- **Session** The seed of this account should be passed to the node using the `--key` parameter. The session account does not need to have funds as it does not need to send any transaction. The best practice is to create a dedicated account to be used as session account. Although a single account can theoretically be used as both session and controller, it is not recommended to do so. Having a dedicated session account would prevent the theft of funds should the validator node be compromised and the `--key` leaked.
+
+As with the nomination operations, you can stop validation at any time using the controller. (Be it for maintenance, upgrades, or any other reason)
diff --git a/packages/app-trading/src/translate.ts b/packages/app-trading/src/translate.ts
new file mode 100644
index 000000000000..c69ca00178ba
--- /dev/null
+++ b/packages/app-trading/src/translate.ts
@@ -0,0 +1,11 @@
+// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
+
+export function useTranslation (): UseTranslationResponse {
+ return useTranslationBase('app-trading');
+}
+
+export default withTranslation(['app-trading']);
diff --git a/packages/app-trading/src/types.ts b/packages/app-trading/src/types.ts
new file mode 100644
index 000000000000..abe6523aada2
--- /dev/null
+++ b/packages/app-trading/src/types.ts
@@ -0,0 +1,5 @@
+// Copyright 2017-2020 @polkadot/app-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+export type OfferFilter = 'all' | 'waiting' | 'accept' | 'reject' | 'expired'
diff --git a/packages/app-transfer/package.json b/packages/app-transfer/package.json
index 4eb90bb8668f..4a9a878e6320 100644
--- a/packages/app-transfer/package.json
+++ b/packages/app-transfer/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-transfer",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"description": "A basic transfer app",
"main": "index.js",
"scripts": {},
@@ -10,8 +10,8 @@
],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40",
- "@polkadot/react-query": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11",
+ "@polkadot/react-query": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-treasury/package.json b/packages/app-treasury/package.json
index 931f7d403577..9e2dbd16ff08 100644
--- a/packages/app-treasury/package.json
+++ b/packages/app-treasury/package.json
@@ -1,6 +1,6 @@
{
"name": "@polkadot/app-treasury",
- "version": "0.39.0-beta.40",
+ "version": "0.40.0-beta.11",
"description": "A referendum & proposal app",
"main": "index.js",
"scripts": {},
@@ -11,8 +11,8 @@
],
"license": "Apache-2.0",
"dependencies": {
- "@babel/runtime": "^7.7.7",
- "@polkadot/react-components": "^0.39.0-beta.40",
- "@polkadot/react-query": "^0.39.0-beta.40"
+ "@babel/runtime": "^7.8.3",
+ "@polkadot/react-components": "^0.40.0-beta.11",
+ "@polkadot/react-query": "^0.40.0-beta.11"
}
}
diff --git a/packages/app-treasury/src/Overview/Approve.tsx b/packages/app-treasury/src/Overview/Approve.tsx
index cd17c4fbc393..4272af75a280 100644
--- a/packages/app-treasury/src/Overview/Approve.tsx
+++ b/packages/app-treasury/src/Overview/Approve.tsx
@@ -109,7 +109,7 @@ export default withMulti(
['query.elections.members', {
propName: 'threshold',
transform: (value: [AccountId, BlockNumber][]): number =>
- 1 + (value.length / 2)
+ Math.ceil(value.length * 0.5)
}]
)
);
diff --git a/packages/app-treasury/src/Overview/Proposals.tsx b/packages/app-treasury/src/Overview/Proposals.tsx
index 026b4dca603c..22dbd49de662 100644
--- a/packages/app-treasury/src/Overview/Proposals.tsx
+++ b/packages/app-treasury/src/Overview/Proposals.tsx
@@ -1,10 +1,8 @@
-/* eslint-disable @typescript-eslint/camelcase */
// Copyright 2017-2020 @polkadot/app-democracy authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { DerivedTreasuryProposal } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
import { AccountId, Balance } from '@polkadot/types/interfaces';
import React, { useEffect, useState } from 'react';
@@ -13,14 +11,16 @@ import { Table } from '@polkadot/react-components';
import { useApi, useAccounts, useCall } from '@polkadot/react-hooks';
import Proposal from './Proposal';
-import translate from '../translate';
+import { useTranslation } from '../translate';
-interface Props extends I18nProps {
- proposals?: DerivedTreasuryProposal[];
+interface Props {
+ className?: string;
isApprovals?: boolean;
+ proposals?: DerivedTreasuryProposal[];
}
-function ProposalsBase ({ className, isApprovals, proposals, t }: Props): React.ReactElement {
+export default function ProposalsBase ({ className, isApprovals, proposals }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
const { allAccounts } = useAccounts();
const members = useCall<[AccountId, Balance][]>(api.query.electionsPhragmen?.members || api.query.elections.members, []);
@@ -62,5 +62,3 @@ function ProposalsBase ({ className, isApprovals, proposals, t }: Props): React.
);
}
-
-export default translate(ProposalsBase);
diff --git a/packages/app-treasury/src/Overview/Propose.tsx b/packages/app-treasury/src/Overview/Propose.tsx
index 1d40dff0939e..83f64956dd23 100644
--- a/packages/app-treasury/src/Overview/Propose.tsx
+++ b/packages/app-treasury/src/Overview/Propose.tsx
@@ -2,28 +2,26 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps as Props } from '@polkadot/react-components/types';
-
import BN from 'bn.js';
import React, { useState } from 'react';
import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
-import { useAccounts } from '@polkadot/react-hooks';
+import { useToggle } from '@polkadot/react-hooks';
+import useCouncilMembers from '@polkadot/app-council/useCouncilMembers';
+
+import { useTranslation } from '../translate';
-import translate from '../translate';
+interface Props {
+ className?: string;
+}
-function Propose ({ className, t }: Props): React.ReactElement | null {
- const { hasAccounts } = useAccounts();
+export default function Propose ({ className }: Props): React.ReactElement | null {
+ const { t } = useTranslation();
+ const { isMember, members } = useCouncilMembers();
const [accountId, setAccountId] = useState(null);
const [beneficiary, setBeneficiary] = useState(null);
- const [isProposeOpen, setIsProposeOpen] = useState(false);
+ const [isProposeOpen, togglePropose] = useToggle();
const [value, setValue] = useState();
- if (!hasAccounts) {
- return null;
- }
-
- const _togglePropose = (): void => setIsProposeOpen(!isProposeOpen);
-
const hasValue = value?.gtn(0);
return (
@@ -32,11 +30,11 @@ function Propose ({ className, t }: Props): React.ReactElement | null {
| null {
onChange={setValue}
/>
-
-
-
+
+
)}
(api.query.electionsPhragmen?.members || api.query.elections.members, [], {
- transform: (value: any[]): number => (value.length / 2) + 1
+ transform: (value: any[]): number =>
+ Math.ceil(value.length * 0.5)
});
const [isOpen, toggleOpen] = useToggle();
const [accountId, setAccountId] = useState(null);
const [councilType, setCouncilType] = useState('reject');
const [hasProposals, setHasProposals] = useState(true);
+ const councilTypeOpt = useMemo(() => [
+ { value: 'accept', text: t('Acceptance proposal to council') },
+ { value: 'reject', text: t('Rejection proposal to council') }
+ ], [t]);
useEffect((): void => {
- const available = councilProposals
- .map(({ votes }): number =>
- votes ? votes?.index.toNumber() : -1
- )
- .filter((index): boolean => index !== -1);
-
- setHasProposals(!!available.length);
+ setHasProposals(
+ !!councilProposals
+ .map(({ votes }): number => votes ? votes?.index.toNumber() : -1)
+ .filter((index): boolean => index !== -1)
+ .length
+ );
}, [councilProposals]);
if (hasProposals) {
@@ -47,7 +51,6 @@ export default function Submission ({ councilProposals, id, isDisabled }: Props)
{isOpen && (
@@ -62,38 +65,26 @@ export default function Submission ({ councilProposals, id, isDisabled }: Props)
help={t('The type of council proposal to submit.')}
label={t('council proposal type')}
onChange={setCouncilType}
- options={[
- { value: 'accept', text: t('Acceptance proposal to council') },
- { value: 'reject', text: t('Rejection proposal to council') }
- ]}
+ options={councilTypeOpt}
value={councilType}
/>
-
-
-
+
+
)}
diff --git a/packages/app-treasury/src/Overview/Summary.tsx b/packages/app-treasury/src/Overview/Summary.tsx
index 057bf9194251..0d92cedcbc20 100644
--- a/packages/app-treasury/src/Overview/Summary.tsx
+++ b/packages/app-treasury/src/Overview/Summary.tsx
@@ -2,35 +2,34 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { I18nProps } from '@polkadot/react-components/types';
+import { DerivedBalancesAccount } from '@polkadot/api-derive/types';
+import { Balance } from '@polkadot/types/interfaces';
-import BN from 'bn.js';
import React from 'react';
import { SummaryBox, CardSummary } from '@polkadot/react-components';
import { useApi, useCall } from '@polkadot/react-hooks';
-import { formatBalance, formatNumber, stringToU8a } from '@polkadot/util';
+import { FormatBalance } from '@polkadot/react-query';
+import { formatNumber, stringToU8a } from '@polkadot/util';
-import translate from '../translate';
+import { useTranslation } from '../translate';
const TREASURY_ACCOUNT = stringToU8a('modlpy/trsry'.padEnd(32, '\0'));
-interface Props extends I18nProps {
+interface Props {
approvalCount?: number;
proposalCount?: number;
}
-function Summary ({ approvalCount, proposalCount, t }: Props): React.ReactElement {
+export default function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement {
+ const { t } = useTranslation();
const { api } = useApi();
- const pot = useCall(api.query.treasury.pot, []);
- const bestNumber = useCall(api.derive.chain.bestNumber as any, []);
+ const bestNumber = useCall(api.derive.chain.bestNumber as any, []);
const spendPeriod = api.consts.treasury.spendPeriod;
- const treasuryBalance = useCall(api.query.balances.freeBalance, [TREASURY_ACCOUNT]);
+ const treasuryBalance = useCall(api.derive.balances.account as any, [TREASURY_ACCOUNT]);
- const value = treasuryBalance?.gtn(0)
- ? treasuryBalance.toString()
- : pot?.gtn(0)
- ? pot.toString()
- : null;
+ const value = treasuryBalance?.freeBalance.gtn(0)
+ ? treasuryBalance.freeBalance.toString()
+ : null;
return (
@@ -45,7 +44,10 @@ function Summary ({ approvalCount, proposalCount, t }: Props): React.ReactElemen