impactMarket · hugomarquesdev · Jun 3, 2024
diff --git 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
@@ -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
@@ -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,22 +27,28 @@ 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',
     '/manager/beneficiaries',
     '/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
@@ -164,7 +164,7 @@ const Metrics = (props: any) => {
                     </RewardsButton>
                     <Text small semibold style={{ marginTop: '.5rem' }}>
                         <a
-                            href={`mailto:external-issues-aaaamvozkp6sgugn64lldg5n64@ipctmarket.slack.com?subject=Learn%20and%20Earn%20-%20Opera&body=Please%20Describe%20Your%20Problem:%0A%0A%0A------------------------------%0A%0AYour%20Wallet%20Address:%0A${auth?.user?.address.toString()}%0A%0AWe%20collected%20your%20wallet%20address%20to%20analyze%20and%20resolve%20reported%20bugs.%20Without%20this%20information%20it%20may%20be%20difficult%20to%20provide%20proper%20help.%20Your%20funds%20remain%20secure.`}
+                            href={`mailto:external-issues-aaaamvozkp6sgugn64lldg5n64@ipctmarket.slack.com?subject=Learn%20and%20Earn%20-%20Dapp&body=Please%20Describe%20Your%20Problem:%0A%0A%0A------------------------------%0A%0AYour%20Wallet%20Address:%0A${auth?.user?.address.toString()}%0A%0AWe%20collected%20your%20wallet%20address%20to%20analyze%20and%20resolve%20reported%20bugs.%20Without%20this%20information%20it%20may%20be%20difficult%20to%20provide%20proper%20help.%20Your%20funds%20remain%20secure.`}
                             style={{
                                 color: '#5A6FEF',
                                 textDecoration: 'none'

diff --git a/src/views/LearnAndEarn/index.tsx b/src/views/LearnAndEarn/index.tsx
@@ -1,17 +1,22 @@
 import {
     Alert,
     Box,
+    Card,
     Display,
     DropdownMenu,
     Pagination,
     Tab,
     TabList,
     Tabs,
-    ViewContainer
+    Text,
+    ViewContainer,
+    colors
 } from '@impact-market/ui';
 import { selectCurrentUser } from '../../state/slices/auth';
+import { useBalance } from 'wagmi';
 import { useEffect, useState } from 'react';
 import { usePrismicData } from '../../libs/Prismic/components/PrismicDataProvider';
+import { useRouter } from 'next/router';
 import { useSelector } from 'react-redux';
 import Filters from '../../components/Filters';
 import LevelsTable from './LevelsTable';
@@ -23,6 +28,7 @@ import useFilters from '../../hooks/useFilters';
 import useLevels from 'learn-and-earn-submodule/hooks/useLevels';
 import useSWR from 'swr';
 import useTranslations from '../../libs/Prismic/hooks/useTranslations';
+import useWallet from 'src/hooks/useWallet';
 
 const ITEMS_PER_PAGE = 3;
 
@@ -32,9 +38,20 @@ const Dropdown = styled(DropdownMenu)`
     }
 `;
 
+const BalanceCard = styled(Card)`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-top: 1rem;
+`;
+
 const LearnAndEarn = (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) => {
                 </Box>
             </Box>
 
+            <BalanceCard>
+                <Box>
+                    <Text extrasmall medimum style={{ color: colors.g500 }}>
+                        Your PACT Balance
+                    </Text>
+                    <Text large semibold>
+                        {/* {`${parseFloat(balance?.formatted || '0').toFixed(
+                            0
+                        )} PACT`} */}
+                        0000
+                    </Text>
+                </Box>
+                <Box>
+                    <Text
+                        small
+                        semibold
+                        style={{ color: '#5A6FEF', cursor: 'pointer' }}
+                        onClick={() => {
+                            router.push('/learn-and-earn/pact');
+                        }}
+                    >
+                        How To Use $PACT
+                    </Text>
+                </Box>
+            </BalanceCard>
+
             {<Progress />}
             <Tabs defaultIndex={0}>
                 <TabList>

diff --git a/src/views/Pact/index.tsx 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 (
+        <ViewContainer {...({} as any)} isLoading={false}>
+            <Box as="a" onClick={() => router.back()}>
+                <Label content={<String id="back" />} icon="arrowLeft" />
+            </Box>
+            <Box mt="1.5rem">
+                <Heading style={{ textAlign: 'left' }}>
+                    {view?.data?.howToPact}
+                </Heading>
+                <Box>
+                    <Heading
+                        style={{
+                            fontSize: '16px',
+                            marginBottom: 0,
+                            textAlign: 'left'
+                        }}
+                    >
+                        {view?.data?.stakePact}
+                    </Heading>
+                    <Description
+                        content={view?.data?.stakePactDescription}
+                        small
+                        regular
+                        // @ts-ignore
+                        style={{ color: '#344054' }}
+                    />
+                    <Description
+                        content={view?.data?.readyToStake}
+                        small
+                        regular
+                        // @ts-ignore
+                        style={{ color: '#344054', marginTop: '0.5rem' }}
+                    />
+                </Box>
+            </Box>
+        </ViewContainer>
+    );
+};
+
+export default Pact;