Skip to content

Commit

Permalink
Implements infinite scroll (#469)
Browse files Browse the repository at this point in the history 
* implements infinite scroll

* fix card link height

* fix horizontal scroll and clean up

* remove hidden

* fix donation calculation
  • Loading branch information
@elliotBraem
elliotBraem authored Mar 20, 2024
1 parent 6aa2e75 commit ea83d73
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 772 deletions.
255 changes: 107 additions & 148 deletions apps/potlock/widget/Project/Card.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,24 +27,27 @@ let DonateSDK =
}));
DonateSDK = DonateSDK({ env: props.env });

// console.log("props in Card: ", props);
const CardLink = styled("Link")`
&:hover {
text-decoration: none;
}
`;

const Card = styled.a`
const Card = styled.div`
display: flex;
flex-direction: column;
max-width: 400px;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 12px;
background: white;
box-shadow: 0px -2px 0px #dbdbdb inset;
border: 1px solid #dbdbdb;
margin-left: auto;
margin-right: auto;
// height: 500px;
transition: all 300ms;
:hover {
text-decoration: none;
&:hover {
transform: translateY(-1rem);
}
`;
Expand Down Expand Up @@ -392,9 +395,9 @@ const [totalAmountNear, totalDonors] = useMemo(() => {
if (!donors.includes(donation.donor_id)) {
donors.push(donation.donor_id);
}
if (donation.ft_id === "near" || donation.base_currency === "near") {
totalDonationAmountNear = totalDonationAmountNear.plus(new Big(donation.total_amount));
}
// if (donation.ft_id === "near" || donation.base_currency === "near") {
totalDonationAmountNear = totalDonationAmountNear.plus(new Big(donation.total_amount));
// }
}
return [totalDonationAmountNear.toString(), donors.length];
}, [donationsForProject]);
Expand Down Expand Up @@ -436,152 +439,108 @@ const tags = getTagsFromSocialProfileData(profile);

return (
<>
<Card href={projectUrl} key={projectId}>
<HeaderContainer className="pt-0 position-relative">
<BackgroundImageContainer>
{profile.backgroundImage?.nft ? (
<Widget
src="mob.near/widget/Image"
props={{
image: profile.backgroundImage,
alt: "background",
className: "position-absolute w-100",
style: backgroundImageStyle,
fallbackUrl:
"https://ipfs.near.social/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
}}
/>
<CardLink href={projectUrl} key={projectId}>
<Card>
<HeaderContainer className="pt-0 position-relative">
<BackgroundImageContainer>
{profile.backgroundImage?.nft ? (
<Widget
src="mob.near/widget/Image"
props={{
image: profile.backgroundImage,
alt: "background",
className: "position-absolute w-100",
style: backgroundImageStyle,
fallbackUrl:
"https://ipfs.near.social/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
}}
/>
) : (
<img
className="position-absolute w-100"
style={backgroundImageStyle}
src={getImageSrc(profile.backgroundImage)}
alt="background"
/>
)}
</BackgroundImageContainer>
<ProfileImageContainer class="profile-picture d-inline-block">
{profile.image?.nft ? (
<Widget
src="mob.near/widget/Image"
props={{
image: profile.image,
alt: "avatar",
className: "rounded-circle w-100 img-thumbnail d-block",
style: profileImageStyle,
fallbackUrl:
"https://ipfs.near.social/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
}}
/>
) : (
<img
className="rounded-circle w-100 img-thumbnail d-block"
style={profileImageStyle}
src={getImageSrc(profile.image)}
alt="avatar"
/>
)}
</ProfileImageContainer>
</HeaderContainer>
<Info>
<Title>{name}</Title>
<SubTitle>
{description.length > MAX_DESCRIPTION_LENGTH
? description.slice(0, MAX_DESCRIPTION_LENGTH) + "..."
: description}
</SubTitle>
{!tags.length ? (
"No tags"
) : (
<img
className="position-absolute w-100"
style={backgroundImageStyle}
src={getImageSrc(profile.backgroundImage)}
alt="background"
/>
<Tags>
{tags.map((tag, tagIndex) => (
<Tag key={tagIndex}>{tag}</Tag>
))}
</Tags>
)}
</BackgroundImageContainer>
<ProfileImageContainer
class="profile-picture d-inline-block"
// profileImageTranslateYPx={props.profileImageTranslateYPx}
// profileImageTranslateYPxMobile={props.profileImageTranslateYPxMobile}
>
{profile.image?.nft ? (
<Widget
src="mob.near/widget/Image"
props={{
image: profile.image,
alt: "avatar",
className: "rounded-circle w-100 img-thumbnail d-block",
style: profileImageStyle,
fallbackUrl:
"https://ipfs.near.social/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
</Info>
<DonationsInfoContainer>
<DonationsInfoItem>
<Amount>
{totalAmountNear ? yoctosToUsdWithFallback(totalAmountNear, true) : "-"}
</Amount>
<AmountDescriptor>Raised</AmountDescriptor>
</DonationsInfoItem>
{payoutDetails && (
<DonationsInfoItem>
<Amount>{payoutDetails.donorCount}</Amount>
<AmountDescriptor>
{payoutDetails.donorCount === 1 ? "Donor" : "Donors"}
</AmountDescriptor>
</DonationsInfoItem>
)}
{props.allowDonate && context.accountId && (
<DonationButton
onClick={(e) => {
e.preventDefault();
openDonateModal();
}}
/>
) : (
<img
className="rounded-circle w-100 img-thumbnail d-block"
style={profileImageStyle}
src={getImageSrc(profile.image)}
alt="avatar"
/>
disabled={!context.accountId}
>
{props.requireVerification ? "Verify to donate" : "Donate"}
</DonationButton>
)}
</ProfileImageContainer>
</HeaderContainer>
<Info>
<Title>{name}</Title>
<SubTitle>
{description.length > MAX_DESCRIPTION_LENGTH
? description.slice(0, MAX_DESCRIPTION_LENGTH) + "..."
: description}
</SubTitle>
{!tags.length ? (
"No tags"
) : (
<Tags>
{tags.map((tag, tagIndex) => (
<Tag key={tagIndex}>{tag}</Tag>
))}
</Tags>
)}
</Info>
<DonationsInfoContainer>
<DonationsInfoItem>
<Amount>{totalAmountNear ? yoctosToUsdWithFallback(totalAmountNear, true) : "-"}</Amount>
<AmountDescriptor>Raised</AmountDescriptor>
</DonationsInfoItem>
</DonationsInfoContainer>
{payoutDetails && (
<DonationsInfoItem>
<Amount>{payoutDetails.donorCount}</Amount>
<AmountDescriptor>
{payoutDetails.donorCount === 1 ? "Donor" : "Donors"}
</AmountDescriptor>
</DonationsInfoItem>
)}
{props.allowDonate && context.accountId && (
<DonationButton
onClick={(e) => {
e.preventDefault();
openDonateModal();
}}
disabled={!context.accountId}
>
{props.requireVerification ? "Verify to donate" : "Donate"}
</DonationButton>
<MatchingSection>
<MatchingTitle>Estimated matched amount</MatchingTitle>
<MatchingAmount>
{yoctosToNear(payoutDetails.matchingAmount, true) || "- N"}
</MatchingAmount>
</MatchingSection>
)}
{/* <Widget
src={`${ownerId}/widget/Components.Button`}
props={{
type: "secondary",
text: "Donate",
onClick: () => {
props.openDonateToProjectModal(projectId);
},
}}
/> */}
{/* <DonationsInfoItem>
<Title>{totalDonors || totalDonors === 0 ? totalDonors : "-"}</Title>
<SubTitle>{totalDonors === 1 ? "Donor" : "Donors"}</SubTitle>
</DonationsInfoItem> */}
</DonationsInfoContainer>
{payoutDetails && (
<MatchingSection>
<MatchingTitle>Estimated matched amount</MatchingTitle>
<MatchingAmount>
{yoctosToNear(payoutDetails.matchingAmount, true) || "- N"}
</MatchingAmount>
</MatchingSection>
)}
{/* {props.allowDonate && (
<Widget
src={`${ownerId}/widget/Cart.AddToCart`}
props={{
...props,
projectId,
style: {
borderRadius: "0px 0px 6px 6px",
boxShadow: "0px",
border: "0px",
},
stopPropagation: true,
showModal: false,
}}
/>
)} */}
{/* {props.requireVerification && (
<Widget
src={`${ownerId}/widget/Pots.ButtonVerifyToDonate`}
props={{
...props,
style: {
borderRadius: "0px 0px 6px 6px",
boxShadow: "0px",
border: "0px",
},
href: NADA_BOT_URL,
}}
/>
)} */}
</Card>
</Card>
</CardLink>
{state.donateModal.isOpen && (
<Widget
src={`${ownerId}/widget/Project.ModalDonation`}
Expand Down
3 changes: 2 additions & 1 deletion apps/potlock/widget/Project/ListPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const CardSkeletonContainer = styled.div`
border: 1px solid #dbdbdb;
margin-left: auto;
margin-right: auto;
overflow: hidden;
animation-name: ${loadingSkeleton};
animation-duration: 1s;
animation-iteration-count: infinite;
Expand Down Expand Up @@ -263,6 +263,7 @@ const ProjectsContainer = styled.div`
flex-direction: column;
align-items: center;
width: 100%;
overflow-y: hidden;
// padding: 0px 64px 96px 64px;
// background: #fafafa;
Expand Down
Loading

0 comments on commit ea83d73

Please sign in to comment.