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/auction/collateral/CollateralAuctionFlow.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="isStagingEnvironment ? 'SplitLayoutStagingContainer' : 'SplitLayoutContainer'">
+    <div :class="doShowBanner ? 'SplitLayoutBannerPrependedContainer' : 'SplitLayoutContainer'">
         <SplitLayout :step.sync="step">
             <template #step0>
                 <div v-if="isExplanationsShown" class="h-1/2">
@@ -216,8 +216,8 @@ export default Vue.extend({
             }
             return null;
         },
-        isStagingEnvironment(): boolean {
-            return !!process.env.STAGING_BANNER_URL;
+        doShowBanner(): boolean {
+            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
         },
         collateralVatBalance(): BigNumber | undefined {
             if (!this.collateralVatBalanceStore || !this.selectedAuction) {
@@ -273,7 +273,7 @@ export default Vue.extend({
     height: calc(100vh - 4rem);
 }
 
-.SplitLayoutStagingContainer {
+.SplitLayoutBannerPrependedContainer {
     margin-top: 2.3rem;
     height: calc(100vh - 6.3rem);
 }

frontend/components/auction/debt/DebtFlow.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="isStagingEnvironment ? 'SplitLayoutStagingContainer' : 'SplitLayoutContainer'">
+    <div :class="doShowBanner ? 'SplitLayoutBannerPrependedContainer' : 'SplitLayoutContainer'">
         <SplitLayout :step.sync="step">
             <template #step0>
                 <div v-if="isExplanationsShown" class="h-1/2">
@@ -185,8 +185,8 @@ export default Vue.extend({
         selectedAuctionActionState(): string | undefined {
             return this.auctionActionState[this.selectedAuctionId] || undefined;
         },
-        isStagingEnvironment(): boolean {
-            return !!process.env.STAGING_BANNER_URL;
+        doShowBanner(): boolean {
+            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
         },
         walletDai(): BigNumber | undefined {
             return this.walletBalances?.walletDAI || undefined;
@@ -235,7 +235,7 @@ export default Vue.extend({
     height: calc(100vh - 4rem);
 }
 
-.SplitLayoutStagingContainer {
+.SplitLayoutBannerPrependedContainer {
     margin-top: 2.3rem;
     height: calc(100vh - 6.3rem);
 }

frontend/components/auction/surplus/SurplusFlow.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="isStagingEnvironment ? 'SplitLayoutStagingContainer' : 'SplitLayoutContainer'">
+    <div :class="doShowBanner ? 'SplitLayoutBannerPrependedContainer' : 'SplitLayoutContainer'">
         <SplitLayout :step.sync="step">
             <template #step0>
                 <div v-if="isExplanationsShown" class="h-1/2">
@@ -190,8 +190,8 @@ export default Vue.extend({
         selectedAuctionActionState(): string | undefined {
             return this.auctionActionState[this.selectedAuctionId] || undefined;
         },
-        isStagingEnvironment(): boolean {
-            return !!process.env.STAGING_BANNER_URL;
+        doShowBanner(): boolean {
+            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
         },
         walletMKR(): BigNumber | undefined {
             return this.walletBalances?.walletMKR || undefined;
@@ -237,7 +237,7 @@ export default Vue.extend({
     height: calc(100vh - 4rem);
 }
 
-.SplitLayoutStagingContainer {
+.SplitLayoutBannerPrependedContainer {
     margin-top: 2.3rem;
     height: calc(100vh - 6.3rem);
 }

frontend/components/layout/Header.stories.js

@@ -37,28 +37,37 @@ 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 header', () => ({
         ...common,
         template: `<Header
-        type="unified" 
+        type="unified"
         :isExplanationsShown.sync="isExplanationsShown"
         :isStagingEnvironment="true"
         @update:isExplanationsShown="updateIsExplanationsShown"
         />`,
     }))
+    .add('With Production header', () => ({
+        ...common,
+        template: `<Header
+        type="unified"
+        :isExplanationsShown.sync="isExplanationsShown"
+        :productionBannerUrl="https://github.com"
+        @update:isExplanationsShown="updateIsExplanationsShown"
+        />`,
+    }))
     .add('Surplus Auctions Page', () => ({
         ...common,
         template: `<Header

frontend/components/layout/Header.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
         <StagingBanner v-if="stagingBannerUrl" :url="stagingBannerUrl" />
+        <ProductionBannerElectron v-if="productionBannerUrl" :url="productionBannerUrl" />
         <header class="bg-primary dark:bg-primary-dark">
             <nav class="flex items-center py-2 px-4 md:px-10">
                 <HeaderLogo :network="network" :page-name="pageName" />
@@ -54,6 +55,7 @@
 import Vue, { PropType } from 'vue';
 import { NetworkConfig } from 'auctions-core/src/types';
 import StagingBanner from './StagingBanner.vue';
+import ProductionBannerElectron from './ProductionBannerElectron.vue';
 import HeaderLogo from './HeaderLogo.vue';
 import BaseSwitch from '~/components/common/inputs/BaseSwitch.vue';
 import NetworkSelector from '~/components/layout/NetworkSelector.vue';
@@ -69,6 +71,7 @@ export default Vue.extend({
         BaseSwitch,
         NetworkSelector,
         WalletSelector,
+        ProductionBannerElectron,
     },
     props: {
         type: {
@@ -107,6 +110,10 @@ export default Vue.extend({
             type: String,
             default: undefined,
         },
+        productionBannerUrl: {
+            type: String,
+            default: undefined,
+        },
         networks: {
             type: Array as PropType<NetworkConfig[]>,
             default: () => [] as NetworkConfig[],

frontend/components/layout/ProductionBannerElectron.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="w-full py-2 text-center bg-yellow-400">
+        <h1>
+            You can now run the Unified Auctions UI locally as a Desktop application. Please see its release
+            <a class="underline" :href="url" target="_blank">{{ url }}</a> .
+        </h1>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+    name: 'ProductionHeaderElectrong',
+    props: {
+        url: {
+            type: String,
+            required: true,
+        },
+    },
+});
+</script>

frontend/components/vault/VaultFlow.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="isStagingEnvironment ? 'SplitLayoutStagingContainer' : 'SplitLayoutContainer'">
+    <div :class="doShowHeader ? 'SplitLayoutBannerPrependedContainer' : 'SplitLayoutContainer'">
         <SplitLayout :step.sync="step">
             <template #step0>
                 <div v-if="isExplanationsShown" class="h-1/2">
@@ -140,8 +140,8 @@ export default Vue.extend({
                 ) || null
             );
         },
-        isStagingEnvironment(): boolean {
-            return !!process.env.STAGING_BANNER_URL;
+        doShowHeader(): boolean {
+            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
         },
     },
     watch: {
@@ -183,7 +183,7 @@ export default Vue.extend({
     height: calc(100vh - 4rem);
 }
 
-.SplitLayoutStagingContainer {
+.SplitLayoutBannerPrependedContainer {
     margin-top: 2.3rem;
     height: calc(100vh - 6.3rem);
 }

frontend/containers/UnifiedContainer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="isStagingEnvironment ? 'UnifiedStagingContainer' : 'UnifiedContainer'">
+    <div :class="doShowHeader ? 'UnifiedHeaderPrependedContainer' : 'UnifiedContainer'">
         <UnifiedAuctionsView :is-explanations-shown.sync="isExplanationsShown" />
     </div>
 </template>
@@ -21,8 +21,8 @@ export default Vue.extend({
                 this.$store.dispatch('preferences/setExplanationsAction', newIsExplanationsShown);
             },
         },
-        isStagingEnvironment(): boolean {
-            return !!process.env.STAGING_BANNER_URL;
+        doShowHeader(): boolean {
+            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
         },
     },
 });
@@ -33,7 +33,7 @@ export default Vue.extend({
     min-height: calc(100vh - 9.8rem);
 }
 
-.UnifiedStagingContainer {
+.UnifiedHeaderPrependedContainer {
     margin-top: 2.3rem;
     min-height: calc(100vh - 12.1rem);
 }

frontend/layouts/default.vue

@@ -11,6 +11,7 @@
             :is-wallet-loading="isWalletLoading"
             :has-accepted-terms="hasAcceptedTerms"
             :staging-banner-url="stagingBannerURL"
+            :production-banner-url="productionBannerURL"
             :networks="networks"
             :is-changing-network="isChangingNetwork"
             @changeWalletType="changeWalletType"
@@ -136,6 +137,9 @@ export default Vue.extend({
         stagingBannerURL() {
             return process.env.STAGING_BANNER_URL;
         },
+        productionBannerURL() {
+            return process.env.PRODUCTION_BANNER_URL;
+        },
         pageName(): string {
             return this.$route?.name || '';
         },

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
     },