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 t.address === tokenAddress) ?? SPLIT_TOKEN let balances: Balance[] = [] @@ -52,6 +52,7 @@ export const splitDescriptor: WakuObjectSvelteDescriptor 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 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 + } + } {#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'} @@ -142,6 +151,22 @@ goNext={goNext('images')} {goBack} /> -{:else} +{:else if args.view === 'collection-name'} + +{:else if args.view === 'collection-members'} + +{:else if args.view === 'amount' || collectionName !== ''} +{:else} + {/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 @@ + + + + +
+ + +
+
+ +

Shared with everyone

+

+ Expenses added to this collection will be shared equally between everyone in the group chat. +

+
    + {#each users as user} +
  • + +
    + +
    + +
    +
    +
    +
  • + {/each} +
+
+ + + +
+ + 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 @@ + + + + +
+ +
+
+ +

Give a name to your collection

+

Help others understand which expenses should be shared within this collection.

+
+ +
+
+ + + +
+ + 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 @@
{chatName}
-
#{instanceId.slice(0, 4)}
+
{collectionName}
{amount} {token.symbol}
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 @@ + + + + +
+ + +
+
+ +

Welcome to Split!

+

Shared expenses are organized into collections shared with chat members.

+
    + + +
  • + +
    +
    + +
    + +
    +
    +
  • + + +
  • + +
    + +
    + +
    + +
    +
    +
  • +
+
+
+ +