refactor: grant icon & fetching plugin config

config/index.js

@@ -115,8 +115,8 @@ exports.MARKET = {
 
 exports.PLUGINS = {
   adapters: ['npm'],
-  blacklistUrl: 'https://raw.githubusercontent.com/ark-ecosystem-desktop-plugins/config/master/blacklist.json',
-  whitelistUrl: 'https://raw.githubusercontent.com/ark-ecosystem-desktop-plugins/config/master/whitelist.json',
+  // pluginsUrl: 'https://raw.githubusercontent.com/ark-ecosystem-desktop-plugins/config/master/plugins.json',
+  pluginsUrl: 'https://raw.githubusercontent.com/ark-ecosystem-desktop-plugins/config/chore/single-config-file/plugins.json',
   categories: [
     'gaming',
     'theme',

src/renderer/App.vue

@@ -332,7 +332,7 @@ export default {
 
       ipcRenderer.send('splashscreen:app-ready')
 
-      await Promise.all([this.$plugins.fetchPluginsFromAdapter(), this.$plugins.fetchBlacklist(), this.$plugins.fetchWhitelist()])
+      await Promise.all([this.$plugins.fetchPluginsFromAdapter(), this.$plugins.fetchPluginsList()])
     },
 
     __watchProfile () {

src/renderer/components/PluginManager/PluginManagerCheckmark.vue

@@ -7,8 +7,8 @@
     class="PluginManagerCheckmark"
   >
     <SvgIcon
-      name="checkmark"
-      view-box="0 0 6 6"
+      name="ark-checkmark"
+      view-box="0 0 16 16"
     />
   </div>
 </template>
@@ -34,6 +34,7 @@ export default {
 
 <style lang="postcss" scoped>
 .PluginManagerCheckmark {
-  @apply flex items-center justify-center text-white mr-1 rounded-full w-3 h-3 bg-blue
+  @apply flex items-center ml-1 w-4 h-4;
+  color: #007cff;
 }
 </style>

src/renderer/components/PluginManager/PluginManagerGrants.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    v-tooltip="{
+      content: $t('PAGES.PLUGIN_MANAGER.GRANTS', { author }),
+      placement: 'bottom'
+    }"
+    class="PluginManagerGrants"
+  >
+    <SvgIcon
+      name="ark-grants"
+      view-box="0 0 16 16"
+    />
+  </div>
+</template>
+
+<script>
+import { PLUGINS } from '@config'
+import SvgIcon from '@/components/SvgIcon'
+
+export default {
+  name: 'PluginManagerGrants',
+
+  components: {
+    SvgIcon
+  },
+
+  computed: {
+    author () {
+      return PLUGINS.officialAuthor
+    }
+  }
+}
+</script>
+
+<style lang="postcss" scoped>
+.PluginManagerGrants {
+  @apply flex items-center ml-1 w-4 h-4;
+  color: #ffae10;
+}
+</style>

src/renderer/components/PluginManager/PluginManagerGrid.vue

@@ -29,16 +29,17 @@
 
         <div class="pl-4">
           <div class="flex flex-col justify-center h-20">
-            <span
-              class="PluginManagerGrid__plugin__name"
-              @click="emitShowDetails(plugin)"
-            >
-              {{ plugin.title }}
-            </span>
-
+            <div class="flex items-center">
+              <span
+                class="PluginManagerGrid__plugin__name"
+                @click="emitShowDetails(plugin)"
+              >
+                {{ plugin.title }}
+              </span>
+              <PluginManagerCheckmark v-if="plugin.isOfficial && !plugin.isGrant" />
+              <PluginManagerGrants v-else-if="plugin.isGrant" />
+            </div>
             <div class="PluginManagerGrid__plugin__details">
-              <PluginManagerCheckmark v-if="plugin.isOfficial" />
-
               <span>{{ plugin.author }}</span>
               <span class="ml-2">v{{ plugin.version }}</span>
               <span class="ml-2">{{ formatter_bytes(plugin.size) }}</span>
@@ -57,6 +58,7 @@
 <script>
 import { ButtonGeneric, ButtonIconGeneric } from '@/components/Button'
 import PluginManagerCheckmark from '@/components/PluginManager/PluginManagerCheckmark'
+import PluginManagerGrants from '@/components/PluginManager/PluginManagerGrants'
 import PluginLogo from '@/components/PluginManager/PluginLogo'
 
 export default {
@@ -66,6 +68,7 @@ export default {
     ButtonGeneric,
     ButtonIconGeneric,
     PluginManagerCheckmark,
+    PluginManagerGrants,
     PluginLogo
   },
 

src/renderer/components/PluginManager/PluginManagerModals/PluginDetailsModal.vue

@@ -13,15 +13,17 @@
 
       <div class="flex flex-col ml-5 justify-between">
         <div>
-          <span class="text-theme-page-text font-semibold text-xl">
-            {{ plugin.title }}
-          </span>
+          <div class="flex items-center">
+            <span class="text-theme-page-text font-semibold text-xl">
+              {{ plugin.title }}
+            </span>
+            <PluginManagerCheckmark v-if="plugin.isOfficial && !plugin.isGrant" />
+            <PluginManagerGrants v-else-if="plugin.isGrant" />
+          </div>
 
           <span
             class="PluginDetailsModal__header__details"
           >
-            <PluginManagerCheckmark v-if="plugin.isOfficial" />
-
             <span>
               {{ plugin.author }}
             </span>
@@ -179,7 +181,7 @@
 <script>
 import { PLUGINS } from '@config'
 import { ButtonGeneric, ButtonIconGeneric } from '@/components/Button'
-import { PluginLogo, PluginManagerCheckmark, PluginSlider } from '@/components/PluginManager'
+import { PluginLogo, PluginManagerCheckmark, PluginManagerGrants, PluginSlider } from '@/components/PluginManager'
 import { ModalWindow } from '@/components/Modal'
 import { PluginManagerButtonSwitch } from '@/components/PluginManager/PluginManagerButtons'
 import SvgIcon from '@/components/SvgIcon'
@@ -192,6 +194,7 @@ export default {
     ButtonGeneric,
     ButtonIconGeneric,
     PluginManagerCheckmark,
+    PluginManagerGrants,
     PluginManagerButtonSwitch,
     ModalWindow,
     PluginLogo,

src/renderer/components/PluginManager/PluginManagerTable.vue

@@ -20,21 +20,22 @@
 
         <div
           v-else-if="data.column.field === 'title'"
+          class="flex items-center"
         >
           <span
             class="whitespace-no-wrap cursor-pointer"
             @click="emitShowDetails(data.row)"
           >
             {{ data.row.title | truncate(30) }}
           </span>
+          <PluginManagerCheckmark v-if="data.row.isOfficial && !data.row.isGrant" />
+          <PluginManagerGrants v-else-if="data.row.isGrant" />
         </div>
 
         <div
           v-else-if="data.column.field === 'author'"
           class="flex items-center"
         >
-          <PluginManagerCheckmark v-if="data.row.isOfficial" />
-
           <span class="flex items-center whitespace-no-wrap">
             {{ data.row.author | truncate(30) }}
           </span>
@@ -104,6 +105,7 @@
 <script>
 import { ButtonGeneric, ButtonIconGeneric } from '@/components/Button'
 import PluginManagerCheckmark from '@/components/PluginManager/PluginManagerCheckmark'
+import PluginManagerGrants from '@/components/PluginManager/PluginManagerGrants'
 import PluginLogo from '@/components/PluginManager/PluginLogo'
 import TableWrapper from '@/components/utils/TableWrapper'
 
@@ -114,6 +116,7 @@ export default {
     ButtonGeneric,
     ButtonIconGeneric,
     PluginManagerCheckmark,
+    PluginManagerGrants,
     PluginLogo,
     TableWrapper
   },

src/renderer/components/PluginManager/index.js

@@ -1,4 +1,5 @@
 import PluginManagerCheckmark from './PluginManagerCheckmark'
+import PluginManagerGrants from './PluginManagerGrants'
 import PluginManagerGrid from './PluginManagerGrid'
 import PluginManagerSearchBar from './PluginManagerSearchBar'
 import PluginManagerSideMenu from './PluginManagerSideMenu'
@@ -10,6 +11,7 @@ export * from './PluginManagerModals'
 
 export {
   PluginManagerCheckmark,
+  PluginManagerGrants,
   PluginManagerGrid,
   PluginManagerSearchBar,
   PluginManagerSideMenu,

src/renderer/i18n/locales/en-US.js

@@ -667,6 +667,7 @@ export default {
       REMOVING: 'Removing \'{plugin}\'',
       UPDATING: 'Updating \'{plugin}\'',
       OFFICIAL: 'Official {author} plugin',
+      GRANTS: 'Funded by {author} grants',
       MENU: 'Menu',
       BANNER: {
         TITLE: 'Welcome to the Plugin Manager',

src/renderer/services/plugin-manager.js

@@ -237,6 +237,8 @@ export class PluginManager {
     configs = await Promise.all(configs.map(async config => {
       const plugin = await PluginConfiguration.sanitize(config)
 
+      plugin.isGrant = this.app.$store.getters['plugin/isGrant'](plugin.id)
+
       try {
         plugin.logo = await this.fetchLogo(plugin.logo)
       } catch (error) {
@@ -300,6 +302,8 @@ export class PluginManager {
 
     plugin.source = `https://github.com/${owner}/${repository}/archive/${branch}.zip`
 
+    plugin.isGrant = this.app.$store.getters['plugin/isGrant'](plugin.id)
+
     try {
       plugin.logo = await this.fetchLogo(plugin.logo)
     } catch (error) {
@@ -321,7 +325,7 @@ export class PluginManager {
     if (force || dayjs().isAfter(dayjs(this.app.$store.getters['plugin/lastFetched']).add(
       PLUGINS.updateInterval.value, PLUGINS.updateInterval.unit
     ))) {
-      requests.push(this.fetchPluginsFromAdapter(), this.fetchBlacklist(), this.fetchWhitelist())
+      requests.push(this.fetchPluginsFromAdapter(), this.fetchPluginsList())
     }
 
     await Promise.all(requests)
@@ -361,21 +365,13 @@ export class PluginManager {
     }
   }
 
-  async fetchBlacklist () {
-    try {
-      const { body } = await got(`${PLUGINS.blacklistUrl}?ts=${(new Date()).getTime()}`, { json: true })
-      this.app.$store.dispatch('plugin/setBlacklisted', { scope: 'global', plugins: body.plugins })
-    } catch (error) {
-      console.error(`Could not fetch blacklist from '${PLUGINS.blacklistUrl}: ${error.message}`)
-    }
-  }
-
-  async fetchWhitelist () {
+  async fetchPluginsList () {
     try {
-      const { body } = await got(`${PLUGINS.whitelistUrl}?ts=${(new Date()).getTime()}`, { json: true })
+      const { body } = await got(`${PLUGINS.pluginsUrl}?ts=${(new Date()).getTime()}`, { json: true })
       this.app.$store.dispatch('plugin/setWhitelisted', { scope: 'global', plugins: body.plugins })
+      this.app.$store.dispatch('plugin/setBlacklisted', { scope: 'global', plugins: body.blacklist })
     } catch (error) {
-      console.error(`Could not fetch whitelist from '${PLUGINS.whitelistUrl}: ${error.message}`)
+      console.error(`Could not fetch plugins from the list '${PLUGINS.pluginsUrl}: ${error.message}`)
     }
   }
 
@@ -389,6 +385,8 @@ export class PluginManager {
       throw new errors.PluginAlreadyLoadedError(pluginConfig.id)
     }
 
+    pluginConfig.isGrant = this.app.$store.getters['plugin/isGrant'](pluginConfig.id)
+
     try {
       pluginConfig.logo = fs.readFileSync(`${pluginPath}/logo.png`).toString('base64')
     } catch (error) {

src/renderer/store/modules/plugin.js

@@ -158,7 +158,15 @@ export default {
 
     isWhitelisted: (_, getters) => plugin => {
       if (Object.prototype.hasOwnProperty.call(getters.whitelisted.global, plugin.config.id)) {
-        return semver.lte(plugin.config.version, getters.whitelisted.global[plugin.config.id])
+        return semver.lte(plugin.config.version, getters.whitelisted.global[plugin.config.id].version)
+      }
+
+      return false
+    },
+
+    isGrant: (_, getters) => pluginId => {
+      if (Object.prototype.hasOwnProperty.call(getters.whitelisted.global, pluginId) && Object.prototype.hasOwnProperty.call(getters.whitelisted.global[pluginId], 'isGrant')) {
+        return getters.whitelisted.global[pluginId].isGrant
       }
 
       return false