From 85682a22d5681f5896745e47caeb95bde69fc6f5 Mon Sep 17 00:00:00 2001 From: Lukas Date: Thu, 19 Sep 2024 22:14:51 +0200 Subject: [PATCH 1/5] fix(ceremony): save --- ceremony/src/lib/components/Ceremony.svelte | 123 +++++++++--------- .../lib/components/address/AddressForm.svelte | 5 +- ceremony/src/lib/stores/state.svelte.ts | 14 +- ceremony/src/lib/supabase/index.ts | 15 ++- ceremony/src/lib/supabase/queries.ts | 10 ++ 5 files changed, 102 insertions(+), 65 deletions(-) diff --git a/ceremony/src/lib/components/Ceremony.svelte b/ceremony/src/lib/components/Ceremony.svelte index 7f49f7d71a..ae64b9b9e7 100644 --- a/ceremony/src/lib/components/Ceremony.svelte +++ b/ceremony/src/lib/components/Ceremony.svelte @@ -1,87 +1,86 @@
- {#if contributor.state === 'inQueue'} + {#if !contributor.userWallet} +
+

Get your nft

+ (addressValidState = result)} {contributor}/> +
+ {:else} - + {#if contributor.state === 'inQueue'} -
-

You are {contributor.queueState.position}{getNumberSuffix(contributor.queueState.position)} in queue

+ - +
+

You are {contributor.queueState.position}{getNumberSuffix(contributor.queueState.position)} in queue

-
-

Queue length: {contributor.queueState.count}

-

Waiting time: {contributor.queueState.estimatedTime} minutes - (est.). -

-
+ -
-

Get your nft

- (addressValidState = result)}/> +
+

Queue length: {contributor.queueState.count}

+

Waiting time: {contributor.queueState.estimatedTime} minutes + (est.). +

+
-
- - {:else if contributor.state === 'contribute'} - -

Starting contribution...

+ {:else if contributor.state === 'contribute'} + +

Starting contribution...

- {:else if contributor.state === 'contributing'} - -

Contributing...

+ {:else if contributor.state === 'contributing'} + +

Contributing...

- {:else if contributor.state === 'verifying'} - -

Verifying your contribution...

+ {:else if contributor.state === 'verifying'} + +

Verifying your contribution...

- {:else if contributor.state === 'contributed'} + {:else if contributor.state === 'contributed'} -
-

Thank you! Your contribution is completed.

- -
+
+

Thank you! Your contribution is completed.

+ +
- {:else if contributor.state === 'noClient'} + {:else if contributor.state === 'noClient'} - -

No client. Cannot start contribution.

+ +

No client. Cannot start contribution.

- {:else} -

Not able to contribute at this time

+ {:else} +

Not able to contribute at this time

+ {/if} {/if}
diff --git a/ceremony/src/lib/components/address/AddressForm.svelte b/ceremony/src/lib/components/address/AddressForm.svelte index 7fe1dbebcd..79e0a767ff 100644 --- a/ceremony/src/lib/components/address/AddressForm.svelte +++ b/ceremony/src/lib/components/address/AddressForm.svelte @@ -7,13 +7,15 @@ import { isValidBech32Address } from "./validator.ts" import type { HTMLInputAttributes } from "svelte/elements" import { insertWalletData } from "$lib/supabase" import { user } from "$lib/stores/user.svelte.ts" +import type { ContributorState } from "$lib/stores/state.svelte.ts" interface Props extends HTMLInputAttributes { class?: string onValidation: (valid: ValidState) => ValidState + contributor: ContributorState } -let { onValidation, class: className = "", ...props }: Props = $props() +let { onValidation, class: className = "", contributor, ...props }: Props = $props() let inputText = $state("") const debouncedInputText = new Debounced( @@ -47,6 +49,7 @@ const onAddressSubmit = async (event: Event) => { }) if (result) { toast.success("Wallet address saved successfully") + contributor.checkUserWallet(user.session?.user.id) } else { toast.error("Failed to save wallet address") } diff --git a/ceremony/src/lib/stores/state.svelte.ts b/ceremony/src/lib/stores/state.svelte.ts index 10bac49996..553bef2be9 100644 --- a/ceremony/src/lib/stores/state.svelte.ts +++ b/ceremony/src/lib/stores/state.svelte.ts @@ -1,6 +1,11 @@ import { getContext, onDestroy, setContext } from "svelte" import { checkState } from "$lib/client" -import { getAllowanceState, getUserQueueInfo, getContributionState } from "$lib/supabase" +import { + getAllowanceState, + getUserQueueInfo, + getContributionState, + getUserWallet +} from "$lib/supabase" type IntervalID = NodeJS.Timeout | number @@ -67,6 +72,7 @@ export class ContributorState { state = $state("loading") clientState = $state("offline") contributionState = $state("notContributed") + userWallet = $state("") queueState = $state({ position: null, count: null, @@ -100,6 +106,7 @@ export class ContributorState { if (this.userId === undefined && userId) { this.userId = userId this.loggedIn = true + this.checkUserWallet(userId) this.checkAllowanceState(userId) this.startPolling() } @@ -110,6 +117,11 @@ export class ContributorState { return this.allowanceState } + async checkUserWallet(userId: string | undefined): Promise { + this.userWallet = await getUserWallet(userId) + return this.userWallet + } + setAllowanceState(state: AllowanceState) { this.allowanceState = state this.pollQueueInfo() diff --git a/ceremony/src/lib/supabase/index.ts b/ceremony/src/lib/supabase/index.ts index b8f00152d1..8601ff870a 100644 --- a/ceremony/src/lib/supabase/index.ts +++ b/ceremony/src/lib/supabase/index.ts @@ -8,7 +8,8 @@ import { queryAllowance, queryContributions, queryUserContribution, - queryUserPublicHash + queryUserPublicHash, + queryUserWallet } from "$lib/supabase/queries.ts" import { supabase } from "$lib/supabase/client.ts" import type { AllowanceState, ContributionState } from "$lib/stores/state.svelte.ts" @@ -170,3 +171,15 @@ export const getPublicHash = async () => { return data.public_key_hash } + +export const getUserWallet = async (userId: string | undefined) => { + if (!userId) { + console.log("Need to be logged in to get allowance state") + return undefined + } + + const { data, error } = await queryUserWallet(userId) + if (error || !data) return undefined + + return data.wallet +} diff --git a/ceremony/src/lib/supabase/queries.ts b/ceremony/src/lib/supabase/queries.ts index 58e9625615..4e5aeea9eb 100644 --- a/ceremony/src/lib/supabase/queries.ts +++ b/ceremony/src/lib/supabase/queries.ts @@ -95,3 +95,13 @@ export const queryUserPublicHash = async (id: string) => { return { data, error } } + +export const queryUserWallet = async (id: string) => { + const { data, error } = await supabase + .from("wallet_address") + .select("wallet") + .eq("id", id) + .single() + + return { data, error } +} From 09739ac304c609ae81c09bd903bd2a6b25610b40 Mon Sep 17 00:00:00 2001 From: Lukas Date: Fri, 20 Sep 2024 13:17:49 +0200 Subject: [PATCH 2/5] fix(ceremony): save progress --- ceremony/src/lib/client/index.ts | 11 ++ ceremony/src/lib/components/Ceremony.svelte | 123 +++++++++++------- ceremony/src/lib/components/Code.svelte | 42 +++++- .../src/lib/components/Counter/index.svelte | 15 --- ceremony/src/lib/components/Install.svelte | 48 ------- ceremony/src/lib/components/Join.svelte | 10 +- ceremony/src/lib/components/Status.svelte | 53 ++++++-- ceremony/src/lib/components/SwimLoad.svelte | 9 +- ceremony/src/lib/components/Tweet.svelte | 2 +- ceremony/src/lib/layout/Navbar/index.svelte | 9 +- ceremony/src/lib/supabase/index.ts | 1 + ceremony/src/routes/+layout.svelte | 13 +- ceremony/src/routes/+layout.ts | 2 +- ceremony/src/routes/+page.svelte | 48 ++++++- ceremony/src/routes/0____0/+page.svelte | 33 +++-- ceremony/src/routes/auth/dive/+page.svelte | 43 ------ 16 files changed, 262 insertions(+), 200 deletions(-) delete mode 100644 ceremony/src/lib/components/Install.svelte delete mode 100644 ceremony/src/routes/auth/dive/+page.svelte diff --git a/ceremony/src/lib/client/index.ts b/ceremony/src/lib/client/index.ts index 927eda7901..21e2466912 100644 --- a/ceremony/src/lib/client/index.ts +++ b/ceremony/src/lib/client/index.ts @@ -54,3 +54,14 @@ export const checkState = async (): Promise => { return "offline" } } + +export const getSecret = async () => { + try { + const response = await get("contribute", {}) + + return response ?? "offline" + } catch (error) { + console.log("Error fetching status:", error) + return "offline" + } +} diff --git a/ceremony/src/lib/components/Ceremony.svelte b/ceremony/src/lib/components/Ceremony.svelte index ae64b9b9e7..402ed38c8c 100644 --- a/ceremony/src/lib/components/Ceremony.svelte +++ b/ceremony/src/lib/components/Ceremony.svelte @@ -1,86 +1,113 @@
{#if !contributor.userWallet} -
-

Get your nft

+ +
+

Add an address

+ You may receive rewards for successful contributions. (addressValidState = result)} {contributor}/> + Or +

I don't want rewards

+ You can contribute without adding an address +
+ {:else} {#if contributor.state === 'inQueue'} - - - -
-

You are {contributor.queueState.position}{getNumberSuffix(contributor.queueState.position)} in queue

- - - -
-

Queue length: {contributor.queueState.count}

-

Waiting time: {contributor.queueState.estimatedTime} minutes - (est.). -

+ {#if contributor.clientState === "offline"} + + {:else} + +

+ +

+
+

You are {contributor.queueState.position}{getNumberSuffix(contributor.queueState.position)} in queue

+ + +
+

Queue length: {contributor.queueState.count}

+

Waiting time: {contributor.queueState.estimatedTime} minutes + (est.). +

+
-
+ {/if} {:else if contributor.state === 'contribute'} -

Starting contribution...

{:else if contributor.state === 'contributing'} -

Contributing...

{:else if contributor.state === 'verifying'} -

Verifying your contribution...

{:else if contributor.state === 'contributed'}
-

Thank you! Your contribution is completed.

- -
+

Thank you!

+ Your contribution is completed. Thank you for securing the Union proving system! + You can tweet the cryptographic attestation of your contribution for extra transparency. - {:else if contributor.state === 'noClient'} + + View contributions - -

No client. Cannot start contribution.

+
{:else}

Not able to contribute at this time

{/if} + + {#if contributor.state !== "contributed"} +
+ You are connected to your MPC Client. + Do not close this tab or your terminal running the MPC Client. +
+ {/if} {/if}
diff --git a/ceremony/src/lib/components/Code.svelte b/ceremony/src/lib/components/Code.svelte index 3ebb5b31a6..051977c90f 100644 --- a/ceremony/src/lib/components/Code.svelte +++ b/ceremony/src/lib/components/Code.svelte @@ -6,9 +6,10 @@ import Button from "$lib/components/Button.svelte" type Props = { contributor: ContributorState + secondary?: boolean } -let { contributor }: Props = $props() +let { contributor, secondary = false }: Props = $props() let words: Array = $state(new Array(6).fill("")) let code = $derived(normalizeString(words)) @@ -44,17 +45,39 @@ async function handleCodeJoin() { toast.error("An error occurred while redeeming the code") } finally { codeLoading = false - words = new Array(6).fill("") } } - +function handleKeyDown(event: KeyboardEvent, index: number) { + if (event.key === "Enter") { + event.preventDefault() + if (index < words.length - 1) { + // Move to next input + const nextInput = document.querySelector( + `input:nth-child(${2 * index + 3})` + ) as HTMLInputElement + nextInput?.focus() + } else { + // On last input, trigger the USE CODE button + handleCodeJoin() + } + } else if (event.key === "Backspace" && words[index] === "" && index > 0) { + event.preventDefault() + // Move to previous input + const prevInput = document.querySelector( + `input:nth-child(${2 * index - 1})` + ) as HTMLInputElement + prevInput?.focus() + } +} +
{#each words as word, index} handleKeyDown(e, index)} class="bg-transparent border-b border-white w-20 text-center text-union-accent-500 outline-none focus:ring-0 focus:border-union-accent-500" style="--tw-ring-color: transparent;" /> @@ -63,6 +86,13 @@ async function handleCodeJoin() { {/if} {/each}
- \ No newline at end of file + +{#if secondary} + +{:else} + +{/if} diff --git a/ceremony/src/lib/components/Counter/index.svelte b/ceremony/src/lib/components/Counter/index.svelte index c51667e4b5..931f7b0f0a 100644 --- a/ceremony/src/lib/components/Counter/index.svelte +++ b/ceremony/src/lib/components/Counter/index.svelte @@ -1,17 +1,4 @@ - -{#if open} -
-
-

How to

- - - - $ - - - - {command} - - - - - - -
-
-{/if} - - - - diff --git a/ceremony/src/lib/components/Join.svelte b/ceremony/src/lib/components/Join.svelte index 3c890e76e4..224f02bb6c 100644 --- a/ceremony/src/lib/components/Join.svelte +++ b/ceremony/src/lib/components/Join.svelte @@ -6,6 +6,7 @@ import { callJoinQueue, checkIfOpen } from "$lib/supabase" import type { ContributorState } from "$lib/stores/state.svelte.ts" import { toast } from "svelte-sonner" import Code from "$lib/components/Code.svelte" +import H2 from "$lib/components/typography/H2.svelte" type Props = { contributor: ContributorState @@ -45,13 +46,16 @@ $effect(() => {
+

Join the ceremony

+ Have an invite? Enter your code below.
- Or - -
diff --git a/ceremony/src/lib/components/Status.svelte b/ceremony/src/lib/components/Status.svelte index 09bdae8793..74f17a02e3 100644 --- a/ceremony/src/lib/components/Status.svelte +++ b/ceremony/src/lib/components/Status.svelte @@ -1,25 +1,60 @@ {#if contributor}
-

- -

-

{contributor.clientState}

- {#if contributor.clientState === 'offline'} - - *You must be running the Ceremony Client to be able to contribute. - {/if} + +

Run the mpc client

+ You need to have docker running to contribute.
+ For macOS we recommend installing + OrbStack + because docker desktop is too slow. + + Once you have OrbStack/Docker running you should paste this in your terminal. +
+ + + + $ + + + + {command} + + + + + +
+ Is it running but still see this page? We support Chrome, FireFox and Brave.
For Brave disable the shields in the address bar.
{/if} \ No newline at end of file diff --git a/ceremony/src/lib/components/SwimLoad.svelte b/ceremony/src/lib/components/SwimLoad.svelte index 874d93451f..48c6f10854 100644 --- a/ceremony/src/lib/components/SwimLoad.svelte +++ b/ceremony/src/lib/components/SwimLoad.svelte @@ -16,11 +16,14 @@ let clampedProgress = $derived(Math.max(0, Math.min(100, progress))) {#if current && max}
- - + + + +
diff --git a/ceremony/src/lib/components/Tweet.svelte b/ceremony/src/lib/components/Tweet.svelte index 5511ad75fd..7d559d4ed2 100644 --- a/ceremony/src/lib/components/Tweet.svelte +++ b/ceremony/src/lib/components/Tweet.svelte @@ -22,5 +22,5 @@ function shareOnTwitter() { \ No newline at end of file diff --git a/ceremony/src/lib/layout/Navbar/index.svelte b/ceremony/src/lib/layout/Navbar/index.svelte index 0d468bf5c1..8dedb5723e 100644 --- a/ceremony/src/lib/layout/Navbar/index.svelte +++ b/ceremony/src/lib/layout/Navbar/index.svelte @@ -2,11 +2,9 @@ import { supabase } from "$lib/supabase/client.ts" import { user } from "$lib/stores/user.svelte.ts" import { invalidateAll } from "$app/navigation" -import Link from "$lib/components/typography/Link.svelte" import Button from "$lib/components/Button.svelte" import NavLink from "$lib/layout/Navbar/NavLink.svelte" import Badge from "$lib/components/Badge.svelte" -import { ContributorState, getContributorState } from "$lib/stores/state.svelte.ts" let isOpen = $state(false) @@ -27,7 +25,7 @@ async function logout() { let loggedIn = $derived(!!user.session?.user.id) -
+