diff --git a/common/components/BalanceSidebar/AccountInfo.tsx b/common/components/BalanceSidebar/AccountInfo.tsx index 9080c541..325e17fd 100644 --- a/common/components/BalanceSidebar/AccountInfo.tsx +++ b/common/components/BalanceSidebar/AccountInfo.tsx @@ -1,4 +1,4 @@ -import { Identicon, UnitDisplay } from 'components/ui'; +import { Identicon, UnitDisplay, Address, NewTabLink } from 'components/ui'; import { IWallet, Balance, TrezorWallet, LedgerWallet } from 'libs/wallet'; import React from 'react'; import translate from 'translations'; @@ -103,7 +103,9 @@ class AccountInfo extends React.Component {
-
{address}
+
+
+
{ diff --git a/common/components/CurrentCustomMessage.tsx b/common/components/CurrentCustomMessage.tsx index 6932955c..016c90e1 100644 --- a/common/components/CurrentCustomMessage.tsx +++ b/common/components/CurrentCustomMessage.tsx @@ -5,6 +5,7 @@ import { getCurrentTo, ICurrentTo } from 'selectors/transaction'; import { getAllTokens } from 'selectors/config'; import { getWalletInst } from 'selectors/wallet'; import { getAddressMessage } from 'config'; +import { Address } from 'components/ui'; import { Token } from 'types/network'; interface ReduxProps { @@ -72,7 +73,10 @@ class CurrentCustomMessageClass extends PureComponent {

- A message regarding {address}: + A message regarding{' '} + +

+ :

{msg.msg}

diff --git a/common/components/TransactionStatus/TransactionDataTable.tsx b/common/components/TransactionStatus/TransactionDataTable.tsx index 4e5d2a6c..5ced532e 100644 --- a/common/components/TransactionStatus/TransactionDataTable.tsx +++ b/common/components/TransactionStatus/TransactionDataTable.tsx @@ -1,6 +1,6 @@ import React from 'react'; import translate from 'translations'; -import { Identicon, UnitDisplay, NewTabLink } from 'components/ui'; +import { Identicon, UnitDisplay, NewTabLink, Address } from 'components/ui'; import { TransactionData, TransactionReceipt } from 'libs/nodes'; import { NetworkConfig } from 'types/network'; import './TransactionDataTable.scss'; @@ -98,7 +98,7 @@ const TransactionDataTable: React.SFC = ({ data, receipt, network }) => { data: ( - {data.from} +
) }, @@ -107,7 +107,7 @@ const TransactionDataTable: React.SFC = ({ data, receipt, network }) => { data: ( - {data.to} +
) }, @@ -141,7 +141,9 @@ const TransactionDataTable: React.SFC = ({ data, receipt, network }) => { label: translate('New contract address'), data: receipt && receipt.contractAddress && ( - {receipt.contractAddress} + +
+ ) }, { diff --git a/common/components/ui/Address.tsx b/common/components/ui/Address.tsx new file mode 100644 index 00000000..209c8452 --- /dev/null +++ b/common/components/ui/Address.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { toChecksumAddress } from 'ethereumjs-util'; +import NewTabLink from './NewTabLink'; +import { IWallet } from 'libs/wallet'; +import { BlockExplorerConfig } from 'types/network'; + +interface BaseProps { + explorer?: BlockExplorerConfig | null; +} + +interface AddressProps extends BaseProps { + address: string; +} + +interface WalletProps extends BaseProps { + wallet: IWallet; +} + +type Props = AddressProps | WalletProps; + +const isAddressProps = (props: Props): props is AddressProps => + typeof (props as AddressProps).address === 'string'; + +const Address: React.SFC = props => { + let addr = ''; + if (isAddressProps(props)) { + addr = props.address; + } else { + addr = props.wallet.getAddressString(); + } + addr = toChecksumAddress(addr); + + if (props.explorer) { + return {addr}; + } else { + return {addr}; + } +}; + +export default Address; diff --git a/common/components/ui/index.ts b/common/components/ui/index.ts index 6f979a2c..256c5d31 100644 --- a/common/components/ui/index.ts +++ b/common/components/ui/index.ts @@ -12,6 +12,7 @@ export { default as SwapDropdown } from './SwapDropdown'; export { default as Tooltip } from './Tooltip'; export { default as TitleBar } from './TitleBar'; export { default as HelpLink } from './HelpLink'; +export { default as Address } from './Address'; export * from './ConditionalInput'; export * from './Expandable'; export * from './InlineSpinner'; diff --git a/common/containers/Tabs/ENS/components/NameResolve/components/NameOwned.tsx b/common/containers/Tabs/ENS/components/NameResolve/components/NameOwned.tsx index 3140be60..19e698a7 100644 --- a/common/containers/Tabs/ENS/components/NameResolve/components/NameOwned.tsx +++ b/common/containers/Tabs/ENS/components/NameResolve/components/NameOwned.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { IOwnedDomainRequest } from 'libs/ens'; -import { NewTabLink } from 'components/ui'; +import { NewTabLink, Address } from 'components/ui'; const lookupLink = name => `https://etherscan.io/enslookup?q=${name}`; type ChildrenProps = any; @@ -40,7 +40,9 @@ export const NameOwned: React.SFC = ({ Owner: - {ownerAddress} + +
+ Highest Bidder (Deed Owner): @@ -50,7 +52,9 @@ export const NameOwned: React.SFC = ({ Resolved Address: - {resolvedAddress} + +
+ diff --git a/common/containers/Tabs/GenerateWallet/components/Keystore/EnterPassword.scss b/common/containers/Tabs/GenerateWallet/components/Keystore/EnterPassword.scss index 612b8d50..9cff932d 100644 --- a/common/containers/Tabs/GenerateWallet/components/Keystore/EnterPassword.scss +++ b/common/containers/Tabs/GenerateWallet/components/Keystore/EnterPassword.scss @@ -8,6 +8,7 @@ $pw-max-width: 40rem; } &-password { + display: block; position: relative; max-width: $pw-max-width; width: 100%; diff --git a/common/containers/Tabs/SendTransaction/components/WalletInfo.tsx b/common/containers/Tabs/SendTransaction/components/WalletInfo.tsx index 1c0241ef..6f9eba4f 100644 --- a/common/containers/Tabs/SendTransaction/components/WalletInfo.tsx +++ b/common/containers/Tabs/SendTransaction/components/WalletInfo.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { toChecksumAddress } from 'ethereumjs-util'; import translate, { translateRaw } from 'translations'; import { IWallet } from 'libs/wallet'; import { print } from 'components/PrintableWallet'; @@ -26,12 +27,12 @@ export default class WalletInfo extends React.PureComponent { }; public componentDidMount() { - this.setWalletAsyncState(this.props.wallet); + this.setStateFromWallet(this.props.wallet); } public componentWillReceiveProps(nextProps: Props) { if (this.props.wallet !== nextProps.wallet) { - this.setWalletAsyncState(nextProps.wallet); + this.setStateFromWallet(nextProps.wallet); } } @@ -114,9 +115,9 @@ export default class WalletInfo extends React.PureComponent { ); } - private async setWalletAsyncState(wallet: IWallet) { - const address = wallet.getAddressString(); - const privateKey = wallet.getPrivateKeyString ? await wallet.getPrivateKeyString() : ''; + private setStateFromWallet(wallet: IWallet) { + const address = toChecksumAddress(wallet.getAddressString()); + const privateKey = wallet.getPrivateKeyString ? wallet.getPrivateKeyString() : ''; this.setState({ address, privateKey }); } diff --git a/shared/types/network.d.ts b/shared/types/network.d.ts index cba0ced9..9332818e 100644 --- a/shared/types/network.d.ts +++ b/shared/types/network.d.ts @@ -2,7 +2,7 @@ import { StaticNetworksState, CustomNetworksState } from 'reducers/config/networ type StaticNetworkIds = 'ETH' | 'Ropsten' | 'Kovan' | 'Rinkeby' | 'ETC' | 'UBQ' | 'EXP'; -interface BlockExplorerConfig { +export interface BlockExplorerConfig { name: string; origin: string; txUrl(txHash: string): string;