Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improving the donation modal & projects loading #122

Merged
merged 20 commits into from
May 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions alem.config.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
}
},
"options": {
"ejectStatefulComponents": false,
"keepRoute": false,
"createLoaderWidget": true,
"loadingComponentFile": "src/components/SuspenseLoading.tsx",
Expand Down
2 changes: 1 addition & 1 deletion playwright-tests/tests/pot.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
6 changes: 5 additions & 1 deletion src/Main.tsx
Original file line number Diff line number Diff line change
@@ -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 />
Expand All @@ -12,6 +15,7 @@ const Main = () => {
<Routes />
</div>
<Banner />
{transactionHashes && <ModalSuccess />}
</>
);
};
Expand Down
4 changes: 1 addition & 3 deletions src/SDK/lists.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
4 changes: 2 additions & 2 deletions src/SDK/pot.js
Original file line number Diff line number Diff line change
Expand Up @@ -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", {
Expand Down
34 changes: 34 additions & 0 deletions src/components/Card/ButtonDonation.tsx
Original file line number Diff line number Diff line change
@@ -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;
51 changes: 14 additions & 37 deletions src/components/Card/Card.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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;
Expand All @@ -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);
Expand All @@ -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";
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
24 changes: 0 additions & 24 deletions src/components/Card/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/components/PotCard/styles.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
4 changes: 1 addition & 3 deletions src/hooks/useModals.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 />}
</>
);
Expand Down
4 changes: 2 additions & 2 deletions src/modals/ModalDonation/AmountInput/AmountInput.tsx
Original file line number Diff line number Diff line change
@@ -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) => {
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/modals/ModalDonation/ConfirmDirect/ConfirmDirect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ({
Expand Down
10 changes: 5 additions & 5 deletions src/modals/ModalDonation/ConfirmPot/ConfirmPot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -25,7 +25,7 @@ const ConfirmPot = ({
bypassChefFee,
updateState,
potDetail,
potId,
selectedRound,
referrerId,
accountId,
amount,
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -128,7 +128,7 @@ const ConfirmPot = ({

if (amount) {
transactions.push({
contractName: potId,
contractName: selectedRound,
methodName: "donate",
args: {
referrer_id: referrerId,
Expand Down
2 changes: 1 addition & 1 deletion src/modals/ModalDonation/FormPot/FormPot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
1 change: 0 additions & 1 deletion src/modals/ModalDonation/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,6 @@ const ModalDonation = () => {
{...donationModalProps}
{...state}
accountId={accountId}
potId={potId}
referrerId={referrerId}
updateState={State.update}
ftBalance={ftBalance}
Expand Down
4 changes: 2 additions & 2 deletions src/modals/ModalSuccess/ModalSuccess.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const ModalSuccess = () => {
});

const onClose = () => {
_setSuccessfulDonation(null);
if (_setSuccessfulDonation) _setSuccessfulDonation(null);
const location = getLocation();
delete params.transactionHashes;

Expand Down Expand Up @@ -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 },
Expand Down
File renamed without changes.
4 changes: 2 additions & 2 deletions src/pages/CreateProject/CreateProject.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
Expand Down
4 changes: 1 addition & 3 deletions src/pages/CreateProject/components/CreateForm/CreateForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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", {
Expand Down
Loading
Loading