Feature: Added Borrower + Page permission component + Connect Wallet …

…component (#701)

Co-authored-by: Hugo Marques <[email protected]>

src/api/user.ts

@@ -15,6 +15,7 @@ export interface PutPostUser {
     avatarMediaPath?: string;
     beneficiary?: any;
     bio?: string;
+    borrower?: any;
     children?: number;
     councilMember?: any;
     country?: string;

src/components/CheckPermission.tsx

@@ -0,0 +1,38 @@
+import {
+    Box,
+    Card,
+    CircledIcon,
+    Display,
+    ViewContainer
+} from '@impact-market/ui';
+import Message from 'src/libs/Prismic/components/Message';
+import React from 'react';
+import styled from 'styled-components';
+
+const CardStyled = styled(Card)`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 1rem;
+    padding: 2rem;
+`;
+
+const CheckPermission = ({ title }: { title?: string }) => (
+    <ViewContainer {...({} as any)}>
+        {title && (
+            <Display g900 medium mb={2}>
+                {title}
+            </Display>
+        )}
+        <CardStyled>
+            <CircledIcon icon="forbidden" error medium />
+            <Box>
+                <Message id="noPermission" g900 large medium />
+            </Box>
+        </CardStyled>
+    </ViewContainer>
+);
+
+export default CheckPermission;

src/components/ConnectWallet.tsx

@@ -0,0 +1,72 @@
+import {
+    Box,
+    Button,
+    Card,
+    CircledIcon,
+    Display,
+    ViewContainer
+} from '@impact-market/ui';
+import Message from 'src/libs/Prismic/components/Message';
+import React, { useState } from 'react';
+import String from '../libs/Prismic/components/String';
+import styled from 'styled-components';
+import useWallet from 'src/hooks/useWallet';
+
+const CardStyled = styled(Card)`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 1rem;
+    padding: 2rem;
+`;
+
+const ConnectWallet = ({ title }: { title?: string }) => {
+    const { connect } = useWallet();
+
+    const ConnectButton = (props: any) => {
+        const [isConnecting, setIsConnecting] = useState(false);
+
+        const handleConnectClick = async () => {
+            setIsConnecting(true);
+
+            await connect();
+
+            setIsConnecting(false);
+        };
+
+        return (
+            <Button
+                {...props}
+                icon="coins"
+                isLoading={isConnecting}
+                onClick={handleConnectClick}
+                secondary
+            >
+                <String id="connectWallet" />
+            </Button>
+        );
+    };
+
+    return (
+        <ViewContainer {...({} as any)}>
+            {title && (
+                <Display g900 medium mb={2}>
+                    {title}
+                </Display>
+            )}
+            <CardStyled>
+                <CircledIcon icon="alertCircle" warning medium />
+                <Box>
+                    <Message id="connectWalletAccess" g900 large medium />
+                </Box>
+                <Box margin="0 auto">
+                    <ConnectButton />
+                </Box>
+            </CardStyled>
+        </ViewContainer>
+    );
+};
+
+export default ConnectWallet;

src/components/Sidebar.tsx

@@ -86,6 +86,9 @@ const getUserType = (user: User) => {
     if (user?.roles?.includes('loanManager')) {
         return 'loan-manager';
     }
+    if (user?.roles?.includes('borrower')) {
+        return 'borrower';
+    }
 
     return 'donor';
 };

src/constants/userTypes.ts

@@ -1,6 +1,7 @@
 const types = {
     ambassador: 'ambassador',
     beneficiary: 'beneficiary',
+    borrower: 'borrower',
     councilMember: 'councilMember',
     demo: 'demo',
     donor: 'donor',

src/hooks/useGuard.tsx

@@ -12,6 +12,7 @@ import {
     getUserTypes,
     userAmbassador,
     userBeneficiary,
+    userBorrower,
     userCouncilMember,
     userLoanManager,
     userManager
@@ -91,6 +92,10 @@ const useGuard = (options: UseGuardType) => {
                     if (type?.includes(userCouncilMember)) {
                         userPaths = userPaths.concat(councilMemberRoutes);
                     }
+
+                    if (type?.includes(userBorrower)) {
+                        userPaths = userPaths.concat(borrowerRoutes);
+                    }
                 }
 
                 // TEMPORARY

src/utils/routes.ts

@@ -26,7 +26,8 @@ export const publicRoutes: Routes = [
     ...laePublicRoutes,
     '/microcredit/application',
     '/microcredit/apply',
-    '/microcredit/form/[id]'
+    '/microcredit/form/[id]',
+    '/microcredit'
 ];
 
 export const privateRoutes: Routes = ['/profile', '/settings', '/mycommunity'];

src/utils/users.ts

@@ -11,6 +11,7 @@ export const userManager = 'manager';
 export const userBeneficiary = 'beneficiary';
 export const userCouncilMember = 'councilMember';
 export const userLoanManager = 'loanManager';
+export const userBorrower = 'borrower';
 
 export const getUserTypes = (user: PutPostUser) => {
     const types = [userDonor];
@@ -20,6 +21,7 @@ export const getUserTypes = (user: PutPostUser) => {
     if (user?.councilMember) types.push(userCouncilMember);
     if (user?.ambassador) types.push(userAmbassador);
     if (user?.loanManager) types.push(userLoanManager);
+    if (user?.borrower) types.push(userBorrower);
 
     return types;
 };

src/views/MicroCredit/index.tsx

@@ -8,6 +8,7 @@ import { useLazyGetBorrowerQuery } from '../../api/microcredit';
 import { useRouter } from 'next/router';
 import { useSelector } from 'react-redux';
 import ClaimLoan from './ClaimLoan';
+import ConnectWallet from 'src/components/ConnectWallet';
 import LoanCompleted from './LoanCompleted';
 import LoanRejected from './LoanRejected';
 import LoanRepayment from './LoanRepayment';
@@ -17,7 +18,6 @@ import String from '../../libs/Prismic/components/String';
 import useFilters from 'src/hooks/useFilters';
 import useTranslations from '../../libs/Prismic/hooks/useTranslations';
 // import InfoAccordion from './InfoAccordion';
-
 import BigNumber from 'bignumber.js';
 import processTransactionError from 'src/utils/processTransactionError';
 import usePactPriceUSD from 'src/hooks/usePactPriceUSD';
@@ -53,7 +53,7 @@ const MicroCredit = (props: any) => {
         ).toString();
 
         getEstimatedLoanRewards(result);
-    }, [loan]);
+    }, [loan, auth?.user?.address]);
 
     const router = useRouter();
     const { getByKey } = useFilters();
@@ -131,9 +131,8 @@ const MicroCredit = (props: any) => {
     useEffect(() => {
         if (isErrorGetBorrower) {
             processTransactionError(errorGetBorrower, 'loading_borrower_page');
-            router.push('/');
         }
-    }, [isErrorGetBorrower]);
+    }, [isErrorGetBorrower, auth?.user?.address]);
 
     useEffect(() => {
         const getLoans = async () => {
@@ -171,20 +170,20 @@ const MicroCredit = (props: any) => {
                 } else {
                     setLoanId(activeLoanId);
                 }
-            } else {
-                router.push('/');
             }
         };
 
         getLoans().catch((e) => {
+            console.log(e);
             processTransactionError(e, 'loading_borrower_page');
-            router.push('/');
         });
-    }, []);
+    }, [auth?.user?.address]);
 
     useEffect(() => {
         setIsOverviewOpen(loan.startDate === 0);
-    }, [isReady]);
+    }, [isReady, auth?.user?.address]);
+
+    if (!auth?.user?.address) return <ConnectWallet title={headingTitle} />;
 
     return (
         <ViewContainer
@@ -193,12 +192,6 @@ const MicroCredit = (props: any) => {
                 (!isReady && loading) || !isPactPriceReady || !isRewardsReady
             }
         >
-            {/* <Alert
-                warning
-                icon="alertTriangle"
-                mb={1.5}
-                message={'This is a warning'}
-            /> */}
             {getByKey('contractAddress') && (
                 <Box as="a" onClick={() => router.back()}>
                     <Label