Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omer-bar/dfk-hero-viewer
DFK Hero Viewer – a React library designed to display hero cards (NFTs) from the popular blockchain game DeFi Kingdoms.
https://github.com/omer-bar/dfk-hero-viewer
blockchain blockchain-technology javascript nft nfts open-source react
Last synced: 2 months ago
JSON representation
DFK Hero Viewer – a React library designed to display hero cards (NFTs) from the popular blockchain game DeFi Kingdoms.
- Host: GitHub
- URL: https://github.com/omer-bar/dfk-hero-viewer
- Owner: omer-bar
- License: isc
- Created: 2022-03-06T18:21:54.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-07T19:24:01.000Z (over 1 year ago)
- Last Synced: 2024-09-30T13:41:16.100Z (3 months ago)
- Topics: blockchain, blockchain-technology, javascript, nft, nfts, open-source, react
- Language: TypeScript
- Homepage:
- Size: 40.6 MB
- Stars: 13
- Watchers: 2
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://www.npmjs.com/package/dfk-hero-viewer)
```Shell
npm i dfk-hero-viewer
```
## Usage
The main component that is used to render the hero card is HeroCard
```js
import {HeroCard} from "dfk-hero-viewer";
```
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](https://github.com/EryX666/DFK-Hero-Viewer/edit/main/README.md#1-you-can-use-the-fliptoggle-property-to-give-the-card-the-ability-to-flip-on-user-click-instead-of-using-a-button--) for details.
To get the hero object needed to render the card correctly there is a function included called fetchHero
```js
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 -
```js
...return (
)
```
##### 1a. you can also spread props to the component -
```js
...
const props = { hero, isFlipped: true, isAnimated: false, flipToggle: true };
return (
)
```
##### 2. Render the hero on page load and a button to flip the card -
```js
import { useState, useEffect } from "react";
import { fetchHero, HeroCard } from "dfk-hero-viewer";
function App() {
const [hero, setHero] = useState(null);
const [flipped, setFlipped] = useState(false);
useEffect(() => {
const getHero = async () => {
let heroData = await fetchHero(1);
setHero(heroData);
};
getHero();
}, []);
return (
<>
{hero && (
<>
setFlipped(!flipped)}>Flip card
>
)}
>
);
}
export default App;
```
##### 3. A form to fetch the hero and render the card -
```js
import { useState } from "react";
import { fetchHero, HeroCard } from "dfk-hero-viewer";
interface heroData {
hero: any;
}
function SearchHero() {
const [hero, setHero] = useState(null);
const [heroIdInput, setHeroIdInput] = useState();
const onSubmit = async (evt: any) => {
evt.preventDefault();
const hero = await fetchHero(heroIdInput);
setHero(hero);
};
return (
<>
setHeroIdInput(e.target.value)}
type="text"
placeholder="Enter Hero Id"
>
Fetch hero card
{hero && (
<>
>
)}
>
);
}
```
## Credit
Thanks to [Kingdom studios](https://kingdomstudios.io/) the creators of [DefiKingdoms](https://defikingdoms.com/) 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](https://github.com/omer-bar) and Authors, [Licensed under ISC](/LICENSE.md).
---------------
#### 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