@gumhq/react-sdk NPM

Gum React SDK

Installation

yarn add @gumhq/react-sdk

Documentation

For more detailed documentation, please visit the Gum documentation.

Usage

The useGumContext, useCreateProfile, and useUploaderContext hooks provide the necessary utilities to create a new profile.

import {
  useCreateProfile,
  useGumContext,
  useUploaderContext,
} from "@gumhq/react-sdk";
import { useWallet } from "@solana/wallet-adapter-react";
import { useState } from "react";

export function ProfileCreation() {
  const [profileName, setProfileName] = useState("");
  const [profileBio, setProfileBio] = useState("");
  const [profileUsername, setProfileUsername] = useState("");
  const [profileAvatar, setProfileAvatar] = useState("");

  const wallet = useWallet();
  const { publicKey } = wallet;
  const { sdk } = useGumContext(); // access the Gum SDK
  const { createProfileWithDomain } = useCreateProfile(sdk); // create a new profile
  const { handleUpload } = useUploaderContext(); // upload metadata to Arweave/GenesysGo

  const createProfile = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const profileMetadata = {
      name: profileName,
      bio: profileBio,
      avatar: profileAvatar,
    };

    const uploadResponse = await handleUpload(profileMetadata, wallet);
    if (!uploadResponse) {
      console.error("Error uploading profile metadata");
      return false;
    }

    const profileResponse = await createProfileWithDomain(
      uploadResponse.url,
      profileUsername,
      publicKey
    );
    if (!profileResponse) {
      console.error("Error creating profile");
      return false;
    }

    console.log("Profile created successfully", profileResponse);
  };

  // Your HTML form and fields would go here
}

Gum Quickstart

The Gum Quickstart is an excellent starting point for developers aiming to leverage Gum in their Next.js applications. This ready-to-use template not only expedites the setup process, but also includes functional examples and components to facilitate the creation of domain profiles, posts, and more. Check out the Gum Quickstart to get started.

Example App

Check out the example app that uses the Gum SDK to demonstrate its capabilities. The app is a simple React app that showcases the creation of a domain, profile, and posts.