From ef095d95e896172c0aef6780f689bcede084580d Mon Sep 17 00:00:00 2001
From: Vojtech Simetka <vojtech@simetka.cz>
Date: Tue, 3 Oct 2023 14:18:02 +0200
Subject: [PATCH] feat: split create collection

---
 src/lib/objects/split/index.ts                |   5 +-
 src/lib/objects/split/schemas.ts              |   2 +
 src/lib/objects/split/standalone.svelte       |  29 ++++-
 src/lib/objects/split/types.ts                |   2 +
 .../views/choose-collection-members.svelte    |  98 ++++++++++++++++
 .../split/views/choose-collection-name.svelte |  54 +++++++++
 src/lib/objects/split/views/summary.svelte    |   4 +-
 src/lib/objects/split/views/welcome.svelte    | 106 ++++++++++++++++++
 8 files changed, 295 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/objects/split/views/choose-collection-members.svelte
 create mode 100644 src/lib/objects/split/views/choose-collection-name.svelte
 create mode 100644 src/lib/objects/split/views/welcome.svelte

diff --git a/src/lib/objects/split/index.ts b/src/lib/objects/split/index.ts
index d45c3307..ea71dce4 100644
--- a/src/lib/objects/split/index.ts
+++ b/src/lib/objects/split/index.ts
@@ -29,7 +29,7 @@ export const splitDescriptor: WakuObjectSvelteDescriptor<Store, DataMessage, Vie
 		}
 
 		if (res.data.type === 'expense') {
-			const { expense, splitterAddress, tokenAddress, users } = res.data
+			const { expense, splitterAddress, tokenAddress, users, collectionName } = res.data
 
 			const token = args.tokens.find((t) => t.address === tokenAddress) ?? SPLIT_TOKEN
 			let balances: Balance[] = []
@@ -52,6 +52,7 @@ export const splitDescriptor: WakuObjectSvelteDescriptor<Store, DataMessage, Vie
 					payments,
 					balances,
 					expenses,
+					collectionName: collectionName ?? s?.collectionName ?? `#${args.instanceId.slice(0, 4)}`,
 				}
 			})
 		}
@@ -71,6 +72,7 @@ export const splitDescriptor: WakuObjectSvelteDescriptor<Store, DataMessage, Vie
 				const payments = s?.payments ?? []
 				const token = s?.token ?? SPLIT_TOKEN
 				const users = s?.users ?? []
+				const collectionName = s?.collectionName ?? `#${args.instanceId.slice(0, 4)}`
 
 				payments.push(payment)
 
@@ -81,6 +83,7 @@ export const splitDescriptor: WakuObjectSvelteDescriptor<Store, DataMessage, Vie
 					payments,
 					balances,
 					expenses,
+					collectionName,
 				}
 			})
 		}
diff --git a/src/lib/objects/split/schemas.ts b/src/lib/objects/split/schemas.ts
index 6250a09c..7723128c 100644
--- a/src/lib/objects/split/schemas.ts
+++ b/src/lib/objects/split/schemas.ts
@@ -29,6 +29,7 @@ export type Balance = z.infer<typeof BalanceSchema>
 export const StoreSchema = z.object({
 	splitterAddress: z.string(),
 	token: TokenSchema,
+	collectionName: z.string(),
 	users: z.array(AddressSchema),
 	balances: z.array(BalanceSchema),
 	payments: z.array(PaymentSchema),
@@ -41,6 +42,7 @@ export const DataMessageSchema = z.union([
 		type: z.literal('expense'),
 		splitterAddress: z.string(),
 		tokenAddress: z.string().optional(),
+		collectionName: z.string().optional(),
 		expense: ExpenseSchema,
 		users: z.array(AddressSchema),
 	}),
diff --git a/src/lib/objects/split/standalone.svelte b/src/lib/objects/split/standalone.svelte
index 2fb5cd4b..87d77654 100644
--- a/src/lib/objects/split/standalone.svelte
+++ b/src/lib/objects/split/standalone.svelte
@@ -9,6 +9,8 @@
 	import ActivityHistory from './views/activity-history.svelte'
 
 	import ChooseAmount from './views/choose-amount.svelte'
+	import ChooseCollectionMembers from './views/choose-collection-members.svelte'
+	import ChooseCollectionName from './views/choose-collection-name.svelte'
 	import ChooseExpenseName from './views/choose-expense-name.svelte'
 	import ChooseImages from './views/choose-images.svelte'
 	import Collection from './views/collection.svelte'
@@ -16,11 +18,13 @@
 	import Expenses from './views/expenses.svelte'
 	import SettleNow from './views/settle-now.svelte'
 	import Summary from './views/summary.svelte'
+	import Welcome from './views/welcome.svelte'
 
 	export let args: WakuObjectArgs<Store, DataMessage, View>
 
 	let amount = ''
 	let description = ''
+	let collectionName = ''
 	let images: string[] = []
 	const token = SPLIT_TOKEN
 	$: nativeToken = {
@@ -37,6 +41,11 @@
 
 	let expense: Expense | undefined = undefined
 	$: expense = args.store?.expenses.find((e) => e.txHash === args.viewParams[0])
+	$: {
+		if (!collectionName && args.store) {
+			collectionName = args.store.collectionName
+		}
+	}
 </script>
 
 {#if args.view === 'expense'}
@@ -124,6 +133,7 @@
 		{token}
 		{nativeToken}
 		chainId={args.chainId}
+		collectionName={collectionName ?? `#${args.instanceId.slice(0, 4)}`}
 		profile={args.profile}
 		chatName={args.chatName}
 		send={args.send}
@@ -131,7 +141,6 @@
 		getContract={args.getContract}
 		users={args.store?.users ?? args.users.map((u) => u.address)}
 		splitterAddress={args.store?.splitterAddress}
-		instanceId={args.instanceId}
 	/>
 {:else if args.view === 'images'}
 	<ChooseImages bind:images exitObject={exitObject(4)} goNext={goNext('summary')} {goBack} />
@@ -142,6 +151,22 @@
 		goNext={goNext('images')}
 		{goBack}
 	/>
-{:else}
+{:else if args.view === 'collection-name'}
+	<ChooseCollectionName
+		bind:collectionName
+		instanceId={args.instanceId}
+		exitObject={exitObject(1)}
+		goNext={goNext('collection-members')}
+	/>
+{:else if args.view === 'collection-members'}
+	<ChooseCollectionMembers
+		users={args.users}
+		{goBack}
+		exitObject={exitObject(2)}
+		goNext={exitObject(2)}
+	/>
+{:else if args.view === 'amount' || collectionName !== ''}
 	<ChooseAmount bind:amount exitObject={exitObject(2)} goNext={goNext('name')} {goBack} {token} />
+{:else}
+	<Welcome exitObject={exitObject(1)} {goBack} newCollection={goNext('collection-name')} />
 {/if}
diff --git a/src/lib/objects/split/types.ts b/src/lib/objects/split/types.ts
index 0577910b..2e306c1a 100644
--- a/src/lib/objects/split/types.ts
+++ b/src/lib/objects/split/types.ts
@@ -2,6 +2,8 @@ import type { Contract, Interface } from 'ethers'
 import type { Expense, Payment } from './schemas'
 
 export type View =
+	| 'collection-name'
+	| 'collection-members'
 	| 'amount'
 	| 'name'
 	| 'images'
diff --git a/src/lib/objects/split/views/choose-collection-members.svelte b/src/lib/objects/split/views/choose-collection-members.svelte
new file mode 100644
index 00000000..6f46d315
--- /dev/null
+++ b/src/lib/objects/split/views/choose-collection-members.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+	import ChevronLeft from '$lib/components/icons/chevron-left.svelte'
+	import Close from '$lib/components/icons/close.svelte'
+
+	import Header from '$lib/components/header.svelte'
+	import Button from '$lib/components/button.svelte'
+	import Container from '$lib/components/container.svelte'
+	import Layout from '$lib/components/layout.svelte'
+	import Avatar from '$lib/components/avatar.svelte'
+
+	import type { User } from '$lib/objects/schemas'
+	import Checkmark from '$lib/components/icons/checkmark.svelte'
+
+	export let users: User[]
+	export let exitObject: () => void
+	export let goBack: () => void
+	export let goNext: () => void
+</script>
+
+<Layout>
+	<svelte:fragment slot="header">
+		<Header title="Split">
+			<Button slot="left" variant="icon" on:click={goBack}>
+				<ChevronLeft />
+			</Button>
+			<Button slot="right" variant="icon" on:click={exitObject}>
+				<Close />
+			</Button>
+		</Header>
+	</svelte:fragment>
+	<Container gap={12} padX={24}>
+		<h2>Shared with everyone</h2>
+		<p>
+			Expenses added to this collection will be shared equally between everyone in the group chat.
+		</p>
+		<ul>
+			{#each users as user}
+				<li>
+					<Container grow>
+						<div class="chat">
+							<Avatar size={48} picture={user.avatar} seed={user.address} />
+							<div class="content">
+								<div class="user-info">
+									<span class="username text-lg">
+										{user.name}
+									</span>
+								</div>
+							</div>
+						</div>
+					</Container>
+				</li>
+			{/each}
+		</ul>
+	</Container>
+	<Container justify="flex-end">
+		<Button variant="strong" on:click={goNext}>
+			<Checkmark /> Create collection
+		</Button>
+	</Container>
+</Layout>
+
+<style>
+	li {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-12);
+		border-bottom: 1px solid var(--color-step-20, var(--color-dark-step-40));
+		cursor: pointer;
+	}
+
+	.chat {
+		display: flex;
+		flex-direction: row;
+		gap: var(--spacing-12);
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.content {
+		flex-grow: 1;
+	}
+
+	.user-info {
+		margin-bottom: var(--spacing-3);
+		display: flex;
+		flex-direction: row;
+		gap: var(--spacing-6);
+		align-items: baseline;
+		justify-content: space-between;
+	}
+
+	.username {
+		display: inline-flex;
+		flex-direction: row;
+		gap: var(--spacing-6);
+		align-items: center;
+	}
+</style>
diff --git a/src/lib/objects/split/views/choose-collection-name.svelte b/src/lib/objects/split/views/choose-collection-name.svelte
new file mode 100644
index 00000000..9ce66e3d
--- /dev/null
+++ b/src/lib/objects/split/views/choose-collection-name.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import ArrowRight from '$lib/components/icons/arrow-right.svelte'
+	import Close from '$lib/components/icons/close.svelte'
+
+	import Header from '$lib/components/header.svelte'
+	import Button from '$lib/components/button.svelte'
+	import Container from '$lib/components/container.svelte'
+	import Input from '$lib/components/input-field.svelte'
+
+	import Layout from '$lib/components/layout.svelte'
+
+	export let collectionName: string
+	export let instanceId: string
+	export let exitObject: () => void
+	export let goNext: () => void
+
+	function confirm() {
+		if (!collectionName) collectionName = `#${instanceId.slice(0, 4)}`
+		goNext()
+	}
+</script>
+
+<Layout>
+	<svelte:fragment slot="header">
+		<Header title="Create a collection">
+			<Button slot="right" variant="icon" on:click={exitObject}>
+				<Close />
+			</Button>
+		</Header>
+	</svelte:fragment>
+	<Container gap={12} justify="center" padX={24}>
+		<h2>Give a name to your collection</h2>
+		<p>Help others understand which expenses should be shared within this collection.</p>
+		<div class="input">
+			<Input
+				label="Collection name"
+				autofocus
+				bind:value={collectionName}
+				placeholder={`#${instanceId.slice(0, 4)}`}
+			/>
+		</div>
+	</Container>
+	<Container justify="flex-end">
+		<Button variant="strong" on:click={confirm}>
+			<ArrowRight />
+		</Button>
+	</Container>
+</Layout>
+
+<style>
+	.input {
+		margin-top: 24px;
+	}
+</style>
diff --git a/src/lib/objects/split/views/summary.svelte b/src/lib/objects/split/views/summary.svelte
index afa9af8b..e59a28fd 100644
--- a/src/lib/objects/split/views/summary.svelte
+++ b/src/lib/objects/split/views/summary.svelte
@@ -26,13 +26,13 @@
 	import Info from '../components/info.svelte'
 
 	export let amount: string
+	export let collectionName: string
 	export let description: string
 	export let images: string[]
 	export let chatName: string
 	export let profile: User
 	export let users: string[]
 	export let splitterAddress: string | undefined
-	export let instanceId: string
 	export let token: Token
 	export let nativeToken: TokenAmount
 	export let chainId: bigint
@@ -124,7 +124,7 @@
 			<div class="text-lg">{chatName}</div>
 		</Info>
 		<Info title="Collection">
-			<div class="text-lg">#{instanceId.slice(0, 4)}</div>
+			<div class="text-lg">{collectionName}</div>
 		</Info>
 		<Info title="Paid amount">
 			<div class="text-lg">{amount} {token.symbol}</div>
diff --git a/src/lib/objects/split/views/welcome.svelte b/src/lib/objects/split/views/welcome.svelte
new file mode 100644
index 00000000..223d2bb9
--- /dev/null
+++ b/src/lib/objects/split/views/welcome.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+	import ArrowRight from '$lib/components/icons/arrow-right.svelte'
+	import Close from '$lib/components/icons/close.svelte'
+
+	import Header from '$lib/components/header.svelte'
+	import Button from '$lib/components/button.svelte'
+	import Container from '$lib/components/container.svelte'
+
+	import Layout from '$lib/components/layout.svelte'
+	import ChevronLeft from '$lib/components/icons/chevron-left.svelte'
+	import Add from '$lib/components/icons/add.svelte'
+
+	export let exitObject: () => void
+	export let newCollection: () => void
+	export let goBack: () => void
+</script>
+
+<Layout>
+	<svelte:fragment slot="header">
+		<Header title="Split">
+			<Button slot="left" variant="icon" on:click={goBack}>
+				<ChevronLeft />
+			</Button>
+			<Button slot="right" variant="icon" on:click={exitObject}>
+				<Close />
+			</Button>
+		</Header>
+	</svelte:fragment>
+	<Container gap={12} justify="center" padX={24}>
+		<h2>Welcome to Split!</h2>
+		<p>Shared expenses are organized into collections shared with chat members.</p>
+		<ul>
+			<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<li class="disabled">
+				<Container grow>
+					<div class="chat">
+						<div class="content">
+							<div class="user-info">
+								<span class="username text-lg"> Add expense to an existing collection </span>
+							</div>
+						</div>
+						<ArrowRight size={24} />
+					</div>
+				</Container>
+			</li>
+			<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<li on:click={newCollection}>
+				<Container grow>
+					<div class="chat">
+						<Add />
+						<div class="content">
+							<div class="user-info">
+								<span class="username text-lg"> Create new collection </span>
+							</div>
+						</div>
+						<ArrowRight size={24} />
+					</div>
+				</Container>
+			</li>
+		</ul>
+	</Container>
+</Layout>
+
+<style>
+	.disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+	li {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-12);
+		border-bottom: 1px solid var(--color-step-20, var(--color-dark-step-40));
+		cursor: pointer;
+	}
+
+	.chat {
+		display: flex;
+		flex-direction: row;
+		gap: var(--spacing-12);
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.content {
+		flex-grow: 1;
+	}
+
+	.user-info {
+		margin-bottom: var(--spacing-3);
+		display: flex;
+		flex-direction: row;
+		gap: var(--spacing-6);
+		align-items: baseline;
+		justify-content: space-between;
+	}
+
+	.username {
+		display: inline-flex;
+		flex-direction: row;
+		gap: var(--spacing-6);
+		align-items: center;
+	}
+</style>