cere-io · mazhutoanton · Sep 15, 2023 · Sep 15, 2023
diff --git a/packages/ui/src/components/Alert/Alert.tsx b/packages/ui/src/components/Alert/Alert.tsx
@@ -4,13 +4,11 @@ import { useId, useState } from 'react';
 import { Typography } from '../Typography';
 import { CloseIcon } from '../../icons';
 import { useConfigContext, useWalletContext, useMediaQuery } from '../../hooks';
+import { AlertRewardIcon } from '../../icons/AlertRewardIcon';
 
-const Container = styled.div<{ visible: boolean }>(
+const Container = styled.div<{ visible: boolean; skin?: AlertProps['skin'] }>(
   {
-    zIndex: 100,
-    position: 'absolute',
-    right: 39,
-    top: 32,
+    position: 'relative',
     display: 'grid',
     gridTemplateColumns: 'auto auto 32px',
     columnGap: 12,
@@ -29,15 +27,16 @@ const Container = styled.div<{ visible: boolean }>(
       width: '100%',
     },
   },
+  ({ skin }) => skin === 'signUp' && { width: '322px', justifySelf: 'end' },
   ({ visible }) => ({
     visibility: visible ? 'visible' : 'hidden',
   }),
 );
 
 const CloseIconWrapper = styled.div({
   position: 'absolute',
-  top: '-10px',
-  right: '-10px',
+  top: '11px',
+  right: '11px',
 });
 
 const CloseAlert = styled(CloseIcon)(() => ({
@@ -54,14 +53,28 @@ const TextContainer = styled.div({
   flexDirection: 'column',
 });
 
-const Title = styled(Typography)({
+const Title = styled(Typography)(({ skin }: { skin?: AlertProps['skin'] }) => ({
   color: '#FFF',
-  fontFamily: 'Lexend',
-  fontSize: 14,
-  fontStyle: 'normal',
-  fontWeight: '400',
-  lineHeight: 'normal',
-});
+  ...(skin === 'wallet'
+    ? {
+        fontFamily: 'Lexend',
+        fontSize: 14,
+        fontStyle: 'normal',
+        fontWeight: '400',
+        lineHeight: 'normal',
+      }
+    : {
+        display: 'inline-flex',
+        alignItems: 'center',
+        fontFamily: 'Yapari-SemiBold',
+        fontSize: 16,
+        fontStyle: 'normal',
+        fontWeight: '600',
+        lineHeight: 'normal',
+        textTransform: 'uppercase',
+        '& > svg': { marginRight: '4px' },
+      }),
+}));
 
 const StyledImage = styled.img({
   height: 73,
@@ -73,37 +86,58 @@ const StyledImage = styled.img({
   },
 });
 
-const SubTitle = styled(Typography)({
+const SubTitle = styled(Typography)(({ skin }: { skin?: AlertProps['skin'] }) => ({
   color: '#FFF',
-  fontFamily: 'Yapari-SemiBold',
-  fontSize: 20,
-  fontStyle: 'normal',
-  fontWeight: '600',
-  lineHeight: 'normal',
-  textTransform: 'uppercase',
+  ...(skin === 'wallet'
+    ? {
+        fontFamily: 'Yapari-SemiBold',
+        fontSize: 20,
+        fontStyle: 'normal',
+        fontWeight: '600',
+        lineHeight: 'normal',
+        textTransform: 'uppercase',
+      }
+    : {
+        fontFamily: 'Lexend',
+        fontSize: 12,
+        fontStyle: 'normal',
+        fontWeight: '400',
+        lineHeight: '17px',
+      }),
   marginTop: 4,
+}));
+
+const AlertReward = styled(AlertRewardIcon)({
+  display: 'inline-block',
 });
 
-export const Alert = () => {
+export type AlertProps = {
+  title: string;
+  subtitle: string;
+  skin: 'wallet' | 'signUp';
+};
+
+export const Alert = ({ title, subtitle, skin }: AlertProps) => {
   const descriptionId = useId();
   const { sdkUrl: cdnUrl } = useConfigContext();
-  const { balance, isNewUser } = useWalletContext();
+  const { balance, isNewUser, address } = useWalletContext();
   const [visible, setVisibility] = useState(true);
   const isMobile = useMediaQuery('(max-width: 600px)');
 
-  if (!visible || !balance || !isNewUser || isMobile) {
+  if (!visible || (skin === 'wallet' ? !balance || !isNewUser : !address) || isMobile) {
     return null;
   }
 
   return (
-    <Container role="alert" aria-describedby={descriptionId} visible={visible}>
-      <StyledImage src={`${cdnUrl}/assets/alert.png`} />
+    <Container role="alert" aria-describedby={descriptionId} visible={visible} skin={skin}>
+      {skin !== 'signUp' && <StyledImage src={`${cdnUrl}/assets/alert.png`} />}
       <TextContainer>
         <Title id={descriptionId} variant="body2">
-          Achivement unlocked
+          {skin === 'signUp' && <AlertReward />}
+          {title}
         </Title>
         <SubTitle id={descriptionId} variant="body2">
-          NeWBIE way
+          {subtitle}
         </SubTitle>
       </TextContainer>
       <CloseIconWrapper

diff --git a/packages/ui/src/icons/AlertRewardIcon.tsx b/packages/ui/src/icons/AlertRewardIcon.tsx
@@ -0,0 +1,42 @@
+import { SVGProps } from 'react';
+
+export const AlertRewardIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g clip-path="url(#clip0_6156_7497)">
+      <path d="M5.55566 18.335H14.4446V19.4461H5.55566V18.335Z" fill="#F32758" />
+      <path d="M6.66675 18.8867H13.3334V19.9978H6.66675V18.8867Z" fill="#F32758" />
+      <path d="M6.11108 17.2217H13.8889V18.3328H6.11108V17.2217Z" fill="#F32758" />
+      <path d="M9.44434 10H10.5554V17.2222H9.44434V10Z" fill="#F32758" />
+      <path d="M8.33325 11.1133H9.44436V12.2244H8.33325V11.1133Z" fill="#F32758" />
+      <path d="M5 10H8.33333V11.1111H5V10Z" fill="#F32758" />
+      <path d="M5 8.88672H8.33333V9.99783H5V8.88672Z" fill="#F32758" />
+      <path d="M3.88892 4.44336H5.00003V8.8878H3.88892V4.44336Z" fill="#F32758" />
+      <path d="M3.88892 0H5.00003V4.44444H3.88892V0Z" fill="#F32758" />
+      <path d="M5 4.44336H8.33333V8.8878H5V4.44336Z" fill="#F32758" />
+      <path d="M8.33325 4.44336H11.6666V8.8878H8.33325V4.44336Z" fill="#F32758" />
+      <path d="M8.33325 0H11.6666V4.44444H8.33325V0Z" fill="#F32758" />
+      <path d="M11.6667 4.44336H15.0001V8.8878H11.6667V4.44336Z" fill="#F32758" />
+      <path d="M15 4.44336H16.1111V8.8878H15V4.44336Z" fill="#F32758" />
+      <path d="M15 0H16.1111V4.44444H15V0Z" fill="#F32758" />
+      <path d="M8.33325 8.88672H11.6666V9.99783H8.33325V8.88672Z" fill="#F32758" />
+      <path d="M8.33325 16.1133H9.44436V17.2244H8.33325V16.1133Z" fill="#F32758" />
+      <path d="M8.33325 12.7783H9.44436V13.8894H8.33325V12.7783Z" fill="#F32758" />
+      <path d="M10.5557 11.1133H11.6668V12.2244H10.5557V11.1133Z" fill="#F32758" />
+      <path d="M11.6667 10H15.0001V11.1111H11.6667V10Z" fill="#F32758" />
+      <path d="M11.6667 8.88672H15.0001V9.99783H11.6667V8.88672Z" fill="#F32758" />
+      <path d="M10.5557 16.1133H11.6668V17.2244H10.5557V16.1133Z" fill="#F32758" />
+      <path d="M10.5557 12.7783H11.6668V13.8894H10.5557V12.7783Z" fill="#F32758" />
+      <path d="M1.66675 1.11328H18.3334V2.22439H1.66675V1.11328Z" fill="#F32758" />
+      <path d="M5 0H15V1.11111H5V0Z" fill="#F32758" />
+      <path d="M1.11108 6.66504H18.8889V7.77615H1.11108V6.66504Z" fill="#F32758" />
+      <path d="M3.88892 2.77832H16.1111V3.88943H3.88892V2.77832Z" fill="#F32758" />
+      <path d="M18.3333 6.66504L18.3333 1.10948L19.4444 1.10948L19.4444 6.66504L18.3333 6.66504Z" fill="#F32758" />
+      <path d="M0.555664 6.66504L0.555664 1.10948L1.66678 1.10948L1.66678 6.66504L0.555664 6.66504Z" fill="#F32758" />
+    </g>
+    <defs>
+      <clipPath id="clip0_6156_7497">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/CloseIcon.tsx b/packages/ui/src/icons/CloseIcon.tsx
@@ -1,29 +1,23 @@
 import { SVGProps } from 'react';
 
 export const CloseIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g filter="url(#filter0_b_4654_46626)">
-      <rect width="30" height="30" rx="15" fill="#F5F5F7" />
-      <path
-        d="M10.0493 19.1811C9.73828 19.4921 9.73193 20.0444 10.0557 20.3681C10.3857 20.6918 10.938 20.6855 11.2427 20.3808L15.0005 16.623L18.752 20.3745C19.0693 20.6918 19.6152 20.6918 19.939 20.3681C20.2627 20.038 20.2627 19.4985 19.9453 19.1811L16.1938 15.4296L19.9453 11.6718C20.2627 11.3544 20.269 10.8085 19.939 10.4848C19.6152 10.1611 19.0693 10.1611 18.752 10.4785L15.0005 14.2299L11.2427 10.4785C10.938 10.1674 10.3794 10.1547 10.0557 10.4848C9.73193 10.8085 9.73828 11.3671 10.0493 11.6718L13.8008 15.4296L10.0493 19.1811Z"
-        fill="#6E6E79"
-      />
-    </g>
-    <defs>
-      <filter
-        id="filter0_b_4654_46626"
-        x="-54.3656"
-        y="-54.3656"
-        width="138.731"
-        height="138.731"
-        filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
-      >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
-        <feGaussianBlur in="BackgroundImageFix" stdDeviation="27.1828" />
-        <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_4654_46626" />
-        <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_4654_46626" result="shape" />
-      </filter>
-    </defs>
+  <svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1" y="1" width="1" height="1" fill="#D9D9D9" />
+    <rect width="1" height="1" fill="#D9D9D9" />
+    <rect x="2" y="2" width="1" height="1" fill="#D9D9D9" />
+    <rect x="3" y="3" width="1" height="1" fill="#D9D9D9" />
+    <rect x="4" y="4" width="1" height="1" fill="#D9D9D9" />
+    <rect x="5" y="5" width="1" height="1" fill="#D9D9D9" />
+    <rect x="6" y="6" width="1" height="1" fill="#D9D9D9" />
+    <rect x="7" y="7" width="1" height="1" fill="#D9D9D9" />
+    <rect x="8" y="8" width="1" height="1" fill="#D9D9D9" />
+    <rect x="3" y="5" width="1" height="1" fill="#D9D9D9" />
+    <rect x="2" y="6" width="1" height="1" fill="#D9D9D9" />
+    <rect x="1" y="7" width="1" height="1" fill="#D9D9D9" />
+    <rect y="8" width="1" height="1" fill="#D9D9D9" />
+    <rect x="5" y="3" width="1" height="1" fill="#D9D9D9" />
+    <rect x="6" y="2" width="1" height="1" fill="#D9D9D9" />
+    <rect x="7" y="1" width="1" height="1" fill="#D9D9D9" />
+    <rect x="8" width="1" height="1" fill="#D9D9D9" />
   </svg>
 );
diff --git a/packages/ui/src/widgets/Leaderboard/Leaderboard.tsx b/packages/ui/src/widgets/Leaderboard/Leaderboard.tsx
@@ -75,6 +75,16 @@ const SignUpButton = styled.button({
   },
 });
 
+const Alerts = styled.div({
+  zIndex: 100,
+  position: 'absolute',
+  right: 39,
+  top: 32,
+  display: 'grid',
+  gridTemplateRows: '1fr 1fr',
+  gridRowGap: '5px',
+});
+
 export const Leaderboard = ({
   data,
   activeTournament,
@@ -101,16 +111,26 @@ export const Leaderboard = ({
 
   return (
     <>
-      <Alert />
+      <Alerts>
+        <Alert
+          title="CONGRATULATIONS"
+          subtitle="You have successfully sign up!
+Be top-3 player and share a prize"
+          skin="signUp"
+        />
+        <Alert title="Achivement unlocked" subtitle="NeWBIE way" skin="wallet" />
+      </Alerts>
       {withTopWidget && (
         <TopWidget
+          hasActiveTournament={Boolean(activeTournament)}
           tournamentTitle={`${activeTournament ? activeTournament.title : 'Weekly'} tournament`}
           tournamentSubtitle={activeTournament ? activeTournament.subtitle : 'TOP 20 WINS UNIQUE NFT'}
           amountOfDaysLeft={dayDifference ? dayDifference : 1}
           onPlayAgain={handlePlayAgain}
           onTweet={onTweet}
           disabled={balance < sessionPrice}
           score={playerData?.score}
+          rank={playerData?.rank}
         />
       )}
       <ModalWrapper layer={`${cdnUrl}/assets/layer.svg`}>