Initial version ✌️

- useNft().
- Supports multiple fetchers.
- One fetcher for now: ethers-fetcher.
- demo/ could be used as the project website.
- demo/ doesn’t build properly, need to fix TS types.

.github/workflows/gh-pages.yml

@@ -0,0 +1,26 @@
+name: GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'demo/**'
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/[email protected]
+
+      - name: Build use-nft
+        run: yarn install --frozen-lockfile && yarn build
+
+      - name: Build demo/
+        run: cd demo && yarn install --frozen-lockfile && yarn build
+
+      - name: Deploy
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: demo/dist

.github/workflows/main.yml

@@ -0,0 +1,32 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['10.x', '12.x', '14.x']
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+
+      - name: Build
+        run: yarn build

.github/workflows/size.yml

@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,6 @@
+*.log
+.DS_Store
+node_modules
+.cache
+.env
+dist

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": false
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Pierre Bertet
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,52 @@
+<p align=center><img src=https://user-images.githubusercontent.com/36158/112518000-e31bf780-8d90-11eb-9a52-0d9ed155cb70.png>
+
+useNft() allows to access the metadata of any NFT ([EIP 721](https://eips.ethereum.org/EIPS/eip-721), [EIP 1155](https://eips.ethereum.org/EIPS/eip-1155) and [more](https://www.larvalabs.com/cryptopunks)) on the Ethereum blockchain.
+
+## Install
+
+```console
+yarn add use-nft
+```
+
+## Usage
+
+```jsx
+import ethers from "ethers"
+import { ethersFetcher, NftProvider, useNft } from "use-nft"
+
+// Create the fetcher (Ethers.js here)
+const fetcher = ethersFetcher({ provider: ethers.getDefaultProvider() })
+
+// Wrap your app with <NftProvider /> and pass a fetcher
+function App() {
+  return (
+    <NftProvider fetcher={fetcher}>
+      <Nft />
+    </NftProvider>
+  )
+}
+
+// Pass the contract address and tokenId to useNft()
+function Nft() {
+  const nft = useNft("0xd07dc4262bcdbf85190c01c996b4c06a461d2430", "90473")
+
+  // nft.loading is true during load
+  if (nft.loading) return "Loading…"
+
+  // nft.error is true on error
+  if (nft.error) return "Error."
+
+  // ready
+  return (
+    <section>
+      <img src={nft.result.image} alt="" />
+      <h1>{nft.result.name}</h1>
+      <p>{nft.result.description}</p>
+    </section>
+  )
+}
+```
+
+## License
+
+MIT

demo/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

demo/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>
+      useNft() · Fetch NFTs from React − no matter how they were minted.
+    </title>
+    <style>
+      @font-face {
+        font-family: "IBM Plex Mono";
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url(IBMPlexMono-Light.woff2) format("woff2");
+      }
+      *,
+      *:before,
+      *:after {
+        box-sizing: border-box;
+      }
+      body,
+      h1 {
+        margin: 0;
+        font: 16px/1.4 "IBM Plex Mono", monospace;
+      }
+      body {
+        background: #111 url(pattern.svg) repeat 0 0;
+      }
+      body,
+      a {
+        color: #b98fb4;
+        text-decoration: none;
+        outline: 0;
+      }
+      a:focus:not(:focus-visible) {
+        background: transparent;
+        color: #b98fb4;
+      }
+      a:focus-visible {
+        background: #b98fb4;
+        color: #ddd;
+      }
+      #root {
+        display: grid;
+        justify-content: center;
+        padding: 0 80px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

demo/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "use-nft-demo",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.1.5",
+    "ethers": "^5.0.32",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-spring": "^9.0.0-rc.3",
+    "use-nft": "file:.."
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@vitejs/plugin-react-refresh": "^1.3.1",
+    "typescript": "^4.1.2",
+    "vite": "^2.1.0"
+  }
+}

demo/src/App.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import { ethers } from "ethers"
+import { NftProvider, ethersFetcher } from "use-nft"
+import Footer from "./Footer"
+import NftGrid from "./NftGrid"
+import Header from "./Header"
+import nfts from "./nfts"
+
+const nftFetcher = ethersFetcher({
+  provider: ethers.getDefaultProvider("homestead", {
+    infura: import.meta.env.VITE_INFURA_KEY,
+  }),
+})
+
+function App() {
+  return (
+    <NftProvider fetcher={nftFetcher}>
+      <Header />
+      <NftGrid nfts={nfts} />
+      <Footer />
+    </NftProvider>
+  )
+}
+
+export default App

demo/src/Footer.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+import { css } from "@emotion/react"
+import Navigation from "./Navigation"
+
+function Footer() {
+  return (
+    <footer
+      css={css`
+        padding-top: 60px;
+      `}
+    >
+      <Navigation swap />
+    </footer>
+  )
+}
+
+export default Footer

demo/src/Header.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef } from "react"
+import { css } from "@emotion/react"
+import { raf } from "./utils"
+import Navigation from "./Navigation"
+
+const emojis = [..."🌈🌼🌸🍔🍟🍕🌮🥞🥐🌭🍫🍩🍪🍿🍣🥪🍜🥟🍬🍮💛💖🥡💊🎁🎀"]
+
+function randomEmoji() {
+  return emojis[Math.floor(Math.random() * emojis.length)]
+}
+
+function useEmojiEffect() {
+  const elt = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const stop = raf(() => {
+      if (elt.current) {
+        elt.current.innerHTML = randomEmoji()
+      }
+    }, 1000 / 2)
+
+    return stop
+  }, [])
+
+  return elt
+}
+
+function Header() {
+  return (
+    <header
+      css={css`
+        position: relative;
+        padding: 0 0 60px;
+      `}
+    >
+      <Navigation />
+      <Title />
+      <Description />
+    </header>
+  )
+}
+
+function Title() {
+  const emojiElt = useEmojiEffect()
+  return (
+    <h1
+      title="useNft()"
+      css={css`
+        margin-top: 24px;
+        font-size: 40px;
+        text-align: center;
+      `}
+    >
+      let{" "}
+      <span
+        ref={emojiElt}
+        css={css`
+          display: inline-block;
+          width: 50px;
+          text-align: center;
+        `}
+      >
+        {randomEmoji()}
+      </span>{" "}
+      = useNft(address, id)
+    </h1>
+  )
+}
+
+function Description() {
+  return (
+    <p
+      css={css`
+        margin: 12px 0 0;
+        text-align: center;
+      `}
+    >
+      Fetch NFTs from React − no matter how they were minted.
+    </p>
+  )
+}
+
+export default Header

demo/src/LoopVideo.tsx

@@ -0,0 +1,17 @@
+import React, { useEffect, useRef } from "react"
+
+type LoopVideoProps = {} & React.HTMLProps<HTMLVideoElement>
+
+export default function LoopVideo(props: LoopVideoProps) {
+  const ref = useRef<null | HTMLVideoElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (el === null) return
+    el.muted = true
+    el.setAttribute("autoplay", "")
+    el.setAttribute("playsinline", "")
+  }, [])
+
+  return <video ref={ref} {...props} tabIndex={-1} />
+}