diff --git a/src/components/wrappers/ScreenWrapper/index.tsx b/src/components/wrappers/ScreenWrapper/index.tsx index 7bc43e3c7..ee14bbd3d 100644 --- a/src/components/wrappers/ScreenWrapper/index.tsx +++ b/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 &&
{subTitle}
} + {DISPLAY_BANNER_PAGES.includes(location.pathname) && ( + <> +
+ +
+
+ + )} + {children}
diff --git a/src/components/wrappers/ScreenWrapper/style.ts b/src/components/wrappers/ScreenWrapper/style.ts index 97f0db2ac..bf9d98c9b 100644 --- a/src/components/wrappers/ScreenWrapper/style.ts +++ b/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; + } + } } `; diff --git a/src/ui-config/banners.ts b/src/ui-config/banners.ts new file mode 100644 index 000000000..954c12194 --- /dev/null +++ b/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, + }, +}; diff --git a/src/ui-config/branding/NetworkBanner/index.tsx b/src/ui-config/branding/NetworkBanner/index.tsx new file mode 100644 index 000000000..454fb4ce7 --- /dev/null +++ b/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 ( +
+
+ +
+
+ {intl.formatMessage(messages.title, { + networkName, + })} +   + {intl.formatMessage(messages.visit)} +   + {bridgeName} +
+
+ + + +
+ +
+ ); +} diff --git a/src/ui-config/branding/NetworkBanner/messages.ts b/src/ui-config/branding/NetworkBanner/messages.ts new file mode 100644 index 000000000..cb7ba43c5 --- /dev/null +++ b/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', +}); diff --git a/src/ui-config/branding/NetworkBanner/style.ts b/src/ui-config/branding/NetworkBanner/style.ts new file mode 100644 index 000000000..837899ef6 --- /dev/null +++ b/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; diff --git a/src/ui-config/branding/images/avalancheLogo.svg b/src/ui-config/branding/images/avalancheLogo.svg new file mode 100644 index 000000000..1893a54d1 --- /dev/null +++ b/src/ui-config/branding/images/avalancheLogo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/ui-config/branding/images/polygonLogo.svg b/src/ui-config/branding/images/polygonLogo.svg new file mode 100644 index 000000000..1b8829edf --- /dev/null +++ b/src/ui-config/branding/images/polygonLogo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/ui-config/index.ts b/src/ui-config/index.ts index a64f3a4ad..3ac8047b3 100644 --- a/src/ui-config/index.ts +++ b/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';