Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danny-englander/react-objkt-nfts
This project pulls in Objkt.com NFTs using the Objkt.com API via graphQL
https://github.com/danny-englander/react-objkt-nfts
cryptocurrency cssmodules-react graphql javascript jsx nft nfts react reactjs tezos tezos-blockchain
Last synced: about 2 months ago
JSON representation
This project pulls in Objkt.com NFTs using the Objkt.com API via graphQL
- Host: GitHub
- URL: https://github.com/danny-englander/react-objkt-nfts
- Owner: danny-englander
- License: mit
- Created: 2022-06-24T20:40:14.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-06-27T11:04:43.000Z (over 2 years ago)
- Last Synced: 2024-04-15T10:17:44.175Z (9 months ago)
- Topics: cryptocurrency, cssmodules-react, graphql, javascript, jsx, nft, nfts, react, reactjs, tezos, tezos-blockchain
- Language: SCSS
- Homepage:
- Size: 9.69 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Object.com NFTs
## Demo site
[https://objkt-nfts.netlify.app/](https://objkt-nfts.netlify.app/)
## Overview
This project pulls in my artwork that I have listed on [Objkt.com](https://objkt.com/collection/KT1UjcUAQWjNy4mYqUKwmBgEbu93aoos5qq5), an NFT marketplace built upon the Tezos cryptocurrency blockchain. This React app uses Objkt's API via graphQL to pull in data.
## Getting started
You can read some general info about [getting started with React](React-README.md).
## Install this project
This app is now on React 18. You should either be running Node version 16 or Node Version Manager. In the project directory, you can run:
```bash
nvm use
npm install
```
Thereafter, you can run `npm run start` to open the webpage. If you want to change any CSS, you can run `gulp` in a separate terminal window.
## Methodology and API
This project pulls in my own Objkt.com NFT collections as a sort of brochure site; that is to say, this does not have anything to do with NFT minting which is beyond the current scope of the project.
I wrote a custom query in `ObjktQuery.jsx` that pulls in graphQL data from the Objkt.com API endpoint here: [https://data.objkt.com/explore/](https://data.objkt.com/explore/).
The key part of the query is:
```sql
query objkts {
fa(where: {contract:
{_in:
["KT1W7eBKSVZB3xhwXCX8PpMivbK19wgh21QS",
"KT1UjcUAQWjNy4mYqUKwmBgEbu93aoos5qq5"]
}},
order_by: {name: asc}) {...
```
This points to the two smart contract ids for my collections. You can copy and paste the entire query into Objkt's graphQL explorer and adjust to your own liking within the endpoint linked to above.
To view Objkt's API documentation, go to [https://data.objkt.com/docs/](https://data.objkt.com/docs/)
## Image handing
Currently, images are handled locally for better performance and responsiveness. For example, we can use API data to render the matching collection id image.
```jsx
img src={`/assets/nft-dist/${item.fa.contract}-${item.token_id}.jpg
```
If you want to pull images directly from the The InterPlanetary File System or IPFS, you could do something like this:
```jsx
img src={`https://ipfs.io/ipfs/${item.thumbnail_uri.slice(7)}`}
```
Be aware that pulling images from IPFS will severely degrade performance, even using Objkt's `thumbnail_uri` image.
If you want to process images using gulp, place source images in a folder at `src/assets/nft-src` and then run gulp. Appropriately sized JPG and webP images will then be rendered at `public/assets/nft-dist` for use in this app. You should name images according to the contract and token id, for example, `KT1UjcUAQWjNy4mYqUKwmBgEbu93aoos5qq5-7.jpg` where the long string is the smart contract id and the `-7` is the token id of the NFT in your Objkt.com collection.
## CSS / SCSS
This project implements the latest Sass module methods using `@use` and `@forward` dropping usage of the now legacy `@import` method.
The React components use [CSS modules](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/).
## Performance
To measure performance on this site, ensure you are using the production build with an incognito browser. Here is the Lighthouse score below.
## TODO
- Theme header
- Theme footer
- Use local images
- Implement responsive images
- Implement webP image formats
- Demo site on Netlify
- Upgrade to Node v18
- Lazy load ObjktRender using React Suspense
- Implement React Helmet for OG and Twitter card tags.
## Roadmap
- TBD