diff --git a/src/common/data/transaction-status.js b/src/common/data/transaction-status.js index 20cce74..69f218d 100644 --- a/src/common/data/transaction-status.js +++ b/src/common/data/transaction-status.js @@ -1,8 +1,25 @@ -const transactionStatus = { - dappName: 'slow.Trade', - dappUrl: '/images/dapps/slowtrade.png', - progress: false, - published: true, +import { + getTransactionData, + setTransactionData, +} from '../../modules/TransactionStatus/TransactionStatus.utilities' + +let transactionStatus +const transactionData = getTransactionData() + +if (transactionData !== '') { + transactionStatus = JSON.parse(transactionData) + if (transactionStatus.dappTransactionHash === '') { + transactionStatus.dappName = '' + transactionStatus.dappImg = '' + } +} else { + transactionStatus = { + dappTransactionHash: '', + dappName: '', + dappImg: '', + progress: false, + published: false, + } } export default transactionStatus diff --git a/src/modules/Submit/Submit.container.js b/src/modules/Submit/Submit.container.js index 3e93839..5e8b917 100644 --- a/src/modules/Submit/Submit.container.js +++ b/src/modules/Submit/Submit.container.js @@ -13,7 +13,9 @@ import { onImgMoveAction, onImgDoneAction, onImgCancelAction, + submitAction, } from './Submit.reducer' +import { onStartProgressAction } from '../TransactionStatus/TransactionStatus.recuder' const mapStateToProps = state => state.submit const mapDispatchToProps = dispatch => ({ @@ -27,6 +29,10 @@ const mapDispatchToProps = dispatch => ({ onImgMove: (x, y) => dispatch(onImgMoveAction(x, y)), onImgCancel: () => dispatch(onImgCancelAction()), onImgDone: imgBase64 => dispatch(onImgDoneAction(imgBase64)), + onSubmit: dapp => { + dispatch(onStartProgressAction(dapp)) + dispatch(submitAction(dapp)) + }, }) export default withRouter( diff --git a/src/modules/Submit/Submit.jsx b/src/modules/Submit/Submit.jsx index 18e37cc..79eaa55 100644 --- a/src/modules/Submit/Submit.jsx +++ b/src/modules/Submit/Submit.jsx @@ -23,6 +23,7 @@ class Submit extends React.Component { this.onTouchMove = this.onTouchMove.bind(this) this.onEndMove = this.onEndMove.bind(this) this.onImgDone = this.onImgDone.bind(this) + this.onSubmit = this.onSubmit.bind(this) } componentDidUpdate() { @@ -139,6 +140,19 @@ class Submit extends React.Component { onImgDone(imgBase64) } + onSubmit() { + const { onSubmit, name, desc, url, img, category } = this.props + const dapp = { + name, + url, + img, + category, + desc, + } + + onSubmit(dapp) + } + render() { const { visible, @@ -153,6 +167,9 @@ class Submit extends React.Component { onImgCancel, } = this.props + const canSubmit = + name !== '' && desc !== '' && url !== '' && img !== '' && category !== '' + return ( Continue @@ -322,6 +340,7 @@ Submit.propTypes = { onImgMove: PropTypes.func.isRequired, onImgCancel: PropTypes.func.isRequired, onImgDone: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, } export default Submit diff --git a/src/modules/Submit/Submit.reducer.js b/src/modules/Submit/Submit.reducer.js index eeead6c..572ce18 100644 --- a/src/modules/Submit/Submit.reducer.js +++ b/src/modules/Submit/Submit.reducer.js @@ -1,5 +1,9 @@ import submitInitialState from '../../common/data/submit' import reducerUtil from '../../common/utils/reducer' +import { + onPublishedSuccessAction, + onReceiveTransactionHashAction, +} from '../TransactionStatus/TransactionStatus.recuder' const SHOW_SUBMIT = 'SHOW_SUBMIT' const CLOSE_SUBMIT = 'CLOSE_SUBMIT' @@ -80,6 +84,19 @@ export const onImgDoneAction = imgBase64 => ({ payload: imgBase64, }) +export const submitAction = dapp => { + return (dispatch, getState) => { + dispatch(closeSubmitAction()) + + setTimeout(() => { + dispatch(onReceiveTransactionHashAction('hash')) + }, 2000) + setTimeout(() => { + dispatch(onPublishedSuccessAction()) + }, 10000) + } +} + const showSubmit = state => { return Object.assign({}, state, { visible: true, diff --git a/src/modules/TransactionStatus/TransactionStatus.container.js b/src/modules/TransactionStatus/TransactionStatus.container.js index b822b47..d02c150 100644 --- a/src/modules/TransactionStatus/TransactionStatus.container.js +++ b/src/modules/TransactionStatus/TransactionStatus.container.js @@ -1,10 +1,14 @@ import { connect } from 'react-redux' import TransactionStatus from './TransactionStatus' -import { hideAction } from './TransactionStatus.recuder' +import { + hideAction, + onPublishedSuccessAction, +} from './TransactionStatus.recuder' const mapStateToProps = state => state.transactionStatus const mapDispatchToProps = dispatch => ({ hide: () => dispatch(hideAction()), + onPublishSuccess: () => dispatch(onPublishedSuccessAction()), }) export default connect( diff --git a/src/modules/TransactionStatus/TransactionStatus.jsx b/src/modules/TransactionStatus/TransactionStatus.jsx index 24d0b25..665fa08 100644 --- a/src/modules/TransactionStatus/TransactionStatus.jsx +++ b/src/modules/TransactionStatus/TransactionStatus.jsx @@ -8,6 +8,7 @@ import loadingSpinner from '../../common/assets/images/loading-spinner.svg' class TransactionStatus extends React.Component { componentDidMount() { this.checkPublished() + this.checkTransactionHash() } componentDidUpdate() { @@ -23,14 +24,23 @@ class TransactionStatus extends React.Component { } } + checkTransactionHash() { + const { dappTransactionHash, onPublishSuccess } = this.props + if (dappTransactionHash === '') return + + setTimeout(() => { + onPublishSuccess() + }, 8000) + } + render() { - const { dappName, dappUrl, published, progress } = this.props + const { dappName, dappImg, published, progress } = this.props return (
@@ -53,16 +63,14 @@ class TransactionStatus extends React.Component { } } -TransactionStatus.defaultProps = { - dapp: null, -} - TransactionStatus.propTypes = { + dappTransactionHash: PropTypes.string.isRequired, dappName: PropTypes.string.isRequired, - dappUrl: PropTypes.string.isRequired, + dappImg: PropTypes.string.isRequired, progress: PropTypes.bool.isRequired, published: PropTypes.bool.isRequired, hide: PropTypes.func.isRequired, + onPublishSuccess: PropTypes.func.isRequired, } export default TransactionStatus diff --git a/src/modules/TransactionStatus/TransactionStatus.recuder.js b/src/modules/TransactionStatus/TransactionStatus.recuder.js index db67f9f..d04f4e7 100644 --- a/src/modules/TransactionStatus/TransactionStatus.recuder.js +++ b/src/modules/TransactionStatus/TransactionStatus.recuder.js @@ -1,21 +1,83 @@ import transactionStatusInitialState from '../../common/data/transaction-status' import reducerUtil from '../../common/utils/reducer' +import { + setTransactionData, + getTransactionData, +} from './TransactionStatus.utilities' const HIDE = 'HIDE' +const ON_START_PROGRESS = 'ON_START_PROGRESS' +const ON_RECEIVE_TRANSACTION_HASH = 'ON_RECEIVE_TRANSACTION_HASH' +const ON_PUBLISHED_SUCCESS = 'ON_PUBLISHED_SUCCESS' export const hideAction = () => ({ type: HIDE, payload: null, }) +export const onStartProgressAction = dapp => ({ + type: ON_START_PROGRESS, + payload: dapp, +}) + +export const onReceiveTransactionHashAction = hash => ({ + type: ON_RECEIVE_TRANSACTION_HASH, + payload: hash, +}) + +export const onPublishedSuccessAction = () => ({ + type: ON_PUBLISHED_SUCCESS, + payload: null, +}) + const hide = state => { return Object.assign({}, state, { dappName: '', }) } +const onStartProgress = (state, dapp) => { + const dappState = { + dappTransactionHash: '', + dappName: dapp.name, + dappImg: dapp.img, + progress: true, + published: false, + } + setTransactionData(JSON.stringify(dappState)) + return Object.assign({}, state, dappState) +} + +const onReceiveTransactionHash = (state, hash) => { + const transactionData = getTransactionData() + if (transactionData !== '') { + const dappState = JSON.parse(transactionData) + dappState.dappTransactionHash = hash + setTransactionData(JSON.stringify(dappState)) + } + return Object.assign({}, state, { + dappTransactionHash: hash, + }) +} + +const onPublishedSuccess = state => { + const transactionData = getTransactionData() + if (transactionData !== '') { + const dappState = JSON.parse(transactionData) + dappState.dappTransactionHash = '' + setTransactionData(JSON.stringify(dappState)) + } + return Object.assign({}, state, { + progress: false, + published: true, + }) +} + const map = { [HIDE]: hide, + [ON_START_PROGRESS]: onStartProgress, + [ON_RECEIVE_TRANSACTION_HASH]: onReceiveTransactionHash, + [ON_PUBLISHED_SUCCESS]: onPublishedSuccess, } export default reducerUtil(map, transactionStatusInitialState) diff --git a/src/modules/TransactionStatus/TransactionStatus.utilities.js b/src/modules/TransactionStatus/TransactionStatus.utilities.js new file mode 100644 index 0000000..e023f17 --- /dev/null +++ b/src/modules/TransactionStatus/TransactionStatus.utilities.js @@ -0,0 +1,10 @@ +export const COOKIE_NAME = 'TRANSACTION_STATUS_COOKIE' + +export const setTransactionData = value => { + localStorage.setItem(COOKIE_NAME, value) +} + +export const getTransactionData = () => { + const value = localStorage.getItem(COOKIE_NAME) + return value === null ? '' : value +}