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.

Sign up for GitHub

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

feat: simplified collect screen #691

Merged
merged 12 commits into from
Oct 3, 2023
Merged

feat: simplified collect screen #691

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e1377ed
feat: hide splitting % in claim flow if zero
efstajas Sep 26, 2023
5c2c4be
docs: clarifying comment
efstajas Sep 26, 2023
6d63f28
feat: simplified collect screen
efstajas Sep 26, 2023
b2e4e4e
test: fix expected copy in e2e test
efstajas Sep 26, 2023
eece537
feat: remove unnecessary + in collect screen
efstajas Sep 26, 2023
960995c
feat: improve copy
efstajas Sep 27, 2023
c7724eb
feat: even improved-er copy
efstajas Oct 2, 2023
2a8a2f5
fix: annotation box wonky layout if no actions
efstajas Oct 2, 2023
caf893d
feat: aligned copy around earnings, even simpler collect modal
efstajas Oct 2, 2023
0757ba0
Merge branch 'main' into jason/hide-splitting-percent-in-collect-flow
efstajas Oct 2, 2023
268e8a5
test: update e2e test with new copy & behavior
efstajas Oct 2, 2023
496455c
Merge branch 'main' into jason/hide-splitting-percent-in-collect-flow
evvvritt Oct 3, 2023
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
2 changes: 1 addition & 1 deletion src/e2e-tests/top-up-create-stream.e2e.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,7 +387,7 @@ describe('app', async () => {
});

it('expands the squeezing section', async () => {
await page.locator('label:has-text("Include funds from current cycle")').click();
await page.locator('label:has-text("Include funds streamed in current cycle")').click();

await page
.locator(`data-testid=item-383620263794848526656662033323214000554911775452`)
Expand Down
111 changes: 64 additions & 47 deletions src/lib/flows/collect-flow/collect-amounts.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,9 +224,9 @@
<StepHeader headline={`Collect ${selectedToken.symbol}`} />
<div>
<p>
Tokens streamed to your account automatically become receivable on a weekly cycle. Your
receivable balance updates next on <span class="typo-text-bold"
>{formatDate(currentCycleEnd)}</span
Income from Projects, Drip Lists and streams can be collected on a weekly cycle. Your
collectable balance updates next on <span class="typo-text-bold"
>{formatDate(currentCycleEnd, 'onlyDay')}</span
>.
</p>
<a
Expand All @@ -237,34 +237,37 @@
>Learn more</a
>
</div>
<div class="squeeze-section">
<Toggleable label="Include funds from current cycle" bind:toggled={squeezeEnabled}>
<p>
Select which senders from the current cycle you would like to collect from. The network fee
for collecting increases with each selected sender.
</p>
<AnnotationBox type="warning">
The amounts shown below are estimated based on your system time so the value you collect may
slightly differ.
</AnnotationBox>
<div class="list-wrapper">
<ListSelect
items={currentCycleSenders}
multiselect
bind:selected={selectedSqueezeSenderItems}
searchable={false}
/>
</div>
</Toggleable>
</div>
{#if incomingEstimatesBySender.length > 0}
<div class="squeeze-section">
<Toggleable label="Include funds streamed in current cycle" bind:toggled={squeezeEnabled}>
<p>
You may collect stream income from specific senders already before the current cycle
concludes, but the network fee for collecting increases with each selected sender.
</p>
<AnnotationBox type="warning">
The amounts shown below are estimated based on your system time so the value you collect
may slightly differ.
</AnnotationBox>
<div class="list-wrapper">
<ListSelect
items={currentCycleSenders}
multiselect
bind:selected={selectedSqueezeSenderItems}
searchable={false}
emptyStateText="No funds were streamed to you during the current cycle."
/>
</div>
</Toggleable>
</div>
{/if}
<FormField title="Review">
<LineItems
lineItems={mapFilterUndefined(
[
squeezeEnabled
? {
title: `${selectedToken.symbol} from current cycle`,
subtitle: 'Earned from incoming streams',
title: `${selectedToken.symbol} streamed in current cycle`,
subtitle: 'From incoming streams',
value:
'≈ ' +
formatTokenAmount(
Expand All @@ -275,37 +278,51 @@
symbol: selectedToken.symbol,
}
: undefined,
{
title: `${selectedToken.symbol} from concluded cycles`,
subtitle: 'Earned from incoming streams',
value: formatTokenAmount(makeAmount(balances.receivable), selectedToken.decimals, 1n),
symbol: selectedToken.symbol,
disabled: balances.receivable === 0n,
},
balances.receivable > 0n
? {
title: `${selectedToken.symbol} streamed in concluded cycles`,
subtitle: 'From incoming streams',
value: formatTokenAmount(
makeAmount(balances.receivable),
selectedToken.decimals,
1n,
),
symbol: selectedToken.symbol,
}
: undefined,
balances.splittable > 0n
? {
title: `Splittable ${selectedToken.symbol}`,
subtitle: 'Earned from already-received streams or incoming splits & gives',
title: `Earned ${selectedToken.symbol}`,
subtitle: 'From Projects or Drip Lists',
value:
'+' +
formatTokenAmount(makeAmount(balances.splittable), selectedToken.decimals, 1n),
symbol: selectedToken.symbol,
disabled: balances.splittable === 0n,
}
: undefined,
{
title: `Splitting ${getSplitPercent(1000000n - ownSplitsWeight, 'pretty')}`,
value:
(squeezeEnabled ? '≈ ' : '') +
formatTokenAmount(
makeAmount(collectableAfterSplit - splittableAfterReceive),
selectedToken.decimals,
1n,
),
disabled:
ownSplitsWeight === 1000000n || collectableAfterSplit - splittableAfterReceive === 0n,
symbol: selectedToken.symbol,
},
/*
It used to be possible to set splits for your own AddressDriver account in the Drips App.
Even though it's no longer possible to do so, maybe some old account still has splits set,
or maybe the user manually configured splits outside the app. For this reason, we display
the splitting percentage while collecting, but only if it's more than 0%.
*/
ownSplitsWeight < 1000000n
? {
title: `Splitting ${getSplitPercent(1000000n - ownSplitsWeight, 'pretty')}`,
value:
(squeezeEnabled ? '≈ ' : '') +
formatTokenAmount(
makeAmount(collectableAfterSplit - splittableAfterReceive),
selectedToken.decimals,
1n,
),
disabled:
ownSplitsWeight === 1000000n ||
collectableAfterSplit - splittableAfterReceive === 0n,
symbol: selectedToken.symbol,
}
: undefined,
balances.collectable !== 0n
? {
title: `Previously-split funds`,
Expand Down
Loading