From 9c83b61051013a8a2ffb23cfb57b0322f5c62335 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Neves?= Date: Sun, 10 Feb 2019 10:28:08 -0500 Subject: [PATCH 01/15] chore: fix unit test url copy --- __tests__/components/qrcode.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/__tests__/components/qrcode.test.js b/__tests__/components/qrcode.test.js index 7960b31..229257f 100644 --- a/__tests__/components/qrcode.test.js +++ b/__tests__/components/qrcode.test.js @@ -11,7 +11,7 @@ afterEach(cleanup); describe('', () => { test('should render qrcode component correctly', () => { const { queryByTestId } = render( - , + , ); expect(queryByTestId('QRCode')).toBeInTheDocument(); From 45658e2ef9a299523c4baedb2819195534d37171 Mon Sep 17 00:00:00 2001 From: Andre Neves Date: Sun, 10 Feb 2019 11:49:24 -0500 Subject: [PATCH 02/15] refactor: WalletAddress component refactoring based on feedback chore: removing second click for UI on address and QRCode" --- app/components/wallet-address.js | 51 ++++++++++++++++++++------------ 1 file changed, 32 insertions(+), 19 deletions(-) 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()} /> -