♻️ refactor transaction details modal into expanding panel
This commit is contained in:
Jeff Reiner
parent
ff6284459e
commit
d5679be56a
@ -1,69 +1,42 @@
|
||||
@import '../../variables.scss';
|
||||
@import "../../variables.scss";
|
||||
|
||||
.contextual-info {
|
||||
&__summary-wrapper {
|
||||
background-color: $concrete-gray;
|
||||
border-top-left-radius: 1rem;
|
||||
border-top-right-radius: 1rem;
|
||||
padding: 1rem;
|
||||
color: #737373;
|
||||
font-size: .75rem;
|
||||
color: $dove-gray;
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: $salmon-red;
|
||||
}
|
||||
|
||||
&__summary-modal {
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
bottom: 12rem;
|
||||
min-height: 12rem;
|
||||
max-height: 12rem;
|
||||
z-index: 2000;
|
||||
padding: 1rem;
|
||||
border-top-left-radius: 1rem;
|
||||
border-top-right-radius: 1rem;
|
||||
transition: 250ms ease-in-out;
|
||||
|
||||
@media only screen and (min-width : 768px) {
|
||||
max-width: 560px;
|
||||
position: absolute;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.swap__open-details-container {
|
||||
padding: 0.5rem 0;
|
||||
margin-bottom: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
&__details {
|
||||
background-color: $concrete-gray;
|
||||
padding: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
&__open-details-container {
|
||||
cursor: pointer;
|
||||
|
||||
@extend %row-nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: .75rem;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
color: $royal-blue;
|
||||
|
||||
span {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: .75rem;
|
||||
width: .75rem;
|
||||
height: 0.75rem;
|
||||
width: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__modal-button {
|
||||
padding: 0.5rem 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,70 +1,47 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import c from 'classnames';
|
||||
import { CSSTransitionGroup } from "react-transition-group";
|
||||
|
||||
import Modal from '../Modal';
|
||||
import DropdownBlue from "../../assets/images/dropdown-blue.svg";
|
||||
import DropupBlue from "../../assets/images/dropup-blue.svg";
|
||||
import './contextual-info.scss';
|
||||
|
||||
class ContextualInfo extends Component {
|
||||
static propTypes = {
|
||||
openModalText: PropTypes.string,
|
||||
openDetailsText: PropTypes.string,
|
||||
renderTransactionDetails: PropTypes.func,
|
||||
contextualInfo: PropTypes.string,
|
||||
modalClass: PropTypes.string,
|
||||
isError: PropTypes.bool,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
openModalText: 'Transaction Details',
|
||||
openDetailsText: 'Transaction Details',
|
||||
closeDetailsText: 'Hide Details',
|
||||
renderTransactionDetails() {},
|
||||
contextualInfo: '',
|
||||
modalClass: '',
|
||||
isError: false,
|
||||
};
|
||||
|
||||
state = {
|
||||
showDetailModal: false,
|
||||
showDetails: false,
|
||||
};
|
||||
|
||||
renderModal() {
|
||||
if (!this.state.showDetailModal) {
|
||||
renderDetails() {
|
||||
if (!this.state.showDetails) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { modalClass } = this.props;
|
||||
|
||||
return (
|
||||
<Modal key="modal" onClose={() => this.setState({ showDetailModal: false })}>
|
||||
<CSSTransitionGroup
|
||||
transitionName="summary-modal"
|
||||
transitionAppear={true}
|
||||
transitionLeave={true}
|
||||
transitionAppearTimeout={200}
|
||||
transitionLeaveTimeout={200}
|
||||
transitionEnterTimeout={200}
|
||||
>
|
||||
<div className={c('contextual-info__summary-modal', modalClass)}>
|
||||
<div
|
||||
key="open-details"
|
||||
className="contextual-info__open-details-container contextual-info__modal-button"
|
||||
onClick={() => this.setState({showDetailModal: false})}
|
||||
>
|
||||
<span>Transaction Details</span>
|
||||
<img src={DropupBlue} />
|
||||
</div>
|
||||
{this.props.renderTransactionDetails()}
|
||||
</div>
|
||||
</CSSTransitionGroup>
|
||||
</Modal>
|
||||
);
|
||||
<div className="contextual-info__details">
|
||||
{this.props.renderTransactionDetails()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
openModalText,
|
||||
openDetailsText,
|
||||
closeDetailsText,
|
||||
contextualInfo,
|
||||
isError,
|
||||
} = this.props;
|
||||
@ -81,12 +58,23 @@ class ContextualInfo extends Component {
|
||||
<div
|
||||
key="open-details"
|
||||
className="contextual-info__summary-wrapper contextual-info__open-details-container"
|
||||
onClick={() => this.setState({showDetailModal: true})}
|
||||
onClick={() => this.setState((prevState) => {
|
||||
return { showDetails: !prevState.showDetails }
|
||||
})}
|
||||
>
|
||||
<span>{openModalText}</span>
|
||||
<img src={DropdownBlue} />
|
||||
{!this.state.showDetails ? (
|
||||
<>
|
||||
<span>{openDetailsText}</span>
|
||||
<img src={DropdownBlue} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>{closeDetailsText}</span>
|
||||
<img src={DropupBlue} />
|
||||
</>
|
||||
)}
|
||||
</div>,
|
||||
this.renderModal()
|
||||
this.renderDetails()
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -559,6 +559,7 @@ class AddLiquidity extends Component {
|
||||
<OversizedPanel hideBottom>
|
||||
{ this.renderInfo() }
|
||||
</OversizedPanel>
|
||||
{ this.renderSummary(inputError, outputError) }
|
||||
<div className="pool__cta-container">
|
||||
<button
|
||||
className={classnames('pool__cta-btn', {
|
||||
@ -571,8 +572,7 @@ class AddLiquidity extends Component {
|
||||
Add Liquidity
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
this.renderSummary(inputError, outputError)
|
||||
</div>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@ -149,7 +149,7 @@ class CreateExchange extends Component {
|
||||
if (errorMessage) {
|
||||
return (
|
||||
<div className="create-exchange__summary-panel">
|
||||
<div className="create-exchange__summary-text">{errorMessage}</div>
|
||||
<div className="create-exchange__summary-text create-exchange--error">{errorMessage}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -200,6 +200,7 @@ class CreateExchange extends Component {
|
||||
</div>
|
||||
</div>
|
||||
</OversizedPanel>
|
||||
{ this.renderSummary() }
|
||||
<div className="pool__cta-container">
|
||||
<button
|
||||
className={classnames('pool__cta-btn', {
|
||||
@ -211,7 +212,6 @@ class CreateExchange extends Component {
|
||||
Create Exchange
|
||||
</button>
|
||||
</div>
|
||||
{ this.renderSummary() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -377,6 +377,7 @@ class RemoveLiquidity extends Component {
|
||||
</div>
|
||||
</OversizedPanel>
|
||||
{ this.renderOutput() }
|
||||
{ this.renderSummary(errorMessage) }
|
||||
<div className="pool__cta-container">
|
||||
<button
|
||||
className={classnames('pool__cta-btn', {
|
||||
@ -389,8 +390,7 @@ class RemoveLiquidity extends Component {
|
||||
Remove Liquidity
|
||||
</button>
|
||||
</div>
|
||||
</div>,
|
||||
this.renderSummary(errorMessage)
|
||||
</div>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@ -113,7 +113,9 @@
|
||||
}
|
||||
|
||||
&__item {
|
||||
margin-bottom: .5rem;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -173,20 +175,18 @@
|
||||
|
||||
.create-exchange {
|
||||
&__summary-panel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: $concrete-gray;
|
||||
width: 100%;
|
||||
color: $dove-gray;
|
||||
text-align: center;
|
||||
border-top-left-radius: .625rem;
|
||||
border-top-right-radius: .625rem;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
&__summary-text {
|
||||
padding: .75rem;
|
||||
font-size: .75rem;
|
||||
color: $dove-gray;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: $salmon-red;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -770,6 +770,7 @@ class Send extends Component {
|
||||
onChange={address => this.setState({recipient: address})}
|
||||
/>
|
||||
{ this.renderExchangeRate() }
|
||||
{ this.renderSummary(inputError, outputError) }
|
||||
<div className="swap__cta-container">
|
||||
<button
|
||||
className={classnames('swap__cta-btn', {
|
||||
@ -782,7 +783,6 @@ class Send extends Component {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{ this.renderSummary(inputError, outputError) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -743,6 +743,7 @@ class Swap extends Component {
|
||||
disableUnlock
|
||||
/>
|
||||
{ this.renderExchangeRate() }
|
||||
{ this.renderSummary(inputError, outputError) }
|
||||
<div className="swap__cta-container">
|
||||
<button
|
||||
className={classnames('swap__cta-btn', {
|
||||
@ -755,7 +756,6 @@ class Swap extends Component {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{ this.renderSummary(inputError, outputError) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
|
||||
&__cta-container {
|
||||
display: flex;
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
&__cta-btn {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user