SE-2Gun Documentation

A Svelte-friendly wrapper for GunDB, integrating Ethereum and Web3 functionality for decentralized database operations in Svelte applications.

Key Features

  • Seamless integration of GunDB with Svelte applications
  • Ethereum-based authentication and encryption
  • User profile management
  • SHINE (Secure Hash Integrity Network Ethereum) for data verification on the blockchain
  • Wagmi-Svelte integration for easy Web3 development

Additional Information

SE-2Gun is based on Scaffold-ETH, a framework for rapid development of decentralized applications (dApps) on Ethereum.

The project integrates GunDB for decentralized data management and Wagmi for Ethereum interaction.

SE-2Gun utilizes gun-eth, a GunDB plugin for generating key pairs through Ethereum signatures. Learn more about gun-eth.

For rapid testing of GunDB within the Scaffold-ETH environment, there's a dedicated extension available. Check out the Scaffold-ETH GunDB extension.

Useful Links:

Getting Started


<script>
  import { createAccount } from "@byteatatime/wagmi-svelte";

  const gun = useGun(); // Initialize GunDB
  const { user } = useUser(); // Initialize User
  const { address, chainId, status, isConnected } = $derived.by(createAccount()); // Initialize Wagmi
</script>

Authentication

SE-2Gun provides Ethereum-based authentication:


import { signIn, login, logout } from "$lib/gun/auth";

// Registration
async function handleSignIn() {
  const result = await signIn();
  if (result) {
    console.error(result);
  } else {
    console.log("Registration successful");
  }
}

// Login
async function handleLogin() {
  const result = await login();
  if (result) {
    console.error(result);
  } else {
    console.log("Login successful");
  }
}

// Logout
function handleLogout() {
  logout();
  console.log("Logged out");
}

User Profile Management

Manage user profiles with these functions:


import { loadUserProfile, saveUserProfile, addProfileField } from '$lib/gun/user';

// Load user profile
const profile = await loadUserProfile();

// Save user profile
await saveUserProfile(updatedProfile);

// Add a new field to the profile
addProfileField('city');

SHINE (Secure Hash Integrity Network Ethereum)

Use SHINE for data verification on the blockchain:


async function saveMessage() {
  const gunInstance = useGun();
  const result = await gunInstance.shine("optimismSepolia", message);
  if (result.ok) {
    console.log("Message saved and verified on blockchain");
    console.log("Node ID:", result.nodeId);
    console.log("Transaction Hash:", result.txHash);
  } else {
    console.error("Error saving message:", result.error);
  }
}

async function verifyMessage(nodeId) {
  const gunInstance = useGun();
  const result = await gunInstance.shine("optimismSepolia", nodeId);
  if (result.ok) {
    console.log("Message verified on blockchain");
    console.log("Timestamp:", result.timestamp);
    console.log("Updater:", result.updater);
    console.log("Latest Record:", result.latestRecord);
  } else {
    console.log("Message not verified or not found");
  }
}

Components

AccountProfile.svelte

Displays account information including the public key, color, pulse, blink status, and last login.


import AccountProfile from "$lib/components/gun/account/AccountProfile.svelte";

<AccountProfile  />

AccountAvatar.svelte

Shows the user's avatar with options to upload a new one if it's the current user's profile.


import AccountAvatar from "$lib/components/gun/account/AccountAvatar.svelte";

<AccountAvatar size={96} border={2} />

ProfileDisplay.svelte

Allows viewing and editing user profile information with dynamic addition and removal of fields.


import ProfileDisplay from "$lib/components/gun/profile/ProfileDisplay.svelte";

<ProfileDisplay />

Usage Example

Here's how you might use these components together on a user profile page:


<script>
import { useUser } from '$lib/gun/user';
import AccountProfile from "$lib/components/gun/account/AccountProfile.svelte";
import AccountAvatar from "$lib/components/gun/account/AccountAvatar.svelte";
import ProfileDisplay from "$lib/components/gun/profile/ProfileDisplay.svelte";

const { user } = useUser();
</script>

<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/3">
    <AccountAvatar pub={$user.pub} size={128} />
    <AccountProfile pub={$user.pub} />
  </div>
  <div class="w-full md:w-2/3">
    <ProfileDisplay />
  </div>
</div>

Additional Functions

User Functions

  • selectedUser: A writable store that holds the currently selected user's public key.
  • userPub: A derived store that always contains the current user's public key.
  • pair(): Returns the current user's SEA key pair. Use with caution as it logs each access.
  • init(): Initializes the user's data and sets up listeners for updates.
  • isMine(soul: string): Checks if the given soul belongs to the current user.
  • loadUserProfile(): Loads the user's profile from Gun and updates the local store.
  • addProfileField(title: string, initialValue: string = ""): Adds a new field to the user's profile if it doesn't already exist.
  • updateProfileField(field: string, value: string): Updates a specific field in the user's profile.
  • removeProfileField(field: string): Removes a field from the user's profile.
  • saveUserProfile(profile: Object): Saves the entire user profile, updating both Gun and the local store.

Account Functions

  • useAccount(pubKey: string): Sets up and manages an account for the given public key, including profile data and online status.
  • setPetname(pub: string, name: string): Sets a petname (nickname) for a user, encrypting it before storage.
  • useAvatar(pub: string, size: number): Manages the avatar for a user, including retrieval and upload functionality.

These components and functions work together to provide a comprehensive user profile management system, integrating GunDB, Ethereum authentication, and blockchain verification for decentralized applications.