Merge branch 'feature/redesign-2' of https://github.com/rule110-io/su…

…rge-ui into feature/redesign-2
rule110-io · Jan 9, 2022 · 3c55ee4 · 3c55ee4
2 parents 43e6a55 + 39be238
commit 3c55ee4
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/frontend/src/components/NetworkStats/NetworkStats.scss b/frontend/src/components/NetworkStats/NetworkStats.scss
@@ -5,7 +5,7 @@
   height: 48px;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
   background: $dark-static;
   box-shadow: $shadow-2;
   backdrop-filter: $blur-2;
@@ -29,4 +29,8 @@
       margin-right: $padding-xl;
     }
   }
+
+  &__address {
+    user-select: text;
+  }
 }
diff --git a/frontend/src/components/NetworkStats/NetworkStats.vue b/frontend/src/components/NetworkStats/NetworkStats.vue
@@ -1,5 +1,17 @@
 <template>
   <div class="network-stats">
+    <div class="network-stats__left">
+      <div
+        v-tooltip="{
+          content: 'My NKN Public Key',
+          placement: 'top-center',
+          offset: 5,
+        }"
+        class="network-stats__address"
+      >
+        {{ publicKey }}
+      </div>
+    </div>
     <div class="network-stats__right">
       <div class="network-stats__item text_wrap_none">
         Download: {{ totalDown | prettyBytes(1) }}/s
@@ -21,11 +33,22 @@ import { mapState } from "vuex";
 export default {
   components: {},
   data: () => {
-    return {};
+    return {
+      publicKey: "",
+    };
   },
   computed: {
     ...mapState("globalBandwidth", ["statusBundle", "totalDown", "totalUp"]),
   },
-  methods: {},
+  mounted() {
+    this.getPublicKey();
+  },
+  methods: {
+    getPublicKey() {
+      window.go.surge.MiddlewareFunctions.GetPublicKey().then((res) => {
+        this.publicKey = res;
+      });
+    },
+  },
 };
 </script>
diff --git a/frontend/src/components/Sidebar/Sidebar.vue b/frontend/src/components/Sidebar/Sidebar.vue
@@ -5,7 +5,7 @@
         <Icon class="sidebar__control-icon" icon="PlusIcon"></Icon>Add New Topic
       </div>
     </div>
-    <div class="sidebar__title">Subsribed</div>
+    <div class="sidebar__title">Subscribed</div>
 
     <div class="sidebar__items">
       <div