vykt-sdk
v0.2.1
Published
Welcome to the Vykt-SDK, your one-stop solution for displaying personalized profile pictures on the Ethereum blockchain. Using [Vykt](https://vykt.vercel.app/), users can choose their own profile picture for their public address, adding a unique touch to
Downloads
7
Readme
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