Skip to content

Commit

Permalink
Merge pull request #4 from jplomas/main
Browse files Browse the repository at this point in the history
Bare-bones explorer functionality
  • Loading branch information
jplomas committed Nov 20, 2020
2 parents d097d3f + 9809a35 commit 027c0dc
Show file tree
Hide file tree
Showing 9 changed files with 312 additions and 16 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
module.exports = {
root: true,
env: {
node: true
node: true,
browser: true,
},
'extends': [
'plugin:vue/vue3-essential',
Expand Down
11 changes: 9 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
},
Expand Down
6 changes: 6 additions & 0 deletions src/API.ts
Original file line number Diff line number Diff line change
@@ -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
12 changes: 12 additions & 0 deletions src/router/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
87 changes: 87 additions & 0 deletions src/views/Address.vue
Original file line number Diff line number Diff line change
@@ -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>
87 changes: 87 additions & 0 deletions src/views/Block.vue
Original file line number Diff line number Diff line change
@@ -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>
32 changes: 20 additions & 12 deletions src/views/Explorer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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'
Expand All @@ -48,8 +53,11 @@ const identifySearch = (str) => {
}
export default {
name: 'Home',
name: 'Explorer',
components: {
IonGrid,
IonCol,
IonRow,
IonButtons,
IonButton,
IonContent,
Expand Down Expand Up @@ -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>

0 comments on commit 027c0dc

Please sign in to comment.