Merge pull request #491 from ergolabs/dev

Release 2.0.4

src/applicationConfig.ts

@@ -19,6 +19,7 @@ interface NetworkConfig {
 }
 
 interface ApplicationConfig {
+  readonly cardanoMaintenance: boolean;
   readonly reCaptchaKey: string;
   readonly networksSettings: Dictionary<NetworkConfig>;
   readonly social: {
@@ -40,6 +41,7 @@ interface ApplicationConfig {
 }
 
 export const applicationConfig: ApplicationConfig = {
+  cardanoMaintenance: true,
   reCaptchaKey: '6LeUJ8YfAAAAAMYIqGvtOmJGLeJtCSv6FBH_5sA3',
   requestRetryCount: 3,
   networksSettings: {

src/components/Header/Header.less

@@ -8,6 +8,10 @@
   justify-content: space-between;
   transition: transform .3s;
 
+  &_maintenance {
+    top: 30px;
+  }
+
   &__wrapper {
     position: relative;
     top: 0;

src/components/Header/Header.tsx

@@ -4,10 +4,12 @@ import cn from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { isBrowser } from 'react-device-detect';
 
+import { applicationConfig } from '../../applicationConfig';
 import { useObservable } from '../../common/hooks/useObservable';
 import { useAssetsBalance } from '../../gateway/api/assetBalance';
 import { useNetworkAsset } from '../../gateway/api/networkAsset';
 import { selectedWalletState$ } from '../../gateway/api/wallets';
+import { useSelectedNetwork } from '../../gateway/common/network';
 import { settings$ } from '../../gateway/settings/settings';
 import { WalletState } from '../../network/common/Wallet';
 import { AppLogo } from '../common/AppLogo/AppLogo';
@@ -24,6 +26,7 @@ import { NetworkDropdown } from './NetworkDropdown/NetworkDropdown';
 export const Header: React.FC = () => {
   const [settings] = useObservable(settings$);
   const [balance, isBalanceLoading] = useAssetsBalance();
+  const [selectedNetwork] = useSelectedNetwork();
   const [networkAsset] = useNetworkAsset();
   const [walletState] = useObservable(selectedWalletState$);
   const [hidden, setHidden] = useState(false);
@@ -46,7 +49,14 @@ export const Header: React.FC = () => {
   }, []);
 
   return (
-    <header className={cn('header', { header_hidden: hidden })}>
+    <header
+      className={cn('header', {
+        header_hidden: hidden,
+        header_maintenance:
+          applicationConfig.cardanoMaintenance &&
+          selectedNetwork.name === 'cardano',
+      })}
+    >
       <div className="header__wrapper">
         <div className="header__left">
           <AppLogo isNoWording />

src/components/common/Layout/CardanoMaintenance/CardanoMaintenance.tsx

@@ -0,0 +1,33 @@
+import { Trans } from '@lingui/macro';
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { applicationConfig } from '../../../../applicationConfig';
+import { Flex } from '../../../../ergodex-cdk';
+import { IsCardano } from '../../../IsCardano/IsCardano';
+
+export interface CardanoMaintenanceProps {
+  readonly className?: string;
+}
+
+const _CardanoMaintenance: FC<CardanoMaintenanceProps> = ({ className }) => (
+  <IsCardano>
+    {applicationConfig.cardanoMaintenance && (
+      <Flex className={className} align="center" justify="center">
+        <Trans>
+          Cardano testnet is under maintenance. Some operations may not work as
+          expected. We are working on it.
+        </Trans>
+      </Flex>
+    )}
+  </IsCardano>
+);
+
+export const CardanoMaintenance = styled(_CardanoMaintenance)`
+  height: 30px;
+  background: #177ddc;
+  color: #dbdbdb;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+`;

src/components/common/Layout/Layout.tsx

@@ -11,6 +11,7 @@ import { Header } from '../../Header/Header';
 import { NetworkHeight } from '../../NetworkHeight/NetworkHeight';
 import { SocialLinks } from '../../SocialLinks/SocialLinks';
 import { KyaModal } from '../KyaModal/KyaModal';
+import { CardanoMaintenance } from './CardanoMaintenance/CardanoMaintenance';
 
 interface Props {
   children: React.ReactChild | React.ReactChild[];
@@ -33,6 +34,7 @@ const Layout = ({ children }: Props): JSX.Element => {
   return (
     <div className="layout">
       <div className="glow" />
+      <CardanoMaintenance />
       <Header />
       <main>{children}</main>
       <footer>