Merge pull request #57 from kodadot/packnavbar

extra,faq,copy icon, hashtag for twitter

Author: yangwao

dashboard/src/components/Navbar.vue

@@ -21,6 +21,18 @@
         <strong v-if="row.strong">{{row.name}}</strong>
         <small v-else>{{row.name}}</small>
       </b-navbar-item>
+      <b-navbar-dropdown 
+          arrowless
+          collapsible
+          label="Extra">
+          <b-navbar-item 
+            v-for="row in navbarExtra"
+            v-bind:key="row.name"
+            :tag="row.tag"
+            :to="row.to">
+            {{row.name}}
+          </b-navbar-item>
+      </b-navbar-dropdown>
     </template>
     <template #end>
       <b-navbar-item tag="div">
@@ -57,27 +69,27 @@ export default class NavbarMenu extends Vue {
       to: { name: 'rmrk' },
       strong: true
     },
-    {
-      name: 'Credit',
-      icon: 'users',
-      to: { name: 'rmrkCredit' },
-      tag: 'router-link',
-      strong: true
-    },
     {
       name: 'Gallery',
       tag: 'router-link',
       to: { name: 'nft' },
       strong: true
     },
-
+  ]
+  public navbarExtra: any = [
     {
       name: 'Accounts',
       icon: 'users',
       to: { name: 'accounts' },
       tag: 'router-link',
     },
-
+    {
+      name: 'Credit',
+      icon: 'users',
+      to: { name: 'rmrkCredit' },
+      tag: 'router-link',
+      strong: true
+    },
     {
       name: 'Transfer',
       icon: 'paper-plane',

dashboard/src/components/rmrk/Faq.vue

@@ -30,6 +30,7 @@ export default class  extends Vue {
     ['How I can trade KSM for my artwork?','Its supported widely on popular exchanges. Daily liqudity on exchanges is around $200M at time of writing and 1 $KSM is traded for ~ $100.'] ,
     ['How I can buy KSM as new-comer?', 'We have integration with <a href="https://ramp.network">Ramp.network</a>, click on <a href="#/rmrk/credit">Credit in navbar</a>. You can use Revolut, Manual bank transfer, Debit Card and Apple Pay to top-up your KSM address. You can <a href="https://www.binance.com/en/register?ref=T1JB89F0">buy $KSM at Binance</a>'],
     ['How I can buy KSM with ETH, DAI, BTC..?', 'For best rates, you can <a href="https://www.coingecko.com/en/coins/edgeware#markets">use custodial exchange from list</a>. For best experience  <a href="https://www.binance.com/en/register?ref=T1JB89F0">we reccommend you to use Binance</a>. If you are <a href="https://simpleswap.io/?ref=6cc6e0c538ad">looking for simple trade, try SimpleSwap</a>.'],
+    ['What\'s the flow when I\'m NFT creator?', 'First of all, you need to install <a href="https://polkadot.js.org/extension/">Polkadot Extension</a>, <b>backup your seed</b>. Then you top up your wallet address through our <a href="#/rmrk/credit">Credit</a> feature. Once you have funds, head to <a href="/#/rmrk/create">Create</a>, create Collection. Wait till Collection is minted, then you go to <a href="/#/rmrk/create">Create Token</a> and Mint your very first token! If you had issues, we are working on our UX-flow. KodaDot has around month old code and there is still room to improve, bear with us, we are just team of two. Happy Minting 😌'],
     ['Can I use this in virtual worlds?', 'We are exploring possibilities, we actually plan to actively research on this in our milestone 2'],
     ['I\'ve got errors, how to resolve them?', 'We are trying delivering incremental updates on daily basis & fixes ASAP. We may published new version and your browser has cached old one. If you are on <b>Windows</b>, try hold down <b>Ctrl and then press F5</b>. <b>Mac users</b>, hold down <b>CMD and Shift and then press R</b>. If this did not help, DMs on Twitter with screenshot where is developer console open.'],
     ['What does SEND, CONSUME, LIST mean?', 'SEND will send it to someone, CONSUME will burn it, LIST will list it for sale so someone can buy it from you.'],

dashboard/src/components/rmrk/Gallery/GalleryItem.vue

@@ -61,7 +61,7 @@
                 Owner
               </p>
               <p class="subtitle is-size-7">
-                {{ nft.currentOwner }}
+                <a :href="`https://kusama.subscan.io/account/${nft.currentOwner}`" target="_blank">{{ nft.currentOwner }}</a>
               </p>
             </div>
           </div>
@@ -99,7 +99,8 @@
           <footer class="card-footer">
             <p class="card-footer-item">
               <span>
-                <a :href="twitterUri">
+                <a :href="twitterUri"
+                    target="_blank">
                   <b-icon 
                     size="is-large"
                     pack="fab" 
@@ -110,7 +111,8 @@
             </p>
             <p class="card-footer-item">
               <span>
-                <a :href="telegramUri">
+                <a :href="telegramUri"
+                    target="_blank">
                   <b-icon 
                     size="is-large"
                     pack="fab" 
@@ -121,7 +123,8 @@
             </p>
             <p class="card-footer-item">
               <span>
-                <a :href="linemeUri">
+                <a :href="linemeUri"
+                    target="_blank">
                   <b-icon 
                     size="is-large"
                     pack="fab" 
@@ -138,7 +141,7 @@
                  <b-icon   
                     size="is-medium"
                     pack="fas" 
-                    icon="share-square">
+                    icon="link">
                   </b-icon>
                 </a>
               </span>
@@ -271,7 +274,7 @@ export default class GalleryItem extends Vue {
   }
 
   get helloText() {
-    return 'Check out this cool RMRK NFT';
+    return 'Check out this cool RMRK NFT %23kodadot';
   }
 
   get realworldFullPath() {

dashboard/src/icons.ts

@@ -20,7 +20,7 @@ import {
   faQuestionCircle, faMinus, faSearch, 
   faInfoCircle, faChevronDown, faChevronUp,
   faHeart, faCaretDown, faInfo, 
-  faShareSquare, faCopy, 
+  faLink, faCopy, 
 } from '@fortawesome/free-solid-svg-icons';
 
 // throws error, idk why
@@ -52,7 +52,7 @@ library.add(
   faUsers, faQuestionCircle, faMinus, 
   faSearch, faInfoCircle, faChevronDown, 
   faChevronUp, faHeart, faSearch,
-  faCaretDown, faInfo, faShareSquare,
+  faCaretDown, faInfo, faLink,
 
   faTwitter, faTelegram, faMedium, faLine, 
   );