feat: split create collection

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,
 				}
 			})
 		}

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),
 	}),

src/lib/objects/split/standalone.svelte

@@ -9,18 +9,22 @@
 	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'
 	import ExpenseDetail from './views/expense-detail.svelte'
 	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,14 +133,14 @@
 		{token}
 		{nativeToken}
 		chainId={args.chainId}
+		collectionName={collectionName ?? `#${args.instanceId.slice(0, 4)}`}
 		profile={args.profile}
 		chatName={args.chatName}
 		send={args.send}
 		exitObject={exitObject(5)}
 		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}

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'

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>

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>

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>