Fix explorer (v1), withObservable unload & democracy images

package.json

@@ -10,10 +10,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^0.100.0-beta.2",
-    "@polkadot/api-contract": "^0.100.0-beta.2",
+    "@polkadot/api": "^0.100.0-beta.7",
+    "@polkadot/api-contract": "^0.100.0-beta.7",
     "@polkadot/keyring": "^1.7.1",
-    "@polkadot/types": "^0.100.0-beta.2",
+    "@polkadot/types": "^0.100.0-beta.7",
     "@polkadot/util": "^1.7.1",
     "@polkadot/util-crypto": "^1.7.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -37,7 +37,7 @@
     "@babel/core": "^7.7.5",
     "@babel/register": "^7.7.4",
     "@babel/runtime": "^7.7.6",
-    "@polkadot/dev-react": "^0.32.0-beta.19",
+    "@polkadot/dev-react": "^0.32.13",
     "@polkadot/ts": "^0.1.88",
     "autoprefixer": "^9.7.1",
     "empty": "^0.10.1",

packages/app-accounts/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.39.0-beta.7",
-    "@polkadot/react-qr": "^0.48.0-beta.3",
+    "@polkadot/react-qr": "^0.48.0-beta.4",
     "@types/file-saver": "^2.0.0",
     "@types/yargs": "^13.0.2",
     "babel-plugin-module-resolver": "^3.1.1",

packages/app-contracts/package.json

@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.7.5",
-    "@polkadot/api-contract": "^0.100.0-beta.2",
+    "@polkadot/api-contract": "^0.100.0-beta.7",
     "@polkadot/react-components": "^0.39.0-beta.7"
   }
 }

packages/app-council/src/Motions/Motion.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { DerivedCouncilProposal } from '@polkadot/api-derive/types';
+import { DerivedCollectiveProposal } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
@@ -14,7 +14,7 @@ import { formatNumber } from '@polkadot/util';
 import translate from '../translate';
 
 interface Props extends I18nProps {
-  motion: DerivedCouncilProposal;
+  motion: DerivedCollectiveProposal;
 }
 
 function Motion ({ className, motion: { hash, proposal, votes }, t }: Props): React.ReactElement<Props> | null {

packages/app-council/src/Motions/index.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { DerivedCouncilProposals, DerivedCouncilProposal } from '@polkadot/api-derive/types';
+import { DerivedCollectiveProposals, DerivedCollectiveProposal } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
@@ -13,7 +13,7 @@ import Propose from './Propose';
 import translate from '../translate';
 
 interface Props extends I18nProps {
-  motions?: DerivedCouncilProposals;
+  motions?: DerivedCollectiveProposals;
 }
 
 function Proposals ({ className, motions, t }: Props): React.ReactElement<Props> {
@@ -24,7 +24,7 @@ function Proposals ({ className, motions, t }: Props): React.ReactElement<Props>
         ? (
           <Table>
             <Table.Body>
-              {motions?.map((motion: DerivedCouncilProposal): React.ReactNode => (
+              {motions?.map((motion: DerivedCollectiveProposal): React.ReactNode => (
                 <Motion
                   key={motion.hash.toHex()}
                   motion={motion}

packages/app-council/src/index.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { DerivedCouncilProposals } from '@polkadot/api-derive/types';
+import { DerivedCollectiveProposals } from '@polkadot/api-derive/types';
 import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
@@ -23,7 +23,7 @@ interface Props extends AppProps, BareProps, I18nProps {}
 function CouncilApp ({ basePath, className, t }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const { pathname } = useLocation();
-  const motions = useCall<DerivedCouncilProposals>(api.derive.council.proposals, []);
+  const motions = useCall<DerivedCollectiveProposals>(api.derive.council.proposals, []);
 
   return (
     <main className={className}>

packages/app-council/src/useCounter.ts

@@ -2,14 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { DerivedCouncilProposals } from '@polkadot/api-derive/types';
+import { DerivedCollectiveProposals } from '@polkadot/api-derive/types';
 
 import { useState, useEffect } from 'react';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
 export default function useCounter (): number {
   const { api, isApiReady } = useApi();
-  const motions = useCall<DerivedCouncilProposals>(isApiReady ? api.derive.council.proposals : undefined, []);
+  const motions = useCall<DerivedCollectiveProposals>(isApiReady ? api.derive.council.proposals : undefined, []);
   const [counter, setCounter] = useState(0);
 
   useEffect((): void => {

packages/app-democracy/src/Overview/Proposal.tsx

@@ -40,7 +40,7 @@ function Proposal ({ className, t, value: { balance, hash, index, proposal, prop
         {seconding.length !== 0 && (
           <details>
             <summary>
-              {t('Seconds ({{count}})', { replace: { count: seconds.length } })}
+              {t('Seconds ({{count}})', { replace: { count: seconding.length } })}
             </summary>
             {seconding.map((address, count): React.ReactNode => (
               <AddressMini

packages/app-treasury/src/Overview/Voting.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { DerivedCouncilProposal } from '@polkadot/api-derive/types';
+import { DerivedCollectiveProposal } from '@polkadot/api-derive/types';
 import { ProposalIndex, Hash } from '@polkadot/types/interfaces';
 import { I18nProps } from '@polkadot/react-components/types';
 
@@ -14,7 +14,7 @@ import { isBoolean } from '@polkadot/util';
 import translate from '../translate';
 
 interface Props extends I18nProps {
-  proposals: DerivedCouncilProposal[];
+  proposals: DerivedCollectiveProposal[];
 }
 
 interface Option {

packages/apps/package.json

@@ -16,7 +16,7 @@
     "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.39.0-beta.7",
     "@polkadot/react-signer": "^0.39.0-beta.7",
-    "@polkadot/ui-assets": "^0.48.0-beta.3",
+    "@polkadot/ui-assets": "^0.48.0-beta.4",
     "query-string": "^6.8.3"
   }
 }

packages/apps/src/Content/Status.tsx

@@ -6,19 +6,16 @@
 import { EventRecord } from '@polkadot/types/interfaces';
 import { KeyringOptions } from '@polkadot/ui-keyring/options/types';
 import { ActionStatus, QueueStatus, QueueTx, QueueAction$Add } from '@polkadot/react-components/Status/types';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React, { useEffect } from 'react';
-import keyringOption from '@polkadot/ui-keyring/options';
 import { Status as StatusDisplay } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
-import { withMulti, withObservable } from '@polkadot/react-api/hoc';
+import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 import { stringToU8a } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   optionsAll?: KeyringOptions;
   queueAction: QueueAction$Add;
   stqueue: QueueStatus[];
@@ -27,9 +24,11 @@ interface Props extends I18nProps {
 
 let prevEventHash: string;
 
-function Status ({ optionsAll, queueAction, stqueue, t, txqueue }: Props): React.ReactElement<Props> {
+export default function Status ({ optionsAll, queueAction, stqueue, txqueue }: Props): React.ReactElement<Props> {
   const { api, isApiReady } = useApi();
-  const events = useCall<EventRecord[]>(isApiReady ? api.query.system.events : undefined, []);
+  const { allAccounts } = useAccounts();
+  const { t } = useTranslation();
+  const events = useCall<EventRecord[]>(isApiReady ? api.query.system?.events : undefined, []);
 
   useEffect((): void => {
     const eventHash = xxhashAsHex(stringToU8a(JSON.stringify(events)));
@@ -40,13 +39,12 @@ function Status ({ optionsAll, queueAction, stqueue, t, txqueue }: Props): React
 
     prevEventHash = eventHash;
 
-    const addresses = optionsAll.account.map((account): string | null => account.value);
     const statusses = events && events
       .map(({ event: { data, method, section } }): ActionStatus | null => {
         if (section === 'balances' && method === 'Transfer') {
           const account = data[1].toString();
 
-          if (addresses.includes(account)) {
+          if (allAccounts.includes(account)) {
             return {
               account,
               action: `${section}.${method}`,
@@ -82,9 +80,3 @@ function Status ({ optionsAll, queueAction, stqueue, t, txqueue }: Props): React
     />
   );
 }
-
-export default withMulti(
-  Status,
-  translate,
-  withObservable(keyringOption.optionsSubject, { propName: 'optionsAll' })
-);

packages/apps/src/Content/index.tsx

@@ -2,8 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps as Props } from '@polkadot/react-components/types';
-
 import React, { useContext } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
@@ -12,9 +10,13 @@ import { StatusContext } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 
 import Status from './Status';
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import NotFound from './NotFound';
 
+interface Props {
+  className?: string;
+}
+
 const unknown = {
   display: {
     needsApi: undefined
@@ -23,8 +25,9 @@ const unknown = {
   name: ''
 };
 
-function Content ({ className, t }: Props): React.ReactElement<Props> {
+function Content ({ className }: Props): React.ReactElement<Props> {
   const location = useLocation();
+  const { t } = useTranslation();
   const { isApiConnected, isApiReady } = useApi();
   const { queueAction, stqueue, txqueue } = useContext(StatusContext);
   const app = location.pathname.slice(1) || '';
@@ -55,26 +58,23 @@ function Content ({ className, t }: Props): React.ReactElement<Props> {
   );
 }
 
-// React-router needs to be first, otherwise we have blocked updates
-export default translate(
-  styled(Content)`
-    background: #fafafa;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    height: 100%;
-    min-height: 100vh;
-    overflow-x: hidden;
-    overflow-y: auto;
-    width: 100%;
-    padding: 0 2rem;
+export default styled(Content)`
+  background: #fafafa;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+  min-height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+  padding: 0 2rem;
 
-    @media(max-width: 768px) {
-      padding: 0 0.5rem;
-    }
+  @media(max-width: 768px) {
+    padding: 0 0.5rem;
+  }
 
-    .connecting {
-      padding: 1rem 0;
-    }
-  `
-);
+  .connecting {
+    padding: 1rem 0;
+  }
+`;

packages/apps/src/translate.ts

@@ -2,6 +2,10 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { withTranslation } from 'react-i18next';
+import { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
+
+export function useTranslation (): UseTranslationResponse {
+  return useTranslationBase('apps');
+}
 
 export default withTranslation(['apps']);

packages/react-api/package.json

@@ -31,7 +31,7 @@
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
     "@babel/runtime": "^7.7.6",
-    "@polkadot/api": "^0.100.0-beta.2",
+    "@polkadot/api": "^0.100.0-beta.7",
     "@polkadot/extension-dapp": "^0.14.1",
     "edgeware-node-types": "^1.0.10",
     "rxjs-compat": "^6.5.3"

packages/react-api/src/hoc/observable.tsx

@@ -18,11 +18,11 @@ interface State extends CallState {
   subscriptions: any[]; // FIXME subscriptions
 }
 
-// FIXME proper types for attributes
-
 export default function withObservable<T, P> (observable: Observable<P>, { callOnResult, propName = 'value', transform = echoTransform }: Options = {}): HOC {
   return (Inner: React.ComponentType<any>, defaultProps: DefaultProps = {}, render?: RenderFn): React.ComponentType<any> => {
     return class WithObservable extends React.Component<any, State> {
+      private isActive = true;
+
       public state: State = {
         callResult: undefined,
         callUpdated: false,
@@ -49,14 +49,15 @@ export default function withObservable<T, P> (observable: Observable<P>, { callO
       }
 
       public componentWillUnmount (): void {
+        this.isActive = false;
         this.state.subscriptions.forEach((subscription): void =>
           subscription.unsubscribe()
         );
       }
 
       private triggerUpdate = (props: any, callResult?: T): void => {
         try {
-          if (isEqual(callResult, this.state.callResult)) {
+          if (!this.isActive || isEqual(callResult, this.state.callResult)) {
             return;
           }
 

packages/react-components/package.json

@@ -13,10 +13,10 @@
     "@babel/runtime": "^7.7.6",
     "@polkadot/keyring": "^1.7.1",
     "@polkadot/react-api": "^0.39.0-beta.7",
-    "@polkadot/react-identicon": "^0.48.0-beta.3",
+    "@polkadot/react-identicon": "^0.48.0-beta.4",
     "@polkadot/react-query": "^0.39.0-beta.7",
-    "@polkadot/ui-keyring": "^0.48.0-beta.3",
-    "@polkadot/ui-settings": "^0.48.0-beta.3",
+    "@polkadot/ui-keyring": "^0.48.0-beta.4",
+    "@polkadot/ui-settings": "^0.48.0-beta.4",
     "@types/chart.js": "^2.8.10",
     "@types/i18next": "^13.0.0",
     "@types/react-copy-to-clipboard": "^4.3.0",

packages/react-query/src/TimePeriod.tsx

@@ -16,7 +16,7 @@ interface Props extends BareProps {
 
 export default function TimePeriod ({ children, className, label, style }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const minimumPeriod = api.consts?.timestamp.minimumPeriod || useCall<Moment>(api.query.timestamp.minimumPeriod, []);
+  const minimumPeriod = api.consts?.timestamp?.minimumPeriod || useCall<Moment>(api.query.timestamp.minimumPeriod, []);
 
   return (
     <div

packages/react-signer/package.json

@@ -12,6 +12,6 @@
   "dependencies": {
     "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.39.0-beta.7",
-    "@polkadot/react-qr": "^0.48.0-beta.3"
+    "@polkadot/react-qr": "^0.48.0-beta.4"
   }
 }