diff --git a/src/pages/Pot/NavPages/Sponsors/Sponsors.tsx b/src/pages/Pot/NavPages/Sponsors/Sponsors.tsx
index 5e7a0e53..566a6e19 100644
--- a/src/pages/Pot/NavPages/Sponsors/Sponsors.tsx
+++ b/src/pages/Pot/NavPages/Sponsors/Sponsors.tsx
@@ -1,50 +1,59 @@
-import { State, state, useParams } from "alem";
-import PotSDK from "@app/SDK/pot";
-import { PotDetail } from "@app/types";
+import { useEffect, useParams, useState } from "alem";
+import { getConfig, getSponsorships } from "@app/services/getPotData";
+import { PotDetail, PotDonation } from "@app/types";
import SponsorsBoard from "../../components/SponsorsBoard/SponsorsBoard";
import SponsorsTable from "../../components/SponsorsTable/SponsorsTable";
import { Container, TableContainer } from "./styles";
-const Sponsors = ({ potDetail }: { potDetail: PotDetail }) => {
+const Sponsors = () => {
const { potId } = useParams();
- let sponsorshipDonations = PotSDK.getMatchingPoolDonations(potId);
-
- State.init({
- sponsorshipDonations: null,
- });
-
- if (sponsorshipDonations && !state.sponsorshipDonations) {
- // accumulate donations for each address
- sponsorshipDonations = sponsorshipDonations.reduce((accumulator: any, currentDonation: any) => {
- accumulator[currentDonation.donor_id] = {
- amount: accumulator[currentDonation.donor_id].amount || 0 + currentDonation.net_amount,
- ...currentDonation,
- };
- return accumulator;
- }, {});
-
- // add % share of total to each donation
- const total = parseFloat(potDetail.matching_pool_balance);
-
- sponsorshipDonations = Object.values(sponsorshipDonations).sort((a: any, b: any) => b.amount - a.amount);
- sponsorshipDonations = sponsorshipDonations.map((donation: any) => {
- return {
- ...donation,
- percentage_share: ((donation.amount / total) * 100).toFixed(2).replace(/[.,]00$/, ""),
- };
- });
- State.update({ sponsorshipDonations });
- }
-
- if (!state.sponsorshipDonations) return
;
+ const [sponsorshipDonations, setSponsorshipDonations] = useState
(null);
+ const [potDetail, setPotDetail] = useState(null);
+
+ useEffect(() => {
+ if (!potDetail) {
+ getConfig({
+ potId,
+ updateState: setPotDetail,
+ });
+ }
+ if (!sponsorshipDonations && potDetail) {
+ getSponsorships({
+ potId,
+ updateState: (donations) => {
+ let sponsorshipDonations = donations.reduce((accumulator: any, currentDonation: any) => {
+ accumulator[currentDonation.donor_id] = {
+ amount: accumulator[currentDonation.donor_id].amount || 0 + currentDonation.net_amount,
+ ...currentDonation,
+ };
+ return accumulator;
+ }, {});
+
+ // add % share of total to each donation
+ const total = parseFloat(potDetail.matching_pool_balance);
+
+ sponsorshipDonations = Object.values(sponsorshipDonations).sort((a: any, b: any) => b.amount - a.amount);
+ sponsorshipDonations = sponsorshipDonations.map((donation: any) => {
+ return {
+ ...donation,
+ percentage_share: ((donation.amount / total) * 100).toFixed(2).replace(/[.,]00$/, ""),
+ };
+ });
+ setSponsorshipDonations(sponsorshipDonations);
+ },
+ });
+ }
+ }, [potDetail]);
+
+ if (!sponsorshipDonations) return ;
return (
-
+
-
+
);
diff --git a/src/pages/Pot/Pot.tsx b/src/pages/Pot/Pot.tsx
index 9c463f50..07bd7cbe 100644
--- a/src/pages/Pot/Pot.tsx
+++ b/src/pages/Pot/Pot.tsx
@@ -1,5 +1,6 @@
import { Big, useParams, useCache, useMemo } from "alem";
import PotSDK from "@app/SDK/pot";
+import useModals from "@app/hooks/useModals";
import { PotDetail } from "@app/types";
import Tabs from "../Profile/components/Tabs";
import Header from "./components/Header/Header";
@@ -44,46 +45,23 @@ const Pot = () => {
// default to home tab
}
- // Get total public donations
- const allDonationsPaginated = useCache(() => {
- const limit = 480; // number of donations to fetch per req
-
- const donationsCount = potDetail.public_donations_count;
- const paginations = [...Array(Math.ceil(donationsCount / limit)).keys()];
-
- try {
- const allDonations = paginations.map((index) =>
- PotSDK.asyncGetPublicRoundDonations(potId, {
- from_index: index * limit,
- limit: limit,
- }),
- );
-
- return Promise.all(allDonations);
- } catch (error) {
- console.error(`error getting public donations`, error);
- return Promise.all([]);
- }
- }, "pot-public-donations");
-
- const allDonations = allDonationsPaginated ? allDonationsPaginated.flat() : null;
-
const options = navOptions(potId || "", potDetail);
const SelectedNavComponent = useMemo(() => {
return options.find((option: any) => option.id === nav).source;
}, []);
+ const Modals = useModals();
+
return (
-
-
+
+
+
-
- {SelectedNavComponent && }
-
+ {SelectedNavComponent && }
);
};
diff --git a/src/pages/Pot/components/FlaggedAccounts/FlaggedAccounts.tsx b/src/pages/Pot/components/FlaggedAccounts/FlaggedAccounts.tsx
index 3f884ecf..ab9786f7 100644
--- a/src/pages/Pot/components/FlaggedAccounts/FlaggedAccounts.tsx
+++ b/src/pages/Pot/components/FlaggedAccounts/FlaggedAccounts.tsx
@@ -1,36 +1,45 @@
-import { useParams, useState } from "alem";
+import { useEffect, useParams, useState } from "alem";
import PotSDK from "@app/SDK/pot";
import ProfileImage from "@app/components/mob.near/ProfileImage";
+import { getConfig, getFlaggedAccounts } from "@app/services/getPotData";
import { PotDetail } from "@app/types";
import hrefWithParams from "@app/utils/hrefWithParams";
import { Container, Flag, Line, Table, Title } from "./styles";
-const FlaggedAccounts = ({ potDetail }: { potDetail: PotDetail }) => {
+const FlaggedAccounts = () => {
const { potId } = useParams();
const [flaggedAddresses, setFlaggedAddresses] = useState(null);
+ const [potDetail, setPotDetail] = useState(null);
const [toggleView, setToggleView] = useState(null);
- if (!flaggedAddresses) {
- PotSDK.getFlaggedAccounts(potDetail, potId)
- .then((data) => {
- const listOfFlagged: any = [];
- data.forEach((adminFlaggedAcc: any) => {
- const addresses = Object.keys(adminFlaggedAcc.potFlaggedAcc);
- addresses.forEach((address) => {
- listOfFlagged.push({
- address: address,
- reason: adminFlaggedAcc.potFlaggedAcc[address],
- flaggedBy: adminFlaggedAcc.flaggedBy,
- role: adminFlaggedAcc.role,
+ useEffect(() => {
+ if (!potDetail) getConfig({ potId, updateState: setPotDetail });
+ if (!flaggedAddresses && potDetail)
+ getFlaggedAccounts({
+ potId,
+ potDetail,
+ type: "obj",
+ updateState: (data) => {
+ console.log("data", data);
+
+ const listOfFlagged: any = [];
+ data.forEach((adminFlaggedAcc: any) => {
+ const addresses = Object.keys(adminFlaggedAcc.potFlaggedAcc);
+ addresses.forEach((address) => {
+ listOfFlagged.push({
+ address: address,
+ reason: adminFlaggedAcc.potFlaggedAcc[address],
+ flaggedBy: adminFlaggedAcc.flaggedBy,
+ role: adminFlaggedAcc.role,
+ });
});
});
- });
- setFlaggedAddresses(listOfFlagged);
- })
- .catch((err) => console.log("error getting the flagged accounts ", err));
- }
+ setFlaggedAddresses(listOfFlagged);
+ },
+ });
+ }, [potDetail]);
return !flaggedAddresses ? (
"Loading..."
diff --git a/src/pages/Pot/components/Header/Header.tsx b/src/pages/Pot/components/Header/Header.tsx
index 146ddd5b..8a026c94 100644
--- a/src/pages/Pot/components/Header/Header.tsx
+++ b/src/pages/Pot/components/Header/Header.tsx
@@ -4,11 +4,12 @@ import Button from "@app/components/Button";
import constants from "@app/constants";
import { useDonationModal } from "@app/hooks/useDonationModal";
import useModals from "@app/hooks/useModals";
+import nearToUsd from "@app/modules/nearToUsd";
import CopyIcon from "@app/pages/Project/components/CopyIcon";
-import { PotDetail } from "@app/types";
+import { getConfig, getDonations, getFlaggedAccounts, getPotProjects } from "@app/services/getPotData";
+import { PotDetail, PotDonation } from "@app/types";
import calculatePayouts from "@app/utils/calculatePayouts";
import getTransactionsFromHashes from "@app/utils/getTransactionsFromHashes";
-import nearToUsd from "@app/utils/nearToUsd";
import yoctosToNear from "@app/utils/yoctosToNear";
import yoctosToUsdWithFallback from "@app/utils/yoctosToUsdWithFallback";
import ChallengeModal from "../ChallengeModal/ChallengeModal";
@@ -18,23 +19,7 @@ import PoolAllocationTable from "../PoolAllocationTable/PoolAllocationTable";
import SuccessFundModal, { ExtendedFundDonation } from "../SuccessFundModal/SuccessFundModal";
import { ButtonsWrapper, Container, Description, Fund, HeaderWrapper, Referral, Title } from "./styles";
-const Header = ({ potDetail, allDonations }: { potDetail: PotDetail; allDonations: any }) => {
- const {
- admins,
- chef,
- owner,
- pot_name,
- pot_description,
- matching_pool_balance,
- public_round_end_ms,
- public_round_start_ms,
- application_start_ms,
- application_end_ms,
- cooldown_end_ms: _cooldown_end_ms,
- all_paid_out,
- registry_provider,
- } = potDetail;
-
+const Header = () => {
const { IPFS_BASE_URL, NADA_BOT_URL } = constants;
const { potId, transactionHashes } = useParams();
@@ -55,29 +40,59 @@ const Header = ({ potDetail, allDonations }: { potDetail: PotDetail; allDonation
const [isDao, setIsDao] = useState(null);
const [applicationSuccess, setApplicationSuccess] = useState(null);
const [flaggedAddresses, setFlaggedAddresses] = useState(null);
+ const [potDetail, setPotDetail] = useState(null);
+ const [allDonations, setAlldonations] = useState(null);
// set fund mathcing pool success
const [fundDonation, setFundDonation] = useState(null);
- const verifyIsOnRegistry = (address: any) => {
- Near.asyncView("lists.potlock.near", "get_registrations_for_registrant", {
- registrant_id: address,
- }).then((registrations) => {
- const registration = registrations.find(
- (registration: any) => registration.list_id === 1, // potlock registry list id
- );
- if (registration) {
- setRegistryStatus(registration.status);
- }
- });
- };
-
useEffect(() => {
- if (!isDao) {
- verifyIsOnRegistry(context.accountId || "");
+ if (!potDetail)
+ getConfig({
+ potId,
+ updateState: setPotDetail,
+ });
+ if (!projects)
+ getPotProjects({
+ potId,
+ isApprpved: true,
+ updateState: setProjects,
+ });
+ if (potDetail && !flaggedAddresses) {
+ getFlaggedAccounts({
+ potId,
+ potDetail,
+ type: "list",
+ updateState: setFlaggedAddresses,
+ });
}
- }, []);
+ if (!allDonations && potDetail)
+ getDonations({
+ potId,
+ potDetail,
+ updateState: setAlldonations,
+ });
+ }, [potDetail]);
+
+ if (potDetail === null) return ;
// Handle fund success for web wallet
+
+ const {
+ admins,
+ chef,
+ owner,
+ pot_name,
+ pot_description,
+ matching_pool_balance,
+ public_round_end_ms,
+ public_round_start_ms,
+ application_start_ms,
+ application_end_ms,
+ cooldown_end_ms: _cooldown_end_ms,
+ all_paid_out,
+ registry_provider,
+ } = potDetail;
+
useEffect(() => {
if (accountId && transactionHashes) {
getTransactionsFromHashes(transactionHashes, accountId).then((trxs) => {
@@ -88,7 +103,7 @@ const Header = ({ potDetail, allDonations }: { potDetail: PotDetail; allDonation
const successVal = trxs[0].body.result.status?.SuccessValue;
const result = JSON.parse(Buffer.from(successVal, "base64").toString("utf-8")); // atob not working
- if (methodName === "donate" && receiver_id === potId && result) {
+ if (methodName === "donate" && receiver_id === potId && result.matching_pool) {
setFundDonation({
...result,
potId,
@@ -99,20 +114,31 @@ const Header = ({ potDetail, allDonations }: { potDetail: PotDetail; allDonation
}
}, []);
+ const verifyIsOnRegistry = (address: any) => {
+ Near.asyncView("lists.potlock.near", "get_registrations_for_registrant", {
+ registrant_id: address,
+ }).then((registrations) => {
+ const registration = registrations.find(
+ (registration: any) => registration.list_id === 1, // potlock registry list id
+ );
+ if (registration) {
+ setRegistryStatus(registration.status);
+ }
+ });
+ };
+
+ useEffect(() => {
+ if (!isDao) {
+ verifyIsOnRegistry(context.accountId || "");
+ }
+ }, []);
+
const projectNotRegistered = registryStatus === null;
const userIsAdminOrGreater = admins.includes(accountId) || owner === accountId;
const userIsChefOrGreater = userIsAdminOrGreater || chef === accountId;
const existingApplication = PotSDK.getApplicationByProjectId(potId, context.accountId);
- useEffect(() => {
- if (!projects) {
- PotSDK.asyncGetApprovedApplications(potId).then((projects: any) => {
- setProjects(projects);
- });
- }
- }, []);
-
const applicationExists = existingApplication || applicationSuccess;
const now = Date.now();
@@ -136,19 +162,6 @@ const Header = ({ potDetail, allDonations }: { potDetail: PotDetail; allDonation
const payoutsChallenges = PotSDK.getPayoutsChallenges(potId);
- if (!flaggedAddresses) {
- PotSDK.getFlaggedAccounts(potDetail, potId)
- .then((data) => {
- const listOfFlagged: any = [];
- data.forEach((adminFlaggedAcc: any) => {
- const addresses = Object.keys(adminFlaggedAcc.potFlaggedAcc);
- listOfFlagged.push(...addresses);
- });
- setFlaggedAddresses(listOfFlagged);
- })
- .catch((err) => console.log("error getting the flagged accounts ", err));
- }
-
const handleSetPayouts = () => {
if (allDonations && flaggedAddresses !== null) {
calculatePayouts(allDonations, matching_pool_balance, flaggedAddresses).then((calculatedPayouts: any) => {
@@ -242,7 +255,7 @@ const Header = ({ potDetail, allDonations }: { potDetail: PotDetail; allDonation
{isApplicationModalOpen && (
{
+const HeaderStatus = () => {
+ const { potId } = useParams();
const [mobileMenuActive, setMobileMenuActive] = useState(false);
+ const [potDetail, setPotDetail] = useState(null);
+
+ useEffect(() => {
+ if (!potDetail) getConfig({ potId, updateState: setPotDetail });
+ }, []);
+
+ if (potDetail === null) return "";
+
const stats = statsList(potDetail);
const getIndexOfActive = () => {
diff --git a/src/pages/Pot/components/PoolAllocationTable/PoolAllocationTable.tsx b/src/pages/Pot/components/PoolAllocationTable/PoolAllocationTable.tsx
index f6692ef6..de24d123 100644
--- a/src/pages/Pot/components/PoolAllocationTable/PoolAllocationTable.tsx
+++ b/src/pages/Pot/components/PoolAllocationTable/PoolAllocationTable.tsx
@@ -1,38 +1,76 @@
-import { useState, useParams, Big } from "alem";
-import PotSDK from "@app/SDK/pot";
+import { useState, useParams, Big, Social, useEffect, useMemo } from "alem";
+import Image from "@app/components/mob.near/Image";
import constants from "@app/constants";
-import { PotDetail } from "@app/types";
+import nearToUsd from "@app/modules/nearToUsd";
+import { getConfig, getDonations, getFlaggedAccounts, getPayout, getSponsorships } from "@app/services/getPotData";
+import { FlaggedAddress, Payout, PotDetail, PotDonation } from "@app/types";
import _address from "@app/utils/_address";
-import calculatePayouts from "@app/utils/calculatePayouts";
+import formatWithCommas from "@app/utils/formatWithCommas";
+import hrefWithParams from "@app/utils/hrefWithParams";
import nearToUsdWithFallback from "@app/utils/nearToUsdWithFallback";
import yoctosToUsdWithFallback from "@app/utils/yoctosToUsdWithFallback";
-import Table from "./Table/Table";
+import TableSkeleton from "./Table/TableSkeleton";
+import { Container, Row } from "./Table/styles";
-type Props = {
- potDetail: PotDetail;
- allDonations: any;
-};
-
-const PoolAllocationTable = ({ potDetail, allDonations }: Props) => {
+const PoolAllocationTable = () => {
const { SUPPORTED_FTS } = constants;
- const { base_currency, total_public_donations, matching_pool_balance, public_donations_count } = potDetail;
-
- const [projectsId, setProjectsId] = useState(null);
- const [allPayouts, setAllPayouts] = useState(null);
- const [flaggedAddresses, setFlaggedAddresses] = useState(null);
-
const { potId } = useParams();
- if (!projectsId) {
- PotSDK.asyncGetApprovedApplications(potId).then((projects: any) => {
- setProjectsId(projects);
- });
- }
+ const [allPayouts, setAllPayouts] = useState(null);
+ const [sponsorshipDonations, setSponsorshipDonations] = useState(null);
+ const [usdToggle, setUsdToggle] = useState(false);
+ const [allDonations, setDonations] = useState(null);
+ const [flaggedAddresses, setFlaggedAddresses] = useState(null);
+ const [potDetail, setPotDetail] = useState(null);
+
+ useEffect(() => {
+ if (!sponsorshipDonations)
+ getSponsorships({
+ potId,
+ updateState: setSponsorshipDonations,
+ });
+ if (!potDetail)
+ getConfig({
+ potId,
+ updateState: setPotDetail,
+ });
+ }, []);
+
+ useEffect(() => {
+ if (potDetail) {
+ if (!flaggedAddresses)
+ getFlaggedAccounts({
+ potId,
+ potDetail,
+ type: "list",
+ updateState: setFlaggedAddresses,
+ });
+ if (!allDonations)
+ getDonations({
+ potId,
+ potDetail,
+ updateState: setDonations,
+ });
+ }
+ }, [potDetail]);
+
+ useEffect(() => {
+ if (potDetail && flaggedAddresses && allDonations && !allPayouts) {
+ getPayout({
+ allDonations,
+ flaggedAddresses,
+ potDetail,
+ potId,
+ withTotalAmount: false,
+ updateState: setAllPayouts,
+ });
+ }
+ }, [potDetail, flaggedAddresses, allDonations]);
- let sponsorshipDonations = PotSDK.getMatchingPoolDonations(potId);
+ if (potDetail === null) return ;
- if (sponsorshipDonations) sponsorshipDonations.sort((a: any, b: any) => b.net_amount - a.net_amount);
+ const { total_public_donations, public_donations_count } = potDetail;
const calcMatchedAmount = (donations: any) => {
if (donations) {
@@ -40,74 +78,95 @@ const PoolAllocationTable = ({ potDetail, allDonations }: Props) => {
donations?.forEach((donation: any) => {
total = total.plus(Big(donation.net_amount));
});
- const amount = SUPPORTED_FTS[base_currency.toUpperCase() || "NEAR"].fromIndivisible(total.toString());
+ const amount = SUPPORTED_FTS["NEAR"].fromIndivisible(total.toString());
return amount;
}
};
- const uniqueDonorIds = allDonations ? new Set(allDonations.map((donation: any) => donation.donor_id)) : new Set([]);
-
- const donorsCount = uniqueDonorIds.size;
-
- if (!flaggedAddresses) {
- PotSDK.getFlaggedAccounts(potDetail, potId)
- .then((data) => {
- if (data) {
- const listOfFlagged: any = [];
- data?.forEach((adminFlaggedAcc: any) => {
- const addresses = Object.keys(adminFlaggedAcc.potFlaggedAcc);
- listOfFlagged.push(...addresses);
- });
- setFlaggedAddresses(listOfFlagged);
- }
- })
- .catch((err) => console.log("error getting the flagged accounts ", err));
- }
-
- const sortAndSetPayouts = (payouts: any) => {
- payouts.sort((a: any, b: any) => {
- // sort by matching pool allocation, highest to lowest
- return b.matchingAmount - a.matchingAmount;
- });
- setAllPayouts(payouts.slice(0, 5));
+ const donorsCount = useMemo(() => {
+ const uniqueDonorIds = allDonations ? new Set(allDonations.map((donation: any) => donation.donor_id)) : new Set([]);
+ return uniqueDonorIds.size;
+ }, [allDonations]);
+
+ const Table = ({ donations, totalAmount, totalUniqueDonors, title }: any) => {
+ return (
+
+
+ {totalAmount}
+ raised from
+ {totalUniqueDonors}
+ {title === "sponsors" ? "sponsors" : "donors"}
+
+
+
Top {title}
+
(nearToUsd ? setUsdToggle(!usdToggle) : "")}
+ >
+ {nearToUsd && (
+
+ )}
+ {usdToggle ? "USD" : "NEAR"}
+
+
+ #{idx + 1}
+
+
+ {_address(profile?.name || id, 15)}
+
+
+ {matchedAmout} {usdToggle ? " " : "N"}
+
+
+ );
+ })}
+
+ );
};
- if (!allPayouts && allDonations?.length > 0 && flaggedAddresses) {
- let allPayouts = [];
-
- if (potDetail.payouts.length) {
- allPayouts = potDetail.payouts.map((payout) => {
- const { project_id, amount } = payout;
- return {
- projectId: project_id,
- matchingAmount: amount,
- };
- });
- sortAndSetPayouts(allPayouts);
- } else {
- calculatePayouts(allDonations, matching_pool_balance, flaggedAddresses).then((calculatedPayouts: any) => {
- allPayouts = Object.entries(calculatedPayouts).map(([projectId, { matchingAmount }]: any) => {
- return {
- projectId,
- matchingAmount,
- };
- });
- sortAndSetPayouts(allPayouts);
- });
- }
- }
-
- return allPayouts?.length > 0 ? (
-
- ) : sponsorshipDonations.length > 0 ? (
+ return public_donations_count > 0 ? (
+ allPayouts !== null ? (
+
+ ) : (
+
+ )
+ ) : sponsorshipDonations === null ? (
+
+ ) : sponsorshipDonations?.length > 0 ? (
obj.donor_id)).size}
donations={sponsorshipDonations.slice(0, 5)}
/>
diff --git a/src/pages/Pot/components/PoolAllocationTable/Table/Table.tsx b/src/pages/Pot/components/PoolAllocationTable/Table/Table.tsx
index bf1abbc8..baa78cb6 100644
--- a/src/pages/Pot/components/PoolAllocationTable/Table/Table.tsx
+++ b/src/pages/Pot/components/PoolAllocationTable/Table/Table.tsx
@@ -1,11 +1,10 @@
import { Social, useState } from "alem";
import Image from "@app/components/mob.near/Image";
-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 formatWithCommas from "@app/utils/formatWithCommas";
import hrefWithParams from "@app/utils/hrefWithParams";
-import nearToUsd from "@app/utils/nearToUsd";
import yoctosToUsdWithFallback from "@app/utils/yoctosToUsdWithFallback";
import { Container, Row } from "./styles";
diff --git a/src/pages/Pot/components/PoolAllocationTable/Table/TableSkeleton.tsx b/src/pages/Pot/components/PoolAllocationTable/Table/TableSkeleton.tsx
new file mode 100644
index 00000000..3f40a694
--- /dev/null
+++ b/src/pages/Pot/components/PoolAllocationTable/Table/TableSkeleton.tsx
@@ -0,0 +1,29 @@
+import {
+ SkeletonContainer,
+ SkeletonHeader,
+ SkeletonRowItem,
+ SkeletonAddress,
+ SkeleteonProfile,
+ SkeletonName,
+ SkeletonAmount,
+} from "./styles";
+
+const TableSkeleton = () => {
+ return (
+
+
+ {new Array(5).fill(0).map((_, idx) => (
+
+ #{idx + 1}
+
+
+
+
+
+
+ ))}
+
+ );
+};
+
+export default TableSkeleton;
diff --git a/src/pages/Pot/components/PoolAllocationTable/Table/styles.ts b/src/pages/Pot/components/PoolAllocationTable/Table/styles.ts
index e4fce641..6063d1e6 100644
--- a/src/pages/Pot/components/PoolAllocationTable/Table/styles.ts
+++ b/src/pages/Pot/components/PoolAllocationTable/Table/styles.ts
@@ -73,3 +73,74 @@ export const Row = styled.div`
display: flex !important;
}
`;
+// skeleton
+
+const loadingSkeleton = styled.keyframes`
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.4;
+ }
+ 100% {
+ opacity: 1;
+ }
+`;
+
+export const SkeletonContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ height: 360px;
+ width: 100%;
+ max-width: 514px;
+ border-radius: 12px;
+ border-width: 1px 1px 2px;
+ border-style: solid;
+ border-color: rgb(41, 41, 41);
+ animation-name: ${loadingSkeleton};
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ overflow: hidden;
+`;
+export const SkeletonHeader = styled.div`
+ height: 90px;
+ width: 100%;
+ background: #eee;
+`;
+
+export const SkeletonRowItem = styled.div`
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding: 1rem;
+ gap: 8px;
+ border-bottom: 1px solid #c7c7c7;
+ &:last-of-type {
+ border-bottom: none;
+ }
+`;
+
+export const SkeletonAddress = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-left: 24px;
+ flex: 1;
+`;
+
+export const SkeleteonProfile = styled.div`
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background: #eee;
+`;
+export const SkeletonName = styled.div`
+ width: 100px;
+ height: 14px;
+ background: #eee;
+`;
+export const SkeletonAmount = styled.div`
+ width: 57px;
+ height: 14px;
+ background: #eee;
+`;
diff --git a/src/pages/Pot/components/SponsorsTable/SponsorsTable.tsx b/src/pages/Pot/components/SponsorsTable/SponsorsTable.tsx
index 84701ecb..02d4ca6e 100644
--- a/src/pages/Pot/components/SponsorsTable/SponsorsTable.tsx
+++ b/src/pages/Pot/components/SponsorsTable/SponsorsTable.tsx
@@ -2,9 +2,9 @@ import { OverlayTrigger, useEffect, useState, Tooltip, useParams } from "alem";
import Pagination from "@app/components/Pagination/Pagination";
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 { Container, NoResult, Percentage, TrRow } from "./styles";
const SponsorsTable = ({ sponsors }: { sponsors: any }) => {
diff --git a/src/pages/Profile/components/Tabs.tsx b/src/pages/Profile/components/Tabs.tsx
index 6326d847..e1440fed 100644
--- a/src/pages/Profile/components/Tabs.tsx
+++ b/src/pages/Profile/components/Tabs.tsx
@@ -48,14 +48,16 @@ const Tabs = ({ navOptions, nav }: Props) => {
}
`;
+ const Link = styled("Link")``;
+
return (
{navOptions.map((option: any) => {
const selected = option.id == getSelectedNavOption().id;
return option.label ? (
-
+
{option.label}
-
+
) : (
""
);
diff --git a/src/pages/Project/components/PotlockFunding/PotlockFunding.tsx b/src/pages/Project/components/PotlockFunding/PotlockFunding.tsx
index cdc54d85..4d0d10b7 100644
--- a/src/pages/Project/components/PotlockFunding/PotlockFunding.tsx
+++ b/src/pages/Project/components/PotlockFunding/PotlockFunding.tsx
@@ -2,10 +2,10 @@ import { Big, Near, useEffect, useState } from "alem";
import Dropdown from "@app/components/Inputs/Dropdown/Dropdown";
import Pagination from "@app/components/Pagination/Pagination";
import ProfileImage from "@app/components/mob.near/ProfileImage";
+import nearToUsd from "@app/modules/nearToUsd";
import _address from "@app/utils/_address";
import getTimePassed from "@app/utils/getTimePassed";
import hrefWithParams from "@app/utils/hrefWithParams";
-import nearToUsd from "@app/utils/nearToUsd";
import {
Container,
DropdownLabel,
diff --git a/src/pages/Projects/components/AllProjects/AllProjects.tsx b/src/pages/Projects/components/AllProjects/AllProjects.tsx
index 617bd242..adcdd1be 100644
--- a/src/pages/Projects/components/AllProjects/AllProjects.tsx
+++ b/src/pages/Projects/components/AllProjects/AllProjects.tsx
@@ -2,6 +2,7 @@ import { Social, createDebounce, useEffect, useState } from "alem";
import DonateSDK from "@app/SDK/donate";
import Card from "@app/components/Card/Card";
import FilterDropdown from "@app/components/Inputs/FilterDropdown/FilterDropdown";
+import useModals from "@app/hooks/useModals";
import getProjects from "@app/services/getProjects";
import { Project } from "@app/types";
import getTagsFromSocialProfileData from "@app/utils/getTagsFromSocialProfileData";
@@ -14,6 +15,7 @@ import tagsList from "./tagsList";
const AllProjects = () => {
const projectsData = getProjects();
+ const Modals = useModals();
const [totalDonation, setTotalDonation] = useState(0);
const [totalDonated, setTotalDonated] = useState("0");
@@ -121,6 +123,7 @@ const AllProjects = () => {
return (
+
All projects
diff --git a/src/pages/Projects/components/FeaturedProjects/FeaturedProjects.tsx b/src/pages/Projects/components/FeaturedProjects/FeaturedProjects.tsx
index 65d59439..f2d8f925 100644
--- a/src/pages/Projects/components/FeaturedProjects/FeaturedProjects.tsx
+++ b/src/pages/Projects/components/FeaturedProjects/FeaturedProjects.tsx
@@ -1,20 +1,15 @@
-import { useEffect, useMemo, useState } from "alem";
+import { State } from "alem";
import Card from "@app/components/Card/Card";
+import useModals from "@app/hooks/useModals";
import getProjects from "@app/services/getProjects";
-import { Project } from "@app/types";
import CardSkeleton from "../CardSkeleton";
import { ContainerHeader, Header, OnBottom, ProjectList, Title } from "./styles";
const FeaturedProjects = () => {
- const projectsData = getProjects();
- const [projects, setProjects] = useState<Project[]>([]);
+ State.init({});
+ const Modals = useModals();
- useEffect(() => {
- if (projectsData) {
- const { featuredProjects } = projectsData;
- setProjects(featuredProjects);
- }
- }, [projectsData]);
+ const { featuredProjects: projects } = getProjects();
const LoadingCards = () => (
<>
@@ -24,24 +19,20 @@ const FeaturedProjects = () => {
</>
);
- const projectCards = useMemo(
- () => (
- <>
- {projects.map((project: any) => {
- return <Card key={project.registrant_id} projectId={project.registrant_id} />;
- })}
- </>
- ),
- [projects],
- );
+ const projectCards = projects
+ ? projects.map((project: any) => {
+ return <Card key={project.registrant_id} projectId={project.registrant_id} />;
+ })
+ : [];
return (
<ContainerHeader>
+ <Modals />
<Header>
<Title>Featured projects
- {projects.length === 0 || !projectsData ? : <>{projectCards}}
+ {projects.length === 0 || !projects ? : <>{projectCards}}
);
diff --git a/src/pages/Projects/components/ListSection.tsx b/src/pages/Projects/components/ListSection.tsx
index 69a60f67..d4fb880e 100644
--- a/src/pages/Projects/components/ListSection.tsx
+++ b/src/pages/Projects/components/ListSection.tsx
@@ -1,5 +1,6 @@
-import { VM, props, useMemo } from "alem";
+import { props, useMemo } from "alem";
import styled from "styled-components";
+import Feed from "@app/components/devs.near/Feed";
type BreakPoint = {
breakpoint: number;
@@ -17,11 +18,9 @@ type Props = {
const ListSection = ({ shouldShuffle, items, renderItem }: Props) => {
const responsive = props.responsive || [];
- const { Feed } = VM.require("devs.near/widget/Feed");
-
- if (!Feed) {
- return Loading...
;
- }
+ // if (!Feed) {
+ // return Loading...
;
+ // }
const _items = useMemo(() => {
if (shouldShuffle) {
diff --git a/src/services/getPotData.ts b/src/services/getPotData.ts
new file mode 100644
index 00000000..e7bda39d
--- /dev/null
+++ b/src/services/getPotData.ts
@@ -0,0 +1,311 @@
+import { Storage } from "alem";
+import PotSDK from "@app/SDK/pot";
+import { FlaggedAddress, Payout, PotApplication, PotDetail, PotDonation, CalculatedPayout } from "@app/types";
+import calculatePayouts from "@app/utils/calculatePayouts";
+
+// type UpdateState = (newValues: Partial) => void;
+type UpdateState = (newValues: any) => void;
+
+type GetPayoutProps = {
+ potId: string;
+ withTotalAmount: boolean;
+ allDonations: PotDonation[];
+ flaggedAddresses: FlaggedAddress[];
+ potDetail: PotDetail;
+ updateState: UpdateState;
+};
+
+export type ProjectsState = {
+ potDetail?: PotDetail;
+ donations?: PotDonation[];
+ filteredProjects?: PotApplication[];
+ projects?: PotApplication[] | null;
+ flaggedAddresses?: FlaggedAddress[] | null;
+ payouts?: Record | null;
+};
+
+function isEqual(obj1: any, obj2: any) {
+ // Check if both are the same reference
+ if (obj1 === obj2) return true;
+
+ // Check if both are null or undefined
+ if (obj1 == null || obj2 == null) return false;
+
+ // Check if both are not objects (e.g., numbers, strings, etc.)
+ if (typeof obj1 !== "object" || typeof obj2 !== "object") return false;
+
+ // Get the keys of both objects
+ const keys1 = Object.keys(obj1);
+ const keys2 = Object.keys(obj2);
+
+ // Check if both objects have the same number of keys
+ if (keys1.length !== keys2.length) return false;
+
+ // Check if all keys and their values are the same
+ for (const key of keys1) {
+ if (!keys2.includes(key) || !isEqual(obj1[key], obj2[key])) {
+ return false;
+ }
+ }
+
+ return true;
+}
+
+function isObjectEqual(obj1: CalculatedPayout, obj2: CalculatedPayout): boolean {
+ return obj1.project_id === obj2.project_id && obj1.amount === obj2.amount;
+}
+
+function areListsEqual(list1: CalculatedPayout[], list2: CalculatedPayout[]): boolean {
+ // Check if both lists have the same length
+ if (list1.length !== list2.length) {
+ return false;
+ }
+
+ // Check if all objects in the lists are equal
+ for (let i = 0; i < list1.length; i++) {
+ if (!isObjectEqual(list1[i], list2[i])) {
+ return false;
+ }
+ }
+
+ // If no differences are found, return true
+ return true;
+}
+
+const getPotData = (potId: string, property: string) => Storage.get(`${potId}-${property}`);
+
+const setPotData = (potId: string, property: string, value: any) => Storage.set(`${potId}-${property}`, value);
+
+// Get pot detail
+export const getConfig = ({ potId, updateState }: { potId: string; updateState: UpdateState }) => {
+ const potDetail = getPotData(potId, "config");
+
+ if (potDetail) updateState(potDetail);
+
+ PotSDK.asyncGetConfig(potId)
+ .then((currentPotDetail: PotDetail) => {
+ if (isEqual(potDetail, currentPotDetail)) return;
+ else {
+ setPotData(potId, "config", currentPotDetail);
+ updateState(currentPotDetail);
+ }
+ })
+ .catch((err: unknown) => {
+ console.log("error getthing pot config ", err);
+ });
+};
+
+// get pot applications
+export function getPotProjects({
+ potId,
+ updateState,
+ isApprpved,
+}: {
+ potId: string;
+ updateState: UpdateState;
+ isApprpved: boolean;
+}) {
+ // get projects from local storage
+ const savedProject = getPotData(potId, "projects");
+
+ if (savedProject) {
+ // if storage project exist show it
+ let allProjects = savedProject;
+ // Check if only approved applications is requested
+ if (isApprpved) allProjects = allProjects.filter((project: PotApplication) => project.status === "Approved");
+ updateState(allProjects);
+ }
+ // check the current projects
+ PotSDK.asyncGetApplications(potId)
+ .then((projects: PotApplication[]) => {
+ if (projects.length === savedProject?.length) return;
+ setPotData(potId, "projects", projects);
+ let allProjects = projects;
+ if (isApprpved) allProjects = allProjects.filter((project: PotApplication) => project.status === "Approved");
+ updateState(allProjects);
+ })
+ .catch((error: unknown) => {
+ console.log("error fetching pot applications ", error);
+
+ updateState([]);
+ });
+}
+
+// get pot payouts
+export const getPayout = ({
+ potId,
+ allDonations,
+ flaggedAddresses,
+ potDetail,
+ withTotalAmount, // true => return object false=> return false
+ updateState,
+}: GetPayoutProps) => {
+ const storageKey = withTotalAmount ? "payouts-obj" : "payouts";
+
+ const flaggedLength = flaggedAddresses.length;
+ const allDonationsLength = allDonations.length;
+
+ const potData = getPotData(potId, storageKey);
+
+ const payouts = potData?.payouts;
+ const storedFlaggedLength = potData?.flaggedLength;
+ const storedAllDonationsLength = potData?.allDonationsLength;
+
+ // limit payment calculations by checking the calculatePayouts params
+ const isEqualStored = flaggedLength === storedFlaggedLength && storedAllDonationsLength === allDonationsLength;
+
+ if (payouts) updateState(payouts);
+
+ if (!isEqualStored || payouts.length === 0) {
+ if (potDetail.payouts.length && !withTotalAmount) {
+ const sortedPayouts = potDetail.payouts;
+ sortedPayouts.sort((a: any, b: any) => b.amount - a.amount);
+ setPotData(potId, storageKey, {
+ payouts: sortedPayouts,
+ flaggedLength,
+ allDonationsLength,
+ });
+ updateState(sortedPayouts);
+ } else if (allDonations?.length === 0 && flaggedAddresses?.length === 0) {
+ updateState({});
+ } else if (allDonations && flaggedAddresses) {
+ calculatePayouts(allDonations, potDetail.matching_pool_balance, flaggedAddresses).then((calculatedPayouts) => {
+ const currentPayouts =
+ potDetail.payouts.length > 0
+ ? potDetail.payouts.map((payout: Payout) => ({
+ ...payout,
+ donorCount: calculatedPayouts[payout.project_id].donorCount,
+ totalAmount: calculatedPayouts[payout.project_id].totalAmount,
+ }))
+ : Object.entries(calculatedPayouts).map(
+ ([projectId, { matchingAmount, donorCount, totalAmount }]: any) => ({
+ project_id: projectId,
+ amount: matchingAmount,
+ donorCount,
+ totalAmount,
+ }),
+ );
+ currentPayouts.sort((a: any, b: any) => b.amount - a.amount);
+
+ setPotData(potId, storageKey, {
+ payouts: currentPayouts,
+ flaggedLength,
+ allDonationsLength,
+ });
+ updateState(currentPayouts);
+ });
+ }
+ }
+};
+
+// get matched donations
+export const asyncGetPublicDonations = (potDetail: PotDetail, potId: string) => {
+ const limit = 480; // number of donations to fetch per req
+
+ const donationsCount = potDetail.public_donations_count;
+ const paginations = [...Array(Math.ceil(donationsCount / limit)).keys()];
+
+ try {
+ const allDonations = paginations.map((index) =>
+ PotSDK.asyncGetPublicRoundDonations(potId, {
+ from_index: index * limit,
+ limit: limit,
+ }),
+ );
+
+ return Promise.all(allDonations);
+ } catch (error) {
+ console.error(`error getting public donations`, error);
+ return Promise.all([]);
+ }
+};
+
+export const getDonations = ({
+ potId,
+ potDetail,
+ updateState,
+}: {
+ potId: string;
+ potDetail: PotDetail;
+ updateState: UpdateState;
+}) => {
+ const donations = getPotData(potId, "donations");
+
+ if (donations) updateState(donations);
+
+ if (potDetail.public_donations_count !== donations?.length) {
+ asyncGetPublicDonations(potDetail, potId).then((paginatedDonations) => {
+ const currentDonations = paginatedDonations ? paginatedDonations.flat() : [];
+ currentDonations.reverse();
+ setPotData(potId, "donations", currentDonations);
+ updateState(currentDonations);
+ });
+ }
+};
+
+const getListOfFlagged = (flaggedAddresses: FlaggedAddress[]) => {
+ const listOfFlagged: any = [];
+ flaggedAddresses.forEach((adminFlaggedAcc: any) => {
+ const addresses = Object.keys(adminFlaggedAcc.potFlaggedAcc);
+ listOfFlagged.push(...addresses);
+ });
+ return listOfFlagged;
+};
+
+export const getFlaggedAccounts = ({
+ potId,
+ potDetail,
+ updateState,
+ type,
+}: {
+ potId: string;
+ potDetail: PotDetail;
+ updateState: UpdateState;
+ type: "list" | "obj";
+}) => {
+ const flaggedAddresses = getPotData(potId, "flaggedAccounts") || [];
+
+ const saveListOfFlagged = getListOfFlagged(flaggedAddresses);
+
+ if (type === "list") {
+ updateState(saveListOfFlagged);
+ } else {
+ updateState(flaggedAddresses);
+ }
+
+ PotSDK.getFlaggedAccounts(potDetail, potId)
+ .then((data) => {
+ const liftOfFlagged = getListOfFlagged(data);
+
+ if (liftOfFlagged.length !== saveListOfFlagged.length) {
+ if (type === "list") {
+ setPotData(potId, "flaggedAccounts", data);
+ updateState(data);
+ } else {
+ setPotData(potId, "flaggedAccounts", data);
+ updateState(data);
+ }
+ }
+ })
+ .catch((err) => console.log("error getting the flagged accounts ", err));
+};
+
+export const getSponsorships = ({ potId, updateState }: { potId: string; updateState: UpdateState }) => {
+ const sponsors = getPotData(potId, "sponsors");
+
+ if (sponsors) updateState(sponsors);
+
+ PotSDK.asyncGetMatchingPoolDonations(potId)
+ .then((sponsorshipDonations: PotDonation[]) => {
+ sponsorshipDonations.sort((a: any, b: any) => b.net_amount - a.net_amount);
+ if (sponsors?.length === sponsorshipDonations?.length) return;
+ else {
+ updateState(sponsorshipDonations);
+ setPotData(potId, "sponsors", sponsorshipDonations);
+ }
+ })
+ .catch((err: unknown) => {
+ console.log("error fetching sponsors ", err);
+ updateState([]);
+ });
+};
diff --git a/src/types.ts b/src/types.ts
index 5f9c2a2b..33286515 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -54,22 +54,6 @@ export type Pot = {
deployed_at_ms: number;
};
-export type PotDonation = {
- id: string;
- donor_id: string;
- total_amount: string;
- net_amount: string;
- message: string;
- donated_at: number;
- project_id: null | string;
- referrer_id: null | string;
- referrer_fee: null | string;
- protocol_fee: string;
- matching_pool: boolean;
- chef_id: null | string;
- chef_fee: null | string;
-};
-
export type FundDonation = {
id: string;
donor_id: string;
@@ -110,3 +94,45 @@ export type PotApplication = {
updated_at: null | string;
review_notes: null | string;
};
+
+export interface PotDonation {
+ id: string;
+ donor_id: string;
+ total_amount: string;
+ net_amount: string;
+ message: string;
+ donated_at: number;
+ project_id: null | string;
+ referrer_id: null | string;
+ referrer_fee: null | string;
+ protocol_fee: string;
+ matching_pool: boolean;
+ chef_id: null | string;
+ chef_fee: null | string;
+}
+
+export enum PotAdminRoles {
+ Admin = "admin",
+ Chef = "chef",
+ Wwner = "owner",
+}
+
+export type FlaggedAddress = {
+ flaggedBy: string;
+ role: PotAdminRoles;
+ potFlaggedAcc: "string";
+};
+
+export type Payout = {
+ id: string;
+ project_id: string;
+ amount: string;
+ paid_at: number;
+};
+
+export type CalculatedPayout = {
+ project_id: string;
+ amount: number;
+ donorCount: number;
+ totalAmount: string;
+};
diff --git a/src/utils/calculatePayouts.ts b/src/utils/calculatePayouts.ts
index 73b38fa8..1bf81001 100644
--- a/src/utils/calculatePayouts.ts
+++ b/src/utils/calculatePayouts.ts
@@ -1,7 +1,12 @@
import { Big, Near } from "alem";
import constants from "@app/constants";
+import { CalculatedPayout } from "@app/types";
-const calculatePayouts = (allPotDonations: any, totalMatchingPool: any, blacklistedAccounts: any) => {
+const calculatePayouts = (
+ allPotDonations: any,
+ totalMatchingPool: any,
+ blacklistedAccounts: any,
+): Promise> => {
const { NADABOT_CONTRACT_ID } = constants;
// * QF/CLR logic taken from https://github.com/gitcoinco/quadratic-funding/blob/master/quadratic-funding/clr.py *
diff --git a/src/utils/nearToUsdWithFallback.ts b/src/utils/nearToUsdWithFallback.ts
index 2cc3d59c..507f560a 100644
--- a/src/utils/nearToUsdWithFallback.ts
+++ b/src/utils/nearToUsdWithFallback.ts
@@ -1,5 +1,5 @@
+import nearToUsd from "../modules/nearToUsd";
import formatWithCommas from "./formatWithCommas";
-import nearToUsd from "./nearToUsd";
const nearToUsdWithFallback = (amountNear: number, abbreviate?: boolean) => {
return nearToUsd
diff --git a/src/utils/yoctosToUsd.ts b/src/utils/yoctosToUsd.ts
index ddc2b687..8ccf447d 100644
--- a/src/utils/yoctosToUsd.ts
+++ b/src/utils/yoctosToUsd.ts
@@ -1,7 +1,7 @@
import { Big, asyncFetch, useCache } from "alem";
import formatWithCommas from "./formatWithCommas";
-const nearToUsd = useCache(
+const nearUsd = useCache(
() =>
asyncFetch("https://api.coingecko.com/api/v3/simple/price?ids=near&vs_currencies=usd").then((res) => {
if (res.ok) {
@@ -12,7 +12,7 @@ const nearToUsd = useCache(
);
const yoctosToUsd = (amount: number | string) => {
- return nearToUsd ? "~$" + formatWithCommas(new Big(amount).mul(nearToUsd).div(1e24).toFixed(2)) : "0";
+ return nearUsd ? "~$" + formatWithCommas(new Big(amount).mul(nearUsd).div(1e24).toFixed(2)) : "0";
};
export default yoctosToUsd;
diff --git a/src/utils/yoctosToUsdWithFallback.ts b/src/utils/yoctosToUsdWithFallback.ts
index 0987883b..2ee39adc 100644
--- a/src/utils/yoctosToUsdWithFallback.ts
+++ b/src/utils/yoctosToUsdWithFallback.ts
@@ -1,6 +1,6 @@
import { Big } from "alem";
+import nearToUsd from "../modules/nearToUsd";
import formatWithCommas from "./formatWithCommas";
-import nearToUsd from "./nearToUsd";
const yoctosToUsdWithFallback = (amountYoctos: string, abbreviate?: boolean) => {
return nearToUsd