diff --git a/app/components/wallet-address.js b/app/components/wallet-address.js index 5e23ae2..24c8c10 100644 --- a/app/components/wallet-address.js +++ b/app/components/wallet-address.js @@ -1,14 +1,11 @@ // @flow -import React, { Component } from 'react'; +import React, { PureComponent } from 'react'; import styled from 'styled-components'; import { ColumnComponent } from './column'; -import { Button } from './button'; import { QRCode } from './qrcode'; -import { truncateAddress } from '../utils/truncate-address'; - import eyeIcon from '../assets/images/eye.png'; const AddressWrapper = styled.div` @@ -45,44 +42,60 @@ const QRCodeWrapper = styled.div` width: 100%; `; +const IconButton = styled.button` + background: transparent; + cursor: pointer; + outline: none; +`; + +const IconImage = styled.img` + max-width: 15px; +`; + type Props = { address: string, }; type State = { - isVisible: boolean, + showQRCode: boolean, }; -export class WalletAddress extends Component { +export class WalletAddress extends PureComponent { state = { - isVisible: false, + showQRCode: false, }; - show = () => this.setState(() => ({ isVisible: true })); + show = () => this.setState(() => ({ showQRCode: true })); - hide = () => this.setState(() => ({ isVisible: false })); + hide = () => this.setState(() => ({ showQRCode: false })); render() { const { address } = this.props; - const { isVisible } = this.state; - const toggleVisibility = isVisible ? this.hide : this.show; + const { showQRCode } = this.state; + const toggleVisibility = showQRCode ? this.hide : this.show; return ( {}} onFocus={event => event.currentTarget.select()} /> -