Skip to content

Commit

Permalink
to fix crash when refresh auth page
Browse files Browse the repository at this point in the history
  • Loading branch information
@scobru
scobru committed Oct 18, 2024
1 parent 74e4d85 commit c9a38d9
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 105 deletions.
1 change: 0 additions & 1 deletion packages/svelte/src/lib/gun/avatar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { derived, writable, get } from "svelte/store";
import { useGun } from "./gun";
import { useUser } from "./user";
import SEA from "gun/sea";
import { gunAvatar } from "gun-avatar"
import { browser } from '$app/environment';

export function useAvatar(pub: string, size: number) {
Expand Down
15 changes: 0 additions & 15 deletions packages/svelte/src/lib/stores.ts
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,7 @@
import type { IGunInstance } from "gun";
import { writable, type Writable } from "svelte/store";

import Gun from "gun";
import "gun/lib/then";
import "gun/lib/radix";
import "gun/lib/radisk";
import "gun/lib/store";
import "gun/lib/rindexed";
import "gun/lib/webrtc";
import "gun-eth";
import "gun/lib/yson.js";

import { peers } from "../../gun.config";

export const currentUser = writable(null);

export const gun = writable(null) as unknown as Writable<IGunInstance<any>>;

const gunInstance: IGunInstance<any> = new Gun(peers[0]);

gun.set(gunInstance);
23 changes: 13 additions & 10 deletions packages/svelte/src/routes/auth/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,26 +13,25 @@
import Graph from "$lib/components/gun/graph/Graph.svelte";
import GunRelay from "$lib/components/gun/relay/GunRelay.svelte";
import { browser } from "$app/environment";
import type { IGunInstance } from "gun";
let errorMessage: string | null = null;
let errorTimeoutId: number;
const userPairStore = writable(null);
const { user } = useUser();
let gunInstance: IGunInstance<any> = useGun();
let gunInstance: any = useGun();
let isLoading = true;
onMount(() => {
isLoading = false;
});
let AccountProfile;
let AccountProfile: __sveltets_2_IsomorphicComponent<Record<string, never>, { [evt: string]: CustomEvent<any>; }, {}, {}, string>;
onMount(async () => {
if (browser) {
if (browser && typeof CanvasRenderingContext2D !== 'undefined') {
const module = await import('$lib/components/gun/account/AccountProfile.svelte');
AccountProfile = module.default;
}
Expand All @@ -45,7 +44,7 @@
if (message) {
errorTimeoutId = setTimeout(() => {
errorMessage = null;
}, 5000);
}, 5000) as unknown as number;
}
}
Expand Down Expand Up @@ -86,7 +85,7 @@
}
try {
const signature = await gunInstance.createSignature("Accesso a GunDB con Ethereum");
const signature = await gunInstance?.createSignature("Accesso a GunDB con Ethereum");
if (!signature) {
setErrorMessage("Error signing message");
return;
Expand All @@ -99,8 +98,12 @@
} else {
userPairStore.set(pair);
}
} catch (error) {
setErrorMessage("Error retrieving pair: " + error.message);
} catch (error: unknown) {
if (error instanceof Error) {
setErrorMessage("Errore nel recupero della coppia: " + error.message);
} else {
setErrorMessage("Errore sconosciuto nel recupero della coppia");
}
}
}
Expand All @@ -119,13 +122,13 @@
</div>
{:else}
<div class="break-all text-center w-full">
<h2 class="mb-4 text-2xl font-semibold">👋 Welcome, {$user?.profile?.name || $user?.pub}!</h2>
<h2 class="mb-4 text-2xl font-semibold">👋 Welcome, {$user?.profile?.name! || $user?.pub}!</h2>
<div class="container mx-auto my-10 px-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="w-full">
{#if AccountProfile}
<svelte:component this={AccountProfile} pub={$user.pub} />
{/if}
{/if}
</div>
<div class="w-full">
<ProfileDisplay />
Expand Down
166 changes: 88 additions & 78 deletions packages/svelte/src/routes/shine/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import { createAccount } from "@byteatatime/wagmi-svelte";
import { tick } from "svelte";
import { useGun } from "$lib/gun/gun";
import { ethers } from "ethers";
import { ethers } from "ethers";
import { notification } from "$lib/utils/scaffold-eth/notification";
let message = $state("");
Expand All @@ -22,7 +22,7 @@ import { ethers } from "ethers";
let editNodeId = $state("");
onMount(async () => {
gunInstance = useGun()
gunInstance = useGun();
});
const { address, chainId, status, isConnected } = $derived.by(createAccount());
Expand All @@ -37,7 +37,7 @@ import { ethers } from "ethers";
error = "";
try {
const data = message ;
const data = message;
const result = await new Promise((resolve, reject) => {
gunInstance.shine("optimismSepolia", null, data, function (ack) {
Expand Down Expand Up @@ -104,14 +104,14 @@ import { ethers } from "ethers";
try {
// Recupera il dato esistente
const existingData = await new Promise((resolve) => {
gunInstance.get(editNodeId).once((data) => resolve(data));
const existingData = await new Promise(resolve => {
gunInstance.get(editNodeId).once(data => resolve(data));
});
// Prepara i nuovi dati
const newData = {
message: editMessage,
_contentHash: existingData._contentHash // Manteniamo il contentHash precedente per il calcolo
_contentHash: existingData._contentHash, // Manteniamo il contentHash precedente per il calcolo
};
// Calcola il nuovo contentHash
Expand All @@ -122,7 +122,7 @@ import { ethers } from "ethers";
newData._contentHash = newContentHash;
// Modifica il messaggio e il _contentHash localmente su Gun
gunInstance.get(editNodeId).put(newData, (ack) => {
gunInstance.get(editNodeId).put(newData, ack => {
if (ack.err) {
throw new Error(ack.err);
}
Expand All @@ -138,125 +138,135 @@ import { ethers } from "ethers";
}
</script>

<div class="flex flex-grow flex-col font-sans">
<article class="p-10 prose-p:text-lg prose-ul:text-lg prose-li:text-lg prose-li:list-disc prose-li:marker:text-ableton-blue">
<h1 class="text-4xl font-bold mb-8">SHINE</h1>
<p class="text-xl mb-8 leading-relaxed">
Secure Hash Integrity Network Ethereum: Un sistema per verificare l'integrità dei messaggi sulla blockchain.
</p>
<div class="flex flex-grow flex-col font-sans">
<article
class="prose-p:text-lg prose-ul:text-lg prose-li:text-lg prose-li:list-disc prose-li:marker:text-ableton-blue p-10"
>
<h1 class="mb-8 text-4xl font-bold">SHINE</h1>
<p class="mb-8 text-xl leading-relaxed">
Secure Hash Integrity Network Ethereum: Un sistema per verificare l'integrità dei messaggi sulla blockchain.
</p>
</article>

{#if isConnected}
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8 p-8">
<div class="bg-ableton-orange p-6 rounded-none text-black ">
<h2 class="text-2xl font-semibold mb-4">Save Message</h2>
<div class="mb-8 grid grid-cols-1 gap-8 p-8 md:grid-cols-2">
<div class="bg-ableton-orange rounded-none p-6 text-black">
<h2 class="mb-4 text-2xl font-semibold">Save Message</h2>
<input
type="text"
bind:value={message}
placeholder="Inserisci un messaggio"
class="w-full p-2 mb-4 border border-gray-300 focus:outline-none focus:border-blue-500"
class="mb-4 w-full border border-gray-300 p-2 focus:border-blue-500 focus:outline-none"
/>
<!-- svelte-ignore event_directive_deprecated -->
<button
on:click={saveMessage}
disabled={isLoading}
class="w-full bg-transparent capitalize font-semibold text-white p-2 hover:bg-ableton-beige hover:text-black transition duration-300 ease-in-out"
<button
on:click={saveMessage}
disabled={isLoading}
class="hover:bg-ableton-beige w-full bg-transparent p-2 font-semibold capitalize text-white transition duration-300 ease-in-out hover:text-black"
>
{isLoading ? "Salvataggio in corso..." : "Salva Messaggio"}
</button>
</div>

<div class="bg-ableton-green p-6 rounded-none text-black">
<h2 class="text-2xl font-semibold mb-4">Verify Message</h2>
<div class="bg-ableton-green rounded-none p-6 text-black">
<h2 class="mb-4 text-2xl font-semibold">Verify Message</h2>
<input
type="text"
bind:value={nodeId}
placeholder="Node ID"
class="w-full p-2 mb-4 border border-gray-300 focus:outline-none focus:border-blue-500"
class="mb-4 w-full border border-gray-300 p-2 focus:border-blue-500 focus:outline-none"
/>
<button
on:click={verifyMessage}
disabled={isLoading || !nodeId}
class="w-full bg-transparent text-black p-2 hover:bg-green-600 transition duration-300 ease-in-out"
<button
on:click={verifyMessage}
disabled={isLoading || !nodeId}
class="w-full bg-transparent p-2 text-black transition duration-300 ease-in-out hover:bg-green-600"
>
{isLoading ? "Verifica in corso..." : "Verifica Messaggio"}
</button>
</div>

<div class="bg-ableton-light-blue p-6 rounded-none text-black">
<h2 class="text-2xl font-semibold mb-4">Modify Off-Chain Message</h2>
<div class="bg-ableton-light-blue rounded-none p-6 text-black">
<h2 class="mb-4 text-2xl font-semibold">Modify Off-Chain Message</h2>
<input
type="text"
bind:value={editNodeId}
placeholder="Node ID"
class="w-full p-2 mb-4 border border-gray-300 focus:outline-none focus:border-blue-500 text-black"
class="mb-4 w-full border border-gray-300 p-2 text-black focus:border-blue-500 focus:outline-none"
/>
<input
type="text"
bind:value={editMessage}
placeholder="Nuovo messaggio"
class="w-full p-2 mb-4 border border-gray-300 focus:outline-none focus:border-blue-500 text-black"
class="mb-4 w-full border border-gray-300 p-2 text-black focus:border-blue-500 focus:outline-none"
/>
<button
on:click={editLocalMessage}
disabled={isLoading || !editNodeId || !editMessage}
class="w-full bg-transparent text-black p-2 hover:bg-purple-600 transition duration-300 ease-in-out"
<button
on:click={editLocalMessage}
disabled={isLoading || !editNodeId || !editMessage}
class="w-full bg-transparent p-2 text-black transition duration-300 ease-in-out hover:bg-purple-600"
>
{isLoading ? "Editing in progress..." : "Edit Off-Chain Message"}
</button>
</div>
</div>

{#if error}
<p class="text-red-500 mb-4">{error}</p>
<p class="mb-4 text-red-500">{error}</p>
{/if}

<div class=" w-full bg-ableton-light-blue text-black rounded-none ">
<div class=" bg-ableton-light-blue w-full rounded-none text-black">
{#if savedMessage}
<div class=" p-10 rounded-none ">
<h2 class="text-3xl font-semibold mb-4">Saved Message</h2>
<p class="mb-2">{savedMessage}</p>
<p class="text-sm text-gray-600">Node ID: {nodeId}</p>
{#if txHash}
<p class="text-sm text-gray-600">Transaction Hash: {txHash}</p>
{/if}
</div>
<div class=" rounded-none p-10">
<h2 class="mb-4 text-3xl font-semibold">Saved Message</h2>
<p class="mb-2">{savedMessage}</p>
<p class="text-sm text-gray-600">Node ID: {nodeId}</p>
{#if txHash}
<p class="text-sm text-gray-600">Transaction Hash: {txHash}</p>
{/if}
</div>
{/if}

{#if verificationResult}
<div class=" p-10 rounded-none mb-8">
<h2 class="text-3xl font-semibold mb-4">Verification Result</h2>
<p class={verificationResult.ok ? "text-green-500 text-xl" : "text-red-500 text-xl"}>
{verificationResult.ok ? "🎉" : "✖️"}
{verificationResult.message}
</p>
{#if verificationResult.updater}
<p class="text-sm ">Updater: {verificationResult.updater}</p>
{/if}
{#if verificationResult.timestamp}
<p class="text-sm ">
Timestamp: {new Date(parseInt(verificationResult.timestamp) * 1000).toLocaleString()}
{#if verificationResult}
<div class=" mb-8 rounded-none p-10">
<h2 class="mb-4 text-3xl font-semibold">Verification Result</h2>
<p class={verificationResult.ok ? "text-xl text-green-500" : "text-xl text-red-500"}>
{verificationResult.ok ? "🎉" : "✖️"}
{verificationResult.message}
</p>
{/if}
</div>
{/if}
</div>
<article class="prose-p:text-lg prose-ul:text-lg prose-li:text-lg prose-li:list-disc prose-li:marker:text-ableton-blue">
<div class="bg-ableton-yellow w-full p-10 rounded-none text-black">
<h2 class="text-5xl font-semibold mb-10">How to Use Verification</h2>
<ol class="list-decimal list-inside space-y-2">
<li>Save a message using the "Enter a message" field and the "Save Message" button.</li>
<li>Copy the Node ID that appears after saving the message.</li>
<li>Paste the Node ID into the "Node ID" field.</li>
<li>Click the "Verify Message" button.</li>
<li>The verification result will appear below, showing whether the message was successfully verified on the blockchain.</li>
</ol>
<p class="mt-4 text-sm text-gray-600">
Note: The verification compares the hash of the locally saved message with the one recorded on the blockchain, confirming the integrity and authenticity of the data.
</p>
{#if verificationResult.updater}
<p class="text-sm">Updater: {verificationResult.updater}</p>
{/if}
{#if verificationResult.timestamp}
<p class="text-sm">
Timestamp: {new Date(parseInt(verificationResult.timestamp) * 1000).toLocaleString()}
</p>
{/if}
</div>
{/if}
</div>
</article>
<article
class="prose-p:text-lg prose-ul:text-lg prose-li:text-lg prose-li:list-disc prose-li:marker:text-ableton-blue"
>
<div class="bg-ableton-yellow w-full rounded-none p-10 text-black">
<h2 class="mb-10 text-5xl font-semibold">How to Use Verification</h2>
<ol class="list-inside list-decimal space-y-2">
<li>Save a message using the "Enter a message" field and the "Save Message" button.</li>
<li>Copy the Node ID that appears after saving the message.</li>
<li>Paste the Node ID into the "Node ID" field.</li>
<li>Click the "Verify Message" button.</li>
<li>
The verification result will appear below, showing whether the message was successfully verified on the
blockchain.
</li>
</ol>
<p class="mt-4 text-sm text-gray-600">
Note: The verification compares the hash of the locally saved message with the one recorded on the blockchain,
confirming the integrity and authenticity of the data.
</p>
</div>
</article>
{:else}
<p class="text-xl font-semibold bg-yellow-100 p-4 rounded-none">Per favore, connetti il tuo wallet per utilizzare questa funzionalità.</p>
<p class="rounded-none bg-yellow-100 p-4 text-xl font-semibold">
Per favore, connetti il tuo wallet per utilizzare questa funzionalità.
</p>
{/if}
</div>
5 changes: 4 additions & 1 deletion packages/svelte/vite.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ export default defineConfig({
},
},
ssr: {
noExternal: ['gun-avatar']
noExternal: ['gun-avatar','vis-network','CanvasRenderingContext2D']
},
optimizeDeps: {
include: ['gun-avatar']
}
});

0 comments on commit c9a38d9

Please sign in to comment.