Skip to content

I
interface
Commit 86d5b334 authored by Hayden Adams's avatar Hayden Adams Committed by GitHub
Browse files
Options

Merge pull request #185 from Uniswap/new-transaction-details 

refactor transaction details modal into expanding panel
parents ff628445 38f13c4e
Hide whitespace changes
Inline Side-by-side
Showing with 78 additions and 152 deletions
src/components/ContextualInfo/contextual-info.scss
View file @ 86d5b334
@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;
img {
height: .75rem;
width: .75rem;
span {
margin-right: 12px;
}
}
&__modal-button {
padding: 0.5rem 0;
margin-bottom: 1rem;
img {
height: 0.75rem;
width: 0.75rem;
}
}
}
src/components/ContextualInfo/index.js
View file @ 86d5b334
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()
]
}
}
......
src/pages/Pool/AddLiquidity.js
View file @ 86d5b334
......@@ -430,7 +430,6 @@ class AddLiquidity extends Component {
key="context-info"
contextualInfo={contextualInfo}
isError={isError}
modalClass="pool__summary-modal"
renderTransactionDetails={this.renderTransactionDetails}
/>
);
......@@ -457,10 +456,10 @@ class AddLiquidity extends Component {
if (this.isNewExchange()) {
return (
<div>
<div className="pool__summary-modal__item">You are adding {b(`${inputValue} ETH`)} and {b(`${outputValue} ${label}`)} to the liquidity pool.</div>
<div className="pool__summary-modal__item">You are setting the initial exchange rate to {b(`1 ETH = ${BN(outputValue).dividedBy(inputValue).toFixed(4)} ${label}`)}.</div>
<div className="pool__summary-modal__item">You will mint {b(`${inputValue} liquidity tokens`)}.</div>
<div className="pool__summary-modal__item">Current total supply of liquidity tokens is 0.</div>
<div className="pool__summary-item">You are adding {b(`${inputValue} ETH`)} and {b(`${outputValue} ${label}`)} to the liquidity pool.</div>
<div className="pool__summary-item">You are setting the initial exchange rate to {b(`1 ETH = ${BN(outputValue).dividedBy(inputValue).toFixed(4)} ${label}`)}.</div>
<div className="pool__summary-item">You will mint {b(`${inputValue} liquidity tokens`)}.</div>
<div className="pool__summary-item">Current total supply of liquidity tokens is 0.</div>
</div>
);
}
......@@ -475,10 +474,10 @@ class AddLiquidity extends Component {
return (
<div>
<div className="pool__summary-modal__item">You are adding between {b(`${+BN(inputValue).toFixed(7)} ETH`)} and {b(`${+minOutput.toFixed(7)} - ${+maxOutput.toFixed(7)} ${label}`)} into the liquidity pool.</div>
<div className="pool__summary-modal__item">You will mint {b(+liquidityMinted.toFixed(7))} liquidity tokens.</div>
<div className="pool__summary-modal__item">Current total supply of liquidity tokens is {b(+adjTotalSupply.toFixed(7))}</div>
<div className="pool__summary-modal__item">At current exchange rate, each pool token is worth {b(+ethReserve.dividedBy(totalSupply).toFixed(7))} ETH and {b(+tokenReserve.dividedBy(totalSupply).toFixed(7))} {label}</div>
<div className="pool__summary-item">You are adding between {b(`${+BN(inputValue).toFixed(7)} ETH`)} and {b(`${+minOutput.toFixed(7)} - ${+maxOutput.toFixed(7)} ${label}`)} into the liquidity pool.</div>
<div className="pool__summary-item">You will mint {b(+liquidityMinted.toFixed(7))} liquidity tokens.</div>
<div className="pool__summary-item">Current total supply of liquidity tokens is {b(+adjTotalSupply.toFixed(7))}</div>
<div className="pool__summary-item">At current exchange rate, each pool token is worth {b(+ethReserve.dividedBy(totalSupply).toFixed(7))} ETH and {b(+tokenReserve.dividedBy(totalSupply).toFixed(7))} {label}</div>
</div>
);
}
......@@ -559,6 +558,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 +571,7 @@ class AddLiquidity extends Component {
Add Liquidity
</button>
</div>
</div>,
this.renderSummary(inputError, outputError)
</div>
];
}
}
......
src/pages/Pool/CreateExchange.js
View file @ 86d5b334
......@@ -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>
);
}
......
src/pages/Pool/RemoveLiquidity.js
View file @ 86d5b334
......@@ -185,7 +185,6 @@ class RemoveLiquidity extends Component {
key="context-info"
contextualInfo={contextualInfo}
isError={isError}
modalClass="pool__summary-modal"
renderTransactionDetails={this.renderTransactionDetails}
/>
);
......@@ -229,10 +228,10 @@ class RemoveLiquidity extends Component {
return (
<div>
<div className="pool__summary-modal__item">You are removing between {b(`${+BN(ethWithdrawn).toFixed(7)} ETH`)} and {b(`${+minTokenWithdrawn} - ${+maxTokenWithdrawn} ${label}`)} into the liquidity pool.</div>
<div className="pool__summary-modal__item">You will remove {b(+input)} liquidity tokens.</div>
<div className="pool__summary-modal__item">Current total supply of liquidity tokens is {b(+adjTotalSupply.toFixed(7))}</div>
<div className="pool__summary-modal__item">At current exchange rate, each pool token is worth {b(+ethReserve.dividedBy(totalSupply).toFixed(7))} ETH and {b(+tokenReserve.dividedBy(totalSupply).toFixed(7))} {label}</div>
<div className="pool__summary-item">You are removing between {b(`${+BN(ethWithdrawn).toFixed(7)} ETH`)} and {b(`${+minTokenWithdrawn} - ${+maxTokenWithdrawn} ${label}`)} into the liquidity pool.</div>
<div className="pool__summary-item">You will remove {b(+input)} liquidity tokens.</div>
<div className="pool__summary-item">Current total supply of liquidity tokens is {b(+adjTotalSupply.toFixed(7))}</div>
<div className="pool__summary-item">At current exchange rate, each pool token is worth {b(+ethReserve.dividedBy(totalSupply).toFixed(7))} ETH and {b(+tokenReserve.dividedBy(totalSupply).toFixed(7))} {label}</div>
</div>
);
}
......@@ -377,6 +376,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 +389,7 @@ class RemoveLiquidity extends Component {
Remove Liquidity
</button>
</div>
</div>,
this.renderSummary(errorMessage)
</div>
];
}
}
......
src/pages/Pool/pool.scss
View file @ 86d5b334
......@@ -80,39 +80,8 @@
}
}
&__summary-modal {
background-color: $white;
position: relative;
bottom: 20rem;
min-height: 20rem;
max-height: 20rem;
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;
}
&__item {
&__summary-item {
&:not(:last-child) {
margin-bottom: .5rem;
}
}
......@@ -173,20 +142,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;
}
}
......
src/pages/Send/index.js
View file @ 86d5b334
......@@ -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>
);
}
......
src/pages/Swap/index.js
View file @ 86d5b334
......@@ -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>
);
}
......
src/pages/Swap/swap.scss
View file @ 86d5b334
......@@ -54,7 +54,7 @@
&__cta-container {
display: flex;
margin-top: 1.5rem;
margin-top: 1rem;
}
&__cta-btn {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment