From efdbb3ff25d8024545ace1812475cbb3da2189f2 Mon Sep 17 00:00:00 2001 From: Hugo Marques Date: Mon, 3 Jun 2024 20:12:12 +0100 Subject: [PATCH] Add new Learn and Earn Design --- src/components/Sidebar.tsx | 2 + src/pages/learn-and-earn/pact/index.tsx | 27 +++++++++ src/utils/routes.ts | 16 ++++-- src/views/LearnAndEarn/Metrics.tsx | 2 +- src/views/LearnAndEarn/index.tsx | 52 +++++++++++++++++- src/views/Pact/index.tsx | 73 +++++++++++++++++++++++++ 6 files changed, 165 insertions(+), 7 deletions(-) create mode 100644 src/pages/learn-and-earn/pact/index.tsx create mode 100644 src/views/Pact/index.tsx diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index f501eef6..c458eb9c 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -168,6 +168,8 @@ const SidebarFooter = (props: { user?: User; isActive: boolean }) => { const { user } = props; const { address, wrongNetwork } = useWallet(); + console.log('User: ', user); + useEffect(() => { if (wrongNetwork) { openModal('wrongNetwork'); diff --git a/src/pages/learn-and-earn/pact/index.tsx b/src/pages/learn-and-earn/pact/index.tsx new file mode 100644 index 00000000..22cff6a2 --- /dev/null +++ b/src/pages/learn-and-earn/pact/index.tsx @@ -0,0 +1,27 @@ +import { GetStaticProps } from 'next'; +import Pact from '../../../views/Pact'; +import Prismic from '../../../libs/Prismic/Prismic'; + +const fetcher = async (params: any) => await Prismic.getByTypes(params); + +export const getStaticProps: GetStaticProps = async ({ + locale: lang, + previewData +}) => { + const data = await fetcher({ + lang, + types: ['pwa-view-learn-and-earn'] + }); + + return { + props: { + data, + fallback: '', + lang, + view: 'LearnAndEarn', + withPreview: !!previewData + } + }; +}; + +export default Pact; diff --git a/src/utils/routes.ts b/src/utils/routes.ts index 16b649c1..8b8a84c7 100644 --- a/src/utils/routes.ts +++ b/src/utils/routes.ts @@ -5,12 +5,12 @@ export type Routes = string[]; // Feature flag for learn and earn, remove once fully deployed const laePublicRoutes = config.enableLearnEarn === 'true' - ? ['/learn-and-earn', '/learn-and-earn/[level]'] + ? ['/learn-and-earn', '/learn-and-earn/pact', '/learn-and-earn/[level]'] : []; const laePrivateRoutes = config.enableLearnEarn === 'true' - ? ['/learn-and-earn/[level]/[lesson]'] + ? ['/learn-and-earn/[level]/[lesson]', '/learn-and-earn/pact'] : []; export const publicRoutes: Routes = [ @@ -27,14 +27,19 @@ export const publicRoutes: Routes = [ '/microcredit/application', '/microcredit/apply', '/microcredit/form/[id]', - '/microcredit' + '/microcredit', + '/learn-and-earn/pact' ]; export const privateRoutes: Routes = ['/profile', '/settings', '/mycommunity']; export const demoRoutes: Routes = []; -export const beneficiaryRoutes: Routes = ['/beneficiary', ...laePrivateRoutes]; +export const beneficiaryRoutes: Routes = [ + '/beneficiary', + ...laePrivateRoutes, + '/learn-and-earn/pact' +]; export const managerRoutes: Routes = [ '/manager', @@ -42,7 +47,8 @@ export const managerRoutes: Routes = [ '/manager/managers', '/user/[id]', '/beneficiaries', - ...laePrivateRoutes + ...laePrivateRoutes, + '/learn-and-earn/pact' ]; export const ambassadorRoutes: Routes = [ diff --git a/src/views/LearnAndEarn/Metrics.tsx b/src/views/LearnAndEarn/Metrics.tsx index 0d804738..2e478c81 100644 --- a/src/views/LearnAndEarn/Metrics.tsx +++ b/src/views/LearnAndEarn/Metrics.tsx @@ -164,7 +164,7 @@ const Metrics = (props: any) => { { const { prismic, lang } = props; + const { address } = useWallet(); const { view } = usePrismicData(); + const router = useRouter(); const { t } = useTranslations(); const { headingTitle: heading, @@ -44,6 +61,13 @@ const LearnAndEarn = (props: any) => { onlyBeneficiariesTooltip } = view.data; + const balance = useBalance({ + address, + token: '0x46c9757C5497c5B1f2eb73aE79b6B67D119B0B58' + })?.data; + + console.log('balance: ', balance); + const { levels, categories } = prismic; const auth = useSelector(selectCurrentUser); const { data } = useLevels( @@ -198,6 +222,32 @@ const LearnAndEarn = (props: any) => { + + + + Your PACT Balance + + + {/* {`${parseFloat(balance?.formatted || '0').toFixed( + 0 + )} PACT`} */} + 0000 + + + + { + router.push('/learn-and-earn/pact'); + }} + > + How To Use $PACT + + + + {} diff --git a/src/views/Pact/index.tsx b/src/views/Pact/index.tsx new file mode 100644 index 00000000..2d0bc814 --- /dev/null +++ b/src/views/Pact/index.tsx @@ -0,0 +1,73 @@ +import { Box, Display, Label, ViewContainer, colors } from '@impact-market/ui'; +import { usePrismicData } from 'src/libs/Prismic/components/PrismicDataProvider'; +import { useRouter } from 'next/router'; +import RichText from 'src/libs/Prismic/components/RichText'; +import String from '../../libs/Prismic/components/String'; +import styled from 'styled-components'; + +const Description = styled(RichText)` + a { + color: #5a6fef; + font-weight: 600; + text-decoration: none; + } +`; + +const Heading = styled(Display)` + color: ${colors.g700}; + font-size: 1.875rem; + font-weight: 600; + line-height: 2.375rem; + margin-bottom: 1rem; + text-align: center; + + @media (max-width: '576px') { + font-size: 1.1rem; + line-height: 28px; + } +`; + +const Pact = () => { + const { view } = usePrismicData(); + const router = useRouter(); + + return ( + + router.back()}> + + + + {view?.data?.howToPact} + + + + {view?.data?.stakePact} + + + + + + + ); +}; + +export default Pact;