feat: banners for bridging assets

src/components/wrappers/ScreenWrapper/index.tsx

@@ -1,12 +1,12 @@
+import { useThemeContext } from '@aave/aave-ui-kit';
+import classNames from 'classnames';
 import React, { ReactNode, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import classNames from 'classnames';
-
 import { useLanguageContext } from '../../../libs/language-provider';
-import { useThemeContext } from '@aave/aave-ui-kit';
-import { useHeaderTitle, useWithDesktopTitle } from '../ScreensWrapper';
+import { DISPLAY_BANNER_PAGES, networkBannerConfigs } from '../../../ui-config';
+import NetworkBanner from '../../../ui-config/branding/NetworkBanner';
 import DesktopPageTitle from '../../DesktopPageTitle';
-
+import { useHeaderTitle, useWithDesktopTitle } from '../ScreensWrapper';
 import staticStyles from './style';
 
 interface ScreenWrapperProps {
@@ -65,6 +65,15 @@ export default function ScreenWrapper({
       )}
       {subTitle && <div className="ScreenWrapper__mobileSubTitle">{subTitle}</div>}
 
+      {DISPLAY_BANNER_PAGES.includes(location.pathname) && (
+        <>
+          <div className="ScreenWrapper__bannerWrapper">
+            <NetworkBanner {...networkBannerConfigs['avalanche']} />
+          </div>
+          <div className="ScreenWrapper__bannerSpacer" />
+        </>
+      )}
+
       {children}
 
       <div className="ScreenWrapper__mobile-bottomBorder">

src/components/wrappers/ScreenWrapper/style.ts

@@ -70,6 +70,24 @@ const staticStyles = css.global`
         line-height: 50px;
       }
     }
+
+    &__bannerWrapper {
+      padding: 4px 0px 12px 0px;
+      @include respond-to(sm) {
+        position: absolute;
+        top: -4px;
+        left: 0;
+        right: 0;
+      }
+    }
+
+    &__bannerSpacer {
+      display: none;
+      @include respond-to(sm) {
+        display: block;
+        margin-bottom: 95px;
+      }
+    }
   }
 `;
 

src/ui-config/banners.ts

@@ -0,0 +1,31 @@
+import { Network } from '@aave/protocol-js';
+import avalancheLogo from './branding/images/avalancheLogo.svg';
+import polygonLogo from './branding/images/polygonLogo.svg';
+
+export interface NetworkBannerConfig {
+  networkName: string;
+  bridgeName: string;
+  bridgeUrl: string;
+  brandColor: string;
+  bridgeLogo: string;
+}
+
+// Pages where the banners should be displayed
+export const DISPLAY_BANNER_PAGES = ['/deposit', '/borrow'];
+
+export const networkBannerConfigs: { [key: string]: NetworkBannerConfig } = {
+  [Network.avalanche]: {
+    brandColor: '#E84142',
+    networkName: 'Avalanche',
+    bridgeName: 'Avalanche Bridge',
+    bridgeUrl: 'https://bridge.avax.network/',
+    bridgeLogo: avalancheLogo,
+  },
+  [Network.polygon]: {
+    brandColor: '#8247E5',
+    networkName: 'Polygon',
+    bridgeName: 'Polygon PoS Bridge',
+    bridgeUrl: 'https://wallet.matic.network/bridge/',
+    bridgeLogo: polygonLogo,
+  },
+};

src/ui-config/branding/NetworkBanner/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import whiteLinkIcon from '../../../images/whiteLinkIcon.svg';
+import { NetworkBannerConfig } from '../../banners';
+import messages from './messages';
+import staticStyles from './style';
+
+export default function NetworkBanner({
+  brandColor,
+  bridgeName,
+  bridgeUrl,
+  bridgeLogo,
+  networkName,
+}: NetworkBannerConfig) {
+  const intl = useIntl();
+
+  return (
+    <div className="NetworkBanner" style={{ backgroundColor: brandColor }}>
+      <div className="NetoworkBanner__logo">
+        <img src={bridgeLogo} />
+      </div>
+      <div className="NetworkBanner__title">
+        {intl.formatMessage(messages.title, {
+          networkName,
+        })}
+        &nbsp;
+        {intl.formatMessage(messages.visit)}
+        &nbsp;
+        <strong>{bridgeName}</strong>
+      </div>
+      <div className="NetworkBanner__link">
+        <a href={bridgeUrl} target="_blank">
+          <img src={whiteLinkIcon} />
+        </a>
+      </div>
+      <style jsx={true}>{staticStyles}</style>
+    </div>
+  );
+}

src/ui-config/branding/NetworkBanner/messages.ts

@@ -0,0 +1,6 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  title: 'Need your Ethereum main network assets on {networkName}?',
+  visit: 'Please visit',
+});

src/ui-config/branding/NetworkBanner/style.ts

@@ -0,0 +1,55 @@
+import css from 'styled-jsx/css';
+
+/*language=SCSS*/
+const staticStyles = css.global`
+  @import 'src/_mixins/vars';
+  @import 'src/_mixins/screen-size';
+
+  .NetworkBanner {
+    width: 100%;
+    display: flex;
+    border-radius: 50px;
+    padding: 8px 24px;
+    color: white;
+    justify-content: space-between;
+    box-shadow: $boxShadow;
+    position: relative;
+
+    &__logo {
+      display: flex;
+      align-items: center;
+    }
+    &__title {
+      position: absolute;
+      left: 0;
+      right: 0;
+      text-align: center;
+      align-items: center;
+
+      @include respond-to(md) {
+        position: relative;
+        max-width: 343px;
+      }
+    }
+    &__link {
+      display: flex;
+      align-items: center;
+      @include respond-to(md) {
+        right: 8px;
+        top: 8px;
+        position: absolute;
+      }
+    }
+
+    @include respond-to(md) {
+      flex-direction: column;
+      align-items: center;
+      border-radius: 0px;
+      div {
+        padding: 4px;
+      }
+    }
+  }
+`;
+
+export default staticStyles;

src/ui-config/index.ts

@@ -1,5 +1,6 @@
 export * from './menu-items';
 export * from './branding';
+export * from './banners';
 
 export * from './markets';
 export * from './governance';