A simple gallery for Fantom Kittens

Related tags

Data Visualization fantom-kittens-gallery
Overview

Fantom Kittens Gallery

This is just a simple gallery to see your Fantom Kittens NFTs authenticating using MetaMask.

What this exactly do

  • Authenticating using MetaMask just to get your public wallet address;
  • Fetch your NFTs using PaintSwap API (they don't have docs about that, but I got it using their website);
  • Check which NFTs is from FantomKittens contract (0xfd211f3b016a75bc8d73550ac5adc2f1cae780c0);
  • Fetch on FantomKittens API the images of each FantomKitten ID that you have;
  • Show them using NES.css because it's pretty and pixelated

About the MetaMask usage

I know, this is strange, but I just did the MetaMask authentication to get your wallet because I wanted to learn how that works. So don't worry, I'm storing any usage data, or something like that, you can see the source code.

Feel free to use

This was just a test to know better about how NFTs works. So feel free to use this source for any purposes;

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

You might also like...

A simple ember component for adding Charts

Ember Chart This Ember CLI addon is a simple wrapper for ChartJS (v2.9). Compatibility Ember.js v3.12 or above Ember CLI v2.13 or above Node.js v10 or

Oct 24, 2022

Visualize your tech stack and database with a simple, beautiful, and interactive web app.

Stacify Visualize your tech stack and database with a simple, beautiful, and interactive web app. Why Stacify Why would you want to use Stacify? Well,

Jan 20, 2022

A simple tool to help you connect your favorite controllers / Arduino to various train simulator games on Windows using memory hacks.

A simple tool to help you connect your favorite controllers (e.g. Densha de Go! series) / Arduino to various train simulator games on Windows using memory hacks.

Feb 7, 2022

Simple yet flexible JavaScript charting for designers & developers

Simple yet flexible JavaScript charting for designers & developers Documentation All the links point to the new version 3 of the lib. Introduction Get

Jan 10, 2023

A simple script for pure javascript charts.

A simple script for pure javascript charts.

MK Charts A simple pure Javascript for displaying circle charts. Demo: https://mkirschen.de/mk-scripts/mk-charts/ Circle charts To insert a chart all

Dec 14, 2022

Unite Gallery - Responsive jQuery Image and Video Gallery Plugin. Aim to be the best gallery on the web on it's kind. See demo here:

##Unite Gallery - Responsive jQuery Gallery Plugin Product Link: unitegallery.net This gallery has commercial versions for: WordPress , Joomla! , Pres

Oct 24, 2022

Story Show Gallery - JS & React - minimalist, vertical photo gallery, mobile friendly

Story Show Gallery - JS & React - minimalist, vertical photo gallery, mobile friendly

Vertical photo gallery optimized for smartphones (notch area included). SSG will support your brand and marketing. Optimally placed captions, full screen lightbox, no ugly arrows

Oct 4, 2022

3D Infinite Art Gallery! This pulls from Reddit's r/Art and creates a procedural infinite art gallery from random (sfw-only) posts.

3D Infinite Art Gallery! This pulls from Reddit's r/Art and creates a procedural infinite art gallery from random (sfw-only) posts.

Infinite-Art-Gallery Click for Demo! 3D Infinite Procedurally-Generated Art Gallery! This pulls from Reddit's r/Art and creates a procedural infinite

Dec 15, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

A customizable, modular, responsive, lightbox gallery plugin.

A customizable, modular, responsive, lightbox gallery plugin.

lightGallery A customizable, modular, responsive, lightbox gallery plugin for jQuery. Demo JQuery lightGallery demo. Codepen demo Main features Fully

Jan 4, 2023

JavaScript image gallery for mobile and desktop, modular, framework independent

PhotoSwipe Repository JavaScript image gallery for mobile and desktop. Documentation and getting started guide. Demo and script home page. NPM npm ins

Dec 30, 2022

ASP.NET Core image gallery with Marten, ImageSharp, and HTMX

ASP.NET Core image gallery with Marten, ImageSharp, and HTMX

Image Gallery This sample uses the following core technologies to deliver an image gallery experience: ASP.NET Core Marten ImageSharp.Web HTMX This al

Feb 9, 2022

A static gallery website.

AZGallery A static gallery website. https://gallery.alynx.one/ Usage Copy config.example.json to config.json and modify it, then run node build.js or

Dec 25, 2022

JavaScript image gallery for mobile and desktop, modular, framework independent

PhotoSwipe v5 — JavaScript image gallery and lightbox Demo | Documentation Repo structure dist/ - main JS and CSS src/ - source JS and CSS. src/js/pho

Dec 29, 2022

Full featured JavaScript image & video gallery. No dependencies

Full featured JavaScript image & video gallery. No dependencies

lightgallery.js Full featured JavaScript lightbox gallery. No dependencies. Important notice lightgallery.js has been merged with lightGallery. That m

Dec 30, 2022

Fast Hugo gallery theme/module suitable for lots of images.

Fast Hugo gallery theme/module suitable for lots of images.

Gallery Deluxe A Hugo Module to show a photo gallery. It's very fast/effective, especially if you have lots of images on display. See the annotated in

Jan 2, 2023

Simple command handler by recon.. all credits to them. I just made it simple for others to use

Discord.js-v13-commandhandler An advanced command handler adapted from reconlx command handler and upgraded with more feature such as permission handl

May 11, 2022
Comments
  • feat: switching network when someone aren't into fantom mainnet

    feat: switching network when someone aren't into fantom mainnet

    this PR allows users that are current in other networks to switch to fantom network just by clicking on connect wallet button!

    I have tested these three cases:

    Should just connect when someone is already into fantom network ✅ Should switch the network and connect from someone who already has fantom network added in their metamask ✅ Should add the fantom network, switch, and connect from someone who doesn't have the fantom network in metamask ✅

    Ps: I didn't find how to switch the chain using web3-react, if there's a way please DM me on Discord and I'll fix it! my discord: nicolau#0040

    opened by NicolasLopes7 1
  • Rarity by color

    Rarity by color

    Problem

    We want a way to rank rarity by color, however the colors are random generated rgb colors and are unique for every kitten.

    Solution

    Convert the rgb color to a hsl color and use the hue part to identify its color using an twelve color wheel.

    Each color takes 30° from the color wheel and represents very accurately which color the kitten is 😃.

    The twelve colors are:

    • Red
    • Orange
    • Yellow
    • Chartreuse Green
    • Green
    • Spring Green
    • Cyan
    • Azure
    • Blue
    • Violet
    • Magenta
    • Rose
    opened by neubaner 0
  • add HSL computed attribute

    add HSL computed attribute

    Suggested on Discord;

    HSL is easier to track his rarity than RGB so this could be used as a new attribute.

    Suggested to use this lib too https://www.npmjs.com/package/tinycolor2.

    enhancement 
    opened by LeonardsonCC 0
Owner
Leonardson
Leonardson
GitHub fantom-kittens-gallery.vercel.app
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Babylon.js Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it. Any

Babylon.js 19.1k Jan 4, 2023
Simple responsive charts

Big welcome by the Chartist Guy Checkout the documentation site at http://gionkunz.github.io/chartist-js/ Checkout this lightning talk that gives you

Gion Kunz 26 Dec 30, 2022
Simple, responsive, modern SVG Charts with zero dependencies

Frappe Charts GitHub-inspired modern, intuitive and responsive charts with zero dependencies Explore Demos » Edit at CodePen » Contents Installation U

Frappe 14.6k Jan 4, 2023
Simple yet powerful JavaScript Charting library built using d3.js

uvCharts Simple, robust, extensible JavaScript charting library built using d3 designed to help developers embed, build charts in less than couple of

Imaginea 267 May 20, 2021
a super simple, no-nonsense diagramming library written in react that just works

Introduction DEMO: http://projectstorm.cloud/react-diagrams DOCS (wip) https://projectstorm.gitbook.io/react-diagrams Docs are currently being worked

Storm 7.4k Jan 4, 2023
Simple tiny dependency graph engine, MobX inspired

?? Quarx Simple tiny dependency graph engine, MobX inspired Introduction In less than 200 lines of code and zero dependencies Quarx supports most of M

Dmitry Maevsky 22 Nov 2, 2022
A simple and minimal, ultra-lightweight vanilla JS framework with 0 deps.

piss.js A simple and minimal, ultra-lightweight vanilla JS framework with 0 deps, containing one function, piss. This function has the background colo

grian 15 Oct 21, 2022
TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js Simple and configurable Bar and Line Chart library in Javascript Description TChart.js is a canvas-based simple Javascript Bar and Line Char

null 4 Mar 3, 2021
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 177 Jan 4, 2023
Simple package to facilitate and automate the use of charts in Laravel 5.x using Chartjs v2 library

laravel-chartjs - Chart.js v2 wrapper for Laravel 5.x Simple package to facilitate and automate the use of charts in Laravel 5.x using the Chart.js v2

Felix Costa 473 Dec 15, 2022