Skip to content
Open
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/static/bank-rasa-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
86 changes: 86 additions & 0 deletions ui/banner/BlankRasaBanner.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import {
Box,
Flex,
Image,
Text,
Button,
useColorModeValue,
Heading,
Link,
} from '@chakra-ui/react';
import React from 'react';

type IsCardProp = {
isCard?: boolean;
};

const BlankRasaBanner = ({ isCard = false }: IsCardProp) => {
const bgColor = useColorModeValue('light', '#171717');
const textColor = useColorModeValue('#616B74', 'gray.200');
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={ !isCard ? '' : '100%' }
w={ [ 'full', !isCard ? '100%' : '40%' ] }
bg={ bgColor }
boxShadow={ bgBoxShadowDesktop }
borderRadius="md"
display="flex"
alignItems={ [ '', !isCard ? 'center' : '' ] }
justifyContent="space-between"
flexDirection={ [ 'column', !isCard ? 'row' : 'column' ] }
>
<Flex
flexDirection={ [ 'column', !isCard ? 'row' : 'column' ] }
alignItems={ [ '', !isCard ? 'center' : '' ] }
gap={ !isCard ? 5 : 2 }
>
<Image
src="/static/bank-rasa-logo.png"
w={ [ '90px', !isCard ? '100px' : '90px' ] }
h={ [ '90px', !isCard ? '100px' : '90px' ] }
alt="blank-rasa-logo-loading..."
filter={ imgInvertFilter }
/>
<Box w={ [ '100%', !isCard ? '50%' : '100%' ] }>
<Heading as="h2" size="md" mt={ 2 } mb={ 2 } fontWeight="bold">
Blank Rasa
</Heading>
<Text fontSize="sm" color={ textColor }>
A platform for discovering and trading NFTs on Canto. Features
collections such as CantoLongneck, Shnoises and more
</Text>
</Box>
</Flex>
<Link href="https://www.blankrasa.com" isExternal>
<Button
bg="transparent"
color="green.500"
_hover={{
bg: 'green.500',
color: btnColor,
}}
fontWeight="medium"
colorScheme="green.500"
p={ 4 }
mt={ 3 }
width={ [ '100%', !isCard ? '270px' : '100%' ] }
fontSize="sm"
variant="outline"
borderWidth="1.5px"
>
Explore More
</Button>
</Link>
</Box>
);
};

export default BlankRasaBanner;
1 change: 0 additions & 1 deletion ui/home/indicators/ChainIndicators.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 5 additions & 1 deletion ui/pages/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -40,7 +41,10 @@ const Home = () => {
</LightMode>
</Box>
<Stats/>
<ChainIndicators/>
<Flex flexDirection={ [ 'column', 'row' ] } alignItems={ [ 'start' ] } gap={ 5 } pt={ 8 }>
<ChainIndicators/>
<BlankRasaBanner isCard={ true }/>
</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/>
Expand Down
116 changes: 63 additions & 53 deletions ui/shared/Page/PageTitle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -16,6 +17,7 @@ type Props = {
beforeTitle?: React.ReactNode;
afterTitle?: React.ReactNode;
contentAfter?: React.ReactNode;
secondRow?: React.ReactNode;
isLoading?: boolean;
withTextAd?: boolean;
}
Expand All @@ -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>
Expand All @@ -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);
Expand Down Expand Up @@ -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/>
<Flex className={ className } flexDir="column" rowGap={ 3 } mb={ 6 }>
<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>
</>

);
};

Expand Down
2 changes: 1 addition & 1 deletion ui/shared/layout/components/Content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ interface Props {

const Content = ({ children }: Props) => {
return (
<Box pt={{ base: 0, lg: '52px' }} as="main">
<Box as="main">
{ children }
</Box>
);
Expand Down
2 changes: 1 addition & 1 deletion ui/snippets/searchBar/SearchBarInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down