utils#isCountdown TypeScript Examples
The following examples show how to use
utils#isCountdown.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From vvs-ui with GNU General Public License v3.0 | 5 votes |
|
Menu = (props) => {
const { isDark, toggleTheme } = useTheme()
const vvsPriceUsd = usePriceVvsUsdc()
const { profile } = useProfile()
const { currentLanguage, setLanguage, t } = useTranslation()
const { pathname } = useLocation()
const activeMenuItem = getActiveMenuItem({ menuConfig: config(t), pathname })
const activeSubMenuItem = getActiveSubMenuItem({ menuItem: activeMenuItem, pathname })
return (
<UikitMenu
userMenu={isCountdown() ? null : <UserMenu />}
globalMenu={isCountdown() ? null : <GlobalSettings />}
isDark={isDark}
isBlindMode={isBlindMode()}
toggleTheme={toggleTheme}
t={t}
currentLang={currentLanguage.code}
langs={languageList}
setLang={setLanguage}
vvsPriceUsd={vvsPriceUsd.toNumber()}
showVvsPrice={showVvsPrice()}
links={isCountdown() ? [] : config(t)}
subLinks={activeMenuItem?.hideSubNav ? [] : activeMenuItem?.items}
footerLinks={footerLinks(t)}
activeItem={activeMenuItem?.href}
activeSubItem={activeSubMenuItem?.href}
buyVvsLabel={t('Buy VVS')}
profile={{
username: profile?.username,
image: profile?.nft ? `/images/nfts/${profile.nft?.images.sm}` : undefined,
profileLink: '/profile',
noProfileLink: '/profile',
showPip: !profile?.username,
}}
iconCallback={() => registerToken(tokens.vvs.address, tokens.vvs.symbol, tokens.vvs.decimals)}
vvsAddress={tokens.vvs.address}
{...props}
/>
)
}
Example #2
| Source File: index.tsx From vvs-ui with GNU General Public License v3.0 | 5 votes |
|
FeaturesGuide = () => {
const { t } = useTranslation()
const { isDesktop } = useMatchBreakpoints()
const { headingText, cardItems } = featuresGuideData
return (
<>
<LoremBgWrapper>
{isDesktop ? (
<Flex>
<CompositeImage {...bgImages} />
<StarsWrapper>
<CompositeImage {...startsImages} />
</StarsWrapper>
<StyledDotLine top="106px" right="50px">
<DotLineC />
</StyledDotLine>
</Flex>
) : (
<CompositeImage {...mobileBgImages} />
)}
</LoremBgWrapper>
<Flex justifyContent="center" alignItems="center" flexDirection="column">
<Text
lineHeight="36px"
fontWeight="500"
color="white"
mb="40px"
fontSize={isDesktop ? '28px' : '26px'}
textAlign="center"
width={['345px', '345px', '345px', '345px', '770px']}
height={['180px', '180px', '180px', '180px', '72px']}
>
{t(headingText)}
</Text>
<Flex flexDirection={['column', 'column', 'column', 'column', 'row']}>
{cardItems.map((item, index) => (
<CardWrapper key={item.title} mb="22px">
<CardBody style={{ textAlign: 'center' }}>
<Text fontSize="28px" fontWeight="500" mt="14px">
{t(item.title)}
</Text>
<GradientsFont textTransform="uppercase" height="32px" fontSize="20px" fontWeight="400" mt="2px" mb="10px" title={item.subTitle}>
{t(item.subTitle)}
</GradientsFont>
<Text height="110px">{t(item.description)}</Text>
<Flex justifyContent="center">
{
isCountdown() ? <StyledButton variant="secondary">{t('Coming Soon')}</StyledButton> : <Link external={item.button.external} href={item.button.to}>
<StyledButton variant="secondary">{t(item.button.text)}</StyledButton>
</Link>
}
</Flex>
</CardBody>
</CardWrapper>
))}
</Flex>
</Flex>
</>
)
}
Example #3
| Source File: Hero.tsx From vvs-ui with GNU General Public License v3.0 | 5 votes |
|
Hero = () => {
const { account } = useWeb3React()
const { isDesktop } = useMatchBreakpoints()
return (
<>
<HeroBgWrapper>
<InnerWrapper>
<LeftBottomTriangleWrapper>
<CompositeImage {...bgTriangles} />
</LeftBottomTriangleWrapper>
{!isDesktop && <CompositeImage {...mobileDiamonds} />}
<DotScaleContainer top={isDesktop ? '20px' : '-18px'} left={isDesktop ? '50px' : '-39px'}>
<DotLineA />
</DotScaleContainer>
{isDesktop && (
<DotScaleContainer top="220px" right="50px">
<DotLineB />
</DotScaleContainer>
)}
<StarsWrapper>
<CompositeImage {...starsImages} />
</StarsWrapper>
</InnerWrapper>
</HeroBgWrapper>
<HeroContainer position="relative" justifyContent="center" id="homepage-hero" minHeight="358px">
<Flex flex="1" flexDirection="column" maxWidth="512px" mt={["40px", "40px", "40px", "80px"]}>
<StyledBigHeading>Very, Very Simple DeFi Trading for All</StyledBigHeading>
<Text {...titleStyleProps} color="white">
Your gateway to the decentralized finance movement. Take control of your finances and earn sparkly VVS
rewards.
</Text>
<Text {...titleStyleProps} color="white">
<Link mr="5px" href="https://docs.vvs.finance" target="_blank" display="inline-block" {...titleStyleProps}>
Learn more
</Link>
about VVS Finance.
</Text>
{
isCountdown() && <LaunchCountDown />
}
{
!isCountdown() && <Flex>
{!account && <ConnectWalletButton mt="50px" height='60px' width='236px'/>}
{account && <Button as={ReactLink} to="/swap" mt="50px" height='60px' width='236px'>Trade Now</Button>}
</Flex>
}
</Flex>
{isDesktop && (
<ScaleContainerWithStar flex="1" position="relative" minHeight="260px">
<MoleCompositeImage {...diamondImages} />
</ScaleContainerWithStar>
)}
</HeroContainer>
</>
)
}
Example #4
| Source File: index.tsx From vvs-ui with GNU General Public License v3.0 | 4 votes |
|
VvsTokenIntro = () => {
const { t } = useTranslation()
const { headingText, items } = vvsTokenIntroData
const { isDesktop } = useMatchBreakpoints()
return (
<>
{!isDesktop && (
<BgWrapper>
<CompositeImage {...mobileImages} />
</BgWrapper>
)}
<Flex
position="relative"
flexDirection="row"
alignItems="center"
justifyContent="center"
width="100%"
flex="1"
padding={isDesktop ? '0 40px' : '0'}
>
<Flex flexDirection="column">
<Text
color="black"
fontSize={isDesktop ? '50px' : '37px'}
width={['347px', '347px', '347px', '440px']}
fontWeight="400"
lineHeight="60px"
>
{t(headingText)}
</Text>
{items.map((item) => (
<Flex
key={item.title}
margin={['20px 0', '20px 0', '20px 0', '42px 0']}
padding={isDesktop ? '0' : '0 10px'}
>
<Flex height={['105px', '105px', '105px', '75px']} width="75px" justifyContent="center">
<img
src={item.src}
alt={item.alt}
style={{
width: item.width,
height: item.height,
marginRight: '30px',
alignSelf: 'center',
}}
/>
</Flex>
<Flex
maxWidth="600px"
flexDirection="column"
justifyContent="center"
flex="1"
width={['250px', '250px', '250px', 'auto']}
>
<Flex flexDirection={['column', 'column', 'column', 'row']} mb="10px">
<GradientsFont textTransform="uppercase" title={item.title} fontSize="20px" marginRight="5px" fontWeight="500">
{t(item.title)}
</GradientsFont>
<Text style={{ alignSelf: 'center', fontWeight: 'bold' }} height="30px" lineHeight="34px" width="100%">
<img
src="/images/home/vvs-info/aquaVector.svg"
alt="star1"
height="18px"
width="18px"
style={{
verticalAlign: 'sub',
marginRight: '5px',
}}
/>
{item.subTitle}
</Text>
</Flex>
<Text>{t(item.description)}</Text>
</Flex>
</Flex>
))}
<Flex justifyContent={isDesktop ? 'unset' : 'center'}>
{
isCountdown() ? (
<>
<StyledButton mr={10}>{t('White Paper (Coming Soon)')}</StyledButton>
<StyledButton variant="secondary">{t('Coming Soon')}</StyledButton>
</>
) : (
<>
<Link external href="https://docs.vvs.finance/litepaper">
<StyledButton mr={10}>{t('White Paper')}</StyledButton>
</Link>
<Link external href="https://docs.vvs.finance/litepaper/token-economics">
<StyledButton variant="secondary">{t('VVS Tokenomics')}</StyledButton>
</Link>
</>
)
}
</Flex>
</Flex>
{isDesktop && (
<Flex width="25%" maxWidth="600px" flex="1" minWidth="300px">
<FlyingDiamondsWrapper flex="1" position="relative" minHeight="600px" maxWidth="340px">
<CompositeImage {...diamondImages} />
</FlyingDiamondsWrapper>
</Flex>
)}
</Flex>
</>
)
}
