Merge branch 'pioneer-antioch' into antioch-integration-tests

cli/src/Api.ts

@@ -54,7 +54,6 @@ import { ServiceProviderRecord, Url } from '@joystream/types/discovery'
 import _ from 'lodash'
 
 export const DEFAULT_API_URI = 'ws://localhost:9944/'
-const DEFAULT_DECIMALS = new BN(12)
 
 // Mapping of working group to api module
 export const apiModuleByGroup: { [key in WorkingGroups]: string } = {
@@ -85,8 +84,8 @@ export default class Api {
     // Initializing some api params based on pioneer/packages/react-api/Api.tsx
     const [properties] = await Promise.all([api.rpc.system.properties()])
 
-    const tokenSymbol = properties.tokenSymbol.unwrapOr('DEV').toString()
-    const tokenDecimals = properties.tokenDecimals.unwrapOr(DEFAULT_DECIMALS).toNumber()
+    const tokenSymbol = properties.tokenSymbol.unwrap()[0].toString()
+    const tokenDecimals = properties.tokenDecimals.unwrap()[0].toNumber()
 
     // formatBlanace config
     formatBalance.setDefaults({

cli/src/base/ApiCommandBase.ts

@@ -383,7 +383,7 @@ export default abstract class ApiCommandBase extends StateAwareCommandBase {
                 }
                 reject(new ExtrinsicFailedError(`Extrinsic execution error: ${errorMsg}`))
               } else if (event.method === 'ExtrinsicSuccess') {
-                resolve()
+                resolve(result)
               }
             })
         } else if (result.isError) {

cli/src/base/ContentDirectoryCommandBase.ts

@@ -16,9 +16,8 @@ import {
 } from '@joystream/types/content-directory'
 import { Worker } from '@joystream/types/working-group'
 import { CLIError } from '@oclif/errors'
-import { Codec } from '@polkadot/types/types'
-import AbstractInt from '@polkadot/types/codec/AbstractInt'
-import { AnyJson } from '@polkadot/types/types/helpers'
+import { Codec, AnyJson } from '@polkadot/types/types'
+import { AbstractInt } from '@polkadot/types/codec/AbstractInt'
 import _ from 'lodash'
 import { RolesCommandBase } from './WorkingGroupsCommandBase'
 import { createType } from '@joystream/types'

cli/src/commands/api/inspect.ts

@@ -3,7 +3,7 @@ import { CLIError } from '@oclif/errors'
 import { displayNameValueTable } from '../../helpers/display'
 import { ApiPromise } from '@polkadot/api'
 import { Codec } from '@polkadot/types/types'
-import { ConstantCodec } from '@polkadot/metadata/Decorated/consts/types'
+import { ConstantCodec } from '@polkadot/metadata/decorate/types'
 import ExitCodes from '../../ExitCodes'
 import chalk from 'chalk'
 import { NameValueObj, ApiMethodArg } from '../../Types'

package.json

@@ -26,23 +26,18 @@
     "query-node/generated/*"
   ],
   "resolutions": {
-    "@polkadot/api": "2.4.1",
-    "@polkadot/api-derive": "2.4.1",
-    "@polkadot/api-contract": "2.4.1",
-    "@polkadot/keyring": "3.6.1",
-    "@polkadot/networks": "3.6.1",
-    "@polkadot/types": "2.4.1",
-    "@polkadot/types-known": "2.4.1",
-    "@polkadot/util": "3.6.1",
-    "@polkadot/util-crypto": "3.6.1",
-    "@polkadot/wasm-crypto": "1.4.1",
-    "@polkadot/rpc-core": "2.4.1",
-    "@polkadot/rpc-provider": "2.4.1",
-    "@polkadot/metadata": "2.4.1",
+    "@polkadot/api": "4.2.1",
+    "@polkadot/api-contract": "4.2.1",
+    "@polkadot/keyring": "^6.0.5",
+    "@polkadot/types": "4.2.1",
+    "@polkadot/util": "^6.0.5",
+    "@polkadot/util-crypto": "^6.0.5",
+    "@polkadot/wasm-crypto": "^4.0.2",
     "babel-core": "^7.0.0-bridge.0",
     "typescript": "^3.9.7",
     "bn.js": "^5.1.2",
-    "@dzlzv/hydra-indexer-lib": "0.0.22-legacy.1.26.1"
+    "@dzlzv/hydra-indexer-lib": "0.0.22-legacy.1.26.1",
+    "rxjs": "^6.6.2"
   },
   "devDependencies": {
     "eslint": "^7.6.0",

pioneer/packages/apps-routing/src/claims.ts

@@ -1,23 +0,0 @@
-// Copyright 2017-2020 @polkadot/apps-routing 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 { Route } from './types';
-
-import Component, { useCounter } from '@polkadot/app-claims';
-
-export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
-  return {
-    Component,
-    display: {
-      needsAccounts: true,
-      needsApi: [
-        'query.claims.claims'
-      ]
-    },
-    icon: 'star',
-    name: 'claims',
-    text: t<string>('nav.claims', 'Claim Tokens', { ns: 'apps-routing' }),
-    useCounter
-  };
-}

pioneer/packages/apps-routing/src/contracts.ts

@@ -1,22 +0,0 @@
-// Copyright 2017-2020 @polkadot/apps-routing 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 { Route } from './types';
-
-import Component from '@polkadot/app-contracts';
-
-export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
-  return {
-    Component,
-    display: {
-      needsAccounts: true,
-      needsApi: [
-        'tx.contracts.call'
-      ]
-    },
-    icon: 'compress',
-    name: 'contracts',
-    text: t<string>('nav.contracts', 'Contracts', { ns: 'apps-routing' })
-  };
-}

pioneer/packages/apps-routing/src/council.ts

@@ -1,25 +0,0 @@
-// Copyright 2017-2020 @polkadot/apps-routing 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 { Route } from './types';
-
-import Component, { useCounter } from '@polkadot/app-council';
-
-export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
-  return {
-    Component,
-    display: {
-      needsApi: [
-        [
-          'query.electionsPhragmen.candidates',
-          'query.elections.candidates'
-        ]
-      ]
-    },
-    icon: 'building',
-    name: 'council',
-    text: t<string>('nav.council', 'Council', { ns: 'apps-routing' }),
-    useCounter
-  };
-}

pioneer/packages/apps-routing/src/democracy.ts

@@ -1,22 +0,0 @@
-// Copyright 2017-2020 @polkadot/apps-routing 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 { Route } from './types';
-
-import Component, { useCounter } from '@polkadot/app-democracy';
-
-export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
-  return {
-    Component,
-    display: {
-      needsApi: [
-        'tx.democracy.notePreimage'
-      ]
-    },
-    icon: 'calendar-check',
-    name: 'democracy',
-    text: t<string>('nav.democracy', 'Democracy', { ns: 'apps-routing' }),
-    useCounter
-  };
-}

pioneer/packages/apps-routing/src/parachains.ts

@@ -1,21 +0,0 @@
-// Copyright 2017-2020 @polkadot/apps-routing 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 { Route } from './types';
-
-import Component from '@polkadot/app-parachains';
-
-export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
-  return {
-    Component,
-    display: {
-      needsApi: [
-        'query.parachains.code'
-      ]
-    },
-    icon: 'link',
-    name: 'parachains',
-    text: t<string>('nav.parachains', 'Parachains', { ns: 'apps-routing' })
-  };
-}

pioneer/packages/apps-routing/src/techcomm.ts

@@ -1,23 +0,0 @@
-// Copyright 2017-2020 @polkadot/apps-routing 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 { Route } from './types';
-
-import Component, { useCounter } from '@polkadot/app-tech-comm';
-
-export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
-  return {
-    Component,
-    display: {
-      needsAccounts: true,
-      needsApi: [
-        'query.technicalCommittee.members'
-      ]
-    },
-    icon: 'microchip',
-    name: 'techcomm',
-    text: t<string>('nav.tech-comm', 'Tech. comm.', { ns: 'apps-routing' }),
-    useCounter
-  };
-}

pioneer/packages/apps-routing/src/treasury.ts

@@ -1,22 +0,0 @@
-// Copyright 2017-2020 @polkadot/apps-routing 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 { Route } from './types';
-
-import Component, { useCounter } from '@polkadot/app-treasury';
-
-export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
-  return {
-    Component,
-    display: {
-      needsApi: [
-        'tx.treasury.proposeSpend'
-      ]
-    },
-    icon: 'gem',
-    name: 'treasury',
-    text: t<string>('nav.treasury', 'Treasury', { ns: 'apps-routing' }),
-    useCounter
-  };
-}

pioneer/packages/joy-election/src/utils.tsx

@@ -4,7 +4,7 @@ import { AccountId } from '@polkadot/types/interfaces';
 // Keyring / identicon / address
 // -----------------------------------
 
-import createItem from '@polkadot/ui-keyring/options/item';
+import { createOptionItem } from '@polkadot/ui-keyring/options/item';
 import { findNameByAddress } from '@polkadot/joy-utils/functions/misc';
 
 // Hash
@@ -23,7 +23,7 @@ export type HashedVote = {
 const createAddressOption = (address: string) => {
   const name = findNameByAddress(address);
 
-  return createItem(address, name);
+  return createOptionItem(address, name);
 };
 
 export const accountIdsToOptions = (applicants: Array<AccountId>) => {

pioneer/packages/joy-roles/src/flows/apply.controller.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 
 import { formatBalance } from '@polkadot/util';
 import { Balance } from '@polkadot/types/interfaces';
-import AccountId from '@polkadot/types/generic/AccountId';
+import { GenericAccountId as AccountId } from '@polkadot/types/generic/AccountId';
 
 import { Controller } from '@polkadot/joy-utils/react/helpers';
 import { View } from '@polkadot/joy-utils/react/hocs';

pioneer/packages/joy-roles/src/flows/apply.tsx

@@ -24,7 +24,7 @@ import { Accordion,
   TextAreaProps } from 'semantic-ui-react';
 
 import Identicon from '@polkadot/react-identicon';
-import AccountId from '@polkadot/types/generic/AccountId';
+import { GenericAccountId as AccountId } from '@polkadot/types/generic/AccountId';
 
 import { GenericJoyStreamRoleSchema,
   ApplicationDetails,

pioneer/packages/joy-roles/src/transport.substrate.ts

@@ -1,11 +1,11 @@
 import { map, switchMap } from 'rxjs/operators';
 
-import ApiPromise from '@polkadot/api/promise';
+import { ApiPromise } from '@polkadot/api/promise';
 import { Balance } from '@polkadot/types/interfaces';
 import { Option, Vec } from '@polkadot/types';
 import { Moment } from '@polkadot/types/interfaces/runtime';
 import { QueueTxExtrinsicAdd } from '@polkadot/react-components/Status/types';
-import keyringOption from '@polkadot/ui-keyring/options';
+import { keyring } from '@polkadot/ui-keyring';
 
 import { APIQueryCache } from '@polkadot/joy-utils/transport/APIQueryCache';
 import { Subscribable } from '@polkadot/joy-utils/react/helpers';
@@ -393,7 +393,7 @@ export class Transport extends BaseTransport implements ITransport {
   }
 
   accounts (): Subscribable<keyPairDetails[]> {
-    return keyringOption.optionsSubject.pipe(
+    return keyring.keyringOption.optionsSubject.pipe(
       map((accounts) => {
         return accounts.all
           .filter((x) => x.value)

pioneer/packages/joy-utils/src/react/hocs/accounts.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 
 import { AccountId } from '@polkadot/types/interfaces';
 import { Vec } from '@polkadot/types';
-import accountObservable from '@polkadot/ui-keyring/observable/accounts';
+import { keyring } from '@polkadot/ui-keyring';
 import { withCalls, withMulti, withObservable, ApiContext } from '@polkadot/react-api/index';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 
@@ -105,7 +105,7 @@ const withMyProfile = <P extends MyAccountProps>(Component: React.ComponentType<
 export const withMyAccount = <P extends MyAccountProps>(Component: React.ComponentType<P>) =>
   withMulti(
     Component,
-    withObservable(accountObservable.subject, { propName: 'allAccounts' }),
+    withObservable(keyring.accounts.subject, { propName: 'allAccounts' }),
     withMyAddress,
     withMyMemberIds,
     withMyMembership,

pioneer/packages/joy-utils/src/transport/APIQueryCache.ts

@@ -1,5 +1,5 @@
 import { Codec } from '@polkadot/types/types';
-import ApiPromise from '@polkadot/api/promise';
+import { ApiPromise } from '@polkadot/api/promise';
 
 type cacheQueryStorage = {
   (...args: any): Promise<Codec>;

pioneer/packages/page-accounts/src/Accounts/BannerClaims.tsx

@@ -1,26 +0,0 @@
-// 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 React from 'react';
-import useClaimCounter from '@polkadot/app-claims/useCounter'; // exceptionally CRAP idea
-
-import { useTranslation } from '../translate';
-import Banner from './Banner';
-
-function BannerExtension (): React.ReactElement | null {
-  const claimCount = useClaimCounter();
-  const { t } = useTranslation();
-
-  if (!claimCount) {
-    return null;
-  }
-
-  return (
-    <Banner type='error'>
-      <p>{t<string>('You have {{claimCount}} accounts that need attestations. Use the Claim Tokens app on the left navigation bar to complete the process. Until you do, your balances for those accounts will not be reflected.', { replace: { claimCount } })}&nbsp;<a href='#/claims'>{t<string>('Claim tokens...')}</a></p>
-    </Banner>
-  );
-}
-
-export default React.memo(BannerExtension);

pioneer/packages/page-accounts/src/Accounts/index.tsx

@@ -23,7 +23,6 @@ import Multisig from './modals/MultisigCreate';
 import Proxy from './modals/ProxyAdd';
 import Qr from './modals/Qr';
 import Account from './Account';
-import BannerClaims from './BannerClaims';
 import BannerExtension from './BannerExtension';
 import { sortAccounts } from '../util';
 
@@ -161,7 +160,6 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
   return (
     <div className={className}>
       <BannerExtension />
-      <BannerClaims />
       {isCreateOpen && (
         <CreateModal
           onClose={toggleCreate}

pioneer/packages/page-accounts/src/Accounts/useProxies.ts

@@ -7,8 +7,16 @@ import { ProxyType } from '@polkadot/types/interfaces';
 import { useEffect, useState } from 'react';
 import { useAccounts, useApi, useIsMountedRef } from '@polkadot/react-hooks';
 
+import type { Vec } from '@polkadot/types';
+import type { AccountId, BalanceOf, ProxyDefinition } from '@polkadot/types/interfaces';
+import type { ITuple } from '@polkadot/types/types';
+
+import BN from 'bn.js';
+import { BN_ZERO } from '@polkadot/util';
+
 interface Proxy {
   address: string;
+  delay: BN;
   isOwned: boolean;
   type: ProxyType;
 }
@@ -25,6 +33,17 @@ const EMPTY_STATE: State = {
   proxies: []
 };
 
+function createProxy (allAccounts: string[], delegate: AccountId, type: ProxyType, delay = BN_ZERO): Proxy {
+  const address = delegate.toString();
+
+  return {
+    address,
+    delay,
+    isOwned: allAccounts.includes(address),
+    type
+  };
+}
+
 export default function useProxies (address?: string | null): State {
   const { api } = useApi();
   const { allAccounts } = useAccounts();
@@ -36,13 +55,15 @@ export default function useProxies (address?: string | null): State {
 
     address && api.query.proxy &&
       api.query.proxy
-        .proxies(address)
+        .proxies<ITuple<[Vec<ITuple<[AccountId, ProxyType]> | ProxyDefinition>, BalanceOf]>>(address)
         .then(([_proxies]): void => {
-          const proxies = _proxies.map(([accountId, type]): Proxy => ({
-            address: accountId.toString(),
-            isOwned: allAccounts.includes(accountId.toString()),
-            type
-          }));
+          const proxies = api.tx.proxy.addProxy.meta.args.length === 3
+            ? (_proxies as ProxyDefinition[]).map(({ delay, delegate, proxyType }) =>
+              createProxy(allAccounts, delegate, proxyType, delay)
+            )
+            : (_proxies as [AccountId, ProxyType][]).map(([delegate, proxyType]) =>
+              createProxy(allAccounts, delegate, proxyType)
+            );
           const owned = proxies.filter(({ isOwned }) => isOwned);
 
           mountedRef.current && setState({

pioneer/packages/page-claims/LICENSE

@@ -1,201 +0,0 @@
-                              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.

pioneer/packages/page-claims/README.md

@@ -1 +0,0 @@
-# @polkadot/app-claims

pioneer/packages/page-claims/package.json

@@ -1,19 +0,0 @@
-{
-  "name": "@polkadot/app-claims",
-  "private": true,
-  "version": "0.51.1",
-  "description": "An app for claiming Polkadot tokens",
-  "main": "index.js",
-  "scripts": {},
-  "author": "Keith Ingram <keith@parity.io>",
-  "maintainers": [
-    "Keith Ingram <keith@parity.io>",
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.10.5",
-    "@polkadot/react-components": "0.51.1",
-    "secp256k1": "^3.8.0"
-  }
-}

pioneer/packages/page-claims/src/Attest.tsx

@@ -1,104 +0,0 @@
-// 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.
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Button, Card, TxButton } from '@polkadot/react-components';
-import { TxCallback } from '@polkadot/react-components/Status/types';
-import { useAccounts, useApi } from '@polkadot/react-hooks';
-import { FormatBalance } from '@polkadot/react-query';
-import { Option } from '@polkadot/types';
-import { BalanceOf, EthereumAddress, StatementKind } from '@polkadot/types/interfaces';
-
-import { ClaimStyles } from './Claim';
-import Statement from './Statement';
-import { useTranslation } from './translate';
-import { getStatement } from './util';
-
-interface Props {
-  accountId: string;
-  className?: string;
-  ethereumAddress: EthereumAddress | null;
-  onSuccess?: TxCallback;
-  statementKind?: StatementKind;
-  systemChain: string;
-}
-
-function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKind, systemChain }: Props): React.ReactElement<Props> | null {
-  const accounts = useAccounts();
-  const { t } = useTranslation();
-  const { api } = useApi();
-  const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
-  const [isBusy, setIsBusy] = useState(false);
-
-  useEffect((): void => {
-    if (!ethereumAddress) {
-      return;
-    }
-
-    setIsBusy(true);
-
-    api.query.claims
-      .claims<Option<BalanceOf>>(ethereumAddress)
-      .then((claim): void => {
-        setClaimValue(claim.unwrapOr(null));
-        setIsBusy(false);
-      })
-      .catch((): void => setIsBusy(false));
-  }, [api, ethereumAddress]);
-
-  if (isBusy) {
-    return null;
-  }
-
-  const hasClaim = claimValue && claimValue.gten(0);
-  const statementSentence = getStatement(systemChain, statementKind)?.sentence;
-
-  if (!hasClaim || !statementSentence) {
-    return null;
-  }
-
-  // Attesting is impossible if the account is not owned.
-  if (!accounts.isAccount(accountId)) {
-    return (
-      <Card isError>
-        <div className={className}>
-          {t<string>('We found a pre-claim with this Polkadot address. However, attesting requires signing with this account. To continue with attesting, please add this account as an owned account first.')}
-          <h3>
-            <FormatBalance
-              label={t<string>('Account balance:')}
-              value={claimValue}
-            />
-          </h3>
-        </div>
-      </Card>
-    );
-  }
-
-  return (
-    <Card isSuccess>
-      <div className={className}>
-        <Statement
-          kind={statementKind}
-          systemChain={systemChain}
-        />
-        <h3><FormatBalance label={t<string>('Account balance:')}
-          value={claimValue} /></h3>
-        <Button.Group>
-          <TxButton
-            accountId={accountId}
-            icon='paper-plane'
-            isDisabled={!statementSentence}
-            label={t<string>('I agree')}
-            onSuccess={onSuccess}
-            params={[statementSentence]}
-            tx='claims.attest'
-          />
-        </Button.Group>
-      </div>
-    </Card>
-  );
-}
-
-export default React.memo(styled(Attest)`${ClaimStyles}`);

pioneer/packages/page-claims/src/Claim.tsx

@@ -1,135 +0,0 @@
-// 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.
-
-import { Option } from '@polkadot/types';
-import { BalanceOf, EthereumAddress, StatementKind } from '@polkadot/types/interfaces';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Button, Card, TxButton } from '@polkadot/react-components';
-import { TxCallback } from '@polkadot/react-components/Status/types';
-import { useApi } from '@polkadot/react-hooks';
-import { FormatBalance } from '@polkadot/react-query';
-
-import { useTranslation } from './translate';
-import { addrToChecksum, getStatement } from './util';
-
-interface Props {
-  accountId: string;
-  className?: string;
-  ethereumAddress: EthereumAddress | null;
-  ethereumSignature: string | null;
-  // Do we sign with `claims.claimAttest` (new) instead of `claims.claim` (old)?
-  isOldClaimProcess: boolean;
-  onSuccess?: TxCallback;
-  statementKind?: StatementKind;
-  systemChain: string;
-}
-
-interface ConstructTx {
-  params?: any[];
-  tx?: string;
-}
-
-// Depending on isOldClaimProcess, construct the correct tx.
-function constructTx (systemChain: string, accountId: string, ethereumSignature: string | null, kind: StatementKind | undefined, isOldClaimProcess: boolean): ConstructTx {
-  if (!ethereumSignature) {
-    return {};
-  }
-
-  return isOldClaimProcess || !kind
-    ? { params: [accountId, ethereumSignature], tx: 'claims.claim' }
-    : { params: [accountId, ethereumSignature, getStatement(systemChain, kind)?.sentence], tx: 'claims.claimAttest' };
-}
-
-function Claim ({ accountId, className = '', ethereumAddress, ethereumSignature, isOldClaimProcess, onSuccess, statementKind, systemChain }: Props): React.ReactElement<Props> | null {
-  const { t } = useTranslation();
-  const { api } = useApi();
-  const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
-  const [isBusy, setIsBusy] = useState(false);
-
-  useEffect((): void => {
-    if (!ethereumAddress) {
-      return;
-    }
-
-    setIsBusy(true);
-
-    api.query.claims
-      .claims<Option<BalanceOf>>(ethereumAddress)
-      .then((claim): void => {
-        setClaimValue(claim.unwrapOr(null));
-        setIsBusy(false);
-      })
-      .catch((): void => setIsBusy(false));
-  }, [api, ethereumAddress]);
-
-  if (!ethereumAddress || isBusy) {
-    return null;
-  }
-
-  const hasClaim = claimValue && claimValue.gten(0);
-
-  return (
-    <Card
-      isError={!hasClaim}
-      isSuccess={!!hasClaim}
-    >
-      <div className={className}>
-        {t<string>('Your Ethereum account')}
-        <h3>{addrToChecksum(ethereumAddress.toString())}</h3>
-        {hasClaim && claimValue
-          ? (
-            <>
-              {t<string>('has a valid claim for')}
-              <h2><FormatBalance value={claimValue} /></h2>
-              <Button.Group>
-                <TxButton
-                  icon='paper-plane'
-                  isUnsigned
-                  label={t('Claim')}
-                  onSuccess={onSuccess}
-                  {...constructTx(systemChain, accountId, ethereumSignature, statementKind, isOldClaimProcess)}
-                />
-              </Button.Group>
-            </>
-          )
-          : (
-            <>
-              {t<string>('does not appear to have a valid claim. Please double check that you have signed the transaction correctly on the correct ETH account.')}
-            </>
-          )}
-      </div>
-    </Card>
-  );
-}
-
-export const ClaimStyles = `
-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;
-}
-
-h2 {
-  margin: 0.5rem 0 2rem;
-  font-family: monospace;
-  font-size: 2.5rem;
-  font-weight: 200;
-}
-`;
-
-export default React.memo(styled(Claim)`${ClaimStyles}`);

pioneer/packages/page-claims/src/Statement.tsx

@@ -1,84 +0,0 @@
-// 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.
-
-import { StatementKind } from '@polkadot/types/interfaces';
-
-import React from 'react';
-import styled from 'styled-components';
-
-import { useTranslation } from './translate';
-import { getStatement } from './util';
-
-export interface Props {
-  className?: string;
-  kind?: StatementKind;
-  systemChain: string;
-}
-
-// Get the full hardcoded text for a statement
-function StatementFullText ({ statementUrl, systemChain }: { statementUrl?: string; systemChain: string }): React.ReactElement | null {
-  const { t } = useTranslation();
-
-  switch (systemChain) {
-    case 'Polkadot':
-    case 'Polkadot CC1':
-      return statementUrl
-        ? <iframe src={statementUrl} />
-        : null;
-
-    default:
-      return <p>{t('Warning: we did not find any attest statement for {{chain}}', { replace: { chain: systemChain } })}</p>;
-  }
-}
-
-function Statement ({ className, kind, systemChain }: Props): React.ReactElement<Props> | null {
-  const { t } = useTranslation();
-  const statementUrl = getStatement(systemChain, kind)?.url;
-
-  if (!statementUrl) {
-    return null;
-  }
-
-  return (
-    <div className={className}>
-      {t('Please read these terms and conditions carefully. By submitting this statement, you are deemed to have accepted these Terms and Conditions. If you do not agree to these terms, please refrain from accessing or proceeding. You can also find them at:')}
-      <a className='statementUrl'
-        href={statementUrl}
-        rel='noopener noreferrer'
-        target='_blank'>{statementUrl}</a>
-      <div className='statement'>
-        <StatementFullText
-          statementUrl={statementUrl}
-          systemChain={systemChain}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default React.memo(styled(Statement)`
-  .statement{
-    border: 1px solid #c2c2c2;
-    background: #f2f2f2;
-    height: 15rem;
-    padding: 1rem;
-    width: 100%;
-    margin: 1rem 0;
-    white-space: normal;
-
-    p {
-      color: #4e4e4e !important;
-    }
-
-    iframe {
-      border: 0;
-      height: 100%;
-      width: 100%;
-    }
-  }
-
-  .statementUrl{
-    margin-left: 0.3rem
-  }
-`);

pioneer/packages/page-claims/src/Warning.tsx

@@ -1,57 +0,0 @@
-// 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.
-
-import { AddressMini, Card } from '@polkadot/react-components';
-
-import React from 'react';
-import styled from 'styled-components';
-
-import { useTranslation } from './translate';
-import usePolkadotPreclaims from './usePolkadotPreclaims';
-
-export interface Props{
-  className?: string;
-}
-
-function Warning ({ className }: Props): React.ReactElement<Props> | null {
-  const { t } = useTranslation();
-  const needsAttest = usePolkadotPreclaims();
-
-  if (!needsAttest.length) {
-    return null;
-  }
-
-  return (
-    <Card isError>
-      <div className={className}>
-        {
-          needsAttest.length > 1
-            ? t('You need to sign an attestation for the following accounts:')
-            : t('You need to sign an attestation for the following account:')
-        }{
-          needsAttest.map((address) => (
-            <AddressMini
-              key={address}
-              value={address}
-            />
-          ))
-        }
-      </div>
-    </Card>
-  );
-}
-
-export default React.memo(styled(Warning)`
-  font-size: 1.15rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 8rem;
-  align-items: center;
-  margin: 0 1rem;
-
-  .ui--AddressMini-address {
-    max-width: 20rem;
-  }
-`);

pioneer/packages/page-claims/src/index.tsx

@@ -1,311 +0,0 @@
-// 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.
-
-import { Option } from '@polkadot/types';
-import { EcdsaSignature, EthereumAddress, StatementKind } from '@polkadot/types/interfaces';
-
-import React, { useState, useCallback, useEffect } from 'react';
-import { Trans } from 'react-i18next';
-import styled from 'styled-components';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import { Button, Card, Columar, Column, Input, InputAddress, Tooltip } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
-import { TokenUnit } from '@polkadot/react-components/InputNumber';
-import { u8aToHex, u8aToString } from '@polkadot/util';
-import { decodeAddress } from '@polkadot/util-crypto';
-
-import { useTranslation } from './translate';
-import { recoverFromJSON, getStatement } from './util';
-import AttestDisplay from './Attest';
-import ClaimDisplay from './Claim';
-import Statement from './Statement';
-import Warning from './Warning';
-
-export { default as useCounter } from './useCounter';
-
-enum Step {
-  Account = 0,
-  ETHAddress = 1,
-  Sign = 2,
-  Claim = 3,
-}
-
-const PRECLAIMS_LOADING = 'PRECLAIMS_LOADING';
-
-// FIXME no embedded components (hossible to tweak)
-const Payload = styled.pre`
-  cursor: copy;
-  font-family: monospace;
-  border: 1px dashed #c2c2c2;
-  background: #f2f2f2;
-  padding: 1rem;
-  width: 100%;
-  margin: 1rem 0;
-  white-space: normal;
-  word-break: break-all;
-`;
-
-const Signature = styled.textarea`
-  font-family: monospace;
-  padding: 1rem;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  border-radius: 0.25rem;
-  margin: 1rem 0;
-  resize: none;
-  width: 100%;
-
-  &::placeholder {
-    color: rgba(0, 0, 0, 0.5);
-  }
-
-  &::-ms-input-placeholder {
-    color: rgba(0, 0, 0, 0.5);
-  }
-
-  &:-ms-input-placeholder {
-    color: rgba(0, 0, 0, 0.5);
-  }
-`;
-
-function ClaimsApp (): React.ReactElement {
-  const [didCopy, setDidCopy] = useState(false);
-  const [ethereumAddress, setEthereumAddress] = useState<string | undefined | null>(null);
-  const [signature, setSignature] = useState<EcdsaSignature | null>(null);
-  const [step, setStep] = useState<Step>(Step.Account);
-  const [accountId, setAccountId] = useState<string | null>(null);
-  const { api, systemChain } = useApi();
-  const { t } = useTranslation();
-
-  // This preclaimEthereumAddress holds the result of `api.query.claims.preclaims`:
-  // - an `EthereumAddress` when there's a preclaim
-  // - null if no preclaim
-  // - `PRECLAIMS_LOADING` if we're fetching the results
-  const [preclaimEthereumAddress, setPreclaimEthereumAddress] = useState<string | null | undefined | typeof PRECLAIMS_LOADING>(PRECLAIMS_LOADING);
-  const isPreclaimed = !!preclaimEthereumAddress && preclaimEthereumAddress !== PRECLAIMS_LOADING;
-
-  // Everytime we change account, reset everything, and check if the accountId
-  // has a preclaim.
-  useEffect(() => {
-    if (!accountId) {
-      return;
-    }
-
-    setStep(Step.Account);
-    setEthereumAddress(null);
-    setPreclaimEthereumAddress(PRECLAIMS_LOADING);
-
-    if (!api.query.claims || !api.query.claims.preclaims) {
-      return setPreclaimEthereumAddress(null);
-    }
-
-    api.query.claims
-      .preclaims<Option<EthereumAddress>>(accountId)
-      .then((preclaim): void => {
-        const address = preclaim.unwrapOr(null)?.toString();
-
-        setEthereumAddress(address);
-        setPreclaimEthereumAddress(address);
-      })
-      .catch((): void => setPreclaimEthereumAddress(null));
-  }, [accountId, api.query.claims, api.query.claims.preclaims]);
-
-  // Old claim process used `api.tx.claims.claim`, and didn't have attest
-  const isOldClaimProcess = !api.tx.claims.claimAttest;
-
-  useEffect(() => {
-    if (didCopy) {
-      setTimeout((): void => {
-        setDidCopy(false);
-      }, 1000);
-    }
-  }, [didCopy]);
-
-  const goToStepAccount = useCallback(() => {
-    setStep(Step.Account);
-  }, []);
-
-  const goToStepSign = useCallback(() => {
-    setStep(Step.Sign);
-  }, []);
-
-  const goToStepClaim = useCallback(() => {
-    setStep(Step.Claim);
-  }, []);
-
-  // Depending on the account, decide which step to show.
-  const handleAccountStep = useCallback(() => {
-    if (isPreclaimed) {
-      goToStepClaim();
-    } else if (ethereumAddress || isOldClaimProcess) {
-      goToStepSign();
-    } else {
-      setStep(Step.ETHAddress);
-    }
-  }, [ethereumAddress, goToStepClaim, goToStepSign, isPreclaimed, isOldClaimProcess]);
-
-  const onChangeSignature = useCallback((event: React.SyntheticEvent<Element>) => {
-    const { value: signatureJson } = event.target as HTMLInputElement;
-
-    const { ethereumAddress, signature } = recoverFromJSON(signatureJson);
-
-    setEthereumAddress(ethereumAddress?.toString());
-    setSignature(signature);
-  }, []);
-
-  const onChangeEthereumAddress = useCallback((value: string) => {
-    // FIXME We surely need a better check than just a trim
-
-    setEthereumAddress(value.trim());
-  }, []);
-
-  const onCopy = useCallback(() => {
-    setDidCopy(true);
-  }, []);
-
-  // If it's 1/ not preclaimed and 2/ not the old claiming process, fetch the
-  // statement kind to sign.
-  const statementKind = useCall<StatementKind | null>(!isPreclaimed && !isOldClaimProcess && !!ethereumAddress && api.query.claims.signing, [ethereumAddress], {
-    transform: (option: Option<StatementKind>) => option.unwrapOr(null)
-  });
-
-  const statementSentence = getStatement(systemChain, statementKind)?.sentence || '';
-
-  const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
-  const payload = accountId
-    ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}${statementSentence}`
-    : '';
-
-  return (
-    <main>
-      <header />
-      {!isOldClaimProcess && <Warning />}
-      <h1>
-        <Trans>Claim your <em>{TokenUnit.abbr}</em> tokens</Trans>
-      </h1>
-      <Columar>
-        <Column>
-          <Card withBottomMargin>
-            <h3>{t<string>('1. Select your {{chain}} account', {
-              replace: {
-                chain: systemChain
-              }
-            })}</h3>
-            <InputAddress
-              defaultValue={accountId}
-              help={t<string>('The account you want to claim to.')}
-              label={t<string>('claim to account')}
-              onChange={setAccountId}
-              type='all'
-            />
-            {(step === Step.Account) && (
-              <Button.Group>
-                <Button
-                  icon='sign-in-alt'
-                  isDisabled={preclaimEthereumAddress === PRECLAIMS_LOADING}
-                  label={preclaimEthereumAddress === PRECLAIMS_LOADING
-                    ? t<string>('Loading')
-                    : t<string>('Continue')
-                  }
-                  onClick={handleAccountStep}
-                />
-              </Button.Group>
-            )}
-          </Card>
-          {
-            // We need to know the ethereuem address only for the new process
-            // to be able to know the statement kind so that the users can sign it
-            (step >= Step.ETHAddress && !isPreclaimed && !isOldClaimProcess) && (
-              <Card withBottomMargin>
-                <h3>{t<string>('2. Enter the ETH address from the sale.')}</h3>
-                <Input
-                  autoFocus
-                  className='full'
-                  help={t<string>('The the Ethereum address you used during the pre-sale (starting by "0x")')}
-                  label={t<string>('Pre-sale ethereum address')}
-                  onChange={onChangeEthereumAddress}
-                  value={ethereumAddress || ''}
-                />
-                {(step === Step.ETHAddress) && (
-                  <Button.Group>
-                    <Button
-                      icon='sign-in-alt'
-                      isDisabled={!ethereumAddress}
-                      label={t<string>('Continue')}
-                      onClick={goToStepSign}
-                    />
-                  </Button.Group>
-                )}
-              </Card>
-            )}
-          {(step >= Step.Sign && !isPreclaimed) && (
-            <Card>
-              <h3>{t<string>('{{step}}. Sign with your ETH address', { replace: { step: isOldClaimProcess ? '2' : '3' } })}</h3>
-              {!isOldClaimProcess && (
-                <Statement
-                  kind={statementKind}
-                  systemChain={systemChain}
-                />
-              )}
-              <div>{t<string>('Copy the following string and sign it with the Ethereum account you used during the pre-sale in the wallet of your choice, using the string as the payload, and then paste the transaction signature object below:')}</div>
-              <CopyToClipboard
-                onCopy={onCopy}
-                text={payload}
-              >
-                <Payload
-                  data-for='tx-payload'
-                  data-tip
-                >
-                  {payload}
-                </Payload>
-              </CopyToClipboard>
-              <Tooltip
-                place='right'
-                text={didCopy ? t<string>('copied') : t<string>('click to copy')}
-                trigger='tx-payload'
-              />
-              <Signature
-                onChange={onChangeSignature}
-                placeholder={`{\n  "address": "0x ...",\n  "msg": "${prefix}:...",\n  "sig": "0x ...",\n  "version": "2"\n}`}
-                rows={10}
-              />
-              {(step === Step.Sign) && (
-                <Button.Group>
-                  <Button
-                    icon='sign-in-alt'
-                    isDisabled={!accountId || !signature}
-                    label={t<string>('Confirm claim')}
-                    onClick={goToStepClaim}
-                  />
-                </Button.Group>
-              )}
-            </Card>
-          )}
-        </Column>
-        <Column showEmptyText={false}>
-          {(step >= Step.Claim) && (
-            isPreclaimed
-              ? <AttestDisplay
-                accountId={accountId}
-                ethereumAddress={ethereumAddress}
-                onSuccess={goToStepAccount}
-                statementKind={statementKind}
-                systemChain={systemChain}
-              />
-              : <ClaimDisplay
-                accountId={accountId}
-                ethereumAddress={ethereumAddress}
-                ethereumSignature={signature}
-                isOldClaimProcess={isOldClaimProcess}
-                onSuccess={goToStepAccount}
-                statementKind={statementKind}
-                systemChain={systemChain}
-              />
-          )}
-        </Column>
-      </Columar>
-    </main>
-  );
-}
-
-export default React.memo(ClaimsApp);

pioneer/packages/page-claims/src/secp256k1.d.ts

@@ -1,8 +0,0 @@
-// 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.
-
-declare module 'secp256k1/elliptic' {
-  export function publicKeyConvert (publicKey: Buffer, expanded: boolean): Buffer;
-  export function recover (msgHash: Buffer, signature: Buffer, recovery: number): Buffer;
-}

pioneer/packages/page-claims/src/translate.ts

@@ -1,11 +0,0 @@
-// 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.
-
-import { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
-
-export function useTranslation (): UseTranslationResponse {
-  return useTranslationBase('app-claims');
-}
-
-export default withTranslation(['app-claims']);

pioneer/packages/page-claims/src/useCounter.ts

@@ -1,11 +0,0 @@
-// Copyright 2017-2020 @polkadot/app-settings 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 usePolkadotPreclaims from './usePolkadotPreclaims';
-
-export default function useCounter (): number {
-  const needAttest = usePolkadotPreclaims();
-
-  return needAttest.length;
-}

pioneer/packages/page-claims/src/usePolkadotPreclaims.ts

@@ -1,50 +0,0 @@
-// Copyright 2017-2020 @polkadot/app-settings 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 { QueryableStorageEntry } from '@polkadot/api/types';
-import { Codec } from '@polkadot/types/types';
-import { EthereumAddress } from '@polkadot/types/interfaces';
-
-import { useEffect, useState } from 'react';
-import { useAccounts, useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
-import { Option } from '@polkadot/types';
-
-export default function usePolkadotPreclaims (): string[] {
-  const { allAccounts } = useAccounts();
-  const { api } = useApi();
-  const mountedRef = useIsMountedRef();
-  const [needsAttest, setNeedsAttest] = useState<string[]>([]);
-
-  // find all own preclaims
-  const preclaims = useCall<[string, EthereumAddress][]>(api.query.claims?.preclaims?.multi, [allAccounts], {
-    transform: (preclaims: Option<EthereumAddress>[]) =>
-      preclaims
-        .map((opt, index): [string, Option<EthereumAddress>] => [allAccounts[index], opt])
-        .filter(([, opt]) => opt.isSome)
-        .map(([address, opt]) => [address, opt.unwrap()])
-  });
-
-  // Filter the accounts that need attest. They are accounts that
-  // - already preclaimed
-  // - has a balance, either vested or normal
-  useEffect((): void => {
-    preclaims && api.queryMulti(
-      preclaims.reduce((result: [QueryableStorageEntry<'promise'>, EthereumAddress][], [, ethAddr]) =>
-        result.concat([
-          [api.query.claims.claims, ethAddr],
-          [api.query.claims.vesting, ethAddr]
-        ]),
-      []), (opts: Option<Codec>[]): void => {
-        // filter the cases where either claims or vesting has a value
-        mountedRef.current && setNeedsAttest(
-          preclaims
-            .filter((_, index) => opts[index * 2].isSome || opts[(index * 2) + 1].isSome)
-            .map(([address]) => address)
-        );
-      }
-    );
-  }, [api, allAccounts, mountedRef, preclaims]);
-
-  return needsAttest;
-}

pioneer/packages/page-claims/src/util.spec.ts

@@ -1,25 +0,0 @@
-// Copyright 2017-2020 @polkadot/react-components 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 { hexToU8a } from '@polkadot/util';
-
-import { publicToAddr, recoverFromJSON } from './util';
-
-describe('util', (): void => {
-  it('converts a publicKey to address via publicToAddr', (): void => {
-    expect(
-      publicToAddr(
-        hexToU8a(
-          '0x836b35a026743e823a90a0ee3b91bf615c6a757e2b60b9e1dc1826fd0dd16106f7bc1e8179f665015f43c6c81f39062fc2086ed849625c06e04697698b21855e'
-        )
-      )
-    ).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"}');
-  });
-});

pioneer/packages/page-claims/src/util.ts

@@ -1,144 +0,0 @@
-// 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.
-
-import { EthereumAddress, EcdsaSignature, StatementKind } from '@polkadot/types/interfaces';
-
-import secp256k1 from 'secp256k1/elliptic';
-import { registry } from '@polkadot/react-api';
-import { assert, hexToU8a, stringToU8a, u8aToBuffer, u8aConcat } from '@polkadot/util';
-import { keccakAsHex, keccakAsU8a } from '@polkadot/util-crypto';
-
-interface RecoveredSignature {
-  error: Error | null;
-  ethereumAddress: EthereumAddress | null;
-  signature: EcdsaSignature | null;
-}
-
-interface SignatureParts {
-  recovery: number;
-  signature: Buffer;
-}
-
-// converts an Ethereum address to a checksum representation
-export function addrToChecksum (_address: string): string {
-  const address = _address.toLowerCase();
-  const hash = keccakAsHex(address.substr(2)).substr(2);
-  let result = '0x';
-
-  for (let n = 0; n < 40; n++) {
-    result = `${result}${
-      parseInt(hash[n], 16) > 7
-        ? address[n + 2].toUpperCase()
-        : address[n + 2]
-    }`;
-  }
-
-  return result;
-}
-
-// convert a give public key to an Ethereum address (the last 20 bytes of an _exapnded_ key keccack)
-export function publicToAddr (publicKey: Uint8Array): string {
-  return addrToChecksum(`0x${keccakAsHex(publicKey).slice(-40)}`);
-}
-
-// hash a message for use in signature recovery, adding the standard Ethereum header
-export function hashMessage (message: string): Buffer {
-  const expanded = stringToU8a(`\x19Ethereum Signed Message:\n${message.length.toString()}${message}`);
-  const hashed = keccakAsU8a(expanded);
-
-  return u8aToBuffer(hashed);
-}
-
-// split is 65-byte signature into the r, s (combined) and recovery number (derived from v)
-export function sigToParts (_signature: string): SignatureParts {
-  const signature = hexToU8a(_signature);
-
-  assert(signature.length === 65, `Invalid signature length, expected 65 found ${signature.length}`);
-
-  let v = signature[64];
-
-  if (v < 27) {
-    v += 27;
-  }
-
-  const recovery = v - 27;
-
-  assert(recovery === 0 || recovery === 1, 'Invalid signature v value');
-
-  return {
-    recovery,
-    signature: u8aToBuffer(signature.slice(0, 64))
-  };
-}
-
-// recover an address from a given message and a recover/signature combination
-export function recoverAddress (message: string, { recovery, signature }: SignatureParts): string {
-  const msgHash = hashMessage(message);
-  const senderPubKey = secp256k1.recover(msgHash, signature, recovery);
-
-  return publicToAddr(
-    secp256k1.publicKeyConvert(senderPubKey, false).slice(1)
-  );
-}
-
-// recover an address from a signature JSON (as supplied by e.g. MyCrypto)
-export function recoverFromJSON (signatureJson: string | null): RecoveredSignature {
-  try {
-    const { msg, sig } = JSON.parse(signatureJson || '{}') as Record<string, string>;
-
-    if (!msg || !sig) {
-      throw new Error('Invalid signature object');
-    }
-
-    const parts = sigToParts(sig);
-
-    return {
-      error: null,
-      ethereumAddress: registry.createType('EthereumAddress', recoverAddress(msg, parts)),
-      signature: registry.createType('EcdsaSignature', u8aConcat(parts.signature, new Uint8Array([parts.recovery])))
-    };
-  } catch (error) {
-    console.error(error);
-
-    return {
-      error: error as Error,
-      ethereumAddress: null,
-      signature: null
-    };
-  }
-}
-
-export interface Statement {
-  sentence: string;
-  url: string;
-}
-
-function getPolkadot (kind?: StatementKind | null): Statement | undefined {
-  if (!kind) {
-    return undefined;
-  }
-
-  const url = kind.isRegular
-    ? 'https://statement.polkadot.network/regular.html'
-    : 'https://statement.polkadot.network/saft.html';
-  const hash = kind.isRegular
-    ? 'Qmc1XYqT6S39WNp2UeiRUrZichUWUPpGEThDE6dAb3f6Ny'
-    : 'QmXEkMahfhHJPzT3RjkXiZVFi77ZeVeuxtAjhojGRNYckz';
-
-  return {
-    sentence: `I hereby agree to the terms of the statement whose SHA-256 multihash is ${hash}. (This may be found at the URL: ${url})`,
-    url
-  };
-}
-
-export function getStatement (network: string, kind?: StatementKind | null): Statement | undefined {
-  switch (network) {
-    case 'Polkadot':
-    case 'Polkadot CC1':
-      return getPolkadot(kind);
-
-    default:
-      return undefined;
-  }
-}

pioneer/packages/page-contracts/LICENSE

@@ -1,201 +0,0 @@
-                              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.

pioneer/packages/page-contracts/README.md

@@ -1,3 +0,0 @@
-# @polkadot/app-contracts
-
-Substrate contracts - code deployment, instance creation and messages.

pioneer/packages/page-contracts/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@polkadot/app-contracts",
-  "private": true,
-  "version": "0.51.1",
-  "description": "Deployment and management of substrate contracts",
-  "main": "index.js",
-  "scripts": {},
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.10.5",
-    "@polkadot/api-contract": "^1.26.1"
-  }
-}

pioneer/packages/page-contracts/src/Codes/Add.tsx

@@ -1,106 +0,0 @@
-// 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 { StringOrNull } from '@polkadot/react-components/types';
-
-import React, { useCallback, useMemo, useState } from 'react';
-import { createType } from '@polkadot/types';
-import { registry } from '@polkadot/react-api';
-import { Button, Input, Modal } from '@polkadot/react-components';
-import { useToggle } from '@polkadot/react-hooks';
-import { isNull } from '@polkadot/util';
-import { ABI, InputName } from '../shared';
-
-import ValidateCode from './ValidateCode';
-import store from '../store';
-import { useTranslation } from '../translate';
-import useAbi from '../useAbi';
-
-function Add (): React.ReactElement {
-  const { t } = useTranslation();
-  const [isOpen, toggleIsOpen, setIsOpen] = useToggle();
-  const [codeHash, setCodeHash] = useState('');
-  const [isCodeHashValid, setIsCodeHashValid] = useState(false);
-  const [name, setName] = useState<StringOrNull>(null);
-  const { abi, contractAbi, errorText, isAbiError, isAbiSupplied, isAbiValid, onChangeAbi, onRemoveAbi } = useAbi();
-
-  const isNameValid = useMemo(
-    (): boolean => !isNull(name) && name.length > 0,
-    [name]
-  );
-
-  const isValid = useMemo(
-    (): boolean => isCodeHashValid && isNameValid,
-    [isCodeHashValid, isNameValid]
-  );
-
-  const _onSave = useCallback(
-    (): void => {
-      if (!codeHash || !name) {
-        return;
-      }
-
-      store
-        .saveCode(createType(registry, 'Hash', codeHash), { abi, name, tags: [] })
-        .then((): void => setIsOpen(false))
-        .catch((error): void => {
-          console.error('Unable to save code', error);
-        });
-    },
-    [abi, codeHash, name, setIsOpen]
-  );
-
-  return (
-    <>
-      <Button
-        icon='plus'
-        label={t('Add an existing code hash')}
-        onClick={toggleIsOpen}
-      />
-      {isOpen && (
-        <Modal header={t('Add an existing code hash')}>
-          <Modal.Content>
-            <Input
-              autoFocus
-              help={t('The code hash for the on-chain deployed code.')}
-              isError={codeHash.length > 0 && !isCodeHashValid}
-              label={t('code hash')}
-              onChange={setCodeHash}
-              value={codeHash}
-            />
-            <ValidateCode
-              codeHash={codeHash}
-              onChange={setIsCodeHashValid}
-            />
-            <InputName
-              isError={!isNameValid}
-              onChange={setName}
-              value={name || undefined}
-            />
-            <ABI
-              contractAbi={contractAbi}
-              errorText={errorText}
-              isError={isAbiError}
-              isSupplied={isAbiSupplied}
-              isValid={isAbiValid}
-              onChange={onChangeAbi}
-              onRemove={onRemoveAbi}
-              withLabel
-            />
-          </Modal.Content>
-          <Modal.Actions onCancel={toggleIsOpen}>
-            <Button
-              icon='save'
-              isDisabled={!isValid}
-              label={t('Save')}
-              onClick={_onSave}
-            />
-          </Modal.Actions>
-        </Modal>
-      )}
-    </>
-  );
-}
-
-export default React.memo(Add);

pioneer/packages/page-contracts/src/Codes/Code.tsx

@@ -1,138 +0,0 @@
-// 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 { CodeStored } from '../types';
-
-import React, { useCallback } from 'react';
-import styled from 'styled-components';
-import { Button, Card, Expander, Forget } from '@polkadot/react-components';
-import { useToggle } from '@polkadot/react-hooks';
-
-import { ABI, CodeRow } from '../shared';
-import RemoveABI from '../RemoveABI';
-import store from '../store';
-import useAbi from '../useAbi';
-import { useTranslation } from '../translate';
-
-interface Props {
-  className?: string;
-  code: CodeStored;
-  onShowDeploy: (codeHash?: string, constructorIndex?: number) => () => void;
-}
-
-function Code ({ className, code, onShowDeploy }: Props): React.ReactElement<Props> {
-  const { json: { codeHash } } = code;
-  const { t } = useTranslation();
-  const [isAbiOpen, toggleIsAbiOpen] = useToggle();
-  const [isForgetOpen, toggleIsForgetOpen] = useToggle();
-  const [isRemoveABIOpen, toggleIsRemoveABIOpen] = useToggle();
-  const { contractAbi, isAbiError, isAbiSupplied, isAbiValid, onChangeAbi, onRemoveAbi } = useAbi([code.json.abi || null, code.contractAbi || null], codeHash, true);
-
-  const _onShowDeploy = useCallback(
-    () => onShowDeploy(codeHash)(),
-    [codeHash, onShowDeploy]
-  );
-
-  const _onDeployConstructor = useCallback(
-    (constructorIndex = 0) => codeHash && onShowDeploy && onShowDeploy(codeHash, constructorIndex)(),
-    [codeHash, onShowDeploy]
-  );
-
-  const _onForget = useCallback(
-    (): void => {
-      if (!codeHash) {
-        return;
-      }
-
-      try {
-        store.forgetCode(codeHash);
-      } catch (error) {
-        console.error(error);
-      } finally {
-        toggleIsForgetOpen();
-      }
-    },
-    [codeHash, toggleIsForgetOpen]
-  );
-
-  const abiNode = (
-    <ABI
-      contractAbi={contractAbi}
-      isError={isAbiError}
-      isSupplied={isAbiSupplied}
-      isValid={isAbiValid}
-      onChange={onChangeAbi}
-      onRemove={toggleIsRemoveABIOpen}
-      onSelectConstructor={_onDeployConstructor}
-    />
-  );
-
-  return (
-    <Card className={className}>
-      <CodeRow
-        buttons={
-          <>
-            <Button
-              icon='trash'
-              onClick={toggleIsForgetOpen}
-              tooltip={t('Forget this code hash')}
-            />
-            <Button
-              icon='upload'
-              label={t('deploy')}
-              onClick={_onShowDeploy}
-              tooltip={t('Deploy this code hash as a smart contract')}
-            />
-          </>
-        }
-        code={code}
-        withTags
-      >
-        {contractAbi
-          ? (
-            <Expander
-              isOpen={isAbiOpen}
-              onClick={toggleIsAbiOpen}
-              summary={t<string>('ABI')}
-            >
-              {abiNode}
-            </Expander>
-          )
-          : abiNode
-        }
-      </CodeRow>
-      {isForgetOpen && (
-        <Forget
-          key='modal-forget-account'
-          mode='code'
-          onClose={toggleIsForgetOpen}
-          onForget={_onForget}
-        >
-          <CodeRow
-            code={code || ''}
-            isInline
-          >
-            <p>{t<string>('You are about to remove this code from your list of available code hashes. Once completed, should you need to access it again, you will have to manually add the code hash again.')}</p>
-            <p>{t<string>('This operation does not remove the uploaded code WASM and ABI from the chain, nor any deployed contracts. The forget operation only limits your access to the code on this browser.')}</p>
-          </CodeRow>
-        </Forget>
-      )}
-      {isRemoveABIOpen && (
-        <RemoveABI
-          code={code}
-          key='modal-remove-abi'
-          onClose={toggleIsRemoveABIOpen}
-          onRemove={onRemoveAbi}
-        />
-      )}
-    </Card>
-  );
-}
-
-export default React.memo(
-  styled(Code)`
-    max-width: 100%;
-    min-width: 100%;
-  `
-);

pioneer/packages/page-contracts/src/Codes/Upload.tsx

@@ -1,125 +0,0 @@
-// 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 { Hash } from '@polkadot/types/interfaces';
-
-import React, { useCallback, useMemo, useState } from 'react';
-import { SubmittableResult } from '@polkadot/api';
-import { Button, InputAddress, InputFile, Modal, TxButton } from '@polkadot/react-components';
-import { useAccountId, useApi, useNonEmptyString, useToggle } from '@polkadot/react-hooks';
-import { compactAddLength, isNull } from '@polkadot/util';
-
-import { ABI, InputName } from '../shared';
-import store from '../store';
-import { useTranslation } from '../translate';
-import useAbi from '../useAbi';
-
-function Upload (): React.ReactElement {
-  const { t } = useTranslation();
-  const { api } = useApi();
-  const [isOpen, toggleIsOpen] = useToggle();
-  const [accountId, setAccountId] = useAccountId();
-  const [[wasm, isWasmValid], setWasm] = useState<[Uint8Array | null, boolean]>([null, false]);
-  const [name, isNameValid, setName] = useNonEmptyString();
-  const { abi, contractAbi, errorText, isAbiError, isAbiSupplied, isAbiValid, onChangeAbi, onRemoveAbi } = useAbi();
-
-  const isSubmittable = useMemo(
-    (): boolean => !!accountId && (!isNull(name) && isNameValid) && isWasmValid && (!isAbiSupplied || isAbiValid),
-    [accountId, name, isAbiSupplied, isAbiValid, isNameValid, isWasmValid]
-  );
-
-  const _onAddWasm = useCallback(
-    (wasm: Uint8Array, name: string): void => {
-      setWasm([compactAddLength(wasm), wasm.subarray(0, 4).toString() === '0,97,115,109']);
-      setName(name);
-    },
-    [setName]
-  );
-
-  const _onSuccess = useCallback(
-    (result: SubmittableResult): void => {
-      const section = api.tx.contracts ? 'contracts' : 'contract';
-      const record = result.findRecord(section, 'CodeStored');
-
-      if (record) {
-        const codeHash = record.event.data[0];
-
-        if (!codeHash || !name) {
-          return;
-        }
-
-        store.saveCode(codeHash as Hash, { abi, name, tags: [] })
-          .then()
-          .catch((error: any): void => {
-            console.error('Unable to save code', error);
-          });
-      }
-    },
-    [api, abi, name]
-  );
-
-  return (
-    <>
-      <Button
-        icon='plus'
-        label={t('Upload WASM')}
-        onClick={toggleIsOpen}
-      />
-      {isOpen && (
-        <Modal header={t('Upload WASM')}>
-          <Modal.Content>
-            <InputAddress
-              help={t('Specify the user account to use for this deployment. Any fees will be deducted from this account.')}
-              isInput={false}
-              label={t('deployment account')}
-              onChange={setAccountId}
-              type='account'
-              value={accountId}
-            />
-            <InputFile
-              help={t<string>('The compiled WASM for the contract that you wish to deploy. Each unique code blob will be attached with a code hash that can be used to create new instances.')}
-              isError={!isWasmValid}
-              label={t<string>('compiled contract WASM')}
-              onChange={_onAddWasm}
-              placeholder={
-                wasm && !isWasmValid
-                  ? t<string>('The code is not recognized as being in valid WASM format')
-                  : null
-              }
-            />
-            <InputName
-              isError={!isNameValid}
-              onChange={setName}
-              value={name || undefined}
-            />
-            <ABI
-              contractAbi={contractAbi}
-              errorText={errorText}
-              isError={isAbiError}
-              isSupplied={isAbiSupplied}
-              isValid={isAbiValid}
-              onChange={onChangeAbi}
-              onRemove={onRemoveAbi}
-              withLabel
-            />
-          </Modal.Content>
-          <Modal.Actions onCancel={toggleIsOpen}>
-            <TxButton
-              accountId={accountId}
-              icon='upload'
-              isDisabled={!isSubmittable}
-              label={t('Upload')}
-              onClick={toggleIsOpen}
-              onSuccess={_onSuccess}
-              params={[wasm]}
-              tx={api.tx.contracts ? 'contracts.putCode' : 'contract.putCode'}
-            />
-          </Modal.Actions>
-        </Modal>
-      )}
-    </>
-  );
-}
-
-export default React.memo(Upload);

pioneer/packages/page-contracts/src/Codes/ValidateCode.tsx

@@ -1,57 +0,0 @@
-// 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.
-
-/* eslint-disable camelcase */
-
-import { PrefabWasmModule } from '@polkadot/types/interfaces';
-
-import React, { useMemo } from 'react';
-import { Option } from '@polkadot/types';
-import { InfoForInput } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
-import { isHex } from '@polkadot/util';
-
-import { useTranslation } from '../translate';
-
-interface Props {
-  codeHash?: string | null;
-  onChange: React.Dispatch<boolean>;
-}
-
-function ValidateCode ({ codeHash, onChange }: Props): React.ReactElement<Props> | null {
-  const { api } = useApi();
-  const { t } = useTranslation();
-  const codeStorage = useCall<Option<PrefabWasmModule>>((api.query.contracts || api.query.contract).codeStorage, [codeHash]);
-  const [isValidHex, isValid] = useMemo(
-    (): [boolean, boolean] => {
-      const isValidHex = !!codeHash && isHex(codeHash) && codeHash.length === 66;
-      const isStored = !!codeStorage && codeStorage.isSome;
-      const isValid = isValidHex && isStored;
-
-      onChange(isValid);
-
-      return [
-        isValidHex,
-        isValid
-      ];
-    },
-    [codeHash, codeStorage, onChange]
-  );
-
-  if (isValid || !isValidHex) {
-    return null;
-  }
-
-  return (
-    <InfoForInput type='error'>
-      {
-        isValidHex
-          ? t('Unable to find on-chain WASM code for the supplied codeHash')
-          : t('The codeHash is not a valid hex hash')
-      }
-    </InfoForInput>
-  );
-}
-
-export default React.memo(ValidateCode);

pioneer/packages/page-contracts/src/Codes/index.tsx

@@ -1,45 +0,0 @@
-// 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 { ComponentProps as Props } from '../types';
-
-import React from 'react';
-import { Button, CardGrid } from '@polkadot/react-components';
-
-import contracts from '../store';
-import { useTranslation } from '../translate';
-
-import Code from './Code';
-import Upload from './Upload';
-import Add from './Add';
-
-function Codes ({ onShowDeploy }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <CardGrid
-        buttons={
-          <Button.Group isCentered>
-            <Upload />
-            <Add />
-          </Button.Group>
-        }
-        emptyText={t('No code hashes available')}
-      >
-        {contracts.getAllCode().map((code): React.ReactNode => {
-          return (
-            <Code
-              code={code}
-              key={code.json.codeHash}
-              onShowDeploy={onShowDeploy}
-            />
-          );
-        })}
-      </CardGrid>
-    </>
-  );
-}
-
-export default React.memo(Codes);

pioneer/packages/page-contracts/src/Contracts/Add.tsx

@@ -1,129 +0,0 @@
-// 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 { StringOrNull } from '@polkadot/react-components/types';
-import { ActionStatus } from '@polkadot/react-components/Status/types';
-
-import React, { useCallback, useMemo, useState } from 'react';
-import { AddressRow, Button, Input, Modal } from '@polkadot/react-components';
-import { useApi, useNonEmptyString, useToggle } from '@polkadot/react-hooks';
-import keyring from '@polkadot/ui-keyring';
-
-import ValidateAddr from './ValidateAddr';
-import { ABI, InputName } from '../shared';
-import { useTranslation } from '../translate';
-import useAbi from '../useAbi';
-
-function Add (): React.ReactElement {
-  const { t } = useTranslation();
-  const { api } = useApi();
-  const [isOpen, toggleIsOpen, setIsOpen] = useToggle();
-  const [address, setAddress] = useState<StringOrNull>(null);
-  const [isAddressValid, setIsAddressValid] = useState(false);
-  const [name, isNameValid, setName] = useNonEmptyString('New Contract');
-  const { abi, contractAbi, errorText, isAbiError, isAbiSupplied, isAbiValid, onChangeAbi, onRemoveAbi } = useAbi([null, null], null, true);
-
-  const isValid = useMemo(
-    (): boolean => isAddressValid && isNameValid && isAbiValid,
-    [isAbiValid, isAddressValid, isNameValid]
-  );
-
-  const _onAdd = useCallback(
-    (): void => {
-      const status: Partial<ActionStatus> = { action: 'create' };
-
-      if (!address || !abi || !name) {
-        return;
-      }
-
-      try {
-        const json = {
-          contract: {
-            abi,
-            genesisHash: api.genesisHash.toHex()
-          },
-          name,
-          tags: []
-        };
-
-        keyring.saveContract(address, json);
-
-        status.account = address;
-        status.status = address ? 'success' : 'error';
-        status.message = 'contract added';
-
-        setIsOpen(false);
-      } catch (error) {
-        console.error(error);
-
-        status.status = 'error';
-        status.message = (error as Error).message;
-      }
-    },
-    [abi, address, api, name, setIsOpen]
-  );
-
-  return (
-    <>
-      <Button
-        icon='plus'
-        label={t('Add an existing contract')}
-        onClick={toggleIsOpen}
-      />
-      <Modal
-        header={t('Add an existing contract')}
-        onClose={toggleIsOpen}
-        open={isOpen}
-      >
-        <Modal.Content>
-          <AddressRow
-            defaultName={name}
-            isValid
-            value={address || null}
-          >
-            <Input
-              autoFocus
-              help={t<string>('The address for the deployed contract instance.')}
-              isError={!isAddressValid}
-              label={t<string>('contract address')}
-              onChange={setAddress}
-              value={address || ''}
-            />
-            <ValidateAddr
-              address={address}
-              onChange={setIsAddressValid}
-            />
-            <InputName
-              isContract
-              isError={!isNameValid}
-              onChange={setName}
-              value={name || undefined}
-            />
-            <ABI
-              contractAbi={contractAbi}
-              errorText={errorText}
-              isContract
-              isError={isAbiError}
-              isSupplied={isAbiSupplied}
-              isValid={isAbiValid}
-              onChange={onChangeAbi}
-              onRemove={onRemoveAbi}
-              withLabel
-            />
-          </AddressRow>
-        </Modal.Content>
-        <Modal.Actions onCancel={toggleIsOpen}>
-          <Button
-            icon='save'
-            isDisabled={!isValid}
-            label={t<string>('Save')}
-            onClick={_onAdd}
-          />
-        </Modal.Actions>
-      </Modal>
-    </>
-  );
-}
-
-export default React.memo(Add);

pioneer/packages/page-contracts/src/Contracts/Call.tsx

@@ -1,265 +0,0 @@
-// 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 { ContractCallOutcome } from '@polkadot/api-contract/types';
-import { StringOrNull } from '@polkadot/react-components/types';
-
-import BN from 'bn.js';
-import React, { useCallback, useState, useEffect, useMemo } from 'react';
-import styled from 'styled-components';
-import { Button, ButtonCancel, Dropdown, IconLink, InputAddress, InputBalance, Modal, Toggle, TxButton } from '@polkadot/react-components';
-import { PromiseContract as ApiContract } from '@polkadot/api-contract';
-import { useAccountId, useFormField, useToggle } from '@polkadot/react-hooks';
-import { createValue } from '@polkadot/react-params/values';
-import { BN_ZERO, isNull } from '@polkadot/util';
-
-import { InputMegaGas, Params } from '../shared';
-import Outcome from './Outcome';
-import { useTranslation } from '../translate';
-import { getCallMessageOptions } from './util';
-import useWeight from '../useWeight';
-
-interface Props {
-  callContract: ApiContract | null;
-  callMessageIndex: number | null;
-  className?: string;
-  isOpen: boolean;
-  onChangeCallContractAddress: (callContractAddress: StringOrNull) => void;
-  onChangeCallMessageIndex: (callMessageIndex: number) => void;
-  onClose: () => void;
-}
-
-function Call (props: Props): React.ReactElement<Props> | null {
-  const { t } = useTranslation();
-  const { callContract, callMessageIndex, className = '', isOpen, onChangeCallContractAddress, onChangeCallMessageIndex, onClose } = props;
-  const hasRpc = callContract?.hasRpcContractsCall;
-  const callMessage = callContract?.getMessage(isNull(callMessageIndex) ? undefined : callMessageIndex);
-
-  const [accountId, setAccountId] = useAccountId();
-  const [endowment, isEndowmentValid, setEndowment] = useFormField<BN>(BN_ZERO);
-  const [isBusy, , setIsBusy] = useToggle();
-  const [outcomes, setOutcomes] = useState<ContractCallOutcome[]>([]);
-  const [params, setParams] = useState<any[]>(callMessage ? callMessage.def.args.map(({ type }): any => createValue({ type })) : []);
-  const [useRpc, setUseRpc] = useState(hasRpc && callMessage && !callMessage.def.mutates);
-  const useWeightHook = useWeight();
-  const { isValid: isWeightValid, weight } = useWeightHook;
-
-  useEffect((): void => {
-    if (callContract && callMessageIndex) {
-      const callMessage = callContract.getMessage(callMessageIndex);
-
-      setParams(callMessage ? callMessage.def.args.map(({ type }): any => createValue({ type })) : []);
-
-      if (hasRpc) {
-        if (!callMessage || callMessage.def.mutates) {
-          setUseRpc(false);
-        } else {
-          setUseRpc(true);
-        }
-      }
-    }
-  }, [callContract, callMessageIndex, hasRpc]);
-
-  useEffect((): void => {
-    setOutcomes([]);
-  }, [callContract]);
-
-  const _onChangeCallMessageIndexString = useCallback(
-    (callMessageIndexString: string): void => {
-      onChangeCallMessageIndex && onChangeCallMessageIndex(
-        parseInt(callMessageIndexString, 10) || 0
-      );
-    },
-    [onChangeCallMessageIndex]
-  );
-
-  const _constructTx = useCallback(
-    (): unknown[] => {
-      if (!accountId || !callMessage || !callMessage.fn || !callContract || !callContract.address) {
-        return [];
-      }
-
-      return [callContract.address.toString(), endowment, weight, callMessage.fn(...params)];
-    },
-    [accountId, callContract, callMessage, endowment, weight, params]
-  );
-
-  const _onSubmitRpc = useCallback(
-    (): void => {
-      if (!accountId || !callContract || !callMessage || !endowment || !weight) return;
-
-      !!callContract && callContract
-        .call('rpc', callMessage.def.name, endowment, weight, ...params)
-        .send(accountId)
-        .then(
-          (outcome: ContractCallOutcome): void => {
-            setOutcomes([outcome, ...outcomes]);
-          }
-        );
-    },
-    [accountId, callContract, callMessage, endowment, weight, outcomes, params]
-  );
-
-  const _onClearOutcomes = useCallback(
-    () => setOutcomes([]),
-    []
-  );
-
-  const _onClearOutcome = useCallback(
-    (outcomeIndex: number) => () => setOutcomes(outcomes.slice(0, outcomeIndex).concat(outcomes.slice(outcomeIndex + 1))),
-    [outcomes]
-  );
-
-  const isValid = useMemo(
-    (): boolean => !!accountId && !!callContract && !!callContract.address && !!callContract.abi && isWeightValid && isEndowmentValid,
-    [accountId, callContract, isEndowmentValid, isWeightValid]
-  );
-
-  if (isNull(callContract) || isNull(callMessageIndex) || !callMessage) {
-    return null;
-  }
-
-  return (
-    <Modal
-      className={[className || '', 'app--contracts-Modal'].join(' ')}
-      header={t<string>('Call a contract')}
-      onClose={onClose}
-      open={isOpen}
-    >
-      <Modal.Content>
-        {callContract && (
-          <div className='contracts--CallControls'>
-            <InputAddress
-              defaultValue={accountId}
-              help={t<string>('Specify the user account to use for this contract call. And fees will be deducted from this account.')}
-              isDisabled={isBusy}
-              label={t<string>('call from account')}
-              onChange={setAccountId}
-              type='account'
-              value={accountId}
-            />
-            <InputAddress
-              help={t<string>('A deployed contract that has either been deployed or attached. The address and ABI are used to construct the parameters.')}
-              isDisabled={isBusy}
-              label={t<string>('contract to use')}
-              onChange={onChangeCallContractAddress}
-              type='contract'
-              value={callContract.address.toString()}
-            />
-            {callMessageIndex !== null && (
-              <>
-                <Dropdown
-                  defaultValue={`${callMessage.index}`}
-                  help={t<string>('The message to send to this contract. Parameters are adjusted based on the ABI provided.')}
-                  isDisabled={isBusy}
-                  isError={callMessage === null}
-                  label={t<string>('message to send')}
-                  onChange={_onChangeCallMessageIndexString}
-                  options={getCallMessageOptions(callContract)}
-                  value={`${callMessage.index}`}
-                />
-                <Params
-                  isDisabled={isBusy}
-                  onChange={setParams}
-                  params={
-                    callMessage
-                      ? callMessage.def.args
-                      : undefined
-                  }
-                />
-              </>
-            )}
-            <InputBalance
-              help={t<string>('The allotted value for this contract, i.e. the amount transferred to the contract as part of this call.')}
-              isDisabled={isBusy}
-              isError={!isEndowmentValid}
-              isZeroable
-              label={t<string>('value')}
-              onChange={setEndowment}
-              value={endowment}
-            />
-            <InputMegaGas
-              help={t<string>('The maximum amount of gas to use for this contract call. If the call requires more, it will fail.')}
-              label={t<string>('maximum gas allowed')}
-              {...useWeightHook}
-            />
-          </div>
-        )}
-        {hasRpc && (
-          <Toggle
-            className='rpc-toggle'
-            label={
-              useRpc
-                ? t<string>('send as RPC call')
-                : t<string>('send as transaction')
-            }
-            onChange={setUseRpc}
-            value={useRpc || false}
-          />
-        )}
-        <Button.Group>
-          <ButtonCancel onClick={onClose} />
-          {useRpc
-            ? (
-              <Button
-                icon='sign-in-alt'
-                isDisabled={!isValid}
-                label={t<string>('Call')}
-                onClick={_onSubmitRpc}
-              />
-            )
-            : (
-              <TxButton
-                accountId={accountId}
-                icon='sign-in-alt'
-                isDisabled={!isValid}
-                label={t('Call')}
-                onClick={(): void => setIsBusy(true)}
-                onFailed={(): void => setIsBusy(false)}
-                onSuccess={(): void => setIsBusy(false)}
-                params={_constructTx}
-                tx='contracts.call'
-                withSpinner
-              />
-            )
-          }
-        </Button.Group>
-        {outcomes.length > 0 && (
-          <>
-            <h3>
-              {t<string>('Call results')}
-              <IconLink
-                className='clear-all'
-                icon='times'
-                label={t<string>('Clear all')}
-                onClick={_onClearOutcomes}
-              />
-            </h3>
-            <div>
-              {outcomes.map((outcome, index): React.ReactNode => (
-                <Outcome
-                  key={`outcome-${index}`}
-                  onClear={_onClearOutcome(index)}
-                  outcome={outcome}
-                />
-              ))}
-            </div>
-          </>
-        )}
-      </Modal.Content>
-    </Modal>
-  );
-}
-
-export default React.memo(styled(Call)`
-  .rpc-toggle {
-    margin-top: 1rem;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .clear-all {
-    float: right;
-  }
-`);

pioneer/packages/page-contracts/src/Contracts/Contract.tsx

@@ -1,110 +0,0 @@
-// 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 { ActionStatus } from '@polkadot/react-components/Status/types';
-
-import React, { useCallback } from 'react';
-import styled from 'styled-components';
-import keyring from '@polkadot/ui-keyring';
-import { PromiseContract as ApiContract } from '@polkadot/api-contract';
-import { AddressRow, Button, Card, Expander, Forget } from '@polkadot/react-components';
-import { useToggle } from '@polkadot/react-hooks';
-
-import Messages from '../shared/Messages';
-import { useTranslation } from '../translate';
-
-interface Props {
-  className?: string;
-  contract: ApiContract;
-  onCall: (_?: number) => () => void;
-}
-
-function Contract ({ className, contract: { abi, address }, onCall }: Props): React.ReactElement<Props> | null {
-  const { t } = useTranslation();
-  const [isForgetOpen, toggleIsForgetOpen] = useToggle();
-
-  const _onForget = useCallback(
-    (): void => {
-      if (!address) {
-        return;
-      }
-
-      const status: Partial<ActionStatus> = {
-        account: address,
-        action: 'forget'
-      };
-
-      try {
-        keyring.forgetContract(address.toString());
-        status.status = 'success';
-        status.message = t<string>('address forgotten');
-      } catch (error) {
-        status.status = 'error';
-        status.message = (error as Error).message;
-      }
-
-      toggleIsForgetOpen();
-    },
-    [address, t, toggleIsForgetOpen]
-  );
-
-  if (!address || !abi) {
-    return null;
-  }
-
-  return (
-    <Card className={className}>
-      {isForgetOpen && (
-        <Forget
-          address={address.toString()}
-          key='modal-forget-contract'
-          mode='contract'
-          onClose={toggleIsForgetOpen}
-          onForget={_onForget}
-        />
-      )}
-      <AddressRow
-        buttons={
-          <div className='contracts--Contract-buttons'>
-            <Button
-              icon='trash'
-              onClick={toggleIsForgetOpen}
-              tooltip={t<string>('Forget this contract')}
-            />
-            <Button
-              icon='play'
-              label={t<string>('execute')}
-              onClick={onCall()}
-              tooltip={t<string>('Call a method on this contract')}
-            />
-          </div>
-        }
-        isContract
-        isEditableName
-        isEditableTags
-        type='contract'
-        value={address}
-        withBalance={false}
-        withNonce={false}
-        withTags
-      >
-        <Expander summary={t<string>('Messages')}>
-          <Messages
-            address={address.toString()}
-            contractAbi={abi}
-            isRemovable={false}
-            onSelect={onCall}
-          />
-        </Expander>
-      </AddressRow>
-    </Card>
-  );
-}
-
-export default React.memo(
-  styled(Contract)`
-    min-width: 100%;
-    max-width: 100%;
-  `
-);

pioneer/packages/page-contracts/src/Contracts/Outcome.tsx

@@ -1,103 +0,0 @@
-// 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 { ContractCallOutcome } from '@polkadot/api-contract/types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { AddressMini, Button, Output } from '@polkadot/react-components';
-
-import MessageSignature from '../shared/MessageSignature';
-
-interface Props {
-  className?: string;
-  onClear?: () => void;
-  outcome: ContractCallOutcome;
-}
-
-function Outcome ({ className = '', onClear, outcome: { isSuccess, message, origin, output, params, time } }: Props): React.ReactElement<Props> | null {
-  const dateTime = new Date(time);
-
-  return (
-    <div className={className}>
-      <div className='info'>
-        <AddressMini
-          className='origin'
-          isPadded={false}
-          value={origin}
-          withAddress={false}
-        />
-        <MessageSignature
-          message={message}
-          params={params}
-        />
-        <span className='date-time'>
-          {dateTime.toLocaleDateString()}
-          {' '}
-          {dateTime.toLocaleTimeString()}
-        </span>
-        <Button
-          className='icon-button clear-btn'
-          icon='times'
-          onClick={onClear}
-        />
-      </div>
-      <Output
-        className='output'
-        isError={!isSuccess}
-        value={(output || '()').toString()}
-        withCopy
-        withLabel={false}
-      />
-    </div>
-  );
-}
-
-export default React.memo(styled(Outcome)`
-  & {
-    .info {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      padding: 0.5rem;
-
-      & > *:not(:first-child) {
-        padding-left: 1.5rem !important;
-      }
-    }
-
-    .clear-btn {
-      opacity: 0;
-    }
-
-    .date-time {
-      color: #aaa;
-      white-space: nowrap;
-    }
-
-    .origin {
-      padding-left: 0 !important;
-
-      * {
-        margin-left: 0 !important;
-      }
-    }
-
-    .output {
-      font-family: monospace;
-      margin-left: 3.5rem;
-
-      .ui--output {
-        border-color: #aaa;
-        margin: 0;
-      }
-    }
-
-    &:hover {
-      .clear-btn {
-        opacity: 1;
-      }
-    }
-  }
-`);

pioneer/packages/page-contracts/src/Contracts/ValidateAddr.tsx

@@ -1,58 +0,0 @@
-// 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 React, { useEffect, useState } from 'react';
-import { Option } from '@polkadot/types';
-import { useApi, useCall } from '@polkadot/react-hooks';
-import { InfoForInput } from '@polkadot/react-components';
-import keyring from '@polkadot/ui-keyring';
-
-import { useTranslation } from '../translate';
-
-interface Props {
-  address?: string | null;
-  onChange: (isValid: boolean) => void;
-}
-
-function ValidateAddr ({ address, onChange }: Props): React.ReactElement<Props> | null {
-  const { t } = useTranslation();
-  const { api } = useApi();
-  const contractInfo = useCall<Option<ContractInfo>>(api.query.contracts.contractInfoOf, [address]);
-  const [isAddress, setIsAddress] = useState(false);
-  const [isStored, setIsStored] = useState(false);
-
-  useEffect((): void => {
-    try {
-      keyring.decodeAddress(address || '');
-      setIsAddress(true);
-    } catch (error) {
-      setIsAddress(false);
-    }
-  }, [address]);
-
-  useEffect((): void => {
-    setIsStored(!!contractInfo?.isSome);
-  }, [contractInfo?.isSome]);
-
-  useEffect((): void => {
-    onChange(isAddress && isStored);
-  }, [isAddress, isStored, onChange]);
-
-  if (isStored || !isAddress) {
-    return null;
-  }
-
-  return (
-    <InfoForInput type='error'>
-      {isAddress
-        ? t<string>('Unable to find deployed contract code at the specified address')
-        : t<string>('The value is not in a valid address format')
-      }
-    </InfoForInput>
-  );
-}
-
-export default React.memo(ValidateAddr);

pioneer/packages/page-contracts/src/Contracts/index.tsx

@@ -1,103 +0,0 @@
-// 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 { 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 { Button, CardGrid } from '@polkadot/react-components';
-import { useApi } from '@polkadot/react-hooks';
-
-import { useTranslation } from '../translate';
-import Add from './Add';
-import ContractCard from './Contract';
-import Call from './Call';
-import { getContractForAddress } from './util';
-
-function filterContracts (api: ApiPromise, { accounts, contracts: keyringContracts }: Props): ApiContract[] {
-  return accounts && keyringContracts && keyringContracts
-    .map((address): ApiContract | null => getContractForAddress(api, address.toString()))
-    .filter((contract: ApiContract | null): boolean => !!contract) as ApiContract[];
-}
-
-function Contracts (props: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const { api } = useApi();
-  const { accounts, contracts: keyringContracts, hasCode, onShowDeploy } = props;
-  const [contracts, setContracts] = useState<ApiContract[]>(filterContracts(api, props));
-  const [callContractIndex, setCallContractIndex] = useState<number>(0);
-  const [callMessageIndex, setCallMessageIndex] = useState<number>(0);
-  const [isCallOpen, setIsCallOpen] = useState(false);
-
-  useEffect((): void => {
-    setContracts(filterContracts(api, props));
-  }, [accounts, api, keyringContracts, props]);
-
-  const callContract = contracts[callContractIndex] || null;
-
-  const _toggleCall = (): void => setIsCallOpen(!isCallOpen);
-
-  const _onChangeCallContractAddress = (newCallContractAddress: StringOrNull): void => {
-    const index = contracts.findIndex(({ address }: ApiContract): boolean => newCallContractAddress === address.toString());
-
-    if (index > -1) {
-      index !== callContractIndex && setCallMessageIndex(0);
-      setCallContractIndex(index);
-    }
-  };
-
-  const _onChangeCallMessageIndex = (callMessageIndex: number): void => {
-    !!callContract && setCallMessageIndex(callMessageIndex);
-  };
-
-  const _onCall = (callContractIndex: number): (_?: number) => () => void => {
-    return function (callMessageIndex?: number): () => void {
-      return function (): void {
-        setCallContractIndex(callContractIndex);
-        setCallMessageIndex(callMessageIndex || 0);
-        setIsCallOpen(true);
-      };
-    };
-  };
-
-  return (
-    <>
-      <CardGrid
-        buttons={
-          <Button.Group isCentered>
-            {hasCode && (
-              <Button
-                icon='upload'
-                label={t('Deploy a code hash')}
-                onClick={onShowDeploy()}
-              />
-            )}
-            <Add />
-          </Button.Group>
-        }
-        emptyText={t<string>('No contracts available')}
-      >
-        {contracts.map((contract: ApiContract, index): React.ReactNode => (
-          <ContractCard
-            contract={contract}
-            key={contract.address.toString()}
-            onCall={_onCall(index)}
-          />
-        ))}
-      </CardGrid>
-      <Call
-        callContract={callContract}
-        callMessageIndex={callMessageIndex}
-        isOpen={isCallOpen}
-        onChangeCallContractAddress={_onChangeCallContractAddress}
-        onChangeCallMessageIndex={_onChangeCallMessageIndex}
-        onClose={_toggleCall}
-      />
-    </>
-  );
-}
-
-export default React.memo(Contracts);

pioneer/packages/page-contracts/src/Contracts/util.tsx

@@ -1,51 +0,0 @@
-// 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 { ContractABIFn, ContractABIMessage } from '@polkadot/api-contract/types';
-import { StringOrNull } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { ApiPromise } from '@polkadot/api';
-import { PromiseContract as Contract } from '@polkadot/api-contract';
-import { getContractAbi } from '@polkadot/react-components/util';
-
-import MessageSignature from '../shared/MessageSignature';
-
-export function findCallMethod (callContract: Contract | null, callMethodIndex = 0): ContractABIMessage | null {
-  const message = callContract && callContract.abi.abi.contract.messages[callMethodIndex];
-
-  return message || null;
-}
-
-export function getContractMethodFn (callContract: Contract | null, callMethodIndex: number | null): ContractABIFn | null {
-  const fn = callContract && callContract.abi && callMethodIndex !== null && callContract.abi.messages[callMethodIndex];
-
-  return fn || null;
-}
-
-export function getContractForAddress (api: ApiPromise, address: StringOrNull): Contract | null {
-  if (!address) {
-    return null;
-  } else {
-    const abi = getContractAbi(address);
-
-    return abi
-      ? new Contract(api, abi, address)
-      : null;
-  }
-}
-
-export function getCallMessageOptions (callContract: Contract | null): any[] {
-  return callContract
-    ? callContract.messages.map(({ def: message, def: { name }, index }): { key: string; text: React.ReactNode; value: string } => {
-      return {
-        key: name,
-        text: (
-          <MessageSignature message={message} />
-        ),
-        value: `${index}`
-      };
-    })
-    : [];
-}

pioneer/packages/page-contracts/src/Deploy.tsx

@@ -1,250 +0,0 @@
-// 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 { StringOrNull, VoidFn } from '@polkadot/react-components/types';
-import { AccountId } from '@polkadot/types/interfaces';
-import { CodecArg } from '@polkadot/types/types';
-import { CodeStored } from './types';
-
-import BN from 'bn.js';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { SubmittableResult } from '@polkadot/api';
-import { Dropdown, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
-import { useFormField, useNonEmptyString, useNonZeroBn, useApi } from '@polkadot/react-hooks';
-import keyring from '@polkadot/ui-keyring';
-
-import { ABI, InputMegaGas, InputName, MessageSignature, Params } from './shared';
-import store from './store';
-import { useTranslation } from './translate';
-import useAbi from './useAbi';
-import useWeight from './useWeight';
-import { ENDOWMENT } from './constants';
-
-type CodeOptions = { text: string; value: string }[];
-type ConstructOptions = { key: string; text: React.ReactNode; value: string }[];
-
-interface Props {
-  basePath: string;
-  allCodes: CodeStored[];
-  codeHash: string;
-  constructorIndex?: number;
-  isOpen?: boolean;
-  onClose: VoidFn;
-  setCodeHash: React.Dispatch<string>;
-  setConstructorIndex: React.Dispatch<number>;
-}
-
-function defaultContractName (name: string) {
-  return `${name} (instance)`;
-}
-
-function Deploy ({ allCodes, basePath, codeHash, constructorIndex = 0, isOpen, onClose, setCodeHash, setConstructorIndex }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const { api } = useApi();
-  const history = useHistory();
-  const useWeightHook = useWeight();
-  const { isValid: isWeightValid, weight } = useWeightHook;
-
-  const code = useMemo(
-    (): CodeStored => store.getCode(codeHash),
-    [codeHash]
-  );
-  const [accountId, isAccountIdValid, setAccountId] = useFormField<StringOrNull>(null);
-  const [endowment, isEndowmentValid, setEndowment] = useNonZeroBn(new BN(ENDOWMENT));
-  const [name, isNameValid, setName] = useNonEmptyString(t(defaultContractName(code.json.name)));
-  const { abi, contractAbi, errorText, isAbiError, isAbiSupplied, isAbiValid, onChangeAbi, onRemoveAbi } = useAbi([code.json.abi || null, code.contractAbi || null], codeHash, true);
-
-  const isValid = useMemo(
-    (): boolean => isNameValid && isEndowmentValid && isWeightValid && isAccountIdValid,
-    [isAccountIdValid, isEndowmentValid, isNameValid, isWeightValid]
-  );
-  const codeOptions = useMemo(
-    (): CodeOptions => allCodes.map(({ json: { codeHash, name } }): { text: string; value: string } => ({
-      text: `${name} (${codeHash})`,
-      value: codeHash
-    })),
-    [allCodes]
-  );
-
-  const constructOptions = useMemo(
-    (): ConstructOptions => {
-      if (!contractAbi) {
-        return [];
-      }
-
-      return contractAbi.abi.contract.constructors.map((message, index) => ({
-        key: `${index}`,
-        text: (
-          <MessageSignature
-            asConstructor
-            message={message}
-          />
-        ),
-        value: `${index}`
-      }));
-    },
-    [contractAbi]
-  );
-
-  const [params, setParams] = useState<unknown[]>(contractAbi && constructorIndex >= 0 ? contractAbi.abi.contract.constructors[constructorIndex].args : []);
-
-  useEffect(
-    () => setParams(contractAbi ? contractAbi.abi.contract.constructors[constructorIndex].args : []),
-    [constructorIndex, contractAbi]
-  );
-
-  useEffect(
-    () => setName(t(defaultContractName(code.json.name))),
-    [code, setName, t]
-  );
-
-  const _constructCall = useCallback(
-    (): any[] => {
-      if (!contractAbi || constructorIndex < 0) {
-        return [];
-      }
-
-      return [endowment, weight, codeHash, contractAbi.constructors[constructorIndex](...(params as CodecArg[]))];
-    },
-    [codeHash, constructorIndex, contractAbi, endowment, params, weight]
-  );
-
-  const _onSuccess = useCallback(
-    (result: SubmittableResult): void => {
-      const section = api.tx.contracts ? 'contracts' : 'contract';
-      const records = result.filterRecords(section, 'Instantiated');
-
-      if (records.length) {
-        // find the last EventRecord (in the case of multiple contracts deployed - we should really be
-        // more clever here to find the exact contract deployed, this works for eg. Delegator)
-        const address = records[records.length - 1].event.data[1] as unknown as AccountId;
-
-        keyring.saveContract(address.toString(), {
-          contract: {
-            abi,
-            genesisHash: api.genesisHash.toHex()
-          },
-          name,
-          tags: []
-        });
-
-        history.push(basePath);
-
-        onClose && onClose();
-      }
-    },
-    [abi, api, basePath, history, name, onClose]
-  );
-
-  return (
-    <Modal
-      header={t('Add an existing code hash')}
-      onClose={onClose}
-      open={isOpen}
-    >
-      <Modal.Content>
-        <InputAddress
-          help={t('Specify the user account to use for this deployment. Any fees will be deducted from this account.')}
-          isInput={false}
-          label={t('deployment account')}
-          onChange={setAccountId}
-          type='account'
-          value={accountId}
-        />
-        <Dropdown
-          defaultValue={
-            codeOptions.length
-              ? codeOptions[codeOptions.length - 1].value
-              : undefined
-          }
-          help={t('The contract WASM previously deployed. Internally this is identified by the hash of the code, as either created or attached.')}
-          label={t('code for this contract')}
-          onChange={setCodeHash}
-          options={codeOptions}
-          value={codeHash}
-        />
-        <InputName
-          isContract
-          isError={!isNameValid}
-          onChange={setName}
-          value={name || ''}
-        />
-        {
-          isAbiSupplied
-            ? null
-            : (
-              <ABI
-                contractAbi={contractAbi}
-                errorText={errorText}
-                isError={isAbiError}
-                isSupplied={isAbiSupplied}
-                isValid={isAbiValid}
-                onChange={onChangeAbi}
-                onRemove={onRemoveAbi}
-                withLabel
-              />
-            )
-        }
-        {
-          contractAbi
-            ? (
-              <Dropdown
-                help={t<string>('The deployment constructor information for this contract, as provided by the ABI.')}
-                isDisabled={contractAbi.abi.contract.constructors.length <= 1}
-                label={t('deployment constructor')}
-                onChange={setConstructorIndex}
-                options={constructOptions}
-                value={`${constructorIndex}`}
-              />
-            )
-            : null
-        }
-        <Params
-          onChange={setParams}
-          params={
-            contractAbi && constructorIndex >= 0
-              ? contractAbi.abi.contract.constructors[constructorIndex].args
-              : []
-          }
-        />
-        <InputBalance
-          help={t<string>('The allotted endowment for this contract, i.e. the amount transferred to the contract upon instantiation.')}
-          isError={!isEndowmentValid}
-          label={t<string>('endowment')}
-          onChange={setEndowment}
-          value={endowment}
-        />
-        <InputMegaGas
-          help={t<string>('The maximum amount of gas that can be used by this deployment, if the code requires more, the deployment will fail.')}
-          label={t<string>('maximum gas allowed')}
-          {...useWeightHook}
-        />
-      </Modal.Content>
-      <Modal.Actions onCancel={onClose}>
-        <TxButton
-          accountId={accountId}
-          icon='upload'
-          isDisabled={!isValid}
-          label={t('Deploy')}
-          onClick={onClose}
-          onSuccess={_onSuccess}
-          params={_constructCall}
-          tx={
-            api.tx.contracts
-              ? (
-                !api.tx.contracts.instantiate
-                  ? 'contracts.create' // V2 (new)
-                  : 'contracts.instantiate' // V2 (old)
-              )
-              : 'contract.create' // V1
-          }
-          withSpinner
-        />
-      </Modal.Actions>
-    </Modal>
-  );
-}
-
-export default React.memo(Deploy);

pioneer/packages/page-contracts/src/RemoveABI.tsx

@@ -1,56 +0,0 @@
-// 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 { CodeStored } from '@polkadot/app-contracts/types';
-
-import React, { useCallback } from 'react';
-import { Button, Modal } from '@polkadot/react-components';
-
-import CodeRow from './shared/CodeRow';
-import { useTranslation } from './translate';
-
-interface Props {
-  code: CodeStored;
-  onClose: () => void;
-  onRemove: () => void;
-}
-
-function RemoveABI ({ code, onClose, onRemove }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-
-  const _onRemove = useCallback(
-    (): void => {
-      onClose && onClose();
-      onRemove();
-    },
-    [onClose, onRemove]
-  );
-
-  return (
-    <Modal
-      className='app--accounts-Modal'
-      header={t<string>('Confirm ABI removal')}
-      onClose={onClose}
-    >
-      <Modal.Content>
-        <CodeRow
-          code={code}
-          isInline
-        >
-          <p>{t<string>('You are about to remove this code\'s ABI. Once completed, should you need to access it again, you will have to manually re-upload it.')}</p>
-          <p>{t<string>('This operation does not impact the associated on-chain code or any of its contracts.')}</p>
-        </CodeRow>
-      </Modal.Content>
-      <Modal.Actions onCancel={onClose}>
-        <Button
-          icon='trash'
-          label={t<string>('Remove')}
-          onClick={_onRemove}
-        />
-      </Modal.Actions>
-    </Modal>
-  );
-}
-
-export default React.memo(RemoveABI);

pioneer/packages/page-contracts/src/constants.ts

@@ -1,10 +0,0 @@
-// 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 const ENDOWMENT = 1000;
-export const GAS_LIMIT = '100000000000';
-export const CONTRACT_NULL = {
-  abi: null,
-  address: null
-};

pioneer/packages/page-contracts/src/index.tsx

@@ -1,128 +0,0 @@
-// 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 { AppProps as Props } from '@polkadot/react-components/types';
-import { TabItem } from '@polkadot/react-components/Tabs/types';
-import { ComponentProps } from './types';
-
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Route, Switch } from 'react-router';
-import { HelpOverlay, Tabs } from '@polkadot/react-components';
-import { useAccounts, useContracts, useToggle } from '@polkadot/react-hooks';
-
-import introMd from './md/intro.md';
-import store from './store';
-import Contracts from './Contracts';
-import Codes from './Codes';
-import Deploy from './Deploy';
-import { useTranslation } from './translate';
-
-function ContractsApp ({ basePath, onStatusChange }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const { allAccounts } = useAccounts();
-  const { allContracts } = useContracts();
-  const [codeHash, setCodeHash] = useState<string | undefined>();
-  const [constructorIndex, setConstructorIndex] = useState(0);
-  const [isDeployOpen, toggleIsDeployOpen, setIsDeployOpen] = useToggle();
-  const [updated, setUpdated] = useState(0);
-  const [allCodes, setAllCodes] = useState(store.getAllCode());
-
-  const _triggerUpdate = useCallback(
-    (): void => {
-      setUpdated(Date.now());
-      setAllCodes(store.getAllCode());
-    },
-    []
-  );
-
-  const _onShowDeploy = useCallback(
-    (codeHash?: string, constructorIndex = 0): () => void =>
-      (): void => {
-        setCodeHash(codeHash || (allCodes && allCodes[0] ? allCodes[0].json.codeHash : undefined));
-        setConstructorIndex(constructorIndex);
-        toggleIsDeployOpen();
-      },
-    [allCodes, toggleIsDeployOpen]
-  );
-
-  const _onCloseDeploy = useCallback(
-    () => setIsDeployOpen(false),
-    [setIsDeployOpen]
-  );
-
-  const componentProps = useMemo(
-    (): ComponentProps => ({
-      accounts: allAccounts,
-      basePath,
-      contracts: allContracts,
-      hasCode: store.hasCode,
-      onShowDeploy: _onShowDeploy,
-      onStatusChange,
-      updated
-    }),
-    [allAccounts, allContracts, basePath, _onShowDeploy, onStatusChange, updated]
-  );
-
-  useEffect(
-    (): void => {
-      store.on('new-code', _triggerUpdate);
-      store.on('removed-code', _triggerUpdate);
-
-      store.loadAll()
-        .then((): void => setAllCodes(store.getAllCode()))
-        .catch((): void => {
-          // noop, handled internally
-        });
-    },
-    [_triggerUpdate]
-  );
-
-  const hidden: string[] = [];
-
-  return (
-    <main className='contracts--App'>
-      <HelpOverlay md={introMd as string} />
-      <header>
-        <Tabs
-          basePath={basePath}
-          hidden={hidden}
-          items={[
-            {
-              name: 'code',
-              text: 'Code'
-            },
-            {
-              isRoot: true,
-              name: 'contracts',
-              text: 'Contracts'
-            }
-          ].map((tab): TabItem => ({ ...tab, text: t(tab.text) }))
-          }
-        />
-      </header>
-      <Switch>
-        <Route path={`${basePath}/code`}>
-          <Codes {...componentProps} />
-        </Route>
-        <Route exact>
-          <Contracts {...componentProps} />
-        </Route>
-      </Switch>
-      {codeHash && (
-        <Deploy
-          allCodes={allCodes}
-          basePath={basePath}
-          codeHash={codeHash}
-          constructorIndex={constructorIndex}
-          isOpen={isDeployOpen}
-          onClose={_onCloseDeploy}
-          setCodeHash={setCodeHash}
-          setConstructorIndex={setConstructorIndex}
-        />
-      )}
-    </main>
-  );
-}
-
-export default React.memo(ContractsApp);

pioneer/packages/page-contracts/src/md/intro.md

@@ -1,17 +0,0 @@
-# contracts
-
-This contract management interface allows you to deploy WASM code for contracts, deploy contracts based on on-chain code and allows you to interact with contracts by sending messages.
-
-## warning
-
-Please be aware that this interface is very new and has not been thoroughly tested against all kinds of combinations of inputs - there are no doubt bugs lurking inside these sections. Additionally, the substrate contracts ABI is a very recent addition, and while stabilizing there may be changes and or-breakages while using this UI to interact.
-
-With all that said - if you do find issues, please log them.
-
-## basic operations
-
-The interface has 3 main areas -
-
-- **Code** This allows you to deploy WASM code on-chain or attach on-chain code into your local registry. Each code blob is identified by a unique hash, when deploying this will be saved, when attaching you would need to know the unique hash. From these bundles you can then move to the next step,
-- **Instance** This allows you to create contract instances using on-chain WASM code. Select the code to use, attach the ABI, specify the contract values and the contract can be deployed. As with the Code section, you can also attach on-chain instances when you know the address.
-- **Call** This allows you to send messages to contracts, via the address and attached ABIs.

pioneer/packages/page-contracts/src/shared/ABI.tsx

@@ -1,105 +0,0 @@
-// 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 React from 'react';
-import styled from 'styled-components';
-import { Abi } from '@polkadot/api-contract';
-import { InputFile, Labelled } from '@polkadot/react-components';
-
-import Messages from './Messages';
-import { useTranslation } from '../translate';
-
-interface Props {
-  className?: string;
-  contractAbi?: Abi | null;
-  errorText?: string | null;
-  isContract?: boolean;
-  isError?: boolean;
-  isDisabled?: boolean;
-  isRequired?: boolean;
-  isValid?: boolean;
-  isSupplied?: boolean;
-  label?: React.ReactNode;
-  onChange: (u8a: Uint8Array) => void;
-  onRemove?: () => void;
-  onRemoved?: () => void;
-  onSelect?: () => void;
-  onSelectConstructor?: (constructorIndex?: number) => void;
-  withLabel?: boolean;
-}
-
-function renderMessages ({ contractAbi, isDisabled, onRemove, onSelectConstructor, withLabel }: Props): React.ReactNode {
-  return (
-    <Messages
-      contractAbi={contractAbi}
-      isLabelled={withLabel}
-      isRemovable={!isDisabled}
-      onRemove={onRemove}
-      onSelectConstructor={onSelectConstructor}
-      withConstructors
-    />
-  );
-}
-
-function ABI (props: Props): React.ReactElement<Props> {
-  const { className, contractAbi, errorText, isContract = false, isDisabled, isError, isSupplied, isValid, onChange, withLabel } = props;
-  const { t } = useTranslation();
-
-  const help = isContract
-    ? t('The ABI for the WASM code. Since we will be making a call into the code, the ABI is required and stored for future operations such as sending messages.')
-    : t('The ABI for the WASM code. In this step it is optional, but setting it here simplifies the setup of contract instances.');
-  const label = isContract
-    ? 'contract ABI'
-    : 'contract ABI (optional)';
-
-  return (
-    <div className={className}>
-      {
-        (contractAbi && isValid)
-          ? (
-            withLabel
-              ? (
-                <Labelled
-                  help={help}
-                  label={label}
-                >
-                  {renderMessages(props)}
-                </Labelled>
-              )
-              : renderMessages(props)
-          )
-          : (
-            <InputFile
-              help={help}
-              isDisabled={isDisabled}
-              isError={isError}
-              label={label}
-              onChange={onChange}
-              placeholder={
-                isSupplied && !isValid
-                  ? (
-                    <>
-                      {t<string>('invalid ABI file selected')}
-                      {!!errorText && (
-                        <>
-                          {' — '}
-                          {t<string>(errorText)}
-                        </>
-                      )}
-                    </>
-                  )
-                  : t<string>('click to select or drag and drop a JSON ABI file')
-              }
-            />
-          )
-      }
-    </div>
-  );
-}
-
-export default React.memo(
-  styled(ABI)`
-    min-height: 4rem;
-  `
-);

pioneer/packages/page-contracts/src/shared/CodeRow.tsx

@@ -1,110 +0,0 @@
-// Copyright 2017-2020 @polkadot/react-components 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 { CodeStored } from '@polkadot/app-contracts/types';
-
-import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { createType } from '@polkadot/types';
-import { registry } from '@polkadot/react-api';
-import { toShortAddress } from '@polkadot/react-components/util';
-import Row from '@polkadot/react-components/Row';
-import { CopyButton, Icon } from '@polkadot/react-components';
-
-import contracts from '../store';
-
-interface Props {
-  buttons?: React.ReactNode;
-  children?: React.ReactNode;
-  className?: string;
-  code: CodeStored;
-  isInline?: boolean;
-  withTags?: boolean;
-}
-
-const DEFAULT_HASH = '0x';
-const DEFAULT_NAME = '<unknown>';
-
-function CodeRow ({ buttons, children, className, code: { json }, isInline, withTags }: Props): React.ReactElement<Props> {
-  const [name, setName] = useState(json.name || DEFAULT_NAME);
-  const [tags, setTags] = useState(json.tags || []);
-  const [codeHash, setCodeHash] = useState(json.codeHash || DEFAULT_HASH);
-
-  useEffect((): void => {
-    setName(json.name || DEFAULT_NAME);
-    setTags(json.tags || []);
-    setCodeHash(json.codeHash || DEFAULT_HASH);
-  }, [json]);
-
-  const _onSaveName = useCallback(
-    (): void => {
-      const trimmedName = name.trim();
-
-      if (trimmedName && codeHash) {
-        contracts.saveCode(createType(registry, 'Hash', codeHash), { name })
-          .catch((e): void => console.error(e));
-      }
-    },
-    [codeHash, name]
-  );
-
-  const _onSaveTags = useCallback(
-    (): void => {
-      codeHash && contracts
-        .saveCode(createType(registry, 'Hash', codeHash), { tags })
-        .catch((e): void => console.error(e));
-    },
-    [codeHash, tags]
-  );
-
-  return (
-    <Row
-      address={
-        <CopyButton
-          isAddress
-          value={codeHash}
-        >
-          <span>{toShortAddress(codeHash)}</span>
-        </CopyButton>
-      }
-      buttons={buttons}
-      className={className}
-      icon={
-        <div className='ui--CodeRow-icon'>
-          <Icon
-            icon='code'
-            size='large'
-          />
-        </div>
-      }
-      isEditableName
-      isEditableTags
-      isInline={isInline}
-      name={name}
-      onChangeName={setName}
-      onChangeTags={setTags}
-      onSaveName={_onSaveName}
-      onSaveTags={_onSaveTags}
-      tags={withTags && tags}
-    >
-      {children}
-    </Row>
-  );
-}
-
-export default React.memo(
-  styled(CodeRow)`
-    .ui--CodeRow-icon {
-      margin-right: 1em;
-      background: #eee;
-      color: #666;
-      width: 4rem;
-      height: 5rem;
-      padding: 0.5rem;
-      display: flex;
-      justify-content: flex-end;
-      align-items: flex-end;
-    }
-  `
-);

pioneer/packages/page-contracts/src/shared/InputMegaGas.tsx

@@ -1,84 +0,0 @@
-// 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 BN from 'bn.js';
-import React from 'react';
-import styled from 'styled-components';
-import { InputNumber, Progress } from '@polkadot/react-components';
-
-import { useTranslation } from '../translate';
-
-interface Props {
-  className?: string;
-  executionTime: number;
-  help: React.ReactNode;
-  isValid: boolean;
-  label: React.ReactNode;
-  megaGas: BN;
-  percentage: number;
-  setMegaGas: (value?: BN) => void;
-}
-
-function InputMegaGas ({ className, executionTime, help, isValid, label, megaGas, percentage, setMegaGas }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-
-  return (
-    <div className={className}>
-      <InputNumber
-        className='contracts--InputMegaGas-input'
-        help={help}
-        isError={!isValid}
-        label={label}
-        onChange={setMegaGas}
-        value={megaGas}
-      >
-        <div className='contracts--InputMegaGas-meter'>
-          {t<string>('{{executionTime}}s execution time', { replace: { executionTime: executionTime.toFixed(3) } })}
-          <aside>
-            {t<string>('{{percentage}}% of block time', { replace: { percentage } })}
-          </aside>
-          <Progress
-            className='contracts--InputMegaGas-progress'
-            total={100}
-            value={percentage}
-          />
-        </div>
-      </InputNumber>
-    </div>
-  );
-}
-
-export default React.memo(
-  styled(InputMegaGas)`
-    .contracts--InputMegaGas-input {
-
-      .ui.input {
-        display: flex;
-
-        input {
-          max-width: 15rem;
-        }
-
-        .contracts--InputMegaGas-meter {
-          flex: 1;
-          padding: 0.8rem 0.8rem 0;
-
-          aside {
-            float: right;
-          }
-
-          .contracts--InputMegaGas-progress {
-            margin-top: 0.4rem;
-            position: relative;
-            bottom: 0;
-            left: 0;
-            right: 0;
-          }
-        }
-
-      }
-    }
-
-  `
-);

pioneer/packages/page-contracts/src/shared/InputName.tsx

@@ -1,48 +0,0 @@
-// 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 { VoidFn } from '@polkadot/react-components/types';
-
-import React from 'react';
-import { Input } from '@polkadot/react-components';
-
-import { useTranslation } from '../translate';
-
-interface Props {
-  className?: string;
-  isBusy?: boolean;
-  isContract?: boolean;
-  isError?: boolean;
-  isDisabled?: boolean;
-  onChange: (_: string) => void;
-  onEnter?: VoidFn;
-  value?: string;
-}
-
-function InputName ({ className, isBusy, isContract, isError, onChange, onEnter, value = '' }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-
-  return (
-    <Input
-      className={className}
-      help={t<string>(
-        isContract
-          ? 'A name for the deployed contract to help users distinguish. Only used for display purposes.'
-          : 'A name for this WASM code to help users distinguish. Only used for display purposes.'
-      )}
-      isDisabled={isBusy}
-      isError={isError}
-      label={t<string>(
-        isContract
-          ? 'contract name'
-          : 'code bundle name'
-      )}
-      onChange={onChange}
-      onEnter={onEnter}
-      value={value}
-    />
-  );
-}
-
-export default React.memo(InputName);

pioneer/packages/page-contracts/src/shared/MessageSignature.tsx

@@ -1,108 +0,0 @@
-// Copyright 2017-2020 @polkadot/react-components 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 { ContractABIMessage } from '@polkadot/api-contract/types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Icon, Tooltip } from '@polkadot/react-components';
-import { displayType } from '@polkadot/types';
-
-import { useTranslation } from '../translate';
-
-const MAX_PARAM_LENGTH = 20;
-
-export interface Props {
-  asConstructor?: boolean;
-  className?: string;
-  message: ContractABIMessage;
-  params?: any[];
-  withTooltip?: boolean;
-}
-
-function truncate (param: string): string {
-  return param.length > MAX_PARAM_LENGTH
-    ? `${param.substring(0, MAX_PARAM_LENGTH / 2)}…${param.substring(param.length - MAX_PARAM_LENGTH / 2)}`
-    : param;
-}
-
-function MessageSignature ({ className, message: { args, mutates, name, returnType }, params = [], asConstructor = false, withTooltip = false }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-
-  return (
-    <div className={className}>
-      <span className='ui--MessageSignature-name'>
-        {name}
-      </span>
-      (
-      {args.map(({ name, type }, index): React.ReactNode => {
-        return (
-          <React.Fragment key={`${name}-args-${index}`}>
-            {name}:
-            {' '}
-            <span className='ui--MessageSignature-type'>
-              {params && params[index]
-                ? <b>{truncate((params as string[])[index].toString())}</b>
-                : displayType(type)
-              }
-            </span>
-            {index < args.length - 1 && ', '}
-          </React.Fragment>
-        );
-      })}
-      )
-      {(!asConstructor && returnType) && (
-        <>
-          :
-          {' '}
-          <span className='ui--MessageSignature-returnType'>
-            {displayType(returnType)}
-          </span>
-        </>
-      )}
-      {mutates && (
-        <>
-          <Icon
-            className='ui--MessageSignature-mutates'
-            icon='database'
-            tooltip={`mutates-${name}`}
-          />
-          {withTooltip && (
-            <Tooltip
-              text={t<string>('Mutates contract state')}
-              trigger={`mutates-${name}`}
-            />
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-export default React.memo(
-  styled(MessageSignature)`
-    font-family: monospace;
-    font-weight: normal;
-    flex-grow: 1;
-
-    .ui--MessageSignature-mutates {
-      color: #ff8600;
-      margin-left: 0.5rem;
-      opacity: 0.6;
-    }
-
-    .ui--MessageSignature-name {
-      color: #2f8ddb;
-      font-weight: bold;
-    }
-
-    .ui--MessageSignature-type {
-      color: #21a2b2;
-    }
-
-    .ui--MessageSignature-returnType {
-      color: #ff8600;
-    }
-  `
-);

pioneer/packages/page-contracts/src/shared/Messages.tsx

@@ -1,226 +0,0 @@
-// Copyright 2017-2020 @polkadot/react-components 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 { ContractABIMessage } from '@polkadot/api-contract/types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Abi } from '@polkadot/api-contract';
-import { classes } from '@polkadot/react-components/util';
-import { Button, Expander, IconLink } from '@polkadot/react-components';
-
-import MessageSignature from './MessageSignature';
-import { useTranslation } from '../translate';
-
-export interface Props {
-  address?: string;
-  className?: string;
-  contractAbi: Abi;
-  isLabelled?: boolean;
-  isRemovable: boolean;
-  onRemove?: () => void;
-  onSelect?: (messageIndex: number) => () => void;
-  onSelectConstructor?: (constructorIndex: number) => void;
-  withConstructors?: boolean;
-}
-
-const NOOP = (): void => undefined;
-
-function onSelect (props: Props, messageIndex: number): () => void {
-  return function (): void {
-    const { address: callAddress, contractAbi: { abi: { contract: { messages } } }, onSelect } = props;
-
-    if (!callAddress || !messages || !messages[messageIndex]) {
-      return;
-    }
-
-    onSelect && onSelect(messageIndex)();
-  };
-}
-
-function onSelectConstructor (props: Props, index: number): () => void {
-  return function (): void {
-    const { contractAbi: { abi: { contract: { constructors } } }, onSelectConstructor } = props;
-
-    if (!constructors || !constructors[index]) {
-      return;
-    }
-
-    onSelectConstructor && onSelectConstructor(index);
-  };
-}
-
-function renderItem (props: Props, message: ContractABIMessage, index: number, asConstructor: boolean, t: <T = string> (key: string) => T): React.ReactNode {
-  const { docs = [], name } = message;
-
-  return (
-    <div
-      className={classes('message', !onSelect && 'exempt-hover', asConstructor && 'constructor')}
-      key={name}
-    >
-      <div className='info'>
-        <MessageSignature
-          asConstructor={asConstructor}
-          message={message}
-          withTooltip
-        />
-        <Expander
-          className='docs'
-          summary={
-            docs && docs.length > 0
-              ? docs
-                .filter((line) => line !== '')
-                .map((line, index) => ((
-                  <React.Fragment key={`${name}-docs-${index}`}>
-                    <span>{line}</span>
-                    <br />
-                  </React.Fragment>
-                )))
-              : (
-                <i>{t<string>('No documentation provided')}</i>
-              )
-          }
-        />
-      </div>
-      {!asConstructor && props.onSelect && (
-        <div className='accessory'>
-          <Button
-            className='execute'
-            icon='play'
-            onClick={onSelect(props, index)}
-            tooltip={t<string>('Call this message')}
-          />
-        </div>
-      )}
-      {asConstructor && props.onSelectConstructor && (
-        <div className='accessory'>
-          <Button
-            className='execute'
-            icon='upload'
-            onClick={onSelectConstructor(props, index)}
-            tooltip={t<string>('Deploy with this constructor')}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function renderConstructor (props: Props, index: number, t: <T = string> (key: string) => T): React.ReactNode {
-  const { contractAbi: { abi: { contract: { constructors } } } } = props;
-
-  if (!constructors[index]) {
-    return null;
-  }
-
-  return renderItem(props, constructors[index], index, true, t);
-}
-
-function renderMessage (props: Props, index: number, t: <T = string> (key: string) => T): React.ReactNode {
-  const { contractAbi: { abi: { contract: { messages } } } } = props;
-
-  if (!messages[index]) {
-    return null;
-  }
-
-  return renderItem(props, messages[index], index, false, t);
-}
-
-function Messages (props: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const { className = '', contractAbi: { abi: { contract: { constructors, messages } } }, isLabelled, isRemovable, onRemove = NOOP, withConstructors } = props;
-
-  return (
-    <div className={classes(className, 'ui--Messages', isLabelled && 'labelled')}>
-      {withConstructors && constructors.map((_, index): React.ReactNode => renderConstructor(props, index, t))}
-      {messages.map((_, index): React.ReactNode => renderMessage(props, index, t))}
-      {isRemovable && (
-        <IconLink
-          className='remove-abi'
-          icon='remove'
-          label={t<string>('Remove ABI')}
-          onClick={onRemove}
-        />
-      )}
-    </div>
-  );
-}
-
-export default React.memo(styled(Messages)`
-  font-size: 0.9rem;
-  padding: 0;
-  margin: 0;
-
-  .remove-abi {
-    float: right;
-
-    &:hover, &:hover :not(i) {
-      text-decoration: underline;
-    }
-  }
-
-  &.labelled {
-    background: white;
-    box-sizing: border-box;
-    border: 1px solid rgba(34,36,38,.15);
-    border-radius: .28571429rem;
-    padding: 1rem 1rem 0.5rem;
-    width: 100%;
-  }
-
-  & .message {
-    width: calc(100% - 1rem);
-    background: #f8f8f8;
-    display: inline-flex;
-    margin-bottom: 0.5rem;
-    padding: 0.5rem;
-    border-radius: 0.7rem;
-    transition: all 0.2s;
-
-    &.constructor {
-      background: #e8f4ff;
-    }
-
-    &.disabled {
-      opacity: 1 !important;
-      background: #eee !important;
-      color: #555 !important;
-    }
-
-    .accessory {
-      width: 3rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .execute {
-        display: none;
-        background: transparent !important;
-        font-size: 1.5rem;
-        margin: 0;
-        padding: 0;
-      }
-    }
-
-    &:hover {
-      .accessory .execute {
-        display: block;
-        color: rgba(0, 0, 0, 0.2);
-
-        &:hover {
-          color: #2e86ab;
-        }
-      }
-    }
-
-    .info {
-      flex: 1 1;
-
-      .docs {
-        font-size: 0.8rem;
-        font-weight: normal;
-      }
-    }
-  }
-`);

pioneer/packages/page-contracts/src/shared/Params.tsx

@@ -1,50 +0,0 @@
-// 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 { ContractABIFnArg } from '@polkadot/api-contract/types';
-import { TypeDef } from '@polkadot/types/types';
-import { RawParams } from '@polkadot/react-params/types';
-
-import React, { useCallback, useEffect, useState } from 'react';
-import UIParams from '@polkadot/react-params';
-
-interface Props {
-  isDisabled?: boolean;
-  params?: ContractABIFnArg[];
-  onChange: (values: any[]) => void;
-  onEnter?: () => void;
-}
-
-interface ParamDef {
-  name: string;
-  type: TypeDef;
-}
-
-function Params ({ isDisabled, onChange, onEnter, params: propParams }: Props): React.ReactElement<Props> | null {
-  const [params, setParams] = useState<ParamDef[]>([]);
-
-  useEffect((): void => {
-    propParams && setParams(propParams);
-  }, [propParams]);
-
-  const _onChange = useCallback(
-    (values: RawParams) => onChange(values.map(({ value }) => value)),
-    [onChange]
-  );
-
-  if (!params.length) {
-    return null;
-  }
-
-  return (
-    <UIParams
-      isDisabled={isDisabled}
-      onChange={_onChange}
-      onEnter={onEnter}
-      params={params}
-    />
-  );
-}
-
-export default React.memo(Params);

pioneer/packages/page-contracts/src/shared/index.tsx

@@ -1,11 +0,0 @@
-// Copyright 2017-2020 @polkadot/react-components 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 { default as ABI } from './ABI';
-export { default as CodeRow } from './CodeRow';
-export { default as InputMegaGas } from './InputMegaGas';
-export { default as InputName } from './InputName';
-export { default as Messages } from './Messages';
-export { default as MessageSignature } from './MessageSignature';
-export { default as Params } from './Params';

pioneer/packages/page-contracts/src/store.ts

@@ -1,105 +0,0 @@
-// 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 { ContractABIPre } from '@polkadot/api-contract/types';
-import { Hash } from '@polkadot/types/interfaces';
-import { CodeJson, CodeStored } from './types';
-
-import EventEmitter from 'eventemitter3';
-import store from 'store';
-import { Abi } from '@polkadot/api-contract';
-import { api, registry } from '@polkadot/react-api';
-import { createType } from '@polkadot/types';
-
-const KEY_CODE = 'code:';
-
-class Store extends EventEmitter {
-  private allCode: Record<string, CodeStored> = {};
-
-  public get hasCode (): boolean {
-    return Object.keys(this.allCode).length !== 0;
-  }
-
-  public getAllCode (): CodeStored[] {
-    return Object.values(this.allCode);
-  }
-
-  public getCode (codeHash: string): CodeStored {
-    return this.allCode[codeHash];
-  }
-
-  // eslint-disable-next-line @typescript-eslint/require-await
-  public async saveCode (codeHash: string | Hash, partial: Partial<CodeJson>): Promise<void> {
-    const hex = (typeof codeHash === 'string' ? createType(registry, 'Hash', codeHash) : codeHash).toHex();
-
-    const existing = this.getCode(hex);
-
-    const json = {
-      ...(existing ? existing.json : {}),
-      ...partial,
-      codeHash: hex,
-      genesisHash: api.genesisHash.toHex()
-    };
-
-    store.set(`${KEY_CODE}${json.codeHash}`, json);
-
-    this.addCode(json as CodeJson);
-  }
-
-  public forgetCode (codeHash: string): void {
-    store.remove(`${KEY_CODE}${codeHash}`);
-
-    this.removeCode(codeHash);
-  }
-
-  public async loadAll (): Promise<void> {
-    try {
-      await api.isReady;
-
-      const genesisHash = api.genesisHash.toHex();
-
-      store.each((json: CodeJson, key: string): void => {
-        if (json && json.genesisHash !== genesisHash) {
-          return;
-        }
-
-        if (key.startsWith(KEY_CODE)) {
-          this.addCode(json);
-        }
-      });
-    } catch (error) {
-      console.error('Unable to load code', error);
-    }
-  }
-
-  private addCode (json: CodeJson): void {
-    try {
-      const abi = json.abi
-        ? JSON.parse(json.abi) as ContractABIPre
-        : null;
-
-      this.allCode[json.codeHash] = {
-        contractAbi: abi
-          ? new Abi(registry, abi)
-          : undefined,
-        json
-      };
-
-      this.emit('new-code');
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  private removeCode (codeHash: string): void {
-    try {
-      delete this.allCode[codeHash];
-      this.emit('removed-code');
-    } catch (error) {
-      console.error(error);
-    }
-  }
-}
-
-export default new Store();

pioneer/packages/page-contracts/src/translate.ts

@@ -1,11 +0,0 @@
-// 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 { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
-
-export function useTranslation (): UseTranslationResponse {
-  return useTranslationBase('app-contracts');
-}
-
-export default withTranslation(['app-contracts']);

pioneer/packages/page-contracts/src/types.ts

@@ -1,44 +0,0 @@
-// 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 BN from 'bn.js';
-import { Abi } from '@polkadot/api-contract';
-import { AppProps } from '@polkadot/react-components/types';
-
-export interface ComponentProps extends AppProps {
-  accounts: string[];
-  contracts: string[];
-  hasCode: boolean;
-  onShowDeploy: (codeHash?: string, constructorIndex?: number) => () => void;
-  updated: number;
-}
-
-export interface CodeJson {
-  abi?: string | null;
-  codeHash: string;
-  name: string;
-  genesisHash: string;
-  tags: string[];
-}
-
-export interface CodeStored {
-  json: CodeJson;
-  contractAbi?: Abi;
-}
-
-export interface ContractJsonOld {
-  genesisHash: string;
-  abi: string;
-  address: string;
-  name: string;
-}
-
-export interface UseWeight {
-  isValid: boolean;
-  weight: BN;
-  executionTime: number;
-  megaGas: BN;
-  percentage: number;
-  setMegaGas: React.Dispatch<BN | undefined>
-}

pioneer/packages/page-contracts/src/useAbi.ts

@@ -1,87 +0,0 @@
-// Copyright 2017-2020 @polkadot/react-hooks 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 { StringOrNull } from '@polkadot/react-components/types';
-
-import { useCallback, useEffect, useState } from 'react';
-import { Abi } from '@polkadot/api-contract';
-import { registry } from '@polkadot/react-api';
-import { u8aToString } from '@polkadot/util';
-
-import store from './store';
-import { useTranslation } from './translate';
-
-interface UseAbi {
-  abi: string | null;
-  contractAbi: Abi | null;
-  errorText: string | null;
-  isAbiError: boolean;
-  isAbiValid: boolean;
-  isAbiSupplied: boolean;
-  onChangeAbi: (u8a: Uint8Array) => void;
-  onRemoveAbi: () => void;
-}
-
-interface ContractABIOutdated {
-  deploy?: any;
-  messages?: any;
-}
-
-export default function useAbi (initialValue: [string | null, Abi | null] = [null, null], codeHash: StringOrNull = null, isRequired = false): UseAbi {
-  const { t } = useTranslation();
-  const [[abi, contractAbi, isAbiSupplied, isAbiValid], setAbi] = useState<[StringOrNull, Abi | null, boolean, boolean]>([initialValue[0], initialValue[1], !!initialValue[1], !isRequired || !!initialValue[1]]);
-  const [[isAbiError, errorText], setError] = useState<[boolean, string | null]>([false, null]);
-
-  useEffect(
-    (): void => {
-      if (!!initialValue[0] && abi !== initialValue[0]) {
-        setAbi([initialValue[0], initialValue[1], !!initialValue[1], !isRequired || !!initialValue[1]]);
-      }
-    },
-    [abi, initialValue, isRequired]
-  );
-
-  const onChangeAbi = useCallback(
-    (u8a: Uint8Array): void => {
-      const json = u8aToString(u8a);
-
-      try {
-        const abiOutdated = JSON.parse(json) as ContractABIOutdated;
-
-        if (abiOutdated.deploy || abiOutdated.messages) {
-          throw new Error(t('You are using an ABI with an outdated format. Please generate a new one.'));
-        }
-
-        setAbi([json, new Abi(registry, JSON.parse(json)), true, true]);
-        codeHash && store.saveCode(
-          codeHash,
-          { abi: json }
-        );
-      } catch (error) {
-        console.error(error);
-
-        setAbi([null, null, false, false]);
-        setError([true, error]);
-      }
-    },
-    [codeHash, t]
-  );
-
-  const onRemoveAbi = useCallback(
-    (): void => {
-      setAbi([null, null, false, false]);
-      setError([false, null]);
-
-      codeHash && store.saveCode(
-        codeHash,
-        { abi: null }
-      );
-    },
-    [codeHash]
-  );
-
-  return {
-    abi, contractAbi, errorText, isAbiError, isAbiSupplied, isAbiValid, onChangeAbi, onRemoveAbi
-  };
-}

pioneer/packages/page-contracts/src/useWeight.ts

@@ -1,36 +0,0 @@
-// Copyright 2017-2020 @polkadot/react-hooks 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 { UseWeight } from './types';
-
-import BN from 'bn.js';
-import { useMemo, useState } from 'react';
-import { useBlockTime } from '@polkadot/react-hooks';
-import { BN_ZERO } from '@polkadot/util';
-
-const BN_MILLION = new BN(1e6);
-
-export default function useWeight (initialValue: BN = BN_MILLION): UseWeight {
-  const [blockTime] = useBlockTime();
-  const [megaGas, setMegaGas] = useState<BN | undefined>(initialValue);
-  const [executionTime, isValid, percentage, weight] = useMemo(
-    (): [number, boolean, number, BN] => {
-      if (!megaGas) {
-        return [0, false, 0, BN_ZERO];
-      }
-
-      const weight = megaGas.mul(BN_MILLION);
-      const executionTime = megaGas.toNumber() / 1e6;
-      const percentage = Math.round((executionTime / (blockTime / 1000)) * 100);
-      const isValid = !megaGas.isZero() && percentage < 100;
-
-      return [executionTime, isValid, percentage, weight];
-    },
-    [blockTime, megaGas]
-  );
-
-  return {
-    executionTime, isValid, megaGas: megaGas || BN_ZERO, percentage, setMegaGas, weight
-  };
-}

pioneer/packages/page-council/LICENSE

@@ -1,201 +0,0 @@
-                              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.

pioneer/packages/page-council/README.md

@@ -1 +0,0 @@
-# @polkadot/app-council

pioneer/packages/page-council/package.json

@@ -1,18 +0,0 @@
-{
-  "name": "@polkadot/app-council",
-  "private": true,
-  "version": "0.51.1",
-  "description": "Council",
-  "main": "index.js",
-  "scripts": {},
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.10.5",
-    "@polkadot/react-components": "0.51.1",
-    "@polkadot/react-query": "0.51.1"
-  }
-}

pioneer/packages/page-council/src/Motions/Close.tsx

@@ -1,94 +0,0 @@
-// 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, InputAddress, Modal, ProposedAction, TxButton } from '@polkadot/react-components';
-import { useApi, useToggle, useWeight } from '@polkadot/react-hooks';
-
-import { useTranslation } from '../translate';
-
-interface Props {
-  hasFailed: boolean;
-  hash: Hash;
-  idNumber: ProposalIndex;
-  isDisabled: boolean;
-  members: string[];
-  proposal: Proposal;
-}
-
-function Close ({ hasFailed, hash, idNumber, isDisabled, members, proposal }: Props): React.ReactElement<Props> | null {
-  const { t } = useTranslation();
-  const { api } = useApi();
-  const [isOpen, toggleOpen] = useToggle();
-  const [accountId, setAccountId] = useState<string | null>(null);
-  const [proposalWeight, proposalLength] = useWeight(proposal);
-
-  // protect against older versions
-  if (!api.tx.council.close) {
-    return null;
-  }
-
-  return (
-    <>
-      {isOpen && (
-        <Modal
-          header={t<string>('Close proposal')}
-          size='large'
-        >
-          <Modal.Content>
-            <Modal.Columns>
-              <Modal.Column>
-                <ProposedAction
-                  idNumber={idNumber}
-                  proposal={proposal}
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The proposal that will be affected. Once closed for the current voting round, it would need to be re-submitted to council for a subsequent voting round.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-            <Modal.Columns>
-              <Modal.Column>
-                <InputAddress
-                  filter={members}
-                  help={t<string>('Select the account you wish close the proposal with.')}
-                  label={t<string>('sending account')}
-                  onChange={setAccountId}
-                  type='account'
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The council account that will apply the close for the current round.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-          </Modal.Content>
-          <Modal.Actions onCancel={toggleOpen}>
-            <TxButton
-              accountId={accountId}
-              onStart={toggleOpen}
-              params={
-                api.tx.council.close.meta.args.length === 4
-                  ? hasFailed
-                    ? [hash, idNumber, 0, 0]
-                    : [hash, idNumber, proposalWeight, proposalLength]
-                  : [hash, idNumber]
-              }
-              tx='council.close'
-            />
-          </Modal.Actions>
-        </Modal>
-      )}
-      <Button
-        icon='times'
-        isDisabled={isDisabled}
-        label={t<string>('Close')}
-        onClick={toggleOpen}
-      />
-    </>
-  );
-}
-
-export default React.memo(Close);

pioneer/packages/page-council/src/Motions/Motion.tsx

@@ -1,125 +0,0 @@
-// 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 { DeriveCollectiveProposal } from '@polkadot/api-derive/types';
-
-import React, { useEffect, useState } from 'react';
-import ProposalCell from '@polkadot/app-democracy/Overview/ProposalCell';
-import { Icon, LinkExternal } from '@polkadot/react-components';
-import { useAccounts, useVotingStatus } from '@polkadot/react-hooks';
-import { BlockToTime } from '@polkadot/react-query';
-import { formatNumber } from '@polkadot/util';
-
-import Close from './Close';
-import Voters from './Votes';
-import Voting from './Voting';
-
-interface Props {
-  className?: string;
-  isMember: boolean;
-  members: string[];
-  motion: DeriveCollectiveProposal;
-  prime: AccountId | null;
-}
-
-interface VoterState {
-  hasVoted: boolean;
-  hasVotedAye: boolean;
-}
-
-function Motion ({ className = '', isMember, members, motion: { hash, proposal, votes }, prime }: Props): React.ReactElement<Props> | null {
-  const { allAccounts } = useAccounts();
-  const { hasFailed, isCloseable, isVoteable, remainingBlocks } = useVotingStatus(votes, members.length, 'council');
-  const [{ hasVoted, hasVotedAye }, setIsVoter] = useState<VoterState>({ hasVoted: false, hasVotedAye: false });
-
-  useEffect((): void => {
-    if (votes) {
-      const hasVotedAye = allAccounts.some((address) => votes.ayes.some((accountId) => accountId.eq(address)));
-
-      setIsVoter({
-        hasVoted: hasVotedAye || allAccounts.some((address) => votes.nays.some((accountId) => accountId.eq(address))),
-        hasVotedAye
-      });
-    }
-  }, [allAccounts, votes]);
-
-  if (!votes) {
-    return null;
-  }
-
-  const { ayes, end, index, nays, threshold } = votes;
-
-  return (
-    <tr className={className}>
-      <td className='number'><h1>{formatNumber(index)}</h1></td>
-      <ProposalCell
-        imageHash={hash}
-        proposal={proposal}
-      />
-      <td className='number together'>
-        {formatNumber(threshold)}
-      </td>
-      <td className='number together'>
-        {remainingBlocks && end && (
-          <>
-            <BlockToTime blocks={remainingBlocks} />
-            #{formatNumber(end)}
-          </>
-        )}
-      </td>
-      <Voters
-        isAye
-        members={members}
-        threshold={threshold}
-        votes={ayes}
-      />
-      <Voters
-        members={members}
-        threshold={threshold}
-        votes={nays}
-      />
-      <td className='button'>
-        {isVoteable && !isCloseable && (
-          <Voting
-            hash={hash}
-            idNumber={index}
-            isDisabled={!isMember}
-            members={members}
-            prime={prime}
-            proposal={proposal}
-          />
-        )}
-        {isCloseable && (
-          <Close
-            hasFailed={hasFailed}
-            hash={hash}
-            idNumber={index}
-            isDisabled={!isMember}
-            members={members}
-            proposal={proposal}
-          />
-        )}
-      </td>
-      <td className='badge'>
-        {isMember && (
-          <Icon
-            color={hasVoted ? (hasVotedAye ? 'green' : 'red') : 'gray'}
-            icon='asterisk'
-          />
-        )}
-      </td>
-      <td className='mini'>
-        <LinkExternal
-          data={index}
-          hash={hash.toString()}
-          type='council'
-          withShort
-        />
-      </td>
-    </tr>
-  );
-}
-
-export default React.memo(Motion);

pioneer/packages/page-council/src/Motions/ProposeExternal.tsx

@@ -1,127 +0,0 @@
-// 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 { SubmittableExtrinsic } from '@polkadot/api/types';
-
-import React, { useCallback, useEffect, useState } from 'react';
-import { Button, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
-import { useApi, useToggle } from '@polkadot/react-hooks';
-import { isHex } from '@polkadot/util';
-
-import { useTranslation } from '../translate';
-import { getThreshold } from './thresholds';
-
-interface Props {
-  className?: string;
-  isMember: boolean;
-  members: string[];
-}
-
-interface HashState {
-  hash?: string;
-  isHashValid: boolean;
-}
-
-interface ProposalState {
-  proposal?: SubmittableExtrinsic<'promise'> | null;
-  proposalLength: number;
-}
-
-function ProposeExternal ({ className = '', isMember, members }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const { api } = useApi();
-  const [isVisible, toggleVisible] = useToggle();
-  const [accountId, setAcountId] = useState<string | null>(null);
-  const [{ proposal, proposalLength }, setProposal] = useState<ProposalState>({ proposalLength: 0 });
-  const [{ hash, isHashValid }, setHash] = useState<HashState>({ hash: '', isHashValid: false });
-  const threshold = Math.ceil((members.length || 0) * getThreshold(api));
-
-  const _onChangeHash = useCallback(
-    (hash?: string): void => setHash({ hash, isHashValid: isHex(hash, 256) }),
-    []
-  );
-
-  useEffect((): void => {
-    if (isHashValid && hash) {
-      const proposal = api.tx.democracy.externalProposeMajority(hash);
-
-      setProposal({
-        proposal,
-        proposalLength: proposal.encodedLength || 0
-      });
-    } else {
-      setProposal({
-        proposal: null,
-        proposalLength: 0
-      });
-    }
-  }, [api, hash, isHashValid]);
-
-  return (
-    <>
-      <Button
-        icon='plus'
-        isDisabled={!isMember}
-        label={t<string>('Propose external')}
-        onClick={toggleVisible}
-      />
-      {isVisible && (
-        <Modal
-          className={className}
-          header={t<string>('Propose external (majority)')}
-          size='large'
-        >
-          <Modal.Content>
-            <Modal.Columns>
-              <Modal.Column>
-                <InputAddress
-                  filter={members}
-                  help={t<string>('Select the account you wish to make the proposal with.')}
-                  label={t<string>('propose from account')}
-                  onChange={setAcountId}
-                  type='account'
-                  withLabel
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The council account for the proposal. The selection is filtered by the current members.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-            <Modal.Columns>
-              <Modal.Column>
-                <Input
-                  autoFocus
-                  help={t<string>('The preimage hash of the proposal')}
-                  label={t<string>('preimage hash')}
-                  onChange={_onChangeHash}
-                  value={hash}
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The hash of the proposal image, either already submitted or valid for the specific call.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-          </Modal.Content>
-          <Modal.Actions onCancel={toggleVisible}>
-            <TxButton
-              accountId={accountId}
-              icon='plus'
-              isDisabled={!threshold || !members.includes(accountId || '') || !proposal}
-              label={t<string>('Propose')}
-              onStart={toggleVisible}
-              params={
-                api.tx.council.propose.meta.args.length === 3
-                  ? [threshold, proposal, proposalLength]
-                  : [threshold, proposal]
-              }
-              tx='council.propose'
-            />
-          </Modal.Actions>
-        </Modal>
-      )}
-    </>
-  );
-}
-
-export default React.memo(ProposeExternal);

pioneer/packages/page-council/src/Motions/ProposeMotion.tsx

@@ -1,140 +0,0 @@
-// 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 { SubmittableExtrinsic } from '@polkadot/api/types';
-
-import BN from 'bn.js';
-import React, { useCallback, useEffect, useState } from 'react';
-import { Button, Extrinsic, InputAddress, InputNumber, Modal, TxButton } from '@polkadot/react-components';
-import { useApi, useToggle } from '@polkadot/react-hooks';
-import { BN_ZERO } from '@polkadot/util';
-
-import { useTranslation } from '../translate';
-import { getThreshold } from './thresholds';
-
-interface Props {
-  isMember: boolean;
-  members: string[];
-}
-
-interface Threshold {
-  isThresholdValid: boolean;
-  threshold?: BN;
-}
-
-interface ProposalState {
-  proposal?: SubmittableExtrinsic<'promise'> | null;
-  proposalLength: number;
-}
-
-function Propose ({ isMember, members }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const { api, apiDefaultTxSudo } = useApi();
-  const [isOpen, toggleOpen] = useToggle();
-  const [accountId, setAcountId] = useState<string | null>(null);
-  const [{ proposal, proposalLength }, setProposal] = useState<ProposalState>({ proposalLength: 0 });
-  const [{ isThresholdValid, threshold }, setThreshold] = useState<Threshold>({ isThresholdValid: false });
-
-  useEffect((): void => {
-    members && setThreshold({
-      isThresholdValid: members.length !== 0,
-      threshold: new BN(Math.ceil(members.length * getThreshold(api)))
-    });
-  }, [api, members]);
-
-  const _setMethod = useCallback(
-    (proposal?: SubmittableExtrinsic<'promise'> | null) => setProposal({
-      proposal,
-      proposalLength: proposal?.encodedLength || 0
-    }),
-    []
-  );
-
-  const _setThreshold = useCallback(
-    (threshold?: BN) => setThreshold({
-      isThresholdValid: !!threshold?.gtn(0),
-      threshold
-    }),
-    []
-  );
-
-  return (
-    <>
-      <Button
-        icon='plus'
-        isDisabled={!isMember}
-        label={t<string>('Propose motion')}
-        onClick={toggleOpen}
-      />
-      {isOpen && (
-        <Modal
-          header={t<string>('Propose a council motion')}
-          size='large'
-        >
-          <Modal.Content>
-            <Modal.Columns>
-              <Modal.Column>
-                <InputAddress
-                  filter={members}
-                  help={t<string>('Select the account you wish to make the proposal with.')}
-                  label={t<string>('propose from account')}
-                  onChange={setAcountId}
-                  type='account'
-                  withLabel
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The council account for the proposal. The selection is filtered by the current members.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-            <Modal.Columns>
-              <Modal.Column>
-                <InputNumber
-                  className='medium'
-                  help={t<string>('The minimum number of council votes required to approve this motion')}
-                  isError={!threshold || threshold.eqn(0) || threshold.gtn(members.length)}
-                  label={t<string>('threshold')}
-                  onChange={_setThreshold}
-                  placeholder={t<string>('Positive number between 1 and {{memberCount}}', { replace: { memberCount: members.length } })}
-                  value={threshold || BN_ZERO}
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The desired threshold. Here set to a default of 50%+1, as applicable for general proposals.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-            <Modal.Columns>
-              <Modal.Column>
-                <Extrinsic
-                  defaultValue={apiDefaultTxSudo}
-                  label={t<string>('proposal')}
-                  onChange={_setMethod}
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The actual proposal to make, based on the selected call and parameters thereof.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-          </Modal.Content>
-          <Modal.Actions onCancel={toggleOpen}>
-            <TxButton
-              accountId={accountId}
-              isDisabled={!proposal || !isThresholdValid}
-              label={t<string>('Propose')}
-              onStart={toggleOpen}
-              params={
-                api.tx.council.propose.meta.args.length === 3
-                  ? [threshold, proposal, proposalLength]
-                  : [threshold, proposal]
-              }
-              tx='council.propose'
-            />
-          </Modal.Actions>
-        </Modal>
-      )}
-    </>
-  );
-}
-
-export default React.memo(Propose);

pioneer/packages/page-council/src/Motions/Slashing.tsx

@@ -1,145 +0,0 @@
-// 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 { SubmittableExtrinsic } from '@polkadot/api/types';
-
-import React, { useEffect, useState } from 'react';
-import { Button, Dropdown, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
-import { useApi, useToggle } from '@polkadot/react-hooks';
-
-import { useTranslation } from '../translate';
-import { getThreshold } from './thresholds';
-import useAvailableSlashes from './useAvailableSlashes';
-
-interface Props {
-  className?: string;
-  isMember: boolean;
-  members: string[];
-}
-
-interface Option {
-  text: string;
-  value: number;
-}
-
-interface ProposalState {
-  proposal?: SubmittableExtrinsic<'promise'> | null;
-  proposalLength: number;
-}
-
-function Slashing ({ className = '', isMember, members }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const { api } = useApi();
-  const slashes = useAvailableSlashes();
-  const [isVisible, toggleVisible] = useToggle();
-  const [accountId, setAcountId] = useState<string | null>(null);
-  const [{ proposal, proposalLength }, setProposal] = useState<ProposalState>({ proposal: null, proposalLength: 0 });
-  const [eras, setEras] = useState<Option[]>([]);
-  const [selectedEra, setSelectedEra] = useState(0);
-  const threshold = Math.ceil((members.length || 0) * getThreshold(api));
-
-  useEffect((): void => {
-    setEras(
-      (slashes || []).map(([era, slashes]): Option => ({
-        text: t<string>('era {{era}}, {{count}} slashes', {
-          replace: {
-            count: slashes.length,
-            era: era.toNumber()
-          }
-        }),
-        value: era.toNumber()
-      }))
-    );
-  }, [slashes, t]);
-
-  useEffect((): void => {
-    const actioned = selectedEra && slashes && slashes.find(([era]): boolean => era.eqn(selectedEra));
-    const proposal = actioned
-      ? api.tx.staking.cancelDeferredSlash(actioned[0], actioned[1].map((_, index): number => index))
-      : null;
-
-    setProposal({
-      proposal,
-      proposalLength: proposal?.encodedLength || 0
-    });
-  }, [api, selectedEra, slashes]);
-
-  return (
-    <>
-      <Button
-        icon='sync'
-        isDisabled={!isMember || !slashes.length}
-        label={t<string>('Cancel slashes')}
-        onClick={toggleVisible}
-      />
-      {isVisible && (
-        <Modal
-          className={className}
-          header={t<string>('Revert pending slashes')}
-          size='large'
-        >
-          <Modal.Content>
-            <Modal.Columns>
-              <Modal.Column>
-                <InputAddress
-                  filter={members}
-                  help={t<string>('Select the account you wish to make the proposal with.')}
-                  label={t<string>('propose from account')}
-                  onChange={setAcountId}
-                  type='account'
-                  withLabel
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The council account for the proposal. The selection is filtered by the current members.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-            <Modal.Columns>
-              <Modal.Column>
-                {eras.length
-                  ? (
-                    <Dropdown
-                      defaultValue={eras[0].value}
-                      help={t<string>('The unapplied slashed era to cancel.')}
-                      label={t<string>('the era to cancel for')}
-                      onChange={setSelectedEra}
-                      options={eras}
-                    />
-                  )
-                  : (
-                    <Input
-                      isDisabled
-                      label={t<string>('the era to cancel for')}
-                      value={t<string>('no unapplied slashes found')}
-                    />
-                  )
-                }
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The specific eras on which there are unapplied slashes. For each era a separate proposal is to be made.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-          </Modal.Content>
-          <Modal.Actions onCancel={toggleVisible}>
-            <TxButton
-              accountId={accountId}
-              icon='sync'
-              isDisabled={!threshold || !members.includes(accountId || '') || !proposal}
-              label={t<string>('Revert')}
-              onStart={toggleVisible}
-              params={
-                api.tx.council.propose.meta.args.length === 3
-                  ? [threshold, proposal, proposalLength]
-                  : [threshold, proposal]
-              }
-              tx='council.propose'
-            />
-          </Modal.Actions>
-        </Modal>
-      )}
-    </>
-  );
-}
-
-export default React.memo(Slashing);

pioneer/packages/page-council/src/Motions/Votes.tsx

@@ -1,54 +0,0 @@
-// 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, MemberCount } from '@polkadot/types/interfaces';
-
-import React, { useEffect, useState } from 'react';
-import { AddressMini, Expander } from '@polkadot/react-components';
-
-import { useTranslation } from '../translate';
-
-interface Props {
-  isAye?: boolean;
-  members: string[];
-  votes: AccountId[];
-  threshold: MemberCount;
-}
-
-function Votes ({ isAye, members, threshold, votes }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const [counter, setCounter] = useState('');
-
-  useEffect((): void => {
-    const max = isAye
-      ? threshold.toNumber()
-      : (members.length - threshold.toNumber()) + 1;
-
-    setCounter(`${votes.length}/${max}`);
-  }, [isAye, members, threshold, votes]);
-
-  return (
-    <td className='address'>
-      {counter && votes.length !== 0 && (
-        <Expander
-          summary={
-            isAye
-              ? t<string>('Aye {{counter}}', { replace: { counter } })
-              : t<string>('Nay {{counter}}', { replace: { counter } })
-          }
-        >
-          {votes.map((address): React.ReactNode => (
-            <AddressMini
-              key={address.toString()}
-              value={address}
-              withBalance={false}
-            />
-          ))}
-        </Expander>
-      )}
-    </td>
-  );
-}
-
-export default React.memo(Votes);

pioneer/packages/page-council/src/Motions/Voting.tsx

@@ -1,111 +0,0 @@
-// 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 { AccountId, Hash, Proposal, ProposalIndex } from '@polkadot/types/interfaces';
-
-import React, { useCallback, useEffect, useState } from 'react';
-import { Button, Icon, 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[];
-  prime: AccountId | null;
-  proposal: Proposal;
-}
-
-function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props): React.ReactElement<Props> | null {
-  const { t } = useTranslation();
-  const { hasAccounts } = useAccounts();
-  const [isVotingOpen, toggleVoting] = useToggle();
-  const [accountId, setAccountId] = useState<string | null>(null);
-  const [voteValue, setVoteValue] = useState(true);
-
-  useEffect((): void => {
-    isVotingOpen && setVoteValue(true);
-  }, [isVotingOpen]);
-
-  const _onChangeVote = useCallback(
-    (vote?: boolean) => setVoteValue(isBoolean(vote) ? vote : true),
-    []
-  );
-
-  if (!hasAccounts) {
-    return null;
-  }
-
-  const isPrime = prime?.toString() === accountId;
-
-  return (
-    <>
-      {isVotingOpen && (
-        <Modal
-          header={t<string>('Vote on proposal')}
-          size='large'
-        >
-          <Modal.Content>
-            <Modal.Columns>
-              <Modal.Column>
-                <ProposedAction
-                  idNumber={idNumber}
-                  proposal={proposal}
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The proposal that is being voted on. It will pass when the threshold is reached.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-            <Modal.Columns>
-              <Modal.Column>
-                <VoteAccount
-                  filter={members}
-                  onChange={setAccountId}
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The council account for this vote. The selection is filtered by the current members.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-            <Modal.Columns>
-              <Modal.Column>
-                <VoteToggle
-                  onChange={_onChangeVote}
-                  value={voteValue}
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The vote to record for this proposal, either for or against.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-            {isPrime && (
-              <article className='warning'>
-                <div><Icon icon='exclamation-triangle' />{t<string>('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')}</div>
-              </article>
-            )}
-          </Modal.Content>
-          <VoteActions
-            accountId={accountId}
-            aye={voteValue}
-            onClick={toggleVoting}
-            params={[hash, idNumber, voteValue]}
-            tx='council.vote'
-          />
-        </Modal>
-      )}
-      <Button
-        icon='check'
-        isDisabled={isDisabled}
-        label={t<string>('Vote')}
-        onClick={toggleVoting}
-      />
-    </>
-  );
-}
-
-export default React.memo(Voting);

pioneer/packages/page-council/src/Motions/index.tsx

@@ -1,73 +0,0 @@
-// 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 { DeriveCollectiveProposals, DeriveCollectiveProposal } from '@polkadot/api-derive/types';
-import { AccountId } from '@polkadot/types/interfaces';
-
-import React, { useMemo } from 'react';
-import { Button, Table } from '@polkadot/react-components';
-import { useMembers } from '@polkadot/react-hooks';
-
-import { useTranslation } from '../translate';
-import Motion from './Motion';
-import ProposeMotion from './ProposeMotion';
-import ProposeExternal from './ProposeExternal';
-import Slashing from './Slashing';
-
-interface Props {
-  className?: string;
-  motions?: DeriveCollectiveProposals;
-  prime: AccountId | null;
-}
-
-function Proposals ({ className = '', motions, prime }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const { isMember, members } = useMembers();
-
-  const header = useMemo(() => [
-    [t('motions'), 'start', 2],
-    [t('threshold')],
-    [t('voting end')],
-    [undefined, 'address'],
-    [undefined, 'address'],
-    [],
-    [undefined, 'badge'],
-    [undefined, 'mini']
-  ], [t]);
-
-  return (
-    <div className={className}>
-      <Button.Group>
-        <ProposeMotion
-          isMember={isMember}
-          members={members}
-        />
-        <ProposeExternal
-          isMember={isMember}
-          members={members}
-        />
-        <Slashing
-          isMember={isMember}
-          members={members}
-        />
-      </Button.Group>
-      <Table
-        empty={motions && t<string>('No council motions')}
-        header={header}
-      >
-        {motions?.map((motion: DeriveCollectiveProposal): React.ReactNode => (
-          <Motion
-            isMember={isMember}
-            key={motion.hash.toHex()}
-            members={members}
-            motion={motion}
-            prime={prime}
-          />
-        ))}
-      </Table>
-    </div>
-  );
-}
-
-export default React.memo(Proposals);

pioneer/packages/page-council/src/Motions/thresholds.ts

@@ -1,18 +0,0 @@
-// 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 { ApiPromise } from '@polkadot/api';
-
-const THRESHOLDS: Record<string, number> = {
-  // Polkadot
-  '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3': 0.6,
-  // Kusama
-  '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe': 0.5
-};
-
-export function getThreshold (api: ApiPromise): number {
-  return THRESHOLDS[api.genesisHash.toHex()] || 0.5;
-}
-
-export { THRESHOLDS };

pioneer/packages/page-council/src/Motions/useAvailableSlashes.ts

@@ -1,54 +0,0 @@
-// 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 { DeriveSessionIndexes } from '@polkadot/api-derive/types';
-import { EraIndex, UnappliedSlash } from '@polkadot/types/interfaces';
-
-import BN from 'bn.js';
-import { useEffect, useState } from 'react';
-import { useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
-import { Option, Vec } from '@polkadot/types';
-
-type Unsub = () => void;
-
-export default function useAvailableSlashes (): [BN, UnappliedSlash[]][] {
-  const { api } = useApi();
-  const indexes = useCall<DeriveSessionIndexes>(api.derive.session?.indexes, []);
-  const earliestSlash = useCall<Option<EraIndex>>(api.query.staking?.earliestUnappliedSlash, []);
-  const mountedRef = useIsMountedRef();
-  const [slashes, setSlashes] = useState<[BN, UnappliedSlash[]][]>([]);
-
-  useEffect((): Unsub => {
-    let unsub: Unsub | undefined;
-
-    if (mountedRef.current && indexes && earliestSlash && earliestSlash.isSome) {
-      const from = earliestSlash.unwrap();
-      const range: BN[] = [];
-      let start = new BN(from);
-
-      while (start.lt(indexes.activeEra)) {
-        range.push(start);
-        start = start.addn(1);
-      }
-
-      if (range.length) {
-        (async (): Promise<void> => {
-          unsub = await api.query.staking.unappliedSlashes.multi<Vec<UnappliedSlash>>(range, (values): void => {
-            mountedRef.current && setSlashes(
-              values
-                .map((value, index): [BN, UnappliedSlash[]] => [from.addn(index), value])
-                .filter(([, slashes]): boolean => slashes.length !== 0)
-            );
-          });
-        })().catch(console.error);
-      }
-    }
-
-    return (): void => {
-      unsub && unsub();
-    };
-  }, [api, earliestSlash, indexes, mountedRef]);
-
-  return slashes;
-}

pioneer/packages/page-council/src/Overview/Candidate.tsx

@@ -1,46 +0,0 @@
-// 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 React from 'react';
-import { AddressSmall, Tag } from '@polkadot/react-components';
-
-import { useTranslation } from '../translate';
-import Voters from './Voters';
-
-interface Props {
-  className?: string;
-  address: AccountId;
-  balance?: Balance;
-  isPrime?: boolean;
-  voters?: AccountId[];
-}
-
-function Candidate ({ address, balance, className = '', isPrime, voters }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-
-  return (
-    <tr className={className}>
-      <td className='address'>
-        <AddressSmall value={address} />
-      </td>
-      <td>
-        {isPrime && (
-          <Tag
-            color='green'
-            hover={t<string>('Current prime member, default voting')}
-            label={t<string>('prime voter')}
-          />
-        )}
-      </td>
-      <Voters
-        balance={balance}
-        voters={voters}
-      />
-    </tr>
-  );
-}
-
-export default React.memo(Candidate);

pioneer/packages/page-council/src/Overview/Candidates.tsx

@@ -1,66 +0,0 @@
-// 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 { DeriveElectionsInfo } from '@polkadot/api-derive/types';
-import { AccountId } from '@polkadot/types/interfaces';
-
-import React, { useMemo } from 'react';
-import { Table } from '@polkadot/react-components';
-
-import { useTranslation } from '../translate';
-import Candidate from './Candidate';
-
-interface Props {
-  allVotes?: Record<string, AccountId[]>;
-  className?: string;
-  electionsInfo?: DeriveElectionsInfo;
-}
-
-function Candidates ({ allVotes = {}, electionsInfo }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-
-  const headerCandidates = useMemo(() => [
-    [t('candidates'), 'start', 2],
-    [],
-    []
-  ], [t]);
-
-  const headerRunners = useMemo(() => [
-    [t('runners up'), 'start', 2],
-    [t('backing')],
-    [t('votes')]
-  ], [t]);
-
-  return (
-    <>
-      <Table
-        empty={electionsInfo && t<string>('No runners up found')}
-        header={headerRunners}
-      >
-        {electionsInfo?.runnersUp.map(([accountId, balance]): React.ReactNode => (
-          <Candidate
-            address={accountId}
-            balance={balance}
-            key={accountId.toString()}
-            voters={allVotes[accountId.toString()]}
-          />
-        ))}
-      </Table>
-      <Table
-        empty={electionsInfo && t<string>('No candidates found')}
-        header={headerCandidates}
-      >
-        {electionsInfo?.candidates.map((accountId): React.ReactNode => (
-          <Candidate
-            address={accountId}
-            key={accountId.toString()}
-            voters={allVotes[accountId.toString()]}
-          />
-        ))}
-      </Table>
-    </>
-  );
-}
-
-export default React.memo(Candidates);

pioneer/packages/page-council/src/Overview/Members.tsx

@@ -1,49 +0,0 @@
-// 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 { DeriveElectionsInfo } from '@polkadot/api-derive/types';
-import { AccountId } from '@polkadot/types/interfaces';
-
-import React, { useMemo } from 'react';
-import { Table } from '@polkadot/react-components';
-
-import { useTranslation } from '../translate';
-import Candidate from './Candidate';
-
-interface Props {
-  allVotes?: Record<string, AccountId[]>;
-  className?: string;
-  electionsInfo?: DeriveElectionsInfo;
-  prime?: AccountId | null;
-}
-
-function Members ({ allVotes = {}, className = '', electionsInfo, prime }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-
-  const header = useMemo(() => [
-    [t('members'), 'start', 2],
-    [t('backing')],
-    [t('votes')]
-  ], [t]);
-
-  return (
-    <Table
-      className={className}
-      empty={electionsInfo && t<string>('No members found')}
-      header={header}
-    >
-      {electionsInfo?.members.map(([accountId, balance]): React.ReactNode => (
-        <Candidate
-          address={accountId}
-          balance={balance}
-          isPrime={prime?.eq(accountId)}
-          key={accountId.toString()}
-          voters={allVotes[accountId.toString()]}
-        />
-      ))}
-    </Table>
-  );
-}
-
-export default React.memo(Members);

pioneer/packages/page-council/src/Overview/SubmitCandidacy.tsx

@@ -1,81 +0,0 @@
-// 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 { ComponentProps as Props } from './types';
-
-import React, { useState } from 'react';
-import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
-import { useApi, useModal } from '@polkadot/react-hooks';
-
-import { useTranslation } from '../translate';
-
-function SubmitCandidacy ({ electionsInfo }: Props): React.ReactElement<Props> {
-  const { api } = useApi();
-  const { t } = useTranslation();
-  const [accountId, setAcountId] = useState<string | null>(null);
-  const { isOpen, onClose, onOpen } = useModal();
-  const modLocation = api.tx.electionsPhragmen ? 'electionsPhragmen' : 'elections';
-
-  return (
-    <>
-      {isOpen && (
-        <Modal
-          header={t<string>('Submit your council candidacy')}
-          onClose={onClose}
-          size='large'
-        >
-          <Modal.Content>
-            <Modal.Columns>
-              <Modal.Column>
-                <InputAddress
-                  help={t<string>('Select the account you wish to submit for candidacy.')}
-                  label={t<string>('candidate account')}
-                  onChange={setAcountId}
-                  type='account'
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('This account will appear in the list of candidates. With enough votes in an election, it will become either a runner-up or a council member.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-            <Modal.Columns>
-              <Modal.Column>
-                <InputBalance
-                  defaultValue={api.consts[modLocation].candidacyBond}
-                  help={t<string>('The bond that is reserved')}
-                  isDisabled
-                  label={t<string>('candidacy bond')}
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t('The bond will be reserved for the duration of your candidacy and membership.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-          </Modal.Content>
-          <Modal.Actions onCancel={onClose}>
-            <TxButton
-              accountId={accountId}
-              isDisabled={!electionsInfo}
-              onStart={onClose}
-              params={
-                api.tx[modLocation].submitCandidacy.meta.args.length === 1
-                  ? [electionsInfo?.candidates.length]
-                  : []
-              }
-              tx={`${modLocation}.submitCandidacy`}
-            />
-          </Modal.Actions>
-        </Modal>
-      )}
-      <Button
-        icon='plus'
-        isDisabled={!electionsInfo}
-        label={t<string>('Submit candidacy')}
-        onClick={onOpen}
-      />
-    </>
-  );
-}
-
-export default React.memo(SubmitCandidacy);

pioneer/packages/page-council/src/Overview/Summary.tsx

@@ -1,66 +0,0 @@
-// 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 { DeriveElectionsInfo } from '@polkadot/api-derive/types';
-import { BlockNumber } from '@polkadot/types/interfaces';
-import { ComponentProps } from './types';
-
-import React from 'react';
-import { SummaryBox, CardSummary } from '@polkadot/react-components';
-import { formatNumber } from '@polkadot/util';
-
-import { useTranslation } from '../translate';
-
-interface Props extends ComponentProps {
-  bestNumber?: BlockNumber;
-  className?: string;
-  electionsInfo?: DeriveElectionsInfo;
-}
-
-function Summary ({ bestNumber, className = '', electionsInfo }: Props): React.ReactElement<Props> | null {
-  const { t } = useTranslation();
-
-  if (!electionsInfo) {
-    return null;
-  }
-
-  const { candidateCount, desiredSeats, members, runnersUp, termDuration, voteCount } = electionsInfo;
-
-  return (
-    <SummaryBox className={className}>
-      <section>
-        <CardSummary label={t<string>('seats')}>
-          {formatNumber(members.length)}&nbsp;/&nbsp;{formatNumber(desiredSeats)}
-        </CardSummary>
-        <CardSummary label={t<string>('runners up')}>
-          {formatNumber(runnersUp.length)}
-        </CardSummary>
-        <CardSummary label={t<string>('candidates')}>
-          {formatNumber(candidateCount)}
-        </CardSummary>
-      </section>
-      {voteCount && (
-        <section>
-          <CardSummary label={t<string>('voting round')}>
-            #{formatNumber(voteCount)}
-          </CardSummary>
-        </section>
-      )}
-      {bestNumber && termDuration?.gtn(0) && (
-        <section>
-          <CardSummary
-            label={t<string>('term progress')}
-            progress={{
-              total: termDuration,
-              value: bestNumber.mod(termDuration),
-              withTime: true
-            }}
-          />
-        </section>
-      )}
-    </SummaryBox>
-  );
-}
-
-export default React.memo(Summary);

pioneer/packages/page-council/src/Overview/Vote.tsx

@@ -1,131 +0,0 @@
-// 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 { DeriveElectionsInfo } from '@polkadot/api-derive/types';
-
-import React, { useEffect, useState } from 'react';
-import { Button, InputAddress, InputAddressMulti, Modal, TxButton, VoteValue } from '@polkadot/react-components';
-import { useApi, useToggle } from '@polkadot/react-hooks';
-import { BN_ZERO } from '@polkadot/util';
-
-import { useTranslation } from '../translate';
-
-interface Props {
-  className?: string;
-  electionsInfo?: DeriveElectionsInfo;
-}
-
-const MAX_VOTES = 16;
-
-function Vote ({ electionsInfo }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const { api } = useApi();
-  const [isVisible, toggleVisible] = useToggle();
-  const [accountId, setAccountId] = useState<string | null>(null);
-  const [available, setAvailable] = useState<string[]>([]);
-  const [defaultVotes, setDefaultVotes] = useState<string[]>([]);
-  const [votes, setVotes] = useState<string[]>([]);
-  const [voteValue, setVoteValue] = useState(BN_ZERO);
-
-  useEffect((): void => {
-    if (electionsInfo) {
-      const { candidates, members, runnersUp } = electionsInfo;
-
-      setAvailable(
-        members
-          .map(([accountId]): string => accountId.toString())
-          .concat(runnersUp.map(([accountId]) => accountId.toString()))
-          .concat(candidates.map((accountId) => accountId.toString()))
-      );
-    }
-  }, [electionsInfo]);
-
-  useEffect((): void => {
-    accountId && api.derive.council.votesOf(accountId).then(({ votes }): void => {
-      setDefaultVotes(
-        votes
-          .map((accountId): string => accountId.toString())
-          .filter((accountId): boolean => available.includes(accountId))
-      );
-    });
-  }, [api, accountId, available]);
-
-  return (
-    <>
-      <Button
-        icon='check'
-        isDisabled={available.length === 0}
-        label={t<string>('Vote')}
-        onClick={toggleVisible}
-      />
-      {isVisible && (
-        <Modal
-          header={t<string>('Vote for current candidates')}
-          size='large'
-        >
-          <Modal.Content>
-            <Modal.Columns>
-              <Modal.Column>
-                <InputAddress
-                  help={t<string>('This account will be use to approve each candidate.')}
-                  label={t<string>('voting account')}
-                  onChange={setAccountId}
-                  type='account'
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The vote will be recorded for the selected account.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-            <Modal.Columns>
-              <Modal.Column>
-                <VoteValue
-                  accountId={accountId}
-                  isCouncil
-                  onChange={setVoteValue}
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The value associated with this vote. The amount will be locked (not available for transfer) and used in all subsequent elections.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-            <Modal.Columns>
-              <Modal.Column>
-                <InputAddressMulti
-                  available={available}
-                  availableLabel={t<string>('council candidates')}
-                  defaultValue={defaultVotes}
-                  help={t<string>('Select and order council candidates you wish to vote for.')}
-                  maxCount={MAX_VOTES}
-                  onChange={setVotes}
-                  valueLabel={t<string>('my ordered votes')}
-                />
-              </Modal.Column>
-              <Modal.Column>
-                <p>{t<string>('The votes for the members, runner-ups and candidates. These should be ordered based on your priority.')}</p>
-                <p>{t<string>('In calculating the election outcome, this prioritized vote ordering will be used to determine the final score for the candidates.')}</p>
-              </Modal.Column>
-            </Modal.Columns>
-          </Modal.Content>
-          <Modal.Actions onCancel={toggleVisible}>
-            <TxButton
-              accountId={accountId}
-              isDisabled={!accountId || votes.length === 0 || voteValue.lten(0)}
-              label={t<string>('Vote')}
-              onStart={toggleVisible}
-              params={[votes, voteValue]}
-              tx={
-                api.tx.electionsPhragmen
-                  ? 'electionsPhragmen.vote'
-                  : 'elections.vote'
-              }
-            />
-          </Modal.Actions>
-        </Modal>
-      )}
-    </>
-  );
-}
-
-export default React.memo(Vote);

pioneer/packages/page-council/src/Overview/Voters.tsx

@@ -1,42 +0,0 @@
-// 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 React from 'react';
-import { AddressMini, Expander } from '@polkadot/react-components';
-import { FormatBalance } from '@polkadot/react-query';
-import { formatNumber } from '@polkadot/util';
-
-interface Props {
-  balance?: Balance;
-  voters?: AccountId[];
-}
-
-function Voters ({ balance, voters }: Props): React.ReactElement<Props> {
-  if (!balance || !voters || !voters.length) {
-    return <><td className='all number' /><td className='number' /></>;
-  }
-
-  return (
-    <>
-      <td className='all number'>
-        <Expander summary={<FormatBalance value={balance} />} >
-          {voters.map((who): React.ReactNode =>
-            <AddressMini
-              key={who.toString()}
-              value={who}
-              withLockedVote
-            />
-          )}
-        </Expander>
-      </td>
-      <td className='number'>
-        {formatNumber(voters.length)}
-      </td>
-    </>
-  );
-}
-
-export default React.memo(Voters);

pioneer/packages/page-council/src/Overview/index.tsx

@@ -1,70 +0,0 @@
-// 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 { DeriveCouncilVotes, DeriveElectionsInfo } from '@polkadot/api-derive/types';
-import { AccountId, BlockNumber } from '@polkadot/types/interfaces';
-
-import React from 'react';
-import { Button } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
-
-import Candidates from './Candidates';
-import Members from './Members';
-import SubmitCandidacy from './SubmitCandidacy';
-import Summary from './Summary';
-import Vote from './Vote';
-
-interface Props {
-  className?: string;
-  prime: AccountId | null;
-}
-
-function transformVotes (entries: DeriveCouncilVotes): Record<string, AccountId[]> {
-  return entries.reduce((result: Record<string, AccountId[]>, [voter, { votes }]): Record<string, AccountId[]> => {
-    votes.forEach((candidate): void => {
-      const address = candidate.toString();
-
-      if (!result[address]) {
-        result[address] = [];
-      }
-
-      result[address].push(voter);
-    });
-
-    return result;
-  }, {});
-}
-
-function Overview ({ className = '', prime }: Props): React.ReactElement<Props> {
-  const { api } = useApi();
-  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
-  const electionsInfo = useCall<DeriveElectionsInfo>(api.derive.elections.info, []);
-  const allVotes = useCall<Record<string, AccountId[]>>(api.derive.council.votes, [], {
-    transform: transformVotes
-  });
-
-  return (
-    <div className={className}>
-      <Summary
-        bestNumber={bestNumber}
-        electionsInfo={electionsInfo}
-      />
-      <Button.Group>
-        <Vote electionsInfo={electionsInfo} />
-        <SubmitCandidacy electionsInfo={electionsInfo} />
-      </Button.Group>
-      <Members
-        allVotes={allVotes}
-        electionsInfo={electionsInfo}
-        prime={prime}
-      />
-      <Candidates
-        allVotes={allVotes}
-        electionsInfo={electionsInfo}
-      />
-    </div>
-  );
-}
-
-export default React.memo(Overview);

pioneer/packages/page-council/src/Overview/types.ts

@@ -1,17 +0,0 @@
-// 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 { SetIndex } from '@polkadot/types/interfaces';
-import { DeriveElectionsInfo } from '@polkadot/api-derive/types';
-
-import BN from 'bn.js';
-
-export interface ComponentProps {
-  electionsInfo?: DeriveElectionsInfo;
-}
-
-export interface VoterPosition {
-  setIndex: SetIndex;
-  globalIndex: BN;
-}

pioneer/packages/page-council/src/index.tsx

@@ -1,78 +0,0 @@
-// 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 { Option } from '@polkadot/types';
-import { AccountId } from '@polkadot/types/interfaces';
-import { DeriveCollectiveProposals } from '@polkadot/api-derive/types';
-
-import React, { useMemo } from 'react';
-import { Route, Switch } from 'react-router';
-import { useLocation } from 'react-router-dom';
-import styled from 'styled-components';
-import { Tabs } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
-
-import useCounter from './useCounter';
-import Overview from './Overview';
-import Motions from './Motions';
-import { useTranslation } from './translate';
-
-export { useCounter };
-
-interface Props {
-  basePath: string;
-  className?: string;
-}
-
-function CouncilApp ({ basePath, className }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const { api } = useApi();
-  const { pathname } = useLocation();
-  const numMotions = useCounter();
-  const prime = useCall<AccountId | null>(api.query.council.prime, [], {
-    transform: (result: Option<AccountId>): AccountId | null => result.unwrapOr(null)
-  }) || null;
-  const motions = useCall<DeriveCollectiveProposals>(api.derive.council.proposals);
-
-  const items = useMemo(() => [
-    {
-      isRoot: true,
-      name: 'overview',
-      text: t<string>('Council overview')
-    },
-    {
-      name: 'motions',
-      text: t<string>('Motions ({{count}})', { replace: { count: numMotions } })
-    }
-  ], [numMotions, t]);
-
-  return (
-    <main className={className}>
-      <header>
-        <Tabs
-          basePath={basePath}
-          items={items}
-        />
-      </header>
-      <Switch>
-        <Route path={`${basePath}/motions`}>
-          <Motions
-            motions={motions}
-            prime={prime}
-          />
-        </Route>
-      </Switch>
-      <Overview
-        className={[basePath, `${basePath}/candidates`].includes(pathname) ? '' : 'council--hidden'}
-        prime={prime}
-      />
-    </main>
-  );
-}
-
-export default React.memo(styled(CouncilApp)`
-  .council--hidden {
-    display: none;
-  }
-`);

pioneer/packages/page-council/src/translate.ts

@@ -1,9 +0,0 @@
-// 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 { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
-
-export function useTranslation (): UseTranslationResponse {
-  return useTranslationBase('app-council');
-}

pioneer/packages/page-council/src/useCounter.ts

@@ -1,21 +0,0 @@
-// 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 { DeriveCollectiveProposals } from '@polkadot/api-derive/types';
-
-import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
-
-function transform (motions: DeriveCollectiveProposals): number {
-  return motions.filter(({ votes }): boolean => !!votes).length;
-}
-
-export default function useCounter (): number {
-  const { hasAccounts } = useAccounts();
-  const { api, isApiReady } = useApi();
-  const counter = useCall<number>(isApiReady && hasAccounts && api.derive.council?.proposals, [], {
-    transform
-  }) || 0;
-
-  return counter;
-}