fix Card; fix Donate button issue

PotLock · May 24, 2024 · f771d43 · f771d43
1 parent 8b8d2c7
commit f771d43
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 28 deletions.
diff --git a/alem.config.json b/alem.config.json
@@ -31,6 +31,7 @@
     }
   },
   "options": {
+    "ejectStatefulComponents": false,
     "keepRoute": false,
     "createLoaderWidget": true,
     "loadingComponentFile": "src/components/SuspenseLoading.tsx",

diff --git a/src/components/Card/ButtonDonation.tsx b/src/components/Card/ButtonDonation.tsx
@@ -1,12 +1,10 @@
-import { context, useEffect } from "alem";
+import { context } from "alem";
 import { useDonationModal } from "@app/hooks/useDonationModal";
-import useModals from "@app/hooks/useModals";
 import Button from "../Button";
 
 const ButtonDonation = ({ allowDonate, projectId }: { allowDonate: boolean; projectId: string }) => {
-  const Modals = useModals();
   const { setDonationModalProps } = useDonationModal();
-  useEffect(() => {}, []); // make the component statefull so it does not break
+
   return (
     <div
       onClick={(e) => e.preventDefault()}
@@ -15,7 +13,7 @@ const ButtonDonation = ({ allowDonate, projectId }: { allowDonate: boolean; proj
         color: "#292929",
       }}
     >
-      <Modals />
+      {/* <Modals /> */}
       {allowDonate && context.accountId && (
         <Button
           varient="tonal"

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -1,4 +1,4 @@
-import { Big, RouteLink, Social, useEffect } from "alem";
+import { Big, RouteLink, Social } from "alem";
 import DonateSDK from "@app/SDK/donate";
 import PotSDK from "@app/SDK/pot";
 import routesPath from "@app/routes/routesPath";
@@ -8,7 +8,6 @@ import ipfsUrlFromCid from "@app/utils/ipfsUrlFromCid";
 import yoctosToNear from "@app/utils/yoctosToNear";
 import yoctosToUsdWithFallback from "@app/utils/yoctosToUsdWithFallback";
 import CardSkeleton from "../../pages/Projects/components/CardSkeleton";
-import Button from "../Button";
 import Image from "../mob.near/Image";
 import ButtonDonation from "./ButtonDonation";
 import {
@@ -33,6 +32,8 @@ import {
 const Card = (props: any) => {
   const { payoutDetails, allowDonate: _allowDonate, potId } = props;
 
+  // const Modals = useModals();
+
   const projectId = props.project.registrant_id || props.projectId;
   const profile = Social.getr(`${projectId}/profile`) as any;
   const allowDonate = _allowDonate ?? true;

diff --git a/src/pages/Pot/Pot.tsx b/src/pages/Pot/Pot.tsx
@@ -1,5 +1,6 @@
 import { Big, useParams, useCache, useMemo } from "alem";
 import PotSDK from "@app/SDK/pot";
+import useModals from "@app/hooks/useModals";
 import { PotDetail } from "@app/types";
 import Tabs from "../Profile/components/Tabs";
 import Header from "./components/Header/Header";
@@ -50,8 +51,11 @@ const Pot = () => {
     return options.find((option: any) => option.id === nav).source;
   }, []);
 
+  const Modals = useModals();
+
   return (
     <Wrapper>
+      <Modals />
       <HeaderStatus />
       <Header />
 

diff --git a/src/pages/Projects/components/AllProjects/AllProjects.tsx b/src/pages/Projects/components/AllProjects/AllProjects.tsx
@@ -2,6 +2,7 @@ import { Social, createDebounce, useEffect, useState } from "alem";
 import DonateSDK from "@app/SDK/donate";
 import Card from "@app/components/Card/Card";
 import FilterDropdown from "@app/components/Inputs/FilterDropdown/FilterDropdown";
+import useModals from "@app/hooks/useModals";
 import getProjects from "@app/services/getProjects";
 import { Project } from "@app/types";
 import getTagsFromSocialProfileData from "@app/utils/getTagsFromSocialProfileData";
@@ -14,6 +15,7 @@ import tagsList from "./tagsList";
 
 const AllProjects = () => {
   const projectsData = getProjects();
+  const Modals = useModals();
 
   const [totalDonation, setTotalDonation] = useState(0);
   const [totalDonated, setTotalDonated] = useState("0");
@@ -121,6 +123,7 @@ const AllProjects = () => {
 
   return (
     <Container>
+      <Modals />
       <Header>
         <Title>
           All projects

diff --git a/src/pages/Projects/components/FeaturedProjects/FeaturedProjects.tsx b/src/pages/Projects/components/FeaturedProjects/FeaturedProjects.tsx
@@ -1,20 +1,15 @@
-import { useEffect, useMemo, useState } from "alem";
+import { State } from "alem";
 import Card from "@app/components/Card/Card";
+import useModals from "@app/hooks/useModals";
 import getProjects from "@app/services/getProjects";
-import { Project } from "@app/types";
 import CardSkeleton from "../CardSkeleton";
 import { ContainerHeader, Header, OnBottom, ProjectList, Title } from "./styles";
 
 const FeaturedProjects = () => {
-  const projectsData = getProjects();
-  const [projects, setProjects] = useState<Project[]>([]);
+  State.init({});
+  const Modals = useModals();
 
-  useEffect(() => {
-    if (projectsData) {
-      const { featuredProjects } = projectsData;
-      setProjects(featuredProjects);
-    }
-  }, [projectsData]);
+  const { featuredProjects: projects } = getProjects();
 
   const LoadingCards = () => (
     <>
@@ -24,24 +19,20 @@ const FeaturedProjects = () => {
     </>
   );
 
-  const projectCards = useMemo(
-    () => (
-      <>
-        {projects.map((project: any) => {
-          return <Card key={project.registrant_id} projectId={project.registrant_id} />;
-        })}
-      </>
-    ),
-    [projects],
-  );
+  const projectCards = projects
+    ? projects.map((project: any) => {
+        return <Card key={project.registrant_id} projectId={project.registrant_id} />;
+      })
+    : [];
 
   return (
     <ContainerHeader>
+      <Modals />
       <Header>
         <Title>Featured projects</Title>
       </Header>
 
-      <ProjectList>{projects.length === 0 || !projectsData ? <LoadingCards /> : <>{projectCards}</>}</ProjectList>
+      <ProjectList>{projects.length === 0 || !projects ? <LoadingCards /> : <>{projectCards}</>}</ProjectList>
       <OnBottom></OnBottom>
     </ContainerHeader>
   );