samuelandert.eth/wallet.andert.me
1
0
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

major refactoring adding and finishing xstate signin flow

Browse Source
This commit is contained in:
Samuel Andert
2023-09-01 17:38:22 +02:00
parent 24b83ec99e
commit 293180c2b5
11 changed files with 107 additions and 484 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/lib/Wallet.svelte
View File

@ -2,8 +2,15 @@
import { useMachine } from "@xstate/svelte";
import walletMachine from "./machines/walletMachine";
import { onMount } from "svelte";
import Icon from "@iconify/svelte";
import {
signInWithGoogle,
startSignIn as startSignInService,
} from "./services/signInWithGoogle";
const { state, send } = useMachine(walletMachine);
$: {
if ($state.context.pkps && $state.context.sessionSigs) {
localStorage.setItem(
@ -21,38 +28,62 @@
send({ type: "RELOAD", ...me });
}
});
async function startSignIn() {
startSignInService.set(true);
await signInWithGoogle();
}
function clearSession() {
send("LOGOUT");
}
</script>
{#if $state.matches("creatingSession")}
<div class="bg-white p-10">
<p>Authenticated successfully. Selecting or minting PKP...</p>
</div>
{:else if $state.matches("sessionAvailable")}
<div class="bg-white p-10">
<p>Signed in successfully. Here is your PKP:</p>
<pre>{JSON.stringify($state.context.pkps[0].ethAddress, null, 2)}</pre>
<p>Session available. Here are your session signatures:</p>
<div class="flex flex-col">
{#each Object.keys($state.context.sessionSigs) as key}
<div class="flex items-center p-2 bg-white rounded shadow mb-2">
<div
class="w-4 h-4 mr-2 rounded-full"
class:bg-green-500={!$state.context.sessionSigs[key].expired}
class:bg-red-500={$state.context.sessionSigs[key].expired}
/>
<div class="flex-grow">
<p class="font-bold">{key}</p>
<p class="text-sm text-gray-500">
{$state.context.sessionSigs[key].sig}
{#if $state.matches("sessionAvailable") || $state.matches("creatingSession") || $state.matches("signIn")}
{#if $state.matches("signIn")}
<div class="w-1/3">
<button
on:click={startSignIn}
class="w-full py-2 text-white bg-blue-500 rounded hover:bg-blue-700 flex items-center justify-center"
>
<span class="mr-2"><Icon icon="flat-color-icons:google" /></span>
<span>Sign in with Google</span>
</button>
</div>
{:else if $state.context.pkps}
<div
class="fixed bottom-0 left-0 right-0 p-3 bg-white bg-opacity-75 rounded-t-lg shadow-md flex flex-col items-center space-y-4"
>
<div class="w-full flex items-center justify-between space-x-4">
<div class="flex items-center space-x-2">
<div>
<p class="text-sm">
<span class="font-semibold">Address:</span>
{$state.context.pkps[0].ethAddress}
</p>
<p class="text-xs">
<span class="font-semibold">Provider:</span>
{$state.context.providerName}
</p>
</div>
</div>
{/each}
<button
on:click={clearSession}
class="py-1 px-2 text-white bg-red-500 rounded hover:bg-red-700"
>
Logout
</button>
</div>
</div>
{:else if $state.matches("sessionExpired")}
<div class="bg-white p-10">
<p>Error creating session. Please try again.</p>
<pre>{JSON.stringify($state.context.error, null, 2)}</pre>
</div>
{/if}
{:else}
<div class="bg-white p-10 rounded-full">
<div class="bg-white rounded-full p-5 animate-spin">
<Icon icon="la:spinner" width="100" height="100" />
</div>
</div>
{:else if $state.matches("sessionExpired")}
<div class="bg-white p-10">
<p>Error creating session. Please try again.</p>
<pre>{JSON.stringify($state.context.error, null, 2)}</pre>
</div>
{/if}