feat: energy domain picker

components/AppHeader.vue

@@ -53,6 +53,14 @@
           </span>
           <span class="nav-button__label">Energy</span>
         </nuxt-link>
+        <nuxt-link v-if="activeDomain"
+                   style="width: 30px; height: 30px; margin-left: 12px; padding: 6px;"
+                   to="/domains/">
+          <nuxt-img
+            :alt="activeDomain.name"
+            :src="activeDomain.logo"
+          />
+        </nuxt-link>
         <button
           :class="[isPopupOpen && 'nav-button--open']"
           aria-label="Navigation button"
@@ -147,6 +155,9 @@ export default {
     }
   },
   computed: {
+    activeDomain() {
+      return this.$store.getters['app/activeDomain']
+    },
     isAuth() {
       return this.$store.state.app.isAuth
     },

nuxt.config.ts

@@ -1,9 +1,9 @@
-import {Configuration as WebpackConfiguration} from 'webpack'
-import {NuxtOptionsLoaders, NuxtWebpackEnv} from '@nuxt/types/config/build'
+import { Configuration as WebpackConfiguration } from 'webpack'
+import { NuxtOptionsLoaders, NuxtWebpackEnv } from '@nuxt/types/config/build'
 
 const DOTENV_PATH =
   process.env.NODE_ENV === 'production' ? '.env.production' : '.env.development'
-require('dotenv').config({path: DOTENV_PATH})
+require('dotenv').config({ path: DOTENV_PATH })
 
 const title = 'Discover & grow your Aura...'
 const description = 'Your Aura represents power & influence upon the Auracle.'
@@ -21,15 +21,15 @@ export default {
   head: {
     title,
     meta: [
-      {charset: 'utf-8'},
-      {name: 'viewport', content: 'width=device-width, initial-scale=1'},
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       {
         hid: 'description',
         name: 'description',
         content: description,
       },
 
-      {name: 'twitter:card', content: 'summary_large_image'},
+      { name: 'twitter:card', content: 'summary_large_image' },
       {
         name: 'twitter:title',
         content: title,
@@ -61,10 +61,10 @@ export default {
         name: 'og:title',
         content: description,
       },
-      {hid: 'theme-color', name: 'theme-color', content: '#333333'},
+      { hid: 'theme-color', name: 'theme-color', content: '#333333' },
     ],
     link: [
-      {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
       {
         rel: 'dns-prefetch',
         href: 'https://fonts.gstatic.com/',
@@ -84,7 +84,13 @@ export default {
   css: ['@/styles/index.scss'],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: ['~/plugins/api'],
+  plugins: [
+    '~/plugins/api',
+    {
+      src: '~/plugins/initClient',
+      mode: 'client',
+    },
+  ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: true,
@@ -101,7 +107,7 @@ export default {
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
     // https://go.nuxtjs.dev/pwa
-    ['@nuxtjs/dotenv', {filename: DOTENV_PATH}],
+    ['@nuxtjs/dotenv', { filename: DOTENV_PATH }],
     '@nuxtjs/pwa',
     '@nuxtjs/axios',
     '@nuxtjs/date-fns',
@@ -116,7 +122,7 @@ export default {
     '/brightid': {
       target: 'https://recovery.brightid.org',
       changeOrigin: true,
-      pathRewrite: {'^/brightid': '/'},
+      pathRewrite: { '^/brightid': '/' },
     },
   },
 

pages/contact-us.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="contact-us app-page">
-    <div class="container contact-us__wrapper">
+    <div class="container">
       <h3 class="contact-us__title">Contact Us</h3>
       <div class="contact-us__body">
         <div class="contact-us__link-with-icon">

pages/domains.vue

@@ -0,0 +1,49 @@
+<template>
+  <section class="app-page">
+    <div class="container">
+      <h3 class="domains__title">Domains</h3>
+      <div class="domains__body">
+        <div v-for="domain in DOMAINS" :key="domain.id" class="domains__domain" @click="setActiveDomainId(domain.id)">
+          <div class="domains__domain__header__container">
+            <h4>{{ domain.name }}</h4>
+            <div
+              style="width: 40px; height: 40px; border-radius: 50%; padding: 6px; margin-left: 6px;">
+              <nuxt-img
+                :alt="domain.name"
+                :src="domain.logo"
+              />
+            </div>
+          </div>
+          {{ domain.description }}
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import {DOMAINS} from "~/utils/constants";
+
+export default {
+  data() {
+    return {
+      DOMAINS
+    }
+  },
+  computed: {
+    loading() {
+      return this.$store.state.app.loading
+    }
+  },
+  methods: {
+    setActiveDomainId(domainId) {
+      this.$store.commit('app/setActiveDomainId', domainId)
+      if (this.$store.getters["app/isFirstVisitedRoute"]) {
+        this.$router.push('/connections/')
+      } else {
+        this.$router.go(-1)
+      }
+    }
+  }
+}
+</script>

plugins/initClient.ts

@@ -0,0 +1,9 @@
+import { Plugin } from '@nuxt/types'
+
+const initClient: Plugin = ({ store }) => {
+  const localStorageDomainId = localStorage.getItem('activeDomainId')
+  if (localStorageDomainId) {
+    store.commit('app/setActiveDomainId', localStorageDomainId)
+  }
+}
+export default initClient

store/app.ts

@@ -1,7 +1,9 @@
-import {GetterTree, MutationTree} from 'vuex'
-import {AppState, RootState} from '~/types/store'
+import { GetterTree, MutationTree } from 'vuex'
+import { AppState, RootState } from '~/types/store'
+import { DomainId, DOMAINS } from '~/utils/constants'
 
 export const state = (): AppState => ({
+  activeDomainId: DomainId.BRIGHTID,
   hasUnsavedChanges: false,
   loading: false,
   isWebp: false,
@@ -14,10 +16,17 @@ export const state = (): AppState => ({
 export const getters: GetterTree<AppState, RootState> = {
   isFirstVisitedRoute: state => state.isFirstVisitedRoute,
   searchValue: state => state.searchValue,
-  disableGlobalSearchResults: state => state.disableGlobalSearchResults
+  activeDomain: state => DOMAINS.find(d => d.id === state.activeDomainId),
+  disableGlobalSearchResults: state => state.disableGlobalSearchResults,
 }
 
 export const mutations: MutationTree<AppState> = {
+  setActiveDomainId(state, value) {
+    state.activeDomainId = value
+    if (process.client) {
+      localStorage.setItem('activeDomainId', value)
+    }
+  },
   setHasUnsavedChanges(state, value) {
     state.hasUnsavedChanges = value
   },

styles/components/header.scss

@@ -112,7 +112,7 @@
   align-items: center;
   gap: 4px;
   background-color: transparent;
-  margin-left: 24px;
+  margin-left: 12px;
 
   &__label {
     padding-left: 5px;

styles/pages/all.scss

@@ -4,6 +4,7 @@
 @import './connections.scss';
 @import './energy.scss';
 @import './contact-us.scss';
+@import './domains.scss';
 
 .app-page {
   margin-top: 110px;

styles/pages/contact-us.scss

@@ -20,6 +20,7 @@
     line-height: 130%;
     letter-spacing: -0.03em;
     color: var(--b-gray);
+    padding-top: 10px;
     margin-bottom: 48px;
   }
 

styles/pages/domains.scss

@@ -0,0 +1,47 @@
+.domains {
+  &__body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__title {
+    @include semi;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    font-size: 24px;
+    line-height: 130%;
+    letter-spacing: -0.03em;
+    color: var(--b-gray);
+    padding-top: 10px;
+    margin-bottom: 12px;
+  }
+
+  &__domain {
+    &__header {
+      &__container {
+        display: flex;
+        align-items: center
+      }
+    }
+
+    @include med;
+    margin-top: 30px;
+    font-size: 16px;
+    line-height: 150%;
+    background: linear-gradient(
+        90deg,
+        #ffffff 0.53%,
+        rgba(255, 255, 255, 0.5) 145.92%
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-align: start;
+    border: 1px solid #777777;
+    padding: 15px;
+    cursor: pointer;
+    border-radius: 5px;
+  }
+}

types/index.d.ts

@@ -1,5 +1,7 @@
 // TODO: add typescript eslint to fix linter problems
 // TODO: update values
+import { DomainId } from '~/utils/constants'
+
 export type ConnectionLevel =
   | 'reported'
   | 'suspicious'
@@ -149,3 +151,10 @@ export type BrightIdConnectionsResponse = {
     connections: BrightIdConnection[]
   }
 }
+
+export type EnergyDomain = {
+  id: DomainId
+  name: string
+  logo: string
+  description: string
+}

types/store.d.ts

@@ -8,13 +8,15 @@ import {
   InboundEnergyAllocationList,
   LocalForageBrightIdBackup,
 } from '~/types/index'
+import { DomainId } from '~/utils/constants'
 
 export type RootState = {}
 export type BrightIdData = any // TODO: determine the type
 export type LoginState = {
   isAuth: boolean
 }
 export type AppState = {
+  activeDomainId: DomainId
   disableGlobalSearchResults: boolean
   searchValue: string
   hasUnsavedChanges: boolean

utils/constants.ts

@@ -1,4 +1,4 @@
-import {ConnectionLevel} from '~/types'
+import { ConnectionLevel, EnergyDomain } from '~/types'
 
 export const CONNECTION_SEARCH_SEED = 5
 
@@ -18,10 +18,31 @@ export const IS_PRODUCTION =
   (process.env.NUXT_ENV_VERCEL_ENV || process.env.NODE_ENV) === 'production'
 export const brightIdBaseURL = 'http://184.72.224.75'
 
-
 export const RATING_INBOUND_STAT = 'ri'
 export const RATING_OUTBOUND_STAT = 'ro'
 export const ENERGY_INBOUND_STAT = 'ei'
 export const ENERGY_OUTBOUND_STAT = 'eo'
 
 export const MUTUAL_CONNECTIONS_TEST_NAMESPACE = 'mutual-connections-'
+
+export enum DomainId {
+  BRIGHTID = 'brightid',
+  GITCOIN = 'gitcoin',
+}
+
+export const DOMAINS: EnergyDomain[] = [
+  {
+    id: DomainId.BRIGHTID,
+    name: 'BrightID',
+    logo: '/images/brightid.png',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  },
+  {
+    id: DomainId.GITCOIN,
+    name: 'Gitcoin',
+    logo: '/images/gitcoin.png',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  },
+]