Add context banner support to login UI

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### vNext
 
 - Upgrade Web3Auth libraries to support latest updates in Web3Auth infrastructure
+- Add context banner support to login UI
 
 ### v1.31.0
 

packages/ui/src/components/Banner/Banner.tsx

@@ -5,7 +5,7 @@ import { BannerPlaceProps, bannerPlacementIdMap } from './BannerPlace';
 
 export type BannerProps = BoxProps & {
   height?: number;
-  placement?: BannerPlaceProps['placement'];
+  placement?: BannerPlaceProps['placement'] | 'content';
 };
 
 const BannerContent = styled(Box)(({ theme }) => ({
@@ -16,8 +16,13 @@ const BannerContent = styled(Box)(({ theme }) => ({
 }));
 
 export const Banner = ({ placement = 'top', height, ...props }: BannerProps) => {
-  const container = document.getElementById(bannerPlacementIdMap[placement]);
   const [detectedHeight, setDetectedHeight] = useState(0);
+
+  if (placement === 'content') {
+    return <Box {...props} />;
+  }
+
+  const container = document.getElementById(bannerPlacementIdMap[placement]);
   const resultHeight = height || detectedHeight;
 
   const updateHeight = (element: HTMLDivElement | null) => {

src/components/AppContextBanner/AppContextBanner.tsx

@@ -1,6 +1,7 @@
 import {
   styled,
   Banner,
+  BannerProps,
   Avatar,
   ListItem,
   ListItemAvatar,
@@ -17,7 +18,10 @@ import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
 import { useAppContextStore } from '~/hooks';
 
-export type AppContextBannerProps = {};
+export type AppContextBannerProps = BannerProps & {
+  variant?: 'app' | 'banner';
+  hideBackButton?: boolean;
+};
 
 type Row = {
   variant: 'primary' | 'secondary';
@@ -57,29 +61,28 @@ const getTypographyProps = ({ variant, color }: Row) => ({
   color: color || typographyPropsMap[variant].color,
 });
 
-const AppContextBanner = (props: AppContextBannerProps) => {
+const AppContextBanner = ({ variant, hideBackButton = false, ...props }: AppContextBannerProps) => {
   const { banner } = useAppContextStore();
 
   const handleBackClick = useCallback(() => {
     window.close();
   }, []);
 
-  if (!banner) {
+  if (!banner || (variant && variant !== banner.variant)) {
     return null;
   }
 
-  const variant = banner.variant || 'banner';
-  const hasBackButton = banner.hasBackButton ?? true;
+  const hasBackButton = !hideBackButton && (banner.hasBackButton ?? true);
   const [contentTitle, contentText] = banner.content;
   const [rightTitle, rightText] = banner.right || [];
-  const FallbackIcon = variant === 'app' ? WindowIcon : PhotoOutlinedIcon;
+  const FallbackIcon = banner.variant === 'app' ? WindowIcon : PhotoOutlinedIcon;
 
-  const appBadgeElement = variant === 'app' && !banner.thumbnailUrl && (
+  const appBadgeElement = banner.variant === 'app' && !banner.thumbnailUrl && (
     <LanguageIcon color="primary" fontSize="small" />
   );
 
   return (
-    <Banner paddingLeft={hasBackButton ? 1.5 : 2} paddingRight={2} paddingY={0.5}>
+    <Banner paddingLeft={hasBackButton ? 1.5 : 2} paddingRight={2} paddingY={0.5} {...props}>
       <ListItem disablePadding>
         {hasBackButton && (
           <IconButton sx={{ marginRight: 1 }} onClick={handleBackClick}>

src/components/Login/LoginPage.tsx

@@ -24,6 +24,7 @@ import { getTokenWithFacebook, getTokenWithGoogle } from './auth.service';
 import { useEffect } from 'react';
 import { SUPPORTED_SOCIAL_LOGINS } from '~/constants';
 import { useAppContextStore } from '~/hooks';
+import { AppContextBanner } from '../AppContextBanner';
 
 interface LogInProps {
   variant?: 'signin' | 'signup';
@@ -40,6 +41,11 @@ export const CereWhiteLogo = styled(CereWhiteIcon)(({ theme }) => ({
   fontSize: theme.typography.pxToRem(48),
 }));
 
+const Banner = styled(AppContextBanner)(({ theme }) => ({
+  backgroundColor: theme.palette.grey[100],
+  borderRadius: theme.shape.borderRadius * 2,
+}));
+
 export const LoginPage = ({ variant = 'signin', onRequestLogin }: LogInProps) => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -125,6 +131,9 @@ export const LoginPage = ({ variant = 'signin', onRequestLogin }: LogInProps) =>
           ? "Creating an account is easy! Fill in your email, confirm & claim your spot on the leaderboard! As a sign-up bonus you'll receive 10 credits to continue playing for free"
           : 'Send and receive any currency or simply top up with your card.'}
       </Typography>
+
+      <Banner hideBackButton variant="banner" placement="content" />
+
       <FormControl>
         <TextField
           {...register('email')}