update the basic vuex store structure

[bytom/Byone.git] / src / views / home.vue

diff --git a/src/views/home.vue b/src/views/home.vue
index bb16d85..2e81bc0 100644 (file)
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -8,7 +8,7 @@
     display:flex;
 }
 .topbar .topbar-left {
-    width: 85px;
+    width: 87px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -33,20 +33,11 @@
     margin-right: 20px;
     border: 2px solid #fff;
     border-radius: 18px;
-    padding: 0 10px;
+    padding: 0 20px;
     font: 12px system-ui;
     text-align: center;
-}
-
-.topbar-middle .lamp {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: #02f823;
-    margin-right: 2px;
-    position: relative;
-    top: -2px;
+    display: flex;
+    align-items: center;
 }
 
 .content {
@@ -86,7 +77,7 @@
 .btn-send-transfer .btn {
     width: 160px;
     height: 48px;
-    line-height: 27px;
+    line-height: 23px;
     font-size: 16px;
 }
 
@@ -116,7 +107,7 @@
 .transactions {
   font-size: 15px;
   height: 340px;
-  overflow: scroll;
+  overflow: auto;
 }
 .list-item {
     position: relative;
@@ -182,14 +173,14 @@
                         <i class="iconfont icon-menu"></i>
                     </a>
                 </div>
-                <div class="topbar-middle bg-secondary">
-                    <i class="lamp"></i>
-                    <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>
-                    </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">
@@ -271,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';
@@ -278,9 +270,6 @@ export default {
     name: "",
     data() {
         return {
-            network: "mainnet",
-            accounts: [],
-            currentAccount: {},
             transactions: [],
             maskShow: false,
             start: 0,
@@ -313,40 +302,44 @@ 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 != 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() {
-            // todo refresh all accounts
-
             setInterval(() => {
                 this.refreshBalance(this.currentAccount.guid)
             }, 10000)
         },
         setupNetwork() {
-            this.network = localStorage.bytomNet;
-            account.setupNet(this.network);
+            account.setupNet(this.net);
         },
         networkToggle: function (val) {
             localStorage.bytomNet = this.network;
@@ -355,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) {
@@ -381,36 +374,20 @@ 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(balance => {
-                this.currentAccount.balance = balance;
-                this.currentAccount = Object.assign({}, this.currentAccount);
-            }).catch(error => {
+            account.balance(guid)
+              .catch(error => {
                 console.log(error);
             });
         },
         refreshTransactions: function (guid, address, start, limit) {
             return new Promise((resolve, reject) => {
-                transaction.list(guid, address, start, limit).then(ret => {
-                    let transactions = ret.result.data;
+                transaction.list(guid, address, start, limit).then(transactions => {
                     if (transactions == null) {
                         return;
                     }
 
                     const formattedTx = this.transactionsFormat(transactions);
-                    console.log("formatTx", formattedTx);
                     resolve(formattedTx)
                 }).catch(error => {
                     console.log(error);
@@ -457,10 +434,11 @@ export default {
         },
     },
     mounted() {
-        this.currentAccount = JSON.parse(localStorage.currentAccount);
         this.setupNetwork();
         this.setupRefreshTimer();
-        this.refreshAccounts();
-    }
-};
+        this.refreshTransactions(this.currentAccount.guid, this.currentAccount.address).then(transactions => {
+          this.transactions = transactions
+        });
+    },
+  };
 </script>