Merge pull request #44 from vechain/feat-support-solo

feat: add support for solo network

Dockerfile

@@ -40,6 +40,12 @@ RUN --mount=type=bind,source=package.json,target=package.json \
 
 # Copy the rest of the source files into the image.
 COPY . .
+
+ARG VUE_APP_SOLO_URL
+ENV VUE_APP_SOLO_URL=$VUE_APP_SOLO_URL
+
+ENV NODE_ENV=production
+
 # Run the build script.
 RUN yarn run build
 
@@ -50,4 +56,6 @@ FROM nginx:stable-alpine AS final
 COPY --from=build /usr/src/app/dist /usr/share/nginx/html
 # COPY --from=build /usr/src/app/nginx.prod.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
+
 CMD ["nginx", "-g", "daemon off;"]
+

compose.yaml

@@ -11,40 +11,9 @@ services:
   server:
     build:
       context: .
+      args:
+        - VUE_APP_SOLO_URL=http://localhost:8669
     environment:
       NODE_ENV: production
     ports:
       - 8080:80
-# The commented out section below is an example of how to define a PostgreSQL
-# database that your application can use. `depends_on` tells Docker Compose to
-# start the database before your application. The `db-data` volume persists the
-# database data between container restarts. The `db-password` secret is used
-# to set the database password. You must create `db/password.txt` and add
-# a password of your choosing to it before running `docker-compose up`.
-#     depends_on:
-#       db:
-#         condition: service_healthy
-#   db:
-#     image: postgres
-#     restart: always
-#     user: postgres
-#     secrets:
-#       - db-password
-#     volumes:
-#       - db-data:/var/lib/postgresql/data
-#     environment:
-#       - POSTGRES_DB=example
-#       - POSTGRES_PASSWORD_FILE=/run/secrets/db-password
-#     expose:
-#       - 5432
-#     healthcheck:
-#       test: [ "CMD", "pg_isready" ]
-#       interval: 10s
-#       timeout: 5s
-#       retries: 5
-# volumes:
-#   db-data:
-# secrets:
-#   db-password:
-#     file: db/password.txt
-

src/App.vue

@@ -62,18 +62,19 @@ export default Vue.extend({
         }
     },
     created() {
-        let net = this.$route.params.net as "main" | "test" | undefined
-        if (!["main", "test"].includes(net!)) {
+        let net = this.$route.params.net as "main" | "test" | "solo" | undefined
+        if (!["main", "test", "solo"].includes(net!)) {
             net = undefined
         }
 
         const connex = createConnex(net)
         Vue.prototype.$connex = connex
         Vue.prototype.$net = genesisIdToNetwork(connex.thor.genesis.id)
-        if (!["main", "test"].includes(Vue.prototype.$net)) {
+        if (!["main", "test", "solo"].includes(Vue.prototype.$net)) {
             Vue.prototype.$net = undefined
         }
 
+
         this.routed()
 
         this.$state.chainStatus = this.$connex.thor.status

src/create-connex.ts

@@ -1,22 +1,57 @@
-import Connex from '@vechain/connex/esm'
+import Connex from "@vechain/connex/esm";
 
-const nodeUrls = {
-    main: 'https://explore-mainnet.veblocks.net',
-    test: 'https://explore-testnet.veblocks.net'
-}
+export const soloUrlNode = process.env.VUE_APP_SOLO_URL;
+
+//Needed to support runtime env variables
+export const isSoloNode = !!soloUrlNode;
+export const nodeUrls = {
+  main: "https://explore-mainnet.veblocks.net",
+  test: "https://explore-testnet.veblocks.net",
+  solo: soloUrlNode ?? "http://localhost:8669",
+  custom: "",
+};
 
-export function createConnex(net?: 'main' | 'test') {
-    if (net) { // net specified
-        const url = nodeUrls[net]
-        return new Connex({ node: url, network: net })
+const soloGenesis = {
+  number: 0,
+  id: "0x00000000c05a20fbca2bf6ae3affba6af4a74b800b585bf7a4988aba7aea69f6",
+  size: 170,
+  parentID:
+    "0xffffffff53616c757465202620526573706563742c20457468657265756d2100",
+  timestamp: 1530316800,
+  gasLimit: 10000000,
+  beneficiary: "0x0000000000000000000000000000000000000000",
+  gasUsed: 0,
+  totalScore: 0,
+  txsRoot: "0x45b0cfc220ceec5b7c1c62c4d4193d38e4eba48e8815729ce75f9c0ab0e4c1c0",
+  txsFeatures: 0,
+  stateRoot:
+    "0x93de0ffb1f33bc0af053abc2a87c4af44594f5dcb1cb879dd823686a15d68550",
+  receiptsRoot:
+    "0x45b0cfc220ceec5b7c1c62c4d4193d38e4eba48e8815729ce75f9c0ab0e4c1c0",
+  signer: "0x0000000000000000000000000000000000000000",
+  isTrunk: true,
+  transactions: [],
+};
+
+export function createConnex(net?: "main" | "test" | "solo") {
+  if (net) {
+    // net specified
+    const url = nodeUrls[net];
+    if (net == "solo") {
+      return new Connex({ node: url, network: soloGenesis });
+    }
+    return new Connex({ node: url, network: net });
+  } else {
+    const injected = (window as any).connex;
+    // net unspecified
+    if (injected) {
+      return new Connex({ node: "", network: injected.thor.genesis });
     } else {
-        const injected = (window as any).connex
-        // net unspecified
-        if (injected) {
-            return new Connex({ node: '', network: injected.thor.genesis })
-        } else {
-            // defaults to main net
-            return new Connex({ node: nodeUrls.main })
-        }
+      // defaults to main net, or soloUrl if solo is provided
+      if (isSoloNode) {
+        return new Connex({ node: nodeUrls.solo, network: soloGenesis });
+      }
+      return new Connex({ node: nodeUrls.main });
     }
+  }
 }

src/router.ts

@@ -17,7 +17,7 @@ export default new Router({
     mode: 'hash',
     routes: [
         {
-            path: '/:net(main|test)?',
+            path: '/:net(main|test|solo)?',
             children: [
                 {
                     path: '',

src/utils.ts

@@ -1,8 +1,25 @@
 export function genesisIdToNetwork(id: string) {
-    switch (id) {
-        case '0x00000000851caf3cfdb6e899cf5958bfb1ac3413d346d43539627e6be7ec1b4a': return 'main'
-        case '0x000000000b2bce3c70bc649a02749e8687721b09ed2e15997f466536b20bb127': return 'test'
-        case '0x00000000c05a20fbca2bf6ae3affba6af4a74b800b585bf7a4988aba7aea69f6': return 'solo'
-        default: return 'custom'
-    }
+  switch (id) {
+    case "0x00000000851caf3cfdb6e899cf5958bfb1ac3413d346d43539627e6be7ec1b4a":
+      return "main";
+    case "0x000000000b2bce3c70bc649a02749e8687721b09ed2e15997f466536b20bb127":
+      return "test";
+    case "0x00000000c05a20fbca2bf6ae3affba6af4a74b800b585bf7a4988aba7aea69f6":
+      return "solo";
+    default:
+      return "custom";
+  }
+}
+
+export function networkToGenesisId(net: string) {
+  switch (net) {
+    case "main":
+      return "0x00000000851caf3cfdb6e899cf5958bfb1ac3413d346d43539627e6be7ec1b4a";
+    case "test":
+      return "0x000000000b2bce3c70bc649a02749e8687721b09ed2e15997f466536b20bb127";
+    case "solo":
+      return "0x00000000c05a20fbca2bf6ae3affba6af4a74b800b585bf7a4988aba7aea69f6";
+    default:
+      return "";
+  }
 }

src/views/Frame.vue

@@ -7,46 +7,59 @@
         >
             <div class="container">
                 <b-navbar-brand>
+
+                    <div class="d-flex align-items-center d-flex-row">
                     <router-link
                         :to="{name:'home', params: {net:$net}}"
                         class="text-decoration-none text-white"
                     >
                         <span class="text-serif h4">Insight</span>
                     </router-link>
+
+                    <b-badge v-if="networks.length === 1" :variant="networkBadgeVariant" size="sm" class="ml-4">{{networks[0].label}}</b-badge>
                     <b-dropdown
+                        v-if="networks.length > 1"
                         size="sm"
                         :text="network"
                         :variant="networkBadgeVariant"
                         toggle-class="py-0 px-1"
                         style="vertical-align:top"
-                        class="ml-2"
+                        class="ml-4"
                     >
                         <b-dropdown-item
                             v-for="(n, i) in switchableNetworks"
                             :key="i"
                             :href="n.href"
-                        >{{n.name}}</b-dropdown-item>
+                        >{{n.label}}</b-dropdown-item>
                     </b-dropdown>
+                    </div>
+                    <div class="d-flex align-items-center">
+                        <span class="text-monospace" style="font-size: x-small;">
+                            {{nodeUrl}}
+                        </span>
+                    </div>
                 </b-navbar-brand>
+
                 <b-navbar-toggle target="nav_collapse" />
                 <b-collapse
                     is-nav
                     id="nav_collapse"
                 >
                     <b-navbar-nav class="ml-auto">
                         <template v-if="price">
+
                             <b-nav-item
-                                class="text-monospace small"
+                                class="text-monospace small d-flex align-items-center"
                                 href="https://www.coingecko.com/en/coins/vechain"
                                 target="_blank"
                             >
                                 <div class="small">
-                                    &nbsp;VET
+                                    VET
                                     <span class="text-light">${{price.vet.toFixed(5)}}</span>
                                 </div>
                             </b-nav-item>
                             <b-nav-item
-                                class="text-monospace small mr-3"
+                                class="text-monospace small mr-3 d-flex align-items-center"
                                 href="https://www.coingecko.com/en/coins/vethor-token"
                                 target="_blank"
                             >
@@ -125,7 +138,10 @@
 </template>
 <script lang="ts">
 import Vue from 'vue'
-import { genesisIdToNetwork } from '../utils'
+import { genesisIdToNetwork, networkToGenesisId } from '../utils'
+import { nodeUrls, isSoloNode} from '@/create-connex'
+
+
 
 export default Vue.extend({
     data: () => {
@@ -134,23 +150,31 @@ export default Vue.extend({
         }
     },
     computed: {
-        routeName(): string { return this.$route.name || '' },
+        routeName(): string { return this.$route.name ?? '' },
         isHome(): boolean { return this.routeName === 'home' },
         price() { return this.$state.price },
+        nodeUrl() { return nodeUrls[genesisIdToNetwork(this.$connex.thor.genesis.id)] },
         network() {
             switch (genesisIdToNetwork(this.$connex.thor.genesis.id)) {
                 case 'main': return 'MainNet'
                 case 'test': return 'TestNet'
-                case 'solo': return 'Solo'
-                case 'custom': return `Custom:0x${this.$connex.thor.genesis.id.slice(-2)}`
+                case 'solo': return 'SoloNet'
             }
         },
-        switchableNetworks(): Array<{ name: string, href: string }> {
-            switch (genesisIdToNetwork(this.$connex.thor.genesis.id)) {
-                case 'main': return [{ name: 'TestNet', href: '#/test/' }]
-                case 'test': return [{ name: 'MainNet', href: '#/main/' }]
-                default: return [{ name: 'TestNet', href: '#/test/' }, { name: 'MainNet', href: '#/main/' }]
-            }
+        networks(): Array<{ name: string, label: string, href: string }> {
+            if(isSoloNode) return [ {
+                name: 'solo',
+                label: 'SoloNet',
+                href: '#/solo/'
+                }]
+            return [
+                { name: 'main',label: 'MainNet', href: '#/main/' },
+                { name: 'test',label: 'TestNet', href: '#/test/' },
+                ...(isSoloNode ? [{ name:'solo',label: 'SoloNet', href: '#/solo/' }] : []),
+            ]
+        },
+        switchableNetworks(): Array<{ name: string, label: string, href: string }> {
+            return this.networks.filter(i =>  this.$connex.thor.genesis.id !== networkToGenesisId(i.name))
         },
         networkBadgeVariant() {
             return genesisIdToNetwork(this.$connex.thor.genesis.id) === 'main' ? 'light' : 'warning'