-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(earn): add tier banner on lateral sidebar (#1299)
* feat(earn): add tier banner on lateral sidebar * fixup! feat(earn): add tier banner on lateral sidebar
- Loading branch information
Showing
7 changed files
with
571 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
391 changes: 391 additions & 0 deletions
391
apps/root/src/frame/components/navigation/promoted-banners/tier-banner/background.tsx
Large diffs are not rendered by default.
Oops, something went wrong.
115 changes: 115 additions & 0 deletions
115
apps/root/src/frame/components/navigation/promoted-banners/tier-banner/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import React from 'react'; | ||
| import styled from 'styled-components'; | ||
| import { colors, ContainerBox, Typography, AnimatedArrowRightIcon } from 'ui-library'; | ||
| import BackgroundGrid from './background'; | ||
| import { FormattedMessage } from 'react-intl'; | ||
| import { useThemeMode } from '@state/config/hooks'; | ||
| import { changeRoute } from '@state/tabs/actions'; | ||
| import { TIER_VIEW_ROUTE } from '@constants/routes'; | ||
| import { useAppDispatch } from '@state/hooks'; | ||
| import usePushToHistory from '@hooks/usePushToHistory'; | ||
| import useAnalytics from '@hooks/useAnalytics'; | ||
|
|
||
| const StyledPromotedBanner = styled(ContainerBox).attrs({ flex: 1, gap: 1, flexDirection: 'column' })` | ||
| ${({ | ||
| theme: { | ||
| palette: { mode, gradient }, | ||
| spacing, | ||
| }, | ||
| }) => ` | ||
| // width: 208px; | ||
| // height: 122px; | ||
| padding: ${spacing(3)}; | ||
| cursor: pointer; | ||
| position: relative; | ||
| border-radius: ${spacing(3)}; | ||
| border: 1px solid ${colors[mode].accent.primary}; | ||
| background: ${gradient.earnWizard}; | ||
| /* dropshadow/100 */ | ||
| box-shadow: ${colors[mode].dropShadow.dropShadow100}; | ||
| `} | ||
| `; | ||
|
|
||
| const StyledGridBg = styled.div` | ||
| position: absolute; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| display: flex; | ||
| `; | ||
|
|
||
| const StyledStarBg = styled.div` | ||
| position: absolute; | ||
| top: -13px; | ||
| right: -6px; | ||
| width: 34px; | ||
| height: 34px; | ||
| `; | ||
|
|
||
| const StlyedDarkStar = styled(StyledStarBg)` | ||
| background: url('https://ipfs.io/ipfs/bafkreicxqwgktunpqzqsa5y42w4rrkpun3cd7meqsbxnks6yckncgnvmje') 50% / contain | ||
| no-repeat; | ||
| `; | ||
| const StlyedLightStar = styled(StyledStarBg)` | ||
| background: url('https://ipfs.io/ipfs/bafkreih4anauqa24gjlakcpx2mq5ltqiuoqmjts7xcfrpi4b7e4monfzeq') 50% / contain | ||
| no-repeat; | ||
| `; | ||
|
|
||
| const StyledTierPillChevronContainer = styled(ContainerBox).attrs({ alignSelf: 'flex-end' })` | ||
| ${({ | ||
| theme: { | ||
| palette: { mode }, | ||
| }, | ||
| }) => ` | ||
| color: ${colors[mode].accent.primary}; | ||
| `} | ||
| `; | ||
|
|
||
| const PromotedTierBanner = () => { | ||
| const [hovered, setHovered] = React.useState(false); | ||
| const mode = useThemeMode(); | ||
| const dispatch = useAppDispatch(); | ||
| const pushToHistory = usePushToHistory(); | ||
| const { trackEvent } = useAnalytics(); | ||
|
|
||
| const onClick = () => { | ||
| dispatch(changeRoute(TIER_VIEW_ROUTE.key)); | ||
| pushToHistory(`/${TIER_VIEW_ROUTE.key}`); | ||
| trackEvent('Tier Promoted banner - Go to tier view'); | ||
| }; | ||
|
|
||
| return ( | ||
| <StyledPromotedBanner | ||
| onMouseEnter={() => setHovered(true)} | ||
| onMouseLeave={() => setHovered(false)} | ||
| onClick={onClick} | ||
| > | ||
| <Typography | ||
| variant="labelSemiBold" | ||
| color={mode === 'light' ? colors[mode].accent.accent600 : colors[mode].typography.white} | ||
| > | ||
| <FormattedMessage description="navigation.tier-promoted-banner.title" defaultMessage="Refer friends!" /> | ||
| </Typography> | ||
| <Typography | ||
| variant="labelRegular" | ||
| color={mode === 'light' ? colors[mode].accent.accent600 : colors[mode].typography.white} | ||
| > | ||
| <FormattedMessage | ||
| description="navigation.tier-promoted-banner.description" | ||
| defaultMessage="Refer friends and upgrade your tier level" | ||
| /> | ||
| </Typography> | ||
| {mode === 'light' ? <StlyedLightStar /> : <StlyedDarkStar />} | ||
| <StyledTierPillChevronContainer> | ||
| <AnimatedArrowRightIcon $hovered={hovered} fontSize="large" /> | ||
| </StyledTierPillChevronContainer> | ||
| <StyledGridBg> | ||
| <BackgroundGrid /> | ||
| </StyledGridBg> | ||
| </StyledPromotedBanner> | ||
| ); | ||
| }; | ||
|
|
||
| export default PromotedTierBanner; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import React from 'react'; | ||
| import styled from 'styled-components'; | ||
| import { ContainerBox } from '../components'; | ||
| import { SvgIconProps } from '@mui/material'; | ||
| import { ArrowRightLightIcon } from '.'; | ||
|
|
||
| const AnimatedArrowRightLight = styled((props: SvgIconProps) => ( | ||
| <ContainerBox alignItems="center" flex={1} justifyContent="center"> | ||
| <ArrowRightLightIcon {...props} sx={{ flex: '1' }} /> | ||
| </ContainerBox> | ||
| ))<{ $hovered?: boolean }>` | ||
| ${({ $hovered, theme: { spacing } }) => ` | ||
| transition: transform 0.15s ease; | ||
| transform: translateX(${$hovered ? spacing(1) : 0}); | ||
| `} | ||
| `; | ||
|
|
||
| export default AnimatedArrowRightLight; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters