Sunset

package.json

@@ -145,6 +145,6 @@
     "webpack": "4.43.0"
   },
   "engines": {
-    "node": "^10 || ^12"
+    "node": "^10 || ^12 || ^16"
   }
 }

source/features/i18n/translations/de.json

@@ -95,7 +95,10 @@
   },
   "header": {
     "epochsBlocks": "Epochen & Blöcke",
-    "explorer": "Blockchain Explorer"
+    "explorer": "Blockchain Explorer",
+    "sunsetPre": "Dieser Explorer wird bald außer Betrieb genommen. Probier jetzt die Beta-Version des neuen ",
+    "sunsetPost": " aus.",
+    "cardanoExplorer": "Cardano Explorers"
   },
   "index": {
     "pageTitle": "$t(productTitle)"

source/features/i18n/translations/en.json

@@ -95,7 +95,10 @@
   },
   "header": {
     "epochsBlocks": "Epochs & Blocks",
-    "explorer": "Blockchain Explorer"
+    "explorer": "Blockchain Explorer",
+    "sunsetPre": "We’ll be sunsetting this Explorer soon. Try out the beta of the new ",
+    "sunsetPost": ".",
+    "cardanoExplorer": "Cardano Explorer"
   },
   "index": {
     "pageTitle": "$t(productTitle)"

source/features/i18n/translations/ja.json

@@ -95,7 +95,10 @@
   },
   "header": {
     "epochsBlocks": "エポックおよびブロック",
-    "explorer": "ブロックチェーンエクスプローラー"
+    "explorer": "ブロックチェーンエクスプローラー",
+    "sunsetPre": "こちらのエクスプローラーのサービスはまもなく終了いたします。新しい",
+    "sunsetPost": "（カルダノエクスプローラー）のベータ版をお試しください。",
+    "cardanoExplorer": "Cardano Explorer"
   },
   "index": {
     "pageTitle": "$t(productTitle)"

source/widgets/language-switcher/LanguageSwitcher.module.scss

@@ -7,7 +7,7 @@
   height: 30px;
   position: absolute;
   right: 61px;
-  top: 53px;
+  top: 5rem;
   min-width: 90px;
   z-index: 9999;
 

source/widgets/layout/Header.module.scss

@@ -3,6 +3,40 @@
   width: 100%;
 
   &.enlargedHeaderContainer {
+    .hiddenNoticeContainer {
+      display: none;
+    }
+
+    .noticeContainer {
+      background: var(--secondary-highlight-color);
+      color: var(--primary-bg-color);
+      padding: 1rem;
+      margin: 1rem 0;
+      width: 100%;
+      text-align: center;
+
+      @media (min-width: 1049px) {
+        width: 100%;
+      }
+
+      @media (max-width: 768px) {
+        width: calc(100vw - 5rem);
+      }
+
+      a {
+        color: #fff !important;
+        text-decoration: underline;
+      }
+
+      .closeButton {
+        cursor: pointer;
+        float:right;
+        display:inline-block;
+        padding:2px 5px;
+        margin: 1px;
+      }
+    }
+
     .brandType {
       flex-direction: column;
 

source/widgets/layout/Header.tsx

@@ -1,13 +1,15 @@
 import cx from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useState } from 'react';
 import { BrandType, CardanoEra, CardanoNetwork } from '../../constants';
 import { environment } from '../../environment';
 import { useI18nFeature } from '../../features/i18n/context';
 import { useNavigationFeatureOptionally } from '../../features/navigation';
 import { LocalizedLink } from '../../features/navigation/ui/LocalizedLink';
 import { SearchBar } from '../../features/search/ui/SearchBar';
 import CardanoLogo from '../../public/assets/images/header/cardano-logo.svg';
+import DeleteButton from '../../public/assets/images/delete.svg';
 import styles from './Header.module.scss';
 
 export interface IHeaderProps {
@@ -16,6 +18,7 @@ export interface IHeaderProps {
 }
 
 export const Header = observer((props: IHeaderProps) => {
+  const [open, setOpen] = useState(true)
   const { translate } = useI18nFeature().store;
   const { brandType } = props;
   const navigation = useNavigationFeatureOptionally();
@@ -47,8 +50,19 @@ export const Header = observer((props: IHeaderProps) => {
     styles.triangleSign,
     stakePoolTriangleStyle,
   ]);
+
   return (
     <header className={headerContainerStyles}>
+      <div className={open ? styles.noticeContainer : styles.hiddenNoticeContainer}>
+        <button className={styles.closeButton} onClick={() => setOpen(!open)}><DeleteButton/></button>
+        <p>
+          {translate('header.sunsetPre')}
+          <a href="https://beta.explorer.cardano.org/en/">
+            <span className={styles.cardanoExplorer}>{translate("header.cardanoExplorer")}</span>
+          </a>
+          {translate('header.sunsetPost')}
+        </p>
+      </div>
       <div className={styles.contentContainer}>
         <div className={styles.brandType}>
           <div className={styles.logoContainer}>