improving the donation modal & projects loading

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/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/Card.tsx

@@ -1,4 +1,4 @@
-import { Big, RouteLink, Social, context, useEffect, useMemo, useParams, useState } from "alem";
+import { Big, RouteLink, Social, context, useMemo, useParams } from "alem";
 import DonateSDK from "@app/SDK/donate";
 import PotSDK from "@app/SDK/pot";
 import { useDonationModal } from "@app/hooks/useDonationModal";
@@ -32,10 +32,10 @@ import {
 } from "./styles";
 
 const Card = (props: any) => {
-  const [ready, isReady] = useState(false);
-  const { payoutDetails, allowDonate: _allowDonate } = props;
   const { potId } = useParams();
 
+  const { payoutDetails, allowDonate: _allowDonate } = props;
+
   // Start Modals provider
   const Modals = useModals();
   const { setDonationModalProps } = useDonationModal();
@@ -56,7 +56,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 +66,9 @@ const Card = (props: any) => {
       }
     }
     return totalDonationAmountNear.toString();
-  }, [donationsForProject, payoutDetails]);
+  };
+
+  const totalAmountNear = useMemo(getTotalAmountNear, [donationsForProject, payoutDetails]);
 
   const getImageSrc = (image: any) => {
     const defaultImageUrl = "https://ipfs.near.social/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci";
@@ -100,13 +102,7 @@ const Card = (props: any) => {
 
   const tags = getTagsFromSocialProfileData(profile);
 
-  useEffect(() => {
-    if (profile !== null && !ready) {
-      isReady(true);
-    }
-  }, [profile, donationsForProject, tags]);
-
-  if (!ready) return <CardSkeleton />;
+  if (profile === null && totalAmountNear === null) return <CardSkeleton />;
 
   return (
     <>
@@ -203,7 +199,7 @@ const Card = (props: any) => {
           {payoutDetails && (
             <MatchingSection>
               <MatchingTitle>Estimated matched amount</MatchingTitle>
-              <MatchingAmount>{yoctosToNear(payoutDetails.matchingAmount) || "- N"}</MatchingAmount>
+              <MatchingAmount>{yoctosToNear(payoutDetails.amount) || "- N"}</MatchingAmount>
             </MatchingSection>
           )}
         </CardContainer>

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

@@ -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/ConfirmPot/ConfirmPot.tsx

@@ -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/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/Pot/NavPages/Applications/Applications.tsx

@@ -1,10 +1,9 @@
 import { Social, State, context, state, useParams, Tooltip, OverlayTrigger, useEffect } from "alem";
-import PotSDK from "@app/SDK/pot";
 import Button from "@app/components/Button";
 import Dropdown from "@app/components/Inputs/Dropdown/Dropdown";
 import ToastContainer from "@app/components/ToastNotification/getToastContainer";
 import ProfileImage from "@app/components/mob.near/ProfileImage";
-import { PotDetail } from "@app/types";
+import { getConfig, getPotProjects } from "@app/services/getPotData";
 import _address from "@app/utils/_address";
 import daysAgo from "@app/utils/daysAgo";
 import getTransactionsFromHashes from "@app/utils/getTransactionsFromHashes";
@@ -22,12 +21,13 @@ import {
   Status,
 } from "./styles";
 
-const Applications = ({ potDetail }: { potDetail: PotDetail }) => {
+const Applications = () => {
   const accountId = context.accountId;
   const { potId, transactionHashes } = useParams();
 
   State.init({
     newStatus: "",
+    potDetail: null,
     projectId: "",
     searchTerm: "",
     allApplications: null,
@@ -39,27 +39,48 @@ const Applications = ({ potDetail }: { potDetail: PotDetail }) => {
     },
   });
 
-  const { newStatus, projectId, searchTerm, allApplications, filteredApplications, filterVal, toastContent } = state;
-
-  const applications = PotSDK.getApplications(potId);
+  const {
+    newStatus,
+    projectId,
+    searchTerm,
+    allApplications,
+    filteredApplications,
+    filterVal,
+    toastContent,
+    potDetail,
+  } = state;
 
   const getApplicationCount = (sortVal: string) => {
-    if (!applications) return;
-    return applications?.filter((application: any) => {
+    if (!allApplications) return;
+    return allApplications?.filter((application: any) => {
       if (sortVal === "All") return true;
       return application.status === sortVal;
     })?.length;
   };
 
-  if (applications && !allApplications) {
-    applications.reverse();
-    State.update({
-      filteredApplications: applications,
-      allApplications: applications,
-    });
-  }
+  useEffect(() => {
+    if (!potDetail)
+      getConfig({
+        potId,
+        updateState: (potDetail) =>
+          State.update({
+            potDetail,
+          }),
+      });
+    if (!allApplications)
+      getPotProjects({
+        potId,
+        isApprpved: false,
+        updateState: (applications) =>
+          State.update({
+            allApplications: applications,
+            filteredApplications: applications,
+          }),
+      });
+  }, []);
 
-  if (!allApplications) return <div className="spinner-border text-secondary" role="status" />;
+  if (allApplications === null || potDetail === null)
+    return <div className="spinner-border text-secondary" role="status" />;
 
   const { owner, admins, chef } = potDetail;
 

src/pages/Pot/NavPages/Donations/Donations.tsx

@@ -1,21 +1,17 @@
 import { State, state, useEffect, useParams } from "alem";
 import Arrow from "@app/assets/svgs/Arrow";
-import constants from "@app/constants";
-import { PotDetail } from "@app/types";
+import { getConfig, getDonations } from "@app/services/getPotData";
+import { PotDetail, PotDonation } from "@app/types";
 import _address from "@app/utils/_address";
-import getTimePassed from "@app/utils/getTimePassed";
 import DonationsTable from "../../components/DonationsTable/DonationsTable";
-import { Container, DonationsCount, OuterText, OuterTextContainer, Sort, TableContainer } from "./styes";
+import { Container, DonationsCount, OuterText, OuterTextContainer, Sort } from "./styes";
 
-type Props = {
-  allDonations: any[];
-  potDetail: PotDetail;
-};
-
-const Donations = (props: Props) => {
-  const { allDonations, potDetail } = props;
+const Donations = () => {
+  const { potId } = useParams();
 
   State.init({
+    potDetail: null,
+    allDonations: null,
     filteredDonations: [],
     currentFilter: "date",
     filter: {
@@ -24,23 +20,39 @@ const Donations = (props: Props) => {
     },
   });
 
-  const { filteredDonations, currentFilter, filter } = state;
+  const { filteredDonations, currentFilter, filter, potDetail, allDonations } = state;
 
   useEffect(() => {
-    if (allDonations && filteredDonations.length === 0) {
-      const sortedDonations = [...allDonations].reverse();
-      State.update({ filteredDonations: sortedDonations });
-    }
-  }, [allDonations]);
-  if (!allDonations) return <div className="spinner-border text-secondary" role="status" />;
+    if (!potDetail)
+      getConfig({
+        potId,
+        updateState: (potDetail) =>
+          State.update({
+            potDetail,
+          }),
+      });
+    if (!allDonations && potDetail)
+      getDonations({
+        potId,
+        potDetail,
+        updateState: (allDonations) =>
+          State.update({
+            allDonations,
+            filteredDonations: allDonations,
+          }),
+      });
+  }, [potDetail]);
+
+  if (allDonations === null && potDetail === null)
+    return <div className="spinner-border text-secondary" role="status" />;
 
   const searchDonations = (searchTerm: string) => {
     // filter donations that match the search term (donor_id, project_id)
-    const filteredDonations = allDonations.filter((donation) => {
+    const filteredDonations = allDonations.filter((donation: PotDonation) => {
       const { donor_id, project_id } = donation;
       const searchFields = [donor_id, project_id];
 
-      return searchFields.some((field) => field.toLowerCase().includes(searchTerm.toLowerCase()));
+      return searchFields.some((field) => (field || "").toLowerCase().includes(searchTerm.toLowerCase()));
     });
     return filteredDonations;
   };