Skip to content

Commit

Permalink
Merge 4ee9c65 into ffa90d6
Browse files Browse the repository at this point in the history
  • Loading branch information
@fernandomg
fernandomg committed Mar 13, 2018
2 parents ffa90d6 + 4ee9c65 commit 7b78163
Show file tree
Hide file tree
Showing 6 changed files with 273 additions and 157 deletions.
2 changes: 1 addition & 1 deletion src/assets/stylesheets/application.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/assets/stylesheets/application/invest.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
height: 180px;
border-radius: 50%;
background-color: #fff;
line-height: 180px;
line-height: 230px;
text-align: center;

&-inner {
Expand Down
128 changes: 32 additions & 96 deletions src/components/crowdsale/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,105 +100,41 @@ export function findCurrentContractRecursively(i, firstCrowdsaleContract, cb) {
.catch(err => console.log(err))
}

export function getCrowdsaleTargetDates($this, cb) {
let propsCount = 0;
let cbCount = 0;
let state = $this.state;
const { web3 } = web3Store

for (let i = 0; i < contractStore.crowdsale.addr.length; i++) {
let crowdsaleAddr = contractStore.crowdsale.addr[i];
attachToContract(contractStore.crowdsale.abi, crowdsaleAddr)
.then(crowdsaleContract => { // eslint-disable-line no-loop-func
console.log("attach to crowdsale contract");

if (!crowdsaleContract) return noContractAlert();

if (crowdsaleContract.methods.startBlock) {
propsCount++;
crowdsaleContract.methods.startBlock().call((err, startBlock) => {
cbCount++;
if (err) return console.log(err);

console.log("startBlock: " + startBlock);
if (!crowdsalePageStore.startBlock || crowdsalePageStore.startBlock > startBlock)
crowdsalePageStore.setProperty('startBlock', startBlock);
if (propsCount === cbCount) {
state.loading = false;
$this.setState(state, cb);
}
});
}

if (crowdsaleContract.methods.startsAt) {
propsCount++;
crowdsaleContract.methods.startsAt().call((err, startDate) => {
cbCount++;
if (err) return console.log(err);

console.log("startDate: " + startDate * 1000);
if (!crowdsalePageStore.startDate || crowdsalePageStore.startDate > startDate * 1000)
crowdsalePageStore.startDate = startDate * 1000;
if (propsCount === cbCount) {
state.loading = false;
$this.setState(state, cb);
}
});
}

if (crowdsaleContract.methods.endBlock) {
propsCount++;
crowdsaleContract.methods.endBlock().call((err, endBlock) => {
cbCount++;
if (err) return console.log(err);

console.log("endBlock: " + endBlock);

if (!crowdsalePageStore.endBlock || crowdsalePageStore.endBlock < endBlock) crowdsalePageStore.endBlock = endBlock;

web3.eth.getBlockNumber((err, curBlock) => {
if (err) return console.log(err);

console.log("curBlock: " + curBlock);
let blocksDiff = parseInt($this.crowdsalePageStore.endBlock, 10) - parseInt(curBlock, 10);

console.log("blocksDiff: " + blocksDiff);
let blocksDiffInSec = blocksDiff * state.blockTimeGeneration;

console.log("blocksDiffInSec: " + blocksDiffInSec);
state.seconds = blocksDiffInSec;

if (propsCount === cbCount) {
state.loading = false;
$this.setState(state, cb);
}
});
});
}

if (crowdsaleContract.methods.endsAt) {
propsCount++;
crowdsaleContract.methods.endsAt().call((err, endDate) => {
cbCount++;
if (err) return console.log(err);

console.log("endDate: " + endDate * 1000);
export function getCrowdsaleTargetDates() {
return contractStore.crowdsale.addr.reduce((promise, address) => {
return promise.then(() => {
return attachToContract(contractStore.crowdsale.abi, address)
.then(contract => {
if (!contract) return Promise.reject(noContractAlert())

const { methods } = contract

const whenStartsAt = methods.startsAt ? methods.startsAt().call() : Promise.resolve()
const whenEndsAt = methods.endsAt ? methods.endsAt().call() : Promise.resolve()

return Promise.all([whenStartsAt, whenEndsAt])
.then(([startsAt, endsAt]) => {
const startsAtMilliseconds = startsAt * 1000
const endsAtMilliseconds = endsAt * 1000

crowdsalePageStore.setTier({
startDate: startsAtMilliseconds,
endDate: endsAtMilliseconds
})

if (!crowdsalePageStore.endDate || crowdsalePageStore.endDate < endDate * 1000) {
crowdsalePageStore.setProperty('endDate', endDate * 1000)
}
console.log("startDate:", startsAtMilliseconds)
if (!crowdsalePageStore.startDate || crowdsalePageStore.startDate > startsAtMilliseconds)
crowdsalePageStore.startDate = startsAtMilliseconds

console.log("curDate: " + new Date().getTime());
console.log("endDate:", endsAtMilliseconds)
if (!crowdsalePageStore.endDate || crowdsalePageStore.endDate < endsAtMilliseconds)
crowdsalePageStore.setProperty('endDate', endsAtMilliseconds)

if (propsCount === cbCount) {
state.loading = false;
$this.setState(state, cb);
}
});
}
})
.catch(console.log)
}
console.log("curDate:", Date.now())
})
})
})
}, Promise.resolve())
}

export function initializeAccumulativeData() {
Expand Down
161 changes: 104 additions & 57 deletions src/components/invest/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { CONTRACT_TYPES, INVESTMENT_OPTIONS, TOAST } from '../../utils/constants
import { inject, observer } from 'mobx-react'
import QRPaymentProcess from './QRPaymentProcess'
import classNames from 'classnames'
import moment from 'moment'

@inject('contractStore', 'crowdsalePageStore', 'web3Store', 'tierStore', 'tokenStore', 'generalStore', 'investStore', 'gasPriceStore', 'generalStore')
@observer
Expand All @@ -34,12 +35,20 @@ export class Invest extends React.Component {
window.scrollTo(0, 0)

this.state = {
seconds: 0,
loading: true,
pristineTokenInput: true,
web3Available: false,
investThrough: INVESTMENT_OPTIONS.QR,
crowdsaleAddress: CrowdsaleConfig.crowdsaleContractURL || getQueryVariable('addr')
crowdsaleAddress: CrowdsaleConfig.crowdsaleContractURL || getQueryVariable('addr'),
toNextTick: {
days: 0,
hours: 0,
minutes: 0,
seconds: 0
},
nextTick: {},
msToNextTick: 0,
displaySeconds: false
}
}

Expand All @@ -57,9 +66,7 @@ export class Invest extends React.Component {
checkNetWorkByID(networkID)
contractStore.setContractType(contractType)

const timeInterval = setInterval(() => this.setState({ seconds: this.state.seconds - 1 }), 1000)
this.setState({
timeInterval,
web3Available: true,
investThrough: INVESTMENT_OPTIONS.METAMASK
})
Expand All @@ -75,7 +82,7 @@ export class Invest extends React.Component {
}

extractContractsData() {
const { contractStore, crowdsalePageStore, web3Store } = this.props
const { contractStore, web3Store } = this.props
const { web3 } = web3Store

const crowdsaleAddr = CrowdsaleConfig.crowdsaleContractURL ? CrowdsaleConfig.crowdsaleContractURL : getQueryVariable('addr')
Expand Down Expand Up @@ -116,26 +123,55 @@ export class Invest extends React.Component {
initializeAccumulativeData()
.then(() => getCrowdsaleData(crowdsaleContract))
.then(() => getAccumulativeCrowdsaleData())
.then(() => getCrowdsaleTargetDates())
.then(() => this.setTimers())
.catch(err => console.log(err))
.then(() => this.setState({ loading: false }))
.catch(err => {
this.setState({ loading: false })
console.log(err)
})

getCrowdsaleTargetDates(this, () => {
if (crowdsalePageStore.endDate) {
this.setState({
seconds: (crowdsalePageStore.endDate - new Date().getTime()) / 1000
})
}
})
})
})
})
}

setTimers = () => {
const { crowdsalePageStore } = this.props
let nextTick = 0
let millisecondsToNextTic = 0
let timeInterval

if (crowdsalePageStore.ticks.length) {
nextTick = crowdsalePageStore.extractNextTick()
millisecondsToNextTic = nextTick.time - Date.now()

setTimeout(() => {
this.setState({ displaySeconds: true })
}, millisecondsToNextTic - 5*6e4)

timeInterval = setInterval(() => {
const time = moment.duration(this.state.nextTick.time - Date.now())

this.setState({
toNextTick: {
days: time.days() || 0,
hours: time.hours() || 0,
minutes: time.minutes() || 0,
seconds: time.seconds() || 0
}
})
}, 1000)
}


this.setState({
nextTick,
msToNextTick: millisecondsToNextTic,
displaySeconds: false,
timeInterval
})
}

investToTokens = event => {
const { investStore, crowdsalePageStore, web3Store } = this.props
const { startDate } = crowdsalePageStore
const { web3 } = web3Store

event.preventDefault()
Expand All @@ -147,10 +183,7 @@ export class Invest extends React.Component {

this.setState({ loading: true })

const startBlock = parseInt(crowdsalePageStore.startBlock, 10)
const { startDate } = crowdsalePageStore

if ((isNaN(startBlock) || startBlock === 0) && !startDate) {
if (!startDate) {
this.setState({ loading: false })
return
}
Expand Down Expand Up @@ -254,40 +287,25 @@ export class Invest extends React.Component {
return (
<div style={{ marginLeft: '-20px', marginTop: '-20px' }}>
<ReactCountdownClock
seconds={this.state.seconds}
seconds={this.state.msToNextTick / 1000}
color="#733EAB"
alpha={0.9}
size={270}
showMilliseconds={false}
onComplete={this.setTimers}
/>
</div>
)
}

shouldStopCountDown () {
if(this.state.seconds < 0) {
this.setState({ seconds: 0 })
clearInterval(this.state.timeInterval)
}
}

getTimeStamps (seconds) {
this.shouldStopCountDown()
const days = Math.floor(seconds / 24 / 60 / 60)
const hoursLeft = Math.floor(seconds - days * 86400)
const hours = Math.floor(hoursLeft / 3600)
const minutesLeft = Math.floor(hoursLeft - hours * 3600)
const minutes = Math.floor(minutesLeft / 60)
return { days, hours, minutes }
}

render () {
const { crowdsalePageStore, tokenStore, contractStore, investStore } = this.props
const { rate, tokenAmountOf, ethRaised, supply } = crowdsalePageStore
const { crowdsale, contractType } = contractStore
const { tokensToInvest } = investStore

const { seconds, curAddr, pristineTokenInput, investThrough, crowdsaleAddress, web3Available } = this.state
const { days, hours, minutes } = this.getTimeStamps(seconds)
const { curAddr, pristineTokenInput, investThrough, crowdsaleAddress, web3Available, toNextTick, nextTick } = this.state
const { days, hours, minutes, seconds } = toNextTick

const { decimals, ticker, name } = tokenStore
const isWhitelistWithCap = contractType === CONTRACT_TYPES.whitelistwithcap
Expand Down Expand Up @@ -329,26 +347,55 @@ export class Invest extends React.Component {
'qr-selected': investThrough === INVESTMENT_OPTIONS.QR
})

const daysHoursMinutes = (
<div className="timer">
<div className="timer-inner">
{this.state.displaySeconds
? null
: <div className="timer-i">
<div className="timer-count">{days}</div>
<div className="timer-interval">Days</div>
</div>
}
{this.state.displaySeconds
? null
: <div className="timer-i">
<div className="timer-count">{hours}</div>
<div className="timer-interval">Hours</div>
</div>
}
<div className="timer-i">
<div className="timer-count">{minutes}</div>
<div className="timer-interval">Mins</div>
</div>
{!this.state.displaySeconds
? null
: <div className="timer-i">
<div className="timer-count">{seconds}</div>
<div className="timer-interval">Secs</div>
</div>
}
<div className="timer-i">
<div className="timer-interval">
<strong>
{nextTick.type
? nextTick.type === 'start'
? `to start of tier ${nextTick.order || 0} of ${crowdsalePageStore && crowdsalePageStore.tiers.length}`
: `to end of tier ${nextTick.order || 0} of ${crowdsalePageStore && crowdsalePageStore.tiers.length}`
: 'crowdsale has ended'
}
</strong>
</div>
</div>
</div>
</div>
)

return <div className="invest container">
<div className="invest-table">
<div className="invest-table-cell invest-table-cell_left">
<div className="timer-container">
<div className="timer">
<div className="timer-inner">
<div className="timer-i">
<div className="timer-count">{days}</div>
<div className="timer-interval">Days</div>
</div>
<div className="timer-i">
<div className="timer-count">{hours}</div>
<div className="timer-interval">Hours</div>
</div>
<div className="timer-i">
<div className="timer-count">{minutes}</div>
<div className="timer-interval">Mins</div>
</div>
</div>
</div>
{daysHoursMinutes}
{this.renderPieTracker()}
</div>
<div className="hashes">
Expand Down
Loading

0 comments on commit 7b78163

Please sign in to comment.