diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx index 57cb80bc2e..fb9b9e97fe 100644 --- a/packages/app-accounts/src/Account.tsx +++ b/packages/app-accounts/src/Account.tsx @@ -56,6 +56,7 @@ class Account extends React.PureComponent { buttons={this.renderButtons()} isEditable={isEditable} value={address} + withExplorer withIndex withTags > diff --git a/packages/app-address-book/src/Address.tsx b/packages/app-address-book/src/Address.tsx index 4d05f34808..30a613f55c 100644 --- a/packages/app-address-book/src/Address.tsx +++ b/packages/app-address-book/src/Address.tsx @@ -53,6 +53,7 @@ class Address extends React.PureComponent { buttons={this.renderButtons()} isEditable={isEditable} value={address} + withExplorer withIndex withTags > diff --git a/packages/app-explorer/src/BlockHeader/index.tsx b/packages/app-explorer/src/BlockHeader/index.tsx index 2bf73b7dac..aa977cc1da 100644 --- a/packages/app-explorer/src/BlockHeader/index.tsx +++ b/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 { 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 { ? undefined : this.renderDetails(value) } + { + withExplorer + ? + : undefined + } ); } diff --git a/packages/app-explorer/src/BlockInfo/ByHash.tsx b/packages/app-explorer/src/BlockInfo/ByHash.tsx index 78624c5ad4..482c05f67d 100644 --- a/packages/app-explorer/src/BlockInfo/ByHash.tsx +++ b/packages/app-explorer/src/BlockInfo/ByHash.tsx @@ -34,7 +34,10 @@ class BlockByHash extends React.PureComponent { return ( <>
- +
diff --git a/packages/app-explorer/src/BlockInfo/Extrinsics.tsx b/packages/app-explorer/src/BlockInfo/Extrinsics.tsx index c21d08fb48..5b4e20e7ae 100644 --- a/packages/app-explorer/src/BlockInfo/Extrinsics.tsx +++ b/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 { withHash /> + { + extrinsic.isSigned + ? + : null + } ); diff --git a/packages/ui-api/src/Api.tsx b/packages/ui-api/src/Api.tsx index a8492e0870..88183f8026 100644 --- a/packages/ui-api/src/Api.tsx +++ b/packages/ui-api/src/Api.tsx @@ -148,6 +148,7 @@ export default class Api extends React.PureComponent { value={{ api, apiDefaultTx, + currentChain: chain || '', isApiConnected, isApiReady: isApiReady && !!chain, isDevelopment, diff --git a/packages/ui-api/src/types.ts b/packages/ui-api/src/types.ts index 00087520c4..0ec1d88ae7 100644 --- a/packages/ui-api/src/types.ts +++ b/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, diff --git a/packages/ui-app/src/AddressRow.tsx b/packages/ui-app/src/AddressRow.tsx index d69cf5326f..a1b0e3412f 100644 --- a/packages/ui-app/src/AddressRow.tsx +++ b/packages/ui-app/src/AddressRow.tsx @@ -37,6 +37,7 @@ class AddressRow extends AddressSummary { {this.renderChildren()} + {this.renderExplorer()} ); } diff --git a/packages/ui-app/src/AddressSummary.tsx b/packages/ui-app/src/AddressSummary.tsx index f71b719de9..193b4d5437 100644 --- a/packages/ui-app/src/AddressSummary.tsx +++ b/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 { {this.renderTags()} {this.renderChildren()} + {this.renderExplorer()} ); } @@ -179,6 +182,24 @@ class AddressSummary extends React.PureComponent { : null; } + protected renderExplorer () { + const { value, withExplorer } = this.props; + + if (!withExplorer) { + return null; + } + + return ( +
+ +
+ ); + } + protected renderName () { const { isEditable } = this.props; const { isEditingName, name } = this.state; diff --git a/packages/ui-app/src/LinkPolkascan.tsx b/packages/ui-app/src/LinkPolkascan.tsx new file mode 100644 index 0000000000..637b930e09 --- /dev/null +++ b/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 { + render () { + const { className, currentChain, data, t, type } = this.props; + const extChain = CHAINS[currentChain]; + const extType = TYPES[type]; + + if (!extChain || !extType) { + return null; + } + + return ( + + ); + } +} + +export default withMulti( + styled(LinkPolkascan)` + margin-top: 1rem; + text-align: right; + `, + translate, + withApi +); diff --git a/packages/ui-app/src/index.tsx b/packages/ui-app/src/index.tsx index e4dbc79a15..46924ee4e9 100644 --- a/packages/ui-app/src/index.tsx +++ b/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'; diff --git a/packages/ui-app/src/styles/components.css b/packages/ui-app/src/styles/components.css index 95489954cc..82bf53bd13 100644 --- a/packages/ui-app/src/styles/components.css +++ b/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; & > * {