Add views tab (#392)

* add views tab

* update views tab

* update view

* Add kind

* Add parameters type

* use parameter and change env to development

* remove metadata

* fix offChainViews

* change text position

* use another color

.env.development

@@ -1,2 +1,2 @@
 NODE_ENV=development
-VUE_APP_API_URI=https://api.better-call.dev/v1
+VUE_APP_API_URI=https://sharm.better-call.dev/v1

src/index.css

@@ -54,4 +54,8 @@
 
 .cursor-pointer {
     cursor: pointer;
+}
+
+.disabled-gray {
+    color: #9E9E9E;
 }

src/router/index.js

@@ -16,6 +16,7 @@ import Contract from '@/views/contract/Contract.vue'
 import OperationsTab from '@/views/contract/OperationsTab.vue'
 import CodeTab from '@/views/contract/CodeTab.vue'
 import InteractTab from '@/views/contract/InteractTab.vue'
+import ViewsTab from '@/views/contract/ViewsTab/ViewsTab.vue'
 import StorageTab from '@/views/contract/StorageTab.vue'
 import ContractTokensTab from '@/views/contract/TokensTab/TokensTab.vue'
 import TransfersTab from '@/views/contract/TransfersTab/TransfersTab.vue'
@@ -199,6 +200,12 @@ const router = new Router({
           component: InteractTab,
           props: true
         },
+        {
+          path: 'views/:view?',
+          name: 'views',
+          component: ViewsTab,
+          props: true
+        },
         {
           path: 'storage',
           name: 'storage',

src/views/contract/Contract.vue

@@ -70,6 +70,7 @@
       :is-anything-loading="isLoadingDataForTabs"
       :same-contracts="sameContracts"
       :migrations="migrations"
+      :offchain-views="offChainViews"
     />
 
     <VContainer fluid>
@@ -83,6 +84,7 @@
         :same-contracts="sameContracts"
         :same-count="sameCount"
         :migrations="migrations"
+        :off-chain-views="offChainViews"
       ></router-view>
     </VContainer>
   </div>
@@ -97,6 +99,7 @@ import MenuToolbar from "./MenuToolbar";
 import Tags from "../../components/Tags";
 import {openTzktContract} from "../../utils/tzkt";
 import {DATA_LOADING_STATUSES} from "../../utils/network";
+import {applyStyles} from "../../utils/styles";
 
 const MIN_SEARCHBOX_WIDTH = 240;
 
@@ -125,6 +128,8 @@ export default {
     sameCount: 0,
     migrationsLoading: DATA_LOADING_STATUSES.NOTHING,
     migrations: [],
+    offChainViews: [],
+    offChainViewsLoadingStatus: DATA_LOADING_STATUSES.NOTHING,
   }),
   computed: {
     alias() {
@@ -157,7 +162,10 @@ export default {
       return this.sameContractsLoadingStatus === DATA_LOADING_STATUSES.PROGRESS;
     },
     isLoadingDataForTabs() {
-      return this.isSameContractsLoading;
+      return this.isSameContractsLoading || this.isOffChainsLoading;
+    },
+    isOffChainsLoading() {
+      return this.offChainViewsLoadingStatus === DATA_LOADING_STATUSES.PROGRESS;
     },
     isContract() {
       return this.address.startsWith("KT");
@@ -189,6 +197,20 @@ export default {
       hideError: "hideError",
       showClipboardOK: "showClipboardOK",
     }),
+    async loadViewsSchema() {
+      this.offChainViewsLoadingStatus = DATA_LOADING_STATUSES.PROGRESS;
+      this.offChainViews = [];
+      if (this.network && this.address) {
+        try {
+          let views = await this.api.getMetadataViewsSchema(this.network, this.address);
+          this.offChainViewsLoadingStatus = DATA_LOADING_STATUSES.NOTHING;
+          views.forEach(view => applyStyles(view.schema));
+          this.offChainViews = views;
+        } catch (err) {
+          this.showError("Error while fetching off-chain views");
+        }
+      }
+    },
     openInTzkt() {
       openTzktContract(this.contract);
     },
@@ -246,6 +268,7 @@ export default {
         this.getContract();
         this.getTokensTotal();
         this.getMigrations();
+        this.loadViewsSchema()
       }
       this.getInfo();
       this.getTokenBalancesTotal();

src/views/contract/MenuToolbar.vue

@@ -44,6 +44,9 @@
       <v-tab :to="pushTo({ name: 'fork' })" replace v-if="isContract">
         <v-icon left small>mdi-source-fork</v-icon>Fork
       </v-tab>
+      <v-tab v-show="isOffChainViews" :to="pushTo({name: 'views'})" replace>
+        <v-icon left small>mdi-adjust</v-icon>Views
+      </v-tab>
       <v-tab v-show="isSameContracts || isMigrations" :to="pushTo({name: 'details'})" replace>
         <v-icon left small>mdi-alert-circle-outline</v-icon>Details
       </v-tab>
@@ -67,6 +70,7 @@ export default {
     sameContracts: Array,
     isAnythingLoading: Boolean,
     migrations: Array,
+    offchainViews: Array,
   },
   computed: {
     isContract() {
@@ -77,7 +81,10 @@ export default {
     },
     isMigrations() {
       return this.migrations.length > 0;
-    }
+    },
+    isOffChainViews() {
+      return this.offchainViews.length > 0;
+    },
   },
   methods: {
     pushTo(obj) {

src/views/contract/MetadataTab/MetadataTab.vue

@@ -18,15 +18,6 @@
             :metadata="reservedMetadata"
             class="pr-8 pl-2"
           />
-          <template v-if="metadata.views && metadata.views.length > 0">
-              <v-divider></v-divider>
-              <OffchainViews
-                :views="views"
-                :network="network"
-                :address="address"
-                class="pr-8 py-8"
-            />
-          </template>
           <template v-if="unknownFields && unknownFields.length > 0">
               <v-divider></v-divider>
               <FieldsWrapper
@@ -48,14 +39,13 @@
 <script>
 import FieldsWrapper from "@/views/contract/MetadataTab/CustomFields/FieldsWrapper";
 import ReservedFields from "@/views/contract/MetadataTab/ReservedFields";
-import OffchainViews from "@/views/contract/MetadataTab/OffchainViews";
 import { mapActions } from "vuex";
 import { applyStyles } from '@/utils/styles.js';
 import RawJsonViewer from "@/components/Dialogs/RawJsonViewer";
 
 export default {
   name: "Metadata",
-  components: {OffchainViews, ReservedFields, FieldsWrapper, RawJsonViewer},
+  components: { ReservedFields, FieldsWrapper, RawJsonViewer},
   props: {
     metadata: Object,
     network: String,