From 82fdacfd9495bb01c42c0497d8e3888f56d2881f Mon Sep 17 00:00:00 2001
From: Artem Poltorzhitskiy <aopoltorzhicky@gmail.com>
Date: Thu, 7 Jul 2022 15:41:44 +0300
Subject: [PATCH] Add storage paid and storage used (#438)

---
 src/api/rpc.js                       | 20 ++++++++++++++
 src/views/big_map/BigMap.vue         |  2 +-
 src/views/contract/OperationsTab.vue | 41 +++++++++++++++++++++++++++-
 3 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/src/api/rpc.js b/src/api/rpc.js
index 44f6b5ce..ebbe42a0 100644
--- a/src/api/rpc.js
+++ b/src/api/rpc.js
@@ -92,6 +92,26 @@ export class NodeRPC {
       .then(this.getObject)
   }
 
+  getStoragePaidUsedByContract(network, contract, level = 'head') {
+    return this.getApi(network).get(`chains/main/blocks/${level}/context/raw/json/contracts/index/${contract}/paid_bytes`)
+    .then((res) => {
+      if (res.status != 200) {
+        throw new RequestFailedError(res);
+      }
+      return res.data;
+    })
+  }
+
+  getStorageUsedBytesByContract(network, contract, level = 'head') {
+    return this.getApi(network).get(`chains/main/blocks/${level}/context/raw/json/contracts/index/${contract}/used_bytes`)
+    .then((res) => {
+      if (res.status != 200) {
+        throw new RequestFailedError(res);
+      }
+      return res.data;
+    })
+  }
+
   getObject(response) {
     if (response.status != 200) {
       throw new RequestFailedError(response);
diff --git a/src/views/big_map/BigMap.vue b/src/views/big_map/BigMap.vue
index f00f8b57..597e0098 100644
--- a/src/views/big_map/BigMap.vue
+++ b/src/views/big_map/BigMap.vue
@@ -32,7 +32,7 @@
             <v-list-item-content>
               <v-list-item-subtitle class="overline">Total size</v-list-item-subtitle>
               <v-list-item-title class="body-2">
-                <span>{{ totalBytes }} bytes</span>
+                <span>{{ parseInt(totalBytes).toLocaleString('en-US') }} bytes</span>
               </v-list-item-title>
             </v-list-item-content>
           </v-list-item>
diff --git a/src/views/contract/OperationsTab.vue b/src/views/contract/OperationsTab.vue
index 5cc785d5..02e76308 100644
--- a/src/views/contract/OperationsTab.vue
+++ b/src/views/contract/OperationsTab.vue
@@ -199,6 +199,24 @@
             :alias="contract.delegate_alias"
             gutters
           />
+          <v-list-item v-if="usedBytes">
+            <v-list-item-content>
+              <v-list-item-subtitle class="overline">Storage used</v-list-item-subtitle>
+              <v-list-item-title class="body-2">
+                <span>{{ parseInt(usedBytes).toLocaleString('en-US') }} bytes</span>
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+           <v-list-item v-if="paidUsed">
+            <v-list-item-content>
+              <v-list-item-subtitle class="overline"
+              >Storage paid</v-list-item-subtitle
+              >
+              <v-list-item-title class="body-2">
+                <span>{{ parseInt(paidUsed).toLocaleString('en-US') }} bytes</span>
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
         </v-list>
       </v-col>
     </v-row>
@@ -239,10 +257,15 @@ export default {
     datesModal: false,
     entrypoints: [],
     availableEntrypoints: [],
-    operationsChannelName: null
+    operationsChannelName: null,
+    usedBytes: null,
+    paidUsed: null
   }),
   created() {
     this.init();
+
+    this.getUsedBytes();
+    this.getPaidUsed();
   },
   computed: {
     loading() {
@@ -311,6 +334,22 @@ export default {
       }
       return 0;
     },
+
+    async getUsedBytes() {
+      this.usedBytes = await this.rpc.getStorageUsedBytesByContract(this.network, this.address)
+        .catch(err => {
+          console.log(err);
+          return null;
+        })
+    },
+    async getPaidUsed() {
+      this.paidUsed = await this.rpc.getStoragePaidUsedByContract(this.network, this.address)
+        .catch(err => {
+          console.log(err);
+          return null;
+        })
+    },
+
     getTimestamps() {
       let timestamps = this.dates.map((d) => dayjs(d).unix() * 1000).sort();
       if (timestamps.length === 2) {