diff --git a/ceremony/src/lib/components/Blink.svelte b/ceremony/src/lib/components/Blink.svelte index b3202b4057..07fbb95079 100644 --- a/ceremony/src/lib/components/Blink.svelte +++ b/ceremony/src/lib/components/Blink.svelte @@ -2,15 +2,16 @@ type Props = { loading?: boolean sleep?: boolean + love?: boolean } -let { loading = false, sleep = false }: Props = $props() +let { loading = false, sleep = false, love = false }: Props = $props() -let eye = $state(sleep ? "-" : "0") +let eye = $state(sleep ? "-" : love ? "♡" : "0") let blinkInterval: number | NodeJS.Timeout function blinkEye() { - if (!sleep) { + if (!(sleep || love)) { eye = "-" setTimeout(() => { eye = "0" @@ -20,7 +21,7 @@ function blinkEye() { function startRandomBlinking() { blinkInterval = setInterval(() => { - if (!sleep && Math.random() < 0.05) { + if (!(sleep || love) && Math.random() < 0.05) { blinkEye() } }, 200) @@ -30,6 +31,9 @@ $effect(() => { if (sleep) { eye = "×" clearInterval(blinkInterval) + } else if (love) { + eye = "♡" + clearInterval(blinkInterval) } else { eye = "0" startRandomBlinking() @@ -73,31 +77,11 @@ $effect(() => { } } - .wobble span:nth-child(1) { - animation-delay: 0s; - } - - .wobble span:nth-child(2) { - animation-delay: 0.1s; - } - - .wobble span:nth-child(3) { - animation-delay: 0.2s; - } - - .wobble span:nth-child(4) { - animation-delay: 0.3s; - } - - .wobble span:nth-child(5) { - animation-delay: 0.4s; - } - - .wobble span:nth-child(6) { - animation-delay: 0.5s; - } - - .wobble span:nth-child(7) { - animation-delay: 0.6s; - } + .wobble span:nth-child(1) { animation-delay: 0s; } + .wobble span:nth-child(2) { animation-delay: 0.1s; } + .wobble span:nth-child(3) { animation-delay: 0.2s; } + .wobble span:nth-child(4) { animation-delay: 0.3s; } + .wobble span:nth-child(5) { animation-delay: 0.4s; } + .wobble span:nth-child(6) { animation-delay: 0.5s; } + .wobble span:nth-child(7) { animation-delay: 0.6s; } \ No newline at end of file diff --git a/ceremony/src/lib/components/Button.svelte b/ceremony/src/lib/components/Button.svelte index be4517e179..bed50467d4 100644 --- a/ceremony/src/lib/components/Button.svelte +++ b/ceremony/src/lib/components/Button.svelte @@ -20,12 +20,13 @@ let { }: Props = $props() const styles = { - primary: "bg-union-accent-500 text-black hover:text-black", - secondary: "bg-transparent text-white border-2 border-white hover:bg-neutral-800" + primary: "bg-union-accent-500 text-black hover:text-black disabled:bg-neutral-500", + secondary: + "bg-transparent text-white border-2 border-white hover:bg-neutral-800 disabled:bg-neutral-500" } const getClass = (type: "primary" | "secondary") => styles[type] || styles.primary let combinedClasses = $derived( - `flex items-center w-fit gap-2 px-4 py-2 font-bold uppercase justify-center ${getClass(variant)} ${className}` + `flex items-center w-fit gap-2 px-4 py-2 font-bold uppercase justify-center transition ${getClass(variant)} ${className}` ) diff --git a/ceremony/src/lib/components/Ceremony.svelte b/ceremony/src/lib/components/Ceremony.svelte index 5e643f5082..d50b84bc76 100644 --- a/ceremony/src/lib/components/Ceremony.svelte +++ b/ceremony/src/lib/components/Ceremony.svelte @@ -8,6 +8,8 @@ import Queue from "$lib/components/Queue.svelte" import Install from "$lib/components/Install.svelte" import Thanks from "$lib/components/Thanks.svelte" import { user } from "$lib/stores/user.svelte.ts" +import Blink from "$lib/components/Blink.svelte" +import Warning from "$lib/components/Warning.svelte" type Props = { contributor: ContributorState @@ -28,11 +30,13 @@ $effect(() => { if (contributor.clientState !== "offline") { generate() } -}) -window.addEventListener("beforeunload", (e: BeforeUnloadEvent) => { - e.preventDefault() - e.returnValue = "" + if (contributor.state === "contributing" || contributor.state === "inQueue") { + window.addEventListener("beforeunload", (e: BeforeUnloadEvent) => { + e.preventDefault() + e.returnValue = "" + }) + } }) @@ -40,22 +44,43 @@ window.addEventListener("beforeunload", (e: BeforeUnloadEvent) => { {#if !contributor.userWallet} + {:else if contributor.state === 'contributed'} - {:else if contributor.clientState === 'offline'} + + {:else if contributor.state === 'verifying'} +

+ +

+

Verifying your contribution...

+ + + {:else if contributor.clientState !== 'offline'} + {:else if !contributor.downloadedSecret} + {:else if contributor.state === "inQueue"} + {:else if contributor.state === 'contribute'} -

Starting contribution...

+

+ +

+

Starting contribution...

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

Contributing...

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

Verifying your contribution...

+

+ +

+

Contributing...

+ + {:else}

Not able to contribute at this time

+ {/if} diff --git a/ceremony/src/lib/components/Download.svelte b/ceremony/src/lib/components/Download.svelte index a63e4f6703..f6cd27f568 100644 --- a/ceremony/src/lib/components/Download.svelte +++ b/ceremony/src/lib/components/Download.svelte @@ -39,7 +39,7 @@ function setDownloadedSecret() {

Store your PGP secret

Please store your secret somewhere safe, such as in your password manager. -
Never share your secret. +
There's no need to open the file and remember to never share a secret.
This secret key is the only way to prove that you have contributed.
diff --git a/ceremony/src/lib/components/Install.svelte b/ceremony/src/lib/components/Install.svelte index 92619403f0..9929b90bdd 100644 --- a/ceremony/src/lib/components/Install.svelte +++ b/ceremony/src/lib/components/Install.svelte @@ -1,10 +1,10 @@ {#if contributor} -
+
-

Run the mpc client

- You need to have docker running to contribute.
- For macOS you need to install +

Run the MPC client

+ + You must have docker installed in order to contribute.
On linux, install docker through your package manager, and skip to step 5. +
+ On macOS, we highly recommend OrbStack - because docker desktop is too slow.
- If you use docker desktop it is extremely likely that you lose your contribution slot. + because Docker Desktop is too slow. +
+ + If you use Docker Desktop it is extremely likely that you will lose your contribution slot. + + + + 1. Install OrbStack + + + 2. Open OrbStack from the Applications/ folder + + + 3. Click allow on the OrbStack popups + + + 4. Open Terminal from the Applications/Utilities/ folder + + + 5. Paste the following command in Terminal to start the MPC client: - Once you have OrbStack/Docker running you should paste this in your terminal.
- + - + + +
- Is it running but still see this page? We support Chrome, FireFox and Brave.
For Brave disable the shields in the address bar. + + Once the MPC client is running you can return to this page. + + + If the MPC client is running but you still see this page, ensure that you are using either Chrome, FireFox or Brave. +
+ For Brave, disable the shields in the address bar. + + {#if isSafari()} +
+ Safari is not supported +
+ {/if}
-{/if} \ No newline at end of file +{/if} diff --git a/ceremony/src/lib/components/Join.svelte b/ceremony/src/lib/components/Join.svelte index 224f02bb6c..e4c347d54f 100644 --- a/ceremony/src/lib/components/Join.svelte +++ b/ceremony/src/lib/components/Join.svelte @@ -55,7 +55,7 @@ $effect(() => { Or

Don't have an invite?

You can join the waitlist now to get priority access when the ceremony opens. -
diff --git a/ceremony/src/lib/components/Live.svelte b/ceremony/src/lib/components/Live.svelte new file mode 100644 index 0000000000..9d80e2c1a6 --- /dev/null +++ b/ceremony/src/lib/components/Live.svelte @@ -0,0 +1,34 @@ + + +
+ {#each live as item (item.created_at)} +
{JSON.stringify(item)}
+ {/each} +
\ No newline at end of file diff --git a/ceremony/src/lib/components/Queue.svelte b/ceremony/src/lib/components/Queue.svelte index c0865a8376..6740d88375 100644 --- a/ceremony/src/lib/components/Queue.svelte +++ b/ceremony/src/lib/components/Queue.svelte @@ -6,13 +6,19 @@ import Blink from "$lib/components/Blink.svelte" import SwimLoad from "$lib/components/SwimLoad.svelte" import H1 from "$lib/components/typography/H1.svelte" import { ContributorState } from "$lib/stores/state.svelte.js" -import { start } from "$lib/client" +import Text from "$lib/components/typography/Text.svelte" +import Warning from "$lib/components/Warning.svelte" type Props = { contributor: ContributorState } let { contributor }: Props = $props() + +window.addEventListener("beforeunload", (e: BeforeUnloadEvent) => { + e.preventDefault() + e.returnValue = "" +})

@@ -29,4 +35,5 @@ let { contributor }: Props = $props() (est.).

+ \ No newline at end of file diff --git a/ceremony/src/lib/components/SwimLoad.svelte b/ceremony/src/lib/components/SwimLoad.svelte index 48c6f10854..24c358a796 100644 --- a/ceremony/src/lib/components/SwimLoad.svelte +++ b/ceremony/src/lib/components/SwimLoad.svelte @@ -11,20 +11,22 @@ let { min = 1, max, current }: Props = $props() let progress = $derived(current != null && max != null ? ((current - min) / (max - min)) * 100 : 0) let clampedProgress = $derived(Math.max(0, Math.min(100, progress))) + +$effect(() => { + console.log(clampedProgress) +}) {#if current && max}
- - - - + style="left: calc({clampedProgress}% - 70px)" viewBox="0 0 128 56" fill="none" + xmlns="http://www.w3.org/2000/svg"> + +
Start diff --git a/ceremony/src/lib/components/Thanks.svelte b/ceremony/src/lib/components/Thanks.svelte index 146c13e7cf..e3ae2717e8 100644 --- a/ceremony/src/lib/components/Thanks.svelte +++ b/ceremony/src/lib/components/Thanks.svelte @@ -3,6 +3,7 @@ import Text from "$lib/components/typography/Text.svelte" import H1 from "$lib/components/typography/H1.svelte" import Tweet from "$lib/components/Tweet.svelte" import { ContributorState } from "$lib/stores/state.svelte.js" +import Blink from "$lib/components/Blink.svelte" type Props = { contributor: ContributorState @@ -10,10 +11,10 @@ type Props = { let { contributor }: Props = $props() -
+
+

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. + Your contribution is complete. Thank you for securing the Union network.
Tweet your cryptographic attestation for extra transparency:

You're on the waitlist

-When the ceremony opens to the public you will have position {contributor.waitListPosition} of public queue. +When the ceremony opens to the public you will have position {contributor.waitListPosition} of public queue. +You will be emailed 12-18 hours before the public phase begins.

Received an invite?

You can skip the waitlist and join now.
diff --git a/ceremony/src/lib/components/Warning.svelte b/ceremony/src/lib/components/Warning.svelte new file mode 100644 index 0000000000..fae0dc7a2d --- /dev/null +++ b/ceremony/src/lib/components/Warning.svelte @@ -0,0 +1,21 @@ + + +
+ {#if stupid} + Your MPC Client is connected. + Do not close this tab or your Terminal. + {/if} + Ensure you have a reliable internet connection
and that your computer does + not go to sleep. + +
\ No newline at end of file diff --git a/ceremony/src/lib/components/address/AddressForm.svelte b/ceremony/src/lib/components/address/AddressForm.svelte index 79e0a767ff..cc744564a8 100644 --- a/ceremony/src/lib/components/address/AddressForm.svelte +++ b/ceremony/src/lib/components/address/AddressForm.svelte @@ -70,7 +70,7 @@ const onAddressSubmit = async (event: Event) => { spellcheck="false" autocapitalize="none" bind:value={inputText} - placeholder="union1qp0wtsfltjk9rnvyu3fkdv0s0skp4y5y3py96f" + placeholder="union1ab…." class={clsx([ className, 'text-md font-supermolot h-9 px-2 outline-none border-2', diff --git a/ceremony/src/lib/layout/Navbar/index.svelte b/ceremony/src/lib/layout/Navbar/index.svelte index e77e1061b7..b11e52453d 100644 --- a/ceremony/src/lib/layout/Navbar/index.svelte +++ b/ceremony/src/lib/layout/Navbar/index.svelte @@ -52,8 +52,7 @@ let loggedIn = $derived(!!user.session?.user.id)