status-im
/
status-teller-network
mirror of https://github.com/status-im/status-teller-network.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

show fund button if tokens are approved

This commit is contained in:
Richard Ramos 2019-03-28 18:12:32 -04:00
parent 00711e477d
commit f42e527d45
3 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/js/features/escrow/selectors.js
View File

@ -11,7 +11,6 @@ export const getCreateEscrowId = state => state.escrow.createEscrowId;
export const getTrades = (state) => {
const escrows = state.escrow.escrows || [];
return escrows.map((escrow) => {
const token = Object.values(state.network.tokens).find((token) => web3.utils.toChecksumAddress(token.address) === web3.utils.toChecksumAddress(escrow.offer.asset));
return {
...escrow,

18
app/js/pages/Escrow/components/CardEscrowSeller.jsx
View File

@ -53,7 +53,7 @@ const Funding = () => (
</React.Fragment>
);
const PreFund = ({amount, asset, fee, showApproveScreen}) => (
const PreFund = ({amount, asset, fee, showApproveScreen, showFundButton}) => (
<React.Fragment>
<span className="bg-dark text-white p-3 rounded-circle">
<img src={two} alt="two" />
@ -64,7 +64,7 @@ const PreFund = ({amount, asset, fee, showApproveScreen}) => (
<p className="h2">+ our fee</p>
<p className="h2 text-success">{fromTokenDecimals(fee, 18)} SNT</p>
</Fragment> }
<Button color="primary" className="btn-lg mt-3" onClick={showApproveScreen}>Fund</Button>
<Button color="primary" className="btn-lg mt-3" onClick={showApproveScreen}>{showFundButton ? 'Fund' : 'Approve Token' }</Button>
</React.Fragment>
);
@ -98,12 +98,15 @@ class CardEscrowSeller extends Component {
componentDidMount(){
const escrow = this.props.escrow;
const showFundButton = this.props.showFundButton;
let step;
switch(escrow.status){
case 'waiting':
default:
step = 1;
}
this.setState({step});
}
@ -115,13 +118,15 @@ class CardEscrowSeller extends Component {
}
render(){
const step = this.state.step;
const {escrow, fee, showApproveScreen} = this.props;
let step = this.state.step;
const {escrow, fee, showApproveScreen, showFundButton} = this.props;
if(showFundButton) step = 2;
let component;
switch(step){
case 2:
component = <PreFund amount={escrow.tradeAmount} asset={escrow.token} fee={fee} showApproveScreen={showApproveScreen} />;
component = <PreFund showFundButton={showFundButton} amount={escrow.tradeAmount} asset={escrow.token} fee={fee} showApproveScreen={showApproveScreen} />;
break;
case 1:
default:
@ -140,7 +145,8 @@ class CardEscrowSeller extends Component {
CardEscrowSeller.propTypes = {
escrow: PropTypes.object,
fee: PropTypes.string,
showApproveScreen: PropTypes.func
showApproveScreen: PropTypes.func,
showFundButton: PropTypes.bool
};
export default CardEscrowSeller;

25
app/js/pages/Escrow/index.jsx
View File

@ -25,16 +25,15 @@ import approval from '../../features/approval';
const {toBN, toChecksumAddress} = web3.utils;
class Escrow extends Component {
constructor(props){
super(props);
this.loadData(props);
componentDidMount(){
this.loadData(this.props);
}
loadData(props){
props.getEscrow(props.escrowId);
props.getFee();
props.getSNTAllowance();
props.getTokenAllowance(props.escrow.offer.asset);
if(props.escrow) props.getTokenAllowance(props.escrow.offer.asset);
}
state = {
@ -46,7 +45,7 @@ class Escrow extends Component {
}
componentDidUpdate(prevProps) {
if (prevProps.loading && !this.props.loading) { // Reload allowance information
if ((prevProps.loading && !this.props.loading) || (prevProps.escrow === null && this.props.escrow !== null)) { // Reload allowance information
this.loadData(this.props);
}
}
@ -92,14 +91,17 @@ class Escrow extends Component {
const isSNTapproved = toBN(sntAllowance).gte(toBN(requiredSNT));
const shouldResetSNT = toBN(sntAllowance).gt(toBN(0)) && toBN(requiredSNT).lt(toBN(sntAllowance));
const token = Object.keys(tokens).map(t => tokens[t]).find(x => toChecksumAddress(x.address) === toChecksumAddress(escrow.offer.asset));
const requiredToken = escrow.tradeAmount;
const isTokenApproved = toBN(tokenAllowance).gte(toBN(requiredToken));
const shouldResetToken = toBN(tokenAllowance).gt(toBN(0)) && toBN(requiredToken).lt(toBN(tokenAllowance));
const isTokenApproved = token.address === zeroAddress || (tokenAllowance !== null && toBN(tokenAllowance).gte(toBN(requiredToken)));
const shouldResetToken = token.address !== zeroAddress && tokenAllowance !== null && toBN(tokenAllowance).gt(toBN(0)) && toBN(requiredToken).lt(toBN(tokenAllowance));
const isBuyer = false;// escrow.buyer === address;
const offer = this.getOffer(escrow, isBuyer);
const token = Object.keys(tokens).map(t => tokens[t]).find(x => toChecksumAddress(x.address) === toChecksumAddress(escrow.offer.asset));
let showFundButton = isSNTapproved && isTokenApproved; // TODO: All required tokens approved. Show fund button and call the escrow function. See above
// Show token approval UI
if(showApproveFundsScreen) {
@ -110,20 +112,23 @@ class Escrow extends Component {
if(escrow.offer.asset !== zeroAddress) { // A token
if(toChecksumAddress(escrow.offer.asset) === toChecksumAddress(tokens.SNT.address)){
alert("Call escrow.fund with SNT amount");
showFundButton = true;
} else {
if(!isTokenApproved || shouldResetToken) return <ApproveTokenFunds token={token} handleApprove={this.handleApprove(requiredToken, token.address)} handleReset={this.handleReset(token.address)} tokenAllowance={tokenAllowance} requiredToken={requiredToken} shouldResetToken={shouldResetToken} />;
alert("Call escrow.approveAndCall with custom token");
showFundButton = true;
}
} else {
// ETH
alert("Call escrow.fund with ETH amount");
showFundButton = true;
}
}
}
return (
<div className="escrow">
{ isBuyer ? <CardEscrowBuyer /> : <CardEscrowSeller escrow={escrow} fee={fee} showApproveScreen={this.showApproveScreen} /> }
{ isBuyer ? <CardEscrowBuyer /> : <CardEscrowSeller escrow={escrow} fee={fee} showFundButton={showFundButton} showApproveScreen={this.showApproveScreen} /> }
<EscrowDetail escrow={escrow} />
<Row className="bg-secondary py-4 mt-4">
<Col>