dapp create async

src/common/data/transaction-status.js

@@ -1,8 +1,25 @@
-const transactionStatus = {
+import {
-  dappName: 'slow.Trade',
+  getTransactionData,
-  dappUrl: '/images/dapps/slowtrade.png',
+  setTransactionData,
-  progress: false,
+} from '../../modules/TransactionStatus/TransactionStatus.utilities'
-  published: true,
+
+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

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(

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 (
       <Modal
         visible={visible && window.location.hash === '#submit'}
@@ -240,7 +257,8 @@ class Submit extends React.Component {
               <button
                 className={styles.submitButton}
                 type="submit"
-                disabled={true}
+                disabled={!canSubmit}
+                onClick={this.onSubmit}
               >
                 Continue
               </button>
@@ -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

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,

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(

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 (
       <div className={`${styles.cnt} ${dappName !== '' ? styles.active : ''}`}>
         <ReactImageFallback
           className={styles.image}
-          src={dappUrl}
+          src={dappImg}
           fallbackImage={icon}
           alt="App icon"
         />
@@ -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

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)

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
+}