Merge pull request #1126 from threefoldtech/development_313

Development 3.13

.eslintrc.json

@@ -42,7 +42,16 @@
     "@typescript-eslint/no-empty-function": "off",
     "vue/no-v-for-template-key": "off",
     "vue/no-multiple-template-root": "off",
-    "vue/no-v-model-argument": "off"
+    "vue/no-v-model-argument": "off",
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        "extendDefaults": true,
+        "types": {
+          "{}": false
+        }
+      }
+    ]
   },
   "settings": {
     "svelte3/typescript": true // load TypeScript as peer dependency

.github/workflows/new_stats_build.yaml

@@ -0,0 +1,45 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code using yarn build:app
+
+name: New Stats Build
+
+on:
+  push:
+    branches:
+      - development
+    paths:
+      - "packages/new_stats/**"
+  pull_request:
+    branches:
+      - development
+    paths:
+      - "packages/new_stats/**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    env:
+      NODE_OPTIONS: "--max-old-space-size=8192"
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+          cache-dependency-path: "**/yarn.lock"
+
+      - name: Install dependencies
+        run: |
+          yarn install
+
+      - name: Build
+        run: |
+          lerna run build --no-private
+          yarn workspace @threefold/newstats build

.github/workflows/new_stats_docker.yaml

@@ -0,0 +1,35 @@
+name: New Stats Docker Build/Push
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  Build-and-push-docker-image:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout the repo
+        uses: actions/checkout@v3
+      - name: Log in to the Container registry
+        uses: docker/[email protected]
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Extract metadata for Docker
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ghcr.io/threefoldtech/newstats
+          tags: |
+            type=semver,pattern={{version}}
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          file: packages/new_stats/Dockerfile
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/playground_build.yml

@@ -17,6 +17,8 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+    env:
+      NODE_OPTIONS: "--max-old-space-size=8192"
 
     strategy:
       matrix:

.github/workflows/playground_cd.yml

@@ -6,6 +6,7 @@ on:
   push:
     branches:
       - development
+      - development_313
     paths:
       - "packages/playground/**"
   workflow_dispatch:
@@ -19,6 +20,8 @@ concurrency:
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
+    env:
+      NODE_OPTIONS: "--max-old-space-size=8192"
 
     strategy:
       matrix:
@@ -47,6 +50,7 @@ jobs:
           VERSION=${VERSION:0:7} NETWORK=dev yarn build
 
       - name: Copying files to staging server
+        if: ${{ github.ref == 'refs/heads/development' }}
         uses: appleboy/scp-action@master
         with:
           host: ${{ secrets.DEV_REMOTE_HOST }}
@@ -58,3 +62,17 @@ jobs:
           source: "packages/playground/dist/"
           target: "${{ secrets.PLAYGROUND_REMOTE_DIR }}"
           strip_components: 3
+
+      - name: Copying files to staging server
+        if: ${{ github.ref == 'refs/heads/development_313' }}
+        uses: appleboy/scp-action@master
+        with:
+          host: ${{ secrets.DEV_REMOTE_HOST }}
+          username: ${{ secrets.DEV_REMOTE_USER }}
+          key: ${{ secrets.DEV_SSH_KEY }}
+          passphrase: ${{ secrets.DEV_SSH_KEY_PASSPHRASE }}
+          rm: true
+          port: ${{ secrets.PORT }}
+          source: "packages/playground/dist/"
+          target: "/opt/playground_new/devnet/dist"
+          strip_components: 3

Makefile

@@ -41,8 +41,12 @@ else ifeq ($(project), weblets)
 	cd packages/weblets/playground && yarn build
 else ifeq ($(project), playground)
 	cd packages/playground && yarn build
+else ifeq ($(project), graphql_client)
+	cd packages/graphql_client && yarn build
+else ifeq ($(project), gridproxy_client)
+	cd packages/gridproxy_client && yarn build
 else ifeq ($(project), UI)
 	cd packages/UI && yarn build
 else
 	yarn lerna run build --no-private
-endif
+endif

README.md

@@ -19,6 +19,8 @@ This repo contains the typescript clients and projects for Threefold grid.
 - [rmb peer client](./packages/rmb_peer_client/README.md)
 - [rmb peer server](./packages/rmb_peer_server/README.md)
 - [Playground](./packages/playground/README.md)
+- [graphql_client](./packages/graphql_client/README.md)
+- [gridproxy_client](./packages/gridproxy_client/README.md)
 - [UI](./packages/UI/README.md)
 
 ## Requirements

packages/dashboard/scripts/build-env.sh

@@ -21,7 +21,7 @@ case $TFCHAIN_NETWORK in
     GRAPHQL_URL='https://graphql.dev.grid.tf/graphql'
     GRIDPROXY_URL='https://gridproxy.dev.grid.tf'
     SUBSTRATE_URL='wss://tfchain.dev.grid.tf/ws'
-    ACTIVATION_SERVICE_URL='https://activation.dev.grid.tf'
+    ACTIVATION_SERVICE_URL='https://activation.dev.grid.tf/activation/activate'
     PLAYGROUND_URL='https://play.dev.grid.tf'
     PLAYGROUND_V2_URL='https://playground.dev.grid.tf'
     RELAY_DOMAIN='relay.dev.grid.tf'
@@ -32,7 +32,7 @@ case $TFCHAIN_NETWORK in
     GRAPHQL_URL='https://graphql.qa.grid.tf/graphql'
     GRIDPROXY_URL='https://gridproxy.qa.grid.tf'
     SUBSTRATE_URL='wss://tfchain.qa.grid.tf/ws'
-    ACTIVATION_SERVICE_URL='https://activation.qa.grid.tf'
+    ACTIVATION_SERVICE_URL='https://activation.qa.grid.tf/activation/activate'
     PLAYGROUND_URL='https://play.qa.grid.tf'
     PLAYGROUND_V2_URL='https://playground.qa.grid.tf'
     RELAY_DOMAIN='relay.qa.grid.tf'
@@ -43,7 +43,7 @@ case $TFCHAIN_NETWORK in
     GRAPHQL_URL='https://graphql.test.grid.tf/graphql'
     GRIDPROXY_URL='https://gridproxy.test.grid.tf'
     SUBSTRATE_URL='wss://tfchain.test.grid.tf/ws'
-    ACTIVATION_SERVICE_URL='https://activation.test.grid.tf'
+    ACTIVATION_SERVICE_URL='https://activation.test.grid.tf/activation/activate'
     PLAYGROUND_URL='https://play.test.grid.tf'
     PLAYGROUND_V2_URL='https://playground.test.grid.tf'
     RELAY_DOMAIN='relay.test.grid.tf'
@@ -54,7 +54,7 @@ case $TFCHAIN_NETWORK in
     GRAPHQL_URL='https://graphql.grid.tf/graphql'
     GRIDPROXY_URL='https://gridproxy.grid.tf'
     SUBSTRATE_URL='wss://tfchain.grid.tf/ws'
-    ACTIVATION_SERVICE_URL='https://activation.grid.tf'
+    ACTIVATION_SERVICE_URL='https://activation.grid.tf/activation/activate'
     PLAYGROUND_URL='https://play.grid.tf'
     PLAYGROUND_V2_URL='https://playground.grid.tf'
     RELAY_DOMAIN='relay.grid.tf'

packages/dashboard/src/components/TfChainConnector.vue

@@ -45,7 +45,7 @@
             <v-form>
               <v-text-field
                 readonly
-                label="Mnemonic"
+                label="Hex Seed"
                 :value="$store.state.profile.mnemonic"
                 :type="showMnemonic ? 'text' : 'password'"
                 :append-icon="showMnemonic ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
@@ -116,16 +116,16 @@
               @submit.prevent="connect"
             >
               <v-alert type="warning" text>
-                To connect your wallet, you will need to enter your mnemonic which will be encrypted using the password.
-                Mnemonic will never be shared outside of this device.
+                To connect your wallet, you will need to enter your Mnemonic or Hex Seed which will be encrypted using
+                the password. Mnemonic or Hex Seed will never be shared outside of this device.
               </v-alert>
 
               <v-tooltip bottom>
                 <template #activator="{ on, attrs }">
                   <div v-on="on" v-bind="attrs">
                     <v-text-field
-                      label="Mnemonic"
-                      placeholder="Please insert your mnemonic"
+                      label="Mnemonic or Hex Seed"
+                      placeholder="Please insert your Mnemonic or Hex Seed"
                       :error-messages="mnemonicError || activateAccountError"
                       :value="mnemonic"
                       @input="
@@ -142,8 +142,9 @@
                 </template>
 
                 <p class="font-weight-black" :style="{ maxWidth: '600px' }">
-                  Mnemonic are your private key. They are used to represent you on the ThreeFold Grid. You can paste
-                  existing mnemonic or click the 'Create Account' button to create an account and generate mnemonic.
+                  Mnemonic or Hex Seed are your private key. They are used to represent you on the ThreeFold Grid. You
+                  can paste existing (Mnemonic/Hex Seed) or click the 'Create Account' button to create an account and
+                  generate mnemonic.
                 </p>
               </v-tooltip>
 
@@ -244,6 +245,7 @@
 
 <script lang="ts">
 import type { ApiPromise } from "@polkadot/api";
+import { isAddress } from "@polkadot/util-crypto";
 import { validateMnemonic } from "bip39";
 import Cryptr from "cryptr";
 import md5 from "md5";
@@ -326,18 +328,32 @@ export default class TfChainConnector extends Vue {
     return this.mnemonicError?.toLowerCase().includes("couldn't find a user for the provided mnemonic") ?? false;
   }
 
+  _isValidAddress(address: string) {
+    if (address.length === 66) {
+      return isAddress(address);
+    }
+
+    if (address.length === 64) {
+      return isAddress("0x" + address);
+    }
+
+    return false;
+  }
+
   @Watch("mnemonic")
   async checkMnemonic(mnemonic: string = this.mnemonic) {
     this.validatingMnemonic = true;
     this.mnemonicError = null;
 
-    if (!mnemonic) this.mnemonicError = "Mnemonic is required.";
-    else if (!validateMnemonic(mnemonic)) this.mnemonicError = "Mnemonic doesn't seem to be valid.";
+    if (!mnemonic) this.mnemonicError = "Mnemonic or Hex Seed is required.";
+    else if (!validateMnemonic(mnemonic) && !this._isValidAddress(mnemonic))
+      this.mnemonicError = "Mnemonic or Hex Seed doesn't seem to be valid.";
     else {
       try {
         await getGrid(mnemonic);
       } catch (err) {
-        this.mnemonicError = (err as any).message || "Couldn't connect to chain using the provided mnemonic.";
+        this.mnemonicError =
+          (err as any).message || "Couldn't connect to chain using the provided mnemonic or hex seed.";
       }
     }
 
@@ -412,7 +428,6 @@ export default class TfChainConnector extends Vue {
   public validateLoginPassword(value: string) {
     if (!value) return "Password is required";
     if (value.length < 6) return "Password must be at least 6 characters.";
-    console.log(localStorage.getItem(key));
 
     const wallet = JSON.parse(localStorage.getItem(key) || "{}");
     if (wallet.password !== md5(value)) return "Please provide a valid password.";
@@ -460,7 +475,7 @@ export default class TfChainConnector extends Vue {
       if (msg.toLowerCase().includes("couldn't find a user for the provided mnemonic")) {
         this.activateAccountModal = true;
       } else {
-        this.mnemonicError = msg || "Failed to connect mnemonic on grid.";
+        this.mnemonicError = msg || "Failed to connect mnemonic or hex seed on grid.";
       }
     } finally {
       this.connecting = false;

packages/dashboard/src/explorer/components/NodeDetails.vue

@@ -44,7 +44,7 @@
             <v-list-item-content>
               <v-list-item-title> Uptime </v-list-item-title>
             </v-list-item-content>
-            {{ node.uptime | secondToRedable }}
+            {{ node.uptime | toReadableDate }}
           </v-list-item>
           <v-divider />
 

packages/dashboard/src/explorer/config.ts

@@ -1,17 +1,17 @@
 import Vue from "vue";
 import VueApollo from "vue-apollo";
 
-import dateFiler from "./filters/date";
+import toHumanDate from "./filters/date";
 import optionTitleFiler from "./filters/optionTitle";
-import secondToRedable from "./filters/secondToRedable";
+import toReadableDate from "./filters/toReadableDate";
 import toTeraOrGigaOrPeta from "./filters/toTeraOrGigaOrPeta";
 import apolloProvider from "./plugins/apollo";
 
 Vue.use(VueApollo);
-Vue.filter("date", dateFiler);
+Vue.filter("date", toHumanDate);
 Vue.filter("optionTitle", optionTitleFiler);
 Vue.filter("toTeraOrGigaOrPeta", toTeraOrGigaOrPeta);
-Vue.filter("secondToRedable", secondToRedable);
+Vue.filter("toReadableDate", toReadableDate);
 
 export const explorerConfigs: any = {
   apolloProvider,

packages/dashboard/src/explorer/filters/date.ts

@@ -1,10 +1,5 @@
-export default function dateFiler(value: number): string {
-  const formater = Intl.DateTimeFormat("en", {
-    timeStyle: "short",
-    dateStyle: "short",
-    // eslint-disable-next-line
-  } as any);
+import moment from "moment";
 
-  // eslint-disable-next-line
-  return formater.format(new Date(value * 1000));
+export default function toHumanDate(timeInSeconds: number): string {
+  return moment(timeInSeconds * 1000).format("M/D/YY, h:m A");
 }