From 729c51200cfe836bbced08d40ef32b0f4816806a Mon Sep 17 00:00:00 2001 From: Jason Efstathiou Date: Tue, 3 Oct 2023 15:03:20 +0200 Subject: [PATCH 1/3] feat: become supporter card on drip lists --- .../drip-list-editor/drip-list-editor.svelte | 4 +- .../support-card/support-card.svelte} | 104 ++++++++++-------- .../edit-drip-list/edit-drip-list-steps.ts | 4 +- .../steps/edit-drip-list.svelte | 13 ++- .../(app)/drip-lists/[listId]/+page.svelte | 43 +++++++- .../project-profile/project-profile.svelte | 4 +- .../steps/build-list/build-list.svelte | 9 +- 7 files changed, 112 insertions(+), 69 deletions(-) rename src/{routes/app/(app)/projects/(forges)/components/become-supporter-card/become-supporter-card.svelte => lib/components/support-card/support-card.svelte} (63%) diff --git a/src/lib/components/drip-list-editor/drip-list-editor.svelte b/src/lib/components/drip-list-editor/drip-list-editor.svelte index 2560623cd..b75a6440c 100644 --- a/src/lib/components/drip-list-editor/drip-list-editor.svelte +++ b/src/lib/components/drip-list-editor/drip-list-editor.svelte @@ -25,7 +25,7 @@ description: undefined, }; export let showListFirst = false; - export let projectUrlToAdd: string | undefined = undefined; + export let urlToAdd: string | undefined = undefined; // validation let listValid = false; @@ -65,7 +65,7 @@ bind:percentages={dripList.percentages} bind:items={dripList.items} bind:valid={listValid} - addOnMount={projectUrlToAdd} + addOnMount={urlToAdd} /> diff --git a/src/routes/app/(app)/projects/(forges)/components/become-supporter-card/become-supporter-card.svelte b/src/lib/components/support-card/support-card.svelte similarity index 63% rename from src/routes/app/(app)/projects/(forges)/components/become-supporter-card/become-supporter-card.svelte rename to src/lib/components/support-card/support-card.svelte index d68e60983..ecbdaa4ab 100644 --- a/src/routes/app/(app)/projects/(forges)/components/become-supporter-card/become-supporter-card.svelte +++ b/src/lib/components/support-card/support-card.svelte @@ -20,15 +20,40 @@ import Stepper from '$lib/components/stepper/stepper.svelte'; import editDripListSteps from '$lib/flows/edit-drip-list/edit-drip-list-steps'; import buildUrl from '$lib/utils/build-url'; + import type { SplitsEntry } from 'radicle-drips'; + + export let project: ClaimedGitProject | undefined = undefined; + export let dripList: DripList | undefined = undefined; + + let ownDripList: DripList | null | undefined = undefined; + let ownDripListSplits: SplitsEntry[] | undefined = undefined; + + let isSupporting: boolean | undefined; + $: isSupporting = ownDripListSplits?.some( + (s) => + s.accountId === project?.repoDriverAccount.accountId || + s.accountId === dripList?.account.accountId, + ); + + $: isOwner = + $walletStore.dripsAccountId === project?.owner.accountId || + $walletStore.dripsAccountId === dripList?.account.owner.accountId; + + let supportUrl: string; + $: { + if (project) { + supportUrl = project.source.url; + } else if (dripList) { + supportUrl = `https://drips.network/app/drip-lists/${dripList.account.accountId}`; + } else { + throw new Error('You must populate either the `project` or `dripList` prop.'); + } + } - export let project: ClaimedGitProject; - - let dripList: DripList | null | undefined = undefined; - let isSupportingProject: boolean | undefined = undefined; onMount(async () => { const { address } = $walletStore; if (!address) { - dripList = null; + ownDripList = null; return; } @@ -37,38 +62,35 @@ if (result[0]) { const subgraph = getSubgraphClient(); - const dripListSplits = await subgraph.getSplitsConfigByAccountId(result[0].account.accountId); - - isSupportingProject = Boolean( - dripListSplits.find((s) => s.accountId === project.repoDriverAccount.accountId), - ); - dripList = result[0]; + ownDripListSplits = await subgraph.getSplitsConfigByAccountId(result[0].account.accountId); + ownDripList = result[0]; } else { - dripList = null; + ownDripList = null; } }); let loadingModal = false; async function handleSupportButton() { - if (!dripList) { - goto(buildUrl('/app/funder-onboarding', { projectToAdd: project.source.url })); + if (!ownDripList) { + goto(buildUrl('/app/funder-onboarding', { urlToAdd: supportUrl })); } else { // TODO: Refresh profile state after becoming a supporter loadingModal = true; const representationalSplits = await getRepresentationalSplitsForAccount( - dripList.account.accountId, - dripList.projects.filter((s): s is RepoDriverSplitReceiver => 'source' in s), + ownDripList.account.accountId, + ownDripList.projects.filter((s): s is RepoDriverSplitReceiver => 'source' in s), ); modal.show( Stepper, undefined, editDripListSteps( - dripList.account.accountId, - dripList.name, - dripList.description, + ownDripList.account.accountId, + ownDripList.name, + ownDripList.description, representationalSplits, project, + dripList, ), ); loadingModal = false; @@ -76,8 +98,8 @@ } -
- {#if dripList === undefined || loadingModal} +
+ {#if ownDripList === undefined || loadingModal}
@@ -88,35 +110,28 @@
-
- -
+ {#if project} +
+ +
+ {/if}

Become a supporter

- {#if isSupportingProject} - You're already supporting {project.source.repoName} with your - Drip List. + {#if isSupporting} + You're already supporting this with your Drip List. {:else} - Add {project.source.repoName} to your Drip List to support - this project. + Add this {project ? 'project' : ''} to your Drip List to flexibly support it with an ongoing contribution. {/if}

{ownDripList === null ? 'Create your Drip List' : 'Add to Drip List'} -
- {#if isSupportingProject}You're getting…{:else}Youʼll get…{/if} -
- - …to feel good about yourself, because you're supporting open-source software. -
-
diff --git a/src/routes/app/(app)/projects/(forges)/components/project-profile/project-profile.svelte b/src/routes/app/(app)/projects/(forges)/components/project-profile/project-profile.svelte index 7967946d6..51aa9886d 100644 --- a/src/routes/app/(app)/projects/(forges)/components/project-profile/project-profile.svelte +++ b/src/routes/app/(app)/projects/(forges)/components/project-profile/project-profile.svelte @@ -2,7 +2,7 @@ import PrimaryColorThemer from '$lib/components/primary-color-themer/primary-color-themer.svelte'; import SectionHeader from '$lib/components/section-header/section-header.svelte'; import SplitsIcon from 'radicle-design-system/icons/Splits.svelte'; - import BecomeSupporterCard from '../become-supporter-card/become-supporter-card.svelte'; + import SupportCard from '$lib/components/support-card/support-card.svelte'; import ProjectProfileHeader from '$lib/components/project-profile-header/project-profile-header.svelte'; import type { GitProject } from '$lib/utils/metadata/types'; import UnclaimedProjectCard from '$lib/components/unclaimed-project-card/unclaimed-project-card.svelte'; @@ -294,7 +294,7 @@ {#if project.owner} {/if} diff --git a/src/routes/app/(flows)/funder-onboarding/steps/build-list/build-list.svelte b/src/routes/app/(flows)/funder-onboarding/steps/build-list/build-list.svelte index a8335dd01..961698687 100644 --- a/src/routes/app/(flows)/funder-onboarding/steps/build-list/build-list.svelte +++ b/src/routes/app/(flows)/funder-onboarding/steps/build-list/build-list.svelte @@ -14,7 +14,7 @@ export let context: Writable; const { searchParams } = $page.url; - const projectUrlToAdd = searchParams.get('projectToAdd') ?? undefined; + const urlToAdd = searchParams.get('urlToAdd') ?? undefined; let isValid = false; @@ -22,12 +22,7 @@ - +