OSDN Git Service

update the setting views
authorZhiting Lin <zlin035@uottawa.ca>
Wed, 12 Aug 2020 02:09:57 +0000 (10:09 +0800)
committerZhiting Lin <zlin035@uottawa.ca>
Wed, 12 Aug 2020 02:09:57 +0000 (10:09 +0800)
13 files changed:
src/assets/language/cn.js
src/assets/style.css
src/components/MenubarComponent.vue
src/components/modal-passwd.vue
src/popup.js
src/router.js
src/utils/Keychain.js
src/views/home.vue
src/views/settings/currencySelection.vue [new file with mode: 0644]
src/views/settings/deleteWallet.vue [new file with mode: 0644]
src/views/settings/languageSelection.vue [new file with mode: 0644]
src/views/settings/settings.vue [new file with mode: 0644]
src/views/sideMenu/menuSettings.vue [deleted file]

index 56a50e3..486f8ed 100644 (file)
@@ -202,7 +202,7 @@ const cn = {
     createAccount: '创建账户',
     backup: '备份',
     help: '帮助',
-    setting: '设置'
+    setting: '设置',
   },
   createAccount: {
     title: '创建钱包',
@@ -241,6 +241,7 @@ const cn = {
     BTM0004:'请输入Keystore。',
     BTM0005:'输入数量大于可用余额。',
     BTM0006:'输入有效的地址格式。',
+    BTM0007:'钱包名称错误,请输入正确钱包名称。',
   },
   successMsg:{
     createWallet:{
@@ -261,11 +262,14 @@ const cn = {
     page: '帮助与信息'
   },
   setting: {
-    title: '设置',
-    version: '钱包版本',
-    lang: '语言',
-    unit: 'BTM数量单位',
-    currency:'货币'
+    lang: '显示语言',
+    currency:'货币单位',
+    deleteWallet:'删除钱包',
+    deleteHint:'执行删除钱包操作前请确认您已备份好keystore文件,否则将无法找回!',
+    deleteBack:'返回备份',
+    deleteConfirm:'确认删除',
+    deleteConfirmHint:'请输入钱包名称以确认删除',
+    emptyWallet:'钱包名称不能为空'
   },
   backup: {
     title: '备份',
index 7a834be..dd1f620 100644 (file)
@@ -338,7 +338,7 @@ hr {
 /*}*/
 
 .color-black {
-  color: rgba(0, 0, 0, 0.88);;
+  color: rgba(0, 0, 0, 0.88) !important;
 }
 .color-green {
   color: #035BD4;
index ca80a47..3303968 100644 (file)
@@ -8,8 +8,8 @@
           <figure  v-on:click=""><i class="iconfont iconwallet_filled"></i></figure>
           <figure  v-on:click=""><i class="iconfont iconbackup_filled"></i></figure>
         </section>
-        <figure class="setting" v-on:click="">
-          <i class="iconfont iconSetting_fiiled" @click="$router.go(-1)"></i>
+        <figure class="setting" :class="active('SETTINGS')" v-on:click="toggleTab('SETTINGS')">
+          <i class="iconfont iconSetting_fiiled" ></i>
         </figure>
     </nav>
 </template>
                 RouteNames.RECEIVE,
                 RouteNames.ASSET_SELECTION
               ]
+
+              const setting_tab = [
+                RouteNames.SETTINGS,
+                RouteNames.SETTINGS_CURRENCY,
+                RouteNames.SETTINGS_LANG,
+                RouteNames.SETTINGS_DELETE,
+              ]
               switch(name){
                 case 'HOME':{
                   if(home_tab.includes(this.$route.name)){
                     return "active";
                   }
+                  break;
+                }
+                case 'SETTINGS':{
+                  if(setting_tab.includes(this.$route.name)){
+                    return "active";
+                  }
+                  break;
                 }
 
                 default:
         }
 
         i.iconfont {
-            cursor: pointer;
-            color: #d6d6d6;
+          cursor: pointer;
+          color: #d6d6d6;
+          transition: color 0.2s ease;
+          width: 40px;
+          height: 40px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+
+          &:hover {
+            color:rgba(0,0,0,0.3);
+          }
+
         }
 
         figure.setting{
           text-align: center;
         }
 
+        figure.active{
+          .iconfont {
+            background: #F5F5F5;
+            border-radius: 20px;
+            color: #333333;
+          }
+        }
+
         .breadcrumb {
             padding-top: 15px;
-
-            figure.active{
-              .iconfont {
-                background: #F5F5F5;
-                border-radius: 20px;
-                color: #333333;
-              }
-            }
-
-            .iconfont {
-                cursor: pointer;
-                color:#dbdbdb;
-                transition: color 0.2s ease;
-                width: 40px;
-                height: 40px;
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-
-                &:hover {
-                    color:rgba(0,0,0,0.3);
-                }
-
-            }
         }
 
         &.no-chain {
index 1732488..df06b4c 100644 (file)
@@ -34,7 +34,8 @@
             <div v-show="show" class="confirm form bg-white">
                 <div class="form-item">
                     <div class="form-item-content">
-                        <input type="password" v-model="passwd" :placeholder="$t('transfer.password')" autofocus>
+                        <input v-if="text_placeholder" type="text" v-model="passwd" :placeholder="text_placeholder" autofocus>
+                        <input v-else type="password" v-model="passwd" :placeholder="$t('transfer.password')" autofocus>
                     </div>
                 </div>
                 <div class="btn-group btn-inline">
@@ -58,6 +59,12 @@ export default {
         };
     },
     props: {
+        text_placeholder:{
+            type: String,
+        },
+        text_error_hint:{
+            type: String,
+        },
         i18n: {
             type: String,
             default: 'cn',
@@ -81,7 +88,7 @@ export default {
         confirm() {
             if (this.passwd == "") {
                 this.$toast.error(
-                    this.$t("transfer.emptyPassword")
+                    this.text_error_hint || this.$t("transfer.emptyPassword")
                 );
                 return;
             }
index e729eea..b08ac25 100644 (file)
@@ -65,6 +65,15 @@ store.dispatch(Actions.LOAD_BYTOM).then(() => {
 
   account.setupNet(`${store.getters.net}${store.getters.netType}`)
 
+  store.watch(
+    (state, getters) => getters.netType,
+    (newValue, oldValue) => {
+      if(newValue !== oldValue){
+        account.setupNet(`${store.getters.net}${store.getters.netType}`)
+      }
+    },
+  );
+
   Vue.filter('moment', function(value, formatString) {
     formatString = formatString || 'YYYY-MM-DD HH:mm:ss'
     return moment(value * 1000).format(formatString)
@@ -95,3 +104,5 @@ store.dispatch(Actions.LOAD_BYTOM).then(() => {
     render: h => h(ViewBase)
   })
 });
+
+
index 9f67f45..97f3822 100644 (file)
@@ -19,7 +19,10 @@ export const RouteNames = {
   // ONBOARDING:'onboarding',
   // SHOW_MNEMONIC:'showMnemonic',
   // MAIN_MENU:'mainMenu',
-  // SETTINGS:'settings',
+  SETTINGS:'settings',
+  SETTINGS_LANG:'settings-language',
+  SETTINGS_CURRENCY:'settings-currency',
+  SETTINGS_DELETE:'settings-delete',
   //
   TRANSFER:'transfer',
   ASSET_SELECTION:'asset-selection',
@@ -233,19 +236,44 @@ const routers = [
               require(['@/views/sideMenu/menuHelp.vue'], resolve)
             }
           },
-          {
-            path: '/menu/settings',
-            name: 'menu-settings',
-            meta: { title: '设置' },
-            component: resolve => {
-              require(['@/views/sideMenu/menuSettings.vue'], resolve)
-            }
-          }
+
         ]
       }
     ]
   },
   {
+    path: '/settings',
+    name: RouteNames.SETTINGS,
+    meta: { title: '设置' },
+    component: resolve => {
+      require(['@/views/settings/settings.vue'], resolve)
+    }
+  },
+  {
+    path: '/settings-lang',
+    name: RouteNames.SETTINGS_LANG,
+    meta: { title: '设置语言' },
+    component: resolve => {
+      require(['@/views/settings/languageSelection.vue'], resolve)
+    }
+  },
+  {
+    path: '/settings-currency',
+    name: RouteNames.SETTINGS_CURRENCY,
+    meta: { title: '设置货币' },
+    component: resolve => {
+      require(['@/views/settings/currencySelection.vue'], resolve)
+    }
+  },
+  {
+    path: '/settings-delete',
+    name: RouteNames.SETTINGS_DELETE,
+    meta: { title: '删除钱包' },
+    component: resolve => {
+      require(['@/views/settings/deleteWallet.vue'], resolve)
+    }
+  },
+  {
     path: '/protocol',
     name: RouteNames.PROTOCOL,
     meta: { title: '用户协议' },
index 21192b9..45fab81 100644 (file)
@@ -15,7 +15,11 @@ export default class Keychain {
   findByGuid(guid){ return Object.values(this.pairs).find(id => id.guid === guid); }
   findByAddress(address){ return Object.values(this.pairs).find(id => id.address === address || id.vpAddress=== address); }
 
-
+  removeByAlias(alias){
+    if(this.pairs[alias]){
+      delete(this.pairs[alias])
+    }
+  }
   removeUnverifyIdentity(){
     const pairObject = Object.values(this.pairs).filter(id => !id.vMnemonic );
     for(let o of pairObject){
index f8810fe..6d0d000 100644 (file)
@@ -348,6 +348,7 @@ import { mapActions, mapGetters, mapState } from 'vuex'
 import * as Actions from '@/store/constants';
 import _ from 'lodash';
 import { Number as Num } from "@/utils/Number"
+import BigNumber from "bignumber.js"
 
 
 const EnterActive = 'animated faster fadeInLeft';
@@ -374,6 +375,7 @@ export default {
                 inUsd: "0"
               }
             ],
+            t: null
         };
     },
     watch: {
@@ -416,7 +418,8 @@ export default {
 
             if(balances && balances.length >0 ){
                 const currency = camelize(this.currency)
-                balance = _.sumBy(balances, function(o) { return Number(o[currency]); })
+                const arr = balances.map(o => o[currency])
+                balance = BigNumber.sum.apply(null, arr)
             }
             return  Num.formatCurrency( (balance != null && balance != 0)? balance : '0.00', this.currency)
         },
@@ -472,7 +475,10 @@ export default {
         }
       },
         setupRefreshTimer() {
-            setInterval(() => {
+          if(this.t){
+             clearInterval(this.t)
+          }
+          this.t = setInterval(() => {
                 this.refreshBalance(this.address)
             }, 10000)
         },
@@ -537,11 +543,16 @@ export default {
       ])
     },
     mounted() {
-        this.setupRefreshTimer();
-        this.refreshBalance(this.address)
+      this.setupRefreshTimer();
+      this.refreshBalance(this.address)
       if (this.netType){
         this.isVapor = this.netType =='vapor'
       }
     },
+    beforeDestroy() {
+      if(this.t){
+        clearInterval(this.t)        
+      }
+    }
   };
 </script>
diff --git a/src/views/settings/currencySelection.vue b/src/views/settings/currencySelection.vue
new file mode 100644 (file)
index 0000000..54dbdd4
--- /dev/null
@@ -0,0 +1,79 @@
+<style lang="scss" scoped>
+  .header{
+    display: flex;
+    margin-bottom: 20px;
+    h1{
+      margin-left: 12px;
+      font-size: 20px;
+    }
+  }
+
+  .selction-section{
+    height: calc( 100% - 149px );
+    overflow: scroll;
+  }
+
+</style>
+
+<template>
+    <div class="warp-menu bg-grey">
+        <section class="header">
+          <BackButton :small="true" />
+          <h1 class="color-black">
+            <div class="welcome-title">{{ $t("setting.currency") }}</div>
+          </h1>
+        </section>
+        <section class="selction-section">
+          <SelectionPage :value="data" :options="options" :onChange="changeCurrency"></SelectionPage>
+        </section>
+
+    </div>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex'
+import * as Actions from '@/store/constants';
+
+export default {
+    name: "",
+    data() {
+        return {
+          data :'',
+          options: [
+            { label: "CNY", value: "inCny" },
+            { label: "USD", value: "inUsd" },
+            { label: "BTC", value: "inBtc" }
+          ],
+        };
+    },
+    computed: {
+      ...mapState([
+        'bytom',
+      ]),
+      ...mapGetters([
+        'currency'
+      ])
+    },
+    methods: {
+      changeCurrency(event){
+        const curr = event.target.value
+
+        if (this.currency != curr) {
+          const bytom = this.bytom.clone();
+
+          bytom.settings.currency = curr;
+          this.data = curr;
+          this[Actions.UPDATE_STORED_BYTOM](bytom)
+        }
+      },
+      ...mapActions([
+        Actions.UPDATE_STORED_BYTOM,
+      ])
+    },
+    mounted() {
+      if(this.currency){
+        this.data = this.currency
+      }
+    },
+  };
+</script>
diff --git a/src/views/settings/deleteWallet.vue b/src/views/settings/deleteWallet.vue
new file mode 100644 (file)
index 0000000..fa1b643
--- /dev/null
@@ -0,0 +1,104 @@
+<style lang="scss" scoped>
+  .header{
+    display: flex;
+    margin-bottom: 20px;
+    h1{
+      margin-left: 12px;
+      font-size: 20px;
+    }
+  }
+
+  .selction-section{
+    height: calc( 100% - 149px );
+  }
+
+  .hint{
+    font-size: 14px;
+    letter-spacing: 0.2px;
+
+    /* Secondary / Red */
+    color: #FE1919;
+    margin: 40px 0 20px;
+  }
+
+  .btn-gp{
+    display: flex;
+    justify-content: space-between;
+    .btn{
+      width:47%;
+    }
+  }
+
+</style>
+
+<template>
+    <div class="warp-menu bg-grey">
+        <section class="header">
+          <BackButton :small="true" />
+          <h1 class="color-black">
+            <div class="welcome-title">{{ $t("setting.deleteWallet") }}</div>
+          </h1>
+        </section>
+        <section class="selction-section">
+          <div>
+            <p class="hint">{{ $t("setting.deleteHint") }}</p>
+            <div class="btn-gp">
+              <button class="btn btn-primary">{{ $t("setting.deleteBack") }}</button>
+              <button class="btn btn-outlined color-black" @click="$refs.confirmModal.open()">{{ $t("setting.deleteConfirm") }}</button>
+            </div>
+          </div>
+        </section>
+
+        <modal-passwd ref="confirmModal" @confirm="deleteW" :text_placeholder="$t('setting.deleteConfirmHint')" :text_error_hint="$t('setting.emptyWallet')"></modal-passwd>
+    </div>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex'
+import * as Actions from '@/store/constants';
+
+export default {
+    name: "",
+    data() {
+        return {
+        };
+    },
+    computed: {
+      ...mapState([
+        'bytom',
+      ]),
+      ...mapGetters([
+        'currentAccount',
+      ])
+    },
+    methods: {
+      deleteW(alias){
+        if(this.currentAccount.alias === alias){
+          const bytom = this.bytom.clone();
+          bytom.keychain.removeByAlias(alias);
+          const values = Object.values(bytom.keychain.pairs)
+          
+          if(values.length === 0){
+            bytom.currentAccount= null
+            bytom.settings.netType= 'bytom'
+          }else{
+            bytom.currentAccount = values[0]
+          }
+
+          this[Actions.UPDATE_STORED_BYTOM](bytom).then(() => {
+            this.$router.push('/');
+          })
+        }else{
+          this.$toast.error(
+             this.$t('error.BTM0007')
+          );
+        }
+      },
+      ...mapActions([
+        Actions.UPDATE_STORED_BYTOM,
+      ])
+    },
+    mounted() {
+    },
+  };
+</script>
diff --git a/src/views/settings/languageSelection.vue b/src/views/settings/languageSelection.vue
new file mode 100644 (file)
index 0000000..0f2af71
--- /dev/null
@@ -0,0 +1,79 @@
+<style lang="scss" scoped>
+  .header{
+    display: flex;
+    margin-bottom: 20px;
+    h1{
+      margin-left: 12px;
+      font-size: 20px;
+    }
+  }
+
+  .selction-section{
+    height: calc( 100% - 149px );
+    overflow: scroll;
+  }
+
+</style>
+
+<template>
+    <div class="warp-menu bg-grey">
+        <section class="header">
+          <BackButton :small="true" />
+          <h1 class="color-black">
+            <div class="welcome-title">{{ $t("setting.lang")}}</div>
+          </h1>
+        </section>
+        <section class="selction-section">
+          <SelectionPage :value="lang" :options="options" :onChange="changeLanguage"></SelectionPage>
+        </section>
+
+    </div>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex'
+import * as Actions from '@/store/constants';
+
+export default {
+    name: "",
+    data() {
+        return {
+          lang :'',
+          options: [
+              { label: "中文", value: "cn" },
+              { label: "English", value: "en" }
+          ],
+        };
+    },
+    computed: {
+      ...mapState([
+        'bytom',
+      ]),
+      ...mapGetters([
+        'language',
+      ])
+    },
+    methods: {
+      changeLanguage(event){
+        const lang = event.target.value
+
+        if (this.language != lang) {
+          const bytom = this.bytom.clone();
+
+          bytom.settings.language = lang;
+          this.$i18n.locale = lang;
+          this.lang = lang;
+          this[Actions.UPDATE_STORED_BYTOM](bytom)
+        }
+      },
+      ...mapActions([
+        Actions.UPDATE_STORED_BYTOM,
+      ])
+    },
+    mounted() {
+      if(this.language){
+        this.lang = this.language ==='zh'? 'cn': this.language
+      }
+    },
+  };
+</script>
diff --git a/src/views/settings/settings.vue b/src/views/settings/settings.vue
new file mode 100644 (file)
index 0000000..7d5aa98
--- /dev/null
@@ -0,0 +1,109 @@
+<style scoped>
+.row {
+    margin: 25px 0;
+    display: flex;
+    align-items: center;
+    width: calc( 100% - 32px);
+    height: 21px;
+    background: #FFFFFF;
+    border-radius: 8px;
+    padding: 16px;
+    cursor: pointer;
+}
+.row .label{
+    flex-grow: 1;
+    font-weight: 600;
+    font-size: 15px;
+    letter-spacing: 0.2px;
+}
+.row .value {
+    font-weight: 300;
+    font-size: 13px;
+
+    text-align: right;
+    letter-spacing: 0.2px;
+
+    color: rgba(0, 0, 0, 0.36);
+    display: flex;
+}
+.setting {
+    margin: 5px 0 0 0;
+    width: 110px;
+    height: 32px;
+    position: relative;
+}
+.form-item-content .select {
+    height: 32px;
+}
+</style>
+
+<template>
+    <div class="warp-menu bg-grey">
+        <div class="row" @click="$router.push({ name: 'settings-language' })">
+            <div class="label  color-black">
+                <p>{{ $t("setting.lang") }}</p>
+            </div>
+            <div class="value">
+                {{ currentLanguage }} <i class="iconfont iconarrow_1"></i>
+            </div>
+        </div>
+        <div class="row" @click="$router.push({ name: 'settings-currency'})">
+            <div class="label color-black">
+                <p>{{ $t("setting.currency") }}</p>
+            </div>
+            <div class="value">
+                {{ currentCurrency }} <i class="iconfont iconarrow_1"></i>
+            </div>
+        </div>
+        <div class="row" @click="$router.push({ name: 'settings-delete'})">
+            <div class="label color-grey-36">
+                <p>{{ $t("setting.deleteWallet") }}</p>
+            </div>
+            <div class="value">
+                <i class="iconfont iconarrow_1"></i>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex'
+
+export default {
+    name: "",
+    data() {
+        return {
+        };
+    },
+    computed: {
+      currentLanguage(){
+        if(this.language === 'cn'){
+          return '中文'
+        }else{
+          return 'English'
+        }
+      },
+      currentCurrency(){
+        const currencyList = {
+          'inCny':"CNY",
+          'inUsd':"USD",
+          'inBtc':"BTC",
+        }
+
+        return currencyList[this.currency]
+      },
+      ...mapState([
+        'bytom'
+      ]),
+      ...mapGetters([
+        'language',
+        'currency'
+      ])
+    },
+    methods: {
+    },
+    mounted: function () {
+
+    }
+};
+</script>
diff --git a/src/views/sideMenu/menuSettings.vue b/src/views/sideMenu/menuSettings.vue
deleted file mode 100644 (file)
index 4ad9ee3..0000000
+++ /dev/null
@@ -1,207 +0,0 @@
-<style scoped>
-.row {
-    margin: 25px 0;
-    display: flex;
-    align-items: center;
-}
-.row .label{
-    flex-grow: 1;
-}
-.value {
-    font-size: 15px;
-    line-height: 30px;
-}
-.setting {
-    margin: 5px 0 0 0;
-    width: 110px;
-    height: 32px;
-    position: relative;
-}
-.form-item-content .select {
-    height: 32px;
-}
-</style>
-
-<template>
-    <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="changeLanguage" :options="i18nOptions"></v-select>
-            </div>
-        </div>
-        <div class="row">
-            <div class="label">
-                <p>{{ $t("setting.unit") }}</p>
-            </div>
-            <div class="form-item setting">
-                <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>
-        <div class="row">
-            <div class="label">
-                <p>{{ $t("setting.currency") }}</p>
-            </div>
-            <div class="form-item setting">
-                <v-select style="height: 32px;" class="select"  :value="currentCurrency" :clearable="false" :options="currencyList" :onChange="currencyToggle"></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 {
-          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" },
-            ],
-            selected: { label: "中文", value: "cn" },
-            hashVersion: "",
-            currentCurrency: { label: "CNY", value: "inCny" },
-            currencyList: [
-              { label: "CNY", value: "inCny" },
-              { label: "USD", value: "inUsd" },
-              { label: "BTC", value: "inBtc" }
-            ],
-        };
-    },
-    computed: {
-      ...mapState([
-        'bytom'
-      ]),
-      ...mapGetters([
-        'net',
-        'language',
-        'netType',
-        'currency'
-      ])
-    },
-    methods: {
-        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];
-                }
-
-                account.setupNet(`${val.value}${this.netType}`);
-                this[Actions.UPDATE_STORED_BYTOM](bytom)
-              })
-              .catch((errors) =>{
-              bytom.accountList =[]
-
-                account.setupNet(`${val.value}${this.netType}`);
-                this[Actions.UPDATE_STORED_BYTOM](bytom)
-            })
-          }
-        },
-        currencyToggle: function (val) {
-          const bytom = this.bytom.clone();
-
-          if (bytom.settings.currency != val.value) {
-            bytom.settings.currency = val.value;
-            this.currentCurrency = val;
-            this[Actions.UPDATE_STORED_BYTOM](bytom)
-          }
-        },
-        refreshAccounts: function () {
-          account.list().then(accounts => {
-            this.accounts = accounts;
-            if (accounts.length == 0) {
-              return;
-            }
-
-            this.currentAccount = accounts[0];
-          })
-        },
-        setupNetwork(network) {
-          this.network = network;
-        },
-        ...mapActions([
-          Actions.UPDATE_STORED_BYTOM,
-        ])
-    },
-    mounted: function () {
-        this.hashVersion = version.hash;
-        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;
-            }
-            this.setupNetwork(network);
-          }
-
-          if(this.currency) {
-            switch(this.currency){
-              case 'inCny':
-                this.currentCurrency = this.currencyList[0]
-                break;
-              case 'inUsd':
-                this.currentCurrency = this.currencyList[1]
-                break;
-              case 'inBtc':
-                this.currentCurrency = this.currencyList[2]
-                break;
-            }
-          }
-
-    }
-};
-</script>