What a sunny day! 🌤

src/components/FourZeroFour.vue

@@ -3,7 +3,8 @@
     <p class="title">End of The Internet 🔌</p>
     <p class="subtitle">You've probably found part of our App, we did not engineer!</p>
     <p class="subtitle">Go back or read book</p>
-    <p class="subtitle">If you think this should't happen, report us with screenshot.</p>
+    <p class="subtitle">If you think this should't happen, report us by
+      <a target="_blank" rel="noopener noreferrer"  href="https://github.com/kodadot/nft-gallery/issues/new?assignees=&labels=bug&template=bug_report.md&title=">creating bug issue with steps to reproduce and screenshot.</a></p>
   </div>
 </template>
 <script lang="ts">

src/components/rmrk/Profile/NavbarProfileDropdown.vue

@@ -10,7 +10,7 @@
         <!-- <span class="navbar__identity subtitle is-4 is-align-self-center"><Identity :address="account" :inline="true"/></span> -->
       </span>
       <template v-else>
-        <b-button type="is-primary" class="navbar__button ml-3 my-3">Log in</b-button>
+        <b-button type="is-primary" class="navbar__button ml-3 my-3" @click="checkExtension()">Log in</b-button>
       </template>
     </template>
 
@@ -55,7 +55,7 @@
       </b-button>
     </b-dropdown-item>
     <b-dropdown-item
-      v-if="changeAccount || !account"
+      v-if="!isExtension && (changeAccount || !account)"
       custom
       aria-role="menuitem"
     >
@@ -65,6 +65,23 @@
         :tooltipVisible="false"
       />
     </b-dropdown-item>
+    <template v-if="isExtension && (changeAccount || !account)">
+      <b-dropdown-item has-link aria-role="menuitem">
+        <a href="https://polkadot.js.org/extension/" rel="noopener noreferrer" target="_blank" class="is-flex is-align-items-center pl-3">
+          Install Desktop Wallet Extension
+        </a>
+      </b-dropdown-item>
+      <b-dropdown-item has-link aria-role="menuitem">
+        <a href="https://chrome.google.com/webstore/detail/polkadot%7Bjs%7D-extension/mopnmbcafieddcagagdcbnhejhlodfdd" rel="noopener noreferrer" target="_blank" class="is-flex is-align-items-center pl-3">
+          Install Chrome Wallet Extension
+        </a>
+      </b-dropdown-item>
+      <b-dropdown-item has-link aria-role="menuitem">
+        <a href="https://addons.mozilla.org/en-US/firefox/addon/polkadot-js-extension/" rel="noopener noreferrer" target="_blank" class="is-flex is-align-items-center pl-3">
+          Install Firefox Wallet Extension
+        </a>
+      </b-dropdown-item>
+    </template>
   </b-dropdown>
 </template>
 
@@ -82,6 +99,7 @@ const components = {
 export default class NavbarProfileDropdown extends Vue {
   @Prop() public value!: any;
   protected changeAccount: boolean = false;
+  protected isExtension: boolean = false;
 
   set account(account: string) {
     console.log('setAuth', account);
@@ -91,6 +109,16 @@ export default class NavbarProfileDropdown extends Vue {
   get account() {
     return this.$store.getters.getAuthAddress;
   }
+
+  checkExtension() {
+    if (!(window as any).injectedWeb3['polkadot-js']) {
+      this.isExtension = true;
+      this.$buefy.toast.open({
+        message:  'You need to install the browser extension - polkadot.js!',
+        duration: 90000
+      });
+    }
+  }
 }
 </script>
 

src/styles/global.scss

@@ -112,4 +112,11 @@ body {
     .icon.is-primary {
         color: #db2980 !important;
     }
+    .navbar-start  {
+        .router-link-active {
+            color: $primary;
+            background-color: #121212;
+        }
+    }
+
 }