From a4c290c2dd7cfe35b41e57d2e1eb442b47d4acc7 Mon Sep 17 00:00:00 2001
From: KirillDogadin-std <59374892+KirillDogadin-std@users.noreply.github.com>
Date: Tue, 7 Feb 2023 09:46:21 +0100
Subject: [PATCH 01/11] feat: Banner for production

---
 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       | 22 +++++++++++++++++++
 frontend/components/vault/VaultFlow.vue       |  8 +++----
 frontend/containers/UnifiedContainer.vue      |  8 +++----
 frontend/layouts/default.vue                  |  4 ++++
 frontend/nuxt.config.js                       |  1 +
 11 files changed, 67 insertions(+), 23 deletions(-)
 create mode 100644 frontend/components/layout/ProductionBannerElectron.vue

diff --git a/frontend/README.md b/frontend/README.md
index a9eea1764..865ce5269 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 `STAGING_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 42a89f591..93709c46b 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 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
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..9b0f77b19
--- /dev/null
+++ b/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 an electron-packaged 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>
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 9f3c58119..d6fcd2cca 100644
--- a/frontend/layouts/default.vue
+++ b/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 || '';
         },
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
     },

From 1f0fe65c4dc31032d4de52f8e4a72d831d93dc36 Mon Sep 17 00:00:00 2001
From: KirillDogadin-std <59374892+KirillDogadin-std@users.noreply.github.com>
Date: Tue, 7 Feb 2023 09:50:15 +0100
Subject: [PATCH 02/11] wording

---
 frontend/components/layout/ProductionBannerElectron.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/layout/ProductionBannerElectron.vue b/frontend/components/layout/ProductionBannerElectron.vue
index 9b0f77b19..e2affa463 100644
--- a/frontend/components/layout/ProductionBannerElectron.vue
+++ b/frontend/components/layout/ProductionBannerElectron.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="w-full py-2 text-center bg-yellow-400">
         <h1>
-            You can now run the Unified Auctions UI locally as an electron-packaged application. Please see its release
+            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>

From 98272f1635213fccd8d964b7857ea8a3d34cc855 Mon Sep 17 00:00:00 2001
From: KirillDogadin-std <59374892+KirillDogadin-std@users.noreply.github.com>
Date: Tue, 7 Feb 2023 09:58:33 +0100
Subject: [PATCH 03/11] adjust readme

---
 frontend/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/README.md b/frontend/README.md
index 865ce5269..9c1258372 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -40,7 +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 `STAGING_BANNER_URL` as a link the electron app.
+- `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

From 3079caa2120db4e135b1735326690c3f52672b9e Mon Sep 17 00:00:00 2001
From: KirillDogadin-std <59374892+KirillDogadin-std@users.noreply.github.com>
Date: Tue, 7 Feb 2023 10:41:00 +0100
Subject: [PATCH 04/11] adjust story

---
 frontend/components/layout/Header.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/layout/Header.stories.js b/frontend/components/layout/Header.stories.js
index 93709c46b..62aa8123b 100644
--- a/frontend/components/layout/Header.stories.js
+++ b/frontend/components/layout/Header.stories.js
@@ -64,7 +64,7 @@ storiesOf('Layout/Header', module)
         template: `<Header
         type="unified"
         :isExplanationsShown.sync="isExplanationsShown"
-        :productionBannerUrl="https://github.com"
+        productionBannerUrl='https://github.com'
         @update:isExplanationsShown="updateIsExplanationsShown"
         />`,
     }))

From 14d4ecc4d72e9c9de113e9f2d930cf75003a8108 Mon Sep 17 00:00:00 2001
From: Abdelrhman Farag <aomafarag@gmail.com>
Date: Tue, 7 Mar 2023 16:27:10 +0100
Subject: [PATCH 05/11] Revert some changes in preparation for refactoring

---
 .../auction/collateral/CollateralAuctionFlow.vue         | 8 ++++----
 frontend/components/auction/debt/DebtFlow.vue            | 8 ++++----
 frontend/components/auction/surplus/SurplusFlow.vue      | 8 ++++----
 frontend/components/layout/Header.stories.js             | 9 ---------
 frontend/components/layout/Header.vue                    | 7 -------
 frontend/components/vault/VaultFlow.vue                  | 8 ++++----
 frontend/containers/UnifiedContainer.vue                 | 8 ++++----
 frontend/layouts/default.vue                             | 4 ----
 8 files changed, 20 insertions(+), 40 deletions(-)

diff --git a/frontend/components/auction/collateral/CollateralAuctionFlow.vue b/frontend/components/auction/collateral/CollateralAuctionFlow.vue
index ce89007fc..34181bcfd 100644
--- a/frontend/components/auction/collateral/CollateralAuctionFlow.vue
+++ b/frontend/components/auction/collateral/CollateralAuctionFlow.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="doShowBanner ? 'SplitLayoutBannerPrependedContainer' : 'SplitLayoutContainer'">
+    <div :class="isStagingEnvironment ? 'SplitLayoutStagingContainer' : '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;
         },
-        doShowBanner(): boolean {
-            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
+        isStagingEnvironment(): boolean {
+            return !!process.env.STAGING_BANNER_URL;
         },
         collateralVatBalance(): BigNumber | undefined {
             if (!this.collateralVatBalanceStore || !this.selectedAuction) {
@@ -273,7 +273,7 @@ export default Vue.extend({
     height: calc(100vh - 4rem);
 }
 
-.SplitLayoutBannerPrependedContainer {
+.SplitLayoutStagingContainer {
     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 bec24c434..d733e131f 100644
--- a/frontend/components/auction/debt/DebtFlow.vue
+++ b/frontend/components/auction/debt/DebtFlow.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="doShowBanner ? 'SplitLayoutBannerPrependedContainer' : 'SplitLayoutContainer'">
+    <div :class="isStagingEnvironment ? 'SplitLayoutStagingContainer' : '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;
         },
-        doShowBanner(): boolean {
-            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
+        isStagingEnvironment(): boolean {
+            return !!process.env.STAGING_BANNER_URL;
         },
         walletDai(): BigNumber | undefined {
             return this.walletBalances?.walletDAI || undefined;
@@ -235,7 +235,7 @@ export default Vue.extend({
     height: calc(100vh - 4rem);
 }
 
-.SplitLayoutBannerPrependedContainer {
+.SplitLayoutStagingContainer {
     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 b97baf0fa..c69c8fa9c 100644
--- a/frontend/components/auction/surplus/SurplusFlow.vue
+++ b/frontend/components/auction/surplus/SurplusFlow.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="doShowBanner ? 'SplitLayoutBannerPrependedContainer' : 'SplitLayoutContainer'">
+    <div :class="isStagingEnvironment ? 'SplitLayoutStagingContainer' : '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;
         },
-        doShowBanner(): boolean {
-            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
+        isStagingEnvironment(): boolean {
+            return !!process.env.STAGING_BANNER_URL;
         },
         walletMKR(): BigNumber | undefined {
             return this.walletBalances?.walletMKR || undefined;
@@ -237,7 +237,7 @@ export default Vue.extend({
     height: calc(100vh - 4rem);
 }
 
-.SplitLayoutBannerPrependedContainer {
+.SplitLayoutStagingContainer {
     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 ece4573dc..a83481912 100644
--- a/frontend/components/layout/Header.stories.js
+++ b/frontend/components/layout/Header.stories.js
@@ -59,15 +59,6 @@ storiesOf('Layout/Header', module)
         @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 a704860f0..f08bd9a6e 100644
--- a/frontend/components/layout/Header.vue
+++ b/frontend/components/layout/Header.vue
@@ -1,7 +1,6 @@
 <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" />
@@ -55,7 +54,6 @@
 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';
@@ -71,7 +69,6 @@ export default Vue.extend({
         BaseSwitch,
         NetworkSelector,
         WalletSelector,
-        ProductionBannerElectron,
     },
     props: {
         type: {
@@ -110,10 +107,6 @@ 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/vault/VaultFlow.vue b/frontend/components/vault/VaultFlow.vue
index e4303c6d0..29084488a 100644
--- a/frontend/components/vault/VaultFlow.vue
+++ b/frontend/components/vault/VaultFlow.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="doShowHeader ? 'SplitLayoutBannerPrependedContainer' : 'SplitLayoutContainer'">
+    <div :class="isStagingEnvironment ? 'SplitLayoutStagingContainer' : 'SplitLayoutContainer'">
         <SplitLayout :step.sync="step">
             <template #step0>
                 <div v-if="isExplanationsShown" class="h-1/2">
@@ -140,8 +140,8 @@ export default Vue.extend({
                 ) || null
             );
         },
-        doShowHeader(): boolean {
-            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
+        isStagingEnvironment(): boolean {
+            return !!process.env.STAGING_BANNER_URL;
         },
     },
     watch: {
@@ -183,7 +183,7 @@ export default Vue.extend({
     height: calc(100vh - 4rem);
 }
 
-.SplitLayoutBannerPrependedContainer {
+.SplitLayoutStagingContainer {
     margin-top: 2.3rem;
     height: calc(100vh - 6.3rem);
 }
diff --git a/frontend/containers/UnifiedContainer.vue b/frontend/containers/UnifiedContainer.vue
index bd791d0a3..75c03a52e 100644
--- a/frontend/containers/UnifiedContainer.vue
+++ b/frontend/containers/UnifiedContainer.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="doShowHeader ? 'UnifiedHeaderPrependedContainer' : 'UnifiedContainer'">
+    <div :class="isStagingEnvironment ? 'UnifiedStagingContainer' : 'UnifiedContainer'">
         <UnifiedAuctionsView :is-explanations-shown.sync="isExplanationsShown" />
     </div>
 </template>
@@ -21,8 +21,8 @@ export default Vue.extend({
                 this.$store.dispatch('preferences/setExplanationsAction', newIsExplanationsShown);
             },
         },
-        doShowHeader(): boolean {
-            return !!process.env.STAGING_BANNER_URL || !!process.env.PRODUCTION_BANNER_URL;
+        isStagingEnvironment(): boolean {
+            return !!process.env.STAGING_BANNER_URL;
         },
     },
 });
@@ -33,7 +33,7 @@ export default Vue.extend({
     min-height: calc(100vh - 9.8rem);
 }
 
-.UnifiedHeaderPrependedContainer {
+.UnifiedStagingContainer {
     margin-top: 2.3rem;
     min-height: calc(100vh - 12.1rem);
 }
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 3a77e36fe..6a78358d3 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -12,7 +12,6 @@
             :is-wallet-loading="isWalletLoading"
             :has-accepted-terms="hasAcceptedTerms"
             :staging-banner-url="stagingBannerURL"
-            :production-banner-url="productionBannerURL"
             :networks="networks"
             :is-changing-network="isChangingNetwork"
             @changeWalletType="changeWalletType"
@@ -140,9 +139,6 @@ export default Vue.extend({
         stagingBannerURL() {
             return process.env.STAGING_BANNER_URL;
         },
-        productionBannerURL() {
-            return process.env.PRODUCTION_BANNER_URL;
-        },
         pageName(): string {
             return this.$route?.name || '';
         },

From 0a594d499cbef6c18d19f472f045f39fc61474fb Mon Sep 17 00:00:00 2001
From: Abdelrhman Farag <aomafarag@gmail.com>
Date: Tue, 7 Mar 2023 16:44:13 +0100
Subject: [PATCH 06/11] Add new case for production

---
 frontend/components/layout/ElectronUpdateBanner.vue   | 7 +++++++
 frontend/containers/ElectronUpdateBannerContainer.vue | 6 ++++++
 2 files changed, 13 insertions(+)

diff --git a/frontend/components/layout/ElectronUpdateBanner.vue b/frontend/components/layout/ElectronUpdateBanner.vue
index e2898e3b1..23dfe3333 100644
--- a/frontend/components/layout/ElectronUpdateBanner.vue
+++ b/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">
diff --git a/frontend/containers/ElectronUpdateBannerContainer.vue b/frontend/containers/ElectronUpdateBannerContainer.vue
index c134b7730..fa2ce9179 100644
--- a/frontend/containers/ElectronUpdateBannerContainer.vue
+++ b/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: '',
+            };
         }
     },
 });

From 4fda81ba7c0d8a36a7762d8f42b0c96a05e2411d Mon Sep 17 00:00:00 2001
From: Abdelrhman Farag <aomafarag@gmail.com>
Date: Tue, 7 Mar 2023 16:46:04 +0100
Subject: [PATCH 07/11] Remove unnecessary component

---
 .../layout/ProductionBannerElectron.vue       | 22 -------------------
 1 file changed, 22 deletions(-)
 delete mode 100644 frontend/components/layout/ProductionBannerElectron.vue

diff --git a/frontend/components/layout/ProductionBannerElectron.vue b/frontend/components/layout/ProductionBannerElectron.vue
deleted file mode 100644
index e2affa463..000000000
--- a/frontend/components/layout/ProductionBannerElectron.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<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>

From 865292fd34a1dcc770d000a459fa48126154b612 Mon Sep 17 00:00:00 2001
From: Abdelrhman Farag <aomafarag@gmail.com>
Date: Tue, 7 Mar 2023 17:35:28 +0100
Subject: [PATCH 08/11] Revert commits after ee72532

---
 .../collateral/CollateralAuctionFlow.vue      |  8 +++----
 frontend/components/auction/debt/DebtFlow.vue |  8 +++----
 .../auction/surplus/SurplusFlow.vue           |  8 +++----
 .../layout/ElectronUpdateBanner.vue           |  7 ------
 frontend/components/layout/Header.stories.js  |  9 ++++++++
 frontend/components/layout/Header.vue         |  7 ++++++
 .../layout/ProductionBannerElectron.vue       | 22 +++++++++++++++++++
 frontend/components/vault/VaultFlow.vue       |  8 +++----
 .../ElectronUpdateBannerContainer.vue         |  6 -----
 frontend/containers/UnifiedContainer.vue      |  8 +++----
 frontend/layouts/default.vue                  |  4 ++++
 11 files changed, 62 insertions(+), 33 deletions(-)
 create mode 100644 frontend/components/layout/ProductionBannerElectron.vue

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/ElectronUpdateBanner.vue b/frontend/components/layout/ElectronUpdateBanner.vue
index 23dfe3333..e2898e3b1 100644
--- a/frontend/components/layout/ElectronUpdateBanner.vue
+++ b/frontend/components/layout/ElectronUpdateBanner.vue
@@ -13,13 +13,6 @@
             >. 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">
diff --git a/frontend/components/layout/Header.stories.js b/frontend/components/layout/Header.stories.js
index a83481912..ece4573dc 100644
--- a/frontend/components/layout/Header.stories.js
+++ b/frontend/components/layout/Header.stories.js
@@ -59,6 +59,15 @@ storiesOf('Layout/Header', module)
         @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..e2affa463
--- /dev/null
+++ b/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>
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/ElectronUpdateBannerContainer.vue b/frontend/containers/ElectronUpdateBannerContainer.vue
index fa2ce9179..c134b7730 100644
--- a/frontend/containers/ElectronUpdateBannerContainer.vue
+++ b/frontend/containers/ElectronUpdateBannerContainer.vue
@@ -27,12 +27,6 @@ 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: '',
-            };
         }
     },
 });
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 || '';
         },

From c61ec4b61ef2a412f1794ed55ed1f8384c09b0a7 Mon Sep 17 00:00:00 2001
From: Abdelrhman Farag <aomafarag@gmail.com>
Date: Tue, 7 Mar 2023 17:42:33 +0100
Subject: [PATCH 09/11] Use Alert banner

---
 .../layout/ProductionBannerElectron.vue           | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/components/layout/ProductionBannerElectron.vue b/frontend/components/layout/ProductionBannerElectron.vue
index e2affa463..a274c20ef 100644
--- a/frontend/components/layout/ProductionBannerElectron.vue
+++ b/frontend/components/layout/ProductionBannerElectron.vue
@@ -1,17 +1,20 @@
 <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>
+    <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,

From d491b1c5eb9c59d6326f321e40a7cc6e942508d0 Mon Sep 17 00:00:00 2001
From: Abdelrhman Farag <aomafarag@gmail.com>
Date: Tue, 7 Mar 2023 18:05:24 +0100
Subject: [PATCH 10/11] Add env var to Dockerfile and .drone

---
 .drone.yml          | 12 +++++++-----
 frontend/Dockerfile |  2 ++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/.drone.yml b/.drone.yml
index b926d8747..0c26718e5 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
@@ -214,8 +216,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 +236,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 +301,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

From 93a103c84d3190b875ba3e9408a79b0a75becd69 Mon Sep 17 00:00:00 2001
From: Valia Fetisov <contact@valiafetisov.com>
Date: Tue, 7 Mar 2023 18:35:09 +0100
Subject: [PATCH 11/11] add PRODUCTION_BANNER_URL to the
 publish-frontend-makerdao-on-tag step

---
 .drone.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.drone.yml b/.drone.yml
index 0c26718e5..fe25c4ab2 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -132,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: