Add operator

README.md

@@ -42,7 +42,7 @@ In addition the following libraries are also included in the repo. These are to
 
 Contributions are welcome!
 
-To start off, this repo (along with others in the [@polkadot](https://github.com/polkadot-js/) family) uses yarn workspaces to organise the code. As such, after cloning dependencies _should_ be installed via `yarn`, not via npm, the latter will result in broken dependencies.
+To start off, this repo (along with others in the [@polkadot](https://github.com/polkadot-js/) family) uses yarn workspaces to organize the code. As such, after cloning dependencies _should_ be installed via `yarn`, not via npm, the latter will result in broken dependencies.
 
 To get started -
 
@@ -55,7 +55,7 @@ To get started -
 
 ## I want to code around
 
-There is a base template availble [app-123code](packages/app-123code/) that acts as a simple starting point for adding additional apps to the UI. Alternatively if you just want some place where you can write some code, it does the trick.
+There is a base template available [app-123code](packages/app-123code/) that acts as a simple starting point for adding additional apps to the UI. Alternatively if you just want some place where you can write some code, it does the trick.
 
 While it is hidden from the sidebar, it is accessible via [http://127.0.0.1:3000/#/123code](http://127.0.0.1:3000/#/123code)
 

lerna.json

@@ -10,5 +10,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.37.0-beta.72"
+  "version": "0.37.0-beta.108"
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.37.0-beta.72",
+  "version": "0.37.0-beta.108",
   "private": true,
   "engines": {
     "node": ">=10.13.0",
@@ -10,12 +10,12 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^0.97.0-beta.2",
-    "@polkadot/api-contract": "^0.97.0-beta.2",
-    "@polkadot/keyring": "^1.7.0-beta.6",
-    "@polkadot/types": "^0.97.0-beta.2",
-    "@polkadot/util": "^1.7.0-beta.6",
-    "@polkadot/util-crypto": "^1.7.0-beta.6",
+    "@polkadot/api": "^0.97.0-beta.16",
+    "@polkadot/api-contract": "^0.97.0-beta.16",
+    "@polkadot/keyring": "^1.7.0-beta.7",
+    "@polkadot/types": "^0.97.0-beta.16",
+    "@polkadot/util": "^1.7.0-beta.7",
+    "@polkadot/util-crypto": "^1.7.0-beta.7",
     "babel-core": "^7.0.0-bridge.0",
     "typescript": "^3.7.2"
   },
@@ -34,10 +34,10 @@
     "start": "cd packages/apps && webpack --config webpack.config.js"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.0",
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/dev-react": "^0.32.0-beta.13",
-    "@polkadot/ts": "^0.1.84",
+    "@babel/core": "^7.7.2",
+    "@babel/runtime": "^7.7.2",
+    "@polkadot/dev-react": "^0.32.0-beta.14",
+    "@polkadot/ts": "^0.1.85",
     "autoprefixer": "^9.7.1",
     "empty": "^0.10.1",
     "html-loader": "^0.5.5",
@@ -53,5 +53,13 @@
     "postcss-simple-vars": "^5.0.0",
     "precss": "^4.0.0",
     "source-map-explorer": "^2.1.0"
+  },
+  "dependencies": {
+    "@polkadot/api": "^0.97.0-beta.2",
+    "@polkadot/api-contract": "^0.97.0-beta.2",
+    "@polkadot/keyring": "^1.7.0-beta.6",
+    "@polkadot/types": "^0.97.0-beta.16",
+    "@polkadot/util": "^1.7.0-beta.6",
+    "@polkadot/util-crypto": "^1.7.0-beta.6"
   }
 }

packages/app-123code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-123code",
-  "version": "0.37.0-beta.72",
+  "version": "0.37.0-beta.108",
   "description": "A basic app that shows the ropes on customisation",
   "main": "index.js",
   "scripts": {},
@@ -10,7 +10,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.72"
+    "@babel/runtime": "^7.7.2",
+    "@polkadot/react-components": "^0.37.0-beta.108"
   }
 }

packages/app-123code/src/SummaryBar.tsx

@@ -7,9 +7,10 @@ import { AccountId } from '@polkadot/types/interfaces';
 import { BareProps, I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
-import React, { useContext } from 'react';
-import { ApiContext, withCalls } from '@polkadot/react-api';
+import React from 'react';
+import { withCalls } from '@polkadot/react-api';
 import { Bubble, IdentityIcon } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
 import { formatBalance, formatNumber } from '@polkadot/util';
 
 import translate from './translate';
@@ -22,7 +23,7 @@ interface Props extends BareProps, I18nProps {
 }
 
 function SummaryBar ({ balances_totalIssuance, chain_bestNumber, chain_bestNumberLag, staking_validators }: Props): React.ReactElement<Props> {
-  const { api, systemChain, systemName, systemVersion } = useContext(ApiContext);
+  const { api, systemChain, systemName, systemVersion } = useApi();
 
   return (
     <summary>

packages/app-accounts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-accounts",
-  "version": "0.37.0-beta.72",
+  "version": "0.37.0-beta.108",
   "main": "index.js",
   "repository": "https://github.com/polkadot-js/apps.git",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -10,9 +10,9 @@
   "contributors": [],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.1",
-    "@polkadot/react-components": "^0.37.0-beta.72",
-    "@polkadot/react-qr": "^0.47.0-beta.5",
+    "@babel/runtime": "^7.7.2",
+    "@polkadot/react-components": "^0.37.0-beta.108",
+    "@polkadot/react-qr": "^0.47.0-beta.6",
     "@types/file-saver": "^2.0.0",
     "@types/yargs": "^13.0.2",
     "babel-plugin-module-resolver": "^3.1.1",

packages/app-accounts/src/Account.tsx

@@ -6,9 +6,8 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React, { useState, useEffect } from 'react';
-import { Popup } from 'semantic-ui-react';
 import styled from 'styled-components';
-import { AddressCard, AddressInfo, Button, ChainLock, Forget, Menu } from '@polkadot/react-components';
+import { AddressCard, AddressInfo, Button, ChainLock, Forget, Menu, Popup } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
 import Backup from './modals/Backup';
@@ -47,8 +46,8 @@ function Account ({ address, className, t }: Props): React.ReactElement<Props> {
   const _toggleDerive = (): void => setIsDeriveOpen(!isDeriveOpen);
   const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen);
   const _togglePass = (): void => setIsPasswordOpen(!isPasswordOpen);
-  const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen);
   const _toggleSettingPopup = (): void => setIsSettingPopupOpen(!isSettingPopupOpen);
+  const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen);
   const _onForget = (): void => {
     if (!address) {
       return;
@@ -83,33 +82,6 @@ function Account ({ address, className, t }: Props): React.ReactElement<Props> {
       buttons={
         <div className='accounts--Account-buttons buttons'>
           <div className='actions'>
-            {isEditable && !isDevelopment && (
-              <Button
-                isNegative
-                onClick={_toggleForget}
-                icon='trash'
-                size='small'
-                tooltip={t('Forget this account')}
-              />
-            )}
-            {isEditable && !isExternal && !isDevelopment && (
-              <>
-                <Button
-                  icon='cloud download'
-                  isPrimary
-                  onClick={_toggleBackup}
-                  size='small'
-                  tooltip={t('Create a backup file for this account')}
-                />
-                <Button
-                  icon='key'
-                  isPrimary
-                  onClick={_togglePass}
-                  size='small'
-                  tooltip={t("Change this account's password")}
-                />
-              </>
-            )}
             <Button
               icon='paper plane'
               isPrimary
@@ -118,42 +90,62 @@ function Account ({ address, className, t }: Props): React.ReactElement<Props> {
               size='small'
               tooltip={t('Send funds from this account')}
             />
-            {isEditable && !isExternal && (
-              <Popup
-                onClose={_toggleSettingPopup}
-                open={isSettingPopupOpen}
-                position='bottom left'
-                trigger={
-                  <Button
-                    icon='setting'
-                    onClick={_toggleSettingPopup}
-                    size='small'
-                  />
-                }
-              >
-                <Menu
-                  vertical
-                  text
+            <Popup
+              className='theme--default'
+              onClose={_toggleSettingPopup}
+              open={isSettingPopupOpen}
+              position='bottom right'
+              trigger={
+                <Button
+                  icon='setting'
                   onClick={_toggleSettingPopup}
+                  size='small'
+                />
+              }
+            >
+              <Menu
+                vertical
+                text
+                onClick={_toggleSettingPopup}
+              >
+                <Menu.Item
+                  disabled={!isEditable || isExternal}
+                  onClick={_toggleDerive}
+                >
+                  {t('Derive account from source')}
+                </Menu.Item>
+                <Menu.Item disabled>
+                  {t('Change on-chain nickname')}
+                </Menu.Item>
+                <Menu.Item
+                  disabled={!isEditable || isExternal || isDevelopment}
+                  onClick={_toggleBackup}
+                >
+                  {t('Create a backup file for this account')}
+                </Menu.Item>
+                <Menu.Item
+                  disabled={!isEditable || isExternal || isDevelopment}
+                  onClick={_togglePass}
+                >
+                  {t("Change this account's password")}
+                </Menu.Item>
+                <Menu.Item
+                  disabled={!isEditable || isDevelopment}
+                  onClick={_toggleForget}
                 >
-                  <Menu.Item onClick={_toggleDerive}>
-                    {t('Derive account from source')}
-                  </Menu.Item>
-                  <Menu.Item disabled>
-                    {t('Change on-chain nickname')}
-                  </Menu.Item>
-                </Menu>
-              </Popup>
-            )}
+                  {t('Forget this account')}
+                </Menu.Item>
+                <Menu.Divider />
+                <ChainLock
+                  className='accounts--network-toggle'
+                  genesisHash={genesisHash}
+                  isDisabled={!isEditable || isExternal}
+                  onChange={_onGenesisChange}
+                  preventDefault
+                />
+              </Menu>
+            </Popup>
           </div>
-          {isEditable && !isExternal && (
-            <div className='others'>
-              <ChainLock
-                genesisHash={genesisHash}
-                onChange={_onGenesisChange}
-              />
-            </div>
-          )}
         </div>
       }
       className={className}
@@ -217,11 +209,6 @@ export default translate(
   styled(Account)`
     .accounts--Account-buttons {
       text-align: right;
-
-      .others {
-        margin-right: 0.125rem;
-        margin-top: 0.25rem;
-      }
     }
   `
 );

packages/app-accounts/src/Overview.tsx

@@ -3,13 +3,12 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { I18nProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 import { ComponentProps } from './types';
 
 import React, { useState } from 'react';
 import keyring from '@polkadot/ui-keyring';
-import accountObservable from '@polkadot/ui-keyring/observable/accounts';
-import { getLedger, isLedger, withMulti, withObservable } from '@polkadot/react-api';
+import { getLedger, isLedger } from '@polkadot/react-api';
+import { useAccounts } from '@polkadot/react-hooks';
 import { Button, CardGrid } from '@polkadot/react-components';
 
 import CreateModal from './modals/Create';
@@ -20,7 +19,6 @@ import Banner from './Banner';
 import translate from './translate';
 
 interface Props extends ComponentProps, I18nProps {
-  accounts?: SubjectInfo[];
 }
 
 // query the ledger for the address, adding it to the keyring
@@ -36,11 +34,12 @@ async function queryLedger (): Promise<void> {
   }
 }
 
-function Overview ({ accounts, onStatusChange, t }: Props): React.ReactElement<Props> {
+function Overview ({ onStatusChange, t }: Props): React.ReactElement<Props> {
+  const { allAccounts, hasAccounts } = useAccounts();
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [isImportOpen, setIsImportOpen] = useState(false);
   const [isQrOpen, setIsQrOpen] = useState(false);
-  const emptyScreen = !(isCreateOpen || isImportOpen || isQrOpen) && accounts && (Object.keys(accounts).length === 0);
+  const emptyScreen = !(isCreateOpen || isImportOpen || isQrOpen) && !hasAccounts;
 
   const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen);
   const _toggleImport = (): void => setIsImportOpen(!isImportOpen);
@@ -105,7 +104,7 @@ function Overview ({ accounts, onStatusChange, t }: Props): React.ReactElement<P
           onStatusChange={onStatusChange}
         />
       )}
-      {accounts && Object.keys(accounts).map((address): React.ReactNode => (
+      {allAccounts.map((address): React.ReactNode => (
         <Account
           address={address}
           key={address}
@@ -115,8 +114,4 @@ function Overview ({ accounts, onStatusChange, t }: Props): React.ReactElement<P
   );
 }
 
-export default withMulti(
-  Overview,
-  translate,
-  withObservable(accountObservable.subject, { propName: 'accounts' })
-);
+export default translate(Overview);