From: Zhiting Lin <zlin035@uottawa.ca>
Date: Tue, 6 Aug 2019 10:59:44 +0000 (+0800)
Subject: update the basic vuex store structure
X-Git-Tag: 2.1.3~10^2~19
X-Git-Url: http://git.osdn.net/view?a=commitdiff_plain;h=44ebf03fdb5dec4cbc754393e381272dd4e9da6c;p=bytom%2FByone.git

update the basic vuex store structure
---

diff --git a/package-lock.json b/package-lock.json
index 770d517..ad5bd41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "Byone",
-  "version": "0.7.0",
+  "version": "2.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -9875,6 +9875,11 @@
       "resolved": "https://registry.npmjs.org/vuescroll/-/vuescroll-4.9.0-beta.5.tgz",
       "integrity": "sha512-OItnSDVYPiHudq4Pm/MHhgig6Urc4oYzdV1/fGvxzCNWz8UNdozzEA4lLbBdqR99xH4b5I1ZzcJ1P3535sy/AA=="
     },
+    "vuex": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
+      "integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
+    },
     "walkdir": {
       "version": "0.0.11",
       "resolved": "https://registry.npmjs.org/walkdir/-/walkdir-0.0.11.tgz",
diff --git a/package.json b/package.json
index 5d38a19..ee36a96 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
         "vue-i18n": "^8.2.1",
         "vue-loading-overlay": "^3.0.1",
         "vue-router": "^3.0.2",
-        "vuescroll": "^4.9.0-beta.5"
+        "vuescroll": "^4.9.0-beta.5",
+        "vuex": "^3.1.1"
     },
     "browserslist": [
         "> 1%",
diff --git a/src/assets/language/cn.js b/src/assets/language/cn.js
index c01a02c..2ae1411 100644
--- a/src/assets/language/cn.js
+++ b/src/assets/language/cn.js
@@ -63,12 +63,14 @@ const cn = {
     tips:'提示：点击地址进行拷贝。'
   },
   main: {
-    mainNet: 'Bytom主网络',
-    testNet: 'Bytom测试网络',
-    soloNet: 'Bytom单机网络',
+    mainNet: '主网络',
+    testNet: '测试网络',
+    soloNet: '单机网络',
+    vaporTestnet: 'Vapor测试网络',
     mainNetShort: 'Bytom主网络',
     testNetShort: 'Bytom测试网络',
     soloNetShort: 'Bytom单机网络',
+    vaporTestnetShort: 'Vapor测试网络',
     copy: '点击复制',
     send: '发送',
     receive: '接收',
@@ -76,7 +78,8 @@ const cn = {
     noAccount: '当前网络无账户信息',
     create: '创建账户',
     unconfirmed :'未确认交易',
-    noRecord:"没有交易记录"
+    noRecord:"没有交易记录",
+    network:'网络'
   },
   transactionDetail: {
     title: '交易详情',
diff --git a/src/assets/language/en.js b/src/assets/language/en.js
index 953c8a1..d0ab28b 100644
--- a/src/assets/language/en.js
+++ b/src/assets/language/en.js
@@ -63,11 +63,13 @@ const en = {
     tips:'Tips: Click address to copy directly.'
   },
   main: {
-    mainNet: 'Bytom Mainnet',
-    testNet: 'Bytom Testnet',
-    soloNet: 'Bytom Solonet',
+    mainNet: 'Mainnet',
+    testNet: 'Testnet',
+    vaporTestnet: 'Vapor Testnet',
+    soloNet: 'Solonet',
     mainNetShort: 'Mainnet',
     testNetShort: 'Testnet',
+    vaporTestNetShort: 'Vapor Testnet',
     soloNetShort: 'Solonet',
     copy: 'Click to copy',
     send: 'Send',
@@ -77,6 +79,7 @@ const en = {
     create: 'Create account',
     noRecord:"No transaction records found.",
     unconfirmed :'Unconfirmed',
+    network:'Network'
   },
   transactionDetail: {
     title: 'Transaction Detail',
diff --git a/src/assets/language/index.js b/src/assets/language/index.js
index 093ebfe..fdfc0ea 100644
--- a/src/assets/language/index.js
+++ b/src/assets/language/index.js
@@ -21,11 +21,11 @@ export function have(lang) {
   return false;
 };
 
-export function getLanguage() {
-  if (have(localStorage.lang)) {
-    return localStorage.lang;
-  } 
+export function getLanguage(lang) {
+  if (have(lang)) {
+    return lang;
+  }
   return defaultLang;
 }
 
-export default messages;
\ No newline at end of file
+export default messages;
diff --git a/src/background.js b/src/background.js
index 3cbeec6..48191d7 100644
--- a/src/background.js
+++ b/src/background.js
@@ -74,6 +74,12 @@ export default class Background {
       case MsgTypes.GET_PROMPT:
         Background.getPrompt(sendResponse);
         break;
+      case MsgTypes.LOAD:
+        Background.load(sendResponse);
+        break;
+      case MsgTypes.UPDATE:
+        Background.update(sendResponse, message.payload);
+        break;
     }
   }
 
diff --git a/src/messages/types.js b/src/messages/types.js
index de70fae..8d68427 100644
--- a/src/messages/types.js
+++ b/src/messages/types.js
@@ -8,6 +8,8 @@ export const ENABLE = 'enable'
 export const ADVTRANSFER = 'advTransfer'
 export const SIGNMESSAGE = 'signMessage'
 export const SEND = 'send'
+export const LOAD = 'load';
+export const UPDATE = 'update';
 
 
 export const REQUEST_CURRENT_ACCOUNT = 'defaultAccount';
diff --git a/src/models/bytom.js b/src/models/bytom.js
index b27d749..c41fb12 100644
--- a/src/models/bytom.js
+++ b/src/models/bytom.js
@@ -1,8 +1,10 @@
 import Bytom from 'bytom-js-sdk'
 
 var networks = {
-  testnet: 'http://app.bycoin.io:3020/',
-  mainnet: 'https://api.bycoin.im:8000/'
+  vaporTestnet: 'http://52.82.55.145:3000/api/v1/vapor/',
+  testnet: 'http://app.bycoin.io:3020/api/v1/btm/',
+  solonet: 'http://app.bycoin.io:3060/api/v1/btm/',
+  mainnet: 'https://api.bycoin.im:8000/api/v1/btm/'
 }
 
 var bytom = new Bytom(networks, chrome.runtime.getURL('wasm/main.wasm'))
diff --git a/src/models/transaction.js b/src/models/transaction.js
index 063e0de..641bb74 100644
--- a/src/models/transaction.js
+++ b/src/models/transaction.js
@@ -15,7 +15,6 @@ transaction.convertArgument = function(argArray) {
   };
 
   let actionFunction = argArray.map(fn)
-  console.log(actionFunction)
   return Promise.all(actionFunction);
 };
 
diff --git a/src/popup.js b/src/popup.js
index 3112aaa..c6d2a70 100644
--- a/src/popup.js
+++ b/src/popup.js
@@ -14,6 +14,8 @@ import vSelect from '@/components/select'
 import MenuPage from '@/components/menu-page'
 import messages, { getLanguage } from '@/assets/language'
 import '@/assets/style.css'
+import {store} from "./store/store";
+import * as Actions from "./store/constants";
 
 Vue.use(VueI18n)
 const i18n = new VueI18n({
@@ -56,9 +58,12 @@ router.beforeEach((to, from, next) => {
   next()
 })
 
-new Vue({
-  el: '#app',
-  i18n: i18n,
-  router: router,
-  render: h => h(ViewBase)
-})
+store.dispatch(Actions.LOAD_BYTOM).then(() => {
+  new Vue({
+    el: '#app',
+    i18n: i18n,
+    router: router,
+    store,
+    render: h => h(ViewBase)
+  })
+});
diff --git a/src/prompt.js b/src/prompt.js
index 31e731e..c4cca6b 100644
--- a/src/prompt.js
+++ b/src/prompt.js
@@ -7,6 +7,8 @@ import vuescroll from 'vuescroll/dist/vuescroll-native'
 import 'vue-loading-overlay/dist/vue-loading.css'
 import 'vuescroll/dist/vuescroll.css'
 
+import {store} from './store/store'
+import * as Actions from './store/constants'
 import Routers from './router'
 import ViewBase from '@/views/viewBase'
 import Dialog from '@/components/dialog'
@@ -43,9 +45,13 @@ const RouterConfig = {
 }
 const router = new VueRouter(RouterConfig)
 
-new Vue({
-  el: '#app',
-  i18n: i18n,
-  router: router,
-  render: h => h(ViewBase)
-})
+store.dispatch(Actions.LOAD_BYTOM).then(() => {
+  new Vue({
+    el: '#app',
+    i18n: i18n,
+    router: router,
+    store,
+    render: h => h(ViewBase)
+  })
+});
+
diff --git a/src/store/actions.js b/src/store/actions.js
new file mode 100644
index 0000000..398248f
--- /dev/null
+++ b/src/store/actions.js
@@ -0,0 +1,88 @@
+import * as Actions from './constants'
+import Bytom from '../utils/Bytom'
+import InternalMessage from '../messages/internal'
+import * as InternalMessageTypes from '../messages/types'
+
+export const actions = {
+    [Actions.SET_BYTOM]:({commit}, bytom) => commit(Actions.SET_BYTOM, bytom),
+
+    [Actions.LOAD_BYTOM]:({dispatch}) => {
+        return new Promise((resolve, reject) => {
+            InternalMessage.signal(InternalMessageTypes.LOAD).send().then(_bytom => {
+                dispatch(Actions.SET_BYTOM, Bytom.fromJson(_bytom));
+                resolve();
+            })
+        })
+    },
+
+    [Actions.UPDATE_STORED_BYTOM]:({dispatch}, bytom) => {
+        return new Promise((resolve, reject) => {
+            InternalMessage.payload(InternalMessageTypes.UPDATE, bytom).send().then(_bytom => {
+                dispatch(Actions.SET_BYTOM, Bytom.fromJson(_bytom));
+                resolve(_bytom)
+            })
+        })
+    },
+
+    // [Actions.IMPORT_BYTOM]:({dispatch}, {imported, seed}) => {
+    //     return new Promise(async (resolve, reject) => {
+    //
+    //         const bytom = Bytom.fromJson(imported);
+    //
+    //         await Promise.all(PluginRepository.signatureProviders().map(async plugin => {
+    //             const network = await plugin.getEndorsedNetwork();
+    //
+    //             bytom.settings.networks = bytom.settings.networks.filter(_network => _network.unique() !== network.unique());
+    //             bytom.settings.networks.push(network);
+    //         }));
+    //
+    //         bytom.meta = new Meta();
+    //
+    //         InternalMessage.payload(InternalMessageTypes.SET_SEED, seed).send().then(() => {
+    //             dispatch(Actions.UPDATE_STORED_BYTOM, bytom).then(_bytom => {
+    //                 resolve();
+    //             })
+    //         });
+    //     })
+    // },
+
+    [Actions.CREATE_NEW_BYTOM]:({state, commit, dispatch}, network, currentAccount) => {
+        return new Promise(async (resolve, reject) => {
+            const bytom = Bytom.fromJson(state.bytom);
+            bytom.settings.network = network;
+            bytom.currentAccount = currentAccount
+
+            dispatch(Actions.UPDATE_STORED_BYTOM, bytom).then(_bytom => {
+                dispatch(Actions.SET_BYTOM, Bytom.fromJson(_bytom));
+                resolve();
+            })
+        })
+    },
+
+
+    // [Actions.PUSH_ALERT]:({state, commit}, error) => {
+    //     function waitForErrorResult(resolve){
+    //         if(state.alertResult) {
+    //             const alertResult = Object.assign({}, state.alertResult);
+    //             commit(Actions.CLEAR_ALERT_RESULT);
+    //             resolve(alertResult)
+    //         } else setTimeout(() => {
+    //             waitForErrorResult(resolve);
+    //         }, 100)
+    //     }
+    //
+    //     return new Promise((resolve, reject) => {
+    //         commit(Actions.PUSH_ALERT, error);
+    //         waitForErrorResult(resolve);
+    //     })
+    // },
+    // [Actions.PULL_ALERT]:({commit}) => commit(Actions.PULL_ALERT),
+    // [Actions.PUSH_ALERT_RESULT]:({commit}, alertResult) => commit(Actions.PUSH_ALERT_RESULT, alertResult),
+    // [Actions.CLEAR_ALERT_RESULT]:({commit}) => commit(Actions.CLEAR_ALERT_RESULT),
+    //
+    //
+    // [Actions.PUSH_PROMPT]:({state, commit}, prompt) => {
+    //     if(state.prompt) state.prompt.responder(null);
+    //     commit(Actions.PUSH_PROMPT, prompt);
+    // },
+};
diff --git a/src/store/constants.js b/src/store/constants.js
new file mode 100644
index 0000000..2dc056b
--- /dev/null
+++ b/src/store/constants.js
@@ -0,0 +1,18 @@
+
+export const LOAD_BYTOM = 'loadBytom';
+export const SET_BYTOM = 'setBytom';
+export const IS_UNLOCKED = 'isUnlocked';
+export const UPDATE_STORED_BYTOM = 'updateStoredBytom';
+export const CREATE_NEW_BYTOM = 'createNewBytom';
+export const IMPORT_BYTOM = 'importBytom';
+export const SET_AUTO_LOCK = 'setAutoLock';
+export const LOCK = 'lock';
+export const DESTROY = 'destroy';
+
+export const PUSH_ALERT = 'pushAlert';
+export const PULL_ALERT = 'pullAlert';
+export const PUSH_ALERT_RESULT = 'pushAlertResult';
+export const CLEAR_ALERT_RESULT = 'clearAlertResult';
+
+export const PUSH_PROMPT = 'pushPrompt';
+export const PULL_PROMPT = 'pullPrompt';
diff --git a/src/store/mutations.js b/src/store/mutations.js
new file mode 100644
index 0000000..a1d28d8
--- /dev/null
+++ b/src/store/mutations.js
@@ -0,0 +1,13 @@
+import * as Mutations from './constants'
+// import TimingHelpers from '../util/TimingHelpers';
+
+export const mutations = {
+    [Mutations.SET_BYTOM]:(state, bytom) => state.bytom = bytom,
+    [Mutations.PUSH_ALERT]:(state, error) => state.alerts.push(error),
+    [Mutations.PULL_ALERT]:(state, error) => state.alerts.shift(),
+    [Mutations.PUSH_ALERT_RESULT]:(state, alertResult) => state.alertResult = alertResult,
+    [Mutations.CLEAR_ALERT_RESULT]:(state) => state.alertResult = null,
+    [Mutations.PUSH_PROMPT]:(state, prompt) => state.prompt = prompt,
+    // [Mutations.SET_AUTO_LOCK]:(state, inactivityInterval) =>
+    //     state.bytom.settings.inactivityInterval = TimingHelpers.minutes(inactivityInterval),
+};
diff --git a/src/store/store.js b/src/store/store.js
new file mode 100644
index 0000000..f9e3be1
--- /dev/null
+++ b/src/store/store.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import Vuex from 'vuex';
+
+import {mutations} from './mutations';
+import {actions} from './actions';
+
+Vue.use(Vuex);
+
+const state = {
+    bytom:null,
+
+    alerts:[],
+    alertResult:null,
+
+    prompt:null,
+};
+
+const getters = {
+    currentAccount:state => state.bytom.currentAccount,
+    accountList:state => state.bytom.accountList,
+    net:state => state.bytom.settings.network,
+    language:state => state.bytom.settings.language,
+
+    // FOR PROMPTS ONLY
+    messages:state => state.prompt.data.messages || [],
+};
+
+export const store = new Vuex.Store({
+    state,
+    getters,
+    mutations,
+    actions
+})
diff --git a/src/views/home.vue b/src/views/home.vue
index 722ebb3..2e81bc0 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -173,12 +173,14 @@
                         <i class="iconfont icon-menu"></i>
                     </a>
                 </div>
-                <div class="topbar-middle bg-secondary">
-                    <select v-model="network" @change="networkToggle">
-                        <option value="mainnet">{{ $t('main.mainNet') }}</option>
-                        <option value="testnet">{{ $t('main.testNet') }}</option>
-                    </select>
-                </div>
+                <!--<div class="topbar-middle bg-secondary">-->
+                    <!--<select v-model="network" @change="networkToggle">-->
+                        <!--<option value="mainnet">{{ $t('main.mainNet') }}</option>-->
+                        <!--<option value="testnet">{{ $t('main.testNet') }}</option>-->
+                        <!--<option value="solonet">{{ $t('main.soloNet') }}</option>-->
+                        <!--<option value="vaporTestnet">{{ $t('main.vaporTestnet') }}</option>-->
+                    <!--</select>-->
+                <!--</div>-->
             </div>
             <div class="content">
                 <div v-if="currentAccount.address!=undefined" class="amount color-white">
@@ -260,6 +262,7 @@ import address from "@/utils/address";
 import account from "@/models/account";
 import transaction from "@/models/transaction";
 import { BTM } from "@/utils/constants";
+import { mapGetters, mapState } from 'vuex'
 
 const EnterActive = 'animated faster fadeInLeft';
 const LeaveActive = 'animated faster fadeOutLeft';
@@ -267,9 +270,6 @@ export default {
     name: "",
     data() {
         return {
-            network: "mainnet",
-            accounts: [],
-            currentAccount: {},
             transactions: [],
             maskShow: false,
             start: 0,
@@ -302,28 +302,35 @@ export default {
         },
         currentAccount(newVal, oldVal) {
             if (newVal.guid == undefined){
-              localStorage.currentAccount = {}
               return;
             }
-            localStorage.currentAccount = JSON.stringify(newVal);
 
             this.refreshTransactions(newVal.guid, newVal.address).then(transactions => {
                 this.transactions = transactions
             });
         },
-        'currentAccount.guid'(guid) {
-            if (guid == undefined) return;
-
-            this.refreshBalance(guid);
-        }
     },
     computed: {
         shortAddress: function () {
             return address.short(this.currentAccount.address)
         },
         accountBalance: function () {
-            return (this.currentAccount.balance != null && this.currentAccount.balance != 0) ? this.currentAccount.balance : '0.00'
-        }
+            let balance
+            const balances = this.currentAccount.balances
+            if(balances.length >0 ){
+                const balanceObject = balances.filter(b => b.asset === BTM)[0]
+                balance = balanceObject.balance/Math.pow(10,balanceObject.decimals)
+            }
+            return (balance != null && balance != 0) ? balance : '0.00'
+        },
+        ...mapState([
+          'bytom'
+        ]),
+        ...mapGetters([
+          'currentAccount',
+          'accountList',
+          'net'
+        ])
     },
     methods: {
         setupRefreshTimer() {
@@ -332,8 +339,7 @@ export default {
             }, 10000)
         },
         setupNetwork() {
-            this.network = localStorage.bytomNet;
-            account.setupNet(this.network);
+            account.setupNet(this.net);
         },
         networkToggle: function (val) {
             localStorage.bytomNet = this.network;
@@ -342,13 +348,13 @@ export default {
             this.refreshAccounts();
         },
         showQrcode: function () {
-          this.$router.push({ name: 'received', params: { address: this.currentAccount.address } })
+          this.$router.push('received')
         },
         openMenu: function () {
-            this.$router.push({ name: 'menu', params: { accounts: this.accounts, selected: this.currentAccount } })
+            this.$router.push('menu')
         },
         transferOpen: function () {
-            this.$router.push({ name: 'transfer', params: { account: this.currentAccount } })
+            this.$router.push('transfer')
         },
         handleScroll(vertical, horizontal, nativeEvent) {
             if (vertical.process == 0) {
@@ -368,28 +374,9 @@ export default {
                 });
             }
         },
-        refreshAccounts: function () {
-          account.list().then(accounts => {
-                this.accounts = accounts;
-                if (accounts.length == 0) {
-                    return;
-                }
-
-                if (this.currentAccount.guid == undefined) {
-                    this.currentAccount = accounts[0];
-                }
-            })
-        },
         refreshBalance: function (guid) {
-            account.balance(guid).then(balances => {
-                let balance = 0
-                if(balances.length >0 ){
-                  const balanceObject = balances.filter(b => b.asset === BTM)[0]
-                  balance = balanceObject.balance/Math.pow(10,balanceObject.decimals)
-                }
-                this.currentAccount.balance = balance;
-                this.currentAccount = Object.assign({}, this.currentAccount);
-            }).catch(error => {
+            account.balance(guid)
+              .catch(error => {
                 console.log(error);
             });
         },
@@ -447,12 +434,11 @@ export default {
         },
     },
     mounted() {
-        if(localStorage.currentAccount !== undefined){
-          this.currentAccount = JSON.parse(localStorage.currentAccount);
-        }
         this.setupNetwork();
-        this.refreshAccounts();
         this.setupRefreshTimer();
-    }
-};
+        this.refreshTransactions(this.currentAccount.guid, this.currentAccount.address).then(transactions => {
+          this.transactions = transactions
+        });
+    },
+  };
 </script>
diff --git a/src/views/received.vue b/src/views/received.vue
index 8a95429..e648cdd 100644
--- a/src/views/received.vue
+++ b/src/views/received.vue
@@ -49,6 +49,8 @@
 <script>
   import QRCode from "qrcodejs2";
   import ClipboardJS from "clipboard";
+  import {  mapGetters } from 'vuex'
+
   export default {
   data() {
     return {
@@ -58,6 +60,11 @@
       addressTitle: this.$t("main.copy")
     };
   },
+    computed: {
+      ...mapGetters([
+        'currentAccount',
+      ])
+    },
   methods: {
     close: function () {
       this.$router.go(-1)
@@ -79,8 +86,8 @@
     },
   },
   mounted() {
-    if (this.$route.params.address != undefined) {
-      this.addr = this.$route.params.address;
+    if (this.currentAccount.address != undefined) {
+      this.addr = this.currentAccount.address;
       this.qrcode = new QRCode( "qrcode", {
         text: this.addr,
         width: 150,
diff --git a/src/views/sideMenu/homeMenu.vue b/src/views/sideMenu/homeMenu.vue
index 42d05e8..5104209 100644
--- a/src/views/sideMenu/homeMenu.vue
+++ b/src/views/sideMenu/homeMenu.vue
@@ -82,8 +82,8 @@
         </div>
         <div class="menu-content">
             <div class="list accounts">
-                <div v-for="(account, index) in accounts" :key="index" @click="accountSelected(account)">
-                    <div :class="(selectedAccount != undefined && account.address == selectedAccount.address) ? 'list-item active': 'list-item'">
+                <div v-for="(account, index) in accountList" :key="index" @click="accountSelected(account)">
+                    <div :class="(currentAccount != undefined && account.address == currentAccount.address) ? 'list-item active': 'list-item'">
                       <div class="wallet">
                         <i class="iconfont icon-wallet"></i>
                       </div>
@@ -128,19 +128,36 @@
 
 <script>
   import { BTM } from "@/utils/constants";
+  import { mapActions, mapGetters, mapState } from 'vuex'
+  import * as Actions from '@/store/constants';
 
   export default {
     name: "",
     data() {
-        return {
-            accounts: [],
-            selectedAccount: {},
-        };
+      return {};
+    },
+    computed: {
+      ...mapState([
+        'bytom'
+      ]),
+      ...mapGetters([
+        'currentAccount',
+        'accountList'
+      ])
+    },
+    watch: {
+
     },
     methods: {
         accountSelected: function (accountInfo) {
-            this.selectedAccount = Object.assign({}, accountInfo);
-            this.$router.push({ name: 'home', params: { selectedAccount: this.selectedAccount } })
+          const bytom = this.bytom.clone();
+
+          if (bytom.currentAccount != accountInfo) {
+            bytom.currentAccount = accountInfo;
+            this[Actions.UPDATE_STORED_BYTOM](bytom).then(()=>{
+              this.$router.push('/')
+            })
+          }
         },
         calculateBalance: function (balances) {
           if( balances.length>0 ){
@@ -149,12 +166,12 @@
             return balance
           }
           return 0.00;
-        }
-    }, mounted() {
-        let params = this.$route.params;
-
-        this.accounts = params.accounts
-        this.selectedAccount = params.selected
+        },
+      ...mapActions([
+        Actions.UPDATE_STORED_BYTOM,
+      ])
+    },
+    mounted() {
     }
 };
 </script>
diff --git a/src/views/sideMenu/menuSettings.vue b/src/views/sideMenu/menuSettings.vue
index 5fffb06..5841b6f 100644
--- a/src/views/sideMenu/menuSettings.vue
+++ b/src/views/sideMenu/menuSettings.vue
@@ -23,13 +23,13 @@
 </style>
 
 <template>
-    <MenuPage :title="$t('setting.title')" @back="back">
+    <MenuPage :title="$t('setting.title')">
         <div class="row">
             <div class="label">
                 <p>{{ $t("setting.lang") }}</p>
             </div>
             <div class="form-item setting">
-                <v-select style="height: 32px;" class="select" :value="selected" :clearable="false" :onChange="onChange" :options="i18nOptions"></v-select>
+                <v-select style="height: 32px;" class="select" :value="selected" :clearable="false" :onChange="changeLanguage" :options="i18nOptions"></v-select>
             </div>
         </div>
         <div class="row">
@@ -40,49 +40,127 @@
                 <v-select style="height: 32px;" class="select" :value="unit" :clearable="false" :options="['BTM']"></v-select>
             </div>
         </div>
+        <div class="row">
+            <div class="label">
+                <p>{{ $t("main.network") }}</p>
+            </div>
+            <div class="form-item setting">
+                <v-select style="height: 32px;" class="select"  :value="network" :clearable="false" :options="networks" :onChange="networkToggle"></v-select>
+            </div>
+        </div>
     </MenuPage>
 </template>
 
 <script>
 import { have } from "@/assets/language";
+import account from "@/models/account";
+import * as Actions from '@/store/constants';
+import { mapActions, mapGetters, mapState } from 'vuex'
 
 export default {
     name: "",
     data() {
         return {
-            unit: "BTM",
+          currentAccount: {},
+          network: { label: this.$t('main.mainNet'), value: "mainnet" },
+          unit: "BTM",
             i18nOptions: [
                 { label: "中文", value: "cn" },
                 { label: "English", value: "en" }
             ],
+            networks: [
+              { label: this.$t('main.mainNet'), value: "mainnet" },
+              { label: this.$t('main.testNet'), value: "testnet" },
+              { label: this.$t('main.soloNet'), value: "solonet" }
+            ],
             selected: { label: "中文", value: "cn" },
             hashVersion: ""
         };
     },
+    computed: {
+      ...mapState([
+        'bytom'
+      ]),
+      ...mapGetters([
+        'net',
+        'language'
+      ])
+    },
     methods: {
-        onChange: function (value) {
-            if (localStorage.lang != value.value) {
-                localStorage.lang = value.value;
-                this.$i18n.locale = value.value;
-                this.selected = value;
+        changeLanguage(lang){
+          const bytom = this.bytom.clone();
+
+          if (bytom.settings.language != lang.value) {
+            bytom.settings.language = lang.value;
+            this.$i18n.locale = lang.value;
+            this.selected = lang;
+            this[Actions.UPDATE_STORED_BYTOM](bytom)
+          }
+        },
+        networkToggle: function (val) {
+          const bytom = this.bytom.clone();
+
+          if (bytom.settings.network != val.value) {
+            bytom.settings.network = val.value;
+            this.network = val;
+            account.setupNet(val.value);
+
+            bytom.currentAccount = {}
+            account.list().then(accounts => {
+              bytom.accountList = accounts;
+              if (accounts.length > 0) {
+                bytom.currentAccount = accounts[0];
+              }
+
+              this[Actions.UPDATE_STORED_BYTOM](bytom)
+            }).catch(errors=>{
+              bytom.accountList =[]
+              this[Actions.UPDATE_STORED_BYTOM](bytom)
+            })
+          }
+        },
+        refreshAccounts: function () {
+          account.list().then(accounts => {
+            this.accounts = accounts;
+            if (accounts.length == 0) {
+              return;
             }
+
+            this.currentAccount = accounts[0];
+          })
         },
-        back: function () {
-            this.$emit("on-back");
+        setupNetwork(network) {
+          this.network = network;
         },
-        close: function () {
-            this.$emit("on-exit");
-        }
+        ...mapActions([
+          Actions.UPDATE_STORED_BYTOM,
+        ])
     },
     mounted: function () {
         this.hashVersion = version.hash;
-        if (have(localStorage.lang)) {
-            if (localStorage.lang == "cn") {
-                this.selected = { label: "中文", value: "cn" };
-            } else if (localStorage.lang == "en") {
-                this.selected = { label: "English", value: "en" };
+        if (have(this.language)) {
+              if (this.language == "cn") {
+                  this.selected = { label: "中文", value: "cn" };
+              } else if (this.language == "en") {
+                  this.selected = { label: "English", value: "en" };
+              }
+          }
+        if(this.net) {
+            let network
+            switch(this.net){
+              case 'mainnet':
+                network = this.networks[0]
+                break;
+              case 'testnet':
+                network = this.networks[1]
+                break;
+              case 'solonet':
+                network = this.networks[2]
+                break;
             }
-        }
+            this.setupNetwork(network);
+          }
+
     }
 };
 </script>
diff --git a/src/views/welcome/creation.vue b/src/views/welcome/creation.vue
index 4762941..e432a52 100644
--- a/src/views/welcome/creation.vue
+++ b/src/views/welcome/creation.vue
@@ -192,9 +192,12 @@
 import account from "../../models/account";
 import { getLanguage } from '@/assets/language'
 import getLang from "../../assets/language/sdk";
+import { mapActions, mapGetters, mapState } from 'vuex'
+
 let mainNet = null;
 let testNet = null;
 let soloNet = null;
+let vaporTestnet = null;
 export default {
     name: "",
     data() {
@@ -231,7 +234,14 @@ export default {
                 return "form-item-content content";
             }
             return "form-item-label form-item-label-cn";
-        }
+        },
+      ...mapState([
+        'bytom'
+      ]),
+      ...mapGetters([
+        'net',
+        'language'
+      ])
     },
     props: {
         i18n: {
@@ -323,19 +333,24 @@ export default {
     mounted() {
         mainNet = { label: this.$t('main.mainNet'), value: "mainnet" };
         testNet = { label: this.$t('main.testNet'), value: "testnet" };
-        this.nets = [mainNet, testNet];
-        if (localStorage.bytomNet != undefined) {
-            if (localStorage.bytomNet == "mainnet") {
+        soloNet = { label: this.$t('main.soloNet'), value: "solonet" };
+        vaporTestnet = { label: this.$t('main.vaporTestnet'), value: "vaporTestnet" };
+        this.nets = [mainNet, testNet,vaporTestnet];
+        if (this.net != undefined) {
+            if (this.net == "mainnet") {
                 this.selected = mainNet;
-            } else if (localStorage.bytomNet == "testnet") {
+            } else if (this.net == "testnet") {
                 this.selected = testNet;
+            } else if (this.net == "solonet") {
+                this.selected = soloNet;
+            } else if (this.net == "vaporTestnet") {
+                this.selected = vaporTestnet;
             }
         } else {
             this.selected = mainNet;
-            localStorage.bytomNet = "mainnet";
         }
         account.setupNet(this.selected);
-        this.i18n = getLanguage();
+        this.i18n = getLanguage(this.language);
     }
 };
 </script>