Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
412 additions
and
313 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
packages/blockchain-wallet-v4-frontend/src/components/CopyClipboardButton/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import * as C from 'services/AlertService' | ||
| import { actions } from 'data' | ||
| import { bindActionCreators } from 'redux' | ||
| import { connect } from 'react-redux' | ||
| import CopyClipboard from './template' | ||
| import React from 'react' | ||
|
|
||
| interface CopyToClipboardProps { | ||
| address: string | ||
| alertActions: any | ||
| } | ||
|
|
||
| interface CopyToClipboardState { | ||
| active: boolean | ||
| } | ||
|
|
||
| class CopyToClipboardContainer extends React.PureComponent< | ||
| CopyToClipboardProps, | ||
| CopyToClipboardState | ||
| > { | ||
| constructor (props) { | ||
| super(props) | ||
| this.timeout = undefined | ||
| this.state = { active: false } | ||
| this.handleClick = this.handleClick.bind(this) | ||
| } | ||
|
|
||
| componentWillUnmount () { | ||
| clearTimeout(this.timeout) | ||
| } | ||
| timeout: number | undefined | ||
|
|
||
| handleClick () { | ||
| const { alertActions } = this.props | ||
| this.setState({ active: true }) | ||
| this.timeout = setTimeout(() => { | ||
| this.setState({ active: false }) | ||
| }, 2000) | ||
| alertActions.displaySuccess(C.COPY_LINK_CLIPBOARD_SUCCESS) | ||
| } | ||
|
|
||
| render () { | ||
| return ( | ||
| <CopyClipboard | ||
| active={this.state.active} | ||
| address={this.props.address} | ||
| handleClick={this.handleClick} | ||
| data-e2e={this.props['data-e2e']} | ||
| /> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| const mapDispatchToProps = dispatch => ({ | ||
| alertActions: bindActionCreators(actions.alerts, dispatch) | ||
| }) | ||
|
|
||
| export default connect(null, mapDispatchToProps)(CopyToClipboardContainer) |
50 changes: 50 additions & 0 deletions
50
packages/blockchain-wallet-v4-frontend/src/components/CopyClipboardButton/template.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { IconButton } from 'blockchain-info-components' | ||
| import CopyToClipBoard from 'react-copy-to-clipboard' | ||
| import React from 'react' | ||
| import styled from 'styled-components' | ||
|
|
||
| interface CopyButtonProps { | ||
| active: boolean | ||
| } | ||
|
|
||
| const CopyButton = styled(IconButton)<CopyButtonProps>` | ||
| width: 30px; | ||
| min-width: 0; | ||
| height: 30px; | ||
| border: none; | ||
| background: transparent; | ||
| &:hover { | ||
| border: none; | ||
| background: transparent; | ||
| } | ||
| > span { | ||
| margin-top: ${props => (props.active ? '-2px' : '-5px;')}; | ||
| margin-right: 0 !important; | ||
| font-size: ${props => (props.active ? '18px' : '20px')}; | ||
| color: ${props => | ||
| props.active ? props.theme['success'] : props.theme.grey400}; | ||
| } | ||
| ` | ||
|
|
||
| interface CopyClipboardProps { | ||
| active: boolean | ||
| address: string | ||
| handleClick: () => void | ||
| } | ||
|
|
||
| const CopyClipboard = (props: CopyClipboardProps) => { | ||
| const { active, address, handleClick } = props | ||
|
|
||
| return ( | ||
| <CopyToClipBoard text={address} onCopy={handleClick}> | ||
| <CopyButton | ||
| active={active} | ||
| name={active ? 'check' : 'copy-clipboard'} | ||
| color='grey100' | ||
| data-e2e='copyClipboardCopyButton' | ||
| /> | ||
| </CopyToClipBoard> | ||
| ) | ||
| } | ||
|
|
||
| export default CopyClipboard |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/DisplaySubTitle.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { Title } from 'components/Flyout' | ||
| import styled from 'styled-components' | ||
|
|
||
| const DisplaySubTitle = styled(Title)` | ||
| align-items: left; | ||
| font-weight: 500; | ||
| font-size: 14px; | ||
| color: ${props => props.theme.grey600}; | ||
| width: 100%; | ||
| ` | ||
|
|
||
| export default DisplaySubTitle |
12 changes: 12 additions & 0 deletions
12
packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/MultiRowContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import styled from 'styled-components' | ||
|
|
||
| const MultiRowContainer = styled.div` | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 230px; | ||
| color: ${props => props.theme.grey800}; | ||
| margin-left: 16px; | ||
| ` | ||
|
|
||
| export default MultiRowContainer |
11 changes: 10 additions & 1 deletion
11
packages/blockchain-wallet-v4-frontend/src/components/SimpleBuy/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,15 @@ | ||
| import Content from './Content' | ||
| import DisplayContainer from './DisplayContainer' | ||
| import DisplayIcon from './DisplayIcon' | ||
| import DisplaySubTitle from './DisplaySubTitle' | ||
| import DisplayTitle from './DisplayTitle' | ||
| import MultiRowContainer from './MultiRowContainer' | ||
|
|
||
| export { DisplayIcon, DisplayContainer, Content, DisplayTitle } | ||
| export { | ||
| DisplayIcon, | ||
| DisplayContainer, | ||
| Content, | ||
| DisplayTitle, | ||
| DisplaySubTitle, | ||
| MultiRowContainer | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.