Feat: Add BlankRasa banner in two pages

ui/banner/BlankRasaBanner.tsx

@@ -0,0 +1,87 @@
+import {
+ Box,
+ Flex,
+ Image,
+ Text,
+ Button,
+ useColorModeValue,
+ Heading,
+ Link,
+} from '@chakra-ui/react';
+import React from 'react';
+
+type BlankRasaBannerProps = {
+ block?: boolean;
+};
+
+const BlankRasaBanner = ({ block }: BlankRasaBannerProps) => {
+ const bgColor = useColorModeValue('light', '#171717');
+ const btnColor = useColorModeValue('white', '#171717');
+ const bgBoxShadowDesktop = useColorModeValue(
+ '0px 8px 16px -5px rgba(0, 0, 0, 0.10)',
+ '0px 8px 16px -5px rgba(6, 252, 153, 0.10)',
+ );
+ const imgInvertFilter = useColorModeValue('invert(0)', 'invert(1)');
+
+ return (
+ <Box
+ p={ 5 }
+ h={ block ? undefined : '100%' }
+ w={ [ 'full', block ? '100%' : '40%' ] }
+ bg={ bgColor }
+ boxShadow={ bgBoxShadowDesktop }
+ borderRadius="md"
+ display="flex"
+ alignItems={ [ '', block ? 'center' : '' ] }
+ justifyContent="space-between"
+ flexDirection={ [ 'column', block ? 'row' : 'column' ] }
+ >
+ <Flex
+ flexGrow="1"
+ flexDirection={ [ 'column', block ? 'row' : 'column' ] }
+ alignItems={ [ '', block ? 'center' : '' ] }
+ gap={ block ? 5 : 2 }
+ >
+ <Image
+ src="/static/bank-rasa-logo.png"
+ w={ [ '90px', block ? '100px' : '90px' ] }
+ h={ [ '90px', block ? '100px' : '90px' ] }
+ alt="blank-rasa-logo-loading..."
+ filter={ imgInvertFilter }
+ />
+ <Box flexGrow="1">
+ <Heading as="h2" size="md" mb={ 2 } color="text" fontWeight="medium">
+ Blank Rasa
+ </Heading>
+ <Text fontSize="sm" color="text_secondary">
+ A platform for discovering and trading NFTs on Canto.
+ </Text>
+ <Text fontSize="sm" color="text_secondary">
+ Features collections such as Canto Longnecks, Shnoises, and more.
+ </Text>
+ </Box>
+ <Link href="https://www.blankrasa.com" isExternal>
+ <Button
+ bg="transparent"
+ _hover={{
+ bg: 'accent',
+ color: btnColor,
+ }}
+ fontWeight="medium"
+ colorScheme="accent"
+ p={ 4 }
+ mt={ block ? 0 : 3 }
+ width={ [ '100%', block ? '270px' : '100%' ] }
+ fontSize="sm"
+ variant="outline"
+ borderWidth="1.5px"
+ >
+ Explore More
+ </Button>
+ </Link>
+ </Flex>
+ </Box>
+ );
+};
+
+export default BlankRasaBanner;

ui/home/indicators/ChainIndicators.tsx

@@ -69,7 +69,6 @@ const ChainIndicators = () => {
  flexDir={{ base: 'column', lg: 'row' }}
  w="100%"
  alignItems="stretch"
- mt={ 8 }
  >
  <Flex flexGrow={ 1 } flexDir="column" order={{ base: 2, lg: 1 }} p={{ base: 6, lg: 0 }}>
  <Flex alignItems="center">

ui/pages/Home.tsx

@@ -2,6 +2,7 @@ import { Box, Heading, Flex, LightMode } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
+import BlankRasaBanner from 'ui/banner/BlankRasaBanner';
 import ChainIndicators from 'ui/home/indicators/ChainIndicators';
 import LatestBlocks from 'ui/home/LatestBlocks';
 import Stats from 'ui/home/Stats';
@@ -40,7 +41,10 @@ const Home = () => {
  </LightMode>
  </Box>
  <Stats/>
- <ChainIndicators/>
+ <Flex flexDirection={ [ 'column', 'row' ] } alignItems={ [ 'start' ] } gap={ 5 } pt={ 8 }>
+ <ChainIndicators/>
+ <BlankRasaBanner block={ false }/>
+ </Flex>
  <AdBanner mt={{ base: 6, lg: 8 }} mx="auto" display="flex" justifyContent="center"/>
  <Flex mt={ 8 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 8 }>
  <LatestBlocks/>

ui/shared/Page/PageTitle.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import BlankRasaBanner from 'ui/banner/BlankRasaBanner';
 import TextAd from 'ui/shared/ad/TextAd';
 import LinkInternal from 'ui/shared/LinkInternal';
 
@@ -16,6 +17,7 @@ type Props = {
  beforeTitle?: React.ReactNode;
  afterTitle?: React.ReactNode;
  contentAfter?: React.ReactNode;
+ secondRow?: React.ReactNode;
  isLoading?: boolean;
  withTextAd?: boolean;
 }
@@ -31,11 +33,11 @@ const BackLink = (props: BackLinkProp & { isLoading?: boolean }) => {
  return <Skeleton boxSize={ 6 } display="inline-block" borderRadius="base" mr={ 3 } my={ 2 } verticalAlign="text-bottom" isLoaded={ !props.isLoading }/>;
  }
 
- const icon = <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)" margin="auto"/>;
+ const icon = <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400"/>;
 
  if ('url' in props) {
  return (
- <Tooltip label={ props.label } bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
+ <Tooltip label={ props.label }>
  <LinkInternal display="inline-flex" href={ props.url } h="40px" mr={ 3 }>
  { icon }
  </LinkInternal>
@@ -44,15 +46,15 @@ const BackLink = (props: BackLinkProp & { isLoading?: boolean }) => {
  }
 
  return (
- <Tooltip label={ props.label } bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
+ <Tooltip label={ props.label }>
  <Link display="inline-flex" onClick={ props.onClick } h="40px" mr={ 3 }>
  { icon }
  </Link>
  </Tooltip>
  );
 };
 
-const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoading, afterTitle, beforeTitle }: Props) => {
+const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoading, afterTitle, beforeTitle, secondRow }: Props) => {
  const tooltip = useDisclosure();
  const isMobile = useIsMobile();
  const [ isTextTruncated, setIsTextTruncated ] = React.useState(false);
@@ -90,59 +92,67 @@ const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoa
  }, [ updatedTruncateState ]);
 
  return (
- <Flex
- className={ className }
- mb={ 6 }
- flexDir="row"
- flexWrap="wrap"
- rowGap={ 3 }
- columnGap={ 3 }
- alignItems="center"
- >
- <Flex h={{ base: 'auto', lg: isLoading ? 10 : 'auto' }} maxW="100%" alignItems="center">
- { backLink && <BackLink { ...backLink } isLoading={ isLoading }/> }
- { beforeTitle }
- <Skeleton
- isLoaded={ !isLoading }
- overflow="hidden"
+ <>
+ <BlankRasaBanner block/>
+ <Flex className={ className } flexDir="column" rowGap={ 3 } mb={ 6 } mt={ 16 }>
+ <Flex
+ flexDir="row"
+ flexWrap="wrap"
+ rowGap={ 3 }
+ columnGap={ 3 }
+ alignItems="center"
  >
- <Tooltip
- label={ title }
- isOpen={ tooltip.isOpen }
- bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider"
- onClose={ tooltip.onClose }
- maxW={{ base: 'calc(100vw - 32px)', lg: '500px' }}
- closeOnScroll={ isMobile ? true : false }
- isDisabled={ !isTextTruncated }
- >
- <Heading
- ref={ headingRef }
- as="h1"
- size="lg"
- whiteSpace="normal"
- wordBreak="break-all"
- style={{
- WebkitLineClamp: TEXT_MAX_LINES,
- WebkitBoxOrient: 'vertical',
- display: '-webkit-box',
- }}
+ <Flex h={{ base: 'auto', lg: isLoading ? 10 : 'auto' }} maxW="100%" alignItems="center">
+ { backLink && <BackLink { ...backLink } isLoading={ isLoading }/> }
+ { beforeTitle }
+ <Skeleton
+ isLoaded={ !isLoading }
  overflow="hidden"
- textOverflow="ellipsis"
- onMouseEnter={ tooltip.onOpen }
- onMouseLeave={ tooltip.onClose }
- onClick={ isMobile ? tooltip.onToggle : undefined }
  >
- <span ref={ textRef }>
- { title }
- </span>
- </Heading>
- </Tooltip>
- </Skeleton>
- { afterTitle }
+ <Tooltip
+ label={ title }
+ isOpen={ tooltip.isOpen }
+ onClose={ tooltip.onClose }
+ maxW={{ base: 'calc(100vw - 32px)', lg: '500px' }}
+ closeOnScroll={ isMobile ? true : false }
+ isDisabled={ !isTextTruncated }
+ >
+ <Heading
+ ref={ headingRef }
+ as="h1"
+ size="lg"
+ whiteSpace="normal"
+ wordBreak="break-all"
+ style={{
+ WebkitLineClamp: TEXT_MAX_LINES,
+ WebkitBoxOrient: 'vertical',
+ display: '-webkit-box',
+ }}
+ overflow="hidden"
+ textOverflow="ellipsis"
+ onMouseEnter={ tooltip.onOpen }
+ onMouseLeave={ tooltip.onClose }
+ onClick={ isMobile ? tooltip.onToggle : undefined }
+ >
+ <span ref={ textRef }>
+ { title }
+ </span>
+ </Heading>
+ </Tooltip>
+ </Skeleton>
+ { afterTitle }
+ </Flex>
+ { contentAfter }
+ { withTextAd && <TextAd order={{ base: -1, lg: 100 }} mb={{ base: 6, lg: 0 }} ml="auto" w={{ base: '100%', lg: 'auto' }}/> }
+ </Flex>
+ { secondRow && (
+ <Flex alignItems="center" minH={ 10 } overflow="hidden">
+ { secondRow }
+ </Flex>
+ ) }
  </Flex>
- { contentAfter }
- { withTextAd && <TextAd order={{ base: -1, lg: 100 }} mb={{ base: 6, lg: 0 }} ml="auto" w={{ base: '100%', lg: 'auto' }}/> }
- </Flex>
+ </>
+
  );
 };
 

ui/shared/layout/components/Content.tsx

@@ -7,7 +7,7 @@ interface Props {
 
 const Content = ({ children }: Props) => {
  return (
- <Box pt={{ base: 0, lg: '52px' }} as="main">
+ <Box as="main">
  { children }
  </Box>
  );

ui/snippets/searchBar/SearchBarInput.tsx

@@ -83,7 +83,7 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
  transitionDuration="normal"
  transitionTimingFunction="ease"
  >
- <InputGroup size={{ base: isHomepage ? 'md' : 'sm', lg: 'md' }}>
+ <InputGroup size={{ base: isHomepage ? 'md' : 'sm', lg: 'md' }} mb={ 6 }>
  <InputLeftElement w={{ base: isHomepage ? 6 : 4, lg: 6 }} ml={{ base: isHomepage ? 4 : 3, lg: 4 }} h="100%">
  <Icon as={ searchIcon } boxSize={{ base: isHomepage ? 6 : 4, lg: 6 }} color={ useColorModeValue('blackAlpha.600', 'primary') }/>
  </InputLeftElement>