Dark future incoming

dashboard/README.md

@@ -1,23 +1,50 @@
 # dashboard
 
-## Project setup
-```
-yarn install
-```
+# 🏃‍♀️ Quick Setup
 
-### Compiles and hot-reloads for development
-```
-yarn run serve
+```bash
+git clone https://github.com/kodadot/nft-gallery.git
+cd nft-gallery/dashboard
+touch .env.local
 ```
 
-### Compiles and minifies for production
+in `.env.local` add folloving urls:
+```bash
+VUE_APP_KEYRING=true
+VUE_APP_I18N_LOCALE=en
+VUE_APP_I18N_FALLBACK_LOCALE=en
+VUE_APP_SLATE_KEY=
+VUE_APP_SUBQUERY_URL=https://api.subquery.network/sq/vikiival/magick
 ```
-yarn run build
+you can obtain api key for slate [here](slate.host)
+
+> to run UI
+
+```bash
+cd nft-gallery/dashboard
+yarn
+yarn start
 ```
 
-### Run your tests
+> in a second terminal window:
+> this will run lambda functions
+
+```bash
+cd nft-gallery/dashboard
+yarn lambda
 ```
-yarn run test
+
+## Running local Polkadot and subquery nodes
+
+To run the full local environment we recommend you to run a [polkadot/Kusama node](https://github.com/paritytech/polkadot).
+In case you are using Apple M1, we have a [tutorial for that 🍏 ](https://vikiival.medium.com/run-substrate-on-apple-m1-a2699743fae8)
+
+To run also a subquery indexing node please [check this repo](https://github.com/vikiival/magick)
+
+Moreover please add this to your `.env.local`
+
+```bash
+VUE_APP_SUBQUERY_URL=http://localhost:3000
 ```
 
 ### Lints and fixes files

dashboard/public/index.html

@@ -10,6 +10,8 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap" rel="stylesheet">
     <!-- Line: 1, column: 1, Syntax error -->
     <!-- <link rel="manifest" href="./manifest.json"> -->
     <!-- <meta name="msapplication-TileColor" content="#da532c">
@@ -36,7 +38,8 @@
         justify-content: center;
         width: 100vw;
         height: 100vh;
-        background-color: #fefefe;
+        background-color: #000;
+        color: #fff;
         z-index: 1001;
         font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
       }
@@ -77,7 +80,7 @@
     <div id="app">
       <div class="preloader-container">
         <div class="preloader">
-          <img class="preloader-image" src="/kodadot_logo_v1_transparent_400px.jpg"/> <br/>
+          <img class="preloader-image" src="/kodadot_logo_v1_transparent_400px.png"/> <br/>
           <span class="preloader-text">
             🔌 Charging 🖼 NFT Market Explorer
           </span>

dashboard/src/App.vue

@@ -1,7 +1,16 @@
 <template>
-  <div class="container">
+  <div
+    class="
+      is-flex
+      is-flex-direction-column
+      min-h-full
+    "
+  >
     <Navbar v-if="isNavbarVisible"/>
-    <router-view id="routerview" />
+    <main class="is-flex-grow-1 mt-6">
+      <router-view />
+    </main>
+    <Footer />
   </div>
 </template>
 
@@ -10,6 +19,7 @@ import { Component, Vue, Watch } from 'vue-property-decorator';
 import { cryptoWaitReady } from '@polkadot/util-crypto';
 import keyring from '@polkadot/ui-keyring';
 import Navbar from './components/Navbar.vue';
+import Footer from './components/Footer.vue';
 import isShareMode from '@/utils/isShareMode'
 import coingecko from '@/coingecko'
 
@@ -29,6 +39,7 @@ import coingecko from '@/coingecko'
   },
   components: {
     Navbar,
+    Footer
   }
 })
 export default class Dashboard extends Vue {
@@ -85,42 +96,5 @@ export default class Dashboard extends Vue {
 </script>
 
 <style lang="scss">
-
-// Import Bulma's core
-@import "~bulma/sass/utilities/_all";
-@import "./colors";
-@import "./layout";
-
-// Setup $colors to use as bulma classes (e.g. 'is-twitter')
-$colors: (
-    "white": ($white, $black),
-    "black": ($black, $white),
-    "light": ($light, $light-invert),
-    "dark": ($dark, $dark-invert),
-    "primary": ($primary, $primary-invert),
-    "info": ($info, $info-invert),
-    "success": ($success, $success-invert),
-    "warning": ($warning, $warning-invert),
-    "danger": ($danger, $danger-invert),
-);
-
-$layout: (
-    "container-offset": ($container-offset),
-    "container-max-width": ($container-max-width),
-    "tablet": ($tablet),
-);
-
-// Links
-$link: $primary;
-$link-invert: $primary-invert;
-$link-focus-border: $primary;
-
-// DEV: for dark mode
-// $scheme-main: rgb(27, 34, 44);
-// $scheme-invert: $white;
-
-// Import Bulma and Buefy styles
-@import "~bulma";
-@import "~buefy/src/scss/buefy";
-// @import "~bulma-prefers-dark/bulma-prefers-dark";
+@import './styles';
 </style>

dashboard/src/components/Footer.vue

@@ -0,0 +1,179 @@
+<template>
+  <footer class="footer">
+    <div class="container footer__wrapper">
+      <div class="icons">
+        <ul class="footer__list icons__list">
+          <li class="icons__list-item">
+            <a
+              href="https://medium.com/kodadot"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <b-icon
+                pack="fab"
+                icon="medium"
+                size="is-medium"
+              >
+              </b-icon>
+            </a>
+          </li>
+          <li class="icons__list-item">
+            <a
+              href="https://discord.gg/u6ymnbz4PR"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <b-icon
+                pack="fab"
+                icon="discord"
+                size="is-medium"
+              >
+              </b-icon>
+            </a>
+          </li>
+          <li class="icons__list-item">
+            <a
+              href="https://t.me/kodadot"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <b-icon
+                pack="fab"
+                icon="telegram"
+                size="is-medium"
+              >
+              </b-icon>
+            </a>
+          </li>
+          <li class="icons__list-item">
+            <a
+              href="https://twitter.com/KodaDot"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <b-icon
+                pack="fab"
+                icon="twitter"
+                size="is-medium"
+              >
+              </b-icon>
+            </a>
+          </li>
+          <li class="icons__list-item">
+            <a
+              href="https://www.reddit.com/r/KodaDot/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <b-icon
+                pack="fab"
+                icon="reddit-alien"
+                size="is-medium"
+              >
+              </b-icon>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <ul class="footer__list">
+        <li
+          v-for="item in menu"
+          :key="item.name"
+          class="footer__list-item"
+        >
+          <router-link
+            :to="item.url"
+            class="has-text-white"
+          >
+            {{ item.name }}
+          </router-link>
+        </li>
+      </ul>
+    </div>
+  </footer>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import i18n from '@/i18n.ts';
+import { TranslateResult } from 'vue-i18n/types'
+
+interface Menu {
+  name: TranslateResult;
+  url: string;
+}
+@Component({
+  components: {}
+})
+export default class Footer extends Vue {
+  public menu: Menu[] = [
+    {
+      name: i18n.t('About'),
+      url: '/about'
+    },
+    {
+      name: i18n.t('FAQ'),
+      url: '/rmrk/faq'
+    },
+    // {
+    //   name: i18n.t('Contact'),
+    //   url: '/contact'
+    // },
+    {
+      name: i18n.t('Partnerships & Ambassadors'),
+      url: '/partnership'
+    }
+  ]
+}
+</script>
+
+<style lang="scss">
+@import '@/styles/variables';
+
+.footer {
+  &__wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+    padding: 16px;
+    height: 135px;
+
+    @include desktop {
+      flex-direction: row;
+    }
+  }
+
+  &__list {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  &__list-item {
+    position: relative;
+    padding: 0 8px;
+
+    &:not(:last-child) {
+      &:after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 0;
+        width: 1px;
+        height: 12px;
+        background: #fff;
+      }
+    }
+  }
+}
+
+.icons {
+  &__list-item {
+    padding: 0 2px;
+  }
+}
+</style>

dashboard/src/components/FourZeroFour.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="box" id="FourZeroFour">
+  <div class="box container" id="FourZeroFour">
     <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>