feat: Banner for production

frontend/README.md

@@ -40,6 +40,7 @@ Help on both things is given in the linked resources above.
 - `PRODUCTION_DOMAIN`: (optional) Required in order to enable [plausible.io statistics](https://github.com/moritzsternemann/vue-plausible#configuration). In addition to adding it here, the domain (e.g. `auctions.makerdao.network`) should also be registered within [plausible dashboard](https://plausible.io/).
 - `CONTACT_EMAIL`: (optional) Required in order to display contact link in the footer. This email should be able to accept and manage bug reports and other contact requests.
 - `STAGING_BANNER_URL`: (optional) When set a banner will be displayed, warning the user that they are using a staging version. The text will use `STAGING_BANNER_URL` as a link to production UI.
+- `PRODUCTION_BANNER_URL`: (optional) When set a banner will be displayed, notifying the user that they can also use an electron app. The text will use `PRODUCTION_BANNER_URL` as a link the electron app.
 - `MAX_PRIORITY_FEE_PER_GAS_WEI`: (optional, default can be found in core/src/gas.ts) – [EIP-1559](https://eips.ethereum.org/EIPS/eip-1559) `max_priority_fee_per_gas` value
 - `HEAPIO_ID`: (optional) [HeapIO analytics](https://heapanalytics.com/) Project's Environment ID. Required for tracking analytics.
 - `FRONTEND_ORIGIN`: (optional, default empty) – public url of the frontend, eg `https://unified-auctions.makerdao.com`. Used to correctly specify open graph meta tags

frontend/components/layout/ElectronUpdateBanner.vue

@@ -13,6 +13,13 @@
             >. Current version: v{{ version }}.
         </template>
     </Alert>
+    <Alert v-else-if="status === 'production'" type="info" show-icon banner closable class="text-center">
+        <template #message>
+            You can now run the Unified Auctions UI locally as a desktop application. Please see its release at
+            <a class="underline" :href="url" target="_blank">{{ url }}</a
+            >.
+        </template>
+    </Alert>
 </template>
 
 <script lang="ts">

frontend/components/layout/Header.stories.js

@@ -37,23 +37,23 @@ storiesOf('Layout/Header', module)
     .add('Unified Auctions Page', () => ({
         ...common,
         template: `<Header
-        type="unified" 
+        type="unified"
         :isExplanationsShown.sync="isExplanationsShown"
         @update:isExplanationsShown="updateIsExplanationsShown"
         />`,
     }))
     .add('Minimal', () => ({
         ...common,
         template: `<Header
-        type="minimal" 
+        type="minimal"
         :isExplanationsShown.sync="isExplanationsShown"
         @update:isExplanationsShown="updateIsExplanationsShown"
         />`,
     }))
     .add('With Staging Banner', () => ({
         ...common,
         template: `<Header
-        type="unified" 
+        type="unified"
         :isExplanationsShown.sync="isExplanationsShown"
         stagingBannerUrl="https://example.com/"
         @update:isExplanationsShown="updateIsExplanationsShown"

frontend/containers/ElectronUpdateBannerContainer.vue

@@ -27,6 +27,12 @@ export default Vue.extend({
                 // should never be the case
                 message.error(`Cannot check for updates for unknown reason`);
             }
+        } else if (process.env.PRODUCTION_BANNER_URL) {
+            this.result = {
+                status: 'production',
+                url: process.env.PRODUCTION_BANNER_URL,
+                version: '',
+            };
         }
     },
 });

frontend/nuxt.config.js

@@ -24,6 +24,7 @@ export default {
         CONTACT_EMAIL: process.env.CONTACT_EMAIL || undefined,
         GITHUB_URL: pkg.repository.url,
         STAGING_BANNER_URL: process.env.STAGING_BANNER_URL || undefined,
+        PRODUCTION_BANNER_URL: process.env.PRODUCTION_BANNER_URL || undefined,
         HEAPIO_ID: process.env.HEAPIO_ID || undefined,
         APPLICATION_VERSION: uuidv4(), // hardcoded this during build
     },