Merge pull request #22 from PotLock/feat/donation-modal

Feat/donation-modal
PotLock · May 2, 2024 · 1d9a429 · 1d9a429
2 parents d241b6e + 69c596e
commit 1d9a429
Show file tree

Hide file tree

Showing 28 changed files with 497 additions and 435 deletions.
diff --git a/src/Main.tsx b/src/Main.tsx
@@ -1,10 +1,16 @@
-import { ModulesProvider } from "alem";
+import { ModulesProvider, useParams } from "alem";
 import Nav from "./components/Nav/Nav";
 import Routes from "./routes/Routes";
 // import DonationsInfoProvider from "./contexts/DonationsInfoProvider";
 import Banner from "./components/Banner/Banner";
+import ModalSuccess from "./modals/ModalSuccess/ModalSuccess";
+import ModalDonation from "./modals/ModalDonation";
+import { useDonationModal } from "./hooks/useDonationModal";
 
 const Main = () => {
+  const { transactionHashes: _transactionHashes } = useParams();
+  const { successfulDonation, donationModalProps } = useDonationModal();
+
   return (
     // <DonationsInfoProvider>
     <>
@@ -14,6 +20,8 @@ const Main = () => {
         <Routes />
       </div>
       <Banner />
+      {(successfulDonation || _transactionHashes) && <ModalSuccess />}
+      {donationModalProps && <ModalDonation />}
     </>
     // </DonationsInfoProvider>
   );

diff --git a/src/assets/svgs/HomeBannerBackground.tsx b/src/assets/svgs/HomeBannerBackground.tsx
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -1,4 +1,4 @@
-import { Big, RouteLink, Social, State, context, useEffect, useMemo, useParams, useState } from "alem";
+import { Big, RouteLink, Social, State, context, useContext, useEffect, useMemo, useParams, useState } from "alem";
 import CardSkeleton from "../../pages/Projects/components/CardSkeleton";
 import {
   Amount,
@@ -28,22 +28,26 @@ import yoctosToUsdWithFallback from "@app/utils/yoctosToUsdWithFallback";
 import yoctosToNear from "@app/utils/yoctosToNear";
 import Image from "../mob.near/Image";
 import _address from "@app/utils/_address";
-import ModalDonation from "@app/modals/ModalDonation";
+import { useDonationModal } from "@app/hooks/useDonationModal";
 
 const Card = (props: any) => {
-  const { payoutDetails } = props;
+  const { payoutDetails, allowDonate: _allowDonate } = props;
   const { potId } = useParams();
+
+  const { setDonationModalProps } = useDonationModal();
+
   // TODO: Bug -> não esta importando o utils
   // Só importa funcóes que retornam algo, um objeto direto está falhando.
   // const { ipfsUrlFromCid, yoctosToNear, yoctosToUsdWithFallback } = utils;
   // console.log(utils);
 
   const [ready, isReady] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
 
   const projectId = props.project.registrant_id || props.projectId;
   const profile = Social.getr(`${projectId}/profile`) as any;
 
+  const allowDonate = _allowDonate ?? true;
+
   const MAX_DESCRIPTION_LENGTH = 80;
 
   const { name, description } = profile;
@@ -109,7 +113,7 @@ const Card = (props: any) => {
 
   return (
     <>
-      <RouteLink to={routesPath.PROJECT_DETAIL_TAB} params={{ projectId }}>
+      <RouteLink to={routesPath.PROJECT_DETAIL_TAB} params={{ projectId, ...(potId ? { potId } : {}) }}>
         <CardContainer>
           <HeaderContainer className="pt-0 position-relative">
             <BackgroundImageContainer>
@@ -183,15 +187,17 @@ const Card = (props: any) => {
                 <AmountDescriptor>{payoutDetails.donorCount === 1 ? "Donor" : "Donors"}</AmountDescriptor>
               </DonationsInfoItem>
             )}
-            {props.allowDonate && context.accountId && (
+            {allowDonate && context.accountId && (
               <DonationButton
                 onClick={(e) => {
                   e.preventDefault();
-                  setIsOpen(true);
+                  setDonationModalProps({
+                    projectId,
+                  });
                 }}
                 disabled={!context.accountId}
               >
-                {props.requireVerification ? "Verify to donate" : "Donate"}
+                Donate
               </DonationButton>
             )}
           </DonationsInfoContainer>
@@ -203,7 +209,6 @@ const Card = (props: any) => {
           )}
         </CardContainer>
       </RouteLink>
-      {isOpen && <ModalDonation projectId={projectId} onClose={() => setIsOpen(false)} />}
     </>
   );
 };

diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx
@@ -1,4 +1,4 @@
-import { State, context, useMemo, useState } from "alem";
+import { context, useMemo } from "alem";
 import {
   Button,
   ButtonRegisterProject,
@@ -11,10 +11,10 @@ import {
   Underline,
 } from "./styles";
 import DonationStats from "../../pages/Projects/components/DonationStats/DonationStats";
-import ModalDonation from "@app/modals/ModalDonation";
+import { useDonationModal } from "@app/hooks/useDonationModal";
 
 const Hero = ({ projectsData }: { projectsData: any }) => {
-  const [donateTo, setDonateTo] = useState("");
+  const { setDonationModalProps } = useDonationModal();
 
   const getRandomProject = () => {
     const approvedProjects = projectsData.approvedProjects;
@@ -25,11 +25,9 @@ const Hero = ({ projectsData }: { projectsData: any }) => {
   };
 
   const openDonateRandomlyModal = () => {
-    setDonateTo(getRandomProject());
-  };
-
-  const closeDonateRandomlyModal = () => {
-    setDonateTo("");
+    setDonationModalProps({
+      projectId: getRandomProject(),
+    });
   };
 
   const accountId = context.accountId;
@@ -72,7 +70,6 @@ const Hero = ({ projectsData }: { projectsData: any }) => {
         <ButtonsContainer>
           <Button onClick={openDonateRandomlyModal}>Donate Randomly</Button>
           {/* <ButtonRegisterProject href={"?tab=createproject"}>Register Your Project</ButtonRegisterProject> */}
-          {donateTo && <ModalDonation projectId={donateTo} onClose={closeDonateRandomlyModal} />}
           <ButtonRegisterProject
             href={isRegisteredProject ? `?tab=project&projectId=${accountId}` : "?tab=createproject"}
           >

diff --git a/src/components/Inputs/Dropdown/Dropdown.tsx b/src/components/Inputs/Dropdown/Dropdown.tsx
@@ -14,8 +14,8 @@ type Props = {
   title?: any;
   FilterMenuCustomClass?: string;
   showCount?: boolean;
-  menuStyle?: CSSStyleDeclaration;
-  buttonStyle?: CSSStyleDeclaration;
+  menuStyle?: React.CSSProperties;
+  buttonStyle?: React.CSSProperties;
 };
 
 const Dropdown = (componentProps: Props) => {

diff --git a/src/components/Nav/styles.ts b/src/components/Nav/styles.ts
@@ -6,7 +6,7 @@ const navHeightPxMobile = 96;
 export const NavContainer = styled.div`
   width: 100%;
   display: flex;
-  padding: 0 64px 0 64px;
+  padding: 0 40px;
   justify-content: start;
   align-items: center;
   align-self: stretch;

diff --git a/src/components/NewHero/NewHero.tsx b/src/components/NewHero/NewHero.tsx
@@ -0,0 +1,61 @@
+import { Container, HeroContainer, Line } from "./styles";
+import DonationStats from "@app/pages/Projects/components/DonationStats/DonationStats";
+import HomeBannerStyle from "@app/assets/svgs/HomeBannerBackground";
+import { context, useContext, useMemo, useState } from "alem";
+import { useDonationModal } from "@app/hooks/useDonationModal";
+
+const NewHero = ({ projectsData }: any) => {
+  const { allProjects, approvedProjects } = projectsData;
+
+  const { setDonationModalProps } = useDonationModal();
+
+  const getRandomProject = () => {
+    if (approvedProjects) {
+      const randomIndex = Math.floor(Math.random() * approvedProjects.length);
+      return approvedProjects[randomIndex]?.registrant_id;
+    }
+  };
+
+  const openDonateRandomlyModal = () => {
+    setDonationModalProps({
+      projectId: getRandomProject(),
+    });
+  };
+
+  const accountId = context.accountId;
+  const isRegisteredProject = useMemo(() => {
+    if (allProjects) {
+      return allProjects.find((registration: any) => registration.registrant_id === accountId);
+    }
+  }, [allProjects]);
+
+  return (
+    <Container>
+      <HeroContainer
+        style={{
+          ...HomeBannerStyle,
+        }}
+      >
+        <div className="content">
+          <h3 className="sub-title">Transforming Funding for Public Goods</h3>
+          <h1 className="title">
+            Discover impact projects, donate directly, & <br className="line-break" /> participate in funding rounds.
+          </h1>
+          <div className="btns">
+            <button onClick={openDonateRandomlyModal} className="donate-btn">
+              Donate Randomly
+            </button>
+
+            <a href={isRegisteredProject ? `?tab=project&projectId=${accountId}` : "?tab=createproject"}>
+              {isRegisteredProject ? "View Your Project" : "Register Your Project"}
+            </a>
+          </div>
+        </div>
+      </HeroContainer>
+      <DonationStats />
+      <Line />
+    </Container>
+  );
+};
+
+export default NewHero;
diff --git a/src/components/NewHero/styles.ts b/src/components/NewHero/styles.ts
@@ -0,0 +1,108 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const HeroContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  justify-content: center;
+  border: 1px solid #f8d3b0;
+  border-radius: 12px;
+  overflow: hidden;
+  .background {
+    position: absolute;
+    pointer-events: none;
+    left: 0px;
+    width: 100%;
+    top: 0px;
+    min-height: 600px;
+  }
+  .content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 64px 40px;
+  }
+  .sub-title {
+    color: #dd3345;
+    font-weight: 600;
+    font-size: 16px;
+    margin-top: 0;
+    margin-bottom: 12px;
+  }
+  .title {
+    letter-spacing: -0.4px;
+    font-weight: 500;
+    font-size: 40px;
+    font-family: "Lora";
+    margin: 0;
+  }
+  .btns {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    margin-top: 40px;
+    font-size: 14px;
+    a,
+    button {
+      padding: 12px 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 500;
+      border-radius: 6px;
+      box-shadow: 0px 0px 0px 1px #292929, 0px -2px 0px 0px #292929 inset;
+      border: none;
+      text-decoration: none;
+      color: #292929;
+      transition: all 300ms;
+      &:hover {
+        background: #292929;
+        color: white;
+      }
+    }
+    button {
+      color: white;
+      background: #dd3345;
+      &:hover {
+      }
+    }
+  }
+  @media only screen and (max-width: 768px) {
+    .content {
+      padding: 48px 20px;
+    }
+    .title {
+      font-size: 36px;
+    }
+    .btns {
+      flex-direction: column;
+      gap: 1rem;
+      margin-top: 24px;
+    }
+    .line-break {
+      display: none;
+    }
+  }
+  @media only screen and (max-width: 480px) {
+    .btns a,
+    button {
+      width: 100%;
+      padding: 12px 0;
+    }
+  }
+`;
+
+export const Line = styled.div`
+  width: 100%;
+  height: 1px;
+  background: #ebebeb;
+  margin-top: 1rem;
+`;
diff --git a/src/contexts/DonationModalProvider.ts b/src/contexts/DonationModalProvider.ts
@@ -0,0 +1,39 @@
+// UserProvider.tsx
+import { createContext } from "alem";
+
+// Interface
+export interface UserContextProps {
+  setSuccessfulDonation: (newValue: any) => void;
+  successfulDonation: any;
+  donationModalProps: {
+    projectId?: string;
+    potId?: string;
+    potDetail?: any;
+    projects?: any;
+    multiple?: boolean;
+  } | null;
+  setDonationModalProps: (newValue: any) => void;
+}
+
+const DonationModalProvider = () => {
+  // Create a provider using a reference key
+  const { setDefaultData, updateData, getSelf } = createContext<UserContextProps>("donation-modal");
+
+  setDefaultData({
+    successfulDonation: null,
+    donationModalProps: null,
+    setSuccessfulDonation: (successfulDonation: any) => {
+      updateData({
+        successfulDonation,
+        donationModalProps: null,
+      });
+    },
+    setDonationModalProps: (donationModalProps: any) => {
+      updateData({
+        donationModalProps,
+      });
+    },
+  });
+};
+
+export default DonationModalProvider;
diff --git a/src/hooks/useDonationModal.ts b/src/hooks/useDonationModal.ts
@@ -0,0 +1,4 @@
+import { useContext } from "alem";
+import { UserContextProps } from "@app/contexts/DonationModalProvider";
+
+export const useDonationModal = () => useContext<UserContextProps>("donation-modal");
diff --git a/src/index.tsx b/src/index.tsx
@@ -2,6 +2,7 @@ import { RouterContext, loadExternalStyles } from "alem";
 import Spinner from "./components/Spinner";
 
 import Main from "./Main";
+import DonationModalProvider from "./contexts/DonationModalProvider";
 // import ProjectsProvider from "./contexts/ProjectsProvider";
 
 const App = () => {
@@ -22,7 +23,7 @@ const App = () => {
 
   // console.log(isRegistryAdmin);
   RouterContext();
-
+  DonationModalProvider();
   return <div className="app-container">{fontsLoaded ? <Main /> : <Spinner />}</div>;
 };