updated the Google Flow UI part1
This commit is contained in:
Samuel Andert
@@ -1,152 +1,128 @@
|
||||
<script lang="ts">
|
||||
import { onMount, tick } from 'svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { isSignInRedirect, getProviderFromUrl } from '@lit-protocol/lit-auth-client';
|
||||
import type { IRelayPKP } from '@lit-protocol/types';
|
||||
import { ProviderType } from '@lit-protocol/constants';
|
||||
import { createMessage } from '$lib/services/messages/messages';
|
||||
import { createLitSession } from '$lib/services/createLitSession/createLitSession';
|
||||
import Icon from '@iconify/svelte';
|
||||
import { createLitSession } from '$lib/services/createLitSession/createLitSession';
|
||||
import Apps from '$lib/components/Apps.svelte';
|
||||
|
||||
const redirectUri = 'http://localhost:5173/';
|
||||
|
||||
export let services;
|
||||
|
||||
let view = 'sign_in';
|
||||
let sessionSigs;
|
||||
let error;
|
||||
let isLoading = false;
|
||||
let currentPKP;
|
||||
let sessionSigs, error, currentPKP, authMethod, provider;
|
||||
let log = '';
|
||||
let pkps: IRelayPKP[] = [];
|
||||
let authMethod;
|
||||
let provider;
|
||||
let view = 'SIGN_IN';
|
||||
|
||||
function logMessage(text, type = 'SYSTEM') {
|
||||
console.log(text);
|
||||
createMessage({
|
||||
text,
|
||||
sender: '$lib/components/GoogleAuth.svelte',
|
||||
type
|
||||
});
|
||||
}
|
||||
onMount(() => {
|
||||
initialize();
|
||||
});
|
||||
|
||||
onMount(async () => {
|
||||
async function initialize() {
|
||||
addToLog('Initialization...');
|
||||
try {
|
||||
provider = await services.setupLit.connectProvider();
|
||||
console.log('Provider: ' + provider);
|
||||
|
||||
logMessage('Component mounted.');
|
||||
|
||||
if (!authMethod && isSignInRedirect(redirectUri)) {
|
||||
logMessage('Redirect detected, handling...');
|
||||
addToLog('Connected to Google provider.');
|
||||
if (isSignInRedirect(redirectUri)) {
|
||||
const providerName = getProviderFromUrl();
|
||||
if (providerName) {
|
||||
await handleRedirect(providerName);
|
||||
} else {
|
||||
logMessage('No provider detected in the URL.', 'ERROR');
|
||||
}
|
||||
} else {
|
||||
logMessage('No redirect detected.');
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function authWithGoogle() {
|
||||
try {
|
||||
if (!provider) {
|
||||
provider = await services.setupLit.connectProvider();
|
||||
addToLog('Reconnected to Google provider.');
|
||||
}
|
||||
await provider.signIn();
|
||||
await handleRedirect(ProviderType.Google);
|
||||
addToLog('Signed in with Google.');
|
||||
} catch (err) {
|
||||
setError(err);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRedirect(providerName: string) {
|
||||
logMessage(`Handling redirect for ${providerName}`);
|
||||
|
||||
if (!provider) throw new Error('Invalid provider.');
|
||||
authMethod = await provider.authenticate();
|
||||
await tick();
|
||||
|
||||
view = 'fetching';
|
||||
pkps = await provider.fetchPKPsThroughRelayer(authMethod);
|
||||
view = pkps.length > 0 ? 'fetched' : 'NO_PKPS';
|
||||
|
||||
logMessage(`Fetched PKPs: ${pkps.length}`);
|
||||
}
|
||||
|
||||
async function mint() {
|
||||
try {
|
||||
view = 'MINTING';
|
||||
const newPKP: IRelayPKP = await mintPkp(provider, authMethod);
|
||||
pkps = [...pkps, newPKP];
|
||||
await createSession(newPKP);
|
||||
view = 'MINTED';
|
||||
if (!provider) throw new Error('Invalid provider.');
|
||||
authMethod = await provider.authenticate();
|
||||
addToLog('Authenticated successfully.');
|
||||
pkps = await provider.fetchPKPsThroughRelayer(authMethod);
|
||||
addToLog('Fetched PKPs.');
|
||||
if (pkps.length === 0) {
|
||||
addToLog('No PKPs found. Minting...');
|
||||
await mint();
|
||||
} else {
|
||||
// Update the view to 'PKP' to show the available PKPs
|
||||
view = 'PKP';
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err);
|
||||
}
|
||||
}
|
||||
|
||||
async function mint() {
|
||||
const newPKP: IRelayPKP = await mintPkp(provider, authMethod);
|
||||
pkps = [...pkps, newPKP];
|
||||
addToLog('New PKP minted.');
|
||||
await createSession(newPKP);
|
||||
}
|
||||
|
||||
async function createSession(pkp: IRelayPKP) {
|
||||
logMessage('Creating session...');
|
||||
view = 'CREATING_SESSION';
|
||||
|
||||
sessionSigs = await createLitSession(provider, pkp.publicKey, authMethod);
|
||||
currentPKP = pkp;
|
||||
|
||||
logMessage('Session created.');
|
||||
view = 'SESSION_CREATED';
|
||||
try {
|
||||
currentPKP = pkp; // Assign the selected PKP to currentPKP
|
||||
sessionSigs = await createLitSession(provider, pkp.publicKey, authMethod);
|
||||
addToLog('Session created successfully.');
|
||||
view = 'READY';
|
||||
} catch (err) {
|
||||
setError(err);
|
||||
}
|
||||
}
|
||||
|
||||
function setError(err) {
|
||||
console.error(err);
|
||||
error = err;
|
||||
view = 'ERROR';
|
||||
addToLog(`Error: ${err.message}`);
|
||||
}
|
||||
|
||||
function resetView() {
|
||||
view = authMethod ? 'fetched' : 'sign_in';
|
||||
error = null;
|
||||
function addToLog(message: string) {
|
||||
log += `${message}\n`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="flex items-center justify-center h-full">
|
||||
<div class="text-center">
|
||||
<div class="flex items-center justify-center h-screen">
|
||||
<div>
|
||||
{#if error}
|
||||
<h1>Error</h1>
|
||||
<p>{error.message}</p>
|
||||
<button on:click={resetView}>Got it</button>
|
||||
{:else if isLoading}
|
||||
<h1>Loading...</h1>
|
||||
{:else if view === 'sign_in'}
|
||||
<div class="mt-4 text-center">
|
||||
<h1>Error</h1>
|
||||
<p>{error.message}</p>
|
||||
</div>
|
||||
{:else if view === 'SIGN_IN'}
|
||||
<button on:click={authWithGoogle} class="btn variant-filled">
|
||||
<span><Icon icon="flat-color-icons:google" /></span>
|
||||
<span>Sign in with Google</span>
|
||||
</button>
|
||||
{:else if view === 'fetching'}
|
||||
<h1>Fetching your PKPs...</h1>
|
||||
{:else if view === 'NO_PKPS'}
|
||||
<h1>No PKPs found.</h1>
|
||||
<button on:click={mint}>Mint a PKP</button>
|
||||
{:else if view === 'fetched'}
|
||||
<h1>Select a PKP to continue</h1>
|
||||
{#each pkps as pkp}
|
||||
<button on:click={async () => await createSession(pkp)}>{pkp.ethAddress}</button>
|
||||
{/each}
|
||||
{:else if view === 'MINTING'}
|
||||
<h1>Minting your PKP...</h1>
|
||||
{:else if view === 'MINTED'}
|
||||
<h1>Minted!</h1>
|
||||
{:else if view === 'CREATING_SESSION'}
|
||||
<h1>Creating session...</h1>
|
||||
{:else if view === 'SESSION_CREATED'}
|
||||
<h1>Ready for the open web</h1>
|
||||
{:else if view === 'PKP'}
|
||||
<div>
|
||||
<h1>Select a PKP to continue</h1>
|
||||
{#each pkps as pkp}
|
||||
<button on:click={() => createSession(pkp)}>{pkp.ethAddress}</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if view === 'READY'}
|
||||
<div>
|
||||
<h1>Ready for the open web</h1>
|
||||
<p>Check out your PKP:</p>
|
||||
<p>{currentPKP.ethAddress}</p>
|
||||
<Apps />
|
||||
</div>
|
||||
<Apps />
|
||||
{/if}
|
||||
<pre class="mt-4">{log}</pre>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user