From 688746941cc68d5379c532838c786210ac39e620 Mon Sep 17 00:00:00 2001
From: KirillDogadin-std <59374892+KirillDogadin-std@users.noreply.github.com>
Date: Tue, 7 Mar 2023 18:47:30 +0100
Subject: [PATCH] feat: Production banner to advertise electron app (#583)

Co-authored-by: Abdelrhman Farag <aomafarag@gmail.com>
Co-authored-by: Valia Fetisov <contact@valiafetisov.com>
---
 .drone.yml                                    | 14 +++++++----
 frontend/Dockerfile                           |  2 ++
 frontend/README.md                            |  1 +
 .../collateral/CollateralAuctionFlow.vue      |  8 +++---
 frontend/components/auction/debt/DebtFlow.vue |  8 +++---
 .../auction/surplus/SurplusFlow.vue           |  8 +++---
 frontend/components/layout/Header.stories.js  | 15 ++++++++---
 frontend/components/layout/Header.vue         |  7 ++++++
 .../layout/ProductionBannerElectron.vue       | 25 +++++++++++++++++++
 frontend/components/vault/VaultFlow.vue       |  8 +++---
 frontend/containers/UnifiedContainer.vue      |  8 +++---
 frontend/layouts/default.vue                  |  4 +++
 frontend/nuxt.config.js                       |  1 +
 13 files changed, 81 insertions(+), 28 deletions(-)
 create mode 100644 frontend/components/layout/ProductionBannerElectron.vue

diff --git a/.drone.yml b/.drone.yml
index b926d8747..fe25c4ab2 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -22,6 +22,8 @@ data:
           value_from_secret: auction-ui/main.auction-ui.k8s.sidestream.tech/frontend/contact_email
         - key: STAGING_BANNER_URL
           value_from_secret: auction-ui/main.auction-ui.k8s.sidestream.tech/frontend/staging_banner_url
+        - key: PRODUCTION_BANNER_URL
+          value_from_secret: auction-ui/main.auction-ui.k8s.sidestream.tech/frontend/production_banner_url
         - key: HEAPIO_ID
           value_from_secret: auction-ui/main.auction-ui.k8s.sidestream.tech/frontend/heapio_id
         - key: FRONTEND_ORIGIN
@@ -130,6 +132,8 @@ data:
           value_from_secret: auction-ui/production.auction-ui.k8s.sidestream.tech/frontend/heapio_id
         - key: FRONTEND_ORIGIN
           value_from_secret: auction-ui/production.auction-ui.k8s.sidestream.tech/frontend/frontend_origin
+        - key: PRODUCTION_BANNER_URL
+          value_from_secret: auction-ui/main.auction-ui.k8s.sidestream.tech/frontend/production_banner_url
       tags_to_cache_from:
         - "main"
       trigger:
@@ -214,8 +218,8 @@ data:
         aws_target_eks_cluster_name: eks-cluster-sidestream
         aws_ssm_path_to_base64_encoded_secrets_yaml: auction-ui/secrets.yaml
         value_files:
-        - values.yaml
-        - values.override_main.auction-ui.k8s.sidestream.tech.yaml
+          - values.yaml
+          - values.override_main.auction-ui.k8s.sidestream.tech.yaml
         target_namespace: "auction-ui-main"
         release_name: "auction-ui"
         values_to_set:
@@ -234,8 +238,8 @@ data:
         aws_target_eks_cluster_name: eks-cluster-sidestream
         aws_ssm_path_to_base64_encoded_secrets_yaml: auction-ui/secrets.yaml
         value_files:
-        - values.yaml
-        - values.override_unified-auctions.makerdao.com.yaml
+          - values.yaml
+          - values.override_unified-auctions.makerdao.com.yaml
         target_namespace: "auction-ui-production"
         release_name: "auction-ui"
         values_to_set:
@@ -299,7 +303,7 @@ data:
             - npm run test
 
       services:
-        - name: hardhat-service  # named with 'service' to avoid duplication with the default value
+        - name: hardhat-service # named with 'service' to avoid duplication with the default value
           image: ghcr.io/sidestream-tech/unified-auctions-ui/core-hardhat:pr-${DRONE_PULL_REQUEST}
           expose: 8545
 
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index d1c9c1d9e..78a0d5cb9 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -44,6 +44,8 @@ ARG CONTACT_EMAIL
 ENV CONTACT_EMAIL=${CONTACT_EMAIL}
 ARG STAGING_BANNER_URL
 ENV STAGING_BANNER_URL=${STAGING_BANNER_URL}
+ARG PRODUCTION_BANNER_URL
+ENV PRODUCTION_BANNER_URL=${PRODUCTION_BANNER_URL}
 ARG HEAPIO_ID
 ENV HEAPIO_ID=${HEAPIO_ID}
 ARG FRONTEND_ORIGIN
diff --git a/frontend/README.md b/frontend/README.md
index a9eea1764..9c1258372 100644
--- a/frontend/README.md
+++ b/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
diff --git a/frontend/components/auction/collateral/CollateralAuctionFlow.vue b/frontend/components/auction/collateral/CollateralAuctionFlow.vue
index 34181bcfd..ce89007fc 100644
--- a/frontend/components/auction/collateral/CollateralAuctionFlow.vue
+++ b/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);
 }
diff --git a/frontend/components/auction/debt/DebtFlow.vue b/frontend/components/auction/debt/DebtFlow.vue
index d733e131f..bec24c434 100644
--- a/frontend/components/auction/debt/DebtFlow.vue
+++ b/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);
 }
diff --git a/frontend/components/auction/surplus/SurplusFlow.vue b/frontend/components/auction/surplus/SurplusFlow.vue
index c69c8fa9c..b97baf0fa 100644
--- a/frontend/components/auction/surplus/SurplusFlow.vue
+++ b/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);
 }
diff --git a/frontend/components/layout/Header.stories.js b/frontend/components/layout/Header.stories.js
index 46f87874e..ece4573dc 100644
--- a/frontend/components/layout/Header.stories.js
+++ b/frontend/components/layout/Header.stories.js
@@ -37,7 +37,7 @@ storiesOf('Layout/Header', module)
     .add('Unified Auctions Page', () => ({
         ...common,
         template: `<Header
-        type="unified" 
+        type="unified"
         :isExplanationsShown.sync="isExplanationsShown"
         @update:isExplanationsShown="updateIsExplanationsShown"
         />`,
@@ -45,7 +45,7 @@ storiesOf('Layout/Header', module)
     .add('Minimal', () => ({
         ...common,
         template: `<Header
-        type="minimal" 
+        type="minimal"
         :isExplanationsShown.sync="isExplanationsShown"
         @update:isExplanationsShown="updateIsExplanationsShown"
         />`,
@@ -53,12 +53,21 @@ storiesOf('Layout/Header', module)
     .add('With Staging Banner', () => ({
         ...common,
         template: `<Header
-        type="unified" 
+        type="unified"
         :isExplanationsShown.sync="isExplanationsShown"
         stagingBannerUrl="https://example.com/"
         @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
diff --git a/frontend/components/layout/Header.vue b/frontend/components/layout/Header.vue
index f08bd9a6e..a704860f0 100644
--- a/frontend/components/layout/Header.vue
+++ b/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[],
diff --git a/frontend/components/layout/ProductionBannerElectron.vue b/frontend/components/layout/ProductionBannerElectron.vue
new file mode 100644
index 000000000..a274c20ef
--- /dev/null
+++ b/frontend/components/layout/ProductionBannerElectron.vue
@@ -0,0 +1,25 @@
+<template>
+    <Alert 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">
+import Vue from 'vue';
+import { Alert } from 'ant-design-vue';
+
+export default Vue.extend({
+    name: 'ProductionHeaderElectrong',
+    components: { Alert },
+    props: {
+        url: {
+            type: String,
+            required: true,
+        },
+    },
+});
+</script>
diff --git a/frontend/components/vault/VaultFlow.vue b/frontend/components/vault/VaultFlow.vue
index 29084488a..e4303c6d0 100644
--- a/frontend/components/vault/VaultFlow.vue
+++ b/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);
 }
diff --git a/frontend/containers/UnifiedContainer.vue b/frontend/containers/UnifiedContainer.vue
index 75c03a52e..bd791d0a3 100644
--- a/frontend/containers/UnifiedContainer.vue
+++ b/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);
 }
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 6a78358d3..3a77e36fe 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -12,6 +12,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"
@@ -139,6 +140,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 || '';
         },
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index aaf313f0c..c526ac8a0 100644
--- a/frontend/nuxt.config.js
+++ b/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
     },