diff --git a/apps/potlock/widget/Components/Banner.jsx b/apps/potlock/widget/Components/Banner.jsx index 1ac06f5..66bda85 100644 --- a/apps/potlock/widget/Components/Banner.jsx +++ b/apps/potlock/widget/Components/Banner.jsx @@ -58,6 +58,7 @@ const Container = styled.div` display: flex; justify-content: center; align-items: center; + overflow: hidden; .text { font-size: 22px; font-weight: 500; diff --git a/apps/potlock/widget/Components/Nav.jsx b/apps/potlock/widget/Components/Nav.jsx index c942c4b..b2b182d 100644 --- a/apps/potlock/widget/Components/Nav.jsx +++ b/apps/potlock/widget/Components/Nav.jsx @@ -8,7 +8,7 @@ const Nav = styled.div` // left: 0; width: 100%; display: flex; - padding: 0 64px 0 64px; + padding: 0 40px; justify-content: start; align-items: center; align-self: stretch; diff --git a/apps/potlock/widget/Components/NewHero.jsx b/apps/potlock/widget/Components/NewHero.jsx index 3f0ab89..1a141ea 100644 --- a/apps/potlock/widget/Components/NewHero.jsx +++ b/apps/potlock/widget/Components/NewHero.jsx @@ -1,17 +1,24 @@ +const Container = styled.div` + display: flex; + flex-direction: column; +`; + const HeroContainer = styled.div` display: flex; flex-direction: column; position: relative; width: 100%; justify-content: center; - min-height: 400px; + border: 1px solid #f8d3b0; + border-radius: 12px; overflow: hidden; .background { position: absolute; pointer-events: none; - height: 100%; - left: 0; - top: 0; + left: 0px; + width: 100%; + top: 0px; + min-height: 600px; } .content { position: relative; @@ -19,7 +26,7 @@ const HeroContainer = styled.div` display: flex; flex-direction: column; justify-content: center; - padding: 64px; + padding: 64px 40px; } .sub-title { color: #dd3345; @@ -70,7 +77,7 @@ const HeroContainer = styled.div` @media only screen and (max-width: 768px) { .content { - padding: 64px 20px; + padding: 48px 20px; } .title { font-size: 36px; @@ -93,26 +100,55 @@ const HeroContainer = styled.div` } `; -return ( - - -
-

Transforming Funding for Public Goods

-

- Discover impact projects, donate directly, &
participate in - funding rounds. -

-
- +const Line = styled.div` + width: 100%; + height: 1px; + background: #ebebeb; + margin-top: 1rem; +`; + +const { HomeBannerStyle } = VM.require("potlock.near/widget/Pots.HomeBannerBackground") || { + HomeBannerStyle: {}, +}; +const { DonationStats } = VM.require("potlock.near/widget/Project.DonationStats") || { + DonationStats: () => {}, +}; + +const NewHero = ({ isRegisteredProject, accountId, donateRandomly }) => { + return ( + + +
+

Transforming Funding for Public Goods

+

+ Discover impact projects, donate directly, &
participate + in funding rounds. +

+ +
+ + + + + ); +}; - - {isRegisteredProject ? "View Your Project" : "Register Your Project"} - -
-
- -); +return { + NewHero, +}; diff --git a/apps/potlock/widget/ModalDonation/ConfirmPot.jsx b/apps/potlock/widget/ModalDonation/ConfirmPot.jsx index 7b5a5e1..a36b9ae 100644 --- a/apps/potlock/widget/ModalDonation/ConfirmPot.jsx +++ b/apps/potlock/widget/ModalDonation/ConfirmPot.jsx @@ -257,7 +257,7 @@ const pollForDonationSuccess = ({ 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; + donations[project_id] = { ...donation, potId }; } } if (Object.keys(donations).length === projectIds.length) { diff --git a/apps/potlock/widget/Pots/Deploy.jsx b/apps/potlock/widget/Pots/Deploy.jsx index 5b4e159..e9255b0 100644 --- a/apps/potlock/widget/Pots/Deploy.jsx +++ b/apps/potlock/widget/Pots/Deploy.jsx @@ -4,8 +4,8 @@ const { ownerId } = VM.require("potlock.near/widget/constants") || { ownerId: "", }; -const { HomeBannerBackground } = VM.require("potlock.near/widget/Pots.HomeBannerBackground") || { - HomeBannerBackground: () => {}, +const { HomeBannerStyle } = VM.require("potlock.near/widget/Pots.HomeBannerBackground") || { + HomeBannerStyle: {}, }; const POT_CODE_LINK = "https://github.com/PotLock/core/tree/main/contracts/pot"; // for directing user to view source code for Pot @@ -131,9 +131,11 @@ return props.deploymentSuccess || state.deploymentSuccess ? ( ) : ( - - - +

Deploy pot

diff --git a/apps/potlock/widget/Pots/FlaggedAccounts.jsx b/apps/potlock/widget/Pots/FlaggedAccounts.jsx index 5ecb2bc..8e07f97 100644 --- a/apps/potlock/widget/Pots/FlaggedAccounts.jsx +++ b/apps/potlock/widget/Pots/FlaggedAccounts.jsx @@ -37,12 +37,12 @@ const Title = styled.div` const Table = styled.div` display: flex; flex-direction: column; - overflow-y: scroll; width: 100%; border-radius: 6px; border: 1px solid #7b7b7b; transition: max-height 400ms ease-in-out; overflow: hidden; + overflow-y: scroll; max-height: 1000px; opacity: 1; &.hidden { diff --git a/apps/potlock/widget/Pots/Home.jsx b/apps/potlock/widget/Pots/Home.jsx index 1a03da5..4a5ca2c 100644 --- a/apps/potlock/widget/Pots/Home.jsx +++ b/apps/potlock/widget/Pots/Home.jsx @@ -96,25 +96,30 @@ if (!pots) { const compareFunction = (pots) => { const potsSort = { - cooldown: { - check: filters.cooldown, - time: "cooldown_end_ms", - }, active: { check: filters.round_open, time: "public_round_end_ms", + items: [], + }, + cooldown: { + check: filters.cooldown, + time: "cooldown_end_ms", + items: [], }, application: { check: filters.application_open, time: "application_end_ms", + items: [], }, not_started: { check: filters.application_not_started, time: "application_start_ms", + items: [], }, rest: { check: (round) => true, time: "application_start_ms", + items: [], }, }; @@ -124,9 +129,10 @@ const compareFunction = (pots) => { const states = Object.keys(potsSort); pots.forEach((pot) => { - Object.values(potsSort).some((sort, idx) => { - if (sort.check(pot)) { - listOfPots[states[idx]] = [...(listOfPots[states[idx]] || []), pot]; + Object.keys(potsSort).some((type) => { + const { check, items } = potsSort[type]; + if (check(pot)) { + potsSort[type].items = [...items, pot]; return true; } }); @@ -135,11 +141,10 @@ const compareFunction = (pots) => { // sort pots(time left) const inProgressPots = []; - Object.entries(listOfPots).forEach(([status, potsList]) => { - potsList.sort((a, b) => a[potsSort[status].time] - b[potsSort[status].time]); - inProgressPots.push(...potsList); + Object.values(potsSort).forEach(({ items, time }) => { + items.sort((a, b) => a[time] - b[time]); + inProgressPots.push(...items); }); - return inProgressPots; }; @@ -245,7 +250,6 @@ const handleFilter = (selected) => { const filteredRounds = [...inProgressRounds].filter((round) => selectedList.some((key) => { - console.log("key", key); return filters[key](round) === true; }) ); diff --git a/apps/potlock/widget/Pots/HomeBanner.jsx b/apps/potlock/widget/Pots/HomeBanner.jsx index 42cc0ba..e9fe21d 100644 --- a/apps/potlock/widget/Pots/HomeBanner.jsx +++ b/apps/potlock/widget/Pots/HomeBanner.jsx @@ -3,8 +3,8 @@ const { canDeploy, hrefWithParams } = props; const { ownerId } = VM.require("potlock.near/widget/constants") || { ownerId: "", }; -const { HomeBannerBackground } = VM.require("potlock.near/widget/Pots.HomeBannerBackground") || { - HomeBannerBackground: () => {}, +const { HomeBannerStyle } = VM.require("potlock.near/widget/Pots.HomeBannerBackground") || { + HomeBannerStyle: {}, }; const Container = styled.div` @@ -101,9 +101,11 @@ const Container = styled.div` `; return ( - - - +

Explore Pots

diff --git a/apps/potlock/widget/Pots/HomeBannerBackground.jsx b/apps/potlock/widget/Pots/HomeBannerBackground.jsx index 5cddaa2..5ee5eb7 100644 --- a/apps/potlock/widget/Pots/HomeBannerBackground.jsx +++ b/apps/potlock/widget/Pots/HomeBannerBackground.jsx @@ -1,260 +1,111 @@ -const HomeBannerBackground = (props) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); +const svgContent = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; + +const HomeBannerStyle = { + backgroundImage: `url("data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent)}")`, + backgroundSize: "cover", + backgroundRepeat: "no-repeat", + backgroundColor: "#FEF6EE", +}; return { - HomeBannerBackground, + HomeBannerStyle, }; diff --git a/apps/potlock/widget/Pots/PoolAllocationTable.jsx b/apps/potlock/widget/Pots/PoolAllocationTable.jsx index 734be7f..d91d993 100644 --- a/apps/potlock/widget/Pots/PoolAllocationTable.jsx +++ b/apps/potlock/widget/Pots/PoolAllocationTable.jsx @@ -1,15 +1,7 @@ -const { - potId, - env, - hrefWithParams, - allDonations, - potDetail: { - base_currency, - total_public_donations, - matching_pool_balance, - public_donations_count, - }, -} = props; +const { potId, env, hrefWithParams, allDonations, potDetail } = props; + +const { base_currency, total_public_donations, matching_pool_balance, public_donations_count } = + potDetail; const { ownerId, NADA_BOT_URL, SUPPORTED_FTS } = VM.require("potlock.near/widget/constants") || { ownerId: "", @@ -110,7 +102,6 @@ const sortAndSetPayouts = (payouts) => { if (!allPayouts && allDonations?.length > 0 && flaggedAddresses) { let allPayouts = []; - if (potDetail.payouts.length) { allPayouts = potDetail.payouts.map((payout) => { const { project_id, amount } = payout; @@ -257,10 +248,14 @@ const Table = ({ donations, totalAmount, totalUniqueDonors, title }) => ( const matchedAmout = usdToggle ? yoctosToUsdWithFallback(matchingAmount || net_amount, true) : nearAmount; + + const url = projectId + ? `?tab=project&projectId=${projectId}` + : `?tab=profile&accountId=${donor_id}`; return (
#{idx + 1}
- + {_address(profile.name || id, 15)} diff --git a/apps/potlock/widget/Profile/FollowStats.jsx b/apps/potlock/widget/Profile/FollowStats.jsx index 2d90021..9f7daa0 100644 --- a/apps/potlock/widget/Profile/FollowStats.jsx +++ b/apps/potlock/widget/Profile/FollowStats.jsx @@ -47,7 +47,7 @@ return ( Follower{numFollowers !== 1 && "s"}

-
+
{numFollowing !== null ? {numFollowing} : "-"} diff --git a/apps/potlock/widget/Profile/Linktree.jsx b/apps/potlock/widget/Profile/Linktree.jsx index 0a3af09..76e0940 100644 --- a/apps/potlock/widget/Profile/Linktree.jsx +++ b/apps/potlock/widget/Profile/Linktree.jsx @@ -91,6 +91,7 @@ return ( {Object.entries(linktree).map(([k, v], idx) => { return k in itemIconUrls && v ? ( { diff --git a/apps/potlock/widget/Project/CreateForm.jsx b/apps/potlock/widget/Project/CreateForm.jsx index b11ddbf..2aff6ec 100644 --- a/apps/potlock/widget/Project/CreateForm.jsx +++ b/apps/potlock/widget/Project/CreateForm.jsx @@ -617,6 +617,8 @@ useEffect(() => { }, [state.socialDataFetched, state.isDao, state.daoAddress, context.accountId]); const isCreateProjectDisabled = + !state.profileImage || + !state.backgroundImage || state.daoAddressError || !state.name || state.nameError || diff --git a/apps/potlock/widget/Project/DonationStats.jsx b/apps/potlock/widget/Project/DonationStats.jsx index 82eaa29..3219790 100644 --- a/apps/potlock/widget/Project/DonationStats.jsx +++ b/apps/potlock/widget/Project/DonationStats.jsx @@ -2,42 +2,33 @@ const Stats = styled.div` display: flex; flex-direction: row; align-items: center; - justify-content: center; - gap: 48px; - margin-top: 40px; - + gap: 1.5rem; + margin-top: 1rem; + padding: 0 40px; @media screen and (max-width: 768px) { - gap: 16px; + gap: 1rem; + padding: 0 20px; } `; const StatsTitle = styled.div` - color: #292929; - font-size: 44px; display: flex; flex-direction: row; align-items: baseline; gap: 8px; font-weight: 600; - - @media screen and (max-width: 768px) { - font-size: 30px; - font-weight: 500; - gap: 5px; - } + font-size: 20px; + color: #dd3345; `; const StatsSubTitle = styled.div` - color: #525252; + color: #656565; font-size: 14px; - - @media screen and (max-width: 768px) { - font-size: 12px; - } + font-weight: 400; `; -const { yoctosToUsd } = VM.require("potlock.near/widget/utils") || { - yoctosToUsd: (amount) => amount, +const { yoctosToUsdWithFallback } = VM.require("potlock.near/widget/utils") || { + yoctosToUsdWithFallback: (amount) => amount, }; let DonateSDK = VM.require("potlock.near/widget/SDK.donate") || @@ -46,25 +37,31 @@ let DonateSDK = })); DonateSDK = DonateSDK({ env: props.env }); -const data = DonateSDK.getConfig() || { - net_donations_amount: 0, - total_donations_count: 0, -}; +const DonationStats = () => { + const data = DonateSDK.getConfig() || { + net_donations_amount: 0, + total_donations_count: 0, + }; -const lastDonationAmount = data.net_donations_amount - ? yoctosToUsd(data.net_donations_amount) - : null; -const totalDonations = data.total_donations_count; + const lastDonationAmount = data.net_donations_amount + ? yoctosToUsdWithFallback(data.net_donations_amount, true) + : null; + const totalDonations = data.total_donations_count; -return ( - - - {lastDonationAmount || "-"} - Donated - - - {totalDonations || "-"} - Donations - - -); + return ( + + + {lastDonationAmount || "-"} + Donated + + + {totalDonations || "-"} + Donations + + + ); +}; + +return { + DonationStats, +}; diff --git a/apps/potlock/widget/Project/ListPage.jsx b/apps/potlock/widget/Project/ListPage.jsx index 7586d34..36400be 100644 --- a/apps/potlock/widget/Project/ListPage.jsx +++ b/apps/potlock/widget/Project/ListPage.jsx @@ -5,8 +5,8 @@ const { getTagsFromSocialProfileData, getTeamMembersFromSocialProfileData } = VM getTeamMembersFromSocialProfileData: () => [], }; -const { HomeBannerBackground } = VM.require("potlock.near/widget/Pots.HomeBannerBackground") || { - HomeBannerBackground: () => {}, +const { NewHero } = VM.require("potlock.near/widget/Components.NewHero") || { + NewHero: () => {}, }; // Card Skeleton - Loading fallback @@ -150,63 +150,6 @@ const HeaderContainer = styled.div` } `; -const HeaderContent = styled.div` - display: flex; - flex-direction: column; - align-items: center; -`; - -const HeaderTitle = styled.div` - color: #2e2e2e; - font-size: ${headerTitleFontSizePx}px; - font-weight: 500; - word-wrap: break-word; - position: relative; - text-align: center; - z-index: 1; - position: relative; - font-family: "Lora"; - @media (max-width: 768px) { - font-size: 48px; - } -`; - -const HeaderDescription = styled.div` - color: #2e2e2e; - font-size: 32px; - font-weight: 400; - word-wrap: break-word; - max-width: 866px; - text-align: center; - margin-top: 32px; - - @media (max-width: 768px) { - font-size: 24px; - text-align: center; - } -`; - -const ButtonsContainer = styled.div` - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 32px; - margin-top: 32px; -`; - -const Underline = styled.div` - position: absolute; - top: ${headerTitleFontSizePx - 40}px; - left: -40px; - z-index: -1; - - @media (max-width: 768px) { - top: 30px; - left: -30px; - } -`; - const containerStyle = props.containerStyle ?? {}; const Container = styled.div` @@ -394,9 +337,9 @@ const StatsSubTitle = styled.div` const Content = styled.div` display: flex; flex-direction: column; - padding-top: 64px; + padding: 48px 40px 0; @media screen and (max-width: 768px) { - padding-top: 64px; + padding: 40px 20px 0; } `; @@ -613,95 +556,21 @@ const containerStyleHeader = { const SORT_FILTERS = { NEW_TO_OLD: "Newest to Oldest", OLD_TO_NEW: "Oldest to Newest", - // MOST_TO_LEAST_DONATIONS: "Most to Least Donations", - // LEAST_TO_MOST_DONATIONS: "Least to Most Donations", -}; - -const sortHighestToLowest = (projects) => { - const sort = (a, b) => { - return parseFloat(b.total) - parseFloat(a.total); - }; - const projectLength = projects.length; - - for (let i = 0; i < projectLength - 1; i++) { - for (let j = 0; j < projectLength - 1 - i; j++) { - if (sort(projects[j], projects[j + 1]) > 0) { - const temp = projects[j]; - projects[j] = projects[j + 1]; - projects[j + 1] = temp; - } - } - } - - setFilteredProjects(projects); -}; - -const sortLowestToHighest = (projects) => { - const sort = (a, b) => { - return parseFloat(b.total) - parseFloat(a.total); - }; - const projectLength = projects.length; - - for (let i = 0; i < projectLength - 1; i++) { - for (let j = 0; j < projectLength - 1 - i; j++) { - if (sort(projects[j], projects[j + 1]) < 0) { - const temp = projects[j]; - projects[j] = projects[j + 1]; - projects[j + 1] = temp; - } - } - } - - setFilteredProjects(projects); -}; - -const sortNewToOld = (projects) => { - const projectLength = projects.length; - - for (let i = 0; i < projectLength - 1; i++) { - for (let j = 0; j < projectLength - i - 1; j++) { - if (projects[j].submitted_ms < projects[j + 1].submitted_ms) { - const temp = projects[j]; - projects[j] = projects[j + 1]; - projects[j + 1] = temp; - } - } - } - setFilteredProjects(projects); -}; - -const sortOldToNew = (projects) => { - const projectLength = projects.length; - - for (let i = 0; i < projectLength - 1; i++) { - for (let j = 0; j < projectLength - i - 1; j++) { - if (projects[j].submitted_ms > projects[j + 1].submitted_ms) { - const temp = projects[j]; - projects[j] = projects[j + 1]; - projects[j + 1] = temp; - } - } - } - setFilteredProjects(projects); }; const handleSortChange = (sortType) => { setSort(sortType); + const projects = [...filteredProjects]; switch (sortType) { - case "All": - setFilteredProjects(filteredProjects); - break; case "Newest to Oldest": - sortNewToOld(filteredProjects); + projects.sort((a, b) => b.submitted_ms - a.submitted_ms); + setFilteredProjects(projects); break; case "Oldest to Newest": - sortOldToNew(filteredProjects); - break; - case "Most to Least Donations": - sortHighestToLowest(filteredProjects); + projects.sort((a, b) => a.submitted_ms - b.submitted_ms); + setFilteredProjects(projects); break; - case "Least to Most Donations": - sortLowestToHighest(filteredProjects); + default: break; } }; @@ -768,53 +637,11 @@ const getRandomProject = () => { return ( <> - - - - - Transforming - - - - - - - - Funding for Public Goods - - Discover impact projects, donate directly, & participate in funding rounds. - - - - - - - {isRegisteredProject ? "View Your Project" : "Register Your Project"} - - - - - +
@@ -895,7 +722,6 @@ return ( props={{ ...props, items: filteredProjects, - shouldShuffle: !isRegistryAdmin, renderItem: (project) => { return ( ({ ...prev, - [recipientId]: result, + [recipientId]: { ...result, potId: receiver_id }, })); } else if (methodName === "apply") { // application @@ -374,7 +373,9 @@ const twitterIntent = useMemo(() => { let url = DEFAULT_GATEWAY + - `${ownerId}/widget/Index?tab=project&projectId=${recipient_id}&referrerId=${context.accountId}`; + (successfulDonationVals[0].potId + ? `${ownerId}/widget/Index?tab=pot&potId=${successfulDonationVals[0].potId}&referrerId=${context.accountId}` + : `${ownerId}/widget/Index?tab=project&projectId=${recipient_id}&referrerId=${context.accountId}`); let text = `I just donated to ${tag} on @${POTLOCK_TWITTER_ACCOUNT_ID}! Support public goods at `; text = encodeURIComponent(text); url = encodeURIComponent(url); @@ -512,7 +513,7 @@ return ( }} /> - {needsToVerify && } + {needsToVerify && !successfulDonationVals[0]?.recipient_id && } ) : ( ""