DFK Hero Viewer

DFK Hero Viewer is a React implementation for showing hero cards(NFTs) from the successful blockchain game DefiKingdom.

Prerequisites

• Node.js ≥v16.14.x
• React ≥v17.x

Install

You can either clone this repository or use the npm package

npm i dfk-hero-viewer

Usage

The main component that is used to render the hero card is HeroCard

import {HeroCard} from "dfk-hero-viewer";

<HeroCard hero={hero} isAnimated={true} isFlipped={false} />

the component needs to be passed 1 property and it accepts an additional 3 optional properties

Property name	Value	Required	Default	Accepted Values
hero	Object	√	required	Hero Object
isFlipped	Boolean	x	false	true=Stats side, false=sprite side
isAnimated	Boolean	x	false	true=animate sprite, false=dont animate sprite
flipToggle	Boolean	x	undefined	true=toggle on, false/undefined=toggle off

the flipToggle property can be applied to the component to give the ability of flipping the card onClick see example for details.

To get the hero object needed to render the card correctly there is a function included called fetchHero

import {fetchHero} from "dfk-hero-viewer";

examples

1. You can use the flipToggle property to give the card the ability to flip on user click instead of using a button -

...return (
	<HeroCard hero={hero} flipToggle />
)

1a. you can also spread props to the component -

...
const props = { hero, isFlipped: true, isAnimated: false, flipToggle: true };

return (
	<HeroCard {...props} />
)

2. Render the hero on page load and a button to flip the card -

import { useState, useEffect } from "react";
import { fetchHero, HeroCard } from "dfk-hero-viewer";

function App() {
	const [hero, setHero] = useState<any>(null);
	const [flipped, setFlipped] = useState(false);

	useEffect(() => {
		const getHero = async () => {
			let heroData = await fetchHero(1);
			setHero(heroData);
		};
		getHero();
	}, []);

	return (
		<>
			{hero && (
				<>
					<HeroCard hero={hero} isFlipped={flipped} isAnimated={true} />
					<button onClick={() => setFlipped(!flipped)}>Flip card</button>
				</>
			)}
		</>
	);
}

export default App;

3. A form to fetch the hero and render the card -

import { useState } from "react";
import { fetchHero, HeroCard } from "dfk-hero-viewer";

interface heroData {
	hero: any;
}

function SearchHero() {
	const [hero, setHero] = useState<heroData | any>(null);
	const [heroIdInput, setHeroIdInput] = useState();

	const onSubmit = async (evt: any) => {
		evt.preventDefault();
		const hero = await fetchHero(heroIdInput);
		setHero(hero);
	};

	return (
		<>
			<div>
				<div>
					<form onSubmit={onSubmit}>
						<input
							defaultValue={heroIdInput}
							onChange={(e: any) => setHeroIdInput(e.target.value)}
							type="text"
							placeholder="Enter Hero Id"
						></input>
						<button type="submit">Fetch hero card</button>
					</form>
				</div>

				<div>
					{hero && (
						<>
							<HeroCard
								hero={hero}
								isFlipped={false}
								isAnimated={true}
							/>
							<HeroCard
								hero={hero}
								isFlipped={true}
								isAnimated={true}
							/>
						</>
					)}
				</div>
			</div>
		</>
	);
}

Credit

Thanks to Kingdom studios the creators of DefiKingdoms for allowing me to use the art assets and the hero component source code that was used to make this project happen.

License

Copyright © Omer Bar and Authors, Licensed under ISC.

---

Tip Jar

if you like to support me in my endeavors of making more tools and applications in the DFK space you can tip me at this address:

metamask - 0x9ef08D3F22A9ad87f10eD3a6582f4a70Ea05aA34