add click to copy feature on safe page

This commit is contained in:
mmv 2019-03-12 17:46:35 +04:00
parent dde724f475
commit f2dedc4ad2
3 changed files with 38 additions and 25 deletions

View File

@ -13,7 +13,10 @@ import Paragraph from '~/components/layout/Paragraph'
import NoSafe from '~/components/NoSafe' import NoSafe from '~/components/NoSafe'
import { type SelectorProps } from '~/routes/safe/container/selector' import { type SelectorProps } from '~/routes/safe/container/selector'
import { openAddressInEtherScan } from '~/logic/wallets/getWeb3' import { openAddressInEtherScan } from '~/logic/wallets/getWeb3'
import { sm, xs, secondary, smallFontSize } from '~/theme/variables' import {
sm, xs, secondary, smallFontSize,
} from '~/theme/variables'
import { copyToClipboard } from '~/utils/clipboard'
import Balances from './Balances' import Balances from './Balances'
type Props = SelectorProps & { type Props = SelectorProps & {
@ -74,10 +77,16 @@ class Layout extends React.Component<Props, State> {
this.setState({ value }) this.setState({ value })
} }
copyAddress = () => {
const { safe } = this.props
if (safe.address) {
copyToClipboard(safe.address)
}
}
render() { render() {
const { const { safe, provider, network, classes, granted, tokens, activeTokens } = this.props
safe, provider, network, classes, granted, tokens, activeTokens,
} = this.props
const { value } = this.state const { value } = this.state
if (!safe) { if (!safe) {
@ -92,15 +101,15 @@ class Layout extends React.Component<Props, State> {
<Identicon address={address} diameter={50} /> <Identicon address={address} diameter={50} />
<Block className={classes.name}> <Block className={classes.name}>
<Row> <Row>
<Heading tag="h2" color="secondary">{safe.get('name')}</Heading> <Heading tag="h2" color="secondary">
{ !granted && {safe.get('name')}
<Block className={classes.readonly} > </Heading>
Read Only {!granted && <Block className={classes.readonly}>Read Only</Block>}
</Block>
}
</Row> </Row>
<Block align="center" className={classes.user}> <Block align="center" className={classes.user}>
<Paragraph size="md" color="disabled" noMargin>{address}</Paragraph> <Paragraph size="md" color="disabled" onClick={this.copyAddress} title="Click to copy" noMargin>
{address}
</Paragraph>
<OpenInNew <OpenInNew
className={classes.open} className={classes.open}
style={openIconStyle} style={openIconStyle}
@ -110,25 +119,16 @@ class Layout extends React.Component<Props, State> {
</Block> </Block>
</Block> </Block>
<Row> <Row>
<Tabs <Tabs value={value} onChange={this.handleChange} indicatorColor="secondary" textColor="secondary">
value={value}
onChange={this.handleChange}
indicatorColor="secondary"
textColor="secondary"
>
<Tab label="Balances" /> <Tab label="Balances" />
<Tab label="Transactions" /> <Tab label="Transactions" />
<Tab label="Settings" /> <Tab label="Settings" />
</Tabs> </Tabs>
</Row> </Row>
<Hairline color="#c8ced4" /> <Hairline color="#c8ced4" />
{value === 0 && {value === 0 && (
<Balances <Balances tokens={tokens} activeTokens={activeTokens} granted={granted} safeAddress={address} />
tokens={tokens} )}
activeTokens={activeTokens}
granted={granted}
safeAddress={address}
/>}
</React.Fragment> </React.Fragment>
) )
} }

13
src/utils/clipboard.js Normal file
View File

@ -0,0 +1,13 @@
// @flow
export const copyToClipboard = (text: string) => {
if (!navigator.clipboard) {
return
}
try {
navigator.clipboard.writeText(text)
} catch (err) {
console.error(err.message)
}
}