chore: release 2.18.0

Release-As: 2.18.0

.github/workflows/deploy-staging.yml

@@ -37,7 +37,7 @@ jobs:
           DOCUMENTATION: 'https://notepad.hypha.earth/5dC66nNXRVGpb1aTHaRJXw'
           DGRAPH_URL: 'https://alpha.tekit.io'
           DGRAPH_ROOT_HASH: '52a7ff82bd6f53b31285e97d6806d886eefb650e79754784e9d923d3df347c91'
-          TELOS_ENDPOINTS: 'https://api.telosfoundation.io'
+          TELOS_ENDPOINTS: 'https://mainnet.telos.net'
           TLOSTO_SEEDS: 'tlosto.seeds'
           SUPPLY_CONTRACT: 'voice.hypha'
           GRAPHQL_URI: 'https://alpha-dhomn.tekit.io/graphql'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dho-web-client",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "Governance, payroll and treasury tools for distributed HUMAN organizations (DHO)",
   "productName": "Hypha DHO",
   "author": "Max <[email protected]>",
@@ -21,6 +21,8 @@
     "@sentry/tracing": "^7.14.2",
     "@sentry/vue": "^7.14.2",
     "@smontero/ppp-client-api": "0.0.43",
+    "apollo-link-ws": "^1.0.20",
+    "apollo-utilities": "^1.3.4",
     "axios": "0.21.1",
     "core-js": "^3.6.5",
     "dgraph-js-http": "^21.3.0",
@@ -33,6 +35,7 @@
     "libphonenumber-js": "^1.10.6",
     "quasar": "1.15.10",
     "showdown": "^1.9.1",
+    "subscriptions-transport-ws": "^0.11.0",
     "turndown": "^7.0.0",
     "ual-anchor": "^1.0.5",
     "ual-seeds": "^1.1.2",

src/apollo/apollo-client-config.js

@@ -1,4 +1,4 @@
-import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'
+import { IntrospectionFragmentMatcher, defaultDataIdFromObject } from 'apollo-cache-inmemory'
 import schema from './schema.json'
 
 export default async function (/* { app, router, store, ssrContext, urlPath, redirect } */) {
@@ -19,7 +19,13 @@ export default async function (/* { app, router, store, ssrContext, urlPath, red
       cacheConfig: {
         fragmentMatcher: new IntrospectionFragmentMatcher({
           introspectionQueryResultData: schema
-        })
+        }),
+        dataIdFromObject: r => {
+          if (r.docId) {
+            return `${r.__typename}:${r.docId}`
+          }
+          return defaultDataIdFromObject(r)
+        }
       },
 
       // additional config for apollo client

src/apollo/apollo-client-hooks.js

@@ -1,6 +1,38 @@
-export async function apolloClientBeforeCreate (/* { apolloClientConfigObj, app, router, store, ssrContext, urlPath, redirect } */) {
+import { HttpLink } from 'apollo-link-http'
+import { split } from 'apollo-link'
+import { WebSocketLink } from 'apollo-link-ws'
+import { getMainDefinition } from 'apollo-utilities'
+
+const httpLink = new HttpLink({
+  // You should use an absolute URL here
+  uri: process.env.GRAPHQL_URI || 'https://alpha-stt.tekit.io/graphql'
+})
+
+// Create the subscription websocket link
+const wsLink = new WebSocketLink({
+  uri: process.env.GRAPHQL_SUBSCRIPTIONS_URI || 'ws://alpha-stts.tekit.io/graphql',
+  options: {
+    reconnect: true
+  }
+})
+
+// using the ability to split links, you can send data to each link
+// depending on what kind of operation is being sent
+const link = split(
+  // split based on operation type
+  ({ query }) => {
+    const definition = getMainDefinition(query)
+    return definition.kind === 'OperationDefinition' &&
+      definition.operation === 'subscription'
+  },
+  wsLink,
+  httpLink
+)
+
+export async function apolloClientBeforeCreate ({ apolloClientConfigObj, app, router, store, ssrContext, urlPath, redirect }) {
   // if needed you can modify here the config object used for apollo client
   // instantiation
+  apolloClientConfigObj.link = link
 }
 
 export async function apolloClientAfterCreate ({ apolloClient, store }/* { apolloClient, app, router, store, ssrContext, urlPath, redirect } */) {

src/components/common/base-banner.vue

@@ -113,5 +113,6 @@ export default {
 
 .rounded-corners
   border-radius 32px
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
 
 </style>

src/components/filters/filter-widget-mobile.vue

@@ -20,7 +20,7 @@ transition(name="slide")
   .container
     .top-buttons.q-ma-md
       q-btn(color="internal-bg" text-color="primary" rounded unelevated size="sm" padding="12px" icon="fas fa-times" @click="$emit('close')")
-    filter-widget(v-bind="{ ...$props, ...$attrs, ...$slots }" v-on = "$listeners" :showViewSelector="false").full-height
+    filter-widget(v-bind="{ ...$props, ...$attrs, ...$slots }" v-on = "$listeners" :showViewSelector="false" @close-window="$emit('close')").full-height
     .bottom-buttons
 </template>
 

src/components/filters/filter-widget.vue

@@ -82,6 +82,16 @@ export default {
     },
     clearSearchInput () {
       this.textFilter = ''
+    },
+    resetFilters () {
+      this.circle = this.circleArray?.[this.circleDefault]
+      this.sort = this.optionArray?.[this.defaultOption]
+      this.toggle = this.toggleDefault
+      this.textFilter = null
+      this.filters.forEach(tag => {
+        tag.enabled = false
+      })
+      this.clearSearchInput()
     }
   },
 
@@ -151,7 +161,23 @@ widget(title="Filters")
       .row.items-center.justify-between.q-mt-sm(v-if="showToggle")
         .h-b2 {{ toggleLabel }}
         q-toggle(v-model="toggle" color="primary" keep-color)
-
+      template(v-if="$q.screen.lt.md")
+        q-btn.q-my-sm.q-px-sm.full-width(
+          :class="'btn-primary-active'"
+          label="Save filters"
+          no-caps
+          rounded
+          unelevated
+          @click="$emit('close-window')"
+        )
+        q-btn.q-px-sm.full-width(
+          :class="'internal-bg'"
+          label="Reset filters"
+          no-caps
+          rounded
+          unelevated
+          @click="resetFilters"
+        )
 </template>
 
 <style lang="stylus" scoped>

src/components/navigation/profile-sidebar.vue

@@ -18,6 +18,7 @@ export default {
     daoName: String,
     isMember: Boolean,
     isMobile: Boolean,
+    isAuthenticated: Boolean,
     profile: {
       type: Object
     }
@@ -41,7 +42,7 @@ export default {
         .h-b3.text-body(v-if="profile && !compact") {{ '@' + profile.username }}
       sidebar-news(:username="profile.username" :daoName="daoName" :announcement="announcement" v-if="!compact" :isMember="isMember")
       //- quick-actions //- Commented for MVP
-      quick-links.q-py-sm(:username="profile.username" :isMember="isMember" :compact="compact" @onClick="isMobile && $emit('close')")
+      quick-links.q-py-sm(:username="profile.username" :isMember="isMember" :isAuthenticated="isAuthenticated" :compact="compact" @onClick="isMobile && $emit('close')")
 </template>
 
 <style lang="stylus" scoped>

src/components/navigation/quick-links.vue

@@ -7,7 +7,8 @@ export default {
   props: {
     compact: Boolean,
     isMember: Boolean,
-    username: String
+    username: String,
+    isAuthenticated: Boolean
   },
 
   data: function () {
@@ -50,7 +51,7 @@ export default {
 .quick-links.full-width(:style="cssVars")
   .row.q-col-gutter-xs.justify-center-items-center
     .col-6(:class="{ 'col-12': compact, 'flex': !compact }").justify-end
-      q-btn.button-square.items-end(@click.native="$emit('onClick')" :to="isMember ? { name: 'proposal-create', params: { dhoname: daoSettings.url } } : {}" rounded unelevated :color="isActiveRoute('proposal-create') ? 'primary' : 'internal-bg'" :text-color="isActiveRoute('proposal-create') ? 'internal-bg' : 'primary'" :disabled="!isMember")
+      q-btn.button-square.items-end(@click.native="$emit('onClick')" :to="isAuthenticated ? { name: 'proposal-create', params: { dhoname: daoSettings.url } } : {}" rounded unelevated :color="isActiveRoute('proposal-create') ? 'primary' : 'internal-bg'" :text-color="isActiveRoute('proposal-create') ? 'internal-bg' : 'primary'" :disabled="!isAuthenticated")
         .column.items-center
           q-icon.q-pa-xs(size="md" name="fas fa-file-medical")
           .text-caption.text-no-wrap.text-bold New Proposal
@@ -60,7 +61,7 @@ export default {
           q-icon.q-pa-xs( size="md" name="far fa-user")
           .text-caption.text-no-wrap.text-bold My Profile
     .col-6(:class="{ 'col-12': compact, 'flex': !compact }").justify-end
-      q-btn.button-square(@click="changeRoute('wallet',{username})" rounded unelevated :color="isActiveRoute('wallet') ? 'primary' : 'internal-bg'" :text-color="isActiveRoute('wallet') ? 'internal-bg' : 'primary'" :disabled="!isMember")
+      q-btn.button-square(@click="changeRoute('wallet',{username})" rounded unelevated :color="isActiveRoute('wallet') ? 'primary' : 'internal-bg'" :text-color="isActiveRoute('wallet') ? 'internal-bg' : 'primary'" :disabled="!isAuthenticated")
         .column.items-center
           q-icon.q-pa-xs(size="md" name="fas fa-wallet")
           .text-caption.text-no-wrap.text-bold My Wallet

src/components/organization/create-dho-widget.vue

@@ -10,5 +10,5 @@ export default {
 <template lang="pug">
 widget.q-my-md.position-relative(title="Create your DHO")
   .text-ellipsis.text-body.q-my-xl Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-  q-btn.q-mt-xl.q-px-lg(rounded color="primary" no-caps @click="$router.push({ name: 'dho-creation' })") New DHO
+  q-btn.q-mt-xl.q-px-lg(rounded color="primary" no-caps @click="$router.push({ name: 'dao-launcher' })") New DHO
 </template>

src/components/profiles/profile-card.vue

@@ -118,9 +118,9 @@ export default {
         const selectedTimeZone = profile ? profile.publicData.timeZone : 'utc'
         const tz = this.timeZonesOptions.find(v => v.value === selectedTimeZone)
         this.timezone = tz.text.replace('(', '').replace(/\).*$/, '')
-        this.time = new Date(new Date().toLocaleString('en-US', { timeZone: tz.utc[0] })).toLocaleTimeString()
+        this.time = new Date(new Date().toLocaleString('en-US', { timeZone: tz.utc[0] })).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
         setInterval(() => {
-          this.time = new Date(new Date().toLocaleString('en-US', { timeZone: tz.utc[0] })).toLocaleTimeString()
+          this.time = new Date(new Date().toLocaleString('en-US', { timeZone: tz.utc[0] })).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
         }, 1000)
 
         if (supplyTokens && this.voiceToken.token && supplyTokens[this.voiceToken.token]) {
@@ -344,6 +344,7 @@ widget-editable(
   height 140px
   border-radius 50%
   overflow hidden
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
 
 .name-text
   text-overflow ellipsis

src/components/proposals/proposal-card-chips.vue

@@ -134,7 +134,7 @@ export default {
       if (this.compensation) {
         const usdAmount = Number.parseFloat(this.compensation.amount.split(' ')[0])
         result.push(
-          { color: 'primary', outline: true, label: `${this.getFormatedTokenAmount(usdAmount, 3, 0)} USD`, tooltip: this.compensation.tooltip })
+          { color: 'primary', outline: true, label: `${this.getFormatedTokenAmount(usdAmount, 3, 0)} USDE`, tooltip: this.compensation.tooltip })
       }
 
       if (this.salary) {

src/components/proposals/proposal-card.vue

@@ -137,8 +137,8 @@ widget.cursor-pointer.card(
                 size="20px"
               )
             .row.items-center.q-ml-sm(v-if="list")
-              q-icon(v-show="status !== 'drafted'" name="fas fa-hourglass-half")
-              .h-b2.text-center.text-body.q-ml-xs.q-mr-md.q-mr-xxxl(v-show="status !== 'drafted'") {{ timeLeftString() }}
+              q-icon(name="fas fa-hourglass-half")
+              .h-b2.text-center.text-body.q-ml-xs.q-mr-md.q-mr-xxxl {{ timeLeftString() }}
               q-icon(name="far fa-comment-alt")
                 .h-b2.text-center.text-body.q-ml-xs {{ getCommentCount() }}
         .col-4(v-show="status !== 'drafted'" :class="{ 'col-12': card }")
@@ -155,8 +155,8 @@ widget.cursor-pointer.card(
             .col-1
         .col-12(v-if="card").justify-between
           .row.items-center.float-left
-              q-icon(v-show="status !== 'drafted'" name="fas fa-hourglass-half" size="11px")
-              .h-b2.text-center.text-body.q-ml-xs(v-show="status !== 'drafted'") {{ timeLeftString() }}
+              q-icon(name="fas fa-hourglass-half" size="11px")
+              .h-b2.text-center.text-body.q-ml-xs {{ timeLeftString() }}
           .row.items-center.float-right
               q-icon(name="far fa-comment-alt")
               .h-b2.text-center.text-body.q-ml-xs {{ getCommentCount() }}

src/css/quasar-classes-override.styl

@@ -137,9 +137,9 @@ a, a:hover, a:focus
   color var(--q-color-primary) !important
   .q-btn
     color var(--q-color-secondary)
-    outline-color var(--q-color-secondary) !important
-    outline-width 1px !important
-    outline-style solid !important
+    border: 1px solid  var(--q-color-secondary);
+    border-radius: 50% !important
+
   .bg-primary
     background var(--q-color-secondary) !important
 
@@ -166,4 +166,7 @@ a, a:hover, a:focus
 .q-date__range:before
   opacity 0.7 !important
   background-color var(--q-color-primary)!important
-  color white !important
+  color white !important
+
+.q-avatar
+  -webkit-mask-image: -webkit-radial-gradient(white, black);  

src/layouts/CreateLayout.vue

@@ -0,0 +1,50 @@
+<script>
+export default {
+  name: 'create-layout',
+  computed: {
+    title () {
+      if (this.$route.meta) {
+        const { title } = this.$route.meta
+        return title
+      }
+      return null
+    },
+    subtitle () {
+      if (this.$route.meta) {
+        const { subtitle } = this.$route.meta
+        return subtitle
+      }
+      return null
+    },
+    link () {
+      if (this.$route.meta) {
+        const { link } = this.$route.meta
+        return link
+      }
+      return []
+    }
+  },
+
+  methods: {
+    onBack () { this.$EventBus.$emit('global:nav:back') }
+  }
+}
+</script>
+
+<template lang="pug">
+q-layout.bg-white(view="lHr LpR fFf" ref="layout")
+    q-page-container
+        //- q-scroll-area.full-height(:thumb-style=" { 'border-radius': '6px' }" ref="scrollArea")
+        .full-height.full-width.fixed-full.bg-internal-bg(:style="'padding: 15px; padding-bottom: 300px; overflow-y: scroll; z-index: 7777;'")
+          header.flex.row.justify-between
+            q-btn(unelevated rounded padding="12px" icon="fas fa-arrow-left"  size="sm" :color="'white'" text-color="'primary'" @click="onBack")
+            .h-h6.text-bold.flex.items-center {{title}}
+            q-btn(unelevated rounded padding="12px" icon="fas fa-times"  size="sm" :color="'white'" text-color="'primary'" :to="{ name: 'dashboard'}")
+          section.q-mt-md
+            router-view
+
+</template>
+
+<style lang="sass" scoped>
+
+</style>

src/layouts/DhoSelector.vue

@@ -2,9 +2,10 @@
 export default {
   name: 'dho-selector',
   components: {
+    CreateLayout: () => import('./CreateLayout.vue'),
+    LoginLayout: () => import('./LoginLayout.vue'),
     MultiDhoLayout: () => import('./MultiDhoLayout.vue'),
-    ProposalLayout: () => import('./ProposalLayout.vue'),
-    LoginLayout: () => import('./LoginLayout.vue')
+    ProposalLayout: () => import('./ProposalLayout.vue')
   },
 
   props: {
@@ -56,8 +57,8 @@ export default {
       skip () {
         return !this.dhoname || !this.daoRegexp
       },
-      fetchPolicy: 'no-cache',
-      pollInterval: 1000 // THIS IS JUST TEMPORARY UNTIL GRAPHQL SUBSCRIPTION IS READY
+      fetchPolicy: 'no-cache'
+      // pollInterval: 1000 // THIS IS JUST TEMPORARY UNTIL GRAPHQL SUBSCRIPTION IS READY
     },
 
     dho: {
@@ -102,15 +103,17 @@ export default {
       return undefined
     },
 
+    useCreateLayout () { return this.$q.screen.lt.md && this.$route.meta && this.$route.meta.layout && this.$route.meta.layout.mobile === 'create' },
     useMobileProposalLayout () { return this.$q.screen.lt.md && this.$route.meta && this.$route.meta.layout === 'proposal' }
   }
 }
 </script>
 <template lang="pug">
 .dho-selector
-  proposal-layout(v-if="useMobileProposalLayout && $q.platform.is.desktop")
-  multi-dho-layout(v-if="!isLoginRoute" :dho="dho" :daoName="dhoname")
+  create-layout(v-if="useCreateLayout")
   login-layout(v-if="isLoginRoute")
+  multi-dho-layout(v-if="!isLoginRoute" :dho="dho" :daoName="dhoname")
+  proposal-layout(v-if="useMobileProposalLayout && $q.platform.is.desktop")
 </template>
 
 <style scoped lang="stylus">