Mortal/immortal extrinsics (#1393)

* show mortality

* NodeInfo

* NodeInfo

packages/app-explorer/src/BlockInfo/ByHash.tsx

@@ -41,7 +41,10 @@ class BlockByHash extends React.PureComponent<Props> {
           />
         </header>
         <Columar>
-          <Extrinsics value={chain_getBlock.block.extrinsics} />
+          <Extrinsics
+            blockNumber={chain_getHeader.blockNumber}
+            value={chain_getBlock.block.extrinsics}
+          />
           <Events value={system_events} />
           <Logs value={chain_getHeader.digest.logs} />
         </Columar>

packages/app-explorer/src/BlockInfo/Extrinsics.tsx

@@ -8,11 +8,12 @@ import React from 'react';
 import styled from 'styled-components';
 import { AddressMini, Call, Column, LinkPolkascan } from '@polkadot/ui-app';
 import { formatNumber } from '@polkadot/util';
-import { Extrinsic, Method } from '@polkadot/types';
+import { BlockNumber, Extrinsic, Method } from '@polkadot/types';
 
 import translate from '../translate';
 
 type Props = I18nProps & {
+  blockNumber?: BlockNumber,
   label?: React.ReactNode,
   value?: Array<Extrinsic> | null
 };
@@ -40,8 +41,14 @@ class Extrinsics extends React.PureComponent<Props> {
 
   // FIXME This is _very_ similar to what we have in democracy/Item
   private renderExtrinsic = (extrinsic: Extrinsic, index: number) => {
+    const { blockNumber, t } = this.props;
     const { meta, method, section } = Method.findFunction(extrinsic.callIndex);
 
+    let eraEnd;
+    if (extrinsic.signature.era.isMortalEra) {
+      eraEnd = extrinsic.signature.era.asMortalEra.death((blockNumber || new BlockNumber(0)).toNumber());
+    }
+
     return (
       <article key={`extrinsic:${index}`}>
         <div className='header'>
@@ -54,10 +61,22 @@ class Extrinsics extends React.PureComponent<Props> {
           <summary>{
             meta && meta.documentation
               ? meta.documentation.join(' ')
-              : 'Details'
+              : t('Details')
           }</summary>
           <Call
             className='details'
+            mortality={
+              eraEnd
+                ? t(
+                  `mortal${blockNumber ? ' - ends at #{{blockNumber}}' : ''}`,
+                  {
+                    replace: {
+                      blockNumber: (eraEnd && blockNumber) ? eraEnd.toString() : ''
+                    }
+                  }
+                )
+                : t('immortal')
+            }
             value={extrinsic}
             withHash
           />

packages/app-explorer/src/NodeInfo/index.tsx

@@ -61,6 +61,7 @@ class App extends React.PureComponent<Props, State> {
         />
         <Peers peers={info.peers} />
         <Extrinsics
+          blockNumber={info.blockNumber}
           label={t('pending extrinsics')}
           value={info.extrinsics}
         />
@@ -84,13 +85,14 @@ class App extends React.PureComponent<Props, State> {
     const { api } = this.props;
 
     try {
-      const [health, peers, extrinsics] = await Promise.all([
+      const [blockNumber, health, peers, extrinsics] = await Promise.all([
+        api.derive.chain.bestNumber(),
         api.rpc.system.health<Health>(),
         api.rpc.system.peers<Vector<PeerInfo>>(),
         api.rpc.author.pendingExtrinsics<PendingExtrinsics>()
       ]);
 
-      this.setInfo({ extrinsics, health, peers });
+      this.setInfo({ blockNumber, extrinsics, health, peers });
     } catch (error) {
       this.setInfo();
     }

packages/app-explorer/src/NodeInfo/types.ts

@@ -2,9 +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 { Health, PeerInfo, PendingExtrinsics } from '@polkadot/types';
+import { BlockNumber, Health, PeerInfo, PendingExtrinsics } from '@polkadot/types';
 
 export type Info = {
+  blockNumber?: BlockNumber,
   health?: Health | null,
   peers?: Array<PeerInfo> | null,
   extrinsics?: PendingExtrinsics | null

packages/ui-app/src/Call.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { IExtrinsic, IMethod } from '@polkadot/types/types';
-import { BareProps } from './types';
+import { BareProps, I18nProps } from './types';
 
 import React from 'react';
 import styled from 'styled-components';
@@ -12,11 +12,13 @@ import Params from '@polkadot/ui-params';
 
 import Static from './Static';
 import { classes } from './util';
+import translate from './translate';
 
-export type Props = BareProps & {
+export type Props = I18nProps & BareProps & {
   children?: React.ReactNode,
   value: IExtrinsic | IMethod,
-  withHash?: boolean
+  withHash?: boolean,
+  mortality?: string
 };
 
 const Wrapper = styled.div`
@@ -28,9 +30,9 @@ const Wrapper = styled.div`
   }
 `;
 
-export default class Call extends React.PureComponent<Props> {
+class Call extends React.PureComponent<Props> {
   render () {
-    const { children, className, style, value, withHash } = this.props;
+    const { children, className, style, mortality, value, withHash, t } = this.props;
     const params = Method.filterOrigin(value.meta).map(({ name, type }) => ({
       name: name.toString(),
       type: getTypeDef(type)
@@ -51,7 +53,26 @@ export default class Call extends React.PureComponent<Props> {
         {children}
         {
           hash
-            ? <Static className='hash' label='extrinsic hash'>{hash.toHex()}</Static>
+            ? (
+              <Static
+                className='hash'
+                label={t('extrinsic hash')}
+              >
+                {hash.toHex()}
+              </Static>
+            )
+            : null
+        }
+        {
+          mortality
+            ? (
+              <Static
+                className='mortality'
+                label={t('mortality')}
+              >
+                {mortality}
+              </Static>
+            )
             : null
         }
         <Params
@@ -63,3 +84,5 @@ export default class Call extends React.PureComponent<Props> {
     );
   }
 }
+
+export default translate(Call);