add click to copy feature on safe page
This commit is contained in:
parent
dde724f475
commit
f2dedc4ad2
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue