Metadata tab

src/api/metadata.js

@@ -0,0 +1,47 @@
+const axios = require('axios').default;
+
+export class RequestFailedError extends Error { }
+
+export class MetadataAPI {
+    constructor(baseURL) {
+        this.api = axios.create({
+            baseURL: baseURL,
+            timeout: 10000,
+            responseType: 'json'
+        });
+    }
+
+    get(network, address) {
+        let query = {
+            "query":`query GetContractMetadata($address: String, $network: String) {
+                contract_metadata(
+                    where: {contract: {_eq: $address}, network: {_eq: $network}}
+                ) {
+                    network
+                    contract
+                    error
+                    link
+                    metadata
+                    retry_count
+                    status
+                }
+            }`,
+            "variables": {
+              "address":`${address}`,
+              "network":`${network}`,
+            },
+            "operationName":"GetContractMetadata"
+        }
+
+        return this.api.post("v1/graphql", query)
+            .then((res) => {
+                if (res.status !== 200) {
+                    throw new RequestFailedError(res);
+                }
+                if (res.data.data.contract_metadata.length > 0) {
+                    return res.data.data.contract_metadata[0]
+                }
+                return null
+            })
+    }
+}

src/components/Dialogs/RawJsonViewer.vue

@@ -292,6 +292,7 @@ export default {
 }
 .raw-json-viewer {
   background-color: transparent !important;
+  padding: 20px;
 }
 .raw-json-dialog__warning {
   font-size: 0.6em;

src/main.js

@@ -17,6 +17,7 @@ import { shortcut, formatDatetime, formatDate, plural, urlExtractBase58, checkAd
 import { BetterCallApi } from "@/api/bcd.js";
 import { NodeRPC } from "@/api/rpc.js";
 import { Bookmarks } from "@/utils/bookmarks.js";
+import { MetadataAPI } from "@/api/metadata.js";
 
 import { makeVuetify } from '@/plugins/vuetify';
 
@@ -107,11 +108,13 @@ Vue.filter('snakeToCamel', (str) => {
 
 let config = {
   API_URI: process.env.VUE_APP_API_URI || `${window.location.protocol}//${window.location.host}/v1`,
-  HOME_PAGE: 'home'
+  HOME_PAGE: 'home',
+  METADATA_API_URI: process.env.METADATA_API_URI || "https://metadata.dipdup.net"
 }
 
 let api = new BetterCallApi(config.API_URI);
 let bookmarks = new Bookmarks();
+let metadataAPI = new MetadataAPI(config.METADATA_API_URI);
 
 const isDark = localStorage.getItem('dark') ? JSON.parse(localStorage.getItem('dark')) : true;
 if (isDark) {
@@ -135,7 +138,7 @@ api.getConfig().then(response => {
 
   Vue.mixin({
     data() {
-      return { config, api, rpc, helpers, bookmarks }
+      return { config, api, rpc, helpers, bookmarks, metadataAPI }
     }
   });
 

src/views/contract/Contract.vue

@@ -352,8 +352,8 @@ export default {
         .finally(() => (this.contractLoading = false));
     },
     getMetadata() {
-      this.api
-        .getAccountMetadata(this.network, this.address)
+      this.metadataAPI
+        .get(this.network, this.address)
         .then((res) => {
           if (!res) return;
           this.metadata = res;