External links from blocks/addresses/extrinsics to polkascan (#1230)

* External links from blocks/addresses to polkascan

* Ok, I give up... abs again :(

* Add extrinsic links

packages/app-accounts/src/Account.tsx

@@ -56,6 +56,7 @@ class Account extends React.PureComponent<Props> {
           buttons={this.renderButtons()}
           isEditable={isEditable}
           value={address}
+          withExplorer
           withIndex
           withTags
         >

packages/app-address-book/src/Address.tsx

@@ -53,6 +53,7 @@ class Address extends React.PureComponent<Props, State> {
           buttons={this.renderButtons()}
           isEditable={isEditable}
           value={address}
+          withExplorer
           withIndex
           withTags
         >

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

@@ -9,18 +9,19 @@ import './BlockHeader.css';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { HeaderExtended } from '@polkadot/api-derive';
-import { AddressMini } from '@polkadot/ui-app';
+import { AddressMini, LinkPolkascan } from '@polkadot/ui-app';
 import { formatNumber } from '@polkadot/util';
 
 type Props = BareProps & {
   isSummary?: boolean,
   value?: HeaderExtended,
+  withExplorer?: boolean,
   withLink?: boolean
 };
 
 export default class BlockHeader extends React.PureComponent<Props> {
   render () {
-    const { isSummary, value, withLink = false } = this.props;
+    const { isSummary, value, withExplorer, withLink } = this.props;
 
     if (!value) {
       return null;
@@ -52,6 +53,11 @@ export default class BlockHeader extends React.PureComponent<Props> {
             ? undefined
             : this.renderDetails(value)
         }
+        {
+          withExplorer
+            ? <LinkPolkascan data={hashHex} type='block' />
+            : undefined
+        }
       </article>
     );
   }

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

@@ -34,7 +34,10 @@ class BlockByHash extends React.PureComponent<Props> {
     return (
       <>
         <header>
-          <BlockHeader value={chain_getHeader} />
+          <BlockHeader
+            value={chain_getHeader}
+            withExplorer
+          />
         </header>
         <Extrinsics value={chain_getBlock.block.extrinsics} />
         <Events value={system_events} />

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

@@ -5,7 +5,7 @@
 import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
-import { AddressMini, Call } from '@polkadot/ui-app';
+import { AddressMini, Call, LinkPolkascan } from '@polkadot/ui-app';
 import { formatNumber } from '@polkadot/util';
 import { Extrinsic, Method } from '@polkadot/types';
 
@@ -74,6 +74,11 @@ class Extrinsics extends React.PureComponent<Props> {
               withHash
             />
           </details>
+          {
+            extrinsic.isSigned
+              ? <LinkPolkascan data={extrinsic.hash.toHex()} type='extrinsic' />
+              : null
+          }
         </article>
       </div>
     );

packages/ui-api/src/Api.tsx

@@ -148,6 +148,7 @@ export default class Api extends React.PureComponent<Props, State> {
         value={{
           api,
           apiDefaultTx,
+          currentChain: chain || '<unknown>',
           isApiConnected,
           isApiReady: isApiReady && !!chain,
           isDevelopment,

packages/ui-api/src/types.ts

@@ -18,6 +18,7 @@ export type BareProps = {
 export type ApiProps = {
   api: ApiPromise,
   apiDefaultTx: SubmittableExtrinsicFunction,
+  currentChain: string,
   isApiConnected: boolean,
   isApiReady: boolean,
   isDevelopment: boolean,

packages/ui-app/src/AddressRow.tsx

@@ -37,6 +37,7 @@ class AddressRow extends AddressSummary {
           </div>
         </div>
         {this.renderChildren()}
+        {this.renderExplorer()}
       </div>
     );
   }

packages/ui-app/src/AddressSummary.tsx

@@ -19,6 +19,7 @@ import BondedDisplay from './Bonded';
 import { classes, getAddrName, getAddrTags, toShortAddress } from './util';
 import CopyButton from './CopyButton';
 import IdentityIcon from './IdentityIcon';
+import LinkPolkascan from './LinkPolkascan';
 import NonceDisplay from './Nonce';
 import translate from './translate';
 
@@ -39,6 +40,7 @@ export type Props = I18nProps & {
   withAvailable?: boolean,
   withBalance?: boolean,
   withBonded?: boolean,
+  withExplorer?: boolean,
   withIcon?: boolean,
   withIndex?: boolean,
   withNonce?: boolean,
@@ -122,6 +124,7 @@ class AddressSummary extends React.PureComponent<Props, State> {
           {this.renderTags()}
         </div>
         {this.renderChildren()}
+        {this.renderExplorer()}
       </div>
     );
   }
@@ -179,6 +182,24 @@ class AddressSummary extends React.PureComponent<Props, State> {
       : null;
   }
 
+  protected renderExplorer () {
+    const { value, withExplorer } = this.props;
+
+    if (!withExplorer) {
+      return null;
+    }
+
+    return (
+      <div className='ui--AddressSummary-explorer'>
+        <LinkPolkascan
+          className='polkascan'
+          data={value}
+          type='address'
+        />
+      </div>
+    );
+  }
+
   protected renderName () {
     const { isEditable } = this.props;
     const { isEditingName, name } = this.state;

packages/ui-app/src/LinkPolkascan.tsx

@@ -0,0 +1,65 @@
+// Copyright 2017-2019 @polkadot/ui-app 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 { ApiProps } from '@polkadot/ui-api/types';
+import { I18nProps } from './types';
+
+import React from 'react';
+import styled from 'styled-components';
+import { withApi, withMulti } from '@polkadot/ui-api';
+
+import translate from './translate';
+
+export type LinkTypes = 'address' | 'block' | 'extrinsic';
+
+type Props = ApiProps & I18nProps & {
+  className?: string,
+  data: string,
+  type: LinkTypes
+};
+
+const BASE = 'https://polkascan.io/pre/';
+
+const CHAINS: { [index: string]: string } = {
+  'Alexander': 'alexander'
+};
+
+const TYPES: { [index: string]: string } = {
+  'address': '/module/account/',
+  'block': '/system/block/',
+  'extrinsic': '/system/extrinsic/'
+};
+
+class LinkPolkascan extends React.PureComponent<Props> {
+  render () {
+    const { className, currentChain, data, t, type } = this.props;
+    const extChain = CHAINS[currentChain];
+    const extType = TYPES[type];
+
+    if (!extChain || !extType) {
+      return null;
+    }
+
+    return (
+      <div className={className}>
+        <a
+          href={`${BASE}${extChain}${extType}${data}`}
+          rel='noopener'
+          target='_blank'
+        >
+          {t('View this {{type}} on Polkascan.io', { replace: { type } })}
+        </a>
+      </div>
+    );
+  }
+}
+
+export default withMulti(
+  styled(LinkPolkascan)`
+    margin-top: 1rem;
+    text-align: right;
+  `,
+  translate,
+  withApi
+);

packages/ui-app/src/index.tsx

@@ -40,6 +40,7 @@ export { default as InputTags } from './InputTags';
 export { default as Label } from './Label';
 export { default as LabelHelp } from './LabelHelp';
 export { default as Labelled } from './Labelled';
+export { default as LinkPolkascan } from './LinkPolkascan';
 export { default as Menu } from './Menu';
 export { default as Modal } from './Modal';
 export { default as Nonce } from './Nonce';

packages/ui-app/src/styles/components.css

@@ -159,8 +159,6 @@ button.ui.icon.iconButton {
 }
 
 .ui--AddressRow {
-  position: relative;
-
   &.inline {
     display: flex;
 
@@ -198,10 +196,21 @@ button.ui.icon.iconButton {
   }
 }
 
+.ui--AddressSummary-explorer {
+  content: ' ';
+  margin-top: 1rem;
+
+  .polkascan {
+    position: absolute;
+    bottom: 0.75rem;
+    right: 1rem;
+  }
+}
+
 .ui--AddressSummary-buttons {
   position: absolute;
-  right: -0.75rem;
-  top: -0.5rem;
+  right: 0.75rem;
+  top: 0.75rem;
 }
 
 .ui--AddressSummary .rx--updated {
@@ -407,12 +416,11 @@ button.ui.icon.iconButton {
 
 .ui--RecentlyOffline {
   position: absolute;
-  top: -0.5rem;
   font-size: 12px;
   cursor: help;
   display: flex;
   justify-content: center;
-  left: -0.5rem;
+  left: 1rem;
   width: 22px;
   height: 22px;
   padding: 0;
@@ -421,6 +429,7 @@ button.ui.icon.iconButton {
   border-radius: 16px;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
   text-align: center;
+  top: 1rem;
   transition: all ease .2s;
 
   & > * {