miralsuthar / vykt-sdk

---

Introduction

Welcome to the Vykt-SDK, your one-stop solution for displaying personalized profile pictures on the Ethereum blockchain. Using Vykt, users can choose their own profile picture for their public address, adding a unique touch to their wallets.

Our powerful Vykt-sdk component and hook make it simple and straightforward to display these profiles within your dApps. Use Vykt to create new profile pictures & Vykt-SDK to show them to everyone.

Currently we only support Mantle! But we will soon support multichain as well.

Installation

Install wagmi and its ethers peer dependency.

npm -

npm install vykt-sdk

yarn -

yarn add vykt-sdk

pnpm -

pnpm install vykt-sdk

Quick Start

The vykt-sdk is currently very straightforward to use, as it only has one component and hook. However, more features will be added soon to make it even easier to display profiles.

Component

• VyktProfile

import { VyktProfile } from "vykt-sdk";
import { Address, useAccount } from "wagmi";

export function App() {
  const { address, isConnected } = useAccount();

  return (
    <>
      {isConnected && (
        <VyktProfile address={address!} size="lg" type="circle" />
      )}
    </>
  );
}

Hook

• useFetchImageURI

import { useFetchImageURI } from "vykt-sdk";
import { Address } from "wagmi";

export type Props = {
  address: Address;
}

export function Profile(props: Props) {
  const { data } = useFetchImageURI(address);
  return (
    <div>
      <img src={data as string} />
    </div>
  );
}

Documentation

For now, there is a single component and hook for vykt-sdk. We will add more in near future.

Component

• VyktProfile - This component is designed to display your Vykt profile, and it requires an address as a mandatory prop. Additionally, size, type, and style are available as optional props to customize the component's appearance.

Prop	type	required
address	Address	true
size	sm | md | lg	optional
type	circle | square	optional
style	React.CSSProperties	optional

Hook

• useFetchImageURI - In order to use this hook, you must specify an address that will retrieve your vykt profile image if it exists, and a blockie image otherwise.

Authors

• @miralsuthar (Miral Suthar, Twitter)
• @keshavsharma25 (Keshav Sharma, Twitter)

License

MIT License