fix crash on auth and inspect page, fix example on gun-eth packages

packages/gun-eth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gun-eth",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A GunDB plugin for Ethereum, and Web3",
   "main": "./src/index.js",
   "scripts": {

packages/gun-eth/src/gun-eth.js

@@ -9,6 +9,7 @@
 })(typeof self !== "undefined" ? self : this, function (Gun, SEA, ethers) {
     console.log('Factory del plugin Gun-Eth chiamata');
 
+    const MESSAGE_TO_SIGN = "Accesso a GunDB con Ethereum";
 
 
     // Funzione per verificare se ethers è disponibile
@@ -291,6 +292,10 @@
      */
     Gun.chain.createSignature = async function (message) {
         try {
+            // Verifica se il messaggio è uguale a MESSAGE_TO_SIGN
+            if (message !== MESSAGE_TO_SIGN) {
+                throw new Error("Invalid message, valid message is: " + MESSAGE_TO_SIGN);
+            }
             const signer = await getSigner();
             const signature = await signer.signMessage(message);
             console.log("Signature created:", signature);

packages/gun-eth/src/index.js

@@ -12,6 +12,8 @@ let customToken = "";
 let rpcUrl = "";
 let privateKey = "";
 
+const MESSAGE_TO_SIGN = "Accesso a GunDB con Ethereum";
+
 /**
  * Funzione per ottenere il signer
  * @returns {Promise<ethers.Signer>} Il signer.
@@ -119,6 +121,10 @@ Gun.chain.generatePassword = function (signature) {
  */
 Gun.chain.createSignature = async function (message) {
   try {
+    // Verifica se il messaggio è uguale a MESSAGE_TO_SIGN
+    if (message !== MESSAGE_TO_SIGN) {
+      throw new Error("Invalid message, valid message is: " + MESSAGE_TO_SIGN);
+    }
     const signer = await getSigner();
     const signature = await signer.signMessage(message);
     console.log("Signature created:", signature);

packages/svelte/package.json

@@ -22,6 +22,7 @@
     "@types/eslint": "^8.56.0",
     "@types/lodash-es": "^4",
     "@types/react": "^18",
+    "@types/text-encoding": "^0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "autoprefixer": "^10.4.16",
@@ -79,6 +80,7 @@
     "react": "^18.3.1",
     "self-adjusting-interval": "^1.0.0",
     "svelte-wagmi": "^1.0.7",
+    "text-encoding": "^0.7.0",
     "tiny-secp256k1": "^2.2.3",
     "url-regex": "^5.0.0",
     "viem": "^2.21.7",

packages/svelte/src/lib/components/gun/graph/Graph.svelte

@@ -4,8 +4,12 @@
   import AccountAvatar from '../account/AccountAvatar.svelte';
   import { useColor } from '$lib/gun/colors';
   import { fade } from 'svelte/transition';
+  import { browser } from '$app/environment';
 
-  let colorDeep = useColor("deep");
+  let colorDeep: import("color-hash").ColorHash;
+  if(browser) {
+    colorDeep = useColor("deep");
+  }
   let graph = {};
   let gun = useGun();
 

packages/svelte/src/lib/gun/auth.ts

@@ -9,7 +9,7 @@ import { useGun } from "./gun";
 import SEA from "gun/sea";
 import { browser } from "$app/environment";
 
-const MESSAGE_TO_SIGN = "GunDB access with Ethereum";
+export const MESSAGE_TO_SIGN = "Accesso a GunDB con Ethereum";
 
 export function initializeAuth() {
   const gun = useGun();

packages/svelte/src/lib/gun/colors.ts

@@ -4,34 +4,42 @@
  * @group UI
  * */
 
-import ColorHash from "color-hash";
+import { browser } from '$app/environment';
+
+let ColorHash: any;
+
+if (browser) {
+  ColorHash = (await import('color-hash')).default;
+}
 
 /**
  * @typedef {'light' | 'regular' | 'deep' | 'dark'} Palette
  */
 
-const color = {
-  light: new ColorHash({
+const color: Record<string, any> = {};
+
+if (browser) {
+  color.light = new ColorHash({
     saturation: [0.05, 0.08, 0.22],
     lightness: [0.85, 0.87, 0.9],
-  }),
-  pale: new ColorHash({
+  });
+  color.pale = new ColorHash({
     saturation: [0.05, 0.42, 0.52],
     lightness: [0.75, 0.77, 0.9],
-  }),
-  regular: new ColorHash({
+  });
+  color.regular = new ColorHash({
     saturation: [0.1, 0.5, 0.7],
     lightness: [0.3, 0.5, 0.7],
-  }),
-  deep: new ColorHash({
+  });
+  color.deep = new ColorHash({
     saturation: [0.5, 0.6, 0.7],
     lightness: [0.2, 0.35, 0.4],
-  }),
-  dark: new ColorHash({
+  });
+  color.dark = new ColorHash({
     saturation: [0.02, 0.5, 0.6],
     lightness: [0.18, 0.2, 0.5],
-  }),
-};
+  });
+}
 
 /**
  * Get a color generator of a certain palette
@@ -45,8 +53,14 @@ const color = {
  * // color == '#e052ae'
  */
 export function useColor(palette = "deep") {
+  if (!browser) {
+    return {
+      hex: () => '#000000', // Fallback color for SSR
+    };
+  }
+
   if (typeof palette == "object") {
     return new ColorHash(palette);
   }
-  return color[palette];
-}
+  return color[palette as keyof typeof color];
+}

packages/svelte/src/lib/gun/gun.ts

@@ -4,7 +4,7 @@
  * @group Database
  */
 
-import Gun from "gun/gun";
+import Gun from "gun";
 import "gun/lib/then";
 import "gun/lib/radix";
 import "gun/lib/radisk";

packages/svelte/src/routes/auth/+page.svelte

@@ -2,7 +2,7 @@
   import { wagmiConfig } from "$lib/wagmi";
   import { getAccount } from "@wagmi/core";
   import { notification } from "$lib/utils/scaffold-eth/notification";
-  import { signIn, login, logout } from "$lib/gun/auth";
+  import { signIn, login, logout, MESSAGE_TO_SIGN } from "$lib/gun/auth";
   import { useUser, loadUserProfile } from "$lib/gun/user";
   import { writable } from 'svelte/store';
   import { onMount } from 'svelte';
@@ -85,7 +85,7 @@
     }
 
     try {
-      const signature = await gunInstance?.createSignature("Accesso a GunDB con Ethereum");
+      const signature = await gunInstance?.createSignature(MESSAGE_TO_SIGN);
       if (!signature) {
         setErrorMessage("Error signing message");
         return;
@@ -114,7 +114,10 @@
 
 <main class="text-left justify-center">
   {#if isLoading}
-    <p>Caricamento...</p>
+    <div class="w-full my-28 align-baseline text-center items-center">
+      <p class="text-center text-4xl animate-bounce">Loading ... </p>
+    </div>
+
   {:else if $user?.auth === false}
     <div class="w-full my-28 align-baseline text-center items-center">
       <button class="btn btn-primary" on:click={handleSignIn}><i class="fas fa-user-plus"></i> Sign In</button>

yarn.lock

@@ -2363,6 +2363,7 @@ __metadata:
     "@types/eslint": ^8.56.0
     "@types/lodash-es": ^4
     "@types/react": ^18
+    "@types/text-encoding": ^0
     "@typescript-eslint/eslint-plugin": ^7.0.0
     "@typescript-eslint/parser": ^7.0.0
     "@uniswap/sdk-core": ^4.2.0
@@ -2405,6 +2406,7 @@ __metadata:
     svelte-hero-icons: ^5.1.0
     svelte-wagmi: ^1.0.7
     tailwindcss: ^3.3.6
+    text-encoding: ^0.7.0
     tiny-secp256k1: ^2.2.3
     tslib: ^2.4.1
     type-fest: ^4.14.0
@@ -3455,6 +3457,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/text-encoding@npm:^0":
+  version: 0.0.39
+  resolution: "@types/text-encoding@npm:0.0.39"
+  checksum: a310f06c27f7848661114534e6e48927f47f5b32d2aa30a6ee668aba3a0c747c3b24069a1e0286415767956760cacf5173902728396223a2128be4b9ec415790
+  languageName: node
+  linkType: hard
+
 "@types/trusted-types@npm:*, @types/trusted-types@npm:^2.0.2":
   version: 2.0.7
   resolution: "@types/trusted-types@npm:2.0.7"
@@ -14365,6 +14374,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"text-encoding@npm:^0.7.0":
+  version: 0.7.0
+  resolution: "text-encoding@npm:0.7.0"
+  checksum: b6109a843fb1b8748b32e1ecd6df74d370f46c13ac136bcb6ca15db70209bb0b8ec1f296ebb4b0dd9961150e205dcc044b89f8cf7657f6faef78c7569a2a81bc
+  languageName: node
+  linkType: hard
+
 "text-table@npm:^0.2.0":
   version: 0.2.0
   resolution: "text-table@npm:0.2.0"