Skip to content

F
frontend
Commit 7c4792d0 authored by Max Alekseenko's avatar Max Alekseenko Committed by GitHub
Browse files
Options

Add campaign and offer cards to the Merits dashboard (#2642)

parent 02026c49
Expand all Show whitespace changes
Inline Side-by-side
Showing with 291 additions and 45 deletions
public/static/merits/campaigns.svg 0 → 100644
View file @ 7c4792d0
<svg viewBox="0 0 184 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.83 78.287h31.624c11.672 0 21.144-9.357 21.144-20.914V26.1c0-11.557-9.472-20.914-21.144-20.914H24.831c-11.672 0-21.144 9.357-21.144 20.914v31.272c0 11.557 9.472 20.914 21.144 20.914Z" fill="#CFE3FF" stroke="#7E94CE" stroke-width="1.125" stroke-linejoin="round"/>
<path d="M22.581 74.538h31.624c11.671 0 21.143-9.357 21.143-20.914V22.352c0-11.557-9.472-20.914-21.143-20.914H22.58c-11.672 0-21.143 9.357-21.143 20.914v31.272c0 11.557 9.471 20.914 21.143 20.914Z" fill="#fff" stroke="#7E94CE" stroke-width="1.125" stroke-linejoin="round"/>
<path d="M31.138 32.901c.143 6.487 7.717 15.4 7.717 15.4s7.662-9.333 8.028-15.4c.397-6.561-7.454-13.299-8.083-13.827-.026-.022-.054-.021-.079.001-.588.538-7.73 7.21-7.583 13.826Z" fill="#FD95AF" stroke="#F27DA2" stroke-width="2.143"/>
<path d="M52.963 43.002c3.149-6.104.29-17.6.29-17.6s-9.824 2.533-13.206 7.95c-3.653 5.85-1.66 18.191-1.49 19.197.008.04.038.058.076.047.904-.266 11.13-3.39 14.33-9.594Z" fill="#FEE231" stroke="#CCAD18" stroke-width="2.143"/>
<path d="M24.53 42.601c3.065 6.146 14.082 10.733 14.082 10.733s3.07-12.101.703-18.023c-2.562-6.403-13.087-9.628-13.926-9.876-.033-.01-.06.004-.072.037-.3.806-3.914 10.857-.786 17.129Z" fill="#7ED5EE" stroke="#3DA6C5" stroke-width="2.143"/>
<path d="M25.596 51.18c4.098 4.855 13.141 4.615 14.703 4.535a.25.25 0 0 0 .24-.248c.043-1.535.114-10.26-3.59-14.397-4.381-4.895-15.692-5.938-16.688-6.02-.041-.004-.068.023-.064.064.09.942 1.142 11.023 5.4 16.067Z" fill="#68AE19" stroke="#005225" stroke-width="2.143"/>
<path d="M42.49 40.333c-4.238 4.387-4.51 14.055-4.526 15.274a.127.127 0 0 0 .124.13c1.175.032 10.265.126 14.606-4.155 4.68-4.614 5.97-15.572 6.075-16.538.004-.04-.021-.067-.062-.065-.955.04-11.618.593-16.217 5.354Z" fill="#68AE19" stroke="#005225" stroke-width="2.143"/>
<path d="M129.795 78.287h31.624c11.671 0 21.143-9.357 21.143-20.914V26.1c0-11.557-9.472-20.914-21.143-20.914h-31.624c-11.672 0-21.143 9.357-21.143 20.914v31.272c0 11.557 9.471 20.914 21.143 20.914Z" fill="#CFE3FF" stroke="#7E94CE" stroke-width="1.125" stroke-linejoin="round"/>
<path d="M127.546 74.538h31.624c11.671 0 21.143-9.357 21.143-20.914V22.352c0-11.557-9.472-20.914-21.143-20.914h-31.624c-11.672 0-21.143 9.357-21.143 20.914v31.272c0 11.557 9.471 20.914 21.143 20.914Z" fill="#fff" stroke="#7E94CE" stroke-width="1.125" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M137.981 51.029a4.626 4.626 0 0 1-4.411-3.228l-3.136-9.883h-1.927a4.629 4.629 0 0 1-4.412-3.228l-1.863-5.872h6.988l-3.686-5.553h34.921l-3.686 5.553h6.988l-1.863 5.872a4.628 4.628 0 0 1-4.411 3.228h-1.928l-3.135 9.883a4.629 4.629 0 0 1-4.412 3.228h-10.027Zm-2.368-15.81c0 1.49 1.113 2.7 2.486 2.7 1.373 0 2.486-1.21 2.486-2.7 0-1.49-1.113-2.7-2.486-2.7-1.373 0-2.486 1.21-2.486 2.7Zm14.764 0c0 1.49-1.113 2.7-2.486 2.7-1.374 0-2.487-1.21-2.487-2.7 0-1.49 1.113-2.7 2.487-2.7 1.373 0 2.486 1.21 2.486 2.7Z" fill="#004293"/>
<path d="M77.313 78.287h31.623c11.672 0 21.144-9.357 21.144-20.914V26.1c0-11.557-9.472-20.914-21.144-20.914H77.313c-11.672 0-21.144 9.357-21.144 20.914v31.272c0 11.557 9.472 20.914 21.144 20.914Z" fill="#CFE3FF" stroke="#7E94CE" stroke-width="1.125" stroke-linejoin="round"/>
<path d="M75.064 74.538h31.623c11.672 0 21.144-9.357 21.144-20.914V22.352c0-11.557-9.472-20.914-21.144-20.914H75.064c-11.672 0-21.144 9.357-21.144 20.914v31.272c0 11.557 9.472 20.914 21.144 20.914Z" fill="#fff" stroke="#7E94CE" stroke-width="1.125" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M109.285 48.52h.013v2.028a5.795 5.795 0 0 1-5.795 5.796h-3.333v-.01H81.7a1.77 1.77 0 0 1-1.768-1.774v-1.486c.007-.066.011-.134.011-.202 0-1.043-.908-1.889-2.028-1.889-1.08 0-1.964.787-2.025 1.78l-.005.002v1.672a1.833 1.833 0 1 1-3.665 0v-7.123a2.324 2.324 0 0 1-.016-.238v-4.203c0-.98.792-1.774 1.769-1.774H85.56a1.687 1.687 0 1 1 0 3.374h-1.792c-1.032.014-1.865.917-1.865 2.029 0 1.12.846 2.028 1.889 2.028h.003c.123.033 9.006.045 15.868.05v-.009h.028c1.025 0 1.862-.799 1.924-1.808l.004-.003v-4.316c0-.8.649-1.449 1.449-1.449h4.767c.8 0 1.449.65 1.449 1.45v6.075ZM97.713 26.796c-.042 0-.084.002-.126.004-1.258-.038-12.012-.044-15.724-.044l-.05-.001c-1.025 0-1.862.8-1.924 1.809l-.003.002v4.316c0 .8-.649 1.449-1.449 1.449H73.67c-.8 0-1.449-.649-1.449-1.45v-6.085h-.016v-2.029a5.796 5.796 0 0 1 5.796-5.796h3.333v.033h18.469c.976 0 1.768.794 1.768 1.774v1.498a1.734 1.734 0 0 0 0 .36c.003.078.015.149.036.213.195.854 1.009 1.493 1.984 1.493 1.077 0 1.957-.78 2.024-1.768l.003-.001v-.05l.001-.07v-.025l-.001-.043v-1.496a1.832 1.832 0 1 1 3.665 0v7.139c.011.094.016.173.016.234v4.203c0 .98-.792 1.773-1.769 1.773h-4.191c-.068 0-.135-.004-.202-.011h-7.195a1.687 1.687 0 1 1 0-3.374h1.771c1.043 0 1.889-.908 1.889-2.028s-.846-2.029-1.89-2.029Z" fill="#5353D3"/>
</svg>
public/static/merits/offers.svg 0 → 100644
View file @ 7c4792d0
This diff is collapsed.
ui/pages/RewardsDashboard.tsx
View file @ 7c4792d0
import { Flex, Image, Alert } from '@chakra-ui/react';
import { Flex, Alert } from '@chakra-ui/react';
import React, { useEffect, useState } from 'react';
import config from 'configs/app';
......@@ -7,6 +7,7 @@ import { apos } from 'lib/html-entities';
import DailyRewardClaimButton from 'ui/rewards/dashboard/DailyRewardClaimButton';
import RewardsDashboardCard from 'ui/rewards/dashboard/RewardsDashboardCard';
import RewardsDashboardCardValue from 'ui/rewards/dashboard/RewardsDashboardCardValue';
import RewardsDashboardInfoCard from 'ui/rewards/dashboard/RewardsDashboardInfoCard';
import RewardsReadOnlyInputWithCopy from 'ui/rewards/RewardsReadOnlyInputWithCopy';
import AdBanner from 'ui/shared/ad/AdBanner';
import Skeleton from 'ui/shared/chakra/Skeleton';
......@@ -49,11 +50,10 @@ const RewardsDashboard = () => {
title="Dashboard"
secondRow={ (
<span>
The Blockscout Merits Program is just getting started! Learn more about the details,
features, and future plans in our{ ' ' }
<LinkExternal href="https://www.blog.blockscout.com/blockscout-merits-rewarding-block-explorer-skills">
blog post
</LinkExternal>.
<LinkExternal href={ `https://merits.blockscout.com/?tab=users&utm_source=${ config.chain.id }&utm_medium=text-banner` }>
Explore the Merits Hub
</LinkExternal>{ ' ' }
to learn more info about a program, spend your Merits, learn how to earn more, and much more.
</span>
) }
/>
......@@ -133,7 +133,7 @@ const RewardsDashboard = () => {
/>
</RewardsDashboardCard>
</Flex>
<Flex gap={ 6 } flexDirection={{ base: 'column', md: 'row' }}>
<Flex w="full" gap={ 6 } flexDirection={{ base: 'column', md: 'row' }}>
<RewardsDashboardCard
title="Referral program"
description={ (
......@@ -170,45 +170,38 @@ const RewardsDashboard = () => {
/>
</Flex>
</RewardsDashboardCard>
<RewardsDashboardCard
<RewardsDashboardInfoCard
title="Badges"
description={ (
<Flex flexDir="column" gap={ 2 }>
<span>
Collect limited and legendary badges by completing different Blockscout related tasks.
Go to the badges website to see what{ apos }s available and start your collection today.
</span>
</Flex>
) }
>
<Flex
flex={ 1 }
gap={ 4 }
pl={ 10 }
pr={ 7 }
py={{ base: 4, lg: 0 }}
flexDirection={{ base: 'column', lg: 'row' }}
justifyContent="space-between"
alignItems="center"
>
<Image
src="/static/badges.svg"
alt="Badges"
w="260px"
h="86px"
fallback={ <Skeleton w="260px" h="86px"/> }
description={ `Collect limited and legendary badges by completing different Blockscout related tasks.
Go to the badges website to see what${ apos }s available and start your collection today.` }
imageSrc="/static/merits/badges.svg"
imageWidth="260px"
imageHeight="86px"
linkText="View badges"
linkHref={ `https://merits.blockscout.com/?tab=badges&utm_source=${ config.chain.id }&utm_medium=badges` }
/>
<LinkExternal
href="https://merits.blockscout.com/?tab=badges&utm_source=blockscout&utm_medium=dashboard"
fontSize="md"
fontWeight="500"
>
View badges
</LinkExternal>
</Flex>
</RewardsDashboardCard>
<Flex w="full" gap={ 6 } flexDirection={{ base: 'column', md: 'row' }}>
<RewardsDashboardInfoCard
title="Blockscout campaigns"
description="Join Blockscout activities to earn bonus Merits and exclusive rewards from our partners!"
imageSrc="/static/merits/campaigns.svg"
imageWidth="180px"
imageHeight="76px"
linkText="Check campaigns"
linkHref={ `https://merits.blockscout.com/?tab=campaigns&utm_source=${ config.chain.id }&utm_medium=campaigns` }
/>
<RewardsDashboardInfoCard
title="Use your Merits"
description="Spend your Merits to get exclusive discounts and offers across several web3 products!"
imageSrc="/static/merits/offers.svg"
imageWidth="180px"
imageHeight="86px"
linkText="Check offers"
linkHref={ `https://merits.blockscout.com/?tab=redeem&utm_source=${ config.chain.id }&utm_medium=redeem` }
/>
</Flex>
<Flex gap={ 6 } flexDirection={{ base: 'column', md: 'row' }}>
<Flex w="full" gap={ 6 } flexDirection={{ base: 'column', md: 'row' }}>
<RewardsDashboardCard
title="Activity"
description="Earn Merits for your everyday Blockscout activities. You deserve to be rewarded for choosing open-source public goods!"
......
ui/rewards/dashboard/RewardsDashboardInfoCard.tsx 0 → 100644
View file @ 7c4792d0
import { Flex, Image } from '@chakra-ui/react';
import React from 'react';
import Skeleton from 'ui/shared/chakra/Skeleton';
import LinkExternal from 'ui/shared/links/LinkExternal';
import RewardsDashboardCard from './RewardsDashboardCard';
type Props = {
title: string;
description: string | React.ReactNode;
imageSrc: string;
imageWidth: string;
imageHeight: string;
linkText: string;
linkHref: string;
};
const RewardsDashboardInfoCard = ({ title, description, imageSrc, imageWidth, imageHeight, linkText, linkHref }: Props) => (
<RewardsDashboardCard
title={ title }
description={ description }
>
<Flex
flex={ 1 }
gap={ 4 }
pl={ 10 }
pr={ 7 }
py={{ base: 4, lg: 0 }}
flexDirection={{ base: 'column', lg: 'row' }}
justifyContent="space-between"
alignItems="center"
>
<Image
src={ imageSrc }
alt={ title }
w={ imageWidth }
h={ imageHeight }
fallback={ <Skeleton w={ imageWidth } h={ imageHeight }/> }
/>
<LinkExternal
href={ linkHref }
fontSize="md"
fontWeight="500"
>
{ linkText }
</LinkExternal>
</Flex>
</RewardsDashboardCard>
);
export default RewardsDashboardInfoCard;
ui/rewards/login/steps/LoginStepContent.tsx
View file @ 7c4792d0
......@@ -106,7 +106,7 @@ const LoginStepContent = ({ goNext, closeModal, openAuthModal }: Props) => {
return (
<>
<Image
src="/static/merits_program.png"
src="/static/merits/merits_program.png"
alt="Merits program"
mb={ 3 }
fallback={ <Skeleton w="full" h="120px" mb={ 3 }/> }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment