Show closing message only

src/index.scss

@@ -32,6 +32,20 @@ body {
   }
 }
 
+.containerCentered {
+  display: flex;
+  width: 740px;
+  height: 100vh;
+  margin: 0 auto;
+  position: relative;
+
+  @include media-breakpoint-down(lg) {
+    width: auto;
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+}
+
 
 // ----------- Scrollbar styling for webkit -----------
 ::-webkit-scrollbar {

src/index.scss.d.ts

@@ -1 +1,2 @@
 export const container: string;
+export const containerCentered: string;

src/index.tsx

@@ -2,16 +2,16 @@ import { isEqual } from 'lodash';
 import 'normalize.css';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+// tslint:disable:import-name
+import MediaQuery from 'react-responsive';
 import { combineLatest, Observable, of } from 'rxjs';
 import { distinctUntilChanged, startWith, switchMap, tap } from 'rxjs/internal/operators';
 import { map } from 'rxjs/operators';
-import { networks } from './blockchain/config';
 import { account$, networkId$ } from './blockchain/network';
 import { Web3Status, web3Status$ } from './blockchain/web3';
-import { LoadingState } from './landingPage/LandingPage';
-import { Main } from './Main';
+import * as styles from './index.scss';
+import { Banner } from './landingPage/Banner';
 import { connect } from './utils/connect';
-import { UnreachableCaseError } from './utils/UnreachableCaseError';
 
 interface Props {
   status: Web3Status;
@@ -23,38 +23,67 @@ interface Props {
 class App extends React.Component<Props> {
 
   public render() {
-    switch (this.props.status) {
-      case 'initializing':
-        return LoadingState.INITIALIZATION;
-      case 'missing':
-        return LoadingState.MISSING_PROVIDER;
-      case 'ready':
-      case 'readonly':
-        if (this.props.network !== undefined && !networks[this.props.network]) {
-          return LoadingState.UNSUPPORTED;
-        }
 
-        /*
-        * The way to present announcement before loading the app is:
-        * <Announcement
-        *     // shouldn't change with each component rendering
-        *     id="<unique_id">
-        *     // how many times it will be displayed
-        *     visibility="always | once"
-        *     //heading of the announcement
-        *     headline="string"
-        *     //the label of the button that user clicks to continue to next view
-        *     buttonLabel="string"
-        *     //this is the announcement itself
-        *     content={ string | React.ReactNode }
-        *     //what will be rendered after announcement being dismissed
-        *     nextView={<Main/>}
-        *     />
-        * */
-        return <Main/>;
-      default:
-        throw new UnreachableCaseError(this.props.status);
-    }
+    return (
+      <div className={styles.containerCentered}>
+      <Banner buttonLabel={
+        <a href="https://oasis.app/trade"
+           target="_blank"
+           rel="noreferrer noopener">
+          <MediaQuery maxWidth={824}>
+            {
+              (match: boolean) => match
+                ? 'Trade'
+                : 'Trade On Oasis'
+            }
+          </MediaQuery></a>}
+              content={
+                <span>
+                    {/*tslint:disable*/}
+                    Note: The Eth2Dai app has been shut down.
+                    <br/>
+                    <strong>Head to Oasis Trade where you now can trade multiple tokens.</strong>
+                  {/*tslint:enable*/}
+                  </span>
+              }
+              continue={
+                () => false
+              }/>
+      </div>
+    );
+
+    // switch (this.props.status) {
+    //   case 'initializing':
+    //     return LoadingState.INITIALIZATION;
+    //   case 'missing':
+    //     return LoadingState.MISSING_PROVIDER;
+    //   case 'ready':
+    //   case 'readonly':
+    //     if (this.props.network !== undefined && !networks[this.props.network]) {
+    //       return LoadingState.UNSUPPORTED;
+    //     }
+    //
+    //     /*
+    //     * The way to present announcement before loading the app is:
+    //     * <Announcement
+    //     *     // shouldn't change with each component rendering
+    //     *     id="<unique_id">
+    //     *     // how many times it will be displayed
+    //     *     visibility="always | once"
+    //     *     //heading of the announcement
+    //     *     headline="string"
+    //     *     //the label of the button that user clicks to continue to next view
+    //     *     buttonLabel="string"
+    //     *     //this is the announcement itself
+    //     *     content={ string | React.ReactNode }
+    //     *     //what will be rendered after announcement being dismissed
+    //     *     nextView={<Main/>}
+    //     *     />
+    //     * */
+    //     return <Main/>;
+    //   default:
+    //     throw new UnreachableCaseError(this.props.status);
+    // }
   }
 }
 

src/landingPage/Banner.scss

@@ -50,7 +50,7 @@
   line-height: 1.5;
   display: inline-block;
   text-align: left;
-  width: 80%;
+  width: 75%;
 }
 
 .pre {
@@ -85,14 +85,14 @@
 
 .btnPlaceholder {
   display: inline-flex;
-  width: 20%;
+  width: 25%;
   justify-content: flex-end;
 }
 
 .btn {
   font-size: 11px;
   font-weight: 600;
-  max-width: 140px;
+  max-width: 180px;
   padding: 0;
 
   @include button((