add donations info to project card

PotLock · Nov 3, 2023 · 26f3d38 · 26f3d38
1 parent ee68786
commit 26f3d38
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 16 deletions.
diff --git a/apps/potlock/widget/Index.jsx b/apps/potlock/widget/Index.jsx
@@ -49,6 +49,7 @@ State.init({
 
 if (state.nearToUsd === null) {
   const res = fetch("https://api.coingecko.com/api/v3/simple/price?ids=near&vs_currencies=usd");
+  console.log("coingecko res: ", res.body);
   State.update({ nearToUsd: res.body.near.usd });
 }
 

diff --git a/apps/potlock/widget/Project/Card.jsx b/apps/potlock/widget/Project/Card.jsx
@@ -1,4 +1,5 @@
 const ownerId = "potlock.near";
+const donationContractId = "donation.tests.potlock.near"; // TODO: update to donate.potlock.near after testing
 
 const Card = styled.a`
   display: flex;
@@ -45,16 +46,16 @@ const Info = styled.div`
   margin-top: 160px;
   padding: 16px 24px;
   gap: 16px;
+  flex: 1;
 `;
 
-const ProjectName = styled.h2`
+const Title = styled.div`
   font-size: 16px;
   font-weight: 600;
-  font-family: mona-sans;
   color: #2e2e2e;
 `;
 
-const ProjectDescription = styled.p`
+const SubTitle = styled.div`
   font-size: 16px;
   font-weight: 400;
   color: #2e2e2e;
@@ -74,10 +75,46 @@ const Tag = styled.span`
   color: #2e2e2e;
 `;
 
+const DonationsInfoContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  width: 100%;
+  border-top: 1px #f0f0f0 solid;
+`;
+
+const DonationsInfoItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+`;
+
 const MAX_DESCRIPTION_LENGTH = 120;
 
 const { id, bannerImageUrl, profileImageUrl, name, description, tags } = props.project;
 
+const donationsForProject = Near.view(donationContractId, "get_donations_for_recipient", {
+  recipient_id: id,
+});
+
+const [totalAmount, totalDonors] = useMemo(() => {
+  if (!donationsForProject) {
+    return ["-", "-"];
+  }
+  const donors = [];
+  let totalDonationAmount = new Big(0);
+  for (const donation of donationsForProject) {
+    if (!donors.includes(donation.donor_id)) {
+      donors.push(donation.donor_id);
+    }
+    totalDonationAmount = totalDonationAmount.plus(new Big(donation.total_amount));
+  }
+  return [(props.nearToUsd * totalDonationAmount.div(1e24).toNumber()).toFixed(2), donors.length];
+}, [donationsForProject]);
+
 return (
   <Card href={`?tab=project&projectId=${id}`} key={id}>
     <Widget
@@ -107,12 +144,12 @@ return (
       }}
     />
     <Info>
-      <ProjectName>{name}</ProjectName>
-      <ProjectDescription>
+      <Title>{name}</Title>
+      <SubTitle>
         {description.length > MAX_DESCRIPTION_LENGTH
           ? description.slice(0, MAX_DESCRIPTION_LENGTH) + "..."
           : description}
-      </ProjectDescription>
+      </SubTitle>
       <Widget
         src={`${ownerId}/widget/Project.Tags`}
         props={{
@@ -121,5 +158,15 @@ return (
         }}
       />
     </Info>
+    <DonationsInfoContainer>
+      <DonationsInfoItem>
+        <Title>{totalDonors}</Title>
+        <SubTitle>{totalDonors === 1 ? "Donor" : "Donors"}</SubTitle>
+      </DonationsInfoItem>
+      <DonationsInfoItem>
+        <Title>${totalAmount}</Title>
+        <SubTitle>Raised</SubTitle>
+      </DonationsInfoItem>
+    </DonationsInfoContainer>
   </Card>
 );
diff --git a/apps/potlock/widget/Project/DonationsInfo.jsx b/apps/potlock/widget/Project/DonationsInfo.jsx
@@ -22,6 +22,7 @@ const InfoCard = styled.div`
   background: #fef6ee;
   box-shadow: 0px -2px 0px rgba(219, 82, 27, 0.36) inset;
   gap: 8px;
+  min-width: 260px;
 `;
 
 const InfoTextPrimary = styled.div`
@@ -57,13 +58,13 @@ const [totalDonations, totalDonors] = useMemo(() => {
     }
     totalDonationAmount = totalDonationAmount.plus(new Big(donation.total_amount));
   }
-  return [totalDonationAmount.div(1e24).toString(), donors.length];
+  return [totalDonationAmount.div(1e24).toNumber().toFixed(2), donors.length];
 }, [donationsForProject]);
 
 return (
   <Container>
     <InfoCard>
-      <InfoTextPrimary>{totalDonations} NEAR</InfoTextPrimary>
+      <InfoTextPrimary>${totalDonations}</InfoTextPrimary>
       <InfoTextSecondary>Contributed</InfoTextSecondary>
     </InfoCard>
     <InfoCard>

diff --git a/apps/potlock/widget/Project/ListPage.jsx b/apps/potlock/widget/Project/ListPage.jsx
@@ -210,6 +210,7 @@ return (
               src={`${ownerId}/widget/Project.Card`}
               props={{
                 project,
+                ...props,
               }}
             />
           ),

diff --git a/build/potlock/src/Index.jsx b/build/potlock/src/Index.jsx
@@ -49,6 +49,7 @@ State.init({
 
 if (state.nearToUsd === null) {
   const res = fetch("https://api.coingecko.com/api/v3/simple/price?ids=near&vs_currencies=usd");
+  console.log("coingecko res: ", res.body);
   State.update({ nearToUsd: res.body.near.usd });
 }
 

diff --git a/build/potlock/src/Project/Card.jsx b/build/potlock/src/Project/Card.jsx
@@ -1,4 +1,5 @@
 const ownerId = "potlock.near";
+const donationContractId = "donation.tests.potlock.near"; // TODO: update to donate.potlock.near after testing
 
 const Card = styled.a`
   display: flex;
@@ -45,16 +46,16 @@ const Info = styled.div`
   margin-top: 160px;
   padding: 16px 24px;
   gap: 16px;
+  flex: 1;
 `;
 
-const ProjectName = styled.h2`
+const Title = styled.div`
   font-size: 16px;
   font-weight: 600;
-  font-family: mona-sans;
   color: #2e2e2e;
 `;
 
-const ProjectDescription = styled.p`
+const SubTitle = styled.div`
   font-size: 16px;
   font-weight: 400;
   color: #2e2e2e;
@@ -74,10 +75,46 @@ const Tag = styled.span`
   color: #2e2e2e;
 `;
 
+const DonationsInfoContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  width: 100%;
+  border-top: 1px #f0f0f0 solid;
+`;
+
+const DonationsInfoItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+`;
+
 const MAX_DESCRIPTION_LENGTH = 120;
 
 const { id, bannerImageUrl, profileImageUrl, name, description, tags } = props.project;
 
+const donationsForProject = Near.view(donationContractId, "get_donations_for_recipient", {
+  recipient_id: id,
+});
+
+const [totalAmount, totalDonors] = useMemo(() => {
+  if (!donationsForProject) {
+    return ["-", "-"];
+  }
+  const donors = [];
+  let totalDonationAmount = new Big(0);
+  for (const donation of donationsForProject) {
+    if (!donors.includes(donation.donor_id)) {
+      donors.push(donation.donor_id);
+    }
+    totalDonationAmount = totalDonationAmount.plus(new Big(donation.total_amount));
+  }
+  return [(props.nearToUsd * totalDonationAmount.div(1e24).toNumber()).toFixed(2), donors.length];
+}, [donationsForProject]);
+
 return (
   <Card href={`?tab=project&projectId=${id}`} key={id}>
     <Widget
@@ -107,12 +144,12 @@ return (
       }}
     />
     <Info>
-      <ProjectName>{name}</ProjectName>
-      <ProjectDescription>
+      <Title>{name}</Title>
+      <SubTitle>
         {description.length > MAX_DESCRIPTION_LENGTH
           ? description.slice(0, MAX_DESCRIPTION_LENGTH) + "..."
           : description}
-      </ProjectDescription>
+      </SubTitle>
       <Widget
         src={`${ownerId}/widget/Project.Tags`}
         props={{
@@ -121,5 +158,15 @@ return (
         }}
       />
     </Info>
+    <DonationsInfoContainer>
+      <DonationsInfoItem>
+        <Title>{totalDonors}</Title>
+        <SubTitle>{totalDonors === 1 ? "Donor" : "Donors"}</SubTitle>
+      </DonationsInfoItem>
+      <DonationsInfoItem>
+        <Title>${totalAmount}</Title>
+        <SubTitle>Raised</SubTitle>
+      </DonationsInfoItem>
+    </DonationsInfoContainer>
   </Card>
 );
diff --git a/build/potlock/src/Project/DonationsInfo.jsx b/build/potlock/src/Project/DonationsInfo.jsx
@@ -22,6 +22,7 @@ const InfoCard = styled.div`
   background: #fef6ee;
   box-shadow: 0px -2px 0px rgba(219, 82, 27, 0.36) inset;
   gap: 8px;
+  min-width: 260px;
 `;
 
 const InfoTextPrimary = styled.div`
@@ -57,13 +58,13 @@ const [totalDonations, totalDonors] = useMemo(() => {
     }
     totalDonationAmount = totalDonationAmount.plus(new Big(donation.total_amount));
   }
-  return [totalDonationAmount.div(1e24).toString(), donors.length];
+  return [totalDonationAmount.div(1e24).toNumber().toFixed(2), donors.length];
 }, [donationsForProject]);
 
 return (
   <Container>
     <InfoCard>
-      <InfoTextPrimary>{totalDonations} NEAR</InfoTextPrimary>
+      <InfoTextPrimary>${totalDonations}</InfoTextPrimary>
       <InfoTextSecondary>Contributed</InfoTextSecondary>
     </InfoCard>
     <InfoCard>

diff --git a/build/potlock/src/Project/ListPage.jsx b/build/potlock/src/Project/ListPage.jsx
@@ -210,6 +210,7 @@ return (
               src={`${ownerId}/widget/Project.Card`}
               props={{
                 project,
+                ...props,
               }}
             />
           ),