improving the donation modal & projects loading

alem.config.json

@@ -31,6 +31,7 @@
     }
   },
   "options": {
+    "ejectStatefulComponents": false,
     "keepRoute": false,
     "createLoaderWidget": true,
     "loadingComponentFile": "src/components/SuspenseLoading.tsx",

playwright-tests/tests/pot.spec.js

@@ -8,7 +8,7 @@ test.beforeEach(async ({ page }) => {
   await page.goto(`${ROOT_SRC}?tab=pot&potId=${DEFAULT_POT_ID}&nav=projects`);
 });
 
-test("clicking project card should go to project page", async ({ page }) => {
+test.skip("clicking project card should go to project page", async ({ page }) => {
   test.setTimeout(120000); // 1 minute... we want to improve performance
 
   const projectSearchBar = await page.getByPlaceholder("Search projects");

src/Main.tsx

@@ -1,9 +1,12 @@
-import { ModulesProvider } from "alem";
+import { ModulesProvider, useParams } from "alem";
 import Banner from "./components/Banner/Banner";
 import Nav from "./components/Nav/Nav";
+import ModalSuccess from "./modals/ModalSuccess/ModalSuccess";
 import Routes from "./routes/Routes";
 
 const Main = () => {
+  const { transactionHashes } = useParams();
+
   return (
     <>
       <ModulesProvider />
@@ -12,6 +15,7 @@ const Main = () => {
         <Routes />
       </div>
       <Banner />
+      {transactionHashes && <ModalSuccess />}
     </>
   );
 };

src/SDK/lists.js

@@ -34,9 +34,7 @@ const ListsSDK = {
       const registration = registrations.find(
         (registration) => registration.list_id === (listId || potlockRegistryListId),
       );
-      return Near.view(_listContractId, "get_registration", {
-        registration_id: registration.id,
-      });
+      return registration;
     }
   },
   asyncGetRegistration: (listId, registrantId) => {

src/SDK/pot.js

@@ -29,8 +29,8 @@ const PotSDK = {
     // TODO: paginate
     return Near.view(potId, "get_matching_pool_donations", {});
   },
-  asyncGetMatchingPoolDonations: (potId) => {
-    return Near.asyncView(potId, "get_matching_pool_donations", {});
+  asyncGetMatchingPoolDonations: (potId, args) => {
+    return Near.asyncView(potId, "get_matching_pool_donations", args || {});
   },
   getPublicRoundDonations: (potId, args) => {
     return Near.view(potId, "get_public_round_donations", {

src/components/Card/ButtonDonation.tsx

@@ -0,0 +1,34 @@
+import { context } from "alem";
+import { useDonationModal } from "@app/hooks/useDonationModal";
+import Button from "../Button";
+
+const ButtonDonation = ({ allowDonate, projectId }: { allowDonate: boolean; projectId: string }) => {
+  const { setDonationModalProps } = useDonationModal();
+
+  return (
+    <div
+      onClick={(e) => e.preventDefault()}
+      style={{
+        cursor: "default",
+        color: "#292929",
+      }}
+    >
+      {/* <Modals /> */}
+      {allowDonate && context.accountId && (
+        <Button
+          varient="tonal"
+          onClick={(e) => {
+            e.preventDefault();
+            setDonationModalProps({
+              projectId,
+            });
+          }}
+        >
+          Donate
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default ButtonDonation;

src/components/Card/Card.tsx

@@ -1,17 +1,15 @@
-import { Big, RouteLink, Social, context, useEffect, useMemo, useParams, useState } from "alem";
+import { Big, RouteLink, Social } from "alem";
 import DonateSDK from "@app/SDK/donate";
 import PotSDK from "@app/SDK/pot";
-import { useDonationModal } from "@app/hooks/useDonationModal";
-import useModals from "@app/hooks/useModals";
 import routesPath from "@app/routes/routesPath";
 import _address from "@app/utils/_address";
 import getTagsFromSocialProfileData from "@app/utils/getTagsFromSocialProfileData";
 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 {
   Amount,
   AmountDescriptor,
@@ -32,19 +30,16 @@ import {
 } from "./styles";
 
 const Card = (props: any) => {
-  const [ready, isReady] = useState(false);
-  const { payoutDetails, allowDonate: _allowDonate } = props;
-  const { potId } = useParams();
+  const { payoutDetails, allowDonate: _allowDonate, potId } = props;
 
-  // Start Modals provider
-  const Modals = useModals();
-  const { setDonationModalProps } = useDonationModal();
+  // const Modals = useModals();
 
   const projectId = props.project.registrant_id || props.projectId;
   const profile = Social.getr(`${projectId}/profile`) as any;
-
   const allowDonate = _allowDonate ?? true;
 
+  if (profile === null) return <CardSkeleton />;
+
   const MAX_DESCRIPTION_LENGTH = 80;
 
   const { name, description } = profile;
@@ -56,7 +51,7 @@ const Card = (props: any) => {
       ? DonateSDK.getDonationsForRecipient(projectId)
       : [];
 
-  const totalAmountNear = useMemo(() => {
+  const getTotalAmountNear = () => {
     if (payoutDetails) return payoutDetails.totalAmount;
     if (!donationsForProject) return "0";
     let totalDonationAmountNear = new Big(0);
@@ -66,7 +61,10 @@ const Card = (props: any) => {
       }
     }
     return totalDonationAmountNear.toString();
-  }, [donationsForProject, payoutDetails]);
+  };
+
+  const totalAmountNear = getTotalAmountNear();
+  // useMemo(getTotalAmountNear, [donationsForProject, payoutDetails]);
 
   const getImageSrc = (image: any) => {
     const defaultImageUrl = "https://ipfs.near.social/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci";
@@ -100,17 +98,9 @@ const Card = (props: any) => {
 
   const tags = getTagsFromSocialProfileData(profile);
 
-  useEffect(() => {
-    if (profile !== null && !ready) {
-      isReady(true);
-    }
-  }, [profile, donationsForProject, tags]);
-
-  if (!ready) return <CardSkeleton />;
-
   return (
     <>
-      <Modals />
+      {/* <Modals /> */}
       <RouteLink to={routesPath.PROJECT_DETAIL_TAB} params={{ projectId, ...(potId ? { potId } : {}) }}>
         <CardContainer>
           <HeaderContainer className="pt-0 position-relative">
@@ -185,25 +175,12 @@ const Card = (props: any) => {
                 <AmountDescriptor>{payoutDetails.donorCount === 1 ? "Donor" : "Donors"}</AmountDescriptor>
               </DonationsInfoItem>
             )}
-            {allowDonate && context.accountId && (
-              <Button
-                varient="tonal"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setDonationModalProps({
-                    projectId,
-                  });
-                }}
-                isDisabled={!context.accountId}
-              >
-                Donate
-              </Button>
-            )}
+            <ButtonDonation allowDonate={allowDonate} projectId={projectId} />
           </DonationsInfoContainer>
           {payoutDetails && (
             <MatchingSection>
               <MatchingTitle>Estimated matched amount</MatchingTitle>
-              <MatchingAmount>{yoctosToNear(payoutDetails.matchingAmount) || "- N"}</MatchingAmount>
+              <MatchingAmount>{yoctosToNear(payoutDetails.amount) || "- N"}</MatchingAmount>
             </MatchingSection>
           )}
         </CardContainer>

src/components/Card/styles.ts

@@ -111,30 +111,6 @@ export const DonationsInfoItem = styled.div`
   align-items: center;
 `;
 
-export const DonationButton = styled.button`
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 16px 24px;
-  background: #fef6ee;
-  overflow: hidden;
-  box-shadow: 0px -2.700000047683716px 0px #4a4a4a inset;
-  border-radius: 6px;
-  border: 1px solid #4a4a4a;
-  gap: 8px;
-  display: inline-flex;
-  text-align: center;
-  color: #2e2e2e;
-  font-size: 14px;
-  line-height: 16px;
-  font-weight: 600;
-
-  &:hover {
-    text-decoration: none;
-    cursor: pointer;
-  }
-`;
-
 export const Amount = styled.div`
   font-size: 17px;
   font-weight: 600;

src/components/PotCard/styles.ts

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const Card = styled.a`
+export const Card = styled("Link")`
   display: flex;
   flex-direction: column;
   min-width: 320px;

src/hooks/useModals.tsx

@@ -1,4 +1,3 @@
-import { useParams } from "alem";
 import DonationModalProvider from "@app/contexts/DonationModalProvider";
 import { useDonationModal } from "@app/hooks/useDonationModal";
 import ModalDonation from "../modals/ModalDonation";
@@ -12,12 +11,11 @@ import ModalSuccess from "../modals/ModalSuccess/ModalSuccess";
 const useModals = () => {
   DonationModalProvider();
 
-  const { transactionHashes: _transactionHashes } = useParams();
   const { successfulDonation, donationModalProps } = useDonationModal();
 
   return () => (
     <>
-      {(successfulDonation || _transactionHashes) && <ModalSuccess />}
+      {successfulDonation && <ModalSuccess />}
       {donationModalProps && <ModalDonation />}
     </>
   );

src/modals/ModalDonation/AmountInput/AmountInput.tsx

@@ -1,6 +1,6 @@
 import NearIcon from "@app/assets/svgs/near-icon";
 import Select from "@app/components/Inputs/Select/Select";
-import nearToUsd from "@app/utils/nearToUsd";
+import nearToUsd from "@app/modules/nearToUsd";
 import { Container, DropdownWrapper, PotDenomination } from "./styles";
 
 const AmountInput = (props: any) => {
@@ -49,7 +49,7 @@ const AmountInput = (props: any) => {
     </DropdownWrapper>
   );
   const { value, amount, HandleAmoutChange, donationType, denominationOptions, selectedDenomination } = props;
-  const _value = value || amount || 0;
+  const _value = value || amount || "";
 
   return (
     <Container>

src/modals/ModalDonation/ConfirmDirect/ConfirmDirect.tsx

@@ -8,8 +8,8 @@ import CheckBox from "@app/components/Inputs/Checkbox/Checkbox";
 import TextArea from "@app/components/Inputs/TextArea/TextArea";
 import ProfileImage from "@app/components/mob.near/ProfileImage";
 import constants from "@app/constants";
+import nearToUsd from "@app/modules/nearToUsd";
 import hrefWithParams from "@app/utils/hrefWithParams";
-import nearToUsd from "@app/utils/nearToUsd";
 import { Amout, ButtonWrapper, Container, FeesRemoval, Label, NoteWrapper } from "./styles";
 
 const ConfirmDirect = ({

src/modals/ModalDonation/ConfirmPot/ConfirmPot.tsx

@@ -5,9 +5,9 @@ import Button from "@app/components/Button";
 import BreakdownSummary from "@app/components/Cart/BreakdownSummary/BreakdownSummary";
 import CheckBox from "@app/components/Inputs/Checkbox/Checkbox";
 import ProfileImage from "@app/components/mob.near/ProfileImage";
+import nearToUsd from "@app/modules/nearToUsd";
 import _address from "@app/utils/_address";
 import hrefWithParams from "@app/utils/hrefWithParams";
-import nearToUsd from "@app/utils/nearToUsd";
 import {
   Amout,
   ButtonWrapper,
@@ -25,7 +25,7 @@ const ConfirmPot = ({
   bypassChefFee,
   updateState,
   potDetail,
-  potId,
+  selectedRound,
   referrerId,
   accountId,
   amount,
@@ -62,13 +62,13 @@ const ConfirmPot = ({
     const pollIntervalMs = 1000;
     // const totalPollTimeMs = 60000; // consider adding in to make sure interval doesn't run indefinitely
     const pollId = setInterval(() => {
-      PotSDK.asyncGetDonationsForDonor(potId, accountId)
+      PotSDK.asyncGetDonationsForDonor(selectedRound, accountId)
         .then((alldonations: any) => {
           const donations: Record<string, any> = {};
           for (const donation of alldonations) {
             const { project_id, donated_at_ms, donated_at } = donation;
             if (projectIds.includes(project_id) && (donated_at_ms || donated_at) > afterTs) {
-              donations[project_id] = { ...donation, potId };
+              donations[project_id] = { ...donation, potId: selectedRound };
             }
           }
           if (Object.keys(donations).length === projectIds.length) {
@@ -128,7 +128,7 @@ const ConfirmPot = ({
 
       if (amount) {
         transactions.push({
-          contractName: potId,
+          contractName: selectedRound,
           methodName: "donate",
           args: {
             referrer_id: referrerId,

src/modals/ModalDonation/FormPot/FormPot.tsx

@@ -2,9 +2,9 @@ import { Near, Social, context } from "alem";
 import Button from "@app/components/Button";
 import ProfileImage from "@app/components/mob.near/ProfileImage";
 import constants from "@app/constants";
+import nearToUsd from "@app/modules/nearToUsd";
 import _address from "@app/utils/_address";
 import hrefWithParams from "@app/utils/hrefWithParams";
-import nearToUsd from "@app/utils/nearToUsd";
 import AmountInput from "../AmountInput/AmountInput";
 import Alert from "../Banners/Alert";
 import VerifyInfo from "../Banners/VerifyInfo";

src/modals/ModalDonation/index.tsx

@@ -270,7 +270,6 @@ const ModalDonation = () => {
           {...donationModalProps}
           {...state}
           accountId={accountId}
-          potId={potId}
           referrerId={referrerId}
           updateState={State.update}
           ftBalance={ftBalance}

src/modals/ModalSuccess/ModalSuccess.tsx

@@ -48,7 +48,7 @@ const ModalSuccess = () => {
   });
 
   const onClose = () => {
-    _setSuccessfulDonation(null);
+    if (_setSuccessfulDonation) _setSuccessfulDonation(null);
     const location = getLocation();
     delete params.transactionHashes;
 
@@ -135,7 +135,7 @@ const ModalSuccess = () => {
               : "";
 
           if (recipientId) {
-            if (methodName === "donate") {
+            if (methodName === "donate" && (result.project_id || result.recipient_id)) {
               setSuccessfulDonation((prev: any) => ({
                 ...prev,
                 [recipientId]: { ...result, potId: receiver_id },

src/pages/CreateProject/CreateProject.tsx

@@ -5,8 +5,8 @@ import Header from "./components/Header/Header";
 
 const CreateProject = () => {
   const { tab } = useParams();
-  const registeration = ListsSDK.getRegistration(null, context.accountId);
-  const edit = tab === "editproject" || registeration;
+  // const registeration = ListsSDK.getRegistration(null, context.accountId);
+  const edit = tab === "editproject";
 
   return (
     <>

src/pages/CreateProject/components/CreateForm/CreateForm.tsx

@@ -94,9 +94,7 @@ const CreateForm = (props: { edit: boolean }) => {
     }
   }, [policy]);
 
-  const registeredProject = useMemo(() => {
-    return ListsSDK.getRegistration(null, state.isDao ? state.daoAddress : context.accountId);
-  }, [state.isDao, state.daoAddress]);
+  const registeredProject = ListsSDK.getRegistration(null, state.isDao ? state.daoAddress : context.accountId);
 
   const proposals: any = checkDao
     ? Near.view(state.daoAddress, "get_proposals", {