diff --git a/config/contracts.js b/config/contracts.js
index 8a06264..e870eeb 100644
--- a/config/contracts.js
+++ b/config/contracts.js
@@ -39,11 +39,11 @@ module.exports = {
       ],
     },
     // order of connections the dapp should connect to
-    dappConnection: [
-      '$WEB3', // uses pre existing web3 object if available (e.g in Mist)
-      'ws://localhost:8546',
-      'http://localhost:8545',
-    ],
+    // dappConnection: [
+    //   '$WEB3', // uses pre existing web3 object if available (e.g in Mist)
+    //   'ws://localhost:8546',
+    //   'http://localhost:8545',
+    // ],
 
     // Automatically call `ethereum.enable` if true.
     // If false, the following code must run before sending any transaction: `await EmbarkJS.enableEthereum();`
@@ -106,7 +106,15 @@ module.exports = {
 
   // merges with the settings in default
   // used with "embark run testnet"
-  testnet: {},
+  testnet: {
+    deployment: {
+      accounts: [{ mnemonic: wallet.mnemonic }],
+      host: `ropsten.infura.io/v3/`,
+      port: false,
+      type: 'rpc',
+      protocol: 'https',
+    },
+  },
 
   // merges with the settings in default
   // used with "embark run livenet"
diff --git a/src/common/blockchain/services/config.js b/src/common/blockchain/services/config.js
index a37d448..4a9437c 100644
--- a/src/common/blockchain/services/config.js
+++ b/src/common/blockchain/services/config.js
@@ -2,7 +2,7 @@
 import Web3 from '../../../embarkArtifacts/modules/web3'
 
 // Todo: Should be moved to .env
-const RPC_URL = 'http://localhost:8545'
+const RPC_URL = 'https://ropsten.infura.io/v3/8675214b97b44e96b70d05326c61fd6a'
 
 export default function() {
   web3 = new Web3(new Web3.providers.HttpProvider(RPC_URL))
diff --git a/src/common/blockchain/utils.js b/src/common/blockchain/utils.js
index 53a5ddf..78f4139 100644
--- a/src/common/blockchain/utils.js
+++ b/src/common/blockchain/utils.js
@@ -6,10 +6,24 @@ const TRANSACTION_STATUSES = {
   Pending: 2,
 }
 
+const waitOneMoreBlock = async function(prevBlockNumber) {
+  return new Promise(resolve => {
+    setTimeout(async () => {
+      const blockNumber = await web3.eth.getBlockNumber()
+      if (prevBlockNumber == blockNumber) {
+        return waitOneMoreBlock(prevBlockNumber)
+      }
+      resolve()
+    }, 30000)
+  })
+}
+
 export default {
   getTxStatus: async txHash => {
     const txReceipt = await web3.eth.getTransactionReceipt(txHash)
     if (txReceipt) {
+      await waitOneMoreBlock(txReceipt.blockNumber)
+
       return txReceipt.status
         ? TRANSACTION_STATUSES.Successful
         : TRANSACTION_STATUSES.Failed
diff --git a/src/common/data/submit.js b/src/common/data/submit.js
index ee5842c..6cf7e49 100644
--- a/src/common/data/submit.js
+++ b/src/common/data/submit.js
@@ -1,5 +1,6 @@
 const submit = {
   visible: false,
+  id: '',
   name: '',
   desc: '',
   url: '',
diff --git a/src/common/data/transaction-status.js b/src/common/data/transaction-status.js
index 69f218d..554852b 100644
--- a/src/common/data/transaction-status.js
+++ b/src/common/data/transaction-status.js
@@ -1,25 +1,3 @@
-import {
-  getTransactionData,
-  setTransactionData,
-} from '../../modules/TransactionStatus/TransactionStatus.utilities'
+import { transactionStatusFetchedInstance } 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
+export default Object.assign({}, transactionStatusFetchedInstance())
diff --git a/src/modules/App/Router.container.js b/src/modules/App/Router.container.js
index 1c7c1d4..1ded0ac 100644
--- a/src/modules/App/Router.container.js
+++ b/src/modules/App/Router.container.js
@@ -1,14 +1,10 @@
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import Router from './Router'
-import {
-  fetchHighestRankedAction,
-  fetchRecentlyAddedAction,
-} from '../Dapps/Dapps.reducer'
+import { fetchAllDappsAction } from '../Dapps/Dapps.reducer'
 
 const mapDispatchToProps = dispatch => ({
-  fetchHighestRanked: () => dispatch(fetchHighestRankedAction()),
-  fetchRecentlyAdded: () => dispatch(fetchRecentlyAddedAction()),
+  fetchAllDapps: () => dispatch(fetchAllDappsAction()),
 })
 
 export default withRouter(
diff --git a/src/modules/App/Router.jsx b/src/modules/App/Router.jsx
index 7da6e9b..647e5cc 100644
--- a/src/modules/App/Router.jsx
+++ b/src/modules/App/Router.jsx
@@ -14,9 +14,8 @@ import Example from '../BlockchainExample'
 
 class Router extends React.Component {
   componentDidMount() {
-    const { fetchHighestRanked, fetchRecentlyAdded } = this.props
-    fetchHighestRanked()
-    fetchRecentlyAdded()
+    const { fetchAllDapps } = this.props
+    fetchAllDapps()
   }
 
   render() {
@@ -37,8 +36,7 @@ class Router extends React.Component {
 }
 
 Router.propTypes = {
-  fetchHighestRanked: PropTypes.func.isRequired,
-  fetchRecentlyAdded: PropTypes.func.isRequired,
+  fetchAllDapps: PropTypes.func.isRequired,
 }
 
 export default Router
diff --git a/src/modules/Dapps/Dapps.reducer.js b/src/modules/Dapps/Dapps.reducer.js
index 738ee5a..ede4286 100644
--- a/src/modules/Dapps/Dapps.reducer.js
+++ b/src/modules/Dapps/Dapps.reducer.js
@@ -1,6 +1,9 @@
-import hardcodedDapps from '../../common/data/dapps'
+// import hardcodedDapps from '../../common/data/dapps'
 import * as Categories from '../../common/data/categories'
 import reducerUtil from '../../common/utils/reducer'
+import BlockchainTool from '../../common/blockchain'
+
+const ON_FINISH_FETCH_ALL_DAPPS_ACTION = 'ON_FINISH_FETCH_ALL_DAPPS_ACTION'
 
 const ON_START_FETCH_HIGHEST_RANKED = 'ON_START_FETCH_HIGHEST_RANKED'
 const ON_FINISH_FETCH_HIGHEST_RANKED = 'ON_FINISH_FETCH_HIGHEST_RANKED'
@@ -10,6 +13,13 @@ const ON_FINISH_FETCH_RECENTLY_ADDED = 'ON_FINISH_FETCH_RECENTLY_ADDED'
 const ON_START_FETCH_BY_CATEGORY = 'ON_START_FETCH_BY_CATEGORY'
 const ON_FINISH_FETCH_BY_CATEGORY = 'ON_FINISH_FETCH_BY_CATEGORY'
 
+const ON_ADD_NEW_DAPP = 'ON_ADD_NEW_DAPP'
+
+const RECENTLY_ADDED_SIZE = 50
+const HIGHEST_RANKED_SIZE = 50
+
+const BlockchainSDK = BlockchainTool.init()
+
 class DappsState {
   constructor() {
     this.items = []
@@ -25,7 +35,7 @@ class DappsState {
     this.fetched = fetched
   }
 
-  appendItemsAndSort(items) {
+  appendItems(items) {
     const availableNames = new Set()
     let addedItems = 0
     for (let i = 0; i < this.items.length; i += 1)
@@ -37,13 +47,18 @@ class DappsState {
       }
     }
 
-    this.items.sort((a, b) => {
-      return new Date(b.dateAdded).getTime() - new Date(a.dateAdded).getTime()
-    })
+    // this.items.sort((a, b) => {
+    //   return new Date(b.dateAdded).getTime() - new Date(a.dateAdded).getTime()
+    // })
     this.hasMore = addedItems !== 0
   }
 }
 
+export const onFinishFetchAllDappsAction = dapps => ({
+  type: ON_FINISH_FETCH_ALL_DAPPS_ACTION,
+  payload: dapps,
+})
+
 export const onStartFetchHighestRankedAction = () => ({
   type: ON_START_FETCH_HIGHEST_RANKED,
   payload: null,
@@ -74,49 +89,103 @@ export const onFinishFetchByCategoryAction = (category, dapps) => ({
   payload: { category, dapps },
 })
 
-export const fetchHighestRankedAction = () => {
-  return dispatch => {
+const fetchAllDappsInState = async (dispatch, getState) => {
+  const stateDapps = getState().dapps
+  if (stateDapps.dapps === null) {
+    let dapps = await BlockchainSDK.DiscoverService.getDApps()
+
+    dapps = dapps.map(dapp => {
+      return Object.assign(dapp.metadata, { sntValue: parseInt(dapp.rate) })
+    })
+    dapps.sort((a, b) => {
+      return b.sntValue - a.sntValue
+    })
+
+    dispatch(onFinishFetchAllDappsAction(dapps))
+    return dapps
+  }
+  return stateDapps.dapps
+}
+
+export const fetchAllDappsAction = () => {
+  return async (dispatch, getState) => {
     dispatch(onStartFetchHighestRankedAction())
-    setTimeout(() => {
-      const result = hardcodedDapps
-        .sort((a, b) => {
-          return b.sntValue - a.sntValue
-        })
-        .slice(0, 50)
-      dispatch(onFinishFetchHighestRankedAction(result))
-    }, 100)
+    dispatch(onStartFetchRecentlyAddedAction())
+
+    const dapps = await fetchAllDappsInState(dispatch, getState)
+
+    const highestRanked = dapps.slice(0, HIGHEST_RANKED_SIZE)
+    let recentlyAdded = [...dapps]
+    recentlyAdded.sort((a, b) => {
+      return new Date().getTime(b.dateAdded) - new Date(a.dateAdded).getTime()
+    })
+    recentlyAdded = recentlyAdded.slice(0, RECENTLY_ADDED_SIZE)
+
+    dispatch(onFinishFetchHighestRankedAction(highestRanked))
+    dispatch(onFinishFetchRecentlyAddedAction(recentlyAdded))
   }
 }
 
-export const fetchRecentlyAddedAction = () => {
-  return dispatch => {
-    dispatch(onStartFetchRecentlyAddedAction())
-    setTimeout(() => {
-      const result = hardcodedDapps
-        .sort((a, b) => {
-          return (
-            new Date().getTime(b.dateAdded) - new Date(a.dateAdded).getTime()
-          )
-        })
-        .slice(0, 20)
-      dispatch(onFinishFetchRecentlyAddedAction(result))
-    }, 100)
-  }
-}
+// export const fetchHighestRankedAction = () => {
+//   return dispatch => {
+//     dispatch(onStartFetchHighestRankedAction())
+//     setTimeout(() => {
+//       const result = hardcodedDapps
+//         .sort((a, b) => {
+//           return b.sntValue - a.sntValue
+//         })
+//         .slice(0, 50)
+//       dispatch(onFinishFetchHighestRankedAction(result))
+//     }, 100)
+//   }
+// }
+
+// export const fetchRecentlyAddedAction = () => {
+//   return dispatch => {
+//     dispatch(onStartFetchRecentlyAddedAction())
+//     setTimeout(() => {
+//       const result = hardcodedDapps
+//         .sort((a, b) => {
+//           return (
+//             new Date().getTime(b.dateAdded) - new Date(a.dateAdded).getTime()
+//           )
+//         })
+//         .slice(0, 20)
+//       dispatch(onFinishFetchRecentlyAddedAction(result))
+//     }, 100)
+//   }
+// }
 
 export const fetchByCategoryAction = category => {
-  return dispatch => {
+  return async (dispatch, getState) => {
     dispatch(onStartFetchByCategoryAction(category))
-    setTimeout(() => {
-      const filtered = hardcodedDapps
-        .filter(dapp => dapp.category === category)
-        .sort(() => Math.random() - 0.5)
-        .slice(0, 5)
-      dispatch(onFinishFetchByCategoryAction(category, filtered))
-    }, 1000)
+    // setTimeout(() => {
+    // const filtered = hardcodedDapps
+    //   .filter(dapp => dapp.category === category)
+    //   .sort(() => Math.random() - 0.5)
+    //   .slice(0, 5)
+
+    const dapps = await fetchAllDappsInState(dispatch, getState)
+    const filteredByCategory = dapps.filter(dapp => dapp.category === category)
+    const dappsCategoryState = getState().dapps.dappsCategoryMap.get(category)
+    const from = dappsCategoryState.items.length
+    const to = Math.min(from + 5, filteredByCategory.length)
+    const dappsCategorySlice = filteredByCategory.slice(from, to)
+
+    dispatch(onFinishFetchByCategoryAction(category, dappsCategorySlice))
+    // }, 1000)
   }
 }
 
+export const onAddNewDappAction = dapp => ({
+  type: ON_ADD_NEW_DAPP,
+  payload: dapp,
+})
+
+const onFinishFetchAllDapps = (state, dapps) => {
+  return Object.assign({}, state, { dapps })
+}
+
 const onStartFetchHightestRanked = state => {
   return Object.assign({}, state, {
     highestRankedFetched: false,
@@ -162,7 +231,7 @@ const onFinishFetchByCategory = (state, payload) => {
     dappsCategoryMap.set(category_, dappState)
     if (category_ === category) {
       dappState.setFetched(false)
-      dappState.appendItemsAndSort(dapps)
+      dappState.appendItems(dapps)
     }
   })
   return Object.assign({}, state, {
@@ -170,13 +239,60 @@ const onFinishFetchByCategory = (state, payload) => {
   })
 }
 
+const insertDappIntoSortedArray = (source, dapp, cmp) => {
+  for (let i = 0; i < source.length; i += 1) {
+    if (cmp(source[i], dapp) === true) {
+      source.splice(i, 0, dapp)
+      break
+    }
+  }
+}
+
+const onAddNewDapp = (state, dapp) => {
+  const dappsCategoryMap = new Map()
+  const { dapps } = state
+  let { highestRanked, recentlyAdded } = state
+
+  insertDappIntoSortedArray(dapps, dapp, (target, dappItem) => {
+    return target.sntValue < dappItem.sntValue
+  })
+  insertDappIntoSortedArray(highestRanked, dapp, (target, dappItem) => {
+    return target.sntValue < dappItem.sntValue
+  })
+  highestRanked = state.highestRanked.splice(0, HIGHEST_RANKED_SIZE)
+  insertDappIntoSortedArray(recentlyAdded, dapp, (target, dappItem) => {
+    return (
+      new Date().getTime(target.dateAdded) <
+      new Date(dappItem.dateAdded).getTime()
+    )
+  })
+  recentlyAdded = recentlyAdded.splice(0, RECENTLY_ADDED_SIZE)
+
+  state.dappsCategoryMap.forEach((dappState, category_) => {
+    dappsCategoryMap.set(category_, dappState)
+  })
+  const dappState = dappsCategoryMap.get(dapp.metadata.category)
+  insertDappIntoSortedArray(dappState.items, dapp, (target, dappItem) => {
+    return target.sntValue < dappItem.sntValue
+  })
+
+  return Object.assign({}, state, {
+    dapps,
+    highestRanked,
+    recentlyAdded,
+    dappsCategoryMap,
+  })
+}
+
 const map = {
+  [ON_FINISH_FETCH_ALL_DAPPS_ACTION]: onFinishFetchAllDapps,
   [ON_START_FETCH_HIGHEST_RANKED]: onStartFetchHightestRanked,
   [ON_FINISH_FETCH_HIGHEST_RANKED]: onFinishFetchHighestRanked,
   [ON_START_FETCH_RECENTLY_ADDED]: onStartFetchRecentlyAdded,
   [ON_FINISH_FETCH_RECENTLY_ADDED]: onFinishFetchRecentlyAdded,
   [ON_START_FETCH_BY_CATEGORY]: onStartFetchByCategory,
   [ON_FINISH_FETCH_BY_CATEGORY]: onFinishFetchByCategory,
+  [ON_ADD_NEW_DAPP]: onAddNewDapp,
 }
 
 const dappsCategoryMap = new Map()
@@ -189,6 +305,7 @@ dappsCategoryMap.set(Categories.UTILITIES, new DappsState())
 dappsCategoryMap.set(Categories.OTHER, new DappsState())
 
 const dappsInitialState = {
+  dapps: null,
   highestRanked: [],
   highestRankedFetched: null,
   recentlyAdded: [],
diff --git a/src/modules/Submit/Submit.reducer.js b/src/modules/Submit/Submit.reducer.js
index 21dcdc8..0e3c320 100644
--- a/src/modules/Submit/Submit.reducer.js
+++ b/src/modules/Submit/Submit.reducer.js
@@ -1,13 +1,13 @@
 import submitInitialState from '../../common/data/submit'
 import reducerUtil from '../../common/utils/reducer'
 import {
-  onPublishedSuccessAction,
-  onReceiveTransactionHashAction,
+  onReceiveTransactionInfoAction,
+  checkTransactionStatusAction,
 } from '../TransactionStatus/TransactionStatus.recuder'
 
 import BlockchainTool from '../../common/blockchain'
 
-const blockchainSDK = BlockchainTool.init()
+const BlockchainSDK = BlockchainTool.init()
 
 const SHOW_SUBMIT = 'SHOW_SUBMIT'
 const CLOSE_SUBMIT = 'CLOSE_SUBMIT'
@@ -91,31 +91,27 @@ export const onImgDoneAction = imgBase64 => ({
 export const submitAction = dapp => {
   return async dispatch => {
     dispatch(closeSubmitAction())
-    const createdDapp = await blockchainSDK.DiscoverService.createDApp(1, {
+    const { tx, id } = await BlockchainSDK.DiscoverService.createDApp(1, {
       name: dapp.name,
       url: dapp.url,
       desc: dapp.desc,
       category: dapp.category,
       image: dapp.img,
     })
-    dispatch(onReceiveTransactionHashAction(createdDapp.tx))
-
-    await blockchainSDK.utils.getTxStatus(createdDapp.tx)
-    dispatch(onPublishedSuccessAction())
-  }
-}
-
-export const statusCheckAction = hash => {
-  return async dispatch => {
-    await blockchainSDK.utils.getTxStatus(hash)
-    dispatch(onPublishedSuccessAction())
+    dispatch(onReceiveTransactionInfoAction(id, tx))
+    dispatch(checkTransactionStatusAction(tx))
   }
 }
 
 const showSubmit = state => {
   return Object.assign({}, state, {
     visible: true,
+    id: '',
+    name: '',
+    desc: '',
+    url: '',
     img: '',
+    category: '',
     imgControl: false,
     imgControlZoom: 0,
     imgControlMove: false,
diff --git a/src/modules/TransactionStatus/TransactionStatus.container.js b/src/modules/TransactionStatus/TransactionStatus.container.js
index 030bcc5..ded9507 100644
--- a/src/modules/TransactionStatus/TransactionStatus.container.js
+++ b/src/modules/TransactionStatus/TransactionStatus.container.js
@@ -1,12 +1,14 @@
 import { connect } from 'react-redux'
 import TransactionStatus from './TransactionStatus'
-import { hideAction } from './TransactionStatus.recuder'
-import { statusCheckAction } from '../Submit/Submit.reducer'
+import {
+  hideAction,
+  checkTransactionStatusAction,
+} from './TransactionStatus.recuder'
 
 const mapStateToProps = state => state.transactionStatus
 const mapDispatchToProps = dispatch => ({
   hide: () => dispatch(hideAction()),
-  statusCheck: hash => dispatch(statusCheckAction(hash)),
+  checkTransactionStatus: hash => dispatch(checkTransactionStatusAction(hash)),
 })
 
 export default connect(
diff --git a/src/modules/TransactionStatus/TransactionStatus.jsx b/src/modules/TransactionStatus/TransactionStatus.jsx
index afdf4bb..9f1e2fc 100644
--- a/src/modules/TransactionStatus/TransactionStatus.jsx
+++ b/src/modules/TransactionStatus/TransactionStatus.jsx
@@ -7,31 +7,31 @@ import loadingSpinner from '../../common/assets/images/loading-spinner.svg'
 
 class TransactionStatus extends React.Component {
   componentDidMount() {
-    this.checkPublished()
+    // this.checkPublished()
     this.checkTransactionHash()
   }
 
-  componentDidUpdate() {
-    this.checkPublished()
-  }
+  // componentDidUpdate() {
+  //   this.checkPublished()
+  // }
 
-  checkPublished() {
-    const { published, hide } = this.props
-    if (published) {
-      setTimeout(() => {
-        hide()
-      }, 1000)
-    }
-  }
+  // checkPublished() {
+  //   const { published, hide } = this.props
+  //   if (published) {
+  //     setTimeout(() => {
+  //       hide()
+  //     }, 1000)
+  //   }
+  // }
 
   checkTransactionHash() {
-    const { dappTransactionHash, statusCheck } = this.props
-    if (dappTransactionHash === '') return
-    statusCheck(dappTransactionHash)
+    const { dappTx, checkTransactionStatus } = this.props
+    if (dappTx === '') return
+    checkTransactionStatus(dappTx)
   }
 
   render() {
-    const { dappName, dappImg, published, progress } = this.props
+    const { dappName, dappImg, published, progress, failed, hide } = this.props
 
     return (
       <div className={`${styles.cnt} ${dappName !== '' ? styles.active : ''}`}>
@@ -42,7 +42,14 @@ class TransactionStatus extends React.Component {
           alt="App icon"
         />
         <div className={styles.data}>
-          <div className={styles.name}>{dappName}</div>
+          <div className={styles.name}>
+            <div className={styles.nameItself}>{dappName}</div>
+            {!progress && (
+              <div className={styles.close} onClick={hide}>
+                +
+              </div>
+            )}
+          </div>
           <div className={styles.info}>
             Status is an open source mobile DApp browser and messenger build for
             #Etherium
@@ -54,6 +61,11 @@ class TransactionStatus extends React.Component {
               Waiting for confirmation of the network...
             </div>
           )}
+          {failed && (
+            <div className={`${styles.status} ${styles.red}`}>
+              Transaction failed. Please submit your dapp again.
+            </div>
+          )}
         </div>
       </div>
     )
@@ -61,13 +73,14 @@ class TransactionStatus extends React.Component {
 }
 
 TransactionStatus.propTypes = {
-  dappTransactionHash: PropTypes.string.isRequired,
+  dappTx: PropTypes.string.isRequired,
   dappName: PropTypes.string.isRequired,
   dappImg: PropTypes.string.isRequired,
   progress: PropTypes.bool.isRequired,
   published: PropTypes.bool.isRequired,
+  failed: PropTypes.bool.isRequired,
   hide: PropTypes.func.isRequired,
-  statusCheck: PropTypes.func.isRequired,
+  checkTransactionStatus: PropTypes.func.isRequired,
 }
 
 export default TransactionStatus
diff --git a/src/modules/TransactionStatus/TransactionStatus.module.scss b/src/modules/TransactionStatus/TransactionStatus.module.scss
index 8eb0956..914f197 100644
--- a/src/modules/TransactionStatus/TransactionStatus.module.scss
+++ b/src/modules/TransactionStatus/TransactionStatus.module.scss
@@ -35,10 +35,30 @@
     flex-direction: column;
 
     .name {
+      display: flex;
+      align-items: center;
+      position: relative;
       line-height: 22px;
       font-size: 15px;
       font-weight: 700;
       margin-bottom: 2px;
+
+      .nameItself {
+        width: 0px;
+        flex: 1 1 auto;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        margin-right: 8px;
+      }
+
+      .close {
+        flex: 0 0 auto;
+        font-weight: 300;
+        margin-left: auto;
+        transform: rotate(45deg);
+        cursor: pointer;
+      }
     }
 
     .info {
@@ -60,6 +80,10 @@
         // animation:loading_rotate 1s linear infinite;
       }
     }
+
+    .status.red {
+      color: $red;
+    }
   }
 }
 
diff --git a/src/modules/TransactionStatus/TransactionStatus.recuder.js b/src/modules/TransactionStatus/TransactionStatus.recuder.js
index d04f4e7..80f629a 100644
--- a/src/modules/TransactionStatus/TransactionStatus.recuder.js
+++ b/src/modules/TransactionStatus/TransactionStatus.recuder.js
@@ -1,14 +1,18 @@
 import transactionStatusInitialState from '../../common/data/transaction-status'
 import reducerUtil from '../../common/utils/reducer'
 import {
-  setTransactionData,
-  getTransactionData,
+  transactionStatusFetchedInstance,
+  transactionStatusInitInstance,
 } from './TransactionStatus.utilities'
+import { onAddNewDappAction } from '../Dapps/Dapps.reducer'
+import BlockchainTool from '../../common/blockchain'
 
 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'
+const ON_RECEIVE_TRANSACTION_TX = 'ON_RECEIVE_TRANSACTION_TX'
+const ON_CHANGE_TRANSACTION_STATUS_DATA = 'ON_CHANGE_TRANSACTION_STATUS_DATA'
+
+const BlockchainSDK = BlockchainTool.init()
 
 export const hideAction = () => ({
   type: HIDE,
@@ -20,64 +24,78 @@ export const onStartProgressAction = dapp => ({
   payload: dapp,
 })
 
-export const onReceiveTransactionHashAction = hash => ({
-  type: ON_RECEIVE_TRANSACTION_HASH,
-  payload: hash,
+export const onReceiveTransactionInfoAction = (id, tx) => ({
+  type: ON_RECEIVE_TRANSACTION_TX,
+  payload: { id, tx },
 })
 
-export const onPublishedSuccessAction = () => ({
-  type: ON_PUBLISHED_SUCCESS,
-  payload: null,
+// status 0/1/2 failed/success/pending
+export const onChangeTransactionStatusDataAction = transactionStatus => ({
+  type: ON_CHANGE_TRANSACTION_STATUS_DATA,
+  payload: transactionStatus,
 })
 
+export const checkTransactionStatusAction = tx => {
+  return async dispatch => {
+    const status = await BlockchainSDK.utils.getTxStatus(tx)
+    const statusInt = parseInt(status, 10)
+    const transacationStatus = transactionStatusFetchedInstance()
+
+    switch (statusInt) {
+      case 0:
+        transacationStatus.setFailed(true)
+        break
+      default:
+      case 1:
+        transacationStatus.setPublished(true)
+        dispatch(
+          onAddNewDappAction(
+            await BlockchainSDK.DiscoverService.getDAppDataById(
+              transacationStatus.dappId,
+            ),
+          ),
+        )
+        break
+      case 2:
+        transacationStatus.setProgress(true)
+        setTimeout(() => {
+          dispatch(checkTransactionStatusAction(tx))
+        }, 2000)
+        break
+    }
+
+    dispatch(onChangeTransactionStatusDataAction(transacationStatus))
+  }
+}
+
 const hide = state => {
-  return Object.assign({}, state, {
-    dappName: '',
-  })
+  const transacationStatus = transactionStatusFetchedInstance()
+  transacationStatus.setDappName('')
+  return Object.assign({}, state, transacationStatus)
 }
 
 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 transacationStatus = transactionStatusInitInstance(dapp.name, dapp.img)
+  transacationStatus.persistTransactionData()
+  return Object.assign({}, state, transacationStatus)
 }
 
-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 onReceiveTransactionInfo = (state, payload) => {
+  const { id, tx } = payload
+  const transacationStatus = transactionStatusFetchedInstance()
+  transacationStatus.setTransactionInfo(id, tx)
+  return Object.assign({}, state, transacationStatus)
 }
 
-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 onChangeTransactionStatusData = (state, transacationStatus) => {
+  return Object.assign({}, state, transacationStatus)
 }
 
 const map = {
   [HIDE]: hide,
   [ON_START_PROGRESS]: onStartProgress,
-  [ON_RECEIVE_TRANSACTION_HASH]: onReceiveTransactionHash,
-  [ON_PUBLISHED_SUCCESS]: onPublishedSuccess,
+  [ON_RECEIVE_TRANSACTION_TX]: onReceiveTransactionInfo,
+  [ON_CHANGE_TRANSACTION_STATUS_DATA]: onChangeTransactionStatusData,
 }
 
 export default reducerUtil(map, transactionStatusInitialState)
diff --git a/src/modules/TransactionStatus/TransactionStatus.utilities.js b/src/modules/TransactionStatus/TransactionStatus.utilities.js
index e023f17..0b38832 100644
--- a/src/modules/TransactionStatus/TransactionStatus.utilities.js
+++ b/src/modules/TransactionStatus/TransactionStatus.utilities.js
@@ -1,10 +1,71 @@
-export const COOKIE_NAME = 'TRANSACTION_STATUS_COOKIE'
+const COOKIE_NAME = 'TRANSACTION_STATUS_COOKIE'
 
-export const setTransactionData = value => {
-  localStorage.setItem(COOKIE_NAME, value)
+class TransactionStatus {
+  constructor() {
+    this.dappId = ''
+    this.dappTx = ''
+    this.dappName = ''
+    this.dappImg = ''
+    this.progress = false
+    this.published = false
+    this.failed = false
+  }
+
+  persistTransactionData() {
+    localStorage.setItem(COOKIE_NAME, JSON.stringify(this))
+  }
+
+  setDappName(name) {
+    this.dappName = name
+    this.persistTransactionData()
+  }
+
+  setTransactionInfo(id, tx) {
+    this.dappId = id
+    this.dappTx = tx
+    this.persistTransactionData()
+  }
+
+  setProgress(progress) {
+    this.progress = progress
+    this.published = false
+    this.failed = false
+    this.persistTransactionData()
+  }
+
+  setPublished(published) {
+    this.dappTx = ''
+    this.progress = false
+    this.published = published
+    this.failed = false
+    this.persistTransactionData()
+  }
+
+  setFailed(failed) {
+    this.dappTx = ''
+    this.progress = false
+    this.published = false
+    this.failed = failed
+    this.persistTransactionData()
+  }
 }
 
-export const getTransactionData = () => {
-  const value = localStorage.getItem(COOKIE_NAME)
-  return value === null ? '' : value
+const getTransactionData = () => {
+  return localStorage.getItem(COOKIE_NAME)
+}
+
+export const transactionStatusInitInstance = (name, img) => {
+  const model = new TransactionStatus()
+  model.dappName = name
+  model.dappImg = img
+  model.progress = true
+  return model
+}
+
+export const transactionStatusFetchedInstance = () => {
+  const data = getTransactionData()
+  let transactionStatus = new TransactionStatus()
+  if (data !== null)
+    transactionStatus = Object.assign(transactionStatus, JSON.parse(data))
+  return transactionStatus
 }