Bare-bones explorer functionality

.eslintrc.js

@@ -1,7 +1,8 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
+    browser: true,
   },
   'extends': [
     'plugin:vue/vue3-essential',

package.json

@@ -14,6 +14,7 @@
     "@capacitor/ios": "^2.4.2",
     "@ionic/vue": "^5.4.0",
     "@ionic/vue-router": "^5.4.0",
+    "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "cryptojs": "^2.5.3",
     "vue": "^3.0.0-0",
@@ -36,7 +37,7 @@
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "^2.0.0-0",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0-0",
+    "eslint-plugin-vue": "^7.1.0",
     "typescript": "~3.9.3",
     "vue-jest": "^5.0.0-0"
   },

src/API.ts

@@ -0,0 +1,6 @@
+let API = 'https://zeus-proxy.automated.theqrl.org'
+if (process.env.NODE_ENV === 'development') {
+  API = 'https://cors-anywhere.herokuapp.com/https://zeus-proxy.automated.theqrl.org'
+}
+
+export default API

src/router/index.ts

@@ -14,6 +14,18 @@ const routes: Array<RouteRecordRaw> = [
     path: '/explorer',
     component: () => import ('../views/Explorer.vue')
   },
+  {
+    path: '/a/:id',
+    component: () => import ('../views/Address.vue')
+  },
+  {
+    path: '/tx/:id',
+    component: () => import ('../views/Transaction.vue')
+  },
+  {
+    path: '/block/:id',
+    component: () => import ('../views/Block.vue')
+  },
   {
     path: '/folder/:id',
     component: () => import ('../views/Folder.vue')

src/views/Address.vue

@@ -0,0 +1,87 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button></ion-menu-button>
+        </ion-buttons>
+        <ion-title>QRL Explorer</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-grid>
+        <ion-row>
+          <ion-col>
+            <div class="ion-text-center">
+              Address:<br>
+                {{id}}<br>
+                <div v-if="error !== null">Error: {{error.message}}</div>
+                <div v-if="info !== null">
+                  Balance: {{info.data.state.balance}} Shor
+                </div>
+                <div v-if="info === null && error === null">Loading...</div>
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-content>
+</ion-page>
+</template>
+
+<script lang="js">
+import { IonGrid, IonCol, IonRow, IonButtons, IonButton, IonInput, IonLabel, IonItem, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { useRouter, useRoute } from 'vue-router';
+import axios from 'axios';
+import API from '../API'
+// import { ref, computed, watch } from 'vue';
+
+export default {
+  name: 'Address',
+  components: {
+    IonGrid,
+    IonCol,
+    IonRow,
+    IonButtons,
+    // IonButton,
+    IonContent,
+    IonHeader,
+    IonMenuButton,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+    // IonInput,
+    // IonLabel,
+    // IonItem
+  },
+  data() {
+    const route = useRoute()
+    return {
+      id: route.params.id,
+      info: null,
+      error: null
+    }
+  },
+  beforeMount() {
+    axios
+      .post(`${API}/grpc/testnet/GetOptimizedAddressState`, { address: this.id },
+      )
+      .then(response => (this.info = response))
+      .catch(error => (this.error = error))
+  },
+  setup() {
+    const router = useRouter()
+    return { router };
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+ion-menu-button {
+  color: var(--ion-color-primary);
+}
+ion-content{
+    --background: #0b181e url('../img/dots.png') no-repeat bottom -250px right -400px;
+}
+</style>

src/views/Block.vue

@@ -0,0 +1,87 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button></ion-menu-button>
+        </ion-buttons>
+        <ion-title>QRL Explorer</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-grid>
+        <ion-row>
+          <ion-col>
+            <div class="ion-text-center">
+              Block:<br>
+                {{id}}<br>
+                <div v-if="error !== null">Error: {{error.message}}</div>
+                <div v-if="info !== null">
+                  {{info.data}}
+                </div>
+                <div v-if="info === null && error === null">Loading...</div>
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-content>
+</ion-page>
+</template>
+
+<script lang="js">
+import { IonGrid, IonCol, IonRow, IonButtons, IonButton, IonInput, IonLabel, IonItem, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { useRouter, useRoute } from 'vue-router';
+import axios from 'axios';
+import API from '../API';
+// import { ref, computed, watch } from 'vue';
+
+export default {
+  name: 'Block',
+  components: {
+    IonGrid,
+    IonCol,
+    IonRow,
+    IonButtons,
+    // IonButton,
+    IonContent,
+    IonHeader,
+    IonMenuButton,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+    // IonInput,
+    // IonLabel,
+    // IonItem
+  },
+  data() {
+    const route = useRoute()
+    return {
+      id: route.params.id,
+      info: null,
+      error: null
+    }
+  },
+  setup() {
+    const router = useRouter()
+    return { router };
+  },
+  beforeMount() {
+    axios
+      .post(`${API}/grpc/testnet/GetObject`, { query: this.id },
+      )
+      .then(response => (this.info = response))
+      .catch(error => (this.error = error))
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+ion-menu-button {
+  color: var(--ion-color-primary);
+}
+ion-content{
+    --background: #0b181e url('../img/dots.png') no-repeat bottom -250px right -400px;
+}
+</style>

src/views/Explorer.vue

@@ -9,19 +9,25 @@
       </ion-toolbar>
     </ion-header>
     <ion-content>
-      <div class="ion-text-center">
-        <ion-item>
-          <ion-label position="stacked">Search</ion-label>
-          <ion-input v-model="query" autofocus="true" placeholder="address, txhash, block"></ion-input>
-        </ion-item>
-        <ion-button v-on:click="search">Search</ion-button>
-      </div>
+      <ion-grid>
+        <ion-row>
+          <ion-col>
+            <div class="ion-text-center">
+              <ion-item>
+                <ion-label position="stacked">Search</ion-label>
+                <ion-input v-model="query" autofocus="true" placeholder="address, txhash, block"></ion-input>
+              </ion-item>
+              <ion-button v-on:click="search" class="mt-2">Search</ion-button>
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
     </ion-content>
 </ion-page>
 </template>
 
 <script lang="js">
-import { IonButtons, IonButton, IonInput, IonLabel, IonItem, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonGrid, IonCol, IonRow, IonButtons, IonButton, IonInput, IonLabel, IonItem, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 import { useRouter } from 'vue-router';
 // import { ref, computed, watch } from 'vue';
 
@@ -30,7 +36,6 @@ const identifySearch = (str) => {
   if (adjusted.charAt(0) === 'q') {
     adjusted = `Q${adjusted.substr(1, adjusted.length - 1)}`
   }
-  console.log(adjusted)
   const type = { parameter: adjusted, type: 'Undetermined' }
   if (adjusted.length === 79 && adjusted.charAt(0) === 'Q') {
     type.type = 'Address'
@@ -48,8 +53,11 @@ const identifySearch = (str) => {
 }
 
 export default {
-  name: 'Home',
+  name: 'Explorer',
   components: {
+    IonGrid,
+    IonCol,
+    IonRow,
     IonButtons,
     IonButton,
     IonContent,
@@ -87,7 +95,7 @@ ion-menu-button {
 ion-content{
     --background: #0b181e url('../img/dots.png') no-repeat bottom -250px right -400px;
 }
-.pb-5 {
-  padding-bottom: 30px;
+.mt-2 {
+  margin-top: 20px !important;
 }
 </style>