feat(neuron-ui): separate the transaction view from the app

Keith-CY · Keith-CY · commit 7821ab38fad7 · 2019-08-03T15:42:19.000+08:00
diff --git a/packages/neuron-ui/src/components/Transaction/index.tsx b/packages/neuron-ui/src/components/Transaction/index.tsx
@@ -1,13 +1,10 @@
-import React, { useEffect, useMemo } from 'react'
-import { RouteComponentProps } from 'react-router-dom'
+import React, { useEffect, useState, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Stack, DetailsList, Text, DetailsListLayoutMode, CheckboxVisibility, IColumn } from 'office-ui-fabric-react'
+import { currentWallet as currentWalletCache } from 'utils/localCache'
+import { getTransaction } from 'services/remote'
 
-import { isMainWindow, getWinID } from 'services/remote'
-
-import { AppActions, StateWithDispatch } from 'states/stateProvider/reducer'
-import { updateTransaction } from 'states/stateProvider/actionCreators'
-import chainState from 'states/initStates/chain'
+import { transactionState } from 'states/initStates/chain'
 
 import { localNumberFormatter, uniformTimeFormatter } from 'utils/formatters'
 
@@ -96,26 +93,38 @@ const basicInfoColumns: IColumn[] = [
     ...col,
   })
 )
-const Transaction = ({
-  wallet: { id: walletID = '' },
-  chain: { transaction = chainState.transaction },
-  match,
-  dispatch,
-}: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps<{ hash: string }>>) => {
+const Transaction = () => {
   const [t] = useTranslation()
+  const [transaction, setTransaction] = useState(transactionState)
+  const [error, setError] = useState({ code: '', message: '' })
   useEffect(() => {
-    if ((walletID && !isMainWindow(getWinID())) || !walletID) {
-      window.close()
+    const currentWallet = currentWalletCache.load()
+    if (currentWallet) {
+      const hash = window.location.href.split('/').pop()
+      getTransaction({ hash, walletID: currentWallet.id })
+        .then(res => {
+          if (res.status) {
+            setTransaction(res.result)
+          } else {
+            throw new Error(res.message.title)
+          }
+        })
+        .catch((err: Error) => {
+          setError({
+            code: '-1',
+            message: err.message,
+          })
+        })
     }
-  }, [walletID])
+  }, [])
 
   useEffect(() => {
-    dispatch({
-      type: AppActions.CleanTransaction,
-      payload: null,
+    window.addEventListener('storage', (e: StorageEvent) => {
+      if (e.key === 'currentWallet') {
+        window.close()
+      }
     })
-    updateTransaction({ walletID, hash: match.params.hash })(dispatch)
-  }, [match.params.hash, dispatch, walletID])
+  }, [])
 
   const basicInfoItems = useMemo(
     () => [
@@ -138,6 +147,14 @@ const Transaction = ({
     [t, transaction]
   )
 
+  if (error.code) {
+    return (
+      <Stack verticalFill verticalAlign="center" horizontalAlign="center">
+        {error.message || t('messages.transaction-not-found')}
+      </Stack>
+    )
+  }
+
   return (
     <Stack tokens={{ childrenGap: 15 }}>
       <Stack tokens={{ childrenGap: 15 }}>
diff --git a/packages/neuron-ui/src/containers/Main/hooks.ts b/packages/neuron-ui/src/containers/Main/hooks.ts
@@ -4,7 +4,6 @@ import { NeuronWalletActions, StateDispatch, AppActions } from 'states/stateProv
 import {
   toggleAddressBook,
   updateTransactionList,
-  updateTransaction,
   updateCurrentWallet,
   updateWalletList,
   updateAddressListAndBalance,
@@ -126,7 +125,6 @@ export const useSubscription = ({
   dispatch: StateDispatch
 }) => {
   const { pageNo, pageSize, keywords } = chain.transactions
-  const { hash: txHash } = chain.transaction
   useEffect(() => {
     const systemScriptSubscription = SystemScriptSubject.subscribe(({ codeHash = '' }: { codeHash: string }) => {
       systemScriptCache.save({ codeHash })
@@ -151,7 +149,6 @@ export const useSubscription = ({
             pageNo,
             pageSize,
           })(dispatch)
-          updateTransaction({ walletID, hash: txHash })
           break
         }
         case 'current-wallet': {
@@ -242,7 +239,7 @@ export const useSubscription = ({
       syncedBlockNumberSubscription.unsubscribe()
       commandSubscription.unsubscribe()
     }
-  }, [walletID, pageNo, pageSize, keywords, txHash, history, dispatch])
+  }, [walletID, pageNo, pageSize, keywords, history, dispatch])
 }
 
 export default {
diff --git a/packages/neuron-ui/src/index.tsx b/packages/neuron-ui/src/index.tsx
@@ -11,6 +11,7 @@ import Navbar from 'containers/Navbar'
 import Notification from 'containers/Notification'
 import Main from 'containers/Main'
 import Footer from 'containers/Footer'
+import Transaction from 'components/Transaction'
 import ErrorBoundary from 'components/ErrorBoundary'
 import withProviders from 'states/stateProvider'
 
@@ -63,7 +64,11 @@ Object.defineProperty(App, 'displayName', {
   value: 'App',
 })
 
-ReactDOM.render(<App />, document.getElementById('root'))
+if (window.location.hash.startsWith('#/transaction/')) {
+  ReactDOM.render(<Transaction />, document.getElementById('root'))
+} else {
+  ReactDOM.render(<App />, document.getElementById('root'))
+}
 
 serviceWorker.register()
 
diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json
@@ -238,7 +238,8 @@
       "delete-network-successfully": "Delete the network successfully",
       "addr-copied": "Address has been copied to the clipboard",
       "qrcode-copied": "QR Code has been copied to the clipboard",
-      "lock-arg-copied": "Lock Arg has been copied to the clipboard"
+      "lock-arg-copied": "Lock Arg has been copied to the clipboard",
+      "transaction-not-found": "The transaction is not found"
     },
     "sync": {
       "syncing": "Syncing",
diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json
@@ -238,7 +238,8 @@
       "delete-network-successfully": "节点已删除",
       "addr-copied": "地址已复制到剪贴板",
       "qrcode-copied": "二维码已复制到剪贴板",
-      "lock-arg-copied": "Lock Arg 已复制到剪贴板"
+      "lock-arg-copied": "Lock Arg 已复制到剪贴板",
+      "transaction-not-found": "未找到交易"
     },
     "sync": {
       "syncing": "同步中",
diff --git a/packages/neuron-ui/src/states/initStates/chain.ts b/packages/neuron-ui/src/states/initStates/chain.ts
@@ -1,27 +1,28 @@
 import { currentNetworkID, systemScript } from 'utils/localCache'
 import { ConnectionStatus } from 'utils/const'
 
+export const transactionState: State.DetailedTransaction = {
+  value: '',
+  hash: '',
+  type: 'other',
+  createdAt: '0',
+  updatedAt: '0',
+  timestamp: '0',
+  description: '',
+  status: 'pending',
+  inputs: [],
+  outputs: [],
+  deps: [],
+  blockNumber: '',
+  blockHash: '',
+  witnesses: [],
+}
+
 const chainState: State.Chain = {
   networkID: currentNetworkID.load(),
   connectionStatus: ConnectionStatus.Offline,
   tipBlockNumber: '',
   codeHash: systemScript.load().codeHash,
-  transaction: {
-    value: '',
-    hash: '',
-    type: 'other',
-    createdAt: '0',
-    updatedAt: '0',
-    timestamp: '0',
-    description: '',
-    status: 'pending',
-    inputs: [],
-    outputs: [],
-    deps: [],
-    blockNumber: '',
-    blockHash: '',
-    witnesses: [],
-  },
   transactions: {
     pageNo: 1,
     pageSize: 15,
diff --git a/packages/neuron-ui/src/states/stateProvider/actionCreators/transactions.ts b/packages/neuron-ui/src/states/stateProvider/actionCreators/transactions.ts
@@ -1,24 +1,11 @@
 import { NeuronWalletActions, AppActions, StateDispatch } from 'states/stateProvider/reducer'
 import {
   GetTransactionListParams,
-  getTransaction,
   getTransactionList,
   updateTransactionDescription as updateRemoteTransactionDescription,
 } from 'services/remote'
 import { addNotification } from './app'
 
-export const updateTransaction = (params: { walletID: string; hash: string }) => (dispatch: StateDispatch) => {
-  getTransaction(params).then(res => {
-    if (res.status) {
-      dispatch({
-        type: NeuronWalletActions.UpdateTransaction,
-        payload: res.result,
-      })
-    } else {
-      addNotification({ type: 'alert', content: res.message.title })(dispatch)
-    }
-  })
-}
 export const updateTransactionList = (params: GetTransactionListParams) => (dispatch: StateDispatch) => {
   getTransactionList(params).then(res => {
     if (res.status) {
@@ -66,6 +53,5 @@ export const updateTransactionDescription = (params: Controller.UpdateTransactio
 }
 
 export default {
-  updateTransaction,
   updateTransactionList,
 }
diff --git a/packages/neuron-ui/src/states/stateProvider/reducer.ts b/packages/neuron-ui/src/states/stateProvider/reducer.ts
@@ -11,7 +11,6 @@ export enum NeuronWalletActions {
   UpdateAddressDescription = 'updateAddressDescription',
   // transactions
   UpdateTransactionList = 'updateTransactionList',
-  UpdateTransaction = 'updateTransaction',
   UpdateTransactionDescription = 'updateTransactionDescription',
   // networks
   UpdateNetworkList = 'updateNetworkList',
@@ -189,15 +188,6 @@ export const reducer = (
         },
       }
     }
-    case NeuronWalletActions.UpdateTransaction: {
-      return {
-        ...state,
-        chain: {
-          ...chain,
-          transaction: payload,
-        },
-      }
-    }
     case NeuronWalletActions.UpdateNetworkList: {
       return {
         ...state,
@@ -382,15 +372,6 @@ export const reducer = (
         },
       }
     }
-    case AppActions.CleanTransaction: {
-      return {
-        ...state,
-        chain: {
-          ...chain,
-          transaction: initStates.chain.transaction,
-        },
-      }
-    }
     case AppActions.RequestPassword: {
       return {
         ...state,
diff --git a/packages/neuron-ui/src/types/App/index.d.ts b/packages/neuron-ui/src/types/App/index.d.ts
@@ -125,7 +125,6 @@ declare namespace State {
     connectionStatus: 'online' | 'offline'
     tipBlockNumber: string
     codeHash: string
-    transaction: DetailedTransaction
     transactions: {
       pageNo: number
       pageSize: number
